clean up live samples in CSS/appearance (#899)

* clean up live samples in CSS/appearance * Update vs. en-US counterpart Co-authored-by: julieng <julien.gattelier@gmail.com>
author: Peter Bengtsson <mail@peterbe.com> 2021-05-17 14:59:47 -0400
committer: GitHub <noreply@github.com> 2021-05-17 20:59:47 +0200
commit: ffc1c18ba7f546ef8103ad587592a2cfaf88e609 (patch)
tree: 85ae5bbf3259390f40db75c1407d2919a27582d4 /files/fr/web
parent: dd2a42c94ba6ae6d2f9f05e860c8de169f7aef41 (diff)
download: translated-content-ffc1c18ba7f546ef8103ad587592a2cfaf88e609.tar.gz
translated-content-ffc1c18ba7f546ef8103ad587592a2cfaf88e609.tar.bz2
translated-content-ffc1c18ba7f546ef8103ad587592a2cfaf88e609.zip
1 files changed, 197 insertions, 2288 deletions
diff --git a/files/fr/web/css/appearance/index.html b/files/fr/web/css/appearance/index.html
index feb8aad1be..1de60de406 100644
--- a/files/fr/web/css/appearance/index.html
+++ b/files/fr/web/css/appearance/index.html
@@ -1,14 +1,19 @@
 ---
-title: 'appearance (-moz-appearance, -webkit-appearance)'
+title: appearance (-moz-appearance, -webkit-appearance)
 slug: Web/CSS/appearance
 tags:
+  - '-moz-appearance'
+  - '-webkit-appearance'
   - CSS
-  - Non-standard
-  - Propriété
+  - CSS Basic User Interface
+  - CSS Property
   - Reference
+  - appearance
+  - recipe:css-property
 translation_of: Web/CSS/appearance
+browser-compat: css.properties.appearance
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+<div>{{CSSRef}}</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>
 
@@ -18,2619 +23,524 @@ translation_of: Web/CSS/appearance
 
 <p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à 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>
+<p>Cette propriété était utilisée dans les feuilles de style XUL 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 XBL 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>
+<p><strong>Note :</strong><em> 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>
+<h2 id="syntax">Syntaxe</h2>
 
-<pre class="brush: css">/* Valeurs pour la spécification CSS Basic User Interface Module Level 4 */
+<pre class="brush: css">/* Valeurs spécifiées par le module CSS Basic User Interface de niveau 4 */
 appearance: none;
 appearance: auto;
-appearance: button;
+appearance: menulist-button;
 appearance: textfield;
+
+/* Valeurs ayant le même effet que 'auto' */
+appearance: button;
 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 */
+/* Liste partielle des valeurs disponibles pour Gecko */
 -moz-appearance: scrollbarbutton-up;
--moz-appearance: <code>button-bevel;</code>
+-moz-appearance: button-bevel;
 
-/* Liste des valeurs disponibles pour WebKit/Blink (ainsi que pour Gecko et Edge) */
--webkit-appearance: <code>media-mute-button</code>;
+/* Liste partielle des valeurs disponibles pour WebKit/Blink (ainsi que pour Gecko et Edge) */
+-webkit-appearance: media-mute-button;
 -webkit-appearance: caret;
 </pre>
 
-<h3 id="Valeurs">Valeurs</h3>
+<h3 id="values">Valeurs</h3>
 
-<p><code>&lt;appearance&gt; </code>est l’une des valeurs suivantes :</p>
+<h4 id="standard_keywords">Mots-clés standard</h4>
 
 <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>
+   <td>Aucune mise en forme particulière n'est appliquée. C'est la valeur 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>
+   <td><code>auto</code></td>
+   <td>Firefox Chrome</td>
+   <td>L'agent utilisateur sélectionne la mise en forme spécifique appropriée en fonction de l'élément. Cette valeur agira comme <code>none</code> pour les éléments sans mise en forme spéciale.</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>
+   <td><code>menulist-button</code></td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td>L'élément est mis en forme comme un bouton qui indiquerait qu'un menu pourrait être ouvert.</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><code>textfield</code></td>
    <td>Firefox Chrome Safari Edge</td>
-   <td>L'élément est dessiné comme un bouton.</td>
+   <td></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>
+   <td colspan="3">Les valeurs suivantes sont traitées de façon équivalente à <code>auto</code>:</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>
+   <td><code>button</code></td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td>L'élément est dessiné comme un bouton.</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>
+   <td><code>checkbox</code></td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td>L'élément est dessiné comme une case à cocher (et n'inclut que la case à cocher).</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><code>listbox</code></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>
+   <td><code>menulist</code></td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td></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><code>meter</code></td>
+   <td>Chrome Safari Firefox</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><code>progress-bar</code></td>
+   <td>Chrome Safari Firefox</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><code>push-button</code></td>
+   <td>Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>radio</code></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>
+   <td>L'élément est dessiné comme un bouton radio (et n'inclut que la portion liée au « bouton radio »).</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>
+   <td><code>searchfield</code></td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td></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><code>slider-horizontal</code></td>
+   <td>Chrome Safari Edge</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><code>square-button</code></td>
+   <td>Chrome Safari Edge</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>
+   <td><code>textarea</code></td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="non-standard_keywords">Mots-clés non-standards</h4>
 
-    <pre class="brush: html">
-&lt;div&gt;Lorem&lt;/div&gt;</pre>
-    </div>
-    {{EmbedLiveSample("sample-color-well",100,50,"","","nobutton")}}</td>
+<p>Les valeurs suivantes sont uniquement implémentées pour l'une ou l'autre des propriétés préfixées mais pas pour la propriété standard <strong><code>appearance</code></strong>.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Valeur</th>
+   <th>Navigateur</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td><code>attachment</code></td>
    <td>Safari</td>
-   <td><code>input type=color</code></td>
+   <td></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><code>borderless-attachment</code></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><code>button-bevel</code></td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>caps-lock-indicator</code></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><code>caret</code></td>
+   <td>Firefox Chrome Safari Edge</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><code>checkbox-container</code></td>
    <td>Firefox</td>
-   <td>Retiré avec Fx 64</td>
+   <td>L'élément est dessiné comme le conteneur d'une case à cocher. Il pourra inclure un effet d'arrière-plan sur certaines plateformes. Normalement, il devrait contenir un libellé et une case à cocher.</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><code>checkbox-label</code></td>
    <td>Firefox</td>
-   <td>Retiré avec Fx 64</td>
+   <td></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><code>checkmenuitem</code></td>
+   <td>Firefox</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><code>color-well</code></td>
+   <td>Safari</td>
+   <td><code>input type=color</code></td>
+  </tr>
+  <tr>
+   <td><code>continuous-capacity-level-indicator</code></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><code>default-button</code></td>
+   <td>Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>discrete-capacity-level-indicator</code></td>
    <td>Safari</td>
-   <td>Liste de données.</td>
+   <td></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><code>inner-spin-button</code></td>
+   <td>Firefox Chrome Safari</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><code>image-controls-button</code></td>
+   <td>Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>list-button</code></td>
+   <td>Safari</td>
+   <td>datalist</td>
+  </tr>
+  <tr>
+   <td><code>listitem</code></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><code>media-enter-fullscreen-button</code></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><code>media-exit-fullscreen-button</code></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><code>media-fullscreen-volume-slider</code></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><code>media-fullscreen-volume-slider-thumb</code></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><code>media-mute-button</code></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><code>media-play-button</code></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><code>media-overlay-play-button</code></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><code>media-return-to-realtime-button</code></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><code>media-rewind-button</code></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><code>media-seek-back-button</code></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><code>media-seek-forward-button</code></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><code>media-toggle-closed-captions-button</code></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><code>media-slider</code></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><code>media-sliderthumb</code></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><code>media-volume-slider-container</code></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><code>media-volume-slider-mute-button</code></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><code>media-volume-slider</code></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><code>media-volume-sliderthumb</code></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><code>media-controls-background</code></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><code>media-controls-dark-bar-background</code></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><code>media-controls-fullscreen-background</code></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><code>media-controls-light-bar-background</code></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><code>media-current-time-display</code></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><code>media-time-remaining-display</code></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><code>menulist-text</code></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><code>menulist-textfield</code></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>
+   <td>L'élément est mis en forme comme le champ texte d'une liste de menu (non implémenté sur Windows).</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><code>meterbar</code></td>
    <td>Firefox</td>
-   <td>Retiré avec Fx 64</td>
+   <td>On utilisera <code>meter</code> à la place.</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><code>number-input</code></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><code>progress-bar-value</code></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><code>progressbar</code></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>
+   <td>Cet élément est mis en forme comme une barre de progression, aussi, 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><code>progressbar-vertical</code></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><code>range</code></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><code>range-thumb</code></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><code>rating-level-indicator</code></td>
+   <td>Safari</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><code>relevancy-level-indicator</code></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><code>scale-horizontal</code></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><code>scalethumbend</code></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><code>scalethumb-horizontal</code></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><code>scalethumbstart</code></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><code>scalethumbtick</code></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><code>scalethumb-vertical</code></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><code>scale-vertical</code></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><code>scrollbarthumb-horizontal</code></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><code>scrollbarthumb-vertical</code></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><code>scrollbartrack-horizontal</code></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><code>scrollbartrack-vertical</code></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><code>searchfield-decoration</code></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>
+   <td><code>searchfield-results-decoration</code></td>
+   <td>Chrome Safari Edge</td>
+   <td>(Fonctionne sur Chrome 51 sur Windows 7)</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><code>searchfield-results-button</code></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><code>searchfield-cancel-button</code></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><code>snapshotted-plugin-overlay</code></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><code>sheet</code></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><code>slider-vertical</code></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><code>sliderthumb-horizontal</code></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><code>sliderthumb-vertical</code></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><code>textfield-multiline</code></td>
    <td>Firefox</td>
-   <td>Retiré avec Fx 64.</td>
+   <td>On utilisera <code>textarea</code> à la place.</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><code>-apple-pay-button</code></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>
+   <td><strong>iOS et macOS uniquement</strong>. Disponible pour le Web à partir de iOS 10.1 et macOS 10.12.1</td>
   </tr>
  </tbody>
 </table>
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+<h3 id="formal_syntax">Syntaxe formelle</h3>
 
 {{CSSSyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+<h2 id="examples">Exemples</h2>
 
 <p>La règle suivante permet que l'élément ait l'apparence d'un bouton d'une barre d'outils :</p>
 
@@ -2641,7 +551,9 @@ div{ color: black;
 }
 </pre>
 
-<h2 id="Spécifications">Spécifications</h2>
+<p>Voir également <a href="https://jsfiddle.net/go392m5s/">cet exemple JSFiddle</a> qui illustre comment utiliser <code>appearance: none</code> afin d'appliquer une mise en forme spécifique aux boutons radio et aux cases à cocher.</p>
+
+<h2 id="specifications">Spécifications</h2>
 
 <table class="standard-table">
  <thead>
@@ -2662,16 +574,13 @@ div{ color: black;
 
 <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>
+<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
 
-<p>{{Compat("css.properties.appearance")}}</p>
+<p>{{Compat}}</p>
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+<h2 id="see_also">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>
+ <li><a 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://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>
author	Peter Bengtsson <mail@peterbe.com>	2021-05-17 14:59:47 -0400
committer	GitHub <noreply@github.com>	2021-05-17 20:59:47 +0200
commit	ffc1c18ba7f546ef8103ad587592a2cfaf88e609 (patch)
tree	85ae5bbf3259390f40db75c1407d2919a27582d4 /files/fr/web
parent	dd2a42c94ba6ae6d2f9f05e860c8de169f7aef41 (diff)
download	translated-content-ffc1c18ba7f546ef8103ad587592a2cfaf88e609.tar.gz translated-content-ffc1c18ba7f546ef8103ad587592a2cfaf88e609.tar.bz2 translated-content-ffc1c18ba7f546ef8103ad587592a2cfaf88e609.zip