initial commit

1018 files changed, 139620 insertions, 0 deletions

diff --git a/files/fr/web/css/--_star_/index.html b/files/fr/web/css/--_star_/index.html
new file mode 100644
index 0000000000..9f1c30cbba
--- /dev/null
+++ b/files/fr/web/css/--_star_/index.html
@@ -0,0 +1,93 @@
+---
+title: Propriétés personnalisées (--*)
+slug: Web/CSS/--*
+tags:
+  - CSS
+  - Experimental
+  - Reference
+  - Variables
+  - Variables CSS
+translation_of: Web/CSS/--*
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>Les noms des propriétés qui sont préfixés par deux tirets : <code>--</code> (par exemple : <code>--nom-exemple</code>) représentent des propriétés personnalisées (<em>custom properties</em>) qui peuvent contenir une valeur qui pourra être réutilisée dans le document grâce à la fonction {{cssxref("var")}}.</p>
+
+<p>La portée des propriétés personnalisées est celle des éléments sur lesquels elles sont déclarées. Ces personnalisées contribuent à la cascade : la valeur utilisée d'une propriété personnalisée sera déterminée par l'algorithme de la cascade.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">--unmotcle: left;
+--unecouleur: #0000ff;
+--unevaleurcomplexe: 3px 6px rgb(20, 32, 54);
+</pre>
+
+<dl>
+ <dt><code>&lt;declaration-value&gt;</code></dt>
+ <dd>Cette valeur correspond à une séquence de un ou plusieurs fragments tant que la séquence ne contient pas de fragments interdits. Elle représente l'intégralité de ce qu'une déclaration valide peut avoir comme valeur.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p id="premierParagraphe"&gt;Ce paragraphe devrait être sur fond bleu avec un texte jaune.&lt;/p&gt;
+&lt;p id="secondParagraphe"&gt;Ce paragraphe devrait être sur fond jaune avec un texte bleu.&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[2,3]">:root {
+  --premiere-couleur: #488cff;
+  --seconde-couleur: #ffff8c;
+}
+
+#premierParagraphe {
+  background-color: var(--premiere-couleur);
+  color: var(--seconde-couleur);
+}
+
+#secondParagraphe {
+  background-color: var(--seconde-couleur);
+  color: var(--premiere-couleur);
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', 500, 100)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Variables", "#defining-variables", "--*")}}</td>
+   <td>{{Spec2("CSS3 Variables")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.custom-property")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Les_variables_CSS">Utiliser les variables CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/-moz-binding/index.html b/files/fr/web/css/-moz-binding/index.html
new file mode 100644
index 0000000000..509abfe15a
--- /dev/null
+++ b/files/fr/web/css/-moz-binding/index.html
@@ -0,0 +1,64 @@
+---
+title: '-moz-binding'
+slug: Web/CSS/-moz-binding
+tags:
+  - CSS
+  - Déprécié
+  - Non-standard
+  - Propriété
+  - Reference
+  - XBL
+translation_of: Archive/Web/CSS/-moz-binding
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété <strong><code>-moz-binding</code></strong>, utilisée par les applications Mozilla, permet d'attacher une liaison (<em>binding</em>) <a href="/fr/docs/XBL">XBL</a> à un élément DOM.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css">/* Valeur de type &lt;url&gt; */
+-moz-binding: url(http://www.exemple.org/xbl/htmlBindings.xml#checkbox);
+
+/* Valeurs globales */
+-moz-binding: inherited;
+-moz-binding: initial;
+-moz-binding: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;url&gt;</code></dt>
+ <dd>L'URL (typ {{cssxref("&lt;url&gt;")}} depuis laquelle effectuer la liaison XBL (l'URL inclue le fragment d'identification)</dd>
+ <dt><code>none</code></dt>
+ <dd>Aucune liaison XBL n'est appliquée à l'élément.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">.exemple {
+  -moz-binding: url(http://www.exemple.org/xbl/htmlBindings.xml#radiobutton);
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-moz-binding")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Mozilla/Tech/XBL/XBL_1.0_Reference/Binding_Attachment_and_Detachment">La référence XBL : attacher et détacher des <em>bindings</em></a></li>
+ <li><a href="/fr/docs/Tutoriel_XUL/Introduction_à_XBL">Tutoriel XUL : Introduction à XBL</a></li>
+</ul>
diff --git a/files/fr/web/css/-moz-border-bottom-colors/index.html b/files/fr/web/css/-moz-border-bottom-colors/index.html
new file mode 100644
index 0000000000..7f13373584
--- /dev/null
+++ b/files/fr/web/css/-moz-border-bottom-colors/index.html
@@ -0,0 +1,96 @@
+---
+title: '-moz-border-bottom-colors'
+slug: Web/CSS/-moz-border-bottom-colors
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-moz-border-bottom-colors
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>Pour les applications Mozilla, la propriété <code><strong>-moz-border-bottom-colors</strong></code> définit une liste de couleurs à utiliser pour mettre en forme la bordure du côté bas.</p>
+
+<pre class="brush:css no-line-numbers">/* Une couleur  */
+/* Type &lt;color&gt; */
+-moz-border-bottom-colors: #f0f0f0;
+
+/* Plusieurs valeurs &lt;color&gt; */
+-moz-border-bottom-colors: #f0f0f0 #a0a0a0 #505050 #000000;
+
+/* Valeurs globales */
+-moz-border-bottom-colors: inherit;
+-moz-border-bottom-colors: initial;
+-moz-border-bottom-colors: unset;
+</pre>
+
+<p>Lorsque la bordure d'un élément est plus épaisse qu'un pixel CSS, chaque ligne de pixels utilisera une des couleurs indiquées (en allant de l'extérieur vers l'intérieur). Cela permet d'éviter l'utilisation de boîtes imbriquées. Si la bordure est plus large que le nombre de couleurs indiquées, la partie restante de la bordure sera peinte avec la couleur utilisée le plus à intérieur.</p>
+
+<p>{{cssinfo}}</p>
+
+<p>Cette propriété n'est pas appliquée :</p>
+
+<ol>
+ <li>Si {{cssxref("border-style")}} vaut <code>dashed</code> ou <code>dotted</code>.</li>
+ <li>Aux tableaux pour lesquels <code>border-collapse: collapse</code>.</li>
+</ol>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>Cette propriété permet d'utiliser une liste de couleurs séparées par des blancs.</p>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>Définit la couleur à utiliser pour une ligne de pixels de la bordure basse. La valeur <code>transparent</code> est valide. Voir {{cssxref("&lt;color&gt;")}} pour les valeurs et unités possibles.</dd>
+ <dt><code>none</code></dt>
+ <dd>La valeur initiale de la propriété, aucune couleur n'est utilisée ou {{cssxref("border-color")}} est utilisée si elle est définie.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">#exemple {
+  padding: 20px;
+  background-color: gray;
+  border: 10px solid black;
+  -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+  -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html">&lt;div id="exemple"&gt;Exemple&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 120, 90)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-moz-border-bottom-colors")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("border-color")}}</li>
+ <li>{{cssxref("-moz-border-top-colors")}}</li>
+ <li>{{cssxref("-moz-border-right-colors")}}</li>
+ <li>{{cssxref("-moz-border-left-colors")}}</li>
+</ul>
diff --git a/files/fr/web/css/-moz-border-left-colors/index.html b/files/fr/web/css/-moz-border-left-colors/index.html
new file mode 100644
index 0000000000..417c62f00a
--- /dev/null
+++ b/files/fr/web/css/-moz-border-left-colors/index.html
@@ -0,0 +1,95 @@
+---
+title: '-moz-border-left-colors'
+slug: Web/CSS/-moz-border-left-colors
+tags:
+  - CSS
+  - Non-standard
+  - Reference
+translation_of: Archive/Web/CSS/-moz-border-left-colors
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>Pour les applications Mozilla, la propriété <code><strong>-moz-border-left-colors</strong></code> définit une liste de couleurs à utiliser pour mettre en forme la bordure du côté gauche.</p>
+
+<pre class="brush:css no-line-numbers">/* Une couleur  */
+/* Type &lt;color&gt; */
+-moz-border-left-colors: #f0f0f0;
+
+/* Plusieurs valeurs &lt;color&gt; */
+-moz-border-left-colors: #f0f0f0 #a0a0a0 #505050 #000000;
+
+/* Valeurs globales */
+-moz-border-left-colors: inherit;
+-moz-border-left-colors: initial;
+-moz-border-left-colors: unset;
+</pre>
+
+<p>Lorsque la bordure d'un élément est plus épaisse qu'un pixel CSS, chaque ligne de pixels utilisera une des couleurs indiquées (en allant de l'extérieur vers l'intérieur). Cela permet d'éviter l'utilisation de boîtes imbriquées. Si la bordure est plus large que le nombre de couleurs indiquées, la partie restante de la bordure sera peinte avec la couleur utilisée le plus à intérieur.</p>
+
+<p>{{cssinfo}}</p>
+
+<p>Cette propriété n'est pas appliquée :</p>
+
+<ol>
+ <li>Si {{cssxref("border-style")}} vaut <code>dashed</code> ou <code>dotted</code>.</li>
+ <li>Aux tableaux pour lesquels <code>border-collapse: collapse</code>.</li>
+</ol>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>Cette propriété permet d'utiliser une liste de couleurs séparées par des blancs.</p>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>Définit la couleur à utiliser pour une ligne de pixels de la bordure gauche. La valeur <code>transparent</code> est valide. Voir {{cssxref("&lt;color&gt;")}} pour les valeurs et unités possibles.</dd>
+ <dt><code>none</code></dt>
+ <dd>La valeur initiale de la propriété, aucune couleur n'est utilisée ou {{cssxref("border-color")}} est utilisée si elle est définie.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">#exemple {
+  padding: 20px;
+  background-color: gray;
+  border: 10px solid black;
+  -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+  -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html">&lt;div id="exemple"&gt;Exemple&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 120, 90)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-moz-border-left-colors")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("border-color")}}</li>
+ <li>{{cssxref("-moz-border-top-colors")}}</li>
+ <li>{{cssxref("-moz-border-bottom-colors")}}</li>
+ <li>{{cssxref("-moz-border-right-colors")}}</li>
+</ul>
diff --git a/files/fr/web/css/-moz-border-right-colors/index.html b/files/fr/web/css/-moz-border-right-colors/index.html
new file mode 100644
index 0000000000..ee49e0effe
--- /dev/null
+++ b/files/fr/web/css/-moz-border-right-colors/index.html
@@ -0,0 +1,96 @@
+---
+title: '-moz-border-right-colors'
+slug: Web/CSS/-moz-border-right-colors
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-moz-border-right-colors
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>Pour les applications Mozilla, la propriété <code><strong>-moz-border-right-colors</strong></code> définit une liste de couleurs à utiliser pour mettre en forme la bordure du côté droit.</p>
+
+<pre class="brush:css no-line-numbers">/* Une couleur  */
+/* Type &lt;color&gt; */
+-moz-border-right-colors: #f0f0f0;
+
+/* Plusieurs valeurs &lt;color&gt; */
+-moz-border-right-colors: #f0f0f0 #a0a0a0 #505050 #000000;
+
+/* Valeurs globales */
+-moz-border-right-colors: inherit;
+-moz-border-right-colors: initial;
+-moz-border-right-colors: unset;
+</pre>
+
+<p>Lorsque la bordure d'un élément est plus épaisse qu'un pixel CSS, chaque ligne de pixels utilisera une des couleurs indiquées (en allant de l'extérieur vers l'intérieur). Cela permet d'éviter l'utilisation de boîtes imbriquées. Si la bordure est plus large que le nombre de couleurs indiquées, la partie restante de la bordure sera peinte avec la couleur utilisée le plus à intérieur.</p>
+
+<p>{{cssinfo}}</p>
+
+<p>Cette propriété n'est pas appliquée :</p>
+
+<ol>
+ <li>Si {{cssxref("border-style")}} vaut <code>dashed</code> ou <code>dotted</code>.</li>
+ <li>Aux tableaux pour lesquels <code>border-collapse: collapse</code>.</li>
+</ol>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>Cette propriété permet d'utiliser une liste de couleurs séparées par des blancs.</p>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>Définit la couleur à utiliser pour une ligne de pixels de la bordure droite. La valeur <code>transparent</code> est valide. Voir {{cssxref("&lt;color&gt;")}} pour les valeurs et unités possibles.</dd>
+ <dt><code>none</code></dt>
+ <dd>La valeur initiale de la propriété, aucune couleur n'est utilisée ou {{cssxref("border-color")}} est utilisée si elle est définie.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">#exemple {
+  padding: 20px;
+  background-color: gray;
+  border: 10px solid black;
+  -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+  -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html">&lt;div id="exemple"&gt;Exemple&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 120, 90)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-moz-border-right-colors")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("border-color")}}</li>
+ <li>{{cssxref("-moz-border-top-colors")}}</li>
+ <li>{{cssxref("-moz-border-bottom-colors")}}</li>
+ <li>{{cssxref("-moz-border-left-colors")}}</li>
+</ul>
diff --git a/files/fr/web/css/-moz-border-top-colors/index.html b/files/fr/web/css/-moz-border-top-colors/index.html
new file mode 100644
index 0000000000..cbb381bab6
--- /dev/null
+++ b/files/fr/web/css/-moz-border-top-colors/index.html
@@ -0,0 +1,96 @@
+---
+title: '-moz-border-top-colors'
+slug: Web/CSS/-moz-border-top-colors
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-moz-border-top-colors
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>Pour les applications Mozilla, la propriété {{cssxref("-moz-border-top-colors")}} définit une liste de couleurs à utiliser pour mettre en forme la bordure du côté haut.</p>
+
+<pre class="brush:css no-line-numbers">/* Une couleur  */
+/* Type &lt;color&gt; */
+-moz-border-top-colors: #f0f0f0;
+
+/* Plusieurs valeurs &lt;color&gt; */
+-moz-border-top-colors: #f0f0f0 #a0a0a0 #505050 #000000;
+
+/* Valeurs globales */
+-moz-border-top-colors: inherit;
+-moz-border-top-colors: initial;
+-moz-border-top-colors: unset;
+</pre>
+
+<p>Lorsque la bordure d'un élément est plus épaisse qu'un pixel CSS, chaque ligne de pixels utilisera une des couleurs indiquées (en allant de l'extérieur vers l'intérieur). Cela permet d'éviter l'utilisation de boîtes imbriquées. Si la bordure est plus large que le nombre de couleurs indiquées, la partie restante de la bordure sera peinte avec la couleur utilisée le plus à intérieur.</p>
+
+<p>{{cssinfo}}</p>
+
+<p>Cette propriété n'est pas appliquée :</p>
+
+<ol>
+ <li>Si {{cssxref("border-style")}} vaut <code>dashed</code> ou <code>dotted</code>.</li>
+ <li>Aux tableaux pour lesquels <code>border-collapse: collapse</code>.</li>
+</ol>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>Cette propriété permet d'utiliser une liste de couleurs séparées par des blancs.</p>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>Définit la couleur à utiliser pour une ligne de pixels de la bordure haute. La valeur <code>transparent</code> est valide. Voir {{cssxref("&lt;color&gt;")}} pour les valeurs et unités possibles.</dd>
+ <dt><code>none</code></dt>
+ <dd>La valeur initiale de la propriété, aucune couleur n'est utilisée ou {{cssxref("border-color")}} est utilisée si elle est définie.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">#exemple {
+  padding: 20px;
+  background-color: gray;
+  border: 10px solid black;
+  -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+  -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html">&lt;div id="exemple"&gt;Exemple&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 120, 90)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-moz-border-top-colors")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("border-color")}}</li>
+ <li>{{cssxref("-moz-border-right-colors")}}</li>
+ <li>{{cssxref("-moz-border-bottom-colors")}}</li>
+ <li>{{cssxref("-moz-border-left-colors")}}</li>
+</ul>
diff --git a/files/fr/web/css/-moz-box-ordinal-group/index.html b/files/fr/web/css/-moz-box-ordinal-group/index.html
new file mode 100644
index 0000000000..583d8e5bf2
--- /dev/null
+++ b/files/fr/web/css/-moz-box-ordinal-group/index.html
@@ -0,0 +1,73 @@
+---
+title: '-moz-box-ordinal-group'
+slug: Web/CSS/-moz-box-ordinal-group
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/box-ordinal-group
+---
+<div>{{CSSRef}}</div>
+
+<div class="warning">
+<p><strong>Attention ! </strong>Cette propriété a été implémentée pour les premiers brouillons de la spécification pour le module de boîtes flexibles. Elle a été remplacée par des propriétés standards depuis, pour plus d'informations sur ce qui doit être utilisé à la place, consultez l'article sur <a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS/Utilisation_des_flexbox_en_CSS" title="/en/CSS/Flexible_boxes">les boîtes flexibles</a>.</p>
+</div>
+
+<p>La propriété <code><strong>-moz-box-ordinal-group</strong></code> indique le groupe ordinal auquel appartient l'élément. Les éléments dont le groupe ordinal est inférieur seront affichés avant ceux dont le groupe ordinal est plus élevé.</p>
+
+<h2 id="Valeurs">Valeurs</h2>
+
+<p>Cette propriété accepte des valeurs entières strictement positives. La valeur initiale de cette propriété est 1.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#Flexbox {
+  display: -ms-box;
+  display: -moz-box;
+  display: -webkit-box;
+}
+
+#text1 {
+  background: red;
+  -ms-box-ordinal-group: 4;
+  -moz-box-ordinal-group: 4;
+  -webkit-box-ordinal-group: 4;
+}
+
+#text2 {
+  background: green;
+  -ms-box-ordinal-group: 3;
+  -moz-box-ordinal-group: 3;
+  -webkit-box-ordinal-group: 3;
+}
+
+#text3 {
+  background: blue;
+  -ms-box-ordinal-group: 2;
+  -moz-box-ordinal-group: 2;
+  -webkit-box-ordinal-group: 2;
+}
+
+#text4 {
+  background: orange;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="Flexbox"&gt;
+  &lt;div id="text1"&gt;text 1&lt;/div&gt;
+  &lt;div id="text2"&gt;text 2&lt;/div&gt;
+  &lt;div id="text3"&gt;text 3&lt;/div&gt;
+  &lt;div id="text4"&gt;text 4&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","300","300")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.</p>
diff --git a/files/fr/web/css/-moz-cell/index.html b/files/fr/web/css/-moz-cell/index.html
new file mode 100644
index 0000000000..4c1b204759
--- /dev/null
+++ b/files/fr/web/css/-moz-cell/index.html
@@ -0,0 +1,15 @@
+---
+title: '-moz-cell'
+slug: Web/CSS/-moz-cell
+tags:
+  - CSS
+  - Obsolete
+  - Propriété
+  - Reference
+translation_of: Web/CSS/cursor
+---
+<div class="boxed translate-rendered">
+<div>{{CSSRef}}{{deprecated_header}}</div>
+
+<p><em>Ne pas utiliser cette valeur ! </em>C'est la valeur <code>cursor</code> {{cssxref("cursor#cell","cell")}} qui doit être utilisée à la place.</p>
+</div>
diff --git a/files/fr/web/css/-moz-context-properties/index.html b/files/fr/web/css/-moz-context-properties/index.html
new file mode 100644
index 0000000000..fbb2c9094c
--- /dev/null
+++ b/files/fr/web/css/-moz-context-properties/index.html
@@ -0,0 +1,83 @@
+---
+title: '-moz-context-properties'
+slug: Web/CSS/-moz-context-properties
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/-moz-context-properties
+---
+<div>{{CSSRef}}{{Non-standard_header}}{{SeeCompatTable}}</div>
+
+<p>Si on intègre une image SVG dans une page web grâce à un élément remplacé (généralement l'élément {{htmlelement("img")}}), il est possible d'appliquer les propriétés de l'élément <code>&lt;img&gt;</code> à l'image SVG (de même pour les autres contextes qui intègreraient une image SVG) grâce à la propriété <code>-moz-context-properties</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css">/* Valeurs avec un mot-clé */
+-moz-context-properties: fill;
+-moz-context-properties: fill, stroke;
+
+/* Valeurs globales */
+-moz-context-properties: inherit;
+-moz-context-properties: initial;
+-moz-context-properties: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>fill</code></dt>
+ <dd>Expose la valeur <code>fill</code> appliquée sur l'image afin qu'elle soit appliquée sur le SVG.</dd>
+ <dt><code>stroke</code></dt>
+ <dd>Expose la valeur <code>stroke</code> appliquée sur l'image afin qu'elle soit appliquée sur le SVG.</dd>
+ <dt><code>fill-opacity</code></dt>
+ <dd>Expose la valeur <code>fill-opacity</code> appliquée sur l'image afin qu'elle soit appliquée sur le SVG.</dd>
+ <dt><code>stroke-opacity</code></dt>
+ <dd>Expose la valeur <code>stroke-opacity</code> appliquée sur l'image afin qu'elle soit appliquée sur le SVG.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, on embarque un SVG simple dans un élément <code>&lt;img&gt;</code>.</p>
+
+<p>Tout d'abord, on définit les propriétés qu'on souhaite appliquer au SVG grâce à la propriété {{cssxref("-moz-context-properties")}}. Par exemple :</p>
+
+<pre class="brush: css">img {
+  width: 100px;
+  height: 100px;
+  -moz-context-properties: fill, stroke;
+}
+
+.img1 {
+    fill: lime;
+    stroke: purple;
+}</pre>
+
+<p>Une fois que c'est fait, on peut utiliser les valeurs {{cssxref("fill")}} et {{cssxref("stroke")}} dans le SVG. Par exemple :</p>
+
+<pre class="brush: html">&lt;img class="img1" src="data:image/svg+xml;utf8,&lt;svg xmlns='http://www.w3.org/2000/svg'&gt;
+                       &lt;rect width='100%' height='100%' stroke-width='30px'
+                       fill='context-fill red' stroke='context-stroke' fill-opacity='0.5'/&gt;&lt;/svg&gt;"&gt;</pre>
+
+<p>Ici, l'attribut <code>src</code> de l'image correspond à une URI de données qui contient une simple image SVG. L'élément <code>&lt;rect&gt;</code> est paramétré afin de récupérer les valeurs <code>fill</code> et <code>stroke</code> telles que fournies par les propriétés {{cssxref("fill")}} et {{cssxref("stroke")}} de l'élément <code>&lt;img&gt;</code> grâce aux mots-clés <code>context-fill</code>/<code>context-stroke</code>. On utilise aussi une couleur de secours pour le remplissage (<code>fill</code>) (qui sera utilisée si le SVG est chargé en dehors de tout contexte, dans un nouvel onglet par exemple). On notera que, si une couleur est directement définie sur le SVG et qu'une couleur contextuelle (ici celle fournie par l'image) est également indiquée, ce sera cette dernière qui l'emportera.</p>
+
+<div class="note">
+<p><strong>Note </strong>: vous pouvez consulter <a href="https://mdn.github.io/css-examples/moz-context-properties/">un exemple complet sur notre dépôt Github</a>.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété n'est définie dans aucun standard CSS.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-moz-context-properties")}}</p>
diff --git a/files/fr/web/css/-moz-float-edge/index.html b/files/fr/web/css/-moz-float-edge/index.html
new file mode 100644
index 0000000000..2f6810edae
--- /dev/null
+++ b/files/fr/web/css/-moz-float-edge/index.html
@@ -0,0 +1,82 @@
+---
+title: '-moz-float-edge'
+slug: Web/CSS/-moz-float-edge
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/-moz-float-edge
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété <strong><code>-moz-float-edge</code></strong> définit si les propriétés de hauteur et de larguer d'un élément incluent la marge, la bordure et/ou le remplissage (<em>padding</em>).</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+-moz-float-edge: border-box;
+-moz-float-edge: content-box;
+-moz-float-edge: margin-box;
+-moz-float-edge: padding-box;
+
+/* Valeurs globales */
+-moz-float-edge: inherit;
+-moz-float-edge: initial;
+-moz-float-edge: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>border-box</code></dt>
+ <dd>Les propriétés de hauteur et de largeur incluent le contenu, le remplissage et la bordure mais pas la marge.</dd>
+ <dt><code>content-box</code></dt>
+ <dd>Les propriétés de hauteur et de largeur incluent le contenu, mais pas le remplissage, la bordure et la marge.</dd>
+ <dt><code>margin-box</code></dt>
+ <dd>Les propriétés de hauteur et de largeur incluent le contenu, le remplissage, la bordure et la marge.</dd>
+ <dt><code>padding-box</code></dt>
+ <dd>Les propriétés de hauteur et de largeur incluent le contenu et le remplissage mais pas la bordure ni la marge.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.box {
+  display: block;
+  height: 5px;
+  margin: 0.5em auto 0.5em auto;
+  color: gray;
+  -moz-float-edge: margin-box;
+  box-sizing: border-box;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="html prettyprint">&lt;div class="box"&gt;
+   &lt;p&gt;
+      Lorem ipsum dolor sit amet,
+      consectetur adipiscing elit.
+   &lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{bug(432891)}}</li>
+</ul>
diff --git a/files/fr/web/css/-moz-force-broken-image-icon/index.html b/files/fr/web/css/-moz-force-broken-image-icon/index.html
new file mode 100644
index 0000000000..9eebe7361c
--- /dev/null
+++ b/files/fr/web/css/-moz-force-broken-image-icon/index.html
@@ -0,0 +1,67 @@
+---
+title: '-moz-force-broken-image-icon'
+slug: Web/CSS/-moz-force-broken-image-icon
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/-moz-force-broken-image-icon
+---
+<div>{{Non-standard_header}}{{ CSSRef}}</div>
+
+<p>La propriété <strong><code>-moz-force-broken-image-icon</code></strong> est une propriété CSS non-standard. Lorsqu'elle vaut <code>1</code>, elle permet de forcer l'affichage d'une icône d'image brisée même si l'image possède un attribut {{HTMLElement("img","<code>alt</code>","#attr-alt")}}. Lorsqu'elle vaut <code>0</code>, l'image est utilisée de façon normale et n'affichera que l'attribut <code>alt</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;integer&gt;")}}</dt>
+ <dd>Une valeur de 1 indique qu'une icône d'image brisée est affichée même si l'image possède un attribut {{HTMLElement("img", "<code>alt</code>", "#attr-alt")}}. <code>0</code> indique que seul l'attribut <code>alt</code> doit être affiché.
+ <div class="note"><strong>Note :</strong> Même si la valeur est <code>1</code>, l'attribut <code>alt</code> sera affiché. Voir ci-après.</div>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css;">img {
+  -moz-force-broken-image-icon: 1;
+  height: 100px;
+  width: 100px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html;">&lt;img src='/lien/vers/image/cassée.png' alt='Un lien vers une image cassée'&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples','125','125','/files/4619/broken%20image%20link.png')}}</p>
+
+<div class="note"><strong>Note :</strong> Si <code>-moz-force-broken-image-icon</code> a la valeur <code>1</code> et que ni la hauteur ni largeur de l'image ne sont spécifiées alors l'image ne sera pas affichée et l'attribut <code>alt</code> sera masqué.</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<ul>
+ <li>Cette propriété ne fonctionne que sur les navigateurs basés sur Gecko.</li>
+ <li>L'usage de cette propriété n'est pas recommandée. Une propriété <em>alt</em> adéquate devrait être utilisé.</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{Bug(58646)}}</li>
+</ul>
diff --git a/files/fr/web/css/-moz-image-rect/index.html b/files/fr/web/css/-moz-image-rect/index.html
new file mode 100644
index 0000000000..e876a8875b
--- /dev/null
+++ b/files/fr/web/css/-moz-image-rect/index.html
@@ -0,0 +1,126 @@
+---
+title: '-moz-image-rect'
+slug: Web/CSS/-moz-image-rect
+tags:
+  - CSS
+  - Fonction
+  - Non-standard
+  - Reference
+translation_of: Web/CSS/-moz-image-rect
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>La propriété <strong><code>-moz-image-rect</code></strong> permet d'utiliser une seule partie d'une image pour un arrière-plan (contrairement à {{cssxref("background-image")}}). On peut ainsi utiliser une image qui regroupe plusieurs <em>sprites</em> à différentes fins, ce qui permet de diminuer le nombre de transfert réseau.</p>
+
+<p>Cette propriété fonctionne de façon analogue à {{cssxref("-moz-image-region")}} qui peut être utilisée pour déterminer la partie d'une image utilisée pour {{cssxref("list-style-image")}} qui met en forme les puces d'une liste. Grâce à <code>-moz-image-rect</code>, on peut avoir le même fonctionnement pour n'importe quel arrière-plan CSS.</p>
+
+<p>La syntaxe de cette propriété est similaire à la fonction <a href="/fr/docs/Web/CSS/shape#La_fonction_rect()"><code>rect()</code></a> qui génère une valeur de type {{cssxref("&lt;shape&gt;")}}. Les quatre valeurs indiquées font chacune référence au coin supérieur gauche de l'image.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">-moz-image-rect({{cssxref("&lt;uri&gt;")}}, <em>top</em>, <em>right</em>, <em>bottom</em>, <em>left</em>);</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;uri&gt;")}}</dt>
+ <dd>L'URI de l'image dont on veut obtenir une portion.</dd>
+ <dt><code>top</code></dt>
+ <dd>La coordonnée du bord haut de l'image, définie comme un entier ({{cssxref("&lt;integer&gt;")}}) ou un pourcentage ({{cssxref("&lt;percentage&gt;")}}) à partir du coin supérieur gauche.</dd>
+ <dt><code>right</code></dt>
+ <dd>La coordonnée du bord droit de l'image, définie comme un entier ({{cssxref("&lt;integer&gt;")}}) ou un pourcentage ({{cssxref("&lt;percentage&gt;")}}) à partir du coin supérieur gauche.</dd>
+ <dt><code>bottom</code></dt>
+ <dd>La coordonnée du bord inférieur de l'image, définie comme un entier ({{cssxref("&lt;integer&gt;")}}) ou un pourcentage ({{cssxref("&lt;percentage&gt;")}}) à partir du coin supérieur gauche.</dd>
+ <dt><code>left</code></dt>
+ <dd>La coordonnée du bord gauche de l'image, définie comme un entier ({{cssxref("&lt;integer&gt;")}}) ou un pourcentage ({{cssxref("&lt;percentage&gt;")}}) à partir du coin supérieur gauche.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, on charge une image qu'on découpe en quatre zones pour dessiner le logo Firefox dans quatre éléments {{HTMLElement("div")}}. Lorsqu'on clique sur le conteneur, cela fait tourner les images entre les blocs.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#container {
+  width:267px;
+  height:272px;
+  top:100px;
+  left:100px;
+  position:absolute;
+  font-size:16px;
+  text-shadow:white 0px 0px 6px;
+  text-align:center;
+}
+
+#box1 {
+  background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 0%, 50%, 50%, 0%);
+  width:133px;
+  height:136px;
+  position:absolute;
+}
+
+#box2 {
+  background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 0%, 100%, 50%, 50%);
+  width:133px;
+  height:136px;
+  position:absolute;
+}
+
+#box3 {
+  background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 50%, 50%, 100%, 0%);
+  width:133px;
+  height:136px;
+  position:absolute;
+}
+
+#box4 {
+  background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 50%, 100%, 100%, 50%);
+  width:133px;
+  height:136px;
+  position:absolute;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="container" onclick="rotate()"&gt;
+  &lt;div id="box1" style="left:0px;top:0px;"&gt;Top left&lt;/div&gt;
+  &lt;div id="box2" style="left:133px;top:0px;"&gt;Top right&lt;/div&gt;
+  &lt;div id="box3" style="left:0px;top:136px;"&gt;Bottom left&lt;/div&gt;
+  &lt;div id="box4" style="left:133px;top:136px;"&gt;Bottom right&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush:js">function rotate() {
+  var prevStyle = window.getComputedStyle(document.getElementById("box4"), null).getPropertyValue("background-image");
+
+  // Now that we've saved the last one, start rotating
+
+  for (var i=1; i&lt;=4; i++) {
+    var curId = "box" + i;
+
+    // Shift the background images
+
+    var curStyle = window.getComputedStyle(document.getElementById(curId), null).getPropertyValue("background-image");
+    document.getElementById(curId).style.backgroundImage = prevStyle;
+    prevStyle = curStyle;
+  }
+}</pre>
+
+<p>Dans ce script, on utilise la méthode {{domxref("window.getComputedStyle()")}} afin de récupérer le style de chaque élément et on le décale à l'élément suivant. On notera qu'avant de commencer ce « défilement », on sauvegarde une version du style de la dernière boîte. En copiant simplement les valeurs de {{cssxref("background-image")}} d'un élément à l'autre lors du clic, on obtient l'effet souhaité.</p>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","400","400")}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.types.-moz-image-rect")}}</p>
diff --git a/files/fr/web/css/-moz-image-region/index.html b/files/fr/web/css/-moz-image-region/index.html
new file mode 100644
index 0000000000..603c48f008
--- /dev/null
+++ b/files/fr/web/css/-moz-image-region/index.html
@@ -0,0 +1,75 @@
+---
+title: '-moz-image-region'
+slug: Web/CSS/-moz-image-region
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Référence(2)
+translation_of: Web/CSS/-moz-image-region
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>Pour certains éléments XUL et les pseudo-éléments qui utilisent une image grâce à la propriété {{cssxref("list-style-image")}}, la propriété <code><strong>-moz-image-region</strong></code> définit la partie de l'image qui est utilisée plutôt que l'image toute entière. Cela permet d'utiliser des images qui regroupent des <em>sprites</em> afin d'améliorer les performances.</p>
+
+<pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */
+-moz-image-region: auto;
+
+/* Valeur de type &lt;shape&gt; */
+-moz-image-region: rect(0, 8px, 4px, 4px);
+
+/* Valeurs globales */
+-moz-image-region: inherit;
+-moz-image-region: initial;
+-moz-image-region: unset;</pre>
+
+<p>La syntaxe de cette propriété est semblable à la syntaxe de la propriété {{cssxref("clip")}}. Les quatre valeurs sont relatives au coin en haut à gauche de l'image.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Pour un système qui fonctionne pour n'importe quel arrière-plan, on pourra utiliser la propriété {{cssxref("-moz-image-rect")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>La région pour l'image est définie automatiquement</dd>
+ <dt><code>&lt;shape&gt;</code></dt>
+ <dd>Une forme définit la portion d'image qui doit être utilisée. La fonction <code>rect()</code> permet de définir un rectangle. Les paramètres de cette fonction correspondent respectivement aux décalages des bords haut, droit, bas et gauche. Voir {{cssxref("&lt;shape&gt;")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:css">#example-button {
+  /* display only the 4x4 area from the top left of this image */
+  list-style-image: url("chrome://example/skin/example.png");
+  -moz-image-region: rect(0px, 4px, 4px, 0px);
+}
+#example-button:hover {
+  /* use the 4x4 area to the right of the first for the hovered button */
+  -moz-image-region: rect(0px, 8px, 4px, 4px);
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-moz-image-region")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("-moz-image-rect")}}</li>
+</ul>
diff --git a/files/fr/web/css/-moz-orient/index.html b/files/fr/web/css/-moz-orient/index.html
new file mode 100644
index 0000000000..80a0b98cbc
--- /dev/null
+++ b/files/fr/web/css/-moz-orient/index.html
@@ -0,0 +1,80 @@
+---
+title: '-moz-orient'
+slug: Web/CSS/-moz-orient
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/-moz-orient
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété <strong><code>-moz-orient</code></strong> définit l'orientation de l'élément sur lequel elle est appliquée.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <code>moz-orient</code> est définie avec un mot-clé parmi ceux de la liste ci-après.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>inline</code></dt>
+ <dd>L'élément est affiché dans la même direction que l'axe du texte : il est horizontal si le mode d'écriture est horizontal et vertical pour un mode d'écriture vertical.</dd>
+ <dt><code>block</code></dt>
+ <dd>L'élément est affiché dans la direction perpendiculaire à l'axe du texte : il est vertical si le mode d'écriture est horizontal et horizontal pour un mode d'écriture vertical.</dd>
+ <dt><code>horizontal</code></dt>
+ <dd>L'élément est affiché horizontalement.</dd>
+ <dt><code>vertical</code></dt>
+ <dd>L'élément est affiché verticalement.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  La barre de progression suivante est
+  horizontale (le comportement par défaut) :
+&lt;/p&gt;
+&lt;progress max="100" value="75"&gt;&lt;/progress&gt;
+
+&lt;p&gt;
+  La barre de progression suivante
+  est verticale :
+&lt;/p&gt;
+&lt;progress class="vert" max="100" value="75"&gt;&lt;/progress&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.vert {
+  -moz-orient: vertical;
+  width: 16px;
+  height: 150px;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","200","360")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Bien que <a href="https://lists.w3.org/Archives/Public/www-style/2014Jun/0396.html">proposée</a> au W3C, cette propriété ne fait partie d'aucune spécification standard. C'est donc une propriété propriétaire liée à Mozilla/Gecko.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-moz-orient")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("box-orient")}}</li>
+</ul>
diff --git a/files/fr/web/css/-moz-outline-radius-bottomleft/index.html b/files/fr/web/css/-moz-outline-radius-bottomleft/index.html
new file mode 100644
index 0000000000..13259534a0
--- /dev/null
+++ b/files/fr/web/css/-moz-outline-radius-bottomleft/index.html
@@ -0,0 +1,49 @@
+---
+title: '-moz-outline-radius-bottomleft'
+slug: Web/CSS/-moz-outline-radius-bottomleft
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/-moz-outline-radius-bottomleft
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>Dans les applications Mozilla, la propriété <strong><code>-moz-outline-radius-</code></strong><strong><code>bottomleft</code></strong> définit l'arrondi du coin inférieur gauche du contour.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Regardez le coin inférieur gauche de ce paragraphe.&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  margin: 5px;
+  border: solid cyan;
+  outline: dotted red;
+  -moz-outline-radius-bottomleft: 2em;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Cette propriété étant spécifique à Firefox, l'exemple ci-avant ne fonctionnera pas dans un autre navigateur.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La propriété raccourcie {{cssxref("-moz-outline-radius")}}</li>
+ <li>La propriété standard {{cssxref("outline")}}</li>
+</ul>
diff --git a/files/fr/web/css/-moz-outline-radius-bottomright/index.html b/files/fr/web/css/-moz-outline-radius-bottomright/index.html
new file mode 100644
index 0000000000..831cb29e39
--- /dev/null
+++ b/files/fr/web/css/-moz-outline-radius-bottomright/index.html
@@ -0,0 +1,49 @@
+---
+title: '-moz-outline-radius-bottomright'
+slug: Web/CSS/-moz-outline-radius-bottomright
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/-moz-outline-radius-bottomright
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>Dans les applications Mozilla, la propriété <strong><code>-moz-outline-radius-</code></strong><strong><code>bottomright</code></strong> définit l'arrondi du coin inférieur droit du contour.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Regardez le coin inférieur droit de ce paragraphe.&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  margin: 5px;
+  border: solid cyan;
+  outline: dotted red;
+  -moz-outline-radius-bottomright: 2em;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Example")}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Cette propriété étant spécifique à Firefox, l'exemple ci-avant ne fonctionnera pas dans un autre navigateur.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La propriété raccourcie {{cssxref("-moz-outline-radius")}}</li>
+ <li>La propriété standard {{cssxref("outline")}}</li>
+</ul>
diff --git a/files/fr/web/css/-moz-outline-radius-topleft/index.html b/files/fr/web/css/-moz-outline-radius-topleft/index.html
new file mode 100644
index 0000000000..28fef48dc0
--- /dev/null
+++ b/files/fr/web/css/-moz-outline-radius-topleft/index.html
@@ -0,0 +1,49 @@
+---
+title: '-moz-outline-radius-topleft'
+slug: Web/CSS/-moz-outline-radius-topleft
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/-moz-outline-radius-topleft
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>Dans les applications Mozilla, la propriété <strong><code>-moz-outline-radius-</code></strong><strong><code>topleft</code></strong> définit l'arrondi du coin supérieur gauche du contour.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Observez le coin supérieur gauche de ce paragraphe.&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  margin: 5px;
+  border: solid cyan;
+  outline: dotted red;
+  -moz-outline-radius-topleft: 2em;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Cette propriété étant spécifique à Firefox, l'exemple ci-avant ne fonctionnera pas dans un autre navigateur.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La propriété raccourcie {{cssxref("-moz-outline-radius")}}</li>
+ <li>La propriété standard {{cssxref("outline")}}</li>
+</ul>
diff --git a/files/fr/web/css/-moz-outline-radius-topright/index.html b/files/fr/web/css/-moz-outline-radius-topright/index.html
new file mode 100644
index 0000000000..962f74ece2
--- /dev/null
+++ b/files/fr/web/css/-moz-outline-radius-topright/index.html
@@ -0,0 +1,49 @@
+---
+title: '-moz-outline-radius-topright'
+slug: Web/CSS/-moz-outline-radius-topright
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Référence(2)
+translation_of: Web/CSS/-moz-outline-radius-topright
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>Dans les applications Mozilla, la propriété <strong><code>-moz-outline-radius-</code></strong><strong><code>topright</code></strong> définit l'arrondi du coin supérieur droit du contour.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Observez le coin supérieur droit de ce paragraphe.&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  margin: 5px;
+  border: solid cyan;
+  outline: dotted red;
+  -moz-outline-radius-topright: 2em;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Cette propriété étant spécifique à Firefox, l'exemple ci-avant ne fonctionnera pas dans un autre navigateur.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La propriété raccourcie {{cssxref("-moz-outline-radius")}}</li>
+ <li>La propriété standard {{cssxref("outline")}}</li>
+</ul>
diff --git a/files/fr/web/css/-moz-outline-radius/index.html b/files/fr/web/css/-moz-outline-radius/index.html
new file mode 100644
index 0000000000..60e5e36069
--- /dev/null
+++ b/files/fr/web/css/-moz-outline-radius/index.html
@@ -0,0 +1,117 @@
+---
+title: '-moz-outline-radius'
+slug: Web/CSS/-moz-outline-radius
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/-moz-outline-radius
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>Dans les applications Mozilla (ex. Firefox), la propriété <strong><code>-moz-outline-radius</code></strong> peut être utilisée afin que le contour dessiné autour d'un élément ait des angles arrondis. Le contour ({{cssxref("outline")}}) est dessiné autour des éléments pour les faire ressortir.</p>
+
+<pre class="brush:css no-line-numbers">/* Une seule valeur */
+-moz-outline-radius: 25px;
+
+/* Deux valeurs */
+-moz-outline-radius: 25px 1em;
+
+/* Trois valeurs */
+-moz-outline-radius: 25px 1em 12%;
+
+/* Quatre valeurs */
+-moz-outline-radius: 25px 1em 12% 4mm;
+
+/* Valeurs globales */
+-moz-outline-radius: inherit;
+-moz-outline-radius: initial;
+-moz-outline-radius: unset;
+</pre>
+
+<p>La propriété <code>-moz-outline-radius</code> est une propriété raccourcie qui permet de définir les quatre propriétés destinées à chacun des angles {{cssxref("-moz-outline-radius-topleft")}}, {{cssxref("-moz-outline-radius-topright")}}, {{cssxref("-moz-outline-radius-bottomright")}} et {{cssxref("-moz-outline-radius-bottomleft")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<div class="note"><strong>Note :</strong> Les valeurs pour les coefficients elliptiques et les valeurs de type <code>&lt;percentage&gt;</code> respectent la même syntaxe que pour {{cssxref("border-radius")}}.</div>
+
+<p>Une, deux, trois ou quatre valeurs <code>&lt;outline-radius&gt;</code> dont chacune peut être de type :</p>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Voir {{cssxref("&lt;length&gt;")}} pour les valeurs possibles.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Voir {{cssxref("&lt;percentage&gt;")}}, voir {{cssxref("border-radius")}} pour plus de détails sur la proportionnalité des pourcentages.</dd>
+</dl>
+
+<h3 id="Gestion_des_valeurs_multiples">Gestion des valeurs multiples :</h3>
+
+<ul>
+ <li>Si une seule valeur est définie, celle-ci s'applique pour les 4 angles.</li>
+ <li>Si deux valeurs sont fournies, la première s'applique aux angles en haut à gauche et en bas à droite et la seconde s'applique aux angles en haut à droite et en bas à gauche.</li>
+ <li>Si trois valeurs sont fournies, la première s'applique à l'angle en haut à gauche, la deuxième aux angles en haut à droite et en bas à gauche et la troisième s'applique à l'angle en bas à droite.</li>
+ <li>Si quatre valeurs sont fournies, la première s'applique à l'angle en haut à gauche, la deuxième en haut à droite, la troisième en bas à droite et la quatrième en bas à gauche.</li>
+</ul>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple1 {
+  border: 1px solid black;
+  outline: dotted red;
+  -moz-outline-radius: 12% 1em 25px;
+}
+
+.exemple2 {
+  border: 1px solid black;
+  outline: dotted red;
+  -moz-outline-radius-topleft: 12%;
+  -moz-outline-radius-topright: 1em;
+  -moz-outline-radius-bottomright: 35px;
+  -moz-outline-radius-bottomleft: 1em;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="exemple1"&gt;
+  La propriété outline-style en utilisant -moz-outline-radius
+&lt;/p&gt;
+&lt;p class="exemple2"&gt;
+  Un exemple légèrement plus compliqué avec -moz-outline-radius-xxx
+&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat"><strong>Résultat</strong></h3>
+
+<p>{{EmbedLiveSample('Exemples', '200', '200')}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Cette propriété étant spécifique à Firefox, l'exemple ci-avant ne fonctionnera pas dans un autre navigateur.</p>
+</div>
+
+<h2 id="Notes">Notes</h2>
+
+<ul>
+ <li>Les coins pour lesquels on utilise la valeur <code>dotted</code> ou <code>dashed</code> sont affichés avec des lignes pleines (cf. {{bug("382721")}}) jusqu'à Firefox 50.</li>
+ <li>Cette propriété sera vraisemblablement abandonnée dans les prochaines versions de Gecko (cf. {{bug("593717")}}).</li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-moz-outline-radius")}}</p>
diff --git a/files/fr/web/css/-moz-stack-sizing/index.html b/files/fr/web/css/-moz-stack-sizing/index.html
new file mode 100644
index 0000000000..dab5eb2287
--- /dev/null
+++ b/files/fr/web/css/-moz-stack-sizing/index.html
@@ -0,0 +1,62 @@
+---
+title: '-moz-stack-sizing'
+slug: Web/CSS/-moz-stack-sizing
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+  - XUL
+translation_of: Archive/Web/CSS/-moz-stack-sizing
+---
+<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.1")}}</div>
+
+<p>La propriété <strong><code>-moz-stack-sizing</code></strong> est une propriété propriétaire. Normalement, un élément {{XULElem("stack")}} changera sa taille pour que tous ses éléments fils soient complètement visibles. Ainsi, si on déplace un élément fils de cette pile vers la droite, la pile s'élargira pour que l'élément reste visible.</p>
+
+<pre class="brush:css">/* Valeurs avec un mot-clé */
+-moz-stack-sizing: stretch-to-fit;
+-moz-stack-sizing: ignore;
+
+/* Valeurs globales */
+-moz-stack-sizing: inherit;
+-moz-stack-sizing: initial;
+-moz-stack-sizing: unset;
+</pre>
+
+<p>Si on veut empêcher le redimensionnement automatique, on pourra définir <code>-moz-stack-sizing</code> avec la valeur <code>ignore</code> sur l'élément fils. La propriété n'est pas définie sur la pile elle-même mais sur les éléments fils de la pile. Cela permet d'ignorer certains éléments fils mais pas d'autres.</p>
+
+<p class="note"><strong>Note :</strong> Dans les versions antérieures de Gecko, on pouvait contourner ce problème en définissant des marges basse et droite négatives sur la pile et des marges basse et droite positives sur les éléments fils qu'on ne souhaitait pas ignorer.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>stretch-to-fit</code></dt>
+ <dd>L'élément enfant influencera la taille de la pile.</dd>
+ <dt><code>ignore</code></dt>
+ <dd>La pile ne prendra pas en compte cet élément enfant lors du calcul de la taille.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:css">.mainsheet {
+  -moz-stack-sizing: ignore;
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{bug("346189")}}</li>
+</ul>
diff --git a/files/fr/web/css/-moz-text-blink/index.html b/files/fr/web/css/-moz-text-blink/index.html
new file mode 100644
index 0000000000..dd11eb1154
--- /dev/null
+++ b/files/fr/web/css/-moz-text-blink/index.html
@@ -0,0 +1,51 @@
+---
+title: '-moz-text-blink'
+slug: Web/CSS/-moz-text-blink
+tags:
+  - CSS
+  - Non-standard
+  - Obsolete
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-moz-text-blink
+---
+<div>{{CSSRef}}{{non-standard_header}}{{Obsolete_Header(26)}}</div>
+
+<p>La propriété CSS non-standard <strong><code>-moz-text-blink</code></strong> détermine le mode de clignotement.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Firefox, qui était le seul des principaux navigateurs à la prendre en charge, a abandonné son support dans Firefox 26. Désormais, plus aucun navigateur ne la prend en charge.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Il n'y a pas de clignotement.</dd>
+ <dt><code>blink</code></dt>
+ <dd>Le texte clignote. <em>Ne pas</em> faire clignoter le texte est l'une des techniques pour respecter le <a href="https://www.w3.org/TR/UAAG/guidelines.html#tech-on-off-blinking-text" rel="external nofollow" title="http://www.w3.org/TR/UAAG/guidelines.html#tech-on-off-blinking-text">point de contrôle 3.3 des WAI-UAAG</a>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:css">.exemple {
+  -moz-text-blink: blink;
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété était définie dans un <a href="https://www.w3.org/TR/2003/CR-css3-text-20030514/#text-blink">ancien brouillon de la spécification CSS 3 Text</a>. Sa définition a été supprimée des nouvelles versions.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-moz-text-blink")}}</p>
diff --git a/files/fr/web/css/-moz-user-focus/index.html b/files/fr/web/css/-moz-user-focus/index.html
new file mode 100644
index 0000000000..3de08502f7
--- /dev/null
+++ b/files/fr/web/css/-moz-user-focus/index.html
@@ -0,0 +1,75 @@
+---
+title: '-moz-user-focus'
+slug: Web/CSS/-moz-user-focus
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/-moz-user-focus
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété <strong><code>-moz-user-focus</code></strong> est utilisée pour indiquer si l'élément peut recevoir le focus.</p>
+
+<pre class="brush:css">/* Valeurs avec un mot-clé */
+-moz-user-focus: normal;
+-moz-user-focus: ignore;
+
+/* Valeurs globales */
+-moz-user-focus: inherit;
+-moz-user-focus: initial;
+-moz-user-focus: unset;
+</pre>
+
+<p>En utilisant la valeur <code>ignore</code>, on peut désactiver la prise de focus sur l'élément (l'utilisateur ne pourra pas activer l'élément) et l'élément sera sauté lors de la navigation à la tabulation.</p>
+
+<div class="note"><strong>Note :</strong> Cette propriété ne fonctionne pas pour les éléments XUL {{XULElem("textbox")}} car l'élément <code>textbox</code> en tant que tel ne reçoit jamais le focus. À la place, XBL crée un élément HTML {{HTMLElement("input")}} anonyme à l'intérieur du <code>textbox</code> et que l'élément reçoit le focus. On peut empêcher le <code>textbox</code> de prendre le focus clavier en passant son index de tabulation à <code>-1</code>, pour l'empêcher de prendre le focus souris, on pourra utiliser les événements <code>mousedown</code>.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>ignore</code></dt>
+ <dd>L'élément n'accepte pas le focus (au clavier ou au pointeur) et sera sauté lors de la navigation à la tabulation.</dd>
+ <dt><code>normal</code></dt>
+ <dd>L'élément peut recevoir le focus normalement.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html">&lt;input class="ignored" value="L'utilisateur ne peut pas placer le focus sur cet élément."&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">.ignored {
+  -moz-user-focus: ignore;
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification. Une propriété similaire : <code>user-focus</code> a été <a href="https://www.w3.org/TR/2000/WD-css3-userint-20000216">proposée pour des brouillons de l'ancienne spécifications CSS3 pour les interfaces utilisateurs</a> mais a été rejetée par le groupe de travail.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-moz-user-focus")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("-moz-user-input")}}</li>
+ <li>{{cssxref("-moz-user-modify")}}</li>
+ <li>{{cssxref("-moz-user-select")}}</li>
+</ul>
diff --git a/files/fr/web/css/-moz-user-input/index.html b/files/fr/web/css/-moz-user-input/index.html
new file mode 100644
index 0000000000..e935062db2
--- /dev/null
+++ b/files/fr/web/css/-moz-user-input/index.html
@@ -0,0 +1,72 @@
+---
+title: '-moz-user-input'
+slug: Web/CSS/-moz-user-input
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/-moz-user-input
+---
+<div>{{Non-standard_header}}{{CSSRef}}{{Deprecated_Header(60)}}</div>
+
+<p>Pour les applications Mozilla, la propriété <strong><code>-moz-user-input</code></strong> détermine si l'utilisateur peut effectuer une saisie sur l'élément (bien que rejetée, cette propriété a contribué à la construction de la propriété standard {{cssxref("user-input")}}.</p>
+
+<pre class="brush:css">/* Valeurs avec un mot-clé */
+-moz-user-input: none;
+-moz-user-input: enabled;
+-moz-user-input: disabled;
+
+/* Valeurs globales */
+-moz-user-input: inherit;
+-moz-user-input: initial;
+-moz-user-input: unset;
+</pre>
+
+<p>Pour les éléments qui acceptent la saisie par défaut (ex. les élémetns {{HTMLElement("textarea")}}), la valeur initiale de <code>-moz-user-input</code> sera <code>enabled</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>L'élément ne réagit pas aux saisies de l'utilisateur et il ne prend jamais l'état {{cssxref(":active")}}.</dd>
+ <dt><code>enabled</code></dt>
+ <dd>L'utilisateur peut effectuer une saisie sur cet élément. Pour les boîtes de texte, c'est le comportement par défaut. <strong>Cette valeur n'est plus prise en charge à partir de Firefox 60 (cf. {{bug(1405087)}}).</strong></dd>
+ <dt><code>disabled</code></dt>
+ <dd>L'utilisateur ne peut pas effectuer de saisie sur cet élément (cela n'est pas équivalent à utiliser l'attribut {{XULAttr("disabled")}} avec la valeur <code>true</code> car l'élément est dessiné normalement). <strong>Cette valeur n'est plus prise en charge à partir de Firefox 60 (cf. {{bug(1405087)}}).</strong></dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:css">input.exemple {
+  /* L'utilisateur pourra sélectionner le texte
+     mais ne pourra pas le modifier. */
+  -moz-user-input: disabled;
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification. Une propriété similaire : <code>user-focus</code> a été <a href="https://www.w3.org/TR/2000/WD-css3-userint-20000216">proposée pour des brouillons de l'ancienne spécifications CSS3 pour les interfaces utilisateurs</a> mais a été rejetée par le groupe de travail.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-moz-user-input")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("-moz-user-focus")}}</li>
+ <li>{{cssxref("-moz-user-modify")}}</li>
+ <li>{{cssxref("-moz-user-select")}}</li>
+</ul>
diff --git a/files/fr/web/css/-moz-window-shadow/index.html b/files/fr/web/css/-moz-window-shadow/index.html
new file mode 100644
index 0000000000..4312b16d54
--- /dev/null
+++ b/files/fr/web/css/-moz-window-shadow/index.html
@@ -0,0 +1,70 @@
+---
+title: '-moz-window-shadow'
+slug: Web/CSS/-moz-window-shadow
+tags:
+  - CSS
+  - Non-standard
+  - Obsolete
+  - Propriété
+  - Reference
+  - XUL
+translation_of: Archive/Web/CSS/-moz-window-shadow
+---
+<p>{{CSSRef}}{{Non-standard_Header}}{{deprecated_Header("Gecko44")}}</p>
+
+<p>La propriété <strong><code>-moz-window-shadow</code></strong> définit si une fenêtre doit avoir une ombre. Cette propriété ne fonctionne que pour Mac OS X.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Cette propriété n'est pas standard et ne peut plus être utilisée depuis Firefox 44.</p>
+</div>
+
+<p>Firefox 3 a ajouté la prise en charge des fenêtres transparentes sur Mac OS X. Cependant, les ombres pour ces fenêtres étaient désactivées et il n'y avait aucun moyen de les activer.Avec Firefox 3.5, le comportement par défaut a été modifié. Toutes les fenêtres ont une ombre et la propriété <code>-moz-window-shadow</code> a été introduite afin de désactiver les ombres indésirables.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <code>-moz-window-shadow</code> est définie avec l'un des mots-clés suivants.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>default</code></dt>
+ <dd>La fenêtre aura une ombre avec le style par défaut.</dd>
+ <dt><code>menu</code></dt>
+ <dd>La fenêtre aura une ombre dont le style est approprié pour les menus.</dd>
+ <dt><code>tooltip</code></dt>
+ <dd>La fenêtre aura une ombre dont le style est approprié pour les bulles d'information.</dd>
+ <dt><code>sheet</code></dt>
+ <dd>La fenêtre aura une ombre dont le style est approprié pour les fenêtres qui sont des feuilles.</dd>
+ <dt><code>none</code></dt>
+ <dd>La fenêtre n'aura pas d'ombre.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:css">.KUI-panel {
+  -moz-window-shadow: none;
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-moz-window-shadow")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{XULElem("panel")}}</li>
+ <li>{{XULElem("window")}}</li>
+</ul>
diff --git a/files/fr/web/css/-ms-accelerator/index.html b/files/fr/web/css/-ms-accelerator/index.html
new file mode 100644
index 0000000000..048b5b6f09
--- /dev/null
+++ b/files/fr/web/css/-ms-accelerator/index.html
@@ -0,0 +1,75 @@
+---
+title: '-ms-accelerator'
+slug: Web/CSS/-ms-accelerator
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-accelerator
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Reference">propriété</a> <a href="/fr/docs/Web/CSS">CSS</a> <code><strong>-ms-accelerator</strong></code> est une <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">extension Microsoft </a>qui définit ou récupère une chaîne qui indique si l'objet représente un raccourci clavier.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* L'objet n'est pas un raccourci clavier (par défaut) */
+-ms-accelerator: false
+/* L'objet est un raccourci clavier */
+-ms-accelerator: true
+</pre>
+
+<p> </p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>false</code></dt>
+ <dd>
+ <p>L'objet n'est pas un raccourci clavier.</p>
+ </dd>
+ <dt><code>true</code></dt>
+ <dd>
+ <p>L'objet est un raccourci clavier.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Cet exemple utilise l'attribut <code>-ms-accelerator</code> dans un élément {{HTMLElement("u")}} pour spécifier que 'N' est la touche d'accès qui permettra d'accéder à l'élément {{HTMLElement("label")}}. Si l'option "souligner les raccourcis clavier" n'est pas activée dans les propriétés d'affichage Windows de l'utilisateur,  'N' ne sera pas souligné tant que la touche <kbd>Alt</kbd> ne sera pas enfoncée. Lorsque l'utilisateur appuie sur <kbd>Alt</kbd>+<kbd>N</kbd>, l'élément {{HTMLElement("input")}} qui possède l'attribut {{htmlattrxref("accessKey","input")}} avec pour valeur 'N' reçoit le focus.</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Accelerator&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;label for="oNom"&gt;&lt;u style="-ms-accelerator: true; accelerator: true"&gt;N&lt;/u&gt;om: &lt;/label&gt;
+    &lt;input type="text"
+      id="oNom"
+      size="25"
+      accesskey="N"
+      value="Votre nom ici" /&gt;
+  &lt;/body&gt;
+&lt;/html&gt;<strong>
+</strong></pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Cette propriété est prise en charge par Windows 2000 et les versions ultérieures. Elle permet aux utilisateurs de masquer les indicateurs de navigation pour les éléments de menu et les contrôles tant que la touche <kbd>Alt</kbd> n'est pas enfoncée.</p>
+
+<p>Une touche d'accès (<em>access key</em>) est un caractère utilisé comme raccourci clavier pour sélectionner un objet. L'utilisateur effectue la combinaison de touches <kbd>Alt</kbd> + touche d'accès pour déplacer le focus sur l'objet demandé et déclencher l'évènement associé à cet objet.</p>
+
+<p>Dans Internet Explorer 8 (IE8) l'attribut <code>-ms-accelerator</code> est une extension CSS, et peut être utilisé comme synonyme de <code>accelerator</code><strong> </strong>dans le mode standard d'IE 8.</p>
diff --git a/files/fr/web/css/-ms-block-progression/index.html b/files/fr/web/css/-ms-block-progression/index.html
new file mode 100644
index 0000000000..502f1fb6b7
--- /dev/null
+++ b/files/fr/web/css/-ms-block-progression/index.html
@@ -0,0 +1,48 @@
+---
+title: '-ms-block-progression'
+slug: Web/CSS/-ms-block-progression
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-block-progression
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété CSS <code><strong>-ms-block-progression</strong></code> est une propriété <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">spécifique à Microsoft</a> qui indique la progression du bloc et l'orientation de la disposition.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <code>-ms-block-progression</code> est définie grâce à l'un des mots-clés suivants.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>tb</code></dt>
+ <dd>La valeur par défaut. Les blocs s'écoulent de haut en bas et la disposition est horizontale.</dd>
+ <dt><code>rl</code></dt>
+ <dd>Les blocs s'écoulent de droite à gauche et la disposition est verticale.</dd>
+ <dt><code>bt</code></dt>
+ <dd>Les blocs s'écoulent de bas en haut et la disposition est horizontale.</dd>
+ <dt><code>lr</code></dt>
+ <dd>Les blocs s'écoulent de gauche à droite et la disposition est verticale</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Avec une disposition verticale, les lignes de textes sont tournées de 90° dans le sens des aiguilles d'une montre. Les images ne sont pas tournées mais les tableaux sont tournés. La disposition des boîtes avec un orientatiofrn verticale est strictement analogue à la disposition avec une orientation horizontale : la largeur, la hauteur, <code>top</code>, <code>bottom</code>, <code>right</code> et <code>left</code> ne tournent pas avec le texte.</p>
+
+<p>Seul un seul mode de progression peut être actif à un moment donné. Ces valeurs ne peuvent pas êtres combinées.</p>
+
+<p>Cette propriété est basée sur la propriété <code>block-progression</code> décrite dans le module de spécification CSS3 Text Layout.</p>
diff --git a/files/fr/web/css/-ms-content-zoom-chaining/index.html b/files/fr/web/css/-ms-content-zoom-chaining/index.html
new file mode 100644
index 0000000000..5a016f2178
--- /dev/null
+++ b/files/fr/web/css/-ms-content-zoom-chaining/index.html
@@ -0,0 +1,44 @@
+---
+title: '-ms-content-zoom-chaining'
+slug: Web/CSS/-ms-content-zoom-chaining
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-content-zoom-chaining
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété CSS <code><strong>-ms-content-zoom-chaining</strong></code> est une propriété <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">spécifique à Microsoft</a> qui indique le comportement du zoom lorsque l'utilisateur atteint la limite du zoom lors de son utilisation.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <strong><code>-ms-content-zoom-chaining</code></strong> est définie grâce à l'un des mots-clés suivants.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>La valeur par défaut. Un effet de rebondissement est déclenché lorsque l'utilisateur atteint la limite.</dd>
+ <dt><code>chained</code></dt>
+ <dd>Le zoom est fait sur le plus proche parent qui peut être zoomé lorsque l'utilisateur atteint la limite. Aucun effet de rebondissement n'est affiché.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Cette propriété n'a pas d'impact sur les éléments qui ne peuvent pas être zoomés. Pour plus d'informations sur les éléments pouvant être zoomés, voir <code><a href="/fr/docs/Web/CSS/-ms-content-zooming">-ms-content-zooming</a></code>.</p>
+
+<p>À partir de Windows 8.1, cette propriété est également prise en charge pour les interactions avec le pavé tactile.</p>
+
+<p>Il est nécessaire d'avoir Windows 8 ou une version ultérieure afin d'utiliser cette propriété.</p>
diff --git a/files/fr/web/css/-ms-content-zoom-limit-max/index.html b/files/fr/web/css/-ms-content-zoom-limit-max/index.html
new file mode 100644
index 0000000000..b683e617b5
--- /dev/null
+++ b/files/fr/web/css/-ms-content-zoom-limit-max/index.html
@@ -0,0 +1,42 @@
+---
+title: '-ms-content-zoom-limit-max'
+slug: Web/CSS/-ms-content-zoom-limit-max
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-content-zoom-limit-max
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété CSS <code><strong>-ms-content-zoom-limit-max</strong></code> est une propriété <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">spécifique à Microsoft</a> qui détermine le facteur de zoom maximal.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <code>-ms-content-zoom-limit-max</code> est définie avec une valeur en pourcentage de la taillle sans zoom.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Le facteur de zoom maximal proportionnellement à la taille originale (pour ce type de valeur cf. {{cssxref("&lt;percentage&gt;")}}).</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cet élément ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Cette propriété contraint la limite pour le zoom tactile et les valeurs de la propriété <code><a href="/fr/docs/Web/CSS/msContentZoomFactor">msContentZoomFactor</a></code>. Cette propriété n'a pas d'impact pour les éléments qui ne peuvent pas être zoomés. Voir {{CSSXref("-ms-content-zooming")}} pour plus de détails sur les éléments pouvant être zoomés.</p>
+
+<p>À partir de Windows 8.1, cette propriété est également prise en charge pour les interactions avec le pavé tactile.</p>
+
+<p>Windows 8 ou une version ultérieure est nécessaire afin d'utiliser cette propriété.</p>
diff --git a/files/fr/web/css/-ms-content-zoom-limit-min/index.html b/files/fr/web/css/-ms-content-zoom-limit-min/index.html
new file mode 100644
index 0000000000..e4303cb9f1
--- /dev/null
+++ b/files/fr/web/css/-ms-content-zoom-limit-min/index.html
@@ -0,0 +1,42 @@
+---
+title: '-ms-content-zoom-limit-min'
+slug: Web/CSS/-ms-content-zoom-limit-min
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-content-zoom-limit-min
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété CSS <code><strong>-ms-content-zoom-limit-min</strong></code> est une propriété <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">spécifique à Microsoft</a> qui détermine le facteur de zoom minimal.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <code>-ms-content-zoom-limit-min</code> est définie avec une valeur en pourcentage de la taillle sans zoom.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Le facteur de zoom minimal proportionnellement à la taille originale (pour ce type de valeur cf. {{cssxref("&lt;percentage&gt;")}}).</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cet élément ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Cette propriété contraint la limite pour le zoom tactile et les valeurs de la propriété <code><a href="/fr/docs/Web/CSS/msContentZoomFactor">msContentZoomFactor</a></code>. Cette propriété n'a pas d'impact pour les éléments qui ne peuvent pas être zoomés. Voir {{CSSXRef("-ms-content-zooming")}} pour plus de détails sur les éléments pouvant être zoomés.</p>
+
+<p>À partir de Windows 8.1, cette propriété est également prise en charge pour les interactions avec le pavé tactile.</p>
+
+<p>Windows 8 ou une version ultérieure est nécessaire afin d'utiliser cette propriété.</p>
diff --git a/files/fr/web/css/-ms-content-zoom-limit/index.html b/files/fr/web/css/-ms-content-zoom-limit/index.html
new file mode 100644
index 0000000000..420ad5c2ea
--- /dev/null
+++ b/files/fr/web/css/-ms-content-zoom-limit/index.html
@@ -0,0 +1,44 @@
+---
+title: '-ms-content-zoom-limit'
+slug: Web/CSS/-ms-content-zoom-limit
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-content-zoom-limit
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété CSS <code><strong>-ms-content-zoom-limit</strong></code> est une propriété raccourcie <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">spécifique à Microsoft</a> qui indique les valeurs à utiliser pour les propriétés  {{CSSXref("-ms-content-zoom-limit-min")}} et  {{CSSXref("-ms-content-zoom-limit-max")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <strong><code>-ms-content-zoom-limit</code></strong> est définie avec une ou deux valeurs de limites de zoom, dans l'ordre qui suit et séparées par un espace.</p>
+
+<h3 id="Valeur">Valeur</h3>
+
+<dl>
+ <dt><code>-ms-content-zoom-limit-min</code></dt>
+ <dd>La valeur à utiliser pour la propriété <code><a href="/fr/docs/Web/CSS/-ms-content-zoom-limit-min">-ms-content-zoom-limit-min</a></code>.</dd>
+ <dt><code>-ms-content-zoom-limit-max</code></dt>
+ <dd>La valeur à utiliser pour la propriété <code><a href="/fr/docs/Web/CSS/-ms-content-zoom-limit-max">-ms-content-zoom-limit-max</a></code>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Cette propriété n'a pas d'impact pour les éléments qui ne peuvent pas être zoomés. Pour plus d'informations sur les éléments pouvant être zoomés, voir <code><a href="/fr/docs/Web/CSS/-ms-content-zooming">-ms-content-zooming</a></code>.</p>
+
+<p>À partir de Windows 8.1, cette propriété est également prise en charge pour les interactions avec le pavé tactile.</p>
+
+<p>Il est nécessaire d'avoir Windows 8 ou une version ultérieure afin d'utiliser cette propriété.</p>
diff --git a/files/fr/web/css/-ms-content-zoom-snap-points/index.html b/files/fr/web/css/-ms-content-zoom-snap-points/index.html
new file mode 100644
index 0000000000..e600c0a099
--- /dev/null
+++ b/files/fr/web/css/-ms-content-zoom-snap-points/index.html
@@ -0,0 +1,74 @@
+---
+title: '-ms-content-zoom-snap-points'
+slug: Web/CSS/-ms-content-zoom-snap-points
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-content-zoom-snap-points
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété CSS <code><strong>-ms-content-zoom-snap-points</strong></code> est une <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">propriété spécifique à Microsoft</a> qui indique l'emplacement des points d'accroches pour les niveaux de zoom.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <strong><code>-ms-content-zoom-snap-points</code></strong> est définie avec l'une des valeurs suivantes.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>snapInterval(&lt;start zoomfactors&gt;, &lt;step zoomfactors&gt;)</code></dt>
+ <dd>
+ <p>Cette forme indique l'emplacement des points d'accroche pour le zoom :</p>
+
+ <ul>
+  <li><em>&lt;start zoomfactor&gt;</em> indique l'emplacement du premier point d'accroche. Cette valeur est exprimée comme un nombre suivi d'un signe pourcent (%).</li>
+  <li><em>&lt;step zoomfactor&gt;</em> indique la distance entre les différents points d'accroche (en zoom et en dézoom) à partir du point d'accroche initial. Cette valeur est exprimée comme un nombre suivi d'un signe pourcent (%).</li>
+ </ul>
+ </dd>
+ <dt><code>snapList(&lt;list zoomfactors&gt;)</code></dt>
+ <dd>
+ <p>Cette forme indique la position des points d'accroche sous la forme d'une liste de points d'accroche indidivuels, séparés par des virgules. Chaque point d'accroche est exprimé comme un nombre suivi d'un caractère pourcent (%).</p>
+
+ <ul>
+  <li>Si l'une des valeurs de <em>&lt;list zoomfactors&gt;</em> est inférieure à la valeur indiquée par la propriété {{CSSXref("-ms-content-zoom-limit-min")}}, ce sera la valeur de cette dernière qui sera utilisée.</li>
+  <li>Si l'une des valeurs de <em>&lt;list zoomfactors&gt;</em> est supérieure à la valeur définie par la propriété {{CSSXref("-ms-content-zoom-limit-max")}}, ce sera la valeur de cette dernière qui sera utilisée.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Cet exemple illustre les deux formes possibles pour une règle utilisant la propriété <code>-ms-content-zoom-snap-points</code>. Dans le premier sélecteur, le premier point d'accorche est situé à 0% puis l'intervalle à 100%. Dans le second sélecteur, chaque point d'accroche est explicitement listé : le premier à 100%, le deuxième à 200%, le troisième à 300%, etc.</p>
+
+<pre class="brush:css no-line-numbers  language-css">.snappy1 {
+  -ms-content-zoom-snap-points: snapInterval(0%, 100%);
+  ...
+}
+
+.snappy2 {
+  -ms-content-zoom-snap-points: snapList(100%, 200%, 300%, 400%, 500%);
+  ...
+ }</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Cette propriété n'a pas d'impact pour les éléments qui ne peuvent pas être zoomés. Voir {CSSXref("-ms-content-zooming")} pour plus de détails sur les éléments pouvant être zoomés.</p>
+
+<p>Lorsqu'un utilisateur fait défiler du contenu ou le déplace puis retire le pointeur (doigt ou stylet), le contenu peut continuer à bouger avec une certaine inertie. Les points d'accroche permettent de modifier ce comportement en arrêtant cette inertie à certains niveaux. Utiliser des points d'accroches permet ainsi d'éviter que le contenu se déplace ou se zoome/dézoome à des niveaux qui ne seraient pas pertinents.</p>
+
+<p>À partir de Windows 8.1, cette propriété est également prise en charge pour les interactions avec le pavé tactile.</p>
+
+<p>Windows 8 ou une version ultérieure est nécessaire afin d'utiliser cette propriété.</p>
diff --git a/files/fr/web/css/-ms-content-zoom-snap-type/index.html b/files/fr/web/css/-ms-content-zoom-snap-type/index.html
new file mode 100644
index 0000000000..d2e52fc009
--- /dev/null
+++ b/files/fr/web/css/-ms-content-zoom-snap-type/index.html
@@ -0,0 +1,54 @@
+---
+title: '-ms-content-zoom-snap-type'
+slug: Web/CSS/-ms-content-zoom-snap-type
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-content-zoom-snap-type
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété CSS <code><strong>-ms-content-zoom-snap-type</strong></code> est une propriété <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">spécifique à Microsoft</a> qui définit la façon dont le zoom se comporte aux points d'accroche pour les niveaux de zoom.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <strong><code>-ms-content-zoom-snap-type</code></strong> est définie avec l'une des valeurs suivantes.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>
+ <p>La valeur par défaut. Les points d'accroche n'ont pas d'impact sur le zoom. Le contenu continuera à être zoomé / dézoomé après que l'action utilisateur se soit arrêtée.</p>
+ </dd>
+ <dt><code>proximity </code></dt>
+ <dd>
+ <p>Cette valeur indique que le processus de zoom/dézoom s'arrête à peu près au niveau du point d'accroche après que l'interaction utilisateur ait cessé. Avec cette valeur, il est donc possible que <a href="/fr/docs/Web/CSS/msContentZoomFactor">le facteur de zoom du contenu</a> soit arrêté entre deux points d'accroche.</p>
+ </dd>
+ <dt><code>mandatory</code></dt>
+ <dd>
+ <p>Cette valeur indique que le processus de zoom/dézoom s'arrête obligatoirement sur un des points d'accroche après que l'interaction utilisateur ait cessé. Le point d'accroche sélectionné est le point d'accroche le plus proche <a href="/en-US/docs/Web/CSS/msContentZoomFactor ">du facteur de zoom du contenu</a> sur lequel le mouvement se serait arrêté.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Cette propriété n'a pas d'impact pour les éléments qui ne peuvent pas être zoomés. Voir {{CSSXRef("-ms-content-zooming")}} pour plus de détails sur les éléments pouvant être zoomés.</p>
+
+<p>Lorsqu'un utilisateur fait défiler du contenu ou le déplace puis retire le pointeur (doigt ou stylet), le contenu peut continuer à bouger avec une certaine inertie. Les points d'accroche permettent de modifier ce comportement en arrêtant cette inertie à certains niveaux. Utiliser des points d'accroches permet ainsi d'éviter que le contenu se déplace ou se zoome/dézoome à des niveaux qui ne seraient pas pertinents.</p>
+
+<p>À partir de Windows 8.1, cette propriété est également prise en charge pour les interactions avec le pavé tactile.</p>
+
+<p>Windows 8 ou une version ultérieure est nécessaire afin d'utiliser cette propriété.</p>
diff --git a/files/fr/web/css/-ms-content-zoom-snap/index.html b/files/fr/web/css/-ms-content-zoom-snap/index.html
new file mode 100644
index 0000000000..2e3b584d59
--- /dev/null
+++ b/files/fr/web/css/-ms-content-zoom-snap/index.html
@@ -0,0 +1,44 @@
+---
+title: '-ms-content-zoom-snap'
+slug: Web/CSS/-ms-content-zoom-snap
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-content-zoom-snap
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété CSS <code><strong>-ms-content-zoom-snap</strong></code> est une <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">propriété raccourcie spécifique à Microsoft</a> qui définit les valeurs des proriétés {{CSSXref("-ms-content-zoom-snap-type")}} et {{CSSXref("-ms-content-zoom-snap-points")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <strong><code>-ms-content-zoom-snap</code></strong> est définie avec une ou deux des valeurs suivantes, dans cet ordre et séparées par un espace.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>-ms-content-zoom-snap-type</code></dt>
+ <dd>La valeur à utiliser pour la propriété {{CSSXref("-ms-content-zoom-snap-type")}}.</dd>
+ <dt><code>-ms-content-zoom-snap-points</code></dt>
+ <dd>La valeur à utiliser pour la propriété {{CSSXref("-ms-content-zoom-snap-points")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cet élément ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Cette propriété n'a pas d'impact pour les éléments qui ne peuvent pas être zoomés. Voir {{CSSXref("-ms-content-zooming")}} pour plus de détails sur les éléments pouvant être zoomés.</p>
+
+<p>À partir de Windows 8.1, cette propriété est également prise en charge pour les interactions avec le pavé tactile.</p>
+
+<p>Windows 8 ou une version ultérieure est nécessaire afin d'utiliser cette propriété.</p>
diff --git a/files/fr/web/css/-ms-content-zooming/index.html b/files/fr/web/css/-ms-content-zooming/index.html
new file mode 100644
index 0000000000..216a176781
--- /dev/null
+++ b/files/fr/web/css/-ms-content-zooming/index.html
@@ -0,0 +1,46 @@
+---
+title: '-ms-content-zooming'
+slug: Web/CSS/-ms-content-zooming
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-content-zooming
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété CSS <code><strong>-ms-content-zooming</strong></code> est une <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">propriété spécifique à Microsoft</a> qui indique si le zoom est autorisé.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <strong><code>-ms-content-zooming</code></strong> est définie avec l'un des mots-clés suivants.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>La valeur initiale pour tous les éléments sauf ceux de plus haut niveau. L'élément ne peut pas être zoomé.</dd>
+ <dt><code>zoom </code></dt>
+ <dd>La valeur initiale pour l'élément de plus haut niveau. L'élément peut être zoomé.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Cette propriété n'a pas d'impact sauf si le dépassement est permis sur l'axe horizontal et sur l'axe vertical.</p>
+
+<p>Par défaut, les éléments pouvant être zoomés peuvent être zoomés au doigt avec un geste de "pincement". L'élément de plus haut niveau peut également être zoomés avec une double touche lorsque le zoom est autorisé.</p>
+
+<p>À partir de Windows 8.1, cette propriété est également prise en charge pour les interactions avec le pavé tactile.</p>
+
+<p>Il est nécessaire d'avoir Windows 8 ou une version ultérieure afin d'utiliser cette propriété.</p>
diff --git a/files/fr/web/css/-ms-filter/index.html b/files/fr/web/css/-ms-filter/index.html
new file mode 100644
index 0000000000..5b0f0a3042
--- /dev/null
+++ b/files/fr/web/css/-ms-filter/index.html
@@ -0,0 +1,218 @@
+---
+title: '-ms-filter'
+slug: Web/CSS/-ms-filter
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-filter
+---
+<div>{{CSSRef}}{{Non-standard_Header}}{{Obsolete_Header}}</div>
+
+<p>La propriété <strong><code style="white-space: nowrap;">-ms-filter</code></strong> est <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">une propriété spécifique à Microsoft</a> qui permet de définir des filtres à appliquer à un objet.</p>
+
+<div class="warning">
+<p><strong>Attention !</strong> Ne pas confondre cette propriété et la propriété standard {{CSSxRef("filter")}}  car les deux sont pleinement incompatibles.</p>
+</div>
+
+<div class="warning">
+<p><strong>Attention !</strong> Cette fonctionnalité a été dépréciée avec Internet Explorer 9. Dans Internet Explorer 10, cette fonctionnalité a été supprimée et ne devrait plus être utilisée.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <code>-ms-filter</code> est définie avec une chaîne de caractères contenant une liste d'un ou plusieurs éléments, séparés par des espaces. Chacun de ces éléments peut avoir l'un des types suivants :</p>
+
+<ul>
+ <li><a href="https://msdn.microsoft.com/en-us/library/ms673539(v=vs.85).aspx">filtre</a></li>
+ <li><a href="https://msdn.microsoft.com/en-us/library/ms673540(v=vs.85).aspx">transition</a></li>
+ <li><a href="https://msdn.microsoft.com/en-us/library/ms673538(v=vs.85).aspx">surface procédurale</a></li>
+</ul>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">filter: <a href="#-ms-filter-function">&lt;-ms-filter-function&gt;</a><a href="/en-US/docs/Web/CSS/Value_definition_syntax#Plus_()">+</a> {{Deprecated_Inline}}
+-ms-filter: <a href="/en-US/docs/CSS/Value_definition_syntax#Brackets">[</a> "'" <a href="#-ms-filter-function">&lt;-ms-filter-function&gt;</a><a href="/en-US/docs/Web/CSS/Value_definition_syntax#Hash_mark_()">#</a> "'" <a href="/en-US/docs/CSS/Value_definition_syntax#Brackets">]</a> <a href="/en-US/docs/CSS/Value_definition_syntax#Single_bar">|</a> <a href="/en-US/docs/CSS/Value_definition_syntax#Brackets">[</a> '"' <a href="#-ms-filter-function">&lt;-ms-filter-function&gt;</a><a href="/en-US/docs/Web/CSS/Value_definition_syntax#Hash_mark_()">#</a> '"' <a href="/en-US/docs/CSS/Value_definition_syntax#Brackets">]</a>
+
+où
+<a id="-ms-filter-function">&lt;-ms-filter-function&gt;</a> = <a href="#-ms-filter-function-progid">&lt;-ms-filter-function-progid&gt;</a> <a href="/en-US/docs/CSS/Value_definition_syntax#Single_bar">|</a> <a href="#-ms-filter-function-legacy">&lt;-ms-filter-function-legacy&gt;</a>
+
+où
+<a id="-ms-filter-function-progid">&lt;-ms-filter-function-progid&gt;</a> = 'progid:' <a href="/en-US/docs/CSS/Value_definition_syntax#Brackets">[</a> &lt;ident-token&gt; '.' <a href="/en-US/docs/CSS/Value_definition_syntax#Brackets">]</a><a href="/en-US/docs/CSS/Value_definition_syntax#Asterisk_(*)">*</a> <a href="/en-US/docs/CSS/Value_definition_syntax#Brackets">[</a> &lt;ident-token&gt; <a href="/en-US/docs/CSS/Value_definition_syntax#Single_bar">|</a> &lt;function-token&gt; &lt;any-value&gt; ')' <a href="/en-US/docs/CSS/Value_definition_syntax#Brackets">]</a>
+<a id="-ms-filter-function-legacy">&lt;-ms-filter-function-legacy&gt;</a> = &lt;ident-token&gt; <a href="/en-US/docs/CSS/Value_definition_syntax#Single_bar">|</a> &lt;function-token&gt; &lt;any-value&gt; ')'</pre>
+
+<p>La chaîne de caractères ({{CSSxRef("string")}}) contient la liste des filtres, transitions et surfaces procédurales. Voir <a href="https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/ms532853(v=vs.85)">la référence relative aux filtres et transitions</a> pour plus de détails.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>L'exemple suivant illustre comment utiliser la propriété <code>-ms-filter</code> dans Internet Explorer 8.</p>
+
+<pre class="brush: css">-ms-filter: 'progid:DXImageTransform.Microsoft.MotionBlur(strength=50), progid:DXImageTransform.Microsoft.BasicImage(mirror=1)';
+</pre>
+
+<p>L'exemple suivant illustre comment utiliser un style en incise pour appliquer un filtre sur une image.</p>
+
+<pre class="brush: html">&lt;img style="filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=50)
+    progid:DXImageTransform.Microsoft.BasicImage(mirror=1)"
+    src="/workshop/samples/author/dhtml/graphics/cone.jpg"
+    height="80px" width="80px" alt="cone"&gt;
+</pre>
+
+<p>Dans l'exemple suivant, on voit comment utiliser les API scriptées pour définir un filtre sur une image.</p>
+
+<pre class="brush: html">&lt;body&gt;
+  &lt;p&gt;Click the image to start the filter.&lt;/p&gt;
+  // Call the function.
+  &lt;div id="filterFrom"
+      style="position: absolute;
+            width: 200px;
+            height: 250px;
+            background-color: white;
+            filter: revealTrans()"&gt;
+    &lt;img id="imageFrom"
+         style="position: absolute;
+                top: 20px;
+                left: 20px;"
+                src="sphere.jpg"
+                alt="sphere"&gt;
+    &lt;div id="filterTo"
+         style="position: absolute;
+                width: 200px;
+                height: 250px;
+                top: 20px;
+                left: 20px;
+                background: white;
+                visibility: hidden;"&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;script type="text/javascript"&gt;
+  let filterImg = document.querySelector('#filterFrom');
+  filterImg.addEventListener('click', doFilter);
+
+  function doFilter () {
+    filterFrom.filters.item(0).Apply(); // 12 is the dissolve filter.
+    filterFrom.filters.item(0).Transition=12;
+    imageFrom.style.visibility = "hidden";
+    filterTo.style.visibility = "";
+    filterFrom.filters.item(0).play(14);
+  }
+  &lt;/script&gt;
+&lt;/body&gt;
+</pre>
+
+<h3 id="Dégradé">Dégradé</h3>
+
+<pre class="syntaxbox">progid:DXImageTransform.Microsoft.Gradient( <a href="#Gradient-Properties">&lt;properties&gt;</a> )
+
+où
+&lt;properties&gt; = <a href="/en-US/docs/CSS/Value_definition_syntax#Brackets">[</a> <a href="#Gradient-Enabled">&lt;Enabled&gt;</a> <a href="/en-US/docs/CSS/Value_definition_syntax#Single_bar">|</a> <a href="#Gradient-EndColor">&lt;EndColor&gt;</a> <a href="/en-US/docs/CSS/Value_definition_syntax#Single_bar">|</a> <a href="#Gradient-EndColorStr">&lt;EndColorStr&gt;</a> <a href="/en-US/docs/CSS/Value_definition_syntax#Single_bar">|</a> <a href="#Gradient-GradientType">&lt;GradientType&gt;</a> <a href="/en-US/docs/CSS/Value_definition_syntax#Single_bar">|</a> <a href="#Gradient-StartColor">&lt;StartColor&gt;</a> <a href="/en-US/docs/CSS/Value_definition_syntax#Single_bar">|</a> <a href="#Gradient-StartColorStr">&lt;StartColorStr&gt;</a> <a href="/en-US/docs/CSS/Value_definition_syntax#Brackets">]</a><a href="/en-US/docs/Web/CSS/Value_definition_syntax#Hash_mark_()">#</a>
+
+où
+&lt;Enabled&gt; = 'Enabled=' <a href="/en-US/docs/CSS/Value_definition_syntax#Brackets">[</a> true <a href="/en-US/docs/CSS/Value_definition_syntax#Single_bar">|</a> false <a href="/en-US/docs/CSS/Value_definition_syntax#Brackets">]</a>
+&lt;EndColor&gt; = 'StartColor=' {{CSSxRef("&lt;color&gt;")}}
+&lt;EndColorStr&gt; = 'StartColorStr=' {{CSSxRef("&lt;color&gt;")}}
+&lt;GradientType&gt; = 'GradientType=' {{CSSxRef("&lt;integer&gt;")}}
+&lt;StartColor&gt; = 'StartColor=' {{CSSxRef("&lt;color&gt;")}}
+&lt;StartColorStr&gt; = 'StartColorStr=' {{CSSxRef("&lt;color&gt;")}}
+</pre>
+
+<dl>
+ <dt><code>Enabled</code></dt>
+ <dd><strong>Valeur par défaut :</strong> <code>true</code><br>
+ Utiliser <code>false</code> pour désactiver le dégradé.</dd>
+ <dt><code>EndColor</code></dt>
+ <dd>La couleur pour la fin du dégradé, seules les couleurs opaques (utilisant la notation <code>#RRGGBB</code>) sont prises en charge.</dd>
+ <dt><code>EndColorStr</code></dt>
+ <dd>La couleur pour la fin du dégradé avec une prise en charge des couleurs opaques avec la notation <code>#RRGGBB</code> et une prise en charge des couleurs avec la notation <code>#AARRGGBB</code>.</dd>
+ <dt><code>GradientType</code></dt>
+ <dd><strong>Valeur par défaut :</strong> <code>0</code> (ce qui est équivalent à {{CSSxRef("linear-gradient",'linear-gradient(to bottom, …)')}})<br>
+ Toute valeur non nulle rendra le dégradé horizontal (équivalent à {{CSSxRef("linear-gradient",'linear-gradient(to right, …)')}})</dd>
+ <dt><code>StartColor</code></dt>
+ <dd>La couleur pour le début du dégradé, seules les couleurs opaques (utilisant la notation <code>#RRGGBB</code>) sont prises en charge.</dd>
+ <dt><code>StartColorStr</code></dt>
+ <dd>La couleur pour le début du dégradé avec une prise en charge des couleurs opaques avec la notation <code>#RRGGBB</code> et une prise en charge des couleurs avec la notation <code>#AARRGGBB</code>.</dd>
+</dl>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="gradient horizontal"&gt;&lt;/div&gt;
+&lt;div class="gradient vertical"&gt;&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<div class="hidden">
+<pre class="brush: css">html, body {
+  overflow-x: hidden;
+  max-width: 100vw;
+}
+
+.gradient {
+  width: 100vw;
+  height: 60px;
+  height: 50vh;
+}</pre>
+</div>
+
+<pre class="brush: css">.gradient.horizontal {
+  -ms-filter: 'progid:DXImageTransform.Microsoft.Gradient(startColorStr="#ffffff", endColorStr="#000000", GradientType=1)';
+  background-image: linear-gradient(to right, #ffffff 0%, #000000 100%);
+}
+
+.gradient.vertical {
+  -ms-filter: 'progid:DXImageTransform.Microsoft.Gradient(startColorStr="#ffffff", endColorStr="#000000", GradientType=0)';
+  background-image: linear-gradient(to bottom, #ffffff 0%, #000000 100%);
+}
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Dégradé","100%","120")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété spécifique à Microsoft, ne doit pas être utilisée sur le Web et ne fait partie d'aucune spécification.</p>
+
+<p>{{CSSInfo("-ms-filter")}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Le tableau suivant énumère les différents filtres DX spécifiques qui étaient fréquemment utilisés, avec leur équivalent en CSS standard :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Nom du filtre DX</th>
+   <th scope="col">Alternative standard</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>Alpha</code></td>
+   <td>{{CSSxRef("opacity")}}</td>
+  </tr>
+  <tr>
+   <td><code>AlphaImageLoader</code></td>
+   <td>{{HTMLElement("img")}} ou {{CSSxRef("background-image")}} et les propriétés associées</td>
+  </tr>
+  <tr>
+   <td><code><a href="https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/ms532997(v=vs.85)">Gradient</a></code></td>
+   <td><code>{{CSSxRef("background-image")}}: {{CSSxRef("linear-gradient")}}</code></td>
+  </tr>
+  <tr>
+   <td><code>DropShadow</code></td>
+   <td>{{CSSxRef("text-shadow")}} ou {{CSSxRef("box-shadow")}}</td>
+  </tr>
+  <tr>
+   <td><code>Matrix</code></td>
+   <td>{{CSSxRef("transform")}}, {{CSSxRef("transform-origin")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Pour Windows Internet Explorer 8, la propriété <code style="white-space: nowrap;">-ms-filter</code> est une extension à CSS et peut être utilisée comme synonyme de {{CSSxRef("filter")}} en mode standard IE8.</p>
+
+<p>Un objet doit avoir une disposition où afficher le filtre. Pour cela, on pourra fournir une hauteur et une largeur à l'élément grâce aux propriétés {{CSSxRef("height")}} et {{CSSxRef("width")}}.</p>
+
+<p>Le filtre d'ombre peut être appliqué à un objet {{HTMLElement("img")}} en paramétrant le filtre sur le conteneur de l'image.</p>
diff --git a/files/fr/web/css/-ms-flow-from/index.html b/files/fr/web/css/-ms-flow-from/index.html
new file mode 100644
index 0000000000..30218bc85d
--- /dev/null
+++ b/files/fr/web/css/-ms-flow-from/index.html
@@ -0,0 +1,40 @@
+---
+title: '-ms-flow-from'
+slug: Web/CSS/-ms-flow-from
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-flow-from
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété CSS <code><strong>-ms-flow-from</strong></code> est une propriété spécifique de <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">Microsoft</a> qui permet d'obtenir ou de définir une valeur identifiant un conteneur {{HTMLElement("iframe")}} du document et qui reçoit du contenu d'une  source de données.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <code>-ms-flow-from</code> est définie grâce à l'une des valeurs suivantes.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>
+ <p>La valeur par défaut. Aucun conteneur n'est indiqué.</p>
+ </dd>
+ <dt><a id="&lt;custom-ident>"></a>{{cssxref("&lt;custom-ident&gt;")}}</dt>
+ <dd>
+ <p>Le nom du conteneur de région.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
diff --git a/files/fr/web/css/-ms-flow-into/index.html b/files/fr/web/css/-ms-flow-into/index.html
new file mode 100644
index 0000000000..fc3e6d0e43
--- /dev/null
+++ b/files/fr/web/css/-ms-flow-into/index.html
@@ -0,0 +1,40 @@
+---
+title: '-ms-flow-into'
+slug: Web/CSS/-ms-flow-into
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-flow-into
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété CSS <code><strong>-ms-flow-into</strong></code> est une propriété spécifique de <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">Microsoft extension</a> qui permet d'obtenir ou de définir une valeur identifiant un conteneur {{HTMLElement("iframe")}} du document et qui sert de source de données à la région.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <strong><code>-ms-flow-into</code></strong> est définie grâce à l'une des valeurs suivantes.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>
+ <p>La valeur par défaut. Aucun conteneur n'est indiqué.</p>
+ </dd>
+ <dt><a id="&lt;custom-ident>"></a>{{cssxref("&lt;custom-ident&gt;")}}</dt>
+ <dd>
+ <p>Le nom du conteneur de région.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
diff --git a/files/fr/web/css/-ms-high-contrast-adjust/index.html b/files/fr/web/css/-ms-high-contrast-adjust/index.html
new file mode 100644
index 0000000000..255065c35e
--- /dev/null
+++ b/files/fr/web/css/-ms-high-contrast-adjust/index.html
@@ -0,0 +1,44 @@
+---
+title: '-ms-high-contrast-adjust'
+slug: Web/CSS/-ms-high-contrast-adjust
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-high-contrast-adjust
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété CSS <code><strong>-ms-high-contrast-adjust</strong></code> est une <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">propriété spécifique à Microsoft</a> qui permet de récupérer ou de définir une valeur qui indique s'il faut surcharger des propriétés CSS qui auraient été définies pour un mode de contraste élevé.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <strong><code>-ms-high-contrast-adjust</code></strong> est définie avec l'une des valeurs suivantes.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>
+ <p>Cet mot-clé indique que les propriétés CSS applicables seront ajustées comme souhaité lorsque le système utilisera un mode de contraste élevé.</p>
+ </dd>
+ <dt><code>none</code></dt>
+ <dd>
+ <p>Cet mot-clé indique que les propriétés CSS applicables ne seront pas ajustées lorsque le système utilisera un mode de contraste élevé.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété spécifique et n'est décrite dans aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>La propriété <code><strong>-ms-high-contrast-adjust</strong></code> fonctionne avec la caractéristique média {{cssxref("-ms-high-contrast")}}.</p>
diff --git a/files/fr/web/css/-ms-high-contrast/index.html b/files/fr/web/css/-ms-high-contrast/index.html
new file mode 100644
index 0000000000..e9aef6fa8e
--- /dev/null
+++ b/files/fr/web/css/-ms-high-contrast/index.html
@@ -0,0 +1,71 @@
+---
+title: '-ms-high-contrast'
+slug: Web/CSS/-ms-high-contrast
+tags:
+  - '@media'
+  - CSS
+  - Caractéristique média
+  - Non-standard
+  - Reference
+translation_of: Web/CSS/@media/-ms-high-contrast
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Cibler_des_caractéristiques_média">caractéristique média</a> <code><strong>-ms-high-contrast</strong></code>, relative à la règle @ <code><a href="/fr/docs/Web/CSS/@media">@media</a></code>, est une <a href="/en-US/docs/Web/CSS/Microsoft_CSS_extensions">extension Microsoft </a>qui décrit si l'application est affichée dans un mode de contraste élevé et, si c'est le cas, quelle est la variation de couleur affichée.</p>
+
+<p>Cette caractéristique média s'applique aux média de type matriciel (<em>bitmap</em>). Elle ne gère pas les préfixes <code>min</code> et <code>max</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La caractéristique média <strong><code>-ms-high-contrast</code></strong> est définie avec une des valeurs définies ci-après.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>active</code></dt>
+ <dd>
+ <p>Cette valeur indique que les règles de mise en forme qui suivent sont appliquées lorsque le système utilise un affichage avec contraste élevé, quel que soit la variation de couleur.</p>
+ </dd>
+ <dt><code>none</code>{{deprecated_inline}}</dt>
+ <dd>Cette valeur n'est plus prise en charge par Edge.</dd>
+ <dt><code>black-on-white</code></dt>
+ <dd>
+ <p>Cette valeur indique que les règles de mise en forme qui suivent sont appliquées lorsque le système utilise un affichage avec contraste élevé en noir sur blanc.</p>
+ </dd>
+ <dt><code>white-on-black</code></dt>
+ <dd>
+ <p>Cette valeur indique que les règles de mise en forme qui suivent sont appliquées lorsque le système utilise un affichage avec contraste élevé en blanc sur noir.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Les déclarations suivantes s'appliqueront respectivement sur des applications utilisées avec un mode de contraste élevé, avec une variation en noir sur blanc et enfin avec une variation en blanc sur noir.</p>
+
+<pre class="brush: css">@media screen and (-ms-high-contrast: active) {
+  /* Règles utilisées dans tous les cas si
+     le contraste élevé est utilisé */
+}
+@media screen and (-ms-high-contrast: black-on-white) {
+  div { background-image: url('image-bw.png'); }
+}
+@media screen and (-ms-high-contrast: white-on-black) {
+  div { background-image: url('image-wb.png'); }
+}
+</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<p>Cette caractéristique est propre à Microsoft et n'est décrite dans aucune spécification.</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>À partir de Microsoft Edge, <code><strong>-ms-high-contrast: none</strong></code> n'est plus pris en charge.</p>
+
+<p>La caractéristique média <code><strong>-ms-high-contrast</strong></code> fonctionne avec la propriété {{cssxref("-ms-high-contrast-adjust")}}.</p>
+
+<p>La caractéristique média <code><strong>-ms-high-contrast</strong></code> a été introduite avec Windows 8.</p>
diff --git a/files/fr/web/css/-ms-hyphenate-limit-chars/index.html b/files/fr/web/css/-ms-hyphenate-limit-chars/index.html
new file mode 100644
index 0000000000..b95cc7f355
--- /dev/null
+++ b/files/fr/web/css/-ms-hyphenate-limit-chars/index.html
@@ -0,0 +1,46 @@
+---
+title: '-ms-hyphenate-limit-chars'
+slug: Web/CSS/-ms-hyphenate-limit-chars
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-hyphenate-limit-chars
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété CSS <code><strong>-ms-hyphenate-limit-chars</strong></code> est <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">une propriété spécifique à Microsoft</a> qui définit une à trois valeurs indiquant le nombre minimal de caractères utilisés pour un mot tronqué pour passer à la ligne. Si le mot n'a pas suffisamment de caractères avant ou après le passage à la ligne, aucune césure n'est appliquée sur le mot.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <strong><code>-ms-hyphenate-limit-chars</code></strong> est définie de la façon suivante.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>
+ <p>Cette valeur correspond à la valeur composite <code>5 2 2</code> qui signifie que le mot doit mesurer au moins 5 caractères pour être sujet à une césure, qu'il faut au moins 2 caractères avant la césure et 2 caractères après la césure.</p>
+ </dd>
+ <dt><code>&lt;integer&gt; {1,3}</code></dt>
+ <dd>
+ <p>Une à trois valeurs entières (cf. {{cssxref("&lt;integer&gt;")}}) qui décrivent respectivement la taille minimale du mot, le nombre de caractères minimal avant la césure et le nombre de caractères minimal après la césure.</p>
+
+ <p>Lorsque la troisième valeur n'est pas indiquée, la valeur utilisée est égale à la seconde valeur.</p>
+
+ <p>Si la deuxième et troisième valeurs sont absentes, elles utilisent la même valeur que <code>auto</code>.</p>
+
+ <p>Note : il n'est pas possible d'utiliser des valeurs négatives.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété non-standard et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
diff --git a/files/fr/web/css/-ms-hyphenate-limit-lines/index.html b/files/fr/web/css/-ms-hyphenate-limit-lines/index.html
new file mode 100644
index 0000000000..cc6d74f543
--- /dev/null
+++ b/files/fr/web/css/-ms-hyphenate-limit-lines/index.html
@@ -0,0 +1,44 @@
+---
+title: '-ms-hyphenate-limit-lines'
+slug: Web/CSS/-ms-hyphenate-limit-lines
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-hyphenate-limit-lines
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété <code><strong>-ms-hyphenate-limit-lines</strong></code> est <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">une propriété spécifique à Microsoft</a> qui indique le nombre maximum de lignes consécutives pouvant se terminer avec un mot sur deux lignes (au sein d'un même élément).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <strong><code>-ms-hyphenate-limit-lines</code></strong> est définie avec l'une des valeurs suivantes.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>no-limit</code></dt>
+ <dd>
+ <p>Cette valeur indique que les césures ne sont pas limitées en fonction des lignes coupées auparavant. On peut donc avoir toutes les lignes de texte de l'élément qui se terminent par une césure.</p>
+ </dd>
+ <dt><code>&lt;integer&gt;</code></dt>
+ <dd>
+ <p>Un entier (type {{cssxref("&lt;integer&gt;")}} qui indique le nombre maximal de lignes successives pouvant se terminer par une césure.</p>
+
+ <p>Si on utilise la valeur 2 (par exemple), on ne pourra pas avoir plus de deux lignes qui se suivent et pour lesquelles la fin est un mot coupé. Lorsqu'on utilise la valeur 0, cela signifie qu'aucune ligne ne peut entraîner la césure d'un de ses mots et il n'y a donc aucune césure.</p>
+
+ <p>Les valeurs négatives ne sont pas autorisées pour cette propriété.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété spécifique à Microsoft et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
diff --git a/files/fr/web/css/-ms-hyphenate-limit-zone/index.html b/files/fr/web/css/-ms-hyphenate-limit-zone/index.html
new file mode 100644
index 0000000000..f1cd54609e
--- /dev/null
+++ b/files/fr/web/css/-ms-hyphenate-limit-zone/index.html
@@ -0,0 +1,46 @@
+---
+title: '-ms-hyphenate-limit-zone'
+slug: Web/CSS/-ms-hyphenate-limit-zone
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-hyphenate-limit-zone
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété CSS <code><strong>-ms-hyphenate-limit-zone</strong></code> est <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">une propriété spécifique à Microsoft</a> qui indique la largeur de la zone dans laquelle on peut appliquer une césure et un trait d'union sur les mots pour passer à la ligne.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <strong><code>-ms-hyphenate-limit-zone</code></strong> est définie avec l'une des valeurs suivantes.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt>{{cssxref("percentage")}}</dt>
+ <dd>
+ <p>Un entier suivi du caractère % qui indique la taille de la zone proportionnellement à la taille de la boîte de la ligne. Les valeurs négatives ne sont pas autorisées.</p>
+ </dd>
+ <dt>{{cssxref("length")}}</dt>
+ <dd>
+ <p>Une valeur décimale suivie par une unité qui indique la largeur de la zone. Pour plus d'informations sur les valeurs possibles, voir <a href="/fr/docs/Web/CSS/Types_CSS">les types de donnée en CSS</a>. Les valeurs négatives ne sont pas autorisées.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<p>Cette propriété est une propriété spécifique et n'est décrite dans aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>La propriété <code><strong>-ms-hyphenate-limit-zone</strong></code> permet de contrôler le nombre de blancs autorisés pour le passage à la ligne. La zone concernée se situe toujours sur le côté logique droit de la boîte de <em>padding</em>..</p>
+
+<p>Un mot sera uniquement sujet à une césure s'il commence à l'extérieur ou à la limite gauche de la zone.</p>
diff --git a/files/fr/web/css/-ms-ime-align/index.html b/files/fr/web/css/-ms-ime-align/index.html
new file mode 100644
index 0000000000..9193fc87d2
--- /dev/null
+++ b/files/fr/web/css/-ms-ime-align/index.html
@@ -0,0 +1,48 @@
+---
+title: '-ms-ime-align'
+slug: Web/CSS/-ms-ime-align
+tags:
+  - CSS
+  - NeedsBrowserCompatibility
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-ime-align
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>-ms-ime-align</code></strong> est <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">une propriété spécifique à Microsoft</a> qui permet d'aligner la boîte de la fenêtre pour l'<em>Input Method Editor</em> (IME) par rapport à l'élément sur lequel la composition IME est active.</p>
+
+<p>Cette extension est implémentée par Microsoft Edge et Internet Explorer 11.</p>
+
+<p>Les listes IME potentielles sont positionnées sur l'écran avec suffisamment d'espace pour permettre une saisie de texte. Dans certains cas, l'IME peut imposer une taille minimale.</p>
+
+<p>Lorsqu'on utilise <code>-ms-ime-align: after</code>, un IME pourra ajuster la fenêtre candidate et le comportement de la saisie clavier afin de permettre une meilleure ergonomie (en utilisant par exemple une liste candidate horizontale et en autorisant l'envoi de certaines touches à l'application pour les suggestions).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Keyword values */
+-ms-ime-align: auto;
+-ms-ime-align: after;
+</pre>
+
+<p>La propriété <strong><code>-ms-ime-align</code></strong> est définie avec l'un des mot-clés suivants.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>La valeur initiale. L'IME peut aligner la fenêtre candidate de n'importe quelle manière.</dd>
+ <dt><code>after</code></dt>
+ <dd>L'IME devrait essayer d'aligner la fenêtre candidate sous l'élément (pour les dispositions organisées avec un mode gauche à droite ou avec un mode droite à gauche).</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
diff --git a/files/fr/web/css/-ms-overflow-style/index.html b/files/fr/web/css/-ms-overflow-style/index.html
new file mode 100644
index 0000000000..b118010d4e
--- /dev/null
+++ b/files/fr/web/css/-ms-overflow-style/index.html
@@ -0,0 +1,43 @@
+---
+title: '-ms-overflow-style'
+slug: Web/CSS/-ms-overflow-style
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-overflow-style
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété <strong><code>-ms-overflow-style</code></strong> est une propriété propriétaire, spécifique à Internet Explorer et Microsoft Edge qui permet de contrôler le comportement des barres de défilement lorsque le contenu d'un élément déborde.</p>
+
+<h2 id="Valeurs">Valeurs</h2>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>La valeur initiale. Synonyme de <code>inherit</code>.</dd>
+ <dt><code>none</code></dt>
+ <dd>Les barres de défilement ne sont jamais affichées. Si l'élément dépasse, on peut toujours le faire défiler.</dd>
+ <dt><code>scrollbar</code></dt>
+ <dd>Les barres de défilement « classiques » sont affichées si le contenu de l'élément dépasse. Les barres ne se masquent pas automatiquement et ne chevauchent jamais le contenu de l'élément. Les dimensions de la zone accordée au contenu sont réduites d'autant que nécessaire pour afficher les barres de défilement.</dd>
+ <dt><code>-ms-autohiding-scrollbar</code></dt>
+ <dd>Des barres de défilement sont utilisées si le contenu dépasse et ces barres sont automatiquement masquées. C'est-à-dire qu'elles apparaissent pendant le défilement ou peu après que le pointeur ait interagit avec l'élément. Elles se « cachent » après l'arrêt de l'interaction et/ou du défilement. Lorsqu'elles sont visbles, les barres de défilement empiètent sur le contenu de l'élément.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété propriétaire liée à Trident/Microsoft et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{CSSxRef("scrollbar-width")}}</li>
+ <li>{{CSSxRef("::-webkit-scrollbar")}}</li>
+</ul>
diff --git a/files/fr/web/css/-ms-scroll-chaining/index.html b/files/fr/web/css/-ms-scroll-chaining/index.html
new file mode 100644
index 0000000000..f5ade6d887
--- /dev/null
+++ b/files/fr/web/css/-ms-scroll-chaining/index.html
@@ -0,0 +1,68 @@
+---
+title: '-ms-scroll-chaining'
+slug: Web/CSS/-ms-scroll-chaining
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-scroll-chaining
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété <code><strong>-ms-scroll-chaining</strong></code> est <a href="/en-US/docs/Web/CSS/Microsoft_extensions">une propriété spécifique à Microsoft</a> qui définit la façon dont le défilement se comporte lorsque l'utilisateur atteint la limite du défilement suite à une manipulation.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <strong><code>-ms-scroll-chaining</code></strong> est définie avec l'une des valeurs suivantes.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>chained</code></dt>
+ <dd>
+ <p>La valeur initiale. L'élément parent le plus proche commence à défiler lorsque l'utilisateur atteint la limite. Il n'y a pas d'effet de rebond.</p>
+ </dd>
+ <dt><code>none</code></dt>
+ <dd>
+ <p>Un effet de rebond est utilisé lorsque l'utilisateur atteint la limite de défilement.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, le conteneur de l'image a <code>-ms-scroll-chaining property</code> qui vaut <code>chained</code> et c'est donc l'élément parent qui poursuivra le défilement. Si on avait utilisé <code>none</code>, un effet de blocage avec rebondissement aurait été utilisé. Pour plus d'informations, voir <a href="https://code.msdn.microsoft.com/windowsapps/scrolling-panning-and-47d70d4c">un exemple de défilement, déplacement, zoom en HTML</a>.</p>
+
+<pre class="brush: css">.imageContainer {
+  -ms-scroll-chaining: chained;
+  -ms-overflow-style: none;
+  -ms-content-zooming: zoom;
+  -ms-scroll-rails: none;
+  -ms-content-zoom-limit-min: 100%;
+  -ms-content-zoom-limit-max: 500%;
+  -ms-scroll-snap-type: proximity;
+  -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
+  -ms-overflow-style: none;
+  width: 480px;
+  height: 270px;
+  overflow: auto;
+}
+</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<p>Cette propriété est spécifique à Microsoft et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Cette propriété ne s'applique qu'aux contrôles tactiles. Quelle que soit la valeur de <code>–ms-scroll-chaining</code>, les contrôles clavier ne permettront pas l'enchaînement du défilement et la navigation à la souris entraînera toujours le défilement sur l'élément ancêtre le plus proche.</p>
+
+<p>Cette propriété n'a aucun effet sur les éléments qui ne défilent pas.</p>
+
+<p>Cette propriété est uniquement disponible pour Windows 8 ou les versions ultérieures.</p>
diff --git a/files/fr/web/css/-ms-scroll-limit-x-max/index.html b/files/fr/web/css/-ms-scroll-limit-x-max/index.html
new file mode 100644
index 0000000000..88f3276fda
--- /dev/null
+++ b/files/fr/web/css/-ms-scroll-limit-x-max/index.html
@@ -0,0 +1,50 @@
+---
+title: '-ms-scroll-limit-x-max'
+slug: Web/CSS/-ms-scroll-limit-x-max
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-scroll-limit-x-max
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété CSS <code><strong>-ms-scroll-limit-x-max</strong></code> est <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">une propriété spécifique à Microsoft</a> qui indique la valeur maximum pour la propriété {{domxref("Element.scrollLeft")}}.</p>
+
+<p>Cette propriété est accessible en lecture et en écriture.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <code>-ms-scroll-limit-x-max</code> est définie avec l'une des valeurs suivantes.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>
+ <p>La valeur maximale pour <code><a href="/fr/docs/Web/API/Element/scrollLeft">scrollLeft</a></code> est égale à <code><a href="/fr/docs/Web/API/Element/scrollWidth">scrollWidth</a></code>.</p>
+ </dd>
+ <dt>{{cssxref("length")}}</dt>
+ <dd>
+ <p>La longueur maximale choisie pour <code><a href="/fr/docs/Web/API/Element/scrollLeft">scrollLeft</a></code>.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<p>Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Cette propriété n'a aucun effet sur les éléments qui ne défilent pas.</p>
+
+<p>Le comportement choisi avec <code>-ms-scroll-limit-x-max</code> s'appliquera uniquement avec {{cssxref("msContentZoomFactor")}} qui vaut 1 ; pour les autres facteurs de zoom, le comportement de la propriété n'est pas défini.</p>
+
+<p>Cette propriété est uniquement disponible à partir de Windows 8.</p>
diff --git a/files/fr/web/css/-ms-scroll-limit-x-min/index.html b/files/fr/web/css/-ms-scroll-limit-x-min/index.html
new file mode 100644
index 0000000000..b9f22df94e
--- /dev/null
+++ b/files/fr/web/css/-ms-scroll-limit-x-min/index.html
@@ -0,0 +1,44 @@
+---
+title: '-ms-scroll-limit-x-min'
+slug: Web/CSS/-ms-scroll-limit-x-min
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-scroll-limit-x-min
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété <strong><code>-ms-scroll-limit-x-min</code></strong> est <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">une propriété spécifique à Microsoft</a> qui indique la valeur minimale pour la propriété {{domxref("Element.scrollLeft")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <code>-ms-scroll-limit-x-min</code> est définie avec une longueur.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt>{{cssxref("length")}}</dt>
+ <dd>
+ <p>La valeur minimale pour la propriété <code>scrollLeft</code>. Si la valeur fournie est négative, c'est <code>0</code> qui sera utilisé.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<p>Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Cette propriété n'a aucun effet sur les éléments qui ne défilent pas.</p>
+
+<p>Le comportement choisi avec <code>-ms-scroll-limit-x-min</code> s'appliquera uniquement avec {{cssxref("msContentZoomFactor")}} qui vaut 1 ; pour les autres facteurs de zoom, le comportement de la propriété n'est pas défini.</p>
+
+<p>Cette propriété est uniquement disponible à partir de Windows 8.</p>
diff --git a/files/fr/web/css/-ms-scroll-limit-y-max/index.html b/files/fr/web/css/-ms-scroll-limit-y-max/index.html
new file mode 100644
index 0000000000..c677901f71
--- /dev/null
+++ b/files/fr/web/css/-ms-scroll-limit-y-max/index.html
@@ -0,0 +1,48 @@
+---
+title: '-ms-scroll-limit-y-max'
+slug: Web/CSS/-ms-scroll-limit-y-max
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-scroll-limit-y-max
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété CSS <code><strong>-ms-scroll-limit-y-max</strong></code> est <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">une propriété spécifique à Microsoft</a> qui indique la valeur maximum pour la propriété {{domxref("Element.scrollTop")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <code>-ms-scroll-limit-y-max</code> est définie avec l'une des valeurs suivantes.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>
+ <p>La valeur maximale pour <code>scrollTop</code> est égale à {{domxref("Element.scrollHeight")}}.</p>
+ </dd>
+ <dt>{{cssxref("length")}}</dt>
+ <dd>
+ <p>La longueur maximale choisie pour <code>scrollTop</code>.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<p>Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Cette propriété n'a aucun effet sur les éléments qui ne défilent pas.</p>
+
+<p>Le comportement choisi avec <code>-ms-scroll-limit-y-max</code> s'appliquera uniquement avec {{cssxref("msContentZoomFactor")}} qui vaut 1 ; pour les autres facteurs de zoom, le comportement de la propriété n'est pas défini.</p>
+
+<p>Cette propriété est uniquement disponible à partir de Windows 8.</p>
diff --git a/files/fr/web/css/-ms-scroll-limit-y-min/index.html b/files/fr/web/css/-ms-scroll-limit-y-min/index.html
new file mode 100644
index 0000000000..85150a1660
--- /dev/null
+++ b/files/fr/web/css/-ms-scroll-limit-y-min/index.html
@@ -0,0 +1,44 @@
+---
+title: '-ms-scroll-limit-y-min'
+slug: Web/CSS/-ms-scroll-limit-y-min
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-scroll-limit-y-min
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété <strong><code>-ms-scroll-limit-y-min</code></strong> est <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">une propriété spécifique à Microsoft</a> qui indique la valeur minimale pour la propriété {{domxref("Element.scrollTop")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <code>-ms-scroll-limit-y-min</code> est définie avec une longueur.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt>{{cssxref("length")}}</dt>
+ <dd>
+ <p>La valeur minimale pour la propriété <code>scrollTop</code>. Si la valeur fournie est négative, c'est <code>0</code> qui sera utilisé.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<p>Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Cette propriété n'a aucun effet sur les éléments qui ne défilent pas.</p>
+
+<p>Le comportement choisi avec <code>-ms-scroll-limit-y-min</code> s'appliquera uniquement avec {{cssxref("msContentZoomFactor")}} qui vaut 1 ; pour les autres facteurs de zoom, le comportement de la propriété n'est pas défini.</p>
+
+<p>Cette propriété est uniquement disponible à partir de Windows 8.</p>
diff --git a/files/fr/web/css/-ms-scroll-limit/index.html b/files/fr/web/css/-ms-scroll-limit/index.html
new file mode 100644
index 0000000000..b541233201
--- /dev/null
+++ b/files/fr/web/css/-ms-scroll-limit/index.html
@@ -0,0 +1,56 @@
+---
+title: '-ms-scroll-limit'
+slug: Web/CSS/-ms-scroll-limit
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-scroll-limit
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété CSS <code><strong>-ms-scroll-limit</strong></code> est <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">une propriété raccourcie</a> <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">spécifique à Microsoft</a> qui définit les valeurs de {{cssxref("-ms-scroll-limit-x-min")}}, {{cssxref("-ms-scroll-limit-y-min")}}, {{cssxref("-ms-scroll-limit-x-max")}} et {{cssxref("-ms-scroll-limit-y-max")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <code>-ms-scroll-limit</code> est définie avec une ou plusieurs valeurs de limite de défilmeent dans l'ordre et séparées par des espaces.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>-ms-scroll-limit-x-min</code></dt>
+ <dd>
+ <p>La valeur utilisée pour la propriété {{cssxref("-ms-scroll-limit-x-min")}}.</p>
+ </dd>
+ <dt><code>-ms-scroll-limit-y-min</code></dt>
+ <dd>
+ <p>La valeur utilisée pour la propriété {{cssxref("-ms-scroll-limit-y-min")}}.</p>
+ </dd>
+ <dt><code>-ms-scroll-limit-x-max</code></dt>
+ <dd>
+ <p>La valeur utilisée pour la propriété {{cssxref("-ms-scroll-limit-x-max")}}.</p>
+ </dd>
+ <dt><code>-ms-scroll-limit-y-max</code></dt>
+ <dd>
+ <p>La valeur utilisée pour la propriété {{cssxref("-ms-scroll-limit-y-max")}}.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<p>Cette propriété est une propriété spécifique à Microsoft et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Cette propriété n'a aucun effet sur les éléments qui ne défilent pas.</p>
+
+<p>Le comportement choisi avec <code>-ms-scroll-limit</code> s'appliquera uniquement avec {{cssxref("msContentZoomFactor")}} qui vaut 1 ; pour les autres facteurs de zoom, le comportement de la propriété n'est pas défini.</p>
+
+<p>Cette propriété est uniquement disponible à partir de Windows 8.</p>
diff --git a/files/fr/web/css/-ms-scroll-rails/index.html b/files/fr/web/css/-ms-scroll-rails/index.html
new file mode 100644
index 0000000000..c5441922c5
--- /dev/null
+++ b/files/fr/web/css/-ms-scroll-rails/index.html
@@ -0,0 +1,50 @@
+---
+title: '-ms-scroll-rails'
+slug: Web/CSS/-ms-scroll-rails
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-scroll-rails
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété <strong><code>-ms-scroll-rails</code></strong> est <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">une propriété spécifique à Microsoft</a> qui indique si le défilement est contraint sur l'axe principal du déplacement.</p>
+
+<p>Cette propriété est accessible en lecture et en écriture.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <strong><code>-ms-scroll-rails</code></strong> est définie avec l'une des valeurs suivantes.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>
+ <p>Le contenu défile en suivant exactement le doigt de l'utilisateur. Cette valeur permet un déplacement libre.</p>
+ </dd>
+ <dt><code>railed</code></dt>
+ <dd>
+ <p>Le défilement est contraint sur l'axe principal. C'est la valeur par défaut.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<p>Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Cette propriété n'a adeucun effet sur les éléments qu'on ne peut pas faire défiler.</p>
+
+<p>À partir de Windows 8.1, cette propriété est prise en charge pour les interactions au pavé tactile.</p>
+
+<p>Cette propriété est uniquement disponible à partir de Windows 8.</p>
diff --git a/files/fr/web/css/-ms-scroll-snap-points-x/index.html b/files/fr/web/css/-ms-scroll-snap-points-x/index.html
new file mode 100644
index 0000000000..85d49351c5
--- /dev/null
+++ b/files/fr/web/css/-ms-scroll-snap-points-x/index.html
@@ -0,0 +1,88 @@
+---
+title: '-ms-scroll-snap-points-x'
+slug: Web/CSS/-ms-scroll-snap-points-x
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-scroll-snap-points-x
+---
+<div>{{CSSRef}}{{non-standard_header}}</div>
+
+<p>La propriété CSS <strong><code>-ms-scroll-snap-points-x</code></strong> est une propriété <a href="/en-US/docs/Web/CSS/Microsoft_CSS_extensions">spécifique à Microsoft </a>qui définit l'emplacement des points d'accroche le long de l'axe horizontal.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<div class="note">
+<p><strong>Note :</strong> Une valeur de type <code>&lt;length-percentage&gt;</code> est une valeur de type {{cssxref("&lt;length&gt;")}} ou une valeur de type {{cssxref("&lt;percentaqe&gt;")}}.</p>
+</div>
+
+<dl>
+ <dt><code>snapInterval( &lt;length-percentage&gt;, &lt;length-percentage&gt; )</code></dt>
+ <dd>
+ <p>Cette forme permet d'indiquer la position d'un point d'accroche puis l'intervalle entre les points d'accroche.</p>
+
+ <ul>
+  <li>La première valeur indique l'emplacement du premier point d'accroche.</li>
+  <li>La seconde valeur indique la distance entre chaque point d'accroche qui suit ou précède (c'est-à-dire à gauche et à droite du point d'accroche initial).</li>
+ </ul>
+ </dd>
+ <dt><code>snapList( &lt;length-percentage&gt;# )</code></dt>
+ <dd>
+ <p>Cette forme permet d'indiquer l'ensemble des points d'accroche comme une liste de valeurs séparées par des virgules. Chaque valeur représente un facteur de zoom.</p>
+
+ <ul>
+  <li>Si la valeur est inférieure à {{CSSXref("-ms-scroll-limit-x-min")}}, {{CSSXref("-ms-scroll-limit-x-min")}} sera utilisée.</li>
+  <li>Si la valeur est supérieure à {{CSSXref("-ms-scroll-limit-x-max")}}, {{CSSXref("-ms-scroll-limit-x-max")}} sera utilisée.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, on illustre les deux types de valeurs possibles pour <code>-ms-scroll-snap-points-x</code>. Dans le premier sélecteur, le premier point d'accroche se situe à 0% et l'intervalle est défini à 100%. Dans le second sélecteur, chaque point d'accroche est défini séparément (à 100%, 200%, 300%, et ainsi de suite).</p>
+
+<pre class="brush: css">.container {
+  overflow-x: auto;
+  overflow-y: hidden;
+  -ms-scroll-snap-type: mandatory;
+  -ms-scroll-snap-points-x: snapInterval(0%, 100%);
+  width: 480px;
+  height: 270px;
+}
+
+.imageContainer {
+  -ms-scroll-chaining: chained;
+  -ms-overflow-style: none;
+  -ms-content-zooming: zoom;
+  -ms-scroll-rails: none;
+  -ms-scroll-limit-x-min: 100%;
+  -ms-scroll-limit-x-max: 500%;
+  -ms-scroll-snap-type: proximity;
+  -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
+  -ms-overflow-style: none;
+  width: 480px;
+  height: 270px;
+  overflow: auto;
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Cette propriété est disponible à partir de Windows 8. Elle n'a aucun effet pour les éléments qui ne permettent pas d'utiliser un ascenseur.</p>
+
+<p>À partir de Windows 8.1, cette propriété est également prise en charge pour les interactions à la souris, au clavier ou au pavé tactile.</p>
diff --git a/files/fr/web/css/-ms-scroll-snap-points-y/index.html b/files/fr/web/css/-ms-scroll-snap-points-y/index.html
new file mode 100644
index 0000000000..6568891ed1
--- /dev/null
+++ b/files/fr/web/css/-ms-scroll-snap-points-y/index.html
@@ -0,0 +1,94 @@
+---
+title: '-ms-scroll-snap-points-y'
+slug: Web/CSS/-ms-scroll-snap-points-y
+tags:
+  - CSS
+  - Non-standard
+  - Reference
+translation_of: Archive/Web/CSS/-ms-scroll-snap-points-y
+---
+<div>{{CSSRef}}{{non-standard_header}}</div>
+
+<p>La propriété CSS <strong><code>-ms-scroll-snap-points-y</code></strong> est une propriété <a href="/en-US/docs/Web/CSS/Microsoft_CSS_extensions">spécifique à Microsoft </a>qui définit l'emplacement des points d'accroche le long de l'axe vertical.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<div class="note">
+<p><strong>Note :</strong> Une valeur de type <code>&lt;length-percentage&gt;</code> est une valeur de type {{cssxref("&lt;length&gt;")}} ou une valeur de type {{cssxref("&lt;percentaqe&gt;")}}.</p>
+</div>
+
+<dl>
+ <dt><code>snapInterval( &lt;length-percentage&gt;, &lt;length-percentage&gt; )</code></dt>
+ <dd>
+ <p>Cette forme permet d'indiquer la position d'un point d'accroche puis l'intervalle entre les points d'accroche.</p>
+
+ <ul>
+  <li>La première valeur indique l'emplacement du premier point d'accroche.</li>
+  <li>La seconde valeur indique la distance entre chaque point d'accroche qui suit ou précède (c'est-à-dire au dessus et en dessous du point d'accroche initial).</li>
+ </ul>
+ </dd>
+ <dt><code>snapList( &lt;length-percentage&gt;# )</code></dt>
+ <dd>
+ <p>Cette forme permet d'indiquer l'ensemble des points d'accroche comme une liste de valeurs séparées par des virgules. Chaque valeur représente un facteur de zoom.</p>
+
+ <ul>
+  <li>Si la valeur est inférieure à {{CSSXref("-ms-scroll-limit-y-min")}}, {{CSSXref("-ms-scroll-limit-y-min")}} sera utilisée.</li>
+  <li>Si la valeur est supérieure à {{CSSXref("-ms-scroll-limit-y-max")}}, {{CSSXref("-ms-scroll-limit-y-max")}} sera utilisée.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, on illustre les deux types de valeurs possibles pour <code>-ms-scroll-snap-points-y</code>. Dans le premier sélecteur, le premier point d'accroche se situe à 0% et l'intervalle est défini à 100%. Dans le second sélecteur, chaque point d'accroche est défini séparément (à 100%, 200%, 300%, et ainsi de suite).</p>
+
+<pre class="brush: css">.container {
+  overflow-x: auto;
+  overflow-y: hidden;
+  -ms-scroll-snap-type: mandatory;
+  -ms-scroll-snap-points-y: snapInterval(0%, 100%);
+  width: 480px;
+  height: 270px;
+}
+
+.imageContainer {
+  -ms-scroll-chaining: chained;
+  -ms-overflow-style: none;
+  -ms-content-zooming: zoom;
+  -ms-scroll-rails: none;
+  -ms-scroll-limit-x-min: 100%;
+  -ms-scroll-limit-x-max: 500%;
+  -ms-scroll-snap-type: proximity;
+  -ms-scroll-snap-points-y: snapList(100%, 200%, 300%, 400%, 500%);
+  -ms-overflow-style: none;
+  width: 480px;
+  height: 270px;
+  overflow: auto;
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Cette propriété est disponible à partir de Windows 8. Elle n'a aucun effet pour les éléments qui ne permettent pas d'utiliser un ascenseur.</p>
+
+<p>À partir de Windows 8.1, cette propriété est également prise en charge pour les interactions à la souris, au clavier ou au pavé tactile.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("-ms-scroll-snap-points-x")}}</li>
+ <li>{{cssxref("scroll-snap-points-y")}}, la propriété standard</li>
+</ul>
diff --git a/files/fr/web/css/-ms-scroll-snap-type/index.html b/files/fr/web/css/-ms-scroll-snap-type/index.html
new file mode 100644
index 0000000000..0007789495
--- /dev/null
+++ b/files/fr/web/css/-ms-scroll-snap-type/index.html
@@ -0,0 +1,50 @@
+---
+title: '-ms-scroll-snap-type'
+slug: Web/CSS/-ms-scroll-snap-type
+tags:
+  - CSS
+  - Non-standard
+  - Reference
+translation_of: Web/CSS/scroll-snap-type
+---
+<div>{{CSSRef}}{{non-standard_header}}</div>
+
+<p>La propriété <strong><code>-ms-scroll-snap-type</code></strong> est <a href="/en-US/docs/Web/CSS/Microsoft_CSS_extensions">une propriété spécifique à Microsoft</a> qui indique le type de point d'accroche à utiliser pour l'élément courant.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Values" name="Values">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>
+ <p>Valeur initiale. Le déplacement et le défilement ne sont pas modifiés par les points d'accroche.</p>
+ </dd>
+ <dt><code>proximity</code></dt>
+ <dd>
+ <p>Lorsque l'inertie normale fait arriver à proximité d'un point d'accroche, la vitesse est ajustée afin que le mouvement se termine sur un point d'accroche. Il est toutefois possible que le mouvement se termine entre deux points d'accroche.</p>
+ </dd>
+ <dt><code>mandatory</code></dt>
+ <dd>
+ <p>L'inertie est ajustée afin que le mouvement se termine toujours sur un point d'accroche.</p>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Remarks" name="Remarks">Notes</h2>
+
+<p> </p>
+
+<p>Cette propriété est disponible à partir de Windows 8. Elle n'a aucun effet pour les éléments qui ne permettent pas d'utiliser un ascenseur.</p>
+
+<p>À partir de Windows 8.1, cette propriété est également prise en charge pour les interactions à la souris, au clavier ou au pavé tactile.</p>
diff --git a/files/fr/web/css/-ms-scroll-snap-x/index.html b/files/fr/web/css/-ms-scroll-snap-x/index.html
new file mode 100644
index 0000000000..6b889bb584
--- /dev/null
+++ b/files/fr/web/css/-ms-scroll-snap-x/index.html
@@ -0,0 +1,61 @@
+---
+title: '-ms-scroll-snap-x'
+slug: Web/CSS/-ms-scroll-snap-x
+tags:
+  - CSS
+  - Non-standard
+  - Propriété raccourcie
+  - Reference
+translation_of: Archive/Web/CSS/-ms-scroll-snap-x
+---
+<div>{{CSSRef}}{{non-standard_header}}</div>
+
+<p>La propriété raccourcie <strong><code>-ms-scroll-snap-x</code></strong> est une <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">propriété spécifique à Microsoft</a> qui définit les valeurs des propriétés {{cssxref("-ms-scroll-snap-type")}} and {{cssxref("-ms-scroll-snap-points-x")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Values" name="Values">Valeurs</h3>
+
+<p>La propriété raccourcie <code>-ms-scroll-snap-x</code> est définie avec une ou deux des valeurs suivantes, dans cet ordre et séparées par des espaces.</p>
+
+<dl>
+ <dt><code>-ms-scroll-snap-type</code></dt>
+ <dd>
+ <p>La valeur de la propriété {{cssxref("-ms-scroll-snap-type")}}.</p>
+ </dd>
+ <dt><code>-ms-scroll-snap-points-x</code></dt>
+ <dd>
+ <p>La valeur de la propriété {{cssxref("-ms-scroll-snap-points-x")}}.</p>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Examples" name="Examples">Exemples</h2>
+
+<p>La proprirété <code>-ms-scroll-snap-x</code> est une propriété raccourcie. Les deux sélecteurs du fragment de code suivant auront le même effet.</p>
+
+<pre class="brush: css">.scroll1 {
+  -ms-scroll-snap-type: proximity;
+  -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
+}
+
+.scroll2 {
+  -ms-scroll-snap-x: proximity snapList(100%, 200%, 300%, 400%, 500%);
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Cette propriété est disponible à partir de Windows 8. Elle n'a aucun effet pour les éléments qui ne permettent pas d'utiliser un ascenseur.</p>
+
+<p>À partir de Windows 8.1, cette propriété est également prise en charge pour les interactions à la souris, au clavier ou au pavé tactile.</p>
diff --git a/files/fr/web/css/-ms-scroll-snap-y/index.html b/files/fr/web/css/-ms-scroll-snap-y/index.html
new file mode 100644
index 0000000000..de5c0836cb
--- /dev/null
+++ b/files/fr/web/css/-ms-scroll-snap-y/index.html
@@ -0,0 +1,61 @@
+---
+title: '-ms-scroll-snap-y'
+slug: Web/CSS/-ms-scroll-snap-y
+tags:
+  - CSS
+  - Non-standard
+  - Propriété raccourcie
+  - Reference
+translation_of: Archive/Web/CSS/-ms-scroll-snap-y
+---
+<div>{{CSSRef}}{{non-standard_header}}</div>
+
+<p>La propriété raccourcie <strong><code>-ms-scroll-snap-y</code></strong> est une <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">propriété spécifique à Microsoft</a> qui définit les valeurs des propriétés {{cssxref("-ms-scroll-snap-type")}} and {{cssxref("-ms-scroll-snap-points-y")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Values" name="Values">Valeurs</h3>
+
+<p>La propriété raccourcie <code>-ms-scroll-snap-y</code> est définie avec une ou deux des valeurs suivantes, dans cet ordre et séparées par des espaces.</p>
+
+<dl>
+ <dt><code>-ms-scroll-snap-type</code></dt>
+ <dd>
+ <p>La valeur de la propriété {{cssxref("-ms-scroll-snap-type")}}.</p>
+ </dd>
+ <dt><code>-ms-scroll-snap-points-y</code></dt>
+ <dd>
+ <p>La valeur de la propriété {{cssxref("-ms-scroll-snap-points-y")}}.</p>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Examples" name="Examples">Exemples</h2>
+
+<p>La proprirété <code>-ms-scroll-snap-y</code> est une propriété raccourcie. Les deux sélecteurs du fragment de code suivant auront le même effet.</p>
+
+<pre class="brush: css">.scroll1 {
+  -ms-scroll-snap-type: proximity;
+  -ms-scroll-snap-points-y: snapList(100%, 200%, 300%, 400%, 500%);
+}
+
+.scroll2 {
+  -ms-scroll-snap-y: proximity snapList(100%, 200%, 300%, 400%, 500%);
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Cette propriété est disponible à partir de Windows 8. Elle n'a aucun effet pour les éléments qui ne permettent pas d'utiliser un ascenseur.</p>
+
+<p>À partir de Windows 8.1, cette propriété est également prise en charge pour les interactions à la souris, au clavier ou au pavé tactile.</p>
diff --git a/files/fr/web/css/-ms-scroll-translation/index.html b/files/fr/web/css/-ms-scroll-translation/index.html
new file mode 100644
index 0000000000..0246236b59
--- /dev/null
+++ b/files/fr/web/css/-ms-scroll-translation/index.html
@@ -0,0 +1,54 @@
+---
+title: '-ms-scroll-translation'
+slug: Web/CSS/-ms-scroll-translation
+tags:
+  - CSS
+  - Non-standard
+  - Reference
+translation_of: Archive/Web/CSS/-ms-scroll-translation
+---
+<div>{{CSSRef}}{{non-standard_header}}</div>
+
+<p>La propriété CSS <strong><code>-ms-scroll-translation</code></strong> est <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">une propriété spécifique à Microsoft</a> qui indique si une translation verticale / horizontale est appliquée lors du défilement sur l'élément ciblé.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Values" name="Values">Valeurs</h3>
+
+<dl>
+ <dt><code>vertical-to-horizontal</code></dt>
+ <dd>
+ <p>Une translation verticale/horizontale est appliquée lorsque c'est pertinent.</p>
+ </dd>
+ <dt><code>none</code></dt>
+ <dd>
+ <p>Aucune translation n'est appliquée. C'est la valeur initiale pour l'élément {{HTMLElement("html")}}.</p>
+ </dd>
+ <dt><code>inherit</code></dt>
+ <dd>
+ <p>La valeur initiale : la valeur de la propriété est héritée via la valeur de l'élément parent.</p>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Remarks" name="Remarks"><a name="Remarks">Notes</a></h2>
+
+<p>Cette propriété est disponible à partir de Windows 8. Elle n'a aucun effet pour les éléments qui ne permettent pas d'utiliser un ascenseur</p>
+
+<p>Si le code JavaScript de la page écoute les évènements DOM liés au défilement, les évènements relatifs au défilement vertical et au défilement horizontal sont distincts et correspondent à l'axe selon lequel l'utilisateur a défilé. La propriété <code>-ms-scroll-translation</code>, avec la valeur <code>vertical-to-horizontal</code>, permet de transformer les évènements de défilement vertical en évènements de défilement horizontal.</p>
+
+<p>Cette propriété n'a pas d'impact lorsqu'on navigue avec le clavier.</p>
+
+<p>Les modèles CSS par défaut pour les applications Windows qui utilisent JavaScript, "ui-light.css" et "ui-dark.css" utilisent la valeur <code>vertical-to-horizontal</code> sur l'élément {{HTMLElement("html")}}.</p>
diff --git a/files/fr/web/css/-ms-scrollbar-3dlight-color/index.html b/files/fr/web/css/-ms-scrollbar-3dlight-color/index.html
new file mode 100644
index 0000000000..5caa81ebc2
--- /dev/null
+++ b/files/fr/web/css/-ms-scrollbar-3dlight-color/index.html
@@ -0,0 +1,75 @@
+---
+title: '-ms-scrollbar-3dlight-color'
+slug: Web/CSS/-ms-scrollbar-3dlight-color
+tags:
+  - CSS
+  - Déprécié
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-scrollbar-3dlight-color
+---
+<div>{{CSSRef}}{{Non-standard_header}}{{Deprecated_Header}}</div>
+
+<p>La propriété <code><strong>-ms-scrollbar-3dlight-color</strong></code> est <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">une propriété spécifique à Microsoft</a> qui définit la couleur pour les bords haut et gauche de la boîte de défilement et pour les flèches de la barre de défilement.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La valeur de <code>-ms-scrollbar-3dlight-color</code> est définie avec une couleur.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>
+ <p>Une couleur (cf. type {{cssxref("&lt;color&gt;")}}) qui sera utilisée pour les bords gauche et haut de la boîte de défilement et pour les flèches de l'ascenseur.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>L'exemple qui suit illustre comment appliquer la propriété <code>-ms-scrollbar-3dlight-color</code> à un élément {{HTMLElement("textarea")}}.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;textarea class="Blue3dLight"&gt;
+  The top and left edges of the thumb and
+  button-face elements in the scroll bar for
+  this element will be blue.
+&lt;/textarea&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.Blue3dLight {
+  -ms-scrollbar-3dlight-color: blue;
+  scrollbar-3dlight-color: blue; /* Use the standard when available. */
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-ms-scrollbar-3dlight-color")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Cette propriété est disponible à partir de Internet Explorer 8.</p>
+
+<p>La boîte de défilement est la boîte carrée dans laquelle une barre de défilement peut être déplacée de haut en bas ou de gauche à droite afin de modifier la position du contenu sur l'écran. Les flèches de défilement sont situées aux extrémités de l'ascenseur et permettent de faire défiler le contenu.</p>
+
+<p>Cette propriété s'applique aux éléments qui affichent un ascenseur (notamment via la propriété {{cssxref("overflow")}}).</p>
diff --git a/files/fr/web/css/-ms-scrollbar-arrow-color/index.html b/files/fr/web/css/-ms-scrollbar-arrow-color/index.html
new file mode 100644
index 0000000000..cc67bd8bde
--- /dev/null
+++ b/files/fr/web/css/-ms-scrollbar-arrow-color/index.html
@@ -0,0 +1,95 @@
+---
+title: '-ms-scrollbar-arrow-color'
+slug: Web/CSS/-ms-scrollbar-arrow-color
+tags:
+  - CSS
+  - Déprécié
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-scrollbar-arrow-color
+---
+<div>{{CSSRef}}{{Non-standard_header}}{{Deprecated_Header}}</div>
+
+<p>La propriété CSS <code><strong>-ms-scrollbar-arrow-color</strong></code> est une propriété <a href="/en-US/docs/Web/CSS/Microsoft_CSS_extensions">spécifique à Microsoft</a> qui définit la couleur des flèches pour les extrêmités des barres de défilement.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>
+ <p>La couleur à utiliser pour les flèches des barres de défilement, voir {{cssxref("&lt;color&gt;")}}.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>L'exemple qui suit illustre comment utiliser <code>-ms-scrollbar-arrow-color</code> et {{cssxref("-ms-scrollbar-face-color")}} afin d'afficher une boîte avec une barre de défilement avec un curseur et des flèches bleues d'une part et une boîte avec une barre de défilement avec un curseur et des flèches vertes d'autre part.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  width: 150px;
+  height: 150px;
+  overflow-y: scroll;
+  border-style: solid;
+  border-width: thin;
+  font-family: sans-serif;
+  float: left;
+  margin-right: 10px;
+}
+.blueScrollBox {
+  scrollbar-face-color: blue;
+  scrollbar-arrow-color: blue;
+}
+.greenScrollBox {
+  scrollbar-face-color: green;
+  scrollbar-arrow-color: green;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;body&gt;
+  &lt;div class="blueScrollBox"&gt;
+    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+  &lt;/div&gt;
+  &lt;div class="greenScrollBox"&gt;
+    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+  &lt;/div&gt;
+&lt;/body&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<p>Si votre navigateur ne permet de visualiser le résultat, voici une image statique :</p>
+
+<p><img alt="Image for -ms-scrollbar-arrow-color usage example" src="https://mdn.mozillademos.org/files/15824/image002.png" style="height: 168px; width: 330px;"></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-ms-scrollbar-arrow-color")}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Pour IE 8, la propriété <code>-ms-scrollbar-arrow-color</code> est une extension et peut être utilisée comme synonyme de <code>scrollbar-arrow-color</code> en mode standard.</p>
+
+<p>Les flèches de défilement sont présentes sur les boutons situés à chaque extrêmité de la barre de défilement.</p>
+
+<p>Cette propriété s'applique aux éléments affichant une barre de défilement. Pour activer le défilement sur différents éléments, voir la propriété {{cssxref("overflow")}}.</p>
diff --git a/files/fr/web/css/-ms-scrollbar-base-color/index.html b/files/fr/web/css/-ms-scrollbar-base-color/index.html
new file mode 100644
index 0000000000..df5cb77dc5
--- /dev/null
+++ b/files/fr/web/css/-ms-scrollbar-base-color/index.html
@@ -0,0 +1,95 @@
+---
+title: '-ms-scrollbar-base-color'
+slug: Web/CSS/-ms-scrollbar-base-color
+tags:
+  - CSS
+  - Déprécié
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-scrollbar-base-color
+---
+<div>{{CSSRef}}{{Non-standard_header}}{{Deprecated_Header}}</div>
+
+<p>La propriété CSS <code><strong>-ms-scrollbar-base-color</strong></code> est une propriété <a href="/en-US/docs/Web/CSS/Microsoft_CSS_extensions">spécifique à Microsoft</a> qui indique la couleur de base à utiliser pour les principaux composants d'une barre de défilement.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>
+ <p>La couleur de base à utiliser pour les principaux composants de la barre de défilement, voir {{cssxref("&lt;color&gt;")}}.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, on utilise les propriétés <code>-ms-scrollbar-base-color</code> et {{cssxref("-ms-scrollbar-arrow-color")}} afin de créer deux objets {{HTMLElement("div")}} ayant chacun un thème différent pour les barres de défilement.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  width: 150px;
+  height: 150px;
+  border-style: solid;
+  border-width: thin;
+  overflow-y: scroll;
+  font-family: sans-serif;
+  float: left;
+  margin-right: 10px;
+}
+.aquaScroll {
+  scrollbar-base-color: aqua;
+  scrollbar-arrow-color: blue;
+  border-color: blue;
+}
+.bisqueScroll {
+  scrollbar-base-color: bisque;
+  scrollbar-arrow-color: red;
+  border-color: red;
+}
+</pre>
+
+<h3 id="CSS_2">CSS</h3>
+
+<pre class="brush: html">&lt;body&gt;
+  &lt;div class="aquaScroll"&gt;
+    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+  &lt;/div&gt;
+  &lt;div class="bisqueScroll"&gt;
+    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+  &lt;/div&gt;
+&lt;/body&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<p>L'image suivante illustre le résultat obtenu. On voit que <code>scrollbar-base-color</code> fournit une couleur de base et que le navigateur décline cette couleur sur différents tons pour les différents composants.</p>
+
+<p><img alt="Image for -ms-scrollbar-base-color example" src="https://mdn.mozillademos.org/files/15825/image002.png" style="height: 170px; width: 331px;"></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-ms-scrollbar-base-color")}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Pour IE 8 et les versions ultérieures, la propriété <code>-ms-scrollbar-base-color</code> est une extension et peut être utilisée comme synonyme de <code>scrollbar-base-color</code> en mode standard.</p>
+
+<p>Cette propriété s'applique aux éléments affichant une barre de défilement. Pour activer le défilement sur différents éléments, voir la propriété {{cssxref("overflow")}}.</p>
diff --git a/files/fr/web/css/-ms-scrollbar-darkshadow-color/index.html b/files/fr/web/css/-ms-scrollbar-darkshadow-color/index.html
new file mode 100644
index 0000000000..a2346346f6
--- /dev/null
+++ b/files/fr/web/css/-ms-scrollbar-darkshadow-color/index.html
@@ -0,0 +1,71 @@
+---
+title: '-ms-scrollbar-darkshadow-color'
+slug: Web/CSS/-ms-scrollbar-darkshadow-color
+tags:
+  - CSS
+  - Déprécié
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-scrollbar-darkshadow-color
+---
+<div>{{CSSRef}}{{Non-standard_header}}{{Deprecated_Header}}</div>
+
+<p>La propriété <strong><code>-ms-scrollbar-darkshadow-color</code></strong> est <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">une propriété spécifique à Microsoft</a> qui définit la couleur de la gouttière pour l'ascenseur.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <code>-ms-scrollbar-darkshadow-color</code> est définie avec une couleur.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>
+ <p>La couleur de la gouttière (cf. le type {{cssxref("&lt;color&gt;")}} pour les valeurs possibles).</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;textarea class="BlueShadow"&gt;
+  The gutter elements in the scroll bar for this
+  element will be blue.
+&lt;/textarea&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.BlueShadow {
+  scrollbar-darkshadow-color: blue;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-ms-scrollbar-darkshadow-color")}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Cette propriété est disponible à partir de Internet Explorer 8.</p>
+
+<p>La gouttière est l'espace entre la piste et les bords bas et droit de la boîte de défilement et des flèches de l'ascenseur. La couleur <code>-ms-scrollbar-darkshadow-color</code> apparaît en dehors de {{cssxref("-ms-scrollbar-shadow-color")}}.</p>
+
+<p>Cette propriété s'applique aux éléments qui affichent un ascenseur (notamment via la propriété {{cssxref("overflow")}}).</p>
diff --git a/files/fr/web/css/-ms-scrollbar-face-color/index.html b/files/fr/web/css/-ms-scrollbar-face-color/index.html
new file mode 100644
index 0000000000..6a2929243f
--- /dev/null
+++ b/files/fr/web/css/-ms-scrollbar-face-color/index.html
@@ -0,0 +1,93 @@
+---
+title: '-ms-scrollbar-face-color'
+slug: Web/CSS/-ms-scrollbar-face-color
+tags:
+  - CSS
+  - Non-standard
+  - Obsolete
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-scrollbar-face-color
+---
+<div>{{CSSRef}}{{Non-standard_header}}{{Deprecated_Header}}</div>
+
+<p>La propriété CSS <code><strong>-ms-scrollbar-face-color</strong></code> est une propriété <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">spécifique à Microsoft</a> qui indique la couleur du curseur de défilement et des flèches de la barre de défilement.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>
+ <p>La couleur à utiliser pour le curseur et les flèches, cf. {{cssxref("&lt;color&gt;")}}.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, on utilise <code>-ms-scrollbar-face-color</code> et {{cssxref("-ms-scrollbar-arrow-color")}} afin de créer deux styles de barre de défilement pour deux boîtes : l'une verte et l'autre bleue.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  width: 150px;
+  height: 150px;
+  overflow-y: scroll;
+  border-style: solid;
+  border-width: thin;
+  font-family: sans-serif;
+  float: left;
+  margin-right: 10px;
+}
+.blueScrollBox {
+  scrollbar-face-color: blue;
+  scrollbar-arrow-color: blue;
+}
+.greenScrollBox {
+  scrollbar-face-color: green;
+  scrollbar-arrow-color: green;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;body&gt;
+  &lt;div class="blueScrollBox"&gt;
+    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+  &lt;/div&gt;
+  &lt;div class="greenScrollBox"&gt;
+    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+  &lt;/div&gt;
+&lt;/body&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<p>L'image qui suit permet d'avoir un aperçu du résultat si votre navigateur n'est pas compatible avec ces fonctionnalités.</p>
+
+<p><img alt="Image for -ms-scrollbar-face-color example" src="https://mdn.mozillademos.org/files/15826/image002.png" style="height: 168px; width: 330px;"></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-ms-scrollbar-face-color")}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Cette fonctionnalité est prise en charge à partir de IE 8. Pour IE 8, la propriété <code>-ms-scrollbar-face-color</code> est une extension et peut être utilisée comme synonyme de <code>scrollbar-face-color</code> en mode standard.</p>
+
+<p>Cette propriété s'applique aux éléments affichant une barre de défilement. Pour activer le défilement sur différents éléments, voir la propriété {{cssxref("overflow")}}.</p>
diff --git a/files/fr/web/css/-ms-scrollbar-highlight-color/index.html b/files/fr/web/css/-ms-scrollbar-highlight-color/index.html
new file mode 100644
index 0000000000..43a0ea824b
--- /dev/null
+++ b/files/fr/web/css/-ms-scrollbar-highlight-color/index.html
@@ -0,0 +1,95 @@
+---
+title: '-ms-scrollbar-highlight-color'
+slug: Web/CSS/-ms-scrollbar-highlight-color
+tags:
+  - CSS
+  - Déprécié
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-scrollbar-highlight-color
+---
+<div>{{CSSRef}}{{Non-standard_header}}{{Deprecated_Header}}</div>
+
+<p>La propriété CSS <code><strong>-ms-scrollbar-highlight-color</strong></code> est une propriété <a href="/en-US/docs/Web/CSS/Microsoft_CSS_extensions">spécifique à Microsoft</a> qui définit la couleur pour la piste et le contour d'une barre de défilement.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>
+ <p>La couleur à utiliser pour le contour et la piste de la barre de défilement, cf. {{cssxref("&lt;color&gt;")}}.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on utilise <code>-ms-scrollbar-highlight-color</code>, {{CSSXref("-ms-scrollbar-face-color")}} ainsi que {{CSSXref("-ms-scrollbar-arrow-color")}} afin de créer deux {{HTMLElement("div")}} ayant chacun un thème différent pour les barres de défilement.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  width: 150px;
+  height: 150px;
+  border-style: solid;
+  border-width: thin;
+  overflow-y: scroll;
+  font-family: sans-serif;
+  float: left;
+  margin-right: 10px;
+}
+.blueScroll {
+  -ms-scrollbar-highlight-color: aqua;
+  -ms-scrollbar-face-color: blue;
+  -ms-scrollbar-arrow-color: blue;
+  border-color: blue;
+}
+.redScroll {
+  -ms-scrollbar-highlight-color: bisque;
+  -ms-scrollbar-face-color: red;
+  -ms-scrollbar-arrow-color: red;
+  border-color: red;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;body&gt;
+  &lt;div class="blueScroll"&gt;
+    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+  &lt;/div&gt;
+  &lt;div class="redScroll"&gt;
+    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+  &lt;/div&gt;
+&lt;/body&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<p>L'image qui suit permet d'avoir un aperçu du résultat si votre navigateur n'est pas compatible avec ces fonctionnalités.</p>
+
+<p><img alt="Image for -ms-scrollbar-highlight-color example" src="https://mdn.mozillademos.org/files/15827/Image%20for%20example.png" style="height: 166px; width: 328px;"></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-ms-scrollbar-highlight-color")}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Pour IE 8, la propriété <code>-ms-scrollbar-highlight-color</code> est une extension et peut être utilisée comme synonyme de <code>scrollbar-highlight-color</code> en mode standard.</p>
+
+<p>Cette propriété s'applique aux éléments affichant une barre de défilement. Pour activer le défilement sur différents éléments, voir la propriété {{cssxref("overflow")}}.</p>
diff --git a/files/fr/web/css/-ms-scrollbar-shadow-color/index.html b/files/fr/web/css/-ms-scrollbar-shadow-color/index.html
new file mode 100644
index 0000000000..126fe6fb7f
--- /dev/null
+++ b/files/fr/web/css/-ms-scrollbar-shadow-color/index.html
@@ -0,0 +1,73 @@
+---
+title: '-ms-scrollbar-shadow-color'
+slug: Web/CSS/-ms-scrollbar-shadow-color
+tags:
+  - CSS
+  - Déprécié
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-scrollbar-shadow-color
+---
+<div>{{CSSRef}}{{Non-standard_header}}{{Deprecated_Header}}</div>
+
+<p>La propriété <code><strong>-ms-scrollbar-shadow-color</strong></code> est <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">une propriété spécifique à Microsoft</a> qui définit la couleur pour les bords bas et droit de la boîte de défilement et pour les flèches de la barre de défilement.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La valeur de <code>-ms-scrollbar-shadow-color</code> est définie avec une couleur.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>
+ <p>Une couleur (cf. type {{cssxref("&lt;color&gt;")}}) qui sera utilisée pour les bords droit et bas de la boîte de défilement et pour les flèches de l'ascenseur.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>L'exemple qui suit illustre comment appliquer la propriété <code>-ms-scrollbar-shadow-color</code> à un élément {{HTMLElement("textarea")}}.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;textarea class="BlueShadow"&gt;
+ Placeat reiciendis impedit quo qui ea et. Cum quia aut
+ non ut est ducimus necessitatibus
+&lt;/textarea&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.BlueShadow {
+  -ms-scrollbar-shadow-color: blue;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-ms-scrollbar-shadow-color")}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Cette propriété est disponible à partir de Internet Explorer 8. La propriété <code>-ms-scrollbar-shadow-color</code> est une extension spécifique à CSS et, sous le mode Standard d'IE8, peut être utilisée comme synonyme de <code>scrollbar-shadow-color</code>.</p>
+
+<p>La boîte de défilement est la boîte carrée dans laquelle une barre de défilement peut être déplacée de haut en bas ou de gauche à droite afin de modifier la position du contenu sur l'écran. Les flèches de défilement sont situées aux extrémités de l'ascenseur et permettent de faire défiler le contenu.</p>
+
+<p>Cette propriété s'applique aux éléments qui affichent un ascenseur (notamment via la propriété {{cssxref("overflow")}}).</p>
diff --git a/files/fr/web/css/-ms-scrollbar-track-color/index.html b/files/fr/web/css/-ms-scrollbar-track-color/index.html
new file mode 100644
index 0000000000..557cf14a6b
--- /dev/null
+++ b/files/fr/web/css/-ms-scrollbar-track-color/index.html
@@ -0,0 +1,97 @@
+---
+title: '-ms-scrollbar-track-color'
+slug: Web/CSS/-ms-scrollbar-track-color
+tags:
+  - CSS
+  - Déprécié
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-scrollbar-track-color
+---
+<div>{{CSSRef}}{{Non-standard_header}}{{Deprecated_Header}}</div>
+
+<p>La propriété CSS <strong><code>-ms-scrollbar-track-color</code></strong> est une propriété <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">spécifique à Microsoft</a> qui permet de définir la couleur de la piste utilisée pour les barres de défilement.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>
+ <p>La couleur à utiliser pour la piste (cf. {{cssxref("&lt;color&gt;")}}).</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>L'exemple qui suit utilise <code>-ms-scrollbar-track-color</code>, {{cssxref("-ms-scrollbar-face-color")}} ainsi que {{cssxref("-ms-scrollbar-arrow-color")}} afin de créer deux éléments {{HTMLElement("div")}} disposants d'un thème chacun pour les barres de défilement.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  width: 150px;
+  height: 150px;
+  border-style: solid;
+  border-width: thin;
+  overflow-y: scroll;
+  font-family: sans-serif;
+  float: left;
+  margin-right: 10px;
+}
+.blueScroll {
+  -ms-scrollbar-highlight-color: aqua;
+  -ms-scrollbar-face-color: blue;
+  -ms-scrollbar-arrow-color: blue;
+  border-color: blue;
+}
+.redScroll {
+  -ms-scrollbar-highlight-color: bisque;
+  -ms-scrollbar-face-color: red;
+  -ms-scrollbar-arrow-color: red;
+  border-color: red;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="blueScroll"&gt;
+  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+&lt;/div&gt;
+&lt;div class="redScroll"&gt;
+  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<p>L'image suivante illustre le résultat obtenu :</p>
+
+<p><img alt="Image for -scrollbar-track-color example" src="https://mdn.mozillademos.org/files/15828/Image%20for%20example.png" style="height: 166px; width: 328px;"></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-ms-scrollbar-track-color")}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Pour IE 8, la propriété <code>-ms-scrollbar-track-color</code> est une extension et peut être utilisée comme synonyme de <code>scrollbar-track-color</code> en mode standard.</p>
+
+<p>La piste est l'élément de la barre sur laquelle on déplace le curseur verticalement ou horizontalement</p>
+
+<p>Cette propriété s'applique aux éléments affichant une barre de défilement. Pour activer le défilement sur différents éléments, voir la propriété {{CSSXref("overflow")}}.</p>
diff --git a/files/fr/web/css/-ms-text-autospace/index.html b/files/fr/web/css/-ms-text-autospace/index.html
new file mode 100644
index 0000000000..972ef3bc1d
--- /dev/null
+++ b/files/fr/web/css/-ms-text-autospace/index.html
@@ -0,0 +1,59 @@
+---
+title: '-ms-text-autospace'
+slug: Web/CSS/-ms-text-autospace
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-text-autospace
+---
+<div>{{CSSRef}}{{non-standard_header}}</div>
+
+<p>La propriété <strong><code>-ms-text-autospace</code></strong> est <a href="/en-US/docs/Web/CSS/Microsoft_CSS_extensions">une propriété spécifique à Microsoft</a> qui définit l'espacement automatique et la réduction d'espace lorsque le texte doit être ajusté.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<h3 id="Values" name="Values">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>
+ <p>La valeur initiale de cette propriété. Aucun effet n'est appliqué, aucun espace supplémentaire n'est ajouté.</p>
+ </dd>
+ <dt><code>ideograph-alpha</code></dt>
+ <dd>
+ <p>Un espace supplémentaire est inséré entre le texte idéographique et le texte non-idéographique (alphabet latin, cyrillique, grec, arabe ou hébreu).</p>
+ </dd>
+ <dt><code>ideograph-numeric</code></dt>
+ <dd>
+ <p>Un espace supplémentaire est inséré entre le texte idéographique et les caractères numériques.</p>
+ </dd>
+ <dt><code>ideograph-parenthesis</code></dt>
+ <dd>
+ <p>Un espace supplémentaire est inséré entre les parenthèses (normales) et un idéographe.</p>
+ </dd>
+ <dt><code>ideograph-space</code></dt>
+ <dd>
+ <p>La largeur de l'espace est agrandie lorsque celui-ci est accolé à des idéogrammes.</p>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<p>Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Cette propriété est disponible à partir de Windows 8.</p>
+
+<p>Cette propriété est une extension spécifique à CSS et peut être utilisée comme synonyme de <code>text-autospace</code> lorsqu'IE8 est en mode standard.</p>
+
+<p>Un idéogramme est un caractère provenant d'un système d'écriture asiatique qui représente un concept ou une idée mais qui ne correspond pas à un mot ou à une prononciation particulière.</p>
diff --git a/files/fr/web/css/-ms-touch-select/index.html b/files/fr/web/css/-ms-touch-select/index.html
new file mode 100644
index 0000000000..f59ffad593
--- /dev/null
+++ b/files/fr/web/css/-ms-touch-select/index.html
@@ -0,0 +1,49 @@
+---
+title: '-ms-touch-select'
+slug: Web/CSS/-ms-touch-select
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-touch-select
+---
+<div>{{CSSRef}}{{non-standard_header}}</div>
+
+<p>La propriété <strong><code>-ms-touch-select</code></strong> est <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">une propriété spécifique à Microsoft</a> qui active la barre d'accroche (<em>gripper</em>) pour les éléments qui permettent de sélectionner du texte au toucher.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<h3 id="Values" name="Values">Valeurs</h3>
+
+<dl>
+ <dt><code>grippers</code></dt>
+ <dd>
+ <p>La valeur initiale pour la propriété. Les points qui forment la barre d'accroche sont toujours activé. De plus, la sélection commencera même si un gestionnaire <code>onclick</code>, <code>onmsgesturetap</code> ou <code>onmouseup</code> est activé.</p>
+ </dd>
+ <dt><code>none</code></dt>
+ <dd>
+ <p>La barre d'accroche n'est jamais affichée et les fonctionnalités de sélection tactile par défaut ne sont pas fournies.</p>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<p>Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Remarks" name="Remarks">Notes</h2>
+
+<p>Cette propriété est disponible à partir de Windows 8.</p>
+
+<p>La propriété <code>-ms-touch-select</code> doit uniquement être utilisée par les applications qui fournissent leur propre mécanisme de sélection. La plupart des applications devraient plutôt utiliser la propriété {{cssxref("-ms-user-select")}}.</p>
+
+<p>Si vous choisissez de masquer la barre d'accroche, vous devrez vous assurer de fournir un mécanisme de sélection tactile. Pour réaliser cela avec JavaScript, vous pouvez voir <a href="/fr/docs/Web/API/Selection_API">les différentes API disponibles</a>.</p>
+
+<p>Cette propriété n'a aucun effet pour les interactions à la souris, au clavier ou au pavé tactile.</p>
diff --git a/files/fr/web/css/-ms-user-select/index.html b/files/fr/web/css/-ms-user-select/index.html
new file mode 100644
index 0000000000..a0483f4ac0
--- /dev/null
+++ b/files/fr/web/css/-ms-user-select/index.html
@@ -0,0 +1,107 @@
+---
+title: '-ms-user-select'
+slug: Web/CSS/-ms-user-select
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/user-select
+---
+<div>{{CSSRef}}{{non-standard_header}}</div>
+
+<p>La propriété CSS <strong><code>-ms-user-select</code></strong> est <a href="/en-US/docs/Web/CSS/Microsoft_CSS_extensions">une propriété spécifique à Microsoft</a> qui indique sur quelle zone d'un élément l'utilisateur peut sélectionner le texte de l'élément.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<h3 id="Values" name="Values">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>
+ <p>Empêche la sélection de commencer sur l'élément. Cette valeur n'empêche pas une sélection déjà initiée de continuer sur l'élément.</p>
+ </dd>
+ <dt><code>element</code></dt>
+ <dd>
+ <p>Active la sélection au sein de l'élément. Toutefois, la sélection est limitée aux bords de l'élément.</p>
+ </dd>
+ <dt><code>text</code></dt>
+ <dd>
+ <p>Active la sélection au sein de l'élément et permet de poursuivre la sélection à l'extérieur de l'élément.</p>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Examples" name="Examples">Exemples</h2>
+
+<p>Dans l'exemple suivant, on utilise le scénario d'un blog avec un conteneur qui est un élément {{HTMLElement("div")}} avec un identifiant <code>blog</code>. Ce conteneur contient un autre élément <code>&lt;div&gt;</code> avec l'identifiant <code>blogPost</code> pour le billet de la page. La classe <code>comment</code> est appliquée aux éléments <code>&lt;div&gt;</code> qui sont des commentaires. Le billet de blog contient un élément {{HTMLElement("input")}} et un élément {{HTMLElement("textarea")}} pour ajouter un commentaire.</p>
+
+<p>La déclaration suivante désactive la sélection à l'exception du contenu éditable.</p>
+
+<pre class="brush: css">#blog {
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: -moz-none;
+}
+</pre>
+
+<p>La déclaration suivante désactive la sélection pour le reste :</p>
+
+<pre class="brush: css">#blog, #blog input, #blog textarea,
+#blog *[contenteditable=true] {
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: -moz-none;
+}
+</pre>
+
+<p>La déclaration suivante permet aux utilisateurs de ne sélectionner que le contenu du billet.</p>
+
+<pre class="brush: css">#blogPost {
+  -ms-user-select: element;
+  -webkit-user-select:  text;
+  -moz-user-select: text;
+}
+
+#blog {
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: -moz-none;
+}
+</pre>
+
+<p>La déclaration suivante permet aux utilisateurs de ne sélectionner que les commentaires.</p>
+
+<pre class="brush: css">.comment {
+  -ms-user-select: element;
+  -moz-user-select: text;
+  -webkit-user-select: text;
+}
+
+#blog{
+  -ms-user-select: none;
+  -moz-user-select: -moz-none;
+  -webkit-user-select: none;
+}
+</pre>
+
+<p>Le code suivan permet de commencer la sélection sur le billet ou sur l'un des commentaires et de poursuivre sur la suite.</p>
+
+<pre class="brush: css">#blogPost, .comment {
+  -ms-user-select: text;
+}
+
+#blog {
+  -ms-user-select: none;
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété non-standard qui ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
diff --git a/files/fr/web/css/-ms-wrap-flow/index.html b/files/fr/web/css/-ms-wrap-flow/index.html
new file mode 100644
index 0000000000..54c93a3ae6
--- /dev/null
+++ b/files/fr/web/css/-ms-wrap-flow/index.html
@@ -0,0 +1,63 @@
+---
+title: '-ms-wrap-flow'
+slug: Web/CSS/-ms-wrap-flow
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-wrap-flow
+---
+<div>{{CSSRef}}{{non-standard_header}}</div>
+
+<p>La propriété CSS <strong><code>-ms-wrap-flow</code></strong> est <a href="/en-US/docs/Web/CSS/Microsoft_CSS_extensions">une propriété spécifique à Microsoft</a> qui indique comment les exclusions jouent sur le contenu en ligne (<em>inline</em>) au sein des éléments de bloc.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<h3 id="Values" name="Values">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>
+ <p>Une exclusion est créée pour les éléments flottants. Pour les éléments non-flottants, aucune exclusion n'est créée.</p>
+ </dd>
+ <dt><code>both</code></dt>
+ <dd>
+ <p>Le contenu en ligne peut s'écouler sur chaque côté de l'exclusion.</p>
+ </dd>
+ <dt><code>start</code></dt>
+ <dd>
+ <p>Le contenu en ligne peut passer à la ligne au début de la zone d'exclusion mais ne peut occuper la partie située après la zone d'exclusion.</p>
+ </dd>
+ <dt><code>end</code></dt>
+ <dd>
+ <p>Le contenu en ligne peut passer à la ligne après la zone d'exclusion mais ne peut occuper la partie située avant la zone d'exclusion.</p>
+ </dd>
+ <dt><code>maximum</code></dt>
+ <dd>
+ <p>Le contenu en ligne peut passer à ligne sur le côté de l'exclusion qui dispose de l'espace le plus grand pour cette ligne (l'autre côté est alors laissé vide).</p>
+ </dd>
+ <dt><code>clear</code></dt>
+ <dd>
+ <p>Le contenu en ligne peut uniquement passer à la ligne au dessus et en dessous de l'exclusion, les zones avant le début et après la fin de l'exclusion sont laissées vide.</p>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Spécifications</h2>
+
+<p>Cette propriété n'est pas une propriété standard et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Remarks" name="Remarks">Notes</h2>
+
+<p>La propriété <code>-ms-wrap-flow</code> transforme un élément en exclusion lorsque sa valeur calculée est différente de <code>auto</code>. Cette propriété définit le comportement du contenu en ligne autour de cet élément d'exclusion (de façon similaire aux éléments flottants).</p>
+
+<p>Lorsque <code>-ms-wrap-flow</code> a une valeur calculée différente de <code>auto</code>, l'élément ne devient pas un élément d'exclusion, sauf si la valeur calculée de la propriété <code>float</code> n'est pas <code>none</code>. Dans ce cas, l'élément fournit sa bordure au contexte du bloc englobant et le flux du contenu s'adapte selon la propriété {{cssxref("clear")}}.</p>
+
+<p>Pour plus d'informations sur l'impact d'un élément d'exclusion quant au flux du contenu, voir la section <a href="https://drafts.csswg.org/css-exclusions-1/#terms">Terminologie</a> de la spécification de niveau 1 pour les exclusions CSS.</p>
diff --git a/files/fr/web/css/-ms-wrap-margin/index.html b/files/fr/web/css/-ms-wrap-margin/index.html
new file mode 100644
index 0000000000..164c64b9f2
--- /dev/null
+++ b/files/fr/web/css/-ms-wrap-margin/index.html
@@ -0,0 +1,39 @@
+---
+title: '-ms-wrap-margin'
+slug: Web/CSS/-ms-wrap-margin
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-wrap-margin
+---
+<div>{{CSSRef}}{{non-standard_header}}</div>
+
+<p>La propriété <strong><code>-ms-wrap-margin</code></strong> est <a href="/en-US/docs/Web/CSS/Microsoft_CSS_extensions">une propriété spécifique à Microsoft</a> qui définit une marge qui décale le retour à la ligne par rapport aux autres formes.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<h3 id="Values" name="Values">Valeurs</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>
+ <p>La taille de la marge avec une valeur non-négative.</p>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Remarks" name="Remarks">Notes</h2>
+
+<p>Les décalages créés par la propriété <code>-ms-wrap-margin</code> sont décalés en en dehors de l'exclusion. Cette propriété peut être utilisée avec n'importe quelle valeur de longueur.</p>
diff --git a/files/fr/web/css/-ms-wrap-through/index.html b/files/fr/web/css/-ms-wrap-through/index.html
new file mode 100644
index 0000000000..d817d34bbb
--- /dev/null
+++ b/files/fr/web/css/-ms-wrap-through/index.html
@@ -0,0 +1,45 @@
+---
+title: '-ms-wrap-through'
+slug: Web/CSS/-ms-wrap-through
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-wrap-through
+---
+<div>{{CSSRef}}{{non-standard_header}}</div>
+
+<p>La propriété CSS <strong><code>-ms-wrap-through</code></strong> est <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">une propriété spécifique à Microsoft</a> qui indique comment le contenu devrait s'écouler autour d'un élément d'exclusion.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<h3 id="Values" name="Values">Valeurs</h3>
+
+<dl>
+ <dt><code>wrap</code></dt>
+ <dd>
+ <p>L'élément d'exclusion hérite de la configuration de l'élément parent. Les éléments en ligne descendants s'écoulent autour des éléments d'exclusion définis en dehors de l'élément.</p>
+ </dd>
+ <dt><code>none</code></dt>
+ <dd>
+ <p>L'élément d'exclusion n'hérite pas de la configuration de l'élément parent. Les éléments descendants s'écoulent uniquement autour des éléments d'exclusion définis à l'intérieur de l'élément.</p>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Remarks" name="Remarks">Notes</h2>
+
+<p>La propriété <code>-ms-wrap-through</code> peut être utilisée afin de contrôler l'effet des exclusions. On peut notamment avoir un contenu de bloc qui s'écoule autour d'un élément d'exclusion et un autre contenu de bloc de créer une intersection avec ce même élément d'exclusion.</p>
+
+<p>Le contour d'exclusion d'une boîte est formé par l'ensemble des zones d'exclusion associées à l'élément. Pour plus d'informations, voir la section <a href="https://drafts.csswg.org/css-exclusions-1/#terms">Terminologie</a> de la spécification de niveau 1 pour le module CSS Exclusions.</p>
diff --git a/files/fr/web/css/-webkit-border-before/index.html b/files/fr/web/css/-webkit-border-before/index.html
new file mode 100644
index 0000000000..9c99fe83cd
--- /dev/null
+++ b/files/fr/web/css/-webkit-border-before/index.html
@@ -0,0 +1,108 @@
+---
+title: '-webkit-border-before'
+slug: Web/CSS/-webkit-border-before
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/-webkit-border-before
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété <strong><code>-webkit-border-before</code></strong> est une propriété raccourcie qui permet de définir les propriétés de la bordure pour le début d'un élément dans l'axe de bloc (l'axe logique orthogonal à l'axe de lecture).</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs décrivant une bordure */
+-webkit-border-before: 1px;
+-webkit-border-before: 2px dotted;
+-webkit-border-before: medium dashed blue;
+
+/* Valeurs globales */
+-webkit-border-before: inherit;
+-webkit-border-before: initial;
+-webkit-border-before: unset;
+</pre>
+
+<p><code>-webkit-border-before</code> peut ainsi être utilisée pour définir les valeurs d'une ou plusieurs de ces propriétés : {{cssxref("-webkit-border-before-width")}}, {{cssxref("-webkit-border-before-style")}}, et {{cssxref("-webkit-border-before-color")}}. Cette propriété est une propriété logique qui correspond à une propriété physique selon le mode d'écriture, la direction et l'orientation du texte. Autrement dit, cette propriété correspond à {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}ou {{cssxref("border-left")}} selon les valeurs définies pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<p>Cette propriété est à mettre en relation avec les propriétés {{cssxref("-webkit-border-after")}}, {{cssxref("-webkit-border-start")}}, et {{cssxref("-webkit-border-end")}} qui définissent les autres bordures de l'élément.</p>
+
+<p>L'équivalent standard de cette propriété est la propriété non-préfixée {{cssxref("border-block-start")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>Une ou plusieurs valeurs parmi les suivantes, dans n'importe quel ordre :</p>
+
+<dl>
+ <dt><code>&lt;border-width&gt;</code></dt>
+ <dd>Voir {{cssxref("border-width")}}.</dd>
+ <dt><code>&lt;border-style&gt;</code></dt>
+ <dd>Voir {{cssxref("border-style")}}.</dd>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>Voir {{cssxref("color")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.texteExemple {
+  writing-mode: vertical-rl;
+  -webkit-border-before: 5px dashed blue;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="texteExemple"&gt;Texte pour l'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification. Toutefois, on peut la rapprocher de la propriété standard {{cssxref("border-block-start")}}.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-webkit-border-before")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("border-block-start")}}</li>
+ <li>Les propriétés physiques correspondantes :
+  <ul>
+   <li>{{cssxref("border-top")}}</li>
+   <li>{{cssxref("border-right")}}</li>
+   <li>{{cssxref("border-bottom")}}</li>
+   <li>{{cssxref("border-left")}}</li>
+  </ul>
+ </li>
+ <li>Les propriétés qui déterminent les propriétés logiques par rapport aux propriétés physiques
+  <ul>
+   <li>{{cssxref("writing-mode")}}</li>
+   <li>{{cssxref("direction")}}</li>
+   <li>{{cssxref("text-orientation")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/-webkit-box-reflect/index.html b/files/fr/web/css/-webkit-box-reflect/index.html
new file mode 100644
index 0000000000..63a8855074
--- /dev/null
+++ b/files/fr/web/css/-webkit-box-reflect/index.html
@@ -0,0 +1,70 @@
+---
+title: '-webkit-box-reflect'
+slug: Web/CSS/-webkit-box-reflect
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/-webkit-box-reflect
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>La propriété <strong><code>-webkit-box-reflect</code></strong> peut être utilisée afin de créer un effet de réflexion d'un élément dans une direction donnée.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de directions */
+-webkit-box-reflect: above;
+-webkit-box-reflect: below;
+-webkit-box-reflect: left;
+-webkit-box-reflect: right;
+
+/* Valeurs incluant un décalage */
+-webkit-box-reflect: below 10px;
+
+/* Valeur de masque */
+-webkit-box-reflect: below 0 linear-gradient(transparent, white);
+
+/* Valeurs globales */
+-webkit-box-reflect: inherit;
+-webkit-box-reflect: initial;
+-webkit-box-reflect: unset;
+</pre>
+
+<div class="warning"><strong>Attention !</strong> Cette fonctionnalité ne doit pas être utilisée sur le Web. Pour créer des effets de reflet sur le Web, on pourra utiliser la fonction CSS standard {{cssxref("element", "element()")}}.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>above</code><em>, </em><code>below</code><em>, </em><code>right</code><em>, </em><code>left</code></dt>
+ <dd>Des mots-clés qui indiquent la direction dans laquelle créer la réflexion (respectivement : au-dessus, en-dessous, à droite, à gauche).</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>La taille du reflet créé, cf. {{cssxref("&lt;length&gt;")}} sur les valeurs possibles.</dd>
+ <dt><code>&lt;image&gt;</code></dt>
+ <dd>Le masque à appliquer au reflet, cf. {{cssxref("&lt;image&gt;")}} sur les valeurs possibles.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété n'est pas en voie de standardisation et ne fera pas partie de CSS. Pour créer des reflets en CSS, on pourra utiliser la fonction standard {{cssxref("element", "element()")}}.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-webkit-box-reflect")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="external" href="https://developer.apple.com/library/safari/documentation/appleapplications/reference/safaricssref/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-SW16">La documentation Apple</a></li>
+ <li><a href="https://www.webkit.org/blog/182/css-reflections/">La spécification WebKit</a></li>
+ <li>L'article de Lea Verou sur les réflexions CSS <a class="external" href="https://lea.verou.me/2011/06/css-reflections-for-firefox-with-moz-element-and-svg-masks/">en utilisant les fonctionnalités en voie de standardisation</a></li>
+</ul>
diff --git a/files/fr/web/css/-webkit-line-clamp/index.html b/files/fr/web/css/-webkit-line-clamp/index.html
new file mode 100644
index 0000000000..bf848f41a5
--- /dev/null
+++ b/files/fr/web/css/-webkit-line-clamp/index.html
@@ -0,0 +1,101 @@
+---
+title: '-webkit-line-clamp'
+slug: Web/CSS/-webkit-line-clamp
+tags:
+  - CSS
+  - Propriété
+translation_of: Web/CSS/-webkit-line-clamp
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>-webkit-line-clamp</code></strong> permet de limiter l'affichage du contenu d'un bloc à un nombre donné de lignes.</p>
+
+<p>Cette propriété fonctionne uniquement si {{cssxref("display")}} vaut <code>-webkit-box</code> ou <code>-webkit-inline-box</code> et si {{cssxref("-webkit-box-orient")}} vaut <code>vertical</code>.</p>
+
+<p>Dans la plupart des cas, on utilisera également {{cssxref("overflow")}} avec la valeur <code>hidden</code>, afin de masquer le contenu qui dépasse (plutôt que d'afficher une ellipse en dehors de la boîte).</p>
+
+<p>Lorsqu'on applique ce style à une ancre, la troncature pourra intervenir au milieu du texte (et pas nécessairement à la fin).</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Au départ, cette propriété était implémentée dans WebKit avec quelques problèmes. Elle a été standardisée à des fins de support pour les sites historiques. Le module de spécification <a href="https://www.w3.org/TR/css-overflow-3/#propdef--webkit-line-clamp">CSS Overflow Module Level 3</a> définit également une propriété {{cssxref("line-clamp")}} qui doit remplacer <code>-webkit-line-clamp</code>.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css">/* Valeurs avec un mot-clé */
+-webkit-line-clamp: none;
+
+/* Valeurs entières */
+/* Type &lt;integer&gt; */
+-webkit-line-clamp: 3;
+-webkit-line-clamp: 10;
+
+/* Valeurs globales */
+-webkit-line-clamp: inherit;
+-webkit-line-clamp: initial;
+-webkit-line-clamp: unset;
+</pre>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Cette valeur indique que le contenu ne sera pas rogné.</dd>
+ <dt>{{cssxref("integer")}}</dt>
+ <dd>Cette valeur indique le nombre de lignes après lequel tronquer le contenu. Cette valeur doit être supérieure à 0.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  Dans cet exemple &lt;code&gt;-webkit-line-clamp&lt;/code&gt; vaut &lt;code&gt;3&lt;/code&gt;, ce qui signifie que le texte sera rogné après trois lignes.
+  Une ellipse sera affichée au n ellipsis will be shown at the point where the text is clamped.
+&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  width: 300px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "100%", "100")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Overflow", "#propdef--webkit-line-clamp", "-webkit-line-clamp")}}</td>
+   <td>{{Spec2("CSS3 Overflow")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-webkit-line-clamp")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://css-tricks.com/line-clampin/">Line Clampin’ (Truncating Multiple Line Text)</a></li>
+ <li>{{cssxref("line-clamp")}}</li>
+</ul>
diff --git a/files/fr/web/css/-webkit-mask-attachment/index.html b/files/fr/web/css/-webkit-mask-attachment/index.html
new file mode 100644
index 0000000000..30f5caeb13
--- /dev/null
+++ b/files/fr/web/css/-webkit-mask-attachment/index.html
@@ -0,0 +1,75 @@
+---
+title: '-webkit-mask-attachment'
+slug: Web/CSS/-webkit-mask-attachment
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/-webkit-mask-attachment
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p id="Summary">Si la propriété {{cssxref("-webkit-mask-image")}} est définie, <strong><code>-webkit-mask-attachment</code></strong> permet de déterminer si la position de l'image est fixe par rapport à la zone d'affichage ou si elle défile avec le bloc qui l'englobe.</p>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+-webkit-mask-attachment: scroll;
+-webkit-mask-attachment: fixed;
+-webkit-mask-attachment: local;
+
+/* Valeurs multiples */
+-webkit-mask-attachment: scroll, local;
+-webkit-mask-attachment: fixed, local, scroll;
+
+/* Valeurs globales */
+-webkit-mask-attachment: inherit;
+-webkit-mask-attachment: initial;
+-webkit-mask-attachment: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>scroll</code></dt>
+ <dd>Si le mot-clé <code>scroll</code> est utilisé, l'image de masque défilera avec le bloc qui l'englobe.</dd>
+ <dt><code>fixed</code></dt>
+ <dd>Si le mot-clé <code>fixed</code> est utilisé, l'image de masque ne défilera pas. Sa position sera fixe pour la zone d'affichag (<em>viewport</em>).</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">body {
+  -webkit-mask-image: url('images/mask.png');
+  -webkit-mask-attachment: fixed;
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-webkit-mask-attachment")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("-webkit-mask")}}</li>
+ <li>{{cssxref("-webkit-mask-clip")}}</li>
+ <li>{{cssxref("-webkit-mask-box-image")}}</li>
+ <li>{{cssxref("-webkit-mask-origin")}}</li>
+ <li>{{cssxref("-webkit-mask-image")}}</li>
+ <li>{{cssxref("-webkit-mask-composite")}}</li>
+ <li>{{cssxref("-webkit-mask-repeat")}}</li>
+</ul>
diff --git a/files/fr/web/css/-webkit-mask-box-image/index.html b/files/fr/web/css/-webkit-mask-box-image/index.html
new file mode 100644
index 0000000000..eccee98f66
--- /dev/null
+++ b/files/fr/web/css/-webkit-mask-box-image/index.html
@@ -0,0 +1,94 @@
+---
+title: '-webkit-mask-box-image'
+slug: Web/CSS/-webkit-mask-box-image
+tags:
+  - CSS
+  - Non-standard
+  - Reference
+  - Web
+translation_of: Web/CSS/-webkit-mask-box-image
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété <strong><code>-webkit-mask-box-image</code></strong> permet de définir l'image de masque utilisée pour la boîte de bordure d'un élément.</p>
+
+<ul>
+ <li>Valeur initiale : <code>none</code></li>
+ <li>Applicabilité : à tous les éléments</li>
+ <li>Héritée : non</li>
+ <li>Type de média : visuel</li>
+ <li>Valeur calculée : comme la valeur définie</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="eval">-webkit-mask-box-image: &lt;mask-box-image&gt; [&lt;top&gt; &lt;right&gt; &lt;bottom&gt; &lt;left&gt; &lt;x-repeat&gt; &lt;y-repeat&gt;]
+</pre>
+
+<p>Où :</p>
+
+<dl>
+ <dt><code>&lt;mask-box-image&gt;</code></dt>
+ <dd><code>{{cssxref("&lt;uri&gt;")}} | &lt;gradient&gt; | none</code></dd>
+ <dt><code>&lt;top&gt;</code> <code>&lt;right&gt;</code> <code>&lt;bottom&gt;</code> <code>&lt;left&gt;</code></dt>
+ <dd><code>&lt;length&gt; | &lt;percentage&gt;</code></dd>
+ <dt><code>&lt;x-repeat&gt;</code> <code>&lt;y-repeat&gt;</code></dt>
+ <dd><code>repeat | stretch | round</code></dd>
+</dl>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;uri&gt;</code></dt>
+ <dd>L'emplacement de la ressource qui doit être utilisée comme image de masque.</dd>
+ <dt><code>&lt;gradient&gt;</code></dt>
+ <dd>Une fonction <code>-webkit-gradient</code> utilisée pour générer l'image de masque.</dd>
+ <dt><code>none</code></dt>
+ <dd>Ce mot-clé indique que la boîte de bordure n'a pas de masque.</dd>
+</dl>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Le décalage à appliquer à l'image de masque (cf. {{cssxref("&lt;length&gt;")}} pour les unités possibles).</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Le décalage de l'image exprimé en pourcentages relatifs à la dimension de la boîte de bordure de l'élément (la largeur ou la hauteur selon l'axe).</dd>
+ <dt><code>repeat</code></dt>
+ <dd>L'image est répétée autant de fois que nécessaire pour remplir la boîte de bordure. On pourra avoir des morceaux d'image si les dimensions de celle-ci ne permettent pas d'en copier un nombre entier sur la boîte.</dd>
+ <dt><code>stretch</code></dt>
+ <dd>L'image de masque est étirée pour être contenue exactement dans la boîte de bordure.</dd>
+ <dt><code>round</code></dt>
+ <dd> L'image de masque est étirée et répétée de telle façon à ce qu'il n'y ait pas de morceaux d'image vers la fin de la boîte de bordure.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">.exempleUn {
+  -webkit-mask-box-image: url('mask.png');
+}
+
+.exempleDeux {
+  -webkit-mask-box-image: url('logo.png') 100 100 0 0 round round;
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-webkit-mask-box-image")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("-webkit-mask")}}</li>
+ <li>{{cssxref("-webkit-mask-origin")}}</li>
+ <li>{{cssxref("-webkit-mask-attachment")}}</li>
+ <li>{{cssxref("-webkit-mask-clip")}}</li>
+ <li>{{cssxref("-webkit-mask-image")}}</li>
+ <li>{{cssxref("-webkit-mask-composite")}}</li>
+ <li>{{cssxref("-webkit-mask-repeat")}}</li>
+</ul>
diff --git a/files/fr/web/css/-webkit-mask-composite/index.html b/files/fr/web/css/-webkit-mask-composite/index.html
new file mode 100644
index 0000000000..1acfc7d25d
--- /dev/null
+++ b/files/fr/web/css/-webkit-mask-composite/index.html
@@ -0,0 +1,95 @@
+---
+title: '-webkit-mask-composite'
+slug: Web/CSS/-webkit-mask-composite
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/-webkit-mask-composite
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété <strong><code>-webkit-mask-composite</code></strong> définit la façon dont plusieurs images de masque sont appliquées pour un même élément. Les images de masques sont composées dans l'ordre inverse dans lequel elles sont listées dans la propriété {{cssxref("-webkit-mask-image")}}.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+-webkit-mask-composite: clear;
+-webkit-mask-composite: copy;
+-webkit-mask-composite: source-over;
+-webkit-mask-composite: source-in;
+-webkit-mask-composite: source-out;
+-webkit-mask-composite: source-atop;
+-webkit-mask-composite: destination-over;
+-webkit-mask-composite: destination-in;
+-webkit-mask-composite: destination-out;
+-webkit-mask-composite: destination-atop;
+-webkit-mask-composite: xor;
+
+/* Valeurs globales */
+-webkit-mask-composite: inherit;
+-webkit-mask-composite: initial;
+-webkit-mask-composite: unset;
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> La propriété {{cssxref("mask-composite")}} couvre certains aspects de cette propriété non-standard avec des mots-clés différents.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>clear</code></dt>
+ <dd>Les pixels qui se recouvrent entre l'image source et l'image de destination sont enlevés.</dd>
+ <dt><code>copy</code></dt>
+ <dd>Les pixels du masque source remplacent ceux du masque de destination.</dd>
+ <dt><code>source-over</code></dt>
+ <dd>Le contenu du masque source est appliqué sur l'image du masque de destination.</dd>
+ <dt><code>source-in</code></dt>
+ <dd>Les pixels qui se recouvrent sont remplacés par les pixels de l'image du masque source. Tous les autres pixels sont enlevés.</dd>
+ <dt><code>source-out</code></dt>
+ <dd>Les pixels qui se recouvrent sont enlevés et on prend les autres pixels de l'image de masque source.</dd>
+ <dt><code>source-atop</code></dt>
+ <dd>Les pixels de l'image de masque de destination sont utilisés. Les pixels de l'image de masque source sont utilisés uniquement s'ils ne recouvrent pas une portion de l'image de destination. Cela fait que l'image source n'a aucun effet.</dd>
+ <dt><code>destination-over</code></dt>
+ <dd>L'image de masque de destination est affichée par dessus l'image de masque source.</dd>
+ <dt><code>destination-in</code></dt>
+ <dd>Les pixels qui se recouvrent sont remplacés par ceux de l'image de destination. Tous les autres pixels sont enlevés.</dd>
+ <dt><code>destination-out</code></dt>
+ <dd>Les pixels qui se recouvrent sont enlevés et on prend les autres pixels de l'image de destination.</dd>
+ <dt><code>destination-atop</code></dt>
+ <dd>Les pixels de l'image source sont affichés. Les pixels de l'image de destination sont uniquement utilisés s'ils ne chevauchent pas des portions non-transparentes de l'image source. Cela fait que l'image de destination n'a aucun effet.</dd>
+ <dt><code>xor</code></dt>
+ <dd>Les pixels qui se chevauchent deviennent complètement transparents s'ils étaient complètement opaques.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">.exemple {
+  -webkit-mask-image: url(mask1.png), url('mask2.png');
+  -webkit-mask-composite: xor, source-over;
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-webkit-mask-composite")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("mask-composite")}}</li>
+</ul>
diff --git a/files/fr/web/css/-webkit-mask-image/index.html b/files/fr/web/css/-webkit-mask-image/index.html
new file mode 100644
index 0000000000..c68e391c6b
--- /dev/null
+++ b/files/fr/web/css/-webkit-mask-image/index.html
@@ -0,0 +1,174 @@
+---
+title: '-webkit-mask-image'
+slug: Web/CSS/-webkit-mask-image
+tags:
+  - CSS
+translation_of: Web/CSS/mask-image
+---
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">{{ CSSRef() }}</p>
+
+<p>{{ Non-standard_header() }}</p>
+
+<h3 id="Résumé">Résumé</h3>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">La propriété CSS <code style="font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace; color: inherit; font-weight: inherit;">-webkit-mask-image </code>définit l'image de masque pour un élément. L'image de masque découpe la portion visible d'un élément conformément aux valeurs de transparence de cette image.</p>
+
+<ul style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 22px; list-style-type: disc;">
+ <li>{{ Xref_cssinitial() }} : none</li>
+ <li>S'applique à : tous les éléments</li>
+ <li>{{ Xref_cssinherited() }} : non</li>
+ <li>Média : {{ Xref_cssvisual() }}</li>
+ <li>{{ Xref_csscomputed() }} : URI absolue ou none</li>
+</ul>
+
+<h3 id="Syntaxe">Syntaxe</h3>
+
+<pre class="eval" style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(246, 246, 242); font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;">-webkit-mask-image:  &lt;mask-image&gt;[, &lt;mask-image&gt;]*
+</pre>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Valeurs :</p>
+
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">&lt;mask-image&gt;</dt>
+ <dd style="margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; margin-left: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;"><code style="font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace; color: inherit; font-weight: inherit;">{{cssxref("&lt;uri&gt;")}} | &lt;gradient&gt; | none</code></dd>
+</dl>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Values</p>
+
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">&lt;uri&gt;</dt>
+ <dd style="margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; margin-left: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Chemin de la ressource image utilisée comme masque.</dd>
+ <dt style="font-style: normal; font-weight: bold;"> </dt>
+ <dt style="font-style: normal; font-weight: bold;">&lt;gradient&gt;</dt>
+ <dd style="margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; margin-left: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;"><span style="font-family: courier new;">Fonction-webkit-gradient</span> utilisée comme masque.</dd>
+ <dt style="font-style: normal; font-weight: bold;">none</dt>
+ <dd style="margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; margin-left: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Signifie que l'élément n'a pas de masque image.</dd>
+</dl>
+
+<h4 id="Exemples">Exemples</h4>
+
+<pre class="brush: css">body {
+    -webkit-mask-image: url('images/mymask.png');
+}
+
+div {
+    -webkit-mask-image: url('images/foo.png'), url('images/bar.png');
+}
+
+p {
+    -webkit-mask-image: none;
+}
+</pre>
+
+<h3 id="Notes">Notes</h3>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Si plusieurs images de masque sont spécifiées, la région visible résultat sera la combinaison des régions visibles de chaque image.</p>
+
+<h3 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h3>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table" style="border-bottom-style: dotted; border-bottom-width: 1px; border-collapse: collapse; border-left-style: dotted; border-left-width: 1px; border-right-style: dotted; border-right-width: 1px; border-top-style: dotted; border-top-width: 1px; font-size: 14px; margin-bottom: 1.286em;">
+ <tbody>
+  <tr>
+   <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Fonctionnalité</th>
+   <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Firefox (Gecko)</th>
+   <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Chrome</th>
+   <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Internet Explorer</th>
+   <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Opera</th>
+   <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Safari</th>
+  </tr>
+  <tr>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">Support basique</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">1.0</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">4.0</td>
+  </tr>
+  <tr>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">Images de masque multiples</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">1.0</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">4.0</td>
+  </tr>
+  <tr>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">Dégradés</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">1.0{{ property_prefix("-webkit") }}</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">4.0{{ property_prefix("-webkit") }}</td>
+  </tr>
+  <tr>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">Masques SVG</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">8.0</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">4.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table" style="border-bottom-style: dotted; border-bottom-width: 1px; border-collapse: collapse; border-left-style: dotted; border-left-width: 1px; border-right-style: dotted; border-right-width: 1px; border-top-style: dotted; border-top-width: 1px; font-size: 14px; margin-bottom: 1.286em;">
+ <tbody>
+  <tr>
+   <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;"><strong style="background-color: rgb(238, 238, 238); font-weight: bold; line-height: 14px;">Fonctionnalité</strong></th>
+   <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">iOS Safari</th>
+   <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Opera Mini</th>
+   <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Opera Mobile</th>
+   <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Android Browser</th>
+  </tr>
+  <tr>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">Support basique</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">3.2</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">2.1</td>
+  </tr>
+  <tr>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">Images de masque multiples</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">yes</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">yes</td>
+  </tr>
+  <tr>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">Dégradés</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">yes {{ property_prefix("-webkit") }}</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">yes{{ property_prefix("-webkit") }}</td>
+  </tr>
+  <tr>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">
+    <p>Masques SVG</p>
+   </td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">
+    <p>yes</p>
+   </td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">
+    <p>{{ CompatNo() }}<a id="fck_paste_padding" style="text-decoration: none; color: rgb(51, 102, 153) !important; cursor: default;"></a></p>
+   </td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">
+    <p>{{ CompatNo() }}</p>
+   </td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">
+    <p>yes</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div class="note"><strong>Note :</strong> Gecko supporte les <a href="/En/Applying_SVG_effects_to_HTML_content#Example:.C2.A0Masking" style="font-style: italic;" title="https://developer.mozilla.org/En/Applying_SVG_effects_to_HTML_content#Example:.C2.A0Masking">effets de filtre SVG </a>depuis sa version 1.9.1. Ils peuvent être utilisés pour masquer du contenu HTML.</div>
+
+<h3 id="Voir_également">Voir également</h3>
+
+<p>{{ cssxref("-webkit-mask") }}, {{ cssxref("-webkit-mask-origin") }}, {{ cssxref("-webkit-mask-attachment") }},{{ cssxref("-webkit-mask-image") }},{{ cssxref("-webkit-mask-composite") }},{{ cssxref("-webkit-mask-repeat") }}</p>
diff --git a/files/fr/web/css/-webkit-mask-position-x/index.html b/files/fr/web/css/-webkit-mask-position-x/index.html
new file mode 100644
index 0000000000..af1b699b8b
--- /dev/null
+++ b/files/fr/web/css/-webkit-mask-position-x/index.html
@@ -0,0 +1,90 @@
+---
+title: '-webkit-mask-position-x'
+slug: Web/CSS/-webkit-mask-position-x
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/-webkit-mask-position-x
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété <strong><code>-webkit-mask-position-x</code></strong> permet de définir la position horizontale initiale d'une image de masque.</p>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+-webkit-mask-position-x: left;
+-webkit-mask-position-x: center;
+-webkit-mask-position-x: right;
+
+/* Valeurs proportionnelles */
+/* Type &lt;percentage&gt;        */
+-webkit-mask-position-x: 100%;
+-webkit-mask-position-x: -50%;
+
+/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+-webkit-mask-position-x: 50px;
+-webkit-mask-position-x: -1cm;
+
+/* Gestion de plusieurs valeurs */
+-webkit-mask-position-x: 50px, 25%, -3em;
+
+/* Valeurs globales */
+-webkit-mask-position-x: inherit;
+-webkit-mask-position-x: initial;
+-webkit-mask-position-x: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>Une longueur indiquant la position du bord gauche de l'image à partir du bord gauche de la boîte de remplissage (<em>padding</em>). Les pourcentages sont calculés relativement à la dimension horizontale de la boîte de remplissage. (<code>0%</code> indique que le bord gauche de l'image est aligné avec le bord gauche de la boîte de remplissage et <code>100%</code> indique que le bord droit de l'image est aligné avec le bord droit  de la boîte de remplissage).</dd>
+ <dt><code><strong>left</strong></code></dt>
+ <dd>Un mot-clé équivalent à <code>0%</code>.</dd>
+ <dt><code><strong>right</strong></code></dt>
+ <dd>Un mot-clé équivalent à <code>100%</code>.</dd>
+ <dt><code><strong>center</strong></code></dt>
+ <dd>Un mot-clé équivalent à <code>50%</code>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:css">.exempleUn {
+  -webkit-mask-image: url(mask.png);
+  -webkit-mask-position-x: right;
+}
+
+.exempleDeux {
+  -webkit-mask-image: url(mask.png);
+  -webkit-mask-position-x: 25%;
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-webkit-mask-position-x")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("-webkit-mask-position")}}</li>
+ <li>{{cssxref("-webkit-mask-position-y")}}</li>
+ <li>{{cssxref("-webkit-mask-origin")}}</li>
+ <li>{{cssxref("-webkit-mask-attachment")}}</li>
+</ul>
diff --git a/files/fr/web/css/-webkit-mask-position-y/index.html b/files/fr/web/css/-webkit-mask-position-y/index.html
new file mode 100644
index 0000000000..d620e75b1d
--- /dev/null
+++ b/files/fr/web/css/-webkit-mask-position-y/index.html
@@ -0,0 +1,92 @@
+---
+title: '-webkit-mask-position-y'
+slug: Web/CSS/-webkit-mask-position-y
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/-webkit-mask-position-y
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété <strong><code>-webkit-mask-position-y</code></strong> permet de définir la position verticale initiale d'une image de masque.</p>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+-webkit-mask-position-y: top;
+-webkit-mask-position-y: center;
+-webkit-mask-position-y: bottom;
+
+/* Valeurs proportionnelles */
+/* Type &lt;percentage&gt;        */
+-webkit-mask-position-y: 100%;
+-webkit-mask-position-y: -50%;
+
+/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+-webkit-mask-position-y: 50px;
+-webkit-mask-position-y: -1cm;
+
+/* Gestion de plusieurs valeurs */
+-webkit-mask-position-y: 50px, 25%, -3em;
+
+/* Valeurs globales */
+-webkit-mask-position-y: inherit;
+-webkit-mask-position-y: initial;
+-webkit-mask-position-y: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>Une longueur indiquant la position du haut de l'image à partir du bord haut de la boîte de remplissage (<em>padding</em>). Les pourcentages sont calculés relativement à la dimension verticale de la boîte de remplissage (<code>0%</code> indique que le bord haut de l'image est aligné avec le bord haut de la boîte de remplissage et <code>100%</code> indique que le bord bas de l'image est aligné avec le bord bas de la boîte de remplissage).</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une longueur, mesurée à partir du bord haut de la boîte de remplissage (<em>padding</em>), qui indique la position verticale de l'image.</dd>
+ <dt><code><strong>top</strong></code></dt>
+ <dd>Un mot-clé équivalent à <code>0%</code>.</dd>
+ <dt><code><strong>bottom</strong></code></dt>
+ <dd>Un mot-clé équivalent à <code>100%</code>.</dd>
+ <dt><code><strong>center</strong></code></dt>
+ <dd>Un mot-clé équivalent à <code>50%</code>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:css">.exempleUn {
+  -webkit-mask-image: url(mask.png);
+  -webkit-mask-position-y: bottom;
+}
+
+.exempleDeux {
+  -webkit-mask-image: url(mask.png);
+  -webkit-mask-position-y: 25%;
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-webkit-mask-position-y")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("-webkit-mask-position")}}</li>
+ <li>{{cssxref("-webkit-mask-position-x")}}</li>
+ <li>{{cssxref("-webkit-mask-origin")}}</li>
+ <li>{{cssxref("-webkit-mask-attachment")}}</li>
+</ul>
diff --git a/files/fr/web/css/-webkit-mask-repeat-x/index.html b/files/fr/web/css/-webkit-mask-repeat-x/index.html
new file mode 100644
index 0000000000..513d898b57
--- /dev/null
+++ b/files/fr/web/css/-webkit-mask-repeat-x/index.html
@@ -0,0 +1,88 @@
+---
+title: '-webkit-mask-repeat-x'
+slug: Web/CSS/-webkit-mask-repeat-x
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/-webkit-mask-repeat-x
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété <strong><code>-webkit-mask-repeat-x</code></strong> définit la façon dont une image de masque est répétée horizontalement.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+-webkit-mask-repeat-x: repeat;
+-webkit-mask-repeat-x: no-repeat;
+-webkit-mask-repeat-x: space;
+-webkit-mask-repeat-x: round;
+
+/* Valeurs multiples */
+-webkit-mask-repeat-x: repeat, no-repeat, space;
+
+/* Valeurs globales */
+-webkit-mask-repeat-x: inherit;
+-webkit-mask-repeat-x: initial;
+-webkit-mask-repeat-x: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>repeat</code></dt>
+ <dd>L'image de masque est répétée horizontalement.</dd>
+ <dt><code>no-repeat</code></dt>
+ <dd>L'image de masque n'est pas répétée horizontalement, seul un exemplaire est dessiné selon l'axe horizontal. Le contenu restant sur l'axe horizontal pour les éléments masqués n'est pas affiché.</dd>
+ <dt><code>space</code></dt>
+ <dd>L'image est répétée tant que possible sans être rognée. La première et la dernière images sont accolées aux bords droit et gauche de l'élément et l'espace restant est réparti entre les copies de l'image. La propriété {{cssxref("mask-position")}} est ignorée sauf si une seule image peut être affichée sans qu'il n'y ait de rognage. On aura uniquement du rognage s'il n'y a pas suffisamment d'espace pour afficher une seule image.</dd>
+ <dt><code>round</code></dt>
+ <dd>L'image est répétée et les différents exemplaires sont tous étirés de la même façon afin qu'il n'y ait pas d'espace entre chaque. Ainsi, une image qui mesure originellement 260px et qui est répétée trois fois pourra être étirée jusqu'à ce que chaque répétition soit large de 300px, ensuite une autre image sera ajoutée et toutes seront compressées à 225px.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">.exempleun {
+  -webkit-mask-image: url('mask.png');
+  -webkit-mask-repeat-x: repeat;
+}
+
+.exempledeux {
+  -webkit-mask-image: url('mask.png');
+  -webkit-mask-repeat-x: no-repeat;
+}
+</pre>
+
+<h3 id="Gestion_de_plusieurs_images">Gestion de plusieurs images</h3>
+
+<p>On peut définir un style de répétition (<code>&lt;repeat-style&gt;</code>) différent pour chacune des images de masque en séparant les valeurs par des virgules :</p>
+
+<pre class="brush: css">.exempletrois {
+  -webkit-mask-image: url('mask1.png'), url('mask2.png');
+  -webkit-mask-repeat-x: repeat, space;
+}
+</pre>
+
+<p>Chaque image aura la valeur associée, dans le même ordre.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-webkit-mask-repeat-x")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("-webkit-mask-repeat")}},</li>
+ <li>{{cssxref("-webkit-mask-repeat-y")}}</li>
+</ul>
diff --git a/files/fr/web/css/-webkit-mask-repeat-y/index.html b/files/fr/web/css/-webkit-mask-repeat-y/index.html
new file mode 100644
index 0000000000..3c59b32302
--- /dev/null
+++ b/files/fr/web/css/-webkit-mask-repeat-y/index.html
@@ -0,0 +1,88 @@
+---
+title: '-webkit-mask-repeat-y'
+slug: Web/CSS/-webkit-mask-repeat-y
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/-webkit-mask-repeat-y
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété <strong><code>-webkit-mask-repeat-y</code></strong> définit la façon dont une image de masque est répétée verticalement.</p>
+
+<pre class="brush:css  no-line-numbers">/* Valeurs avec un mot-clé */
+-webkit-mask-repeat-y: repeat;
+-webkit-mask-repeat-y: no-repeat;
+-webkit-mask-repeat-y: space;
+-webkit-mask-repeat-y: round;
+
+/* Valeurs multiples */
+-webkit-mask-repeat-y: repeat, no-repeat, space;
+
+/* Valeurs globales */
+-webkit-mask-repeat-y: inherit;
+-webkit-mask-repeat-y: initial;
+-webkit-mask-repeat-y: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>repeat</code></dt>
+ <dd>L'image de masque est répétée verticalement.</dd>
+ <dt><code>no-repeat</code></dt>
+ <dd>L'image de masque n'est pas répétée verticalement, seul un exemplaire est dessiné selon l'axe vertical. Le contenu restant sur l'axe vertical pour les éléments masqués n'est pas affiché.</dd>
+ <dt><code>space</code></dt>
+ <dd>L'image est répétée tant que possible sans être rognée. La première et la dernière images sont accolées aux bords bas et haut de l'élément et l'espace restant est réparti entre les copies de l'image. La propriété {{cssxref("mask-position")}} est ignorée sauf si une seule image peut être affichée sans qu'il n'y ait de rognage. On aura uniquement du rognage s'il n'y a pas suffisamment d'espace pour afficher une seule image.</dd>
+ <dt><code>round</code></dt>
+ <dd>L'image est repétée et les différents exemplaires sont tous étirés de la même façon afin qu'il n'y ait pas d'espace entre chaque. Ainsi, une image qui mesure originellement 260px et qui est répétée trois fois pourra être étirée jusqu'à ce que chaque répétition soit haute de 300px, ensuite une autre image sera ajoutée et toutes seront compressées à 225px.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">.exempleun {
+  -webkit-mask-image: url('mask.png');
+  -webkit-mask-repeat-y: repeat;
+}
+
+.exempledeux {
+  -webkit-mask-image: url('mask.png');
+  -webkit-mask-repeat-y: no-repeat;
+}
+</pre>
+
+<h3 id="Gestion_de_plusieurs_images">Gestion de plusieurs images</h3>
+
+<p>On peut définir un style de répétition (<code>&lt;repeat-style&gt;</code>) différent pour chacune des images de masque en séparant les valeurs par des virgules :</p>
+
+<pre class="brush: css">.exempletrois {
+  -webkit-mask-image: url('mask1.png'), url('mask2.png');
+  -webkit-mask-repeat-y: repeat, space;
+}
+</pre>
+
+<p>Chaque image aura la valeur associée, dans le même ordre.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-webkit-mask-repeat-y")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("-webkit-mask-repeat")}},</li>
+ <li>{{cssxref("-webkit-mask-repeat-x")}}</li>
+</ul>
diff --git a/files/fr/web/css/-webkit-overflow-scrolling/index.html b/files/fr/web/css/-webkit-overflow-scrolling/index.html
new file mode 100644
index 0000000000..8a9c9ee4d3
--- /dev/null
+++ b/files/fr/web/css/-webkit-overflow-scrolling/index.html
@@ -0,0 +1,86 @@
+---
+title: '-webkit-overflow-scrolling'
+slug: Web/CSS/-webkit-overflow-scrolling
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/-webkit-overflow-scrolling
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété <strong><code>-webkit-overflow-scrolling</code></strong> permet de contrôler si l'appareil tactile utilise l'inertie pour faire défiler l'élément visé par la déclaration.</p>
+
+<h2 id="Valeurs">Valeurs</h2>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Le défilement « normal » est utilisé : le défilement s'arrête dès que le doigt ne touche plus l'écran.</dd>
+ <dt><code>touch</code></dt>
+ <dd>Le défilement simule une certaine inertie : le contenu continue à défiler légèrement après que le toucher soit fini. La vitesse et la durée du défilement sont proportionnelles à la vitesse de déplacement du doigt sur l'écran. Cela crée un nouveau contexte d'empilement.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  width: 100%;
+  overflow: auto;
+}
+
+p {
+  width: 200%;
+  background: #f5f9fa;
+  border: 2px solid #eaf2f4;
+  padding: 10px;
+}
+
+.scroll-touch {
+  -webkit-overflow-scrolling: touch; /* on laisse le défilement se poursuivre */
+}
+
+.scroll-auto {
+  -webkit-overflow-scrolling: auto; /* on arrête le défilement immédiatement */
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="scroll-touch"&gt;
+  &lt;p&gt;
+    Ce paragraphe a un défilement inertiel.
+  &lt;/p&gt;
+&lt;/div&gt;
+&lt;div class="scroll-auto"&gt;
+  &lt;p&gt;
+     Pas celui-ci.
+  &lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification. Elle est documentée dans <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/css/property/-webkit-overflow-scrolling">la référence CSS de Safari</a>.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-webkit-overflow-scrolling")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/">L'article de CSS-Tricks sur cette fonctionnalité, avec une démonstration (en anglais)</a></li>
+ <li><a href="https://www.smashingmagazine.com/2018/08/scroll-bouncing-websites/">Article de Smashing Magazine (en anglais) : décrire l'effet du rebondissement du scroll et le fonctionnement dans les différents navigateurs</a></li>
+</ul>
diff --git a/files/fr/web/css/-webkit-print-color-adjust/index.html b/files/fr/web/css/-webkit-print-color-adjust/index.html
new file mode 100644
index 0000000000..b7f3904833
--- /dev/null
+++ b/files/fr/web/css/-webkit-print-color-adjust/index.html
@@ -0,0 +1,63 @@
+---
+title: '-webkit-print-color-adjust'
+slug: Web/CSS/-webkit-print-color-adjust
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/-webkit-print-color-adjust
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété <strong><code>-webkit-print-color-adjust</code></strong> est une extension non-standard qui peut être utilisée pour forcer l'impression des images et couleurs utilisées en arrière-plan pour les navigateurs basés sur WebKit.</p>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+-webkit-print-color-adjust: economy;
+-webkit-print-color-adjust: exact;
+
+/* Valeurs globales */
+-webkit-print-color-adjust: inherit;
+-webkit-print-color-adjust: initial;
+-webkit-print-color-adjust: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <code>-webkit-print-color-adjust</code> peut être définie avec l'un des mots-clés suivants.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>economy</code></dt>
+ <dd>Le comportement normal : les images et couleurs d'arrière-plan sont uniquement imprimées si l'utilisateur a explicitement permis cette impression dans la boîte de dialogue pour les réglages d'impression.</dd>
+ <dt><code>exact</code></dt>
+ <dd>Les images et couleurs d'arrière-plan de l'élément auquel la règle CSS est appliquée seront toujours imprimées, les réglages d'impression sont donc surchargés.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">/* Force l'article à être imprimé en noir et blanc */
+article {
+  -webkit-print-color-adjust: exact;
+  background: #222;
+  color: #eee;
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification. Il existe <a href="https://wiki.csswg.org/ideas/print-backgrounds">une proposition sur le wiki du groupe de travail CSS</a> pour standardiser cette propriété.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-webkit-print-color-adjust")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://bugs.webkit.org/show_bug.cgi?id=64583">Bug WebKit 64583</a> : Ajout d'une propriété CSS permettant de contrôler l'impression des arrière-plans des éléments.</li>
+ <li>Wiki du groupe de travail CSS : <a href="https://wiki.csswg.org/ideas/print-backgrounds">print-backgrounds</a> - une proposition de standardisation pour cette propriété.</li>
+ <li>La spécification du module des couleurs CSS (CSS Color) de niveau 4 ajoute la propriété <code><a href="https://drafts.csswg.org/css-color-4/#color-adjust">color-adjust</a></code> pour standardiser cette propriété.</li>
+</ul>
diff --git a/files/fr/web/css/-webkit-tap-highlight-color/index.html b/files/fr/web/css/-webkit-tap-highlight-color/index.html
new file mode 100644
index 0000000000..e2abe32c3c
--- /dev/null
+++ b/files/fr/web/css/-webkit-tap-highlight-color/index.html
@@ -0,0 +1,40 @@
+---
+title: '-webkit-tap-highlight-color'
+slug: Web/CSS/-webkit-tap-highlight-color
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/-webkit-tap-highlight-color
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété <strong><code>-webkit-tap-highlight-color</code></strong> est une propriété non-standard qui permet de définir la couleur utilisée pour surligner le lien et indiquer qu'il a bien été activé/touché par l'utilisateur.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">-webkit-tap-highlight-color: red;
+-webkit-tap-highlight-color: transparent; /* pour retirer la mise en avant */
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>La couleur utilisée pour surligner le lien lorsqu'il est touché.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification. Apple décrit cette propriété dans <a href="https://developer.apple.com/library/mac/documentation/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html#//apple_ref/doc/uid/TP40006510-SW5">le guide Safari pour le contenu web</a>.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Cette propriété est prise en charge par WebKit/Safari, Blink/Chrome ainsi que par certaines versions d'Internet Explorer et Microsoft Edge.</p>
diff --git a/files/fr/web/css/-webkit-text-fill-color/index.html b/files/fr/web/css/-webkit-text-fill-color/index.html
new file mode 100644
index 0000000000..886519717f
--- /dev/null
+++ b/files/fr/web/css/-webkit-text-fill-color/index.html
@@ -0,0 +1,101 @@
+---
+title: '-webkit-text-fill-color'
+slug: Web/CSS/-webkit-text-fill-color
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/-webkit-text-fill-color
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété <strong><code>-webkit-text-fill-color</code></strong> définit la couleur utilisée pour dessiner le contenu des lettres qui forment un texte. Si cette propriété n'est pas définie, c'est la valeur de la propriété {{cssxref("color")}} qui sera utilisée.</p>
+
+<pre class="brush: css no-line-numbers">/* Valeurs de couleurs */
+/* Type &lt;color&gt;        */
+-webkit-text-fill-color: red;
+-webkit-text-fill-color: #000000;
+-webkit-text-fill-color: rgb(100, 200, 0);
+
+/* Valeurs globales */
+-webkit-text-fill-color: inherit;
+-webkit-text-fill-color: initial;
+-webkit-text-fill-color: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>La couleur utilisée pour colorer les lettres du texte.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[4]">p {
+  margin: 0;
+  font-size: 3em;
+  -webkit-text-fill-color: green;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Ce texte est vert.&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Example", "380px", "60px")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Compat', '#the-webkit-text-fill-color', '-webkit-text-fill-color')}}</td>
+   <td>{{Spec2('Compat')}}</td>
+   <td>Définition initiale dans un standard.</td>
+  </tr>
+  <tr>
+   <td><a class="external external-icon" href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-text-fill-color" hreflang="en" lang="en">Référence CSS Safari<br>
+    <small lang="en-US">'-webkit-text-fill-color' dans ce document.</small></a></td>
+   <td>Documentation non-officielle, non-standard.</td>
+   <td>Documentation initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-webkit-text-fill-color")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://www.webkit.org/blog/85/introducing-text-stroke/">Le billet de <em>Surfin' Safari</em> qui annonce cette fonctionnalité (en anglais)</a></li>
+ <li><a href="https://css-tricks.com/adding-stroke-to-web-text/">L'article de CSS-Tricks qui décrit cette fonctionnalité (en anglais)</a></li>
+ <li>{{cssxref("-webkit-text-stroke-color")}}</li>
+ <li>{{cssxref("-webkit-text-stroke-width")}}</li>
+ <li>{{cssxref("-webkit-text-stroke")}}</li>
+</ul>
diff --git a/files/fr/web/css/-webkit-text-security/index.html b/files/fr/web/css/-webkit-text-security/index.html
new file mode 100644
index 0000000000..290fc9d2b7
--- /dev/null
+++ b/files/fr/web/css/-webkit-text-security/index.html
@@ -0,0 +1,54 @@
+---
+title: '-webkit-text-security'
+slug: Web/CSS/-webkit-text-security
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/-webkit-text-security
+---
+<div>{{CSSRef}} {{Non-standard_header}}</div>
+
+<p><code><strong>-webkit-text-security</strong></code> est une propriété CSS non-standard qui permet de masquer les caractères saisis dans un camp d'un formulaire (ex. {{HTMLElement("input")}} ou {{HTMLElement("textarea")}}) en les remplaçant par une forme géométrique. Cette propriété n'affecte que les champs qui ne sont pas de type <code>password</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">-webkit-text-security: circle;
+-webkit-text-security: disc;
+-webkit-text-security: square;
+-webkit-text-security: none;
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>En utilisant un navigateur qui prend en charge cette propriété et en saisissant des caractères dans le champs, vous pourrez les voir remplacées par des carrés.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;label for="name"&gt;Nom :&lt;/label&gt;
+&lt;input type="text" name="name" id="name" /&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input {
+  -webkit-text-security: square;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Example")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété WebKit est spécifique à ce moteur et ne fait partie d'aucune spécification<em>.</em></p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Cette propriété est prise en charge par les navigateurs basés sur WebKit ou Blink.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/WebKit_Extensions">Les extensions CSS spécifiques à WebKit</a></li>
+</ul>
diff --git a/files/fr/web/css/-webkit-text-stroke-color/index.html b/files/fr/web/css/-webkit-text-stroke-color/index.html
new file mode 100644
index 0000000000..fe756244da
--- /dev/null
+++ b/files/fr/web/css/-webkit-text-stroke-color/index.html
@@ -0,0 +1,112 @@
+---
+title: '-webkit-text-stroke-color'
+slug: Web/CSS/-webkit-text-stroke-color
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/-webkit-text-stroke-color
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété <strong><code>-webkit-text-stroke-color</code></strong> permet de définir la couleur de la ligne utilisée pour le contour du text. Si cette propriété n'est pas définie, c'est la valeur de {{cssxref("color")}} qui sera utilisée.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de couleur */
+/* Type &lt;color&gt;       */
+-webkit-text-stroke-color: red;
+-webkit-text-stroke-color: #e08ab4;
+-webkit-text-stroke-color: rgb(200, 100, 0);
+
+/* Valeurs globales */
+-webkit-text-stroke-color: inherit;
+-webkit-text-stroke-color: initial;
+-webkit-text-stroke-color: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>La couleur du contour pour les lettres.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Texte avec un contour&lt;/p&gt;
+&lt;input type="color" value="#ff0000"&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  margin: 0;
+  font-size: 4em;
+  -webkit-text-stroke-width: 3px;
+  -webkit-text-stroke-color: #ff0000;
+  /* Cette valeur peut être modifiée */
+}
+</pre>
+
+<div class="hidden">
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var colorPicker = document.querySelector("input");
+colorPicker.addEventListener("change", function(evt) {
+  document.querySelector("p").style.webkitTextStrokeColor = evt.target.value;
+});</pre>
+</div>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "500px", "100px")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Compat', '#the-webkit-text-stroke-color', '-webkit-text-stroke-color')}}</td>
+   <td>{{Spec2('Compat')}}</td>
+   <td>Définition initiale dans un standard.</td>
+  </tr>
+  <tr>
+   <td><a class="external external-icon" href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-text-stroke-color" hreflang="en" lang="en">Référence CSS Safari<br>
+    <small lang="en-US">'-webkit-text-stroke-color' dans ce document.</small></a></td>
+   <td>Documentation non-officielle, non-standard.</td>
+   <td>Documentation initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-webkit-text-stroke-color")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://www.webkit.org/blog/85/introducing-text-stroke/">Le billet de <em>Surfin' Safari</em> qui annonce cette fonctionnalité (en anglais)</a></li>
+ <li><a href="https://css-tricks.com/adding-stroke-to-web-text/">L'article de CSS-Tricks à propos de cette fonctionnalité (en anglais)</a></li>
+ <li>{{cssxref("-webkit-text-fill-color")}}</li>
+ <li>{{cssxref("-webkit-text-stroke-width")}}</li>
+ <li>{{cssxref("-webkit-text-stroke")}}</li>
+</ul>
diff --git a/files/fr/web/css/-webkit-text-stroke-width/index.html b/files/fr/web/css/-webkit-text-stroke-width/index.html
new file mode 100644
index 0000000000..15aa0db12c
--- /dev/null
+++ b/files/fr/web/css/-webkit-text-stroke-width/index.html
@@ -0,0 +1,121 @@
+---
+title: '-webkit-text-stroke-width'
+slug: Web/CSS/-webkit-text-stroke-width
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/-webkit-text-stroke-width
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété <strong><code>-webkit-text-stroke-width</code></strong> permet de définir l'épaisseur du trait qui entoure les lettres du texte.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css">/* Valeurs avec un mot-clé */
+-webkit-text-stroke-width: thin;
+-webkit-text-stroke-width: medium;
+-webkit-text-stroke-width: thick;
+
+/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+-webkit-text-stroke-width: 2px;
+-webkit-text-stroke-width: 0.1em;
+-webkit-text-stroke-width: 1mm;
+-webkit-text-stroke-width: 5pt;
+
+/* Valeurs globales */
+-webkit-text-stroke-width: inherit;
+-webkit-text-stroke-width: initial;
+-webkit-text-stroke-width: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;line-width&gt;</code></dt>
+ <dd>La largeur du trait utilisé pour entourer les lettres du texte.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  margin: 0;
+  font-size: 4em;
+  -webkit-text-stroke-color: red;
+}
+
+#thin {
+  -webkit-text-stroke-width: thin;
+}
+
+#medium {
+  -webkit-text-stroke-width: 3px;
+}
+
+#thick {
+  -webkit-text-stroke-width: 1.5mm;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p id="thin"&gt;Trait fin&lt;/p&gt;
+&lt;p id="medium"&gt;Trait moyen&lt;/p&gt;
+&lt;p id="thick"&gt;Trait épais&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "450px", "230px")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Compat', '#the-webkit-text-stroke-width', '-webkit-text-stroke-width')}}</td>
+   <td>{{Spec2('Compat')}}</td>
+   <td>Définition initiale dans un standard.</td>
+  </tr>
+  <tr>
+   <td><a class="external external-icon" href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-text-stroke-width" hreflang="en" lang="en">Référence CSS Safari<br>
+    <small lang="en-US">'-webkit-text-stroke-width' dans ce document.</small></a></td>
+   <td>Documentation non-officielle, non-standard.</td>
+   <td>Documentation initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-webkit-text-stroke-width")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://www.webkit.org/blog/85/introducing-text-stroke/">Le billet de <em>Surfin' Safari</em> qui annonce cette fonctionnalité (en anglais)</a></li>
+ <li><a href="https://css-tricks.com/adding-stroke-to-web-text/">L'article de CSS-Tricks à propos de cette fonctionnalité (en anglais)</a></li>
+ <li>{{cssxref("-webkit-text-stroke-color")}}</li>
+ <li>{{cssxref("-webkit-text-stroke")}}</li>
+ <li>{{cssxref("-webkit-text-fill-color")}}</li>
+</ul>
diff --git a/files/fr/web/css/-webkit-text-stroke/index.html b/files/fr/web/css/-webkit-text-stroke/index.html
new file mode 100644
index 0000000000..5ad00e1c52
--- /dev/null
+++ b/files/fr/web/css/-webkit-text-stroke/index.html
@@ -0,0 +1,98 @@
+---
+title: '-webkit-text-stroke'
+slug: Web/CSS/-webkit-text-stroke
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/-webkit-text-stroke
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété <strong><code>-webkit-text-stroke</code></strong> permet de définir l'épaisseur et la couleur du contour utilisé pour les lettres d'un texte. Cette propriété est une propriété raccourcie qui permet de définir les propriétés {{cssxref("-webkit-text-stroke-width")}} et {{cssxref("-webkit-text-stroke-color")}}.</p>
+
+<pre class="brush:css no-line-numbers notranslate">/* Valeurs de largeur et de couleur */
+-webkit-text-stroke: 4px navy;
+
+/* Valeurs globales */
+-webkit-text-stroke: inherit;
+-webkit-text-stroke: initial;
+-webkit-text-stroke: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>L'épaisseur du contour (cf. {{cssxref("&lt;length&gt;")}}).</dd>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>La couleur du contour (cf. {{cssxref("&lt;color&gt;")}}).</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[4] notranslate">#exemple {
+  font-size: 3em;
+  margin: 0;
+  -webkit-text-stroke: 2px red;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p id="exemple"&gt;Le contour de ce texte est rouge.&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 600, 60)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Compat', '#the-webkit-text-stroke', '-webkit-text-stroke')}}</td>
+   <td>{{Spec2('Compat')}}</td>
+   <td>Définition initiale dans un standard.</td>
+  </tr>
+  <tr>
+   <td><a class="external external-icon" href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-_webkit_text_stroke" hreflang="en" lang="en">Référence CSS Safari<br>
+    <small lang="en-US">'-webkit-text-stroke' dans ce document.</small></a></td>
+   <td>Documentation non-officielle, non-standard.</td>
+   <td>Documentation initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-webkit-text-stroke")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://www.webkit.org/blog/85/introducing-text-stroke/">Le billet de <em>Surfin' Safari</em> qui annonce cette fonctionnalité (en anglais)</a></li>
+ <li><a href="https://css-tricks.com/adding-stroke-to-web-text/">L'article de CSS-Tricks décrivant cette fonctionnalité (en anglais)</a></li>
+ <li>{{cssxref("-webkit-text-stroke-width")}}</li>
+ <li>{{cssxref("-webkit-text-stroke-color")}}</li>
+ <li>{{cssxref("-webkit-text-fill-color")}}</li>
+</ul>
diff --git a/files/fr/web/css/-webkit-touch-callout/index.html b/files/fr/web/css/-webkit-touch-callout/index.html
new file mode 100644
index 0000000000..3e6acd191c
--- /dev/null
+++ b/files/fr/web/css/-webkit-touch-callout/index.html
@@ -0,0 +1,56 @@
+---
+title: '-webkit-touch-callout'
+slug: Web/CSS/-webkit-touch-callout
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/-webkit-touch-callout
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété <strong><code>-webkit-touch-callout</code></strong> permet de contrôler l'affichage de la légende (<em>callout</em>) affichée par défaut lorsque le toucher est maintenu sur un élément.</p>
+
+<p>Lorsqu'un élément est touché et que la pression est maintenue sur iOS, Safari affiche une bulle d'informations à propos du lien. Cette propriété permet de désactiver ce fonctionnement.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+-webkit-touch-callout: default;
+-webkit-touch-callout: none;
+
+/* Valeurs globales */
+-webkit-touch-callout: initial;
+-webkit-touch-callout: inherit;
+-webkit-touch-callout: unset;</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>default</code></dt>
+ <dd>La légende par défaut est activée.</dd>
+ <dt><code>none</code></dt>
+ <dd>La légende est désactivée.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">.exemple {
+  -webkit-touch-callout: none;
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification. Elle est décrite dans <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-_webkit_touch_callout">la référence CSS de Safari</a>.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-webkit-touch-callout")}}</p>
diff --git a/files/fr/web/css/@charset/index.html b/files/fr/web/css/@charset/index.html
new file mode 100644
index 0000000000..9de828ed03
--- /dev/null
+++ b/files/fr/web/css/@charset/index.html
@@ -0,0 +1,82 @@
+---
+title: '@charset'
+slug: Web/CSS/@charset
+tags:
+  - CSS
+  - Reference
+  - Règle @
+translation_of: Web/CSS/@charset
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/R%C3%A8gles_@">règle @</a>  <strong><code>@charset</code></strong> définit l'encodage des caractères utilisés dans la feuille de style. Cette règle doit être le premier élément de la feuille de style (aucun caractère ne doit être écrit avant). Cette règle ne fait pas partie des <a href="/fr/Apprendre/CSS/Les_bases/La_syntaxe#Les_instructions_CSS">instructions imbriquées</a> et ne peut donc pas être utilisée <a href="/fr/docs/Web/CSS/Règles_@#R.C3.A8gles_conditionnelles_de_groupe">à l'intérieur des groupes conditionnels</a>. Si plusieurs règles <code>@charset</code> sont définies, seule la première sera utilisée. Cette règle ne pourra pas être utilisée au sein d'un attribut <code>style</code> d'un élément HTML ou avec l'élément {{HTMLElement("style")}} car c'est l'encodage du document HTML qui est alors pris en compte.</p>
+
+<pre class="brush: css no-line-numbers">@charset "utf-8";</pre>
+
+<p>Cette règle @ s'avère notamment utile lorsqu'on utilise des caractères non-ASCII pour certaines propriétés CSS telles que {{cssxref("content")}}.</p>
+
+<p>Le moteur dispose de différentes méthodes pour déterminer l'encodage d'une feuille de style. Il utilisera ces méthodes dans l'ordre qui suit et s'arrêtera dès qu'un résultat sera obtenu (autrement dit, les règles qui suivent sont triées par priorité décroissante) :</p>
+
+<ol>
+ <li>La valeur du caractère indiquant <a href="https://fr.wikipedia.org/wiki/Indicateur_d'ordre_des_octets">l'ordre des octets Unicode</a> qui est placé au début du fichier (le BOM)</li>
+ <li>La valeur fournie par l'attribut <code>charset</code> de l'en-tête HTTP <code>Content-Type</code> ou l'information équivalente dans le protocole utilisé pour servir la feuille de style.</li>
+ <li>La règle @ CSS <code>@charset</code>.</li>
+ <li>L'encodage défini dans le document appelant la ressource (l'attribut <code>charset</code> de l'élément {{HTMLElement("link")}}). Cette méthode est désormais obsolète et ne doit plus être utilisée.</li>
+ <li>Dans tous les autres cas, on considère que le document est encodé en UTF-8</li>
+</ol>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">@charset &lt;<em>charset</em>&gt;;
+</pre>
+
+<p>où</p>
+
+<dl>
+ <dt><code><em>charset</em></code></dt>
+ <dd>Est une chaîne de caractères (une valeur CSS de type  {{cssxref("&lt;string&gt;")}}) indiquant l'encodage qui doit être utilisé. Cette valeur doit correspondre à un nom d'encodage valide pour le Web tel que défini dans <a href="https://www.iana.org/assignments/character-sets/character-sets.xhtml">le registre IANA</a> et doit être délimitée par des doubles quotes, précédée d'un blanc (U+0020) et suivie d'un point-virgule. Si plusieurs noms sont associés avec l'encodage, seul celui marqué avec <em>préféré</em>  (<em>preferred</em>) doit être utilisé.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemples_valides">Exemples valides</h3>
+
+<pre class="brush: css">@charset "UTF-8";      /* Valide, la feuille de style est encodée en Unicode UTF-8 */
+@charset "iso-8859-15"; /* Valide, la feuille de style est encodée en Latin-9 (langues d'Europe occidentale avec le symbole €) */
+</pre>
+
+<h3 id="Exemples_invalides">Exemples invalides</h3>
+
+<pre class="brush: css example-bad"> @charset "UTF-8";      /* Invalide, il y a un caractère (un espace) avant la règle @ */
+@charset UTF-8;         /* Invalide, sans ' ou ", le jeu de caractères n'est pas une chaîne CSS ({{cssxref("&lt;string&gt;")}}) */
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'syndata.html#x57', '@charset')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.charset")}}</p>
diff --git a/files/fr/web/css/@counter-style/additive-symbols/index.html b/files/fr/web/css/@counter-style/additive-symbols/index.html
new file mode 100644
index 0000000000..51c9cb0094
--- /dev/null
+++ b/files/fr/web/css/@counter-style/additive-symbols/index.html
@@ -0,0 +1,87 @@
+---
+title: additive-symbols
+slug: Web/CSS/@counter-style/additive-symbols
+tags:
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@counter-style/additive-symbols
+---
+<div>{{CSSRef}}</div>
+
+<p>Le descripteur <strong><code>additive-symbols</code></strong>, utilisé pour la règle @ {{cssxref("@counter-style")}} est semblable au descripteur {{cssxref('symbols')}} et permet à l'utilisateur de définir les symboles qui doivent être utilisé pour représenter le compteur lorsque le descripteur {{cssxref('system')}} prend la valeur <code>additive</code>. Le descripteur <code>additive-symbols</code> définit des <em>tuples additifs</em>. Un tuple additif est une paire contenant un symbole et un entier positif qui représente un poids. Le système additif est utilisé afin de construire des systèmes <a href="https://fr.wikipedia.org/wiki/Notation_additive_(num%C3%A9ration)">de notation additive</a> tels que les nombres romains.</p>
+
+<pre class="brush: css  no-line-numbers">additive-symbols: 3 "0";
+additive-symbols: 3 "0", 2 "\2E\20";
+additive-symbols: 3 "0", 2 url(symbol.png);
+</pre>
+
+<p>Lorsque la valeur du descripteur <code>system</code> est <code>cyclic</code>, <code>numeric</code>, <code>alphabetic</code>, <code>symbolic</code> ou <code>fixed</code>, c'est le descripteur <code>symbols</code> qui est utilisé à la place de <code>additive-symbols</code> afin de définir les symboles utilisés pour le compteur.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@counter-style additive-symbols-example {
+  system: additive;
+  additive-symbols: V 5, IV 4, I 1;
+}
+.exemple {
+  list-style: additive-symbols-example;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul class="exemple"&gt;
+  &lt;li&gt;Un&lt;/li&gt;
+  &lt;li&gt;Deux&lt;/li&gt;
+  &lt;li&gt;Trois&lt;/li&gt;
+  &lt;li&gt;Quatre&lt;/li&gt;
+  &lt;li&gt;Cinq&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Counter Styles', '#counter-style-symbols', 'additive-symbols')}}</td>
+   <td>{{Spec2('CSS3 Counter Styles')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.counter-style.additive-symbols")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("list-style")}},</li>
+ <li>{{cssxref("list-style-image")}},</li>
+ <li>{{cssxref("list-style-position")}}</li>
+ <li>{{cssxref("symbols", "symbols()")}} : la notation fonctionnelle qui permet de créer des styles de compteur anonymes.</li>
+</ul>
diff --git a/files/fr/web/css/@counter-style/fallback/index.html b/files/fr/web/css/@counter-style/fallback/index.html
new file mode 100644
index 0000000000..cf00348402
--- /dev/null
+++ b/files/fr/web/css/@counter-style/fallback/index.html
@@ -0,0 +1,90 @@
+---
+title: fallback
+slug: Web/CSS/@counter-style/fallback
+tags:
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@counter-style/fallback
+---
+<div>{{CSSRef}}</div>
+
+<p>Le descripteur <strong><code>fallback</code></strong>, associé à la règle @ {{cssxref("@counter-style")}} est utilisé afin d'indiquer un style de secours au cas où le style courant ne permet pas de créer une représentation pour le marqueur du compteur pour une valeur donnée. Si le style de secours indiqué ne le permet pas non plus, ce sera le style de secours du style de secours qui sera utilisé et ainsi de suite. Si un style de secours valide n'est pas indiqué, ce sera la valeur <code>decimal</code> qui sera utilisée. Les scénarios pour lesquels ce style de secours est utilisé sont :</p>
+
+<ul>
+ <li>Lorsque le descripteur {{cssxref('range')}} est utilisé, le style de secours est utilisé pour représenter les valeurs situées en dehors de l'intervalle.</li>
+ <li>Lorsque le descripteur {{cssxref('system')}} vaut <code>fixed</code> et qu'il n'y a pas suffisamment de symboles pour couvrir l'ensemble des éléments de la liste, le style de secours est utilisé pour le reste des éléments de la liste.</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs avec un mot-clé */
+fallback: lower-alpha;
+fallback: custom-gangnam-style;
+</pre>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@counter-style fallback-example {
+  system: fixed; symbols: "\24B6" "\24B7" "\24B8";
+  fallback: upper-alpha;
+}
+.exemple {
+  list-style: fallback-example;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html" id="htmlOutput">&lt;ul class="exemple"&gt;
+  &lt;li&gt;Un&lt;/li&gt;
+  &lt;li&gt;Deux&lt;/li&gt;
+  &lt;li&gt;Trois&lt;/li&gt;
+  &lt;li&gt;Quatre&lt;/li&gt;
+  &lt;li&gt;Cinq&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Counter Styles', '#counter-style-fallback', 'fallback')}}</td>
+   <td>{{Spec2('CSS3 Counter Styles')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.counter-style.fallback")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("list-style")}},</li>
+ <li>{{cssxref("list-style-image")}},</li>
+ <li>{{cssxref("list-style-position")}},</li>
+ <li>{{cssxref("symbols", "symbols()")}}, la notation fonctionnelle qui permet de créer des styles de compteur anonymes.</li>
+</ul>
diff --git a/files/fr/web/css/@counter-style/index.html b/files/fr/web/css/@counter-style/index.html
new file mode 100644
index 0000000000..12dd1653c3
--- /dev/null
+++ b/files/fr/web/css/@counter-style/index.html
@@ -0,0 +1,171 @@
+---
+title: '@counter-style'
+slug: Web/CSS/@counter-style
+tags:
+  - CSS
+  - Reference
+  - Règle @
+translation_of: Web/CSS/@counter-style
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Règles_@">règle @</a> CSS<strong> <code>@counter-style</code></strong> permet aux auteurs de définir des styles de compteurs qui ne font pas partie de l'ensemble des styles natifs prédéfinis. Une règle <code>@counter-style</code> explique comment convertir la valeur d'un compteur en une chaîne de caractères correspondantes.</p>
+
+<pre class="brush: css no-line-numbers">@counter-style thumbs {
+  system: cyclic;
+  symbols: "\1F44D";
+  suffix: " ";
+}
+
+ul {
+   list-style: thumbs;
+}</pre>
+
+<p>La version initiale de CSS définit un ensemble de compteurs qui peuvent être utilisés pour mettre en forme les listes. Malgré l'ajout de nouveaux styles au fur et à mesure, cette approche s'est retrouvée limitée pour couvrir tous les besoins liés à la typographie. La règle <code>@counter-style</code> permet donc aux auteurs de définir librement d'autres styles si les styles prédéfinis ne conviennent pas.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Descripteurs">Descripteurs</h3>
+
+<p>Chaque <code>@counter-style</code> est identifié par un nom et possède un ensemble de descripteurs.</p>
+
+<dl>
+ <dt>{{cssxref("@counter-style/system", "system")}}</dt>
+ <dd>Ce descripteur indique l'algorithme à utiliser pour convertir les valeurs entières du compteur en des chaînes de caractères correspondantes.</dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("@counter-style/negative", "negative")}}</dt>
+ <dd>Ce descripteur permet d'indiquer si le symbole du compteur doit être préfixé ou suffixé si la valeur est négative.</dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("@counter-style/prefix", "prefix")}}</dt>
+ <dd>Ce descripteur indique un symbole qui doit être utilisé comme préfixe pour le compteur. Les préfixes sont ajoutés à la fin de la représentation et apparaissent avant le signe négatif.</dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("@counter-style/suffix", "suffix")}}</dt>
+ <dd>Ce descripteur indique un symbole qui doit être utilisé comme suffixe pour le compteur. Comme pour les préfixes, les suffixes sont ajoutés à la fin de la représentation.</dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("@counter-style/range", "range")}}</dt>
+ <dd>Ce descripteur indique l'intervalle de valeur pour lequel le style du compteur peut s'appliquer. Pour les valeurs du compteur en dehors de cet intervalle, le style utilisé sera le style de secours.</dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("@counter-style/pad", "pad")}}</dt>
+ <dd>Ce descripteur est utilisé lorsqu'il faut que la représentation du marqueur ait une longueur minimale. Ainsi, s'il faut que le compteur mesure deux caractères (ex. 01, 02, 03, 04 etc), on utilisera ce descripteur. Pour les valeurs dont la taille est plus grande que celle indiquée dans ce descripteur, le marqueur est construit normalement.</dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("@counter-style/fallback", "fallback")}}</dt>
+ <dd>Ce descripteur définit le système en cas de secours (si le système définit via la règle @ ne permet pas de construire le marqueur ou si la valeur du compteur est en dehors de l'intervalle défini). Si le système indiqué en secours échoue également, ce sera alors le système de secours de secours qui sera utilisé et ainsi de suite si nécessaire. Si besoin, le style décimal sera utilisé en fin de chaîne.</dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("@counter-style/symbols", "symbols")}}</dt>
+ <dd>Ce descripteur définit les symboles qui doivent être utilisés pour représenter le marqueur. Les symboles peuvent contenir des chaînes de caractères, des images ou des identifiants. L'utilisation des symboles et leur combinaison pour représenter le marqueur dépend de l'algorithme indiqué via le descripteur <code>system</code>. Ainsi, si <code>system</code> vaut <code>fixed</code>, chacun des N symboles définis dans le descripteur sera utilisé pour représenter les N premiers symboles. Une fois l'ensemble épuisé, le style de secours sera utilisé pour le reste de la liste.<br>
+ <br>
+ Cet exemple de règle <code>@counter-style</code> utilise des images plutôt que des caractères. Attention, l'utilisation d'image pour les symboles est une fonctionnalité à risque en termes de conservation dans la spécification et n'est implémentée par aucun navigateur.<br>
+
+ <pre class="brush: css">@counter-style winners-list {
+  system: fixed;
+  symbols: url(gold-medal.svg) url(silver-medal.svg) url(bronze-medal.svg);
+  suffix: " ";
+}</pre>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("@counter-style/additive-symbols", "additive-symbols")}}</dt>
+ <dd>Certains symboles définis via le descripteurs <code>symbols</code> sont utilisés par la plupart des algorithmes. Certains systèmes dits « additifs » s'appuient sur des <em>tuples additifs</em> décrit avec ce descripteur. Chaque tuple additif se compose d'un symbole de compteur et d'un poids entier positif. Les tuples additifs doivent être définis dans l'ordre décroissant de leurs poids.</dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("@counter-style/speak-as", "speak-as")}}</dt>
+ <dd>Ce descripteur indique la façon dont le compteur peut être prononcé par un lecteur d'écran. Ainsi, la valeur du symbole peut être lue comme un nombre ou comme un alphabet ou comme des sons fournis.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@counter-style circled-alpha {
+  system: fixed;
+  symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
+  suffix: " ";
+}</pre>
+
+<pre class="brush: css">.exemple {
+   list-style: circled-alpha;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul class="exemple"&gt;
+  &lt;li&gt;Un&lt;/li&gt;
+  &lt;li&gt;Deux&lt;/li&gt;
+  &lt;li&gt;Trois&lt;/li&gt;
+  &lt;li&gt;Quatre&lt;/li&gt;
+  &lt;li&gt;Cinq&lt;/li&gt;
+  &lt;li&gt;Six&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> Une page d'exemple avec plus de variables est disponible ici : <a href="https://mdn.github.io/css-examples/counter-style-demo/">https://mdn.github.io/css-examples/counter-style-demo/</a>.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Counter Styles', '#the-counter-style-rule', 'counter-style')}}</td>
+   <td>{{Spec2('CSS3 Counter Styles')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.counter-style")}}</p>
+
+<h3 id="Notes_relatives_à_Quantum">Notes relatives à Quantum</h3>
+
+<ul>
+ <li>Gecko permettait d'utiliser <code>none</code> comme valeur pour les descripteurs <code>system</code> et <code>fallback</code> de <code>@counter-style</code> alors que ce devrait être invalide selon la spécification. Le nouveau moteur CSS de Firefox, Quantum CSS (aussi appelé <a class="external external-icon" href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, prévu pour Firefox 57) a résolu ce bug ({{bug(1377414)}}).</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("list-style")}}</li>
+ <li>{{cssxref("list-style-image")}}</li>
+ <li>{{cssxref("list-style-position")}}</li>
+ <li>{{cssxref("list-style-type")}}</li>
+ <li>{{cssxref("symbols", "symbols()")}} : la notation fonctionnelle qui permet de créer des styles de compteur anonymes</li>
+ <li>Les fonctions CSS {{Cssxref("counter")}} et {{Cssxref("counters")}}</li>
+ <li><a href="https://mdn.github.io/css-examples/counter-style-demo/">Démonstration pour les styles de compteur</a> (<a href="https://github.com/mdn/css-examples/tree/master/counter-style-demo">code</a>)</li>
+</ul>
diff --git a/files/fr/web/css/@counter-style/negative/index.html b/files/fr/web/css/@counter-style/negative/index.html
new file mode 100644
index 0000000000..375fafa8fb
--- /dev/null
+++ b/files/fr/web/css/@counter-style/negative/index.html
@@ -0,0 +1,99 @@
+---
+title: negative
+slug: Web/CSS/@counter-style/negative
+tags:
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@counter-style/negative
+---
+<div>{{CSSRef}}</div>
+
+<p>Le descripteur <strong><code>negative</code></strong>, associé à la règle @ {{cssxref("@counter-style")}}, permet de définir la représentation du compteur lorsque la valeur est négative.</p>
+
+<pre class="brush: css no-line-numbers">/* Valeurs représentant les symboles */
+negative: "-";       /* Préfixe '-' si la valeur est négative */
+negative: "(" ")";   /* Entoure la valeur avec '(' et ')' si elle est négative */
+</pre>
+
+<p>Si la valeur du compteur est négative, le symbole fourni par le descripteur sera utilisé comme préfixe à la représentation du compteur. Un deuxième symbole peut être indiqué et est alors utilisé comme suffixe. Le descripteur <code>negative</code> n'a d'effet que si la valeur du descripteur <code>system</code> est <code>symbolic</code>, <code>alphabetic</code>, <code>numeric</code>, <code>additive</code> ou <code>extends</code> et si le compteur personnalisé utilise des indices négatifs. Dans les autres cas, si le descripteur <code>negative</code> est fourni, il est ignoré.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt>Premier symbole</dt>
+ <dd>Le préfixe (type {{cssxref("&lt;symbol&gt;")}}) à ajouter à la représentation lorsque la valeur du compteur est négative.</dd>
+ <dt>Deuxième symbole {{optional_inline}}</dt>
+ <dd>Si cette valeur (type {{cssxref("&lt;symbol&gt;")}}) est présente, le symbole sera ajouté après la représentation du compteur lorsque sa valeur est négative.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@counter-style neg {
+  system: numeric;
+  symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
+  negative: "(-" ")";
+}
+.exemple {
+  list-style: neg;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul class="exemple" start="-3"&gt;
+  &lt;li&gt;Un&lt;/li&gt;
+  &lt;li&gt;Deux&lt;/li&gt;
+  &lt;li&gt;Trois&lt;/li&gt;
+  &lt;li&gt;Quatre&lt;/li&gt;
+  &lt;li&gt;Cinq&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Counter Styles', '#counter-style-system', 'system')}}</td>
+   <td>{{Spec2('CSS3 Counter Styles')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.counter-style.negative")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("list-style")}},</li>
+ <li>{{cssxref("list-style-image")}},</li>
+ <li>{{cssxref("list-style-position")}},</li>
+ <li>{{cssxref("symbols", "symbols()")}}, la notation fonctionnelle pour créer des styles de compteur anonymes.</li>
+</ul>
diff --git a/files/fr/web/css/@counter-style/pad/index.html b/files/fr/web/css/@counter-style/pad/index.html
new file mode 100644
index 0000000000..ce73abaeca
--- /dev/null
+++ b/files/fr/web/css/@counter-style/pad/index.html
@@ -0,0 +1,98 @@
+---
+title: pad
+slug: Web/CSS/@counter-style/pad
+tags:
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@counter-style/pad
+---
+<div>{{CSSRef}}</div>
+
+<p>Le descripteur <strong><code>pad</code></strong>, utilisé dans la règle @ {{cssxref("@counter-style")}} peut être utilisé pour que la représentation du marqueur pour le compteur ait une longueur minimale. Si la représentation du marqueur est plus courte que la longueur indiquée, le marqueur sera complété autant de fois que nécessaire avec le symbole indiqué. Les représentations du marqueur qui sont plus longues que la longueur minimale indiquée dans le descripteur sont construites normalement.</p>
+
+<p>Le descripteur <code>pad</code> utilise deux paramètres :</p>
+
+<ul>
+ <li>un entier indiquant la longueur minimale de la représentation du marqueur</li>
+ <li>Le symbole utilisé pour compléter la représentation du marqueur si nécessaire.</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">pad: 3 "0";
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;integer&gt; &amp;&amp; &lt;symbol&gt;</code></dt>
+ <dd>La composante <code>&lt;integer&gt;</code> indique la longueur minimale du marqueur. La valeur doit être positive. Si la représentation du marqueur est plus courte, elle sera complétée avec la valeur indiquée par la composante <code>&lt;symbol&gt;</code>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@counter-style pad-example {
+  system: numeric;
+  symbols: "0" "1" "2" "3" "4" "5";
+  pad: 2 "0";
+}
+.exemple {
+  list-style: pad-example;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul class="exemple"&gt;
+  &lt;li&gt;Un&lt;/li&gt;
+  &lt;li&gt;Deux&lt;/li&gt;
+  &lt;li&gt;Trois&lt;/li&gt;
+  &lt;li&gt;Quatre&lt;/li&gt;
+  &lt;li&gt;Cinq&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Counter Styles', '#descdef-counter-style-pad', 'pad')}}</td>
+   <td>{{Spec2('CSS3 Counter Styles')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.counter-style.pad")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("list-style")}},</li>
+ <li>{{cssxref("list-style-image")}},</li>
+ <li>{{cssxref("list-style-position")}},</li>
+ <li>{{cssxref("symbols", "symbols()")}}, la notation fonctionnelle qui permet de créer des styles de compteur anonymes.</li>
+</ul>
diff --git a/files/fr/web/css/@counter-style/prefix/index.html b/files/fr/web/css/@counter-style/prefix/index.html
new file mode 100644
index 0000000000..25de1edd1c
--- /dev/null
+++ b/files/fr/web/css/@counter-style/prefix/index.html
@@ -0,0 +1,95 @@
+---
+title: prefix
+slug: Web/CSS/@counter-style/prefix
+tags:
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@counter-style/prefix
+---
+<div>{{CSSRef}}</div>
+
+<p>Le descripteur <code><strong>prefix</strong></code>, utilisé avec la règle @ {{cssxref("@counter-style")}}, permet de définir un symbole qui sera ajouté comme préfixe à la représentation du marqueur. Si aucune valeur n'est fournie, la valeur utilisée par défaut sera la chaîne de caractères vide.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs de symbole */
+prefix: "»";
+prefix: "Page";
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;symbol&gt;</code></dt>
+ <dd>Définit le symbole à utilisé comme préfixe devant le marqueur du compteur de la liste. Cette valeur peut être une valeur de type {{cssxref("&lt;string&gt;")}}, {{cssxref("&lt;image&gt;")}} ou {{cssxref("&lt;custom-ident&gt;")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@counter-style chapitres {
+  system: numeric;
+  symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
+  prefix: 'Chapitre ';
+}
+
+.exemple {
+  list-style: chapitres;
+  padding-left: 15ch;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul class="exemple"&gt;
+  &lt;li&gt;Au fond du terrier&lt;/li&gt;
+  &lt;li&gt;La mare aux larmes&lt;/li&gt;
+  &lt;li&gt;La course cocasse&lt;/li&gt;
+  &lt;li&gt;L'habitation du lapin blanc&lt;/li&gt;
+  &lt;li&gt;Conseils d'une chenille&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Counter Styles', '#descdef-counter-style-prefix', 'prefix')}}</td>
+   <td>{{Spec2('CSS3 Counter Styles')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.counter-style.prefix")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("list-style")}},</li>
+ <li>{{cssxref("list-style-image")}},</li>
+ <li>{{cssxref("list-style-position")}},</li>
+ <li>{{cssxref("symbols", "symbols()")}}, la notation fonctionnelle qui permet de créer des styles de compteur anonymes.</li>
+</ul>
diff --git a/files/fr/web/css/@counter-style/range/index.html b/files/fr/web/css/@counter-style/range/index.html
new file mode 100644
index 0000000000..92043910dc
--- /dev/null
+++ b/files/fr/web/css/@counter-style/range/index.html
@@ -0,0 +1,122 @@
+---
+title: range
+slug: Web/CSS/@counter-style/range
+tags:
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@counter-style/range
+---
+<div>{{CSSRef}}</div>
+
+<p>Le descripteur <code><strong>range</strong></code>, associé à la règle @ {{cssxref("@counter-style")}}, permet de définir l'intervalle de valeurs pris en compte par le compteur personnalisé. Si la valeur du compteur de la liste est en dehors de cet intervalle, ce sera la mise en forme de secours qui sera utilisée pour représenter le marqueur du compteur. La valeur de <code>range</code> peut être <code>auto</code> ou une liste de majorants/minorants, séparés par des virgules.</p>
+
+<p>Si <code>range</code> vaut <code>auto</code> :</p>
+
+<ul>
+ <li>Lorsque le descripteur <code>system</code> vaut <code>cyclic</code>, <code>numeric</code> ou <code>fixed</code>, l'intervalle considéré sera entre moins l'infini et plus l'infini.</li>
+ <li>Si <code>system</code> vaut <code>alphabetic</code> ou <code>symbolic</code>, l'intervalle considéré s'étendra entre 1 et l'infini.</li>
+ <li>Si <code>system</code> vaut <code>additive</code>, l'intervalle considéré ira de 0 à l'infini.</li>
+ <li>Enfin, lorsque <code>system</code> vaut <code>extends</code>, l'intervalle correspond à ce qui est produit par le système étendu avec cette valeur.</li>
+</ul>
+
+<p>Si <code>range</code> est défini par des entiers, on peut utiliser le mot-clé <code>infinite</code> pour indiquer l'infini. Lorsque <code>infinite</code> est indiqué comme la première valeur d'un intervalle, il est interprété comme l'infini négatif, sinon comme l'infini positif.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css">/* Valeur avec un mot-clé */
+range: auto;
+
+/* Valeurs encadrant un intervalle */
+range: 2 5;
+range: infinite 10;
+range: 6 infinite;
+range: infinite infinite;
+
+/* Valeurs indiquant plusieurs intervalles */
+range: 2 5, 8 10;
+range: infinite 6, 10 infinite;
+</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>L'intervalle dépend du système choisi pour le compteur comme indiqué ci-avant.</dd>
+ <dt><code>[ [ | infinite ]{2} ]#</code></dt>
+ <dd>Une liste d'intervalles séparées par des virgule. Pour chaque intervalle, la première valeur représente le minorant de l'intervalle inférieure et la deuxième représente le majorant. L'intervalle est un segment et inclue donc le minorant et le majorant. Si le mot-clé <code>infinite</code> est utilisé en premier, il indique l'infini négatif comme borne inférieure et s'il est utilisé comme seconde valeur pour l'intervalle, il correspondra à l'infini positif (utilisé alors comme borne supérieure). L'intervalle sur lequel s'applique le compteur défini correspond à l'union des intervalles qui composent cette liste.</dd>
+ <dd>Si un minorant indiqué est supérieur à un majorant, le descripteur sera considéré comme invalide et sera ignoré.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@counter-style range-multi-example {
+  system: cyclic;
+  symbols: "\25A0" "\25A1";
+  range: 2 4, 7 9;
+}
+
+.exemple {
+  list-style: range-multi-example;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul class="exemple"&gt;
+  &lt;li&gt;Un&lt;/li&gt;
+  &lt;li&gt;Deux&lt;/li&gt;
+  &lt;li&gt;Trois&lt;/li&gt;
+  &lt;li&gt;Quatre&lt;/li&gt;
+  &lt;li&gt;Cinq&lt;/li&gt;
+  &lt;li&gt;Six&lt;/li&gt;
+  &lt;li&gt;Sept&lt;/li&gt;
+  &lt;li&gt;Huit&lt;/li&gt;
+  &lt;li&gt;Neuf&lt;/li&gt;
+  &lt;li&gt;Dix&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<p>Résultat</p>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Counter Styles", "#counter-style-range", "range")}}</td>
+   <td>{{Spec2('CSS3 Counter Styles')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.counter-style.range")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("list-style")}},</li>
+ <li>{{cssxref("list-style-image")}},</li>
+ <li>{{cssxref("list-style-position")}},</li>
+ <li>{{cssxref("symbols", "symbols()")}}, la notation fonctionnelle qui permet de créer des styles de compteur anonymes.</li>
+</ul>
diff --git a/files/fr/web/css/@counter-style/speak-as/index.html b/files/fr/web/css/@counter-style/speak-as/index.html
new file mode 100644
index 0000000000..d3a7631b4e
--- /dev/null
+++ b/files/fr/web/css/@counter-style/speak-as/index.html
@@ -0,0 +1,129 @@
+---
+title: speak-as
+slug: Web/CSS/@counter-style/speak-as
+tags:
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@counter-style/speak-as
+---
+<div>{{CSSRef}}</div>
+
+<p>Le descripteur <strong><code>speak-as</code></strong>, rattaché à la règle @ {{cssxref("@counter-style")}}, permet d'indiquer la représentation sonore du compteur qui doit être utilisée par l'agent utilisateur si nécessaire. Ainsi, on peut utiliser ce descripteur pour que le compteur soit énoncé comme un nombre ou avec un signal audio particulier.</p>
+
+<p>Ce descripteur pourra prendre les valeurs <code>auto</code>, <code>bullets</code>, <code>numbers</code>, <code>words</code>, <code>spell-out</code> ou alors pourra pointer vers un autre style de compteur avec le nom de ce style.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs avec un mot-clé */
+speak-as: auto;
+speak-as: bullets;
+speak-as: numbers;
+speak-as: words;
+speak-as: spell-out;
+
+/* Nom d'un autre style @counter-style */
+speak-as: &lt;counter-style-name&gt;;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Dans ce cas, la valeur réelle de <code>speak-as</code> sera définie selon la valeur utilisée pour le descripteur {{cssxref("system")}} :
+ <ul>
+  <li>Si <code>system</code> vaut <code>alphabetic</code>, <code>speak-as</code> sera alors synonyme de <code>spell-out</code>.</li>
+  <li>Si <code>system</code> vaut <code>cyclic</code>, <code>speak-as</code> sera alors synonyme de <code>bullets</code>.</li>
+  <li>Si <code>system</code> vaut <code>extends</code>, la valeur de <code><em>speak-as</em></code> sera la même que celle correspondante à <code>auto</code> dans le style étendu.</li>
+  <li>Dans les autres cas, le comportement de <code>numbers</code> sera utilisé.</li>
+ </ul>
+ </dd>
+ <dt><code>bullets</code></dt>
+ <dd>Un morceau ou un signal sonore utilisé par l'agent utilisateur et qui représente la façon d'énoncer une liste non-ordonnée.</dd>
+ <dt><code>numbers</code></dt>
+ <dd>La valeur numérique du compteur sera énoncée dans la langue du document.</dd>
+ <dt><code>words</code></dt>
+ <dd>L'agent utilisateur génèrera une représentation normale du compteur et la lira comme un mot, dans la langue du document.</dd>
+ <dt><code>spell-out</code></dt>
+ <dd>L'agent utilisateur génèrera une représentation normale du compteur et l'énoncera en l'épelant. Si l'agent utilisateur ne sait pas comment prononcer une valeur du compteur, il la prononcera comme avec la valeur <code>numbers</code>.</dd>
+ <dt><code>&lt;counter-style-name&gt;</code></dt>
+ <dd>Si la valeur du descripteur est le nom d'un autre style de compteur, ce sera la valeur de <code>speak-as</code> de ce style qui sera utilisée. Si la style visé n'existe pas, cette valeur sera alors synonyme de <code>auto</code>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@counter-style speak-as-exemple {
+  system: fixed;
+  symbols:     ;
+  suffix: " ";
+  speak-as: numbers;
+}
+
+
+.exemple {
+  list-style: speak-as-exemple;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul class="exemple"&gt;
+  &lt;li&gt;Un&lt;/li&gt;
+  &lt;li&gt;Deux&lt;/li&gt;
+  &lt;li&gt;Trois&lt;/li&gt;
+  &lt;li&gt;Quatre&lt;/li&gt;
+  &lt;li&gt;Cinq&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>La prise en charge de cette fonctionnalité par les outils d'assistance est actuellement très restreinte. Veillez à ne pas reposer sur cette propriété si vous souhaitez transmettre des informations majeures quant au but de la page.</p>
+
+<ul>
+ <li><a href="https://css-tricks.com/lets-talk-speech-css/">Let's Talk About Speech CSS, CSS Tricks</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Counter Styles', '#counter-style-speak-as', 'speak-as')}}</td>
+   <td>{{Spec2('CSS3 Counter Styles')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.counter-style.speak-as")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("list-style")}},</li>
+ <li>{{cssxref("list-style-image")}},</li>
+ <li>{{cssxref("list-style-position")}},</li>
+ <li>{{cssxref("symbols", "symbols()")}} : la notation fonctionnelle qui permet de créer des styles de compteur anonymes.</li>
+</ul>
diff --git a/files/fr/web/css/@counter-style/suffix/index.html b/files/fr/web/css/@counter-style/suffix/index.html
new file mode 100644
index 0000000000..a39b699c0d
--- /dev/null
+++ b/files/fr/web/css/@counter-style/suffix/index.html
@@ -0,0 +1,93 @@
+---
+title: suffix
+slug: Web/CSS/@counter-style/suffix
+tags:
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@counter-style/suffix
+---
+<div>{{CSSRef}}</div>
+
+<p>Le descripteur <code><strong>suffix</strong></code>, utilisé avec la règle @ {{cssxref("@counter-style")}}, afin de définir un symbole qui pourra être utilisé comme suffixe pour la représentation du marqueur. Le symbole en question pourra être une chaîne de caractères, une image ou un identifiant CSS. La valeur par défaut de ce descripteur sera <code>"\2E\20"</code> (un point « . » suivi par un espace).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Une valeur de type &lt;symbol&gt; */
+suffix: "";
+suffix: ") ";
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<dl>
+ <dt><code>&lt;symbol&gt;</code></dt>
+ <dd>Un symbole qui sera ajouté comme suffixe à la représentation du marqueur. Cette valeur peut être une valeur de type {{cssxref("&lt;string&gt;")}}, {{cssxref("&lt;image&gt;")}} ou {{cssxref("&lt;custom-ident&gt;")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@counter-style options {
+  system: fixed;
+  symbols: A B C D;
+  suffix: ") ";
+}
+
+.exemple {
+  list-style: options;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul class="exemple"&gt;
+  &lt;li&gt;Un&lt;/li&gt;
+  &lt;li&gt;Deux&lt;/li&gt;
+  &lt;li&gt;Trois&lt;/li&gt;
+  &lt;li&gt;Autre&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Counter Styles', '#descdef-counter-style-suffix', 'suffix')}}</td>
+   <td>{{Spec2('CSS3 Counter Styles')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.counter-style.suffix")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("list-style")}},</li>
+ <li>{{cssxref("list-style-image")}},</li>
+ <li>{{cssxref("list-style-position")}},</li>
+ <li>{{cssxref("symbols", "symbols()")}}, la notation fonctionnelle utilisée pour créer des styles de compteur anonymes.</li>
+</ul>
diff --git a/files/fr/web/css/@counter-style/symbols/index.html b/files/fr/web/css/@counter-style/symbols/index.html
new file mode 100644
index 0000000000..2440d1a430
--- /dev/null
+++ b/files/fr/web/css/@counter-style/symbols/index.html
@@ -0,0 +1,108 @@
+---
+title: symbols
+slug: Web/CSS/@counter-style/symbols
+tags:
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@counter-style/symbols
+---
+<div>{{CSSRef}}</div>
+
+<p>Le descripteur <strong><code>symbols</code></strong>, rattaché à la règle @ {{cssxref("@counter-style")}}, est utilisé pour définir les symboles à utiliser pour construire les représentations du compteur. Un symbole peut être une chaîne de caractères, une image ou un identifiant.</p>
+
+<pre class="brush: css no-line-numbers">symbols: A B C D E;
+symbols: "\24B6" "\24B7" "\24B8" D E;
+symbols: "0" "1" "2" "4" "5" "6" "7" "8" "9";
+symbols: url('premier.svg') url('deuxieme.svg') url('troisieme.svg');
+symbols: indic-numbers;
+</pre>
+
+<p>Le descripteur <code>symbols</code> doit être défini lorsque la valeur du descripteur {{cssxref('system')}} vaut <code>cyclic</code>, <code>numeric</code>, <code>alphabetic</code>, <code>symbolic</code> ou <code>fixed</code>. Lorsque <code>system</code> vaut <code>additive</code>, ce sera le descripteur {{cssxref('additive-symbols')}} qui sera utilisé afin de définir les symboles.</p>
+
+<ul>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<ul>
+ <li>Des chaînes de caractères ({{cssxref("&lt;string&gt;")}}) délimitées par des quotes simples ou doubles. La barre oblique inversée (\) peut être utilisée afin d'échapper les caractères spéciaux. Ainsi, on peut utiliser des caractères Unicode de cette façon <code>"\24B6"</code>.</li>
+ <li>Des images ({{cssxref("&lt;image&gt;")}}) en utilisant la notation fonctionnelle <code>url(chemin-vers-image.png)</code>. <strong>Attention : cette fonctionnalité (l'utilisation d'image) est à risque en termes d'implémentation et de conservation dans les spécifications et n'est implémentée par aucun navigateur actuellement.</strong></li>
+ <li>Des identifiants ({{cssxref("&lt;custom-ident&gt;")}})</li>
+</ul>
+
+<dl>
+ <dt><code>&lt;symbol&gt;</code></dt>
+ <dd>Représente le symbole à utiliser pour le système de comptage. La valeur du descripteur <code>symbols</code> peut être :</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@counter-style symbols-exemple {
+  system: fixed;
+  symbols: A "1" "\24B7" D E;
+}
+
+.exemple {
+  list-style: symbols-exemple;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul class="exemple"&gt;
+  &lt;li&gt;Un&lt;/li&gt;
+  &lt;li&gt;Deux&lt;/li&gt;
+  &lt;li&gt;Trois&lt;/li&gt;
+  &lt;li&gt;Quatre&lt;/li&gt;
+  &lt;li&gt;Cinq&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Counter Styles', '#counter-style-symbols', 'symbols')}}</td>
+   <td>{{Spec2('CSS3 Counter Styles')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.counter-style.symbols")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("@counter-style")}},</li>
+ <li>{{cssxref("list-style")}},</li>
+ <li>{{cssxref("list-style-image")}},</li>
+ <li>{{cssxref("list-style-position")}},</li>
+ <li>{{cssxref("symbols", "symbols()")}}, la notation fonctionnelle utilisée pour créer des styles de compteur anonymes,</li>
+ <li>{{cssxref("url()", "url()")}}.</li>
+</ul>
diff --git a/files/fr/web/css/@counter-style/system/index.html b/files/fr/web/css/@counter-style/system/index.html
new file mode 100644
index 0000000000..378154364d
--- /dev/null
+++ b/files/fr/web/css/@counter-style/system/index.html
@@ -0,0 +1,340 @@
+---
+title: system
+slug: Web/CSS/@counter-style/system
+tags:
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@counter-style/system
+---
+<div>{{CSSRef}}</div>
+
+<p>La descripteur <strong><code>system</code></strong>, utilisé avec <a href="/fr/docs/Web/CSS/R%C3%A8gles_@">la règle @</a> {{cssxref("@counter-style")}}, permet de définir l'algorithme utilisé pour convertir la valeur entière d'un compteur en une chaîne de caractères.</p>
+
+<pre class="brush: css">/* Valeurs avec un mot-clé */
+system: cyclic;
+system: numeric;
+system: alphabetic;
+system: symbolic;
+system: additive;
+system: fixed;
+
+/* Combinaison de valeurs */
+system: fixed 3;
+system: extends decimal;
+</pre>
+
+<p>Si l'algorithme défini dans ce descripteur est incapable de construire la chaîne de caractères pour une valeur donnée, ce sera le système de secours qui sera utilisé ({{cssxref("fallback")}}).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Ce descripteur peut prendre l'une de ces trois formes :</p>
+
+<ul>
+ <li>Un des mots-clés parmi <code>cyclic</code>, <code>numeric</code>, <code>alphabetic</code>, <code>symbolic</code>, <code>additive</code>, <code>fixed</code></li>
+ <li>Le mot-clé <code>fixed</code> avec un entier</li>
+ <li>Le mot-clé <code>extends</code> avec un nom correspondant à un {{cssxref("@counter-style")}}.</li>
+</ul>
+
+<dl>
+ <dt><code>cyclic</code></dt>
+ <dd>Le système itère et boucle parmi la liste des symboles fournis. Une fois que la fin de la liste est atteinte, le système reprend au début de la liste. Ce système est pertinent lorsqu'on a un seul symbole ou une liste non numérotée avec des puces. Afin que le style du compteur soit valide, il faut au moins définir un symbole via le descripteur {{cssxref("symbols")}}.</dd>
+ <dt><code>fixed</code></dt>
+ <dd>Cette valeur permet de définir un ensemble fini de symboles. Une fois que le système a utilisé les différents symboles, il poursuivra en utilisant le système de secours. Afin que le style du compteur soit valide, il faut qu'au moins un symbole soit défini avec le descripteur <code>symbols</code>. On peut éventuellement ajouter un entier (valeur {{cssxref("integer")}}) après le système et qui définit la valeur du premier symbole. La valeur par défaut de ce paramètre (s'il est absent) est <code>1</code>.</dd>
+ <dt><code>symbolic</code></dt>
+ <dd>Le système itère sur la liste des symboles et à chaque boucle, on double, triple, etc. la représentation. Ainsi, si les symboles fournis sont ◽ et ◾, au cycle suivant, on aura ◽◽ puis ◾◾, ensuite ◽◽◽ et ◾◾◾ et ainsi de suite. Afin que le style du compteur soit valide, il faut définir au moins un symbole avec le descripteur <code>symbols</code>. Ce système de compteur ne fonctionne que pour les valeurs positives.</dd>
+ <dt><code>alphabetic</code></dt>
+ <dd>Le système interprète les symboles comme les chiffres d'un système de numérotation alphabétique. Ainsi, si les lettres <code>a</code> à <code>z</code> sont définies comme symbole dans un style de compteur dont le système est <code>alphabetic</code>, les 26 premières représentations du compteur seront <code>a</code>, <code>b</code>, etc. jusqu'à <code>z</code> (jusqu'ici, le comportement est identique à celui obtenu grâce à <code>symbolic</code>) mais ensuite, le système poursuivra avec <code>aa</code>, <code>ab</code>, <code>ac</code>, etc.<br>
+ <br>
+ Pour que le style du compteur soit valide, il faut qu'au moins deux symboles soient fournis. Le premier symbole est interprété comme <code>1</code>, le suivant comme <code>2</code> et ainsi de suite. Ce système ne fonctionne que pour les valeurs positives.</dd>
+ <dt><code>numeric</code></dt>
+ <dd>Les symboles sont interprétés comme les chiffres d'un <a href="https://fr.wikipedia.org/wiki/Notation_positionnelle">système de notation positionnelle</a>. Ce système est très proche de celui qu'on peut obtenir avec <code>alphabetic</code> sauf que, pour ce dernier, le premier symbole fourni par <code>symbols</code> sera interprété comme <code>1</code>, le suivant  comme <code>2</code> et ainsi de suite alors que pour <code>numeric</code>, le premier symbole est interprété comme 0, le suivant comme <code>1</code>, puis <code>2</code> etc.<br>
+ <br>
+ Pour que le style de compteur soit valide, il faut qu'au moins deux symboles soient définis avec <code>symbols</code>. Le premier symbole qui est fourni sera interprété comme <code>0</code>. Comme on peut le voir dans l'exemple ci-après, si on utilise les chiffres de <code>0</code> à <code>9</code> comme symboles, on obtiendra le même résultat qu'avec le système décimal.</dd>
+ <dt><code>additive</code></dt>
+ <dd>Ce système peut être utilisé pour représenter <a href="https://fr.wikipedia.org/wiki/Notation_additive_(num%C3%A9ration)">des systèmes de numérotations additives</a> telles que les chiffres romains qui, plutôt que de réutiliser des chiffres pour obtenir différentes valeurs, définissent des chiffres supplémentaires pour représenter de grandes valeurs. La valeur d'un nombre représenté dans ce sytème est obtenue en sommant les différents chiffres qui le représentent.<br>
+ <br>
+ Le descripteur supplémentaire {{cssxref("additive-symbols")}} doit être utilisé avec au moins un tuple additif pour que le style de compteur soit considéré comme valide. Un tuple additif est composé d'un symbole de compteur et d'un poids entier positif. Les tuples additifs doivent être définis dans l'ordre décroissant de leurs poids afin que le système soit valide.</dd>
+ <dd>
+ <p>On voit dans l'exemple ci-après que <code>range</code> est utilisé afin de définir l'intervalle de validité. Une fois en dehors de cet intervalle, on utilisera la représentation classique avec <code>decimal</code> (le style de secours). Si on veut utiliser les chiffres romains, on pourra utiliser les valeurs de style prédéfinies comme <code>upper-roman</code> ou <code>lower-roman</code> afin d'éviter de réinventer la roue.</p>
+ </dd>
+ <dt><code>extends</code></dt>
+ <dd>Ce mot-clé permet aux auteurs d'utiliser l'algorithme d'un autre style de compteur et de modifier ses autres caractéristiques. Si une règle d'un style de compteur utilise le système <code>extends</code> et que certains de ces descripteurs ne font pas définis, leurs valeurs seront prises depuis le style de compteur indiqué. Si le nom du style référencé n'existe pas, le style de secours (décimal) sera utilisé.<br>
+ <br>
+ Pour que le style de compteur soit valide, il ne doit pas contenir de descripteur <code>symbols</code> ou <code>additive-symbols</code>. Si, selon les différents styles de compteur, on a un cycle de référence (A qui pointe vers B qui pointe vers C qui pointe vers A par exemple), l'agent utilisateur considèrera que tous les styles étendent le style décimal.</dd>
+ <dd>Dans l'exemple final, le style de compteur utiliser les valeurs du système de compteur <code>lower-alpha</code> mais retire le point comme suffixe et entour les caractères entre parenthèses (pour obtenir <code>(a)</code> <code>(b)</code> etc).</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_cyclic">Utilisation de <code>cyclic</code></h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">@counter-style fisheye {
+  system: cyclic;
+  symbols: ◉;
+  suffix: " ";
+}
+
+.list {
+    list-style: fisheye;
+}</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;ul class="list"&gt;
+  &lt;li&gt;Un&lt;/li&gt;
+  &lt;li&gt;Deux&lt;/li&gt;
+  &lt;li&gt;Trois&lt;/li&gt;
+  &lt;li&gt;Quatre&lt;/li&gt;
+  &lt;li&gt;Cinq&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Utilisation_de_cyclic')}}</p>
+
+<h3 id="Utilisation_de_fixed">Utilisation de <code>fixed</code></h3>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">@counter-style circled-digits {
+  system: fixed;
+  symbols: ➀ ➁ ➂;
+  suffix: ' ';
+}
+
+.list {
+  list-style: circled-digits;
+}
+</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;ul class="list"&gt;
+  &lt;li&gt;Un&lt;/li&gt;
+  &lt;li&gt;Deux&lt;/li&gt;
+  &lt;li&gt;Trois&lt;/li&gt;
+  &lt;li&gt;Quatre&lt;/li&gt;
+  &lt;li&gt;Cinq&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample('Utilisation_de_fixed')}}</p>
+
+<h3 id="Utilisation_de_symbolic">Utilisation de <code>symbolic</code></h3>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css">@counter-style abc {
+  system: symbolic;
+  symbols: a b c;
+  suffix: ". ";
+}
+
+.list {
+  list-style: abc;
+}
+</pre>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;ul class="list"&gt;
+  &lt;li&gt;Un&lt;/li&gt;
+  &lt;li&gt;Deux&lt;/li&gt;
+  &lt;li&gt;Trois&lt;/li&gt;
+  &lt;li&gt;Quatre&lt;/li&gt;
+  &lt;li&gt;Cinq&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h4 id="Résultat_3">Résultat</h4>
+
+<p>{{EmbedLiveSample('Utilisation_de_symbolic')}}</p>
+
+<h3 id="Utilisation_de_alphabetic">Utilisation de <code>alphabetic</code></h3>
+
+<h4 id="CSS_4">CSS</h4>
+
+<pre class="brush: css">@counter-style abc {
+  system: alphabetic;
+  symbols: a b c;
+  suffix: ". ";
+}
+
+.list {
+  list-style: abc;
+}
+</pre>
+
+<h4 id="HTML_4">HTML</h4>
+
+<pre class="brush: html">&lt;ul class="list"&gt;
+  &lt;li&gt;Un&lt;/li&gt;
+  &lt;li&gt;Deux&lt;/li&gt;
+  &lt;li&gt;Trois&lt;/li&gt;
+  &lt;li&gt;Quatre&lt;/li&gt;
+  &lt;li&gt;Cinq&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h4 id="Résultat_4">Résultat</h4>
+
+<p>{{EmbedLiveSample('Utilisation_de_alphabetic')}}</p>
+
+<h3 id="Utilisation_de_numeric_avec_des_lettres">Utilisation de <code>numeric</code> avec des lettres</h3>
+
+<h4 id="CSS_5">CSS</h4>
+
+<pre class="brush: css">@counter-style abc {
+  system: numeric;
+  symbols: a b c;
+  suffix: ". ";
+}
+
+.list {
+  list-style: abc;
+}</pre>
+
+<h4 id="HTML_5">HTML</h4>
+
+<pre class="brush: html">&lt;ul class="list"&gt;
+  &lt;li&gt;Un&lt;/li&gt;
+  &lt;li&gt;Deux&lt;/li&gt;
+  &lt;li&gt;Trois&lt;/li&gt;
+  &lt;li&gt;Quatre&lt;/li&gt;
+  &lt;li&gt;Cinq&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h4 id="Résultat_5">Résultat</h4>
+
+<p>{{EmbedLiveSample('Utilisation_de_numeric_avec_des_lettres')}}</p>
+
+<h3 id="Utilisation_de_numeric_avec_des_chiffres">Utilisation de <code>numeric</code> avec des chiffres</h3>
+
+<h4 id="CSS_6">CSS</h4>
+
+<pre class="brush: css">@counter-style numbers {
+  system: numeric;
+  symbols: 0 1 2 3 4 5 6 7 8 9;
+  suffix: ". ";
+}
+
+.list {
+  list-style: numbers;
+}
+</pre>
+
+<h4 id="HTML_6">HTML</h4>
+
+<pre class="brush: html">&lt;ul class="list"&gt;
+  &lt;li&gt;Un&lt;/li&gt;
+  &lt;li&gt;Deux&lt;/li&gt;
+  &lt;li&gt;Trois&lt;/li&gt;
+  &lt;li&gt;Quatre&lt;/li&gt;
+  &lt;li&gt;Cinq&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<p>{{EmbedLiveSample("Utilisation_de_numeric_avec_des_chiffres")}}</p>
+
+<h3 id="Utilisation_de_additive">Utilisation de <code>additive</code></h3>
+
+<h4 id="CSS_7">CSS</h4>
+
+<pre class="brush: css">@counter-style upper-roman {
+  system: additive;
+  range: 1 3999;
+  additive-symbols: 1000 M, 900 CM, 500 D, 400 CD, 100 C, 90 XC, 50 L, 40 XL, 10 X, 9 IX, 5 V, 4 IV, 1 I;
+}
+
+.list {
+  list-style: upper-roman;
+}
+</pre>
+
+<h4 id="HTML_7">HTML</h4>
+
+<pre class="brush: html">&lt;ul class="list"&gt;
+  &lt;li&gt;Un&lt;/li&gt;
+  &lt;li&gt;Deux&lt;/li&gt;
+  &lt;li&gt;Trois&lt;/li&gt;
+  &lt;li&gt;Quatre&lt;/li&gt;
+  &lt;li&gt;Cinq&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h4 id="Résultat_6">Résultat</h4>
+
+<p>{{EmbedLiveSample('Utilisation_de_additive')}}</p>
+
+<h3 id="Combinaison_avec_extends">Combinaison avec <code>extends</code></h3>
+
+<h4 id="CSS_8">CSS</h4>
+
+<pre class="brush: css">@counter-style alpha-modified {
+  system: extends lower-alpha;
+  prefix: "(";
+  suffix: ") ";
+}
+
+.list {
+  list-style: alpha-modified;
+}
+</pre>
+
+<h4 id="HTML_8">HTML</h4>
+
+<pre class="brush: html">&lt;ul class="list"&gt;
+  &lt;li&gt;Un&lt;/li&gt;
+  &lt;li&gt;Deux&lt;/li&gt;
+  &lt;li&gt;Trois&lt;/li&gt;
+  &lt;li&gt;Quatre&lt;/li&gt;
+  &lt;li&gt;Cinq&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h4 id="Résultat_7">Résultat</h4>
+
+<p>{{EmbedLiveSample('Combinaison_avec_extends')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Counter Styles', '#counter-style-system', 'system')}}</td>
+   <td>{{Spec2('CSS3 Counter Styles')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.counter-style.system")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("list-style")}},</li>
+ <li>{{cssxref("list-style-image")}},</li>
+ <li>{{cssxref("list-style-position")}},</li>
+ <li>{{cssxref("symbols", "symbols()")}}, la notation fonctionnelle utilisée pour créer des styles de compteur anonymes.</li>
+</ul>
diff --git a/files/fr/web/css/@document/index.html b/files/fr/web/css/@document/index.html
new file mode 100644
index 0000000000..27549052b9
--- /dev/null
+++ b/files/fr/web/css/@document/index.html
@@ -0,0 +1,86 @@
+---
+title: '@document'
+slug: Web/CSS/@document
+tags:
+  - At-rule
+  - CSS
+  - Reference
+  - Règle @
+translation_of: Web/CSS/@document
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/R%C3%A8gles_@">règle @ CSS </a><strong><code>@document</code></strong> restreint les règles qu'elle contient en fonction de l'URL du document. Elle est principalement conçue pour les feuilles de style utilisateur, bien qu'elle puisse être également utilisée pour les feuilles de style d'auteur.</p>
+
+<pre class="brush: css no-line-numbers">@document url("https://www.example.com/") {
+  h1 {
+    color: green;
+  }
+}</pre>
+
+<ul>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Une règle <code>@document</code> peut définir une ou plusieurs fonctions de correspondance. Si l'une quelconque des règles s'applique à l'URL donnée, la règle prendra effet sur cette URL. Les fonctions disponibles sont :</p>
+
+<ul>
+ <li><code>url()</code>, qui établit une correspondance avec une URL exacte ;</li>
+ <li><code>url-prefix()</code>, qui établit une correspondance si l'URL du document commence par la valeur fournie ;</li>
+ <li><code>domain()</code>, qui établit une correspondance si l'URL du document se trouve sur le domaine indiqué (ou l'un de ses sous-domaines) ;</li>
+ <li><code>media-document()</code> qui caractérise le type de document : vidéo, image, plugin, tout ;</li>
+ <li><code>regexp()</code>, qui établit une correspondance avec si l'URL  du document vérifie une <a href="/fr-FR/docs/Web/JavaScript/Guide/Regular_Expressions">expression rationnelle</a>. L'expression doit correspondre à l'URL entière.</li>
+</ul>
+
+<p>Les valeurs fournies aux fonctions <code>url()</code>, <code>url-prefix()</code>, <code>media-document()</code> et <code>domain()</code> peuvent être éventuellement délimitées par des apostrophes, simples ou doubles. Les valeurs fournies à la fonction <code>regexp()</code> <em>doivent</em> être délimitées par des apostrophes.</p>
+
+<p>Les valeurs échappées fournies à la fonction <code>regexp()</code> doivent être en outre échappées pour le CSS. Par exemple, un <code>.</code> (point) correspond à n'importe quel caractère dans les expressions régulières. Pour établir une correspondance avec un point littéral, vous aurez d'abord besoin de l'échapper en utilisant les règles des expressions rationnelles (en <code>\.</code>), puis d'échapper cette chaîne en utilisant les règles CSS (en <code>\\.</code>).</p>
+
+<div class="note">
+<p><strong>Note :</strong> Il existe une version préfixée de cette propriété pour Mozilla : <code>@-moz-document</code>. Cette propriété a été restreinte aux feuilles de style utilisateur ou à celles de l'agent utilisateur à partir de Firefox 59 afin d'expérimenter une méthode de réduction des risques d'injections CSS (cf. {{bug(1035091)}}).</p>
+</div>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">@document url("http://www.w3.org/"),
+               url-prefix("http://www.w3.org/Style/"),
+               domain("mozilla.org"),
+               media-document("video"),
+               regexp("https:.*")
+{
+  /* Ces règles CSS s'appliquent à :
+     - la page "http://www.w3.org/"
+     - toute page dont l'URL commence par "http://www.w3.org/Style/"
+     - toute page dont l'hôte de l'URL est "mozilla.org"
+       ou finit par ".mozilla.org"
+     - toute vidéo
+     - toute page dont l'URL commence par "https:" */
+
+  /* Rendre ces pages vraiment laides */
+  body {
+    color: purple;
+    background: yellow;
+  }
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p><a href="https://www.w3.org/TR/css3-conditional/">Initialement</a> dans {{SpecName('CSS3 Conditional')}}, <code>@document</code> a <a href="http://www.w3.org/TR/2012/WD-css3-conditional-20121213/#changes">été repoussée</a> au niveau 4.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.document")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="http://lists.w3.org/Archives/Public/www-style/2004Aug/0135">Per-site user style sheet rules</a> sur la liste de diffusion www-style.</li>
+</ul>
diff --git a/files/fr/web/css/@font-face/font-display/index.html b/files/fr/web/css/@font-face/font-display/index.html
new file mode 100644
index 0000000000..f044ddbc3e
--- /dev/null
+++ b/files/fr/web/css/@font-face/font-display/index.html
@@ -0,0 +1,92 @@
+---
+title: font-display
+slug: Web/CSS/@font-face/font-display
+tags:
+  - CSS
+  - Descripteur
+  - Experimental
+  - Reference
+translation_of: Web/CSS/@font-face/font-display
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>font-display</code></strong> détermine la façon dont une fonte est affichée selon qu'elle ait été chargée et prête à être utilisée.</p>
+
+<h2 id="Le_déroulement_de_l'affichage_d'une_police">Le déroulement de l'affichage d'une police</h2>
+
+<p>La gestion d'une fonte de caractères s'effectue selon trois périodes distinctes dont la première commence lorsque l'agent utilisateur tente de télécharger une fonte.</p>
+
+<dl>
+ <dt>Période 1 : Blocage des fontes</dt>
+ <dd>Si la fonte n'est pas chargée, tout élément utilisant cette fonte doit être rendu avec une fonte alternative invisible. Si la fonte est chargée correctement pendant cette période, elle est utilisée normalement.</dd>
+ <dt>Période 2 : Échange des fontes</dt>
+ <dd>Si la fonte n'est pas chargée, tout élément utilisant cette fonte doit utiliser une fonte alternative visible. Si la fonte est chargée correctement pendant cette période, elle est utilisée normalement.</dd>
+ <dt>Période 3 : Échec du chargement des fontes</dt>
+ <dd>Si la fonte n'est pas chargée, l'agent utilisateur considère qu'il y a eu un échec du chargement et utilise la fonte alternative disponible.</dd>
+</dl>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css;">/* Valeurs avec un mot-clé */
+font-display: auto;
+font-display: block;
+font-display: swap;
+font-display: fallback;
+font-display: optional;</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>La stratégie d'affichage de la fonte est définie par l'agent utilisateur.</dd>
+ <dt><code>block</code></dt>
+ <dd>La période de blocage est courte et est suivi d'une période d'échange infinie.</dd>
+ <dt><code>swap</code></dt>
+ <dd>La période de blocage est extrêmement courte et est suivie par une période d'échange infinie.</dd>
+ <dt><code>fallback</code></dt>
+ <dd>La période de blocage est extrêmement courte et est suivie par une courte période d'échange.</dd>
+ <dt><code>optional</code></dt>
+ <dd>La période de blocage est extrêmement courte et il n'y a pas de période d'échange.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css; highlight[7]">@font-face {
+  font-family: FonteExemple;
+  src: url(/chemin/vers/fonts/examplefont.woff) format('woff'),
+       url(/chemin/vers/fonts/examplefont.eot) format('eot');
+  font-weight: 400;
+  font-style: normal;
+  font-display: fallback;
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Fonts', '#font-display-desc', 'font-display')}}</td>
+   <td>{{Spec2('CSS4 Fonts')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.font-face.font-display")}}</p>
diff --git a/files/fr/web/css/@font-face/font-family/index.html b/files/fr/web/css/@font-face/font-family/index.html
new file mode 100644
index 0000000000..3d9e1c6717
--- /dev/null
+++ b/files/fr/web/css/@font-face/font-family/index.html
@@ -0,0 +1,69 @@
+---
+title: font-family
+slug: Web/CSS/@font-face/font-family
+tags:
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@font-face/font-family
+---
+<div>{{CSSRef}}</div>
+
+<p>Le descripteur <strong><code>font-family</code></strong> permet aux auteurs d'un document de définir la police de caractères à utiliser au sein d'une règle @ {{cssxref("@font-face")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs de chaînes de caractères */
+/* Type &lt;string&gt;                    */
+font-family: "police de caractères a";
+font-family: 'une autre police';
+
+/* Valeur de type &lt;custom-ident&gt; */
+font-family: exemplepolice;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;family-name&gt;</code></dt>
+ <dd>Définit le nom de la police de caractères.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">@font-face {
+  font-family: exemplepolice;
+  src: url('exemplepolice.ttf');
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#font-family-desc', 'font-family')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.font-face.font-family")}}</p>
diff --git a/files/fr/web/css/@font-face/font-stretch/index.html b/files/fr/web/css/@font-face/font-stretch/index.html
new file mode 100644
index 0000000000..e7ab910e64
--- /dev/null
+++ b/files/fr/web/css/@font-face/font-stretch/index.html
@@ -0,0 +1,183 @@
+---
+title: font-stretch
+slug: Web/CSS/@font-face/font-stretch
+tags:
+  - '@font-face'
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@font-face/font-stretch
+---
+<p>{{CSSRef}}{{draft}}</p>
+
+<p>Le descripteur CSS <strong><code>font-stretch</code></strong> permet aux auteurs de choisir entre la forme normale, condensée ou étendue d'une police fournie dans une règle {{cssxref("@font-face")}}.</p>
+
+<p>Pour une police donnée, les auteurs peuvent télécharger différentes fontes pour différents styles et utiliser alors <code>font-stretch</code> de façon explicite afin de choisir la fonte voulue. Les valeurs fournies au descripteur CSS sont les mêmes que celles qui peuvent être utilisées pour la propriété correspondante.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs simples */
+font-stretch: ultra-condensed;
+font-stretch: extra-condensed;
+font-stretch: condensed;
+font-stretch: semi-condensed;
+font-stretch: normal;
+font-stretch: semi-expanded;
+font-stretch: expanded;
+font-stretch: extra-expanded;
+font-stretch: ultra-expanded;
+font-stretch: 50%;
+font-stretch: 100%;
+font-stretch: 200%;
+
+/* Valeurs multiples */
+font-stretch: 75% 125%;
+font-stretch: condensed ultra-condensed;;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Indique la forme normale (en largeur) de la police.</dd>
+ <dt><code>semi-condensed</code>, <code>condensed</code>, <code>extra-condensed</code>, <code>ultra-condensed</code></dt>
+ <dd>Indique une forme plus condensée que la normale (la valeur <code>ultra-condensed</code> correspond à la forme la plus condensée).</dd>
+ <dt><code>semi-expanded</code>, <code>expanded</code>, <code>extra-expanded</code>, <code>ultra-expanded</code></dt>
+ <dd>Indique une forme plus étendue que la normale (la valeur <code>ultra-expanded</code> étant la plus étendue).</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Un pourcentage (une valeur de type {{cssxref("&lt;percentage&gt;")}}) dont la valeur est comprise entre 50% et 200% (inclus). Les valeurs négatives ne sont pas autorisées pour cette propriété.</dd>
+</dl>
+
+<p>Dans les versions antérieures de la spécification pour <code>font-stretch</code>, la propriété ne s'utilisait qu'avec des mots-clés. Avec le module CSS Fonts de niveau 4, la syntaxe est étendue afin de permettre l'utilisation des valeurs <code>&lt;percentage&gt;</code>. Cela permet aux polices variables de permettre un contrôle plus fin voire continu.</p>
+
+<p>Pour les polices variables TrueType et OpenType, c'est l'axe de variation <code>"wdth"</code> qui est utilisé afin d'implémenter les largeurs variables.</p>
+
+<p>Si la police ne dispose pas d'une fonte avec une valeur exactement correspondantes, le moteur choisira la forme la plus proche disponible.</p>
+
+<h3 id="Correspondance_entre_les_noms_et_les_pourcentages">Correspondance entre les noms et les pourcentages</h3>
+
+<p>Ce tableau indique les correspondances entre les valeurs indiquées par un mot-clé et celles définies avec un pourcentage :</p>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Keyword</th>
+   <th scope="col">Pourcentage</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>ultra-condensed</code></td>
+   <td>50%</td>
+  </tr>
+  <tr>
+   <td><code>extra-condensed</code></td>
+   <td>62.5%</td>
+  </tr>
+  <tr>
+   <td><code>condensed</code></td>
+   <td>75%</td>
+  </tr>
+  <tr>
+   <td><code>semi-condensed</code></td>
+   <td>87.5%</td>
+  </tr>
+  <tr>
+   <td><code>normal</code></td>
+   <td>100%</td>
+  </tr>
+  <tr>
+   <td><code>semi-expanded</code></td>
+   <td>112.5%</td>
+  </tr>
+  <tr>
+   <td><code>expanded</code></td>
+   <td>125%</td>
+  </tr>
+  <tr>
+   <td><code>extra-expanded</code></td>
+   <td>150%</td>
+  </tr>
+  <tr>
+   <td><code>ultra-expanded</code></td>
+   <td>200%</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Polices_variables">Polices variables</h3>
+
+<p>La plupart des polices disposent de fontes avec des formes "séparées"/"discrètes". Toutefois, les polices variables permettent désormais d'utiliser des variations beaucoup plus fines (et c'est pour cela qu'on utilise les pourcentages).</p>
+
+<p>Pour les polices variables TrueType ou OpenType, c'est l'axe de variation <code>"wdth"</code> qui est utilisé afin d'implémenter les largeurs variables des glyphes.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre>{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, on charge une police Open Sans locale et on l'importe en ciblant les fontes avec les formes normale, semi-condensée et semi-étendue.</p>
+
+<pre class="brush: css">@font-face {
+  font-family: "Open Sans";
+  src: local("Open Sans") format("woff2"),
+       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
+  font-stretch: 87.5% 112.5%;
+}</pre>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Les personnes atteintes de dyslexie ou d'autres troubles cognitifs pourront avoir des difficultés à lire des textes dont la fonte est trop condensée, notamment <a href="/en-US/docs/Web/CSS/color#Accessibility_concerns">si le contraste des couleurs est trop faible</a>.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG - Partie 1.4 (MDN)</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener">Respecter le critère 1.4.8 - Comprendre les règles WCAG 2.0 (W3C)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Fonts', '#font-prop-desc', 'font-stretch')}}</td>
+   <td>{{Spec2('CSS4 Fonts')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#font-prop-desc', 'font-stretch')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.font-face.font-stretch")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("@font-face/font-display", "font-display descriptor")}}</li>
+ <li>{{cssxref("@font-face/font-family", "font-family descriptor")}}</li>
+ <li>{{cssxref("@font-face/font-weight", "font-weight descriptor")}}</li>
+ <li>{{cssxref("@font-face/font-style", "font-style descriptor")}}</li>
+ <li>{{cssxref("@font-face/font-variant", "font-variant descriptor")}}</li>
+ <li>{{cssxref("font-feature-settings", "font-feature-settings")}}</li>
+ <li>{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}</li>
+ <li>{{cssxref("@font-face/src", "src")}}</li>
+ <li>{{cssxref("@font-face/unicode-range", "unicode-range descriptor")}}</li>
+</ul>
diff --git a/files/fr/web/css/@font-face/font-style/index.html b/files/fr/web/css/@font-face/font-style/index.html
new file mode 100644
index 0000000000..b3265e2d68
--- /dev/null
+++ b/files/fr/web/css/@font-face/font-style/index.html
@@ -0,0 +1,101 @@
+---
+title: font-style
+slug: Web/CSS/@font-face/font-style
+tags:
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@font-face/font-style
+---
+<div>{{CSSRef}}</div>
+
+<p>Le descripteur <strong><code>font-style</code></strong>, associé à <a href="/fr/docs/Web/CSS/Règles_@">la règle @</a> {{cssxref("@font-face")}}, permet d'indiquer le style de police pour la police définie via la règle.</p>
+
+<p>Pour une police donnée (un ensemble de fontes), les auteurs peuvent télécharger plusieurs fichiers correspondant à la même police mais pour différents styles. Le descripteur <code>font-style</code> peut alors être utilisé afin d'indiquer explicitement le style associé à la fonte. La valeur du descripteur correspond à la propriété de la fonte.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<div class="syntaxbox">
+<pre class="brush: css">font-style: normal;
+font-style: italic;
+font-style: oblique;
+font-style: oblique 30deg;
+font-style: oblique 30deg 50deg;</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>C'est la fonte « normale » de la police qui est choisie.</dd>
+ <dt><code>italic</code></dt>
+ <dd>C'est la fonte italique de la police qui est choisie.</dd>
+ <dt><code>oblique</code></dt>
+ <dd>C'est la fonte, artificiellement penchée à partir de la police normale, de la police qui est choisie.</dd>
+ <dt><code>oblique</code> avec un angle</dt>
+ <dd>C'est la fonte oblique (c'est-à-dire une version artificiellement penchée, obtenue à partir de la police normale) de la police qui est choisie. L'angle indiqué correspond à la pente du texte.</dd>
+ <dt><code>oblique</code> avec un intervalle d'angle</dt>
+ <dd>Utilise une fonte comme <code>oblique</code> et indique un intervalle d'angles possibles pour la pente du texte. On notera que l'intervalle est uniquement pris en compte pour la valeur <code>oblique</code>, aucune autre valeur n'est autorisée après <code>normal</code> ou <code>italic</code>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans les exemples qui suivent, on utilisera les différentes formes liées à la police Garamond :</p>
+
+<pre class="brush: css">@font-face {
+  font-family: garamond;
+  src: url('garamond.ttf');
+}</pre>
+
+<p><img alt="unstyled Garamond" src="https://mdn.mozillademos.org/files/12265/garamondunstyled.JPG" style="height: 101px; width: 276px;"></p>
+
+<p>La version en italique du texte utilisera les mêmes glyphes que la version normale, artificiellement penchés de quelques degrés.</p>
+
+<p><img alt="artificially sloped garamond" src="https://mdn.mozillademos.org/files/12267/garamondartificialstyle.JPG" style="height: 101px; width: 276px;"></p>
+
+<p>En revanche, si on dispose d'une vraie version italique, on peut l'indiquer via le descripteur <code>src</code> et indiquer que c'est une police italique via <code>font-style</code>. Une « vraie » police italique utilisera des glyphes différents et la qualité calligraphique obtenue sera meilleure qu'avec les glyphes normaux penchés artificiellement.</p>
+
+<pre class="brush: css">@font-face {
+  font-family: garamond;
+  src: url('garamond-italic.ttf');
+  /* On indique ici que la police est italique */
+  font-style: italic;
+}</pre>
+
+<p><img alt="italic garamond" src="https://mdn.mozillademos.org/files/12269/garamonditalic.JPG" style="height: 101px; width: 267px;"></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Fonts', '#font-prop-desc', 'font-style')}}</td>
+   <td>{{Spec2('CSS4 Fonts')}}</td>
+   <td>Ajoute la possibilité d'utiliser le mot-clé <code>oblique</code> suivi par une valeur angulaire.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#font-prop-desc', 'font-style')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.font-face.font-style")}}</p>
+</div>
diff --git a/files/fr/web/css/@font-face/font-variation-settings/index.html b/files/fr/web/css/@font-face/font-variation-settings/index.html
new file mode 100644
index 0000000000..d9dd7e0789
--- /dev/null
+++ b/files/fr/web/css/@font-face/font-variation-settings/index.html
@@ -0,0 +1,71 @@
+---
+title: font-variation-settings
+slug: Web/CSS/@font-face/font-variation-settings
+tags:
+  - '@font-face'
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@font-face/font-variation-settings
+---
+<div>{{CSSRef}}</div>
+
+<p>Le descripteur <strong><code>font-variation-settings</code></strong>, associé à la règle @ {{cssxref("@font-face")}} permet d'indiquer les variations de police de bas niveau pour les polices OpenType ou TrueType.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">/* On utilise les paramètres par défaut */
+font-variation-settings: normal;
+
+/* On indique les valeurs pour les noms des axes OpenType */
+font-variation-settings: "xhgt" 0.7;</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Le texte est disposé avec les paramètres par défaut.</dd>
+ <dt><code>&lt;string&gt; &lt;number&gt;</code></dt>
+ <dd>Lorsque le texte est affiché, la liste des noms des axes OpenType est envoyée au moteur afin d'activer ou de désactiver des paramètres de la police. Chaque paramètre se compose d'un nom ({{cssxref("&lt;string&gt;")}}) de 4 caractères ASCII, suivis d'un nombre ({{cssxref("number")}}) qui indique la valeur de l'axe. Si la chaîne de caractères contient moins ou plus de caractères ou contient des caractères en dehors de l'intervalle de points de code U+20 - U+7E, la propriété entière sera considérée comme invalide. Le nombre utilisé peut être décimal ou négatif.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">@font-face {
+  font-family: 'OpenTypeFont';
+  src: url('open_type_font.woff2') format('woff2');
+  font-weight: normal;
+  font-style: normal;
+  font-variation-settings: 'wght' 400, 'wdth' 300;
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Fonts', '#font-rend-desc', 'font-variation-settings')}}</td>
+   <td>{{Spec2('CSS4 Fonts')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.font-face.font-variation-settings")}}</p>
diff --git a/files/fr/web/css/@font-face/font-weight/index.html b/files/fr/web/css/@font-face/font-weight/index.html
new file mode 100644
index 0000000000..21fcbc251f
--- /dev/null
+++ b/files/fr/web/css/@font-face/font-weight/index.html
@@ -0,0 +1,173 @@
+---
+title: font-weight
+slug: Web/CSS/@font-face/font-weight
+tags:
+  - '@font-face'
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@font-face/font-weight
+---
+<p>{{CSSRef}}</p>
+
+<p>Le descripteur CSS <strong><code>font-weight</code></strong> permet aux auteurs d'indiquer les graisses pour les polices fournies dans une règle {{cssxref("@font-face")}}. La propriété <code><a href="/fr/docs/Web/CSS/font-weight">font-weight</a></code> peut être utilisée séparément pour indiquer la graisse des caractères d'un texte (c'est-à-dire s'ils sont en gras, normaux ou plus fins).</p>
+
+<p>Pour une police particulière, les auteurs peuvent télécharger différentes fontes qui utilisent les différents styles d'une même police et alors utiliser le descripteur <code>font-weight</code> afin de définir explicitement le niveau de graisse. La valeur utilisée pour le descripteur est la même que celle qui peut être utilisée pour la propriété.</p>
+
+<p>{{cssinfo}}</p>
+
+<p>Il existe généralement un nombre limité de niveaux de graisse pour une police donnée. Lorsqu'on utilise un niveau de graisse qui n'existe pas, c'est le niveau le plus proche qui est utilisé. Les polices qui ne disposent pas d'une fonte en gras sont généralement synthétisées par l'agent utilisateur (pour empêcher cette synthèse, on pourra utiliser la propriété {{cssxref('font-synthesis')}}).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre>/* Valeurs simples */
+font-weight: normal;
+font-weight: bold;
+font-weight: 400;
+
+/* Valeurs multiples */
+font-weight: normal bold;
+font-weight: 300 500;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Le niveau de graisse normal (équivaut à la valeur numérique <code>400</code>).</dd>
+ <dt><code>bold</code></dt>
+ <dd>La fonte en gras (équivaut à la valeur numérique <code>700</code>).</dd>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>Un nombre (une valeur de type {{cssxref("&lt;number&gt;")}}) comprise entre 1 et 1000 (et incluant ces limites). Plus la valeur est élevée, plus le niveau de graisse utilisé sera important. Certains valeurs communément utilisées possèdent un nom : voir ci-après le tableau de correspondance entre les noms et les valeurs).</dd>
+</dl>
+
+<p>Dans les versions antérieures de la spécification, <code>font-weight</code> n'acceptait que les mots-clés et les valeurs numériques 100, 200, 300, 400, 500, 600, 700, 800 et 900. Les polices qui ne sont pas variables pourront n'utiliser que ces valeurs (les valeurs intermédiaires, ex. 451) seront ramenées à la valeur palier la plus proche.</p>
+
+<p>Avec la spécification CSS Fonts de niveau 4, la syntaxe a été étendue afin que n'importe quel nombre entre 1 and 1000 (au sens large) puisse être utilisé. Les polices variables (voir plus bas) ont aussi été introduites et on peut donc avoir un contrôle plus précis sur le niveau de graisse utilisé.</p>
+
+<h3 id="Correspondance_entre_les_noms_et_les_valeurs_numériques">Correspondance entre les noms et les valeurs numériques</h3>
+
+<p>Les valeurs numériques entre <code>100</code> et <code>900</code> correspondent (approximativement) à ces noms communément utilisés :</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Valeur</th>
+   <th scope="col">Nom commun</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>100</td>
+   <td>Thin (Hairline)</td>
+  </tr>
+  <tr>
+   <td>200</td>
+   <td>Extra Light (Ultra Light)</td>
+  </tr>
+  <tr>
+   <td>300</td>
+   <td>Light</td>
+  </tr>
+  <tr>
+   <td>400</td>
+   <td>Normal</td>
+  </tr>
+  <tr>
+   <td>500</td>
+   <td>Medium</td>
+  </tr>
+  <tr>
+   <td>600</td>
+   <td>Semi Bold (Demi Bold)</td>
+  </tr>
+  <tr>
+   <td>700</td>
+   <td>Bold</td>
+  </tr>
+  <tr>
+   <td>800</td>
+   <td>Extra Bold (Ultra Bold)</td>
+  </tr>
+  <tr>
+   <td>900</td>
+   <td>Black (Heavy)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Polices_variables">Polices variables</h3>
+
+<p>La plupart des polices se déclinent en fontes avec des niveaux de graisses distincts. Toutefois, certaines polices, appelées polices variables, permettent d'utiliser des niveaux de graisse intermédiaires plus ou moins finement. On peut ainsi obtenir une fonte d'un niveau de graisse plus précis.</p>
+
+<p>Pour les polices variables TrueType ou OpenType, c'est l'axe de variation <code>"wght"</code> qui est utilisé afin d'implémenter ces largeurs variables.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre>{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, on récupère une police Open Sans et on l'importe en utilisant le niveau de graisse normal.</p>
+
+<pre>@font-face {
+  font-family: "Open Sans";
+  src: local("Open Sans") format("woff2"),
+       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
+  font-weight: 400;
+}</pre>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Pour les personnes ayant une vision faible, il peut être extrêmement difficile de lire un texte avec <code>font-weight</code> qui vaut <code>100</code> ou <code>200</code>, notamment <a href="/fr/docs/Web/CSS/color#Accessibilité">si le contraste entre le texte et l'arrière-plan est faible</a>.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener"><em>Understanding Success Criterion 1.4.8 - W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Fonts', '#font-prop-desc', 'font-weight')}}</td>
+   <td>{{Spec2('CSS4 Fonts')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#font-prop-desc', 'font-weight')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.font-face.font-weight")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><code><a href="/fr/docs/Web/CSS/font-weight">font-weight</a></code></li>
+ <li>{{cssxref("@font-face/font-display", "font-display descriptor")}}</li>
+ <li>{{cssxref("@font-face/font-family", "font-family descriptor")}}</li>
+ <li>{{cssxref("@font-face/font-stretch", "font-stretch descriptor")}}</li>
+ <li>{{cssxref("@font-face/font-style", "font-style descriptor")}}</li>
+ <li>{{cssxref("@font-face/font-variant", "font-variant descriptor")}}</li>
+ <li>{{cssxref("font-feature-settings", "font-feature-settings")}}</li>
+ <li>{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}</li>
+ <li>{{cssxref("@font-face/src", "src")}}</li>
+ <li>{{cssxref("@font-face/unicode-range", "unicode-range descriptor")}}</li>
+</ul>
diff --git a/files/fr/web/css/@font-face/index.html b/files/fr/web/css/@font-face/index.html
new file mode 100644
index 0000000000..9e55c634fb
--- /dev/null
+++ b/files/fr/web/css/@font-face/index.html
@@ -0,0 +1,190 @@
+---
+title: '@font-face'
+slug: Web/CSS/@font-face
+tags:
+  - CSS
+  - Reference
+  - Règle @
+translation_of: Web/CSS/@font-face
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/R%C3%A8gles_@">règle @</a> <strong><code>@font-face</code></strong> permet de définir les polices d'écriture à utiliser pour afficher le texte de pages web. Cette police peut être chargée depuis un serveur distant ou depuis l'ordinateur de l'utilisateur. Si la fonction <code>local()</code> est utilisée, elle indique à l'agent utilisateur de prendre en compte une police présente sur le poste de l'utilisateur.</p>
+
+<p>En permettant aux auteurs de fournir leurs propres polices, il n'est plus nécessaire de dépendre uniquement des polices qui sont installées sur les postes des utilisateurs.</p>
+
+<p>Il est courant d'utiliser les deux formes <code>url()</code> et <code>local()</code> afin de pouvoir utiliser une police locale si elle est disponible ou d'en télécharger une autre au cas où.</p>
+
+<p>La règle <code>@font-face</code> peut être utilisée au niveau global d'une feuille de style et également au sein d'un groupe lié à <a href="/fr/docs/Web/CSS/Règles_@">une règle @ conditionnelle</a>.</p>
+
+<pre class="brush: css no-line-numbers">@font-face {
+ font-family: "Open Sans";
+ src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
+        url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
+}</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Descripteurs">Descripteurs</h3>
+
+<dl>
+ <dt>{{cssxref("@font-face/font-display", "font-display")}}</dt>
+ <dd>Ce descripteur détermine la façon dont une fonte est affichée selon qu'elle a été téléchargée et/ou si elle est prête à être utilisée.</dd>
+ <dt>{{cssxref("@font-face/font-family", "font-family")}}</dt>
+ <dd>Ce descripteur définit un nom qui sera utilisé pour désigner cette police dans les différentes règles associées.</dd>
+ <dt>{{cssxref("@font-face/font-stretch", "font-stretch")}}</dt>
+ <dd>Une valeur {{cssxref("font-stretch")}}. Depuis Firefox 61 et pour les navigateurs récents, il est possible d'utiliser deux valeurs afin d'indiquer l'intervalle pris en charge par une fonte, par exemple : <code>font-stretch: 50% 200%;</code>.</dd>
+ <dt>{{cssxref("@font-face/font-style", "font-style")}}</dt>
+ <dd>Une valeur {{cssxref("font-style")}}. Depuis Firefox 61 et pour les navigateurs récents, il est possible d'utiliser deux valeurs afin d'indiquer l'intervalle pris en charge par une fonte, par exemple : <code>font-style: oblique 20deg 50deg;</code>.</dd>
+ <dt>{{cssxref("@font-face/font-variant", "font-variant")}}</dt>
+ <dd>Une valeur {{cssxref("font-variant")}}.</dd>
+ <dt>{{cssxref("@font-face/font-weight", "font-weight")}}</dt>
+ <dd>Une valeur {{cssxref("font-weight")}}. Depuis Firefox 61 et pour les navigateurs récents, il est possible d'utiliser deux valeurs afin d'indiquer l'intervalle pris en charge par une fonte, par exemple : <code>font-weight: 100 400;</code>.</dd>
+ <dt>{{cssxref("font-feature-settings", "font-feature-settings")}}</dt>
+ <dd>Ce descripteur permet d'avoir un contrôle avancé sur les fonctionnalités typographiques relatives aux fontes OpenType.</dd>
+ <dt>{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}</dt>
+ <dd>Ce descripteur permet d'avoir un contrôle de bas niveau sur les variations des polices OpenType et TrueType en indiquant les nom des axes et des fonctionnalités à faire varier.</dd>
+ <dt>{{cssxref("@font-face/src", "src")}}</dt>
+ <dd>
+ <p>Indique la ressource qui contient les données pour la police d'écriture. Cela peut être une URL vers un fichier distant ou le nom d'une police de caractères présente sur l'ordinateur de l'utilisateur.</p>
+
+ <p>On peut fournir une indication de format au navigateur (afin que celui-ci sélectionne celui qui lui convient le mieux) sous la forme d'une fonction <code>format()</code> qui contient le type comme argument :</p>
+
+ <pre class="brush: css">src: url(ideal-sans-serif.woff) <strong>format("woff")</strong>,
+     url(basic-sans-serif.ttf) <strong>format("truetype")</strong>;</pre>
+
+ <p>Les types utilisables sont : <code>"woff"</code>, <code>"woff2"</code>, <code>"truetype"</code>, <code>"opentype"</code>, <code>"embedded-opentype"</code> et <code>"svg"</code>.</p>
+ </dd>
+ <dt>{{cssxref("@font-face/unicode-range", "unicode-range")}}</dt>
+ <dd>L'intervalle des points de code Unicode pour lesquels la règle  <code>@font-face</code> s'applique.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Police_distante">Police distante</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">@font-face {
+  font-family: "Bitstream Vera Serif Bold";
+  src: url("/static/styles/libs/font-awesome/fonts/fontawesome-webfont.fdf491ce5ff5.woff");
+}
+
+body {
+  font-family: "Bitstream Vera Serif Bold", serif;
+} </pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt; Et voici Bitstream Vera Serif Bold.&lt;/p&gt;
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Police_distante")}}</p>
+
+<h3 id="Police_locale">Police locale</h3>
+
+<p>Ici, l'agent utilisateur tente d'utiliser la police Helvetica Neue Bold ou HelveticaNeue-Bold si elle existe sur l'ordinateur de l'utilisateur. Sinon, il utilise la police distante MgOpenModernaBold.ttf.</p>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">@font-face {
+  font-family: MaHelvetica;
+  src: local("Helvetica Neue Bold"),
+       local("HelveticaNeue-Bold"),
+       url(MgOpenModernaBold.ttf);
+  font-weight: bold;
+}</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt; Et voici Ma Helvetica.&lt;/p&gt;
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Police_locale")}}</p>
+
+<h2 id="Types_MIME_associés_aux_polices">Types MIME associés aux polices</h2>
+
+<p>Voici, selon les différents formats de police, les types MIME associés :</p>
+
+<dl>
+ <dt>TrueType</dt>
+ <dd><code>font/ttf</code></dd>
+ <dt>OpenType</dt>
+ <dd><code>font/otf</code></dd>
+ <dt>Web Open File Format</dt>
+ <dd><code>font/woff</code></dd>
+ <dt>Web Open File Format 2</dt>
+ <dd><code>font/woff2</code></dd>
+</dl>
+
+<h2 id="Notes">Notes</h2>
+
+<ul>
+ <li>Les restrictions d'origine (même domaine) s'appliquent également sur les polices web sauf si <a href="/fr/docs/HTTP/Access_control_CORS">les contrôles d'accès HTTP</a> sont paramétrés afin de lever cette restriction.</li>
+ <li><code>@font-face</code> ne peut pas être déclaré au sein d'un sélecteur CSS. Ainsi l'exemple suivant ne fonctionnera pas :
+  <pre class="brush: css example-bad">.nomClasse {
+  @font-face {
+    font-family: MyHelvetica;
+    src: local("Helvetica Neue Bold"),
+         local("HelveticaNeue-Bold"),
+         url(MgOpenModernaBold.ttf;
+    font-weight: bold;
+  }
+}</pre>
+ </li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WOFF2.0', '', 'WOFF2 font format')}}</td>
+   <td>{{Spec2('WOFF2.0')}}</td>
+   <td>Spécification du format de police avec un nouvel algorithme de compression.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('WOFF1.0', '', 'WOFF font format')}}</td>
+   <td>{{Spec2('WOFF1.0')}}</td>
+   <td>Spécification du format de police.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#font-face-rule', '@font-face')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.font-face")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/Guide/WOFF">À propos de WOFF</a></li>
+ <li><a href="https://everythingfonts.com/font-face">Le générateur de règles <code>@font-face</code> par Everythingfonts </a></li>
+ <li><a href="https://www.fontsquirrel.com/tools/webfont-generator">Le générateur de règles @font-face par FontSquirrel</a></li>
+ <li><a href="http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/">Des polices obtenues avec <code>@font-face</code> (en anglais, sur hacks.mozilla.org)</a></li>
+ <li><a href="http://openfontlibrary.org/">Une bibliothèque de polices ouvertes (<em>Open Font Library</em>)</a></li>
+ <li><a href="http://caniuse.com/woff">Où puis-je utiliser WOFF ? (en anglais sur caniuse.com)</a></li>
+ <li><a href="http://caniuse.com/svg-fonts">Où puis-je utiliser les polices SVG ?</a></li>
+</ul>
diff --git a/files/fr/web/css/@font-face/src/index.html b/files/fr/web/css/@font-face/src/index.html
new file mode 100644
index 0000000000..ff77ace03b
--- /dev/null
+++ b/files/fr/web/css/@font-face/src/index.html
@@ -0,0 +1,85 @@
+---
+title: src
+slug: Web/CSS/@font-face/src
+tags:
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@font-face/src
+---
+<div>{{CSSRef}}</div>
+
+<p>Le descripteur <strong><code>src</code></strong>, associé à la règle @ {{cssxref("@font-face")}}, permet de définir la ressource qui contient les données relatives à une police de caractères. Ce descripteur est obligatoire afin que la règle <code>@font-face</code> soit considérée comme valide.</p>
+
+<p>Sa valeur est composée d'une liste de noms séparés par des virgules, ordonnés par priorité dont chacun fait référence à une police de caractères externe ou locale. Lorsqu'une police doit être utilisée, l'agent utilisateur parcourt la liste de ces références et utilise la première police qui peut être chargée correctement. Si la police de caractères contient des données invalides ou si le nom ne correspond à aucune police de caractères, l'agent utilisateur passe à la suivante.</p>
+
+<p>Là aussi, les URL utilisées peuvent être relatives. Dans le cas où une URL relative est utilisée, elle est résolue grâce à l'emplacement de la feuille de styles qui contient la règle <code>@font-face</code>. Pour les polices SVG, l'URL pointe vers un élément du document qui contient les définitions SVG de la police. Si l'élément de référence est absent, une référence implicite sera construite avec la première police définie. De même, pour les formats contenant plusieurs polices, seule une police est chargée pour une règle <code>@font-face</code> donnée. Les identifiants de fragment de l'URL peuvent être utilisés pour indiquer la police à charger. Si le format conteneur ne possède pas de schéma d'identification des fragments, ce sera un schéma simple d'indexation (ex. "font-collection#1" pour la première police, "font-collection#2" pour la seconde, etc.) qui sera utilisé.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* &lt;url&gt; */
+src: url(https://unsiteweb.com/chemin/vers/police.woff); /* URL absolue */
+src: url(chemin/vers/police.woff);                       /* URL relative */
+src: url(chemin/vers/police.woff) format("woff");        /* format explicite */
+src: url('chemin/vers/police.woff');                     /* URL entre quotes */
+src: url(chemin/vers/policesvg.svg#exemple);             /* fragment identifiant une police */
+
+/* Valeurs de type &lt;font-face-name&gt; */
+src: local(police);      /* nom sans double quote */
+src: local(une police); /* nom avec espace */
+src: local("police");    /* nom entre double quotes */
+
+/* Liste avec plusieurs éléments */
+src: local(police), url(chemin/vers/police.svg) format("svg"),
+    url(chemin/vers/police.woff) format("woff"),
+    url(chemin/vers/police.otf) format("opentype");
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;url&gt; [ format( &lt;string&gt;# ) ]?</code></dt>
+ <dd>Définit une référence externe, composée d'une URL et d'une indication optionnelle quant au format de la police chargée via cette URL. L'indication de format contient une liste de chaînes de caractères dont chacune doit correspondre à un format de police connu. Si un agent utilisateur ne prend pas en charge le format indiqué, il ne téléchargera pas la ressource liée à la police. Si aucune indication de format n'est fournie, la ressource associée est toujours téléchargée.</dd>
+ <dt><code>&lt;font-face-name&gt;</code></dt>
+ <dd>Définit le nom d'une police installée localement grâce à la fonction <code>local()</code> qui permet d'identifier une police de caractères au sein d'une famille de polices. Le nom de la police peut être entre double quotes.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">@font-face {
+  font-family: policeexemple;
+  src: local(Police Exemple), url('policeexemple.woff') format("woff"),
+      url('policeexemple.otf') format("opentype");
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#src-desc', 'src')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.font-face.src")}}</p>
diff --git a/files/fr/web/css/@font-face/unicode-range/index.html b/files/fr/web/css/@font-face/unicode-range/index.html
new file mode 100644
index 0000000000..e8eec9242d
--- /dev/null
+++ b/files/fr/web/css/@font-face/unicode-range/index.html
@@ -0,0 +1,109 @@
+---
+title: unicode-range
+slug: Web/CSS/@font-face/unicode-range
+tags:
+  - CSS
+  - Descripteur
+  - Experimental
+  - Reference
+translation_of: Web/CSS/@font-face/unicode-range
+---
+<div>{{cssref}}</div>
+
+<p>Le descripteur <strong><code>unicode-range</code></strong>, associé à la règle @ {{cssxref("@font-face")}}, définit l'intervalle de caractères qui peuvent être représentés par cette police pour la page. Si la page n'utilise aucun caractère de cet intervalle, la police n'est pas téléchargée. Si, au contraire, elle utilise au moins un caractère appartenant à cet intervalle, toute la police est téléchargée.</p>
+
+<p>Le but de ce descripteur est de segmenter les ressources liées aux polices afin que le navigateur puisse ne télécharger que les polices dont il a besoin pour le texte d'un document. Ainsi, un site disposant de nombreuses traductions pourrait proposer des ressources distinctes pour l'anglais, le grec et le japonais et seules les ressources nécessaires (dont les fichiers de polices) seraient téléchargées.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css">/* Valeurs &lt;unicode-range&gt; */
+unicode-range: U+26;                 /* un seul point de code         */
+unicode-range: U+0-7F;
+unicode-range: U+0025-00FF;          /* un intervalle spécifique      */
+unicode-range: U+4??;                /* un intervalle de substitution */
+unicode-range: U+0025-00FF, U+4??;   /* plusieurs valeurs             */
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>Une valeur de type <code>&lt;unicode-range&gt;</code> peut se présenter de trois façons différentes :</p>
+
+<ul>
+ <li>un seul point de code
+  <ul>
+   <li>Ex : <code>U+26</code></li>
+  </ul>
+ </li>
+ <li>un intervalle spécifique de points de code
+  <ul>
+   <li>Ex : <code>U+0025-00FF</code> indique que l'intervalle contient tous les caractères contenus entre les points de code <code>U+0025</code> et <code>U+00FF</code></li>
+  </ul>
+ </li>
+ <li>un intervalle de substitution indiqué par <code>?</code>
+  <ul>
+   <li>Un intervalle de points de code Unicode indiqué par une valeur contenant un point d'interrogation. Ainsi, <code>U+4??</code> signifie « tous les caractères contenus dans l'intervalle entre les points de code <code>U+400</code> et <code>U+4FF</code>).</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, on crée un élément HTML {{HTMLElement("div")}} pour lequel on veut que l'esperluette soit mise en forme avec une police différente. Pour que le résultat soit apparent, on utilisera une police sans empattement pour le texte (<em>Helvetica</em>) et une police avec des empattements (<em>Times New Roman</em>) pour l'esperluette.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<p>Dans la feuille de style CSS, on définit une règle {{cssxref("@font-face")}} qui n'inclue qu'un seul caractère. Cela signifie que seul ce caractère sera affiché avec cette police. On aurait également pu encadrer l'esperluette dans un élément {{HTMLElement("span")}} et appliquer une autre règle sur cet élément mais on aurait alors eu un balisage plus lourd et une règle spécifique en plus sur la feuille de style.</p>
+
+<pre class="brush: css">@font-face {
+  font-family: 'Ampersand';
+  src: local('Times New Roman');
+  unicode-range: U+26;
+}
+
+div {
+  font-size: 4em;
+  font-family: Ampersand, Helvetica, sans-serif;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;Me &amp; You = Us&lt;/div&gt;</pre>
+
+<h3 id="Résultat_de_référence_(image_statique)">Résultat de référence (image statique)</h3>
+
+<p><img src="https://mdn.mozillademos.org/files/6043/Refresult.png"></p>
+
+<h3 id="Résultat_du_navigateur">Résultat du navigateur</h3>
+
+<p>{{EmbedLiveSample("Exemples", 500,104)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#descdef-font-face-unicode-range', 'unicode-range')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.font-face.unicode-range")}}</p>
diff --git a/files/fr/web/css/@font-feature-values/index.html b/files/fr/web/css/@font-feature-values/index.html
new file mode 100644
index 0000000000..4353939675
--- /dev/null
+++ b/files/fr/web/css/@font-feature-values/index.html
@@ -0,0 +1,91 @@
+---
+title: '@font-feature-values'
+slug: Web/CSS/@font-feature-values
+tags:
+  - CSS
+  - Reference
+  - Règle @
+translation_of: Web/CSS/@font-feature-values
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Règles_@">règle @</a> <strong><code>@font-feature-values</code></strong> permet aux auteurs d'utiliser un nom personnalisé dans une règle utilisant la propriété {{cssxref("font-variant-alternates")}} afin de régler finement les caractéristiques OpenType. Elle permet de simplifier les feuilles de style lorsqu'on utilise plusieurs polices.</p>
+
+<pre class="brush: css">@font-feature-values Font One {
+/* On active la caractéristique nice-style
+   sur Font One */
+  @styleset {
+    nice-style: 12;
+  }
+}
+
+@font-feature-values Font Two {
+/* On active la caractéristique nice-style
+   sur Font Two */
+  @styleset {
+    nice-style: 4;
+  }
+}
+
+…
+/* Indépendamment de la police */
+.nice-look {
+  font-variant-alternates: styleset(nice-style);
+}
+</pre>
+
+<p>La règle @ <code>@font-feature-values</code> peut être utilisée au plus haut niveau d'une feuille de style et aussi au sein <a href="/fr/docs/Web/CSS/Règles_@" title="CSS/At-rule#Conditional_Group_Rules">d'un groupe de règles conditionnelles</a>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Blocs_liés_aux_caractéristiques">Blocs liés aux caractéristiques</h3>
+
+<dl>
+ <dt><a name="@swash"><code>@swash</code></a></dt>
+ <dd>Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle {{cssxref("font-variant-alternates", "swash()", "#swash()")}}. Une telle caractéristique est définie avec une seule valeur : <code>ident1: 2</code> est valide alors que <code>ident2: 2 4</code> est invalide.</dd>
+ <dt><a name="@annotation"><code>@annotation</code></a></dt>
+ <dd>Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle {{cssxref("font-variant-alternates", "annotation()", "#annotation()")}}. Une telle caractéristique est définie avec une seule valeur : <code>ident1: 2</code> est valide alors que <code>ident2: 2 4</code> est invalide.</dd>
+ <dt><a name="@ornaments"><code>@ornaments</code></a></dt>
+ <dd>Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle {{cssxref("font-variant-alternates", "ornaments()", "#ornaments()")}}. La caractéristique d'ornement est définie avec une seule valeur : <code>ident1: 2</code> est valide alors que <code>ident2: 2 4</code> est invalide.</dd>
+ <dt><a name="@stylistic"><code>@stylistic</code></a></dt>
+ <dd>Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle {{cssxref("font-variant-alternates", "stylistic()", "#stylistic()")}}. Une telle caractéristique est définie avec une seule valeur : <code>ident1: 2</code> est valide alors que <code>ident2: 2 4</code> est invalide.</dd>
+ <dt><a name="@styleset"><code>@styleset</code></a></dt>
+ <dd>Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle {{cssxref("font-variant-alternates", "styleset()", "#styleset()")}}. Plusieurs valeurs peuvent être utilisées pour cette caractéristique : <code>ident1: 2 4 12 1</code> correspondra aux valeurs OpenType <code>ss02</code>, <code>ss04</code>, <code>ss12</code>, <code>ss01</code>. Les valeurs supérieures à <code>99</code> sont valides mais ne correspondent à aucune valeur OpenType et sont donc ignorées.</dd>
+ <dt><a name="@character-variant"><code>@character-variant</code></a></dt>
+ <dd>Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle {{cssxref("font-variant-alternates", "character-variant()", "#character-variant()")}}. Pour cette définition, on peut utiliser une ou deux valeurs : <code>ident1: 2</code>  correspond à <code>cv02=1</code> et <code>ident2: 2 4</code> correspond à  <code>cv02)4</code>, en revanche <code>ident2: 2 4 5</code> est invalide.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#font-feature-values', '@font-feature-values')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.font-feature-values")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La propriété {{cssxref("font-variant-alternates")}} qui utilise la valeur définie par cette règle @.</li>
+</ul>
diff --git a/files/fr/web/css/@import/index.html b/files/fr/web/css/@import/index.html
new file mode 100644
index 0000000000..176945cf96
--- /dev/null
+++ b/files/fr/web/css/@import/index.html
@@ -0,0 +1,81 @@
+---
+title: '@import'
+slug: Web/CSS/@import
+tags:
+  - CSS
+  - Reference
+  - Règle @
+translation_of: Web/CSS/@import
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Règles_@">règle @</a> <strong><code>@import</code></strong> est utilisée afin d'importer des règles à partir d'autres feuilles de style. Ces règles @ doivent être utilisées avant toutes les autres règles, à l'exception de {{cssxref("@charset")}}. <code>@import</code> n'est pas <a href="/fr/Apprendre/CSS/Les_bases/La_syntaxe#Les_instructions_CSS">une instruction imbriquée</a> et ne peut donc pas être utilisée à l'intérieur <a href="/fr/docs/Web/CSS/Règles_@#R.C3.A8gles_conditionnelles_de_groupe">de groupe de règles conditionnelles</a>.</p>
+
+<pre class="brush:css no-line-numbers">@import url("fineprint.css") print;
+@import url("bluish.css") speech;
+@import 'custom.css';
+@import url("chrome://communicator/skin/");
+@import "common.css" screen;
+@import url('landscape.css') screen and (orientation:landscape);
+</pre>
+
+<p>Afin que les agents utilisateurs évitent de récupérer des ressources pour des types de média qui ne sont pas pris en charge, les auteurs peuvent définir des règles <code>@import</code> spécifiques à chaque média. Ces imports conditionnels comportent une liste de <a href="/fr/docs/Web/CSS/Media_queries">requête média</a> séparées par des virgules, situées après l'URL. Si aucune requête média n'est indiquée, l'import est inconditionnel. Cela aura le même effet que d'utiliser la requête média <code>all</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">@import <em>url</em>;
+@import <em>url</em> <em>liste-requetes-media</em>;
+</pre>
+
+<p>où on a :</p>
+
+<dl>
+ <dt><code>url</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;string&gt;")}} ou {{cssxref("&lt;url&gt;")}} qui représente l'emplacement de la ressource qu'on souhaite importer. L'URL peut être absolue ou relative. On notera que, pour un paquet Mozilla, l'URL ne pointe pas nécessairement vers un fichier, elle peut simplement définir le nom du paquet et la partie utilisée, le fichier approprié sera alors choisi automatiquement (e.g. <strong>chrome://communicator/skin/</strong>). <a href="/fr/docs/Mozilla/Tech/XUL/Tutorial/The_Chrome_URL">Voir cet article</a> pour plus d'informations.</dd>
+ <dt><code>liste-requetes-media</code></dt>
+ <dd>Une liste de <a href="/fr/docs/Web/CSS/Media_Queries/Using_media_queries">requêtes média</a> séparées par des virgules qui conditionnent l'application des règles CSS pour l'URL associée. Si le navigateur ne prend en charge aucune des requêtes indiquées, il ne charge pas la ressource associée.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Cascade', '#at-ruledef-import', '@import')}}</td>
+   <td>{{Spec2('CSS3 Cascade')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#media0', '@import')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>Extension de la syntaxe afin de prendre en charge n'importe quelle requête média et pas uniquement <a href="/fr/docs/Web/CSS/@media#Types_de_médias">celles sur les types de média</a>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'cascade.html#at-import', '@import')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Prise en charge du type {{cssxref("&lt;string&gt;")}} pour indiquer l'URL d'une feuille de style. Il est désormais nécessaire d'insérer les règles <code>@import</code> au début du document CSS.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#the-cascade', '@import')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.import")}}</p>
diff --git a/files/fr/web/css/@keyframes/index.html b/files/fr/web/css/@keyframes/index.html
new file mode 100644
index 0000000000..70f1d251c6
--- /dev/null
+++ b/files/fr/web/css/@keyframes/index.html
@@ -0,0 +1,171 @@
+---
+title: '@keyframes'
+slug: Web/CSS/@keyframes
+tags:
+  - CSS
+  - Reference
+  - Règle @
+translation_of: Web/CSS/@keyframes
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/R%C3%A8gles_@">règle </a><strong><code>@keyframes</code></strong> permet aux auteurs de définir les étapes qui composent la séquence d'une animation CSS. Cela permet de contrôler une animation plus finement que ce qu'on pourrait obtenir avec <a href="/fr/docs/Web/CSS/CSS_Transitions">les transitions</a>.</p>
+
+<pre class="brush: css no-line-numbers notranslate">@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}</pre>
+
+<p>Il est possible de manipuler la règle @ <code>@keyframes</code> via JavaScript et le CSSOM, notamment avec l'interface {{domxref("CSSKeyframesRule")}}.</p>
+
+<p>Afin d'utiliser ces règles, on créera une règle <code>@keyframes</code> avec un nom pour chaque étape et on utilisera ce nom avec la propriété {{cssxref("animation-name")}} afin qu'une animation corresponde à la liste des étapes qui la composent. Chaque règle <code>@keyframes</code> contient une liste de sélecteurs d'étapes dont chacun contient le pourcentage d'avancement de l'animation auquel il correspond ainsi que les informations de styles qui correspondent à cette étape..</p>
+
+<p>Les étapes peuvent être listées dans n'importe quel ordre. Elles seront enchaînées dans l'ordre indiqué par le pourcentage d'avancement.</p>
+
+<h3 id="Validité_de_la_liste_des_étapes">Validité de la liste des étapes</h3>
+
+<p>Si une liste d'étapes ne spécifie pas le début (<code>0%</code>/<code>from</code>) ou la fin (<code>100%</code>/<code>to</code>) d'une animation, le navigateur va utiliser les styles de l'élement définis par ailleurs. C'est assez pratique pour animer un élément depuis et vers son état initial.</p>
+
+<p>Si les étapes décrivent des propriétés qui ne peuvent pas être animées, elles seront ignorées mais les autres propriétés seront bien animées.</p>
+
+<h3 id="Résolution_des_doublons">Résolution des doublons</h3>
+
+<p>Si plusieurs règles <code>@keyframes</code> existent avec le même nom, c'est la dernière qui est utilisée. Les règles <code>@keyframes</code> ne forment pas de cascade et il n'y a donc pas de dérivation entre les différentes règles qui porteraient le même nom.</p>
+
+<p>Si, au sein d'une même règle, deux étapes décrivent le même pourcentage d'avancement, c'est la dernière qui est utilisée pour décrire ce moment de l'animation. Il n'y a aucune cascade qui composerait différentes étapes décrivant le même avancement.</p>
+
+<h3 id="Gestion_des_propriétés_absentes">Gestion des propriétés absentes</h3>
+
+<p>Si des propriétés ne sont pas définies à chaque étape, elles sont interpolées si possible. Si ces propriétés ne peuvent pas être interpolées, elles sont retirées de l'animation :</p>
+
+<pre class="brush: css notranslate">@keyframes identifier {
+  0% { top: 0; left: 0; }
+  30% { top: 50px; }
+  68%, 72% { left: 50px; }
+  100% { top: 100px; left: 100%; }
+}
+</pre>
+
+<p>Ici, la propriété {{cssxref("top")}} est animée en passant par les étapes <code>0%</code>, <code>30%</code> et <code>100%</code>. Quant à {{cssxref("left")}}, elle est animée aux étapes <code>0%</code>, <code>68%</code> , <code>72%</code> et <code>100%</code>.</p>
+
+<p>Seules les propriétés qui sont définies sur les étapes de début (<code>0%</code>) et de fin (<code>100%</code>) seront animées. Toutes les propriétés qui ne sont pas incluses dans les descriptions de ces étapes conserveront leurs valeurs de départ au cours de l'animation.</p>
+
+<h3 id="!important_dans_une_étape"><code>!important</code> dans une étape</h3>
+
+<p>Les déclarations qui utilisent <code>!important</code> dans une description d'étape sont ignorées</p>
+
+<pre class="brush: css notranslate">@keyframes important1 {
+  from { margin-top: 50px; }
+  50%  { margin-top: 150px !important; } /* ignorée */
+  to   { margin-top: 100px; }
+}
+
+@keyframes important2 {
+  from { margin-top: 50px;
+         margin-bottom: 100px; }
+  to   { margin-top: 150px !important; /* ignorée */
+         margin-bottom: 50px; }
+}
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;identifier&gt;</code></dt>
+ <dd>Un nom ({{cssxref("custom-ident")}}) qui permet d'identifier la liste d'étapes. Cela doit être <a href="/fr/docs/Web/CSS/custom-ident">un identifiant valide selon la syntaxe CSS</a>.</dd>
+ <dt><code>from</code></dt>
+ <dd>Indique le point de départ de l'animation (correspond à un avancement de <code>0%</code>).</dd>
+ <dt><code>to</code></dt>
+ <dd>Indique la fin de l'animation (correspond à un avancement de <code>100%</code>).</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>Le pourcentage d'avancement de l'animation auquel l'étape décrite s'applique.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">p {
+  animation-duration: 25s;
+  animation-name: slidein;
+}
+
+@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+  75% {
+    font-size: 300%;
+    margin-left: 25%;
+    width: 150%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;
+  Le Chat grimaça en apercevant Alice. Elle trouva qu’il
+  avait l’air bon enfant, et cependant il avait de
+  très longues griffes et une grande rangée de dents ;
+  aussi comprit-elle qu’il fallait le traiter avec
+  respect.
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","500","300")}}</p>
+
+<h3 id="Plus_dexemples">Plus d'exemples ?</h3>
+
+<p>Regardez <a href="/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS">Utiliser les animations CSS</a> pour de plus amples exemples.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Animations', '#keyframes', '@keyframes')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.keyframes")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Animations/Utiliser_les_animations_CSS">Manipuler les animations CSS</a></li>
+ <li>{{domxref("AnimationEvent")}}</li>
+</ul>
diff --git a/files/fr/web/css/@media/-moz-device-pixel-ratio/index.html b/files/fr/web/css/@media/-moz-device-pixel-ratio/index.html
new file mode 100644
index 0000000000..2aa1ca70a4
--- /dev/null
+++ b/files/fr/web/css/@media/-moz-device-pixel-ratio/index.html
@@ -0,0 +1,46 @@
+---
+title: '-moz-device-pixel-ratio'
+slug: Web/CSS/@media/-moz-device-pixel-ratio
+tags:
+  - '@media'
+  - CSS
+  - Caractéristique média
+  - Déprécié
+  - Non-standard
+translation_of: Web/CSS/@media/-moz-device-pixel-ratio
+---
+<div>{{cssref}} {{Non-standard_header}} {{Deprecated_header}}{{h3_gecko_minversion("-moz-device-pixel-ratio", "2.0")}} {{deprecated_inline("16")}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Cibler_des_caractéristiques_média">caractéristique média</a> <strong><code>-moz-device-pixel-ratio</code></strong>, associée à <a href="/fr/docs/Web/CSS/@media" title="The @media CSS at-rule lets you specify declarations that depend on the condition of a media query. The rule may be placed at the top level of your code or nested inside any other conditional group at-rule."><code>@media</code></a>, est une caractéristique propre à Gecko et peut être utilisée pour appliquer certains styles en fonctions du nombres de pixels physiques par pixel CSS.</p>
+
+<div class="warning">
+<p><strong>Ne pas utiliser cette fonctionnalité ! </strong>La caractéristique <code><a href="/fr/docs/Web/CSS/@media/resolution">resolution</a></code> et l'unité <code>dppx</code> permettent d'obtenir le même mécanisme.<br>
+ <br>
+ <code>-moz-device-pixel-ratio</code> peut être utilisée si besoin d'être compatible avec des versions de Firefox antérieures à la version 16 et <code>-webkit-device-pixel-ratio</code> peut être utilisée avec les navigateurs WebKit qui ne prennent pas en charge <code>dppx</code>. Par exemple :</p>
+
+<pre class="brush: css">@media (-webkit-min-device-pixel-ratio: 2), /* Navigateurs basés sur Webkit */
+       (min--moz-device-pixel-ratio: 2),    /* Anciens Firefox (avant Firefox 16) */
+       (min-resolution: 2dppx),             /* La méthode standard */
+       (min-resolution: 192dpi)             /* Utilisée si dppx n'est pas gérée */ </pre>
+
+<p>Voir <a href="http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/">cet article du CSSWG</a> pour les bonnes pratiques quant à la compatibilité de <code>resolution</code> et <code>dppx</code>.</p>
+</div>
+
+<div class="note"><strong>Note</strong> : Cette caractéristique est également implémentée par Webkit et <a href="https://msdn.microsoft.com/en-us/library/ie/dn760733(v=vs.85).aspx">IE 11 pour Windows Phone 8.1</a> sous le nom <code>-webkit-device-pixel-ratio</code>. Les versions préfixées pour les seuils minimal / maximal sont intitulées <code>min--moz-device-pixel-ratio</code> et <code>max--moz-device-pixel-ratio</code> sous Gecko, tandis que sous Webkit, elles sont intitulées  <code>-webkit-min-device-pixel-ratio</code> et <code>-webkit-max-device-pixel-ratio</code>.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<dl>
+ <dt>{{cssxref("&lt;number&gt;")}}</dt>
+ <dd>Le nombre de pixels physiques pour un pixel CSS.</dd>
+</dl>
+
+<p><br>
+ <strong>Média :</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Gestion des préfixes min/max :</strong> Oui</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.-moz-device-pixel-ratio")}}</p>
diff --git a/files/fr/web/css/@media/-moz-mac-graphite-theme/index.html b/files/fr/web/css/@media/-moz-mac-graphite-theme/index.html
new file mode 100644
index 0000000000..0e40cdfb52
--- /dev/null
+++ b/files/fr/web/css/@media/-moz-mac-graphite-theme/index.html
@@ -0,0 +1,34 @@
+---
+title: '-moz-mac-graphite-theme'
+slug: Web/CSS/@media/-moz-mac-graphite-theme
+tags:
+  - '@media'
+  - CSS
+  - Caractéristique média
+  - Non-standard
+translation_of: Archive/Web/CSS/@media/-moz-mac-graphite-theme
+---
+<div>{{cssref}} {{Non-standard_header}}</div>
+
+<div class="note">
+<p><strong>Note </strong>: Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, cette caractéristique média n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.</p>
+</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Cibler_des_caractéristiques_média">caractéristique média</a> <strong><code>-moz-mac-graphite-theme</code></strong>, rattachée à la règle @  <a href="/fr/docs/Web/CSS/@media" title="The @media CSS at-rule lets you specify declarations that depend on the condition of a media query. The rule may be placed at the top level of your code or nested inside any other conditional group at-rule."><code>@media</code></a>, est spécifique à Gecko et peut être utilisée afin d'appliquer des styles si, sur macOS, l'utilisateur utilise le thème "Graphite".</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<dl>
+ <dt>{{cssxref("&lt;integer&gt;")}}</dt>
+ <dd>Si l'utilisateur a configuré son appareil afin d'utiliser le thème "Graphite" de macOS X, cette caractéristique vaut 1. Sinon, elle vaut 0.</dd>
+</dl>
+
+<p><br>
+ <strong>Média :</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Gestion des préfixes min/max :</strong> Non</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Cette caractéristiquee correspond à la pseudo-classe {{CSSxRef(":-moz-system-metric/mac-graphite-theme", ":-moz-system-metric(mac-graphite-theme)")}}.</li>
+</ul>
diff --git a/files/fr/web/css/@media/-moz-maemo-classic/index.html b/files/fr/web/css/@media/-moz-maemo-classic/index.html
new file mode 100644
index 0000000000..1711266448
--- /dev/null
+++ b/files/fr/web/css/@media/-moz-maemo-classic/index.html
@@ -0,0 +1,30 @@
+---
+title: '-moz-maemo-classic'
+slug: Web/CSS/@media/-moz-maemo-classic
+tags:
+  - '@media'
+  - CSS
+  - Caractéristique média
+  - Non-standard
+translation_of: Archive/Web/CSS/@media/-moz-maemo-classic
+---
+<div>{{CSSRef}}{{Non-standard_Header}}{{Gecko_MinVersion_Header("1.9.2")}}</div>
+
+<p>La <a href="fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Cibler_des_caractéristiques_média">caractérique média</a> <strong><code>-moz-maemo-classic</code></strong>, rattachée à la règle @ <a href="/fr/docs/Web/CSS/@media" title="The @media CSS at-rule lets you specify declarations that depend on the condition of a media query. The rule may be placed at the top level of your code or nested inside any other conditional group at-rule."><code>@media</code></a>, est spécifique à Gecko et permet d'appliquer des styles si l'agent utilisateur utilise le thème Maemo original.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<dl>
+ <dt>{{cssxref("&lt;integer&gt;")}}</dt>
+ <dd>Si l'agent utilisateur utilise Maemo avec le thème original, cette caractéristique vaut 1. Sinon, elle vaut 0.</dd>
+</dl>
+
+<p><br>
+ <strong>Média :</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Gestion des préfixes min/max :</strong> Non.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Cette caractéristique correspond à la pseudo-classe {{CSSxRef(":-moz-system-metric/maemo-classic", ":-moz-system-metric(maemo-classic)")}}.</li>
+</ul>
diff --git a/files/fr/web/css/@media/-moz-os-version/index.html b/files/fr/web/css/@media/-moz-os-version/index.html
new file mode 100644
index 0000000000..5fafbdb5c5
--- /dev/null
+++ b/files/fr/web/css/@media/-moz-os-version/index.html
@@ -0,0 +1,34 @@
+---
+title: '-moz-os-version'
+slug: Web/CSS/@media/-moz-os-version
+tags:
+  - '@media'
+  - CSS
+  - Caractéristique média
+  - Non-standard
+translation_of: Archive/Web/CSS/@media/-moz-os-version
+---
+<div>{{cssref}}{{Non-standard_header}}</div>
+
+<div class="note">
+<p><strong>Note </strong>: Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, cette caractéristique média n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.</p>
+</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Cibler_des_caractéristiques_média">caractéristique média</a> <strong><code>-moz-os-version</code></strong>, rattachée à la règle @ <a href="/fr/docs/Web/CSS/@media" title="The @media CSS at-rule lets you specify declarations that depend on the condition of a media query. The rule may be placed at the top level of your code or nested inside any other conditional group at-rule."><code>@media</code></a>, est spécifique à Gecko et permet d'appliquer des styles en fonction de la version de Windows de l'utilisateur. Cela peut être utile afin d'adapter l'apparence d'une interface utilisateur en fonction de la version du système d'exploitation.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>windows-win7</code></dt>
+ <dd>Le système d'exploitation est Windows 7.</dd>
+ <dt><code>windows-win8</code></dt>
+ <dd>Le système d'exploitation est Windows 8.</dd>
+ <dt><code>windows-win10</code></dt>
+ <dd>Le système d'exploitation est Windows 10.</dd>
+</dl>
+
+<p><br>
+ <strong>Média :</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Gestion des préfixes min/max :</strong> Non</p>
diff --git a/files/fr/web/css/@media/-moz-scrollbar-end-backward/index.html b/files/fr/web/css/@media/-moz-scrollbar-end-backward/index.html
new file mode 100644
index 0000000000..823591be7f
--- /dev/null
+++ b/files/fr/web/css/@media/-moz-scrollbar-end-backward/index.html
@@ -0,0 +1,32 @@
+---
+title: '-moz-scrollbar-end-backward'
+slug: Web/CSS/@media/-moz-scrollbar-end-backward
+tags:
+  - '@media'
+  - CSS
+  - Caractéristique média
+  - Non-standard
+translation_of: Archive/Web/CSS/@media/-moz-scrollbar-end-backward
+---
+<div>{{cssref}}{{Non-standard_header}}</div>
+
+<div class="note">
+<p><strong>Note </strong>: Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, cette caractéristique média n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<dl>
+ <dt>{{cssxref("&lt;integer&gt;")}}</dt>
+ <dd>Si l'interface de l'appareil affiche une flèche à la fin des ascensceurs (<em>scrollbars</em>), cette caractéristique vaut 1 et sinon 0.</dd>
+</dl>
+
+<p><br>
+ <strong>Média :</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Gestion des préfixes min/max :</strong> Non</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La pseudo-classe correspondante {{CSSxRef(":-moz-system-metric/scrollbar-end-backward", ":-moz-system-metric(scrollbar-end-backward)")}}.</li>
+</ul>
diff --git a/files/fr/web/css/@media/-moz-scrollbar-end-forward/index.html b/files/fr/web/css/@media/-moz-scrollbar-end-forward/index.html
new file mode 100644
index 0000000000..2d7bb0dd8a
--- /dev/null
+++ b/files/fr/web/css/@media/-moz-scrollbar-end-forward/index.html
@@ -0,0 +1,32 @@
+---
+title: '-moz-scrollbar-end-forward'
+slug: Web/CSS/@media/-moz-scrollbar-end-forward
+tags:
+  - '@media'
+  - CSS
+  - Caractéristique média
+  - Non-standard
+translation_of: Archive/Web/CSS/@media/-moz-scrollbar-end-forward
+---
+<div>{{cssref}} {{Non-standard_header}}</div>
+
+<div class="note">
+<p><strong>Note </strong>: Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, cette caractéristique média n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<dl>
+ <dt>{{cssxref("&lt;integer&gt;")}}</dt>
+ <dd>Si l'interface de l'appareil affiche un bouton avec une flèche à la fin des ascenseurs (<em>scrollbars</em>), cette caractéristique vaut 1, sinon elle vaut 0.</dd>
+</dl>
+
+<p><br>
+ <strong>Média :</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Gestion des préfixes min/max :</strong> Non</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La pseudo-classe correspondante {{CSSxRef(":-moz-system-metric/scrollbar-end-forward", ":-moz-system-metric(scrollbar-end-forward)")}}</li>
+</ul>
diff --git a/files/fr/web/css/@media/-moz-scrollbar-start-backward/index.html b/files/fr/web/css/@media/-moz-scrollbar-start-backward/index.html
new file mode 100644
index 0000000000..1424cda885
--- /dev/null
+++ b/files/fr/web/css/@media/-moz-scrollbar-start-backward/index.html
@@ -0,0 +1,32 @@
+---
+title: '-moz-scrollbar-start-backward'
+slug: Web/CSS/@media/-moz-scrollbar-start-backward
+tags:
+  - '@media'
+  - CSS
+  - Caractéristique média
+  - Non-standard
+translation_of: Archive/Web/CSS/@media/-moz-scrollbar-start-backward
+---
+<div>{{cssref}} {{Non-standard_header}}</div>
+
+<div class="note">
+<p><strong>Note </strong>: Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, cette caractéristique média n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<dl>
+ <dt>{{cssxref("&lt;integer&gt;")}}</dt>
+ <dd>Si l'interface de l'appareil affiche un bouton avec une flèche vers l'arrière à la fin des ascenseurs (<em>scrollbars</em>), cette caractéristique vaut 1 et sinon 0.</dd>
+</dl>
+
+<p><br>
+ <strong>Média :</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Gestion des préfixes min/max :</strong> non</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La pseudo-classe correspondante {{cssxref(":-moz-system-metric(scrollbar-start-backward)")}}</li>
+</ul>
diff --git a/files/fr/web/css/@media/-moz-scrollbar-start-forward/index.html b/files/fr/web/css/@media/-moz-scrollbar-start-forward/index.html
new file mode 100644
index 0000000000..851323ed06
--- /dev/null
+++ b/files/fr/web/css/@media/-moz-scrollbar-start-forward/index.html
@@ -0,0 +1,32 @@
+---
+title: '-moz-scrollbar-start-forward'
+slug: Web/CSS/@media/-moz-scrollbar-start-forward
+tags:
+  - '@media'
+  - CSS
+  - Caractéristique média
+  - Non-standard
+translation_of: Archive/Web/CSS/@media/-moz-scrollbar-start-forward
+---
+<div>{{cssref}} {{Non-standard_header}}</div>
+
+<div class="note">
+<p><strong>Note </strong>: Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, cette caractéristique média n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<dl>
+ <dt>{{cssxref("&lt;integer&gt;")}}</dt>
+ <dd>Si l'interface de l'appareil affiche une flèche vers l'avant au début des ascenseurs (<em>scrollbars</em>), cette caractéristique vaut 1 et sinon 0.</dd>
+</dl>
+
+<p><br>
+ <strong>Média :</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Gestion des préfixes min/max :</strong> Non.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La pseudo-classe correspondante {{CSSxRef(":-moz-system-metric/scrollbar-start-forward", ":-moz-system-metric(scrollbar-start-forward)")}}.</li>
+</ul>
diff --git a/files/fr/web/css/@media/-moz-scrollbar-thumb-proportional/index.html b/files/fr/web/css/@media/-moz-scrollbar-thumb-proportional/index.html
new file mode 100644
index 0000000000..575085f65a
--- /dev/null
+++ b/files/fr/web/css/@media/-moz-scrollbar-thumb-proportional/index.html
@@ -0,0 +1,32 @@
+---
+title: '-moz-scrollbar-thumb-proportional'
+slug: Web/CSS/@media/-moz-scrollbar-thumb-proportional
+tags:
+  - '@media'
+  - CSS
+  - Caractéristique média
+  - Non-standard
+translation_of: Archive/Web/CSS/@media/-moz-scrollbar-thumb-proportional
+---
+<div>{{cssref}} {{Non-standard_header}}</div>
+
+<div class="note">
+<p><strong>Note </strong>: Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, cette caractéristique média n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<dl>
+ <dt>{{cssxref("&lt;integer&gt;")}}</dt>
+ <dd>Si l'interface de l'appareil affiche une barre de défilement dont la taille est proportionnelle au pourcentage du document visible, cette caractéristique vaut 1 et sinon 0.</dd>
+</dl>
+
+<p><br>
+ <strong>Média :</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Gestion des préfixes min/max :</strong> Non</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La pseudo-classe correspondante {{CSSxRef(":-moz-system-metric/scrollbar-thumb-proportional", ":-moz-system-metric(scrollbar-thumb-proportional)")}}.</li>
+</ul>
diff --git a/files/fr/web/css/@media/-moz-touch-enabled/index.html b/files/fr/web/css/@media/-moz-touch-enabled/index.html
new file mode 100644
index 0000000000..76b8621ab3
--- /dev/null
+++ b/files/fr/web/css/@media/-moz-touch-enabled/index.html
@@ -0,0 +1,46 @@
+---
+title: '-moz-touch-enabled'
+slug: Web/CSS/@media/-moz-touch-enabled
+tags:
+  - '@media'
+  - CSS
+  - Caractéristique média
+  - Non-standard
+translation_of: Archive/Web/CSS/@media/-moz-touch-enabled
+---
+<p>{{CSSRef}}{{Non-standard_Header}}{{Gecko_MinVersion_Header("1.9.2")}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, cette caractéristique média ne peut plus être utilisée pour du contenu web, elle est uniquement accessible pour du code pour le chrome/XUL. Voir {{bug(1396066)}} pour plus de détails.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<dl>
+ <dt>{{cssxref("&lt;integer&gt;")}}</dt>
+ <dd>Cette caractéristique vaut 1 si l'appareil prend en charge les évènements tactiles et 0 sinon.</dd>
+</dl>
+
+<p><br>
+ <strong>Média :</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Gestion des préfixes min/max :</strong> Non</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Cette caractéristique peut être utilisée pour afficher des boutons plus gros si l'utilisateur emploie un appareil tactile.</p>
+
+<pre class="brush: css">button {
+  padding: .5em;
+}
+
+@media (-moz-touch-enabled) {
+  button {
+    padding: 1em;
+  }
+}</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Cette fonctionnalité correspond à la pseudo-classe {{CSSxRef(":-moz-system-metric/touch-enabled", ":-moz-system-metric(touch-enabled)")}}.</li>
+</ul>
diff --git a/files/fr/web/css/@media/-moz-windows-accent-color-in-titlebar/index.html b/files/fr/web/css/@media/-moz-windows-accent-color-in-titlebar/index.html
new file mode 100644
index 0000000000..3b2937525c
--- /dev/null
+++ b/files/fr/web/css/@media/-moz-windows-accent-color-in-titlebar/index.html
@@ -0,0 +1,46 @@
+---
+title: '-moz-windows-accent-color-in-titlebar'
+slug: Web/CSS/@media/-moz-windows-accent-color-in-titlebar
+tags:
+  - '@media'
+  - CSS
+  - Caractéristique média
+  - Non-standard
+translation_of: Archive/Web/CSS/@media/-moz-windows-accent-color-in-titlebar
+---
+<div>{{cssref}} {{Non-standard_header}}</div>
+
+<div class="note">
+<p><strong>Note </strong>: Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, cette caractéristique média n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.</p>
+</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Cibler_des_caractéristiques_média">caractéristique média</a> <code><strong>-moz-windows-accent-color-in-titlebar</strong></code>, spécifique à Gecko et rattachée à la règle @ <a href="/fr/docs/Web/CSS/@media" title="The @media CSS at-rule lets you specify declarations that depend on the condition of a media query. The rule may be placed at the top level of your code or nested inside any other conditional group at-rule."><code>@media</code></a>, peut-être utilisée afin d'appliquer des styles selon que les couleurs d'accentuation de Microsoft Windows pour les barres de titres sont activées ou non.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<dl>
+ <dt>{{cssxref("&lt;integer&gt;")}}</dt>
+ <dd>Cette caractéristique vaut 1 si les couleurs d'accentuation sont activées pour les barres de titre des fenêtres (pour les versions récentes de Windows, par exemple Windows 10). Sinon, elle vaut 0.</dd>
+</dl>
+
+<p><br>
+ <strong>Média :</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Gestion des préfixes min/max :</strong> non</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">@media (-moz-windows-accent-color-in-titlebar: 1) {
+  h1 {
+    color: -moz-win-accentcolortext;
+  }
+
+  body {
+    background-color: -moz-win-accentcolor;
+  }
+}</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Cette caractéristique est liée aux valeurs {{cssxref("&lt;color&gt;")}} <code>-moz-win-accentcolor</code> et <code>-moz-win-accentcolortext</code> qui permettent d'accéder aux couleurs d'accentuation de Windows depuis CSS.</li>
+</ul>
diff --git a/files/fr/web/css/@media/-moz-windows-classic/index.html b/files/fr/web/css/@media/-moz-windows-classic/index.html
new file mode 100644
index 0000000000..eed112dbf8
--- /dev/null
+++ b/files/fr/web/css/@media/-moz-windows-classic/index.html
@@ -0,0 +1,34 @@
+---
+title: '-moz-windows-classic'
+slug: Web/CSS/@media/-moz-windows-classic
+tags:
+  - '@media'
+  - CSS
+  - Caractéristique média
+  - Non-standard
+translation_of: Archive/Web/CSS/@media/-moz-windows-classic
+---
+<div>{{cssref}} {{Non-standard_header}}</div>
+
+<div class="note">
+<p><strong>Note </strong>: Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, cette caractéristique média n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<dl>
+ <dt>{{cssxref("&lt;integer&gt;")}}</dt>
+ <dd>Cette caractéristique vaut 1 si l'utilisateur utilise Windows sans aucun thème (c'est-à-dire en mode classique plutôt qu'en mode uxtheme). Sinon, elle vaut 0.</dd>
+</dl>
+
+<p><br>
+ <strong>Média :</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Gestion des prefixes min/max :</strong> non</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Cette caractéristique correspond à la pseudo-classe {{CSSxRef(":-moz-system-metric/windows-classic", ":-moz-system-metric(windows-classic)")}}</li>
+ <li>{{CSSxRef("@media/-moz-windows-default-theme", "-moz-windows-default-theme")}}</li>
+ <li>{{CSSxRef("@media/-moz-windows-theme", "-moz-windows-theme")}}</li>
+</ul>
diff --git a/files/fr/web/css/@media/-moz-windows-compositor/index.html b/files/fr/web/css/@media/-moz-windows-compositor/index.html
new file mode 100644
index 0000000000..c590e35390
--- /dev/null
+++ b/files/fr/web/css/@media/-moz-windows-compositor/index.html
@@ -0,0 +1,32 @@
+---
+title: '-moz-windows-compositor'
+slug: Web/CSS/@media/-moz-windows-compositor
+tags:
+  - '@media'
+  - CSS
+  - Caractéristique média
+  - Non-standard
+translation_of: 'Archive/Web/CSS/:-moz-system-metric/-moz-windows-compositor'
+---
+<div>{{cssref}} {{Non-standard_header}}</div>
+
+<div class="note">
+<p><strong>Note </strong>: Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, cette caractéristique média n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<dl>
+ <dt>{{cssxref("&lt;integer&gt;")}}</dt>
+ <dd>Cette caractéristique vaut 1 si l'utilisateur utilise Windows avec le compositeur DWM. Sinon, elle vaut 0.</dd>
+</dl>
+
+<p><br>
+ <strong>Média :</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Gestion des préfixes min/max :</strong> non</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La pseudo-classe correspondante {{CSSxRef(":-moz-system-metric/windows-compositor", ":-moz-system-metric(windows-compositor)")}}</li>
+</ul>
diff --git a/files/fr/web/css/@media/-moz-windows-default-theme/index.html b/files/fr/web/css/@media/-moz-windows-default-theme/index.html
new file mode 100644
index 0000000000..8a84ca3119
--- /dev/null
+++ b/files/fr/web/css/@media/-moz-windows-default-theme/index.html
@@ -0,0 +1,34 @@
+---
+title: '-moz-windows-default-theme'
+slug: Web/CSS/@media/-moz-windows-default-theme
+tags:
+  - '@media'
+  - CSS
+  - Caractéristique média
+  - Non-standard
+translation_of: Archive/Web/CSS/@media/-moz-windows-default-theme
+---
+<div>{{cssref}} {{Non-standard_header}}</div>
+
+<div class="note">
+<p><strong>Note </strong>: Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, cette caractéristique média n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<dl>
+ <dt>{{cssxref("&lt;integer&gt;")}}</dt>
+ <dd>Si l'utilisateur utilise un thème Windows par défaut (Luna, Royale, Zune ou Aero (incluant Vista Basic, Vista Advanced et Aero Glass)), cette caractéristique vaut 1 et sinon elle vaut 0.</dd>
+</dl>
+
+<p><br>
+ <strong>Média :</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Gestion des préfixes min/max :</strong> non</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La pseudo-classe correspondante {{CSSxRef(":-moz-system-metric(windows-default-theme)")}}</li>
+ <li>{{CSSxRef("@media/-moz-windows-classic", "-moz-windows-classic")}}</li>
+ <li>{{CSSxRef("@media/-moz-windows-theme", "-moz-windows-theme")}}</li>
+</ul>
diff --git a/files/fr/web/css/@media/-moz-windows-glass/index.html b/files/fr/web/css/@media/-moz-windows-glass/index.html
new file mode 100644
index 0000000000..9fdccd49a6
--- /dev/null
+++ b/files/fr/web/css/@media/-moz-windows-glass/index.html
@@ -0,0 +1,25 @@
+---
+title: '-moz-windows-glass'
+slug: Web/CSS/@media/-moz-windows-glass
+tags:
+  - '@media'
+  - CSS
+  - Caractéristique média
+  - Non-standard
+translation_of: Archive/Web/CSS/@media/-moz-windows-glass
+---
+<div>{{cssref}} {{Non-standard_header}}</div>
+
+<div class="note">
+<p><strong>Note </strong>: Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, cette caractéristique média n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<dl>
+ <dt>{{cssxref("&lt;integer&gt;")}}</dt>
+ <dd>Cette caractéristique vaut 1 si l'utilisateur utilise l thème Windows Glass et 0 sinon. Note : ce thème n'existe que pour Windows 7 et les versions antérieures.</dd>
+</dl>
+
+<p><strong>Média :</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Gestion des préfixes min/max :</strong> non</p>
diff --git a/files/fr/web/css/@media/-moz-windows-theme/index.html b/files/fr/web/css/@media/-moz-windows-theme/index.html
new file mode 100644
index 0000000000..c0bebdf7f1
--- /dev/null
+++ b/files/fr/web/css/@media/-moz-windows-theme/index.html
@@ -0,0 +1,43 @@
+---
+title: '-moz-windows-theme'
+slug: Web/CSS/@media/-moz-windows-theme
+tags:
+  - '@media'
+  - CSS
+  - Caractéristique média
+  - Non-standard
+translation_of: Archive/Web/CSS/@media/-moz-windows-theme
+---
+<div>{{cssref}} {{Non-standard_header}}</div>
+
+<div class="note">
+<p><strong>Note </strong>: Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, cette caractéristique média n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.</p>
+</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Cibler_des_caractéristiques_média">caractéristique média</a> <strong><code>-moz-windows-theme</code></strong>, spécifique à Gecko et rattachée à la règle @ <a href="/fr/docs/Web/CSS/@media" title="The @media CSS at-rule lets you specify declarations that depend on the condition of a media query. The rule may be placed at the top level of your code or nested inside any other conditional group at-rule."><code>@media</code></a>, permet de personnaliser les éléments d'interfaces afin que ceux-ci soient bien intégrés par rapport au thème Windows utilisé par l'utilisateur.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La caractéristique <code>-moz-windows-theme</code> est un mot-clé indiquant le thème Windows actuellement utilisé.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<ul>
+ <li><code>aero</code></li>
+ <li><code>luna-blue</code></li>
+ <li><code>luna-olive</code></li>
+ <li><code>luna-silver</code></li>
+ <li><code>royale</code></li>
+ <li><code>generic</code></li>
+ <li><code>zune</code></li>
+</ul>
+
+<p><strong>Média :</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Gestion des préfixes min/max :</strong> non</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{CSSxRef("@media/-moz-windows-classic", "-moz-windows-classic")}}</li>
+ <li>{{CSSxRef("@media/-moz-windows-default-theme", "-moz-windows-default-theme")}}</li>
+</ul>
diff --git a/files/fr/web/css/@media/-webkit-animation/index.html b/files/fr/web/css/@media/-webkit-animation/index.html
new file mode 100644
index 0000000000..bdb863a659
--- /dev/null
+++ b/files/fr/web/css/@media/-webkit-animation/index.html
@@ -0,0 +1,38 @@
+---
+title: '-webkit-animation'
+slug: Web/CSS/@media/-webkit-animation
+tags:
+  - CSS
+  - Caractéristique média
+  - Non-standard
+  - Reference
+translation_of: Web/CSS/@media/-webkit-animation
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p><strong><code>-webkit-animation</code></strong> est une <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Cibler_des_caractéristiques_média">caractéristique média</a> booléenne non-standard qui permet d'indiquer si les animationsCSS ({{cssxref("animation")}}) sont prises en charge dans leurs versions préfixées. Cette caractéristique est uniquement prise en charge par les navigateurs basés sur WebKit. L'alternative standard correspondante consiste à utiliser {{cssxref("@supports")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">@media (-webkit-animation) {
+  /* CSS à utiliser si les animations sont prises en charge */
+} </pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette caractéristique média est une caractéristique média propriétaire liée à WebKit/Blink. Elle ne fait partie d'aucune spécification. Elle est décrite plus en détails dans la <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3">référence CSS Apple pour Safari (en anglais)</a>.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.-webkit-animation")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("-webkit-transform-3d")}}</li>
+ <li>{{cssxref("-webkit-transform-2d")}}</li>
+ <li>{{cssxref("-webkit-transition")}}</li>
+ <li><a href="http://www.quirksmode.org/css/tests/mediaqueries/animation.html">Page de test sur quirksmode.org</a></li>
+</ul>
diff --git a/files/fr/web/css/@media/-webkit-device-pixel-ratio/index.html b/files/fr/web/css/@media/-webkit-device-pixel-ratio/index.html
new file mode 100644
index 0000000000..189f3d58b7
--- /dev/null
+++ b/files/fr/web/css/@media/-webkit-device-pixel-ratio/index.html
@@ -0,0 +1,119 @@
+---
+title: '-webkit-device-pixel-ratio'
+slug: Web/CSS/@media/-webkit-device-pixel-ratio
+tags:
+  - CSS
+  - Caractéristique média
+  - Non-standard
+  - Reference
+translation_of: Web/CSS/@media/-webkit-device-pixel-ratio
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p><strong><code>-webkit-device-pixel-ratio</code></strong> est une caractéristique média non-standard, alternative à la caractéristique média standard {{cssxref("@media/resolution","resolution")}}.</p>
+
+<p>Sa valeur correspond au nombre de pixels physiques utilisés par l'appareil pour représenter <a href="/fr/docs/Web/CSS/length#Unités_de_longueur_absolues">un pixel CSS (<code>px</code>)</a>. Bien que la valeur soit de type {{cssxref("&lt;number&gt;")}}, sans unité donc, l'unité implicite est <a href="/fr/docs/Web/CSS/resolution#Unités"><code>dppx</code></a>.</p>
+
+<div class="warning">
+<p><strong>Attention !</strong> Cette caractéristique est spécifique à WebKit. Tant que possible, on utilisera {{cssxref("@media/resolution","resolution")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p><strong><code>-webkit-device-pixel-ratio</code></strong> est une valleur décrivant un intervalle. On peut également utiliser <strong><code>-webkit-min-device-pixel-ratio</code></strong> et <strong><code>-webkit-max-device-pixel-ratio</code></strong> pour fixer un seuil minimum/maximum.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;number&gt;")}}</dt>
+ <dd>Le nombre de pixels physiques pour chaque pixel (<code><a href="/fr/docs/Web/CSS/length#Unités_de_longueur_absolues">px</a></code>) CSS. Bien que la valeur soit un nombre et ne permette pas d'utiliser des unités, l'unité implicite est <code><a href="/fr/docs/Web/CSS/resolution#dppx">dppx</a></code>.</dd>
+</dl>
+
+<h2 id="Implémentation">Implémentation</h2>
+
+<pre class="brush: css">/* Unité dppx implicite */
+@media (-webkit-min-device-pixel-ratio: 2) { ... }
+/* équivalent à */
+@media (min-resolution: 2dppx) { ... }
+
+/* De même */
+@media (-webkit-max-device-pixel-ratio: 2) { ... }
+/* équivalent à */
+@media (max-resolution: 2dppx) { ... }
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* Résolution exacte */
+@media (-webkit-device-pixel-ratio: 1) {
+  p {
+    color: red;
+  }
+}
+
+/* Résolution minimale */
+@media (-webkit-min-device-pixel-ratio: 1.1) {
+  p {
+    font-size: 1.5em;
+  }
+}
+
+/* Résolution maximale */
+@media (-webkit-max-device-pixel-ratio: 3) {
+  p {
+    background: yellow;
+  }
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Voici un test pour la densité de pixel de votre appareil.&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Compat', '#css-media-queries-webkit-device-pixel-ratio', '-webkit-device-pixel-ratio')}}</td>
+   <td>{{Spec2('Compat')}}</td>
+   <td>Définition initiale dans un standard.</td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3" hreflang="en" lang="en">Safari CSS Reference<br>
+    <small lang="en-US">'media query extensions' in that document.</small></a></td>
+   <td>Documentation non-officielle, non-standard.</td>
+   <td>Documentation initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.-webkit-device-pixel-ratio")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("@media/resolution","resolution")}}</li>
+ <li>{{cssxref("-webkit-transition")}}</li>
+ <li>{{cssxref("-webkit-transform-3d")}}</li>
+ <li>{{cssxref("-webkit-transform-2d")}}</li>
+ <li>{{cssxref("-webkit-animation")}}</li>
+ <li><a href="https://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/">Article du W3C pour éviter le préfixe</a></li>
+</ul>
diff --git a/files/fr/web/css/@media/-webkit-transform-2d/index.html b/files/fr/web/css/@media/-webkit-transform-2d/index.html
new file mode 100644
index 0000000000..70111c8f46
--- /dev/null
+++ b/files/fr/web/css/@media/-webkit-transform-2d/index.html
@@ -0,0 +1,36 @@
+---
+title: '-webkit-transform-2d'
+slug: Web/CSS/@media/-webkit-transform-2d
+tags:
+  - CSS
+  - Caractéristique média
+  - Non-standard
+  - Reference
+translation_of: Web/CSS/@media/-webkit-transform-2d
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p><strong><code>-webkit-transform-2d</code></strong> est une <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Cibler_des_caractéristiques_média">caractéristique média</a> booléenne non-standard qui indique si les transformations CSS en 2D (cf. {{cssxref("transform")}}) préfixées sont prises en charge par le navigateur.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Cette caractéristique est uniquement prise en charge par WebKit et Blink. Mieux vaut utiliser la méthode alternative standard avec {{cssxref("@supports")}} à la place si possible.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette caractéristique média est une caractéristique média propriétaire liée à WebKit/Blink. Elle ne fait partie d'aucune spécification. Elle est décrite plus en détails dans la <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3">référence CSS Apple pour Safari (en anglais)</a> .</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.-webkit-transform-2d")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("-webkit-transition")}}</li>
+ <li>{{cssxref("-webkit-transform-3d")}}</li>
+ <li>{{cssxref("-webkit-animation")}}</li>
+ <li><a href="http://www.quirksmode.org/css/tests/mediaqueries/animation.html">Page de test sur quirksmode.org</a></li>
+</ul>
diff --git a/files/fr/web/css/@media/-webkit-transform-3d/index.html b/files/fr/web/css/@media/-webkit-transform-3d/index.html
new file mode 100644
index 0000000000..90db3f262d
--- /dev/null
+++ b/files/fr/web/css/@media/-webkit-transform-3d/index.html
@@ -0,0 +1,71 @@
+---
+title: '-webkit-transform-3d'
+slug: Web/CSS/@media/-webkit-transform-3d
+tags:
+  - CSS
+  - Caractéristique média
+  - Non-standard
+  - Reference
+translation_of: Web/CSS/@media/-webkit-transform-3d
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p><strong><code>-webkit-transform-3d</code></strong> est une <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Cibler_des_caractéristiques_média">caractéristique média</a> booléenne non-standard qui indique si les transformations CSS en 3D (cf. {{cssxref("transform")}}) préfixées sont prises en charge par le navigateur.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Cette caractéristique est uniquement prise en charge par WebKit et Blink. Une méthode alternative standard consiste à utiliser {{cssxref("@supports")}} à la place.</p>
+</div>
+
+<h2 id="Exmple">Exmple</h2>
+
+<pre class="brush: css">@media (-webkit-transform-3d) {
+  .toto {
+    transform-style: preserve-3d;
+  }
+}
+
+@media (-webkit-transform-3d: 1) {
+  .toto {
+    transform-style: preserve-3d;
+  }
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Compat', '#css-media-queries-webkit-transform-3d', '-webkit-transform-3d')}}</td>
+   <td>{{Spec2('Compat')}}</td>
+   <td>Définition initiale dans un standard.</td>
+  </tr>
+  <tr>
+   <td><a class="external external-icon" href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3" hreflang="en" lang="en">Safari CSS Reference<br>
+    <small lang="en-US">'media query extensions' in that document.</small></a></td>
+   <td>Documentation non-officielle, non-standard.</td>
+   <td>Documentation initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.-webkit-transform-3d")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("@media/-webkit-transform-2d", "-webkit-transform-2d")}}</li>
+ <li>{{cssxref("@media/-webkit-transition", "-webkit-transition")}}</li>
+ <li>{{cssxref("@media/-webkit-animation", "-webkit-animation")}}</li>
+ <li><a href="http://www.quirksmode.org/css/tests/mediaqueries/animation.html">Page de test sur quirksmode.org</a></li>
+</ul>
diff --git a/files/fr/web/css/@media/-webkit-transition/index.html b/files/fr/web/css/@media/-webkit-transition/index.html
new file mode 100644
index 0000000000..a2fe3ef854
--- /dev/null
+++ b/files/fr/web/css/@media/-webkit-transition/index.html
@@ -0,0 +1,51 @@
+---
+title: '-webkit-transition'
+slug: Web/CSS/@media/-webkit-transition
+tags:
+  - CSS
+  - Caractéristique média
+  - Non-standard
+  - Obsolete
+  - Reference
+translation_of: Web/CSS/@media/-webkit-transition
+---
+<div>{{CSSRef}}{{Non-standard_header}}{{obsolete_header}}</div>
+
+<p><strong><code>-webkit-transition</code></strong> est une <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Cibler_des_caractéristiques_média">caractéristique média</a> booléenne non-standard qui permet d'indiquer si les transitions CSS ({{cssxref("transition")}}) sont prises en charge dans leurs versions préfixées.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Cette caractéristique est uniquement prise en charge par les navigateurs basés sur WebKit. L'alternative standard correspondante consiste à utiliser {{cssxref("@supports")}}.</p>
+</div>
+
+<h2 id="Privilégier_supports">Privilégier <code>@supports</code></h2>
+
+<p>S'il vous faut déterminer si les transitions CSS sont prises en charges, évitez d'utiliser <code>-webkit-transition</code>. En lieu et place, on utilisera la règle @ {{cssxref("@supports")}} :</p>
+
+<pre class="brush: css">@supports(transition: initial) {
+  /* Les règles CSS à utiliser si   */
+  /* les transitions sont prises en */
+  /* charge. */
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette caractéristique média est une caractéristique média propriétaire liée à WebKit/Blink. Elle ne fait partie d'aucune spécification. Elle est décrite plus en détails dans la <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3">référence CSS Apple pour Safari (en anglais)</a>.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.-webkit-transition")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries">Utiliser les media queries</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS">Utiliser les transitions CSS</a></li>
+ <li>{{cssxref("@supports")}}</li>
+ <li>{{cssxref("transition")}}</li>
+ <li>{{cssxref("-webkit-transform-3d")}}</li>
+ <li>{{cssxref("-webkit-transform-2d")}}</li>
+ <li>{{cssxref("-webkit-animation")}}</li>
+ <li><a href="http://www.quirksmode.org/css/tests/mediaqueries/animation.html">Page de test sur quirksmode.org</a></li>
+</ul>
diff --git a/files/fr/web/css/@media/any-hover/index.html b/files/fr/web/css/@media/any-hover/index.html
new file mode 100644
index 0000000000..c4c315b0e9
--- /dev/null
+++ b/files/fr/web/css/@media/any-hover/index.html
@@ -0,0 +1,72 @@
+---
+title: any-hover
+slug: Web/CSS/@media/any-hover
+tags:
+  - CSS
+  - Caractéristique média
+  - Reference
+translation_of: Web/CSS/@media/any-hover
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>any-hover</code></strong> est une caractéristique média CSS qui permet de vérifier si un mécanisme de saisie/d'entrée permet à l'utilisateur de survoler les éléments.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La caractéristique <code>any-hover</code> est définie avec un mot-clé parmi ceux de la liste ci-après.</p>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Parmi les mécanismes de saisi, aucun ne permet de survoler les éléments (ou il n'existe aucun dispositif de pointage).</dd>
+ <dt><code>hover</code></dt>
+ <dd>Un ou plusieurs mécanismes de saisie permettent de survoler le contenu simplement.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;a href="#"&gt;Essayez de me survoler !&lt;/a&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@media (any-hover: hover) {
+  a:hover {
+    background: yellow;
+  }
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#descdef-media-any-hover', 'any-hover')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.any-hover")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/@media/hover">La caractéristique média <code>hover</code></a></li>
+</ul>
diff --git a/files/fr/web/css/@media/any-pointer/index.html b/files/fr/web/css/@media/any-pointer/index.html
new file mode 100644
index 0000000000..abec9dcecb
--- /dev/null
+++ b/files/fr/web/css/@media/any-pointer/index.html
@@ -0,0 +1,105 @@
+---
+title: any-pointer
+slug: Web/CSS/@media/any-pointer
+tags:
+  - CSS
+  - Caractéristique média
+  - Reference
+translation_of: Web/CSS/@media/any-pointer
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>any-pointer</code></strong> est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui peut être utilisée afin de déterminer si un des mécanismes de saisie/d'entrée disponibles est un dispositif de pointage et sa précision le cas échéant.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Si on souhaite tester la précision du mécanisme de pointage <em>principal</em>, on pourra utiliser la caractéristique <code><a href="/fr/docs/Web/CSS/@media/pointer">pointer</a></code> à la place.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La caractéristique <code>any-pointer</code> est définie comme un mot-clé parmi ceux de la liste ci-après.</p>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>L'appareil ne dispose d'aucun dispositif de pointage.</dd>
+ <dt><code>coarse</code></dt>
+ <dd>Il existe au moins un mécanisme d'entrée qui est un dispositif de pointage et pour lequel la précision est limitée.</dd>
+ <dt><code>fine</code></dt>
+ <dd>Il existe au moins un mécanisme d'entrée qui est un dispositif de pointage et pour lequel la précision est fine.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> Plusieurs valeurs peuvent correspondre si l'appareil dispose de dispositifs de pointage différents. Toutefois, la valeur <code>none</code> ne sera utilisée que lorsqu'aucun dispositif de pointage ne sera détecté.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, on crée une petite case à cocher pour les utilisateurs qui disposent d'un pointage précis et une case à cocher plus grande lorsque le mécanisme de pointage est moins précis.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input id="test" type="checkbox" /&gt;
+&lt;label for="test"&gt;Coucou !&lt;/label&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input[type="checkbox"]:checked {
+  background: gray;
+}
+
+@media (any-pointer: fine) {
+  input[type="checkbox"] {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    width: 15px;
+    height: 15px;
+    border: 1px solid blue;
+  }
+}
+
+@media (any-pointer: coarse) {
+  input[type="checkbox"] {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    width: 30px;
+    height: 30px;
+    border: 2px solid red;
+  }
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#descdef-media-any-pointer', 'any-pointer')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.any-pointer")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/@media/pointer">La caractéristique média <code>pointer</code></a></li>
+</ul>
diff --git a/files/fr/web/css/@media/aspect-ratio/index.html b/files/fr/web/css/@media/aspect-ratio/index.html
new file mode 100644
index 0000000000..085c611aa0
--- /dev/null
+++ b/files/fr/web/css/@media/aspect-ratio/index.html
@@ -0,0 +1,111 @@
+---
+title: aspect-ratio
+slug: Web/CSS/@media/aspect-ratio
+tags:
+  - CSS
+  - Caractéristique média
+  - Reference
+translation_of: Web/CSS/@media/aspect-ratio
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>aspect-ratio</code></strong> est une caractéristique média CSS dont la valeur correspond au ratio ({{cssxref("&lt;ratio&gt;")}}) entre la largeur et la hauteur de la zone d'affichage (<em>viewport</em>).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La caractéristique <code>aspect-ratio</code> est définie avec un ratio (type CSS {{cssxref("&lt;ratio&gt;")}}) qui représente le ratio entre la largeur et la hauteur de la zone d'affichage . C'est une caractéristique d'intervalle ce qui signifie qu'on peut utiliser les variantes préfixées <strong><code>min-aspect-ratio</code></strong> et <code><strong>max-aspect-ratio</strong></code> afin de cibler des règles CSS en fonction d'une valeur minimale ou maximale.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<div class="note">
+<p><strong>Note :</strong> L'exemple suivant est contenu dans un élément {{HTMLElement("iframe")}} et crée donc sa propre zone d'affichage (<em>viewport</em>), vous pouvez redimensionner l'<code>iframe</code> afin d'observer l'effet d'<code>aspect-ratio</code>.</p>
+</div>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;label id="wf" for="w"&gt;width:165&lt;/label&gt;
+&lt;input id="w" name="w" type="range" min="100" max="250" step="5" value="165"&gt;
+&lt;label id="hf" for="w"&gt;height:165&lt;/label&gt;
+&lt;input id="h" name="h" type="range" min="100" max="250" step="5" value="165"&gt;
+
+&lt;iframe id="outer" src="data:text/html,
+  &lt;style&gt;
+    @media (min-aspect-ratio: 8/5) {
+      div {
+        background: %239af;
+      }
+    }
+    @media (max-aspect-ratio: 3/2) {
+      div {
+        background: %239ff;
+      }
+    }
+    @media (aspect-ratio: 1/1) {
+      div {
+        background: %23f9a;
+      }
+    }
+  &lt;/style&gt;
+  &lt;div id='inner'&gt;
+    Vous pouvez redimensionner le viewport en largeur
+    et en hauteur pour voir l'effet.
+  &lt;/div&gt;
+"&gt;
+
+&lt;/iframe&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">iframe{
+  display:block;
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">outer.style.width=outer.style.height="165px"
+
+w.onchange=w.oninput=function(){
+  outer.style.width=w.value+"px"
+  wf.textContent="width:"+w.value
+}
+h.onchange=h.oninput=function(){
+  outer.style.height=h.value+"px"
+  hf.textContent="height:"+h.value
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<div style="overflow: auto;">
+<p>{{EmbedLiveSample('Exemples')}}</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#aspect-ratio', 'aspect-ratio')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#aspect-ratio', 'aspect-ratio')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.aspect-ratio")}}</p>
diff --git a/files/fr/web/css/@media/aural/index.html b/files/fr/web/css/@media/aural/index.html
new file mode 100644
index 0000000000..3de1642213
--- /dev/null
+++ b/files/fr/web/css/@media/aural/index.html
@@ -0,0 +1,42 @@
+---
+title: aural
+slug: Web/CSS/@media/aural
+tags:
+  - CSS
+  - Déprécié
+  - Obsolete
+  - Reference
+translation_of: Web/CSS/@media/aural
+---
+<div>{{CSSRef}}{{obsolete_header("6.0")}} {{deprecated_header}}</div>
+
+<p>Un <a href="/fr/docs/Web/CSS/@media#Groupes_de_médias">groupe de médias</a> défini par les standards <a href="/fr/docs/Web/CSS">CSS</a>.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Ce groupe de médias n'a jamais été complètement implémenté dans Gecko et a été supprimé dans {{Gecko("6.0")}}. C'est le type de média <a href="/fr/docs/Web/CSS/@media#speech">speech</a> qui le remplace.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://www.w3.org/TR/CSS2/aural.html#q19.0">CSS Level 2</a></td>
+   <td>Dépréciation</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/@media">@media</a></li>
+</ul>
diff --git a/files/fr/web/css/@media/color-gamut/index.html b/files/fr/web/css/@media/color-gamut/index.html
new file mode 100644
index 0000000000..1762310821
--- /dev/null
+++ b/files/fr/web/css/@media/color-gamut/index.html
@@ -0,0 +1,68 @@
+---
+title: color-gamut
+slug: Web/CSS/@media/color-gamut
+tags:
+  - CSS
+  - Caractéristique média
+  - Reference
+translation_of: Web/CSS/@media/color-gamut
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>color-gamut</code></strong> est une caractéristique média dont la valeur décrit l'intervalle approximatif des couleurs qui sont prises en charge par l'agent utilisateur et l'appareil responsable de l'affichage.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La caractéristique <code>color-gamut</code> est définie avec un mot-clé parmi ceux de la liste ci-après.</p>
+
+<dl>
+ <dt><code>srgb</code></dt>
+ <dd>L'appareil d'affichage prend approximativement en charge l'espace de couleurs <a href="https://en.wikipedia.org/wiki/SRGB">sRGB</a> ou un espace plus grand. Cela correspond à la majorité des appareils d'affichage.</dd>
+ <dt><code>p3</code></dt>
+ <dd>L'appareil d'affichage prend approximativement en charge l'espace de couleurs spécifié par <a href="https://en.wikipedia.org/wiki/DCI-P3">l'espace de couleur DCI P3</a> ou un espace plus grand; L'espace p3 est plus grand (et inclut) l'espace srgb.</dd>
+ <dt><code>rec2020</code></dt>
+ <dd>L'appareil d'affichage prend approximativement l'espace de couleurs spécifié par <a href="https://en.wikipedia.org/wiki/Rec._2020">l'espace de couleurs ITU-R Recommendation BT.2020</a> ou un espace plus grand. L'espace rec2020 est plus grand (et inclut) l'espace p3.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Un test simple.&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@media (color-gamut: srgb) {
+  p {
+    background: #f4ae8a;
+  }
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#color-gamut', 'color-gamut')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.color-gamut")}}</p>
diff --git a/files/fr/web/css/@media/color-index/index.html b/files/fr/web/css/@media/color-index/index.html
new file mode 100644
index 0000000000..66d460206d
--- /dev/null
+++ b/files/fr/web/css/@media/color-index/index.html
@@ -0,0 +1,84 @@
+---
+title: color-index
+slug: Web/CSS/@media/color-index
+tags:
+  - CSS
+  - Caractéristique média
+  - Reference
+translation_of: Web/CSS/@media/color-index
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>color-index</code></strong> est une caractéristique média CSS (cf. {{cssxref("@media")}}) dont la valeur correspond au nombre d'entrées que comporte la palette de couleurs du périphérique de sortie, ou zéro si ce dernier n'en utilise pas.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La caractéristique <code>color-index</code> est définie sous la forme d'un entier (type {{cssxref("&lt;integer&gt;")}}) et représente le nombre d'entrées de la palette de couleurs de l'appareil d'affichage (ou zéro si l'appareil n'utilise pas une telle palette). C'est une caractéristique d'intervalle ce qui signifie qu'on peut utiliser les variantes préfixées <strong><code>min-color-index</code></strong> et <code><strong>max-color-index</strong></code> afin cibler des règles en fonction d'un minimum ou d'un maximum.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;Un test simple.&lt;/p&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">p {
+  color: black;
+}
+
+@media (color-index) {
+  p {
+    color: red;
+  }
+}
+
+@media (min-color-index: 15000) {
+  p {
+    color: #1475ef;
+  }
+}</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemple_simple")}}</p>
+
+<h3 id="Feuille_de_style_personnalisée">Feuille de style personnalisée</h3>
+
+<p>Ce fragment HTML permet d'appliquer une feuille de style spécifique pour les appareils qui disposent d'au moins 256 couleurs.</p>
+
+<pre class="brush: html"><code>&lt;link rel="stylesheet" href="http://toto.truc.com/base.css" /&gt;
+&lt;link rel="stylesheet" media="all and (min-color-index: 256)" href="http://toto.truc.com/feuille_style_couleurs.css" /&gt;</code></pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Etat</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#color-index', 'color-index')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>La valeur peut désormais être négative (ce qui correspond à un booléen faux).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#color-index', 'color-index')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>Définition initiale, la valeur ne peut pas être négative.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.color-index")}}</p>
diff --git a/files/fr/web/css/@media/color/index.html b/files/fr/web/css/@media/color/index.html
new file mode 100644
index 0000000000..76d79bf25c
--- /dev/null
+++ b/files/fr/web/css/@media/color/index.html
@@ -0,0 +1,94 @@
+---
+title: color
+slug: Web/CSS/@media/color
+tags:
+  - CSS
+  - Caractéristique média
+  - Reference
+translation_of: Web/CSS/@media/color
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>color</code></strong> est une caractéristique média CSS (cf. {{cssxref("@media")}}) dont la valeur est le nombre de bits par composante de couleur du périphérique de sortie, ou zéro si ce dernier ne gère pas les couleurs.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La caractéristique <code>color</code> est définie avec un entier (type CSS {{cssxref("&lt;integer&gt;")}}) et représente le nombre de bits utiisé par l'appareil d'affichage pour représenter chaque composante de couleur. Si l'appareil ne gère pas les couleurs, la valeur sera zéro. C'est une caractéristique d'intervalle ce qui signifie qu'on peut utiliser les variantes préfixées <strong><code>min-color</code></strong> et <code><strong>max-color</strong></code> afin de cibler des règles en fonction d'un minimum ou d'un maximum.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Si les différentes composantes sont représentées sur un nombre différent de bits, c'est le plus petit de ces nombres qui est utilisé. Par exemple, si un affichage utilise 5 bits pour le bleu et le rouge mais 6 bits pour le vert, on considèrera que l'appareil utilise 5 bits par couleur. Si l'appareil utilise des couleur indexées, c'est le nombre minimal de bits par composantes parmi les couleurs de l'index qui est utilisé.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+   Ce texte sera noir pour les appareils qui ne prennent en charge
+   aucune couleur, rouge pour ceux qui prennent peu de couleurs en
+   charge et vert sinon.
+&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  color: black;
+}
+
+/* Tout appareil qui gère des couleurs */
+@media (color) {
+  p {
+    color: red;
+  }
+}
+
+/* Tout appareil qui gère des couleurs avec */
+/* au moins 8 bits par composante */
+@media (min-color: 8) {
+  p {
+    color: #24ba13;
+  }
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#color', 'color')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>Définition initiale, la valeur ne peut pas être négative.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#color', 'color')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>La valeur peut désormais être négative (ce qui correspond alors à un booléen faux).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.color")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/HTML/Applying_color">Appliquer des couleurs HTML à CSS</a></li>
+ <li>La propriété CSS {{cssxref("color")}}</li>
+ <li>Le type de donnée CSS {{cssxref("&lt;color&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/@media/device-aspect-ratio/index.html b/files/fr/web/css/@media/device-aspect-ratio/index.html
new file mode 100644
index 0000000000..a0356e163d
--- /dev/null
+++ b/files/fr/web/css/@media/device-aspect-ratio/index.html
@@ -0,0 +1,59 @@
+---
+title: device-aspect-ratio
+slug: Web/CSS/@media/device-aspect-ratio
+tags:
+  - CSS
+  - Caractéristique média
+  - Déprécié
+  - Reference
+translation_of: Web/CSS/@media/device-aspect-ratio
+---
+<div>{{CSSRef}}{{deprecated_header}}</div>
+
+<p><strong><code>device-aspect-ratio</code></strong> est une caractéristique média (cf. {{cssxref("@media")}}) dont la valeur correspond au ratio entre la largeur et la hauteur de l'appareil d'affichage.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La caractéristique <code>device-aspect-ratio</code> est définie sous la forme d'un ratio (type CSS {{cssxref("&lt;ratio&gt;")}}). C'est une caractéristique d'intervalle ce qui signifie qu'on peut utiliser les variantes préfixées <strong><code>min-device-aspect-ratio</code></strong> et <code><strong>max-device-aspect-ratio</strong></code> afin de cibler des règles en fonction de minimum ou maximum.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">article {
+  padding: 1rem;
+}
+
+@media screen and (min-device-aspect-ratio: 16/9) {
+  article {
+    padding: 1rem 5vw;
+  }
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#device-aspect-ratio', 'device-aspect-ratio')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>Dépréciation dans la spécification de niveau 4 pour les requêtes média.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#device-aspect-ratio', 'device-aspect-ratio')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.device-aspect-ratio")}}</p>
diff --git a/files/fr/web/css/@media/device-height/index.html b/files/fr/web/css/@media/device-height/index.html
new file mode 100644
index 0000000000..92272515aa
--- /dev/null
+++ b/files/fr/web/css/@media/device-height/index.html
@@ -0,0 +1,53 @@
+---
+title: device-height
+slug: Web/CSS/@media/device-height
+tags:
+  - CSS
+  - Caractéristique média
+  - Déprécié
+  - Reference
+translation_of: Web/CSS/@media/device-height
+---
+<div>{{CSSRef}}{{deprecated_header}}</div>
+
+<p><strong><code>device-height</code></strong> est une caractéristique média (cf. {{cssxref("@media")}}) dépréciée dont la valeur correspond à la hauteur de la surface de rendu pour l'appareil d'affichage.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La caractéristique <code>device-height</code> est définie comme une longueur (type  {{cssxref("&lt;length&gt;")}}). C'est une caractéristique d'intervalle ce qui signifie qu'on peut utiliser les variantes préfixées <strong><code>min-device-height</code></strong> et <code><strong>max-device-height</strong></code> afin d'utiliser des critères de minimum et maximum.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Ce fragment HTML applique une feuille de style spécifique pour les appareils dont la hauteur est inférieure à 800 pixels.</p>
+
+<pre class="brush: html">&lt;link rel="stylesheet" media="screen and (max-device-height: 799px)" href="http://toto.truc.com/short-styles.css" /&gt;</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#device-height', 'device-height')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>Dépréciation dans la spécification de niveau 4 pour les requêtes média.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#device-height', 'device-height')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.device-height")}}</p>
diff --git a/files/fr/web/css/@media/device-width/index.html b/files/fr/web/css/@media/device-width/index.html
new file mode 100644
index 0000000000..16f87bc1d8
--- /dev/null
+++ b/files/fr/web/css/@media/device-width/index.html
@@ -0,0 +1,53 @@
+---
+title: device-width
+slug: Web/CSS/@media/device-width
+tags:
+  - CSS
+  - Caractéristique média
+  - Déprécié
+  - Reference
+translation_of: Web/CSS/@media/device-width
+---
+<div>{{CSSRef}}{{deprecated_header}}</div>
+
+<p><strong><code>device-width</code></strong> est une caractéristique média dépréciée dont la valeur représente la largeur de la surface de rendu de l'appareil d'affichage.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p><code>device-width</code> est définie comme une longueur (type {{cssxref("&lt;length&gt;")}}). C'est une caractéristique d'intervalle et les variantes préfixées <strong><code>min-device-width</code></strong> et <code><strong>max-device-width</strong></code> peuvent être utilisées pour manipuler un minimum ou un maximum.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Ce code HTML applique une feuille de style pour pour les appareils plus étroits que 800 pixels.</p>
+
+<pre class="brush: html">&lt;link rel="stylesheet" media="screen and (max-device-width: 799px)" href="http://toto.truc.com/narrow-styles.css" /&gt;</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#device-width', 'device-width')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>Dépréciation dans la spécification de niveau 4 pour les requêtes média.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#device-width', 'device-width')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.device-width")}}</p>
diff --git a/files/fr/web/css/@media/display-mode/index.html b/files/fr/web/css/@media/display-mode/index.html
new file mode 100644
index 0000000000..0b64eafe8b
--- /dev/null
+++ b/files/fr/web/css/@media/display-mode/index.html
@@ -0,0 +1,84 @@
+---
+title: display-mode
+slug: Web/CSS/@media/display-mode
+tags:
+  - CSS
+  - Caractéristique média
+  - Reference
+translation_of: Web/CSS/@media/display-mode
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>display-mode</code></strong> est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui permet d'appliquer différentes règles CSS selon le mode d'affichage de l'application. On pourra utiliser cette caractéristique afin qu'un utilisateur ait une expérience similaire selon qu'il lance le site depuis une URL ou depuis une icône sur un bureau.</p>
+
+<p>Cette caractéristique correspond à la propriété <a href="/fr/docs/Web/Manifest#display"><code>display</code> </a>du manifeste de l'application web. Les deux s'appliquent au contexte de navigation de plus haut niveau ainsi qu'aux contextes fils. Cette requête s'appliquera dans tous les cas (qu'un manifeste d'application soit présent ou non).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La caractéristique <code>display-mode</code> est définie avec un mot-clé parmi ceux du tableau ci-après.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Valeur (mode d'affichage)</th>
+   <th scope="col">Description</th>
+   <th scope="col">Mode d'affichage utilisé en recours</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>fullscreen</code></td>
+   <td>Toute la zone d'affichage est utilisée et aucun autre élément d'interface utilisateur (<em>chrome</em>) n'est affiché.</td>
+   <td><code>standalone</code></td>
+  </tr>
+  <tr>
+   <td><code>standalone</code></td>
+   <td>L'application se comportera comme une application indépendante avec une fenêtre différente, une icône distincte dans les barres d'application. Dans ce mode, l'agent utilisateur supprimera les éléments d'interface utilisateur liés au contrôle de la navigation mais pourra conserver les autres éléments tels que la barre d'état.</td>
+   <td><code>minimal-ui</code></td>
+  </tr>
+  <tr>
+   <td><code>minimal-ui</code></td>
+   <td>L'application se comportera comme une application indépendante mais son interface utilisateur sera restreinte aux contrôles de navigation. Les éléments affichés peuvent varier selon les navigateurs.</td>
+   <td><code>browser</code></td>
+  </tr>
+  <tr>
+   <td><code>browser</code></td>
+   <td>L'application ouvre un nouvel onglet dans le navigateur ou une nouvelle fenêtre selon le navigateur et la plateforme utilisés.</td>
+   <td>Aucun</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">@media all and (display-mode: fullscreen) {
+  body {
+    margin: 0;
+    border: 5px solid black;
+  }
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Manifest', '#the-display-mode-media-feature', 'display-mode')}}</td>
+   <td>{{Spec2('Manifest')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.display-mode")}}</p>
diff --git a/files/fr/web/css/@media/forced-colors/index.html b/files/fr/web/css/@media/forced-colors/index.html
new file mode 100644
index 0000000000..d0cb254e89
--- /dev/null
+++ b/files/fr/web/css/@media/forced-colors/index.html
@@ -0,0 +1,86 @@
+---
+title: forced-colors
+slug: Web/CSS/@media/forced-colors
+tags:
+  - CSS
+  - Caractéristique média
+  - Reference
+translation_of: Web/CSS/@media/forced-colors
+---
+<div>{{CSSRef}}{{SeeCompatTable}}{{draft}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Caractéristiques_média_(media_features)">caractéristique média</a> <strong><code>forced-colors</code></strong> est utilisée afin de détecter si l'utilisateur a choisi une palette de couleur restreinte via le navigateur ou l'agent utilisateur.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Cette fonctionnalité n'est pas encore implémentée par aucun agent utilisateur</p>
+</div>
+
+<h2 id="Valeurs">Valeurs</h2>
+
+<dl>
+ <dt><code><dfn>none</dfn></code></dt>
+ <dd>La palette de couleur n'est pas restreinte.</dd>
+ <dt><code>active</code></dt>
+ <dd>La palette de couleur est restreinte et c'est l'agent utilisateur qui fournira la palette utilisable via un système de mots-clés de couleurs CSS systèmes. La valeur de <code>prefers-color-scheme</code> sera également mise à jour afin que les auteurs puissent adapter la page.</dd>
+</dl>
+
+<h2 id="Préférences_utilisateur">Préférences utilisateur</h2>
+
+<p>À l'heure actuelle, aucun agent utilisateur n'implémente cette fonctionnalité bien que de nombreux systèmes d'exploitation prennent en charge ce type de paramètre.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, les couleurs utilisées par défaut sont exotiques voire illisibles. On tire ici parti d'une requête média pour utiliser une palette restreinte de l'agent utilisateur.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre>&lt;div class="colors"&gt;quelques couleurs étranges&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre>.colors {
+  background-color: red;
+  color: grey;
+}
+
+@media (forced-colors: active) {
+  .colors {
+    background-color: white;
+    color: black;
+  }
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS5 Media Queries', '#forced-colors', 'forced-colors')}}</td>
+   <td>{{Spec2('CSS5 Media Queries')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Array.sort")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>{QuickLinksWithSubpages("/fr/docs/Web/CSS/@media/")}}</p>
diff --git a/files/fr/web/css/@media/grid/index.html b/files/fr/web/css/@media/grid/index.html
new file mode 100644
index 0000000000..331ef98683
--- /dev/null
+++ b/files/fr/web/css/@media/grid/index.html
@@ -0,0 +1,83 @@
+---
+title: grid
+slug: Web/CSS/@media/grid
+tags:
+  - CSS
+  - Caractéristique média
+  - Reference
+translation_of: Web/CSS/@media/grid
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>grid</code></strong> est une caractéristique média CSS (cf {{cssxref("@media")}}) dont la valeur est un booléen qui indique si l'appareil d'affichage fonctionne grâce à une grille (ex. un terminal ou un appareil qui ne dispose que d'une police à chasse fixe) ou grâce à une matrice d'affichage (avec des pixels « classiques »).</p>
+
+<p>La plupart des ordinateurs actuels possèdent des écrans matriciels. Parmi les appareils qui utilisent un affichage en grille, on trouve les appareils qui n'affichent que du texte dans un terminal ou des téléphones simples avec une seule police fixe.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La caractéristique <code>grid</code> est une valeur booléenne (<code>0</code> ou <code>1</code>) (type {{cssxref("&lt;mq-boolean&gt;")}}) qui indique si l'appareil d'affichage fonctionne selon une grille.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="unknown"&gt;Impossible de savoir si l'affichage fonctionne sur une grille. :-(&lt;/p&gt;
+&lt;p class="bitmap"&gt;L'appareil dispose d'un affichage matriciel.&lt;/p&gt;
+&lt;p class="grid"&gt;L'appareil utilise une grille pour l'affichage !&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">:not(.unknown) {
+  color: lightgray;
+}
+
+@media (grid: 0) {
+  .unknown {
+    color: lightgray;
+  }
+
+  .bitmap {
+    color: red;
+    text-transform: uppercase;
+  }
+}
+
+@media (grid: 1) {
+  .unknown {
+    color: lightgray;
+  }
+
+  .grid {
+    color: black;
+    text-transform: uppercase;
+  }
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#grid', 'grid')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.grid")}}</p>
diff --git a/files/fr/web/css/@media/height/index.html b/files/fr/web/css/@media/height/index.html
new file mode 100644
index 0000000000..4e4ac12d6f
--- /dev/null
+++ b/files/fr/web/css/@media/height/index.html
@@ -0,0 +1,83 @@
+---
+title: height
+slug: Web/CSS/@media/height
+tags:
+  - CSS
+  - Caractéristique média
+  - Reference
+translation_of: Web/CSS/@media/height
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>height</code></strong> est une caractéristique média CSS (cf. {{cssxref("@media")}}) dont la valeur représente la hauteur de la zone d'affichage (<em>viewport</em>) (ou de la boîte de page pour les média paginés).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La caractéristique <code>height</code> est définie comme une longueur (type {{cssxref("&lt;length&gt;")}}) et représente la hauteur de la zone d'affichage. C'est une caractéristique d'intervalle et on peut donc utiliser les variantes préfixées <strong><code>min-height</code></strong> et <strong><code>max-height</code></strong> afin de cibler des règles selon un minimum ou un maximum.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  Surveillez cet élément lors du
+  redimensionnement de la zone d'affichage.
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* Hauteur exacte */
+@media (height: 360px) {
+  div {
+    color: red;
+  }
+}
+
+/* Hauteur minimale */
+@media (min-height: 25rem) {
+  div {
+    background: yellow;
+  }
+}
+
+/* Hauteur maximale */
+@media (max-height: 40rem) {
+  div {
+    border: 2px solid blue;
+  }
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples','90%')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#height', 'height')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>La valeur peut désormais être négative (ce qui correspond à un booléen faux).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#height', 'height')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>Définition initiale. La valeur ne doit pas être négative.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.height")}}</p>
diff --git a/files/fr/web/css/@media/hover/index.html b/files/fr/web/css/@media/hover/index.html
new file mode 100644
index 0000000000..d0b19376b2
--- /dev/null
+++ b/files/fr/web/css/@media/hover/index.html
@@ -0,0 +1,72 @@
+---
+title: hover
+slug: Web/CSS/@media/hover
+tags:
+  - CSS
+  - Caractéristique média
+  - Reference
+translation_of: Web/CSS/@media/hover
+---
+<div>{{CSSRef}}</div>
+
+<p><code><strong>hover</strong></code> est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui permet de vérifier si le dispositif de saisie/d'entrée principal permet à l'utilisateur de survoler les éléments.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La caractéristique <code>hover</code> est définie avec un mot-clé parmi ceux de la liste suivant :</p>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Le mécanisme de saisie principal ne permet pas de survoler les éléments (ou ne le permet pas de façon simple ; par exemple sur les appareils mobiles qui émulent le survol avec un appui long) ou il n'existe pas de dispositif de pointage principal.</dd>
+ <dt><code>hover</code></dt>
+ <dd>Le mécanisme de saisie principal permet de survoler les éléments simplement.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;a href="#"&gt;Essayez de me survoler !&lt;/a&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@media (hover: hover) {
+  a:hover {
+    background: yellow;
+  }
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#hover', 'hover')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.hover")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/@media/any-hover">La caractéristique média <code>any-hover</code></a></li>
+</ul>
diff --git a/files/fr/web/css/@media/index.html b/files/fr/web/css/@media/index.html
new file mode 100644
index 0000000000..aced40e2b4
--- /dev/null
+++ b/files/fr/web/css/@media/index.html
@@ -0,0 +1,155 @@
+---
+title: '@media'
+slug: Web/CSS/@media
+tags:
+  - CSS
+  - Reference
+  - Règle @
+translation_of: Web/CSS/@media
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/R%C3%A8gles_@">règle @</a> <strong><code>@media</code></strong> permet d'associer un ensemble d'instructions imbriquées (délimité par des accolades) avec une condition définie par une <a href="/fr/docs/Web/CSS/Media_queries">requête média</a>. La règle <code>@media</code> peut être utilisé au niveau le plus haut de la feuille de style et également <a href="/fr/docs/Web/CSS/Règles_@#Les_règles_de_groupe_conditionnelles">à l'intérieur d'un groupe de règles conditionnel</a>.</p>
+
+<pre class="brush: css no-line-numbers">@media (max-width: 600px) {
+  .sidebar {
+    display: none;
+  }
+}</pre>
+
+<p>Il est possible de manipuler la règle @ <code>@media</code> via le CSSOM (et JavaScript) notamment grâce à l'interface {{domxref("CSSMediaRule")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Une requête média (type <code>&lt;media-query&gt;</code>) est composée d'un type de média (optionnel) et/ou de différentes caractéristiques relatives au média. Une requête média peut être imbriquée dans une autre <a href="/fr/docs/Web/CSS/Règles_@#Les_règles_de_groupe_conditionnelles">règle conditionnelle</a>.</p>
+
+<pre class="brush: css no-line-numbers">/* Au niveau le plus haut du code */
+@media screen and (min-width: 900px) {
+  article {
+    padding: 1rem 3rem;
+  }
+}
+
+/* Imbriquée dans une autre règle-@ conditionnelle */
+@supports (display: flex) {
+  @media screen and (min-width: 900px) {
+    article {
+      display: flex;
+    }
+  }
+}
+</pre>
+
+<p>Pour plus d'informations sur la syntaxe des requêtes média, voir <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries">Utiliser les requêtes média</a>.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Les_caractéristiques_média">Les caractéristiques média</h2>
+
+<p>{{page("/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries","Caractéristiques_média_(media_features)")}}</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">@media print {
+  body { font-size: 10pt }
+}
+@media screen {
+  body { font-size: 13px }
+}
+@media screen, print {
+  body { line-height: 1.2 }
+}
+
+@media only screen
+  and (min-width: 320px)
+  and (max-width: 480px)
+  and (-webkit-min-device-pixel-ratio: 2) {
+    body { line-height: 1.4 }
+}
+</pre>
+
+<p>Avec la mise à jour de la spécification pour les requêtes média, une nouvelle syntaxe, plus concise, peut être utilisée pour les tests d'intervalle :</p>
+
+<pre class="brush: css">@media (height &gt; 600px) {
+  body { line-height: 1.4; }
+}
+
+@media (400px &lt;= width &lt;= 700px) {
+  body { line-height: 1.4; }
+}
+</pre>
+
+<p>Pour plus d'exemples, voir <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries">Utiliser les requêtes média</a>.</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Pour une meilleure interaction, notamment avec les personnes qui zooment sur une page pour accroître la taille du texte ou qui définissent une taille de police par défaut pour l'ensemble du navigateur, on utilisera l'unité <code><a href="/fr/docs/Web/CSS/length#em">em</a></code> comme valeur pour <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries">les requêtes média</a> lorsqu'il faut utiliser une longueur ({{cssxref("&lt;length&gt;")}}).</p>
+
+<p>Les unités <code><a href="/fr/Apprendre/CSS/Introduction_à_CSS/Values_and_units#Longueur_et_taille">em</a></code> et <code><a href="/fr/Apprendre/CSS/Introduction_à_CSS/Values_and_units#Longueur_et_taille">px</a></code> sont toutes les deux valides mais <code><a href="/fr/Apprendre/CSS/Introduction_à_CSS/Values_and_units#Longueur_et_taille">em</a></code> s'adapte mieux quand la taille de la police du navigateur a été ajustée.</p>
+
+<p>On privilégiera, autant que possible, les requêtes média de la spécification de niveau 4 afin d'améliorer l'ergonomie. On pourra, par exemple, se baser sur <a href="/fr/docs/Web/CSS/@media/prefers-reduced-motion"><code>prefers-reduced-motion</code> afin de détecter si l'utilisateur souhaite minimiser les animations ou les déplacements</a>.</p>
+
+<h2 id="Sécurité">Sécurité</h2>
+
+<p>Les requêtes média fournissent des informations quant aux capacités de l'appareil avec lequel on navigue. L'ensemble de ces capacités peut être détourné afin de construire une empreinte qui identifie l'appareil ou le catégorise de façon indésirée.</p>
+
+<p>Pour ces raisons, un navigateur peut choisir de mentir sur les valeurs renvoyées afin de contourner ce pistage. Ainsi, si la détection d'empreinte numérique est désactivée dans Firefox, la plupart des caractéristiques média renverront leurs valeurs par défaut afin d'éviter leur utilisation pour du pistage.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Commentaires</th>
+   <th scope="col">Retours</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS5 Media Queries', '#at-media5', '@media')}}</td>
+   <td>Réintègre <code>light-level</code>, <code>inverted-colors</code> et les requêtes média personnalisées qui avaient été retirées la spécification de niveau 4.<br>
+    Ajout des caractéristiques média <code>prefers-reduced-motion</code>, <code>prefers-reduced-transparency</code>, <code>prefers-contrast</code> et <code>prefers-color-scheme</code>.</td>
+   <td><a href="https://github.com/w3c/csswg-drafts/issues"><em>Issues</em> GitHub pour les brouillons du groupe de travail CSS (en anglais)</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Conditional', '#at-media', '@media')}}</td>
+   <td>Définition de la syntaxe de base pour la règle <code>@media</code>.</td>
+   <td><a href="https://github.com/w3c/csswg-drafts/issues"><em>Issues</em> GitHub pour les brouillons du groupe de travail CSS (en anglais)</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#media', '@media')}}</td>
+   <td>
+    <p>Ajout des caractéristiques média <code>scripting</code>, <code>pointer</code>, <code>hover</code>, <code>update</code>, <code>overflow-block</code> et <code>overflow-inline</code>.<br>
+     Dépréciation de l'ensemble des types de média à l'exception de <code>screen</code>, <code>print</code>, <code>speech</code> et <code>all</code>.<br>
+     La syntaxe est rendue plus flexible avec l'ajout (entre autres) du mot-clé <code>or</code>.</p>
+   </td>
+   <td><a href="https://github.com/w3c/csswg-drafts/issues"><em>Issues</em> GitHub pour les brouillons du groupe de travail CSS (en anglais)</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#media0', '@media')}}</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'media.html#at-media-rule', '@media')}}</td>
+   <td>Définition initiale.</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.media")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Media_queries">Les requêtes média</a></li>
+ <li>L'interface CSSOM {{domxref("CSSMediaRule")}} qui est associée avec cette règle @.</li>
+</ul>
diff --git a/files/fr/web/css/@media/index/index.html b/files/fr/web/css/@media/index/index.html
new file mode 100644
index 0000000000..e227a1aecb
--- /dev/null
+++ b/files/fr/web/css/@media/index/index.html
@@ -0,0 +1,12 @@
+---
+title: Index
+slug: Web/CSS/@media/Index
+tags:
+  - '@media'
+  - CSS
+  - Index
+translation_of: Web/CSS/@media/Index
+---
+<p>{{CSSRef}}</p>
+
+<p>{{Index("/fr/docs/Web/CSS/@media")}}</p>
diff --git a/files/fr/web/css/@media/inverted-colors/index.html b/files/fr/web/css/@media/inverted-colors/index.html
new file mode 100644
index 0000000000..6129831784
--- /dev/null
+++ b/files/fr/web/css/@media/inverted-colors/index.html
@@ -0,0 +1,92 @@
+---
+title: inverted-colors
+slug: Web/CSS/@media/inverted-colors
+tags:
+  - CSS
+  - Caractéristique média
+  - Reference
+translation_of: Web/CSS/@media/inverted-colors
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>inverted-colors</code></strong> est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui indique si l'agent utilisateur ou si le système d'exploitation sous-jacent inverse les couleurs.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Cette caractéristique est définie avec un des mots-clés parmi ceux qui suivent :</p>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Les couleurs sont affichées normalement.</dd>
+ <dt><code>inverted</code></dt>
+ <dd>Les couleurs des pixels de la zone affichée ont été inversées.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  Si vous utilisez les couleurs inversées, ce texte devrait
+  être bleu sur blanc (l'inverse de jaune sur noir). Sinon,
+  il devrait être rouge sur gris clair.
+&lt;/p&gt;
+&lt;p&gt;
+  Si le texte est gris, cela indique que votre navigateur
+  ne prend pas en charge la caractéristique média
+  `inverted-colors`.
+&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  color: gray;
+}
+
+@media (inverted-colors: inverted) {
+  p {
+    background: black;
+    color: yellow;
+  }
+}
+
+@media (inverted-colors: none) {
+  p {
+    background: #eee;
+    color: red;
+  }
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS5 Media Queries', '#inverted', 'inverted-colors')}}</td>
+   <td>{{Spec2('CSS5 Media Queries')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#inverted', 'inverted-colors')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>Repoussée à la spécification de niveau 5 pour les requêtes média.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.inverted-colors")}}</p>
diff --git a/files/fr/web/css/@media/monochrome/index.html b/files/fr/web/css/@media/monochrome/index.html
new file mode 100644
index 0000000000..0bb4799080
--- /dev/null
+++ b/files/fr/web/css/@media/monochrome/index.html
@@ -0,0 +1,85 @@
+---
+title: monochrome
+slug: Web/CSS/@media/monochrome
+tags:
+  - CSS
+  - Caractéristique média
+  - Reference
+translation_of: Web/CSS/@media/monochrome
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>monochrome</code></strong> est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui peut être utilisée afin d'appliquer des styles en fonction du nombre de bits par pixel utilisés pour le tampon d'affichage monochrome de l'appareil.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La caractéristique <code>monochrome</code> est un entier (type {{cssxref("&lt;integer&gt;")}})) dont la valeur correspond au nombre de bits par pixel utilisés pour le tampon d'affichage monochrome de l'appareil. Si l'appareil n'est pas monochrome, cela vaudra 0. Cette caractéristique est une caractéristique d'intervalle ce qui signifie qu'on peut également utiliser les variantes préfixées <strong><code>min-monochrome</code></strong> et <strong><code>max-monochrome</code></strong> afin de cibler les règles en fonction d'un minimum ou d'un maximum.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="mono"&gt;
+  Votre appareil prend en charge les
+  pixels monochrome !
+&lt;/p&gt;
+&lt;p class="no-mono"&gt;
+  Votre appareil ne prend pas en charge
+  les pixels monochromes.
+&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  display: none;
+}
+
+/* Any monochrome device */
+@media (monochrome) {
+  p.mono {
+    display: block;
+    color: #333;
+  }
+}
+
+/* Any non-monochrome device */
+@media (monochrome: 0) {
+  p.no-mono {
+    display: block;
+    color: #ee3636;
+  }
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#monochrome', 'monochrome')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>La valeur peut désormais être négative, auquel cas cela correspond à un booléen faux.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#monochrome', 'monochrome')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>Définition initiale. La valeur ne doit pas être négative.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.monochrome")}}</p>
diff --git a/files/fr/web/css/@media/orientation/index.html b/files/fr/web/css/@media/orientation/index.html
new file mode 100644
index 0000000000..2eab162ff7
--- /dev/null
+++ b/files/fr/web/css/@media/orientation/index.html
@@ -0,0 +1,88 @@
+---
+title: orientation
+slug: Web/CSS/@media/orientation
+tags:
+  - CSS
+  - Caractéristique média
+  - Reference
+translation_of: Web/CSS/@media/orientation
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>orientation</code></strong> est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui peut être utilisée pour vérifier l'orientation de la zone d'affichage (<em>viewport</em>) (ou la boîte de la page pour les média paginés).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La caractéristique <code>orientation</code> se définit grâce à l'un des mots-clés suivants :</p>
+
+<dl>
+ <dt><code>portrait</code></dt>
+ <dd>La zone d'affichage est en mode portrait (la hauteur est la plus grande dimension).</dd>
+ <dt><code>landscape</code></dt>
+ <dd>La zone d'affichage est en mode paysage (la largeur est la plus grande dimension).</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;Boîte 1&lt;/div&gt;
+&lt;div&gt;Boîte 2&lt;/div&gt;
+&lt;div&gt;Boîte 3&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">body {
+  display: flex;
+}
+
+div {
+  background: yellow;
+}
+
+@media (orientation: landscape) {
+  body {
+    flex-direction: row;
+  }
+}
+
+@media (orientation: portrait) {
+  body {
+    flex-direction: column;
+  }
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#orientation', 'orientation')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#orientation', 'orientation')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.orientation")}}</p>
diff --git a/files/fr/web/css/@media/overflow-block/index.html b/files/fr/web/css/@media/overflow-block/index.html
new file mode 100644
index 0000000000..45a478c6d7
--- /dev/null
+++ b/files/fr/web/css/@media/overflow-block/index.html
@@ -0,0 +1,71 @@
+---
+title: overflow-block
+slug: Web/CSS/@media/overflow-block
+tags:
+  - CSS
+  - Caractéristique média
+  - Reference
+translation_of: Web/CSS/@media/overflow-block
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>overflow-block</code></strong> est une caractéristique média CSS qui indique la façon dont l'appareil d'affichage gère le contenu qui dépasse de la zone d'affichage (<em>viewport</em>) dans l'axe logique de bloc (c'est-à-dire le sens perpendiculaire au sens de lecture).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La caractéristique <code>overflow-block</code> est définie avec un mot-clé de la liste suivante :</p>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Le contenu qui dépasse n'est pas affiché.</dd>
+ <dt><code>scroll</code></dt>
+ <dd>Une barre de défilement est ajoutée afin de pouvoir visualiser le contenu qui dépasse de la zone d'affichage.</dd>
+ <dt><code>optional-paged</code></dt>
+ <dd>Une barre de défilement est ajoutée pour que l'utilisateur puisse voir le contenu ou l'auteur peut utiliser des sauts de page afin que le contenu soit lisible sur une autre page (ex. diaporamas).</dd>
+ <dt><code>paged</code></dt>
+ <dd>Le contenu qui dépasse est entraîné sur la page suivante (ex. livres électroniques, impression).</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac turpis eleifend, fringilla velit ac, aliquam tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc velit erat, tempus id rutrum sed, dapibus ut urna. Integer vehicula nibh a justo imperdiet rutrum. Nam faucibus pretium orci imperdiet sollicitudin. Nunc id facilisis dui. Proin elementum et massa et feugiat. Integer rutrum ullamcorper eleifend. Proin sit amet tincidunt risus. Sed nec augue congue eros accumsan tincidunt sed eget ex.&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@media (overflow-block: scroll) {
+  p {
+    color: red;
+  }
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#mf-overflow-block', 'overflow-block')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.overflow-block")}}</p>
diff --git a/files/fr/web/css/@media/overflow-inline/index.html b/files/fr/web/css/@media/overflow-inline/index.html
new file mode 100644
index 0000000000..681cc3e8d0
--- /dev/null
+++ b/files/fr/web/css/@media/overflow-inline/index.html
@@ -0,0 +1,78 @@
+---
+title: overflow-inline
+slug: Web/CSS/@media/overflow-inline
+tags:
+  - CSS
+  - Caractéristique média
+  - Reference
+translation_of: Web/CSS/@media/overflow-inline
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>overflow-inline</code></strong> est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui indique la façon dont l'appareil d'affichage gère le contenu qui dépasse de la zone d'affichage (<em>viewport</em>) dans l'axe logique en ligne (c'est-à-dire le sens correspondant au sens de lecture).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La caractéristique <code>overflow-inline</code> est définit avec un mot-clé parmi ceux de la liste suivante :</p>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Le contenu qui dépasse n'est pas affiché.</dd>
+ <dt><code>scroll</code></dt>
+ <dd>Le contenu qui dépasse peut être visualisé en utilisant une barre de défilement.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  Nullam ac turpis eleifend, fringilla velit ac, aliquam tellus.
+  Vestibulum ante ipsum primis in faucibus orci luctus et
+  ultrices posuere cubilia Curae; Nunc velit erat, tempus id
+  rutrum sed, dapibus ut urna. Integer vehicula nibh a justo
+  imperdiet rutrum. Nam faucibus pretium orci imperdiet
+  sollicitudin. Nunc id facilisis dui. Proin elementum et
+  massa et feugiat. Integer rutrum ullamcorper eleifend.
+  Proin sit amet tincidunt risus. Sed nec augue congue eros
+  accumsan tincidunt sed eget ex.
+&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@media (overflow-inline: scroll) {
+  p {
+    color: red;
+  }
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#mf-overflow-inline', 'overflow-inline')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.overflow-inline")}}</p>
diff --git a/files/fr/web/css/@media/pointer/index.html b/files/fr/web/css/@media/pointer/index.html
new file mode 100644
index 0000000000..4ea6c2dbf1
--- /dev/null
+++ b/files/fr/web/css/@media/pointer/index.html
@@ -0,0 +1,101 @@
+---
+title: pointer
+slug: Web/CSS/@media/pointer
+tags:
+  - CSS
+  - Caractéristique média
+  - Reference
+translation_of: Web/CSS/@media/pointer
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>pointer</code></strong> est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui permet de vérifier si le dispositif de saisie/d'entrée principal est un dispositif de pointage et, le cas échéant, de connaître sa précision.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Si on souhaite tester la précision de n'importe quel dispositif de pointage, on utilisera plutôt la caractéristique <code><a href="/fr/docs/Web/CSS/@media/any-pointer">any-pointer</a></code>.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Cette caractéristique est définie avec un mot-clé parmi les suivants :</p>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Le mécanisme de saisie principal n'inclut pas de dispositif de pointage.</dd>
+ <dt><code>coarse</code></dt>
+ <dd>Le mécanisme de saisie principal inclut un dispositif de pointage dont la précision est limitée.</dd>
+ <dt><code>fine</code></dt>
+ <dd>Le mécanisme de saisie principal inclut un dispositif de pointage précis.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, on crée une petite case à cocher pour les utilisateurs qui disposent d'un pointage précis et une case à cocher plus grande lorsque le mécanisme de pointage est moins précis.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input id="test" type="checkbox" /&gt;
+&lt;label for="test"&gt;Coucou !&lt;/label&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input[type="checkbox"]:checked {
+  background: gray;
+}
+
+@media (pointer: fine) {
+  input[type="checkbox"] {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    width: 15px;
+    height: 15px;
+    border: 1px solid blue;
+  }
+}
+
+@media (pointer: coarse) {
+  input[type="checkbox"] {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    width: 30px;
+    height: 30px;
+    border: 2px solid red;
+  }
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#pointer', 'pointer')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>Ajout dans la spécification de niveau 4 pour les requêtes média.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.pointer")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/@media/any-pointer">La caractéristique média <code>any-pointer</code></a></li>
+</ul>
diff --git a/files/fr/web/css/@media/prefers-color-scheme/index.html b/files/fr/web/css/@media/prefers-color-scheme/index.html
new file mode 100644
index 0000000000..89d78710c6
--- /dev/null
+++ b/files/fr/web/css/@media/prefers-color-scheme/index.html
@@ -0,0 +1,103 @@
+---
+title: prefers-color-scheme
+slug: Web/CSS/@media/prefers-color-scheme
+tags:
+  - '@media'
+  - CSS
+  - Caractéristique média
+  - Reference
+translation_of: Web/CSS/@media/prefers-color-scheme
+---
+<div>{{CSSRef}}</div>
+
+<div class="blockIndicator note">
+<p>Si vous avez modifié <code>privacy.resistFingerprinting</code> à <strong>vrai</strong>, le paramètre {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} sera redéfini à <code>light</code>.<br>
+ Sinon, vous pouvez créer le paramètre numérique <code>ui.systemUsesDarkTheme</code> pour redéfinier le comportement par défaut et retourner <code>light</code> (valeur : 0), <code>dark</code> (valeur : 1), or <code>no-preference</code> (valeur : 2). (Firefox retournera<code>light</code> si une autre valeur est utilisée.)</p>
+</div>
+
+<p>La caractéristique média <strong><code>prefers-color-scheme</code></strong> permet de détecter les préférences exprimées par l'utilisateur quant au thème à utiliser (sombre ou clair).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<dl>
+ <dt><code><dfn>light</dfn></code></dt>
+ <dd>Cette valeur indique que l'utilisateur a exprimé le choix d'utiliser une interface avec une dominante claire, ou qu'il n'a pas exprimé son choix.</dd>
+ <dt><code>dark</code></dt>
+ <dd>Cette valeur indique que l'utilisateur a exprimé le choix d'utiliser une interface avec une dominante sombre.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">.day   { background: #eee; color: black; }
+.night { background: #333; color: white; }
+
+@media (prefers-color-scheme: dark) {
+  .day.dark-scheme   { background:  #333; color: white; }
+  .night.dark-scheme { background: black; color:  #ddd; }
+}
+
+@media (prefers-color-scheme: light) {
+  .day.light-scheme   { background: white; color:  #555; }
+  .night.light-scheme { background:  #eee; color: black; }
+}
+
+.day, .night {
+  display: inline-block;
+  padding: 1em;
+  width: 7em;
+  height: 2em;
+  vertical-align: middle;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div class="day"&gt;Jour (initial)&lt;/div&gt;
+&lt;div class="day light-scheme"&gt;Jour (modifié si utilisation d'un thème clair)&lt;/div&gt;
+&lt;div class="day dark-scheme"&gt;Jour (modifié si utilisation d'un thème sombre)&lt;/div&gt; &lt;br&gt;
+
+&lt;div class="night"&gt;Nuit (initial)&lt;/div&gt;
+&lt;div class="night light-scheme"&gt;Nuit (modifié si utilisation d'un thème clair)&lt;/div&gt;
+&lt;div class="night dark-scheme"&gt;Nuit (modifié si utilisation d'un thème sombre)&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-color-scheme', 'prefers-color-scheme')}}</td>
+   <td>{{Spec2('CSS5 Media Queries')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.prefers-color-scheme")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://www.youtube.com/watch?v=jmepqJ5UbuM">Tutoriel vidéo (en anglais) : « Coding a Dark Mode for your Website », Coder un thème sombre pour votre site web</a></li>
+ <li><a href="https://stuffandnonsense.co.uk/blog/redesigning-your-product-and-website-for-dark-mode">Revoir la conception d'un produit ou d'un site pour le mode sombre </a></li>
+ <li>Modifier le thème du system sur <a href="https://blogs.windows.com/windowsexperience/2019/04/01/windows-10-tip-dark-theme-in-file-explorer/">Windows</a>, <a href="https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/dark-mode/">macOS</a> et <a href="https://www.phonandroid.com/android-10-comment-activer-le-theme-fonce.html">Android</a>.</li>
+</ul>
+
+<div>{{QuickLinksWithSubpages("/fr/docs/Web/CSS/@media/")}}</div>
diff --git a/files/fr/web/css/@media/prefers-contrast/index.html b/files/fr/web/css/@media/prefers-contrast/index.html
new file mode 100644
index 0000000000..70120f5b2e
--- /dev/null
+++ b/files/fr/web/css/@media/prefers-contrast/index.html
@@ -0,0 +1,86 @@
+---
+title: prefers-contrast
+slug: Web/CSS/@media/prefers-contrast
+tags:
+  - CSS
+  - Caractéristique média
+  - Reference
+translation_of: Web/CSS/@media/prefers-contrast
+---
+<div>{{CSSRef}}{{SeeCompatTable}}{{draft}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Caractéristiques_média_(media_features)">caractéristique média</a> <strong><code>prefers-contrast</code></strong> permet de détecter si l'utilisateur a configuré son système pour utiliser un contraste élevé.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<dl>
+ <dt><code><dfn>no-preference</dfn></code></dt>
+ <dd>Cette valeur indique que l'utilisateur n'a exprimé aucune préférence particulière. La valeur de ce mot-clé est évaluée à <code>false</code> dans un contexte booléen.</dd>
+ <dt><code>high</code></dt>
+ <dd>Cette valeur indique que l'utilisateur a configuré son système pour avoir un contraste plus élevé.</dd>
+ <dt><code><dfn>low</dfn></code></dt>
+ <dd>Cette valeur indique que l'utilisateur a configuré son système afin d'avoir un niveau de contraste plus faible.</dd>
+</dl>
+
+<h2 id="Préférences_utilisateur">Préférences utilisateur</h2>
+
+<p>À l'heure actuelle, aucun agent utilisateur n'implémente cette fonctionnalité bien que différents systèmes d'exploitation prennent en charge ce type de paramètre.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Par défaut, cet exemple présente un contraste trop faible pour la lisibilité.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre>&lt;div class="contrast"&gt;Une boîte avec un contraste faible.&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre>.contrast {
+  color: grey;
+}
+
+@media (prefers-contrast: high) {
+  .contrast {
+    color: black;
+  }
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-contrast', 'prefers-contrast')}}</td>
+   <td>{{Spec2('CSS5 Media Queries')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.prefers-contrast")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La caractéristique média spécifique à Microsoft <code><a href="https://msdn.microsoft.com/library/Hh771830">-ms-high-contrast</a></code></li>
+</ul>
+
+<p>{{QuickLinksWithSubpages("/fr/docs/Web/CSS/@media/")}}</p>
diff --git a/files/fr/web/css/@media/prefers-reduced-motion/index.html b/files/fr/web/css/@media/prefers-reduced-motion/index.html
new file mode 100644
index 0000000000..32e0c2bcd8
--- /dev/null
+++ b/files/fr/web/css/@media/prefers-reduced-motion/index.html
@@ -0,0 +1,135 @@
+---
+title: prefers-reduced-motion
+slug: Web/CSS/@media/prefers-reduced-motion
+tags:
+  - '@media'
+  - Accessibilité
+  - CSS
+  - Caractéristique média
+  - Reference
+translation_of: Web/CSS/@media/prefers-reduced-motion
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Cibler_des_caractéristiques_média">caractéristique média</a> <strong><code>prefers-reduced-motion</code></strong> détecte si l'utilisateur a demandé au système de minimiser la quantité d'animation ou de mouvement.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<dl>
+ <dt><code><dfn>no-preference</dfn></code></dt>
+ <dd>Cette valeur indique que l'utilisateur n'a rien indiqué au système.</dd>
+ <dt><code><dfn>reduce</dfn></code></dt>
+ <dd>Cette valeur indique que l'utilisateur souhaite utiliser une interface qui minimise la quantité d'animation, au point où tout mouvement qui n'est pas essentiel a été retiré.</dd>
+</dl>
+
+<h2 id="Gestion_des_préférences">Gestion des préférences</h2>
+
+<p>Dans Firefox, la valeur <code>reduce</code> est utilisée par le moteur selon des conditions provenant du système d'exploitation/environnement de bureau :</p>
+
+<ul>
+ <li>Pour GTK/Gnome, si <code>gtk-enable-animation</code> vaut <code>false</code>. Cela peut être configuré par le menu « Ajustements » de Gnome.</li>
+ <li>Pour Windows 10 : Paramètres &gt; Options d'ergonomie &gt; Vision &gt; Afficher &gt; Afficher les animations dans windows</li>
+ <li>Pour macOS (NDT : libellés à vérifier) : Préférences système &gt; Accessibilité &gt; Affichage &gt; Réduction de mouvement.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Cet exemple possède une animation désagréable qui sera exécutée à moins d'activer la réduction de mouvement dans les préférences relatives à l'accessibilité.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="animation"&gt;boîte animée&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.animation {
+  animation: vibrate 0.3s linear infinite both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animation {
+  animation: none;
+  }
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">.animation {
+  background-color: rebeccapurple;
+  color: #fff;
+  font: 1.2em Helvetica, arial, sans-serif;
+  width: 200px;
+  padding: 1em;
+  border-radius: 1em;
+  text-align: center;
+}
+
+/* ----------------------------------------------
+ * Generated by Animista on 2018-9-2 13:47:0
+ * w: http://animista.net, t: @cssanimista
+ * ---------------------------------------------- */
+
+/**
+ * ----------------------------------------
+ * animation vibrate-1
+ * ----------------------------------------
+ */
+
+@keyframes vibrate {
+  0% {
+      transform: translate(0);
+  }
+  20% {
+      transform: translate(-2px, 2px);
+  }
+  40% {
+      transform: translate(-2px, -2px);
+  }
+  60% {
+      transform: translate(2px, 2px);
+  }
+  80% {
+      transform: translate(2px, -2px);
+  }
+  100% {
+      transform: translate(0);
+  }
+}
+</pre>
+</div>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-reduced-motion', 'prefers-reduced-motion')}}</td>
+   <td>{{Spec2('CSS5 Media Queries')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.prefers-reduced-motion")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://css-tricks.com/introduction-reduced-motion-media-query/">Une introduction aux requêtes média pour la réduction de mouvement</a></li>
+</ul>
diff --git a/files/fr/web/css/@media/prefers-reduced-transparency/index.html b/files/fr/web/css/@media/prefers-reduced-transparency/index.html
new file mode 100644
index 0000000000..a2eddd14bd
--- /dev/null
+++ b/files/fr/web/css/@media/prefers-reduced-transparency/index.html
@@ -0,0 +1,84 @@
+---
+title: prefers-reduced-transparency
+slug: Web/CSS/@media/prefers-reduced-transparency
+tags:
+  - CSS
+  - Caractéristique média
+  - Reference
+translation_of: Web/CSS/@media/prefers-reduced-transparency
+---
+<p>{{CSSRef}}{{SeeCompatTable}}{{draft}}</p>
+
+<p>La <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Caractéristiques_média_(media_features)">caractéristique média</a> <strong><code>prefers-reduced-transparency</code></strong> permet de détecter si un utilisateur préfère (via un paramètre du système d'exploitation ou du navigateur) minimiser l'utilisation des effets de transparence.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<dl>
+ <dt><code><dfn>no-preference</dfn></code></dt>
+ <dd>Cette valeur indique que l'utilisateur n'a exprimé aucune préférence quant à l'utilisation des effets de transparence. Ce mot-clé correspond à <code>false</code> lorsqu'il est utilisé dans un contexte booléen.</dd>
+ <dt><code><dfn>reduce</dfn></code></dt>
+ <dd>Cette valeur indique que l'utilisateur a configuré le système afin de minimiser la quantité d'effets de transparence.</dd>
+</dl>
+
+<h2 id="Préférences_utilisateur">Préférences utilisateur</h2>
+
+<p>À l'heure actuelle, aucun navigateur ou agent utilisateur n'implémente cette préférence malgré la présence de réglages correspondants dans les systèmes d'exploitation.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Par défaut, cet exemple utilise un effet de transparence qui diminue la lisibilité du contenu.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre>&lt;div class="transparency"&gt;Boîte transparente&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre>.transparency {
+  opacity: 0.5;
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  .transparency {
+    opacity: 1;
+  }
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-reduced-transparency', 'prefers-reduced-transparency')}}</td>
+   <td>{{Spec2('CSS5 Media Queries')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.prefers-reduced-transparency")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://bugs.webkit.org/show_bug.cgi?id=175497">Le bug WebKit 175497</a></li>
+</ul>
+
+<p>{{QuickLinksWithSubpages("/fr/docs/Web/CSS/@media/")}}</p>
diff --git a/files/fr/web/css/@media/resolution/index.html b/files/fr/web/css/@media/resolution/index.html
new file mode 100644
index 0000000000..32f97ce982
--- /dev/null
+++ b/files/fr/web/css/@media/resolution/index.html
@@ -0,0 +1,75 @@
+---
+title: resolution
+slug: Web/CSS/@media/resolution
+tags:
+  - CSS
+  - Caractéristique média
+  - Reference
+translation_of: Web/CSS/@media/resolution
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>resolution</code></strong> est une caractéristique média CSS dont la valeur représente la densité de pixels de l'appareil d'affichage.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La caractéristique <code>resolution</code> est une valeur de type {{cssxref("&lt;resolution&gt;")}} qui représente la densité de pixels de l'appareil d'affichage. C'est une caractéristique d'intervalle, cela signifie qu'on peut utiliser les variantes préfixées <code><strong>min-resolution</strong></code> et <strong><code>max-resolution</code></strong> afin d'établir des règles selon un minimum ou un maximum.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Un test pour la densité de pixels de votre appareil.&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* Résolution exacte  */
+@media (resolution: 150dpi) {
+  p {
+    color: red;
+  }
+}
+
+/* Résolution minimale */
+@media (min-resolution: 72dpi) {
+  p {
+    text-decoration: underline;
+  }
+}
+
+/* Résolution maximale */
+@media (max-resolution: 300dpi) {
+  p {
+    background: yellow;
+  }
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#resolution', 'resolution')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.resolution")}}</p>
diff --git a/files/fr/web/css/@media/scan/index.html b/files/fr/web/css/@media/scan/index.html
new file mode 100644
index 0000000000..be71b32a45
--- /dev/null
+++ b/files/fr/web/css/@media/scan/index.html
@@ -0,0 +1,85 @@
+---
+title: scan
+slug: Web/CSS/@media/scan
+tags:
+  - CSS
+  - Caractéristique média
+  - Reference
+translation_of: Web/CSS/@media/scan
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>scan</code></strong> est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui peut être utilisée afin de déterminer le processus utilisé pour composer l'image sur l'appareil d'affichage.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La caractéristique <code>scan</code> est définie avec un mot-clé parmi ceux qui suivent :</p>
+
+<dl>
+ <dt><code>interlace</code></dt>
+ <dd>L'image est composée avec <a href="https://fr.wikipedia.org/wiki/Entrelacement_(vid%C3%A9o)">un entrelacement</a> grâce à des lignes intercalées (en deux passes).</dd>
+ <dt><code>progressive</code></dt>
+ <dd>L'image est composée ligne par ligne avec <a href="https://fr.wikipedia.org/wiki/Balayage_progressif">un balayage progressif</a>.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Si votre écran utilise une composition avec entrelacement, ce texte devrait
+   être écrit avec une police sans serif/empattement. S'il utilise une composition
+   avec un balayage progressif, vous devriez voir une police avec serif/empattement.
+&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  font-family: cursive;
+}
+
+@media (scan: interlace) {
+  p {
+    font-family: sans-serif;
+  }
+}
+
+@media (scan: progressive) {
+  p {
+    font-family: serif;
+  }
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#scan', 'scan')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#scan', 'scan')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.scan")}}</p>
diff --git a/files/fr/web/css/@media/scripting/index.html b/files/fr/web/css/@media/scripting/index.html
new file mode 100644
index 0000000000..85af2d8c69
--- /dev/null
+++ b/files/fr/web/css/@media/scripting/index.html
@@ -0,0 +1,87 @@
+---
+title: scripting
+slug: Web/CSS/@media/scripting
+tags:
+  - CSS
+  - Caractéristique média
+  - Reference
+translation_of: Web/CSS/@media/scripting
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>scripting</code></strong> est une caractéristique média CSS qui permet de savoir si les outils de script (ex. JavaScript) sont disponibles.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La caractéristique <code>scripting</code> est définie avec un mot-clé parmi les suivants :</p>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Les outils de script sont indisponibles pour le document courant.</dd>
+ <dt><code>initial-only</code></dt>
+ <dd>Les outils de script sont disponibles pendant le chargement de la page mais pas ensuite.</dd>
+ <dt><code>enabled</code></dt>
+ <dd>Les outils de script sont pris en charge et actifs pour le document courant.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="script-none"&gt;Les outils de script ne sont pas disponibles. :-(&lt;/p&gt;
+&lt;p class="script-initial-only"&gt;Les outils de script sont uniquement disponibles au chargement initial.&lt;/p&gt;
+&lt;p class="script-enabled"&gt;Les outils de script sont activés ! :-)&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  color: lightgray;
+}
+
+@media (scripting: none) {
+  .script-none {
+     color: red;
+  }
+}
+
+@media (scripting: initial-only) {
+  .script-initial-only {
+    color: red;
+  }
+}
+
+@media (scripting: enabled) {
+  .script-enabled {
+    color: red;
+  }
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#scripting', 'scripting')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>Reporté à la spécification Media Queries Level 5.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.scripting")}}</p>
diff --git a/files/fr/web/css/@media/shape/index.html b/files/fr/web/css/@media/shape/index.html
new file mode 100644
index 0000000000..ffbbd65e74
--- /dev/null
+++ b/files/fr/web/css/@media/shape/index.html
@@ -0,0 +1,97 @@
+---
+title: shape
+slug: Web/CSS/@media/shape
+tags:
+  - '@media'
+  - CSS
+  - Caractéristique média
+  - Reference
+  - Règle @
+translation_of: Web/CSS/@media/shape
+---
+<div>{{CSSRef}} {{Non-standard_header}}</div>
+
+<p>La caractéristique média <strong><code>shape</code></strong> peut être utilisée afin de tester la forme d'un appareil pour distinguer les affichages rectangulaires des affichages ronds.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La caractéristique <code>shape</code> peut prendre une valeur parmi deux valeurs définies : <code>rect</code> qui représente un écran rectangulaire ou <code>round</code> qui représente un écran circulaire, ovale ou elliptique.</p>
+
+<dl>
+ <dt><code><dfn>rect</dfn></code></dt>
+ <dd>La forme est un rectangle, un carré ou une forme similaire (ex. un rectangle arrondi) qui permet d'utiliser un affichage traditionnel.</dd>
+ <dt><code><dfn>round</dfn></code></dt>
+ <dd>La forme est arrondie telle un cercle, un ovale ou une ellipse et les dispositions arrondies seront plus appropriées sur ces écrans.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Aucun navigateur n'implémente actuellement cette fonctionnalité.</p>
+</div>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;h1&gt;Coucou le monde !&lt;/h1&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">h1 {
+  text-align: left;
+}
+
+@media (shape: rect) {
+  h1 {
+    text-align: left;
+  }
+}
+
+@media (shape: round) {
+  h1 {
+    text-align: center;
+  }
+}
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemple_simple")}}</p>
+
+<h3 id="Feuille_de_style_spécifique">Feuille de style spécifique</h3>
+
+<p>Ce fragment de code HTML permettra d'appliquer une feuille de style particulière pour les appareils qui ont des écrans arrondis.</p>
+
+<pre class="brush: html"><code>&lt;head&gt;
+    &lt;link rel="stylesheet" href="default.css" /&gt;</code>
+<code>    &lt;link media="screen and (shape: rect)" rel="stylesheet" href="rectangle.css" /&gt;
+    &lt;link media="screen and (shape: round)" rel="stylesheet" href="round.css" /&gt;
+&lt;/head&gt;
+</code></pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><em><a href="https://drafts.csswg.org/css-round-display/">CSS Round Display Level 1</a></em></td>
+   <td>Brouillon</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.shape")}}</p>
diff --git a/files/fr/web/css/@media/update-frequency/index.html b/files/fr/web/css/@media/update-frequency/index.html
new file mode 100644
index 0000000000..1bdabdfd63
--- /dev/null
+++ b/files/fr/web/css/@media/update-frequency/index.html
@@ -0,0 +1,82 @@
+---
+title: update
+slug: Web/CSS/@media/update-frequency
+tags:
+  - CSS
+  - Caractéristique média
+  - Reference
+translation_of: Web/CSS/@media/update-frequency
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>update</code></strong> est une caractéristique média (cf. {{cssxref("@media")}}) qui permet de vérifier la vitesse à laquelle l'appareil d'affichage peut modifier l'apparence du contenu.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La caractéristique <code>update</code> est définie avec un mot-clé parmi ceux de la liste ci-après.</p>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Une fois le document affiché, son apparence ne peut plus être modifiée (ex. le document est imprimé sur du papier).</dd>
+ <dt><code>slow</code></dt>
+ <dd>Une fois le document affiché, son apparence peut évoluer mais lentement (ex. des livres électroniques utilisant une encre électronique ou des appareils de lecture avec un niveau d'énergie faible).</dd>
+ <dt><code>fast</code></dt>
+ <dd>Une fois le document affiché, son apparence peut évoluer rapidement (ex. un ordinateur qui serait capable de gérer les transitions CSS).</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  Si ce texte est animé, cela signifie que vous utilisez
+  un appareil avec un affichage qui évolue rapidement.
+&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@keyframes jiggle {
+  from {
+    transform: translateY(0);
+  }
+
+  to {
+    transform: translateY(25px);
+  }
+}
+
+@media (update: fast) {
+  p {
+    animation: 1s jiggle linear alternate infinite;
+  }
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#update', 'update')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.update")}}</p>
diff --git a/files/fr/web/css/@media/width/index.html b/files/fr/web/css/@media/width/index.html
new file mode 100644
index 0000000000..bc1f77eb35
--- /dev/null
+++ b/files/fr/web/css/@media/width/index.html
@@ -0,0 +1,90 @@
+---
+title: width
+slug: Web/CSS/@media/width
+tags:
+  - CSS
+  - Caractéristique média
+  - Reference
+translation_of: Web/CSS/@media/width
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>width</code></strong> est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui permet d'appliquer des styles différents en fonction de la largeur de la zone d'affichage (<em>viewport</em>) ou de la largeur de la page (pour <a href="/fr/docs/Web/CSS/M%C3%A9dia_pagin%C3%A9s">les média paginés</a>). La largeur est exprimée comme une longueur CSS (type {{cssxref("&lt;length&gt;")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p><strong><code>width</code></strong> est une valeur décrivant la largeur d'affichage, les versions préfixées <strong><code>min-width</code></strong> et <code><strong>max-width</strong></code> peuvent également être utilisées afin de décrire la largeur minimale (resp. la largeur maximale).</p>
+
+<pre class="brush: css">/* Largeur exacte */
+@media (width: 300px) {}
+
+/* Un viewport avec une largeur minimale */
+@media (min-width: 50em) {}
+
+/* Un viewport avec une largeur maximale */
+@media (max-width: 1000px) {}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;Observez cet élément lorsque vous redimensionnez la largeur du viewport.&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* Largeur exacte */
+@media (width: 360px) {
+  div {
+    color: red;
+  }
+}
+
+/* Largeur minimale */
+@media (min-width: 35rem) {
+  div {
+    background: yellow;
+  }
+}
+
+/* Largeur maximale */
+@media (max-width: 50rem) {
+  div {
+    border: 2px solid blue;
+  }
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples','90%')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#width', 'width')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>La valeur peut désormais être négative (ce qui correspond à un booléen faux).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#width', 'width')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>Définition initiale. La valeur ne peut pas être négative.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.width")}}</p>
diff --git a/files/fr/web/css/@namespace/index.html b/files/fr/web/css/@namespace/index.html
new file mode 100644
index 0000000000..60693a85ab
--- /dev/null
+++ b/files/fr/web/css/@namespace/index.html
@@ -0,0 +1,78 @@
+---
+title: '@namespace'
+slug: Web/CSS/@namespace
+tags:
+  - CSS
+  - Reference
+  - Règle @
+translation_of: Web/CSS/@namespace
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>@namespace</code></strong> est <a href="/fr/docs/Web/CSS/Règles_@">une règle @</a> qui définit <a href="/fr/docs/Glossaire/Namespace">les espaces de noms XML</a> utilisés dans une feuille de style CSS. Les espaces de noms définis sont alors utilisés pour restreindre les sélecteurs <a href="/fr/docs/Web/CSS/Sélecteurs_universels">universels</a>, <a href="/fr/docs/Web/CSS/Sélecteurs_de_type">de type</a>, et <a href="/fr/docs/Web/CSS/Sélecteurs_d_attribut">d'attribut</a> afin que ceux-ci ne sélectionnent que les éléments contenus dans cet espace de nom. La règle <code>@namespace</code> est généralement utilisée lorsqu'on manipule des documents entremêlant différents espaces de noms (par exemple, un document HTML5 qui contient du SVG en ligne ou du MathML ou alors un fichier XML qui est composé de plusieurs vocabulaires).</p>
+
+<pre class="brush: css no-line-numbers">@namespace url(http://www.w3.org/1999/xhtml);
+@namespace svg url(http://www.w3.org/2000/svg);
+
+/* Cela correspond à tous les éléments XHTML &lt;a&gt;
+  car XHTML est l'espace de nom par défaut, sans
+  préfixe. */
+a {}
+
+/* Cela correspond à tous les éléments SVG &lt;a&gt; */
+svg|a {}
+
+/* Cela correspond aux éléments &lt;a&gt; XHTML et SVG */
+*|a {}
+</pre>
+
+<p>Les règles <code>@namespace</code> doivent suivre les règles @ {{cssxref("@charset")}} et {{cssxref("@import")}} et précéder les autres règles @ ainsi que les déclarations de style contenus dans la feuille de style.</p>
+
+<p><code>@namespace</code> peut être utilisée afin de définir <strong>l'espace de noms par défaut</strong> de la feuille de style. Lorsqu'un espace de noms par défaut est définit, les sélecteurs universels et les sélecteurs de types (pas les sélecteurs d'attribut, cf. note ci-après) ne s'appliqueront qu'aux éléments de cet espace de noms.</p>
+
+<p>La règle <code>@namespace</code> peut également être utilisée afin de définir <strong>un préfixe d'espace de noms</strong>. Lorsqu'un sélecteur universel, de type ou d'attribut est préfixé avec le préfixe de l'espace de noms, ce sélecteur ne ciblera les éléments que si l'espace de nom <strong>et</strong> le nom ou l'attribut de l'élément correspond.</p>
+
+<p>En <a href="/fr/docs/Glossaire/HTML5">HTML5</a>, les <a href="https://html.spec.whatwg.org/#foreign-elements">éléments étrangers</a> connus seront automatiquement affectés à des espaces de noms. Cela signifie que les éléments HTML se comporteront comme s'ils appartenaient à l'espace de noms XHTML (<code>http://www.w3.org/1999/xhtml</code>) même s'il n'y a aucun attribut <code>xmlns</code> dans le document. Les éléments <code><a href="/fr/docs/Web/SVG/Element/svg">&lt;svg&gt;</a></code> et <code><a href="/fr/docs/Web/MathML/Element/math">&lt;math&gt;</a></code> seront affectés à leurs espaces de noms respectifs (<code>http://www.w3.org/2000/svg</code> et <code>http://www.w3.org/1998/Math/MathML</code>).</p>
+
+<div class="note">
+<p><strong>Note :</strong> En XML, sauf si un préfixe est directement apposé sur l'attribut (ex. <code>xlink:href</code>), cet attribut n'est rattaché à aucun espace de noms. Autrement dit, les attributs n'héritent pas de l'espace de noms de l'élément auquel ils sont rattachés. Afin de respecter ce comportement, l'espace de noms par défaut n'est pas appliqué aux sélecteurs d'attributs.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Espace de noms par défaut */
+@namespace url(<em>XML-namespace-URL</em>);
+@namespace "<em>XML-namespace-URL</em>";
+
+/* Espace de noms préfixé */
+@namespace <em>préfixe</em> url(<em>XML-namespace-URL</em>);
+@namespace <em>préfixe</em> "<em>XML-namespace-URL</em>";</pre>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Namespaces', '#declaration', '@namespace')}}</td>
+   <td>{{Spec2('CSS3 Namespaces')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.namespace")}}</p>
diff --git a/files/fr/web/css/@page/bleed/index.html b/files/fr/web/css/@page/bleed/index.html
new file mode 100644
index 0000000000..3ff61db95c
--- /dev/null
+++ b/files/fr/web/css/@page/bleed/index.html
@@ -0,0 +1,79 @@
+---
+title: bleed
+slug: Web/CSS/@page/bleed
+tags:
+  - CSS
+  - Descripteur
+  - Experimental
+  - Reference
+translation_of: Web/CSS/@page/bleed
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>Le descripteur <strong><code>bleed</code></strong>, associé à la règle @ {{cssxref("@page")}}, définit l'espace duquel le contenu peut dépasser de la boîte de la page. Ce descripteur aura un effet uniquement si le descripteur {{cssxref("@page/marks","marks")}} est utilisé pour afficher les marques de coupure.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css">/* Valeurs avec un mot-clé */
+bleed: auto;
+
+/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+bleed: 8pt;
+bleed: 1cm;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Cette valeur correspond à <code>6pt</code> si {{cssxref("marks")}} vaut <code>crop</code>. Dans les autres cas, cette valeur vaut zéro.</dd>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>Cette valeur indique la distance, dans chaque direction, de laquelle le contenu peut dépasser de la boîte de la page. Les valeurs négatives sont autorisées mais les différentes implémentations fixent différentes limites.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">@page {
+  bleed: 1cm;
+  marks: crop;
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Paged Media", "#bleed", "bleed")}}</td>
+   <td>{{Spec2("CSS3 Paged Media")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.page.bleed")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("@page/marks", "marks")}}</li>
+ <li>{{cssxref("@page/size", "size")}}</li>
+</ul>
diff --git a/files/fr/web/css/@page/index.html b/files/fr/web/css/@page/index.html
new file mode 100644
index 0000000000..c056ac3ae2
--- /dev/null
+++ b/files/fr/web/css/@page/index.html
@@ -0,0 +1,105 @@
+---
+title: '@page'
+slug: Web/CSS/@page
+tags:
+  - CSS
+  - Reference
+  - Règle @
+translation_of: Web/CSS/@page
+---
+<div>{{CSSRef}}</div>
+
+<p>La règle @ <strong><code>@page</code></strong> est utilisée afin de modifier certaines propriétés CSS lorsqu'on imprime un document. La règle <code>@page</code> ne permet par de modifier toutes les propriétés mais uniquement celles qui portent sur les marges, les lignes orphelines et veuves ainsi que les sauts de page du document. Si on utilise cette règle @ pour modifier une autre propriété, ce changement sera ignoré.</p>
+
+<pre class="brush: css no-line-numbers">@page {
+  margin: 1cm;
+}
+
+@page :first {
+  margin: 2cm;
+}</pre>
+
+<p>La règle @ <code>@page</code> peut être manipulée via le CSSOM, notamment avec l'interface {{domxref("CSSPageRule")}}.</p>
+
+<div class="note"><strong>Note :</strong> Le W3C est en train de discuter de la gestion des unités de longueur ({{cssxref("&lt;length&gt;")}}) relative à la zone d'affichage (<em>viewport</em>) : <code>vh</code>, <code>vw</code>, <code>vmin</code> et <code>vmax</code>. En attendant, il est conseillé de ne pas les utiliser au sein d'une règle <code>@page</code>.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Descripteurs">Descripteurs</h3>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/@page/size"><code>size</code></a></dt>
+ <dd>Définit la taille et l'orientation du bloc englobant la boîte de la page. En général, lorsqu'une boîte correspondant à une page est rendu sur une feuille, cela indique la taille de la page utilisée.</dd>
+</dl>
+
+<dl>
+ <dt><code><a href="/fr/docs/Web/CSS/@page/marks">marks</a></code></dt>
+ <dd>Ajoute des marques pour la découpe ou l'alignement des pages du document.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/@page/bleed"><code>bleed</code></a></dt>
+ <dd>Définit la limite au-delà de la boîte de la page au-delà de laquelle le contenu affiché est rogné.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">@page :first {
+  margin: 2cm 3cm;
+} </pre>
+
+<p>Pour d'autres exemples, voir les pages qui concernent les pseudo-classes liées à <code>@page</code> :</p>
+
+<ul>
+ <li>{{cssxref(":blank")}}</li>
+ <li>{{cssxref(":first")}}</li>
+ <li>{{cssxref(":left")}}</li>
+ <li>{{cssxref(":right")}}</li>
+ <li>{{cssxref(":recto")}} {{experimental_inline}}</li>
+ <li>{{cssxref(":verso")}} {{experimental_inline}}</li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Logical Properties', '#logical-page', ':recto and :verso')}}</td>
+   <td>{{Spec2('CSS Logical Properties')}}</td>
+   <td>Ajout des sélecteurs de page <code>:recto</code> et <code>:verso</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Paged Media', '#at-page-rule', '@page')}}</td>
+   <td>{{Spec2('CSS3 Paged Media')}}</td>
+   <td>Aucun changement depuis  {{SpecName('CSS2.1')}}, bien que plus de règles @ puissent être utilisées au sein d'une règle <code>@page</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'page.html#page-selectors', '@page')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.page")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=286443">Le bug de suivi Mozilla pour l'ensemble des fonctionnalités associées aux médias paginés.</a></li>
+</ul>
diff --git a/files/fr/web/css/@page/marks/index.html b/files/fr/web/css/@page/marks/index.html
new file mode 100644
index 0000000000..8ac0d906f5
--- /dev/null
+++ b/files/fr/web/css/@page/marks/index.html
@@ -0,0 +1,82 @@
+---
+title: marks
+slug: Web/CSS/@page/marks
+tags:
+  - CSS
+  - Descripteur
+  - Experimental
+  - Reference
+translation_of: Web/CSS/@page/marks
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>Le descripteur <strong><code>marks</code></strong>, associé à la règle @ {{cssxref("@page")}}, est utilisé pour afficher des marques de coupure (<em>crop marks</em>) ou des croix d'alignement (<em>cross marks</em>). Les marques de coupure sont utilisées pour massicoter les pages et les croix d'alignement sont utilisées afin d'aligner plusieurs feuilles entre elles.</p>
+
+<p>Les marques de coupure et d'alignement sont imprimées en dehors de la boîte de la page. Pour qu'il y ait l'espace nécessaire au dessin de ces symboles, les pages finales doivent être légèrement plus grandes que la boîtes de la page.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css">/* Valeurs avec un mot-clé */
+marks: none;
+marks: crop;
+marks: cross;
+marks: crop cross;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>crop</code></dt>
+ <dd>Les marques de découpe seront affichées sur la page finale.</dd>
+ <dt><code>cross</code></dt>
+ <dd>Les marques d'alignement seront affichées sur la page finale.</dd>
+ <dt><code>none</code></dt>
+ <dd>Aucune marque ne sera affichée.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">@page {
+  marks: crop cross;
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Paged Media', '#marks', 'marks')}}</td>
+   <td>{{Spec2('CSS3 Paged Media')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Cette propriété CSS avait initialement été proposée pour la spécification CSS de niveau 2 mais a été abandonnée lors de la première révision.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.page.marks")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("@page/bleed", "bleed")}}</li>
+ <li>{{cssxref("@page/size", "size")}}</li>
+</ul>
diff --git a/files/fr/web/css/@page/size/index.html b/files/fr/web/css/@page/size/index.html
new file mode 100644
index 0000000000..5d21dafcd1
--- /dev/null
+++ b/files/fr/web/css/@page/size/index.html
@@ -0,0 +1,127 @@
+---
+title: size
+slug: Web/CSS/@page/size
+tags:
+  - CSS
+  - Descripteur
+  - Experimental
+  - Reference
+translation_of: Web/CSS/@page/size
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>Le descripteur <strong><code>size</code></strong>, associé à la règle @ {{cssxref("@page")}}, permet de définir les dimensions et l'orientation de la boîte utilisée pour représenter une page. La plupart du temps, cette taille correspondra à la totalité de la taille de la page imprimée.</p>
+
+<p>Les dimensions de cette boîte peuvent être définies de façon absolues ou relatives (dans ce cas, la page occupera l'espace disponible).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css">/* Des mots-clés qui peuvent être utilisées
+   pour remplir l'espace disponible         */
+size: auto;
+size: portrait;
+size: landscape;
+
+/* Des valeurs de longueur */
+/* Type &lt;length&gt;           */
+/* 1 valeur : hauteur = largeur */
+size: 6in;
+
+/* 2 valeurs : la largeur puis la hauteur */
+size: 4in 6in;
+
+/* Des mots-clés qui représentent des */
+/* dimensions absolues                */
+size: A4;
+size: B5;
+size: JIS-B4;
+size: letter;
+
+/* Une déclaration incluant la taille et l'orientation */
+size: A4 portrait;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>L'agent utilisateur décidera de la taille de page. En général, ce seront les dimensions de la page cible (celle sur laquelle imprimer/afficher) qui seront utilisées.</dd>
+ <dt><code>landscape</code></dt>
+ <dd>Le contenu de la page est affiché en paysage (le côté le plus long de la page sera le côté horizontal).</dd>
+ <dt><code>portrait</code></dt>
+ <dd>Le contenu de la page est affiché en portrait (le côté le plus long de la page sera le côté vertical).</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une valeur de longueur (cf. {{cssxref("&lt;length&gt;")}}). La première valeur utilisée correspond à la largeur de la boîte de la page et la deuxième correspond à la hauteur. Si une seule valeur est fournie, celle-ci sera utilisée pour la largeur et pour la hauteur.</dd>
+ <dt><code>&lt;page-size&gt;</code></dt>
+ <dd>
+ <dl>
+  <dt><code>A5</code></dt>
+  <dd>Ce mot-clé correspond aux dimensions ISO standard : 148mm x 210mm.</dd>
+  <dt><code>A4</code></dt>
+  <dd>Ce mot-clé correspond aux dimensions ISO standard : 210mm x 297mm (c'est le format le plus utilisé pour les impressions occasionnelles sur les imprimantes personnelles).</dd>
+  <dt><code>A3</code></dt>
+  <dd>Ce mot-clé correspond aux dimensions ISO standard : 297mm x 420mm.</dd>
+  <dt><code>B5</code></dt>
+  <dd>Ce mot-clé correspond aux dimensions ISO standard : 176mm x 250mm.</dd>
+  <dt><code>B4</code></dt>
+  <dd>Ce mot-clé correspond aux dimensions ISO standard : 250mm x 353mm.</dd>
+  <dt><code>JIS-B5</code></dt>
+  <dd>Ce mot-clé correspond aux dimensions JIS standard : 182mm x 257mm.</dd>
+  <dt><code>JIS-B4</code></dt>
+  <dd>Ce mot-clé correspond aux dimensions JIS standard : 257mm x 364mm.</dd>
+  <dt><code>letter</code></dt>
+  <dd>Ce mot-clé correspond à la taille standard du papier à lettre aux États-Unis : 8.5in x 11in.</dd>
+  <dt><code>legal</code></dt>
+  <dd>Ce mot-clé correspond à la taille standard des documents légaux aux États-Unis : 8.5in par 14in.</dd>
+  <dt><code>ledger</code></dt>
+  <dd>Ce mot-clé correspond à la taille standard des pages d'un livre en grand format aux États-Unis. Cela correspond à : 11in x 17in.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">@page {
+  size: 4cm 6cm landscape;
+}
+</pre>
+
+<pre class="brush: css">@media print {
+  @page {
+    size: 50mm 150mm;
+  }
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Paged Media', '#size', 'size')}}</td>
+   <td>{{Spec2('CSS3 Paged Media')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.page.size")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("@page/bleed", "bleed")}}</li>
+ <li>{{cssxref("@page/marks", "marks")}}</li>
+</ul>
diff --git a/files/fr/web/css/@supports/index.html b/files/fr/web/css/@supports/index.html
new file mode 100644
index 0000000000..6baf61e27c
--- /dev/null
+++ b/files/fr/web/css/@supports/index.html
@@ -0,0 +1,209 @@
+---
+title: '@supports'
+slug: Web/CSS/@supports
+tags:
+  - CSS
+  - Reference
+  - Règle @
+translation_of: Web/CSS/@supports
+---
+<div>{{CSSRef}}</div>
+
+<p>La règle <strong><code>@supports</code></strong> permet de définir des déclarations qui dépendent de la prise en charge du navigateur d'une ou plusieurs fonctionnalités CSS. Cette condition est définie par un ensemble de paires de propriété/valeur qui forment une combinaison de conjonctions, disjonctions, négations. Une telle condition est appelée « condition de prise en charge » (ou <em>supports condition</em>).</p>
+
+<pre class="brush: css no-line-numbers">@supports (display: grid) {
+  div {
+    display: grid;
+  }
+}</pre>
+
+<pre class="brush: css no-line-numbers">@supports not (display: grid) {
+  div {
+    float: right;
+  }
+}</pre>
+
+<p><code>@supports</code> permet ainsi au moteur de rendu de tester la présence d'une fonctionnalité (on parle de <em>feature query</em>).</p>
+
+<p>La règle @ <code>@supports</code> peut être utilisée au niveau le plus haut de la feuille de style et également à l'intérieur d'<a href="/fr/docs/Web/CSS/Règles_@#R.C3.A8gles_conditionnelles_de_groupe">un groupe de règle conditionnel</a>. Cette règle @ peut être manipulée via le modèle d'objets CSS et JavaScript, notamment via l'interface {{domxref("CSSSupportsRule")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Une condition de prise en charge se compose d'une ou plusieurs déclarations combinées entre elles par des opérateurs logiques (<code>and</code>, <code>or</code>, <code>not</code>). La précédence des opérateurs peut être surchargée en utilisant des parenthèses autour des déclarations.</p>
+
+<h3 id="Syntaxe_déclarative">Syntaxe déclarative</h3>
+
+<p>La plus simple expression est une déclaration CSS, c'est-à-dire un nom de propriété CSS suivi par deux points (:) puis une valeur. Ainsi, l'expression suivante :</p>
+
+<pre class="brush:css">@supports ( transform-origin: 5% 5% ) { }</pre>
+
+<p>renvoie le booléen vrai si la propriété {{cssxref("transform-origin")}} du navigateur considère que la valeur <code>5% 5%</code> est valide.</p>
+
+<p>Une déclaration CSS est toujours encadrée par des parenthèses.</p>
+
+<h3 id="Syntaxe_fonctionnelle">Syntaxe fonctionnelle</h3>
+
+<p>La deuxième syntaxe permet d'utiliser une fonction. Cette syntaxe est prise en charge par les différents navigateurs mais les fonctions sont en cours de standardisation.</p>
+
+<h4 id="selector_Experimental_inline"><code>selector()</code> {{Experimental_inline}}</h4>
+
+<p>Dans l'exemple qui suit, on teste si le navigateur prend en charge la syntaxe du sélecteur passé en argument. Ici, le code renvoie VRAI si le navigateur prend en charge les <a href="/fr/docs/Web/CSS/Sélecteurs_enfant">sélecteurs enfants</a></p>
+
+<pre class="brush: css">@supports selector(A &gt; B) { }</pre>
+
+<h3 id="Lopérateur_not">L'opérateur <code>not</code></h3>
+
+<p>L'opérateur <code>not</code> peut être utilisée avant une expression afin de créer un expression dont le résultat logique est la négation du résultat de l'expression originale. Ainsi, l'expression suivante :</p>
+
+<pre class="brush:css">@supports not ( transform-origin: 10em 10em 10em ) { }</pre>
+
+<p>renvoie VRAI si la propriété {{cssxref("transform-origin")}} du navigateur ne considère pas la valeur <code>10em 10em 10em</code> comme valide.</p>
+
+<p>Comme pour les autres opérateurs, on peut appliquer l'opérateur <code>not</code> à une déclaration, quelle que soit sa complexité. Les exemples qui suivent sont donc des expressions valides :</p>
+
+<pre class="brush:css">@supports not ( not ( transform-origin: 2px ) ) { }
+@supports (display: grid) and ( not (display: inline-grid) ) { }</pre>
+
+<div class="note style-wrap">
+<p><strong>Note :</strong> Au niveau le plus haut, il n'est pas nécessaire d'encadrer l'opérateur <code>not</code> entre parenthèses. Si on souhaite le combiner avec d'autres opérateurs comme <code>and</code> ou <code>or</code>, il faudra utiliser des parenthèses.</p>
+</div>
+
+<h3 id="Lopérateur_and">L'opérateur <code>and</code></h3>
+
+<p>L'opérateur <code>and</code> peut être utilisé pour former une nouvelle expression à partir de deux expressions. L'expression résultante sera la conjonction des deux expressions originelles. Autrement dit, le résultat de cette nouvelle expression sera VRAI si et seulement si les deux expressions de départ sont vraies et FAUX sinon. Dans l'exemple suivant, l'expression complète ne sera vérifiée que si les deux expressions sont vérifiées :</p>
+
+<pre class="brush:css">@supports (display: table-cell) and (display: list-item) { }</pre>
+
+<p>On peut enchaîner plusieurs conjonctions sans avoir à ajouter de parenthèses (l'opérateur est commutatif).</p>
+
+<pre class="brush:css">@supports (display: table-cell) and (display: list-item) and (display:run-in) { }</pre>
+
+<p>sera équivalente à :</p>
+
+<pre class="brush:css">@supports (display: table-cell) and ((display: list-item) and (display:run-in)) { }</pre>
+
+<h3 id="Lopérateur_or">L'opérateur <code>or</code></h3>
+
+<p>L'opérateur <code>or</code> peut être utilisé pour former une nouvelle expression à partir de deux expressions. L'expression résultante sera la disjonction des deux expressions originelles. Autrement dit, le résultat de cette nouvelle expression sera VRAI si au moins une des deux expressions est vraie. Dans l'exemple qui suit, l'expression complète est vérifiée si au moins une des deux (ce peuvent être les deux) expressions est vérifiée :</p>
+
+<pre class="brush:css;">@supports ( transform-style: preserve ) or ( -moz-transform-style: preserve ) { }</pre>
+
+<p>On peut enchaîner plusieurs disjonctions sans qu'il soit nécessaire d'ajouter des parenthèses.</p>
+
+<pre class="brush:css">@supports ( transform-style: preserve ) or ( -moz-transform-style: preserve ) or
+          ( -o-transform-style: preserve ) or ( -webkit-transform-style: preserve  ) { }</pre>
+
+<p>sera ainsi équivalente à :</p>
+
+<pre class="brush:css">@supports ( transform-style: preserve-3d ) or (( -moz-transform-style: preserve-3d ) or
+          (( -o-transform-style: preserve-3d ) or ( -webkit-transform-style: preserve-3d  ))) { }</pre>
+
+<div class="note style-wrap">
+<p><strong>Note</strong> : Lorsqu'on utilise à la fois l'opérateur <code>and</code> et l'opérateur <code>or</code>, il devient nécessaire d'utiliser des parenthèses pour que l'ordre d'application des opérateurs soit défini. Si on n'utilise pas de parenthèses, la condition sera considérée comme invalide et l'ensemble de la règle @ sera ignorée.</p>
+</div>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Tester_la_prise_en_charge_dune_propriété_CSS_donnée">Tester la prise en charge d'une propriété CSS donnée</h3>
+
+<pre class="brush:css;">@supports (animation-name: test) {
+    … /* Du code CSS spécifique, appliqué quand les animations sont prises en charge sans préfixe */
+    @keyframes { /* @supports est une règle @ qui peut inclure d'autres règles @ */
+      …
+    }
+}
+</pre>
+
+<h3 id="Tester_la_prise_en_charge_dune_propriété_CSS_donnée_ou_dune_version_préfixée">Tester la prise en charge d'une propriété CSS donnée ou d'une version préfixée</h3>
+
+<pre class="brush:css;">@supports ( (perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or
+            (-ms-perspective: 10px) or (-o-perspective: 10px) ) {
+    … /* Du code CSS spécifique, appliqué lorsque les transformations 3D,
+         sont prises en charge, éventuellement avec un préfixe */
+}
+</pre>
+
+<h3 id="Tester_labsence_de_prise_en_charge_dune_propriété_CSS">Tester l'absence de prise en charge d'une propriété CSS</h3>
+
+<pre class="brush:css;">@supports not ((text-align-last:justify) or (-moz-text-align-last:justify) ){
+    … /* Du code CSS spécifique, appliqué pour simuler text-align-last:justify */
+}</pre>
+
+<h3 id="Tester_la_prise_en_charge_des_propriétés_personnalisées">Tester la prise en charge des propriétés personnalisées</h3>
+
+<pre class="brush:css;">@supports (--toto: green) {
+  body {
+    color: --nomVar;
+  }
+}</pre>
+
+<h3 id="Tester_la_prise_en_charge_dun_sélecteur">Tester la prise en charge d'un sélecteur</h3>
+
+<p>{{SeeCompatTable}}</p>
+
+<pre class="brush: css;">/* Cette règle ne sera pas appliquée si le navigateur */
+/* ne prend pas en charge :is() */
+:is(ul, ol) &gt; li {
+  … /* Le CSS à utiliser lorsque :is(…) est pris en charge */
+}
+
+@supports not selector(:is(a, b)) {
+  /* Que faire lorsque :is() n'est pas pris en charge */
+  ul &gt; li,
+  ol &gt; li {
+    …
+  }
+}
+
+@supports selector(:nth-child(1n of a, b)) {
+  /* Cette règle doit être placée dans un bloc @supports */
+  /* Sinon elle pourra être partiellement appliquée pour les */
+  /* navigateurs qui ne prennent pas en charge :is(…) */
+  :is(nth-child(1n of ul, ol) a,
+  details &gt; summary) {
+    … /* CSS appliqué quand le sélecteur :is(…) et quand la forme
+         `of` pour :nth-child sont pris en charge */
+  }
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Conditional", "#at-supports", "@supports")}}</td>
+   <td>{{Spec2("CSS4 Conditional")}}</td>
+   <td>Ajout de la fonction <code>selector()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Conditional", "#at-supports", "@supports")}}</td>
+   <td>{{Spec2("CSS3 Conditional")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.supports")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La classe CSSOM {{domxref("CSSSupportsRule")}}</li>
+ <li>La méthode {{domxref("CSS.supports")}} qui permet d'effectuer les mêmes vérifications via JavaScript.</li>
+</ul>
diff --git a/files/fr/web/css/@viewport/height/index.html b/files/fr/web/css/@viewport/height/index.html
new file mode 100644
index 0000000000..f836041357
--- /dev/null
+++ b/files/fr/web/css/@viewport/height/index.html
@@ -0,0 +1,76 @@
+---
+title: height
+slug: Web/CSS/@viewport/height
+tags:
+  - '@viewport'
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@viewport
+---
+<div>{{CSSRef}}</div>
+
+<p>Le descripteur <code><strong>height</strong></code>, rattaché à la règle @ {{cssxref("@viewport")}} est un raccourci permettant de définir les deux descripteurs {{cssxref("@viewport/min-height", "min-height")}} et {{cssxref("@viewport/max-height", "max-height")}}.</p>
+
+<p>Si on fournit une seule valeur, c'est cette valeur qui sera utilisée pour la hauteur minimale et maximale de la zone d'affichage (<em>viewport</em>). Si on fournit deux valeurs, la première correspondra à la hauteur minimale de la zone d'affichage et la deuxième à la hauteur maximale.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Une valeur de longueur        */
+/* Type &lt;length&gt; ou &lt;percentage&gt; */
+height: auto;
+height: 320px;
+height: 15em;
+
+/* Deux valeurs de longueur */
+height: 320px 200px;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>La <a href="/fr/docs/Web/CSS/Valeur_utilis%C3%A9e">valeur utilisée</a> sera calculée à partir des valeurs des autres descripteurs.</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une longueur relative ou absolue qui doit être positive.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Une valeur exprimée en pourcentages qui est relative à la hauteur de la zone d'affichage (<em>viewport</em>) lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">@viewport {
+  height: 500px;
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Device', '#descdef-viewport-height', '"height" descriptor')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.viewport.height")}}</p>
diff --git a/files/fr/web/css/@viewport/index.html b/files/fr/web/css/@viewport/index.html
new file mode 100644
index 0000000000..0269b84e53
--- /dev/null
+++ b/files/fr/web/css/@viewport/index.html
@@ -0,0 +1,120 @@
+---
+title: '@viewport'
+slug: Web/CSS/@viewport
+tags:
+  - CSS
+  - Experimental
+  - Reference
+  - Règle @
+translation_of: Web/CSS/@viewport
+---
+<div>{{SeeCompatTable}}{{CSSRef}}</div>
+
+<p>La règle @<strong> <code>@viewport</code></strong> permet de configurer la zone d'affichage (le <em>viewport</em> en anglais) à travers laquelle le document est affiché. Cette règle est principalement utilisée pour les appareils mobiles mais aussi pour les navigateurs de bureau (par exemple Microsoft Edge qui gère la division de l'écran).</p>
+
+<p>Les longueurs exprimées en pourcentages sont calculées de façon relative à la <strong>zone d'affichage initiale</strong> c'est-à-dire le <em>viewport</em> avant tout ajustement effectué par le navigateur ou par les styles de la page. Généralement, cela correspond à la taille de la fenêtre pour les navigateurs de bureau lorsqu'ils ne sont pas utilisés en mode plein écran.</p>
+
+<p>Pour les appareils mobiles (ou pour les appareils de bureau qui sont en plein écran), la zone d'affichage initiale correspond à la portion de l'écran disponible pour l'application. Cela peut correspondre à l'écran entier ou bien à l'écran auquel on enlève les zones contrôlées par le système d'exploitation (par exemple la barre de tâche) ou bien encore à la zone de l'écran qui n'est pas occupée par le système d'exploitation ou d'autres applications.</p>
+
+<pre class="brush: css no-line-numbers">@viewport {
+  width: device-width;
+}</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Cette règle @ contient un ensemble de descripteurs CSS dans un bloc délimité par des accolades.</p>
+
+<p>Un facteur de zoom de <code>1.0</code> ou de <code>100%</code> signifie qu'il n'y a eu aucun zoom. Si la valeur est supérieure, cela signifie qu'on a zoomé pour agrandir le contenu. Inversement, si la valeur est inférieure à <code>1.0</code> ou à <code>100%</code>, cela signifie qu'on a dézoomé.</p>
+
+<h3 id="Descripteurs">Descripteurs</h3>
+
+<p>Les navigateurs sont supposés ignorer les descripteurs non reconnus.</p>
+
+<dl>
+ <dt>{{cssxref("@viewport/min-width","min-width")}}</dt>
+ <dd>Ce descripteur détermine la largeur minimale de la zone d'affichage (<em>viewport</em>) lorsque le document est affiché initialement.</dd>
+ <dt>{{cssxref("@viewport/max-width","max-width")}}</dt>
+ <dd>Ce descripteur détermine la largeur maximale de la zone d'affichage (<em>viewport</em>) lorsque le document est affiché initialement.</dd>
+ <dt>{{cssxref("@viewport/width","width")}}</dt>
+ <dd>Ce descripteur est un raccourci qui permet de définir <code>min-width</code> et <code>max-width</code>.</dd>
+ <dt>{{cssxref("@viewport/min-height","min-height")}}</dt>
+ <dd>Ce descripteur détermine la hauteur minimale de la zone d'affichage (<em>viewport</em>) lorsque le document est affiché initialement.</dd>
+ <dt>{{cssxref("@viewport/max-height","max-height")}}</dt>
+ <dd>Ce descripteur détermine la hauteur maximale de la zone d'affichage (<em>viewport</em>) lorsque le document est affiché initialement.</dd>
+ <dt>{{cssxref("@viewport/height","height")}}</dt>
+ <dd>Ce descripteur est un raccourci qui permet de définir <code>min-height</code> et <code>max-height</code>.</dd>
+ <dt>{{cssxref("@viewport/zoom","zoom")}}</dt>
+ <dd>Ce descripteur permet de définir le niveau de zoom initial.</dd>
+ <dt>{{cssxref("@viewport/min-zoom","min-zoom")}}</dt>
+ <dd>Ce descripteur permet de définir le niveau de zoom minimal.</dd>
+ <dt>{{cssxref("@viewport/max-zoom","max-zoom")}}</dt>
+ <dd>Ce descripteur permet de définir le niveau de zoom maximal.</dd>
+ <dt>{{cssxref("@viewport/user-zoom","user-zoom")}}</dt>
+ <dd>Ce descripteur indique si l'utilisateur peut, ou non, changer le niveau de zoom.</dd>
+ <dt>{{cssxref("@viewport/orientation","orientation")}}</dt>
+ <dd>Ce descripteur contrôle l'orientation du document.</dd>
+ <dt>{{cssxref("@viewport/ viewport-fit", "viewport-fit")}}</dt>
+ <dd>Ce descripteur contrôle l'affichage du document pour les affichages non-rectangulaires.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note : </strong>Un facteur de zoom de <code>1.0</code> ou <code>100%</code> correspond à une absence de zoom. Les valeurs supérieures traduiront une augmentation du niveau de zoom (agrandissement des images et du texte) et les valeurs inférieures correspondront à une réduction du niveau de zoom.</p>
+</div>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">@viewport {
+  min-width: 640px;
+  max-width: 800px;
+}
+
+@viewport {
+  zoom: 0.75;
+  min-zoom: 0.5;
+  max-zoom: 0.9;
+}
+
+@viewport {
+  orientation: landscape;
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Round Display", "#extending-viewport-rule", "@viewport")}}</td>
+   <td>{{Spec2("CSS Round Display")}}</td>
+   <td>Définition du descripteur {{cssxref("@viewport/viewport-fit", "viewport-fit")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Device', '#the-atviewport-rule', '@viewport')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.viewport")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("meta")}} et plus précisément <code>&lt;meta name="viewport"&gt;</code></li>
+ <li><a href="/fr/docs/Mozilla/Mobile/Balise_meta_viewport">Utiliser la balise <code>meta</code> afin de contrôler la disposition sur les navigateurs mobiles</a></li>
+</ul>
diff --git a/files/fr/web/css/@viewport/max-height/index.html b/files/fr/web/css/@viewport/max-height/index.html
new file mode 100644
index 0000000000..646a3e2e8d
--- /dev/null
+++ b/files/fr/web/css/@viewport/max-height/index.html
@@ -0,0 +1,76 @@
+---
+title: max-height
+slug: Web/CSS/@viewport/max-height
+tags:
+  - '@viewport'
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@viewport
+---
+<div>{{CSSRef}}</div>
+
+<p>Le descripteur <code><strong>max-height</strong></code>, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir la hauteur maximale de la zone d'affichage (<em>viewport</em>) d'un document.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Avec un mot-clé */
+max-height: auto;
+
+/* Valeur de longueur */
+/* Type &lt;length&gt;      */
+max-height: 400px;
+max-height: 50em;
+max-height: 20cm;
+
+/* Valeur proportionnelle */
+/* Type &lt;percentage&gt;      */
+max-height: 75%;</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd><a href="/fr/docs/Web/CSS/Valeur_utilisée">La valeur utilisée</a> est alors calculée selon les valeurs des autres descripteurs.</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une valeur absolue ou relative représentant une longueur. Cette valeur doit être positive.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Une valeur de pourcentage relative à la hauteur initiale de la zone d'affichage lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">@viewport {
+  max-height: 600px;
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Device', '#descdef-viewport-max-height', '"max-height" descriptor')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.viewport.max-height")}}</p>
diff --git a/files/fr/web/css/@viewport/max-width/index.html b/files/fr/web/css/@viewport/max-width/index.html
new file mode 100644
index 0000000000..30e0ee9e78
--- /dev/null
+++ b/files/fr/web/css/@viewport/max-width/index.html
@@ -0,0 +1,75 @@
+---
+title: max-width
+slug: Web/CSS/@viewport/max-width
+tags:
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@viewport
+---
+<div>{{CSSRef}}</div>
+
+<p>Le descripteur <code><strong>max-width</strong></code>, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir la largeur maximale de la zone d'affichage (<em>viewport</em>) d'un document. Par défaut, la largeur maximale de la zone d'affichage correspond à celle du <em>viewport</em> initial.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Avec un mot-clé */
+max-width: auto;
+
+/* Valeur de longueur */
+/* Type &lt;length&gt;      */
+max-width: 400px;
+max-width: 50em;
+max-width: 20cm;
+
+/* Valeur proportionnelle */
+/* Type &lt;percentage&gt;      */
+max-width: 75%;</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd><a href="/fr/docs/Web/CSS/Valeur_utilisée">La valeur utilisée</a> est alors calculée selon les valeurs des autres descripteurs.</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une valeur absolue ou relative représentant une longueur. Cette valeur doit être positive.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Une valeur de pourcentage relative à la largeur initiale de la zone d'affichage lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">@viewport {
+  max-width: 600px;
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Device', '#descdef-viewport-max-width', '"max-width" descriptor')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.viewport.max-width")}}</p>
diff --git a/files/fr/web/css/@viewport/max-zoom/index.html b/files/fr/web/css/@viewport/max-zoom/index.html
new file mode 100644
index 0000000000..605f8a25fb
--- /dev/null
+++ b/files/fr/web/css/@viewport/max-zoom/index.html
@@ -0,0 +1,69 @@
+---
+title: max-zoom
+slug: Web/CSS/@viewport/max-zoom
+tags:
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@viewport
+---
+<div>{{CSSRef}}</div>
+
+<p>Le descripteur <strong><code>max-zoom</code></strong>, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir le niveau de zoom maximal au-delà duquel le navigateur n'augmentera pas le niveau de zoom (que ce soit une action automatique ou une action de l'utilisateur).</p>
+
+<p>Un facteur de zoom égal à <code>1.0</code> ou à <code>100%</code> correspond à l'absence de zoom. Si on utilise des valeurs supérieures, cela correspondra à un niveau de zoom plus élevé. À l'inverse des valeurs inférieures traduiront un « dézoom ».</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css">/* Valeur avec un mot-clé */
+max-zoom: auto;
+
+/* Nombres : type &lt;number&gt; */
+max-zoom: 0.8;
+max-zoom: 2.0;
+
+/* Valeurs proportionnelles : type &lt;percentage&gt; */
+max-zoom: 150%;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>L'agent utilisateur détermine la limite du niveau de zoom applicable pour le document.</dd>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>Un nombre positif qui correspond à la limite haute du niveau de zoom (cf. {{cssxref("&lt;number&gt;")}}).</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Un pourcentage positif qui correspond à la limite haute du niveau de zoom (cf. {{cssxref("&lt;percentage&gt;")}}).</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Device', '#max-zoom-desc', '"max-zoom" descriptor')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.viewport.max-zoom")}}</p>
diff --git a/files/fr/web/css/@viewport/min-height/index.html b/files/fr/web/css/@viewport/min-height/index.html
new file mode 100644
index 0000000000..016800c563
--- /dev/null
+++ b/files/fr/web/css/@viewport/min-height/index.html
@@ -0,0 +1,76 @@
+---
+title: min-height
+slug: Web/CSS/@viewport/min-height
+tags:
+  - '@viewport'
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@viewport
+---
+<div>{{CSSRef}}</div>
+
+<p>Le descripteur <code><strong>min-height</strong></code>, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir la hauteur minimale de la zone d'affichage (<em>viewport</em>) d'un document.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Avec un mot-clé */
+min-height: auto;
+
+/* Valeur de longueur */
+/* Type &lt;length&gt;      */
+min-height: 400px;
+min-height: 50em;
+min-height: 20cm;
+
+/* Valeur proportionnelle */
+/* Type &lt;percentage&gt;      */
+min-height: 75%;</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd><a href="/fr/docs/Web/CSS/Valeur_utilisée">La valeur utilisée</a> est alors calculée selon les valeurs des autres descripteurs.</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une valeur absolue ou relative représentant une longueur. Cette valeur doit être positive.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Une valeur de pourcentage relative à la hauteur initiale de la zone d'affichage lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">@viewport {
+  min-height: 600px;
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Device', '#descdef-viewport-min-height', '"min-height" descriptor')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.viewport.min-height")}}</p>
diff --git a/files/fr/web/css/@viewport/min-width/index.html b/files/fr/web/css/@viewport/min-width/index.html
new file mode 100644
index 0000000000..d4e7177979
--- /dev/null
+++ b/files/fr/web/css/@viewport/min-width/index.html
@@ -0,0 +1,75 @@
+---
+title: min-width
+slug: Web/CSS/@viewport/min-width
+tags:
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@viewport
+---
+<div>{{CSSRef}}</div>
+
+<p>Le descripteur <code><strong>min-width</strong></code>, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir la largeur minimale de la zone d'affichage (<em>viewport</em>) d'un document.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Avec un mot-clé */
+min-width: auto;
+
+/* Valeur de longueur */
+/* Type &lt;length&gt;      */
+min-width: 400px;
+min-width: 50em;
+min-width: 20cm;
+
+/* Valeur proportionnelle */
+/* Type &lt;percentage&gt;      */
+min-width: 75%;</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd><a href="/fr/docs/Web/CSS/Valeur_utilisée">La valeur utilisée</a> est alors calculée selon les valeurs des autres descripteurs.</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une valeur absolue ou relative représentant une longueur. Cette valeur doit être positive.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Une valeur de pourcentage relative à la largeur initiale de la zone d'affichage lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">@viewport {
+  min-width: 600px;
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Device', '#descdef-viewport-min-width', '"min-width" descriptor')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.viewport.min-width")}}</p>
diff --git a/files/fr/web/css/@viewport/min-zoom/index.html b/files/fr/web/css/@viewport/min-zoom/index.html
new file mode 100644
index 0000000000..03c28cdb64
--- /dev/null
+++ b/files/fr/web/css/@viewport/min-zoom/index.html
@@ -0,0 +1,69 @@
+---
+title: min-zoom
+slug: Web/CSS/@viewport/min-zoom
+tags:
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@viewport
+---
+<div>{{CSSRef}}</div>
+
+<p>Le descripteur <strong><code>min-zoom</code></strong>, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir le niveau de zoom minimal en-dessous duquel le navigateur ne réduira pas le niveau de zoom (que ce soit une action automatique ou une action de l'utilisateur).</p>
+
+<p>Un facteur de zoom égal à <code>1.0</code> ou à <code>100%</code> correspond à l'absence de zoom. Si on utilise des valeurs supérieures, cela correspondra à un niveau de zoom plus élevé. À l'inverse des valeurs inférieures traduiront un « dézoom ».</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css">/* Valeur avec un mot-clé */
+min-zoom: auto;
+
+/* Nombres : type &lt;number&gt; */
+min-zoom: 0.8;
+min-zoom: 2.0;
+
+/* Valeurs proportionnelles : type &lt;percentage&gt; */
+min-zoom: 150%;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>L'agent utilisateur détermine la limite du niveau de zoom applicable pour le document.</dd>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>Un nombre positif qui correspond à la limite basse du niveau de zoom (cf. {{cssxref("&lt;number&gt;")}}).</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Un pourcentage positif qui correspond à la limite basse du niveau de zoom (cf. {{cssxref("&lt;percentage&gt;")}}).</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Device', '#min-zoom-desc', '"min-zoom" descriptor')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.viewport.min-zoom")}}</p>
diff --git a/files/fr/web/css/@viewport/orientation/index.html b/files/fr/web/css/@viewport/orientation/index.html
new file mode 100644
index 0000000000..24db5063c7
--- /dev/null
+++ b/files/fr/web/css/@viewport/orientation/index.html
@@ -0,0 +1,64 @@
+---
+title: orientation
+slug: Web/CSS/@viewport/orientation
+tags:
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@viewport
+---
+<div>{{CSSRef}}</div>
+
+<p>Le descripteur <strong><code>orientation</code></strong>, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir l'orientation d'un document.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+orientation: auto;
+orientation: portrait;
+orientation: landscape;
+</pre>
+
+<p>Pour les agents utilisateurs et/ou les appareils pour lesquels l'orientation est modifiée en orientant l'appareil, l'auteur pourra utiliser ce descripteur afin d'inhiber le changement d'orientation lié à la stimulation physique.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>L'agent utilisateur déterminera l'orientation du document automatiquement. Généralement, il utilisera l'accéléromètre de l'appareil (si ce dernier en possède un) si le résultat de cette mesure n'est pas modifié par un réglage utilisateur (« bloquer la rotation de l'écran »).</dd>
+ <dt><code>portrait</code></dt>
+ <dd>Le document devrait être verrouillé en mode portrait.</dd>
+ <dt><code>landscape</code></dt>
+ <dd>Le document devrait être verrouillé en mode paysage.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Device', '#the-lsquoorientationrsquo-descriptor', '"orientation" descriptor')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.viewport.orientation")}}</p>
diff --git a/files/fr/web/css/@viewport/user-zoom/index.html b/files/fr/web/css/@viewport/user-zoom/index.html
new file mode 100644
index 0000000000..5a7d6eed73
--- /dev/null
+++ b/files/fr/web/css/@viewport/user-zoom/index.html
@@ -0,0 +1,68 @@
+---
+title: user-zoom
+slug: Web/CSS/@viewport/user-zoom
+tags:
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@viewport
+---
+<div>{{CSSRef}}</div>
+
+<p>Le descripteur <strong><code>user-zoom</code></strong>, utilisé dans la règle @ {{cssxref("@viewport")}}, définit si l'utilisateur doit pouvoir modifier le niveau de zoom d'un document dans la zone d'affichage (<em>viewport</em>).</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+user-zoom: zoom;
+user-zoom: fixed;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>zoom</code></dt>
+ <dd>L'utilisateur peut zoomer/dézoomer.</dd>
+ <dt><code>fixed</code></dt>
+ <dd>L'utilisateur ne peut ni zoomer ni dézoomer.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specifications" name="Specifications">Accessibilité</h2>
+
+<p>Supprimer la possibilité de zoomer empêche les personnes ayant une vision faible de lire et de comprendre le contenu de la page.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Explications des recommendations WCAG 1.4</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" rel="noopener">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Specifications" name="Specifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Device', '#the-lsquouser-zoomrsquo-descriptor', '"user-zoom" descriptor')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.viewport.user-zoom")}}</p>
diff --git a/files/fr/web/css/@viewport/viewport-fit/index.html b/files/fr/web/css/@viewport/viewport-fit/index.html
new file mode 100644
index 0000000000..6c07bfb5cc
--- /dev/null
+++ b/files/fr/web/css/@viewport/viewport-fit/index.html
@@ -0,0 +1,74 @@
+---
+title: viewport-fit
+slug: Web/CSS/@viewport/viewport-fit
+tags:
+  - '@viewport'
+  - CSS
+  - Descripteur
+  - Experimental
+  - Reference
+translation_of: Web/CSS/@viewport
+---
+<div>{{CSSRef}}{{Draft}}{{SeeCompatTable}}</div>
+
+<p>Le descripteur <strong><code>viewport-fit</code></strong>, associé à la règle @ {{CSSxRef("@viewport")}} contrôle la façon dont la zone d'affichage (<em>viewport</em>) d'un document recouvre l'écran.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css; no-line-numbers">/* Valeurs avec un mot-clé */
+viewport-fit: auto;
+viewport-fit: contain;
+viewport-fit: cover;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Cette valeur n'a aucun impact sur la disposition initiale de la zone d'affichage et l'ensemble de la page web est visible.</dd>
+ <dt><code>contain</code></dt>
+ <dd>La zone d'affichage est redimensionnée afin de s'inscrire dans le plus grand rectangle qu'il est possible de faire tenir sur l'écran.</dd>
+ <dt><code>cover</code></dt>
+ <dd>La zone d'affichage est redimensionnée afin de couvrir l'écran de l'appareil. Il est fortement recommandé d'utiliser <a href="/en-US/docs/Web/CSS/env">des variables pour le placement en zone sûre</a> afin de s'assurer qu'aucun contenu important ne se retrouve en dehors de l'écran.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">auto | contain | cover</pre>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>When using the <code>viewport-fit</code> descriptor, one must keep in mind that not all device displays are rectangular, and should therefore make use of the <a href="/en-US/docs/Web/CSS/env">safe area inset variables</a>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Round Display", "#viewport-fit-descriptor", '"viewport-fit" descriptor')}}</td>
+   <td>{{Spec2("CSS Round Display")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.viewport.viewport-fit")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{CSSxRef("env", "env()")}}</li>
+</ul>
diff --git a/files/fr/web/css/@viewport/width/index.html b/files/fr/web/css/@viewport/width/index.html
new file mode 100644
index 0000000000..425c686ccc
--- /dev/null
+++ b/files/fr/web/css/@viewport/width/index.html
@@ -0,0 +1,75 @@
+---
+title: width
+slug: Web/CSS/@viewport/width
+tags:
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@viewport
+---
+<div>{{CSSRef}}</div>
+
+<p>Le descripteur <code><strong>width</strong></code>, rattaché à la règle @ {{cssxref("@viewport")}} est un raccourci permettant de définir les deux descripteurs {{cssxref("@viewport/min-width", "min-width")}} et {{cssxref("@viewport/max-width", "max-width")}}.</p>
+
+<p>Si on fournit une seule valeur, c'est cette valeur qui sera utilisée pour la largeur minimale et maximale de la zone d'affichage (<em>viewport</em>). Si on fournit deux valeurs, la première correspondra à la largeur minimale de la zone d'affichage et la deuxième à la largeur maximale.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Une valeur de longueur        */
+/* Type &lt;length&gt; ou &lt;percentage&gt; */
+width: auto;
+width: 320px;
+width: 15em;
+
+/* Deux valeurs de longueur */
+width: 320px 200px;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>La <a href="/fr/docs/Web/CSS/Valeur_utilis%C3%A9e">valeur utilisée</a> sera calculée à partir des valeurs des autres descripteurs.</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une longueur relative ou absolue qui doit être positive.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Une valeur exprimée en pourcentages qui est relative à la largeur de la zone d'affichage (<em>viewport</em>) lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">@viewport {
+  width: 500px;
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Device', '#descdef-viewport-width', '"width" descriptor')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.viewport.width")}}</p>
diff --git a/files/fr/web/css/@viewport/zoom/index.html b/files/fr/web/css/@viewport/zoom/index.html
new file mode 100644
index 0000000000..c9b65e996e
--- /dev/null
+++ b/files/fr/web/css/@viewport/zoom/index.html
@@ -0,0 +1,71 @@
+---
+title: zoom
+slug: Web/CSS/@viewport/zoom
+tags:
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@viewport
+---
+<div>{{CSSRef}}</div>
+
+<p>Le descripteur <strong><code>zoom</code></strong>, utilisé au sein de la règle @ {{cssxref("@viewport")}}, permet de définir le niveau de zoom initial d'un document.</p>
+
+<p>Un niveau de zoom égal à <code>1.0</code> ou <code>100%</code> n'appliquera aucun zoom. Les valeurs supérieures zoomeront plus et les valeurs inférieures dézoomeront.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css">/* Valeur avec un mot-clé */
+zoom: auto;
+
+/* Valeurs numériques */
+/* Type &lt;number&gt;      */
+zoom: 0.8;
+zoom: 2.0;
+
+/* Valeurs proportionnelles */
+/* Type &lt;percentage&gt;        */
+zoom: 150%;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>C'est l'agent utilisateur qui déterminera le niveau de zoom initial. L'agent utilisateur pourra utiliser la taille de la grille de la zone d'affichage afin de déterminer ce niveau.</dd>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>Un nombre positif qui correspond au niveau de zoom appliqué. Pour plus d'informations, voir le type de donnée {{cssxref("&lt;number&gt;")}}.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Un pourcentage positif qui correspond au niveau de zoom appliqué (100% : aucun zoom ; les valeurs supérieures traduiront un zoom plus importants ; les valeurs inférieures auront un effet de « dézoom »). Pour plus d'informations, voir le type de donnée {{cssxref("&lt;percentage&gt;")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Device', '#zoom-desc', '"zoom" descriptor')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.viewport.zoom")}}</p>
diff --git a/files/fr/web/css/_colon_-moz-broken/index.html b/files/fr/web/css/_colon_-moz-broken/index.html
new file mode 100644
index 0000000000..cab1b281e3
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-broken/index.html
@@ -0,0 +1,43 @@
+---
+title: ':-moz-broken'
+slug: 'Web/CSS/:-moz-broken'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:-moz-broken'
+---
+<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9")}}</div>
+
+<p>La <a href="/en-US/docs/Web/CSS">p</a><a href="/fr/docs/Web/CSS/Pseudo-classes">seudo-class CSS</a> <code>:-moz-broken </code>s'adapte aux éléments qui représentent des liens cassés vers des images.</p>
+
+<p>Ce sélecteur est principalement destiné à être utilisé par les développeurs de thèmes.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">:-moz-broken</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;img src="broken.jpg" alt="Cette image ne fonctionne pas. :-("&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">:-moz-broken {
+  background: bisque;
+  padding: 8px;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{bug("11011")}}</li>
+ <li>{{cssxref(":-moz-loading")}}, {{cssxref(":-moz-suppressed")}}, {{cssxref(":-moz-user-disabled")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_-moz-drag-over/index.html b/files/fr/web/css/_colon_-moz-drag-over/index.html
new file mode 100644
index 0000000000..f8ef38f055
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-drag-over/index.html
@@ -0,0 +1,44 @@
+---
+title: ':-moz-drag-over'
+slug: 'Web/CSS/:-moz-drag-over'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:-moz-drag-over'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>La pseudo-classe <strong><code>:-moz-drag-over</code></strong> permet de mettre en forme un élément lorsqu'un événement <code>drag-over</code> est appelé dessus.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>element</var>:-moz-drag-over { <em>propriétés de mise en forme</em> }
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">td:-moz-drag-over {
+  color: red;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html">&lt;table border="1"&gt;
+  &lt;tr&gt;
+    &lt;td width="100px" height="100px"&gt;Drag Over&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","200","200")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
diff --git a/files/fr/web/css/_colon_-moz-first-node/index.html b/files/fr/web/css/_colon_-moz-first-node/index.html
new file mode 100644
index 0000000000..fd7e45bb27
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-first-node/index.html
@@ -0,0 +1,56 @@
+---
+title: ':-moz-first-node'
+slug: 'Web/CSS/:-moz-first-node'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:-moz-first-node'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>La pseudo-classe <strong><code>:-moz-first-node</code></strong> correspond à un élément si celui-ci est le premier nœud d'un autre élément. Cette pseudo-classe est différente de {{cssxref(":first-child")}} car elle ne cible pas le premier élément qui possède du texte (hors blancs).</p>
+
+<p class="note"><strong>Note :</strong> Tout blanc qui serait au début d'un élément est ignoré pour la détermination de <code>:-moz-last-node</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>span</var>:-moz-first-node { <em>propriétés de mise en forme</em> }
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">span:-moz-first-node {
+  background-color: lime;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html">&lt;p&gt;
+  &lt;span&gt;:-moz-first-node&lt;/span&gt;
+  &lt;span&gt;:-moz-last-node&lt;/span&gt;
+&lt;/p&gt;
+&lt;p&gt;
+  Bip bop bip bop
+  &lt;span&gt;Cet élément n'est pas ciblé car il y a du texte avant.&lt;/span&gt;
+&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "220", "20")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":-moz-last-node")}}</li>
+ <li>{{cssxref(":last-child")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_-moz-focusring/index.html b/files/fr/web/css/_colon_-moz-focusring/index.html
new file mode 100644
index 0000000000..7b2f4befee
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-focusring/index.html
@@ -0,0 +1,61 @@
+---
+title: ':-moz-focusring'
+slug: 'Web/CSS/:-moz-focusring'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:-moz-focusring'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>La pseudo-classe <strong><code>:-moz-focusring</code></strong> est similaire à la pseudo-classe {{cssxref(":focus")}} mais ne cible un élément que si celui-ci a le focus <strong>et</strong> qu'un indicateur doit être dessiné autour ou sur cet élément.</p>
+
+<p>Si <code>:-moz-focusring</code> correspond à un élément, <code>:focus</code> correspondra également (bien que l'inverse ne soit pas toujours vrai). Cela dépend de l'agent utilisateur qui indique si un anneau de focus doit être dessiné sur l'élément qui a reçu le focus. Cette indication dépend fortement du système d'exploitation et le comportement de cette pseudo-classe diffèrera donc selon les plateformes et/ou les paramètres du système.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Les développeurs utilisent souvent <code>:-moz-focusring</code> pour différencier l'atteinte du focus via le <strong>clic de la souris</strong> ou via <strong>la navigation au clavier (avec la tabulation)</strong>. Cette pseudo-classe est également utile si on crée un <a href="/en-US/docs/Web/Web_Components/Using_custom_elements">élément personnalisé</a> dont on veut changer le style en fonction de son comportement.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">:-moz-focusring</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input {
+  margin: 5px;
+}
+
+:-moz-focusring {
+  color: red;
+  outline: 2px dotted green;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input/&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemple")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette fonctionnalité ne fait partie d'aucune spécification bien qu'elle ait <a href="https://lists.w3.org/Archives/Public/www-style/2015Sep/0226.html">discutée avec le groupe de travail</a> et qu'il a été <a href="https://lists.w3.org/Archives/Public/www-style/2015Oct/0012.html">conclus de son ajout dans la spécification CSS sur les sélecteurs de niveau 4 ou 5</a>.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("css.selectors.-moz-focusring")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{bug("418521")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_-moz-full-screen-ancestor/index.html b/files/fr/web/css/_colon_-moz-full-screen-ancestor/index.html
new file mode 100644
index 0000000000..4004032f1c
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-full-screen-ancestor/index.html
@@ -0,0 +1,41 @@
+---
+title: ':-moz-full-screen-ancestor'
+slug: 'Web/CSS/:-moz-full-screen-ancestor'
+tags:
+  - CSS
+  - Non-standard
+  - Obsolete
+  - Pseudo-classe
+  - Reference
+translation_of: 'Archive/Web/CSS/:-moz-full-screen-ancestor'
+---
+<div>{{CSSRef}}{{non-standard_header}}{{deprecated_header}}</div>
+
+<p>La pseudo-classe <strong><code>:-moz-full-screen-ancestor</code></strong> permettait de cibler tous les ancêtres d'un élément affiché en plein écran à l'exception des <em>frames</em> contenues dans les documents parents.</p>
+
+<div class="warning">
+<p>Cette pseudo-classe a été retirée de Firefox 50</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-moz-full-screen-ancestor")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/Guide/DOM/Using_full_screen_mode">Utiliser le mode plein-écran</a></li>
+ <li>{{domxref("element.mozRequestFullScreen()")}}</li>
+ <li>{{domxref("document.mozCancelFullScreen()")}}</li>
+ <li>{{domxref("document.mozFullScreen")}}</li>
+ <li>{{domxref("document.mozFullScreenElement")}}</li>
+ <li>{{domxref("document.mozFullScreenEnabled")}}</li>
+ <li>{{HTMLAttrXRef("mozallowfullscreen", "iframe")}}</li>
+ <li>{{cssxref(":full-screen")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_-moz-handler-blocked/index.html b/files/fr/web/css/_colon_-moz-handler-blocked/index.html
new file mode 100644
index 0000000000..0168f703f5
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-handler-blocked/index.html
@@ -0,0 +1,26 @@
+---
+title: ':-moz-handler-blocked'
+slug: 'Web/CSS/:-moz-handler-blocked'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:-moz-handler-blocked'
+---
+<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.1")}}</div>
+
+<p>La pseudo-classe <strong><code>:-moz-handler-blocked</code></strong> permet de cibler un élément qui ne peut pas être affiché car le gestionnaire associé a été bloqué par l'utilisateur.</p>
+
+<p>Cette pseudo-classe est principalement destinée aux développeurs de thèmes.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":-moz-handler-crashed")}}</li>
+ <li>{{cssxref(":-moz-handler-disabled")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_-moz-handler-crashed/index.html b/files/fr/web/css/_colon_-moz-handler-crashed/index.html
new file mode 100644
index 0000000000..72f1bdff9f
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-handler-crashed/index.html
@@ -0,0 +1,26 @@
+---
+title: ':-moz-handler-crashed'
+slug: 'Web/CSS/:-moz-handler-crashed'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:-moz-handler-crashed'
+---
+<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("2.0")}}</div>
+
+<p>La pseudo-classe <strong><code>:-moz-handler-crashed</code></strong> permet de cibler un élément qui ne peut pas être affiché car le plugin sensé le dessiner a planté.</p>
+
+<p>Cette pseudo-classe est principalement destinée aux développeurs de thèmes.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":-moz-handler-blocked")}}</li>
+ <li>{{cssxref(":-moz-handler-disabled")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_-moz-handler-disabled/index.html b/files/fr/web/css/_colon_-moz-handler-disabled/index.html
new file mode 100644
index 0000000000..12ade56fe0
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-handler-disabled/index.html
@@ -0,0 +1,26 @@
+---
+title: ':-moz-handler-disabled'
+slug: 'Web/CSS/:-moz-handler-disabled'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:-moz-handler-disabled'
+---
+<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.1")}}</div>
+
+<p>La pseudo-classe <strong><code>:-moz-handler-disabled</code></strong> permet de cibler un élément qui ne peut pas être affiché car le gestionnaire associé a été désactivé par l'utilisateur.</p>
+
+<p>Cette pseudo-classe est principalement destinée aux développeurs de thèmes.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":-moz-handler-blocked")}}</li>
+ <li>{{cssxref(":-moz-handler-crashed")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_-moz-last-node/index.html b/files/fr/web/css/_colon_-moz-last-node/index.html
new file mode 100644
index 0000000000..4133fb53a9
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-last-node/index.html
@@ -0,0 +1,56 @@
+---
+title: ':-moz-last-node'
+slug: 'Web/CSS/:-moz-last-node'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:-moz-last-node'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>La pseudo-classe <strong><code>:-moz-last-node</code></strong> correspond à un élément si celui-ci est le dernier nœud d'un autre élément. Cette pseudo-classe est différente de {{cssxref(":last-child")}} car elle ne cible pas le dernier élément qui possède du texte (hors blancs).</p>
+
+<p class="note"><strong>Note :</strong> Tout blanc qui serait à la fin d'un élément est ignoré pour la détermination de <code>:-moz-last-node</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>span</var>:-moz-last-node { <em>propriétés de mise en forme</em> }
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">span:-moz-last-node {
+  background-color: lime;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html">&lt;p&gt;
+  &lt;span&gt;:-moz-first-node&lt;/span&gt;
+  &lt;span&gt;:-moz-last-node&lt;/span&gt;
+&lt;/p&gt;
+&lt;p&gt;
+  &lt;span&gt;Cet élément n'est pas ciblé car il est suivi par du texte.&lt;/span&gt;
+  Bip bop bip bop.
+&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "220", "20")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":-moz-first-node")}}</li>
+ <li>{{cssxref(":last-child")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_-moz-loading/index.html b/files/fr/web/css/_colon_-moz-loading/index.html
new file mode 100644
index 0000000000..4efb552f03
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-loading/index.html
@@ -0,0 +1,36 @@
+---
+title: ':-moz-loading'
+slug: 'Web/CSS/:-moz-loading'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:-moz-loading'
+---
+<div>{{CSSRef}}{{Non-standard_header}}{{gecko_minversion_header("1.9")}}</div>
+
+<p>La pseudo-classe <strong><code>:-moz-loading</code></strong> correspond aux éléments qui ne peuvent être affichés, car ils n'ont pas été chargés (par exemple les images qui n'ont pas encore été transférées sur le réseau). On notera que les images <em>en cours de chargement</em> (le fichier est arrivé et est en train d'être traité pour affichage par le navigateur) ne sont pas ciblées par cette pseudo-classse.</p>
+
+<p>Cette pseudo-classe est principalement destinée aux développeurs de thèmes.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">:-moz-loading</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">img:-moz-loading {
+  background-color: #aaa;
+  background-image: url(loading-animation.gif) center no-repeat;
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":-moz-broken")}}, {{cssxref(":-moz-suppressed")}}, {{cssxref(":-moz-user-disabled")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_-moz-locale-dir(ltr)/index.html b/files/fr/web/css/_colon_-moz-locale-dir(ltr)/index.html
new file mode 100644
index 0000000000..13622d0dd1
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-locale-dir(ltr)/index.html
@@ -0,0 +1,47 @@
+---
+title: ':-moz-locale-dir(ltr)'
+slug: 'Web/CSS/:-moz-locale-dir(ltr)'
+tags:
+  - CSS
+  - Localisation
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+  - l10n
+translation_of: 'Web/CSS/:-moz-locale-dir(ltr)'
+---
+<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.2")}}</div>
+
+<p>La pseudo-classe <strong><code>:-moz-locale-dir(ltr)</code></strong> correspond à un élément si l'interface utilisateur est affichée de gauche à droite. Ceci est déterminé par la préférence <code>intl.uidirection.</code><em><code>locale</code></em> (où <em><code>locale</code></em> est le language courant) qui est fixé à "ltr".</p>
+
+<p>Cela permet aux extensions (et thèmes) d'adapter facilement leur interface utilisateur basée sur les besoins du langage de l'utilisateur. Cela peut varier d'une fenêtre à une autre et même d'un onglet à un autre. Cela permet aussi aux extensions de fonctionner même si elles ne prennent pas en compte le langage de l'utilisateur par défaut, puisqu'elles peuvent prendre en compte les agencements de gauche à droite et de droite à gauche sans être inquiétée par les spécificités du langage.</p>
+
+<p>Ce sélecteur ne fonctionne pas pour les documents l'HTML; il fait correspondre toujours, peu importe si le langage de l'UI va de gauche à droite ou de droite à gauche.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Sur une interface allant de gauche à droite, ce texte devrait être rouge.&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p:-moz-locale-dir(ltr) {
+  color: red;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":dir",":dir(…)")}}</li>
+ <li>{{cssxref(":-moz-locale-dir(rtl)")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_-moz-locale-dir(rtl)/index.html b/files/fr/web/css/_colon_-moz-locale-dir(rtl)/index.html
new file mode 100644
index 0000000000..8ab4f863d5
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-locale-dir(rtl)/index.html
@@ -0,0 +1,47 @@
+---
+title: ':-moz-locale-dir(rtl)'
+slug: 'Web/CSS/:-moz-locale-dir(rtl)'
+tags:
+  - CSS
+  - Droite-à-gauche
+  - Localisation
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:-moz-locale-dir(rtl)'
+---
+<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.2")}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe CSS</a> <strong><code>:-moz-locale-dir(rtl)</code></strong> correspond à un élément si l'interface utilisateur est affichée de droite à gauche. Elle est déterminée par la préférence <code>intl.uidirection.</code><em><code>locale</code></em> (où <em><code>locale</code></em> est la langue courante) qui est fixée à <code>"rtl"</code>.</p>
+
+<p>Cela permet aux extensions (et thèmes) d'adapter facilement leur interface utilisateur basée sur les besoins de la langue de l'utilisateur. Cela peut varier d'une fenêtre à une autre et même d'un onglet à un autre. Cela permet aussi aux extensions de fonctionner même si elles ne prennent pas en compte la langue de l'utilisateur par défaut, puisqu'elles peuvent prendre en compte les agencements de gauche à droite et de droite à gauche sans être inquiétées par les spécificités de la langue.</p>
+
+<p>Ce sélecteur ne fonctionne pas correctement pour des documents HTML ; il ne fait jamais correspondre, peu importe si la langue de l'interface utilisateur va de gauche à droite ou de droite à gauche.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p:-moz-locale-dir(rtl) {
+  color: red;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;En utilisant une interface de droite à gauche, ce texte sera rouge.&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":-moz-locale-dir(ltr)")}}</li>
+ <li><a href="/en-US/docs/Making_Sure_Your_Theme_Works_with_RTL_Locales">Garantir le fonctionnement de votre thème avec les locales RTL</a></li>
+</ul>
diff --git a/files/fr/web/css/_colon_-moz-lwtheme-brighttext/index.html b/files/fr/web/css/_colon_-moz-lwtheme-brighttext/index.html
new file mode 100644
index 0000000000..68304a2c21
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-lwtheme-brighttext/index.html
@@ -0,0 +1,25 @@
+---
+title: ':-moz-lwtheme-brighttext'
+slug: 'Web/CSS/:-moz-lwtheme-brighttext'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+translation_of: 'Mozilla/Gecko/Chrome/CSS/:-moz-lwtheme-brighttext'
+---
+<div>{{CSSRef}}{{non-standard_header}}</div>
+
+<p>La pseudo-classe <strong><code>:-moz-lwtheme-brighttext</code></strong> correspond à un élément de l'interface utilisateur du navigateur (le <em>chrome</em>) lorsque {{cssxref(":-moz-lwtheme")}} vaut <code>true</code> et qu'un thème léger avec une couleur de texte clair est sélectionné.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":-moz-lwtheme")}}</li>
+ <li>{{cssxref(":-moz-lwtheme-darktext")}}</li>
+ <li><a href="/fr/docs/Mozilla/Add-ons/Thèmes/Lightweight_themes">Les thèmes légers</a></li>
+</ul>
diff --git a/files/fr/web/css/_colon_-moz-lwtheme-darktext/index.html b/files/fr/web/css/_colon_-moz-lwtheme-darktext/index.html
new file mode 100644
index 0000000000..912ddbd7f6
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-lwtheme-darktext/index.html
@@ -0,0 +1,25 @@
+---
+title: ':-moz-lwtheme-darktext'
+slug: 'Web/CSS/:-moz-lwtheme-darktext'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+translation_of: 'Mozilla/Gecko/Chrome/CSS/:-moz-lwtheme-darktext'
+---
+<div>{{CSSRef}}{{non-standard_header}}</div>
+
+<p>La pseudo-classe <strong><code>:-moz-lwtheme-darktext</code></strong> correspond à un élément de l'interface utilisateur du navigateur (le <em>chrome</em>) lorsque {{cssxref(":-moz-lwtheme")}} vaut <code>true</code> et qu'un thème léger avec une couleur de texte sombre est sélectionné.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":-moz-lwtheme")}}</li>
+ <li>{{cssxref(":-moz-lwtheme-brighttext")}}</li>
+ <li><a href="/fr/docs/Mozilla/Add-ons/Thèmes/Lightweight_themes">Les thèmes légers</a></li>
+</ul>
diff --git a/files/fr/web/css/_colon_-moz-lwtheme/index.html b/files/fr/web/css/_colon_-moz-lwtheme/index.html
new file mode 100644
index 0000000000..31b249d0ca
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-lwtheme/index.html
@@ -0,0 +1,25 @@
+---
+title: ':-moz-lwtheme'
+slug: 'Web/CSS/:-moz-lwtheme'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+translation_of: 'Mozilla/Gecko/Chrome/CSS/:-moz-lwtheme'
+---
+<div>{{CSSRef}}{{non-standard_header}}</div>
+
+<p>La pseudo-classe <strong><code>:-moz-lwtheme</code></strong> permet de cibler les documents liés à l'interface utilisateur du navigateur (le <em>chrome</em>) lorsque l'attribut {{xulattr("lightweightthemes")}} de l'élément racine vaut <code>true</code> et qu'un thème est sélectionné.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":-moz-lwtheme-darktext")}}</li>
+ <li>{{cssxref(":-moz-lwtheme-brighttext")}}</li>
+ <li><a href="/fr/docs/Mozilla/Add-ons/Thèmes/Lightweight_themes">Les thèmes légers</a></li>
+</ul>
diff --git a/files/fr/web/css/_colon_-moz-only-whitespace/index.html b/files/fr/web/css/_colon_-moz-only-whitespace/index.html
new file mode 100644
index 0000000000..c9f9b7c90a
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-only-whitespace/index.html
@@ -0,0 +1,77 @@
+---
+title: ':-moz-only-whitespace'
+slug: 'Web/CSS/:-moz-only-whitespace'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+  - Sélecteur
+translation_of: 'Web/CSS/:-moz-only-whitespace'
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Dans la spécification {{SpecName("CSS4 Selectors", "#the-empty-pseudo")}}, le sélecteur {{CSSxRef(":empty")}} a été modifié pour se comporter comme <code>:-moz-only-whitespace</code> mais aucun navigateur ne prend actuellement en charge cette fonctionnalité.</p>
+</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:-moz-only-whitespace</code></strong> correspond aux éléments qui n'ont aucun nœud enfant, aux nœuds texte vides ou aux nœuds texte ne possédant que des espaces.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt; &lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<div class="hidden">
+<pre class="brush: css">:root {
+  overflow: hidden;
+  max-width: 100vw;
+  max-height: 100vh;
+}
+
+div {
+  background-color: #ccc;
+  box-sizing: border-box;
+  height: 100vh;
+  min-height: 16px;
+  min-height: 1rem;
+}
+</pre>
+</div>
+
+<pre class="brush: css">div {
+  border: 4px solid red;
+}
+
+:-moz-only-whitespace {
+  border-color: lime;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemple", "100%", "50")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe a été renommée en <code>:blank</code> dans {{SpecName("CSS4 Selectors", "#changes-2018-02")}} puis la fonctionnalité a été fusionnée avec {{CSSxRef(":empty")}} et {{CSSxRef(":blank")}} a été redéfinie afin d'indiquer un élément {{HTMLElement("input")}} vide.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.moz-only-whitespace")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{CSSxRef(":blank")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":empty")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_-moz-submit-invalid/index.html b/files/fr/web/css/_colon_-moz-submit-invalid/index.html
new file mode 100644
index 0000000000..69617de5ba
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-submit-invalid/index.html
@@ -0,0 +1,39 @@
+---
+title: ':-moz-submit-invalid'
+slug: 'Web/CSS/:-moz-submit-invalid'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:-moz-submit-invalid'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> CSS <strong><code>:-moz-submit-invalid</code></strong> représente tout bouton {{HTMLElement("input")}} de type <code>submit</code> présent sur un formulaire dont le contenu n'est pas valide compte-tenu de ses <a href="/fr/docs/Web/Guide/HTML/Forms_in_HTML#Constraint_Validation" title="en/HTML/HTML5/Forms in HTML5#Constraint Validation">contraintes de validation</a>.</p>
+
+<p>Par défaut, aucun style n'est appliqué. Vous pouvez utiliser cette pseudo-classe afin de personnaliser l'apparence du bouton <code>submit</code> lorsqu'il y a des champs de formulaire invalides.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">:-moz-submit-invalid
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-moz-submit-invalid")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":valid")}}</li>
+ <li>{{cssxref(":invalid")}}</li>
+ <li>{{cssxref(":required")}}</li>
+ <li>{{cssxref(":optional")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_-moz-suppressed/index.html b/files/fr/web/css/_colon_-moz-suppressed/index.html
new file mode 100644
index 0000000000..d250f94a15
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-suppressed/index.html
@@ -0,0 +1,38 @@
+---
+title: ':-moz-suppressed'
+slug: 'Web/CSS/:-moz-suppressed'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:-moz-suppressed'
+---
+<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9")}}</div>
+
+<p><code>:-moz-suppressed</code> est une pseudo-classe spécifique à Mozilla qui permet de sélectionner les images qui n’ont pas été chargées car le chargement des images depuis ce site a été bloqué.</p>
+
+<p>Ce sélecteur est principalement destiné aux développeurs de thèmes.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">:-moz-suppressed</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: css">:-moz-suppressed {
+  background: yellow;
+  padding: 8px;
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":-moz-broken")}}</li>
+ <li>{{cssxref(":-moz-loading")}}</li>
+ <li>{{cssxref(":-moz-user-disabled")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_-moz-system-metric/images-in-menus/index.html b/files/fr/web/css/_colon_-moz-system-metric/images-in-menus/index.html
new file mode 100644
index 0000000000..dba93df04b
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-system-metric/images-in-menus/index.html
@@ -0,0 +1,29 @@
+---
+title: ':-moz-system-metric(images-in-menus)'
+slug: 'Web/CSS/:-moz-system-metric/images-in-menus'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+translation_of: 'Archive/Web/CSS/:-moz-system-metric/images-in-menus'
+---
+<div>{{CSSRef}}{{Non-standard_header}}{{Fx_minversion_header(3)}}</div>
+
+<p>La pseudo-classe <strong><code>:-moz-system-metric(images-in-menus)</code></strong> correspond à un élément si l'interface utilisateur de l'ordinateur utilisée permet d'utiliser des images dans les menus.</p>
+
+<p>Ce sélecteur est principalement destiné aux développeurs de thèmes.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, cette pseudo-classe n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-moz-system-metric.images-in-menus")}}</p>
diff --git a/files/fr/web/css/_colon_-moz-system-metric/index.html b/files/fr/web/css/_colon_-moz-system-metric/index.html
new file mode 100644
index 0000000000..75e34f4f90
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-system-metric/index.html
@@ -0,0 +1,39 @@
+---
+title: ':-moz-system-metric()'
+slug: 'Web/CSS/:-moz-system-metric'
+tags:
+  - CSS
+  - Non-standard
+  - Obsolete
+  - Pseudo-classe
+translation_of: 'Archive/Web/CSS/:-moz-system-metric'
+---
+<p>{{CSSRef}}{{Draft}}{{Non-standard_Header}}{{Obsolete_Header("gecko58")}}</p>
+
+<p>{{wiki.localize("System.API.page-generated-for-subpage")}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, cette pseudo-classe n'est plus disponible pour être utilisée sur le Web. Elle ne peut être utilisée que de façon interne (pour du chrome ou du code XUL). Voir {{bug(1396066)}} pour plus de détails.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>{{SubpagesWithSummaries}}</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-moz-system-metric")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{CSSxRef("@media")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_-moz-system-metric/mac-graphite-theme/index.html b/files/fr/web/css/_colon_-moz-system-metric/mac-graphite-theme/index.html
new file mode 100644
index 0000000000..fb3013b14f
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-system-metric/mac-graphite-theme/index.html
@@ -0,0 +1,35 @@
+---
+title: ':-moz-system-metric(mac-graphite-theme)'
+slug: 'Web/CSS/:-moz-system-metric/mac-graphite-theme'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+translation_of: 'Archive/Web/CSS/:-moz-system-metric/mac-graphite-theme'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>La pseudo-classe <code>:-moz-system-metric(mac-graphite-theme)</code> correspond à un élément si l'utilisateur a sélectionné l'apparence <em>Graphite</em> dans l'écran des préférences système de Mac OS X.</p>
+
+<p>Ce sélecteur est principalement destiné aux développeurs de thèmes.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, cette pseudo-classe n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-moz-system-metric.mac-graphite-theme")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{Bug(448767)}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_-moz-system-metric/scrollbar-end-backward/index.html b/files/fr/web/css/_colon_-moz-system-metric/scrollbar-end-backward/index.html
new file mode 100644
index 0000000000..d5ff5941e3
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-system-metric/scrollbar-end-backward/index.html
@@ -0,0 +1,29 @@
+---
+title: ':-moz-system-metric(scrollbar-end-backward)'
+slug: 'Web/CSS/:-moz-system-metric/scrollbar-end-backward'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+translation_of: 'Archive/Web/CSS/:-moz-system-metric/scrollbar-end-backward'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La pseudo-classe <strong><code>:-moz-system-metric(scrollbar-end-backward)</code></strong> correspond à un élément si l'interface utilisateur de l'ordinateur inclut un bouton de recul à la fin des barres de défilement.</p>
+
+<p>Ce sélecteur est principalement destiné aux développeurs de thèmes.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, cette pseudo-classe n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-moz-system-metric.scrollbar-end-backward")}}</p>
diff --git a/files/fr/web/css/_colon_-moz-system-metric/scrollbar-end-forward/index.html b/files/fr/web/css/_colon_-moz-system-metric/scrollbar-end-forward/index.html
new file mode 100644
index 0000000000..abc2ef8c2e
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-system-metric/scrollbar-end-forward/index.html
@@ -0,0 +1,27 @@
+---
+title: ':-moz-system-metric(scrollbar-end-forward)'
+slug: 'Web/CSS/:-moz-system-metric/scrollbar-end-forward'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+translation_of: 'Archive/Web/CSS/:-moz-system-metric/scrollbar-end-forward'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La pseudo-classe <strong><code>:-moz-system-metric(scrollbar-end-forward)</code></strong> correspond à un élément si l'interface utilisateur de l'ordinateur inclut un bouton d'avancement à la fin des barres de défilement.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, cette pseudo-classe n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-moz-system-metric.scrollbar-end-forward")}}</p>
diff --git a/files/fr/web/css/_colon_-moz-system-metric/scrollbar-start-backward/index.html b/files/fr/web/css/_colon_-moz-system-metric/scrollbar-start-backward/index.html
new file mode 100644
index 0000000000..19c645904f
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-system-metric/scrollbar-start-backward/index.html
@@ -0,0 +1,29 @@
+---
+title: ':-moz-system-metric(scrollbar-start-backward)'
+slug: 'Web/CSS/:-moz-system-metric/scrollbar-start-backward'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+translation_of: 'Archive/Web/CSS/:-moz-system-metric/scrollbar-start-backward'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La pseudo-classe <strong><code>:-moz-system-metric(scrollbar-start-backward)</code></strong> correspond à un élément si l'interface utilisateur de l'ordinateur utilisé inclut un bouton avec une flèche vers le bas à la fin des barres de défilement.</p>
+
+<p>Ce sélecteur est principalement destiné aux développeurs de thèmes.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, cette pseudo-classe n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-moz-system-metric.scrollbar-start-backward")}}</p>
diff --git a/files/fr/web/css/_colon_-moz-system-metric/scrollbar-start-forward/index.html b/files/fr/web/css/_colon_-moz-system-metric/scrollbar-start-forward/index.html
new file mode 100644
index 0000000000..a6cc78db85
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-system-metric/scrollbar-start-forward/index.html
@@ -0,0 +1,29 @@
+---
+title: ':-moz-system-metric(scrollbar-start-forward)'
+slug: 'Web/CSS/:-moz-system-metric/scrollbar-start-forward'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+translation_of: 'Archive/Web/CSS/:-moz-system-metric/scrollbar-start-forward'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La pseudo-classe <strong><code>:-moz-system-metric(scrollbar-start-forward)</code></strong> correspond à un élément si l'interface utilisateur de l'ordinateur inclue une flèche pour remonter au début des barres de défilement.</p>
+
+<p>Ce sélecteur est principalement destiné aux développeurs de thèmes.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, cette pseudo-classe n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-moz-system-metric.scrollbar-start-forward")}}</p>
diff --git a/files/fr/web/css/_colon_-moz-system-metric/scrollbar-thumb-proportional/index.html b/files/fr/web/css/_colon_-moz-system-metric/scrollbar-thumb-proportional/index.html
new file mode 100644
index 0000000000..14c1511f98
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-system-metric/scrollbar-thumb-proportional/index.html
@@ -0,0 +1,29 @@
+---
+title: ':-moz-system-metric(scrollbar-thumb-proportional)'
+slug: 'Web/CSS/:-moz-system-metric/scrollbar-thumb-proportional'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+translation_of: 'Archive/Web/CSS/:-moz-system-metric/scrollbar-thumb-proportional'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>La pseudo-classe <strong><code>:-moz-system-metric(scrollbar-thumb-proportional)</code></strong> correspondra à un élément si l'interface utilisateur de l'ordinateur utilise des curseurs de barre de défilement proportionnels à la taille de la zone visible du document à l'écran.</p>
+
+<p>Ce sélecteur est principalement destiné aux développeurs de thèmes.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, cette pseudo-classe n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-moz-system-metric.scrollbar-thumb-proportional")}}</p>
diff --git a/files/fr/web/css/_colon_-moz-system-metric/touch-enabled/index.html b/files/fr/web/css/_colon_-moz-system-metric/touch-enabled/index.html
new file mode 100644
index 0000000000..4b48986029
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-system-metric/touch-enabled/index.html
@@ -0,0 +1,29 @@
+---
+title: ':-moz-system-metric(touch-enabled)'
+slug: 'Web/CSS/:-moz-system-metric/touch-enabled'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+translation_of: 'Archive/Web/CSS/:-moz-system-metric/touch-enabled'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>La pseudo-classe <strong><code>:-moz-system-metric(touch-enabled)</code></strong> correspondra à un élément si l'appareil sur lequel il est affiché est une interface tactile.</p>
+
+<div class="note"><strong>Note :</strong> Cette pseudo-classe n'est pas destinée à être utilisée sur le Web. Pour cela, on privilégiera la requête média {{cssxref("-moz-touch-enabled")}}.</div>
+
+<div class="note">
+<p><strong>Note </strong>: Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, cette pseudo-classe n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-moz-system-metric.touch-enabled")}}</p>
diff --git a/files/fr/web/css/_colon_-moz-system-metric/windows-default-theme/index.html b/files/fr/web/css/_colon_-moz-system-metric/windows-default-theme/index.html
new file mode 100644
index 0000000000..ae0eaf8806
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-system-metric/windows-default-theme/index.html
@@ -0,0 +1,69 @@
+---
+title: ':-moz-system-metric(windows-default-theme)'
+slug: 'Web/CSS/:-moz-system-metric/windows-default-theme'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+translation_of: 'Archive/Web/CSS/:-moz-system-metric/windows-default-theme'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>La pseudo-classe <strong><code>:-moz-system-metric(windows-default-theme)</code></strong> correspond à un élément si l'utilisateur utilise l'un des thèmes Windows suivant : Luna, Royale, Zune ou Aero (c'est-à-dire Vista Basic, Vista Standard ou Aero Glass). Les thèmes Windows classiques et les thèmes tiers sont exclus.</p>
+
+<p>Ce sélecteur est principalement destiné aux développeurs de thèmes.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, cette pseudo-classe n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#defaultThemes,
+#nonDefaultThemes {
+  background-color: #FFA0A0;
+}
+
+#defaultThemes:-moz-system-metric(windows-default-theme) {
+  background-color: #A0FFA0;
+}
+
+#nonDefaultThemes:not(-moz-system-metric(windows-default-theme)) {
+  background-color: #A0FFA0;
+}
+
+#notSupported:-moz-system-metric(windows-default-theme),
+#notSupported:not(:-moz-system-metric(windows-default-theme)) {
+  display: none;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p id="defaultThemes"&gt;
+  Ce paragraphe devrait avoir un fond vert avec les thèmes Windows
+  Luna/Royale/Zune/Aero et un fond rouge avec les autres.
+&lt;/p&gt;
+
+&lt;p id="nonDefaultThemes"&gt;
+  Ce paragraphe devrait avoir un fond vert avec with Windows Classic
+  ou avec un thème tiers ou un fond rouge pour les autres.
+&lt;/p&gt;
+
+&lt;p id="notSupported"&gt;La détection des thèmes n'est pas prise en charge.&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "100%", 170)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-moz-system-metric.windows-default-theme")}}</p>
diff --git a/files/fr/web/css/_colon_-moz-ui-invalid/index.html b/files/fr/web/css/_colon_-moz-ui-invalid/index.html
new file mode 100644
index 0000000000..5f29e0f90f
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-ui-invalid/index.html
@@ -0,0 +1,50 @@
+---
+title: ':-moz-ui-invalid'
+slug: 'Web/CSS/:-moz-ui-invalid'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:user-invalid'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>La pseudo-classe <strong><code>:-moz-ui-invalid</code></strong> représente n'importe quel élément de formulaire dont la valeur est invalide selon <a href="/fr/docs/Web/Guide/HTML/Forms_in_HTML#Constraint_Validation">ses contraintes de validation</a>.</p>
+
+<p>Cette pseudo-classe est appliquée d'après les règles suivantes :</p>
+
+<ul>
+ <li>Si le contrôle n'a pas le focus et que cette valeur est invalide, la pseudo-classe est appliquée.</li>
+ <li>Si le contrôle a le focus et que la valeur était valide (même si elle était vide) lorsque le focus a été obtenu, la pseudo-classe n'est pas appliquée.</li>
+ <li>Si le contrôle a le focus et que la valeur était invalide lorsque le focus a été obtenu, on revalide le contenu à chaque frappe.</li>
+ <li>Si l'élément est obligatoire, les règles précédentes ne s'appliquent que si l'utilisateur a modifié la valeur ou tenté de soumettre le formulaire.</li>
+</ul>
+
+<p>Si le contrôle était valide au moment où l'utilisateur a commencé à l'utiliser, la mise en forme liée à la validité est uniquement modifiée lorsque l'utilisateur interagit avec un autre contrôle. Toutefois, si l'utilisateur tente de corriger une valeur invalide, le contrôle indique immédiatement lorsque celle-ci devient valide. Les éléments obligatoires sont considérés comme invalides uniquement si l'utilisateur les modifie ou essaie de soumettre une valeur invalide non-modifiée.</p>
+
+<p>Par défaut, Gecko applique un style qui crée un halo rouge (grâce à {{cssxref("box-shadow")}}) autour des éléments avec cette pseudo-clésse. Pour un exemple illustrant comment surcharger le style par défaut, on pourra utiliser la pseudo-classe {{cssxref(":invalid")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-moz-ui-invalid")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":valid")}}</li>
+ <li>{{cssxref(":invalid")}}</li>
+ <li>{{cssxref(":required")}}</li>
+ <li>{{cssxref(":optional")}}</li>
+ <li>{{cssxref(":-moz-ui-valid")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_-moz-ui-valid/index.html b/files/fr/web/css/_colon_-moz-ui-valid/index.html
new file mode 100644
index 0000000000..264a7f1a3a
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-ui-valid/index.html
@@ -0,0 +1,44 @@
+---
+title: ':-moz-ui-valid'
+slug: 'Web/CSS/:-moz-ui-valid'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:-moz-ui-valid'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>La pseudo-classe <strong><code>:-moz-ui-valid</code></strong> représente n'importe quel élément de formulaire dont la valeur est valide selon <a href="/fr/docs/Web/Guide/HTML/Forms_in_HTML#Constraint_Validation">ses contraintes de validation</a>.</p>
+
+<p>Cette pseudo-classe est appliquée d'après les règles suivantes :</p>
+
+<ul>
+ <li>Si le contrôle n'a pas le focus et que cette valeur est valide, la pseudo-classe est appliquée.</li>
+ <li>Si le contrôle a le focus et que la valeur était valide (même si elle était vide) lorsque le focus a été obtenu, la pseudo-classe est appliquée.</li>
+ <li>Si le contrôle a le focus et que la valeur était invalide lorsque le focus a été obtenu, on revalide le contenu à chaque frappe.</li>
+ <li>Si l'élément est obligatoire, les règles précédentes ne s'appliquent que si l'utilisateur a modifié la valeur ou tenté de soumettre le formulaire.</li>
+</ul>
+
+<p>Si le contrôle était valide au moment où l'utilisateur a commencé à l'utiliser, la mise en forme liée à la validité est uniquement modifiée lorsque l'utilisateur interagit avec un autre contrôle. Toutefois, si l'utilisateur tente de corriger une valeur invalide, le contrôle indique immédiatement lorsque celle-ci devient valide. Les éléments obligatoires sont considérés comme invalides uniquement si l'utilisateur les modifie ou essaie de soumettre une valeur invalide non-modifiée.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-moz-ui-valid")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":valid")}}</li>
+ <li>{{cssxref(":invalid")}}</li>
+ <li>{{cssxref(":required")}}</li>
+ <li>{{cssxref(":optional")}}</li>
+ <li>{{cssxref(":-moz-ui-invalid")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_-moz-user-disabled/index.html b/files/fr/web/css/_colon_-moz-user-disabled/index.html
new file mode 100644
index 0000000000..7890fbdca6
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-user-disabled/index.html
@@ -0,0 +1,38 @@
+---
+title: ':-moz-user-disabled'
+slug: 'Web/CSS/:-moz-user-disabled'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:-moz-user-disabled'
+---
+<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9")}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe CSS</a> <code>:-moz-user-disabled</code> correspond aux  éléments représentant des images qui n'ont pas été chargées car elles ont été entièrement désactivées dans les préférences de l'utilisateur.</p>
+
+<p>Ce sélecteur est destiné principalement à une utilisation par les développeurs de thèmes.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">:-moz-user-disabled</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">:-moz-user-disabled {
+  background-color: lightgray;
+  padding: 8px;
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":-moz-broken")}}</li>
+ <li>{{cssxref(":-moz-loading")}}</li>
+ <li>{{cssxref(":-moz-suppressed")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_-moz-window-inactive/index.html b/files/fr/web/css/_colon_-moz-window-inactive/index.html
new file mode 100644
index 0000000000..dc20549d2b
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-window-inactive/index.html
@@ -0,0 +1,53 @@
+---
+title: ':-moz-window-inactive'
+slug: 'Web/CSS/:-moz-window-inactive'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:-moz-window-inactive'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La pseudo-classe <strong><code>:-moz-window-inactive</code></strong>, spécifique à Mozilla, correspond à n'importe quel élément qui se trouve sur une fenêtre inactive.</p>
+
+<div class="note"><strong>Note :</strong> Avant l'existence de cette pseudo-classe, on pouvait donner des styles différents aux fenêtres avec l'attribut <code>active="true"</code> sur la fenêtre XUL de plus haut niveau. Cet attribut n'est plus utilisé.</div>
+
+<p><code>:-moz-window-inactive</code> fonctionne également pour le contenu des documents HTML.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Cet exemple illustre la modification de l'apparence de l'arrière-plan d'une boîte selon que la fenêtre est active ou non.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">#maboite {
+  background: linear-gradient(to bottom, blue, cyan);
+}
+
+#maboite:-moz-window-inactive {
+  background: cyan;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="maboite" style="width:200px; height:200px;"&gt;
+  &lt;p&gt;Une boîte :)&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","220","220")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-moz-window-inactive")}}</p>
diff --git a/files/fr/web/css/_colon_-ms-input-placeholder/index.html b/files/fr/web/css/_colon_-ms-input-placeholder/index.html
new file mode 100644
index 0000000000..1baa216663
--- /dev/null
+++ b/files/fr/web/css/_colon_-ms-input-placeholder/index.html
@@ -0,0 +1,116 @@
+---
+title: ':-ms-input-placeholder'
+slug: 'Web/CSS/:-ms-input-placeholder'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-classe
+  - Référence(2)
+translation_of: 'Web/CSS/:placeholder-shown'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>La pseudo-classe <strong><code>:-ms-input-placeholder</code></strong> représente le texte de substitution d'un élément de formulaire. Elle permet aux auteurs et aux développeurs web d'adapter l'apparence des textes de substitution. Cette pseudo-classe est propriétaire et est uniquement prise en charge par Internet Explorer et Edge.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, le champ « Identifiant » a un style particulier. Le texte de substitution est affiché de cette façon jusqu'à ce que le focus passe sur le champ (ce qui correspond à une saisie).</p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input {
+  background-color:#E8E8E8;
+  color:black;
+}
+/* Style pour le texte de substitution */
+input.studentid:-ms-input-placeholder {
+  font-style:italic;
+  color: red;
+  background-color: yellow;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;form id="test"&gt;
+  &lt;p&gt;&lt;label&gt;Saisir le nom : &lt;input id="nom" placeholder="Nom de l'étudiant"/&gt;&lt;/label&gt;&lt;/p&gt;
+  &lt;p&gt;&lt;label&gt;Saisir le domaine : &lt;input id="domaine" placeholder="Domaine d'étude" /&gt;&lt;/label&gt;&lt;/p&gt;
+  &lt;p&gt;&lt;label&gt;Saisir l'identifiant : &lt;input type="num" pattern="[0-9]{8}" title="8 digit ID" id="sid" class="studentid" placeholder="Identifiant à 8 chiffres" /&gt;&lt;/label&gt;&lt;/p&gt;
+  &lt;input type="submit" /&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","300","300")}}</p>
+
+<h3 id="Capture_d'écran">Capture d'écran</h3>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12684/bandicam%202016-03-08%2001-48-59-851.jpg" style="border-style: solid; border-width: 1px; height: 160px; margin: 0px; width: 650px;"></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Trident/Microsoft et ne fait partie d'aucune spécification. <a href="https://msdn.microsoft.com/en-us/library/hh772745(v=vs.85).aspx">MSDN documente cette pseudo-classe</a>.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("::placeholder")}}</li>
+ <li>{{cssxref("::-webkit-input-placeholder")}}</li>
+ <li>{{cssxref("::-moz-placeholder")}}</li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Forms_in_HTML">Les formulaires en HTML</a></li>
+ <li>{{HTMLElement("input")}}</li>
+ <li>{{HTMLElement("textarea")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_-webkit-autofill/index.html b/files/fr/web/css/_colon_-webkit-autofill/index.html
new file mode 100644
index 0000000000..4d7aadd16e
--- /dev/null
+++ b/files/fr/web/css/_colon_-webkit-autofill/index.html
@@ -0,0 +1,33 @@
+---
+title: ':-webkit-autofill'
+slug: 'Web/CSS/:-webkit-autofill'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:-webkit-autofill'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La pseudo-classe <strong><code>:-webkit-autofill</code></strong> correspond à un élément {{HTMLElement("input")}} lorsque sa valeur est remplie automatiquement par le navigateur.</p>
+
+<p class="note"><strong>Note :</strong> Pour plusieurs navigateurs, les feuilles de style de l'agent utilisateur utilisent <code>!important</code> pour les déclarations avec <code>:-webkit-autofill</code> ce qui les rend difficilement modifiables sans utiliser JavaScript.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-webkit-autofill")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://code.google.com/p/chromium/issues/detail?id=46543">Bug Chromium n°46543 : Le fond jaune des champs texte saisis automatiquement ne peut pas être désactivé.</a></li>
+ <li><a href="https://bugs.webkit.org/show_bug.cgi?id=66032">Bug WebKit n°66032 : Permettre aux auteurs de surcharger la couleur des champs remplis automatiquement.</a></li>
+ <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=740979">Bug Mozilla n°740979 : Implémentation de la pseudo-classe <code>:-moz-autofill</code> pour  les éléments <code>input</code> avec une valeur saisie automatiquement.</a></li>
+</ul>
diff --git a/files/fr/web/css/_colon_active/index.html b/files/fr/web/css/_colon_active/index.html
new file mode 100644
index 0000000000..bf8309e0a5
--- /dev/null
+++ b/files/fr/web/css/_colon_active/index.html
@@ -0,0 +1,129 @@
+---
+title: ':active'
+slug: 'Web/CSS/:active'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:active'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:active</code></strong> permet de cibler un élément lorsque celui-ci est activé par l'utilisateur. Elle permet de fournir un <em>feedback</em> indiquant que l'activation a bien été détectée par le navigateur. Lorsqu'on a une interaction avec un pointeur, il s'agit généralement du moment entre l'appui sur le pointeur et le relâchement de celui-ci.</p>
+
+<pre class="brush: css no-line-numbers">/* ne cible &lt;a&gt; que lorsqu'il est activé */
+/* par exemple quand on clique dessus */
+a:active {
+  color: red;
+}</pre>
+
+<p>La pseudo-classe <code>:active</code> est également activée lorsque l'utilisateur emploie la touche de tabulation. Elle est souvent utilisée sur les éléments HTML {{HTMLElement("a")}} et {{HTMLElement("button")}} mais n'est pas restreinte à ceux-ci. Les éléments ciblés par cette pseudo-classe incluent les éléments qui contiennent l'élément activé et les éléments de formulaires activés via leur élément {{HTMLElement("label")}} associé.</p>
+
+<p>La mise en forme associée peut être surchargée par les autres pseudo-classes pour les liens : {{cssxref(":link")}}, {{cssxref(":hover")}} et {{cssxref(":visited")}} lorsqu'elles sont utilisées dans des règles qui suivent. Afin de mettre en forme les liens de façon correcte, la règle avec <code>:active</code> doit être écrite après les autres : <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p>
+
+<div class="note"><strong>Note :</strong> Pour les systèmes qui utilisent une souris avec plusieurs boutons, CSS 3 spécifie que la pseudo-classe <code>:active</code> ne doit s'appliquer qu'au bouton principal. Pour les souris de droitiers, c'est généralement le bouton le plus à gauche.</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Liens_actifs">Liens actifs</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">a:link { color: blue; }          /* Liens non visités */
+a:visited { color: purple; }     /* Liens visités */
+a:hover { background: yellow; }  /* Liens survolés */
+a:active { color: red; }         /* Liens actifs */
+
+p:active { background: #eee; }   /* Paragraphes actifs */</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;Ce paragraphe contient un lien :
+  &lt;a href="#"&gt;Ce lien devient rouge quand vous cliquez dessus.&lt;/a&gt;
+  Le paragraphe sera sur un fond gris quand vous cliquerez dessus
+  ou sur le lien.
+&lt;/p&gt;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Liens_actifs')}}</p>
+
+<h3 id="Éléments_de_formulaire_actifs">Éléments de formulaire actifs</h3>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">form :active {
+  color: red;
+}
+
+form button {
+  background: white;
+}</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;label for="mon-button"&gt;Un bouton :&lt;/label&gt;
+  &lt;button id="mon-button" type="button"&gt;Cliquez sur moi ou sur mon libellé !&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample('Éléments_de_formulaire_actifs')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'scripting.html#selector-active', ':active')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.active")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":link")}}</li>
+ <li>{{cssxref(":visited")}}</li>
+ <li>{{cssxref(":hover")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_any-link/index.html b/files/fr/web/css/_colon_any-link/index.html
new file mode 100644
index 0000000000..3478e545af
--- /dev/null
+++ b/files/fr/web/css/_colon_any-link/index.html
@@ -0,0 +1,76 @@
+---
+title: ':any-link'
+slug: 'Web/CSS/:any-link'
+tags:
+  - CSS
+  - Experimental
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:any-link'
+---
+<div>{{CSSRef}}</div>
+
+<p>La pseudo-classe <strong><code>:any-link</code></strong> permet de représenter un élément qui agit comme la source de l'ancre d'un hyperlien (qu'il ait été visité ou non). Elle permet donc de cibler les éléments {{HTMLElement("a")}}, {{HTMLElement("area")}} ou {{HTMLElement("link")}} avec un attribut <code>href</code>. Autrement dit, elle cible les éléments qui correspondent à {{cssxref(":link")}} ou à {{cssxref(":visited")}}.</p>
+
+<pre class="brush: css no-line-numbers  language-css">/* cible tous les éléments qui seraient ciblés par */
+/* :link ou :visited */
+:any-link {
+  color: green;
+  font-weight: bold;
+}</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">:any-link {
+  color: green;
+  font-weight: bold;
+}
+
+/* Pour les navigateurs WebKit */
+:-webkit-any-link {
+  color: green;
+  font-weight: bold;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;a href="https://mozilla.org"&gt;Une page différente&lt;/a&gt;&lt;br&gt;
+&lt;a href="#"&gt;Une ancre&lt;/a&gt;&lt;br&gt;
+&lt;a&gt;Un lien sans cible (n'est pas mis en forme)&lt;/a&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","100%")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors", "#the-any-link-pseudo", ":any-link")}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Les données de compatibilité de cette page ont été générées à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à proposer une <em>pull request</em> sur le dépôt <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("css.selectors.any-link")}}</p>
diff --git a/files/fr/web/css/_colon_any/index.html b/files/fr/web/css/_colon_any/index.html
new file mode 100644
index 0000000000..0178fd736d
--- /dev/null
+++ b/files/fr/web/css/_colon_any/index.html
@@ -0,0 +1,174 @@
+---
+title: ':any()'
+slug: 'Web/CSS/:any'
+tags:
+  - CSS
+  - Experimental
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:is'
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:any()</code></strong> vous permet de construire des ensembles de sélecteurs similaires en créant des groupes à partir desquels l'un des éléments sera activé. C'est une méthode alternative qui permet d'éviter de réécrire un sélecteur entier alors que seule une petite partie varie.</p>
+
+<pre class="brush: css no-line-numbers">/* sélectionne tous les h2 d'une section, d'un article */
+/* d'un aside ou d'un nav */
+/* actuellement pris en charge avec les préfixes */
+/* -moz- et -webkit- */
+:-moz-any(section, article, aside, nav) h2 {
+  font-size: 4.5rem;
+}
+
+:-webkit-any(section, article, aside, nav) h2 {
+  font-size: 4.5rem;
+}
+</pre>
+
+<div class="note"><strong>Note : </strong>Cette pseudo-classe est en voie d'être standardisée dans la spécification <a class="external" href="http://dev.w3.org/csswg/selectors4/#matches"><em>CSS Selectors Level 4</em></a> sous le nom de <code>:matches()</code>. Il est probable que la syntaxe et le nom de <code>:-<em>préfixe</em>-any()</code> soit amené à changer pour l'adopter dans un avenir proche.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>selector</code></dt>
+ <dd>Un sélecteur, simple ou multiple, composé d'un <a class="external" href="http://www.w3.org/TR/css3-selectors/#simple-selectors">sélecteur CSS simple</a>.</dd>
+</dl>
+
+<div class="note"><strong>Note :</strong> Le sélecteur <strong>ne peut pas</strong> contenir de combinateur ou de pseudo-éléments.</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Simplifier_la_sélection_de_listes">Simplifier la sélection de listes</h3>
+
+<p>Par exemple, le code CSS suivant :</p>
+
+<pre class="brush: css">/*  Les listes non-ordonnes utilisent un carré */
+    dans certains cas */
+ol ol ul,     ol ul ul,     ol menu ul,     ol dir ul,
+ol ol menu,   ol ul menu,   ol menu menu,   ol dir menu,
+ol ol dir,    ol ul dir,    ol menu dir,    ol dir dir,
+ul ol ul,     ul ul ul,     ul menu ul,     ul dir ul,
+ul ol menu,   ul ul menu,   ul menu menu,   ul dir menu,
+ul ol dir,    ul ul dir,    ul menu dir,    ul dir dir,
+menu ol ul,   menu ul ul,   menu menu ul,   menu dir ul,
+menu ol menu, menu ul menu, menu menu menu, menu dir menu,
+menu ol dir,  menu ul dir,  menu menu dir,  menu dir dir,
+dir ol ul,    dir ul ul,    dir menu ul,    dir dir ul,
+dir ol menu,  dir ul menu,  dir menu menu,  dir dir menu,
+dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {
+  list-style-type: square;
+}
+</pre>
+
+<p>Pourra être remplacé par :</p>
+
+<pre class="brush: css">/* Les listes non-ordonnes utilisent un carré */
+   dans certains cas */
+:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) ul,
+:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) menu,
+:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) dir {
+  list-style-type: square;
+}</pre>
+
+<p>Cependant, on évitera d'utiliser le code suivant (cf. <a href="#Performances">la section sur les performances</a> plus bas) :</p>
+
+<pre class="brush: css">:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) :-moz-any(ul, menu, dir) {
+  list-style-type: square;
+}</pre>
+
+<h3 id="Simplifier_la_sélection_de_section">Simplifier la sélection de section</h3>
+
+<p>Ceci est particulièrement utile lorsqu'on manipule <a href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document">des sections et des titres</a> HTML. Les éléments {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}} et {{HTMLElement("nav")}} peuvent être imbriqués, sans <code>:any()</code>, leur appliquer un style peut être beaucoup plus complexe.</p>
+
+<p>Par exemple, sans <code>:any()</code>, appliquer un style à tous les éléments {{HTMLElement("h1")}} situés à différents niveaux peut être vraiment compliqué :</p>
+
+<pre class="brush: css">/* Niveau 0 */
+h1 {
+  font-size: 30px;
+}
+/* Niveau 1 */
+section h1, article h1, aside h1, nav h1 {
+  font-size: 25px;
+}
+/* Niveau 2 */
+section section h1, section article h1, section aside h1, section nav h1,
+article section h1, article article h1, article aside h1, article nav h1,
+aside section h1, aside article h1, aside aside h1, aside nav h1,
+nav section h1, nav article h1, nav aside h1, nav nav h1, {
+  font-size: 20px;
+}
+/* Niveau 3 */
+/* ... même pas la peine d'y penser */
+</pre>
+
+<p>En utilisant : <code>-any()</code>, cela devient plus simple :</p>
+
+<pre class="brush: css">/* Niveau 0 */
+h1 {
+  font-size: 30px;
+}
+/* Niveau 1 */
+:-moz-any(section, article, aside, nav) h1 {
+  font-size: 25px;
+}
+:-webkit-any(section, article, aside, nav) h1 {
+  font-size: 25px;
+}
+
+/* Niveau 2 */
+:-moz-any(section, article, aside, nav)
+:-moz-any(section, article, aside, nav) h1 {
+  font-size: 20px;
+}
+
+:-webkit-any(section, article, aside, nav)
+:-webkit-any(section, article, aside, nav) h1 {
+  font-size: 20px;
+}
+
+/* Niveau 3 */
+:-moz-any(section, article, aside, nav)
+:-moz-any(section, article, aside, nav)
+:-moz-any(section, article, aside, nav) h1 {
+  font-size: 15px;
+}
+
+:-webkit-any(section, article, aside, nav)
+:-webkit-any(section, article, aside, nav)
+:-webkit-any(section, article, aside, nav) h1 {
+  font-size: 15px;
+}</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<h3 id="Problèmes_avec_les_performances_et_la_spécificité"><a id="Performances">Problèmes avec les performances et la spécificité</a></h3>
+
+<p>Le bug {{bug("561154")}} illustre un problème où la spécificité de <code>:-moz-any()</code> est incorrecte. L'implémentation actuelle considère <code>:-moz-any()</code> comme une règle universelle. Ainsi, lorsqu'il est utilisé pour le sélecteur le plus à droite d'un expression ce sera plus lent que d'utiliser un identifiant, une classe ou une balise.</p>
+
+<p>Par exemple :</p>
+
+<pre class="brush: css">.a &gt; :-moz-any(.b, .c)
+</pre>
+
+<p>est moins rapide que :</p>
+
+<pre class="brush: css">.a &gt; .b, .a &gt; .c
+</pre>
+
+<p>et celui-ci est rapide :</p>
+
+<pre class="brush: css">:-moz-any(.a, .d) &gt; .b, :-moz-any(.a, .d) &gt; .c
+</pre>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.any")}}</p>
diff --git a/files/fr/web/css/_colon_blank/index.html b/files/fr/web/css/_colon_blank/index.html
new file mode 100644
index 0000000000..78f5f10739
--- /dev/null
+++ b/files/fr/web/css/_colon_blank/index.html
@@ -0,0 +1,53 @@
+---
+title: ':blank'
+slug: 'Web/CSS/:blank'
+tags:
+  - CSS
+  - Draft
+  - Experimental
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:blank'
+---
+<p>{{CSSRef}}{{Draft}}{{SeeCompatTable}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Le sélecteur <code>:blank</code> est une fonctionnalité considérée risquée car en cours de modification par le CSSWG. Voir <a href="https://github.com/w3c/csswg-drafts/issues/1967" title="[selectors] decide on :blank">l'<em>issue</em> n°1967 à ce propos</a>.</p>
+</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:blank</code></strong> permet de sélectionner les champs saissables par l'utilisateur et qui sont vides (par exemple des éléments {{HTMLElement("input")}} ou {{HTMLElement("textarea")}} où rien n'a encore été saisi).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors", "#blank-pseudo", ":blank")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.blank")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{CSSxRef(":empty")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_checked/index.html b/files/fr/web/css/_colon_checked/index.html
new file mode 100644
index 0000000000..1c30f76b91
--- /dev/null
+++ b/files/fr/web/css/_colon_checked/index.html
@@ -0,0 +1,141 @@
+---
+title: ':checked'
+slug: 'Web/CSS/:checked'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:checked'
+---
+<div>{{CSSRef}}</div>
+
+<p>La pseudo-classe <strong><code>:checked</code></strong> représente n'importe quel <strong>bouton radio</strong> (<code><a href="/fr/docs/Web/HTML/Element/input/radio">&lt;input type="radio"&gt;</a></code>), <strong>case à cocher </strong>(<code><a href="/fr/docs/Web/HTML/Element/input/checkbox">&lt;input type="checkbox"&gt;</a></code>) ou <strong>option</strong> ({{HTMLElement("option")}} d'un élément {{HTMLElement("select")}}) qui est coché ou activé (<code>on</code>). L'utilisateur peut modifier cet état en cliquant sur l'élément ou en sélectionnant une valeur différente auquel cas la pseudo-classe <code>:checked</code> ne s'applique plus à l'élément en question.</p>
+
+<pre class="brush: css no-line-numbers">/* cible n'importe quel bouton radio sélectionné, case
+/* à cocher cochée ou option sélectionnée */
+input:checked {
+  margin-left: 25px;
+  border: 1px solid blue;
+}
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Les navigateurs considèrent souvent les éléments <code>&lt;option&gt;</code> comme <a href="/fr/docs/Web/CSS/%C3%89l%C3%A9ment_remplac%C3%A9">des éléments remplacés</a>et la possibilité de mise en forme avec <code>:checked</code> varie d'un navigateur à l'autre.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Ici, on utilise la pseudo-classe <code>:checked</code> pseudo-class applied to hidden checkboxes appended at the beginning of your page could be employed in order to store some dynamic booleans to be used by a CSS rule. The following example shows how to hide/show some expandable elements by simply clicking on a button (<a class="internal" href="/@api/deki/files/6246/=expandable-elements.html" title="Expandable elements through the :checked pseudoclass">download this demo</a>).</p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#expand-btn {
+    margin: 0 3px;
+    display: inline-block;
+    font: 12px / 13px "Lucida Grande", sans-serif;
+    text-shadow: rgba(255, 255, 255, 0.4) 0 1px;
+    padding: 3px 6px;
+    border: 1px solid rgba(0, 0, 0, 0.6);
+    background-color: #969696;
+    cursor: default;
+    border-radius: 3px;
+    box-shadow: rgba(255, 255, 255, 0.4) 0 1px, inset 0 20px 20px -10px white;
+}
+
+#isexpanded:checked ~ #expand-btn, #isexpanded:checked ~ * #expand-btn {
+    background: #B5B5B5;
+    box-shadow: inset rgba(0, 0, 0, 0.4) 0 -5px 12px, inset rgba(0, 0, 0, 1) 0 1px 3px, rgba(255, 255, 255, 0.4) 0 1px;
+}
+
+#isexpanded, .expandable {
+    display: none;
+}
+
+#isexpanded:checked ~ * tr.expandable {
+    display: table-row;
+    background: #cccccc;
+
+}
+
+#isexpanded:checked ~ p.expandable, #isexpanded:checked ~ * p.expandable {
+    display: block;
+    background: #cccccc;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input type="checkbox" id="isexpanded" /&gt;
+
+&lt;table&gt;
+    &lt;thead&gt;
+        &lt;tr&gt;&lt;th&gt;Colonne 1&lt;/th&gt;&lt;th&gt;Colonne 2&lt;/th&gt;&lt;th&gt;Colonne 3&lt;/th&gt;&lt;/tr&gt;
+    &lt;/thead&gt;
+    &lt;tbody&gt;
+        &lt;tr class="expandable"&gt;&lt;td&gt;[cellule]&lt;/td&gt;&lt;td&gt;[cellule]&lt;/td&gt;&lt;td&gt;[cellule]&lt;/td&gt;&lt;/tr&gt;
+        &lt;tr&gt;&lt;td&gt;[cellule]&lt;/td&gt;&lt;td&gt;[cellule]&lt;/td&gt;&lt;td&gt;[cellule]&lt;/td&gt;&lt;/tr&gt;
+        &lt;tr&gt;&lt;td&gt;[cellule]&lt;/td&gt;&lt;td&gt;[cellule]&lt;/td&gt;&lt;td&gt;[cellule]&lt;/td&gt;&lt;/tr&gt;
+        &lt;tr class="expandable"&gt;&lt;td&gt;[cellule]&lt;/td&gt;&lt;td&gt;[cellule]&lt;/td&gt;&lt;td&gt;[cellule]&lt;/td&gt;&lt;/tr&gt;
+        &lt;tr class="expandable"&gt;&lt;td&gt;[cellule]&lt;/td&gt;&lt;td&gt;[cellule]&lt;/td&gt;&lt;td&gt;[cellule]&lt;/td&gt;&lt;/tr&gt;
+    &lt;/tbody&gt;
+&lt;/table&gt;
+
+&lt;p&gt;[Un texte normal]&lt;/p&gt;
+&lt;p&gt;&lt;label for="isexpanded" id="expand-btn"&gt;Afficher les éléments masqués&lt;/label&gt;&lt;/p&gt;
+&lt;p class="expandable"&gt;[Un texte caché]&lt;/p&gt;
+&lt;p&gt;[Un texte normal]&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples','300','450')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#selector-checked', ':checked')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#selector-checked', ':checked')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>La sémantique relative au HTML est définie.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#checked', ':checked')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#pseudo-checked', ':checked')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Lien avec la spécification de niveau 3 pour les sélecteurs.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#checked', ':checked')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Définition de la pseudo-classe mais pas de la sémantique associée.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.checked")}}</p>
diff --git a/files/fr/web/css/_colon_default/index.html b/files/fr/web/css/_colon_default/index.html
new file mode 100644
index 0000000000..6dbe175935
--- /dev/null
+++ b/files/fr/web/css/_colon_default/index.html
@@ -0,0 +1,114 @@
+---
+title: ':default'
+slug: 'Web/CSS/:default'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:default'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:default</code></strong> représente un élément de l'interface utilisateur qui est l'élément par défaut parmi d'autres éléments semblables (par exemple le bouton par défaut d'un groupe de boutons).</p>
+
+<pre class="brush: css no-line-numbers">/* Cible l'élément par défaut d'un groupe */
+:default {
+  background-color: lime;
+}</pre>
+
+<p>Ainsi, le bouton actionné par défaut parmi plusieurs boutons pourra être mis en forme en le ciblant avec cette pseudo-classe.</p>
+
+<p>Ce sélecteur peut être utilisé sur des éléments {{htmlelement("button")}}, <code><a href="/fr/docs/Web/HTML/Element/input/checkbox">&lt;input type="checkbox"&gt;</a></code>, <code><a href="/fr/docs/Web/HTML/Element/input/radio">&lt;input type="radio"&gt;</a></code> et {{htmlelement("option")}} :</p>
+
+<ul>
+ <li>Un élément <code>&lt;option&gt;</code> par défaut est le premier qui possède l'attribut <code>selected</code> ou le premier qui est activé selon l'ordre du DOM.</li>
+ <li>Les éléments <code>&lt;input type="checkbox"&gt;</code> et <code>&lt;input type="radio"&gt;</code> seront ciblés s'ils possèdent l'attribut <code>checked</code>.</li>
+ <li>L'élément <code>&lt;button&gt;</code> est ciblé si c'est le bouton d'envoi par défaut d'un formulaire, c'est-à-dire le premier bouton (selon l'ordre du DOM) appartenant au formulaire (cela vaut également pour les éléments {{htmlelement("input")}} dont le type permet d'envoyer des formulaires tels que <code>image</code> ou <code>submit</code>).</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> La spécification WHATWG HTML définit cela dans <a href="https://html.spec.whatwg.org/multipage/semantics-other.html#selector-default">le paragraphe 4.16.3</a>.</p>
+</div>
+
+<p>Les éléments de l'interface utilisateur qui permette une sélection multiple peuvent avoir plusieurs éléments par défaut. Dans ce cas, tous les éléments par défaut sont ciblés via la pseudo-classe <code>:default</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input:default {
+  box-shadow: 0 0 2px 1px coral;
+}
+
+input:default + label {
+  color: coral;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;fieldset&gt;
+  &lt;legend&gt;Saison préférée&lt;/legend&gt;
+
+  &lt;input type="radio" name="season" id="spring"&gt;
+  &lt;label for="spring"&gt;Printemps&lt;/label&gt;
+
+  &lt;input type="radio" name="season" id="summer" checked&gt;
+  &lt;label for="summer"&gt;Eté&lt;/label&gt;
+
+  &lt;input type="radio" name="season" id="fall"&gt;
+  &lt;label for="fall"&gt;Automne&lt;/label&gt;
+
+  &lt;input type="radio" name="season" id="winter"&gt;
+  &lt;label for="winter"&gt;Hiver&lt;/label&gt;
+&lt;/fieldset&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#selector-default', ':default')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#selector-default', ':default')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>La sémantique liée au HTML est définie et les contraintes de validation sont également définies.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#default-pseudo', ':default')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#pseudo-default', ':default')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Définition initiale de la pseudo-classe mais pas de la sémantique associée.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.default")}}</p>
diff --git a/files/fr/web/css/_colon_defined/index.html b/files/fr/web/css/_colon_defined/index.html
new file mode 100644
index 0000000000..9bdc667302
--- /dev/null
+++ b/files/fr/web/css/_colon_defined/index.html
@@ -0,0 +1,124 @@
+---
+title: ':defined'
+slug: 'Web/CSS/:defined'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+  - Web
+translation_of: 'Web/CSS/:defined'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:defined</code></strong> représente n'importe quel élément ayant été défini. Cela inclut les éléments standards provenant du navigateur et également les éléments personnalisés (<em>custom elements</em>) ayant correctement été définis (c'est-à-dire grâce à la méthode {{domxref("CustomElementRegistry.define()")}}).</p>
+
+<pre class="brush: css no-line-numbers">/* Cette règle cible tout élément défini */
+:defined {
+  font-style: italic;
+}
+
+/* Cette règle cible n'importe quelle instance */
+/* d'un élément personnalisé donné */
+simple-custom:defined {
+  display: block;
+}
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Les fragments de code qui suivent sont tirés <a href="https://github.com/mdn/web-components-examples/tree/master/defined-pseudo-class">du dépôt <code>defined-pseudo-class</code></a> (<a href="https://mdn.github.io/web-components-examples/defined-pseudo-class/">voir le résultat en <em>live</em></a>).</p>
+
+<p>Pour cette démonstration on définit un élément personnalisé trivial :</p>
+
+<pre class="brush: js">customElements.define('simple-custom',
+  class extends HTMLElement {
+    constructor() {
+      super();
+
+      let divElem = document.createElement('div');
+      divElem.textContent = this.getAttribute('text');
+
+      let shadowRoot = this.attachShadow({mode: 'open'})
+        .appendChild(divElem);
+  }
+})</pre>
+
+<p>On insère une copie de cet élément dans le document, à côté d'un paragraphe classique {{HTMLElement("p")}}  :</p>
+
+<pre class="brush: html">&lt;simple-custom text="Le texte de l'élément personnalisé"&gt;&lt;/simple-custom&gt;
+
+&lt;p&gt;Un paragraphe normal.&lt;/p&gt;</pre>
+
+<p>Dans la feuille CSS, on inclut les règles suivantes :</p>
+
+<pre class="brush: css">// On utilise deux arrières-plans distincts
+// pour ces deux éléments
+p {
+  background: yellow;
+}
+
+simple-custom {
+  display: block;
+  background: cyan;
+}
+
+// On met en italique le texte de ces
+// deux éléments
+:defined {
+  font-style: italic;
+}</pre>
+
+<p>Ensuite, on fournit les deux règles suivantes afin de masquer les instances de l'élément personnalisé qui ne sont pas définies et, pour celles qui sont définies, on indique que ce sont des éléments de bloc :</p>
+
+<pre class="brush: css">simple-custom:not(:defined) {
+  opacity: 0;
+}
+
+simple-custom:defined {
+  opacity: 0.75;
+  text-decoration: underline;
+}</pre>
+
+<p>Ces dernières règles sont utiles lorsqu'on a un élément personnalisé complexe qui met du temps à charger : pour ceux-là, on peut vouloir les masquer jusqu'à ce que la définition soit complète afin de ne pas avoir de scintillement d'éléments non mis en formes sur la page.</p>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics-other.html#selector-defined', ':defined')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.defined")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/Web_Components">Les composants web</a></li>
+ <li>{{cssxref(":host")}}</li>
+ <li>{{cssxref(":host()")}}</li>
+ <li>{{cssxref(":host-context()")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_dir/index.html b/files/fr/web/css/_colon_dir/index.html
new file mode 100644
index 0000000000..7d9197910e
--- /dev/null
+++ b/files/fr/web/css/_colon_dir/index.html
@@ -0,0 +1,110 @@
+---
+title: ':dir'
+slug: 'Web/CSS/:dir'
+tags:
+  - CSS
+  - Experimental
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:dir'
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong> <code>:dir</code></strong> permet de cibler un élément selon la direction du texte qu'il contient. En HTML, la direction est définie grâce à l'attribut {{htmlattrxref("dir", "html")}}. Pour les autres types de document, cela peut être déterminé autrement.</p>
+
+<pre class="brush: css">/* Cible le contenu avec du texte */
+/* écrit de droite à gauche */
+:dir(rtl) {
+  background-color: red;
+}</pre>
+
+<p>On notera que la pseudo-classe <code>:dir()</code> ne fonctionne pas de la même façon que le sélecteur d'attribut <code>[dir=…]</code>. Ce dernier utilise la valeur de l'attribut {{htmlattrxref("dir", "html")}} et il n'y a aucune correspondance lorsque l'attribut n'est pas défini (même si l'élément HTML hérite de la valeur de son élément parent). De la même façon <code>[dir=rtl]</code> ou <code>[dir=ltr]</code> ne pourront pas correspondre à la valeur <code>auto</code> qui peut être utilisée sur l'attribut <code>dir</code>. Au contraire, <code>:dir()</code> calculera la correspondance en fonction de la valeur utilisée par l'agent utilisateur (qu'elle soit héritée ou qu'elle vaille <code>auto</code>).</p>
+
+<p><code>:dir()</code> ne prend en compte que la valeur <em>sémantique</em> de la direction, celle qui est définie par le document (la plupart du temps un document HTML). Elle ne tiendra pas compte de la direction liée à la mise en forme, purement stylistique, modifiée par des propriétés telles que {{cssxref("direction")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p id="Syntaxe_formelle">La pseudo-classe <code>:dir()</code> nécessite un paramètre qui indique la direction du texte qu'on souhaite cibler</p>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>direction</code></dt>
+ <dd>La direction du texte pour les éléments qu'on souhaite sélectionner. La valeur peut être <code>ltr</code> (texte écrit de gauche à droite) ou <code>rtl</code> (texte écrit de droite à gauche).</dd>
+ <dt>
+ <h3 id="Syntaxe_formelle_2">Syntaxe formelle</h3>
+
+ <pre class="syntaxbox">{{csssyntax}}</pre>
+ </dt>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">:-moz-dir(rtl) {
+  color: lime;
+}
+
+:dir(rtl) {
+  color: lime;
+}
+
+:-moz-dir(ltr) {
+  color: black;
+}
+
+:dir(ltr) {
+  color: black;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html;">&lt;div dir="rtl"&gt;
+  &lt;span&gt;test1&lt;/span&gt;
+  &lt;div dir="ltr"&gt;test2
+    &lt;div dir="auto"&gt;עִבְרִית&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "100%", 70)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'scripting.html#selector-ltr', ':dir(ltr)')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#the-dir-pseudo', ':dir()')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.dir")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":lang")}}</li>
+ <li>{{cssxref(":dir")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_disabled/index.html b/files/fr/web/css/_colon_disabled/index.html
new file mode 100644
index 0000000000..8c7e609d58
--- /dev/null
+++ b/files/fr/web/css/_colon_disabled/index.html
@@ -0,0 +1,117 @@
+---
+title: ':disabled'
+slug: 'Web/CSS/:disabled'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:disabled'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:disabled</code></strong> permet de cibler un élément désactivé. Un élément est désactivé s'il ne peut pas être activé (sélectionné, cliqué ou saisi) ou s'il ne peut pas recevoir le focus de l'utilisateur. L'élément possède également un état activé dans lequel il peut être sélectionné ou recevoir le focus.</p>
+
+<pre class="brush: css no-line-numbers">/* Cible tous les champs de saisie texte */
+/* qui sont désactivés */
+input[type="text"]:disabled {
+  background: #ccc;
+}</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input[type="text"]:disabled { background: #ccc; }
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;form action="#"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Adresse de livraison&lt;/legend&gt;
+    &lt;input type="text" placeholder="Nom"&gt;
+    &lt;input type="text" placeholder="Adresse"&gt;
+    &lt;input type="text" placeholder="Code postal"&gt;
+  &lt;/fieldset&gt;
+  &lt;fieldset id="facturation"&gt;
+    &lt;legend&gt;Adresse de facturation&lt;/legend&gt;
+    &lt;label for="facturation_livraison"&gt;Identique à l'adresse de livraison&lt;/label&gt;
+    &lt;input type="checkbox" id="facturation_livraison" onchange="javascript:toggleBilling()" checked&gt;
+    &lt;br /&gt;
+    &lt;input type="text" placeholder="Nom" disabled&gt;
+    &lt;input type="text" placeholder="Adresse" disabled&gt;
+    &lt;input type="text" placeholder="Code postal" disabled&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">function toggleBilling() {
+  var billingItems = document.querySelectorAll('#facturation input[type="text"]');
+  for (var i = 0; i &lt; billingItems.length; i++) {
+    billingItems[i].disabled = !billingItems[i].disabled;
+  }
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '300px', '250px')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#selector-disabled', ':disabled')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#selector-disabled', ':disabled')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Définition de la sémantique relative à HTML et aux formulaires.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#enableddisabled', ':disabled')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#pseudo-classes', ':disabled')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Référence à la spécification de niveau 3 sur les sélecteurs.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#enableddisabled', ':disabled')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Définition de la pseudo-classe mais sans la sémantique associée.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.disabled")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>
+  <p>{{cssxref(":enabled")}}</p>
+ </li>
+</ul>
diff --git a/files/fr/web/css/_colon_empty/index.html b/files/fr/web/css/_colon_empty/index.html
new file mode 100644
index 0000000000..ef31669639
--- /dev/null
+++ b/files/fr/web/css/_colon_empty/index.html
@@ -0,0 +1,108 @@
+---
+title: ':empty'
+slug: 'Web/CSS/:empty'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:empty'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:empty</code></strong> correspond à un élément qui n'a aucun enfant. Seules les feuilles de l'arbre et le texte (espaces inclus) sont pris en compte. Les commentaires, les attributs ou le contenu généré en CSS avec {{cssxref("content")}} n'ont pas d'influence sur le contenu de l'élément (autrement dit, si un élément ne contient que des commentaires, il sera considéré comme vide).</p>
+
+<pre class="brush: css no-line-numbers">/* Cible tous les éléments &lt;div&gt; qui */
+/* n'ont  pas de contenu */
+div:empty {
+  background: lime;
+}</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Avec {{SpecName("CSS4 Selectors", "#the-empty-pseudo")}}, le sélecteur <code>:empty</code> a été modifié afin de se comporter comme <span style="white-space: nowrap;">{{CSSxRef(":-moz-only-whitespace")}}</span> mais, à l'heure actuelle, aucun navigateur ne prend en charge cette fonctionnalité.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">body {
+  display: flex;
+  justify-content: space-around;
+}
+
+.box {
+  background: red;
+  height: 100px;
+  width: 100px;
+}
+
+.box:empty {
+  background: blue;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="box"&gt;&lt;!-- Je serai bleu. --&gt;&lt;/div&gt;
+&lt;div class="box"&gt;Je serai rouge.&lt;/div&gt;
+&lt;div class="box"&gt;
+    &lt;!-- Je serai rouge à cause des espaces autour du commentaire --&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples','100%','105')}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Les technologies d'assistance telles que les lecteurs d'écran ne peuvent pas analyser un contenu interactif vide. Tout contenu interactif doit avoir un nom accessible, fourni sous la forme d'une valeur textuelle via l'élément parent du contrôle ({{HTMLElement("a")}}, {{HTMLElement("button")}}, etc.). Les noms accessibles pemettent d'exposer le contrôle interactif au sein de <a href="/fr/Apprendre/a11y/What_is_accessibility">l'arbre d'accessibilité</a>, une API communiquant des informations qui peuvent être utilisées par les technologies d'assistance.</p>
+
+<p>Le texte fournissant le nom accessible peut être masqué grâce <a href="https://gomakethings.com/hidden-content-for-better-a11y/#hiding-the-link" rel="noopener">à des propriétés</a> afin de le retirer visuellement mais de le conserver pour les technologies d'assistance. Cette méthode est généralement utilisée pour les boutons utilisant une simple icône comme indication.</p>
+
+<ul>
+ <li><a href="https://developer.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/" hreflang="en">Qu'est-ce qu'un nom accessible ? The Paciello Group (en anglais)</a></li>
+ <li><a href="https://gomakethings.com/hidden-content-for-better-a11y/" hreflang="en"><em lang="en">Hidden content for better a11y</em> (en anglais)</a></li>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_%E2%80%94_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">Comprendre la règle WCAG 2.4</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-refs.html" hreflang="en"><em lang="en">Understanding Success Criterion 2.4.4</em> (en anglais) </a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors", "#the-empty-pseudo", ":empty")}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Modifier afin d'obtenir le comportement de {{CSSxRef(":-moz-only-whitespace")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Selectors", "#empty-pseudo", ":empty")}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.empty")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":blank")}}{{Experimental_inline}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_enabled/index.html b/files/fr/web/css/_colon_enabled/index.html
new file mode 100644
index 0000000000..7fdc81910f
--- /dev/null
+++ b/files/fr/web/css/_colon_enabled/index.html
@@ -0,0 +1,106 @@
+---
+title: ':enabled'
+slug: 'Web/CSS/:enabled'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:enabled'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:enabled</code></strong> permet de cibler un élément activé. Un élément est activé s'il peut être sélectionné, si on peut cliquer dessus ou si on peut y saisir du texte ou y passer le focus (un élément peut également être dans un état désactivé).</p>
+
+<pre class="brush: css no-line-numbers">/* Cible n'importe quel élément &lt;input&gt; actif */
+input:enabled {
+  color: #22AA22;
+}</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, les textes des éléments activés seront verts alors que ceux des éléments désactivés seront gris. L'utilisateur peut ainsi reconnaître les éléments avec lesquels interagir.</p>
+
+<div id="Enabled_Disabled_Inputs_Example">
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html">&lt;form action="url_of_form"&gt;
+  &lt;label for="PremierChamp"&gt;Premier champ (activé) :&lt;/label&gt;
+  &lt;input type="text" id="PremierChamp" value="Titi"&gt;&lt;br /&gt;
+
+  &lt;label for="DeuxiemeChamp"&gt;Deuxième champ (désactivé) :&lt;/label&gt;
+  &lt;input type="text" id="DeuxiemeChamp" value="Toto" disabled="disabled"&gt;&lt;br /&gt;
+
+  &lt;input type="button" value="Envoyer"/&gt;
+&lt;/form&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css; highlight:[1,4]">input:enabled {
+  color: #22AA22;
+}
+
+input:disabled {
+  color: #D9D9D9;
+}
+  </pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<div>{{EmbedLiveSample("Exemples",550,95)}}</div>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#selector-enabled', ':enabled')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#selector-enabled', ':enabled')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Définition de la sémantique dans le contexte de HTML et des formulaires.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#enableddisabled', ':enabled')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#pseudo-classes', ':enabled')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Lien vers la spécification des sélecteurs de niveau 3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#enableddisabled', ':enabled')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Définition de la pseudo-classe mais pas de la sémantique associée.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.enabled")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":disabled")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_first-child/index.html b/files/fr/web/css/_colon_first-child/index.html
new file mode 100644
index 0000000000..508a65a4de
--- /dev/null
+++ b/files/fr/web/css/_colon_first-child/index.html
@@ -0,0 +1,129 @@
+---
+title: ':first-child'
+slug: 'Web/CSS/:first-child'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:first-child'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:first-child</code></strong> permet de cibler un élément qui est le premier élément fils par rapport à son élément parent.</p>
+
+<pre class="brush: css no-line-numbers">/* Cible n'importe quel élément &lt;p&gt; qui est */
+/* le premier fils de son élément parent */
+p:first-child {
+  color: lime;
+  background-color: black;
+}</pre>
+
+<div class="note">
+<p><strong>Note </strong>: Tel que défini initialement, il était nécessaire que l'élément sélectionné ait un élément parent. À partir de la spécification de niveau 4 pour les sélecteurs, cela n'est plus obligatoire.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Premier_exemple">Premier exemple</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">p:first-child {
+  color: lime;
+  background-color: black;
+  padding: 5px;
+}</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p&gt;Ce paragraphe est mis en forme car c'est un élément
+     p ET que c'est le premier fils de l'élément div.&lt;/p&gt;
+  &lt;p&gt;En revanche, ce paragraphe n'est pas mis en forme
+     car ce n'est pas le premier !&lt;/p&gt;
+&lt;/div&gt;
+
+&lt;div&gt;
+  &lt;h2&gt;Ce titre h2 n'est pas mis en forme car ce n'est pas
+      un paragraphe.&lt;/h2&gt;
+  &lt;p&gt;Et ce paragraphe n'est pas mis en forme car ce n'est pas
+     le premier fils !&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Premier_exemple','100%',300)}}</p>
+
+<h3 id="Utiliser_les_listes_non_ordonnées">Utiliser les listes non ordonnées</h3>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">li{
+  color:blue;
+}
+
+li:first-child{
+  color:green;
+}</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;Élément 1 de la liste&lt;/li&gt;
+  &lt;li&gt;Élément 2&lt;/li&gt;
+  &lt;li&gt;Élément 3&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample('Utiliser_les_listes_non_ordonnées',300,100)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#first-child-pseudo', ':first-child')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Les éléments correspondants ne doivent pas avoir nécessairement de parent.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#first-child-pseudo', ':first-child')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#first-child', ':first-child')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.first-child")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":last-child")}}</li>
+ <li>{{CSSxRef(":nth-child", ":nth-child()")}}</li>
+ <li>{{cssxref(":last-of-type")}}</li>
+ <li>{{CSSxRef(":-moz-first-node")}} {{Non-standard_Inline}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_first-of-type/index.html b/files/fr/web/css/_colon_first-of-type/index.html
new file mode 100644
index 0000000000..7739d63fd4
--- /dev/null
+++ b/files/fr/web/css/_colon_first-of-type/index.html
@@ -0,0 +1,96 @@
+---
+title: ':first-of-type'
+slug: 'Web/CSS/:first-of-type'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:first-of-type'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:first-of-type</code></strong> permet de cibler le premier élément d'un type donné parmi ceux d'un même élément parent (et de même niveau).</p>
+
+<pre class="brush: css no-line-numbers">/* Cible le premier élément &lt;p&gt; d'un type donné */
+/* parmi ses éléments voisins */
+p:first-of-type {
+  color: red;
+}</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Dans la version initiale de la spécification (CSS3), l'élément ciblé devait avoir un parent, ce prérequis a désormais été abandonné (cf. spécification des sélecteurs pour CSS4).</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div :first-of-type {
+  background-color: lime;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;span&gt;Voici le premier span !&lt;/span&gt;
+  &lt;span&gt;Un autre span, pas le premier.&lt;/span&gt;
+  &lt;span&gt;Quid de cet &lt;em&gt;élément imbriqué &lt;/em&gt;?&lt;/span&gt;
+  &lt;b&gt;Un autre type d'élément.&lt;/b&gt;
+  &lt;span&gt;Ce type là est déjà apparu.&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<div>{{EmbedLiveSample('Exemples','100%', '120')}}</div>
+
+<div class="note">
+<p><strong>Note </strong><strong>:</strong> On peut voir ici que c'est le sélecteur universel qui est pris en compte quand aucun sélecteur simple n'est écrit directement avec la pseudo-classe.</p>
+</div>
+
+<div class="note">
+<p><strong>Note :</strong> Les modifications de styles s'appliquent également aux éléments imbriqués, vous pouvez essayer de modifier l'exemple précédent pour cibler le <code>&lt;div&gt;</code>.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#first-of-type-pseudo', ':first-of-type')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Les éléments ciblés ne doivent pas nécessairement avoir de parent.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#first-of-type-pseudo', ':first-of-type')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.first-of-type")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":nth-of-type")}},</li>
+ <li>{{cssxref(":last-of-type")}}</li>
+ <li>{{cssxref(":first-child")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_first/index.html b/files/fr/web/css/_colon_first/index.html
new file mode 100644
index 0000000000..336d6c6fad
--- /dev/null
+++ b/files/fr/web/css/_colon_first/index.html
@@ -0,0 +1,100 @@
+---
+title: ':first'
+slug: 'Web/CSS/:first'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:first'
+---
+<div>{{CSSRef}}</div>
+
+<p>La pseudo-classe <strong><code>:first</code></strong>, liée à la règle @ {{cssxref("@page")}} décrit la mise en forme de la première page lors de l'impression d'un document. ( voir {{cssxref(":first-child")}} pour le premier élément d'un noeud )</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* Cible le contenu de la première page */
+/* lorsqu'on imprime */
+@page :first {
+  margin-left: 50%;
+  margin-top: 50%;
+}</pre>
+
+<p>Seul un sous-ensemble restreint de propriétés peut être modifié via cette pseudo-classe :</p>
+
+<ul>
+ <li>Les propriétés liées aux marges : {{cssxref("margin")}}</li>
+ <li>Les propriétés liées aux lignes veuves et orphelines : {{cssxref("orphans")}} et {{cssxref("widows")}}</li>
+ <li>Les propriétés liées aux sauts de page : {{cssxref("page-break")}}</li>
+</ul>
+
+<p>De plus, seules <a href="/fr/docs/Web/CSS/length#Unités_de_longueur_absolues">les unités absolues</a> peuvent être utilisées pour les marges.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">@page :first {
+  margin-left: 50%;
+  margin-top: 50%;
+}
+
+p {
+  page-break-after: always;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;Première page.&lt;/p&gt;
+&lt;p&gt;Deuxième page.&lt;/p&gt;
+&lt;button&gt;Imprimer&lt;/button&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">document.querySelector("button").addEventListener('click', () =&gt; {
+  window.print();
+});</pre>
+
+<p>Appuyez sur le bouton "Imprimer!" pour imprimer l'exemple. Les mots sur la première page doivent être quelque part autour du centre, tandis que les autres pages auront leur contenu à la position par défaut.</p>
+
+<p>{{EmbedLiveSample("Exemples","80%","150px")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Paged Media', '#left-right-first', ':first')}}</td>
+   <td>{{Spec2('CSS3 Paged Media')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'page.html#page-selectors', ':first')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.first")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("@page")}}</li>
+ <li>{{cssxref(":left")}}</li>
+ <li>{{cssxref(":right")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_focus-visible/index.html b/files/fr/web/css/_colon_focus-visible/index.html
new file mode 100644
index 0000000000..7e3bde9044
--- /dev/null
+++ b/files/fr/web/css/_colon_focus-visible/index.html
@@ -0,0 +1,137 @@
+---
+title: ':focus-visible'
+slug: 'Web/CSS/:focus-visible'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+  - Web
+translation_of: 'Web/CSS/:focus-visible'
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La pseudo-classe <strong><code>:focus-visible</code></strong> s'applique lorsqu'un élément correspond à la pseudo-classe {{cssxref("focus")}} et que l'agent utilisateur détermine, via une heuristique, que le focus devrait être mis en évidence sur l'élément (la plupart des navigateurs affichent un contour en surbrillance par défaut).</p>
+
+<p>Ce sélecteur peut être utile afin de fournir un indicateur de focus différent selon le mode de navigation de l'utilisateur (souris ou clavier).</p>
+
+<p>On notera que Firefox prend en charge cette fonctionnalité via une ancienne pseudo-classe préfixée  <code>:-moz-focusring</code>. Voir la page {{cssxref(":-moz-focusring")}} pour plus d'informations.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre>:focus-visible</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<p>Dans cet exemple, le sélecteur <code>:focus-visible</code> utilise le comportement de l'agent utilisateur afin de déterminer lorsqu'il doit s'appliquer. Pour utiliser l'exemple, comparez ce qui se produit selon que vous utilisez une souris ou un clavier et notez la différence avec les éléments ciblés par <code>:focus</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;input value="Styles par défaut"&gt;&lt;br&gt;
+&lt;button&gt;Styles par défaut&lt;/button&gt;&lt;br&gt;
+&lt;input class="focus-only" value=":focus only"&gt;&lt;br&gt;
+&lt;button class="focus-only"&gt;:focus only&lt;/button&gt;&lt;br&gt;
+&lt;input class="focus-visible-only" value=":focus-visible only"&gt;&lt;br&gt;
+&lt;button class="focus-visible-only"&gt;:focus-visible only&lt;/button&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">input, button {
+  margin: 10px;
+}
+
+.focus-only:focus {
+  outline: 2px solid black;
+}
+
+.focus-visible-only:focus-visible {
+  outline: 4px dashed darkorange;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Exemple_simple', '100%', '300')}}</p>
+
+<h3 id="Choisir_d'afficher_l’indicateur_de_focus">Choisir d'afficher l’indicateur de focus</h3>
+
+<p>Un contrôle personnalisé (par exemple un bouton provenant d'un <em><a href="/fr/docs/Web/Web_Components/Using_custom_elements">custom element</a></em>) peut utiliser <code>:focus-visible</code> afin d'appliquer ou non un indicateur de focus pour la navigation au clavier afin de calquer au comportement natif de {{htmlelement("button")}}.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;custom-button tabindex="0" role="button"&gt;Cliquez-moi&lt;/custom-button&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">custom-button {
+  display: inline-block;
+  margin: 10px;
+}
+
+custom-button:focus {
+  /* Fournir une alternative pour les navigateurs
+     qui ne prennent pas en charge :focus-visible */
+  outline: none;
+  background: lightgrey;
+}
+
+custom-button:focus:not(:focus-visible) {
+  /* Retirer l'indicateur de focus à la souris
+     pour les navigateurs qui prennent en charge :focus-visible */
+  background: transparent;
+}
+
+custom-button:focus-visible {
+  /* Dessiner un contour pour les navigateurs qui
+     prennent en charge :focus-visible lorsque la
+     navigation est au clavier */
+  outline: 4px dashed darkorange;
+  background: transparent;
+}</pre>
+
+<p>{{EmbedLiveSample("Choisir_d'afficher_l’indicateur_de_focus", '100%', '300')}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<h3 id="Troubles_de_la_vision">Troubles de la vision</h3>
+
+<p>Il faut s'assurer que l'indicateur visuel de focus puisse être vu par des personnes ayant une vision faible. Cela pourra d'autant plus bénéficier aux personnes qui consultent le document dans un endroit fortement éclairé (dehors au soleil par exemple). La recommandation <a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">WCAG 2.1 SC 1.4.11 Non-Text Contrast</a> nécessite un contraste minimum de 3 à 1.</p>
+
+<ul>
+ <li>Indicateurs visuels de focus accessibles : <a href="https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/">Conseils sur la conception d'indicateurs utiles et utilisables (en anglais)</a></li>
+</ul>
+
+<h3 id="Troubles_cognitifs">Troubles cognitifs</h3>
+
+<p>L'apparition ou la disparition d'un indicateur de focus peut être source de confusion pour les personnes souffrant de troubles cognitifs ou pour les personnes qui ne sont pas habituées à ces interfaces.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors", "#the-focus-visible-pseudo", ":focus-visible")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>{{Compat("css.selectors.focus-visible")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":focus")}}</li>
+ <li>{{cssxref(":focus-within")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_focus-within/index.html b/files/fr/web/css/_colon_focus-within/index.html
new file mode 100644
index 0000000000..bb01fcfbf5
--- /dev/null
+++ b/files/fr/web/css/_colon_focus-within/index.html
@@ -0,0 +1,96 @@
+---
+title: ':focus-within'
+slug: 'Web/CSS/:focus-within'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:focus-within'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:focus-within</code></strong> s'applique à tous les éléments pour lesquels la pseudo-classe {{cssxref(":focus")}} s'applique ainsi qu'à tous leurs éléments descendants, y compris ceux du <em>Shadow DOM</em>. Autrement dit, cette pseudo-classe s'applique lorsqu'un élément a reçu le focus via le clavier ou la souris (par exemple lorsqu'on clique sur un champ d'un formulaire).</p>
+
+<pre class="brush: css no-line-numbers">/* Cible n'importe quel &lt;div&gt; lorsqu'un */
+/* de ses descendants a reçu le focus */
+div:focus-within {
+  background: yellow;
+}</pre>
+
+<p>Cette pseudo-classe s'applique également aux descendants de l'élément ciblé ainsi qu'aux descendants dont la racine est la racine d'un arbre du {{Glossary("Shadow DOM")}}.</p>
+
+<p>Ce sélecteur est notamment utile lorsqu'on veut, par exemple, mettre en avant l'ensemble d'un formulaire lorsque l'utilisateur passe le focus sur l'un de ses éléments {{HTMLElement("input")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.name-container {
+  padding: 4px;
+}
+
+.name-container:focus-within {
+  background: yellow;
+}
+
+input {
+  margin: 4px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  L'élément div ci-après aura un fond jaune
+  si l'un des deux champs de saisie a le focus.
+&lt;/p&gt;
+&lt;div class="name-container"&gt;
+  &lt;label for="prenom"&gt;
+    Prénom :
+    &lt;input id="prenom" placeholder="Prénom" type="text"&gt;
+  &lt;/label&gt;
+  &lt;label for="nom"&gt;
+    Nom :
+    &lt;input id="nom" placeholder="Nom" type="text"&gt;
+  &lt;/label&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 500, 150)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors", "#the-focus-within-pseudo", ":focus-within")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une <em>pull request</em> sur ce dépôt: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("css.selectors.focus-within")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":focus")}}</li>
+ <li>{{CSSxRef(":focus-visible")}} {{Experimental_Inline}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_focus/index.html b/files/fr/web/css/_colon_focus/index.html
new file mode 100644
index 0000000000..894676ea2f
--- /dev/null
+++ b/files/fr/web/css/_colon_focus/index.html
@@ -0,0 +1,110 @@
+---
+title: ':focus'
+slug: 'Web/CSS/:focus'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:focus'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:focus</code></strong> permet de cibler un élément lorsque celui-ci reçoit le focus (soit il est sélectionné à l'aide du clavier, soit il est activé avec la souris comme par exemple le champ d'un formulaire).</p>
+
+<pre class="brush: css no-line-numbers">/* Cible n'importe quel élément &lt;input&gt; */
+/* uniquement lorsqu'il a le focus */
+input:focus {
+  color: red;
+}</pre>
+
+<p>Cette pseudo-classe ne s'applique qu'aux éléments avec le focus, elle ne s'applique pas à ses parents (comme {{cssxref(":checked")}}, {{cssxref(":enabled")}} mais pas comme {{cssxref(":active")}} ou {{cssxref(":hover")}}).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.prenom:focus {
+  background: yellow;
+  color: red;
+}
+
+.nom:focus {
+  background: yellow;
+  color: lime;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input class="prenom" value="Rouge si focus"&gt;
+&lt;input class="nom" value="Vert si focus"&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '100%', 40)}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Il faut s'assurer que l'indicateur visuel de focus puisse être vu par des personnes ayant une vision faible. Cela pourra d'autant plus bénéficier aux personnes qui consultent le document dans un endroit fortement éclairé (dehors au soleil par exemple). La recommandation <a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">WCAG 2.1 SC 1.4.11 Non-Text Contrast</a> nécessite un contraste minimum de 3 à 1.</p>
+
+<ul>
+ <li>Indicateurs visuels de focus accessibles : <a href="https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/">Conseils sur la conception d'indicateurs utiles et utilisables (en anglais)</a></li>
+</ul>
+
+<h3 id="focus_outline_none"><code>:focus { outline: none; }</code></h3>
+
+<p>Il ne faut jamais retirer l'indicateur de focus sans le remplacer par un autre indicateur qui respecte la recommandation <a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">WCAG 2.1 SC 1.4.11 Non-Text Contrast</a> :</p>
+
+<ul>
+ <li><a href="https://a11yproject.com/posts/never-remove-css-outlines/">Ne jamais retirer les bordures/contours CSS (en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'scripting.html#selector-focus', ':focus')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Définition de la sémantique relative à HTML.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#focus-pseudo', ':focus')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':focus')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':focus')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.focus")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{CSSxRef(":focus-visible")}} {{Experimental_Inline}}</li>
+ <li>{{cssxref(":focus-within")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_fullscreen/index.html b/files/fr/web/css/_colon_fullscreen/index.html
new file mode 100644
index 0000000000..48f221600c
--- /dev/null
+++ b/files/fr/web/css/_colon_fullscreen/index.html
@@ -0,0 +1,93 @@
+---
+title: ':fullscreen'
+slug: 'Web/CSS/:fullscreen'
+tags:
+  - CSS
+  - Fullscreen API
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:fullscreen'
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:fullscreen</code></strong> permet de cibler tout élément qui est en mode plein écran. Si plusieurs éléments ont été mis en plein écran, tous ces éléments seront ciblés.</span></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Notes_dutilisation">Notes d'utilisation</h2>
+
+<p>La pseudo-classe <code>:fullscreen</code> permet de configurer la taille, le style ou la disposition du contenu lorsque les éléments passent de l'état plein écran à l'état normal et vice versa.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, on change la couleur d'un bouton selon que le document est en plein écran ou non. On n'utilise pas JavaScript pour changer les styles.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<p>On utilise deux règles. La première qui permet de définir la couleur d'arrière plan pour le bouton « Passer en mode plein écran » lorsque l'élément n'est pas en plein écran. Pour distinguer ce cas, on utilise <code>:not(:fullscreen)</code>, qui permet de cibler les éléments qui n'ont pas la pseudo-classe <code>:fullscreen</code>.</p>
+
+<pre class="brush: css">#fs-toggle:not(:fullscreen) {
+  background-color: #afa;
+}
+</pre>
+
+<p>Lorsque le document est en mode plein écran, on utilise cette fois-ci la pseudo-classe <code>:fullscreen</code> et on définit une autre couleur (ici un rouge pâle).</p>
+
+<pre class="brush: css">#fs-toggle:fullscreen {
+  background-color: #faa;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;h1&gt;MDN Web Docs Demo: :fullscreen pseudo-class&lt;/h1&gt;
+
+&lt;p&gt;This demo uses the &lt;code&gt;:fullscreen&lt;/code&gt; pseudo-class to automatically
+  change the style of a button used to toggle full-screen mode on and off,
+  entirely using CSS.&lt;/p&gt;
+
+&lt;button id="fs-toggle"&gt;Toggle Fullscreen&lt;/button&gt;</pre>
+
+<p>Dans ce fragment de code HTML, c'est l'élément {{HTMLElement("button")}} avec l'identifiant <code>"fs-toggle"</code> qui changera d'une couleur à une autre selon que le document est en plein écran ou non.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Fullscreen', '#:fullscreen-pseudo-class', ':fullscreen')}}</td>
+   <td>{{Spec2('Fullscreen')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.fullscreen")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Fullscreen_API">L'API Fullscreen</a></li>
+ <li><a href="/fr/docs/Web/API/Fullscreen_API/Guide">Le guide de l'API Fullscreen</a></li>
+ <li>{{cssxref("::backdrop")}}</li>
+ <li>Les API DOM :
+  <ul>
+   <li>{{domxref("Element.requestFullscreen()")}},</li>
+   <li>{{domxref("Document.exitFullscreen()")}},</li>
+   <li>{{domxref("Document.fullscreenElement")}}</li>
+  </ul>
+ </li>
+ <li>L'attribut {{HTMLAttrXRef("allowfullscreen", "iframe")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_has/index.html b/files/fr/web/css/_colon_has/index.html
new file mode 100644
index 0000000000..ae987efbd4
--- /dev/null
+++ b/files/fr/web/css/_colon_has/index.html
@@ -0,0 +1,69 @@
+---
+title: ':has'
+slug: 'Web/CSS/:has'
+tags:
+  - CSS
+  - Experimental
+  - Pseudo-classe
+  - Reference
+  - Sélecteur
+translation_of: 'Web/CSS/:has'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:has()</code></strong> permet de cibler un élément si au moins un des sélecteurs passés en paramètre correspond à l'élément (selon la portée, {{cssxref(":scope")}}, de l'élément).</p>
+
+<p>Cette pseudo-classe <code>:has()</code> prend en paramètre une liste de sélecteurs.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Pour des raisons de performances et dans la spécification actuelle, <a href="https://drafts.csswg.org/selectors/#live-profile"><code>has()</code> n'est pas classé comme un sélecteur dynamique</a> et peut uniquement être utilisé de façon statique (par exemple avec des fonctions comme {{domxref("document.querySelector()")}}.</p>
+</div>
+
+<pre class="brush: js">/* Avec cette ligne de JavaScript, on récupère  */
+/* tous les éléments &lt;a&gt; qui ont un fils direct */
+/* qui est un élément &lt;img&gt; */
+/* Attention, actuellement cette fonction n'est */
+/* pas prise en charge par les navigateurs et   */
+/* n'est pas conçue pour fonctionner dans les   */
+/* feuilles de style */
+var test = document.querySelector('a:has(&gt; img)');</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">:has(<em>liste_selecteurs</em>) {<em> proprietes</em> }</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, le sélecteur permet de cibler uniquement les éléments {{HTMLElement("a")}} qui contiennent un fils direct {{HTMLElement("img")}} :</p>
+
+<pre class="brush: css">a:has(&gt; img)
+</pre>
+
+<p>Le sélecteur qui suit correspond aux éléments {{HTMLElement("h1")}} qui précèdent directement un élément {{HTMLElement("p")}} :</p>
+
+<pre class="brush: css">h1:has(+ p)</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors", "#relational", ":has()")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.has")}}</p>
diff --git a/files/fr/web/css/_colon_host()/index.html b/files/fr/web/css/_colon_host()/index.html
new file mode 100644
index 0000000000..0d8b083548
--- /dev/null
+++ b/files/fr/web/css/_colon_host()/index.html
@@ -0,0 +1,89 @@
+---
+title: ':host()'
+slug: 'Web/CSS/:host()'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:host()'
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction de <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:host()</code></strong> permet de sélectionner l'hôte du <em>shadow DOM</em> contenant le CSS à utiliser, uniquement si le sélecteur passé en argument correspond à l'élément hôte.</p>
+
+<p>Le scénario principal pour utiliser cette fonction consiste à vouloir cibler une certaine classe d'éléments personnalisés : pour cela, on passera la classe comme argument de la fonction <code>:host()</code>. Cette fonction ne peut pas être utilisée avec un sélecteur de descendant, pour cela il faudra utiliser  {{cssxref(":host-context()")}}.</p>
+
+<div class="note">
+<p><strong>Note</strong> : Cette fonction n'a aucun effet si elle est utilisée en dehors d'un <em>shadow DOM</em>.</p>
+</div>
+
+<pre class="brush: css no-line-numbers">/* On cible l'hôte du shadow DOM uniquement s'il
+   correspond au sélecteur passé en argument */
+:host(.special-custom-element) {
+  font-weight: bold;
+}
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Les fragments de code suivants sont extraits du dépôt d'exemple <a href="https://github.com/mdn/web-components-examples/tree/master/host-selectors"><em>host-selectors</em></a><em> </em>(<a href="https://mdn.github.io/web-components-examples/host-selectors/">voir le résultat <em>live</em></a>).</p>
+
+<p>Dans cet exemple, on dispose d'un élément personnalisé,  <code>&lt;context-span&gt;</code>, qui peut contenir du texte :</p>
+
+<pre class="brush: html">&lt;h1&gt;Host selectors &lt;a href="#"&gt;&lt;context-span&gt;example&lt;/context-span&gt;&lt;/a&gt;&lt;/h1&gt;</pre>
+
+<p>Dans le constructeur de l'élément, on crée un élément <code>style</code> et un élément <code>span</code>. Ce dernier recevra le contenu textuel de l'élément personnalisé et l'élément <code>style</code> recevra quelques règles CSS :</p>
+
+<pre class="brush: js">let style = document.createElement('style');
+let span = document.createElement('span');
+span.textContent = this.textContent;
+
+const shadowRoot = this.attachShadow({mode: 'open'});
+shadowRoot.appendChild(style);
+shadowRoot.appendChild(span);
+
+style.textContent = 'span:hover { text-decoration: underline; }' +
+                    ':host-context(h1) { font-style: italic; }' +
+                    ':host-context(h1):after { content: " - no links in headers!" }' +
+                    ':host-context(article, aside) { color: gray; }' +
+                    ':host(.footer) { color : red; }' +
+                    ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }';</pre>
+
+<p>La règle <code>:host(.footer) { color : red; }</code> s'applique à toutes les instances de l'élément <code>&lt;context-span&gt;</code> (il s'agit ici de l'hôte) du document qui possèdent la classe <code>footer</code>. Ici, pour ces éléments donnés, on utilise une couleur spécifique.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Scope', '#host-selector', ':host()')}}</td>
+   <td>{{Spec2('CSS Scope')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.hostfunction")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/Web_Components">Les composants web</a></li>
+ <li>{{cssxref(":host")}}</li>
+ <li>{{cssxref(":host-context()")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_host-context()/index.html b/files/fr/web/css/_colon_host-context()/index.html
new file mode 100644
index 0000000000..36bcacd731
--- /dev/null
+++ b/files/fr/web/css/_colon_host-context()/index.html
@@ -0,0 +1,96 @@
+---
+title: ':host-context()'
+slug: 'Web/CSS/:host-context()'
+tags:
+  - CSS
+  - Experimental
+  - Pseudo-classe
+  - Reference
+  - Web
+translation_of: 'Web/CSS/:host-context()'
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:host-context()</code></strong> est une fonction qui sélectionne l'hôte (<em>shadow host</em>) du <em><a href="/fr/docs/Web/Web_Components/Using_shadow_DOM">shadow DOM</a></em> qui contient le CSS utilisé à l'intérieur, uniquement si le sélecteur fourni en argument correspond à l'ancêtre de l'hôte selon l'arborescence du DOM.</p>
+
+<p>Un cas d'usage fréquent consiste à utilise un sélecteur de descendant — <code>h1</code> par exemple — afin de sélectionner uniquement les instances d'un élément personnalisé (<em>custom element</em>) présentes à l'intérieur d'un élément <code>&lt;h1&gt;</code>.</p>
+
+<div class="note">
+<p><strong>Note</strong> : Cette pseudo-classe n'a aucun effet en dehors d'un <em>shadow DOM</em>.</p>
+</div>
+
+<pre class="brush: css no-line-numbers">/* Cible un hôte uniquement si c'est un descendant
+   du sélecteur passé en argument */
+:host-context(h1) {
+  font-weight: bold;
+}
+
+:host-context(main article) {
+  font-weight: bold;
+}
+
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Les fragments de code suivants sont tirés du dépôt <a href="https://github.com/mdn/web-components-examples/tree/master/host-selectors"><em>host-selectors</em></a> (<a href="https://mdn.github.io/web-components-examples/host-selectors/">voir le résultat <em>live</em></a>).</p>
+
+<p>Dans cet exemple, on dispose d'un élément personnalisé — <code>&lt;context-span&gt;</code> — au sein duquel on peut avoir du texte :</p>
+
+<pre class="brush: html">&lt;h1&gt;Host selectors &lt;a href="#"&gt;&lt;context-span&gt;example&lt;/context-span&gt;&lt;/a&gt;&lt;/h1&gt;</pre>
+
+<p>Dans le constructeur de l'élément, on crée des éléments <code>style</code> et <code>span</code> et on remplit le <code>span</code> avec le contenu de l'élément personnalisé puis on applique certains règles CSS pour l'élément <code>style</code> :</p>
+
+<pre class="brush: js">let style = document.createElement('style');
+let span = document.createElement('span');
+span.textContent = this.textContent;
+
+const shadowRoot = this.attachShadow({mode: 'open'});
+shadowRoot.appendChild(style);
+shadowRoot.appendChild(span);
+
+style.textContent = 'span:hover { text-decoration: underline; }' +
+                    ':host-context(h1) { font-style: italic; }' +
+                    ':host-context(h1):after { content: " - no links in headers!" }' +
+                    ':host-context(article, aside) { color: gray; }' +
+                    ':host(.footer) { color : red; }' +
+                    ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }';</pre>
+
+<p>Les règles <code>:host-context(h1) { font-style: italic; }</code> et <code>:host-context(h1):after { content: " - no links in headers!" }</code> permettent de mettre en forme l'instance de l'élément <code>&lt;context-span&gt;</code> (l'hôte de cette instance) à l'intérieur de l'élément <code>&lt;h1&gt;</code>. Nous avons utilisé cet hôte afin d'indiquer clairement qu'un tel élément personnalisé ne doit pas apparaître dans un titre <code>&lt;h1&gt;</code>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Scope', '#host-selector', ':host-context()')}}</td>
+   <td>{{Spec2('CSS Scope')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.host-context")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/Web_Components">Les composants web</a></li>
+ <li>{{cssxref(":host")}}</li>
+ <li>{{cssxref(":host()")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_host/index.html b/files/fr/web/css/_colon_host/index.html
new file mode 100644
index 0000000000..c82bb211e4
--- /dev/null
+++ b/files/fr/web/css/_colon_host/index.html
@@ -0,0 +1,86 @@
+---
+title: ':host'
+slug: 'Web/CSS/:host'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:host'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:host</code></strong> permet de cibler l'hôte d'un <em><a href="/fr/docs/Web/Web_Components/Using_shadow_DOM">shadow DOM</a></em> contenant le CSS à utiliser pour cet hôte. Autrement dit, elle permet de sélectionner un élément personnalisé (<em>custom element</em>) depuis l'intérieur du <em>shadow DOM</em>.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Cette pseudo-classe n'a aucun effet lorsqu'elle est utilisée à l'extérieur d'un <em>shadow DOM</em>.</p>
+</div>
+
+<pre class="brush: css no-line-numbers">/* Cible la racine d'un hôte de shadow DOM */
+:host {
+  font-weight: bold;
+}
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Les fragments de code qui suivent sont extraits du dépôt d'exemple <a href="https://github.com/mdn/web-components-examples/tree/master/host-selectors"><em>host-selectors</em></a> (<a href="https://mdn.github.io/web-components-examples/host-selectors/">voir le résultat <em>live</em></a>).</p>
+
+<p>Dans cet exemple, on dispose d'un élément personnalisé <code>&lt;context-span&gt;</code>  qui peut contenir du texte :</p>
+
+<pre class="brush: html">&lt;h1&gt;Host selectors &lt;a href="#"&gt;&lt;context-span&gt;example&lt;/context-span&gt;&lt;/a&gt;&lt;/h1&gt;</pre>
+
+<p>Pour le constructeur de cet élément, on crée des éléments <code>style</code> et <code>span</code> : l'élément <code>span</code> recevra le contenu de l'élément personnalisé et <code>style</code> recevra quelques règles CSS :</p>
+
+<pre class="brush: js">let style = document.createElement('style');
+let span = document.createElement('span');
+span.textContent = this.textContent;
+
+const shadowRoot = this.attachShadow({mode: 'open'});
+shadowRoot.appendChild(style);
+shadowRoot.appendChild(span);
+
+style.textContent = 'span:hover { text-decoration: underline; }' +
+                    ':host-context(h1) { font-style: italic; }' +
+                    ':host-context(h1):after { content: " - no links in headers!" }' +
+                    ':host-context(article, aside) { color: gray; }' +
+                    ':host(.footer) { color : red; }' +
+                    ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }';</pre>
+
+<p>La règle <code>:host { background: rgba(0,0,0,0.1); padding: 2px 5px; }</code> permet de cibler l'ensemble des instances de <code>&lt;context-span&gt;</code> (qui est l'hôte ici) dans le document.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Scope', '#host-selector', ':host')}}</td>
+   <td>{{Spec2('CSS Scope')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.host")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/Web_Components">Les composants web</a></li>
+ <li>{{cssxref(":host()")}}</li>
+ <li>{{cssxref(":host-context()")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_hover/index.html b/files/fr/web/css/_colon_hover/index.html
new file mode 100644
index 0000000000..93419ae333
--- /dev/null
+++ b/files/fr/web/css/_colon_hover/index.html
@@ -0,0 +1,97 @@
+---
+title: ':hover'
+slug: 'Web/CSS/:hover'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:hover'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:hover</code></strong> permet de spécifier l'apparence d'un élément au moment où l'utilisateur le survole avec le pointeur, sans nécessairement l'activer.</p>
+
+<pre class="brush: css no-line-numbers">/* Cible n'importe quel élément &lt;a&gt; lorsque  */
+/* celui-ci est survolé */
+a:hover {
+  background-color: gold;
+}</pre>
+
+<p>La mise en forme ciblée par cette pseudo-classe peut être surchargée par d'autres pseudo-classes relatives aux liens hypertextes comme {{cssxref(":link")}}, {{cssxref(":visited")}}, et {{cssxref(":active")}}, apparaissant dans des règles subséquentes. Pour décorer les liens sans effet de bord problématique, on placera la règle <code>:hover</code> après les règles <code>:link</code> et <code>:visited</code> mais avant la règle <code>:active</code> (l'ordre est  <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code> – un moyen mnémotechnique est de se souvenir des initiales LVHA) tandis que l'ordre de la règle {{cssxref(":focus")}} est indifférent.</p>
+
+<p>La pseudo-classe <code>:hover</code> peut être appliquée à n'importe quel <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-élément</a>. {{experimental_inline}}</p>
+
+<div class="note"><strong>Note d'utilisation :</strong> sur les écrans tactiles, <code>:hover</code> est problématique voire impossible. La pseudo-classe <code>:hover</code> n'est jamais valide, ou seulement pendant un très court instant après avoir touché l'élément. Puisque les appareils à écrans tactiles sont très courants, il est important que les développeurs web ne placent pas de contenu accessible seulement lors du survol, puisque ce contenu sera caché pour les utilisateurs de tels appareils.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">a:hover {
+  background-color: gold;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  &lt;a href="#"&gt;Ce lien sera écrit sur un fond doré lors du survol.&lt;/a&gt;
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> On peut utiliser la pseudo-classe <code>:checked</code> dans une galerie d'images afin d'afficher une version agrandie de l'image lorsqu'on survole la vignette.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Commentaires</th>
+   <th scope="col">Retours</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'scripting.html#selector-hover', ':hover')}}</td>
+   <td> </td>
+   <td><a href="https://github.com/whatwg/html/issues"><em>Issues</em> GitHub du WHATWG HTML (en anglais)</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#the-hover-pseudo', ':hover')}}</td>
+   <td>Permet d'appliquer <code>:hover</code> à n'importe quel pseudo-élément.</td>
+   <td><a href="https://github.com/w3c/csswg-drafts/issues">Issues GitHub pour les brouillons du groupe de travail CSS (en anglais)</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover')}}</td>
+   <td> </td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover')}}</td>
+   <td>Définition initiale.</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.hover")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://code.google.com/p/chromium/issues/detail?id=370155">Bogue Chromium #370155 : Don't make :hover sticky on tap on sites that set a mobile viewport</a></li>
+ <li><a href="https://code.google.com/p/chromium/issues/detail?id=306581">Bogue Chromium #306581 : Immediately show hover and active states on touch when page isn't scrollable</a></li>
+</ul>
diff --git a/files/fr/web/css/_colon_in-range/index.html b/files/fr/web/css/_colon_in-range/index.html
new file mode 100644
index 0000000000..3e5e8ff1b4
--- /dev/null
+++ b/files/fr/web/css/_colon_in-range/index.html
@@ -0,0 +1,106 @@
+---
+title: ':in-range'
+slug: 'Web/CSS/:in-range'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:in-range'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:in-range</code></strong> cible un élément {{htmlelement("input")}} lorsque sa valeur courante est comprise dans l'intervalle défini par les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max","input")}}.</p>
+
+<pre class="brush: css no-line-numbers">/* Cible n'importe quel élément &lt;input&gt;   */
+/* qui possède un intervalle et pour le-  */
+/* quel la valeur est dans cet intervalle */
+input:in-range {
+  background-color: rgba(0, 255, 0, 0.25);
+}</pre>
+
+<p>Cette pseudo-classe s'avère utile lorsqu'on souhaite fournir une indication visuelle quand la valeur est en dehors de la fourchette autorisée.</p>
+
+<div class="note"><strong>Note :</strong> Cette pseudo-classe ne s'applique qu'aux éléments qui ont des limites de valeurs (autrement dit la valeur doit être comprise dans un intervalle donné). Sans ces limitations, l'élément ne pourra pas être vu comme <em>dans l'intervalle</em> ou <em>en dehors de l'intervalle</em>.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight:[5]">li {
+  list-style: none;
+  margin-bottom: 1em;
+}
+input {
+  border: 1px solid black;
+}
+input:in-range {
+  background-color: rgba(0, 255, 0, 0.25);
+}
+input:out-of-range {
+  background-color: rgba(255, 0, 0, 0.25);
+  border: 2px solid red;
+}
+input:in-range + label::after {
+  content:' OK';
+}
+input:out-of-range + label::after {
+  content:' non autorisée !';
+}</pre>
+
+<div id="example">
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html; highlight:[3]">&lt;form action="" id="form1"&gt;
+  &lt;ul&gt;Les valeurs entre 1 et 10 sont valides.
+    &lt;li&gt;
+      &lt;input id="valeur1" name="valeur1" type="number" placeholder="de 1 à 10" min="1" max="10" value="12"&gt;
+      &lt;label for="valeur1"&gt;Votre valeur est &lt;/label&gt;
+    &lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+</div>
+
+<div>{{EmbedLiveSample('Exemples',600,140)}}</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Etat</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'scripting.html#selector-in-range', ':in-range')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Définition de la correspondance entre <code>:in-range</code> et les éléments HTML.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#in-range-pseudo', ':in-range')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.in-range")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":out-of-range")}}</li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">Guide de validation pour les données de formulaire</a></li>
+</ul>
diff --git a/files/fr/web/css/_colon_indeterminate/index.html b/files/fr/web/css/_colon_indeterminate/index.html
new file mode 100644
index 0000000000..5ebd9cd85e
--- /dev/null
+++ b/files/fr/web/css/_colon_indeterminate/index.html
@@ -0,0 +1,127 @@
+---
+title: ':indeterminate'
+slug: 'Web/CSS/:indeterminate'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:indeterminate'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:indeterminate</code></strong> permet de cibler un élément de formulaire dont l'état est indéterminé.</p>
+
+<pre class="brush: css no-line-numbers">/* Cible n'importe quel élément &lt;input&gt; */
+/* dans un état indéterminé */
+input:indeterminate {
+  background: lime;
+}</pre>
+
+<p>Cela inclut :</p>
+
+<ul>
+ <li>un élément <code><a href="/fr/docs/Web/HTML/Element/input/checkbox">&lt;input type="checkbox"&gt;</a></code> dont la propriété du DOM <code>indeterminate</code> est fixée à <code>true</code> via du code JavaScript</li>
+ <li>des éléments <code><a href="/fr/docs/Web/HTML/Element/input/radio">&lt;input type="radio"&gt;</a></code> dont tous les boutons radio du groupe sont décochés</li>
+ <li>des éléments {{HTMLElement("progress")}} dans un état indéterminé.</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Case_à_cocher_et_bouton_radio">Case à cocher et bouton radio</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css; hightlight[5]">input, span {
+  background: red;
+}
+
+:indeterminate, :indeterminate + label {
+  background: lime;
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;input type="checkbox" id="checkbox"&gt;
+  &lt;label for="checkbox"&gt;L'arrière-plan devrait être vert.&lt;/label&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;input type="radio" id="radio"&gt;
+  &lt;label for="radio"&gt;L'arrière-plan devrait être vert.&lt;/label&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">var inputs = document.getElementsByTagName("input");
+for(var i = 0; i &lt; inputs.length; i++) {
+  inputs[i].indeterminate = true;
+}
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Case_à_cocher_et_bouton_radio', '100%', 50)}}</p>
+
+<h3 id="Élément_progress">Élément <code>progress</code></h3>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css; hightlight[5]">progress:indeterminate {
+  opacity: 0.5;
+  box-shadow: 0 0 2px 1px red;
+}
+</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;progress/&gt;
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample('Élément_progress', '100%', 30)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#selector-indeterminate', ':indeterminate')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#selector-indeterminate', ':indeterminate')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Définition de la sémantique relative à HTML et des contraintes de validation associées.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#indeterminate', ':indeterminate')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#indeterminate', ':indeterminate')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Définition de la pseudo-classe, sans notion de sémantique associée.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.indeterminate")}}</p>
diff --git a/files/fr/web/css/_colon_invalid/index.html b/files/fr/web/css/_colon_invalid/index.html
new file mode 100644
index 0000000000..6b571b7d18
--- /dev/null
+++ b/files/fr/web/css/_colon_invalid/index.html
@@ -0,0 +1,163 @@
+---
+title: ':invalid'
+slug: 'Web/CSS/:invalid'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:invalid'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:invalid</code></strong> cible tout élément {{HTMLElement("input")}} pour lequel <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation" title="en/HTML/HTML5/Constraint_validation">la validation</a> du contenu échoue par rapport au type de donnée attendu. Ceci permet de mettre en forme les champs non valides pour aider l'utilisateur à identifier et à corriger les erreurs.</p>
+
+<pre class="brush: css no-line-numbers">/* Cible n'importe quel élément input  */
+/* dont la valeur ne satisfait pas aux */
+/* critères de validation */
+input:invalid {
+  background-color: pink;
+}</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Cet exemple présente un formulaire simple dont les éléments sont verts lors qu'ils sont valides et rouges lorsqu'ils ne le sont pas.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">label {
+  display: block;
+  margin: 1px;
+  padding: 1px;
+}
+
+.field {
+  margin: 1px;
+  padding: 1px;
+}
+
+input:invalid {
+  background-color: #ffdddd;
+}
+
+form:invalid {
+  border: 5px solid #ffdddd;
+}
+
+input:valid {
+  background-color: #ddffdd;
+}
+
+form:valid {
+  border: 5px solid #ddffdd;
+}
+
+input:required {
+  border-color: #800000;
+  border-width: 3px;
+}
+
+input:required:invalid {
+  border-color: #c00000;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div class="field"&gt;
+    &lt;label for="url_input"&gt;Veuillez saisir une URL :&lt;/label&gt;
+    &lt;input type="url" id="url_input"&gt;
+  &lt;/div&gt;
+
+  &lt;div class="field"&gt;
+    &lt;label for="email_input"&gt;Veuillez saisir une adresse électronique :&lt;/label&gt;
+    &lt;input type="email" id="email_input" required&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemple','600',120)}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>La couleur rouge est généralement utilisée afin d'indiquer une valeur invalide. Les personnes ayant du mal à différencier les couleurs ne seront pas capables de déterminer la validité du champ si celui-ci n'est pas accompagné d'un indicateur qui n'est pas basé sur une couleur. Pour résoudre ce problème, on pourra utiliser un texte indicatif et/ou une icône.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Explications des recommendations WCAG 1.4</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" rel="noopener">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Notes">Notes</h2>
+
+<h3 id="Boutons_radio">Boutons radio</h3>
+
+<p>Si un quelconque bouton radio dans un groupe (c'est-à-dire, avec la même valeur pour leur attribut <code>name</code>) possède l'attribut <code>required</code> , la pseudo-classe <code>:invalid</code> est appliquée à tous les boutons si aucun d'entre eux n'est sélectionné.</p>
+
+<h3 id="Gestion_dans_Gecko">Gestion dans Gecko</h3>
+
+<p>Par défaut, Gecko n'applique pas de style particulier à la pseudo-classe <code>:invalid</code> . Toutefois un style différent est appliqué (un halo rouge utilisant la propriété {{cssxref("box-shadow")}}) via la pseudo-classe {{cssxref(":-moz-ui-invalid")}}, qui s'applique dans un sous-ensemble des cas de <code>:invalid</code>.</p>
+
+<p>Ce halo peut être désactivé avec les règles suivantes :</p>
+
+<pre class="brush: css">:invalid {
+  box-shadow: none;
+}
+
+:-moz-submit-invalid {
+  box-shadow: none;
+}
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#selector-invalid', ':invalid')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#selector-invalid', ':invalid')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Définition de la sémantique relative à HTML et aux contraintes de validation.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#validity-pseudos', ':invalid')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.invalid")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":valid")}}</li>
+ <li>{{cssxref(":-moz-submit-invalid")}} et {{cssxref(":-moz-ui-invalid")}}</li>
+ <li>{{cssxref(":required")}}</li>
+ <li>{{cssxref(":optional")}}</li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">La validation des données d'un formulaire</a></li>
+ <li><a href="/fr/docs/Web/API/ValidityState">Accéder à l'état de validité en JavaScript</a></li>
+</ul>
diff --git a/files/fr/web/css/_colon_is/index.html b/files/fr/web/css/_colon_is/index.html
new file mode 100644
index 0000000000..0e30e8c34a
--- /dev/null
+++ b/files/fr/web/css/_colon_is/index.html
@@ -0,0 +1,283 @@
+---
+title: ':is() (:matches(), :any())'
+slug: 'Web/CSS/:is'
+tags:
+  - CSS
+  - Experimental
+  - Pseudo-classe
+  - Reference
+  - Web
+translation_of: 'Web/CSS/:is'
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:is()</code></strong> prend comme argument une liste de sélecteurs, et cible tous les éléments sélectionnés par chaque sélecteur de cette liste. Cela permet d'écrire des sélecteurs expansifs de façon plus concise.</p>
+
+<p>La plupart des navigateurs prennent encore en charge cette fonctionnalité via <code>:matches()</code>, ou via la pseudo-classe préfixée — <code>:any()</code> (anciennes versions de Chrome, Firefox et Safari). <code>:any()</code> fonctionne exactement comme <code>:matches()</code> et <code>:is()</code> mais nécessite l'utilisation de préfixes et ne prend pas en charge <a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/Les_sélecteurs">les sélecteurs complexes</a>.</p>
+
+<div class="note">
+<p><strong>Note :</strong> <code>:matches()</code> a été renommé en <code>is()</code> d'après <a href="https://github.com/w3c/csswg-drafts/issues/3258">l'<em>issue</em> 3258 du CSSWG</a>.</p>
+</div>
+
+<pre class="brush: css no-line-numbers">/* Sélectionne n'importe quel paragraphe survolé
+   qui se trouve au sein d'un header, main, ou
+   footer */
+:is(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+/* La notation précédente est équivalente à */
+header p:hover,
+main p:hover,
+footer p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+
+/* La version rétro-compatible avec :-*-any()  */
+:-moz-any(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+:-webkit-any(header, main, footer) p:hover{
+  color: red;
+  cursor: pointer;
+}
+:matches(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_fonctionnant_pour_les_différents_navigateurs">Exemple fonctionnant pour les différents navigateurs</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;header&gt;
+  &lt;p&gt;Voici un paragraphe dans un en-tête.&lt;/p&gt;
+&lt;/header&gt;
+
+&lt;main&gt;
+  &lt;ul&gt;
+    &lt;li&gt;&lt;p&gt;Mon premier élément de&lt;/p&gt;&lt;p&gt;liste&lt;/p&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;p&gt;Mon deuxième élément de&lt;/p&gt;&lt;p&gt;liste&lt;/p&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/main&gt;
+
+&lt;footer&gt;
+  &lt;p&gt;Et un paragraphe de pied de page&lt;/p&gt;
+&lt;/footer&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">:-webkit-any(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+:-moz-any(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+:is(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">let matchedItems;
+
+try {
+  matchedItems = document.querySelectorAll(':is(header, main, footer) p');
+} catch(e) {
+  try {
+    matchedItems = document.querySelectorAll(':matches(header, main, footer) p');
+  } catch(e) {
+    try {
+      matchedItems = document.querySelectorAll(':-webkit-any(header, main, footer) p');
+    } catch(e) {
+      try {
+        matchedItems = document.querySelectorAll(':-moz-any(header, main, footer) p');
+      } catch(e) {
+        console.log('Votre navigateur ne prend pas en charge :is(), :matches() ou :any()');
+      }
+    }
+  }
+}
+
+for(let i = 0; i &lt; matchedItems.length; i++) {
+  applyHandler(matchedItems[i]);
+}
+
+function applyHandler(elem) {
+  elem.addEventListener('click', function(e) {
+    alert('Ce paragraphe est à l\'intérieur d\'un élément ' + e.target.parentNode.nodeName);
+  });
+}</pre>
+
+<p>{{EmbedLiveSample('Exemple_fonctionnant_pour_les_différents_navigateurs', '100%', '300')}}</p>
+
+<h3 id="Simplifier_les_listes_de_sélecteurs">Simplifier les listes de sélecteurs</h3>
+
+<p>La pseudo-classe <code>:matches()</code> permet de simplifier largement les sélecteurs CSS. Ainsi, la règle suivante :</p>
+
+<pre class="brush: css">/* les listes non ordonnées sur 3 niveaux ou plus */
+/* utilisent un carré comme puce */
+ol ol ul,     ol ul ul,     ol menu ul,     ol dir ul,
+ol ol menu,   ol ul menu,   ol menu menu,   ol dir menu,
+ol ol dir,    ol ul dir,    ol menu dir,    ol dir dir,
+ul ol ul,     ul ul ul,     ul menu ul,     ul dir ul,
+ul ol menu,   ul ul menu,   ul menu menu,   ul dir menu,
+ul ol dir,    ul ul dir,    ul menu dir,    ul dir dir,
+menu ol ul,   menu ul ul,   menu menu ul,   menu dir ul,
+menu ol menu, menu ul menu, menu menu menu, menu dir menu,
+menu ol dir,  menu ul dir,  menu menu dir,  menu dir dir,
+dir ol ul,    dir ul ul,    dir menu ul,    dir dir ul,
+dir ol menu,  dir ul menu,  dir menu menu,  dir dir menu,
+dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {
+  list-style-type: square;
+}
+</pre>
+
+<p>pourra être remplacée par :</p>
+
+<pre class="brush: css">/* les listes non ordonnées sur 3 niveaux ou plus */
+/* utilisent un carré comme puce */
+:matches(ol, ul, menu, dir) :matches(ol, ul, menu, dir) ul,
+:matches(ol, ul, menu, dir) :matches(ol, ul, menu, dir) menu,
+:matches(ol, ul, menu, dir) :matches(ol, ul, menu, dir) dir {
+  list-style-type: square;
+}</pre>
+
+<p>En revanche, le modèle d'usage suivant n'est pas recommandée (cf. <a href="#Issues_with_performance_and_specificity">la section qui suit sur les performances</a>) :</p>
+
+<pre class="brush: css">:matches(ol, ul, menu, dir) :matches(ol, ul, menu, dir) :matches(ul, menu, dir) {
+  list-style-type: square;
+}</pre>
+
+<h3 id="Notes" name="Notes">Simplifier les sélecteurs de section</h3>
+
+<p>La pseudo-classe <code>:matches</code> est particulièrement utile lorsqu'on manipule les <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">sections et en-têtes</a> HTML5. {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}} et {{HTMLElement("nav")}} étant souvent imbriqués les uns dans les autres, les mettre en forme (sans <code>:matches()</code>) s'avèrerait plutôt compliqué.</p>
+
+<p>Par exemple, pour mettre en forme les éléments {{HTMLElement("h1")}} à différents niveaux sans utiliser <code>:matches()</code>, on obtient ces règles plutôt compliquées :</p>
+
+<pre class="brush: css">/* Niveau 0 */
+h1 {
+  font-size: 30px;
+}
+/* Niveau 1 */
+section h1, article h1, aside h1, nav h1 {
+  font-size: 25px;
+}
+/* Niveau 2 */
+section section h1, section article h1, section aside h1, section nav h1,
+article section h1, article article h1, article aside h1, article nav h1,
+aside section h1, aside article h1, aside aside h1, aside nav h1,
+nav section h1, nav article h1, nav aside h1, nav nav h1 {
+  font-size: 20px;
+}
+/* Niveau 3 */
+/* … j'ai abandonné */
+</pre>
+
+<p>Avec <code>:is()</code>, c'est plus simple :</p>
+
+<pre class="brush: css">/* Niveau 0 */
+h1 {
+  font-size: 30px;
+}
+/* Niveau 1 */
+:is(section, article, aside, nav) h1 {
+  font-size: 25px;
+}
+/* Niveau 2 */
+:is(section, article, aside, nav)
+:is(section, article, aside, nav) h1 {
+  font-size: 20px;
+}
+/* Niveau 3 */
+:is(section, article, aside, nav)
+:is(section, article, aside, nav)
+:is(section, article, aside, nav) h1 {
+  font-size: 15px;
+}</pre>
+
+<h3 id="Éviter_linvalidation_dune_liste_de_sélecteur">Éviter l'invalidation d'une liste de sélecteur</h3>
+
+<p>À la différence des listes de sélecteurs, la pseudo-classe <code>:is()</code> ne devient pas invalide lorsqu'un des sélecteurs passés en argument n'est pas pris en charge par le navigateur.</p>
+
+<pre class="brush: css">:is(:valid, :incompatible) {
+  ...
+}
+</pre>
+
+<p>Le sélecteur ci-dessus sera analysé sans problème et permettra de cibler <code>:valid</code> même si les navigateurs ne prennent pas en charge le sélecteur <code>:incompatible</code>. En revanche :</p>
+
+<pre class="brush: css">:valid, :incompatible {
+  ...
+}</pre>
+
+<p>L'exemple ci-dessus ne sera pas appliqué par les navigateurs qui ne prennent pas en charge <code>:incompatible</code>, même si <code>:valid</code> est bien pris en charge.</p>
+
+<h2 id="Notes_2">Notes</h2>
+
+<h3 id="Issues_with_performance_and_specificity" name="Issues_with_performance_and_specificity">Problèmes de performances avec <code>any():</code> et la spécificité</h3>
+
+<p>{{Bug(561154)}} suit un problème de spécificité relatif à <code>:-moz-any()</code>. L'implémentation  place <code>:-moz-any()</code> dans la catégorie des règles universelles, ce qui signifie que si on l'utilise comme sélecteur le plus à droite, ce sera plus lent que d'utiliser un sélecteur d'identifiant, de classe ou de balise comme premier sélecteur.</p>
+
+<p>Ainsi :</p>
+
+<pre class="brush: css">.a &gt; :-moz-any(.b, .c)
+</pre>
+
+<p>sera plus lent que</p>
+
+<pre class="brush: css">.a &gt; .b, .a &gt; .c
+</pre>
+
+<p>et cette dernière version sera plus rapide :</p>
+
+<pre class="brush: css">:-moz-any(.a, .d) &gt; .b, :-moz-any(.a, .d) &gt; .c</pre>
+
+<p><code>:is()</code> doit permettre de corriger de tels problèmes.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors", "#matches-pseudo", ":is()")}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.is")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{CSSxRef(":where", ":where()")}} {{Experimental_Inline}} - se comporte comme <code>is()</code>, avec une spécificité nulle</li>
+ <li><a href="/fr/docs/Web/Web_Components">Les composants web</a></li>
+</ul>
diff --git a/files/fr/web/css/_colon_lang/index.html b/files/fr/web/css/_colon_lang/index.html
new file mode 100644
index 0000000000..0d4b2d406a
--- /dev/null
+++ b/files/fr/web/css/_colon_lang/index.html
@@ -0,0 +1,133 @@
+---
+title: ':lang'
+slug: 'Web/CSS/:lang'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:lang'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <code><strong>:lang</strong></code> permet de définir la mise en forme d'un élément selon la langue dans laquelle il est écrit.</p>
+
+<pre class="brush: css no-line-numbers">/* Correspond aux paragraphes, uniquement si ceux-ci */
+/* sont indiqués comme étant en anglais (en) */
+p:lang(en) {
+  quotes: '\201C' '\201D' '\2018' '\2019';
+}</pre>
+
+<div class="note">
+<p><strong>Note :</strong> En HTML, la langue d'un élément est déterminée par l'attribut {{htmlattrxref("lang")}}, l'élément {{HTMLElement("meta")}} et d'autres informations comme les en-têtes HTTP ; pour les autres types de documents, d'autres méthodes peuvent être utilisées.</p>
+
+<p>Les chaînes de caractères admissibles pour définir des langues sont définies dans la spécification HTML 4.0.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h3 id="Paramètre">Paramètre</h3>
+
+<dl>
+ <dt><code>language-code</code></dt>
+ <dd>La chaîne de caractères ({{cssxref("&lt;string&gt;")}}) qui définit la langue des éléments qu'on veut sélectionner.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, la pseudo-classe <code>:lang</code> est utilisée pour faire correspondre le parent d'une citation en utilisant {{cssxref(":first-child")}}. Il ne s'agit pas de la seule solution pour ce type de problème, ni même de la meilleure (qui dépendra du type de document). Les valeurs Unicode sont utilisées pour certains caractères spéciaux de citation.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">:lang(fr) &gt; Q {
+  quotes: '« ' ' »';
+}
+
+:lang(de) &gt; Q {
+  quotes: '»' '«' '\2039' '\203A';
+}
+
+:lang(en) &gt; Q {
+  quotes: '\201C' '\201D' '\2018' '\2019';
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div lang="fr"&gt;
+  &lt;q&gt;
+    Cette citation française a
+      &lt;q&gt;une citation&lt;/q&gt;
+    imbriquée.
+  &lt;/q&gt;
+&lt;/div&gt;
+
+&lt;div lang="de"&gt;
+  &lt;q&gt;
+    Cette citation allemande a
+      &lt;q&gt;une citation&lt;/q&gt;
+    imbriquée.
+  &lt;/q&gt;
+&lt;/div&gt;
+
+&lt;div lang="en"&gt;
+  &lt;q&gt;
+    Cette citation anglaise a
+      &lt;q&gt;une citation&lt;/q&gt;
+    imbriquée.
+  &lt;/q&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemple', '350')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#lang-pseudo', ':lang()')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Ajout du <em>joker</em> pour correspondre à toutes les langues. Ajout des listes de langues séparées par des virgules.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#lang-pseudo', ':lang()')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Aucune modification significative.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#lang', ':lang()')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.lang")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":dir")}}</li>
+ <li>L'attribut HTML {{htmlattrxref("lang")}}</li>
+ <li><a href="/fr/docs/Web/API/HTMLElement/lang">Propriété <code>lang</code> du DOM</a></li>
+ <li><a href="https://www.w3.org/TR/REC-html40/struct/dirlang.html#h-8.1.1">Les codes de langues selon W3C HTML4 (en anglais)</a></li>
+ <li><a href="https://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-59132807">L'attribut <code>lang</code> selon W3C DOM Level 2 HTML (en anglais)</a></li>
+ <li><a href="https://tools.ietf.org/html/bcp47">Les codes de langues BCP 47</a></li>
+</ul>
diff --git a/files/fr/web/css/_colon_last-child/index.html b/files/fr/web/css/_colon_last-child/index.html
new file mode 100644
index 0000000000..a8ef3b516b
--- /dev/null
+++ b/files/fr/web/css/_colon_last-child/index.html
@@ -0,0 +1,87 @@
+---
+title: ':last-child'
+slug: 'Web/CSS/:last-child'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:last-child'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:last-child</code></strong> permet de cibler un élément qui est le dernier enfant de son parent.</p>
+
+<pre class="brush: css no-line-numbers">/* Cible n'importe quel élément &lt;li&gt; tant que    */
+/* celui-ci est le dernier enfant de son élément */
+/* parent */
+li:last-child {
+  background-color: lime;
+}</pre>
+
+<div class="note">
+<p><strong>Note :</strong> En CSS3, l'élément ciblé devait avoir un élément parent, cette restriction a été levée en CSS4.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">li:last-child {
+  background-color: lime;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul&gt;
+   &lt;li&gt;Cet élément n'est pas vert !&lt;/li&gt;
+   &lt;li&gt;Celui-ci est vert.&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '100%', 100)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#last-child', ':last-child')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Il n'est plus obligatoire que l'élément ciblé ait un parent.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#last-child', ':last-child')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.last-child")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":first-child")}}</li>
+ <li>{{cssxref(":nth-child")}}</li>
+ <li>{{cssxref(":last-of-type")}}</li>
+ <li>{{CSSxRef(":-moz-last-node")}} {{Non-standard_Inline}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_last-of-type/index.html b/files/fr/web/css/_colon_last-of-type/index.html
new file mode 100644
index 0000000000..618d0fa6a4
--- /dev/null
+++ b/files/fr/web/css/_colon_last-of-type/index.html
@@ -0,0 +1,102 @@
+---
+title: ':last-of-type'
+slug: 'Web/CSS/:last-of-type'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:last-of-type'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:last-of-type</code></strong> cible un élément qui est le dernier enfant d'un type donné dans la liste des enfants de l'élément parent.</p>
+
+<pre class="brush: css no-line-numbers">/* Cible n'importe quel paragraphe qui est     */
+/* le dernier paragraphe de son élément parent */
+p:last-of-type {
+  color: lime;
+}</pre>
+
+<div class="note">
+<p><strong>Note : </strong>Dans la version initiale de la spécification (CSS3), l'élément ciblé devait avoir un parent, ce n'est plus nécessaire depuis (spécification pour les sélecteurs de CSS4).</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Pour cibler le dernier élément {{HTMLElement("em")}} au sein d'un élément {{HTMLElement("p")}}, on pourra utiliser la règle qui suit (illustrée ensuite sur un fragment HTML).</p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p em:last-of-type {
+  color: lime;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  &lt;em&gt;Je ne suis pas vert :(&lt;/em&gt;
+  &lt;strong&gt;Je ne suis pas vert :(&lt;/strong&gt;
+  &lt;em&gt;Je suis vert :D&lt;/em&gt;
+  &lt;strong&gt;Je ne suis pas vert non plus :(&lt;/strong&gt;
+&lt;/p&gt;
+
+&lt;p&gt;
+  &lt;em&gt;Je ne suis pas vert :(&lt;/em&gt;
+  &lt;span&gt;
+    &lt;em&gt;Je suis vert !&lt;/em&gt;
+  &lt;/span&gt;
+  &lt;strong&gt;Je ne suis pas vert :(&lt;/strong&gt;
+  &lt;em&gt;Je suis vert :D&lt;/em&gt;
+  &lt;span&gt;
+    &lt;em&gt;Je suis aussi vert !&lt;/em&gt;
+    &lt;strike&gt;Je ne suis pas vert&lt;/strike&gt;
+  &lt;/span&gt;
+  &lt;strong&gt;Je ne suis pas vert non plus :(&lt;/strong&gt;
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<div>{{EmbedLiveSample('Exemples','100%', '120')}}</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#last-of-type-pseudo', ':last-of-type')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>L'élément ciblé ne doit pas nécessairement avoir un élément parent.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#last-of-type-pseudo', ':last-of-type')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.last-of-type")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":nth-last-of-type")}}</li>
+ <li>{{cssxref(":first-of-type")}}</li>
+ <li>{{cssxref(":last-child")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_left/index.html b/files/fr/web/css/_colon_left/index.html
new file mode 100644
index 0000000000..9af8051ca3
--- /dev/null
+++ b/files/fr/web/css/_colon_left/index.html
@@ -0,0 +1,72 @@
+---
+title: ':left'
+slug: 'Web/CSS/:left'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+  - Web
+translation_of: 'Web/CSS/:left'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <code><strong>:left</strong></code>, liée à la règle {{cssxref("@page")}}, permet de cibler les pages de gauche lors d'une impression. Ceci permet de mettre en forme spécifiquement les pages de gauche.</p>
+
+<pre class="brush: css no-line-numbers">/* Sélectionne le contenu des pages gauches */
+/* lors de l'impression */
+@page :left {
+  margin: 2in 3in;
+}</pre>
+
+<p>La position de la page soit à gauche ou à droite dépend de la direction d'écriture globale du document. Par exemple, si la première page est selon la direction « gauche à droite » alors elle sera une page {{cssxref(":right")}}, si elle est définie de « droite à gauche » ce sera une page <code>:left</code>.</p>
+
+<div class="note"><strong>Note :</strong> Il n'est pas possible de changer toutes les propriétés CSS. Seules les propriétés {{cssxref("margin")}}, {{cssxref("padding")}}, {{cssxref("border")}} et {{cssxref("background")}} de <strong>la boîte correspondant à la page</strong> peuvent être modifiées. Toutes les autres propriétés CSS seront ignorées. Seule la boîte correspondant à la page pourra être affectée, le contenu du document ne pourra pas être modifié.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">@page :left {
+  margin: 2cm 3cm;
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Paged Media', '#left-right-first', ':left')}}</td>
+   <td>{{Spec2('CSS3 Paged Media')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'page.html#page-selectors', ':left')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.left")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("@page")}}</li>
+ <li>{{cssxref(":first")}}</li>
+ <li>{{cssxref(":right")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_link/index.html b/files/fr/web/css/_colon_link/index.html
new file mode 100644
index 0000000000..9d1f128702
--- /dev/null
+++ b/files/fr/web/css/_colon_link/index.html
@@ -0,0 +1,112 @@
+---
+title: ':link'
+slug: 'Web/CSS/:link'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:link'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:link</code></strong> permet de sélectionner les liens à l'intérieur d'éléments. Elle sélectionnera tout lien n'ayant pas été visité, même ceux qui seraient déjà mis en forme via des sélecteurs utilisant d'autres pseudo-classes comme {{cssxref(":hover")}}, {{cssxref(":active")}} ou {{cssxref(":visited")}}.</p>
+
+<pre class="brush: css no-line-numbers">/* Cible les liens qui n'ont pas encore */
+/* été visités */
+a:link {
+  color: red;
+}</pre>
+
+<p>Afin que la mise en forme s'applique au mieux, la règle <code>:link</code> doit être placée avant les autres : <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>. La pseudo-classe {{cssxref(":focus")}} est habituellement placée juste avant ou juste après <code>:hover</code>, en fonction de l'effet désiré.</p>
+
+<div class="note">
+<p><strong>Note :</strong> On utilisera {{cssxref("any-link")}} pour sélectionner un élément qu'il ait été visité ou non.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">a:link {
+  color: red;
+}
+
+.external:link {
+  background-color: lightblue;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Et si on allait voir
+  &lt;a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/"&gt;
+  un peu de JavaScript ?
+  &lt;/a&gt;
+&lt;/p&gt;
+&lt;p&gt;Sinon, on peut continuer à se cultiver sur CSS autre part
+  &lt;a class="external" href="https://css-tricks.com/"&gt;
+  comme CSS Tricks.
+  &lt;/a&gt;
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","200")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'scripting.html#selector-link', ':link')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#link', ':link')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#link', ':link')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':link')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Levée de la restriction limitant l'utilisation de cette pseudo-classe à l'élément {{HTMLElement("a")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#anchor-pseudo-classes', ':link')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.link")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":link")}}</li>
+ <li>{{cssxref(":visited")}}</li>
+ <li>{{cssxref(":hover")}}</li>
+ <li>{{cssxref(":active")}}.</li>
+</ul>
diff --git a/files/fr/web/css/_colon_not/index.html b/files/fr/web/css/_colon_not/index.html
new file mode 100644
index 0000000000..7720f1c178
--- /dev/null
+++ b/files/fr/web/css/_colon_not/index.html
@@ -0,0 +1,112 @@
+---
+title: ':not'
+slug: 'Web/CSS/:not'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:not'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> de négation, <strong><code>:not()</code></strong>, est une notation fonctionnelle qui prend un sélecteur comme argument. Elle permet de cibler les éléments qui ne sont pas représentés par cet argument. Le sélecteur passé en argument ne doit pas contenir d'autre sélecteur de négation et ne doit pas cibler de pseudo-élément.</p>
+
+<pre class="brush: css no-line-numbers">/* Sélectionne n'importe quel élément qui n'est */
+/* pas un paragraphe */
+:not(p) {
+  color: blue;
+}</pre>
+
+<p>La <a href="/fr/Apprendre/CSS/Les_bases/La_cascade_et_l_héritage">spécificité</a> de la pseudo-classe <code>:not</code> est la spécificité de son argument. La pseudo-classe de négation n'ajoute pas de spécificité, contrairement aux autres pseudo-classes.</p>
+
+<div class="note">
+<p><strong>Notes :</strong></p>
+
+<ul>
+ <li>Attention à ne pas écrire de sélecteurs inutiles à l'aide de cette pseudo-classe. Ainsi, <code>:not(*) </code>va exclure tous les éléments et ne sera jamais appliqué.</li>
+ <li>À l'inverse, il est possible d'augmenter la <a href="/fr/docs/Web/CSS/Spécificité">spécificitié</a> d'un sélecteur. Ainsi. <code>toto:not(truc)</code> ciblera les mêmes éléments que <code>toto</code>, mais avec une spécificité plus forte.</li>
+ <li><code>:not(toto){}</code> ciblera tout élément qui n'est pas <code>toto</code>, <strong>notamment {{HTMLElement("html")}} et {{HTMLElement("body")}}</strong>.</li>
+ <li>Ce sélecteur ne s'applique qu'à un seul élément. Il ne peut pas être utilisé afin d'exclure tous les ancêtres. Ainsi, <code>body :not(table) a</code> s'appliquera aux liens contenus dans un tableau car {{HTMLElement("tr")}} ne sera pas ciblé par la partie <code>:not()</code> du sélecteur.</li>
+</ul>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La pseudo-classe <code>:not()</code> prend en argument une liste d'un ou plusieurs sélecteurs séparés par des virgules. Cette liste ne doit pas contenir d'autre sélecteur de négation ou <a href="/fr/docs/Web/CSS/Pseudo-éléments">de pseudo-élément</a>.</p>
+
+<div class="warning">
+<p><strong>Attention</strong>, la possibilité d'avoir plusieurs sélecteurs est expérimentale et n'est pas encore largement prise en charge.</p>
+</div>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* Contient tous les paragraphes (p) sauf
+   ceux avec le sélecteur de class "classy" */
+p:not(.classy) {
+  color: red;
+}
+
+/* Les balises p sont exclues */
+/* Attention, il est nécessaire d'avoir un      */
+/* combinateur. On ne peut pas écrire ':not(p)' */
+*:not(p) {
+  color: green;
+}
+
+/* Les éléments qui ne sont pas des paragraphes */
+/* et qui n'ont pas la classe "classy" */
+/* Note : cette syntaxe n'est pas bien supportée */
+body :not(.classy, p) {
+  font-family: sans-serif;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  Un peu de texte.
+&lt;/p&gt;
+&lt;p class="classy"&gt;
+  Encore du texte.
+&lt;/p&gt;
+&lt;span&gt;
+  Et toujours du texte.
+&lt;span&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#negation', ':not()')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>La définition de l'argument est étendue afin d'autoriser les sélecteurs complexes.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#negation', ':not()')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.not")}}</p>
diff --git a/files/fr/web/css/_colon_nth-child/index.html b/files/fr/web/css/_colon_nth-child/index.html
new file mode 100644
index 0000000000..b9826680e8
--- /dev/null
+++ b/files/fr/web/css/_colon_nth-child/index.html
@@ -0,0 +1,210 @@
+---
+title: ':nth-child'
+slug: 'Web/CSS/:nth-child'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:nth-child'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:nth-child(an+b)</code></strong> permet de cibler un élément qui possède <code><em>a</em>n+<em>b</em>-1</code> éléments voisins (au même niveau) avant lui dans l'arbre du document pour des valeurs entières <code>n</code> et qui possède un élément parent. Autrement dit, un sélecteur utilisant cette pseudo-classe permettra de cibler les éléments fils d'un élément dont les positions correspondent au motif <em>an+b</em>.</p>
+
+<pre class="brush: css no-line-numbers">/* Cible les éléments en fonction de leur position dans */
+/* le document : ici le 4e, 8e, 16e, 20e, etc. quel que */
+/* soit le type de l'élément */
+body :nth-child(4n) {
+  background-color: lime;
+}</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Pour CSS3, pour que l'élément soit ciblé, il faut qu'il ait un élément parent. En CSS4, cette restriction a été levée.</p>
+</div>
+
+<p>Illustrons cela avec quelques exemples :</p>
+
+<ul>
+ <li><code>1n+0</code> ou <code>n</code> ciblera chaque élément fils. <code>n</code> ne cible aucun élément pour le navigateur Android jusqu'à la version 4.3 alors qu'<code>1n</code> fonctionne. <code>1n</code> est synonyme de <code>1n+0</code> et les deux peuvent donc être utilisés de façon équivalente.</li>
+ <li><code>2n+0</code> ou <code>2n</code> ciblera les éléments fils 2, 4, 6, 8, etc. On pourra utiliser le mot-clé <strong><code>even</code></strong> à la place de cette expression.</li>
+ <li><code>2n+1</code> ciblera les éléments fils 1, 3, 5, 7, etc. On pourra utiliser le mot-clé <strong><code>odd</code></strong> à la place de cette expression.</li>
+ <li><code>3n+4</code> permettra de cibler les éléments fils 4, 7, 10, 13, etc.</li>
+ <li><code>0n+3</code> (ou plus simplement <code>3</code>) permettra de cibler le troisième élément.</li>
+</ul>
+
+<p>Les valeurs des coefficients <code><em>a</em></code> et <code><em>b</em></code> doivent être des entiers et l'indice du premier élément fils commence à 1. Autrement dit, cette pseudo-classe permettra de cibler les éléments fils dont l'indice appartient à l'ensemble <code>{ an + b; n = 0, 1, 2, ... }</code>.</p>
+
+<p>Cette pseudo-classe pourra ainsi être utilisée pour mettre en forme certaines lignes d'un tableau.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La pseudo-classe <code>nth-child</code> prend un seul argument qui représente le motif de répétition des éléments ciblés.</p>
+
+<h3 id="Valeurs_avec_un_mot-clé">Valeurs avec un mot-clé</h3>
+
+<dl>
+ <dt><code>odd</code></dt>
+ <dd>Représente les éléments dont la position est impaire par rapport à leurs voisins.</dd>
+ <dt><code>even</code></dt>
+ <dd>Représente les éléments dont la position est paire par rapport à leurs voisins.</dd>
+</dl>
+
+<h3 id="Notation_fonctionnelle">Notation fonctionnelle</h3>
+
+<dl>
+ <dt><code>&lt;An+B&gt;</code></dt>
+ <dd>Représente les éléments dont la position est la <code>An+B</code>-ième avec <code>n</code> qui parcourt les entiers à partir de 0. Les valeurs fournies pour <code>A</code> et <code>B</code> doivent être des entiers ({{cssxref("&lt;integer&gt;")}}).</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemples_de_sélecteurs">Exemples de sélecteurs</h3>
+
+<dl>
+ <dt><code>tr:nth-child(2n+1)</code></dt>
+ <dd>Permettra de cibler les lignes impaires d'un tableau.</dd>
+ <dt><code>tr:nth-child(odd)</code></dt>
+ <dd>Permettra de cibler les lignes impaires d'un tableau.</dd>
+ <dt><code>tr:nth-child(2n)</code></dt>
+ <dd>Permettra de cibler les lignes paires d'un tableau.</dd>
+ <dt><code>tr:nth-child(even)</code></dt>
+ <dd>Permettra de cibler les lignes paires d'un tableau.</dd>
+ <dt><code>span:nth-child(0n+1)</code></dt>
+ <dd>Permettra de cibler un élément {{HTMLElement("span")}} qui est le premier fils de son parent. Cela aura le même effet que la pseudo-classe {{cssxref(":first-child")}}.</dd>
+ <dt><code>span:nth-child(1)</code></dt>
+ <dd>Synonyme à l'exemple précédent.</dd>
+ <dt><code>span:nth-child(-n+3)</code></dt>
+ <dd>Permettra de cibler un élément si celui-ci fait partie des trois premiers fils d'un parent et que c'est également un élément <code>span</code>.</dd>
+</dl>
+
+<h3 id="Exemple_démonstratif">Exemple démonstratif</h3>
+
+<div id="Exemple_demonstratif">
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+span, div em {
+  padding: 10px;
+  border: 1px solid green;
+  display: inline-block;
+  margin-bottom: 3px;
+}
+
+.premier span:nth-child(2n+1),
+.deuxieme span:nth-child(2n+1),
+.troisieme span:nth-of-type(2n+1) {
+  background-color: lime;
+}</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush:html">&lt;p&gt;
+  &lt;code&gt;span:nth-child(2n+1)&lt;/code&gt;,
+  &lt;em&gt;sans&lt;/em&gt; un &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt;
+  parmi les éléments. Les éléments fils 1, 3,
+  5 et 7 sont sélectionnés.
+&lt;/p&gt;
+
+&lt;div class="premier"&gt;
+  &lt;span&gt;Ce span est sélectionné !&lt;/span&gt;
+  &lt;span&gt;Pas ce span ci. :(&lt;/span&gt;
+  &lt;span&gt;Celui-ci ?&lt;/span&gt;
+  &lt;span&gt;Celui-là ?&lt;/span&gt;
+  &lt;span&gt;Un autre exemple&lt;/span&gt;
+  &lt;span&gt;Et encore un&lt;/span&gt;
+  &lt;span&gt;Puis un dernier&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;p&gt;
+  &lt;code&gt;span:nth-child(2n+1)&lt;/code&gt;,
+  &lt;em&gt;avec&lt;/em&gt; un élément &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt;
+  parmi les fils. Les éléments fils 1, 5,
+  et 7 sont sélectionnés. 3 est compté
+  mais n'est pas ciblé car ce n'est pas
+  &lt;code&gt;&amp;lt;span&amp;gt;&lt;/code&gt;.
+&lt;/p&gt;
+
+&lt;div class="deuxieme"&gt;
+  &lt;span&gt;Ce span est sélectionné !&lt;/span&gt;
+  &lt;span&gt;Pas ce span ci. :(&lt;/span&gt;
+  &lt;em&gt;Ici on a un em.&lt;/em&gt;
+  &lt;span&gt;Qu'en est-il de celui-ci ?&lt;/span&gt;
+  &lt;span&gt;De celui-là ?&lt;/span&gt;
+  &lt;span&gt;Voici un autre exemple&lt;/span&gt;
+  &lt;span&gt;Et encore un&lt;/span&gt;
+  &lt;span&gt;Puis un dernier&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;p&gt;
+  &lt;code&gt;span:nth-of-type(2n+1)&lt;/code&gt;,
+  &lt;em&gt;avec&lt;/em&gt; un &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt;
+  parmi les éléments fils. Les éléments fils
+  1, 4, 6 et 8 sont sélectionnés. 3 n'est pas
+  compté ni ciblé car c'est un &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt;,
+  et pas un &lt;code&gt;&amp;lt;span&amp;gt;&lt;/code&gt; et
+  &lt;code&gt;nth-of-type&lt;/code&gt; ne sélectionne que les
+  fils de ce type. Ce &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt; est
+  sauté et est ignoré.
+&lt;/p&gt;
+
+&lt;div class="troisieme"&gt;
+  &lt;span&gt;Ce span est sélectionné !&lt;/span&gt;
+  &lt;span&gt;Pas ce span ci. :(&lt;/span&gt;
+  &lt;em&gt;Ici on a un em.&lt;/em&gt;
+  &lt;span&gt;Qu'en est-il de celui-ci ?&lt;/span&gt;
+  &lt;span&gt;De celui-là ?&lt;/span&gt;
+  &lt;span&gt;Voici un autre exemple&lt;/span&gt;
+  &lt;span&gt;Et encore un&lt;/span&gt;
+  &lt;span&gt;Puis un dernier&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<h4 id="Résultat">Résultat</h4>
+
+<div>{{EmbedLiveSample('Exemple_demonstratif','100%', '550')}}</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#nth-child-pseudo', ':nth-child')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Ajout de la syntaxe <code>&lt;selector&gt;</code>. Les éléments ciblés peuvent ne pas avoir d'élément parent.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#nth-child-pseudo', ':nth-child')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.nth-child")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":nth-of-type")}}</li>
+ <li>{{cssxref(":first-child")}}</li>
+ <li>{{cssxref(":last-child")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_nth-last-child/index.html b/files/fr/web/css/_colon_nth-last-child/index.html
new file mode 100644
index 0000000000..16c0e524ef
--- /dev/null
+++ b/files/fr/web/css/_colon_nth-last-child/index.html
@@ -0,0 +1,197 @@
+---
+title: ':nth-last-child'
+slug: 'Web/CSS/:nth-last-child'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:nth-last-child'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:nth-last-child</code></strong> permet de cibler les éléments qui possèdent <code><em>a</em>n+<em>b</em>-1</code> nœud frères qui les suivent pour un même élément parent avec un indice n entier qui est incrémenté à partir de 0. Avec CSS3, il était nécessaire que l'élément ciblé ait un élément parent, cette restriction a été levée en CSS4.</p>
+
+<pre class="brush: css no-line-numbers">/* Cible les éléments qui sont les 4e, 8e, 16e     */
+/* 20e à partir de la fin, quel que soit leur type */
+body: nth-last-child(4n) {
+  background-color: lime;
+}</pre>
+
+<p>Cette pseudo-classe fonctionne comme {{cssxref(":nth-child")}} mais cette fois-ci, le comptage s'effectue depuis la fin. Pour plus d'informations sur la syntaxe des arguments, voir {{cssxref(":nth-child")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La pseudo-classe <code>nth-last-child</code> prend un seul argument qui représente le motif de répétition des éléments ciblés, compté à partir de la fin.</p>
+
+<h3 id="Valeurs_avec_un_mot-clé">Valeurs avec un mot-clé</h3>
+
+<dl>
+ <dt><code>odd</code></dt>
+ <dd>Représente les éléments dont la position est impaire par rapport à leurs voisins lorsqu'elle est comptée depuis la fin.</dd>
+ <dt><code>even</code></dt>
+ <dd>Représente les éléments dont la position est paire par rapport à leurs voisins lorsqu'elle est comptée depuis la fin.</dd>
+</dl>
+
+<h3 id="Notation_fonctionnelle">Notation fonctionnelle</h3>
+
+<dl>
+ <dt><code>&lt;An+B&gt;</code></dt>
+ <dd>Représente les éléments dont la position, à partir de la fin, est la <code>An+B</code>-ième avec <code>n</code> qui parcourt les entiers à partir de 0. Les valeurs fournies pour <code>A</code> et <code>B</code> doivent être des entiers {{cssxref("&lt;integer&gt;")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemples_2">Exemples</h3>
+
+<dl>
+ <dt><code>tr:</code>nth-last-child<code>(-n+4)</code></dt>
+ <dd>Permettra de cibler les quatre dernières lignes d'un tableau.</dd>
+ <dt><code>span:nth-last-child(even)</code> ou <code>span:nth-last-child(2n)</code></dt>
+ <dd>Permettra de cibler tous les éléments {{HTMLElement("span")}} pairs en partant de la fin.</dd>
+</dl>
+
+<h3 id="Exemple_appliqué">Exemple appliqué</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">table {
+  border:1px solid blue;
+}
+tr:nth-last-child(-n+3) { /* les trois derniers enfants */
+  background-color: lime;
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;Première ligne&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+       &lt;td&gt;Deuxième ligne&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+       &lt;td&gt;Troisième ligne&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+       &lt;td&gt;Quatrième ligne&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+       &lt;td&gt;Sixième ligne&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Exemple_appliqué', '100%', 150)}}</p>
+
+<h3 id="Cas_aux_limites">Cas aux limites</h3>
+
+<p><code>n</code> commence à zéro et le dernier élément commence à un, <code>n</code> et <code>n+1</code> sélectionnent donc les mêmes éléments.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;Première ligne&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;Deuxième ligne&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;Troisième ligne&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">tr:nth-last-child(n) {
+  background-color: lightgray;
+}
+
+tr:nth-last-child(n+1){
+  font-weight: 600;
+}
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample('Cas_aux_limites')}}</p>
+
+<h3 id="Mise_en_forme_selon_le_nombre_d’éléments">Mise en forme selon le nombre d’éléments</h3>
+
+<p>Il est possible d'utiliser les compteurs pour mettre en forme une liste selon le nombre d'éléments qu'elle contient. Dans l'exemple qui suit, on met les éléments de la liste en rouge si celle-ci contient au moins trois éléments. Pour cela, on combine la pseudo-classe <code>nth-last-child</code> et <a href="/fr/docs/Web/CSS/Sélecteurs_de_voisins_généraux">le sélecteur de voisins généraux (<em>general sibling combinator</em>)</a>.</p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;h4&gt;Une liste avec quatre éléments :&lt;/h4&gt;
+&lt;ol&gt;
+  &lt;li&gt;Un&lt;/li&gt;
+  &lt;li&gt;Deux&lt;/li&gt;
+  &lt;li&gt;Trois&lt;/li&gt;
+  &lt;li&gt;Quatre&lt;/li&gt;
+&lt;/ol&gt;
+
+&lt;h4&gt;Une liste avec deux éléments :&lt;/h4&gt;
+&lt;ol&gt;
+  &lt;li&gt;Un&lt;/li&gt;
+  &lt;li&gt;Deux&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css">li:nth-last-child(n+3),
+li:nth-last-child(n+3) ~ li {
+  color: red;
+}</pre>
+
+<h4 id="Résultat_3">Résultat</h4>
+
+<p>{{EmbedLiveSample("Mise_en_forme_selon_le_nombre_d’éléments", '100%', 270)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#nth-last-child-pseudo', ':nth-last-child')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Les éléments ciblés peuvent ne pas avoir d'élément parent.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#nth-last-child-pseudo', ':nth-last-child')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.nth-last-child")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":nth-child")}}</li>
+ <li><em><a href="https://alistapart.com/article/quantity-queries-for-css">Quantity Queries for CSS</a></em></li>
+</ul>
diff --git a/files/fr/web/css/_colon_nth-last-of-type/index.html b/files/fr/web/css/_colon_nth-last-of-type/index.html
new file mode 100644
index 0000000000..f8689c04d1
--- /dev/null
+++ b/files/fr/web/css/_colon_nth-last-of-type/index.html
@@ -0,0 +1,93 @@
+---
+title: ':nth-last-of-type'
+slug: 'Web/CSS/:nth-last-of-type'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:nth-last-of-type'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:nth-last-of-type</code></strong> permet de cibler des éléments qui possèdent <code><em>a</em>n+<em>b</em>-1</code> nœud frères étant les mêmes éléments à partir de la fin de l'arbre et qui ont le même élément parent (l'indice <code>n</code> sera incrémenté à partir de 0). Autrement dit, la pseudo-classe parcourra les éléments d'un type donné en partant de la fin de l'élément parent, selon le motif passé en argument.</p>
+
+<pre class="brush: css no-line-numbers">/* Cible les éléments &lt;div&gt; qui sont les 4e */
+/* 8e, 16e, 20e, à partir du dernier élément */
+/* &lt;div&gt; d'un élément parent */
+div:nth-last-of-type(4n) {
+  background-color: lime;
+}</pre>
+
+<p>Pour plus de détails sur les arguments passés à cette pseudo-classe, voir {{cssxref(":nth-child")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La pseudo-classe <code>nth-last-of-type</code> prend un seul argument qui représente le motif de répétition des éléments correspondants, comptés à partir de la fin.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Ici, on souhaite mettre en avant le deuxième élément {{HTMLElement("span")}} en partant de la fin :</p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">span:nth-last-of-type(2) {
+  background-color: lime;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;span&gt;Ce span est le premier !&lt;/span&gt;
+  &lt;span&gt;Ce span ne l'est pas. :(&lt;/span&gt;
+  &lt;em&gt;Celui-ci est bizarre.&lt;/em&gt;
+  &lt;span&gt;Celui-ci l'est !&lt;/span&gt;
+  &lt;strike&gt;C'est un autre type&lt;/strike&gt;
+  &lt;span&gt;Malheureusement, celui-ci ne l'est pas.&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<div>{{EmbedLiveSample('Exemples')}}</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#nth-last-of-type-pseudo', ':nth-last-of-type')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>L'élément ciblé ne doit pas nécessairement avoir un élément parent.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#nth-last-of-type-pseudo', ':nth-last-of-type')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.nth-last-of-type")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":last-of-type")}}</li>
+ <li>{{cssxref(":nth-of-type")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_nth-of-type/index.html b/files/fr/web/css/_colon_nth-of-type/index.html
new file mode 100644
index 0000000000..ab51994aec
--- /dev/null
+++ b/files/fr/web/css/_colon_nth-of-type/index.html
@@ -0,0 +1,108 @@
+---
+title: ':nth-of-type'
+slug: 'Web/CSS/:nth-of-type'
+tags:
+  - CSS
+  - Mise en page
+  - Pseudo-classe
+  - Reference
+  - Web
+translation_of: 'Web/CSS/:nth-of-type'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:nth-of-type()</code></strong> correspond à des éléments d'un type donné, en fonction de leur position au sein d'un groupe de frères et sœurs.</p>
+
+<pre class="brush: css no-line-numbers  language-css">/* Sélectionne chaque élément de type &lt;p&gt; dont
+la position parmi l'ensemble des éléments de type &lt;p&gt;
+descendants directement du même élément parent,
+est un multiple de 4. */
+p:nth-of-type(4n) {
+  color: lime;
+}</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La pseudo-classe <code>nth-of-type</code> ne prend qu'un argument qui représente le motif de répétition pour les éléments ciblés.</p>
+
+<p>Pour une explication plus détaillée de sa syntax voir {{Cssxref(":nth-child")}}</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple nous allons colorer un paragrapher sur deux avec des couleurs différentes et mettre le premier paragraphe en gras</p>
+
+
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="punctuation token">&lt;div&gt;
+  &lt;div&gt;Cet élément n'est pas compté.&lt;/div&gt;
+  &lt;p&gt;1er paragraphe.&lt;/p&gt;
+  &lt;p&gt;2e paragraphe.&lt;/p&gt;
+  &lt;div&gt;Cet élément n'est pas compté.&lt;/div&gt;
+  &lt;p&gt;3e paragraphe.&lt;/p&gt;
+  &lt;p&gt;4e paragraphe.&lt;/p&gt;
+&lt;/div&gt;
+</span></span></code></pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css line-numbers  language-css"><code class="language-css">/* Paragraphes impairs */
+p:nth-of-type(2n+1) {
+  color: red;
+}
+
+/* Paragraphes pairs */
+</code><code class="language-css"><span class="selector token">p<span class="pseudo-class token">:nth-of-type(2n)</span> </span><span class="punctuation token">{</span>
+  <span class="property token">color</span><span class="punctuation token">:</span> blue<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="comment token">/* Premier paragraphe */</span>
+<span class="selector token">p<span class="pseudo-class token">:nth-of-type(1)</span> </span><span class="punctuation token">{</span>
+  <span class="property token">font-weight</span><span class="punctuation token">:</span> bold<span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<div>{{EmbedLiveSample('Exemples','250','200')}}</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#nth-of-type-pseudo', ':nth-of-type')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>L'élément ciblé ne doit pas nécessairement avoir un élément parent.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#nth-of-type-pseudo', ':nth-of-type')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.nth-of-type")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":nth-child")}}</li>
+ <li>{{cssxref(":nth-last-of-type")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_only-child/index.html b/files/fr/web/css/_colon_only-child/index.html
new file mode 100644
index 0000000000..2ad2d86c12
--- /dev/null
+++ b/files/fr/web/css/_colon_only-child/index.html
@@ -0,0 +1,143 @@
+---
+title: ':only-child'
+slug: 'Web/CSS/:only-child'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:only-child'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:only-child</code></strong> représente n'importe quel élément qui est le seul enfant de son élément parent. Elle permet d'obtenir le même effet que <code>:first-child:last-child</code> ou <code>:nth-child(1):nth-last-child(1)</code>, mais avec une spécificité inférieure.</p>
+
+<pre class="brush: css no-line-numbers">/* Cible chaque élément &lt;p&gt; si celui-ci   */
+/* est le seul élément fils de son parent */
+p:only-child {
+  background-color: lime;
+}</pre>
+
+<div class="note">
+<p><strong>Note :</strong> En CSS3, pour cibler l'élément, il fallait que celui-ci ait un élément parent. Cette restriction a été levée avec CSS4.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">span:only-child {
+  color:red;
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;span&gt;
+    Ce span est l'unique enfant
+    de son parent
+  &lt;/span&gt;
+&lt;/div&gt;
+
+&lt;div&gt;
+  &lt;span&gt;
+    Ce span est l'un des deux
+    enfants de son parent
+  &lt;/span&gt;
+  &lt;span&gt;
+    Ce span est l'un des deux
+    enfants de son parent
+  &lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Exemple_simple', '100%', 150)}}</p>
+
+<h3 id="Exemple_avec_une_liste">Exemple avec une liste</h3>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css  l">li li {
+  list-style-type : disc;
+}
+
+li:only-child {
+  color: #6699ff;
+  font-style: italic;
+  list-style-type: square;
+}</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html  language-html">&lt;ol&gt;
+  &lt;li&gt;Premier
+    &lt;ul&gt;
+      &lt;li&gt;Ceci est l'unique élément enfant&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+  &lt;li&gt;Deuxième
+    &lt;ul&gt;
+      &lt;li&gt;Cette liste a deux éléments&lt;/li&gt;
+      &lt;li&gt;Cette liste a deux éléments&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+  &lt;li&gt;Troisième
+    &lt;ul&gt;
+      &lt;li&gt;Cette liste a trois éléments&lt;/li&gt;
+      &lt;li&gt;Cette liste a trois éléments&lt;/li&gt;
+      &lt;li&gt;Cette liste a trois éléments&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+&lt;/ol&gt;
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample('Exemple_avec_une_liste', '100%', 150)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#only-child-pseudo', ':only-child')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Il n'est plus nécessaire qu'un élément ait un parent pour être ciblé.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#only-child-pseudo', ':only-child')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.only-child")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":only-of-type")}}</li>
+ <li>{{cssxref(":first-child")}}</li>
+ <li>{{cssxref(":last-child")}}</li>
+ <li>{{cssxref(":nth-child")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_only-of-type/index.html b/files/fr/web/css/_colon_only-of-type/index.html
new file mode 100644
index 0000000000..d60cf898db
--- /dev/null
+++ b/files/fr/web/css/_colon_only-of-type/index.html
@@ -0,0 +1,115 @@
+---
+title: ':only-of-type'
+slug: 'Web/CSS/:only-of-type'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:only-of-type'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:only-of-type</code></strong> CSS permet de cibler un élément qui ne possède aucun nœud frère du même type pour un même élément parent (par exemple, sélectionner le seul élément {{HTMLElement("em")}} d'un {{HTMLElement("dd")}}).</p>
+
+<pre class="brush: css no-line-numbers">/* Cible un élément &lt;p&gt; si celui-ci est le */
+/* seul paragraphe de son élément parent   */
+p:only-of-type {
+  background-color: lime;
+}</pre>
+
+<div class="note"><strong>Note :</strong> Dans la version initiale de la spécification (CSS3), l'élément ciblé devait avoir un parent, ce n'est plus nécessaire depuis (spécification pour les sélecteurs de CSS4).
+
+<p> </p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css  l">li li {
+  list-style-type : disc;
+}
+
+li:only-of-type {
+  color: #6699ff;
+  font-style: italic;
+  list-style-type: square;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html  language-html">&lt;ol&gt;
+  &lt;li&gt;Premier
+    &lt;ul&gt;
+      &lt;li&gt;Ceci est l'unique li&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+  &lt;li&gt;Deuxième
+    &lt;ul&gt;
+      &lt;li&gt;Cette liste a deux éléments&lt;/li&gt;
+      &lt;li&gt;Cette liste a deux éléments&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+  &lt;li&gt;Troisième
+    &lt;ul&gt;
+      &lt;li&gt;Cette liste a trois éléments&lt;/li&gt;
+      &lt;li&gt;Cette liste a trois éléments&lt;/li&gt;
+      &lt;li&gt;Cette liste a trois éléments&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+&lt;/ol&gt;
+&lt;ol&gt;
+  &lt;li&gt;Une seule liste imbriquée
+    &lt;ul&gt;Avec
+      &lt;li&gt;Un seul item&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+&lt;/ol&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '100%', 150)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#only-of-type-pseudo', ':only-of-type')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>L'élément ciblé ne doit pas nécessairement avoir un élément parent.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#only-of-type-pseudo', ':only-of-type')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.only-of-type")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":only-child")}}</li>
+ <li>{{cssxref(":nth-of-type")}}</li>
+ <li>{{cssxref(":first-of-type")}}</li>
+ <li>{{cssxref(":last-of-type")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_optional/index.html b/files/fr/web/css/_colon_optional/index.html
new file mode 100644
index 0000000000..26ec7e5506
--- /dev/null
+++ b/files/fr/web/css/_colon_optional/index.html
@@ -0,0 +1,116 @@
+---
+title: ':optional'
+slug: 'Web/CSS/:optional'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:optional'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:optional</code></strong> permet de cibler les éléments {{HTMLElement("input")}} ou {{HTMLElement("textarea")}}  pour lesquels l'attribut {{htmlattrxref("required","input")}} n'est pas activé. Cela permet ainsi d'indiquer et de mettre en forme les champs facultatifs d'un formulaire.</p>
+
+<pre class="brush: css no-line-numbers">/* Cible les élméents &lt;input&gt; qui sont optionnels */
+/* c'est-à-dire qui n'ont pas d'attribut required */
+input:optional {
+  border: 1px dashed black;
+}</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Afin de mettre en forme les champs obligatoires, on pourra utiliser la pseudo-classe {{cssxref(":required")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input {
+  border-width: 3px;
+}
+input:optional {
+  border-color: #008000;
+}
+input:required {
+  border-color: #800000;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;label for="url-input"&gt;Tapez une URL :&lt;/label&gt;
+  &lt;input type="url" id="url-input"&gt;
+  &lt;br&gt;
+  &lt;br&gt;
+  &lt;label for="email-input"&gt;Tapez une adresse électronique :&lt;/label&gt;
+  &lt;input type="email" id="email-input" required&gt;
+&lt;/form&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples','100%',150)}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Si un formulaire ({{HTMLElement("form")}}) contient des champs ({{htmlelement("input")}}) optionnels, les champs obligatoires doivent être indiqués avec l'attribut {{htmlattrxref("input","required")}}. Ainsi, les personnes utilisant des outils d'assistance (par exemple un lecteur d'écran) pourront savoir que ces champs ont besoin d'un contenu valide afin de pouvoir envoyer le formulaire.</p>
+
+<p>Les champs obligatoires devraient également être indiqués visuellement et cette indication ne doit pas uniquement être fournie avec une couleur. Généralement, un texte descriptif ou une icône est utilisé.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Explications des recommendation WCAG 1.4</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" rel="noopener">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#selector-optional', ':optional')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#selector-optional', ':optional')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Définition de la sémantique relative à HTML et aux contraintes de validation.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#opt-pseudos', ':optional')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#pseudo-required-value', ':optional')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Définition de la pseudo-classe mais sans la sémantique associée.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.optional")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":required")}}</li>
+ <li>{{cssxref(":invalid")}}</li>
+ <li>{{cssxref(":valid")}}</li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">La validation des données de formulaire</a></li>
+</ul>
diff --git a/files/fr/web/css/_colon_out-of-range/index.html b/files/fr/web/css/_colon_out-of-range/index.html
new file mode 100644
index 0000000000..ff99fb7c26
--- /dev/null
+++ b/files/fr/web/css/_colon_out-of-range/index.html
@@ -0,0 +1,107 @@
+---
+title: ':out-of-range'
+slug: 'Web/CSS/:out-of-range'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:out-of-range'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:out-of-range</code></strong> cible un élément {{HTMLElement("input")}} lorsque la valeur de son attribut <code>value</code> est en dehors de l'intervalle autorisé par les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max","input")}} attributes. Ceci permet d'informer l'utilisateur que la valeur actuellement renseignée dans l'élément est hors des limites acceptables.</p>
+
+<pre class="brush: css no-line-numbers">/* Cible n'importe quel élément &lt;input&gt; qui possède un */
+/* attribut range et que la valeur associée est en     */
+/* dehors de cet intervalle */
+input:out-of-range {
+  background-color: rgba(255, 0, 0, 0.25);
+}</pre>
+
+<div class="note"><strong>Note :</strong> Cette pseudo-classe s'applique seulement aux éléments qui ont des valeurs limites.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html; highlight:[4]">&lt;form action="" id="form1"&gt;
+  &lt;ul&gt;Les valeurs entre 1 et 10 sont autorisées.
+    &lt;li&gt;
+      &lt;input id="valeur1" name="valeur1" type="number" placeholder="1 à 10" min="1" max="10" value="12"&gt;
+      &lt;label for="valeur1"&gt;Votre valeur est &lt;/label&gt;
+    &lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css;">li {
+  list-style: none;
+  margin-bottom: 1em;
+}
+
+input {
+  border: 1px solid black;
+}
+
+input:in-range {
+  background-color: rgba(0, 255, 0, 0.25);
+}
+
+input:out-of-range {
+  background-color: rgba(255, 0, 0, 0.25);
+  border: 2px solid red;
+}
+
+input:in-range + label::after {
+  content:' OK';
+}
+
+input:out-of-range + label::after {
+    content:'hors des limites !';
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples',600,140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'scripting.html#selector-out-of-range', ':out-of-range')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Définition de la correspondance entre <code>:out-of-range</code> et les éléments HTML.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#out-of-range-pseudo', ':out-of-range')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.out-of-range")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":in-range")}}</li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">Le guide de validation des données de formulaire</a></li>
+</ul>
diff --git a/files/fr/web/css/_colon_placeholder-shown/index.html b/files/fr/web/css/_colon_placeholder-shown/index.html
new file mode 100644
index 0000000000..943598fde4
--- /dev/null
+++ b/files/fr/web/css/_colon_placeholder-shown/index.html
@@ -0,0 +1,199 @@
+---
+title: ':placeholder-shown'
+slug: 'Web/CSS/:placeholder-shown'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:placeholder-shown'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:placeholder-shown</code></strong> permet de représenter n'importe quel élément {{htmlElement("input")}} ou {{htmlElement("textarea")}} affichant <a href="/fr/docs/Web/Guide/HTML/Forms_in_HTML#The_placeholder_attribute">un texte de substitution</a>.</p>
+
+<pre class="brush: css no-line-numbers">/* Cible tout élément &lt;input&gt; ou &lt;textarea&gt; avec un */
+/* attribut placeholder actuellement affiché        */
+:placeholder-shown {
+  border: 2px solid silver;
+}</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<div class="hidden">
+<pre class="brush: css">input:-ms-input-placeholder {
+  border-color: silver;
+}
+
+input:-moz-placeholder {
+  border-color: silver;
+}</pre>
+</div>
+
+<pre class="brush: css; highlight[6]">input {
+  border: 2px solid black;
+  padding: 3px;
+}
+
+:placeholder-shown {
+  border-color: silver;
+}</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;input placeholder="Saisir quelque chose ici"&gt;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemples", 200, 60)}}</p>
+
+<h3 id="Dépassement_du_texte">Dépassement du texte</h3>
+
+<p>Sur certains écrans plus étroits (tels que ceux des smartphones), la largeur des boîtes de recherche et celle des champs de formulaire peut être réduite fortement. Le texte de substitution peut donc être tronqué de façon indésirable. On peut alors utiliser {{cssxref("text-overflow")}} pour gérer cela gracieusement.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;input placeholder="Veuillez saisir quelque chose dans ce champ s'il vous plaît !"&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<div class="hidden">
+<pre class="brush: css">input:-ms-input-placeholder {
+  text-overflow: ellipsis;
+}
+
+input:-moz-placeholder {
+  text-overflow: ellipsis;
+}</pre>
+</div>
+
+<pre class="brush: css">input:placeholder-shown {
+  text-overflow: ellipsis;
+}</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Dépassement_du_texte", 200, 60)}}</p>
+
+<h3 id="Texte_coloré">Texte coloré</h3>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;input placeholder="Saisir quelque chose ici"&gt;</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<div class="hidden">
+<pre class="brush: css">input:-ms-input-placeholder {
+  color: red;
+  font-style: italic;
+}
+
+input:-moz-placeholder {
+  color: red;
+  font-style: italic;
+}</pre>
+</div>
+
+<pre class="brush: css">input:placeholder-shown {
+  color: red;
+  font-style: italic;
+}
+</pre>
+
+<h4 id="Résultat_3">Résultat</h4>
+
+<p>{{EmbedLiveSample("Texte_coloré")}}</p>
+
+<h3 id="Champ_de_saisie_personnalisé">Champ de saisie personnalisé</h3>
+
+<h4 id="HTML_4">HTML</h4>
+
+<pre class="brush: html">&lt;form id="test"&gt;
+  &lt;p&gt;
+    &lt;label for="name"&gt;Enter Student Name:&lt;/label&gt;
+    &lt;input id="name" placeholder="Student Name"/&gt;
+  &lt;/p&gt;
+  &lt;p&gt;
+    &lt;label for="branch"&gt;Enter Student Branch:&lt;/label&gt;
+    &lt;input id="branch" placeholder="Student Branch"/&gt;
+  &lt;/p&gt;
+  &lt;p&gt;
+    &lt;label for="sid"&gt;Enter Student ID:&lt;/label&gt;
+    &lt;input type="number" pattern="[0-9]{8}" title="8 digit ID" id="sid" class="studentid" placeholder="8 digit id"/&gt;
+  &lt;/p&gt;
+  &lt;input type="submit"/&gt;
+&lt;/form&gt;</pre>
+
+<h4 id="CSS_4">CSS</h4>
+
+<div class="hidden">
+<pre class="brush: css">input.studentid:-ms-input-placeholder {
+  background-color: yellow;
+  color: red;
+  font-style: italic;
+}
+
+input.studentid:-moz-placeholder {
+  background-color: yellow;
+  color: red;
+  font-style: italic;
+}</pre>
+</div>
+
+<pre class="brush: css; highlight[6]">input {
+  background-color: #E8E8E8;
+  color: black;
+}
+
+input.studentid:placeholder-shown {
+  background-color: yellow;
+  color: red;
+  font-style: italic;
+}</pre>
+
+<h4 id="Résultat_4">Résultat</h4>
+
+<p>{{EmbedLiveSample("Champ_de_saisie_personnalisé", 200, 180)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors", "#placeholder", ":placeholder-shown")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une <em>pull request</em> sur ce dépôt: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("css.selectors.placeholder-shown")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("::placeholder")}}</li>
+ <li>{{cssxref("::-moz-placeholder")}}</li>
+ <li>{{HTMLElement("input")}}</li>
+ <li>{{HTMLElement("textarea")}}</li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires">Les formulaires HTML</a></li>
+</ul>
diff --git a/files/fr/web/css/_colon_read-only/index.html b/files/fr/web/css/_colon_read-only/index.html
new file mode 100644
index 0000000000..d8d7183237
--- /dev/null
+++ b/files/fr/web/css/_colon_read-only/index.html
@@ -0,0 +1,102 @@
+---
+title: ':read-only'
+slug: 'Web/CSS/:read-only'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Refrence
+translation_of: 'Web/CSS/:read-only'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:read-only</code></strong> permet de cibler un élément que l'utilisateur ne peut pas modifier (l'élément est en lecture seule).</p>
+
+<pre class="brush: css no-line-numbers">/* Cible n'importe quel élément &lt;input&gt; */
+/* en lecture seule */
+
+/* Firefox utilise un préfixe */
+input:-moz-read-only {
+  background-color: #ccc;
+}
+
+/* Blink/WebKit/Edge n'ont pas de préfixe */
+input:read-only {
+  background-color: #ccc;
+}</pre>
+
+<div class="note">
+<p><strong>Note </strong>: Ce sélecteur ne permet pas de cibler que les éléments {{HTMLElement("input")}} ou {{HTMLElement("textarea")}} avec {{htmlattrxref("readonly", "input")}}. Il permet de sélectionner n'importe quel élément qui ne peut pas être édité par l'utilisateur.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input { min-width: 25em; }
+input:-moz-read-only { background: cyan; }
+input:read-only { background: cyan; }
+
+p:-moz-read-only { background: lightgray; }
+p:read-only { background: lightgray; }
+p[contenteditable="true"] { color: blue; }
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input type="text" value="Un champ en lecture seule" readonly /&gt;
+&lt;p contenteditable="true"&gt;
+  Essayez un peu d'éditer ce paragraphe.
+&lt;/p&gt;
+&lt;p&gt;
+  Bonne chance pour celui-là !
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 class="editable" id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#selector-read-only', ':read-only')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#selector-read-only', ':read-only')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Définition de la sémantique relative à HTML et aux contraintes de validation.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#rw-pseudos', ':read-only')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Définition de la pseudo-classe mais pas de la sémantique associée.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.read-only")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":read-write")}}</li>
+ <li>L'attribut HTML {{htmlattrxref("contenteditable")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_read-write/index.html b/files/fr/web/css/_colon_read-write/index.html
new file mode 100644
index 0000000000..d867eaee4e
--- /dev/null
+++ b/files/fr/web/css/_colon_read-write/index.html
@@ -0,0 +1,96 @@
+---
+title: ':read-write'
+slug: 'Web/CSS/:read-write'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:read-write'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:read-write</code></strong> permet de cibler un élément lorsque celui-ci peut être édité par l'utilisateur (par exemple les champs texte d'un formulaire ou les éléments {{HTMLElement("textarea")}}).</p>
+
+<pre class="brush: css no-line-numbers">/* Cible tout élément éditable */
+/* Pris en charge dans Firefox avec un préfixe */
+input:-moz-read-write {
+  background-color: #ccc;
+}
+
+/* Pris en charge sans préfixe pour Blink/WebKit/Edge */
+input:read-write {
+  background-color: #ccc;
+}</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Ce sélecteur ne sélectionne pas que les champs de saisie textuels ({{HTMLElement("input")}} ou {{HTMLElement("textarea")}}). Il permet de sélectionner n'importe quel élément qui peut être édité par l'utilisateur (par exemple un élément {{htmlelement("p")}} avec un attribut {{htmlattrxref("contenteditable")}}).</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css line-numbers  language-css">input { min-width: 25em; }
+input:-moz-read-write { background: cyan; }
+input:read-write { background: cyan; }
+
+p:-moz-read-write { background: lightgray; }
+p:read-write { background: lightgray; }
+p[contenteditable="true"] { color: blue; }
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input type="text" value="Un champ en lecture seule"/&gt;
+&lt;p contenteditable&gt;Essayez un peu d'éditer ce paragraphe.&lt;/p&gt;
+&lt;p&gt;Bonne chance pour celui-là !&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#selector-read-write', ':read-write')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#selector-read-write', ':read-write')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Définition de la sémantique relative à HTML et aux contraintes de validation.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#rw-pseudos', ':read-write')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Définition de la pseudo-classe mais pas de la sémantique associée.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.read-write")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":read-only")}}</li>
+ <li>L'attribut HTML {{htmlattrxref("contenteditable")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_required/index.html b/files/fr/web/css/_colon_required/index.html
new file mode 100644
index 0000000000..f2fcdc5366
--- /dev/null
+++ b/files/fr/web/css/_colon_required/index.html
@@ -0,0 +1,120 @@
+---
+title: ':required'
+slug: 'Web/CSS/:required'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:required'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:required</code></strong> permet de cibler un élément {{HTMLElement("input")}} pour lequel l'attribut {{htmlattrxref("required", "input")}} est activé. Cela permet de mettre en forme les éléments obligatoires pour remplir correctement un formulaire.</p>
+
+<pre class="brush: css no-line-numbers">/* Cible les éléments &lt;input&gt; qui ont */
+/* l'attribut required */
+input:required {
+  border: 1px dashed red;
+}</pre>
+
+<div class="note">
+<p><strong>Note :</strong> La pseudo-classe {{cssxref(":optional")}} pourra être utilisée pour mettre en forme les champs facultatifs.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input {
+  border-width: 3px;
+}
+input:optional {
+  border-color: #008000;
+}
+input:required {
+  border-color: #800000;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;label for="url-input"&gt;Tapez une URL :&lt;/label&gt;
+  &lt;input type="url" id="url-input"&gt;
+  &lt;br&gt;
+  &lt;br&gt;
+  &lt;label for="email-input"&gt;Tapez une adresse courriel :&lt;/label&gt;
+  &lt;input type="email" id="email-input" required&gt;
+&lt;/form&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples','100%',150)}}</p>
+
+<p> </p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Si un formulaire ({{HTMLElement("form")}}) contient des champs ({{htmlelement("input")}}) optionnels, les champs obligatoires doivent être indiqués avec l'attribut {{htmlattrxref("input","required")}}. Ainsi, les personnes utilisant des outils d'assistance (par exemple un lecteur d'écran) pourront savoir que ces champs ont besoin d'un contenu valide afin de pouvoir envoyer le formulaire.</p>
+
+<p>Les champs obligatoires devraient également être indiqués visuellement et cette indication ne doit pas uniquement être fournie avec une couleur. Généralement, un texte descriptif ou une icône est utilisé.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Explications des recommendation WCAG 1.4</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" rel="noopener">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<p> </p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#selector-required', ':required')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#selector-required', ':required')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Définition de la sémantique relative à HTML et aux contraintes de validation.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#opt-pseudos', ':required')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#pseudo-required-value', ':required')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Définition de la pseudo-classe mais pas de la sémantique associée.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une <em>pull request</em> sur ce dépôt: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("css.selectors.required")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":optional")}}</li>
+ <li>{{cssxref(":invalid")}}</li>
+ <li>{{cssxref(":valid")}}</li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">La validation des données d'un formulaire</a></li>
+</ul>
diff --git a/files/fr/web/css/_colon_right/index.html b/files/fr/web/css/_colon_right/index.html
new file mode 100644
index 0000000000..239d2171f9
--- /dev/null
+++ b/files/fr/web/css/_colon_right/index.html
@@ -0,0 +1,71 @@
+---
+title: ':right'
+slug: 'Web/CSS/:right'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:right'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:right</code></strong>, liée à la règle {{cssxref("@page")}}, correspond aux pages de droite pour un média paginé. Ceci permet de mettre en forme les pages de droite.</p>
+
+<pre class="brush: css no-line-numbers">/* Sélectionne le contenu des pages droites */
+/* lorsqu'on imprime le document */
+@page :right {
+  margin: 2in 3in;
+}</pre>
+
+<p>La position de la page (à gauche ou à droite) dépend de la direction d'écriture appliquée au document. Si la première page est écrite de la gauche vers la droite, alors ce sera une page droite, sinon ce sera une page gauche (qui pourra alors être ciblée avec {{cssxref(":left")}}).</p>
+
+<div class="note"><strong>Note :</strong> Il n'est pas possible de modifier toutes les propriétés CSS. Seules les propriétés {{cssxref("margin")}}, {{cssxref("padding")}}, {{cssxref("border")}}, and {{cssxref("background")}} <strong>de la boîte correspondant à la page</strong> peuvent être modifiées. Toutes les autres propriétés CSS seront ignorées, et seulement la boîte correspondant à la page, et en aucun cas le contenu du document pourront être affectés.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">@page :right {
+  margin: 2cm 3cm;
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Paged Media', '#left-right-first', ':right')}}</td>
+   <td>{{Spec2('CSS3 Paged Media')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'page.html#page-selectors', ':right')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.right")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("@page")}}</li>
+ <li>{{cssxref(":first")}}</li>
+ <li>{{cssxref(":left")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_root/index.html b/files/fr/web/css/_colon_root/index.html
new file mode 100644
index 0000000000..cdfe0ca96f
--- /dev/null
+++ b/files/fr/web/css/_colon_root/index.html
@@ -0,0 +1,62 @@
+---
+title: ':root'
+slug: 'Web/CSS/:root'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:root'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:root</code></strong> permet de cibler la racine de l'arbre représentant le document. Pour un document HTML, <code>:root</code> ciblera donc l'élément {{HTMLElement("html")}} et aura le même comportement que le sélecteur <code>html</code> mais <a href="/fr/Apprendre/CSS/Introduction_à_CSS/La_cascade_et_l_héritage#Le_poids_des_sélecteurs">sa spécificité</a> sera plus forte.</p>
+
+<pre class="brush: css no-line-numbers">/* Sélectionne l'élément racine du document */
+/* Pour un document HTML, c'est &lt;html&gt; */
+:root {
+  background: yellow;
+}</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p><code>:root</code> peut être utile lorsqu'on déclare <a href="/fr/docs/Web/CSS/--*">des propriétés CSS personnalisées globales</a> :</p>
+
+<pre class="brush: css">:root {
+  --main-color: hotpink;
+  --pane-padding: 5px 42px;
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#root-pseudo', ':root')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#root-pseudo', ':root')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une <em>pull request</em> sur ce dépôt: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("css.selectors.root")}}</p>
diff --git a/files/fr/web/css/_colon_scope/index.html b/files/fr/web/css/_colon_scope/index.html
new file mode 100644
index 0000000000..eba58021b7
--- /dev/null
+++ b/files/fr/web/css/_colon_scope/index.html
@@ -0,0 +1,84 @@
+---
+title: ':scope'
+slug: 'Web/CSS/:scope'
+tags:
+  - CSS
+  - Experimental
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:scope'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:scope</code></strong> correspond aux éléments qui sont un point de référence pour faire correspondre les sélecteurs.</p>
+
+<pre class="brush: css">/* Sélectionne un élément dans la portée */
+:scope {
+  background-color: lime;
+}</pre>
+
+<p>À l'heure actuelle, lorsqu'elle est utilisée dans une feuille de style, <code>:scope</code> est identique à {{cssxref(":root")}} car il n'existe pas de moyen pour identifier un élément dont la portée est restreinte. Lorsqu'elle est utilisée à travers des méthodes telles que {{domxref("Element.querySelector", "querySelector()")}}, {{domxref("Element.querySelectorAll", "querySelectorAll()")}}, {{domxref("Element.matches", "matches()")}} ou {{domxref("Element.closest()")}}, <code>:scope</code> correspond à l'élément sur lequel la méthode est appelée.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, on voit comment utiliser <code>:scope</code> via la méthode {{domxref("Element.matches()")}}.</p>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">let paragraphe = document.getElementById("para");
+let output = document.getElementById("output");
+
+if (paragraphe.matches(":scope")) {
+  output.innerText = "Oui l'élément est dans sa propre portée, comme attendu !";
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p id="para"&gt;
+  Voici un paragraphe, pas vraiment intéressant mais bon.
+&lt;/p&gt;
+&lt;p id="output"&gt;&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<div>{{EmbedLiveSample('Exemples')}}</div>
+
+<h2 id="Spéifications">Spéifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#the-scope-pseudo', ':scope')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une <em>pull request</em> sur ce dépôt: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("css.selectors.scope")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> {{cssxref(":root")}}</li>
+ <li><a href="/fr/docs/Web/API/Document_Object_Model/Localisation_des_éléments_DOM_avec_les_sélecteurs">Localiser des éléments du DOM grâce aux sélecteurs</a></li>
+ <li>{{domxref("Element.querySelector()")}} et {{domxref("Element.querySelectorAll()")}}</li>
+ <li>{{domxref("Document.querySelector()")}} et {{domxref("Document.querySelectorAll()")}}</li>
+ <li>{{domxref("DocumentFragment.querySelector()")}} et {{domxref("DocumentFragment.querySelectorAll()")}}</li>
+ <li>{{domxref("ParentNode.querySelector()")}} et {{domxref("ParentNode.querySelectorAll()")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_target/index.html b/files/fr/web/css/_colon_target/index.html
new file mode 100644
index 0000000000..bba7c3b8b3
--- /dev/null
+++ b/files/fr/web/css/_colon_target/index.html
@@ -0,0 +1,240 @@
+---
+title: ':target'
+slug: 'Web/CSS/:target'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:target'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:target</code></strong> permet de cibler l'unique élément (s'il existe) dont l'attribut {{htmlattrxref("id")}} correspond au fragment d'identifiant de l'URI du document.</p>
+
+<pre class="brush: css no-line-numbers">/* Cible un élément dont l'identifiant      */
+/* correspond au fragment de l'URL courante */
+:target {
+  border: 2px solid black;
+}</pre>
+
+<p>Les URI comportant des fragments d'identifiant peuvent être utilisées pour créer des liens vers un élément donné d'un document qu'on appellera l'élément cible (<em>target element</em>). Voici un exemple d'URI qui pointe vers une <em>ancre</em> intitulée <code>section2</code> :</p>
+
+<pre>http://exemple.com/chemin/document.html#section2</pre>
+
+<p>L'élément suivant sera donc ciblé par le sélecteur <code>:target</code> avec l'URL précédente :</p>
+
+<pre class="brush: html">&lt;section id="section2"&gt;Exemple&lt;/section&gt;</pre>
+
+<div class="note"><strong>Note :</strong> L'attribut <code>id</code> a été ajouté avec HTML 4 (décembre 1997). Dans les anciennes versions de HTML, <code>&lt;a&gt;</code> était nécessairement l'élément cible. La pseudo-classe <code>:target</code> permet également de gérer ces cibles.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemples_simples">Exemples simples</h3>
+
+<pre class="brush:css">/* Exemple de code pouvant être utilisé dans une feuille
+   de style utilisateur. Une flèche rouge/jaune indique
+   l'élément cible. */
+
+:target {
+  box-shadow: 0.2em 0.2em 0.3em #888;
+}
+
+:target:before {
+  font:           70% Arial,"Nimbus Sans L",sans-serif !important;
+  content:        "\25ba";  /* ► */
+  color:          red;
+  background:     gold;
+  border:         solid thin;
+  padding-left:   1px;
+  display:        inline-block;
+  margin-right:   0.13em;
+  vertical-align: 20%;
+}
+</pre>
+
+<h3 id="Manipuler_les_éléments_avec_display_none">Manipuler les éléments avec <code>display: none</code></h3>
+
+<p>La pseudo-classe <code>:target</code> s'accommode également des éléments qui ne sont pas affichés.</p>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">#newcomment {
+  display: none;
+}
+
+#newcomment:target {
+  display: block;
+}</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;&lt;a href="#newcomment"&gt;Ajouter un commentaire&lt;/a&gt;&lt;/p&gt;
+&lt;div id="newcomment"&gt;
+  &lt;form&gt;
+  &lt;p&gt;Saisir un commentaire :&lt;br /&gt;
+  &lt;textarea&gt;&lt;/textarea&gt;&lt;/p&gt;
+  &lt;/form&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Manipuler_les_éléments_avec_display:_none")}}</p>
+
+<h3 id="Révéler_des_éléments">Révéler des éléments</h3>
+
+<p><code>:target</code> peut être utile afin de révéler/masquer certains éléments invisibles.</p>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">div.lightbox {
+  display: none;
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
+div.lightbox:target {
+  display: table;
+}
+
+div.lightbox figure {
+  display: table-cell;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  vertical-align: middle;
+}
+
+div.lightbox figure figcaption {
+  display: block;
+  margin: auto;
+  padding: 8px;
+  background-color: #ddbbff;
+  height: 250px;
+  position: relative;
+  overflow: auto;
+  border: 1px #000000 solid;
+  border-radius: 10px;
+  text-align: justify;
+  font-size: 14px;
+}
+
+div.lightbox figure .closemsg {
+  display: block;
+  margin: auto;
+  height: 0;
+  overflow: visible;
+  text-align: right;
+  z-index: 2;
+  cursor: default;
+}
+
+div.lightbox figure .closemsg, div.lightbox figure figcaption {
+  width: 300px;
+}
+
+.closemsg::after {
+  content: "\00D7";
+  display: inline-block;
+  position: relative;
+  right: -20px;
+  top: -10px;
+  z-index: 3;
+  color: #ffffff;
+  border: 1px #ffffff solid;
+  border-radius: 10px;
+  width: 20px;
+  height: 20px;
+  line-height: 18px;
+  text-align: center;
+  margin: 0;
+  background-color: #000000;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.closemsg::before {
+  content: "";
+  display: block;
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #000000;
+  opacity: 0.85;
+}</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;Un texte pour l'exemple&amp;hellip;&lt;/p&gt;
+&lt;p&gt;[ &lt;a href="#exemple1"&gt;Ouvrir l'exemple n°1&lt;/a&gt; | &lt;a href="#exemple2"&gt; Ouvrir l'exemple n°2&lt;/a&gt; ]&lt;/p&gt;
+&lt;p&gt;Un autre texte pour l'exemple&amp;hellip;&lt;/p&gt;
+&lt;div class="lightbox" id="exemple1"&gt;
+  &lt;figure&gt;
+    &lt;a href="#" class="closemsg"&gt;&lt;/a&gt;
+    &lt;figcaption&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec felis enim, placerat id eleifend eu, semper vel sem. Sed interdum commodo enim venenatis pulvinar. Proin mattis lorem vitae diam scelerisque hendrerit. Fusce cursus imperdiet mauris, vitae hendrerit velit dignissim a. Suspendisse potenti. Aenean feugiat facilisis diam, in posuere sapien mattis vel. Proin molestie rutrum diam, pharetra feugiat ligula sollicitudin sed. Etiam cursus diam quis tellus aliquam gravida. Aliquam erat volutpat.&lt;br /&gt;
+    Etiam varius adipiscing mi eget imperdiet. Nulla quis vestibulum leo. Integer molestie massa ut massa commodo in blandit purus aliquam. Mauris sit amet posuere massa. Ut a eleifend augue. Proin sodales mauris nec tellus pharetra dictum.&lt;/figcaption&gt;
+  &lt;/figure&gt;
+&lt;/div&gt;
+
+&lt;div class="lightbox" id="exemple2"&gt;
+  &lt;figure&gt;
+    &lt;a href="#" class="closemsg"&gt;&lt;/a&gt;
+    &lt;figcaption&gt;Cras risus odio, pharetra nec ultricies et, mollis ac augue. Nunc et diam quis sapien dignissim auctor. Quisque quis neque arcu, nec gravida magna. Etiam ullamcorper augue quis orci posuere et tincidunt augue semper. Maecenas varius augue eu orci auctor bibendum tristique ligula egestas. Morbi pharetra tortor iaculis erat porta id aliquam leo cursus. Ut nec elit vel mauris dapibus lacinia eget sed odio.&lt;/figcaption&gt;
+  &lt;/figure&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Révéler_des_éléments")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "browsers.html#selector-target", ":target")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Définition de la sémantique relative à HTML.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors", "#the-target-pseudo", ":target")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Selectors", "#target-pseudo", ":target")}}</td>
+   <td>{{Spec2("CSS3 Selectors")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une <em>pull request</em> sur ce dépôt: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("css.selectors.target")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Selectors/Using_the_%3Atarget_pseudo-class_in_selectors">Utiliser la pseudo-classe <code>:target</code> dans les sélecteurs</a></li>
+ <li><a href="https://madmurphy.github.io/takefive.css/">Un exemple d'utilisation de <code>:target</code> pour un système de diapositives, sur GitHub</a></li>
+</ul>
diff --git a/files/fr/web/css/_colon_valid/index.html b/files/fr/web/css/_colon_valid/index.html
new file mode 100644
index 0000000000..5a37129d22
--- /dev/null
+++ b/files/fr/web/css/_colon_valid/index.html
@@ -0,0 +1,120 @@
+---
+title: ':valid'
+slug: 'Web/CSS/:valid'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:valid'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:valid</code></strong> permet de cibler tout élément {{HTMLElement("input")}} ou {{HTMLElement("form")}} dont la <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">validation</a> du contenu s'effectue correctement par rapport au type de donnée attendu. On peut ainsi facilement mettre en forme les champs correctement remplis par l'utilisateur.</p>
+
+<pre class="brush: css no-line-numbers">input:valid {
+  background-color: #ddffdd;
+}</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Cet exemple présente un formulaire dont les éléments se colorent en vert lorsqu'ils sont valides et en rouge lorsqu'ils sont invalides.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input:invalid {
+  background-color: #ffdddd;
+}
+
+form:invalid {
+  border: 5px solid #ffdddd;
+}
+
+input:valid {
+  background-color: #ddffdd;
+}
+
+form:valid {
+  border: 5px solid #ddffdd;
+}
+
+input:required {
+  border-color: #800000;
+  border-width: 3px;
+}
+
+input:required:valid {
+  border-color: #008000;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;label&gt;Veuillez saisir une URL :&lt;/label&gt;
+  &lt;input type="url"&gt;
+  &lt;br&gt;
+  &lt;br&gt;
+  &lt;label&gt;Veuillez saisir une adresse électronique :&lt;/label&gt;
+  &lt;input type="email" required&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples',600,150)}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>La couleur rouge est généralement utilisée afin d'indiquer une valeur invalide. Les personnes ayant du mal à différencier les couleurs ne seront pas capables de déterminer la validité du champ si celui-ci n'est pas accompagné d'un indicateur qui n'est pas basé sur une couleur. Pour résoudre ce problème, on pourra utiliser un texte indicatif et/ou une icône.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Explications des recommendation WCAG 1.4</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" rel="noopener">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#selector-valid', ':valid')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#selector-valid', ':valid')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Définition de la sémantique relative à HTML et aux contraintes de validation.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#validity-pseudos', ':valid')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.valid")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":invalid")}}</li>
+ <li>{{cssxref(":required")}}</li>
+ <li>{{cssxref(":optional")}}</li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">La validation des données d'un formulaire</a></li>
+ <li><a href="/fr/docs/Web/API/ValidityState">Accéder à l'état de validité en JavaScript</a></li>
+</ul>
diff --git a/files/fr/web/css/_colon_visited/index.html b/files/fr/web/css/_colon_visited/index.html
new file mode 100644
index 0000000000..5d54e0de21
--- /dev/null
+++ b/files/fr/web/css/_colon_visited/index.html
@@ -0,0 +1,113 @@
+---
+title: ':visited'
+slug: 'Web/CSS/:visited'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:visited'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:visited</code></strong> permet de modifier l'aspect d'un lien après que l'utilisateur l'a visité. Pour des raisons relatives à la vie privée, les propriétés qui peuvent être utilisées sont restreintes.</p>
+
+<pre class="brush: css no-line-numbers">a:visited {
+  color: #4b2f89;
+}</pre>
+
+<p>Cette mise en forme peut être écrasée par toute autre pseudo-classe liée aux liens ({{cssxref(":link")}}, {{cssxref(":hover")}}, et {{cssxref(":active")}}) qui apparaîtrait dans les règles CSS suivantes. Il est donc important de bien ordonner les pseudo-classes pour une bonne mise en forme : <code>:visited</code> doit être utilisée après une règle basée sur <code>:link</code>, mais avant les autres  (<code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>).</p>
+
+<h2 id="Restrictions">Restrictions</h2>
+
+<p>Pour des raisons de vie privée, les navigateurs limitent les propriétés qui peuvent être appliquées à cette pseudo-classe :</p>
+
+<ul>
+ <li>Les propriétés CSS autorisées sont  {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-top-color")}}, {{cssxref("outline-color")}}, {{cssxref("column-rule-color")}}</li>
+ <li>Les attributs SVG autorisés sont {{SVGAttr("fill")}} and {{SVGAttr("stroke")}}.</li>
+ <li>La composante alpha sera ignorée : la composante alpha d'un lien non-visité est utilisé à la place (sauf quand l'opacité est <code>0</code>, dans ce cas, toute la couleur est ignorée, ainsi que celle de la règle non-visité).</li>
+ <li>Bien qu'on puisse modifier la couleur d'un lien, la méthode {{domxref("window.getComputedStyle")}} mentira et indiquera toujours la valeur de la couleur de la règle pour les liens non-visités.</li>
+</ul>
+
+<p>Pour d'autres informations sur ces limitations et leurs raisons d'être, se référer à l 'article <a href="/fr/docs/Web/CSS/:visited_et_la_vie_privée">Vie privée et le sélecteur <code>:visited</code></a>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">a:visited { color: #00ff00; }</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;&lt;a href="https://developer.mozilla.org/fr/docs/Web/CSS/:visited"&gt;
+  Cette page est visitée
+&lt;/a&gt;&lt;/p&gt;
+&lt;p&gt;&lt;a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/"&gt;
+  Essayez celle-ci peut-être ?
+&lt;/a&gt;&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'scripting.html#selector-visited', ':visited')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#link', ':visited')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#link', ':visited')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':visited')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Suppression de la restriction limitant son usage à l'élément {{HTMLElement("a")}}. Permission donnée aux navigateurs de limiter le comportement de cette pseudo-classe pour des questions de vie privée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#anchor-pseudo-classes', ':visited')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une <em>pull request</em> sur ce dépôt: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("css.selectors.visited")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Privacy_and_the_:visited_selector">Vie privée et le sélecteur <code>:visited</code></a></li>
+ <li>Les pseudo-classes relatives aux liens :
+  <ul>
+   <li>{{cssxref(":link")}},</li>
+   <li>{{cssxref(":visited")}},</li>
+   <li>{{cssxref(":hover")}},</li>
+   <li>{{cssxref(":active")}}.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/_colon_visited_et_la_vie_privée/index.html b/files/fr/web/css/_colon_visited_et_la_vie_privée/index.html
new file mode 100644
index 0000000000..5f5a3655e8
--- /dev/null
+++ b/files/fr/web/css/_colon_visited_et_la_vie_privée/index.html
@@ -0,0 +1,73 @@
+---
+title: 'Le sélecteur :visited et la vie privée'
+slug: 'Web/CSS/:visited_et_la_vie_privée'
+tags:
+  - CSS
+  - Guide
+  - Sécurité
+translation_of: 'Web/CSS/Privacy_and_the_:visited_selector'
+---
+<div>{{CSSRef}}</div>
+
+<p>Par le passé (avant 2010), le sélecteur CSS {{cssxref(":visited")}} permettait aux sites d'effectuer des requêtes sur l'historique de l'utilisateur grâce à la méthode {{domxref("window.getComputedStyle")}} ou à d'autre techniques, parcourant l'historique de l'utilisateur afin de connaître les sites qu'il avait visité. Cela pouvait effectué rapidement et permettait d'obtenir beaucoup d'informations sur l'identité d'un utilisateur.</p>
+
+<p>Afin de palier au problème, Gecko ({{Gecko("2")}}) a été modifié afin de limiter la quantité d'informations qui peut être obtenue au travers des liens visités. Les autres navigateurs ont également été modifiés de façon semblable.</p>
+
+<h2 id="Quelques_petits_mensonges_pour_se_protéger">Quelques petits mensonges pour se protéger</h2>
+
+<p>La première modification consiste à faire mentir Gecko envers les applications web sous certaines circonstances. </p>
+
+<ul>
+ <li><code>window.getComputedStyle()</code> et les fonctions analogues comme {{domxref("element.querySelector()")}} renverront toujours des valeurs indiquant que l'utilisateur n'a jamais visité aucun des liens présents sur une page.</li>
+ <li>Si on utilise un sélecteur d'élément voisin comme <code>:visited + span</code>, l'élément {{htmlelement("span")}} sera mis en forme comme si le lien n'avait pas été visité.</li>
+ <li>Enfin, dans quelques rares scénarios, si on utilise des liens imbriqués et que l'élément ciblé par CSS diffère du lien dont on souhaite savoir s'il a été visité, cet élément sera dessiné comme si le lien n'avait pas été visité.</li>
+</ul>
+
+<h2 id="Les_limites_de_la_mise_en_forme_applicable_aux_liens_visités">Les limites de la mise en forme applicable aux liens visités</h2>
+
+<p>On peut toujours mettre en forme les liens visités mais quelques limites s'appliquent désormais. Seule les propriétés suivantes pourront être appliquées aux liens visités :</p>
+
+<ul>
+ <li>{{cssxref("color")}},</li>
+ <li>{{cssxref("background-color")}},</li>
+ <li>{{cssxref("border-color")}} (et les propriétés détaillées associées),</li>
+ <li>{{cssxref("column-rule-color")}},</li>
+ <li>{{cssxref("outline-color")}},</li>
+ <li>Les composantes de couleur liées aux attributs SVG {{SVGAttr("fill")}} et {{SVGAttr("stroke")}}.</li>
+</ul>
+
+<p>De plus, même pour ces propriétés, il n'est pas possible de modifier la transparence entre les liens qui ont été visités et les autres (comme on pourrait le faire par ailleurs avec <code><a href="https://developer.mozilla.org/fr/docs/Web/CSS/Type_color#rgb()_et_rgba()">rgba()</a></code> ou <code><a href="/fr/docs/Web/CSS/Type_color#hsl()_et_hsla()">hsla()</a></code> ou avec le mot-clé <code><a href="/fr/docs/Web/CSS/Type_color#Le_mot-cl%C3%A9_transparent">transparent</a></code>).</p>
+
+<p>Voici un exemple de mise en forme prenant en compte ces restrictions :</p>
+
+<pre class="brush: css">:link {
+  outline: 1px dotted blue;
+  background-color: white;
+  /* La valeur par défaut de background-color est 'transparent'.
+     et il faut donc une valeur différente, sinon les modifications
+     pour :visited ne s'appliqueront pas. */
+}
+
+:visited {
+  outline-color: orange;     /* Les liens visités auront un contour orange */
+  color: yellow;             /* Le texte des liens visités sera en jaune   */
+  background-color: green;   /* L'arrière-plan des liens visités sera vert */
+}
+</pre>
+
+<h2 id="Impact_sur_les_développeurs_web">Impact sur les développeurs web</h2>
+
+<p>De façon générale, cela ne devrait pas impacter les développeurs de façon significative. Il faudra toutefois appliquer les modifications suivantes aux sites :</p>
+
+<ul>
+ <li>L'utilisation d'images d'arrière-plan pour la mise en forme des liens visités ne fonctionnera plus car seules les couleurs peuvent être utilisées pour les mettre en avant.</li>
+ <li>Les couleurs qui seraient transparentes de façon normale ne seront pas affichées si elles participent à la mise en forme d'un sélecteur <code>:visited</code>.</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/">Les modifications apportées à <code>:visited</code> pour la vie privée (en anglais)</a> sur Mozilla Hacks</li>
+ <li><a href="https://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/">Colmater la fuite de l'historique via CSS (en anglais)</a> sur le blog de sécurité Mozilla</li>
+ <li><a href="http://dbaron.org/mozilla/visited-privacy">Empêcher les attaques vers l'historique de l'utilisateur perpétrées via <code>:visited</code> (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/_colon_where/index.html b/files/fr/web/css/_colon_where/index.html
new file mode 100644
index 0000000000..7b1eac9461
--- /dev/null
+++ b/files/fr/web/css/_colon_where/index.html
@@ -0,0 +1,52 @@
+---
+title: ':where()'
+slug: 'Web/CSS/:where'
+tags:
+  - CSS
+  - Experimental
+  - Pseudo-classe
+  - Reference
+  - Sélecteur
+translation_of: 'Web/CSS/:where'
+---
+<div>{{CSSRef}}{{Draft}}{{SeeCompatTable}}</div>
+
+<p>La pseudo-classe fonctionnelle <strong><code>:where()</code></strong> prend comme argument une liste de sélecteurs et cible tout élément qui peut être sélectionné par l'un des sélecteurs de la liste.</p>
+
+<p>La différence entre <code>:where()</code> et {{CSSxRef(":is", ":is()")}} est la suivante : <code>:where()</code> aura toujours <a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/La_cascade_et_l_héritage#Spécificité">une spécificité</a> nulle tandis que <code>:is()</code> prend la spécificité du sélecteur passé en argument le plus spécifique.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors", "#zero-matches", ":where()")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.where")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{CSSxRef(":is", ":is()")}} {{Experimental_Inline}}</li>
+ <li><a href="/fr/docs/Web/Web_Components">Les composants web</a></li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-moz-color-swatch/index.html b/files/fr/web/css/_doublecolon_-moz-color-swatch/index.html
new file mode 100644
index 0000000000..c2555bb941
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-moz-color-swatch/index.html
@@ -0,0 +1,60 @@
+---
+title: '::-moz-color-swatch'
+slug: 'Web/CSS/::-moz-color-swatch'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::-moz-color-swatch'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le <a href="/fr/docs/Web/CSS/Pseudo-elements">pseudo-élément</a> <strong><code>::-moz-color-swatch</code></strong> est <a href="/fr/docs/Web/CSS/Extensions_Mozilla">un pseudo-élément spécifique à Mozilla</a> qui représente la couleur sélectionnée d'un élément {{HTMLElement("input")}} avec <code>type="color"</code>.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Utiliser <code>::-moz-color-swatch</code> sur tout autre élément qu'un  <code>&lt;input type="color"&gt;</code> n'aura aucun effet.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input type="color" value="#de2020"/&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input[type=color]::-moz-color-swatch {
+  border-radius: 10px;
+  border-style: none;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 300, 50)}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<p>Ce pseudo-élément est spécifique à Gecko et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-moz-color-swatch")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les pseudo-éléments semblables utilisés par les autres navigateurs :
+  <ul>
+   <li>{{cssxref("::-webkit-color-swatch")}} pris en charge par WebKit et Blink (utilisés par Safari, Chrome et Opera)</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-moz-list-bullet/index.html b/files/fr/web/css/_doublecolon_-moz-list-bullet/index.html
new file mode 100644
index 0000000000..f394c8a1c1
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-moz-list-bullet/index.html
@@ -0,0 +1,55 @@
+---
+title: '::-moz-list-bullet'
+slug: 'Web/CSS/::-moz-list-bullet'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/:-moz-list-bullet'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>Le <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-élément CSS</a> non-standard <strong><code>::-moz-list-bullet</code></strong> de Mozilla est utilisé pour appliquer un style aux puces des éléments d'une liste non ordonnée (autrement dit, pour un élément {{htmlelement("li")}}) contenu dans un élément {{htmlelement("ul")}}).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">li::-moz-list-bullet { <em>propriétés de style</em> }</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;Numéro 1&lt;/li&gt;
+  &lt;li&gt;Numéro 2&lt;/li&gt;
+  &lt;li&gt;Numéro 3&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;ul class="list"&gt;
+  &lt;li&gt;Numéro 1&lt;/li&gt;
+  &lt;li&gt;Numéro 2&lt;/li&gt;
+  &lt;li&gt;Numéro 3&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.list ::-moz-list-bullet {
+  font-size: 36px;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '', '', '', 'Web/CSS/:-moz-list-bullet')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":-moz-list-number")}}</li>
+ <li>{{cssxref("::marker")}}</li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-moz-list-number/index.html b/files/fr/web/css/_doublecolon_-moz-list-number/index.html
new file mode 100644
index 0000000000..0f12741d94
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-moz-list-number/index.html
@@ -0,0 +1,52 @@
+---
+title: '::-moz-list-number'
+slug: 'Web/CSS/::-moz-list-number'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/:-moz-list-number'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>Le <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-élément CSS</a> <strong><code>::-moz-list-number</code></strong> permet de personnaliser l'apparence des numéros des éléments de liste ({{HTMLElement("li")}}) au sein des listes numérotées ({{HTMLElement("ol")}}).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">li::-moz-list-number { <em>propriétés de style</em> }
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">li::-moz-list-number {
+  font-style: italic;
+  font-weight: bold;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html">&lt;ol&gt;
+  &lt;li&gt;Premier élément&lt;/li&gt;
+  &lt;li&gt;Second élément&lt;/li&gt;
+  &lt;li&gt;Troisième élément&lt;/li&gt;
+&lt;/ol&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemple")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":-moz-list-bullet")}}</li>
+ <li>{{cssxref("::marker")}}</li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-moz-page-sequence/index.html b/files/fr/web/css/_doublecolon_-moz-page-sequence/index.html
new file mode 100644
index 0000000000..1176bd6b65
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-moz-page-sequence/index.html
@@ -0,0 +1,34 @@
+---
+title: '::-moz-page-sequence'
+slug: 'Web/CSS/::-moz-page-sequence'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::-moz-page-sequence'
+---
+<div>{{CSSRef}}{{non-standard_header}}</div>
+
+<p>Le pseudo-élément <code>::-moz-page-sequence</code>, spécifique à Mozilla, représente l'arrière-plan du document lors de la prévisualisation avant une impression.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-moz-page-sequence")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("::-moz-page")}}</li>
+ <li>{{cssxref("::-moz-scrolled-page-sequence")}}</li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-moz-page/index.html b/files/fr/web/css/_doublecolon_-moz-page/index.html
new file mode 100644
index 0000000000..b5a265403d
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-moz-page/index.html
@@ -0,0 +1,34 @@
+---
+title: '::-moz-page'
+slug: 'Web/CSS/::-moz-page'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::-moz-page'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>Le <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-élément</a> CSS <code>::-moz-page</code>, spécifique à Mozilla, est appliqué aux pages individuelles dans les impressions ou les aperçus avant impression.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-moz-page")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("::-moz-page-sequence")}}</li>
+ <li>{{cssxref("::-moz-scrolled-page-sequence")}}</li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-moz-progress-bar/index.html b/files/fr/web/css/_doublecolon_-moz-progress-bar/index.html
new file mode 100644
index 0000000000..bd587d7c2e
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-moz-progress-bar/index.html
@@ -0,0 +1,51 @@
+---
+title: '::-moz-progress-bar'
+slug: 'Web/CSS/::-moz-progress-bar'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::-moz-progress-bar'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>Le pseudo-élément <strong><code>::-moz-progress-bar</code></strong> s'appliquant à la zone d'élément HTML {{HTMLElement("progress")}} représente la valeur de la progression effectuée jusqu'à présent. Vous pourrez par exemple, modifier la couleur de la barre de progression.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#redbar::-moz-progress-bar {
+  background-color: red;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html;">&lt;progress id="redbar" value="30" max="100"&gt;30 %&lt;/progress&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<p>Une barre de progression mise en forme de cette façon devrait ressembler à :</p>
+
+<p><img alt="Custom styled progress bar" class="default internal" src="/@api/deki/files/5387/=redbar.png"></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("progress")}}</li>
+ <li>{{cssxref("::-ms-fill")}}</li>
+ <li>{{cssxref("::-webkit-progress-bar")}}</li>
+ <li>{{cssxref("::-webkit-progress-value")}}</li>
+ <li>{{cssxref("::-webkit-progress-inner-element")}}</li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-moz-range-progress/index.html b/files/fr/web/css/_doublecolon_-moz-range-progress/index.html
new file mode 100644
index 0000000000..4d7787f37a
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-moz-range-progress/index.html
@@ -0,0 +1,69 @@
+---
+title: '::-moz-range-progress'
+slug: 'Web/CSS/::-moz-range-progress'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::-moz-range-progress'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le pseudo-élément <strong><code>::-moz-range-progress</code></strong> représente la portion de la piste d'un élément {{HTMLElement("input")}} de type <code>range</code>, qui correspond aux valeurs inférieures à la valeur sélectionnée par le curseur.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Si <code>::-moz-range-progress</code> est utilisé sur autre chose qu'un élément <code>&lt;input type="range"&gt;</code>, il n'aura aucun effet.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input[type=range]::-moz-range-progress {
+  background-color: green;
+  height: 1em;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input type="range" min="0" max="100" step="5" value="50"/&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 300, 50)}}</p>
+
+<p>Une barre de progression mise en forme avec cette déclaration devrait ressembler à :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12041/Screen%20Shot%202015-12-04%20at%2020.14.48.png"></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-moz-range-progress")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les pseudo-éléments de Gecko qui permettent de mettre en forme les autres parties des éléments {{HTMLElement("input")}} de type <code>range</code> :
+
+  <ul>
+   <li>{{cssxref("::-moz-range-thumb")}}</li>
+   <li>{{cssxref("::-moz-range-track")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("::-ms-fill-upper")}} pris en charge par Internet Explorer et Ege</li>
+ <li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">CSS-Tricks : Gérer des champs <code>input</code> de type <code>range</code> de façon compatible entre les navigateurs (en anglais)</a></li>
+ <li><a href="https://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html">QuirksMode : Mettre en forme les pistes et curseurs</a></li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-moz-range-thumb/index.html b/files/fr/web/css/_doublecolon_-moz-range-thumb/index.html
new file mode 100644
index 0000000000..a66f6a3d83
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-moz-range-thumb/index.html
@@ -0,0 +1,73 @@
+---
+title: '::-moz-range-thumb'
+slug: 'Web/CSS/::-moz-range-thumb'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::-moz-range-thumb'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le pseudo-élément <strong><code>::-moz-range-thumb</code></strong> représente le curseur qui se déplace le long de la piste dans un élément {{HTMLElement("input")}} de type <code>range</code> et qui permet de modifier la valeur numérique associée.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Utiliser <code>::-moz-range-thumb</code> avec un autre élément que  <code>&lt;input type="range"&gt;</code> n'aura aucun effet.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input[type=range]::-moz-range-thumb {
+  background-color: green;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input type="range" min="0" max="100" step="5" value="50"/&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 300, 50)}}</p>
+
+<p>Une barre de progression mise en forme avec ces règles devrait ressembler à :</p>
+
+<p><img alt="The thumb of the &lt;input type=right> styled in green" src="https://mdn.mozillademos.org/files/12027/Screen%20Shot%202015-12-04%20at%2013.30.08.png"></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-moz-range-thumb")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les pseudo-éléments de Gecko qui permettent de mettre en forme les autres parties des éléments {{HTMLElement("input")}} de type <code>range</code> :
+
+  <ul>
+   <li>{{cssxref("::-moz-range-track")}}</li>
+   <li>{{cssxref("::-moz-range-progress")}}</li>
+  </ul>
+ </li>
+ <li>Les pseudo-éléments utilisés par les autres navigateurs :
+  <ul>
+   <li>{{cssxref("::-webkit-slider-thumb")}} pour WebKit/Blink (Safari, Chrome et Opera).</li>
+   <li>{{cssxref("::-ms-thumb")}} pour Internet Explorer/Edge.</li>
+  </ul>
+ </li>
+ <li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">CSS-Tricks : Gérer des champs <code>input</code> de type <code>range</code> de façon compatible entre les navigateurs (en anglais)</a></li>
+ <li><a href="https://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html">QuirksMode : Mettre en forme les pistes et curseurs</a></li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-moz-range-track/index.html b/files/fr/web/css/_doublecolon_-moz-range-track/index.html
new file mode 100644
index 0000000000..5021c16237
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-moz-range-track/index.html
@@ -0,0 +1,72 @@
+---
+title: '::-moz-range-track'
+slug: 'Web/CSS/::-moz-range-track'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::-moz-range-track'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le pseudo-élément <strong><code>::-moz-range-track</code></strong> est un pseudo-élément spsécifique à Mozilla et représente la piste d'un élément {{HTMLElement("input")}} de type <code>range</code>.</p>
+
+<div class="note">
+<p><strong>Note :</strong> <code>::-moz-range-track</code> n'aura aucun effet s'il est utilisé sur autre chose qu'un élément <code>&lt;input type="range"&gt;</code>.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input[type=range]::-moz-range-track {
+  background-color: green;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input type="range" min="0" max="100" step="5" value="50"/&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 300, 50)}}</p>
+
+<p>Une barre de progression mise en forme de cette façon devrait ressembler à :</p>
+
+<p><img alt="A range with the track green." src="https://mdn.mozillademos.org/files/11999/Screen%20Shot%202015-12-04%20at%2010.14.34.png"></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-moz-range-track")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les pseudo-éléments de Gecko qui permettent de mettre en forme les autres parties des éléments {{HTMLElement("input")}} de type <code>range</code> :
+
+  <ul>
+   <li>{{cssxref("::-moz-range-thumb")}} qui représente le curseur qui se déplace le long de la piste.</li>
+   <li>{{cssxref("::-moz-range-progress")}} qui représente la partie inférieure de la piste (ce qui est déjà « couvert »).</li>
+  </ul>
+ </li>
+ <li>Les pseudo-éléments utilisés par les autres navigateurs :
+  <ul>
+   <li>{{cssxref("::-webkit-slider-runnable-track")}} pour WebKit/Blink (Safari, Chrome et Opera).</li>
+   <li>{{cssxref("::-ms-track")}} pour Internet Explorer/Edge.</li>
+  </ul>
+ </li>
+ <li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">CSS-Tricks : Gérer des champs <code>input</code> de type <code>range</code> de façon compatible entre les navigateurs (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-moz-scrolled-page-sequence/index.html b/files/fr/web/css/_doublecolon_-moz-scrolled-page-sequence/index.html
new file mode 100644
index 0000000000..688f8a5a50
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-moz-scrolled-page-sequence/index.html
@@ -0,0 +1,34 @@
+---
+title: '::-moz-scrolled-page-sequence'
+slug: 'Web/CSS/::-moz-scrolled-page-sequence'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::-moz-scrolled-page-sequence'
+---
+<div>{{CSSRef}}{{non-standard_header}}</div>
+
+<p>Le pseudo-élément <strong><code>::-moz-scrolled-page-sequence</code></strong> est un pseudo-élément spécifique à Mozilla et représente l'arrière-plan de la prévisualisation de l'impression.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-moz-scrolled-page-sequence")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("::-moz-page")}}</li>
+ <li>{{cssxref("::-moz-page-sequence")}}</li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-ms-browse/index.html b/files/fr/web/css/_doublecolon_-ms-browse/index.html
new file mode 100644
index 0000000000..a1c0fc0ad9
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-ms-browse/index.html
@@ -0,0 +1,108 @@
+---
+title: '::-ms-browse'
+slug: 'Web/CSS/::-ms-browse'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Archive/Web/CSS/::-ms-browse'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le pseudo-élément <strong><code>::-ms-browse</code></strong> représente le bouton qui permet d'ouvrir l'explorateur de fichier d'un élément {{HTMLElement("input")}} de type <code>file</code>.</p>
+
+<h2 id="Propriétés_autorisées">Propriétés autorisées</h2>
+
+<p>Seules les propriétés CSS suivantes peuvent être utilisées avec une règle qui utilise un sélecteur avec <code>::-ms-browse</code>. Les autres propriétés sont ignorées.</p>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("-ms-background-position-x")}}</li>
+ <li>{{CSSxRef("-ms-background-position-y")}}</li>
+ <li>{{CSSxRef("-ms-high-contrast-adjust")}}</li>
+ <li>{{CSSxRef("background-clip")}}</li>
+ <li>{{CSSxRef("background-color")}}</li>
+ <li>{{CSSxRef("background-image")}}</li>
+ <li>{{CSSxRef("background-origin")}}</li>
+ <li>{{CSSxRef("background-repeat")}}</li>
+ <li>{{CSSxRef("background-size")}}</li>
+ <li>{{CSSxRef("border-bottom-color")}}</li>
+ <li>{{CSSxRef("border-bottom-left-radius")}}</li>
+ <li>{{CSSxRef("border-bottom-right-radius")}}</li>
+ <li>{{CSSxRef("border-bottom-style")}}</li>
+ <li>{{CSSxRef("border-bottom-width")}}</li>
+ <li>{{CSSxRef("border-left-color")}}</li>
+ <li>{{CSSxRef("border-left-style")}}</li>
+ <li>{{CSSxRef("border-left-width")}}</li>
+ <li>{{CSSxRef("border-right-color")}}</li>
+ <li>{{CSSxRef("border-right-style ")}}</li>
+ <li>{{CSSxRef("border-right-width")}}</li>
+ <li>{{CSSxRef("border-top-color")}}</li>
+ <li>{{CSSxRef("border-top-left-radius")}}</li>
+ <li>{{CSSxRef("border-top-right-radius ")}}</li>
+ <li>{{CSSxRef("border-top-style")}}</li>
+ <li>{{CSSxRef("border-top-width")}}</li>
+ <li>{{CSSxRef("box-shadow")}}</li>
+ <li>{{CSSxRef("box-sizing")}}</li>
+ <li>{{CSSxRef("color")}}</li>
+ <li>{{CSSxRef("cursor")}}</li>
+ <li>{{CSSxRef("display")}} (valeurss <code>block</code>, <code>inline-block</code> et <code>none</code>)</li>
+ <li>{{CSSxRef("@font-face")}}</li>
+ <li>{{CSSxRef("font-size")}}</li>
+ <li>{{CSSxRef("font-style")}}</li>
+ <li>{{CSSxRef("font-weight")}}</li>
+ <li>{{CSSxRef("height")}}</li>
+ <li>{{CSSxRef("margin-bottom")}}</li>
+ <li>{{CSSxRef("margin-left")}}</li>
+ <li>{{CSSxRef("margin-right")}}</li>
+ <li>{{CSSxRef("margin-top")}}</li>
+ <li>{{CSSxRef("opacity")}}</li>
+ <li>{{CSSxRef("outline-color")}}</li>
+ <li>{{CSSxRef("outline-style")}}</li>
+ <li>{{CSSxRef("outline-width")}}</li>
+ <li>{{CSSxRef("padding-bottom")}}</li>
+ <li>{{CSSxRef("padding-left")}}</li>
+ <li>{{CSSxRef("padding-right")}}</li>
+ <li>{{CSSxRef("padding-top")}}</li>
+ <li>{{CSSxRef("transform")}}</li>
+ <li>{{CSSxRef("transform-origin")}}</li>
+ <li>{{CSSxRef("visibility")}}</li>
+ <li>{{CSSxRef("width")}}</li>
+</ul>
+</div>
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">  {{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;label&gt;Choisir une image : &lt;input type="file"&gt;&lt;/label&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input[type="file"]::-ms-browse {
+  color: red;
+  background-color: yellow;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h3 id="Capture_d'écran_correspondante">Capture d'écran correspondante</h3>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12744/bandicam%202016-03-11%2017-19-55-369.jpg" style="height: 188px; width: 680px;"></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à Trident/Microsoft et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-ms-browse")}}</p>
diff --git a/files/fr/web/css/_doublecolon_-ms-check/index.html b/files/fr/web/css/_doublecolon_-ms-check/index.html
new file mode 100644
index 0000000000..7696ee6792
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-ms-check/index.html
@@ -0,0 +1,125 @@
+---
+title: '::-ms-check'
+slug: 'Web/CSS/::-ms-check'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Archive/Web/CSS/::-ms-check'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le pseudo-élément <strong><code>::-ms-check</code></strong> est <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">une extension Microsoft</a> qui représente la marque visuelle d'un élément {{HTMLElement("input")}} de <code>type="checkbox"</code> or <code>type="radio"</code>. Ce pseudo-élément n'est pas standard et est uniquement pris en charge par Internet Explorer et Edge.</p>
+
+<h2 id="Propriétés_autorisées">Propriétés autorisées</h2>
+
+<p>Seules certaines propriétés CSS peuvent être utilisées au sein d'une règle dont le sélecteur contient <code>::-ms-check</code>. Les autres propriétés seront ignorées.</p>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("-ms-background-position-x")}}</li>
+ <li>{{CSSxRef("-ms-background-position-y")}}</li>
+ <li>{{CSSxRef("-ms-high-contrast-adjust")}}</li>
+ <li>{{CSSxRef("background-clip")}}</li>
+ <li>{{CSSxRef("background-color")}}</li>
+ <li>{{CSSxRef("background-image")}}</li>
+ <li>{{CSSxRef("background-origin")}}</li>
+ <li>{{CSSxRef("background-repeat")}}</li>
+ <li>{{CSSxRef("background-size")}}</li>
+ <li>{{CSSxRef("border-bottom-color")}}</li>
+ <li>{{CSSxRef("border-bottom-left-radius")}}</li>
+ <li>{{CSSxRef("border-bottom-right-radius")}}</li>
+ <li>{{CSSxRef("border-bottom-style")}}</li>
+ <li>{{CSSxRef("border-bottom-width")}}</li>
+ <li>{{CSSxRef("border-left-color")}}</li>
+ <li>{{CSSxRef("border-left-style")}}</li>
+ <li>{{CSSxRef("border-left-width")}}</li>
+ <li>{{CSSxRef("border-right-color")}}</li>
+ <li>{{CSSxRef("border-right-style ")}}</li>
+ <li>{{CSSxRef("border-right-width")}}</li>
+ <li>{{CSSxRef("border-top-color")}}</li>
+ <li>{{CSSxRef("border-top-left-radius")}}</li>
+ <li>{{CSSxRef("border-top-right-radius ")}}</li>
+ <li>{{CSSxRef("border-top-style")}}</li>
+ <li>{{CSSxRef("border-top-width")}}</li>
+ <li>{{CSSxRef("box-shadow")}}</li>
+ <li>{{CSSxRef("box-sizing")}}</li>
+ <li>{{CSSxRef("color")}}</li>
+ <li>{{CSSxRef("cursor")}}</li>
+ <li>{{CSSxRef("display")}} (valeurs <code>block</code>, <code>inline-block</code> et <code>none</code>)</li>
+ <li>{{CSSxRef("@font-face")}}</li>
+ <li>{{CSSxRef("font-size")}}</li>
+ <li>{{CSSxRef("font-style")}}</li>
+ <li>{{CSSxRef("font-weight")}}</li>
+ <li>{{CSSxRef("height")}}</li>
+ <li>{{CSSxRef("margin-bottom")}}</li>
+ <li>{{CSSxRef("margin-left")}}</li>
+ <li>{{CSSxRef("margin-right")}}</li>
+ <li>{{CSSxRef("margin-top")}}</li>
+ <li>{{CSSxRef("opacity")}}</li>
+ <li>{{CSSxRef("outline-color")}}</li>
+ <li>{{CSSxRef("outline-style")}}</li>
+ <li>{{CSSxRef("outline-width")}}</li>
+ <li>{{CSSxRef("padding-bottom")}}</li>
+ <li>{{CSSxRef("padding-left")}}</li>
+ <li>{{CSSxRef("padding-right")}}</li>
+ <li>{{CSSxRef("padding-top")}}</li>
+ <li>{{CSSxRef("transform")}}</li>
+ <li>{{CSSxRef("transform-origin")}}</li>
+ <li>{{CSSxRef("visibility")}}</li>
+ <li>{{CSSxRef("width")}}</li>
+</ul>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>selecteur</em>::-ms-check
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input, label {
+  display: inline;
+}
+
+input[type=radio]::-ms-check {
+  /* Le cercle sera rouge comme l'option sera sélectionnée. */
+  color: red;
+  /* La bordure de l'élément sera rouge si l'option est sélectionnée */
+  border-color: red;
+}
+
+input[type=checkbox]::-ms-check {
+  /* La coche sera verte quand la case sera cochée. */
+  color: green;
+  /* La bordure de l'élément sera verte si la case est cochée */
+  border-color: red;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;label for="redButton"&gt;Rouge&lt;/label&gt;
+  &lt;input type="radio" id="redButton"&gt;&lt;br&gt;
+  &lt;label for="greenCheckbox"&gt;Verte&lt;/label&gt;
+  &lt;input type="checkbox" id="greenCheckbox"&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>La capture d'écran à gauche illustre le résultat obtenu avec Internet Explorer ou Edge.</p>
+
+<p>{{EmbedLiveSample('Exemples', '', '', 'https://mdn.mozillademos.org/files/15814/ie11-example.PNG', 'Web/CSS/::-ms-check')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à Trident/Microsoft et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-ms-check")}}</p>
diff --git a/files/fr/web/css/_doublecolon_-ms-clear/index.html b/files/fr/web/css/_doublecolon_-ms-clear/index.html
new file mode 100644
index 0000000000..fe06d95707
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-ms-clear/index.html
@@ -0,0 +1,137 @@
+---
+title: '::-ms-clear'
+slug: 'Web/CSS/::-ms-clear'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Archive/Web/CSS/::-ms-clear'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-élément</a> <strong><code>::-ms-clear</code></strong> représente le bouton qui permet d'effacer la valeur saisie dans un champ {{HTMLElement("input")}}. Ce bouton et ce pseudo-élément ne sont pas standards et sont uniquement pris en charge par Internet Explorer 10, 11 et Edge. Le bouton est uniquement affichés pour les champs textuels {{HTMLElement("input")}} non-vides et qui ont le focus.</p>
+
+<p>Le bouton de remise à zéro est uniquement affiché pour les contrôles textuels qui ont le focus et qui ne sont pas vides. Les contrôles concernés sont :</p>
+
+<ul>
+ <li>{{HTMLElement("input/color", '<code>&lt;input type="color"&gt;</code>')}}</li>
+ <li>{{HTMLElement("input/date", '<code>&lt;input type="date"&gt;</code>')}}</li>
+ <li>{{HTMLElement("input/datetime", '<code>&lt;input type="datetime"&gt;</code>')}}</li>
+ <li>{{HTMLElement("input/datetime-local", '<code>&lt;input type="datetime-local"&gt;</code>')}}</li>
+ <li>{{HTMLElement("input/email", '<code>&lt;input type="email"&gt;</code>')}}</li>
+ <li>{{HTMLElement("input/month", '<code>&lt;input type="month"&gt;</code>')}}</li>
+ <li>{{HTMLElement("input/number", '<code>&lt;input type="number"&gt;</code>')}}</li>
+ <li>{{HTMLElement("input/search", '<code>&lt;input type="search"&gt;</code>')}}</li>
+ <li>{{HTMLElement("input/tel", '<code>&lt;input type="tel"&gt;</code>')}}</li>
+ <li>{{HTMLElement("input/time", '<code>&lt;input type="time"&gt;</code>')}}</li>
+ <li>{{HTMLElement("input/url", '<code>&lt;input type="url"&gt;</code>')}}</li>
+ <li>{{HTMLElement("input/week", '<code>&lt;input type="week"&gt;</code>')}}</li>
+</ul>
+
+<h2 id="Propriétés_autorisées">Propriétés autorisées</h2>
+
+<p>Seules les propriétés CSS suivantes peuvent être utilisées dans une règle qui contient <code>::-ms-clear</code> dans son sélecteur (les autres propriétés seront ignorées).</p>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("-ms-high-contrast-adjust")}}</li>
+ <li>{{CSSxRef("background-clip")}}</li>
+ <li>{{CSSxRef("background-color")}}</li>
+ <li>{{CSSxRef("background-image")}}</li>
+ <li>{{CSSxRef("background-origin")}}</li>
+ <li>{{CSSxRef("background-position-x")}}</li>
+ <li>{{CSSxRef("background-position-y")}}</li>
+ <li>{{CSSxRef("background-repeat")}}</li>
+ <li>{{CSSxRef("background-size")}}</li>
+ <li>{{CSSxRef("border-bottom-color")}}</li>
+ <li>{{CSSxRef("border-bottom-left-radius")}}</li>
+ <li>{{CSSxRef("border-bottom-right-radius")}}</li>
+ <li>{{CSSxRef("border-bottom-style")}}</li>
+ <li>{{CSSxRef("border-bottom-width")}}</li>
+ <li>{{CSSxRef("border-left-color")}}</li>
+ <li>{{CSSxRef("border-left-style")}}</li>
+ <li>{{CSSxRef("border-left-width")}}</li>
+ <li>{{CSSxRef("border-right-color")}}</li>
+ <li>{{CSSxRef("border-right-style ")}}</li>
+ <li>{{CSSxRef("border-right-width")}}</li>
+ <li>{{CSSxRef("border-top-color")}}</li>
+ <li>{{CSSxRef("border-top-left-radius")}}</li>
+ <li>{{CSSxRef("border-top-right-radius ")}}</li>
+ <li>{{CSSxRef("border-top-style")}}</li>
+ <li>{{CSSxRef("border-top-width")}}</li>
+ <li>{{CSSxRef("box-shadow")}}</li>
+ <li>{{CSSxRef("box-sizing")}}</li>
+ <li>{{CSSxRef("color")}}</li>
+ <li>{{CSSxRef("cursor")}}</li>
+ <li>{{CSSxRef("display")}} (avec les valeurs <code>block</code>, <code>inline-block</code>, <code>none</code>)</li>
+ <li>{{CSSxRef("@font-face")}}</li>
+ <li>{{CSSxRef("font-size")}}</li>
+ <li>{{CSSxRef("font-style")}}</li>
+ <li>{{CSSxRef("font-weight")}}</li>
+ <li>{{CSSxRef("height")}}</li>
+ <li>{{CSSxRef("margin-bottom")}}</li>
+ <li>{{CSSxRef("margin-left")}}</li>
+ <li>{{CSSxRef("margin-right")}}</li>
+ <li>{{CSSxRef("margin-top")}}</li>
+ <li>{{CSSxRef("opacity")}}</li>
+ <li>{{CSSxRef("outline-color")}}</li>
+ <li>{{CSSxRef("outline-style")}}</li>
+ <li>{{CSSxRef("outline-width")}}</li>
+ <li>{{CSSxRef("padding-bottom")}}</li>
+ <li>{{CSSxRef("padding-left")}}</li>
+ <li>{{CSSxRef("padding-right")}}</li>
+ <li>{{CSSxRef("padding-top")}}</li>
+ <li>{{CSSxRef("transform")}}</li>
+ <li>{{CSSxRef("transform-origin")}}</li>
+ <li>{{CSSxRef("visibility")}}</li>
+ <li>{{CSSxRef("width")}}</li>
+</ul>
+</div>
+
+<h2 id="Syntaxe"><strong>Syntaxe</strong></h2>
+
+<pre class="syntaxbox"> <em>selecteur</em>::-ms-clear</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input,
+label {
+  display: block;
+}
+
+input[type=text]::-ms-clear {
+  color: red;<em> </em>/* La croix du bouton sera rouge. */
+  /* On peut cacher la croix avec display qui vaut "none" */
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;label for="firstname"&gt;First name:&lt;/label&gt;
+  &lt;input type="text" id="firstname" name="firstname" placeholder="First name"&gt;&lt;br&gt;
+
+  &lt;label for="lastname"&gt;Last name:&lt;/label&gt;
+  &lt;input type="text" id="lastname" name="lastname" placeholder="Second name"&gt;
+&lt;/form&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<p>Voici une capture d'écran du résultat obtenu avec IE 10/11 :</p>
+
+<p> <img alt="" src="https://mdn.mozillademos.org/files/12263/ms-clear-example.png" style="display: block; height: 75px; margin: 0px auto; width: 611px;"></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à Trident/Microsoft et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-ms-clear")}}</p>
diff --git a/files/fr/web/css/_doublecolon_-ms-expand/index.html b/files/fr/web/css/_doublecolon_-ms-expand/index.html
new file mode 100644
index 0000000000..f8f7b3ded3
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-ms-expand/index.html
@@ -0,0 +1,88 @@
+---
+title: '::-ms-expand'
+slug: 'Web/CSS/::-ms-expand'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Archive/Web/CSS/::-ms-expand'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le pseudo-élément <strong><code>::-ms-expand</code></strong> représente le bouton contenu dans un élément {{HTMLElement("select")}} et qui permet d'ouvrir ou de fermer le menu déroulant qui propose les options ({{HTMLElement("option")}}). Il est généralement représenté par un triangle orienté vers le bas.</p>
+
+<h2 id="Allowable_properties" name="Allowable_properties">Propriétés autorisées</h2>
+
+<p>Seules certaines propriétés CSS peuvent être utilisées dans une règle contenant <code>::-ms-expand</code> dans son sélecteur (les autres propriétés seront ignorées).</p>
+
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("-ms-high-contrast-adjust")}}</li>
+ <li>{{CSSxRef("background-clip")}}</li>
+ <li>{{CSSxRef("background-color")}}</li>
+ <li>{{CSSxRef("background-image")}}</li>
+ <li>{{CSSxRef("background-origin")}}</li>
+ <li>{{CSSxRef("background-position-x")}}</li>
+ <li>{{CSSxRef("background-position-y")}}</li>
+ <li>{{CSSxRef("background-repeat")}}</li>
+ <li>{{CSSxRef("background-size")}}</li>
+ <li>{{CSSxRef("border-bottom-color")}}</li>
+ <li>{{CSSxRef("border-bottom-left-radius")}}</li>
+ <li>{{CSSxRef("border-bottom-right-radius")}}</li>
+ <li>{{CSSxRef("border-bottom-style")}}</li>
+ <li>{{CSSxRef("border-bottom-width")}}</li>
+ <li>{{CSSxRef("border-left-color")}}</li>
+ <li>{{CSSxRef("border-left-style")}}</li>
+ <li>{{CSSxRef("border-left-width")}}</li>
+ <li>{{CSSxRef("border-right-color")}}</li>
+ <li>{{CSSxRef("border-right-style ")}}</li>
+ <li>{{CSSxRef("border-right-width")}}</li>
+ <li>{{CSSxRef("border-top-color")}}</li>
+ <li>{{CSSxRef("border-top-left-radius")}}</li>
+ <li>{{CSSxRef("border-top-right-radius ")}}</li>
+ <li>{{CSSxRef("border-top-style")}}</li>
+ <li>{{CSSxRef("border-top-width")}}</li>
+ <li>{{CSSxRef("box-shadow")}}</li>
+ <li>{{CSSxRef("box-sizing")}}</li>
+ <li>{{CSSxRef("color")}}</li>
+ <li>{{CSSxRef("cursor")}}</li>
+ <li>{{CSSxRef("display")}} (valeurs <code>block</code>, <code>inline-block</code>, <code>none</code>)</li>
+ <li>{{CSSxRef("@font-face")}}</li>
+ <li>{{CSSxRef("font-size")}}</li>
+ <li>{{CSSxRef("font-style")}}</li>
+ <li>{{CSSxRef("font-weight")}}</li>
+ <li>{{CSSxRef("height")}}</li>
+ <li>{{CSSxRef("margin-bottom")}}</li>
+ <li>{{CSSxRef("margin-left")}}</li>
+ <li>{{CSSxRef("margin-right")}}</li>
+ <li>{{CSSxRef("margin-top")}}</li>
+ <li>{{CSSxRef("opacity")}}</li>
+ <li>{{CSSxRef("outline-color")}}</li>
+ <li>{{CSSxRef("outline-style")}}</li>
+ <li>{{CSSxRef("outline-width")}}</li>
+ <li>{{CSSxRef("padding-bottom")}}</li>
+ <li>{{CSSxRef("padding-left")}}</li>
+ <li>{{CSSxRef("padding-right")}}</li>
+ <li>{{CSSxRef("padding-top")}}</li>
+ <li>{{CSSxRef("transform")}}</li>
+ <li>{{CSSxRef("transform-origin")}}</li>
+ <li>{{CSSxRef("visibility")}}</li>
+ <li>{{CSSxRef("width")}}</li>
+</ul>
+</div>
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">::-ms-expand
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à Trident/Microsoft et ne fait partie d'aucune spécification.</p>
+
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+<p>{{Compat("css.selectors.-ms-expand")}}</p>
diff --git a/files/fr/web/css/_doublecolon_-ms-fill-lower/index.html b/files/fr/web/css/_doublecolon_-ms-fill-lower/index.html
new file mode 100644
index 0000000000..de4df1e4af
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-ms-fill-lower/index.html
@@ -0,0 +1,96 @@
+---
+title: '::-ms-fill-lower'
+slug: 'Web/CSS/::-ms-fill-lower'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Archive/Web/CSS/::-ms-fill-lower'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le pseudo-élément <strong><code>::-ms-fill-lower</code></strong> représente la portion de la piste d'un élément {{HTMLElement("input")}} de type <code>range</code> qui contient les valeurs inférieures à la valeur du curseur.</p>
+
+<h2 id="Propriétés_autorisées">Propriétés autorisées</h2>
+
+<p>Seules les propriétés CSS suivantes peuvent être utilisées dans une règle dont le sélecteur contient <code>::-ms-fill-lower</code> (les autres propriétés sont ignorées).</p>
+
+<ul>
+ <li>{{cssxref("background-clip")}}</li>
+ <li>{{cssxref("background-color")}}</li>
+ <li>{{cssxref("background-image")}}</li>
+ <li>{{cssxref("background-origin")}}</li>
+ <li>{{cssxref("background-repeat")}}</li>
+ <li>{{cssxref("background-size")}}</li>
+ <li>{{cssxref("border-bottom-color")}}</li>
+ <li>{{cssxref("border-bottom-left-radius")}}</li>
+ <li>{{cssxref("border-bottom-right-radius")}}</li>
+ <li>{{cssxref("border-bottom-style")}}</li>
+ <li>{{cssxref("border-bottom-width")}}</li>
+ <li>{{cssxref("border-left-color")}}</li>
+ <li>{{cssxref("border-left-style")}}</li>
+ <li>{{cssxref("border-left-width")}}</li>
+ <li>{{cssxref("border-right-color")}}</li>
+ <li>{{cssxref("border-right-style ")}}</li>
+ <li>{{cssxref("border-right-width")}}</li>
+ <li>{{cssxref("border-top-color")}}</li>
+ <li>{{cssxref("border-top-left-radius")}}</li>
+ <li>{{cssxref("border-top-right-radius ")}}</li>
+ <li>{{cssxref("border-top-style")}}</li>
+ <li>{{cssxref("border-top-width")}}</li>
+ <li>{{cssxref("box-shadow")}}</li>
+ <li>{{cssxref("box-sizing")}}</li>
+ <li>{{cssxref("color")}}</li>
+ <li>{{cssxref("cursor")}}</li>
+ <li>{{cssxref("display")}} (valeurs <code>block</code>, <code>inline-block</code>, <code>none</code>)</li>
+ <li>{{cssxref("@font-face")}}</li>
+ <li>{{cssxref("font-size")}}</li>
+ <li>{{cssxref("font-style")}}</li>
+ <li>{{cssxref("font-weight")}}</li>
+ <li>{{cssxref("height")}}</li>
+ <li>{{cssxref("margin-bottom")}}</li>
+ <li>{{cssxref("margin-left")}}</li>
+ <li>{{cssxref("margin-right")}}</li>
+ <li>{{cssxref("margin-top")}}</li>
+ <li><code>-ms-background-position-x</code></li>
+ <li><code>-ms-background-position-y</code></li>
+ <li>{{cssxref("-ms-high-contrast-adjust")}}</li>
+ <li>{{cssxref("opacity")}}</li>
+ <li>{{cssxref("outline-color")}}</li>
+ <li>{{cssxref("outline-style")}}</li>
+ <li>{{cssxref("outline-width")}}</li>
+ <li>{{cssxref("padding-bottom")}}</li>
+ <li>{{cssxref("padding-left")}}</li>
+ <li>{{cssxref("padding-right")}}</li>
+ <li>{{cssxref("padding-top")}}</li>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("transform-origin")}}</li>
+ <li>{{cssxref("visibility")}}</li>
+ <li>{{cssxref("width")}}</li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à Trident/Microsoft et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-ms-fill-lower")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les pseudo-éléments utilisés par IE/Edge pour mettre en forme les autres parties des éléments {{HTMLElement("input")}} de type <code>range</code> :
+
+  <ul>
+   <li>{{cssxref("::-ms-fill-upper")}}</li>
+   <li>{{cssxref("::-ms-track")}}</li>
+   <li>{{cssxref("::-ms-thumb")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("::-moz-range-progress")}}</li>
+ <li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">CSS-Tricks : Gérer des champs <code>input</code> de type <code>range</code> de façon compatible entre les navigateurs (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-ms-fill-upper/index.html b/files/fr/web/css/_doublecolon_-ms-fill-upper/index.html
new file mode 100644
index 0000000000..3413848720
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-ms-fill-upper/index.html
@@ -0,0 +1,101 @@
+---
+title: '::-ms-fill-upper'
+slug: 'Web/CSS/::-ms-fill-upper'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-élément(2)
+  - Référence(2)
+translation_of: 'Archive/Web/CSS/::-ms-fill-upper'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le pseudo-élément <strong><code>::-ms-fill-upper</code></strong> représente la portion de la piste d'un élément {{HTMLElement("input")}} de type <code>range</code> qui contient les valeurs supérieures à la valeur du curseur.</p>
+
+<h2 id="Propriétés_autorisées">Propriétés autorisées</h2>
+
+<p>Seules les propriétés CSS suivantes peuvent être utilisées dans une règle dont le sélecteur contient <code>::-ms-fill-upper</code>. Les autres propriétés sont ignorées.</p>
+
+<ul>
+ <li>{{cssxref("background-clip")}}</li>
+ <li>{{cssxref("background-color")}}</li>
+ <li>{{cssxref("background-image")}}</li>
+ <li>{{cssxref("background-origin")}}</li>
+ <li>{{cssxref("background-repeat")}}</li>
+ <li>{{cssxref("background-size")}}</li>
+ <li>{{cssxref("border-bottom-color")}}</li>
+ <li>{{cssxref("border-bottom-left-radius")}}</li>
+ <li>{{cssxref("border-bottom-right-radius")}}</li>
+ <li>{{cssxref("border-bottom-style")}}</li>
+ <li>{{cssxref("border-bottom-width")}}</li>
+ <li>{{cssxref("border-left-color")}}</li>
+ <li>{{cssxref("border-left-style")}}</li>
+ <li>{{cssxref("border-left-width")}}</li>
+ <li>{{cssxref("border-right-color")}}</li>
+ <li>{{cssxref("border-right-style ")}}</li>
+ <li>{{cssxref("border-right-width")}}</li>
+ <li>{{cssxref("border-top-color")}}</li>
+ <li>{{cssxref("border-top-left-radius")}}</li>
+ <li>{{cssxref("border-top-right-radius ")}}</li>
+ <li>{{cssxref("border-top-style")}}</li>
+ <li>{{cssxref("border-top-width")}}</li>
+ <li>{{cssxref("box-shadow")}}</li>
+ <li>{{cssxref("box-sizing")}}</li>
+ <li>{{cssxref("color")}}</li>
+ <li>{{cssxref("cursor")}}</li>
+ <li>{{cssxref("display")}} (valeurs <code>block</code>, <code>inline-block</code>, <code>none</code>)</li>
+ <li>{{cssxref("@font-face")}}</li>
+ <li>{{cssxref("font-size")}}</li>
+ <li>{{cssxref("font-style")}}</li>
+ <li>{{cssxref("font-weight")}}</li>
+ <li>{{cssxref("height")}}</li>
+ <li>{{cssxref("margin-bottom")}}</li>
+ <li>{{cssxref("margin-left")}}</li>
+ <li>{{cssxref("margin-right")}}</li>
+ <li>{{cssxref("margin-top")}}</li>
+ <li><code>-ms-background-position-x</code></li>
+ <li><code>-ms-background-position-y</code></li>
+ <li>{{cssxref("-ms-high-contrast-adjust")}}</li>
+ <li>{{cssxref("opacity")}}</li>
+ <li>{{cssxref("outline-color")}}</li>
+ <li>{{cssxref("outline-style")}}</li>
+ <li>{{cssxref("outline-width")}}</li>
+ <li>{{cssxref("padding-bottom")}}</li>
+ <li>{{cssxref("padding-left")}}</li>
+ <li>{{cssxref("padding-right")}}</li>
+ <li>{{cssxref("padding-top")}}</li>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("transform-origin")}}</li>
+ <li>{{cssxref("visibility")}}</li>
+ <li>{{cssxref("width")}}</li>
+</ul>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à Trident/Microsoft et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-ms-fill-upper")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les pseudo-éléments utilisés par IE/Edge pour mettre en forme les autres parties des éléments {{HTMLElement("input")}} de type <code>range</code> :
+
+  <ul>
+   <li>{{cssxref("::-ms-fill-lower")}}</li>
+   <li>{{cssxref("::-ms-track")}}</li>
+   <li>{{cssxref("::-ms-thumb")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("::-moz-range-progress")}}</li>
+ <li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">CSS-Tricks : Gérer des champs <code>input</code> de type <code>range</code> de façon compatible entre les navigateurs (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-ms-fill/index.html b/files/fr/web/css/_doublecolon_-ms-fill/index.html
new file mode 100644
index 0000000000..e122d2104d
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-ms-fill/index.html
@@ -0,0 +1,117 @@
+---
+title: '::-ms-fill'
+slug: 'Web/CSS/::-ms-fill'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Archive/Web/CSS/::-ms-fill'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le pseudo-élément <strong><code>::-ms-fill</code></strong> est un pseudo-élément <a href="/fr/docs/Web/CSS/Microsoft_CSS_extensions">spécifique à Microsoft</a> qui représente la partie « remplie » d'un élément {{HTMLElement("progress")}}. Ce pseudo-élément n'est pas standard et est uniquement disponible avec Internet Explorer 10, Internet Explorer 11 et Microsoft Edge.</p>
+
+<p>Toutes les propriétés autorisées (à l'exception de {{cssxref("animation-name")}}) s'appliquent sur une barre de progression dans un état déterminé. Seule <code>animation-name</code> s'applique sur une barre dans un état indéterminée. Les éléments <code>&lt;progress&gt;</code> dans un état indéterminés sont ceux qui n'ont pas d'attribut {{htmlattrxref("value")}}, ils peuvent être sélectionnés grâce à la pseudo-classe {{cssxref(":indeterminate")}}.</p>
+
+<p>Par défaut, IE affiche un bordure avec des points qui se déplacent lorsque la barre est dans un état déterminée. En utilisant <code>animation-name</code> sur <code>::-ms-fill</code>, on peut modifier l'animation :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Valeur</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>none</code></td>
+   <td>L'animation est désactivée, aucun point n'est affiché.</td>
+  </tr>
+  <tr>
+   <td><code>-ms-bar</code></td>
+   <td>Les points animés sont affichés sous la forme d'une barre.</td>
+  </tr>
+  <tr>
+   <td><code>-ms-ring</code></td>
+   <td>Les points animés sont affichés sous la forme d'un anneau.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Propriétés_autorisées">Propriétés autorisées</h2>
+
+<p>Seules les propriétés suivantes peuvent être utilisées avec <code>::-ms-fill</code> (les autres propriétés seront ignorées) :</p>
+
+<ul>
+ <li>{{cssxref("animation-name")}}</li>
+ <li>{{cssxref("background-clip")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}</li>
+ <li>{{cssxref("border")}}</li>
+ <li>{{cssxref("border-radius")}}</li>
+ <li>{{cssxref("box-shadow")}}</li>
+ <li>{{cssxref("box-sizing")}}</li>
+ <li>{{cssxref("color")}}</li>
+ <li>{{cssxref("cursor")}}</li>
+ <li>{{cssxref("display")}} (avec les valeurs : <code>block</code>, <code>inline-block</code> et <code>none</code>.)</li>
+ <li>{{cssxref("font")}}</li>
+ <li>{{cssxref("height")}}</li>
+ <li>{{cssxref("margin")}}</li>
+ <li>{{cssxref("-ms-background-position-x")}}</li>
+ <li>{{cssxref("-ms-background-position-y")}}</li>
+ <li>{{cssxref("-ms-high-contrast-adjust")}}</li>
+ <li>{{cssxref("opacity")}}</li>
+ <li>{{cssxref("outline-color")}}, {{cssxref("outline-style")}}, {{cssxref("outline-width")}}</li>
+ <li>{{cssxref("padding")}}</li>
+ <li>{{cssxref("transform")}} et {{cssxref("transform-origin")}}</li>
+ <li>{{cssxref("visibility")}}</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<ul>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">progress::-ms-fill {
+  background-color: orange;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;progress value="10" max="50"&gt;&lt;/progress&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 300, 50)}}</p>
+
+<p>Une barre de progression mise en forme avec cette feuille de style devrait ressembler à :</p>
+
+<p><img alt="Progress Bar with Orange Fill" src="https://mdn.mozillademos.org/files/13484/progress_bar.png" style="height: 44px; width: 308px;"></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est spécifique à Microsoft et n'est décrit dans aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-ms-fill")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("::-moz-progress-bar")}}</li>
+ <li>{{cssxref("::-webkit-progress-bar")}}</li>
+ <li>{{cssxref("::-webkit-progress-value")}}</li>
+ <li>{{cssxref("::-webkit-progress-inner-element")}}
+  <ul>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-ms-reveal/index.html b/files/fr/web/css/_doublecolon_-ms-reveal/index.html
new file mode 100644
index 0000000000..e0e998ad5b
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-ms-reveal/index.html
@@ -0,0 +1,91 @@
+---
+title: '::-ms-reveal'
+slug: 'Web/CSS/::-ms-reveal'
+tags:
+  - CSS
+  - Microsoft
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Archive/Web/CSS/::-ms-reveal'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le pseudo-élément <strong><code>::-ms-reveal</code></strong> est <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">un pseudo-élément spécifique à Microsoft</a> qui est utilisé pour la représentation du bouton qui permet de révéler le mot de passe qui est généralement affiché juste après un élément {{HTMLElement("input/password", '&lt;input type="password"&gt;')}} dans Internet Explorer 10+.</p>
+
+<p>Ce bouton permet d'afficher le contenu du mot de passe dans le champs (plutôt que les astérisques qui masquent les caractères).</p>
+
+<p>Ce pseudo-élément n'est pas standard et est spécifique à Internet Explorer 10+.</p>
+
+<h2 id="Propriétés_autorisées">Propriétés autorisées</h2>
+
+<p>Seules les propriétés suivantes peuvent être utilisées dans une règle dont le sélecteur contient <code>::-ms-reveal</code> (les autres propriétés seront ignorées).</p>
+
+<ul>
+ <li>{{cssxref("background-clip")}}</li>
+ <li>{{cssxref("background-color")}}</li>
+ <li>{{cssxref("background-image")}}</li>
+ <li>{{cssxref("background-origin")}}</li>
+ <li>{{cssxref("background-repeat")}}</li>
+ <li>{{cssxref("background-size")}}</li>
+ <li>{{cssxref("border-bottom-color")}}</li>
+ <li>{{cssxref("border-bottom-left-radius")}}</li>
+ <li>{{cssxref("border-bottom-right-radius")}}</li>
+ <li>{{cssxref("border-bottom-style")}}</li>
+ <li>{{cssxref("border-bottom-width")}}</li>
+ <li>{{cssxref("border-left-color")}}</li>
+ <li>{{cssxref("border-left-style")}}</li>
+ <li>{{cssxref("border-left-width")}}</li>
+ <li>{{cssxref("border-right-color")}}</li>
+ <li>{{cssxref("border-right-style ")}}</li>
+ <li>{{cssxref("border-right-width")}}</li>
+ <li>{{cssxref("border-top-color")}}</li>
+ <li>{{cssxref("border-top-left-radius")}}</li>
+ <li>{{cssxref("border-top-right-radius ")}}</li>
+ <li>{{cssxref("border-top-style")}}</li>
+ <li>{{cssxref("border-top-width")}}</li>
+ <li>{{cssxref("box-shadow")}}</li>
+ <li>{{cssxref("box-sizing")}}</li>
+ <li>{{cssxref("color")}}</li>
+ <li>{{cssxref("cursor")}}</li>
+ <li>{{cssxref("display")}} (valeurs <code>block</code>, <code>inline-block</code>, <code>none</code>)</li>
+ <li>{{cssxref("@font-face")}}</li>
+ <li>{{cssxref("font-size")}}</li>
+ <li>{{cssxref("font-style")}}</li>
+ <li>{{cssxref("font-weight")}}</li>
+ <li>{{cssxref("height")}}</li>
+ <li>{{cssxref("margin-bottom")}}</li>
+ <li>{{cssxref("margin-left")}}</li>
+ <li>{{cssxref("margin-right")}}</li>
+ <li>{{cssxref("margin-top")}}</li>
+ <li>{{CSSxRef("-ms-background-position-x")}}</li>
+ <li>{{CSSxRef("-ms-background-position-y")}}</li>
+ <li>{{cssxref("-ms-high-contrast-adjust")}}</li>
+ <li>{{cssxref("opacity")}}</li>
+ <li>{{cssxref("outline-color")}}</li>
+ <li>{{cssxref("outline-style")}}</li>
+ <li>{{cssxref("outline-width")}}</li>
+ <li>{{cssxref("padding-bottom")}}</li>
+ <li>{{cssxref("padding-left")}}</li>
+ <li>{{cssxref("padding-right")}}</li>
+ <li>{{cssxref("padding-top")}}</li>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("transform-origin")}}</li>
+ <li>{{cssxref("visibility")}}</li>
+ <li>{{cssxref("width")}}</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax("::-ms-reveal")}}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à Trident/Microsoft et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-ms-reveal")}}</p>
diff --git a/files/fr/web/css/_doublecolon_-ms-thumb/index.html b/files/fr/web/css/_doublecolon_-ms-thumb/index.html
new file mode 100644
index 0000000000..895408d2b0
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-ms-thumb/index.html
@@ -0,0 +1,100 @@
+---
+title: '::-ms-thumb'
+slug: 'Web/CSS/::-ms-thumb'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Archive/Web/CSS/::-ms-thumb'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le pseudo-élément <strong><code>::-ms-thumb</code></strong> est <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">un pseudo-élément spécifique à Microsoft</a> qui représente le curseur qui peut être déplacer le long de la piste d'un élément {{HTMLElement("input")}} de type <code>range</code> afin de modifier la valeur numérique associée.</p>
+
+<h2 id="Propriétés_autorisées">Propriétés autorisées</h2>
+
+<p>Seules les propriétés suivantes peuvent être utilisées dans une règle dont le sélecteur contient <code>::-ms-thumb</code> (les autres propriétés sont ignorées).</p>
+
+<ul>
+ <li>{{cssxref("background-clip")}}</li>
+ <li>{{cssxref("background-color")}}</li>
+ <li>{{cssxref("background-image")}}</li>
+ <li>{{cssxref("background-origin")}}</li>
+ <li>{{cssxref("background-repeat")}}</li>
+ <li>{{cssxref("background-size")}}</li>
+ <li>{{cssxref("border-bottom-color")}}</li>
+ <li>{{cssxref("border-bottom-left-radius")}}</li>
+ <li>{{cssxref("border-bottom-right-radius")}}</li>
+ <li>{{cssxref("border-bottom-style")}}</li>
+ <li>{{cssxref("border-bottom-width")}}</li>
+ <li>{{cssxref("border-left-color")}}</li>
+ <li>{{cssxref("border-left-style")}}</li>
+ <li>{{cssxref("border-left-width")}}</li>
+ <li>{{cssxref("border-right-color")}}</li>
+ <li>{{cssxref("border-right-style ")}}</li>
+ <li>{{cssxref("border-right-width")}}</li>
+ <li>{{cssxref("border-top-color")}}</li>
+ <li>{{cssxref("border-top-left-radius")}}</li>
+ <li>{{cssxref("border-top-right-radius ")}}</li>
+ <li>{{cssxref("border-top-style")}}</li>
+ <li>{{cssxref("border-top-width")}}</li>
+ <li>{{cssxref("box-shadow")}}</li>
+ <li>{{cssxref("box-sizing")}}</li>
+ <li>{{cssxref("color")}}</li>
+ <li>{{cssxref("cursor")}}</li>
+ <li>{{cssxref("display")}} (valeurs <code>block</code>, <code>inline-block</code>, <code>none</code>)</li>
+ <li>{{cssxref("@font-face")}}</li>
+ <li>{{cssxref("font-size")}}</li>
+ <li>{{cssxref("font-style")}}</li>
+ <li>{{cssxref("font-weight")}}</li>
+ <li>{{cssxref("height")}}</li>
+ <li>{{cssxref("margin-bottom")}}</li>
+ <li>{{cssxref("margin-left")}}</li>
+ <li>{{cssxref("margin-right")}}</li>
+ <li>{{cssxref("margin-top")}}</li>
+ <li><code>-ms-background-position-x</code></li>
+ <li><code>-ms-background-position-y</code></li>
+ <li>{{cssxref("-ms-high-contrast-adjust")}}</li>
+ <li>{{cssxref("opacity")}}</li>
+ <li>{{cssxref("outline-color")}}</li>
+ <li>{{cssxref("outline-style")}}</li>
+ <li>{{cssxref("outline-width")}}</li>
+ <li>{{cssxref("padding-bottom")}}</li>
+ <li>{{cssxref("padding-left")}}</li>
+ <li>{{cssxref("padding-right")}}</li>
+ <li>{{cssxref("padding-top")}}</li>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("transform-origin")}}</li>
+ <li>{{cssxref("visibility")}}</li>
+ <li>{{cssxref("width")}}</li>
+</ul>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à Trident/Microsoft et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les pseudo-éléments utilisés par IE/Edge qui permettent de mettre en forme les éléments {{HTMLElement("input")}} de type <code>range</code> :
+
+  <ul>
+   <li>{{cssxref("::-ms-track")}}</li>
+   <li>{{cssxref("::-ms-fill-upper")}}</li>
+   <li>{{cssxref("::-ms-fill-lower")}}</li>
+  </ul>
+ </li>
+ <li>Les pseudo-éléments similaires des autres navigateurs
+  <ul>
+   <li>{{cssxref("::-webkit-slider-thumb")}}</li>
+   <li>{{cssxref("::-moz-range-thumb")}}</li>
+  </ul>
+ </li>
+ <li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">CSS-Tricks : Gérer des champs <code>input</code> de type <code>range</code> de façon compatible entre les navigateurs (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-ms-ticks-after/index.html b/files/fr/web/css/_doublecolon_-ms-ticks-after/index.html
new file mode 100644
index 0000000000..02bf07507a
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-ms-ticks-after/index.html
@@ -0,0 +1,91 @@
+---
+title: '::-ms-ticks-after'
+slug: 'Web/CSS/::-ms-ticks-after'
+tags:
+  - CSS
+  - Microsoft
+  - Non-standard
+  - Pseudo-element
+  - Reference
+  - Web
+translation_of: 'Archive/Web/CSS/::-ms-ticks-after'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-élément</a> <strong><code>::-ms-ticks-after</code></strong> est une <a href="/en-US/docs/Web/CSS/Microsoft_CSS_extensions">extension Microsoft</a> qui permet d'appliquer un ou plusieurs styles aux graduations d'une piste qui sont situées après le curseur (la piste est celle d'un contrôle <code><a href="/fr/docs/Web/HTML/Element/input/range">&lt;input type="range"&gt;</a></code>). Pour une disposition avec une écriture de gauche à droite, les marques sont situées sous la piste. Pour une disposition avec une écriture de haut en bas, les marques sont situées à droite de la piste.</p>
+
+<p>Par défaut, les marques ne sont pas affichées, il est nécessaire d'utiliser la valeur <code>block</code> pour la propriété {{cssxref("display")}}.</p>
+
+<p>Il est possible d'utiliser simultanément les sélecteurs <strong><code>::-ms-ticks-after</code></strong>, {{cssxref("::-ms-ticks-before")}}, et {{cssxref("::-ms-track")}} mais cela créera alors trois ensembles de marques, ce qui n'est pas recommandé. Pour une meilleure ergonomie, il est conseillé de n'utiliser qu'un seul ensemble de marque. Pour retirer les marques, on pourra utiliser la valeur <code>transparent</code> sur la propriété {{cssxref("color")}}.</p>
+
+<h2 id="Propriétés_autorisées">Propriétés autorisées</h2>
+
+<p>Voici les propriétés qui peuvent être définies dans les styles associés à ce pseudo-élément (les autres propriétés seront ignorées) :</p>
+
+<ul>
+ <li>{{cssxref("background-clip")}}</li>
+ <li>{{cssxref("background-color")}}</li>
+ <li>{{cssxref("background-image")}}</li>
+ <li>{{cssxref("background-origin")}}</li>
+ <li>{{cssxref("-ms-background-position-x")}}</li>
+ <li>{{cssxref("-ms-background-position-y")}}</li>
+ <li>{{cssxref("background-repeat")}}</li>
+ <li>{{cssxref("background-size")}}</li>
+ <li>{{cssxref("border-bottom-color")}}</li>
+ <li>{{cssxref("border-bottom-left-radius")}}</li>
+ <li>{{cssxref("border-bottom-right-radius")}}</li>
+ <li>{{cssxref("border-bottom-style")}}</li>
+ <li>{{cssxref("border-bottom-width")}}</li>
+ <li>{{cssxref("border-left-color")}}</li>
+ <li>{{cssxref("border-left-style")}}</li>
+ <li>{{cssxref("border-left-width")}}</li>
+ <li>{{cssxref("border-right-color")}}</li>
+ <li>{{cssxref("border-right-style")}}</li>
+ <li>{{cssxref("border-right-width")}}</li>
+ <li>{{cssxref("border-top-color")}}</li>
+ <li>{{cssxref("border-top-left-radius")}}</li>
+ <li>{{cssxref("border-top-right-radius")}}</li>
+ <li>{{cssxref("border-top-style")}}</li>
+ <li>{{cssxref("border-top-width")}}</li>
+ <li>{{cssxref("box-shadow")}}</li>
+ <li>{{cssxref("box-sizing")}}</li>
+ <li>{{cssxref("color")}}</li>
+ <li>{{cssxref("cursor")}}</li>
+ <li>{{cssxref("display")}} : prise en charge pour ces valeurs : <code>block</code>, <code>inline-block</code>, <code>none</code>.</li>
+ <li>{{cssxref("@font-face")}}</li>
+ <li>{{cssxref("font-size")}}</li>
+ <li>{{cssxref("font-style")}}</li>
+ <li>{{cssxref("font-weight")}}</li>
+ <li>{{cssxref("height")}}</li>
+ <li>{{cssxref("-ms-high-contrast-adjust")}}</li>
+ <li>{{cssxref("margin-bottom")}}</li>
+ <li>{{cssxref("margin-left")}}</li>
+ <li>{{cssxref("margin-right")}}</li>
+ <li>{{cssxref("margin-top")}}</li>
+ <li>{{cssxref("opacity")}}</li>
+ <li>{{cssxref("outline-color")}}</li>
+ <li>{{cssxref("outline-style")}}</li>
+ <li>{{cssxref("outline-width")}}</li>
+ <li>{{cssxref("padding-bottom")}}</li>
+ <li>{{cssxref("padding-left")}}</li>
+ <li>{{cssxref("padding-right")}}</li>
+ <li>{{cssxref("padding-top")}}</li>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("transform-origin")}}</li>
+ <li>{{cssxref("visibility")}}</li>
+ <li>{{cssxref("width")}}</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<ul>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><code><a href="/fr/docs/Web/HTML/Element/input/range">&lt;input type="range"&gt;</a></code></li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-ms-ticks-before/index.html b/files/fr/web/css/_doublecolon_-ms-ticks-before/index.html
new file mode 100644
index 0000000000..371ff710ec
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-ms-ticks-before/index.html
@@ -0,0 +1,89 @@
+---
+title: '::-ms-ticks-before'
+slug: 'Web/CSS/::-ms-ticks-before'
+tags:
+  - CSS
+  - Microsoft
+  - Non-standard
+  - Pseudo-element
+  - Reference
+  - Web
+translation_of: 'Archive/Web/CSS/::-ms-ticks-before'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-élément</a> <strong><code>::-ms-ticks-before</code></strong> est une <a href="/en-US/docs/Web/CSS/Microsoft_CSS_extensions">extension Microsoft</a> qui permet d'appliquer un ou plusieurs styles aux graduations d'une piste qui sont situées avant le curseur (la piste est celle d'un contrôle <code><a href="/fr/docs/Web/HTML/Element/input/range">&lt;input type="range"&gt;</a></code>). Pour une disposition avec une écriture de gauche à droite, les marques sont situées au-dessus de la piste. Pour une disposition avec une écriture de haut en bas, les marques sont situées à gauche de la piste.</p>
+
+<p>Par défaut, les marques ne sont pas affichées, il est nécessaire d'utiliser la valeur <code>block</code> pour la propriété {{cssxref("display")}}.</p>
+
+<p>Il est possible d'utiliser simultanément les sélecteurs {{cssxref("::-ms-ticks-after")}}, <strong><code>::-ms-ticks-before</code></strong> et {{cssxref("::-ms-track")}} mais cela créera alors trois ensembles de marques, ce qui n'est pas recommandé. Pour une meilleure ergonomie, il est conseillé de n'utiliser qu'un seul ensemble de marque. Pour retirer les marques, on pourra utiliser la valeur <code>transparent</code> sur la propriété {{cssxref("color")}}.</p>
+
+<h2 id="Propriétés_autorisées">Propriétés autorisées</h2>
+
+<p> </p>
+
+<p>Voici les propriétés qui peuvent être définies dans les styles associés à ce pseudo-élément (les autres propriétés seront ignorées) :</p>
+
+<ul>
+ <li>{{cssxref("background-clip")}}</li>
+ <li>{{cssxref("background-color")}}</li>
+ <li>{{cssxref("background-image")}}</li>
+ <li>{{cssxref("background-origin")}}</li>
+ <li>{{cssxref("-ms-background-position-x")}}</li>
+ <li>{{cssxref("-ms-background-position-y")}}</li>
+ <li>{{cssxref("background-repeat")}}</li>
+ <li>{{cssxref("background-size")}}</li>
+ <li>{{cssxref("border-bottom-color")}}</li>
+ <li>{{cssxref("border-bottom-left-radius")}}</li>
+ <li>{{cssxref("border-bottom-right-radius")}}</li>
+ <li>{{cssxref("border-bottom-style")}}</li>
+ <li>{{cssxref("border-bottom-width")}}</li>
+ <li>{{cssxref("border-left-color")}}</li>
+ <li>{{cssxref("border-left-style")}}</li>
+ <li>{{cssxref("border-left-width")}}</li>
+ <li>{{cssxref("border-right-color")}}</li>
+ <li>{{cssxref("border-right-style")}}</li>
+ <li>{{cssxref("border-right-width")}}</li>
+ <li>{{cssxref("border-top-color")}}</li>
+ <li>{{cssxref("border-top-left-radius")}}</li>
+ <li>{{cssxref("border-top-right-radius")}}</li>
+ <li>{{cssxref("border-top-style")}}</li>
+ <li>{{cssxref("border-top-width")}}</li>
+ <li>{{cssxref("box-shadow")}}</li>
+ <li>{{cssxref("box-sizing")}}</li>
+ <li>{{cssxref("color")}}</li>
+ <li>{{cssxref("cursor")}}</li>
+ <li>{{cssxref("display")}} : prise en charge pour ces valeurs : <code>block</code>, <code>inline-block</code>, <code>none</code>.</li>
+ <li>{{cssxref("@font-face")}}</li>
+ <li>{{cssxref("font-size")}}</li>
+ <li>{{cssxref("font-style")}}</li>
+ <li>{{cssxref("font-weight")}}</li>
+ <li>{{cssxref("height")}}</li>
+ <li>{{cssxref("-ms-high-contrast-adjust")}}</li>
+ <li>{{cssxref("margin-bottom")}}</li>
+ <li>{{cssxref("margin-left")}}</li>
+ <li>{{cssxref("margin-right")}}</li>
+ <li>{{cssxref("margin-top")}}</li>
+ <li>{{cssxref("opacity")}}</li>
+ <li>{{cssxref("outline-color")}}</li>
+ <li>{{cssxref("outline-style")}}</li>
+ <li>{{cssxref("outline-width")}}</li>
+ <li>{{cssxref("padding-bottom")}}</li>
+ <li>{{cssxref("padding-left")}}</li>
+ <li>{{cssxref("padding-right")}}</li>
+ <li>{{cssxref("padding-top")}}</li>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("transform-origin")}}</li>
+ <li>{{cssxref("visibility")}}</li>
+ <li>{{cssxref("width")}}</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><code><a href="/fr/docs/Web/HTML/Element/input/range">&lt;input type="range"&gt;</a></code><a href="/en-US/docs/Web/HTML/Element/input/range"> </a></li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-ms-tooltip/index.html b/files/fr/web/css/_doublecolon_-ms-tooltip/index.html
new file mode 100644
index 0000000000..e4d68b6bcc
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-ms-tooltip/index.html
@@ -0,0 +1,30 @@
+---
+title: '::-ms-tooltip'
+slug: 'Web/CSS/::-ms-tooltip'
+tags:
+  - CSS
+  - Extension
+  - Microsoft
+  - Non-standard
+  - Pseudo-element
+  - Reference
+  - Web
+translation_of: 'Archive/Web/CSS/::-ms-tooltip'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-élément</a> <strong><code>::-ms-tooltip</code></strong> est <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">une extension Microsoft</a> qui permet d'appliquer un ou plusieurs styles à la bulle d'information du curseur d'un élément <code><a href="/fr/docs/Web/HTML/Element/input/range">&lt;input type="range"&gt;</a></code>.</p>
+
+<h2 id="Propriétés_autorisées">Propriétés autorisées</h2>
+
+<p>Seules les propriétés {{cssxref("display")}} et {{cssxref("visibility")}} peuvent être utilisées avec <code>::-ms-tooltip</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><code><a href="/fr/docs/Web/HTML/Element/input/range">&lt;input type="range"&gt;</a></code></li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-ms-track/index.html b/files/fr/web/css/_doublecolon_-ms-track/index.html
new file mode 100644
index 0000000000..5dda04462a
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-ms-track/index.html
@@ -0,0 +1,104 @@
+---
+title: '::-ms-track'
+slug: 'Web/CSS/::-ms-track'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Archive/Web/CSS/::-ms-track'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le pseudo-élément <strong><code>::-ms-track</code></strong> est <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">un pseudo-élément spécifique à Microsoft</a> qui permet de représenter la piste sur laquelle on peut déplacer le curseur d'un élément {{HTMLElement("input")}} de <code>range</code>.</p>
+
+<p>La propriété {{cssxref("color")}}, appliquée au sein d'un sélecteur <code>::-ms-track</code> modifiera la couleur des graduations le long de la piste. Si on souhaite les masquer, on pourra utiliser la valeur <code>transparent</code>.</p>
+
+<p>On peut utiliser les pseudo-éléments {{cssxref("::-ms-ticks-after")}}, {{cssxref("::-ms-ticks-before")}} et <code>::-ms-track</code> ensemble afin de créer trois ensembles graduations. Toutefois, pour des raisons d'ergonomie, il est conseillé de n'avoir qu'une seule mise en forme pour ces graudations.</p>
+
+<h2 id="Propriétés_autorisées">Propriétés autorisées</h2>
+
+<p>Seules les propriétés CSS suivantes sont autorisées dans une règle dont le sélecteur contient <code>::-ms-track</code> (les autres propriétés sont ignorées).</p>
+
+<ul>
+ <li>{{cssxref("background-clip")}}</li>
+ <li>{{cssxref("background-color")}}</li>
+ <li>{{cssxref("background-image")}}</li>
+ <li>{{cssxref("background-origin")}}</li>
+ <li>{{cssxref("background-repeat")}}</li>
+ <li>{{cssxref("background-size")}}</li>
+ <li>{{cssxref("border-bottom-color")}}</li>
+ <li>{{cssxref("border-bottom-left-radius")}}</li>
+ <li>{{cssxref("border-bottom-right-radius")}}</li>
+ <li>{{cssxref("border-bottom-style")}}</li>
+ <li>{{cssxref("border-bottom-width")}}</li>
+ <li>{{cssxref("border-left-color")}}</li>
+ <li>{{cssxref("border-left-style")}}</li>
+ <li>{{cssxref("border-left-width")}}</li>
+ <li>{{cssxref("border-right-color")}}</li>
+ <li>{{cssxref("border-right-style ")}}</li>
+ <li>{{cssxref("border-right-width")}}</li>
+ <li>{{cssxref("border-top-color")}}</li>
+ <li>{{cssxref("border-top-left-radius")}}</li>
+ <li>{{cssxref("border-top-right-radius ")}}</li>
+ <li>{{cssxref("border-top-style")}}</li>
+ <li>{{cssxref("border-top-width")}}</li>
+ <li>{{cssxref("box-shadow")}}</li>
+ <li>{{cssxref("box-sizing")}}</li>
+ <li>{{cssxref("color")}}</li>
+ <li>{{cssxref("cursor")}}</li>
+ <li>{{cssxref("display")}} (valeurs <code>block</code>, <code>inline-block</code>, <code>none</code>)</li>
+ <li>{{cssxref("@font-face")}}</li>
+ <li>{{cssxref("font-size")}}</li>
+ <li>{{cssxref("font-style")}}</li>
+ <li>{{cssxref("font-weight")}}</li>
+ <li>{{cssxref("height")}}</li>
+ <li>{{cssxref("margin-bottom")}}</li>
+ <li>{{cssxref("margin-left")}}</li>
+ <li>{{cssxref("margin-right")}}</li>
+ <li>{{cssxref("margin-top")}}</li>
+ <li><code>-ms-background-position-x</code></li>
+ <li><code>-ms-background-position-y</code></li>
+ <li>{{cssxref("-ms-high-contrast-adjust")}}</li>
+ <li>{{cssxref("opacity")}}</li>
+ <li>{{cssxref("outline-color")}}</li>
+ <li>{{cssxref("outline-style")}}</li>
+ <li>{{cssxref("outline-width")}}</li>
+ <li>{{cssxref("padding-bottom")}}</li>
+ <li>{{cssxref("padding-left")}}</li>
+ <li>{{cssxref("padding-right")}}</li>
+ <li>{{cssxref("padding-top")}}</li>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("transform-origin")}}</li>
+ <li>{{cssxref("visibility")}}</li>
+ <li>{{cssxref("width")}}</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">  {{csssyntax}}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à Trident/Microsoft et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les pseudo-élément utilisés par IE/Edge et qui permettent de mettre en forme un élément {{HTMLElement("input")}} de type <code>range</code> :
+
+  <ul>
+   <li>{{cssxref("::-ms-thumb")}}</li>
+   <li>{{cssxref("::-ms-fill-upper")}}</li>
+   <li>{{cssxref("::-ms-fill-lower")}}</li>
+  </ul>
+ </li>
+ <li>Les pseudo-éléments similaires des autres navigateurs
+  <ul>
+   <li>{{cssxref("::-webkit-slider-runnable-track")}}</li>
+   <li>{{cssxref("::-moz-range-track")}}</li>
+  </ul>
+ </li>
+ <li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">CSS-Tricks : Mettre en forme les champs de saisie des formulaires pour les différents navigateurs avec CSS (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-ms-value/index.html b/files/fr/web/css/_doublecolon_-ms-value/index.html
new file mode 100644
index 0000000000..264ead8b53
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-ms-value/index.html
@@ -0,0 +1,92 @@
+---
+title: '::-ms-value'
+slug: 'Web/CSS/::-ms-value'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Archive/Web/CSS/::-ms-value'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le pseudo-élément <strong><code>::-ms-value</code></strong> est <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">un pseudo-élément spécifique à Microsoft</a> qui permet d'appliquer des règles sur les éléments {{HTMLElement("input")}} ou {{HTMLElement("select")}}. Seules certaines propriétés peuvent être paramétrées via ce pseudo-élément, les règles agissant sur d'autres propriétés n'auront donc aucun effet.</p>
+
+<h2 id="Propriétés_autorisées">Propriétés autorisées</h2>
+
+<p>Seules les propriétés suivantes peuvent être utilisées dans une règle dont le sélecteur contient <code>::-ms-value</code> (les autres propriétés sont ignorées).</p>
+
+<ul>
+ <li>{{cssxref("background-clip")}}</li>
+ <li>{{cssxref("background-color")}}</li>
+ <li>{{cssxref("background-image")}}</li>
+ <li>{{cssxref("background-origin")}}</li>
+ <li>{{cssxref("background-repeat")}}</li>
+ <li>{{cssxref("background-size")}}</li>
+ <li>{{cssxref("border-bottom-color")}}</li>
+ <li>{{cssxref("border-bottom-left-radius")}}</li>
+ <li>{{cssxref("border-bottom-right-radius")}}</li>
+ <li>{{cssxref("border-bottom-style")}}</li>
+ <li>{{cssxref("border-bottom-width")}}</li>
+ <li>{{cssxref("border-left-color")}}</li>
+ <li>{{cssxref("border-left-style")}}</li>
+ <li>{{cssxref("border-left-width")}}</li>
+ <li>{{cssxref("border-right-color")}}</li>
+ <li>{{cssxref("border-right-style ")}}</li>
+ <li>{{cssxref("border-right-width")}}</li>
+ <li>{{cssxref("border-top-color")}}</li>
+ <li>{{cssxref("border-top-left-radius")}}</li>
+ <li>{{cssxref("border-top-right-radius ")}}</li>
+ <li>{{cssxref("border-top-style")}}</li>
+ <li>{{cssxref("border-top-width")}}</li>
+ <li>{{cssxref("box-shadow")}}</li>
+ <li>{{cssxref("box-sizing")}}</li>
+ <li>{{cssxref("color")}}</li>
+ <li>{{cssxref("cursor")}}</li>
+ <li>{{cssxref("display")}} (valeurs <code>block</code>, <code>inline-block</code>, <code>none</code>)</li>
+ <li>{{cssxref("@font-face")}}</li>
+ <li>{{cssxref("font-size")}}</li>
+ <li>{{cssxref("font-style")}}</li>
+ <li>{{cssxref("font-weight")}}</li>
+ <li>{{cssxref("height")}}</li>
+ <li>{{cssxref("margin-bottom")}}</li>
+ <li>{{cssxref("margin-left")}}</li>
+ <li>{{cssxref("margin-right")}}</li>
+ <li>{{cssxref("margin-top")}}</li>
+ <li><code>-ms-background-position-x</code></li>
+ <li><code>-ms-background-position-y</code></li>
+ <li>{{cssxref("-ms-high-contrast-adjust")}}</li>
+ <li>{{cssxref("opacity")}}</li>
+ <li>{{cssxref("outline-color")}}</li>
+ <li>{{cssxref("outline-style")}}</li>
+ <li>{{cssxref("outline-width")}}</li>
+ <li>{{cssxref("padding-bottom")}}</li>
+ <li>{{cssxref("padding-left")}}</li>
+ <li>{{cssxref("padding-right")}}</li>
+ <li>{{cssxref("padding-top")}}</li>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("transform-origin")}}</li>
+ <li>{{cssxref("visibility")}}</li>
+ <li>{{cssxref("width")}}</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">input::-ms-value {
+  color: lime;
+  font-style: italic;
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à Trident/Microsoft et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-ms-value")}}</p>
diff --git a/files/fr/web/css/_doublecolon_-webkit-file-upload-button/index.html b/files/fr/web/css/_doublecolon_-webkit-file-upload-button/index.html
new file mode 100644
index 0000000000..2de12911cf
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-webkit-file-upload-button/index.html
@@ -0,0 +1,54 @@
+---
+title: '::-webkit-file-upload-button'
+slug: 'Web/CSS/::-webkit-file-upload-button'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::file-selector-button'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le pseudo-élément <strong><code>::-webkit-file-upload-button</code></strong> représente le bouton d'un élément {{HTMLElement("input")}} de type <code>file</code>.</p>
+
+<p>Ce pseudo-élément n'est pas standard et est uniquement pris en charge par les navigateurs basés sur WebKit/Blink.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>selecteur</var>::-webkit-file-upload-button
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input, label {
+  display: block;
+}
+
+input[type=file]::-webkit-file-upload-button {
+  border: 1px solid grey;
+  background: #FFFAAA;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;label for="fileUpload"&gt;Uploader un fichier&lt;/label&gt;&lt;br&gt;
+  &lt;input type="file" id="fileUpload"&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-webkit-file-upload-button")}}</p>
diff --git a/files/fr/web/css/_doublecolon_-webkit-inner-spin-button/index.html b/files/fr/web/css/_doublecolon_-webkit-inner-spin-button/index.html
new file mode 100644
index 0000000000..fc64500935
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-webkit-inner-spin-button/index.html
@@ -0,0 +1,48 @@
+---
+title: '::-webkit-inner-spin-button'
+slug: 'Web/CSS/::-webkit-inner-spin-button'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::-webkit-inner-spin-button'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le pseudo-élément <strong><code>::-webkit-inner-spin-button</code></strong> permet de mettre en forme la partie intérieure de la roulette qui permet de choisir la valeur d'un élément {{HTMLElement("input")}} de type <code>number</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input[type=number]::-webkit-inner-spin-button {
+  cursor: pointer;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input type="number"&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', 200, 30)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-webkit-inner-spin-button")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("::-webkit-outer-spin-button")}}</li>
+ <li>{{cssxref("::-webkit-textfield-decoration-container")}}</li>
+ <li><a href="https://trac.webkit.org/wiki/Styling%20Form%20Controls#inputelement">Mettre en forme les contrôles de formulaires  – WebKit (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-webkit-input-placeholder/index.html b/files/fr/web/css/_doublecolon_-webkit-input-placeholder/index.html
new file mode 100644
index 0000000000..c93ace537c
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-webkit-input-placeholder/index.html
@@ -0,0 +1,96 @@
+---
+title: '::-webkit-input-placeholder'
+slug: 'Web/CSS/::-webkit-input-placeholder'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::placeholder'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>Le pseudo-élément <strong><code>::-webkit-input-placeholder</code></strong> représente <a href="/fr/docs/Web/Guide/HTML/Forms_in_HTML#The_placeholder_attribute">le texte de substitution</a> d'un formulaire. Il permet aux auteurs et aux développeurs d'adapter la mise en forme de ce texte de substitution. Ce pseudo-élément est uniquement pris en charge par WebKit et Blink.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input placeholder="Veuillez saisir ici..."&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input::-webkit-input-placeholder {
+  color: green;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("::placeholder")}}</li>
+ <li>{{cssxref("::-moz-placeholder")}}</li>
+ <li>{{cssxref(":-ms-input-placeholder")}}</li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Forms_in_HTML">Les formulaires en HTML</a></li>
+ <li>{{HTMLElement("input")}}</li>
+ <li>{{HTMLElement("textarea")}}</li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-webkit-meter-bar/index.html b/files/fr/web/css/_doublecolon_-webkit-meter-bar/index.html
new file mode 100644
index 0000000000..1b388c8cdb
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-webkit-meter-bar/index.html
@@ -0,0 +1,68 @@
+---
+title: '::-webkit-meter-bar'
+slug: 'Web/CSS/::-webkit-meter-bar'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::-webkit-meter-bar'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le pseudo-élément <strong><code>::-webkit-meter-bar</code></strong> est un pseudo-élément spécifique à WebKit et permet de mettre en forme l'arrière-plan d'un élément {{HTMLElement("meter")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">meter {
+   /* On réinitialise l'apparence par défaut */
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+meter::-webkit-meter-bar  {
+  background: #eee;
+  box-shadow: 0 2px 3px rgba (0, 0, 0, 0.2) inset;
+  border-radius: 3px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;meter min="0" max="10" value="6"&gt;Score sur 10&lt;/meter&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> Cela fonctionnera uniquement pour les navigateurs Webkit/Blink.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-webkit-meter-bar")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les pseudo-éléments utilisés par WebKit/Blink pour mettre en forme les autres parties d'un élément {{htmlelement("meter")}} :
+  <ul>
+   <li>{{cssxref("::-webkit-meter-inner-element")}}</li>
+   <li>{{cssxref("::-webkit-meter-even-less-good-value")}}</li>
+   <li>{{cssxref("::-webkit-meter-optimum-value")}}</li>
+   <li>{{cssxref("::-webkit-meter-suboptimum-value")}}</li>
+  </ul>
+ </li>
+ <li><a href="/fr/docs/Web/CSS/Webkit_Extensions">Les extensions CSS WebKit</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/css/_doublecolon_-webkit-meter-even-less-good-value/index.html b/files/fr/web/css/_doublecolon_-webkit-meter-even-less-good-value/index.html
new file mode 100644
index 0000000000..aad0332d89
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-webkit-meter-even-less-good-value/index.html
@@ -0,0 +1,56 @@
+---
+title: '::-webkit-meter-even-less-good-value'
+slug: 'Web/CSS/::-webkit-meter-even-less-good-value'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::-webkit-meter-even-less-good-value'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le pseudo-élément <strong><code>::-webkit-meter-even-less-good-value</code></strong> donne une couleur rouge à l'élément {{HTMLElement("meter")}} lorsque les valeurs de <code>value</code> et d'optimum sont dans des intervalles opposés (par exemple : <code>value</code> &lt; <code>low</code> &lt; <code>high</code> &lt; <code>optimum</code> ou <code>value</code> &gt; <code>high</code> &gt; <code>low</code> &gt; <code>optimum</code>).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">meter::-webkit-meter-even-less-good-value {
+  background: linear-gradient(to bottom, #f77, #d44 45%, #d44 55%, #f77);
+  height: 100%;
+  box-sizing: border-box;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;meter min="0" max="10" value="6"&gt;Score out of 10&lt;/meter&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '100%', 50)}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> Cela fonctionnera uniquement pour les navigateurs Webkit/Blink.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-webkit-meter-even-less-good-value")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>Les pseudo-éléments utilisés par WebKit/Blink pour mettre en forme les autres parties d'un élément {{htmlelement("meter")}} :</p>
+
+<ul>
+ <li>{{cssxref("::-webkit-meter-inner-element")}}</li>
+ <li>{{cssxref("::-webkit-meter-bar")}}</li>
+ <li>{{cssxref("::-webkit-meter-optimum-value")}}</li>
+ <li>{{cssxref("::-webkit-meter-suboptimum-value")}}</li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-webkit-meter-inner-element/index.html b/files/fr/web/css/_doublecolon_-webkit-meter-inner-element/index.html
new file mode 100644
index 0000000000..0bde368e10
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-webkit-meter-inner-element/index.html
@@ -0,0 +1,63 @@
+---
+title: '::-webkit-meter-inner-element'
+slug: 'Web/CSS/::-webkit-meter-inner-element'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::-webkit-meter-inner-element'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le pseudo-élément <strong><code>::-webkit-meter-inner-element</code></strong> est un pseudo-élément qui permet de sélectionner et d'appliquer des styles au conteneur d'un élément {{htmlelement("meter")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">meter {
+  /* Réinitialise l'apparence par défaut */
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+meter::-webkit-meter-inner-element {
+  -webkit-appearance: inherit;
+  box-sizing: inherit;
+  border: 1px solid #aaa;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;meter min="0" max="10" value="6"&gt;Score out of 10&lt;/meter&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '100%', 50)}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> Cela ne fonctionne que pour les navigateurs Webkit/Blink.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-webkit-meter-inner-element")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>Les pseudo-éléments utilisés par WebKit/Blink pour mettre en forme les autres parties d'un élément {{htmlelement("meter")}} :</p>
+
+<ul>
+ <li>{{cssxref("::-webkit-meter-bar")}}</li>
+ <li>{{cssxref("::-webkit-meter-even-less-good-value")}}</li>
+ <li>{{cssxref("::-webkit-meter-optimum-value")}}</li>
+ <li>{{cssxref("::-webkit-meter-suboptimum-value")}}</li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-webkit-meter-optimum-value/index.html b/files/fr/web/css/_doublecolon_-webkit-meter-optimum-value/index.html
new file mode 100644
index 0000000000..a62a09bb8b
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-webkit-meter-optimum-value/index.html
@@ -0,0 +1,56 @@
+---
+title: '::-webkit-meter-optimum-value'
+slug: 'Web/CSS/::-webkit-meter-optimum-value'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::-webkit-meter-optimum-value'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le pseudo-élément <strong><code>::-webkit-meter-optimum-value</code></strong> permet de mettre en forme l'élément {{HTMLElement("meter")}} lorsque la valeur de son attribut tombe dans l'intervalle haut. La couleur appliquée par défaut est le vert.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">meter::-webkit-meter-bar {
+  background : none;
+  background-color : whiteSmoke;
+  box-shadow : 0 5px 5px -5px #333 inset;
+}
+
+meter::-webkit-meter-optimum-value {
+  box-shadow: 0 5px 5px -5px #999 inset;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;meter min="0" max="10" value="6"&gt;Score out of 10&lt;/meter&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Examples', '100%', 50)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-webkit-meter-optimum-value")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>Les pseudo-éléments utilisés par WebKit/Blink pour mettre en forme les autres parties d'un élément {{htmlelement("meter")}} :</p>
+
+<ul>
+ <li>{{cssxref("::-webkit-meter-inner-element")}}</li>
+ <li>{{cssxref("::-webkit-meter-bar")}}</li>
+ <li>{{cssxref("::-webkit-meter-even-less-good-value")}}</li>
+ <li>{{cssxref("::-webkit-meter-suboptimum-value")}}</li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-webkit-meter-suboptimum-value/index.html b/files/fr/web/css/_doublecolon_-webkit-meter-suboptimum-value/index.html
new file mode 100644
index 0000000000..1774660de5
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-webkit-meter-suboptimum-value/index.html
@@ -0,0 +1,56 @@
+---
+title: '::-webkit-meter-suboptimum-value'
+slug: 'Web/CSS/::-webkit-meter-suboptimum-value'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::-webkit-meter-suboptimum-value'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le pseudo-élément <strong><code>::-webkit-meter-suboptimum-value</code></strong> donne une couleur jaune à l'élément {{HTMLElement("meter")}} lorsque la valeur de l'attribut est en dehors de l'intervalle haut des valeurs.</p>
+
+<h2 id="Exemples"><strong>Exemples</strong></h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">meter::-webkit-meter-suboptimum-value {
+  background: -webkit-gradient linear, left top, left bottom;
+  height: 100%;
+  box-sizing: border-box;
+}</pre>
+
+<h3 id="HTML"><strong>HTML</strong></h3>
+
+<pre class="brush: html">&lt;meter min="0" max="10" value="6"&gt;Score sur 10&lt;/meter&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Examples', '100%', 50)}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> Cette fonctionnalité ne sera visible que depuis un navigateur WebKit/Blink.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-webkit-meter-suboptimum-value")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>Les pseudo-éléments utilisés par WebKit/Blink pour mettre en forme les autres parties d'un élément {{htmlelement("meter")}} :</p>
+
+<ul>
+ <li>{{cssxref("::-webkit-meter-inner-element")}}</li>
+ <li>{{cssxref("::-webkit-meter-bar")}}</li>
+ <li>{{cssxref("::-webkit-meter-even-less-good-value")}}</li>
+ <li>{{cssxref("::-webkit-meter-optimum-value")}}</li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-webkit-outer-spin-button/index.html b/files/fr/web/css/_doublecolon_-webkit-outer-spin-button/index.html
new file mode 100644
index 0000000000..f53ee0d5d9
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-webkit-outer-spin-button/index.html
@@ -0,0 +1,48 @@
+---
+title: '::-webkit-outer-spin-button'
+slug: 'Web/CSS/::-webkit-outer-spin-button'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::-webkit-outer-spin-button'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le pseudo-élément <strong><code>::-webkit-outer-spin-button</code></strong> peut être utilisé afin de mettre en forme la partie extérieure du sélecteur numérique utilisé pour les éléments {{HTMLElement("input")}} de type <code>number</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input type="number"&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 200, 30)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink, il ne fait partie d'aucune spécification standard.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-webkit-outer-spin-button")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("::-webkit-inner-spin-button")}}</li>
+ <li>{{cssxref("::-webkit-textfield-decoration-container")}}</li>
+ <li><a href="https://trac.webkit.org/wiki/Styling%20Form%20Controls#inputelement">Mettre en forme les contrôles des formulaires – WebKit (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-webkit-progress-bar/index.html b/files/fr/web/css/_doublecolon_-webkit-progress-bar/index.html
new file mode 100644
index 0000000000..dab0700960
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-webkit-progress-bar/index.html
@@ -0,0 +1,66 @@
+---
+title: '::-webkit-progress-bar'
+slug: 'Web/CSS/::-webkit-progress-bar'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::-webkit-progress-bar'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le pseudo-élément <strong><code>::-webkit-progress-bar</code></strong> représente l'ensemble de la barre d'un élément {{HTMLElement("progress")}}. Normalement, celui-ci n'est visible que pour la partie de la barre qui n'est pas remplie car, par défaut, il est affiché sous le pseudo-élément {{cssxref("::-webkit-progress-value")}}. C'est un pseudo-élément fils du pseudo-élément {{cssxref("::-webkit-progress-inner-element")}} et c'est le pseudo-élément parent du pseudo-élément {{cssxref("::-webkit-progress-value")}}.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Afin que <code>::-webkit-progress-value</code> ait un effet, il faut que {{cssxref("appearance")}} vaille <code>none</code> sur l'élément <code>&lt;progress&gt;</code>.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">progress {
+  -webkit-appearance: none;
+}
+
+::-webkit-progress-bar {
+   background-color: orange;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;progress value="10" max="50"&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 200, 50)}}</p>
+
+<p>Une barre de progression avec la mise en forme ci-avant sera affichée de cette façon :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13488/progress-bar.png" style="height: 43px; width: 194px;"></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-webkit-progress-bar")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les pseudo-éléments relatifs à WebKit/Blink qui permettent de mettre en forme les autres parties des éléments {{HTMLElement("progress")}} :
+  <ul>
+   <li>{{cssxref("::-webkit-progress-value")}}</li>
+   <li>{{cssxref("::-webkit-progress-inner-element")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("::-moz-progress-bar")}}</li>
+ <li>{{cssxref("::-ms-fill")}}</li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-webkit-progress-inner-element/index.html b/files/fr/web/css/_doublecolon_-webkit-progress-inner-element/index.html
new file mode 100644
index 0000000000..4a3f1b4af1
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-webkit-progress-inner-element/index.html
@@ -0,0 +1,66 @@
+---
+title: '::-webkit-progress-inner-element'
+slug: 'Web/CSS/::-webkit-progress-inner-element'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::-webkit-progress-inner-element'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le pseudo-élément <strong><code>::-webkit-progress-inner-element</code></strong> représente le cadre extérieur de l'élément {{HTMLElement("progress")}}. C'est un pseudo-élément parent du pseudo-élément {{cssxref("::-webkit-progress-bar")}}.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Afin que <code>::-webkit-progress-value</code> ait un effet, il faut que {{cssxref("-webkit-appearance")}} vaille <code>none</code> sur l'élément <code>&lt;progress&gt;</code>.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">progress {
+  -webkit-appearance: none;
+}
+
+::-webkit-progress-inner-element {
+  border: 2px solid black;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;progress value="10" max="50"&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 200, 50)}}</p>
+
+<p>Une barre de progression avec la mise en forme ci-avant sera affichée de cette façon :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13492/-webkit-progress-inner-element%20example.png"></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-webkit-progress-inner-element")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les pseudo-éléments relatifs à WebKit/Blink qui permettent de mettre en forme les autres parties des éléments {{HTMLElement("progress")}}
+  <ul>
+   <li>{{cssxref("::-webkit-progress-bar")}}</li>
+   <li>{{cssxref("::-webkit-progress-value")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("::-moz-progress-bar")}}</li>
+ <li>{{cssxref("::-ms-fill")}}</li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-webkit-progress-value/index.html b/files/fr/web/css/_doublecolon_-webkit-progress-value/index.html
new file mode 100644
index 0000000000..eefb15ceec
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-webkit-progress-value/index.html
@@ -0,0 +1,65 @@
+---
+title: '::-webkit-progress-value'
+slug: 'Web/CSS/::-webkit-progress-value'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::-webkit-progress-value'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le pseudo-élément <strong><code>::-webkit-progress-value</code></strong> permet de représenter la portion « remplie » de la barre d'un élément {{HTMLElement("progress")}}. C'est un pseudo-élément fils du pseudo-élément {{cssxref("::-webkit-progress-bar")}}.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Afin que <code>::-webkit-progress-value</code> ait un effet, il faut que {{cssxref("-webkit-appearance")}} vaille <code>none</code> sur l'élément <code>&lt;progress&gt;</code>.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">progress {
+  -webkit-appearance: none;
+}
+
+::-webkit-progress-value {
+  background-color: orange;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;progress value="10" max="50"&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 200, 50)}}</p>
+
+<p>Une barre de progression avec la mise en forme ci-avant sera affichée de cette façon :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13490/progress-value.png" style="height: 60px; width: 249px;"></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-webkit-progress-value")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les pseudo-éléments relatifs à WebKit/Blink qui permettent de mettre en forme les autres parties des éléments {{HTMLElement("progress")}} :
+  <ul>
+   <li>{{cssxref("::-webkit-progress-bar")}}</li>
+   <li>{{cssxref("::-webkit-progress-inner-element")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("::-moz-progress-bar")}}</li>
+ <li>{{cssxref("::-ms-fill")}}</li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-webkit-scrollbar/index.html b/files/fr/web/css/_doublecolon_-webkit-scrollbar/index.html
new file mode 100644
index 0000000000..45d4fff49e
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-webkit-scrollbar/index.html
@@ -0,0 +1,123 @@
+---
+title: '::-webkit-scrollbar'
+slug: 'Web/CSS/::-webkit-scrollbar'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::-webkit-scrollbar'
+---
+<div>{{Draft}}{{CSSRef}}{{Non-standard_header}}</div>
+
+<div>Le pseudo-élément <code><strong>::-webkit-scrollbar</strong></code> permet de modifier le style de la barre de défilement associée à un élément. Il s'agit d'un pseudo-élément propriétaire, uniquement disponible pour les navigateurs WebKit.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{CSSSyntax}}
+</pre>
+
+<h2 id="Sélecteurs_de_scrollbars">Sélecteurs de <em>scrollbars</em></h2>
+
+<p>You can use the following pseudo elements to customize various parts of the scrollbar for webkit browsers:</p>
+
+<ul>
+ <li><code>::-webkit-scrollbar</code> — la barre entière.</li>
+ <li><code>::-webkit-scrollbar-button</code> — les boutons de la barre de défilement (les flèches vers le bas ou le haut)</li>
+ <li><code>::-webkit-scrollbar-thumb</code> — l'emplacement qui permet de déplacer la barre de défilement.</li>
+ <li><code>::-webkit-scrollbar-track</code> — la piste (la zone de progression) de la barre de défilement</li>
+ <li><code>::-webkit-scrollbar-track-piece</code> — la partie de la piste qui n'est pas couverte par le bouton de la barre de défilement.</li>
+ <li><code>::-webkit-scrollbar-corner</code> — le coin inférieur de la barre où les barres horizontales et verticales se rencontrent.</li>
+ <li><code>::-webkit-resizer</code> — le bouton qui apparaît dans le coin inférieur de certains éléments et qui permet de les redimensionner.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">.visible-scrollbar, .invisible-scrollbar, .mostly-customized-scrollbar {
+  display: block;
+  width: 10em;
+  overflow: auto;
+  height: 2em;
+}
+.invisible-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+/* Demonstrate a "mostly customized" scrollbar
+ * (won't be visible otherwise if width/height is specified) */
+.mostly-customized-scrollbar::-webkit-scrollbar {
+  width: 5px;
+  height: 8px;
+  background-color: #aaa; /* or add it to the track */
+}
+/* Add a thumb */
+.mostly-customized-scrollbar::-webkit-scrollbar-thumb {
+    background: #000;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="visible-scrollbar"&gt;
+  Etiam sagittis sem sed lacus laoreet, eu fermentum eros auctor.
+  Proin at nulla elementum, consectetur ex eget, commodo ante.
+  Sed eros mi, bibendum ut dignissim et, maximus eget nibh. Phasellus
+  blandit quam turpis, at mollis velit pretium ut. Nunc consequat
+  efficitur ultrices. Nullam hendrerit posuere est. Nulla libero
+  sapien, egestas ac felis porta, cursus ultricies quam. Vestibulum
+  tincidunt accumsan sapien, a fringilla dui semper in. Vivamus
+  consectetur ipsum a ornare blandit. Aenean tempus at lorem sit
+  amet faucibus. Curabitur nibh justo, faucibus sed velit cursus,
+  mattis cursus dolor. Pellentesque id pretium est. Quisque
+  convallis nisi a diam malesuada mollis. Aliquam at enim ligula.
+&lt;/div&gt;
+&lt;div class="invisible-scrollbar"&gt;Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword&lt;/div&gt;
+&lt;div class="mostly-customized-scrollbar"&gt;Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword&lt;br&gt;
+And pretty tall&lt;br&gt;
+thing with weird scrollbars.&lt;br&gt;
+Who thought scrollbars could be made weeeeird?&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<h3 id="-webkit-scrollbar"><code>::-webkit-scrollbar</code></h3>
+
+<p>{{Compat("css.selectors.-webkit-scrollbar")}}</p>
+
+<h3 id="-webkit-scrollbar-button"><code>::-webkit-scrollbar-button</code></h3>
+
+<p>{{Compat("css.selectors.-webkit-scrollbar-button")}}</p>
+
+<h3 id="-webkit-scrollbar-thumb"><code>::-webkit-scrollbar-thumb</code></h3>
+
+<p>{{Compat("css.selectors.-webkit-scrollbar-thumb")}}</p>
+
+<h3 id="-webkit-scrollbar-track"><code>::-webkit-scrollbar-track</code></h3>
+
+<p>{{Compat("css.selectors.-webkit-scrollbar-track")}}</p>
+
+<h3 id="-webkit-scrollbar-track-piece"><code>::-webkit-scrollbar-track-piece</code></h3>
+
+<p>{{Compat("css.selectors.-webkit-scrollbar-track-piece")}}</p>
+
+<h3 id="-webkit-scrollbar-corner"><code>::-webkit-scrollbar-corner</code></h3>
+
+<p>{{Compat("css.selectors.-webkit-scrollbar-corner")}}</p>
+
+<h3 id="-webkit-resizer"><code>::-webkit-resizer</code></h3>
+
+<p>{{Compat("css.selectors.-webkit-resizer")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Billet du blog WebKit <a href="https://webkit.org/blog/363/styling-scrollbars/">sur la mise en forme des barres de défilement</a></li>
+ <li>{{cssxref('-ms-overflow-style')}}</li>
+ <li>{{CSSxRef("scrollbar-width")}}</li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-webkit-search-cancel-button/index.html b/files/fr/web/css/_doublecolon_-webkit-search-cancel-button/index.html
new file mode 100644
index 0000000000..345ec5935b
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-webkit-search-cancel-button/index.html
@@ -0,0 +1,34 @@
+---
+title: '::-webkit-search-cancel-button'
+slug: 'Web/CSS/::-webkit-search-cancel-button'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::-webkit-search-cancel-button'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le pseudo-élément <strong><code>::-webkit-search-cancel-button</code></strong> représente le bouton d'annulation présenté au bout d'un champ {{HTMLElement("input")}} de type <code>search</code> et qui permet d'effacer la valeur actuellement saisie dans l'élément {{HTMLElement("input")}}. Ce bouton et ce pseudo-élément ne sont pas standards et ne sont pris en charge que par WebKit et Blink. Ce bouton est uniquement affiché pour les éléments {{HTMLElement("input")}} qui ne sont pas vides.</p>
+
+<h2 id="Syntaxe"><strong>Syntaxe</strong></h2>
+
+<pre class="syntaxbox"> <em>selecteur</em>::-webkit-search-cancel-button</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-webkit-search-cancel-button")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref('::-ms-clear')}}</li>
+ <li>{{cssxref('::-webkit-search-results-button')}}</li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-webkit-search-results-button/index.html b/files/fr/web/css/_doublecolon_-webkit-search-results-button/index.html
new file mode 100644
index 0000000000..00579110d6
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-webkit-search-results-button/index.html
@@ -0,0 +1,33 @@
+---
+title: '::-webkit-search-results-button'
+slug: 'Web/CSS/::-webkit-search-results-button'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::-webkit-search-results-button'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le pseudo-élément <strong><code>::-webkit-search-results-button</code></strong> représente le bouton affiché sur le bord gauche d'un élément {{HTMLElement("input")}} de type <code>"search"</code> qui affiche un menu proposant les dernières recherches effectuées à l'utilisateur. Ce bouton et ce pseudo-élément ne sont pas standards et sont uniquement pris en charge par WebKit/Blink. Le bouton des résultats de recherche est uniquement affiché pour les éléments {{HTMLElement("input")}} qui possèdent <a href="/fr/docs/Web/HTML/Element/Input">un attribut <code>r</code><code>esults</code></a>.</p>
+
+<h2 id="Syntaxe"><strong>Syntaxe</strong></h2>
+
+<pre class="syntaxbox"> <em>selecteur</em>::-webkit-search-results-button</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-webkit-search-results-button")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref('::-webkit-search-cancel-button')}}</li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-webkit-slider-runnable-track/index.html b/files/fr/web/css/_doublecolon_-webkit-slider-runnable-track/index.html
new file mode 100644
index 0000000000..c54cd2724b
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-webkit-slider-runnable-track/index.html
@@ -0,0 +1,35 @@
+---
+title: '::-webkit-slider-runnable-track'
+slug: 'Web/CSS/::-webkit-slider-runnable-track'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::-webkit-slider-runnable-track'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le pseudo-élément <strong><code>::-webkit-slider-runnable-track</code></strong> représente la piste utilisée par un élément {{HTMLElement("input")}} de type <code>"range"</code> (cf. {{HTMLElement("input/range", '&lt;input type="range"&gt;')}}).</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-webkit-slider-runnable-track")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("::-webkit-slider-thumb")}}</li>
+ <li>Similar pseudo-elements used by other browsers:
+  <ul>
+   <li>{{cssxref("::-ms-track")}}</li>
+   <li>{{cssxref("::-moz-range-track")}}</li>
+  </ul>
+ </li>
+ <li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">CSS-Tricks : Gérer des champs <code>input</code> de type <code>range</code> de façon compatible entre les navigateurs (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-webkit-slider-thumb/index.html b/files/fr/web/css/_doublecolon_-webkit-slider-thumb/index.html
new file mode 100644
index 0000000000..5dbe854f7c
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-webkit-slider-thumb/index.html
@@ -0,0 +1,36 @@
+---
+title: '::-webkit-slider-thumb'
+slug: 'Web/CSS/::-webkit-slider-thumb'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::-webkit-slider-thumb'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le pseudo-élément <strong><code>::-webkit-slider-thumb</code></strong> représente le curseur que peut déplacer l'utilisateur le long de la piste d'un élément {{HTMLElement("input")}} de type "<code>range"</code> afin de modifier la valeur numérique associée.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-webkit-slider-thumb")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("::-webkit-slider-runnable-track")}}</li>
+ <li>Les pseudo-éléments analogues utilisés par les autres navigateurs :
+  <ul>
+   <li>{{cssxref("::-moz-range-thumb")}}</li>
+   <li>{{cssxref("::-ms-thumb")}}</li>
+  </ul>
+ </li>
+ <li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">CSS-Tricks : Gérer des champs <code>input</code> de type <code>range</code> de façon compatible entre les navigateurs (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_after/index.html b/files/fr/web/css/_doublecolon_after/index.html
new file mode 100644
index 0000000000..7aa9760fa6
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_after/index.html
@@ -0,0 +1,181 @@
+---
+title: '::after (:after)'
+slug: 'Web/CSS/::after'
+tags:
+  - CSS
+  - Disposition
+  - Pseudo-element
+  - Reference
+  - Web
+translation_of: 'Web/CSS/::after'
+---
+<div>{{CSSRef}}</div>
+
+<p>En CSS, <strong><code>::after</code> </strong>crée un <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-élément</a> qui sera le dernier enfant de l'élément sélectionné. Il est souvent utilisé pour ajouter du contenu cosmétique à un élément, en utilisant la propriété CSS {{cssxref("content")}}. Par défaut, ce contenu est de type « <a href="/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte#Les_types_de_boîte">en ligne</a> ».</p>
+
+<pre class="brush:css no-line-numbers">/* Ajoute une flèche après les liens */
+a:after {
+  content: "→";
+}</pre>
+
+<div class="note">
+<p><strong>Note :</strong> les pseudo-éléments générés par <code>::before</code> et <code>::after</code> sont <a href="https://www.w3.org/TR/CSS2/generate.html#before-after-content">contenus dans la boîte de mise en forme de l'élément</a>. Aussi, <code>::before</code> et <code>::after</code> ne s'appliquent pas aux <em><a href="/fr/docs/Web/CSS/Élément_remplacé">éléments remplacés</a></em> tels que les éléments {{HTMLElement("img")}} ou {{HTMLElement("br")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<div class="note">
+<p><strong>Note :</strong> CSS3 a introduit la notation <code>::after</code>  (avec deux deux-points) pour distinguer les <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classes</a> des <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-éléments</a>. Les navigateurs acceptent aussi<code>:after</code>, introduite dans CSS2.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_simple">Utilisation simple</h3>
+
+<p>Nous allons ici créer deux classes : une pour les paragraphes ennuyeux et une pour les intéressants. Nous marquerons ensuite chacun de ces paragraphes en ajoutant un pseudo-élément après chacun d’eux.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p class="texte-ennuyeux"&gt;Voici un peu de vieux texte ennuyeux ordinaire.&lt;/p&gt;
+&lt;p&gt;Voici un peu de texte normal qui n'est ni ennuyeux, ni intéressant.&lt;/p&gt;
+&lt;p class="texte-interessant"&gt;Contribuer à MDN est facile et amusant.
+  Cliquez simplement sur le bouton Modifier pour ajouter de nouveaux exemples vivants, ou améliorer ceux existants.&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.texte-interessant::after {
+  content: "&lt;- maintenant, cela *est* intéressant !";
+  color: green;
+}
+
+.texte-ennuyeux::after {
+  content: "&lt;- ENNUYEUX !";
+  color: red;
+}</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Utilisation_simple', '100%', 170)}}</p>
+
+<h3 id="Exemple_décoratif">Exemple décoratif</h3>
+
+<p>On peut mettre en forme du texte ou des images avec la propriété {{cssxref("content")}} à peu près de quelque manière que nous le voulions :</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;span class="ruban"&gt;Observez où se trouve la boîte orange.&lt;/span&gt;
+</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">.ruban {
+  background-color: #5BC8F7;
+}
+
+.ruban::after {
+  content: "Voyez cette boîte orange.";
+  background-color: #FFBA10;
+  border-color: black;
+  border-style: dotted;
+}</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample('Exemple_décoratif', '100%', 60)}}</p>
+
+<h3 id="Bulles_d’information">Bulles d’information</h3>
+
+<p>Dans l'exemple suivant, on illustre le <a href="/fr-FR/docs/Web/CSS/Pseudo-elements">pseudo-élément</a> <code>::after </code>avec l'expression CSS {{cssxref("attr()")}} et un attribut de données personnalisé <code>data-descr</code> afin de créer une <em>bulle d'information</em> de type glossaire en CSS pur.</p>
+
+<p>On peut également aider les utilisateurs de clavier avec cette technique, en ajoutant un <code>tabindex</code> de <code>0</code> pour faire un <code>span</code> focusable, et en utilisant la sélection <code>:focus</code>. Cela montre à quel point les options <code>::before</code> and <code>::after </code>peuvent être flexibles, bien que, pour l'expérience la plus accessible, un widget de divulgation sémantique créé d'une autre manière serait probablement plus approprié..</p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;Voici l’exemple en action du code ci-dessus.&lt;br /&gt;
+  Nous avons un peu de &lt;span data-descr="collection de mots et de ponctuation"&gt;texte&lt;/span&gt;
+  ici avec quelques &lt;span data-descr="petites fenêtres surgissantes qui se cachent aussi"&gt;
+  bulles d’information&lt;/span&gt;.&lt;br /&gt;
+  Ne soyez pas timide, survolez le texte pour jeter un &lt;span data-descr="à ne pas prendre au sens littéral"&gt;œil&lt;/span&gt;.
+&lt;/p&gt;</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css">span[data-descr] {
+  position: relative;
+  text-decoration: underline;
+  color: #00F;
+  cursor: help;
+}
+
+span[data-descr]:hover::after {
+  content: attr(data-descr);
+  position: absolute;
+  left: 0;
+  top: 24px;
+  min-width: 200px;
+  border: 1px #aaaaaa solid;
+  border-radius: 10px;
+  background-color: #ffffcc;
+  padding: 12px;
+  color: #000000;
+  font-size: 14px;
+  z-index: 1;
+}</pre>
+
+<h4 id="Résultat_3">Résultat</h4>
+
+<p>{{EmbedLiveSample("Bulles_d’information", '100%', 150)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécifications</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Pseudo-Elements', '#selectordef-after', '::after')}}</td>
+   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>Pas de changement significatif depuis la spécification précédente.</td>
+  </tr>
+  <tr>
+   <td>{{Specname("CSS3 Transitions", "#animatable-properties", "")}}</td>
+   <td>{{Spec2("CSS3 Transitions")}}</td>
+   <td>Permet les transitions sur les propriétés définies sur les pseudo-éléments.</td>
+  </tr>
+  <tr>
+   <td>{{Specname("CSS3 Animations", "", "")}}</td>
+   <td>{{Spec2("CSS3 Animations")}}</td>
+   <td>Permet les animations sur les propriétés définies sur les pseudo-éléments.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#gen-content', '::after')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Introduit la syntaxe à deux deux-points.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'generate.html#before-after-content', '::after')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale, utilisant la syntaxe à un deux-points.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("css.selectors.after")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("::before")}}</li>
+ <li>{{cssxref("content")}}</li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_backdrop/index.html b/files/fr/web/css/_doublecolon_backdrop/index.html
new file mode 100644
index 0000000000..feb1775822
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_backdrop/index.html
@@ -0,0 +1,78 @@
+---
+title: '::backdrop'
+slug: 'Web/CSS/::backdrop'
+tags:
+  - CSS
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::backdrop'
+---
+<div>{{CSSRef}}</div>
+
+<p>Le <a href="/fr/docs/Web/CSS/Pseudo-%C3%A9l%C3%A9ments">pseudo-élément</a> <code><strong>::backdrop</strong></code> est une boîte de la taille de la zone d'affichage (<em>viewport</em>) qui est affichée immédiatement sous un élément lorsque ce dernier est affiché en plein écran. Cela correspond aux éléments passés en plein écran via l'<a href="/fr/docs/Web/API/Fullscreen_API">API Fullscreen</a> et aux éléments {{HTMLElement("dialog")}}.</p>
+
+<p>Lorsque plusieurs éléments sont en plein écran, ce pseudo-élément est dessiné derrière l'élément qui est le plus en avant et par dessus les autres éléments.</p>
+
+<pre class="brush: css no-line-numbers">// Cette ombre n'est affichée que lorsque la boîte de dialogue
+// est ouverte avec dialog.showModal()
+dialog::backdrop {
+  background: rgba(255,0,0,.25);
+}</pre>
+
+<p class="note"><strong>Note :</strong> L'élément <code>::backdrop</code> peut être utilisé comme un arrière-plan/masque pour l'élément afin de cacher le document en-dessous lorsque l'élément est affiché en plein écran selon la spécification.</p>
+
+<p>Ce pseudo-élément n'hérite d'aucun autre élément et aucun autre élément n'hérite de ce pseudo-élément. Aucune restriction ne s'applique pour les propriétés qui peuvent être appliquées à ce pseudo-élément.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, on indique que l'ombre derrière la vidéo en plein écran doit être bleu-gris plutôt que noire.</p>
+
+<pre class="brush: css">video::backdrop {
+  background-color: #448;
+}
+</pre>
+
+<p>Voici le résultat obtenu :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16287/bbb-backdrop.png" style="height: 282px; width: 500px;"></p>
+
+<p>On peut voir ici les bandes bleu-gris au dessus et en dessous de la vidéo alors que la zone est normalement noire.</p>
+
+<p>Vous pouvez <a href="https://fullscreen-requestfullscreen-demo.glitch.me/">voir cette démonstration en <em>live</em></a> ou <a href="https://glitch.com/edit/#!/fullscreen-requestfullscreen-demo">voir et modifier le code sur Glitch</a>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Fullscreen', '#::backdrop-pseudo-element', '::backdrop')}}</td>
+   <td>{{Spec2('Fullscreen')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.backdrop")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La pseudo-classe {{cssxref(":fullscreen")}}</li>
+ <li>L'élément HTML {{HTMLElement("dialog")}}</li>
+ <li><a href="/fr/docs/Web/API/Fullscreen_API">L'API Fullscreen</a></li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_before/index.html b/files/fr/web/css/_doublecolon_before/index.html
new file mode 100644
index 0000000000..4e30107c80
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_before/index.html
@@ -0,0 +1,190 @@
+---
+title: '::before (:before)'
+slug: 'Web/CSS/::before'
+tags:
+  - CSS
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::before'
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>::before</code></strong> crée un <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-élément</a> qui sera le premier enfant de l'élément ciblé. Généralement utilisé pour ajouter du contenu esthétique à un élément via la propriété CSS {{cssxref("content")}}. Par défaut, l'élément créé est de type en-ligne (<em>inline</em>).</p>
+
+<pre class="brush:css no-line-numbers notranslate">/* On ajoute un coeur avant les liens */
+a::before {
+  content: "♥";
+}
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Les pseudo-éléments générés par <code>::before</code> et <code>::after</code> sont contenus dans la boîte de mise en forme de l'élément. Aussi, <code>::before</code> et <code>::after</code> ne s'appliquent pas <a href="/fr/docs/Web/CSS/Élément_remplacé">aux éléments remplacés</a> tels que {{HTMLElement("img")}} ou {{HTMLElement("br")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}
+</pre>
+
+<p>La notation <code>::before</code> a été introduite par CSS 3 pour différencier les <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classes</a> et les <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-éléments</a>. Les navigateurs acceptent aussi la notation <code>:before </code>introduite par CSS 2.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Ajouter_des_guillemets">Ajouter des guillemets</h3>
+
+<p>Un exemple simple utilisant les pseudo-éléments pour ajouter des guillemets. Ici nous avons <code>::before</code> et {{cssxref("::after")}} pour effectuer l'insertion.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;q&gt;Quelques guillemets&lt;/q&gt;, dit-il, &lt;q&gt;sont mieux que pas du tout&lt;/q&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">q::before {
+  content: "«";
+  color: blue;
+}
+q::after {
+  content: '»';
+  color: red;
+}</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Ajouter_des_guillemets', '500', '50', '')}}</p>
+
+<h3 id="Exemple_décoratif">Exemple décoratif</h3>
+
+<p>Il est possible de mettre du style à du texte ou des images, dans la propriété {{cssxref("content")}} , quasiment de n'importe quelle manière.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;span class="ribbon"&gt;Observez où est placée la boite orange.&lt;/span&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">.ribbon {
+  background-color: #5BC8F7;
+}
+
+.ribbon::before {
+  content: "Regardez cette boite orange.";
+  background-color: #FFBA10;
+  border-color: black;
+  border-style: dotted;
+}</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample('Exemple_décoratif', 450, 60)}}</p>
+
+<h3 id="Liste_de_choses_à_faire">Liste de choses à faire</h3>
+
+<p>Dans cet exemple, nous allons créer une simple liste de choses à faire en utilisant les pseudo-éléments. Cette méthode peut être utilisée pour ajouter une petite touche à l'interface utilisateur et améliorer l'expérience utilisateur.</p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;ul&gt;
+  &lt;li&gt;Acheter du lait&lt;/li&gt;
+  &lt;li&gt;Promener le chien&lt;/li&gt;
+  &lt;li&gt;Faire de l'exercice&lt;/li&gt;
+  &lt;li&gt;Coder&lt;/li&gt;
+  &lt;li&gt;Jouer de la musique&lt;/li&gt;
+  &lt;li&gt;Se reposer&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css notranslate">li {
+  list-style-type: none;
+  position: relative;
+  margin: 1px;
+  padding: 0.5em 0.5em 0.5em 2em;
+  background: lightgrey;
+  font-family: sans-serif;
+}
+
+li.done {
+  background: #CCFF99;
+}
+
+li.done::before {
+  content: '';
+  position: absolute;
+  border-color: #009933;
+  border-style: solid;
+  border-width: 0 0.3em 0.25em 0;
+  height: 1em;
+  top: 1.3em;
+  left: 0.6em;
+  margin-top: -1em;
+  transform: rotate(45deg);
+  width: 0.5em;
+}</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js notranslate">var list = document.querySelector('ul');
+list.addEventListener('click', function(ev) {
+  if( ev.target.tagName === 'LI') {
+     ev.target.classList.toggle('done');
+  }
+}, false);
+</pre>
+
+<h4 id="Résultat_3">Résultat</h4>
+
+<p>{{EmbedLiveSample('Liste_de_choses_à_faire', '400', '300', '')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Pseudo-Elements', '#selectordef-before', '::before')}}</td>
+   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>Pas de modification significative depuis la spécification précédente.</td>
+  </tr>
+  <tr>
+   <td>{{Specname("CSS3 Transitions", "#animatable-properties", "")}}</td>
+   <td>{{Spec2("CSS3 Transitions")}}</td>
+   <td>Les transitions peuvent être appliquées sur les propriétés de ce pseudo-élément.</td>
+  </tr>
+  <tr>
+   <td>{{Specname("CSS3 Animations", "", "")}}</td>
+   <td>{{Spec2("CSS3 Animations")}}</td>
+   <td>Les animations peuvent être appliquées sur les propriétés de ce pseudo-élément.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#gen-content', '::before')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Introduction de la syntaxe avec les deux deux-points.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'generate.html#before-after-content', '::before')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale avec une seule fois le caractère deux-points.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.before")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("::after")}}</li>
+ <li>{{cssxref("content")}}</li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_cue-region/index.html b/files/fr/web/css/_doublecolon_cue-region/index.html
new file mode 100644
index 0000000000..185f78c396
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_cue-region/index.html
@@ -0,0 +1,84 @@
+---
+title: '::cue-region'
+slug: 'Web/CSS/::cue-region'
+tags:
+  - CSS
+  - Media
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::cue-region'
+---
+<p>{{CSSRef}}{{Draft}}{{SeeCompatTable}}</p>
+
+<p><span class="seoSummary">Le pseudo-élément CSS <strong><code>::cue-region</code></strong> correspond à une piste {{DOMxRef("WebVTT API", "WebVTT", "", 1)}} de l'élément ciblé. Il peut être utilisé afin de <a href="/docs/Web/API/WebVTT_API#Styling_WebTT_cues">mettre en forme des sous-titres et autres indications textuelles</a> de pistes VTT.</span></p>
+
+<pre class="brush: css; no-line-numbers">::cue-region {
+  color: yellow;
+  font-weight: bold;
+}</pre>
+
+<h2 id="Propriétés_autorisées">Propriétés autorisées</h2>
+
+<p>Les règles utilisant <code>::cue-region</code> sont limitées aux propriétés CSS suivantes :</p>
+
+<ul>
+ <li>{{CSSxRef("background")}} ainsi que les propriétés détaillées correspondantes</li>
+ <li>{{CSSxRef("color")}}</li>
+ <li>{{CSSxRef("font")}} ainsi que les propriétés détaillées correspondantes</li>
+ <li>{{CSSxRef("line-height")}}</li>
+ <li>{{CSSxRef("opacity")}}</li>
+ <li>{{CSSxRef("outline")}} ainsi que les propriétés détaillées correspondantes</li>
+ <li>{{CSSxRef("ruby-position")}}</li>
+ <li>{{CSSxRef("text-combine-upright")}}</li>
+ <li>{{CSSxRef("text-decoration")}} ainsi que les propriétés détaillées correspondantes</li>
+ <li>{{CSSxRef("text-shadow")}}</li>
+ <li>{{CSSxRef("visibility")}}</li>
+ <li>{{CSSxRef("white-space")}}</li>
+</ul>
+
+<p>Les propriétés sont appliquées à l'intégralité des indications textuelles comme si celles-ci formaient une seule unité. La seulle exception à ce comportement est l'application de <code>background</code> (et/ou des propriétés détaillées correspondantes) : cette propriété s'applique distinctement à chaque partie du texte séparément afin d'éviter de masquer ou d'obscurcir de grandes zones de texte sur le média.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Un exemple doit être construit pour cette page, n'hésitez pas à le faire sur la version anglaise d'abord avant de le reporter ici.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("WebVTT", "#the-cue-region-pseudo-element", "the <code>::cue-region</code> pseudo-element")}}</td>
+   <td>{{Spec2("WebVTT")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.cue-region")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les autres sélecteurs {{DOMxRef("WebVTT API", "WebVTT", "", 1)}} :
+  <ul>
+   <li>{{CSSxRef("::cue")}}</li>
+   <li>{{CSSxRef(":past")}}</li>
+   <li>{{CSSxRef(":future")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_cue/index.html b/files/fr/web/css/_doublecolon_cue/index.html
new file mode 100644
index 0000000000..7afc17e42c
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_cue/index.html
@@ -0,0 +1,81 @@
+---
+title: '::cue'
+slug: 'Web/CSS/::cue'
+tags:
+  - CSS
+  - Pseudo-element
+  - Reference
+  - WebVTT
+translation_of: 'Web/CSS/::cue'
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">Le pseudo-élément CSS <strong><code>::cue</code></strong> permet de cibler les indications textuelles <a href="/fr/docs/Web/API/WebVTT_API">WebVTT</a> d'un élément. Ce pseudo-élément peut être utilisé afin de mettre en forme <a href="/fr/docs/Web/API/WebVTT_API#Styling_WebTT_cues">les légendes et autres indications textuelles</a> pour les médias avec des pistes VTT.</span></p>
+
+<pre class="brush: css no-line-numbers">::cue {
+  color: yellow;
+  font-weight: bold;
+}</pre>
+
+<h2 id="Propriétés_autorisées">Propriétés autorisées</h2>
+
+<p>Seul un sous-ensemble des propriétés CSS peut être utilisé avec le pseudo-élément <code>::cue</code> :</p>
+
+<ul>
+ <li>{{CSSxRef("background")}} et les propriétés détaillées associées</li>
+ <li>{{CSSxRef("color")}}</li>
+ <li>{{CSSxRef("font")}} et les propriétés détaillées associées</li>
+ <li>{{CSSxRef("line-height")}}</li>
+ <li>{{CSSxRef("opacity")}}</li>
+ <li>{{CSSxRef("outline")}} et les propriétés détaillées associées</li>
+ <li>{{CSSxRef("ruby-position")}}</li>
+ <li>{{CSSxRef("text-combine-upright")}}</li>
+ <li>{{CSSxRef("text-decoration")}} et les propriétés détaillées associées</li>
+ <li>{{CSSxRef("text-shadow")}}</li>
+ <li>{{CSSxRef("visibility")}}</li>
+ <li>{{CSSxRef("white-space")}}</li>
+</ul>
+
+<p>Les propriétés sont appliquées à l'ensembles des indications (comme si celles-ci formaient un seul ensemble). Seule <code>background</code> (ou les propriétés raccourcies associées) s'appliquent à chaque indication séparément (afin d'éviter de créer des boîtes qui masqueraient de grandes zones sur le média).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>La règle CSS suivante permet d'avoir les indications textuelles dans un texte blanc et sur un arrière-plan qui est une boîte noire transparent.</p>
+
+<pre class="brush: css">::cue {
+  color: #fff;
+  background-color: rgba(0, 0, 0, 0.6);
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Spécification</th>
+   <th>État</th>
+   <th>Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("WebVTT", "#the-cue-pseudo-element", "::cue")}}</td>
+   <td>{{Spec2("WebVTT")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("css.selectors.cue")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/WebVTT_API">Web Video Tracks Format (WebVTT)</a></li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_first-letter/index.html b/files/fr/web/css/_doublecolon_first-letter/index.html
new file mode 100644
index 0000000000..be24b0b651
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_first-letter/index.html
@@ -0,0 +1,143 @@
+---
+title: '::first-letter'
+slug: 'Web/CSS/::first-letter'
+tags:
+  - CSS
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::first-letter'
+---
+<div>{{CSSRef}}</div>
+
+<p>Le <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-élément</a> <strong><code>::first-letter</code></strong> sélectionne la première lettre de la première ligne d'un bloc, si elle n'est pas précédée par un quelconque autre contenu (comme une image ou un tableau en ligne) sur sa ligne.</p>
+
+<pre class="brush: css no-line-numbers">/* Sélectionne la première lettre */
+/* d'un élément &lt;p&gt; */
+p::first-letter {
+  color: red;
+  font-size: 130%;
+}</pre>
+
+<p>La première lettre d'un élément n'est pas forcément évidente à identifier :</p>
+
+<ul>
+ <li>La ponctuation, c'est-à-dire n'importe quel caractère défini dans une des classes Unicode <em lang="en">open</em> (Ps), <em lang="en">close</em> (Pe), <em lang="en">initial quote</em> (Pi), <em lang="en">final quote</em> (Pf) et <em lang="en">other punctuation</em> (Po) , précédant ou suivant immédiatement la première lettre est aussi sélectionnée par ce pseudo-élément.</li>
+ <li>D'autre part, certaines langues possèdent des digraphes qui sont mis en majuscule ensemble, comme le <code>IJ</code> en néerlandais. Dans ces rares cas, les deux lettres du digraphes doivent être sélectionnées par le pseudo-élément <code>::first-letter</code>. (Ceci est mal supporté par les navigateurs, reportez vous au <a href="/fr/CSS/::first-letter#Compatibilité_des_navigateurs">tableau de compatibilité des navigateurs</a>).</li>
+ <li>Enfin, une combinaison du pseudo-élément {{cssxref("::before")}} et de la propriété {{cssxref("content")}} peut injecter du texte au début de l'élément. Dans ce cas, <code>::first-letter</code> sélectionnera la première lettre du contenu inséré.</li>
+</ul>
+
+<p>Une première ligne n'a de signification que dans une <a href="/fr/docs/Web/Guide/CSS/Visual_formatting_model#Block-level_elements_and_block_boxes">boîte englobante</a>, ainsi le pseudo-élément <code>::first-letter</code> n'a un effet que sur les éléments ayant une valeur {{cssxref("display")}} correspondant à <code>block</code>, <code>inline-block</code>, <code>table-cell</code>, <code>list-item</code> ou <code>table-caption</code>. Dans tous les autres cas, <code>::first-letter</code> n'a pas d'effet.</p>
+
+<h2 id="Propriétés_utilisables">Propriétés utilisables</h2>
+
+<p>Seul un petit sous-groupe de propriétés CSS peuvent être utilisées dans un bloc déclaratif contenant un sélecteur utilisant le pseudo-élément <code>::first-letter</code> :</p>
+
+<ul>
+ <li>Toutes les propriétés liées aux polices de caractère : {{cssxref("font")}}, {{cssxref("font-style")}}, {{cssxref("font-feature-settings")}}, {{cssxref("font-kerning")}}, {{cssxref("font-language-override")}}, {{cssxref("font-stretch")}}, {{cssxref("font-synthesis")}}, {{cssxref("font-variant")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{cssxref("font-weight")}}, {{cssxref("font-size")}}, {{cssxref("font-size-adjust")}}, {{cssxref("line-height")}} et {{cssxref("font-family")}}.</li>
+ <li>Toutes les propriétés liées à l'arrière-plan : {{cssxref("background")}},{{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-clip")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}, {{cssxref("background-attachment")}} et {{cssxref("background-blend-mode")}}.</li>
+ <li>Toutes les propriétés liées à <code>margin</code> : {{cssxref("margin")}}, {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}}.</li>
+ <li>Toutes les propriétés liées à <code>padding</code> : {{cssxref("padding")}}, {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}.</li>
+ <li>Toutes les propriétés liées aux bordures : les raccourcis {{cssxref("border")}}, {{cssxref("border-style")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}}, {{cssxref("border-radius")}}, {{cssxref("border-image")}}, et les propriétés détaillées.</li>
+ <li>La propriété {{cssxref("color")}} .</li>
+ <li>Les propriétés  {{cssxref("text-decoration")}}, {{cssxref("text-shadow")}}, {{cssxref("text-transform")}}, {{cssxref("letter-spacing")}}, {{cssxref("word-spacing")}} (lorsqu'approprié), {{cssxref("line-height")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}}, {{cssxref("box-shadow")}}, {{cssxref("float")}}, {{cssxref("vertical-align")}} (seulement si <code>float</code> vaut <code>none</code>).</li>
+</ul>
+
+<p>Puisque cette liste sera complétée dans l'avenir, il est recommandé de ne pas utiliser d'autres propriétés dans un bloc de déclaration, de manière à concevoir un CSS pérenne.</p>
+
+<div class="note">Dans CSS 2, les pseudo-éléments étaient précédés d'un seul caractère deux-points. Puisque les pseudo-classes suivaient elles aussi cette convention, la distinction était impossible. Afin de résoudre ce problème, CSS 2.1 a modifié la convention des pseudo-éléments. Désormais un pseudo-élément est précédé de deux caractères deux-points, et une pseudo-classe est toujours précédée d'un seul caractère deux-points.<br>
+<br>
+Du fait que de nombreux navigateurs avaient déjà implémentés la syntaxe CSS 2 dans une version publique, tous les navigateurs supportant la syntaxe à deux caractères deux-points peuvent aussi supporter l'ancienne syntaxe à un caractère deux-points.<br>
+<br>
+Si les navigateurs anciens doivent être supportés, <code>:first-letter</code> est le seul choix viable. Sinon, la syntaxe <code>::first-letter</code> doit être privilégiée.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, on prend la première lettre de chaque paragraphe et on l'affiche en rouge et en gros.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p::first-letter {
+  color: red;
+  font-size: 130%;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
+  ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
+  dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor
+  sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy amet.&lt;/p&gt;
+&lt;p&gt;Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.&lt;/p&gt;
+&lt;p&gt;Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
+  aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
+  esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et
+  iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait
+  nulla facilisi.&lt;/p&gt;
+&lt;p&gt;-The beginning of a special punctuation mark.&lt;/p&gt;
+&lt;p&gt;_The beginning of a special punctuation mark.&lt;/p&gt;
+&lt;p&gt;"The beginning of a special punctuation mark.&lt;/p&gt;
+&lt;p&gt;'The beginning of a special punctuation mark.&lt;/p&gt;
+&lt;p&gt;*The beginning of a special punctuation mark.&lt;/p&gt;
+&lt;p&gt;#The beginning of a special punctuation mark.&lt;/p&gt;
+&lt;p&gt;「特殊的汉字标点符号开头。&lt;/p&gt;
+&lt;p&gt;《特殊的汉字标点符号开头。&lt;/p&gt;
+&lt;p&gt;“特殊的汉字标点符号开头。&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '80%', 420)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Spécification</th>
+   <th>Statut</th>
+   <th>Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Pseudo-Elements', '#first-letter-pseudo', '::first-letter')}}</td>
+   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>Généralisation des propriétés permises pour la mise en forme du texte et des popriétés de mise en page en-ligne, {{cssxref("opacity")}} et {{cssxref("box-shadow")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow avec ::first-letter')}}</td>
+   <td>{{Spec2('CSS3 Text Decoration')}}</td>
+   <td>Autorise l'usage de {{cssxref("text-shadow")}} avec <code>::first-letter</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#first-letter', '::first-letter')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Définition des cas limites comme les listes, ou les comportement spécifiques à certaines langues (comme le digraphe néerlandais <code>IJ</code>).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#first-letter', '::first-letter')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#the-first-letter-pseudo-element', '::first-letter')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>La définition initiale utilisait la syntaxe à un caractère deux-points.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.first-letter")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("::first-line")}}</li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_first-line/index.html b/files/fr/web/css/_doublecolon_first-line/index.html
new file mode 100644
index 0000000000..55e30bf773
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_first-line/index.html
@@ -0,0 +1,161 @@
+---
+title: '::first-line (:first-line)'
+slug: 'Web/CSS/::first-line'
+tags:
+  - CSS
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::first-line'
+---
+<div>{{CSSRef}}</div>
+
+<p>Le <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-élément</a> <strong><code>::first-line</code></strong> applique la décoration à la première ligne d'un élément. La quantité de texte sur la première ligne dépend de nombreux facteurs, comme la largeur des éléments ou du document, mais aussi de la taille du texte. Comme tous les pseudo-éléments, les sélecteurs contenant <code>::first-line</code> ne ciblent pas un élément HTML réel.</p>
+
+<pre class="brush: css no-line-numbers">/* Sélectionne la première ligne */
+/*  d'un élément &lt;p&gt; */
+::first-line {
+  color: red;
+  text-transform: uppercase;
+}</pre>
+
+<p>Une première ligne n'a de sens que dans une <a href="/fr/docs/CSS/Visual_formatting_model#Block-level_elements_and_block_boxes">boîte de type bloc</a>, et ainsi le pseudo-élément <code>::first-line</code> n'a d'effet que sur les éléments dont {{cssxref("display")}} à une valeur de <code>block</code>, <code>inline-block</code>, <code>table-cell</code> ou <code>table-caption</code>. Dans tous les autres cas, <code>::first-line</code> n'a pas d'effet.</p>
+
+<h2 id="Propriétés_utilisables">Propriétés utilisables</h2>
+
+<p>Seul un sous-ensemble de propriétés CSS peut être utilisé dans un bloc de déclaration contenant un sélecteur CSS utilisant le pseudo-élément <code>::first-line</code> :</p>
+
+<ul>
+ <li>Toutes les propriétés liées aux polices de caractères : {{cssxref("font")}}, {{cssxref("font-kerning")}}, {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-synthesis")}}, {{cssxref("font-feature-settings")}}, {{cssxref("font-language-override")}}, {{cssxref("font-weight")}}, {{cssxref("font-size")}}, {{cssxref("font-size-adjust")}}, {{cssxref("font-stretch")}} et {{cssxref("font-family")}}</li>
+ <li>La propriété {{cssxref("color")}}</li>
+ <li>Toutes les propriétés liées à l'arrière-plan : {{cssxref("background-color")}}, {{cssxref("background-clip")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}},  {{cssxref("background-attachment")}} et {{cssxref("background-blend-mode")}}</li>
+ <li>{{cssxref("word-spacing")}}, {{cssxref("letter-spacing")}}, {{cssxref("text-decoration")}}, {{cssxref("text-transform")}} et {{cssxref("line-height")}}</li>
+ <li>{{cssxref("text-shadow")}}, {{cssxref("text-decoration")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}} et {{cssxref("vertical-align")}}.</li>
+</ul>
+
+<p>Comme cette liste sera étendue dans le futur, il est recommandé de ne pas utiliser d'autres propriétés dans un bloc de déclaration, de manière à ce que le CSS reste pérenne.</p>
+
+<div class="note">Dans CSS 2, les pseudo-éléments étaient précédés d'un seul caractère deux-points. Comme les pseudo-classes utilisaient aussi la même convention, ils n'était pas possible de les distinguer. Afin de résoudre cela, CSS 2.1 à changé la convention des pseudo-éléments. Désormais, un pseudo-élément est précédé de deux caractères deux-points, et une pseudo-classe d'un seul.<br>
+<br>
+Puisque de nombreux navigateurs avaient déjà mis en place la version CSS 2 dans une version publique, tous les navigateurs supportent les deux syntaxes.<br>
+<br>
+Si les navigateurs anciens doivent être supportés, <code>:first-line</code> est le seul choix viable ; sinon<code>,::first-line</code> est préféré.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="text-transform"><code>text-transform</code></h3>
+
+<p>Toutes les lettres de la première ligne de chaque paragraphe sont en majuscules.</p>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">p::first-line {
+  text-transform: uppercase;
+}</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+  sed do eiusmod tempor incididunt ut labore.
+&lt;/p&gt;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('text-transform', 250, 100)}}</p>
+
+<h3 id="margin-left"><code>margin-left</code></h3>
+
+<p>Ici, l'effet est nul car <code>margin-left</code> ne peut pas être appliquée sur ce pseudo-élément.</p>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">p::first-line {
+  margin-left: 20px;
+}</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+  sed do eiusmod tempor incididunt ut labore.
+&lt;/p&gt;</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample('margin-left', 250, 100)}}</p>
+
+<h3 id="text-indent"><code>text-indent</code></h3>
+
+<p>Là encore, l'effet est nul, <code>text-indent</code> ne peut pas être appliqué sur ce pseudo-élément.</p>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css">p::first-line {
+  text-indent: 20px;
+}</pre>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+  sed do eiusmod tempor incididunt ut labore.
+&lt;/p&gt;</pre>
+
+<h4 id="Résultat_3">Résultat</h4>
+
+<p>{{EmbedLiveSample('text-indent', 250, 100)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Pseudo-Elements', '#first-line-pseudo', '::first-line')}}</td>
+   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>La définition est affinée pour indiquer où ce pseudo-élément peut correspondre. Les propriétés possibles sont généralisées (fontes, décoration, disposition en ligne et {{cssxref("opacity")}}). Définit l'héritage de <code>::first-letter</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow with ::first-line')}}</td>
+   <td>{{Spec2('CSS3 Text Decoration')}}</td>
+   <td>La propriété {{cssxref("text-shadow")}} peut être utilisée avec <code>::first-letter</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#first-line', '::first-line')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>La définition de « première ligne » a été reformulée. La syntaxe utilise désormais deux fois le caractère deux-points.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#first-line-pseudo', '::first-line')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#the-first-line-pseudo-element', '::first-line')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>La définition initiale qui utilise la syntaxe avec un seul caractère deux-points.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.first-line")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("::first-letter")}}</li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_grammar-error/index.html b/files/fr/web/css/_doublecolon_grammar-error/index.html
new file mode 100644
index 0000000000..666687330d
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_grammar-error/index.html
@@ -0,0 +1,84 @@
+---
+title: '::grammar-error'
+slug: 'Web/CSS/::grammar-error'
+tags:
+  - CSS
+  - Experimental
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::grammar-error'
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>Le pseudo-élément CSS <strong><code>::grammar-error</code></strong> représente une portion de texte que le navigateur signale comme contenant une ou plusieurs erreurs de grammaire.</p>
+
+<pre class="brush: css no-line-numbers">::grammar-error {
+  color: green;
+}</pre>
+
+<h2 id="Propriétés_autorisées">Propriétés autorisées</h2>
+
+<p>Seul un sous-ensemble restreint de propriétés CSS peut être utilisé dans une règle contenant <code>::grammar-error</code> :</p>
+
+<ul>
+ <li>{{cssxref("background-color")}},</li>
+ <li>{{cssxref("caret-color")}},</li>
+ <li>{{cssxref("color")}},</li>
+ <li>{{cssxref("cursor")}},</li>
+ <li>{{cssxref("outline")}} et les propriétés détaillées associées,</li>
+ <li>{{cssxref("text-decoration")}} et les propriétés détaillées associées.</li>
+ <li>{{cssxref("text-emphasis-color")}},</li>
+ <li>{{cssxref("text-shadow")}}</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">::grammar-error</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p::grammar-error { color:red }</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  Alice devina tout de suite qu’il chercher l’éventail
+  et la paire de gants.
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","250","100")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Pseudo-Elements', '#selectordef-grammar-error', '::grammar-error')}}</td>
+   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.grammar-error")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("::spelling-error")}}</li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_marker/index.html b/files/fr/web/css/_doublecolon_marker/index.html
new file mode 100644
index 0000000000..53b3fc1fe5
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_marker/index.html
@@ -0,0 +1,100 @@
+---
+title: '::marker'
+slug: 'Web/CSS/::marker'
+tags:
+  - CSS
+  - Experimental
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::marker'
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>Le pseudo-élément <strong><code>::marker</code></strong> représente le marqueur d'un élément d'une liste (par exemple la puce ou le numéro de l'élément d'un élément {{HTMLElement("li")}}). Ce pseudo-élément ne fonctionne que pour les éléments ou pseudo-éléments pour lesquels {{cssxref("display")}} vaut <code>list-item</code> (par défaut c'est le cas des éléments {{htmlelement("li")}} et {{htmlelement("summary")}}).</p>
+
+<pre class="brush: css no-line-numbers">::marker {
+  color: red;
+  font-size: 1.5em;
+}</pre>
+
+<h2 id="Propriétés_autorisées">Propriétés autorisées</h2>
+
+<p>Seul un sous-ensemble de propriétés CSS peuvent être utilisées pour une règle qui utilise <code>::marker</code> :</p>
+
+<ul>
+ <li>{{cssxref("color")}},</li>
+ <li>{{cssxref("text-combine-upright")}}, {{cssxref("unicode-bidi")}} et {{cssxref("direction")}}</li>
+ <li>{{cssxref("content")}}</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Fonts">Toutes les propriétés liées aux polices (font).</a></li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> La spécification indique que d'autres propriétés CSS pourraient être prises en charge à l'avenir.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{CSSSyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">li::marker {
+  color:red;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ol&gt;
+ &lt;li&gt;Savoir lacer ses chaussures&lt;/li&gt;
+ &lt;li&gt;Et compter deux par deux.&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","200","150")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Pseudo-Elements', '#marker-pseudo', '::marker')}}</td>
+   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>Aucune modification significative.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Lists', '#marker-pseudo', '::marker')}}</td>
+   <td>{{Spec2('CSS3 Lists')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.marker")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les éléments HTML relatifs aux listes :
+  <ul>
+   <li>{{htmlelement("ul")}}</li>
+   <li>{{htmlelement("ol")}}</li>
+   <li>{{htmlelement("li")}}</li>
+  </ul>
+ </li>
+ <li>{{htmlelement("summary")}}</li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_part/index.html b/files/fr/web/css/_doublecolon_part/index.html
new file mode 100644
index 0000000000..2d966e1fc8
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_part/index.html
@@ -0,0 +1,113 @@
+---
+title: '::part()'
+slug: 'Web/CSS/::part'
+tags:
+  - '::part'
+  - CSS
+  - Draft
+  - Exp
+  - NeedsBrowserCompatibility
+  - NeedsExample
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::part'
+---
+<div>{{CSSRef}}{{Draft}}{{SeeCompatTable}}</div>
+
+<p>Le <a href="/fr/docs/Web/CSS/Pseudo-elements">pseudo-élément</a> <a href="/fr/docs/Web/CSS">CSS</a> <strong><code>::part</code></strong> représente n’importe quel élément dans un <a href="/fr/docs/Web/Web_Components/Using_shadow_DOM">arbre fantôme</a> qui a un attribut {{HTMLAttrxRef("part")}} correspondant.</p>
+
+<pre class="brush: css no-line-numbers">custom-element::part(foo) {
+  /* Styles à appliquer à la partie `foo` */
+}
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="&lt;tabbed-custom-element>"><code>&lt;tabbed-custom-element&gt;</code></h3>
+
+<h4 id="Arbre_fantôme_&lt;tabbed-custom-element>">Arbre fantôme <code>&lt;tabbed-custom-element&gt;</code></h4>
+
+<pre class="brush: html">&lt;style type="text/css"&gt;
+  *, ::before, ::after {
+    box-sizing: border-box;
+  }
+
+  :host {
+    display: flex;
+  }
+&lt;/style&gt;
+&lt;div part="tab active"&gt;
+  Tab 1
+&lt;/div&gt;
+&lt;div part="tab"&gt;
+  Tab 2
+&lt;/div&gt;
+&lt;div part="tab"&gt;
+  Tab 3
+&lt;/div&gt;
+</pre>
+
+<h4 id="Feuille_de_style_chargée_dans_un_arbre_léger">Feuille de style chargée dans un arbre léger</h4>
+
+<pre class="brush: css">
+tabbed-custom-element::part(tab) {
+  color: #0c0c0dcc;
+  border-bottom: transparent solid 2px;
+}
+
+tabbed-custom-element::part(tab):hover {
+  background-color: #0c0c0d19;
+  border-color: #0c0c0d33;
+}
+
+tabbed-custom-element::part(tab):hover:active {
+  background-color: #0c0c0d33;
+}
+
+tabbed-custom-element::part(tab):focus {
+  box-shadow:
+    0 0 0 1px #0a84ff inset,
+    0 0 0 1px #0a84ff,
+    0 0 0 4px rgba(10, 132, 255, 0.3);
+}
+
+tabbed-custom-element::part(active tab) {
+  color: #0060df;
+  border-color: #0a84ff !important;
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">­État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS Shadow Parts", "#part", "::part")}}</td>
+   <td>{{Spec2("CSS Shadow Parts")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité présenté sur cette page est généré à partir de données structurées. Si vous désirez contribuer à ces données, veuillez visiter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une demande de récupération.</div>
+
+<p>{{Compat("css.selectors.part")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L’attribut {{HTMLAttrxRef("part")}} - Utilisé pour définir des parties qui peuvent être sélectionnées par le sélecteur <code>::part()</code></li>
+ <li>L'attribut {{HTMLattrxref("exportparts")}} qui est utilisé pour exporter les parties d'un arbre <em>shadow</em> imbriqué vers un arbre classique</li>
+ <li><a href="https://github.com/fergald/docs/blob/master/explainers/css-shadow-parts-1.md">Utilisation de CSS Shadow : <code>::part</code> et <code>::theme</code></a></li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_placeholder/index.html b/files/fr/web/css/_doublecolon_placeholder/index.html
new file mode 100644
index 0000000000..70ba6c1830
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_placeholder/index.html
@@ -0,0 +1,156 @@
+---
+title: '::placeholder'
+slug: 'Web/CSS/::placeholder'
+tags:
+  - CSS
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::placeholder'
+---
+<div>{{CSSRef}}</div>
+
+<p>Le <a href="/fr/docs/Web/CSS/Pseudo-%C3%A9l%C3%A9ments">pseudo-élément</a> <strong><code>::placeholder</code></strong> représente <a href="/fr/docs/Web/Guide/HTML/Forms_in_HTML#The_placeholder_attribute">le texte de substitution</a> pour un élément {{HTMLElement("input")}} ou {{HTMLElement("textarea")}}. Cela permet aux développeurs web de personnaliser l'apparence de ce texte.</p>
+
+<pre class="brush: css no-line-numbers">::placeholder {
+  color: blue;
+  font-size: 1.5em;
+}</pre>
+
+<p>Seul un sous-ensemble des propriétés CSS peut être utilisé avec un sélecteur respectant ce pseudo-élément :</p>
+
+<ul>
+ <li>Toutes les propriétés liées aux polices de caractères : {{cssxref("font")}}, {{cssxref("font-kerning")}}, {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-synthesis")}}, {{cssxref("font-feature-settings")}}, {{cssxref("font-language-override")}}, {{cssxref("font-weight")}}, {{cssxref("font-size")}}, {{cssxref("font-size-adjust")}}, {{cssxref("font-stretch")}} et {{cssxref("font-family")}}</li>
+ <li>La propriété {{cssxref("color")}}</li>
+ <li>Toutes les propriétés liées à l'arrière-plan : {{cssxref("background-color")}}, {{cssxref("background-clip")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}},  {{cssxref("background-attachment")}} et {{cssxref("background-blend-mode")}}</li>
+ <li>{{cssxref("word-spacing")}}, {{cssxref("letter-spacing")}}, {{cssxref("text-decoration")}}, {{cssxref("text-transform")}} et {{cssxref("line-height")}}</li>
+ <li>{{cssxref("text-shadow")}}, {{cssxref("text-decoration")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}} et {{cssxref("vertical-align")}}.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note :</strong> Par défaut, dans la plupart des navigateurs, le texte de substitution est écrit en gris clair.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input::placeholder {
+  color: red;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input type="email" placeholder="toto@exemple.com"&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","200","150")}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<h3 id="Contraste">Contraste</h3>
+
+<h4 id="Taux_de_contraste">Taux de contraste</h4>
+
+<p>Le texte de substitution est généralement représenté avec une couleur plus claire afin d'indiquer qu'il s'agit d'un suggestion et que ce contenu n'a pas été saisi par l'utilisateur ou par le site même.</p>
+
+<p>Il est important de vérifier que le contraste entre la couleur de ce texte et celle de l'arrière-plan est suffisament élevé afin que les personnes avec des conditions de vision faibles puissent les lire.</p>
+
+<p>La valeur du contraste est déterminée en comparant la luminosité de la couleur du texte de substitution et celle de l'arrière-plan. Afin de respecter les recommandations d'accessibilité : <a href="https://www.w3.org/WAI/intro/wcag">Web Content Accessibility Guidelines (WCAG)</a>, un ratio de 4.5:1 est nécessaire pour le contenu textuel normal et un ratio de 3:1 est nécessaire pour les textes plus grands ou en gras. Le seuil entre ces deux tailles est défini de la façon suivante :</p>
+
+<ul>
+ <li>Si le texte est en gras : 18.66px ou plus grand</li>
+ <li>Sinon 24px ou plus grand</li>
+</ul>
+
+<p>Autres ressources :</p>
+
+<ul>
+ <li><a href="https://webaim.org/resources/contrastchecker/" rel="noopener">WebAIM : vérificateur de contraste</a></li>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Explications des recommendation WCAG 1.4</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" rel="noopener">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h4 id="Utilisabilité">Utilisabilité</h4>
+
+<p>Les textes de substitution avec un contraste suffisamment élevé peuvent être pris pour des textes saisis par l'utilisateur. De plus, les textes de substituion disparaissent lorsqu'une personne saisit du contenu dans l'élément {{htmlelement("input")}}. Pour ces deux raisons, les textes de subsitution peuvent gêner la complétion du formulaire, notamment pour les personnes souffrant de troubles cognitifs.</p>
+
+<p>Une autre méthode consiste à fournir cette information en l'incluant à proximité du champ mais en dehors et d'utiliser l'attribut <code><a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute">aria-describedby</a></code> afin de relier l'élément {{HTMLElement("input")}} à l'indication associée.</p>
+
+<p>Avec cette méthode, le contenu indicatif est disponible à tout moment (même lorsqu'une information a été saisie par l'utilisateur) et le champ est vide lorsque la page est chargée. La plupart des lecteurs d'écran utiliseront <code>aria-describedby</code> afin de lire l'indication lorsque le libellé du champ aura été annoncé. La personne utilisant le lecteur d'écran pourra arrêter les annonces si elle estime que les informations supplémentaires ne sont pas nécessaires.</p>
+
+<pre class="brush:html line-numbers language-html">&lt;label for="user-email"&gt;Votre adresse mail&lt;/label&gt;
+&lt;span id="user-email-hint" class="input-hint"&gt;Exemple : johndoe@example.com&lt;/span&gt;
+&lt;input id="user-email" aria-describedby="user-email-hint" name="email" type="email"&gt;
+</pre>
+
+<ul>
+ <li><a href="https://www.nngroup.com/articles/form-design-placeholders/"><em>Placeholders in Form Fields Are Harmful</em> — Nielsen Norman Group (en anglais)</a></li>
+</ul>
+
+<h3 id="Mode_«_contraste_élevé_»_de_Windows">Mode « contraste élevé » de Windows</h3>
+
+<p>Lorsque le <a href="/en-US/docs/Web/CSS/-ms-high-contrast">mode de contraste élevé de Windows</a> est actif, les textes de substitution apparaîtront avec la même mise en forme que les textes saisis par l'utilisateur. Il est alors impossible de distinguer un texte saisi d'un texte indicatif.</p>
+
+<ul>
+ <li><a href="http://www.gwhitworth.com/blog/2017/04/how-to-use-ms-high-contrast">Greg Whitworth — Comment utiliser <code>-ms-high-contrast</code> (en anglais)</a></li>
+ <li>{{cssxref("-ms-high-contrast")}}</li>
+</ul>
+
+<h3 id="Libellés_(HTMLElement(&lt;label>))">Libellés ({{HTMLElement("&lt;label&gt;")}})</h3>
+
+<p>Les textes de substitution ne doivent pas remplacer les éléments {{htmlelement("label")}}. Sans libellé associé grâce à {{htmlattrxref("for", "label")}} et à {{htmlattrxref("id")}}, les outils d'assistance tels que les lecteurs d'écran ne peuvent pas correctement analyser les éléments {{htmlelement("input")}}.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/ARIA/forms/Basic_form_hints">Fournir des indications simples dans un formulaire</a></li>
+ <li><a href="https://www.nngroup.com/articles/form-design-placeholders/"><em>Placeholders in Form Fields Are Harmful</em> — Nielsen Norman Group (en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Pseudo-Elements', '#placeholder-pseudo', '::placeholder')}}</td>
+   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>Définitions initiales.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.placeholder")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":placeholder-shown")}} qui permet de mettre en forme un élément qui possède un <em>placeholder</em> actif
+
+  <ul>
+  </ul>
+ </li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Forms_in_HTML">Les formulaires HTML</a></li>
+ <li>{{HTMLElement("input")}}</li>
+ <li>{{HTMLElement("textarea")}}</li>
+ <li>Les équivalents <strong>non-standards</strong> :
+  <ul>
+   <li>{{cssxref("::-webkit-input-placeholder")}}</li>
+   <li>{{cssxref("::-moz-placeholder")}}</li>
+   <li>{{cssxref(":-ms-input-placeholder")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_selection/index.html b/files/fr/web/css/_doublecolon_selection/index.html
new file mode 100644
index 0000000000..409520ae24
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_selection/index.html
@@ -0,0 +1,134 @@
+---
+title: '::selection'
+slug: 'Web/CSS/::selection'
+tags:
+  - CSS
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::selection'
+---
+<div>{{CSSRef}}</div>
+
+<p>Le <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-élément</a> <strong><code>::selection</code></strong> permet d'appliquer des règles CSS à une portion du document qui a été sélectionnée par l'utilisateur (via la souris ou un autre dispositif de pointage).</p>
+
+<pre class="brush: css no-line-numbers">::selection {
+  background-color: cyan;
+}</pre>
+
+<h2 id="Propriétés_autorisées">Propriétés autorisées</h2>
+
+<p>Seul un sous-ensemble des propriétés CSS peut être utilisé pour une règle dont le sélecteur contient <code>::selection</code> :</p>
+
+<ul>
+ <li>{{cssxref("color")}},</li>
+ <li>{{cssxref("background-color")}},</li>
+ <li>{{cssxref("cursor")}},</li>
+ <li>{{cssxref("caret-color")}},</li>
+ <li>{{cssxref("outline")}} ainsi que les propriétés détaillées associées,</li>
+ <li>{{cssxref("text-decoration")}} ainsi que les propriétés détaillées associées,</li>
+ <li>{{cssxref("text-emphasis-color")}},</li>
+ <li>{{cssxref("text-shadow")}}.</li>
+</ul>
+
+<p>On notera que {{cssxref("background-image")}} est ignorée, comme les autres propriétés.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">/*Syntaxe propre à Firefox (61 et antérieur) */
+::-moz-selection
+{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* du texte sélectionné sera jaune sur fond rouge */
+::-moz-selection {
+  color: gold;
+  background-color: red;
+}
+
+::selection {
+  color: gold;
+  background-color: red;
+}
+
+/* le texte sélectionné dans un paragraphe */
+/* sera blanc sur noir                     */
+p::-moz-selection {
+  color: white;
+  background-color: black;
+}
+
+p::selection {
+  color: white;
+  background-color: black;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;Un peu de texte pour tester ::selection.&lt;/div&gt;
+&lt;p&gt;Essayez également de sélectionner du texte dans ce &amp;lt;p&amp;gt;&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Il est recommandé de <strong>ne pas surcharger la police par défaut fournie par le système d'exploitation à des fins esthétiques</strong> et notamment si l'utilisateur a personnalisé ces polices pour ses besoins. Pour les personnes qui connaissent moins les technologies, cette modification peut modifier leur compréhension des fonctionnalités du site.</p>
+
+<p>Si la police est surchargée, il faut s'assurer que le contraste entre la couleur du texte sélectionné et celle de l'arrière-plan est suffisamment élevé afin que les personnes disposant de faibles conditions de vision puissent lire le texte lorsqu'il est sélectionné.</p>
+
+<p>La valeur du contraste est déterminée en comparant la luminosité de la couleur du texte de substitution et celle de l'arrière-plan. Afin de respecter les recommandations d'accessibilité : <a href="https://www.w3.org/WAI/intro/wcag">Web Content Accessibility Guidelines (WCAG)</a>, un ratio de 4.5:1 est nécessaire pour le contenu textuel normal et un ratio de 3:1 est nécessaire pour les textes plus grands ou en gras. Le seuil entre ces deux tailles est défini de la façon suivante :</p>
+
+<ul>
+ <li>Si le texte est en gras : 18.66px ou plus grand</li>
+ <li>Sinon 24px ou plus grand</li>
+</ul>
+
+<p>Quelques ressources :</p>
+
+<ul>
+ <li><a href="https://webaim.org/resources/contrastchecker/" rel="noopener">WebAIM : vérificateur de contraste</a></li>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Explications des recommendation WCAG 1.4</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" rel="noopener">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Pseudo-Elements', '#selectordef-selection', '::selection')}}</td>
+   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note : </strong>Bien que ce pseudo-élément était inscrit dans les brouillons pour la spécification des sélecteurs CSS de niveau 3, il a été retiré dans la phase de recommandation car le comportement n'était pas suffisamment défini, notamment avec les éléments imbriqués, de plus, l'interopérabilité n'était pas encore aboutie <a class="external" href="https://lists.w3.org/Archives/Public/www-style/2008Oct/0268.html">(selon une discussion de la liste de diffusion W3C Style)</a>.<br>
+ <br>
+ Le pseudo-élément <code>::selection</code> a de nouveau été ajouté dans la spécification pour <a href="https://dev.w3.org/csswg/css-pseudo-4/">les pseudo-éléments de niveau 4</a>.</p>
+</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.selection")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("pointer-events")}} qui contrôle les évènements actifs sur l'élément</li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_slotted/index.html b/files/fr/web/css/_doublecolon_slotted/index.html
new file mode 100644
index 0000000000..503d42dbf9
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_slotted/index.html
@@ -0,0 +1,111 @@
+---
+title: '::slotted()'
+slug: 'Web/CSS/::slotted'
+tags:
+  - CSS
+  - Pseudo-element
+  - Reference
+  - Web
+translation_of: 'Web/CSS/::slotted'
+---
+<div>{{CSSRef}}</div>
+
+<p>Le <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-élément</a> CSS <strong><code>::slotted()</code></strong> représente n'importe quel élément ayant été placé à l'intérieur d'un emplacement (<em>slot</em>) au sein d'un gabarit (<em>template</em>) HTML (cf. <a href="/fr/docs/Web/Web_Components/Using_templates_and_slots">Utiliser les gabarits et les emplacements</a> pour plus d'informations).</p>
+
+<p>Cela ne fonctionne que pour du CSS placé à l'intérieur d'un élément {{htmlelement("template")}} et/ou dans le <em><a href="/fr/docs/Web/Web_Components/Using_shadow_DOM">shadow DOM</a></em>. On notera également que ce sélecteur ne sélectionnera pas les noeuds texte placés dans les emplacements, il ne cible que les éléments.</p>
+
+<pre class="brush: css no-line-numbers">/* Cible n'importe quel élément placé dans un emplacement */
+::slotted(*) {
+  font-weight: bold;
+}
+
+/* Cible n'importe quel élément &lt;span&gt; placé dans un emplacement */
+::slotted(span) {
+  font-weight: bold;
+}
+</pre>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Les fragments de code suivants sont tirés du dépôt <code><a href="https://github.com/mdn/web-components-examples/tree/master/slotted-pseudo-element">slotted-pseudo-element</a></code> (<a href="https://mdn.github.io/web-components-examples/slotted-pseudo-element/">voir le résultat en <em>live</em></a>).</p>
+
+<p>Dans cette démonstration, on utilise un gabarit avec trois emplacements :</p>
+
+<pre class="brush: html">&lt;template id="person-template"&gt;
+  &lt;div&gt;
+    &lt;h2&gt;Carte d'identité d'une personne&lt;/h2&gt;
+    &lt;slot name="person-name"&gt;NOM ABSENT&lt;/slot&gt;
+    &lt;ul&gt;
+      &lt;li&gt;&lt;slot name="person-age"&gt;AGE ABSENT&lt;/slot&gt;&lt;/li&gt;
+      &lt;li&gt;&lt;slot name="person-occupation"&gt;POSTE ABSENT&lt;/slot&gt;&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/div&gt;
+&lt;/template&gt;</pre>
+
+<p>Un élément personnalisé — <code>&lt;person-details&gt;</code> — est défini de la façon suivante :</p>
+
+<pre class="brush: js">customElements.define('person-details',
+  class extends HTMLElement {
+    constructor() {
+      super();
+      let template = document.getElementById('person-template');
+      let templateContent = template.content;
+
+      const shadowRoot = this.attachShadow({mode: 'open'});
+
+      let style = document.createElement('style');
+      style.textContent = 'div { padding: 10px; border: 1px solid gray; width: 200px; margin: 10px; }' +
+                           'h2 { margin: 0 0 10px; }' +
+                           'ul { margin: 0; }' +
+                           'p { margin: 10px 0; }' +
+                           '::slotted(*) { color: gray; font-family: sans-serif; } ';
+
+      shadowRoot.appendChild(style);
+      shadowRoot.appendChild(templateContent.cloneNode(true));
+  }
+})</pre>
+
+<p>On voit ici que, lorsqu'on renseigne le <code>style</code> de l'élément, on sélectionne tous les éléments présents dans les emplacements (<code>::slotted(*)</code>) afin de leur fournir différentes polices et couleurs. Cela permet d'avoir une meilleur vision des emplacements qui ne sont pas encore occupés.</p>
+
+<p>Voici ce à quoi ressemblera l'élément lorsqu'il sera inséré dans la page :</p>
+
+<pre class="brush: html">&lt;person-details&gt;
+  &lt;p slot="person-name"&gt;Dr. Shazaam&lt;/p&gt;
+  &lt;span slot="person-age"&gt;Immortel&lt;/span&gt;
+  &lt;span slot="person-occupation"&gt;Super-héros&lt;/span&gt;
+&lt;/person-details&gt;</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Scope', '#slotted-pseudo', '::slotted')}}</td>
+   <td>{{Spec2('CSS Scope')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.slotted")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/Web_Components">Les composants web</a></li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_spelling-error/index.html b/files/fr/web/css/_doublecolon_spelling-error/index.html
new file mode 100644
index 0000000000..03b39061f8
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_spelling-error/index.html
@@ -0,0 +1,84 @@
+---
+title: '::spelling-error'
+slug: 'Web/CSS/::spelling-error'
+tags:
+  - CSS
+  - Experimental
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::spelling-error'
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>Le pseudo-élément <strong><code>::spelling-error</code></strong> représente une portion de texte que le navigateur signale comme étant mal orthographiée.</p>
+
+<pre class="brush: css no-line-numbers">::spelling-error {
+  color: red;
+}</pre>
+
+<h2 id="Propriétés_autoriséees">Propriétés autoriséees</h2>
+
+<p>Seul un sous-ensemble restreint de propriétés CSS peut être utilisé dans une règle dont le sélecteur contient <code>::spelling-error</code> :</p>
+
+<ul>
+ <li>{{cssxref("color")}},</li>
+ <li>{{cssxref("background-color")}},</li>
+ <li>{{cssxref("cursor")}},</li>
+ <li>{{cssxref("caret-color")}}</li>
+ <li>{{cssxref("outline")}} et les propriétés détaillées correspondantes,</li>
+ <li>{{cssxref("text-decoration")}} et les propriétés détaillées correspondantes.</li>
+ <li>{{cssxref("text-emphasis-color")}},</li>
+ <li>{{cssxref("text-shadow")}}</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">::spelling-error</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p::spelling-error { color:red }</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  Alice devina tout de suite qu’il cherch l’éventail
+  et la paire de gants.
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","250","100")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Pseudo-Elements', '#selectordef-spelling-error', '::spelling-error')}}</td>
+   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.spelling-error")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("::grammar-error")}}</li>
+</ul>
diff --git a/files/fr/web/css/a_propos_du_bloc_conteneur/index.html b/files/fr/web/css/a_propos_du_bloc_conteneur/index.html
new file mode 100644
index 0000000000..6269f895b5
--- /dev/null
+++ b/files/fr/web/css/a_propos_du_bloc_conteneur/index.html
@@ -0,0 +1,263 @@
+---
+title: À propos du bloc conteneur
+slug: Web/CSS/A_Propos_Du_Bloc_Conteneur
+tags:
+  - CSS
+  - Guide
+  - Reference
+translation_of: Web/CSS/Containing_block
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Le <strong>bloc englobant (<em>containing block</em>)</strong> affecte souvent la taille et la position d'un élément. La plupart du temps, le bloc englobant est la <a href="/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte#Les_propriétés_des_boîtes">zone de contenu</a> de l'ancêtre de <a href="/fr/docs/Web/HTML/Éléments_en_bloc">bloc</a> le plus proche mais cette règle n'est pas absolue. <span class="seoSummary">Dans cet article, nous verrons les différents facteurs qui participent à la définition du bloc englobant.</span></p>
+
+<p>Lorsqu'un agent utilisateur (un navigateur web par exemple) dispose un document, il génère une boîte pour chaque élément du document. Chaque boîte est divisée en quatre zones :</p>
+
+<ol>
+ <li>La zone de contenu (<em>content area</em>)</li>
+ <li>La zone de remplissage (<em>padding area</em>)</li>
+ <li>La zone de bordure (<em>border area</em>)</li>
+ <li>La zone de marge (<em>margin area</em>)</li>
+</ol>
+
+<p><img alt="Diagram of the box model" src="https://mdn.mozillademos.org/files/16558/box-model.png" style="height: 300px; width: 544px;"></p>
+
+<div class="note">
+<p><strong>Note :</strong> Voir <a href="/fr/docs/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte">cet article pour découvrir le modèle de boîtes</a> en CSS.</p>
+</div>
+
+<p>On pourrait penser que le bloc englobant d'un élément est toujours la zone de contenu de son élément parent. Toutefois, ce n'est pas toujours le cas. Voyons donc les facteurs qui déterminent ce bloc englobant.</p>
+
+<h2 id="Les_effets_du_bloc_englobant">Les effets du bloc englobant</h2>
+
+<p>Avant d'aller plus loin, voyons l'impact du bloc englobant sur un élément.</p>
+
+<p>Les dimensions et la position d'un élément sont souvent dépendants du bloc englobant. Les valeurs en pourcentages appliquées à des propriétés comme {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("padding")}}, {{cssxref("margin")}} sont calculées relativement à la taille du bloc englobant. Il en va de même pour les propriétés de décalage des éléments positionnés de façon absolue (c'est-à-dire avec {{cssxref("position")}} qui vaut <code>absolute</code> ou <code>fixed</code>).</p>
+
+<h2 id="Identifier_le_bloc_englobant">Identifier le bloc englobant</h2>
+
+<p>Le bloc englobant est entièrement déterminé par la valeur de la propriété {{cssxref("position")}} pour l'élément :</p>
+
+<ul>
+ <li>Si la propriété <code>position</code><strong> </strong>vaut <code><strong>static</strong></code>, <code><strong>relative</strong></code> ou <code><strong>sticky</strong></code>, le bloc englobant est constitué par le bord de la boîte de contenu de l'ancêtre le plus proche qui est un conteneur de bloc (c'est-à-dire qui est un élément avec <code>display</code> qui vaut <code>inline-block</code>, <code>block</code> ou <code>list-item</code>) ou qui crée un contexte de formatage (tel qu'un conteneur de tableau, un conteneur flexible, un conteneur de grille ou le conteneur du bloc même).</li>
+ <li>Si la propriété <code>position</code> vaut <code><strong>absolute</strong></code>, le bloc englobant est constitué par le bord de la boîte de remplissage (<em>padding</em>) de l'ancêtre le plus proche dont la valeur de <code>position</code> est différente de <code>static</code> (<code>fixed</code>, <code>absolute</code>, <code>relative</code> ou <code>sticky</code>).</li>
+ <li>Si la propriété <code>position</code> vaut <code><strong>fixed</strong></code>, le bloc englobant est formé par le {{glossary("viewport")}} (ou la page dans le cas des média paginés).</li>
+ <li>Si la propriété <code>position</code><strong> </strong>vaut <code><strong>absolute</strong></code> ou <code><strong>fixed</strong></code>, le bloc englobant peut également être constitué par le bord de la boîte de remplissage le plus proche qui a :
+  <ol>
+   <li>Une propriété {{cssxref("transform")}} ou {{cssxref("perspective")}} avec une valeur différente de <code>none</code></li>
+   <li>Une propriété {{cssxref("will-change")}} qui vaut <code>transform</code> ou <code>perspective</code></li>
+   <li>Une propriété {{cssxref("filter")}} différente de <code>none</code> ou une propriété <code>will-change</code> différente of <code>filter</code> (ne fonctionne que pour Firefox).</li>
+   <li>Une propriété {{cssxref("contain")}} qui vaut <code>paint</code>.</li>
+  </ol>
+ </li>
+</ul>
+
+<div class="note">
+<p><strong>Note :</strong> Le bloc englobant contenant l'élément racine ({{HTMLElement("html")}}) est situé dans un rectangle appelé <strong>bloc englobant initial</strong>. Ce dernier a les dimensions de la zone d'affichage (<em>viewport</em>) ou de la page (pour les média paginés).</p>
+</div>
+
+<h2 id="Calcul_des_pourcentages_à_partir_du_bloc_englobant">Calcul des pourcentages à partir du bloc englobant</h2>
+
+<p>Comme mentionné ci-avant, lorsque certaines propriétés ont une valeur en pourcentage, la valeur calculée dépend du bloc contenant l'élément. Les propriétés qui fonctionnent de cette manière sont les propriétés <em><strong>box model</strong></em> et <em><strong>offset</strong></em> :</p>
+
+<ol>
+ <li>Les valeurs calculées des propriétés {{cssxref("height")}}, {{cssxref("top")}} et {{cssxref("bottom")}} sont construites à partir de la hauteur du bloc englobant.</li>
+ <li>Les valeurs calculées des propriétés {{cssxref("width")}}, {{cssxref("left")}}, {{cssxref("right")}}, {{cssxref("padding")}} et {{cssxref("margin")}} sont calculées à partir de la largeur (<code>width</code>) du bloc englobant.</li>
+</ol>
+
+<h2 id="Quelques_exemples">Quelques exemples</h2>
+
+<p>Le code HTML utilisé pour les exemples suivants sera :</p>
+
+<pre class="brush: html notranslate">&lt;body&gt;
+  &lt;section&gt;
+    &lt;p&gt;Et voici un paragraphe !&lt;/p&gt;
+  &lt;/section&gt;
+&lt;/body&gt;
+</pre>
+
+<h3 id="Premier_exemple">Premier exemple</h3>
+
+<p>Dans cet exemple, le paragraphe est positionné de façon statique et son bloc englobant est la zone de contenu de {{HTMLElement("section")}} car cet élément est l'ancêtre le plus proche qui est un conteneur de bloc.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;body&gt;
+  &lt;section&gt;
+    &lt;p&gt;Et voici un paragraphe !&lt;/p&gt;
+  &lt;/section&gt;
+&lt;/body&gt;
+</pre>
+</div>
+
+<pre class="brush: css notranslate">body {
+  background: beige;
+}
+
+section {
+  display: block;
+  width: 400px;
+  height: 160px;
+  background: lightgray;
+}
+
+p {
+  width: 50%;   /* == 400px * .5 = 200px */
+  height: 25%;  /* == 160px * .25 = 40px */
+  margin: 5%;   /* == 400px * .05 = 20px */
+  padding: 5%;  /* == 400px * .05 = 20px */
+  background: cyan;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Premier_exemple','100%','300')}}</p>
+
+<h3 id="Deuxième_exemple">Deuxième exemple</h3>
+
+<p>Dans cet exemple, le bloc englobant est formé par l'élément {{HTMLElement("body")}}<strong> </strong>car <code>&lt;section&gt;</code> n'est pas un conteneur de bloc en raison de <code>display: inline</code> et il ne crée pas de contexte de formatage.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;body&gt;
+  &lt;section&gt;
+    &lt;p&gt;Et voici un paragraphe !&lt;/p&gt;
+  &lt;/section&gt;
+&lt;/body&gt;
+</pre>
+</div>
+
+<pre class="brush: css notranslate">body {
+  background: beige;
+}
+
+section {
+  display: inline;
+  background: lightgray;
+}
+
+p {
+  width: 50%;     /* == half the body's width */
+  height: 200px;  /* Note: a percentage would be 0 */
+  background: cyan;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Deuxième_exemple','100%','300')}}</p>
+
+<h3 id="Troisième_exemple">Troisième exemple</h3>
+
+<p>Ici, le bloc englobant du paragraphe est <code>&lt;section&gt;</code> car la propriété <code>position</code> de ce dernier vaut <code>absolute</code>. Les valeurs exprimées en pourcentages et associées au paragraphe sont relatives à la zone de remplissage du bloc englobant (ce ne serait pas le cas si la propriété {{cssxref("box-sizing")}} du bloc englobant valait <code>border-box</code>).</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;body&gt;
+  &lt;section&gt;
+    &lt;p&gt;Et voici un paragraphe !&lt;/p&gt;
+  &lt;/section&gt;
+&lt;/body&gt;
+</pre>
+</div>
+
+<pre class="brush: css notranslate">body {
+  background: beige;
+}
+
+section {
+  position: absolute;
+  left: 30px;
+  top: 30px;
+  width: 400px;
+  height: 160px;
+  padding: 30px 20px;
+  background: lightgray;
+}
+
+p {
+  position: absolute;
+  width: 50%;   /* == (400px + 20px + 20px) * .5 = 220px */
+  height: 25%;  /* == (160px + 30px + 30px) * .25 = 55px */
+  margin: 5%;   /* == (400px + 20px + 20px) * .05 = 22px */
+  padding: 5%;  /* == (400px + 20px + 20px) * .05 = 22px */
+  background: cyan;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Troisième_exemple','100%','300')}}</p>
+
+<h3 id="Quatrième_exemple">Quatrième exemple</h3>
+
+<p>Dans cet exemple, la propriété <code>position</code> du paragraphe vaut <code>fixed</code>. Le bloc englobant est donc le bloc englobant initial (c'est-à-dire le <em>viewport</em> pour les écrans). Aussi, les dimensions du paragraphe changent selon la taille de la fenêtre du navigateur.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;body&gt;
+  &lt;section&gt;
+    &lt;p&gt;Et voici un paragraphe !&lt;/p&gt;
+  &lt;/section&gt;
+&lt;/body&gt;
+</pre>
+</div>
+
+<pre class="brush: css notranslate">body {
+  background: beige;
+}
+
+section {
+  width: 400px;
+  height: 480px;
+  margin: 30px;
+  padding: 15px;
+  background: lightgray;
+}
+
+p {
+  position: fixed;
+  width: 50%;   /* == (50vw - (width of vertical scrollbar)) */
+  height: 50%;  /* == (50vh - (height of horizontal scrollbar)) */
+  margin: 5%;   /* == (5vw - (width of vertical scrollbar)) */
+  padding: 5%;  /* == (5vw - (width of vertical scrollbar)) */
+  background: cyan;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Quatrième_exemple','100%','300')}}</p>
+
+<h3 id="Cinquième_exemple">Cinquième exemple</h3>
+
+<p>Dans cet exemple, la propriété <code>position</code> du paragraphe vaut <code>absolute</code>. Son bloc englobant est donc <code>&lt;section&gt;</code> car c'est l'ancêtre le plus proche dont la propriété {{cssxref("transform")}} ne vaut pas <code>none</code>.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;body&gt;
+  &lt;section&gt;
+    &lt;p&gt;Et voici un paragraphe !&lt;/p&gt;
+  &lt;/section&gt;
+&lt;/body&gt;
+</pre>
+</div>
+
+<pre class="brush: css notranslate">body {
+  background: beige;
+}
+
+section {
+  transform: rotate(0deg);
+  width: 400px;
+  height: 160px;
+  background: lightgray;
+}
+
+p {
+  position: absolute;
+  left: 80px;
+  top: 30px;
+  width: 50%;   /* == 200px */
+  height: 25%;  /* == 40px */
+  margin: 5%;   /* == 20px */
+  padding: 5%;  /* == 20px */
+  background: cyan;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Cinquième_exemple','100%','300')}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La propriété {{cssxref("all")}} permet de réinitialiser l'ensemble des déclarations CSS dans un certain état.</li>
+</ul>
diff --git a/files/fr/web/css/align-content/index.html b/files/fr/web/css/align-content/index.html
new file mode 100644
index 0000000000..4bbae606f4
--- /dev/null
+++ b/files/fr/web/css/align-content/index.html
@@ -0,0 +1,293 @@
+---
+title: align-content
+slug: Web/CSS/align-content
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/align-content
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>align-content</code></strong> définit la façon dont l'espace est réparti entre et autour des éléments le long de l'axe en bloc du conteneur (c'est-à-dire l'axe orthogonal à l'axe d'écriture) lorsque celui-ci est <a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS">un conteneur de boîte flexible</a> et le long de l'axe principal lorsque le conteneur est une grille.</p>
+
+<p>L'exemple qui suit utilise une grille comme conteneur afin d'illustrer le comportement des valeurs de cette propriété.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/align-content.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cette propriété n'aura aucun effet sur les boîtes flexibles disposées sur une seule ligne (celles avec <code>flex-wrap: nowrap</code> par exemple).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Alignement le long de l'axe */
+/* Note : align-content ne prend pas en charge les valeurs left et right */
+align-content: center;     /* Les éléments sont groupés au centre */
+align-content: start;      /* Les éléments sont groupés au début  */
+align-content: end;        /* Les éléments sont groupés à la fin */
+align-content: flex-start; /* Les éléments flexibles sont groupés au début */
+align-content: flex-end;   /* Les éléments flexibles sont groupés à la fin */
+
+/* Alignement normal */
+align-content: normal;
+
+/* Alignement sur la ligne de base */
+align-content: baseline;
+align-content: first baseline;
+align-content: last baseline;
+
+/* Répartition de l'espace */
+align-content: space-between; /* L'espace est réparti entre
+                                 les éléments, le premier est
+                                 accolé au bord et le dernier
+                                 également. */
+align-content: space-around;  /* L'espace est réparti entre les
+                                 éléments avec un demi-espace
+                                 au début et à la fin */
+align-content: space-evenly;  /* L'espace est réparti entre les
+                                 éléments et autour */
+align-content: stretch;       /* Les éléments dimensionnés avec
+                                 auto sont étirés également
+                                 afin de remplir le conteneur*/
+
+/* Gestion du dépassement */
+align-content: safe center;
+align-content: unsafe center;
+
+/* Valeurs globales */
+align-content: inherit;
+align-content: initial;
+align-content: unset;</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>start</code></dt>
+ <dd>Les éléments sont regroupés vers le bord au début de l'axe de bloc.</dd>
+ <dt><code>end</code></dt>
+ <dd>Les éléments sont regroupés vers le bord à la fin de l'axe de bloc.</dd>
+ <dt><code>flex-start</code></dt>
+ <dd>Les éléments flexibles sont regroupés vers le bord au début de l'axe de bloc. Cette valeur ne s'applique qu'aux éléments fils d'un conteneur flexible, sinon elle est synonyme de <code>start</code>.</dd>
+ <dt><code>flex-end</code></dt>
+ <dd>Les éléments flexibles sont regroupés vers le bord au début de l'axe de bloc. Cette valeur ne s'applique qu'aux éléments fils d'un conteneur flexible, sinon elle est synonyme de <code>end</code>.</dd>
+ <dt><code>center</code></dt>
+ <dd>Les éléments sont regroupés au centre de l'axe de bloc.</dd>
+ <dt><code>normal</code></dt>
+ <dd>Les éléments sont groupés sur leur position par défaut, comme si <code>align-content</code> n'avait pas été défini.</dd>
+ <dt><code>baseline<br>
+ first baseline</code><br>
+ <code>last baseline</code></dt>
+ <dd><img alt="La ligne de base est la ligne sur laquelle reposent la plupart des lettres et en dessous de laquelle le jambage des caractéres descend." src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/Typography_Line_Terms.svg/410px-Typography_Line_Terms.svg.png" style="height: 110px; width: 410px;">Ces valeurs permettent de définir l'alignement par rapport à la ligne de base pour l'élément du conteneur avec la ligne de base la plus haute ou la plus basse.<br>
+ Si <code>first baseline</code> n'est pas prise en charge, la valeur correspondra à <code>start</code>, si <code>last baseline</code> n'est pas prise en charge, la valeur correspondra à <code>end</code>.</dd>
+ <dt><code>space-between</code></dt>
+ <dd>Les éléments sont équirépartis le long de l'axe en bloc. L'espace obtenu est le même entre chaque élément, le premier élément est aligné sur le bord au début du conteneur et le dernier élément est aligné sur le bord à la fin du conteneur.</dd>
+ <dt><code>space-around</code></dt>
+ <dd>Les éléments sont équirépartis le long de l'axe en bloc. L'espace obtenu est le même entre chaque élément, la moitié de cet espace est utilisée entre le premier élément et le bord au début du conteneur et la moitié de cet espace est utilisée entre le dernier élément et le bord à la fin du conteneur</dd>
+ <dt><code>space-evenly</code></dt>
+ <dd>Les éléments sont équirépartis le long de l'axe en bloc. L'espace obtenu est le même entre chaque élément, entre le premier élément et le bord du conteneur et entre le dernier élément et le bord du conteneur.</dd>
+ <dt><code>stretch</code></dt>
+ <dd>Si la somme des tailles des éléments est inférieure à la taille du conteneur pour l'axe en bloc, les éléments dimensionnés automatiquement seront élargis de la même longueur tout en respectant les contraintes imposées par {{cssxref("max-height")}}/{{cssxref("max-width")}} (ou par les fonctionnalités équivalentes), afin que l'ensemble des éléments remplisse exactement le conteneur.</dd>
+ <dt><code>safe</code></dt>
+ <dd>Ce mot-clé est utilisé avec un mot-clé pour l'alignement. Si l'élément dépasse du conteneur avec la valeur d'alignement indiquée, l'élément sera alors aligné avec la valeur <code>start</code>.</dd>
+ <dt><code>unsafe</code></dt>
+ <dd>Ce mot-clé est utilisé avec un mot-clé pour l'alignement. Quelle que soit la taille et le dépassement éventuellement occasionné, l'élément est aligné avec la valeur indiquée.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[4]">#container {
+  height:200px;
+  width: 240px;
+  align-content: center; /* Cette valeur peut être changée dans la démonstration */
+  background-color: #8c8c8c;
+}
+
+.flex {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 50px);
+}
+
+div &gt; div {
+  box-sizing: border-box;
+  border: 2px solid #8c8c8c;
+  width: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#item1 {
+  background-color: #8cffa0;
+  min-height: 30px;
+}
+
+#item2 {
+  background-color: #a0c8ff;
+  min-height: 50px;
+}
+
+#item3 {
+  background-color: #ffa08c;
+  min-height: 40px;
+}
+
+#item4 {
+  background-color: #ffff8c;
+  min-height: 60px;
+}
+
+#item5 {
+  background-color: #ff8cff;
+  min-height: 70px;
+}
+
+#item6 {
+  background-color: #8cffff;
+  min-height: 50px;
+  font-size: 30px;
+}
+
+select {
+  font-size: 16px;
+}
+
+.row {
+  margin-top: 10px;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="container" class="flex"&gt;
+  &lt;div id="item1"&gt;1&lt;/div&gt;
+  &lt;div id="item2"&gt;2&lt;/div&gt;
+  &lt;div id="item3"&gt;3&lt;/div&gt;
+  &lt;div id="item4"&gt;4&lt;/div&gt;
+  &lt;div id="item5"&gt;5&lt;/div&gt;
+  &lt;div id="item6"&gt;6&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="row"&gt;
+  &lt;label for="display"&gt;display: &lt;/label&gt;
+  &lt;select id="display"&gt;
+    &lt;option value="flex"&gt;flex&lt;/option&gt;
+    &lt;option value="grid"&gt;grid&lt;/option&gt;
+  &lt;/select&gt;
+&lt;/div&gt;
+
+&lt;div class="row"&gt;
+  &lt;label for="values"&gt;align-content: &lt;/label&gt;
+  &lt;select id="values"&gt;
+    &lt;option value="normal"&gt;normal&lt;/option&gt;
+    &lt;option value="stretch"&gt;stretch&lt;/option&gt;
+    &lt;option value="flex-start"&gt;flex-start&lt;/option&gt;
+    &lt;option value="flex-end"&gt;flex-end&lt;/option&gt;
+    &lt;option value="center" selected&gt;center&lt;/option&gt;
+    &lt;option value="space-between"&gt;space-between&lt;/option&gt;
+    &lt;option value="space-around"&gt;space-around&lt;/option&gt;
+    &lt;option value="space-evenly"&gt;space-evenly&lt;/option&gt;
+
+    &lt;option value="start"&gt;start&lt;/option&gt;
+    &lt;option value="end"&gt;end&lt;/option&gt;
+    &lt;option value="left"&gt;left&lt;/option&gt;
+    &lt;option value="right"&gt;right&lt;/option&gt;
+
+    &lt;option value="baseline"&gt;baseline&lt;/option&gt;
+    &lt;option value="first baseline"&gt;first baseline&lt;/option&gt;
+    &lt;option value="last baseline"&gt;last baseline&lt;/option&gt;
+
+    &lt;option value="safe center"&gt;safe center&lt;/option&gt;
+    &lt;option value="unsafe center"&gt;unsafe center&lt;/option&gt;
+    &lt;option value="safe right"&gt;safe right&lt;/option&gt;
+    &lt;option value="unsafe right"&gt;unsafe right&lt;/option&gt;
+    &lt;option value="safe end"&gt;safe end&lt;/option&gt;
+    &lt;option value="unsafe end"&gt;unsafe end&lt;/option&gt;
+    &lt;option value="safe flex-end"&gt;safe flex-end&lt;/option&gt;
+    &lt;option value="unsafe flex-end"&gt;unsafe flex-end&lt;/option&gt;
+  &lt;/select&gt;
+&lt;/div&gt;
+</pre>
+
+<div class="hidden">
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var values = document.getElementById('values');
+var display = document.getElementById('display');
+var container = document.getElementById('container');
+
+values.addEventListener('change', function (evt) {
+  container.style.alignContent = evt.target.value;
+});
+
+display.addEventListener('change', function (evt) {
+  container.className = evt.target.value;
+});
+</pre>
+</div>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 260, 290)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Box Alignment", "#propdef-align-content", "align-content")}}</td>
+   <td>{{Spec2("CSS3 Box Alignment")}}</td>
+   <td>Ajout des valeurs <code>[ first | last ]? baseline</code>, <code>start</code>, <code>end</code>, <code>left</code>, <code>right</code> et <code>unsafe | safe</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Flexbox", "#align-content", "align-content")}}</td>
+   <td>{{Spec2("CSS3 Flexbox")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.align-content")}}</p>
+
+<h3 id="Prise_en_charge_pour_les_dispositions_flexibles_(Flexbox)">Prise en charge pour les dispositions flexibles (<em>Flexbox</em>)</h3>
+
+<p>{{Compat("css.properties.align-content.flex_context")}}</p>
+
+<h3 id="Prise_en_charge_pour_les_dispositions_avec_les_grilles_CSS">Prise en charge pour les dispositions avec les grilles CSS</h3>
+
+<p>{{Compat("css.properties.align-content.grid_context")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS/Utilisation_des_flexbox_en_CSS">Utiliser les boîtes flexibles</a></li>
+ <li>Guide sur les grilles : <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">Aligner des objets dans une grille</a></em></li>
+ <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de bases</a></em></li>
+ <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible">Aligner des objets dans un conteneur flexible</a></em></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Le module de spécification CSS Box Alignment</a></li>
+</ul>
diff --git a/files/fr/web/css/align-items/index.html b/files/fr/web/css/align-items/index.html
new file mode 100644
index 0000000000..39477147fe
--- /dev/null
+++ b/files/fr/web/css/align-items/index.html
@@ -0,0 +1,290 @@
+---
+title: align-items
+slug: Web/CSS/align-items
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/align-items
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">La propriété CSS <strong><code>align-items</code></strong> définit la valeur de {{cssxref("align-self")}} sur l'ensemble des éléments-fils directs.</span> La propriété <code>align-self</code> définit elle l'alignement d'un objet au sein de son conteneur. Pour les boîtes flexibles, cette propriété contrôle l'alignement par rapport à l'axe secondaire (<em>cross axis</em>). Au sein d'une grille CSS, elle contrôle l'alignement des éléments sur l'axe de bloc de <a href="/fr/docs/Glossaire/Zones_de_grille">la zone de grille</a> correspondante.</p>
+
+<p>L'exemple qui suit illustre le fonctionnement des différentes valeurs de <code>align-items</code> au sein d'une grile.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/align-items.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>À l'heure actuelle, cette propriété est prise en charge pour les dispositions <em>Flexbox</em> et grilles CSS. Pour les boîtes flexibles, cela contrôle l'alignement des objets sur l'axe secondaire et pour les grilles, cela contrôle l'alignement sur l'axe en bloc.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Mots-clés de base */
+align-items: normal;
+align-items: stretch;
+
+/* Alignement géométrique */
+/* align-items ne gère pas les valeurs left et right */
+align-items: center; /* Les éléments sont regroupés au centre */
+align-items: start;  /* Les éléments sont regroupés au début */
+align-items: end;    /* Les éléments sont regroupés à la fin */
+align-items: flex-start; /* Les éléments flexibles sont regroupés au début */
+align-items: flex-end;   /* Les éléments flexibles sont regroupés à la fin */
+align-items: self-start;
+align-items: self-end;
+
+/* Alignement par rapport à la ligne de base */
+align-items: first;
+align-items: first baseline;
+align-items: last baseline;
+
+/* Gestion du dépassement */
+align-items: safe center;
+align-items: unsafe center;
+
+/* Valeurs globales */
+align-items: inherit;
+align-items: initial;
+align-items: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>L'effet obtenu avec ce mot-clé dépend du mode de disposition utilisé :
+ <ul>
+  <li>Pour les éléments positionnés de façon absolue, ce mot-clé est synonyme de <code>start</code> pour les éléments remplacés, pour les autres éléments positionnés de façon absolue, il est synonyme de <code>stretch</code>.</li>
+  <li>Pour les éléments avec une position statique sur une disposition absolue, ce mot-clé se comporte comme <code>stretch</code>.</li>
+  <li>Pour les éléments flexibles, ce mot-clé est synonyme de <code>stretch</code>.</li>
+  <li>Pour les éléments d'une grille, ce mot-clé se comportera comme <code>stretch</code> sauf pour les boîtes ayant des dimensions intrinsèques où il se comporte comme <code>start</code>.</li>
+  <li>Cette propriété ne s'applique pas aux boîtes en bloc ou aux cellules de tableaux.</li>
+ </ul>
+ </dd>
+ <dt><code>flex-start</code></dt>
+ <dd>Le bord de la marge des éléments flexibles sur l'axe en bloc est aligné avec le bord de la ligne au début de l'axe en bloc.</dd>
+ <dt><code>flex-end</code></dt>
+ <dd>Le bord de la marge des éléments flexibles sur l'axe en bloc est aligné avec le bord de la ligne à la fin de l'axe en bloc.</dd>
+ <dt><code>center</code></dt>
+ <dd>Les éléments flexibles sont centrés sur l'axe en bloc au sein de la ligne. Si ces éléments sont plus grands que la ligne, ils dépasseront également de chaque côté.</dd>
+ <dt><code>start</code></dt>
+ <dd>Les éléments sont alignés sur le bord au début du conteneur selon l'axe de bloc.</dd>
+ <dt><code>end</code></dt>
+ <dd>Les éléments sont alignés sur le bord à la fin du conteneur selon l'axe de bloc</dd>
+ <dt><code>center</code></dt>
+ <dd>Les éléments sont centrés sur l'axe en bloc du conteneur.</dd>
+ <dt><code>self-start</code></dt>
+ <dd>Les éléments sont accolés au bord du début du conteneur dans l'axe de bloc.</dd>
+ <dt><code>self-end</code></dt>
+ <dd>Les éléments sont accolés au bord à la fin du conteneur dans l'axe de bloc.</dd>
+</dl>
+
+<dl>
+ <dt><code>baseline</code></dt>
+ <dt><code>first baseline<br>
+ last baseline</code></dt>
+ <dd>Tous les éléments flexibles sont alignés afin que <a href="https://drafts.csswg.org/css-flexbox-1/#flex-baselines">leurs différentes lignes de base</a> soient alignées. L'élément pour lequel on a la plus grande distance entre la marge et la ligne de base est aligné sur le bord de la ligne courante.</dd>
+ <dt><code>stretch</code></dt>
+ <dd>Les éléments flexibles sont étirés afin que la taille de la boîte de marge sur l'axe en bloc est la même que celle de la ligne sur laquelle l'élément se trouve, tout en respectant les contraintes de hauteur et de largeur.</dd>
+ <dt><code>safe</code></dt>
+ <dd>Ce mot-clé est utilisé avec un mot-clé d'alignement. Si la taille d'un des éléments dépasse du conteneur avec la valeur d'alignement indiquée, l'alignement sera réalisé avec la valeur <code>start</code> à la place.</dd>
+ <dt><code>unsafe</code></dt>
+ <dd>Ce mot-clé est utilisé avec un mot-clé d'alignement. Quelle que soit la taille relative et l'éventuel dépassement de l'élément par rapport au conteneur, la valeur indiquée pour l'alignement est respectée.</dd>
+ <dt>
+ <h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+ </dt>
+</dl>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[4]">#container {
+  height:200px;
+  width: 240px;
+  align-items: center; /* Cette valeur peut être modifiée dans l'exemple */
+  background-color: #8c8c8c;
+}
+
+.flex {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 50px);
+}
+
+div &gt; div {
+  box-sizing: border-box;
+  border: 2px solid #8c8c8c;
+  width: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#item1 {
+  background-color: #8cffa0;
+  min-height: 30px;
+}
+
+#item2 {
+  background-color: #a0c8ff;
+  min-height: 50px;
+}
+
+#item3 {
+  background-color: #ffa08c;
+  min-height: 40px;
+}
+
+#item4 {
+  background-color: #ffff8c;
+  min-height: 60px;
+}
+
+#item5 {
+  background-color: #ff8cff;
+  min-height: 70px;
+}
+
+#item6 {
+  background-color: #8cffff;
+  min-height: 50px;
+  font-size: 30px;
+}
+
+select {
+  font-size: 16px;
+}
+
+.row {
+  margin-top: 10px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="container" class="flex"&gt;
+  &lt;div id="item1"&gt;1&lt;/div&gt;
+  &lt;div id="item2"&gt;2&lt;/div&gt;
+  &lt;div id="item3"&gt;3&lt;/div&gt;
+  &lt;div id="item4"&gt;4&lt;/div&gt;
+  &lt;div id="item5"&gt;5&lt;/div&gt;
+  &lt;div id="item6"&gt;6&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="row"&gt;
+  &lt;label for="display"&gt;display: &lt;/label&gt;
+  &lt;select id="display"&gt;
+    &lt;option value="flex"&gt;flex&lt;/option&gt;
+    &lt;option value="grid"&gt;grid&lt;/option&gt;
+  &lt;/select&gt;
+&lt;/div&gt;
+
+&lt;div class="row"&gt;
+  &lt;label for="values"&gt;align-items: &lt;/label&gt;
+  &lt;select id="values"&gt;
+    &lt;option value="normal"&gt;normal&lt;/option&gt;
+    &lt;option value="flex-start"&gt;flex-start&lt;/option&gt;
+    &lt;option value="flex-end"&gt;flex-end&lt;/option&gt;
+    &lt;option value="center" selected&gt;center&lt;/option&gt;
+    &lt;option value="baseline"&gt;baseline&lt;/option&gt;
+    &lt;option value="stretch"&gt;stretch&lt;/option&gt;
+
+    &lt;option value="start"&gt;start&lt;/option&gt;
+    &lt;option value="end"&gt;end&lt;/option&gt;
+    &lt;option value="self-start"&gt;self-start&lt;/option&gt;
+    &lt;option value="self-end"&gt;self-end&lt;/option&gt;
+    &lt;option value="first baseline"&gt;first baseline&lt;/option&gt;
+    &lt;option value="last baseline"&gt;last baseline&lt;/option&gt;
+
+    &lt;option value="safe center"&gt;safe center&lt;/option&gt;
+    &lt;option value="unsafe center"&gt;unsafe center&lt;/option&gt;
+    &lt;option value="safe right"&gt;safe right&lt;/option&gt;
+    &lt;option value="unsafe right"&gt;unsafe right&lt;/option&gt;
+    &lt;option value="safe end"&gt;safe end&lt;/option&gt;
+    &lt;option value="unsafe end"&gt;unsafe end&lt;/option&gt;
+    &lt;option value="safe self-end"&gt;safe self-end&lt;/option&gt;
+    &lt;option value="unsafe self-end"&gt;unsafe self-end&lt;/option&gt;
+    &lt;option value="safe flex-end"&gt;safe flex-end&lt;/option&gt;
+    &lt;option value="unsafe flex-end"&gt;unsafe flex-end&lt;/option&gt;
+  &lt;/select&gt;
+&lt;/div&gt;
+</pre>
+
+<div class="hidden">
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var values = document.getElementById('values');
+var display = document.getElementById('display');
+var container = document.getElementById('container');
+
+values.addEventListener('change', function (evt) {
+  container.style.alignItems = evt.target.value;
+});
+
+display.addEventListener('change', function (evt) {
+  container.className = evt.target.value;
+});
+</pre>
+</div>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "260px", "290px")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Box Alignment", "#propdef-align-items", "align-items")}}</td>
+   <td>{{Spec2("CSS3 Box Alignment")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#propdef-align-items', 'align-items')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<h3 id="Prise_en_charge_pour_les_dispositions_flexibles">Prise en charge pour les dispositions flexibles</h3>
+
+<p>{{Compat("css.properties.align-items.flex_context")}}</p>
+
+<h3 id="Prise_en_charge_pour_les_dispositions_en_grille">Prise en charge pour les dispositions en grille</h3>
+
+<p>{{Compat("css.properties.align-items.grid_context")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS/Utilisation_des_flexbox_en_CSS">Utiliser les boîtes flexibles CSS</a></li>
+ <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de bases</a></em></li>
+ <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible">Aligner des objets dans un conteneur flexible</a></em></li>
+ <li>Guide sur les grilles : <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">Aligner des objets dans une grille</a></em></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Le module de spécification CSS Box Alignment</a></li>
+ <li>La propriété {{cssxref("align-self")}}</li>
+</ul>
diff --git a/files/fr/web/css/align-self/index.html b/files/fr/web/css/align-self/index.html
new file mode 100644
index 0000000000..51ac0143a4
--- /dev/null
+++ b/files/fr/web/css/align-self/index.html
@@ -0,0 +1,187 @@
+---
+title: align-self
+slug: Web/CSS/align-self
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/align-self
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>align-self</code></strong> permet d'aligner les objets flexibles d'une ligne flexible ou d'une grille en surchargeant la valeur donnée par {{cssxref("align-items")}}.</p>
+
+<p>Si l'un des objet a une marge automatique (<code>auto</code>) pour l'axe perpendiculaire à l'axe principal, <code>align-self</code> sera ignoré. Lorsque le conteneur est une grille, <code>align-self</code> permet d'aligner l'élément au sein de <a href="/fr/docs/Glossaire/Zones_de_grille">la zone de grille</a>. Si le conteneur est une boîte flexible, l'alignement se fait selon <a href="/fr/docs/Glossaire/Axe_transversal">l'axe secondaire</a>.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/align-self.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cette propriété ne s'applique pas aux boîtes qui sont des blocs ou aux cellules d'un tableau.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+align-self: auto;
+align-self: normal;
+
+/* Alignement géométrique */
+/* align-self ne gère pas les valeurs left et right */
+align-self: center; /* Les éléments sont alignés sur le centre */
+align-self: start; /* Les éléments sont alignés au début de l'axe */
+align-self: end; /* Les éléments sont alignés à la fin de l'axe */
+align-self: self-start; /* Les éléments sont alignés par rapport à leur début */
+align-self: self-end; /* Les éléments sont alignés par rapport à leur fin */
+align-self: flex-start; /* Les éléments flexibles sont alignés au début */
+align-self: flex-end; /* Les éléments flexibles sont alignés à la fin */
+
+/* Alignement selon la ligne de base */
+align-self: baseline;
+align-self: first baseline;
+align-self: last baseline;
+align-self: stretch; /* Les objets dimensionnés avec 'auto' sont */
+                     /* étirés pour remplir le conteneur */
+
+/* Alignement avec gestion du dépassement */
+align-self: safe center;
+align-self: unsafe center;
+
+/* Valeurs globales */
+align-self: inherit;
+align-self: initial;
+align-self: unset;</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>La valeur est calculée par rapport à celle de {{cssxref("align-items")}}.</dd>
+ <dt><code>normal</code></dt>
+ <dd>L'effet de ce mot-clé dépend du mode de disposition utilisé :
+ <ul>
+  <li>Pour une disposition absolue, ce mot-clé est synonyme de <code>start</code> pour les boîtes remplacées positionnées de façon absolue, il est synonyme de <em>stretch</em> pour les autres boîtes positionnées de façon absolue.</li>
+  <li>Pour une disposition absolue et des positions statiques, ce mot-clé est synonyme de <code>stretch</code>.</li>
+  <li>Pour les éléments flexibles, ce mot-clé est synonyme de <code>stretch</code>.</li>
+  <li>Pour les éléments positionnés sur une grille, ce mot-clé est synonyme de <code>stretch</code>, sauf pour les boîtes qui ont un ratio d'aspec ou des dimensions intrinsèques, dans ce cas, cette valeur se comporte comme <code>start</code>.</li>
+  <li>Cette propriété ne s'applique pas aux boîtes qui sont des blocs ou aux cellules d'un tableau.</li>
+ </ul>
+ </dd>
+ <dt><code>self-start</code></dt>
+ <dd>Les éléments sont alignés dans l'axe perpendiculaire à l'axe principal pour que le bord correspondant soit aligné avec le bord du conteneur au début de l'axe.</dd>
+ <dt><code>self-end</code></dt>
+ <dd>Les éléments sont alignés dans l'axe perpendiculaire à l'axe principal pour que le bord correspondant soit aligné avec le bord du conteneur à la fin de l'axe.</dd>
+ <dt><code>flex-start</code></dt>
+ <dd>Le bord de l'élément flexible, au début de l'axe perpendiculaire à l'axe principal, est aligné avec le bord au début de l'axe perpendiculaire pour la ligne flexible.</dd>
+ <dt><code>flex-end</code></dt>
+ <dd>Le bord de l'élément flexible, à la fin de l'axe perpendiculaire à l'axe principal, est aligné avec le bord à la fin de l'axe perpendiculaire pour la ligne flexible.</dd>
+ <dt><code>center</code></dt>
+ <dd>La boîte définies par les marges est centrée sur la ligne de l'axe perpendiculaire à l'axe principal de la ligne. Si l'élément est plus grand que le conteneur dans ce sens, il dépassera également de chaque côté.</dd>
+ <dt><code>baseline<br>
+ first baseline</code><br>
+ <code>last baseline</code></dt>
+ <dd>Indique l'alignement par rapport à la ligne de base.<br>
+ Si besoin, la valeur <code>first baseline</code> est remplacée par <code>start</code> et <code>last baseline</code> est remplacée par <code>end</code>.</dd>
+ <dt><code>stretch</code></dt>
+ <dd>Si la somme des dimensions des éléments sur l'axe perpendiculaire à l'axe principal est inférieure à la dimension du conteneur et que l'élément est dimensionné automatiquement, celui-ci est agrandi (tout en respectant les éventuelles contraintes dictées par {{cssxref("max-height")}}/{{cssxref("max-width")}} ou autres) afin que l'ensemble des éléments remplissent le conteneur sur cet axe.</dd>
+ <dt><code>safe</code></dt>
+ <dd>Si la taille d'un élément dépasse du conteneur avec l'alignement fourni par la valeur, l'élément sera en réalité aligné comme si la valeur <code>start</code> avait été utilisée.</dd>
+ <dt><code>unsafe</code></dt>
+ <dd>Quelle que soit les tailles relatives des objets par rapport au conteneur, la valeur indiquant l'alignement sera respectée.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.flex-container {
+  height: 250px;
+  display: flex;
+}
+
+.element-flex {
+  background: palegreen;
+  width: 100px;
+  padding: 5px;
+  margin: 5px;
+  line-height: 50px;
+  font-size: 2em;
+}
+
+.center {
+  -webkit-align-self: center;
+  align-self: center;
+}
+
+.baseline {
+  -webkit-align-self: baseline;
+  align-self: baseline;
+}
+
+.stretch {
+  -webkit-align-self: stretch;
+  align-self: stretch;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="flex-container"&gt;
+  &lt;p class="element-flex center"&gt;Milieu&lt;/p&gt;
+  &lt;p class="element-flex baseline"&gt;Base&lt;/p&gt;
+  &lt;p class="element-flex stretch"&gt;Étiré&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","300","300")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Box Alignment", "#propdef-align-self", "align-self")}}</td>
+   <td>{{Spec2("CSS3 Box Alignment")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Flexbox", "#propdef-align-self", "align-self")}}</td>
+   <td>{{Spec2("CSS3 Flexbox")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<h3 id="Prise_en_charge_pour_les_dispositions_avec_les_boîtes_flexibles_(Flexbox)">Prise en charge pour les dispositions avec les boîtes flexibles (<em>Flexbox</em>)</h3>
+
+<p>{{Compat("css.properties.align-self.flex_context")}}</p>
+
+<h3 id="Prise_en_charge_pour_les_dispositions_avec_les_grilles_CSS">Prise en charge pour les dispositions avec les grilles CSS</h3>
+
+<p>{{Compat("css.properties.align-self.grid_context")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS/Utilisation_des_flexbox_en_CSS">Utiliser les boîtes flexibles CSS</a></li>
+ <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de bases</a></em></li>
+ <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible">Aligner des objets dans un conteneur flexible</a></em></li>
+ <li>Guide sur les grilles : <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">Aligner des objets dans une grille</a></em></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Le module de spécification CSS Box Alignment</a></li>
+ <li>La propriété {{cssxref("align-items")}}</li>
+</ul>
diff --git a/files/fr/web/css/all/index.html b/files/fr/web/css/all/index.html
new file mode 100644
index 0000000000..b9ed504c85
--- /dev/null
+++ b/files/fr/web/css/all/index.html
@@ -0,0 +1,174 @@
+---
+title: all
+slug: Web/CSS/all
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/all
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">propriété raccourcie</a> <code><strong>all</strong></code> permet de réinitialiser toutes les propriétés, à l'exception de {{cssxref("unicode-bidi")}} et {{cssxref("direction")}}, avec leurs valeurs initiales, héritées ou qui proviennent d'une autre feuille de style.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/all.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs globales */
+all: initial;
+all: inherit;
+all: unset;
+
+/* Héritage et cascade CSS : Niveau 4 */
+all: revert;
+</pre>
+
+<p>La propriété <code>all</code> est définie avec un des mots-clés globaux de CSS. On notera que la valeur de cette propriété n'a pas d'impact sur les propriétés {{cssxref("unicode-bidi")}} et {{cssxref("direction")}}.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>initial</code></dt>
+ <dd>Voir {{cssxref("initial")}}. Ce mot-clé indique que toutes les propriétés qui sont définies pour l'élément auquel s'applique <code>all</code> (ou qu'il hérite de cette valeur via un élément parent) devront prendre leurs valeurs initiales.</dd>
+ <dt><code>inherit</code></dt>
+ <dd>Voir {{cssxref("inherit")}}. Ce mot-clé indique que toutes les propriétés qui sont définies pour l'élément auquel s'applique <code>all</code> (ou qu'il hérite de cette valeur via un élément parent) devront prendre les valeurs héritées (c'est-à-dire celles définies pour le parent de l'élément).</dd>
+ <dt><code>unset</code></dt>
+ <dd>Voir {{cssxref("unset")}}. Ce mot-clé indique que toutes les propriétés qui s'appliquent à l'élément ou à son parent prendront la valeur déclarée pour le parent si elles peuvent être héritées ou la valeur initiale sinon.</dd>
+ <dt><code>revert</code></dt>
+ <dd>Voir {{cssxref("revert")}}. Si la valeur obtenue dans la cascade est le mot-clé <code>revert</code>, le comportement obtenu sera différent selon l'origine de la déclaration :
+ <dl>
+  <dt>La déclaration provient de l'agent utilisateur :</dt>
+  <dd>Synonyme de <code>unset</code>.</dd>
+  <dt>La déclaration provient de l'utilisateur :</dt>
+  <dd>Le moteur remonte <a href="/fr/docs/Apprendre/CSS/Introduction_%C3%A0_CSS/La_cascade_et_l_h%C3%A9ritage">la cascade</a> au niveau de l'agent utilisateur afin de calculer la valeur comme si aucune règle n'était appliquée par le document ou par l'utilisateur.</dd>
+  <dt>La déclaration provient de l'auteur (du document)</dt>
+  <dd>Le moteur remonte <a href="/fr/docs/Apprendre/CSS/Introduction_%C3%A0_CSS/La_cascade_et_l_h%C3%A9ritage">la cascade</a> au niveau de l'utilisateur afin de calculer la valeur comme si aucune règle ne provenait du document pour cette propriété.Cette origine inclue <a href="https://www.w3.org/TR/css-cascade-4/#origin">les origines des surcharges DOM et des animations</a>.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;blockquote id="quote"&gt;
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+&lt;/blockquote&gt;
+Phasellus eget velit sagittis.</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">body {
+  font-size: small;
+  background-color: #F0F0F0;
+  color: blue;
+}
+
+blockquote {
+  background-color: skyblue;
+  color: red;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<div id="ex0" style="display: inline-block; width: 225px; vertical-align: top;">
+<h4 id="Pas_de_propriété_all">Pas de propriété <code>all</code></h4>
+
+<pre class="brush: html hidden">&lt;blockquote id="quote"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/blockquote&gt; Phasellus eget velit sagittis.</pre>
+
+<pre class="brush: css hidden">body { font-size: small; background-color: #F0F0F0; color:blue; }
+blockquote { background-color: skyblue;  color: red; }</pre>
+{{EmbedLiveSample("ex0", "200", "125")}}
+
+<p>L'élément {{HTMLElement("blockquote")}} utilise la mise en forme par défaut du navigateur avec un arrière-plan spécifique et une couleur pour le texte. L'élément se comporte comme un élément de bloc : le texte qui suit est placé en dessous.</p>
+</div>
+
+<div id="ex1" style="display: inline-block; width: 225px; vertical-align: top;">
+<h4 id="allunset"><code>all:unset</code></h4>
+
+<pre class="brush: html hidden">&lt;blockquote id="quote"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/blockquote&gt; Phasellus eget velit sagittis.</pre>
+
+<pre class="brush: css hidden">body { font-size: small; background-color: #F0F0F0; color:blue; }
+blockquote { background-color: skyblue;  color: red; }
+blockquote { all: unset; }</pre>
+{{EmbedLiveSample("ex1", "200", "125")}}
+
+<p>L'élément {{HTMLElement("blockquote")}} n'utilise pas la mise en forme par défaut du naivgateur, c'est un élément en ligne (<em>inline</em>) (sa valeur initiale), la valeur de {{cssxref("background-color")}} est <code>transparent</code> (la valeur initiale), mais {{cssxref("font-size")}} vaut toujours <code>small</code> (valeur héritée) et {{cssxref("color")}} vaut (valeur héritée).</p>
+</div>
+
+<div id="ex2" style="display: inline-block; width: 225px; vertical-align: top;">
+<h4 id="allinitial"><code>all:initial</code></h4>
+
+<pre class="brush: html hidden">&lt;blockquote id="quote"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/blockquote&gt; Phasellus eget velit sagittis.</pre>
+
+<pre class="brush: css hidden">body { font-size: small; background-color: #F0F0F0; color:blue; }
+blockquote { background-color: skyblue;  color: red; }
+blockquote { all: initial; }</pre>
+{{EmbedLiveSample("ex2", "200", "125")}}
+
+<p>L'élément {{HTMLElement("blockquote")}} n'utilise pas la mise en forme par défaut du navigateur, c'est un élément en ligne (sa valeur initiale). La propriété {{cssxref("background-color")}} vaut <code>transparent</code> (sa valeur initiale), {{cssxref("font-size")}} vaut <code>normal</code> (valeur initiale) et {{cssxref("color")}} vaut <code>black</code> (sa valeur initiale).</p>
+</div>
+
+<div id="ex3" style="display: inline-block; width: 225px; vertical-align: top;">
+<h4 id="allinherit"><code>all:inherit</code></h4>
+
+<pre class="brush: html hidden">&lt;blockquote id="quote"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/blockquote&gt; Phasellus eget velit sagittis.</pre>
+
+<pre class="brush: css hidden">body { font-size: small; background-color: #F0F0F0; color:blue; }
+blockquote { background-color: skyblue; color: red; }
+blockquote { all: inherit; }</pre>
+{{EmbedLiveSample("ex3", "200", "125")}}
+
+<p>L'élément {{HTMLElement("blockquote")}} n'utilise pas la mise en forme par défaut du navigateur, c'est un élément de bloc (valeur héritée depuis l'élément englobant {{HTMLElement("div")}}), {{cssxref("background-color")}} vaut <code>#F0F0F0</code> (valeur héritée), {{cssxref("font-size")}} vaut <code>small</code> (valeur héritée) et {{cssxref("color")}} vaut <code>blue</code> (valeur héritée).</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Cascade', '#all-shorthand', 'all')}}</td>
+   <td>{{Spec2('CSS4 Cascade')}}</td>
+   <td>Ajout de la valeur <code>revert</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Cascade', '#all-shorthand', 'all')}}</td>
+   <td>{{Spec2('CSS3 Cascade')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.all")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>Les mots-clés indiquant des valeurs globales pour CSS :</p>
+
+<ul>
+ <li>{{cssxref("initial")}},</li>
+ <li>{{cssxref("inherit")}},</li>
+ <li>{{cssxref("unset")}},</li>
+ <li>{{cssxref("revert")}}.</li>
+</ul>
diff --git a/files/fr/web/css/alpha-value/index.html b/files/fr/web/css/alpha-value/index.html
new file mode 100644
index 0000000000..2a260de8f1
--- /dev/null
+++ b/files/fr/web/css/alpha-value/index.html
@@ -0,0 +1,58 @@
+---
+title: alpha-value
+slug: Web/CSS/alpha-value
+tags:
+  - CSS
+  - Reference
+  - Type de donnée
+translation_of: Web/CSS/alpha-value
+---
+<p>{{CSSRef}}{{draft()}}</p>
+
+<p>Le <a href="/fr/docs/Web/CSS/Types_CSS">type de donnée</a> CSS <strong><code>&lt;alpha-value&gt;</code></strong> représente une valeur qui peut être un nombre ({{cssxref("&lt;number&gt;")}}) ou un pourcentage ({{cssxref("&lt;percentage&gt;")}}) et qui indique le <a href="https://fr.wikipedia.org/wiki/Canal_alpha">canal alpha</a> ou <em>l'opacité</em> d'une couleur.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Si la valeur est fournie comme un nombre, la valeur peut être comprise entre 0 (complètement transparent) et 1 (complètement opaque). Il est possible d'utiliser des valeurs décimales comprises entre ces valeurs. Les valeurs à l'extérieur de cet intervalle sont valides mais elles sont écrétées à 0 ou 1.</p>
+
+<p>Lorsque la valeur est fournie en pourcentage 0% correspond à une transparence complète tandis que 100% correspond à une opacité totale.</p>
+
+<h2 id="Interpolation">Interpolation</h2>
+
+<p>Lorsqu'une animation fait évoluer une valeur de type <code>&lt;alpha-value&gt;</code>, les valeurs sont interpolées comme des nombres réels à point flottant. La vitesse de l'interpolation est déterminée par la <a href="/fr/docs/Web/CSS/timing-function">fonction de temporisation</a> associée à l'animation.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Certaines fonctionnalités CSS utilisent des valeurs <code>&lt;alpha-value&gt;</code> dont <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#RGB_colors">les notations fonctionnelles pour les couleurs telles que <code>rgba()</code> et <code>hsla()</code></a> et aussi {{cssxref("shape-image-threshold")}} (qui détermine les pixels à prendre en compte pour une image lorsqu'on souhaite en extraire une forme).</p>
+
+<pre class="brush: css no-line-numbers language-css"><code class="language-css"><span class="comment token">/* &lt;rgba()&gt; */</span>
+<span class="property token">color</span><span class="punctuation token">:</span> <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">34</span><span class="punctuation token">,</span> <span class="number token">12</span><span class="punctuation token">,</span> <span class="number token">64</span><span class="punctuation token">,</span> <span class="number token">0.6</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="property token">color</span><span class="punctuation token">:</span> <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">34.0</span> <span class="number token">12</span> <span class="number token">64</span> <span class="operator token">/</span> <span class="number token">60</span><span class="token unit">%</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code>
+
+<code class="language-css"><span class="comment token">/* shape-image-threshold */
+</span><span class="property token">shape-image-threshold</span><span class="punctuation token">:</span> <span class="number token">70%</span><span class="punctuation token">;</span>
+<span class="property token">shape-image-threshold</span><span class="punctuation token">:</span> <span class="number token">0.7</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Colors', '#type-def-alpha-value', '&lt;alpha-value&gt;')}}</td>
+   <td>{{Spec2('CSS4 Colors')}}</td>
+   <td>Aucune modification significative.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Colors', '#alphavaluedt', '&lt;alpha-value&gt;')}}</td>
+   <td>{{Spec2('CSS3 Colors')}}</td>
+   <td>Introduit le type <code>&lt;alpha-value&gt;</code> ainsi que les notations fonctionnelles <code>rgba()</code> et <code>hsla()</code>.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/css/angle-percentage/index.html b/files/fr/web/css/angle-percentage/index.html
new file mode 100644
index 0000000000..7ec3da707a
--- /dev/null
+++ b/files/fr/web/css/angle-percentage/index.html
@@ -0,0 +1,50 @@
+---
+title: <angle-percentage>
+slug: Web/CSS/angle-percentage
+tags:
+  - CSS
+  - Reference
+  - Type
+translation_of: Web/CSS/angle-percentage
+---
+<div>{{CSSRef}}</div>
+
+<p>Le type de donnée <strong><code>&lt;angle-percentage&gt;</code></strong> représente une valeur qui peut être une valeur de type {{cssxref("angle")}} ou une valeur de type {{cssxref("percentage")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Voir la documentation des types {{cssxref("angle")}} et {{cssxref("percentage")}} pour plus de détails sur les syntaxes possibles avec chacun de ces types.</p>
+
+<h2 id="Utilisation_avec_calc()">Utilisation avec <code>calc()</code></h2>
+
+<p>Lorsqu'il est possible d'utiliser une valeur de type <code>&lt;angle-percentage&gt;</code> dans une déclaration, cela signifie que le pourcentage sera résolu avec une valeur angulaire et qu'il peut être utilisé dans une expression {{Cssxref("calc()")}}.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Values', '#mixed-percentages', '&lt;angle-percentage&gt;')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#mixed-percentages', '&lt;angle-percentage&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Définition du type <code>&lt;angle-percentage&gt;</code>. Ajout de <code>calc()</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.types.angle-percentage")}}</p>
diff --git a/files/fr/web/css/angle/index.html b/files/fr/web/css/angle/index.html
new file mode 100644
index 0000000000..b829e4046c
--- /dev/null
+++ b/files/fr/web/css/angle/index.html
@@ -0,0 +1,98 @@
+---
+title: <angle>
+slug: Web/CSS/angle
+tags:
+  - CSS
+  - Reference
+  - Type
+translation_of: Web/CSS/angle
+---
+<div>{{CSSRef}}</div>
+
+<p>Le type de données CSS <strong><code>&lt;angle&gt;</code></strong> permet de représenter des angles exprimés en degrés, radians, grades ou tours. Les angles positifs sont des angles allant dans le sens horaire et les valeurs négatives sont des angles allant dans le sens anti-horaire. Les angles sont par exemples utilisés pour les transformations CSS ({{cssxref("transform")}}) ou les dégradés ({{cssxref("&lt;gradient&gt;")}}).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/type-angle.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Pour exprimer une valeur de ce type, on utilisera une valeur de type {{cssxref("&lt;number&gt;")}} (un nombre), immédiatement suivie d'une unité <code>deg</code>, <code>grad</code>, <code>rad</code> ou <code>turn</code>. Comme pour les autres dimensions présentes en CSS, il n'y a pas d'espace entre le littéral réservé à l'unité et le nombre qui indique la mesure de l'angle. L'unité est facultative pour la valeur <code>0</code> (bien qu'il soit recommandé d'écrire une unité pour des raisons de lisibilité et de cohérence). Il est possible d'utiliser un signe <code>+</code> ou <code>-</code> en préfixe.</p>
+
+<p>Pour les propriétés statiques et pour une unité donnée, un même angle pourra être représenté par plusieurs valeurs, ainsi <code>90deg</code>, <code>-270deg</code>, <code>1turn</code> et <code>4turn</code> représentent le même angle. En revanche, pour les propriétés dynamiques (par exemple {{cssxref("transition")}} sur {{cssxref("transform")}}), l'effet obtenu sera différent.</p>
+
+<h3 id="Unités">Unités</h3>
+
+<p>Pour représenter une valeur dans le type <code>&lt;angle&gt;</code>, on pourra utiliser les unités suivantes :</p>
+
+<dl>
+ <dt><code>deg</code></dt>
+ <dd>Cette unité permet de représenter un angle exprimé en <a href="https://fr.wikipedia.org/wiki/Degr%C3%A9_(angle)">degrés</a>. Un cercle complet correspondra à <code>360deg</code>. Voici des valeurs pour l'exemple : <code>0deg</code>, <code>90deg</code>,<code> 360deg</code>.</dd>
+ <dt><code>grad</code></dt>
+ <dd>Cette unité permet de représenter un angle exprimé en <a href="https://fr.wikipedia.org/wiki/Grade_(angle)">grades</a>. Un cercle complet correspondra à <code>400grad</code>. Voici des valeurs pour l'exemple : <code>0grad</code>, <code>100grad</code>,<code> 400grad</code>.</dd>
+ <dt><code>rad</code></dt>
+ <dd>Cette unité permet de représenter un angle exprimé en <a href="https://fr.wikipedia.org/wiki/Radian">radians</a>. Un cercle complet correspondra à 2π radians (soit environ <code>6.2832rad</code>). Un radian correspond à 180/π degrés. Voici des valeurs pour l'exemple : <code>0rad</code>, <code>1.0708rad</code>,<code> 6.2832rad</code>.</dd>
+ <dt><code>turn</code></dt>
+ <dd>Cette unité représente le nombre de tours qu'effectue l'angle. Un cercle complet correspondra à <code>1turn</code>. Voici des valeurs pour l'exemple : <code>0turn</code>, <code>0.25turn</code>,<code> 1turn</code>.</dd>
+</dl>
+
+<p>Même si toutes les unités exprimeront une valeur nulle identique, l'unité <strong>doit</strong><strong> être indiquée</strong> afin de lever l'ambiguïté entre un angle et une valeur de longueur (type {{cssxref("&lt;length&gt;")}}).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<table>
+ <tbody>
+  <tr>
+   <td><img alt="Angle90.png" class="default internal" src="/@api/deki/files/5704/=Angle90.png"></td>
+   <td>
+    <p>Un angle droit orienté dans le sens horaire : <code>90deg = 100grad = 0.25turn ≈ 1.5708rad</code></p>
+   </td>
+  </tr>
+  <tr>
+   <td><img alt="Angle180.png" class="default internal" src="/@api/deki/files/5706/=Angle180.png"></td>
+   <td>Un angle plat orienté dans le sens horaire : <code>180deg = 200grad = 0.5turn ≈ 3.1416rad</code></td>
+  </tr>
+  <tr>
+   <td><img alt="AngleMinus90.png" class="default internal" src="/@api/deki/files/5707/=AngleMinus90.png"></td>
+   <td>Un angle droit orienté dans le sens anti-horaire : <code>-90deg = -100grad = -0.25turn ≈ -1.5708rad</code></td>
+  </tr>
+  <tr>
+   <td><img alt="Angle0.png" class="default internal" src="/@api/deki/files/5708/=Angle0.png"></td>
+   <td>
+    <p>Un angle nul : <code>0 = 0deg = 0grad = 0turn = 0rad</code></p>
+
+    <div class="note"><strong>Note :</strong>Si, dans l'absolu, on peut exprimer la valeur nulle sans unité, il est fortement recommandé d'indiquer l'unité afin de lever toute ambiguïté possible entre les angles et les longueurs.</div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Values', '#angles', '&lt;angle&gt;')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#angles', '&lt;angle&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.types.angle")}}</p>
diff --git a/files/fr/web/css/animation-delay/index.html b/files/fr/web/css/animation-delay/index.html
new file mode 100644
index 0000000000..8518ef21ce
--- /dev/null
+++ b/files/fr/web/css/animation-delay/index.html
@@ -0,0 +1,112 @@
+---
+title: animation-delay
+slug: Web/CSS/animation-delay
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/animation-delay
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>animation-delay</code></strong> définit la durée d'attente avant de démarrer une animation une fois qu'elle a été appliquée à un élément.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/animation-delay.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La valeur par défaut, <code>0s</code>, indique que l'animation doit démarrer dès qu'elle est appliquée. Dans les autres cas, la valeur indique le décalage à observer entre le début de l'animation et le moment où celle-ci a été appliquée sur l'élément.</p>
+
+<p>Si des valeurs négatives sont utilisées, l'animation débutera immédiatement en étant déjà « avancée ». Par exemple, si on utilise la valeur <code>-1s</code> comme durée, l'animation commencera immédiatement avec l'état qu'elle aurait « normalement » eue au bout d'une seconde.</p>
+
+<p>Généralement, on passera par la propriété raccourcie {{cssxref("animation")}} afin de définir l'ensemble des propriétés liées aux animations en une seule fois.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css  no-line-numbers">animation-delay: 3s;
+animation-delay: 2s, 4ms;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;time&gt;</code></dt>
+ <dd>La durée avec laquelle décaler le début de l'animation à partir du moment où celle-ci a été appliquée à l'élément. La valeur peut être indiquée en secondes (<code>s</code> comme suffixe) ou en millisecondes (<code>ms</code> comme suffixe). Si aucune unité n'est définie, la déclaration sera considérée comme invalide.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> Lorsqu'on utilise plusieurs valeurs (séparées par des virgules) pour une propriété <code>animation-*</code>, selon leur quantité, elles seront différemment affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : paramétrer <a href="/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS">les valeurs des propriétés pour plusieurs animations</a>.</p>
+</div>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  animation-duration: 3s;
+  animation-delay: 15s;
+  animation-name: glissement;
+  animation-iteration-count: infinite;
+}
+@keyframes glissement {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  La Chenille et Alice se considérèrent un instant en silence.
+  Enfin la Chenille sortit le houka de sa bouche, et lui adressa
+  la parole d’une voix endormie et traînante.
+&lt;/p&gt; </pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","300","200")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Animations', '#animation-delay', 'animation-delay')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.animation-delay")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Animations/Utiliser_les_animations_CSS">Manipuler les animations CSS</a></li>
+ <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li>
+</ul>
diff --git a/files/fr/web/css/animation-direction/index.html b/files/fr/web/css/animation-direction/index.html
new file mode 100644
index 0000000000..ff6036363e
--- /dev/null
+++ b/files/fr/web/css/animation-direction/index.html
@@ -0,0 +1,137 @@
+---
+title: animation-direction
+slug: Web/CSS/animation-direction
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/animation-direction
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>animation-direction</code></strong> indique si les cycles de l'animation doivent être joués dans le sens inverse et/ou de façon alternée.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/animation-direction.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Généralement, on passera par la propriété raccourcie {{cssxref("animation")}} qui permet de définir les différentes propriétés liées aux animations avec une déclaration.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+animation-direction: normal;
+animation-direction: reverse;
+animation-direction: alternate;
+animation-direction: alternate-reverse;
+
+/* Gestion de plusieurs animations */
+animation-direction: normal, reverse;
+animation-direction: alternate, reverse, normal;
+
+/* Valeurs globales */
+animation-direction: inherit;
+animation-direction: initial;
+animation-direction: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>L'animation est jouée dans le sens normal à chaque cycle. Autrement dit, au début de chaque cycle, l'animation est initialisée dans l'état de début. C'est le réglage par défaut.</dd>
+ <dt><code>reverse</code></dt>
+ <dd>L'animation est jouée dans le sens inverse à chaque cycle. Au début de chaque cycle, l'animation reprend depuis l'état de fin.</dd>
+ <dt><code>alternate</code></dt>
+ <dd>La lecture de l'animation se fait de façon alternée et change de sens à chaque cycle en commençant par le sens normal. Lorsque le sens est inversé, les étapes de l'animation sont effectuées de façon inversée et les fonctions de progression (<em>timing function</em><em>s</em>) sont également inversées (<code>ease-in</code> sera ainsi remplacée par <code>ease-out</code>). Le premier cycle se fait dans le sens normal, le deuxième dans le sens inverse et ainsi de suite.</dd>
+ <dt><code>alternate-reverse</code></dt>
+ <dd>La lecture de l'animation se fait de façon alternée et change de sens à chaque cycle en commençant par le sens inverse (cf. ci-avant). Le premier cycle se fait dans le sens inverse, le deuxième dans le sens normal et ainsi de suite.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> Lorsqu'on utiliser plusieurs valeurs, séparées par des virgules, pour une propriété <code>animation-*</code>, selon leur quantité, elles seront différemment affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : paramétrer <a href="/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS">les valeurs des propriétés pour plusieurs animations</a>.</p>
+</div>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  animation-duration: 5s;
+  animation-name: glissement;
+  animation-iteration-count: infinite;
+}
+
+.aller {
+  animation-direction: normal;
+}
+
+.retour {
+  animation-direction: reverse;
+}
+@keyframes glissement {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="aller"&gt;
+  La Chenille et Alice se considérèrent un instant en silence.
+  Enfin la Chenille sortit le houka de sa bouche, et lui adressa
+  la parole d’une voix endormie et traînante.
+&lt;/p&gt;
+
+&lt;p class="retour"&gt;
+  « Revenez, » lui cria la Chenille. « J’ai quelque chose
+  d’important à vous dire ! »
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","300","200")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Animations', '#animation-direction', 'animation-direction')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.animation-direction")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Animations/Utiliser_les_animations_CSS" title="Tutorial about CSS animations">Manipuler les animations CSS</a></li>
+ <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li>
+</ul>
diff --git a/files/fr/web/css/animation-duration/index.html b/files/fr/web/css/animation-duration/index.html
new file mode 100644
index 0000000000..92edb9d4b5
--- /dev/null
+++ b/files/fr/web/css/animation-duration/index.html
@@ -0,0 +1,110 @@
+---
+title: animation-duration
+slug: Web/CSS/animation-duration
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/animation-duration
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>animation-duration</code></strong> définit la durée d'une animation pour parcourir un cycle.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/animation-duration.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La valeur par défaut est <code>0s</code>, ce qui indique qu'aucune animation ne doit avoir lieu.</p>
+
+<p>Généralement, on passera par la propriété raccourcie {{cssxref("animation")}} afin de définir, en une seule déclaration, les différentes propriétés liées aux animations.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">animation-duration: 6s;
+animation-duration: 120ms;
+animation-duration: 1s, 15s;
+animation-duration: 10s, 30s, 230ms;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;time&gt;</code></dt>
+ <dd>La durée d'un cycle pour l'animation. Cette valeur peut être indiquée en secondes (<code>s</code> comme suffixe pour l'unité) ou en millisecondes (<code>ms</code> comme suffixe pour l'unité). Si aucune unité n'est définie, la déclaration sera considérée comme invalide.</dd>
+</dl>
+
+<div class="note"><strong>Note :</strong> Les valeurs négatives sont considérées comme invalides. Certaines implémentations, préfixées, considèrent parfois que ces valeurs sont synonymes de <code>0s</code>.</div>
+
+<div class="note"><strong>Note :</strong> Lorsqu'on utiliser plusieurs valeurs, séparées par des virgules, pour une propriété <code>animation-*</code>, selon leur quantité, elles seront différemment affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : paramétrer <a href="/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS">les valeurs des propriétés pour plusieurs animations</a>.</div>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  animation-duration: 15s;
+  animation-name: glissement;
+  animation-iteration-count: infinite;
+}
+@keyframes glissement {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  La Chenille et Alice se considérèrent un instant en silence.
+  Enfin la Chenille sortit le houka de sa bouche, et lui adressa
+  la parole d’une voix endormie et traînante.
+&lt;/p&gt; </pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","300","200")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Animations', '#animation-duration', 'animation-duration')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.animation-duration")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Animations/Utiliser_les_animations_CSS">Manipuler les animations CSS</a></li>
+ <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li>
+</ul>
diff --git a/files/fr/web/css/animation-fill-mode/index.html b/files/fr/web/css/animation-fill-mode/index.html
new file mode 100644
index 0000000000..415bb13bcd
--- /dev/null
+++ b/files/fr/web/css/animation-fill-mode/index.html
@@ -0,0 +1,190 @@
+---
+title: animation-fill-mode
+slug: Web/CSS/animation-fill-mode
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/animation-fill-mode
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>animation-fill-mode</code></strong> indique la façon dont une animation CSS doit appliquer les styles à sa cible avant et après son exécution.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/animation-fill-mode.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:  css no-line-numbers">/* Valeurs avec un mot-clé */
+animation-fill-mode: none;
+animation-fill-mode: forwards;
+animation-fill-mode: backwards;
+animation-fill-mode: both;
+
+/* Gestion de plusieurs animations */
+animation-fill-mode: none, backwards;
+animation-fill-mode: both, forwards, none;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>L'animation n'appliquera aucun style à la cible, avant et après l'exécution. Le style utilisé sera celui défini par les autres règles CSS.</dd>
+ <dt><code>forwards</code></dt>
+ <dd>La cible retiendra les valeurs calculées définies lors de la dernière étape (<em>keyframe</em>). La dernière étape considérée dépend de la valeur de {{cssxref("animation-direction")}} et de {{cssxref("animation-iteration-count")}} :
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col"><code>animation-direction</code></th>
+    <th scope="col"><code>animation-iteration-count</code></th>
+    <th scope="col">dernière <em>keyframe</em></th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>normal</code></td>
+    <td>pair ou impair</td>
+    <td><code>100%</code> ou <code>to</code></td>
+   </tr>
+   <tr>
+    <td><code>reverse</code></td>
+    <td>pair ou impair</td>
+    <td><code>0%</code> ou <code>from</code></td>
+   </tr>
+   <tr>
+    <td><code>alternate</code></td>
+    <td>pair</td>
+    <td><code>0%</code> ou <code>from</code></td>
+   </tr>
+   <tr>
+    <td><code>alternate</code></td>
+    <td>impair</td>
+    <td><code>100%</code> ou <code>to</code></td>
+   </tr>
+   <tr>
+    <td><code>alternate-reverse</code></td>
+    <td>pair</td>
+    <td><code>100%</code> ou <code>to</code></td>
+   </tr>
+   <tr>
+    <td><code>alternate-reverse</code></td>
+    <td>impair</td>
+    <td><code>0%</code> ou <code>from</code></td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt><code>backwards</code></dt>
+ <dd>L'animation appliquera les valeur définies par la première <em>keyframe</em> pertinente et les retiendra pendant la durée indiquée par {{cssxref("animation-delay")}}. La première <em>keyframe</em> pertinente dépend de la valeur de {{cssxref("animation-direction")}} :
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col"><code>animation-direction</code></th>
+    <th scope="col">première <em>keyframe</em></th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>normal</code> ou <code>alternate</code></td>
+    <td><code>0%</code> ou <code>from</code></td>
+   </tr>
+   <tr>
+    <td><code>reverse</code> ou <code>alternate-reverse</code></td>
+    <td><code>100%</code> ou <code>to</code></td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt><code>both</code></dt>
+ <dd>L'animation respectera les règles qui s'appliquent à <code>forwards</code> et <code>backwards</code>, entraînant ainsi l'extension des propriétés de l'animation dans les deux directions.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> Lorsqu'on utiliser plusieurs valeurs, séparées par des virgules, pour une propriété <code>animation-*</code>, selon leur quantité, elles seront différemment affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : paramétrer <a href="/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS">les valeurs des propriétés pour plusieurs animations</a>.</p>
+</div>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.demo {
+  border-top: 100px solid #ccc;
+  height: 300px;
+  font-family: sans-serif;
+}
+@keyframes grow {
+    0% { font-size: 0 }
+    100% { font-size: 40px }
+}
+@-webkit-keyframes grow {
+    0% { font-size: 0 }
+    100% { font-size: 40px }
+}
+.demo:hover .grows {
+    animation-name: grow;
+    animation-duration: 3s;
+    -webkit-animation-name: grow;
+    -webkit-animation-duration: 3s;
+}
+.demo:hover .growsandstays {
+    animation-name: grow;
+    animation-duration: 3s;
+    animation-fill-mode: forwards;
+    -webkit-animation-name: grow;
+    -webkit-animation-duration: 3s;
+    -webkit-animation-fill-mode: forwards;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Déplacez votre souris sur la boîte grise.&lt;/p&gt;
+&lt;div class="demo"&gt;
+  &lt;div class="growsandstays"&gt;La boîte grandit et s'arrête&lt;/div&gt;
+  &lt;div class="grows"&gt;La boîte grandit&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples',700,300)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Animations', '#animation-fill-mode', 'animation-fill-mode')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.animation-fill-mode")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Animations/Utiliser_les_animations_CSS">Manipuler les animations CSS</a></li>
+ <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li>
+</ul>
diff --git a/files/fr/web/css/animation-iteration-count/index.html b/files/fr/web/css/animation-iteration-count/index.html
new file mode 100644
index 0000000000..1a1cf04a69
--- /dev/null
+++ b/files/fr/web/css/animation-iteration-count/index.html
@@ -0,0 +1,135 @@
+---
+title: animation-iteration-count
+slug: Web/CSS/animation-iteration-count
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/animation-iteration-count
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>animation-iteration-count</code></strong> indique le nombre de cycles utilisés pour répéter une animation avant que celle-ci s'arrête.</p>
+
+<p>Si plusieurs valeurs sont indiquées, à chaque lancement de l'animation, c'est la valeur suivante de la liste qui est utilisée. Lorsqu'on arrive à la fin de la liste, on reprend avec la première valeur de la liste.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/animation-iteration-count.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Généralement, on utilisera la propriété raccourcie {{cssxref("animation")}} afin de définir toutes les propriétés relatives à une animation.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css  no-line-numbers">/* Valeur avec un mot-clé */
+animation-iteration-count: infinite;
+
+/* Valeur avec une quantité */
+/* Type &lt;number&gt;            */
+animation-iteration-count: 3;
+animation-iteration-count: 2.3;
+
+/* Gestion de plusieurs animations */
+animation-iteration-count: 2, 0, infinite;
+</pre>
+
+<p>La propriété <code>animation-iteration-count</code> est définie avec une ou plusieurs valeurs, parmi la liste suivante, séparées par des virgules.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>infinite</code></dt>
+ <dd>L'animation sera répétée à l'infini. Dans ce mode d'animation infinie, cette valeur est considérée de la même manière qu'une valeur paire par la propriété <strong><code>animation-direction</code></strong>.</dd>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>Le nombre de répétitions pour l'animation. La valeur par défaut est <code>1</code> (elle n'est exécutée qu'une seule fois). Les valeurs négatives sont considérées comme invalides. Il est possible d'utiliser des valeurs qui ne sont pas entières pour indiquer des fragments d'un cycle (ainsi <code>0.5</code> indiquera une moitié du cycle de l'animation).</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> Lorsqu'on utilise plusieurs valeurs, séparées par des virgules, pour une propriété <code>animation-*</code>, selon leur quantité, elles seront différemment affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : paramétrer <a href="/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS">les valeurs des propriétés pour plusieurs animations</a>.</p>
+</div>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  animation-duration: 3s;
+  animation-name: glissement;
+  animation-iteration-count: infinite;
+}
+
+.infini {
+  animation-iteration-count: infinite;
+}
+
+.dix {
+  animation-iteration-count: 10;
+}
+
+@keyframes glissement {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="infini"&gt;
+  La Chenille et Alice se considérèrent un instant en silence.
+  Enfin la Chenille sortit le houka de sa bouche, et lui adressa
+  la parole d’une voix endormie et traînante.
+&lt;/p&gt;
+
+&lt;p class="dix"&gt;
+  Voyons si je me souviendrai de tout ce que je savais : quatre fois
+  cinq font douze, quatre fois six font treize, quatre fois sept font
+  — je n’arriverai jamais à vingt de ce train-là.
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","300","300")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Animations', '#animation-iteration-count', 'animation-iteration-count')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.animation-iteration-count")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Animations/Utiliser_les_animations_CSS">Manipuler les animations CSS</a></li>
+ <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li>
+</ul>
diff --git a/files/fr/web/css/animation-name/index.html b/files/fr/web/css/animation-name/index.html
new file mode 100644
index 0000000000..69f6f7c251
--- /dev/null
+++ b/files/fr/web/css/animation-name/index.html
@@ -0,0 +1,119 @@
+---
+title: animation-name
+slug: Web/CSS/animation-name
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/animation-name
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>animation-name</code></strong> définit une liste d'animations qui doivent être appliquées à l'élément ciblé. Chaque nom indique une règle @ {{cssxref("@keyframes")}} qui définit les valeurs des propriétés pour la séquence.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/animation-name.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Généralement, on pourra utiliser la propriété raccourcie {{cssxref("animation")}} pour définir l'ensemble des propriétés liées aux animations.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeur avec un mot-clé */
+animation-name: none;
+
+/* Valeur utilisant un identifiant */
+animation-name: test_05;
+
+/* Gestion de plusieurs animations */
+animation-name: test1, animation4;
+
+/*  Valeurs globales * /
+animation-name: initial
+animation-name: inherit
+animation-name: unset
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Un mot-clé qui indique qu'aucune étape (<em>keyframe</em>) ne sera utilisée. Il peut être utilisée pour désactiver une animation sans changer l'ordre des autres identifiants ou afin de désactiver les animations provenant de la cascade.</dd>
+ <dt>{{cssxref("custom-ident","&lt;custom-ident&gt;")}}</dt>
+ <dd>Une chaîne de caractères qui identifie l'animation. Un identifiant est une séquence, insensible à la casse, de lettres entre <code>a</code> et <code>z</code>, de nombres entre <code>0</code> et <code>9</code>, de tirets bas (<code>_</code>) et/ou de tirets (<code>-</code>). Le première caractère qui n'est pas un tiret doit être une lettre. Il est également interdit d'utiliser deux tirets en début d'identifiant. Enfin, la chaîne de l'identifiant ne peut pas être <code>unset</code>, <code>initial</code>, <code>inherit</code> ou une combinaison analogue avec une casse différente.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> Lorsqu'on utiliser plusieurs valeurs, séparées par des virgules, pour une propriété <code>animation-*</code>, selon leur quantité, elles seront différemment affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : paramétrer <a href="/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS">les valeurs des propriétés pour plusieurs animations</a>.</p>
+</div>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  animation-duration: 3s;
+  animation-name: glissement;
+  animation-iteration-count: infinite;
+}
+@keyframes glissement {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  La Chenille et Alice se considérèrent un instant en silence.
+  Enfin la Chenille sortit le houka de sa bouche, et lui adressa
+  la parole d’une voix endormie et traînante.
+&lt;/p&gt; </pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","300","200")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Animations', '#animation-name', 'animation-name')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.animation-name")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Animations/Utiliser_les_animations_CSS">Manipuler les animations CSS</a></li>
+ <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li>
+</ul>
diff --git a/files/fr/web/css/animation-play-state/index.html b/files/fr/web/css/animation-play-state/index.html
new file mode 100644
index 0000000000..0de85d6f86
--- /dev/null
+++ b/files/fr/web/css/animation-play-state/index.html
@@ -0,0 +1,133 @@
+---
+title: animation-play-state
+slug: Web/CSS/animation-play-state
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/animation-play-state
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>animation-play-state</code></strong> définit si une animation est en cours d'exécution ou si elle est en pause.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/animation-play-state.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Lorsqu'on reprend une animation en pause, celle-ci reprendra où elle avait été interrompue (elle ne recommencera pas depuis le début de la séquence).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* On a une seule animation */
+animation-play-state: running;
+animation-play-state: paused;
+
+/* On gère plusieurs animations */
+/* avec des valeurs respectives */
+animation-play-state: paused, running, running;
+
+/* Valeurs globales */
+animation-play-state: inherit;
+animation-play-state: initial;
+animation-play-state: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>running</code></dt>
+ <dd>L'animation est en cours.</dd>
+ <dt><code>paused</code></dt>
+ <dd>L'animation est en pause.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> Lorsqu'on utilise plusieurs valeurs, séparées par des virgules, pour une propriété <code>animation-*</code>, elles seront respectivement affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : <a href="/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS">paramétrer les valeurs des propriétés pour plusieurs animations</a>.</p>
+</div>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  animation-duration: 3s;
+  animation-name: glissement;
+  animation-iteration-count: infinite;
+}
+
+.arret {
+  animation-play-state: paused;
+}
+
+.encours {
+  animation-play-state: running;
+}
+
+@keyframes glissement {
+  from {
+    margin-left: 100%;
+    width: 200%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="arret"&gt;
+  La Chenille et Alice se considérèrent un instant en silence.
+  Enfin la Chenille sortit le houka de sa bouche, et lui adressa
+  la parole d’une voix endormie et traînante.
+&lt;/p&gt;
+
+&lt;p class="encours"&gt;
+  Alice, un peu irritée du parler bref de la Chenille, se redressa
+  de toute sa hauteur.
+&lt;/p&gt; </pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","300","200")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Animations', '#animation-play-state', 'animation-play-state')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.animation-play-state")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Animations/Utiliser_les_animations_CSS">Manipuler les animations CSS</a></li>
+ <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li>
+</ul>
diff --git a/files/fr/web/css/animation-timing-function/index.html b/files/fr/web/css/animation-timing-function/index.html
new file mode 100644
index 0000000000..28b84d89a9
--- /dev/null
+++ b/files/fr/web/css/animation-timing-function/index.html
@@ -0,0 +1,272 @@
+---
+title: animation-timing-function
+slug: Web/CSS/animation-timing-function
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/animation-timing-function
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <code><strong>animation-timing-function</strong></code> définit la façon dont une animation CSS doit se dérouler au fur et à mesure de chaque cycle. Cette propriété prendra comme valeurs une ou plusieurs fonctions {{cssxref("&lt;timing-function&gt;")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/animation-timing-function.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Généralement, on pourra utiliser la propriété raccourcie {{cssxref("animation")}} pour définir l'ensemble des propriétés liées à une animation.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+animation-timing-function: ease;
+animation-timing-function: ease-in;
+animation-timing-function: ease-out;
+animation-timing-function: ease-in-out;
+animation-timing-function: linear;
+animation-timing-function: step-start;
+animation-timing-function: step-end;
+
+/* Valeurs fonctionnelles */
+animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
+animation-timing-function: steps(4, end);
+
+/* Valeurs avec une fonction en escalier */
+animation-timing-function: steps(4, jump-start);
+animation-timing-function: steps(10, jump-end);
+animation-timing-function: steps(20, jump-none);
+animation-timing-function: steps(5, jump-both);
+animation-timing-function: steps(6, start);
+animation-timing-function: steps(8, end);
+
+/* Définition de temporisations pour plusieurs animations */
+animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
+
+/* Valeurs globales */
+animation-timing-function: inherit;
+animation-timing-function: initial;
+animation-timing-function: unset;
+</pre>
+
+<p>Pour les animations cadencées (<em>keyframed</em>), la fonction s'applique entre chaque étape (ou <em><a href="/fr/docs/Web/CSS/@keyframes">keyframes</a></em>) plutôt que sur l'animation dans son ensemble. Autrement dit, la fonction de <em>timing</em> est appliquée au début et à la fin de l'étape de l'animation.</p>
+
+<p>Une fonction de progression pour une animation qui est définie pour une étape sera appliquée à cette étape en particulier. Si aucune fonction n'est définie pour l'étape, ce sera la fonction de progression de toute l'animation qui sera utilisée.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;timing-function&gt;</code></dt>
+ <dd>Chaque valeur {{cssxref("&lt;timing-function&gt;")}} représente une fonction temporelle à rattacher à une animation définie grâce à {{cssxref("animation-name")}}.
+ <p>Les valeurs avec des mots-clés (<code>ease</code>, <code>linear</code>, <code>ease-in-out</code>, etc.) correspondent à une courbe de Bézier cubique fixe avec quatre valeurs prédéfinies; La fonction <code>cubic-bezier()</code> permet de paramétrer une courbe spécifique. Les fonctions en escalier permettent de diviser l'animation en intervalles de même durée.</p>
+
+ <dl>
+  <dt><code>ease</code></dt>
+  <dd>Correspond à <code>cubic-bezier(0.25, 0.1, 0.25, 1.0)</code> : c'est la valeur par défaut, la vitesse de l'animation augmente au milieu de celle-ci puis ralentit à la fin.</dd>
+  <dt><code>linear</code></dt>
+  <dd>Correspond à <code>cubic-bezier(0.0, 0.0, 1.0, 1.0)</code> : l'animation s'effectue à vitesse constante.</dd>
+  <dt><code>ease-in</code></dt>
+  <dd>Correspond à <code>cubic-bezier(0.42, 0, 1.0, 1.0)</code> : l'animation commence doucement puis la vitesse augmente jusqu'à ce qu'elle soit terminée.</dd>
+  <dt><code>ease-out</code></dt>
+  <dd>Correspond à <code>cubic-bezier(0, 0, 0.58, 1.0)</code> : l'animation commence rapidement puis ralentit jusqu'à la fin.</dd>
+  <dt><code>ease-in-out</code></dt>
+  <dd>Correspond à <code>cubic-bezier(0.42, 0, 0.58, 1.0)</code> : l'animation commence lentement, accèlere puis ralentit à nouveau avant la fin.</dd>
+  <dt><code>cubic-bezier(p1, p2, p3, p4)</code></dt>
+  <dd>Une courbe de Bézier paramétrable à l'aide de quatre coefficient compris entre 0 et 1.</dd>
+  <dt><code>steps( n, &lt;jumpterm&gt;)</code></dt>
+  <dd>L'animation s'effectue selon <em>n</em> étapes de durées égales. Ainsi, si n vaut 5, l'animation se composera de cinq paliers. Selon la valeur du paramètre <em>jumpterm</em>, ces paliers se trouveront entre 0%, 20%, 40%, 60% et 80%, ou entre 20%, 40%, 60%, 80% et 100%, or ou inclueront également 0% et 100% (soit 0%, 25%, 50%, 75% et 100%) :
+  <dl>
+   <dt><code>jump-start</code></dt>
+   <dd>La fonction est continue à gauche et le premier saut se produit au début de l'animation.</dd>
+   <dt><code>jump-end</code></dt>
+   <dd>La fonction est continue à droite et le dernier saut se produit à la fin de l'animation.</dd>
+   <dt><code>jump-none</code></dt>
+   <dd>Il n'y a aucune rupture au début ou à la fin. Il y a un palier constant après 0% et un palier constant avant 100% (chacun durant 1/n).</dd>
+   <dt><code>jump-both</code></dt>
+   <dd>Une pause est présente aux niveaux 0% et 100%, ce qui ajoute un niveau pendant l'animation.</dd>
+   <dt><code>start</code></dt>
+   <dd>Identique à <code>jump-start.</code></dd>
+   <dt><code>end</code></dt>
+   <dd>Identique à <code>jump-end.</code></dd>
+  </dl>
+  </dd>
+  <dt><code>step-start</code></dt>
+  <dd>Synonyme de <code>steps(1, jump-start)</code></dd>
+  <dt><code>step-end</code></dt>
+  <dd>Synonyme de <code>steps(1, jump-end)</code></dd>
+ </dl>
+ </dd>
+</dl>
+
+<div class="note">
+<p><strong>Note </strong>: Lorsqu'on définit plusieurs valeurs, séparées par des virgules, sur une propriété <code>animation-*</code>, elles seront affectées selon leur ordre aux différentes animations listées par  {{cssxref("animation-name")}}. Si le nombre de valeurs n'est pas le même que le nombre d'animation, voir <a href="/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS#Utiliser_plusieurs_valeurs_pour_différentes_animations">Paramétrer plusieurs valeurs de propriétés pour les animations</a>.</p>
+</div>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<div>
+<h3 id="Courbes_de_Bézier_cubiques">Courbes de Bézier cubiques</h3>
+
+<div class="hidden">
+<pre class="brush:html">&lt;div class="parent"&gt;
+  &lt;div class="ease"&gt;ease&lt;/div&gt;
+  &lt;div class="easein"&gt;ease-in&lt;/div&gt;
+  &lt;div class="easeout"&gt;ease-out&lt;/div&gt;
+  &lt;div class="easeinout"&gt;ease-in-out&lt;/div&gt;
+  &lt;div class="linear"&gt;linear&lt;/div&gt;
+  &lt;div class="cb"&gt;cubic-bezier(0.2,-2,0.8,2)&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush:css;">.parent &gt; div[class] {
+    animation-name: changeme;
+    animation-duration: 10s;
+    animation-iteration-count: infinite;
+    margin-bottom: 4px;
+}
+@keyframes changeme {
+   0% {
+      min-width: 12em;
+      width: 12em;
+      background-color: black;
+      border: 1px solid red;
+      color: white;
+   }
+   100% {
+      width: 90vw;
+      min-width: 24em;
+      background-color: magenta;
+      color: yellow;
+      border: 1px solid orange;
+   }
+}
+</pre>
+</div>
+
+<pre class="brush: css">.ease {
+   animation-timing-function: ease;
+}
+.easein {
+   animation-timing-function: ease-in;
+}
+.easeout {
+   animation-timing-function: ease-out;
+}
+.easeinout {
+   animation-timing-function: ease-in-out;
+}
+.linear {
+   animation-timing-function: linear;
+}
+.cb {
+   animation-timing-function: cubic-bezier(0.2,-2,0.8,2);
+}</pre>
+
+<div>{{EmbedLiveSample("Courbes_de_Bézier_cubiques")}}</div>
+</div>
+
+<div>
+<h3 id="Fonctions_en_escalier">Fonctions en escalier</h3>
+
+<div class="hidden">
+<pre class="brush:html">&lt;div class="parent"&gt;
+  &lt;div class="jump-start"&gt;jump-start&lt;/div&gt;
+  &lt;div class="jump-end"&gt;jump-end&lt;/div&gt;
+  &lt;div class="jump-both"&gt;jump-both&lt;/div&gt;
+  &lt;div class="jump-none"&gt;jump-none&lt;/div&gt;
+  &lt;div class="start"&gt;start&lt;/div&gt;
+  &lt;div class="end"&gt;end&lt;/div&gt;
+  &lt;div class="step-start"&gt;step-start&lt;/div&gt;
+  &lt;div class="step-end"&gt;step-end&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush:css;">.parent &gt; div[class] {
+    animation-name: changeme;
+    animation-duration: 10s;
+    animation-iteration-count: infinite;
+    margin-bottom: 4px;
+}
+@keyframes changeme {
+   0% {
+      min-width: 12em;
+      width: 12em;
+      background-color: black;
+      border: 1px solid red;
+      color: white;
+   }
+   100% {
+      width: 90vw;
+      min-width: 24em;
+      background-color: magenta;
+      color: yellow;
+      border: 1px solid orange;
+   }
+}
+</pre>
+</div>
+
+<pre class="brush: css">.jump-start {
+   animation-timing-function: steps(5, jump-start);
+}
+.jump-end {
+   animation-timing-function: steps(5, jump-end);
+}
+.jump-none {
+   animation-timing-function: steps(5, jump-none);
+}
+.jump-both {
+   animation-timing-function: steps(5, jump-both);
+}
+.start {
+   animation-timing-function: steps(5, start);
+}
+.end {
+   animation-timing-function: steps(5, end);
+}
+.step-start {
+   animation-timing-function: step-start;
+}
+.step-end {
+   animation-timing-function: step-end;
+}</pre>
+
+<div>{{EmbedLiveSample("Fonctions_en_escalier")}}</div>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Animations', '#animation-timing-function', 'animation-timing-function')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Définition initiale..</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.animation-timing-function")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS" title="CSS developer guide about CSS animations">Utiliser les animations CSS</a></li>
+ <li>{{cssxref('timing-function')}}</li>
+ <li>L'API JavaScript {{domxref("AnimationEvent")}}</li>
+</ul>
diff --git a/files/fr/web/css/animation/index.html b/files/fr/web/css/animation/index.html
new file mode 100644
index 0000000000..e92552e690
--- /dev/null
+++ b/files/fr/web/css/animation/index.html
@@ -0,0 +1,367 @@
+---
+title: animation
+slug: Web/CSS/animation
+tags:
+  - Animations
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/animation
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>animation</code></strong> est <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">une propriété raccourcie</a> qui permet de d'appliquer une animation entre des styles.</p>
+
+<p>C'est une propriété qui synthétise les propriétés suivantes :</p>
+
+<ul>
+ <li>{{cssxref("animation-name")}},</li>
+ <li>{{cssxref("animation-duration")}},</li>
+ <li>{{cssxref("animation-timing-function")}},</li>
+ <li>{{cssxref("animation-delay")}},</li>
+ <li>{{cssxref("animation-iteration-count")}},</li>
+ <li>{{cssxref("animation-direction")}},</li>
+ <li>{{cssxref("animation-fill-mode")}},</li>
+ <li>{{cssxref("animation-play-state")}}.</li>
+</ul>
+
+<div>{{EmbedInteractiveExample("pages/css/animation.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<pre class="brush:css no-line-numbers">/* @keyframes duration | timing-function | delay |
+   iteration-count | direction | fill-mode | play-state | name */
+  animation: 3s ease-in 1s 2 reverse both paused slidein;
+
+/* @keyframes duration | timing-function | delay | name */
+  animation: 3s linear 1s slidein;
+
+/* @keyframes duration | name */
+  animation: 3s slidein;
+</pre>
+
+<div class="hidden" id="animation">
+<pre class="brush: html">&lt;div class="grid"&gt;
+  &lt;div class="col"&gt;
+    &lt;div class="note"&gt;
+      Avec l'animation suivante :
+      &lt;pre&gt;@keyframes slidein {
+  from { transform: scaleX(0); }
+  to   { transform: scaleX(1); }
+}&lt;/pre&gt;
+    &lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt;
+        &lt;button class="play" title="LECTURE"&gt;&lt;/button&gt;
+      &lt;/div&gt;
+      &lt;div class="cell flx"&gt;
+        &lt;div class="overlay"&gt;animation: 3s ease-in 1s 2 reverse both paused slidein;&lt;/div&gt;
+        &lt;div class="animation a1"&gt;&lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt;
+        &lt;button class="pause" title="PAUSE"&gt;&lt;/button&gt;
+      &lt;/div&gt;
+      &lt;div class="cell flx"&gt;
+        &lt;div class="overlay"&gt;animation: 3s linear 1s slidein;&lt;/div&gt;
+        &lt;div class="animation a2"&gt;&lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt;
+        &lt;button class="pause" title="PAUSE"&gt;&lt;/button&gt;
+      &lt;/div&gt;
+      &lt;div class="cell flx"&gt;
+        &lt;div class="overlay"&gt;animation: 3s slidein;&lt;/div&gt;
+        &lt;div class="animation a3"&gt;&lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">html,body {
+  height: 100%;
+  box-sizing: border-box;
+}
+
+pre { margin-bottom: 0; }
+svg { width: 1.5em; height: 1.5em; }
+
+button {
+  width: 27px;
+  height: 27px;
+  background-size: 16px;
+  background-position: center;
+  background-repeat: no-repeat;
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+button.play {
+  background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cstyle%3Epath%20%7Bdisplay%3Anone%7D%20path%3Atarget%7Bdisplay%3Ablock%7D%3C%2Fstyle%3E%3Cpath%20id%3D%22play%22%20d%3D%22M3%2C3%20L3%2C13%20L13%2C8%20Z%22%20%2F%3E%3Cpath%20id%3D%22pause%22%20d%3D%22M5%2C4%20L7%2C4%20L7%2C13%20L5%2C13%20Z%20M9%2C4%20L11%2C4%20L11%2C13%20L9%2C13%20Z%22%20%2F%3E%3Cpath%20id%3D%22restart%22%20d%3D%22M13%2C9%20A5%2C5%2C1%2C1%2C1%2C8%2C4%20L8%2C2%20L12%2C5%20L8%2C8%20L8%2C6%20A3%2C3%2C1%2C1%2C0%2C11%2C9%20A1%2C1%2C1%2C1%2C1%2C13%2C9%20z%22%20%2F%3E%3C%2Fsvg%3E#play');
+}
+
+button.pause {
+  background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cstyle%3Epath%20%7Bdisplay%3Anone%7D%20path%3Atarget%7Bdisplay%3Ablock%7D%3C%2Fstyle%3E%3Cpath%20id%3D%22play%22%20d%3D%22M3%2C3%20L3%2C13%20L13%2C8%20Z%22%20%2F%3E%3Cpath%20id%3D%22pause%22%20d%3D%22M5%2C4%20L7%2C4%20L7%2C13%20L5%2C13%20Z%20M9%2C4%20L11%2C4%20L11%2C13%20L9%2C13%20Z%22%20%2F%3E%3Cpath%20id%3D%22restart%22%20d%3D%22M13%2C9%20A5%2C5%2C1%2C1%2C1%2C8%2C4%20L8%2C2%20L12%2C5%20L8%2C8%20L8%2C6%20A3%2C3%2C1%2C1%2C0%2C11%2C9%20A1%2C1%2C1%2C1%2C1%2C13%2C9%20z%22%20%2F%3E%3C%2Fsvg%3E#pause');
+}
+
+button.restart {
+  background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cstyle%3Epath%20%7Bdisplay%3Anone%7D%20path%3Atarget%7Bdisplay%3Ablock%7D%3C%2Fstyle%3E%3Cpath%20id%3D%22play%22%20d%3D%22M3%2C3%20L3%2C13%20L13%2C8%20Z%22%20%2F%3E%3Cpath%20id%3D%22pause%22%20d%3D%22M5%2C4%20L7%2C4%20L7%2C13%20L5%2C13%20Z%20M9%2C4%20L11%2C4%20L11%2C13%20L9%2C13%20Z%22%20%2F%3E%3Cpath%20id%3D%22restart%22%20d%3D%22M13%2C9%20A5%2C5%2C1%2C1%2C1%2C8%2C4%20L8%2C2%20L12%2C5%20L8%2C8%20L8%2C6%20A3%2C3%2C1%2C1%2C0%2C11%2C9%20A1%2C1%2C1%2C1%2C1%2C13%2C9%20z%22%20%2F%3E%3C%2Fsvg%3E#restart');
+}
+
+.grid {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  background: #EEE;
+  font: 1em monospace;
+}
+
+.row {
+  display: flex;
+  flex: 1 auto;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.col {
+  display: flex;
+  flex: 1 auto;
+  flex-direction: column;
+}
+
+.cell {
+  box-sizing: border-box;
+  margin: .5em;
+  padding: 0;
+  background-color: #FFF;
+  overflow: hidden;
+  text-align: left;
+}
+
+.flx {
+  flex: 1 0;
+}
+
+.note {
+  background: #fff3d4;
+  padding: 1em;
+  margin: .5em;
+  font: .8em sans-serif;
+  text-align: left;
+  flex: none;
+}
+
+.overlay { padding: .5em; }
+
+@keyframes slidein {
+  from { transform: scaleX(0); }
+  to { transform: scaleX(1); }
+}
+
+.a1 { animation: 3s ease-in 1s 2 reverse both paused slidein; }
+.a2 { animation: 3s linear 1s slidein; }
+.a3 { animation: 3s slidein; }
+
+.animation {
+  background: #3F87A6;
+  width: 100%;
+  height: calc(100% - 1.5em);
+  transform-origin: left center;
+}</pre>
+
+<pre class="brush: js">window.addEventListener('load', function () {
+  var ANIMATION = Array.from(document.querySelectorAll('.animation'));
+  var BUTTON    = Array.from(document.querySelectorAll('button'));
+
+  function toggleButton (btn, type) {
+    btn.classList.remove('play', 'pause', 'restart');
+    btn.classList.add(type);
+    btn.title = type.toUpperCase(type);
+  }
+
+  function playPause (i) {
+    var btn  = BUTTON[i];
+    var anim = ANIMATION[i];
+
+    if (btn.classList.contains('play')) {
+      anim.style.animationPlayState = 'running';
+      toggleButton(btn, 'pause');
+    } else if (btn.classList.contains('pause')) {
+      anim.style.animationPlayState = 'paused';
+      toggleButton(btn, 'play');
+    } else {
+      anim.classList.remove('a' + (i + 1));
+      setTimeout(function () {
+        toggleButton(btn, i === 0 ? 'play' : 'pause');
+        anim.style.animationPlayState = '';
+        anim.classList.add('a' + (i + 1));
+      }, 100)
+    }
+  }
+
+  ANIMATION.forEach(function (node, index) {
+    node.addEventListener('animationstart', function () { toggleButton(BUTTON[index], 'pause');   });
+    node.addEventListener('animationend',   function () { toggleButton(BUTTON[index], 'restart'); });
+  });
+
+  BUTTON.forEach(function (btn, index) {
+    btn.addEventListener('click', function () { playPause(index); });
+  });
+})</pre>
+</div>
+
+<p>{{EmbedLiveSample("animation", "100%", 260, "", "", "example-outcome-frame")}}</p>
+
+<p><a href="/fr/docs/Web/CSS/Liste_propriétés_CSS_animées">Une liste des propriétés qui peuvent être animées</a> est disponible. On notera que cette liste est également valable pour <a href="/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS">les transitions CSS</a>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <code>animation</code> se définit grâce à une ou plusieurs animations, séparées par des virgules.</p>
+
+<p>Chaque animation se définit comme :</p>
+
+<ul>
+ <li>zéro ou une valeur du type :
+  <ul>
+   <li>{{cssxref("&lt;single-transition-timing-function&gt;")}}</li>
+   <li>{{cssxref("animation", "&lt;single-animation-iteration-count&gt;", "#&lt;single-animation-iteration-count&gt;")}}</li>
+   <li>{{cssxref("animation", "&lt;single-animation-direction&gt;", "#&lt;single-animation-direction&gt;")}}</li>
+   <li>{{cssxref("animation", "&lt;single-animation-fill-mode&gt;", "#&lt;single-animation-fill-mode&gt;")}}</li>
+   <li>{{cssxref("animation", "&lt;single-animation-play-state&gt;", "#&lt;single-animation-play-state&gt;")}} </li>
+  </ul>
+ </li>
+ <li>un nom optionnel pour l'animation ; celui-ci peut être le mot-clé <code>none</code>, un identifiant ({{cssxref("&lt;custom-ident&gt;")}}) ou une chaîne de caractères ({{cssxref("&lt;string&gt;")}})</li>
+ <li>zéro, une ou deux valeurs de type {{cssxref("&lt;time&gt;")}}</li>
+</ul>
+
+<p>L'ordre des valeurs est important : la première valeur qui peut être analysée comme une valeur de type {{cssxref("&lt;time&gt;")}} sera affectée à {{cssxref("animation-duration")}} et la deuxième à {{cssxref("animation-delay")}}.</p>
+
+<p>L'ordre des valeurs est également important pour chaque définition d'animation afin d'identifier la valeur de {{cssxref("animation-name")}} parmi les autres mots-clés. Lors de l'analyse de la déclaration, les mots-clés valides pour d'autres propriétés que {{cssxref("animation-name")}} et dont les valeurs n'ont pas été trouvées avant doivent être affectés à ces différentes propriétés et non à {{cssxref("animation-name")}}. De plus, lors de la sérialisation, les valeurs par défaut doivent être expliciter autant que nécessaire pour distinguer une valeur pour {{cssxref("animation-name")}} qui pourrait être une valeur pour une autre propriété.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;single-animation-iteration-count&gt;</code></dt>
+ <dd>Le nombre de fois où l'animation est jouée, cf.  {{cssxref("animation-iteration-count")}}.</dd>
+ <dt><code>&lt;single-animation-direction&gt;</code></dt>
+ <dd>La direction dans laquelle s'effectue l'animation, cf. {{cssxref("animation-direction")}}.</dd>
+ <dt><code>&lt;single-animation-fill-mode&gt;</code></dt>
+ <dd>La façon dont les styles sont appliquées à la cible de l'animation, avant et après son exécution, cf. {{cssxref("animation-fill-mode")}}.</dd>
+ <dt><code>&lt;single-animation-play-state&gt;</code></dt>
+ <dd>Si l'animation est lancée ou non, cf. {{cssxref("animation-play-state")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<div class="note">
+<p><strong>Note :</strong> D'autres exemples sont disponibles sur la page <a href="/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations">Manipuler les animations CSS</a>.</p>
+</div>
+
+<h3 id="Vue_laser">Vue laser</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="view_port"&gt;
+  &lt;div class="polling_message"&gt;
+    En attente
+  &lt;/div&gt;
+  &lt;div class="cylon_eye"&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.polling_message {
+  color: white;
+  float: left;
+  margin-right: 2%;
+}
+
+.view_port {
+  background-color: black;
+  height: 25px;
+  width: 100%;
+  overflow: hidden;
+}
+
+.cylon_eye {
+  background-color: red;
+  background-image:         linear-gradient(to right, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
+  color: white;
+  height: 100%;
+  width: 20%;
+
+  -webkit-animation: 4s linear 0s infinite alternate move_eye;
+          animation: 4s linear 0s infinite alternate move_eye;
+}
+
+@-webkit-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
+        @keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Vue_laser')}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Les animations qui clignotent ou scintillent sont problématiques et notamment pour les personnes souffrant de problèmes cognitifs. De plus, certains types de mouvement peuvent déclencher des désordres vestibulaires, des épilepsies, des migraines ou une sensibilité scotopique.</p>
+
+<p>Veillez à fournir un mécanisme qui permette d'interrompre ou de désactiver l'animation ainsi qu'à utiliser <a href="/fr/docs/Web/CSS/@media/prefers-reduced-motion">une requête média avec <code>prefers-reduced-motion</code></a> pour les mouvements réduits afin d'obtenir une ergonomie complémentaire pour les personnes souhaitant ne pas avoir d'animations.</p>
+
+<ul>
+ <li><a href="https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity"><em>Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article</em> (en anglais)</a></li>
+ <li><a href="https://css-tricks.com/introduction-reduced-motion-media-query/"><em>An Introduction to the Reduced Motion Media Query - CSS-Tricks</em> (en anglais)</a></li>
+ <li><a href="https://webkit.org/blog/7551/responsive-design-for-motion/"><em>Responsive Design for Motion - WebKit</em> (en anglais)</a></li>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.2_%E2%80%94_Enough_Time_Provide_users_enough_time_to_read_and_use_content">Comprendre les règles WCAG 2.2</a></li>
+ <li><em><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-pause.html">Understanding Success Criterion 2.2.2 - W3C Understanding WCAG 2.0 (en anglais)</a></em></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Animations', '#animation', 'animation')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.animation")}}</p>
+
+<h3 id="Notes_relatives_à_Quantum_(Firefox)">Notes relatives à Quantum (Firefox)</h3>
+
+<ul>
+ <li>Gecko possède un bug qui fait que lorsqu'on anime un élément en dehors de l'écran pour le faire apparaître à l'écran après une durée donnée, il n'effectue pas de <em>repaint</em> sur certaines plateformes (par exemple Windows, cf. ({{bug(1383239)}})). Ce problème a été corrigé avec le nouveau moteur de rendu CSS, <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, prévu pour Firefox 57.</li>
+ <li>Un autre bug empêche d'ouvrir les éléments {{htmlelement("details")}} par défaut avec l'attribut <code>open</code> si ceux-ci sont animés (cf. {{bug(1382124)}}). Cet autre point est également résolu avec Stylo.</li>
+ <li>Un autre bug ne répercute pas les modifications de {{cssxref("font-size")}} sur les animations qui utilisent l'unité <code>em</code> pour l'élément parent (cf. {{bug(1254424)}}). Stylo règle ce problème.</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Animations/Utiliser_les_animations_CSS">Manipuler les animations CSS</a></li>
+ <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li>
+</ul>
diff --git a/files/fr/web/css/animations_css/conseils/index.html b/files/fr/web/css/animations_css/conseils/index.html
new file mode 100644
index 0000000000..bb79f19722
--- /dev/null
+++ b/files/fr/web/css/animations_css/conseils/index.html
@@ -0,0 +1,165 @@
+---
+title: Trucs et astuces pour les animations CSS
+slug: Web/CSS/Animations_CSS/Conseils
+tags:
+  - Animations CSS
+  - CSS
+  - Exemple
+  - Guide
+  - Tutoriel
+translation_of: Web/CSS/CSS_Animations/Tips
+---
+<div>{{CSSRef}}</div>
+
+<p>Les animations CSS permettent de réaliser réaliser des effets incroyables en mainpulant les éléments de vos documents et applications.. Cependant, il est parfois compliqué d'obtenir l'effet désiré. Dans cet article, on explorera différents conseils visant à simplifier la réalisation d'animations.</p>
+
+<h2 id="Relancer_une_animation">Relancer une animation</h2>
+
+<p>La spécifications des <a href="/en-US/docs/Web/CSS/CSS_Animations">animations CSS</a> ne permet pas de relancer une animation. Il n'existe pas de méthode <code>resetAnimation()</code> qui puisse être appelée sur les éléments et on ne peut pas utiliser la propriété {{cssxref("animation-play-state")}} pour la redéfinir sur <code>"running"</code>. Pour obtenir cet effet qui permette de relancer une animation terminée, on utilisera cette astuce.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<p>Tout d'abord, on définit l'animation avec des règles CSS (certaines règles superflues sont masquées ici à des fins de concision).</p>
+
+<div class="hidden">
+<pre class="brush: css">.runButton {
+  cursor: pointer;
+  width: 300px;
+  border: 1px solid black;
+  font-size: 16px;
+  text-align: center;
+  margin-top: 12px;
+  padding-top: 2px;
+  padding-bottom: 4px;
+  color: white;
+  background-color: darkgreen;
+  font: 14px "Open Sans", "Arial", sans-serif;
+}</pre>
+</div>
+
+<pre class="brush: css">@keyframes colorchange {
+  0% { background: yellow }
+  100% { background: blue }
+}
+
+.box {
+  width: 100px;
+  height: 100px;
+  border: 1px solid black;
+}
+
+.changing {
+  animation: colorchange 2s;
+}</pre>
+
+<p>On a deux classes qui sont définies. La classe <code>box</code> qui décrit l'apparence de la boîte, sans aucune information relative à l'animation. Les détails de l'animation sont inclus dans la classe <code>changing</code> qui indique que les {{cssxref("@keyframes")}} intitulées <code>colorchange</code> doivent être utilisées sur une période de deux secondes afin d'animer la boîte.</p>
+
+<p>Si on n'utilise que ces règles, la boîte n'est pas animée lorsqu'elle s'affiche.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>Voici le fragment de HTML où on utilise un élément {{HTMLElement("div")}} qu'on veut animer et un bouton pour lancer (ou relancer) l'animation.</p>
+
+<pre class="brush: html">&lt;div class="box"&gt;
+&lt;/div&gt;
+
+&lt;div class="runButton" onclick="play()"&gt;Cliquer pour lancer l'animation&lt;/div&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>Enfin, voyons le JavaScript qui sera utilisé. Cette technique repose principalement sur la fonction <code>play()</code> qui est appelée lorsque l'utilisateur clique sur le bouton.</p>
+
+<pre class="brush: js">function play() {
+  document.querySelector(".box").className = "box";
+  window.requestAnimationFrame(function(time) {
+    window.requestAnimationFrame(function(time) {
+      document.querySelector(".box").className = "box changing";
+    });
+  });
+}</pre>
+
+<p>Cela paraît un peu étrange. Mais afin que l'animation soit lancée à nouveau, il faut : retirer l'effet d'animation, lancer le recalcul des styles dans le document pour que cette action soit enregistrée puis ajouter l'animation à nouveau sur l'élément.</p>
+
+<p>Voici ce qui se produit lorsque la fonction <code>play()</code> est appelée :</p>
+
+<ol>
+ <li>On réinitialise la liste des classes CSS de la boîte avec uniquement <code>box</code>. Ce faisant, on retire toutes les autres classes qui s'appliquaient à la boîte, y compris la classe <code>changing</code> en charge de l'animation. Autrement dit, on retire l'effet d'animation. Toutefois, ces modifications de classes n'auront pas d'effet tant que les styles ne sont pas recalculés et qu'un rafraîchissement est réalisé pour appliquer ces modifications.</li>
+ <li>Afin de s'assurer que les styles sont recalculés, on utilise {{domxref("window.requestAnimationFrame()")}} en définissant une fonction de rappel (<em>callback</em>). La fonction de rappel est exécutée juste avant le prochain rafraîchissement du document. Seul problème : avant le rafraîchissement, le recalcul des styles n'a pas encore eu lieu. Aussi…</li>
+ <li>Notre fonction de rappel invoque à nouveau <code>requestAnimationFrame()</code> ! Cette fois, la fonction de rappel est lancée avant le prochain rafraîchissement qui aura lieu après le recalcul des styles. Dans cette nouvelle fonction de rappel, on ajoute la classe <code>changing</code> à la boîte afin que l'animation soit lancée lors du rafraîchissement.</li>
+</ol>
+
+<p>Bien entendu, on ajoutera également un gestion d'événement au bouton pour que l'ensemble soit bien branché :</p>
+
+<pre class="brush: js">document.querySelector(".runButton").addEventListener("click", play, false);</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Relancer_une_animation', 320, 160)}}</p>
+
+<h2 id="Arrêter_une_animation">Arrêter une animation</h2>
+
+<p>Si on retire la propriété {{cssxref("animation-name")}} appliquée à un élément, l'animation s'arrêtera au prochain état défini. Si on souhaite plutôt que l'animation se termine et parvienne à un point d'arrêt, il faudra utiliser une autre approche. Voici quelques pistes :</p>
+
+<ol>
+ <li>L'animation doit être la plus isolée possible et on ne doit pas reposer sur  <code>animation-direction: alternate</code>. Il faut une animation explicitement séquencée qui parcourt l'ensemble de l'animation en un cycle.</li>
+ <li>Utiliser JavaScript pour retirer l'animation lorsque l'évènement <code>animationiteration</code> se déclenche.</li>
+</ol>
+
+<p>Ces pistes sont utilisées dans la démonstration suivante :</p>
+
+<h3 id="CSS_2">CSS</h3>
+
+<pre class="brush: css">.slidein {
+  animation-duration: 5s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+}
+
+.stopped {
+  animation-name: none;
+}
+
+@keyframes slidein {
+  0% {
+    margin-left: 0%;
+  }
+  50% {
+    margin-left: 50%;
+  }
+  100% {
+    margin-left: 0%;
+  }
+}
+</pre>
+
+<h3 id="HTML_2">HTML</h3>
+
+<pre class="brush: html">&lt;h1 id="watchme"&gt;Cliquer pour arrêter&lt;/h1&gt;
+</pre>
+
+<h3 id="JavaScript_2">JavaScript</h3>
+
+<pre class="brush: js">let watchme = document.getElementById('watchme')
+
+watchme.className = 'slidein'
+const listener = (e) =&gt; {
+  watchme.className = 'slidein stopped'
+}
+watchme.addEventListener('click', () =&gt;
+  watchme.addEventListener('animationiteration', listener, false)
+)
+</pre>
+
+<h3 id="Résultat_2">Résultat</h3>
+
+<p>{{EmbedLiveSample("Arrêter_une_animation")}}</p>
+
+<p><a href="https://jsfiddle.net/morenoh149/5ty5a4oy/">Voir cette démo</a></p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS">Manipuler les animations CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/Animations_CSS">Les animations CSS</a></li>
+ <li>{{domxref("Window.requestAnimationFrame()")}}</li>
+</ul>
diff --git a/files/fr/web/css/animations_css/détecter_la_prise_en_charge_des_animations_css/index.html b/files/fr/web/css/animations_css/détecter_la_prise_en_charge_des_animations_css/index.html
new file mode 100644
index 0000000000..a2cb1bd5a3
--- /dev/null
+++ b/files/fr/web/css/animations_css/détecter_la_prise_en_charge_des_animations_css/index.html
@@ -0,0 +1,99 @@
+---
+title: Détecter la prise en charge des animations CSS
+slug: Web/CSS/Animations_CSS/Détecter_la_prise_en_charge_des_animations_CSS
+tags:
+  - Avancé
+  - CSS
+  - Obsolete
+translation_of: Web/CSS/CSS_Animations/Detecting_CSS_animation_support
+---
+<div>{{CSSRef}}{{obsolete_header}}</div>
+
+<div class="warning">
+<p><strong>Attention !</strong> Les techniques décrites dans cet article sont obsolètes et peuvent être remplacées par l'utilisation de {{cssxref("@supports")}}.</p>
+</div>
+
+<p>Avec les animations CSS, on peut ajouter des animations sur du contenu, uniquement en utilisant CSS. Toutefois, cette fonctionnalité n'est parfois pas disponible et on souhaiterait alors pouvoir gérer ce cas et appliquer un effet similaire avec JavaScript. Cet article, <a href="https://hacks.mozilla.org/2011/09/detecting-and-generating-css-animations-in-javascript/">basé sur ce billet de Christian Heilmann</a>, illustre une technique pour détecter la prise en charge des animations CSS.</p>
+
+<h2 id="Détecter_la_prise_en_charge_des_animations_CSS">Détecter la prise en charge des animations CSS</h2>
+
+<p>Ce code JavaScript permet de vérifier que les animations CSS peuvent être utilisées dans le navigateur :</p>
+
+<pre class="brush: js">var animation = false,
+  animationstring = 'animation',
+  keyframeprefix = '',
+  domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
+  pfx  = '',
+  elem = document.createElement('div');
+
+if( elem.style.animationName !== undefined ) { animation = true; }
+
+if( animation === false ) {
+  for( var i = 0; i &lt; domPrefixes.length; i++ ) {
+    if( elem.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
+      pfx = domPrefixes[ i ];
+      animationstring = pfx + 'Animation';
+      keyframeprefix = '-' + pfx.toLowerCase() + '-';
+      animation = true;
+      break;
+    }
+  }
+}
+</pre>
+
+<p>Pour commencer, on définit quelques variables et on part de l'hypothèse que les animations ne sont pas prises en charge en définissant <code>animation</code> avec <code>false</code>. On utilise la chaîne de caractères <code>animationstring</code> avec la valeur "animation" car celle-ci représentera le nom de la propriété qu'on souhaite définir. On crée également un tableau contenant les préfixes des différents navigateurs afin de pouvoir parcourir ces différents cas et qu'on utilisera avec la variable <code>pfx</code> qu'on définit pour le moment avec la chaîne vide.</p>
+
+<p>Ensuite, on vérifie si la propriété CSS {{cssxref("animation-name")}}  on est définie sur l'élément représenté par la variable <code>elem</code>. Cela signifie alors que le navigateur prend en charge les animations CSS sans préfixe.</p>
+
+<p>Si le navigateur ne prend pas en charge la version sans préfixe et que <code>animation</code> vaut toujours <code>false</code>, on parcourt les différents préfixes des principaux navigateurs et on modifie le nom de <code>AnimationName</code> de la même façon.</p>
+
+<p>Une fois que ce code a fini son exécution, la valeur de <code>animation</code> sera <code>false</code> si les animations ne sont pas prises en charge ou <code>true</code> si <code>animation</code> est le bon nom et que le préfixe est correct. Pour les préfixes, on fera attention à la variation entre le <em>camelCase</em> (ex. <code>MozAnimation</code>) et les tirets (<code>-moz-x</code>).</p>
+
+<h2 id="Appliquer_des_animations_avec_la_bonne_syntaxe_selon_le_navigateur">Appliquer des animations avec la bonne syntaxe selon le navigateur</h2>
+
+<p>Maintenant qu'on sait que les animations CSS sont prises en charge, on peut appliquer des animations :</p>
+
+<pre class="brush: js">if( animation === false ) {
+
+  // on utilise JavaScript en fallback
+
+} else {
+  elem.style[ animationstring ] = 'rotate 1s linear infinite';
+
+  var keyframes = '@' + keyframeprefix + 'keyframes rotate { '+
+                    'from {' + keyframeprefix + 'transform:rotate( 0deg ) }'+
+                    'to {' + keyframeprefix + 'transform:rotate( 360deg ) }'+
+                  '}';
+
+  if( document.styleSheets &amp;&amp; document.styleSheets.length ) {
+
+      document.styleSheets[0].insertRule( keyframes, 0 );
+
+  } else {
+
+    var s = document.createElement( 'style' );
+    s.innerHTML = keyframes;
+    document.getElementsByTagName( 'head' )[ 0 ].appendChild( s );
+
+  }
+
+}
+</pre>
+
+<p>Ce code utilise la valeur d'<code>animation</code> : si c'est <code>false</code>, on utilise JavaScript pour recréer l'effet de l'animation. Sinon, on utilise JavaScript pour manipuler les animations CSS.</p>
+
+<p>Pour définir la propriété d'animation, il suffit de mettre à jour la valeur dans la collection de style. Cependant, c'est un peu plus compliqué de gérer les étapes/<em>keyframes</em> car elles n'utilisent pas la syntaxe CSS traditionnelle.</p>
+
+<p>Pour définir les étapes de l'animation avec JavaScript, il faut les écrire dans une chaîne de caractères CSS. On définit alors une variable <code>keyframes</code> qu'on construit avec le préfixe à utiliser. Une fois construite, cette variable contient la description complète des différentes étapes nécessaires à la description.</p>
+
+<p>Ensuite, il faut ajouter les étapes au CSS de la page. Pour commencer, on regarde s'il n'y a pas déjà une feuille de style associée au document et si c'est le cas, on ajoute la description des étapes dans la feuille de style (cf. les lignes 13 et 15 du fragment de code ci-avant).</p>
+
+<p>S'il n'y aucune feuille de style pré-existante, on crée un nouvel élément {{HTMLElement("style")}} et on remplit son contenu avec la valeur des étapes. Ensuite, on insère ce nouvel élément {{HTMLElement("style")}} dans l'élément {{HTMLElement("head")}} du document ce qui ajoute la nouvelle feuille de style au document.</p>
+
+<p><a href="https://jsfiddle.net/codepo8/ATS2S/8/embedded/result">Voir dans JSFiddle</a></p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS">Les animations CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/animations_css/index.html b/files/fr/web/css/animations_css/index.html
new file mode 100644
index 0000000000..acc7ab6997
--- /dev/null
+++ b/files/fr/web/css/animations_css/index.html
@@ -0,0 +1,81 @@
+---
+title: Les animations CSS
+slug: Web/CSS/Animations_CSS
+tags:
+  - CSS
+  - Reference
+translation_of: Web/CSS/CSS_Animations
+---
+<div>{{CSSRef}}</div>
+
+<p>Les <strong>animations CSS</strong> sont un module CSS qui définit la façon dont les valeurs des propriétés CSS peuvent être animées au fur et à mesure d'une période via des étapes intermédiaires (<em>keyframes</em> en anglais). Le comportement de ces animations séquencées peut être défini en termes de durée, de nombre de répétitions et de la façon dont elles sont répétées.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés_CSS">Propriétés CSS</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("animation")}}</li>
+ <li>{{cssxref("animation-delay")}}</li>
+ <li>{{cssxref("animation-direction")}}</li>
+ <li>{{cssxref("animation-duration")}}</li>
+ <li>{{cssxref("animation-fill-mode")}}</li>
+ <li>{{cssxref("animation-iteration-count")}}</li>
+ <li>{{cssxref("animation-name")}}</li>
+ <li>{{cssxref("animation-play-state")}}</li>
+ <li>{{cssxref("animation-timing-function")}}</li>
+</ul>
+</div>
+
+<h3 id="Règles_CSS">Règles @ CSS</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("@keyframes")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/CSS_Animations/Detecting_CSS_animation_support">Détecter la prise en charge des animations CSS</a></dt>
+ <dd>Cet article décrit une technique permettant de détecter si le navigateur prend en charge les animations CSS.</dd>
+ <dt><a href="/fr/docs/Web/CSS/CSS_Animations/Utiliser_les_animations_CSS">Manipuler les animations CSS</a></dt>
+ <dd>Un tutoriel pas-à-pas qui explique comment créer des animations CSS. Cet article décrit les différentes propriétés et règles @ relatives aux animations et comment elles interagissent.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Animations_CSS/Conseils">Conseils pour les animations CSS</a></dt>
+ <dd>Des conseils et astuces pour tirer le meilleur parti des animations CSS. Dans cet article, on décrit une technique qui permet de relancer une animation qui a déjà été exécutée, ce que l'API ne permet pas de faire nativement.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Animations')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<h3 id="Propriété_animation">Propriété <code>animation</code></h3>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.animation")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Transitions">Les transitions CSS</a> qui permettent de déclencher des animations suite à des actions utilisateur.</li>
+</ul>
diff --git a/files/fr/web/css/animations_css/utiliser_les_animations_css/index.html b/files/fr/web/css/animations_css/utiliser_les_animations_css/index.html
new file mode 100644
index 0000000000..4010492e3d
--- /dev/null
+++ b/files/fr/web/css/animations_css/utiliser_les_animations_css/index.html
@@ -0,0 +1,363 @@
+---
+title: Utiliser les animations CSS
+slug: Web/CSS/Animations_CSS/Utiliser_les_animations_CSS
+tags:
+  - Avancé
+  - CSS
+  - Guide
+  - Reference
+translation_of: Web/CSS/CSS_Animations/Using_CSS_animations
+---
+<div>{{CSSRef}}</div>
+
+<p>Les <strong>animations CSS</strong> permettent de créer des transitions entre deux états de mise en forme. Une animation est décrite par deux choses : des propriétés propres à l'animation d'une part et un ensemble d'étapes (<em>keyframes</em>) qui indiquent l'état initial, final et éventuellement des états intermédiaires d'autre part.</p>
+
+<p>Trois avantages permettent de distinguer les animations CSS des techniques d'animations utilisant JavaScript :</p>
+
+<ol>
+ <li>On peut aisément obtenir des animations simples sans avoir à connaître JavaScript.</li>
+ <li>Les animations s'exécuteront correctement même lorsque le système est soumis à une charge modérée. Il est possible que des animations JavaScript s'exécutent lentement si elles sont mal décrites. Dans le cadre des animations CSS, le moteur de rendu peut utiliser certaines techniques (comme le <em>frame-skipping</em>) afin que le résultat obtenu soit aussi fluide que possible.</li>
+ <li>En laissant le contrôle de l'animation au navigateur, celui-ci peut optimiser les performances et l'efficacité du système, par exemple en réduisant la fréquence de mise à jour des animations qui sont exécutées dans des onglets qui ne sont pas visibles à l'écran.</li>
+</ol>
+
+<h2 id="Paramétrer_l'animation">Paramétrer l'animation</h2>
+
+<p>Pour créer une animation CSS, il faut utiliser la propriété raccourcie {{cssxref("animation")}} ou les propriétés détaillées correspondantes sur un ou plusieurs éléments. Cette propriété permet de configurer la durée, le minutage et d'autres détails à propos de l'animation. <strong>Attention, cela ne détermine pas l'apparence visuelle de l'animation.</strong> Celle-ci est définie en utilisant des règles CSS de mise en forme au sein de la règle @ {{cssxref("@keyframes")}} comme décrit ci-après.</p>
+
+<p>Les propriétés détaillées rattachées à la propriété raccourcie {{cssxref("animation")}} sont :</p>
+
+<dl>
+ <dt>{{cssxref("animation-delay")}}</dt>
+ <dd>Cette propriété définit le délai entre le moment où l'élément est chargé et le moment où l'animation commence.</dd>
+ <dt>{{cssxref("animation-direction")}}</dt>
+ <dd>Cette propriété indique si l'animation doit alterner entre deux directions de progressions (faire des allers-retours) ou recommencer au début à chaque cycle de répétition.</dd>
+ <dt>{{cssxref("animation-duration")}}</dt>
+ <dd>Cette propriété définit la durée d'un cycle de l'animation.</dd>
+ <dt>{{cssxref("animation-fill-mode")}}</dt>
+ <dd>Cette propriété indique les valeurs qui doivent être appliquées aux propriétés avant et après l'exécution de l'animation.</dd>
+ <dt>{{cssxref("animation-iteration-count")}}</dt>
+ <dd>Cette propriété détermine le nombre de fois que l'animation est répétée. On peut utiliser le mot-clé <code>infinite</code> afin de répéter une animation infiniment.</dd>
+ <dt>{{cssxref("animation-name")}}</dt>
+ <dd>Cette propriété permet de déclarer un nom qui pourra être utilisé comme référence à l'animation pour la règle @ {{cssxref("@keyframes")}}.</dd>
+ <dt>{{cssxref("animation-play-state")}}</dt>
+ <dd>Cette propriété permet d'interrompre (« pause ») ou de reprendre l'exécution d'une animation.</dd>
+ <dt>{{cssxref("animation-timing-function")}}</dt>
+ <dd>Cette propriété configure la fonction de minutage d'une animation, autrement dit comment celle-ci accélère entre l'état initial et l'état final notamment grâce à des fonctions décrivant des courbes d'accélération.</dd>
+</dl>
+
+<h2 id="Définir_les_étapes_composant_une_animation_(keyframes)">Définir les étapes composant une animation (<code>@keyframes</code>)</h2>
+
+<p>Une fois qu'on a définit les propriétés propres à l'animation, on doit définir la mise en forme qui évolue lors de cette animation. Pour cela on définit deux étapes ou plus grâce à la règle @ {{cssxref("@keyframes")}}. Chaque étape décrit la façon dont l'élément animé doit être affiché à un instant donné lors de l'animation.</p>
+
+<p>La durée de l'animation est définie avant et la règle <code>@keyframes</code> utilise donc des valeurs exprimées en pourcentages (type CSS {{cssxref("percentage")}}) pour indiquer l'instant correspondant à cet état. 0% indique l'état initial de l'animation et 100% indique l'état final. Ces deux états étant très important, il existe deux alias pour les décrire : <code>from</code> et <code>to</code>. Ces états sont optionnels et si <code>from</code>/<code>0%</code> ou <code>to</code>/<code>100%</code> ne sont pas définis, le navigateur utilisera les valeurs calculées des différentes propriétés.</p>
+
+<p>Il est également possible d'ajouter des étapes intermédiaires, entre l'état initial et l'état final de l'animation.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<div class="note"><strong>Note :</strong> Les exemples ci-après n'utilisent pas la version préfixée des propriétés liées aux animations. Il est possible que d'anciens navigateurs (antérieurs à 2017) aient besoin de ces préfixes pour fonctionner auquel cas l'exemple « <em>live</em> » ne fonctionnera pas.</div>
+
+<h3 id="Utiliser_une_animation_pour_que_le_texte_traverse_la_fenêtre_du_navigateur">Utiliser une animation pour que le texte traverse la fenêtre du navigateur</h3>
+
+<p>Dans cet exemple simple, on met en forme l'élément {{HTMLElement("p")}} afin que le texte passe de la droite vers la gauche de l'écran</p>
+
+<p>On notera que les animations comme celle-ci peuvent agrandir la page qui sera alors plus grande que la fenêtre du navigateur. Pour éviter ce problème, on pourra placer l'élément animé dans un conteneur et utiliser {{cssxref("overflow")}}<code>:hidden</code> sur ce conteneur.</p>
+
+<pre class="brush: css">p {
+  animation-duration: 3s;
+  animation-name: slidein;
+}
+
+@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+</pre>
+
+<p>Dans cet exemple, on indique dans les propriétés de {{HTMLElement("p")}} que l'animation doit durer trois secondes entre le début et la fin (c'est le rôle de {{cssxref("animation-duration")}}) et que le nom utilisé par la règle @ {{cssxref("@keyframes")}} pour faire référence à cette animation sera <code>slidein</code>.</p>
+
+<p>Ici, on ne souhaite illustrer que les animations mais on aurait très bien pu avoir d'autres règles « classiques » pour d'autres propriétés à déclarer sur l'élément.</p>
+
+<p>Les étapes (<em>keyframes</em>) de l'animation sont définies via la règle @ {{cssxref("@keyframes")}}. Dans ce premier exemple, on a uniquement deux étapes. La première décrit l'état à 0% (on utilise l'alias <code>from</code>). Pour cet état initial, on veut que la marge gauche de l'élément soit à 100% (c'est-à-dire tout à droite de l'élément englobant) et que la largeur de l'élément soit de 300% (soit trois fois la largeur de l'élément englobant). Cela permet que le contenu soit dessiné hors de la fenêtre lors de l'état initial.</p>
+
+<p>La seconde, et dernière, étape, se produit à 100% d'avancement (dans l'exemple, on utilise l'alias <code>to</code>). Pour cet état, la marge gauche vaut 0% et la largeur de l'élément vaut 100%. De cette façon le contenu finit sa course contre le borde gauche de la zone de contenu.</p>
+
+<pre class="brush: html">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.&lt;/p&gt;
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Pour observer l'animation, il peut être nécessaire de rafraîchir la page ou d'utiliser la vue CodePen/JSFiddle.</p>
+</div>
+
+<p>{{EmbedLiveSample("Définir_les_étapes_composant_une_animation_(@keyframes)","100%","250")}}</p>
+
+<h3 id="Ajouter_une_autre_étape">Ajouter une autre étape</h3>
+
+<p>Ajoutons une autre étape à partir de l'animation précédente. Ici, nous allons agrandir la taille de police utilisée lorsque l'élément arrive de la droite avant qu'elle ne réduise à nouveau pour revenir à la taille originale une fois arrivée la fin de l'animation. Pour cela, on ajoute une étape dans la règle @ <code>@keyframes</code> :</p>
+
+<pre class="brush: css">75% {
+  font-size: 300%;
+  margin-left: 25%;
+  width: 150%;
+}
+</pre>
+
+<pre class="brush: css hidden">p {
+  animation-duration: 3s;
+  animation-name: slidein;
+}
+
+@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  75% {
+    font-size: 300%;
+    margin-left: 25%;
+    width: 150%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+</pre>
+
+<pre class="brush: html hidden">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.&lt;/p&gt;
+</pre>
+
+<p>Cette nouvelle étape indique au navigateur que, lorsqu'on atteint 75% d'avancement, il faut que la marge à gauche soit de 25% et que la largeur du paragraphe représente 150% de la largeur de l'élément englobant.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Pour observer l'animation, il peut être nécessaire de rafraîchir la page ou d'utiliser la vue CodePen/JSFiddle.</p>
+</div>
+
+<p>{{EmbedLiveSample("Ajouter_une_autre_étape","100%","250")}}</p>
+
+<h3 id="Répéter_une_animation">Répéter une animation</h3>
+
+<p>Pour que l'animation se répète, il suffit d'utiliser la propriété {{cssxref("animation-iteration-count")}} et d'indiquer le nombre de répétitions souhaitées. Ici, on utilise la valeur <code>infinite</code> pour que l'animation se répète à l'infini :</p>
+
+<pre class="brush: css">p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+}
+</pre>
+
+<pre class="brush: css hidden">@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+</pre>
+
+<pre class="brush: html hidden">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.&lt;/p&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Répéter_une_animation","100%","250")}}</p>
+
+<h3 id="Obtenir_un_effet_aller-retour">Obtenir un effet aller-retour</h3>
+
+<p>On a donc une animation qui se répète mais on obtient un résultat étrange, l'animation redémarre à chaque fois depuis l'état initial. Si on veut que le texte parcourt l'écran de droite à gauche puis de gauche à droite, on pourra utiliser la propriété {{cssxref("animation-direction")}} avec la valeur <code>alternate</code> :</p>
+
+<pre class="brush: css">p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+</pre>
+
+<pre class="brush: css hidden">@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+</pre>
+
+<pre class="brush: html hidden">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.&lt;/p&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Obtenir_un_effet_aller-retour","100%","250")}}</p>
+
+<h3 id="Utiliser_la_propriété_raccourcie_animation">Utiliser la propriété raccourcie <code>animation</code></h3>
+
+<p>La propriété raccourcie {{cssxref("animation")}} permet d'économiser de l'espace. Par exemple, si on prend cette règle :</p>
+
+<pre class="brush: css">p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+</pre>
+
+<p>On peut la réécrire de façon plus concise :</p>
+
+<pre class="brush: css">p {
+  animation: 3s infinite alternate slidein;
+}</pre>
+
+<div class="note">
+<p><strong>Note </strong>: Pour plus de détails, vous pouvez consulter la page de référence sur la propriété {{cssxref("animation")}}.</p>
+</div>
+
+<h3 id="Utiliser_plusieurs_valeurs_pour_différentes_animations">Utiliser plusieurs valeurs pour différentes animations</h3>
+
+<p>Les propriétés CSS détaillées permettent d'utiliser plusieurs valeurs, séparées par des virgules. Cela permet de paramétrer plusieurs animations via une seule règle. Prenons quelques exemples.</p>
+
+<p>Dans ce premier exemple, on a trois animations nommées différemment mais qui utilisent la même durée et le même nombre d'itération :</p>
+
+<pre class="brush: css">animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 3s;
+animation-iteration-count: 1;</pre>
+
+<p>Dans ce deuxième exemple, les trois propriétés ont cette fois des composantes distinctes, pour la durée et le nombre d'itération. Ici, par exemple <code>fadeInOut</code> a une durée de 2.5s et 2 itérations.</p>
+
+<pre class="brush: css">animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 2.5s, 5s, 1s;
+animation-iteration-count: 2, 1, 5;</pre>
+
+<p>Dans ce troisième cas, on a toujours trois animations mais uniquement deux durées et deux nombres d'itération. Lorsqu'il y a moins de valeurs que d'animations, on boucle sur les valeurs. Par exemple, avec le code qui suit, <code>fadeInOut</code> durera <code>2.5s</code>, <code>moveLeft300px</code> durera <code>5s</code>. On arrive à la fin de la liste des valeurs de durée et on reprend donc au début : <code>bounce</code> aura donc une durée de <code>2.5s</code>. Le nombre d'itérations sera affecté de la même façon.</p>
+
+<pre class="brush: css">animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 2.5s, 5s;
+animation-iteration-count: 2, 1;</pre>
+
+<h3 id="Utiliser_les_événements_liés_aux_animations">Utiliser les événements liés aux animations</h3>
+
+<p>Il est possible d'obtenir des informations et un certain contrôle sur les animations en utilisant l'objet {{domxref("AnimationEvent")}}. Celui-ci peut être utilisé pour détecter quand les animations commencent, finissent et il peut déclencher une nouvelle itération. Chaque événement inclue l'instant auquel il s'est produit et le nom de l'animation qui a déclenché l'événement.</p>
+
+<p>Dans la suite de cet article, nous allons modifier l'exemple précédent pour obtenir des informations supplémentaires sur chaque événement d'animation lorsqu'il se produit afin de mieux voir comment cela fonctionne.</p>
+
+<h4 id="La_feuille_de_style_CSS">La feuille de style CSS</h4>
+
+<p>On commence par rédiger le CSS pour l'animation. Ici, l'animation durera 3 secondes, sera intitulée <code>slidein</code>, se répètera trois fois et changera de direction pour faire des allers-retours. Dans la règle @ {{cssxref("@keyframes")}}, on manipule la largeur et la marge à gauche de l'élément afin que ce dernier traverse l'écran.</p>
+
+<pre class="brush: css">.slidein {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: 3;
+  animation-direction: alternate;
+}
+
+@keyframes slidein {
+  from {
+    margin-left:100%;
+    width:300%
+  }
+
+  to {
+    margin-left:0%;
+    width:100%;
+  }
+}</pre>
+
+<h4 id="Les_gestionnaires_d'événements">Les gestionnaires d'événements</h4>
+
+<p>On utilisera JavaScript pour « écouter » les trois événements possibles. Le code qui suit permet de définir les gestionnaires d'événement (à utiliser une fois que le document a été chargé).</p>
+
+<pre class="brush: js">var element = document.getElementById("watchme");
+element.addEventListener("animationstart", listener, false);
+element.addEventListener("animationend", listener, false);
+element.addEventListener("animationiteration", listener, false);
+
+element.className = "slidein";
+</pre>
+
+<p>Ce code est plutôt classique, n'hésitez pas à consulter la documentation de {{domxref("eventTarget.addEventListener()")}} si besoin. Pour finir, ce script attribut une classe sur <code>slidein</code> sur l'élément.</p>
+
+<p>Quel est l'intérêt ? En fait, l'événement <code>animationstart</code> est déclenché dès que l'animation démarre et cela se produit alors avant l'exécution du script. Pour éviter cela, on démarre l'animation via le script en définissant la classe de l'élément à animer.</p>
+
+<h4 id="Écouter_les_événements">Écouter les événements</h4>
+
+<p>Les événements sont transmis à la fonction <code>listener()</code> décrite ici :</p>
+
+<pre class="brush: js">function listener(event) {
+  var l = document.createElement("li");
+  switch(event.type) {
+    case "animationstart":
+      l.innerHTML = "Début : durée écoulée : " + event.elapsedTime;
+      break;
+    case "animationend":
+      l.innerHTML = "Fin : durée écoulée : " + event.elapsedTime;
+      break;
+    case "animationiteration":
+      l.innerHTML = "Nouvelle boucle démarrée à : " + event.elapsedTime;
+      break;
+  }
+  document.getElementById("output").appendChild(l);
+}
+</pre>
+
+<p>Ce code consulte {{domxref("event.type")}} afin de déterminer l'événement qui s'est produit puis ajoute un élément {{HTMLElement("ul")}} au document pour alimenter un journal des événements.</p>
+
+<p>Le résultat obtenu devrait ressembler à quelque chose comme :</p>
+
+<ul>
+ <li>Début : durée écoulée : 0</li>
+ <li>Nouvelle boucle démarrée à : 3.01200008392334</li>
+ <li>Nouvelle boucle démarrée à : 6.00600004196167</li>
+ <li>Fin : durée écoulée : 9.234000205993652</li>
+</ul>
+
+<p>On voit ici que les durées sont proches mais pas exactes. On voit également que, lors de la fin de l'animation, l'événement <code>animationiteration</code> n'est pas envoyé, seul <code>animationend</code> est déclenché.</p>
+
+<h4 id="Le_document_HTML">Le document HTML</h4>
+
+<p>Afin d'être tout à fait complet, voici le code HTML qui peut être utilisé et qui contint la liste dans laquelle on enregistrera les événements reçus :</p>
+
+<pre class="brush: html">&lt;h1 id="watchme"&gt;Regardez-moi bouger&lt;/h1&gt;
+&lt;p&gt;
+  Un exemple d'animation CSS pour déplacer
+  un élément &lt;code&gt;H1&lt;/code&gt; sur une page.
+&lt;/p&gt;
+&lt;p&gt;
+  Voici les événements relatifs aux animations :
+&lt;/p&gt;
+&lt;ul id="output"&gt;
+&lt;/ul&gt;
+&lt;/body&gt;
+</pre>
+
+<p>{{EmbedLiveSample('Utiliser_les_événements_liés_aux_animations', '600', '300')}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("AnimationEvent")}}</li>
+ <li><a href="/fr/docs/Web/CSS/Animations_CSS/Détecter_la_prise_en_charge_des_animations_CSS">Détecter la prise en charge des animations CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS">Manipuler les transitions CSS</a></li>
+ <li><a href="https://www.cssdebutant.com">CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/appearance/index.html b/files/fr/web/css/appearance/index.html
new file mode 100644
index 0000000000..a8bc485e09
--- /dev/null
+++ b/files/fr/web/css/appearance/index.html
@@ -0,0 +1,2677 @@
+---
+title: 'appearance (-moz-appearance, -webkit-appearance)'
+slug: Web/CSS/appearance
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/appearance
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>-moz-appearance</code></strong> est utilisée dans Gecko (Firefox) afin d'afficher un élément en utilisant la mise en forme native du système d'exploitation.</p>
+
+<p>La propriété <strong><code>-webkit-appearance</code></strong> est utilisée dans les navigateurs basés sur WebKit (c'est-à-dire Safari) et sur Blink (c'est-à-dire Chrome ou Opera) et permet d'avoir la même fonctionnalités. On notera que plusieurs navigateurs, non basés sur WebKit (Firefox et Edge par exemple), prennent en charge ce préfixe pour des raisons de compatibilité web.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/appearance.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cette propriété est souvent utilisée dans les feuilles de style <a href="/fr/docs/Tutoriel_XUL">XUL</a> afin de mettre en forme des <em>widgets</em> utilisant la mise en forme de la plateforme utilisée. Elle est également utilisée dans les implémentations <a href="/fr/docs/XBL">XBL</a> pour les <em>widgets</em> livrés avec les logiciels Mozilla.</p>
+
+<div class="note">
+<p><strong>Note :</strong><em><strong> </strong>Cette propriété doit être utilisée avec beaucoup d'attention sur les sites Web.</em> Son comportement peut varier d'un navigateur à l'autre bien que ces variations aient réduit avec le temps. Le mot-clé <code>none</code> peut avoir un comportement différent d'une plateforme à une autre et d'autres mots-clés ne sont pas pris en charge.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs pour la spécification CSS Basic User Interface Module Level 4 */
+appearance: none;
+appearance: auto;
+appearance: button;
+appearance: textfield;
+appearance: searchfield;
+appearance: textarea;
+appearance: push-button;
+appearance: button-bevel;
+appearance: slider-horizontal;
+appearance: checkbox;
+appearance: radio;
+appearance: square-button;
+appearance: menulist;
+appearance: menulist-button;
+appearance: listbox;
+appearance: meter;
+appearance: progress-bar;
+
+/* Liste des valeurs disponibles pour Gecko */
+-moz-appearance: scrollbarbutton-up;
+-moz-appearance: <code>button-bevel;</code>
+
+/* Liste des valeurs disponibles pour WebKit/Blink (ainsi que pour Gecko et Edge) */
+-webkit-appearance: <code>media-mute-button</code>;
+-webkit-appearance: caret;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p><code>&lt;appearance&gt; </code>est l’une des valeurs suivantes :</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Valeur</th>
+   <th>Démonstration</th>
+   <th>Navigateur</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td><code>none</code></td>
+   <td>
+    <div class="hidden" id="sampleNone">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance:none;
+-webkit-appearance:none;
+appearance:none; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleNone",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td>Aucune mise en forme spécifique n'est appliquée. Le comportement obtenu est le comportement par défaut.</td>
+  </tr>
+  <tr>
+   <td><code>auto</code> {{Experimental_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleAuto">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: auto;
+-webkit-appearance: auto;
+appearance:auto; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleAuto",100,50,"","", "nobutton")}}</td>
+   <td>Aucun</td>
+   <td>L'agent utilisateur sélectionne la mise en forme spécifique selon l'élément utilisé. Cette valeur sera synonyme de <code>none</code> sur les éléments sans mise en forme particulière.</td>
+  </tr>
+  <tr>
+   <td><code>attachment</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleAttachment">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: attachment;
+-webkit-appearance: attachment; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleAttachment",100,50,"","", "nobutton")}}</td>
+   <td>Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>borderless-attachment</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-borderless-attachment">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: borderless-attachment;
+-webkit-appearance: borderless-attachment; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-borderless-attachment",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleButton">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: button;
+-webkit-appearance: button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleButton",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td>L'élément est dessiné comme un bouton.</td>
+  </tr>
+  <tr>
+   <td><code>button-arrow-down</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleButtonArrowDown">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: button-arrow-down;
+-webkit-appearance: button-arrow-down; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleButtonArrowDown",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>
+    <p>Retiré avec Fx 64</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>button-arrow-next</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleButtonArrowNext">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: button-arrow-next;
+-webkit-appearance: button-arrow-next; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleButtonArrowNext",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64</td>
+  </tr>
+  <tr>
+   <td><code>button-arrow-previous</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleButtonArrowPrevious">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: button-arrow-previous;
+-webkit-appearance: button-arrow-previous; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleButtonArrowPrevious",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64</td>
+  </tr>
+  <tr>
+   <td><code>button-arrow-up</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleButtonArrowUp">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: button-arrow-up;
+-webkit-appearance: button-arrow-up; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleButtonArrowUp",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64</td>
+  </tr>
+  <tr>
+   <td><code>button-bevel</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleButtonBevel">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: button-bevel;
+-webkit-appearance: button-bevel; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleButtonBevel",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>button-focus</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleButtonFocus">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: button-focus;
+-webkit-appearance: button-focus; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleButtonFocus",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64</td>
+  </tr>
+  <tr>
+   <td><code>caps-lock-indicator</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-caps-lock-indicator">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: caps-lock-indicator;
+-webkit-appearance: caps-lock-indicator; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-caps-lock-indicator",100,50,"","","nobutton")}}</td>
+   <td>Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>caret</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleCaret">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: caret;
+-webkit-appearance: caret; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleCaret",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>checkbox</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleCheckbox">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: checkbox;
+-webkit-appearance: checkbox; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleCheckbox",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td>L'élément est dessiné comme une case à cocher (seule la partie correspondant à la case est incluse).</td>
+  </tr>
+  <tr>
+   <td><code>checkbox-container</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleCheckboxContainer">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: checkbox-container;
+-webkit-appearance: checkbox-container; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleCheckboxContainer",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>L'élément est dessiné comme un conteneur de case à cocher. Celui-ci peut inclure un effet d'ombre portée pour certaines plateformes. L'élément contient normalement un libellé et une case à cocher.</td>
+  </tr>
+  <tr>
+   <td><code>checkbox-label</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleCheckboxLabel">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: checkbox-label;
+-webkit-appearance: checkbox-label; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleCheckboxLabel",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>checkmenuitem</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleCheckmenuitem">
+    <pre class="brush: css">
+div { color: black; height: 20px;
+-moz-appearance: checkmenuitem;
+-webkit-appearance: checkmenuitem; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleCheckmenuitem",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>color-well</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-color-well">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: color-well;
+-webkit-appearance: color-well; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-color-well",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td><code>input type=color</code></td>
+  </tr>
+  <tr>
+   <td><code>continuous-capacity-level-indicator</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-continuous-capacity-level-indicator">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: continuous-capacity-level-indicator;
+-webkit-appearance: continuous-capacity-level-indicator; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-continuous-capacity-level-indicator",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>default-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-default-button">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: default-button;
+-webkit-appearance: default-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-default-button",100,50,"","","nobutton")}}</td>
+   <td>Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>discrete-capacity-level-indicator</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-discrete-capacity-level-indicator">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: discrete-capacity-level-indicator;
+-webkit-appearance: discrete-capacity-level-indicator; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-discrete-capacity-level-indicator",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>dualbutton</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleDualButton">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: dualbutton;
+-webkit-appearance: dualbutton; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleDualButton",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64</td>
+  </tr>
+  <tr>
+   <td><code>groupbox</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleGroupbox">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: groupbox;
+-webkit-appearance: groupbox; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleGroupbox",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64</td>
+  </tr>
+  <tr>
+   <td><code>inner-spin-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleInnerSpinButton">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: inner-spin-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleInnerSpinButton",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>image-controls-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-image-controls-button">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: image-controls-button;
+-webkit-appearance: image-controls-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-image-controls-button",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>list-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-list-button">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: list-button;
+-webkit-appearance: list-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-list-button",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td>Liste de données.</td>
+  </tr>
+  <tr>
+   <td><code>listbox</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleListBox">
+    <pre class="brush: css">
+div { color: black; height:20px;
+-moz-appearance: listbox;
+-webkit-appearance: listbox; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleListBox",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>listitem</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleListItem">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: listitem;
+-webkit-appearance: listitem; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleListItem",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-enter-fullscreen-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaEnterFullscreenButton">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-enter-fullscreen-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaEnterFullscreenButton",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-exit-fullscreen-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaExitFullscreenButton">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-exit-fullscreen-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaExitFullscreenButton",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-fullscreen-volume-slider</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-media-fullscreen-volume-slider">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: media-fullscreen-volume-slider;
+-webkit-appearance: media-fullscreen-volume-slider; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-media-fullscreen-volume-slider",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-fullscreen-volume-slider-thumb</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-media-fullscreen-volume-slider-thumb">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: media-fullscreen-volume-slider-thumb;
+-webkit-appearance: media-fullscreen-volume-slider-thumb; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-media-fullscreen-volume-slider-thumb",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-mute-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaMuteButton">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-mute-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaMuteButton",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-play-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaPlayButton">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-play-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaPlayButton",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-overlay-play-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaOverlayPlayButton">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-overlay-play-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaOverlayPlayButton",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-return-to-realtime-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-media-return-to-realtime-button">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: media-return-to-realtime-button;
+-webkit-appearance: media-return-to-realtime-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-media-return-to-realtime-button",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-rewind-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-media-rewind-button">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: media-rewind-button;
+-webkit-appearance: media-rewind-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-media-rewind-button",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-seek-back-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-media-seek-back-button">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: media-seek-back-button;
+-webkit-appearance: media-seek-back-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-media-seek-back-button",100,50,"","","nobutton")}}</td>
+   <td>Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-seek-forward-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-media-seek-forward-button">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: media-seek-forward-button;
+-webkit-appearance: media-seek-forward-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-media-seek-forward-button",100,50,"","","nobutton")}}</td>
+   <td>Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-toggle-closed-captions-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaToggleClosedCaptionsButton">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-toggle-closed-captions-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaToggleClosedCaptionsButton",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-slider</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaSlider">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-slider; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaSlider",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-sliderthumb</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaSliderThumb">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-sliderthumb; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaSliderThumb",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-volume-slider-container</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaVolumeSliderContainer">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-volume-slider-container; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaVolumeSliderContainer",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-volume-slider-mute-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-media-volume-slider-mute-button">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: media-volume-slider-mute-button;
+-webkit-appearance: media-volume-slider-mute-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-media-volume-slider-mute-button",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-volume-slider</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaVolumeSlider">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-volume-slider; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaVolumeSlider",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-volume-sliderthumb</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaVolumeSliderThumb">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-volume-slider-thumb; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaVolumeSliderThumb",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-controls-background</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaControlsBackground">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-controls-background; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaControlsBackground",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-controls-dark-bar-background</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-media-controls-dark-bar-background">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: media-controls-dark-bar-background;
+-webkit-appearance: media-controls-dark-bar-background; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-media-controls-dark-bar-background",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-controls-fullscreen-background</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaControlsFullscreenBackground">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-controls-fullscreen-background; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaControlsFullscreenBackground",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-controls-light-bar-background</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-media-controls-light-bar-background">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: media-controls-light-bar-background;
+-webkit-appearance: media-controls-light-bar-background; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-media-controls-light-bar-background",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-current-time-display</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaCurrentTimeDisplay">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-current-time-display; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaCurrentTimeDisplay",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-time-remaining-display</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaTimeRemainingDisplay">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-time-remaining-display; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaTimeRemainingDisplay",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>menuarrow</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenuArrow">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: menuarrow;
+-webkit-appearance: menuarrow; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuArrow",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64</td>
+  </tr>
+  <tr>
+   <td><code>menubar</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenubar">
+    <pre class="brush: css">
+div { color: balck;
+-moz-appearance: menubar;
+-webkit-appearance: menubar; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenubar",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64</td>
+  </tr>
+  <tr>
+   <td><code>menucheckbox</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenuCheckbox">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: menucheckbox;
+-webkit-appearance: menucheckbox; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuCheckbox",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64</td>
+  </tr>
+  <tr>
+   <td><code>menuimage</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenuImage">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: menuimage;
+-webkit-appearance: menuimage; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuImage",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64</td>
+  </tr>
+  <tr>
+   <td><code>menuitem</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenuItem">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: menuitem;
+-webkit-appearance: menuitem; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuItem",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64, l'élément était mis en forme à la façon d'un élément de menu et l'élément était surligné au survol.</td>
+  </tr>
+  <tr>
+   <td><code>menuitemtext</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenuItemText">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: menuitemtext;
+-webkit-appearance: menuitemtext; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuItemText",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64</td>
+  </tr>
+  <tr>
+   <td><code>menulist</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenuList">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: menulist;
+-webkit-appearance: menulist; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuList",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>menulist-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenuListButton">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: menulist-button;
+-webkit-appearance: menulist-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuListButton",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td>L'élément est mis en forme comme un bouton indicant qu'un menu peut être ouvert.</td>
+  </tr>
+  <tr>
+   <td><code>menulist-text</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenuListText">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: menulist-text;
+-webkit-appearance: menulist-text; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuListText",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>menulist-textfield</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenuListTextfield">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: menulist-textfield;
+-webkit-appearance: menulist-textfield; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuListTextfield",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td>L'élément est mis en forme comme un champ texte d'une liste de menu (non implémenté pour Windows).</td>
+  </tr>
+  <tr>
+   <td><code>menupopup</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenuPopup">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: menupopup;
+-webkit-appearance: menupopup; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuPopup",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64</td>
+  </tr>
+  <tr>
+   <td><code>menuradio</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenuRadio">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: menuradio;
+-webkit-appearance: menuradio; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuRadio",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64</td>
+  </tr>
+  <tr>
+   <td><code>menuseparator</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenuSeparator">
+    <pre class="brush: css">
+div { color: transparent;
+-moz-appearance: menuseparator;
+-webkit-appearance: menuseparator; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuSeparator",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64</td>
+  </tr>
+  <tr>
+   <td><code>meter</code></td>
+   <td>
+    <div class="hidden" id="sampleMeter">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: meter; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMeter",100,50,"","", "nobutton")}}</td>
+   <td>
+    <p>Chrome Safari Firefox</p>
+   </td>
+   <td>
+    <p>Apparu avec Fx 64</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>meterbar</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMeterbar">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: meterbar;
+-webkit-appearance: meterbar; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMeterbar",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Apparu avec Fx 16. Utiliser la valeur <code>meter</code> à la place.</td>
+  </tr>
+  <tr>
+   <td><code>meterchunk</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMeterchunk">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: meterchunk;
+-webkit-appearance: meterchunk; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMeterchunk",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Apparu avec Fx 16. Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>number-input</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleNumberinput">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: number-input;
+-webkit-appearance: number-input; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleNumberInput",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>progress-bar</code></td>
+   <td>
+    <div class="hidden" id="sampleProgressBarWebkit">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: progress-bar; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleProgressBarWebkit",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari FIrefox</td>
+   <td>Apparu avec Fx 64</td>
+  </tr>
+  <tr>
+   <td><code>progress-bar-value</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleProgressBarValueWebkit">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: progress-bar-value; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleProgressBarValueWebkit",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>progressbar</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleProgressBar">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: progressbar;
+-webkit-appearance: progressbar; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleProgressBar",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>L'élément est mis en forme comme une barre de progression. On utilisera <code>progress-bar</code> à la place.</td>
+  </tr>
+  <tr>
+   <td><code>progressbar-vertical</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleProgressBarVertical">
+    <pre class="brush: css">
+div { color: transparent;
+-moz-appearance: progressbar-vertical;
+-webkit-appearance: preogressbar-vertical; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleProgressBarVertical",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>progresschunk</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleProgressChunk">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: progresschunk;
+-webkit-appearance: progresschunk; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleProgressChunk",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>progresschunk-vertical</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleProgressChunkVertical">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: progresschunk-vertical;
+-webkit-appearance: progresschunk-vertical; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleProgressChunkVertical",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>push-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="samplePushButton">
+    <pre class="brush: css">
+div{ color: black; -webkit-appearance: push-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("samplePushButton",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>radio</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleRadio">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: radio;
+-webkit-appearance: radio; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleRadio",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td>L'élément est dessiné comme un bouton radio. Seule la partie correspondant au bouton est incluse.</td>
+  </tr>
+  <tr>
+   <td><code>radio-container</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleRadioContainer">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: radio-container;
+-webkit-appearance: radio-container; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleRadioContainer",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64, l'élément est dessiné comme un conteneur de bouton radio. Cette mise en forme peut inclure une ombre portée sous le bouton pour certaines plateformes. L'élément contient normalement un libellé et un bouton radio.</td>
+  </tr>
+  <tr>
+   <td><code>radio-label</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleRadioLabel">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: radio-label;
+-webkit-appearance: radio-label; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleRadioLabel",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>radiomenuitem</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleRadioMenuItem">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: radiomenuitem;
+-webkit-appearance: radiomenuitem; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleRadioMenuItem",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>range</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleRange">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: range;
+-webkit-appearance: range; }</pre>
+    range
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleRange",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>range-thumb</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleRangeThumb">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: range-thumb;
+-webkit-appearance: range-thumb; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleRangeThumb",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>rating-level-indicator</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-rating-level-indicator">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: rating-level-indicator;
+-webkit-appearance: rating-level-indicator; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-rating-level-indicator",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>resizer</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleResizer">
+    <pre class="brush: css">
+div { color: transparent;
+-moz-appearance: resizer;
+-webkit-appearance: resizer; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleResizer",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 63</td>
+  </tr>
+  <tr>
+   <td><code>resizerpanel</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleResizerPanel">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: resizerpanel;
+-webkit-appearance: resizerpanel; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleResizerPanel",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 63.</td>
+  </tr>
+  <tr>
+   <td><code>scale-horizontal</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScaleHorizontal">
+    <pre class="brush: css">
+div { color: transparent;
+-moz-appearance: scale-horizontal;
+-webkit-appearance: scale-horizontal; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScaleHorizontal",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>scalethumbend</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleThumbEnd">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: scalethumbend;
+-webkit-appearance: scalethumbend; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleThumbEnd",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>scalethumb-horizontal</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScaleThumbHorizontal">
+    <pre class="brush: css">
+div { color: transparent;
+-moz-appearance: scalethumb-horizontal;
+-webkit-appearance: scalethumb-horizontal; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScaleThumbHorizontal",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>scalethumbstart</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScaleThumbStart">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: scalethumbstart;
+-webkit-appearance: scalethumbstart; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScaleThumbStart",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>scalethumbtick</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScaleThumbTick">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: scalethumbtick;
+-webkit-appearance: scalethumbtick; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScaleThumbTick",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>scalethumb-vertical</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScaleThumbVertical">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: scalethumb-vertical;
+-webkit-appearance: scalethumb-vertical; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScaleThumbVertical",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>scale-vertical</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScaleVertical">
+    <pre class="brush: css">
+div { color: transparent;
+-moz-appearance: scale-vertical;
+-webkit-appearance: scale-vertical; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScaleVertical",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>scrollbarbutton-down</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScrollbarButtonDown">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: scrollbarbutton-down;
+-webkit-appearance: scrollbarbutton-down; }</pre>
+
+    <pre class="bruh: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScrollbarButtonDown",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 63.</td>
+  </tr>
+  <tr>
+   <td><code>scrollbarbutton-left</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScrollbarButtonLeft">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: scrollbarbutton-left;
+-webkit-appearance: scrollbarbutton-left; }</pre>
+
+    <pre class="bruh: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScrollbarButtonLeft",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 63.</td>
+  </tr>
+  <tr>
+   <td><code>scrollbarbutton-right</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScrollbarButtonRight">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: scrollbarbutton-right;
+-webkit-appearance: scrollbarbutton-right; }</pre>
+
+    <pre class="bruh: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScrollbarButtonRight",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 63.</td>
+  </tr>
+  <tr>
+   <td><code>scrollbarbutton-up</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScrollbarButtonUp">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: scrollbarbutton-up;
+-webkit-appearance: scrollbarbutton-up; }</pre>
+
+    <pre class="bruh: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScrollbarButtonUp",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 63.</td>
+  </tr>
+  <tr>
+   <td><code>scrollbarthumb-horizontal</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScrollbarThumbHorizontal">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: scrollbarthumb-horizontal;
+-webkit-appearance: scrollbarthumb-horizontal; }</pre>
+
+    <pre class="bruh: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScrollbarThumbHorizontal",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>scrollbarthumb-vertical</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScrollbarThumbVertical">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: scrollbarthumb-vertical;
+-webkit-appearance: scrollbarthumb-vertical; }</pre>
+
+    <pre class="bruh: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScrollbarThumbVertical",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>scrollbartrack-horizontal</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScrollbarTrackHorizontal">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: scrollbartrack-horizontal;
+-webkit-appearance: scrollbartrack-horizontal; }</pre>
+
+    <pre class="bruh: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScrollbarTrackHorizontal",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>scrollbartrack-vertical</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScrollbarTrackVertical">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: scrollbartrack-vertical;
+-webkit-appearance: scrollbarbartrack-vertical; }</pre>
+
+    <pre class="bruh: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScrollbarTrackVertical",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>searchfield</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSearchField">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: searchfield;
+-webkit-appearance: searchfield; }</pre>
+
+    <pre class="bruh: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSearchField",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>searchfield-decoration</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-searchfield-decoration">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: searchfield-decoration;
+-webkit-appearance: searchfield-decoration; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-searchfield-decoration",100,50,"","","nobutton")}}</td>
+   <td>Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>searchfield-results-decoration</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-searchfield-results-decoration">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: searchfield-results-decoration;
+-webkit-appearance: searchfield-results-decoration; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-searchfield-results-decoration",100,50,"","","nobutton")}}</td>
+   <td>Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>searchfield-results-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-searchfield-results-button">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: searchfield-results-button;
+-webkit-appearance: searchfield-results-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-searchfield-results-button",100,50,"","","nobutton")}}</td>
+   <td>Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>searchfield-cancel-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSearchFieldCancelButton">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: searchfield-cancel-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSearchFieldCancelButton",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>snapshotted-plugin-overlay</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-snapshotted-plugin-overlay">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: snapshotted-plugin-overlay;
+-webkit-appearance: snapshotted-plugin-overlay; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-snapshotted-plugin-overlay",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>separator</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSeparator">
+    <pre class="brush: css">
+div { color: transparent;
+-moz-appearance: separator;
+-webkit-appearance: separator; }</pre>
+
+    <pre class="bruh: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSeparator",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>
+    <p>Retiré avec Fx 64.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>sheet</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSheet">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: sheet;
+-webkit-appearance: sheet; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSheet",100,50,"","", "nobutton")}}</td>
+   <td>None</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>slider-horizontal</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSliderHorizontal">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: slider-horizontal; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSliderHorizontal",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>slider-vertical</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSliderVertical">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: slider-vertical; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSliderVertical",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>sliderthumb-horizontal</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSliderThumbHorizontal">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: slider-thumb-horizontal; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSliderThumbHorizontal",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>sliderthumb-vertical</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSliderThumbVertical">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: slider-thumb-vertical; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSliderThumbVertical",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>spinner</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSpinner">
+    <pre class="brush: css">
+div { color: transparent;
+-moz-appearance: spinner;
+-webkit-appearance: spinner; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSpinner",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>spinner-downbutton</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSpinnerDownbutton">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: spinner-downbutton;
+-webkit-appearance: spinner-downbutton; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSpinnerDownbutton",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>spinner-textfield</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSpinnerTextfield">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: spinner-textfield;
+-webkit-appearance: spinner-textfield; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSpinnerTextfield",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>spinner-upbutton</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSpinnerUpbutton">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: spinner-upbutton;
+-webkit-appearance: spinner-upbutton; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSpinnerUpbutton",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>splitter</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSplitter">
+    <pre class="brush: css">
+div { color: transparent;
+-moz-appearance: splitter;
+-webkit-appearance: splitter; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSplitter",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>square-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSquareButton">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: square-button;
+-webkit-appearance: square-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSquareButton",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>statusbar</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleStatusBar">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: statusbar;
+-webkit-appearance: statusbar; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleStatusBar",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>statusbarpanel</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleStatusBarPanel">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: statusbarpanel;
+-webkit-appearance: statusbarpanel; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleStatusBarPanel",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>tab</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTab">
+    <pre class="brush: css">
+div { color: black; height: 20px;
+-moz-appearance: tab;
+-webkit-appearance: tab; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTab",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64</td>
+  </tr>
+  <tr>
+   <td><code>tabpanel</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTabPanel">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: tabpanel;
+-webkit-appearance: tabpanel; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTabPanel",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>tabpanels</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTabPanels">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: tabpanels;
+-webkit-appearance: tabpanels; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTabPanels",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64</td>
+  </tr>
+  <tr>
+   <td><code>tab-scroll-arrow-back</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTabScrollArrowBack">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: tab-scroll-arrow-back;
+-webkit-appearance: tab-scroll-arrow-back; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTabScrollArrowBack",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>tab-scroll-arrow-forward</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTabScrollArrowForward">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: tab-scroll-arrow-forward;
+-webkit-appearance: tab-scroll-arrow-forward; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTabScrollArrowForward",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>textarea</code></td>
+   <td>
+    <div class="hidden" id="sampleTextArea">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: textarea; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTextArea",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>textfield</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTextField">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: textfield;
+-webkit-appearance: textfield; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTextField",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>textfield-multiline</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTextfieldMultiline">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: textfield-multiline;
+-webkit-appearance: textfield-multiline; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTextfieldMultiline",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Utiliser <code>textarea</code> à la place de cette valeur.</td>
+  </tr>
+  <tr>
+   <td><code>toolbar</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleToolbar">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: toolbar;
+-webkit-appearance: toolbar; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleToolbar",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>toolbarbutton</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleToolbarButton">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: toolbarbutton;
+-webkit-appearance: toolbarbutton; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleToolbarButton",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>toolbarbutton-dropdown</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleToolbarButtonDropdown">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: toolbarbutton-dropdown;
+-webkit-appearance: toolbarbutton-dropdown; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleToolbarButtonDropdown",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>toolbargripper</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleToolbarGripper">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: toolbargripper;
+-webkit-appearance: toolbargripper; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleToolbarGripper",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>toolbox</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleToolbox">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: toolbox;
+-webkit-appearance: toolbox; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleToolbox",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>tooltip</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTooltip">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: tooltip;
+-webkit-appearance: tooltip; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTooltip",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>treeheader</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTreeHeader">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: treeheader;
+-webkit-appearance: treeheader; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTreeHeader",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>treeheadercell</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTreeHeaderCell">
+    <pre class="brush: css">
+div { color: black; height:20px;
+-moz-appearance: treeheadercell;
+-webkit-appearance: treeheadercell; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTreeHeaderCell",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>treeheadersortarrow</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTreeHeaderSortArrow">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: treeheadersortarrow;
+-webkit-appearance: treeheadersortarrow; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTreeHeaderSortArrow",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>treeitem</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTreeItem">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: treeitem;
+-webkit-appearance: treeitem; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTreeItem",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>treeline</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTreeLine">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: treeline;
+-webkit-appearance: treeline; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTreeLine",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>treetwisty</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTreeTwisty">
+    <pre class="brush: css">
+div { color: transparent;
+-moz-appearance: treetwisty;
+-webkit-appearance: treetwisty; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTreeTwisty",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>treetwistyopen</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTreeTwistyOpen">
+    <pre class="brush: css">
+div { color: transparent;
+-moz-appearance: treetwistyopen;
+-webkit-appearance: treetwistyopen; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTreeTwistyOpen",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>treeview</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTreeView">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: treeview;
+-webkit-appearance: treeview; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTreeView",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>relevancy-level-indicator</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-relevancy-level-indicator">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: relevancy-level-indicator;
+-webkit-appearance: relevancy-level-indicator; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-relevancy-level-indicator",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>-moz-win-borderless-glass</code> {{Non-standard_Inline}}{{Gecko_MinVersion_Inline("2.0")}}</td>
+   <td>
+    <div class="hidden" id="sampleWinBorderlessGlass">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-win-borderless-glass; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWinBorderlessGlass",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64. Ce style applique l'effet Aero Glass sans bordure sur l'élément.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-win-browsertabbar-toolbox</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWinBrowsertabbarToolbox">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-win-browsertabbar-toolbox; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWinBrowsertabbarToolbox",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64. Ce style de boîte à outils est censé être utilisé dans la barre d'onglet du navigateur.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-win-communicationstext</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWinCommunicationstext">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-win-communicationstext; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWinCommunicationstext",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-win-communications-toolbox</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWinCommunicationsToolbox">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-win-communications-toolbox; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWinCommunicationsToolbox",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64. Ce style de boîte à outils devait être utilisé pour les applications relatives aux communications et à la productivit. La couleur de premier plan associée est <code>-moz-win-communicationstext</code>.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-win-exclude-glass</code> {{Non-standard_Inline}}{{Gecko_MinVersion_Inline("6.0")}}</td>
+   <td>
+    <div class="hidden" id="sampleWinExcludeGlass">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-win-exclude-glass; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWinExcludeGlass",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64. Ce style permet d'exclure l'effet Aero Glass sur l'élément.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-win-glass</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWinGlass">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-win-glass; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWinGlass",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64. Ce style permet d'appliquer l'effet Aero Glass sur l'élément.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-win-media-toolbox</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWinMediaToolbox">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-win-media-toolbox; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWinMediaToolbox",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64. Ce style de boîte à outils est destiné aux applications qui gèrent des objets média. La couleur de premier plan correspondante est <code>-moz-win-mediatext</code>.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-button-box</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWindowButtonBox">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-window-button-box; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowButtonBox",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-button-box-maximized</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWindowButtonBoxMaximized">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-window-button-box-maximized; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowButtonBoxMaximized",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-button-close</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWindowButtonClose">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-window-button-close; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowButtonClose",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-button-maximize</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWindowButtonMaximize">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-window-button-maximize; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowButtonMaximize",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-button-minimize</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWindowButtonMinimize">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-window-button-minimize; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowButtonMinimize",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-button-restore</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWindowButtonRestore">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-window-button-restore; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowButtonRestore",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-frame-bottom</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWindowFrameBottom">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-window-frame-bottom; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowFrameBottom",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-frame-left</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWindowFrameLeft">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-window-frame-left; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowFrameLeft",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-frame-right</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWindowFrameRight">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-window-frame-right; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowFrameRight",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-titlebar</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWindowTitlebar">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-window-titlebar; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowTitlebar",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-titlebar-maximized</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWindowTitlebarMaximized">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-window-titlebar-maximized; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowTitlebarMaximized",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>-apple-pay-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleApplePayButton">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: -apple-pay-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleApplePayButton",100,50,"","", "nobutton")}}</td>
+   <td>Safari</td>
+   <td><strong>iOS et macOS uniquement</strong>. Disponible depuis iOS 10.1 et macOS 10.12.1</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>La règle suivante permet que l'élément ait l'apparence d'un bouton d'une barre d'outils :</p>
+
+<pre class="brush: css">.exempleun {
+  appearance: toolbarbutton;
+  -moz-appearance: toolbarbutton;
+  -webkit-appearance: toolbarbutton;
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', "#appearance-switching", "appearance")}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.appearance")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="external" href="https://www.w3.org/TR/2004/CR-css3-ui-20040511/#appearance">Définition de <code>appearance</code> dans la recommandation CSS 3 Basic User Interface</a> (<em>Candidate Recommendation</em> du 11 mai 2004), qui n'est plus à jour</li>
+ <li><a href="https://drafts.csswg.org/css-ui-4/#appearance-switching">Brouillon pour la propriété appearance dans le module CSS Basic UI de niveau 4</a></li>
+ <li><a class="external" href="https://wiki.csswg.org/spec/css4-ui#dropped-css3-features">Les fonctionnalités abandonnées pour la spécification CSS3 sur le module d'interface utilisateur</a></li>
+</ul>
diff --git a/files/fr/web/css/arrière-plans_et_bordures_css/générateur_border-image/index.html b/files/fr/web/css/arrière-plans_et_bordures_css/générateur_border-image/index.html
new file mode 100644
index 0000000000..592f9f64fd
--- /dev/null
+++ b/files/fr/web/css/arrière-plans_et_bordures_css/générateur_border-image/index.html
@@ -0,0 +1,2626 @@
+---
+title: Générateur de border-image
+slug: Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-image
+tags:
+  - CSS
+  - Outil
+translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator
+---
+<p>Cet outil peut être utilisé afin de générer des valeurs pour la propriété {{cssxref("border-image")}}.</p>
+
+<div style="display: none;">
+<h2 id="Border_Image_Generator" name="Border_Image_Generator">Générateur border-image</h2>
+
+<h3 id="Contenu_HTML">Contenu HTML</h3>
+
+<pre class="brush: html">    &lt;div id="container"&gt;
+
+        &lt;div id="gallery"&gt;
+            &lt;div id="image-gallery"&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6007/border-image-1.png" data-stateID="border1"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6009/border-image-2.png" data-stateID="border2"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6011/border-image-3.png" data-stateID="border3"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6013/border-image-4.png" data-stateID="border4"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6015/border-image-5.png" data-stateID="border5"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6017/border-image-6.svg" data-stateID="border6"/&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="load-actions" class="group section"&gt;
+            &lt;div id="toggle-gallery" data-action="hide"&gt; &lt;/div&gt;
+            &lt;div id="load-image" class="button"&gt; Upload image &lt;/div&gt;
+            &lt;input id="remote-url" type="text" placeholder="Charger une image depuis une  URL"/&gt;
+            &lt;div id="load-remote" class="button"&gt; &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="general-controls" class="group section"&gt;
+            &lt;div class="name"&gt; Options &lt;/div&gt;
+            &lt;div class="separator"&gt;&lt;/div&gt;
+            &lt;div class="property"&gt;
+                &lt;div class="name"&gt;Échelle&lt;/div&gt;
+                &lt;div class="ui-input-slider" data-topic="scale"
+                    data-unit="%" data-max="300" data-sensivity="10"&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div class="separator"&gt;&lt;/div&gt;
+            &lt;div class="property"&gt;
+                &lt;div class="name"&gt;Déplaçable&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='drag-subject'&gt;&lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div class="property right"&gt;
+                &lt;div class="name"&gt;Hauteur de la section&lt;/div&gt;
+                &lt;div class="ui-input-slider" data-topic="preview-area-height"
+                    data-min="400" data-max="1000"&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="preview_section" class="group section"&gt;
+            &lt;div id="subject"&gt;
+                &lt;div class="guideline" data-axis="Y" data-topic="slice-top"&gt;&lt;/div&gt;
+                &lt;div class="guideline" data-axis="X" data-topic="slice-right"&gt;&lt;/div&gt;
+                &lt;div class="guideline" data-axis="Y" data-topic="slice-bottom"&gt;&lt;/div&gt;
+                &lt;div class="guideline" data-axis="X" data-topic="slice-left"&gt;&lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div id="preview"&gt; &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;!-- controls --&gt;
+        &lt;div id="controls" class="group section"&gt;
+
+            &lt;!-- border-image-slice --&gt;
+            &lt;div id="border-slice-control" class="category"&gt;
+                &lt;div class="title"&gt; border-image-slice &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="name"&gt;fill&lt;/div&gt;
+                    &lt;div class="ui-checkbox" data-topic='slice-fill'&gt;&lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;!-- border-image-width --&gt;
+            &lt;div id="border-width-control" class="category"&gt;
+                &lt;div class="title"&gt; border-image-width &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;!-- border-image-outset --&gt;
+            &lt;div id="border-outset-control" class="category"&gt;
+                &lt;div class="title"&gt; border-image-outset &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;!-- other-settings --&gt;
+            &lt;div id="aditional-properties" class="category"&gt;
+                &lt;div class="title"&gt; Autres propriétés &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="name"&gt; repeat-x &lt;/div&gt;
+                    &lt;div class="ui-dropdown border-repeat" data-topic="image-repeat-X" data-selected="2"&gt;
+                        &lt;div data-value="0"&gt;repeat&lt;/div&gt;
+                        &lt;div data-value="0"&gt;stretch&lt;/div&gt;
+                        &lt;div data-value="0"&gt;round&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="name"&gt; repeat-y &lt;/div&gt;
+                    &lt;div class="ui-dropdown border-repeat" data-topic="image-repeat-Y" data-selected="2"&gt;
+                        &lt;div data-value="1"&gt;repeat&lt;/div&gt;
+                        &lt;div data-value="1"&gt;stretch&lt;/div&gt;
+                        &lt;div data-value="1"&gt;round&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="ui-input-slider" data-topic="font-size" data-info="em size"
+                        data-unit="px" data-value="12" data-sensivity="3"&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+
+                &lt;div class="property"&gt;
+                    &lt;div class="ui-input-slider" data-topic="preview-width" data-info="width"
+                         data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"&gt;&lt;/div&gt;
+                &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="ui-input-slider" data-topic="preview-height" data-info="height"
+                        data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+
+            &lt;div id="output" class="category"&gt;
+                &lt;div class="title"&gt; Code CSS &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-slice: &lt;/span&gt;
+                    &lt;span id="out-border-slice" class="value"&gt; &lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-width: &lt;/span&gt;
+                    &lt;span id="out-border-width" class="value"&gt; &lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-outset: &lt;/span&gt;
+                    &lt;span id="out-border-outset" class="value"&gt; &lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-repeat: &lt;/span&gt;
+                    &lt;span id="out-border-repeat" class="value"&gt; &lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-source: &lt;/span&gt;
+                    &lt;span id="out-border-source" class="value"&gt;  &lt;/span&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+        &lt;/div&gt;
+    &lt;/div&gt;</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">/*  GRID OF TWELVE
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider {
+	height: 20px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider &gt; input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * UI DropDown
+ */
+
+/* Dropdown */
+
+.ui-dropdown {
+	height: 2em;
+	width: 120px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	font-size: 12px;
+
+	background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png");
+	background-position: right center;
+	background-repeat: no-repeat;
+	background-color: #359740;
+
+	position: relative;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-dropdown:hover {
+	cursor: pointer;
+	background-color: #208B20;
+}
+
+/* Dropdown Select Button */
+
+.ui-dropdown-select {
+	height: inherit;
+	padding: 0 0.75em;
+	color: #FFF;
+	line-height: 2em;
+}
+
+/* Dropdown List */
+
+.ui-dropdown-list {
+	width: 100%;
+	height: 150px;
+	max-height: 150px;
+	margin: 0;
+	padding: 0 0.3em;
+
+	border: 3px solid #3490D2;
+	border-color: #208B20;
+	background: #666;
+	background-color: #EEF1F5;
+	color: #000;
+
+	position: absolute;
+	top: 2em;
+	left: 0;
+	z-index: 100;
+
+	overflow: hidden;
+	transition: all 0.3s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list:hover {
+	overflow: auto;
+}
+
+.ui-dropdown-list[data-hidden='true'] {
+	height: 0 !important;
+	opacity: 0;
+	visibility: hidden;
+}
+
+.ui-dropdown[data-position='left'] .ui-dropdown-list {
+	left: -100%;
+	top: 0;
+}
+
+.ui-dropdown[data-position='right'] .ui-dropdown-list {
+	left: 100%;
+	top: 0;
+}
+
+.ui-dropdown-list &gt; div {
+	width: 100%;
+	height: 1.6em;
+	margin: 0.3em 0;
+	padding: 0.3em;
+	line-height: 1em;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list &gt; div:hover {
+	background: #3490D2;
+	color:#FFF;
+	border-radius: 2px;
+	cursor: pointer;
+}
+
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * UI Button
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox &gt; input {
+ 	display: none;
+}
+
+.ui-checkbox &gt; label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 2px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox &gt; label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox &gt; input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * BORDER IMAGE GENERATOR TOOL
+ */
+
+body {
+	width: 100%;
+	margin: 0 auto;
+	padding: 0 0 20px 0;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	/*background: url("https://mdn.mozillademos.org/files/6025/grain.png");*/
+	border: 1px solid #EEE;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+body[data-move='X'] {
+	cursor: w-resize !important;
+}
+
+body[data-move='Y'] {
+	cursor: s-resize !important;
+}
+
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+[data-draggable='true']:hover {
+	cursor: move;
+}
+
+[data-draggable='true']:hover &gt; * {
+	cursor: default;
+}
+
+
+
+/******************************************************************************/
+/******************************************************************************/
+
+/*
+ * Border Image Picker
+ */
+
+#gallery {
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#image-gallery {
+	width: 600px;
+	height: 100px;
+	margin: 0 auto;
+	transition: margin 0.4s;
+}
+
+#image-gallery .image {
+	height: 80px;
+	float: left;
+	margin: 10px;
+	opacity: 0.5;
+	background-color: #FFF;
+	box-shadow: 0px 0px 3px 1px #BABABA;
+}
+
+#image-gallery .image[selected="true"] {
+	box-shadow: 0px 0px 3px 1px #3BBA52;
+	opacity: 1;
+}
+
+#image-gallery .image:hover {
+	cursor: pointer;
+	box-shadow: 0px 0px 3px 1px #30ACE5;
+	opacity: 1;
+}
+
+#image-gallery[data-collapsed='true'] {
+	margin-top: -100px;
+}
+
+/* Load Menu */
+
+#load-actions {
+	margin: 10px 0;
+}
+
+#toggle-gallery {
+	width: 30px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+	background-repeat: no-repeat;
+	background-position: top 4px center;
+	background-color: #888888 !important;
+
+	border-radius: 2px;
+	float: left;
+}
+
+#toggle-gallery:hover {
+	cursor: pointer;
+}
+
+#toggle-gallery[data-action='show'] {
+	background-image: url('https://mdn.mozillademos.org/files/6001/arrow-down-white.png');
+	background-color: #888888 !important;
+}
+
+#toggle-gallery[data-action='hide'] {
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+}
+
+.button {
+	width: 100px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+	text-align: center;
+	font-size: 12px;
+	line-height: 25px;
+	background-color: #379B4A;
+	border-radius: 2px;
+	float: left;
+}
+
+.button:hover {
+	cursor: pointer;
+	background-color: #3380C4;
+}
+
+#load-image {
+	float: left;
+}
+
+#load-remote {
+	width: 30px;
+	background-image: url('https://mdn.mozillademos.org/files/6003/arrow-right-white.png');
+	background-repeat: no-repeat;
+	background-position: center center;
+}
+
+#remote-url {
+	width: 200px;
+	height: 23px;
+	margin: 10px;
+	padding: 0 5px;
+	border: 1px solid #379B4A;
+	border-radius: 2px;
+	float: left;
+
+	transition: width 0.5s;
+}
+
+#remote-url:focus {
+	box-shadow: 0px 0px 3px -1px #379B4A; /*#68ACE8; */
+	border-color: rgba(55, 155, 74, 0.5);
+	width: 450px;
+}
+
+/*
+ * Visible Area
+ */
+
+#preview_section {
+	position: relative;
+	min-height: 400px;
+}
+
+/* Image Control */
+
+#subject {
+	width: 300px;
+	height: 300px;
+	background-repeat: no-repeat;
+	background-size: 100%;
+	background-color: #FFF;
+	border: 1px solid #CCC;
+
+	position: absolute;
+	z-index: 10;
+	top: 15%;
+	left: 10%;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition-property: width, height;
+	transition-duration: 0.1s;
+}
+
+#subject .guideline {
+	background-color: rgba(255, 255, 255, 0.7);
+	border: 1px solid rgba(0, 0, 0, 0.3);
+	position: absolute;
+}
+
+#subject .guideline:hover {
+	background-color: #F00;
+}
+
+#subject .guideline[data-active] {
+	background-color: #F00;
+	z-index: 10;
+}
+
+#subject .guideline[data-axis='X'] {
+	width: 1px;
+	height: 100%;
+	top: -1px;
+}
+
+#subject .guideline[data-axis='Y'] {
+	width: 100%;
+	height: 1px;
+	left: -1px;
+}
+
+#subject .guideline[data-axis='X']:hover {
+	cursor: w-resize;
+}
+
+#subject .guideline[data-axis='Y']:hover {
+	cursor: s-resize;
+}
+
+
+#subject .relative {
+	position: relative;
+	font-size: 12px;
+}
+
+#subject .tooltip, #subject .tooltip2 {
+	width: 40px;
+	height: 20px;
+	line-height: 20px;
+	font-size: 12px;
+	text-align: center;
+
+	position: absolute;
+	opacity: 0.5;
+	transition: opacity 0.25s;
+}
+
+#subject .tooltip {
+	background: #EEE;
+	border-radius: 2px;
+	border: 1px solid #CCC;
+}
+
+#subject .tooltip2{
+	color: #555;
+}
+
+#subject [data-active] &gt; * {
+	opacity: 1;
+}
+
+#subject .tooltip[data-info='top'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip[data-info='right'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+#subject .tooltip[data-info='bottom'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip[data-info='left'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='top'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip2[data-info='right'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='bottom'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip2[data-info='left'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+/* Preview */
+
+#preview {
+	width: 30%;
+	height: 50%;
+	background-color: #FFF;
+	text-align: center;
+	overflow: hidden;
+	position: absolute;
+	z-index: 10;
+
+	left: 60%;
+	top: 15%;
+
+	border-radius: 2px;
+	border-image-width: 20px;
+	border-image-repeat: round;
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#preview .resize-handle {
+	width: 10px;
+	height: 10px;
+	background: url("https://mdn.mozillademos.org/files/6027/resize.png") center center no-repeat;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+#preview .resize-handle:hover {
+	cursor: nw-resize;
+}
+
+
+/*
+ * General controls MENU
+ */
+
+#general-controls {
+	padding: 10px 30px;
+	background-color: #FFF;
+	opacity: 0.95;
+	color: #888;
+	/*border-radius: 2px;*/
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#general-controls .property {
+	width: 130px;
+	float: left;
+}
+
+#general-controls .name {
+	height: 20px;
+	margin: 0 10px 0 0;
+	line-height: 100%;
+	text-align: right;
+	float: left;
+}
+
+#general-controls .right {
+	width: 200px;
+	float: right;
+}
+
+#general-controls .ui-checkbox label {
+	height: 10px;
+}
+
+#general-controls .separator {
+	height: 40px;
+	width: 1px;
+	margin: -10px 15px;
+	background-color: #EEE;
+	float: left;
+}
+
+/*
+ * Controls
+ */
+
+#controls {
+	color: #444;
+	margin: 10px 0 0 0;
+}
+
+#controls .category {
+	height: 190px;
+	min-width: 260px;
+	margin: 10px;
+	padding: 10px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	float: left;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+@media (min-width: 880px) {
+	#controls .category {
+		width: 30%;
+		margin-left: 1.66%;
+		margin-right: 1.66%;
+	}
+}
+
+@media (max-width: 879px) {
+	#controls .category {
+		width: 37%;
+		margin-left: 6.5%;
+		margin-right: 6.5%;
+	}
+}
+
+#controls .category .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#controls .category:hover .title {
+	color: #777;
+}
+
+#controls .category &gt; .group {
+	border: 1px solid #CCC;
+	border-radius: 2px;
+}
+
+
+/* property */
+
+#controls .property {
+	width: 250px;
+	height: 20px;
+	margin: 5px auto;
+}
+
+#controls .property .ui-input-slider {
+	margin: 0;
+	float: left;
+}
+
+#controls .property .ui-input-slider-info {
+	width: 60px;
+}
+
+#controls .property .ui-input-slider-left {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .ui-input-slider-right {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .name {
+	width: 60px;
+	height: 20px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	line-height: 100%;
+	float: left;
+}
+
+#controls .property .config {
+	width: 20px;
+	height: 20px;
+	float: left;
+	background: url("https://mdn.mozillademos.org/files/6021/config.png") center center no-repeat;
+	opacity: 0.5;
+}
+
+#controls .property .config:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-right {
+    opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-left {
+    opacity: 1;
+}
+
+#controls .property .ui-dropdown {
+	margin: 0 10px;
+	float: left;
+}
+
+
+#controls .property .ui-checkbox {
+	margin: 0 0 0 16px;
+	float: left;
+}
+
+#controls .property .ui-checkbox label {
+	height: 0.85em;
+	width: 10px;
+}
+
+/* dropdowns */
+#controls .ui-dropdown {
+	width: 50px;
+	height: 1.7em;
+	border-radius: 2px;
+}
+
+#controls .ui-dropdown-select {
+	line-height: 1.6em;
+}
+
+#controls .ui-dropdown-list {
+	top: 20px;
+}
+
+#controls .ui-dropdown-list {
+	border-width: 1px;
+	text-align: center;
+}
+
+#controls .ui-dropdown-list:hover {
+	overflow: hidden;
+}
+
+#controls .border-repeat {
+	margin: 0 0 0 16px !important;
+	width: 80px;
+}
+
+#controls .border-repeat .ui-dropdown-list {
+	height: 6.2em;
+	border-width: 1px;
+	text-align: center;
+}
+
+/* border-image-slice */
+
+
+#border-slice-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+/* border-image-width */
+
+#border-width-control .ui-dropdown-list {
+	height: 6.2em;
+}
+
+/* border-image-outset */
+
+#border-outset-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+#aditional-properties .property {
+	width: 200px;
+}
+
+#aditional-properties .ui-input-slider &gt; input {
+	width: 80px !important;
+}
+
+/* unit settings panel */
+
+#unit-settings {
+	padding: 10px;
+	position: absolute;
+
+	background: #FFF;
+
+	font-size: 12px;
+	border-radius: 3px;
+	border: 1px solid #CCC;
+	text-align: center;
+	color: #555;
+
+	position: absolute;
+	z-index: 1000;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+}
+
+#unit-settings .title {
+	width: 100%;
+	margin: -5px auto 0;
+
+	color: #666;
+	font-size: 14px;
+	font-weight: bold;
+	line-height: 25px;
+	border-bottom: 1px solid #E5E5E5;
+}
+
+#unit-settings .ui-input-slider {
+	margin: 10px 0 0 0;
+}
+
+#unit-settings .ui-input-slider-info {
+	width: 50px;
+	line-height: 1.5em;
+}
+
+#unit-settings input {
+	font-size: 12px;
+	width: 40px !important;
+}
+
+#unit-settings .close {
+	width: 16px;
+	height: 16px;
+	background: url('https://mdn.mozillademos.org/files/6019/close.png') no-repeat center center;
+	background-size: 75%;
+
+	position: absolute;
+	top: 4px;
+	right: 4px;
+	opacity: 0.5;
+}
+
+#unit-settings .close:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#unit-settings[data-active='true'] {
+	opacity: 1;
+}
+
+#unit-settings[data-active='false'] {
+	opacity: 0;
+	top: -100px !important;
+}
+
+/*
+ * CSS Output Code
+ */
+
+#output {
+	padding: 10px;
+	border: 2px dashed #888 !important;
+	box-shadow: none !important;
+	border-radius: 3px;
+	overflow: hidden;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+}
+
+
+@media (min-width: 880px) {
+	#output {
+		width: 63.33% !important;
+	}
+}
+
+@media (max-width: 879px) {
+	#output {
+		width: 87% !important;
+	}
+}
+
+
+#output .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#output .css-property {
+	width: 100%;
+	margin: 0;
+	color: #555;
+	font-size: 14px;
+	line-height: 18px;
+	float: left;
+}
+
+#output .css-property .name {
+	width: 30%;
+	font-weight: bold;
+	text-align: right;
+	float: left;
+}
+
+#output .css-property .value {
+	width: 65%;
+	padding: 0 2.5%;
+	word-break: break-all;
+	float: left;
+}
+
+</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js">'use strict';
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		input.style.width = 50 + obj.precision * 10 + 'px';
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseFloat(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		return input;
+	};
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+
+			document.addEventListener("mouseup", slideEnd);
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		var slideEnd = function slideEnd(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		};
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		};
+
+		return slider;
+	};
+
+	var InputSlider = function(node) {
+		var min		= parseFloat(node.getAttribute('data-min'));
+		var max		= parseFloat(node.getAttribute('data-max'));
+		var step	= parseFloat(node.getAttribute('data-step'));
+		var value	= parseFloat(node.getAttribute('data-value'));
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+		var precision = node.getAttribute('data-precision') | 0;
+
+		this.min = isNaN(min) ? 0 : min;
+		this.max = isNaN(max) ? 100 : max;
+		this.precision = precision &gt;= 0 ? precision : 0;
+		this.step = step &lt; 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit === null ? '' : unit;
+		this.sensivity = sensivity &gt; 0 ? sensivity : 5;
+		value = isNaN(value) ? this.min : value;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	};
+
+	InputSlider.prototype.setInputValue = function setInputValue() {
+		this.input.value = this.value.toFixed(this.precision) + this.unit;
+	};
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = parseFloat(value.toFixed(slider.precision));
+
+		if (value &gt; slider.max) value = slider.max;
+		if (value &lt; slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		slider.setInputValue();
+
+		if (send_notify === false)
+			return;
+
+		notify.call(slider);
+	};
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	};
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	};
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	};
+
+	var setStep = function setStep(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.step = parseFloat(value);
+		setValue(topic, slider.value);
+	};
+
+	var setPrecision = function setPrecision(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+		slider.precision = value;
+
+		var step = parseFloat(slider.step.toFixed(value));
+		if (step === 0)
+			slider.step = 1 / Math.pow(10, value);
+
+		setValue(topic, slider.value);
+	};
+
+	var setSensivity = function setSensivity(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+
+		slider.sensivity = value &gt; 0 ? value : 5;
+	};
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	};
+
+	var getPrecision =  function getPrecision(topic) {
+		return sliders[topic].precision;
+	};
+
+	var getStep =  function getStep(topic) {
+		return sliders[topic].step;
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.value);
+	};
+
+	var createSlider = function createSlider(topic, label) {
+		var slider = document.createElement('div');
+		slider.className = 'ui-input-slider';
+		slider.setAttribute('data-topic', topic);
+
+		if (label !== undefined)
+			slider.setAttribute('data-info', label);
+
+		new InputSlider(slider);
+		return slider;
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new InputSlider(elem[i]);
+	};
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		setStep : setStep,
+		getNode : getNode,
+		getStep : getStep,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPrecision : setPrecision,
+		setSensivity : setSensivity,
+		getPrecision : getPrecision,
+		createSlider : createSlider,
+	};
+
+})();
+
+
+/**
+ * UI-DropDown Select
+ */
+
+var DropDownManager = (function DropdownManager() {
+
+	var subscribers = {};
+	var dropdowns = [];
+	var active = null;
+
+	var visbility = ["hidden", "visible"];
+
+
+	var DropDown = function DropDown(node) {
+		var topic = node.getAttribute('data-topic');
+		var label = node.getAttribute('data-label');
+		var selected = node.getAttribute('data-selected') | 0;
+
+		var select = document.createElement('div');
+		var list = document.createElement('div');
+		var uval = 0;
+		var option = null;
+		var option_value = null;
+
+		list.className = 'ui-dropdown-list';
+		select.className = 'ui-dropdown-select';
+
+		while (node.firstElementChild !== null) {
+			option = node.firstElementChild;
+			option_value = option.getAttribute('data-value');
+
+			if (option_value === null)
+				option.setAttribute('data-value', uval);
+
+			list.appendChild(node.firstElementChild);
+			uval++;
+		}
+
+		node.appendChild(select);
+		node.appendChild(list);
+
+		select.onclick = this.toggle.bind(this);
+		list.onclick = this.updateValue.bind(this);
+		document.addEventListener('click', clickOut);
+
+		this.state = 0;
+		this.time = 0;
+		this.dropmenu = list;
+		this.select = select;
+		this.toggle(false);
+		this.value = {};
+		this.topic = topic;
+
+		if (label)
+			select.textContent = label;
+		else
+			this.setNodeValue(list.children[selected]);
+
+		dropdowns[topic] = this;
+
+	};
+
+	DropDown.prototype.toggle = function toggle(state) {
+		if (typeof(state) === 'boolean')
+			this.state = state === false ? 0 : 1;
+		else
+			this.state = 1 ^ this.state;
+
+		if (active !== this) {
+			if (active)
+				active.toggle(false);
+			active = this;
+		}
+
+		if (this.state === 0)
+			this.dropmenu.setAttribute('data-hidden', 'true');
+		else
+			this.dropmenu.removeAttribute('data-hidden');
+
+	};
+
+	var clickOut = function clickOut(e) {
+		if (active.state === 0 ||
+			e.target === active.dropmenu ||
+			e.target === active.select)
+			return;
+
+		active.toggle(false);
+	};
+
+	DropDown.prototype.updateValue = function updateValue(e) {
+
+		if (Date.now() - this.time &lt; 500)
+			return;
+
+		if (e.target.className !== "ui-dropdown-list") {
+			this.setNodeValue(e.target);
+			this.toggle(false);
+		}
+
+		this.time = Date.now();
+	};
+
+	DropDown.prototype.setNodeValue = function setNodeValue(node) {
+		this.value['name'] = node.textContent;
+		this.value['value'] = node.getAttribute('data-value');
+
+		this.select.textContent = node.textContent;
+		this.select.setAttribute('data-value', this.value['value']);
+
+		notify.call(this);
+	};
+
+	var createDropDown = function createDropDown(topic, options) {
+
+		var dropdown = document.createElement('div');
+		dropdown.setAttribute('data-topic', topic);
+		dropdown.className = 'ui-dropdown';
+
+		for (var i in options) {
+			var x = document.createElement('div');
+			x.setAttribute('data-value', i);
+			x.textContent = options[i];
+			dropdown.appendChild(x);
+		}
+
+		new DropDown(dropdown);
+
+		return dropdown;
+	};
+
+	var setValue = function setValue(topic, index) {
+		if (dropdowns[topic] === undefined ||
+			index &gt;= dropdowns[topic].dropmenu.children.length)
+			return;
+
+		dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index]);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		var index = subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	};
+
+	var init = function init() {
+		var elem, size;
+
+		elem = document.querySelectorAll('.ui-dropdown');
+		size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new DropDown(elem[i]);
+
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		createDropDown : createDropDown
+	};
+
+})();
+
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	};
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	};
+
+	var setValue = function setValue(topic, value) {
+		var obj = buttons[topic];
+		if (obj === undefined)
+			return;
+
+		obj.checkbox.checked = value;
+		notify.call(obj);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new CheckBox(elem[i]);
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	};
+
+})();
+
+window.addEventListener("load", function() {
+	BorderImage.init();
+});
+
+var BorderImage = (function BorderImage() {
+
+	var getElemById = document.getElementById.bind(document);
+
+	var subject;
+	var preview;
+	var guidelines = [];
+	var positions = ['top', 'right', 'bottom', 'left'];
+
+	var makeDraggable = function makeDraggable(elem) {
+
+		var offsetTop;
+		var offsetLeft;
+
+		elem.setAttribute('data-draggable', 'true');
+
+		var dragStart = function dragStart(e) {
+			if (e.target.getAttribute('data-draggable') !== 'true' ||
+				e.target !== elem || e.button !== 0)
+				return;
+
+			offsetLeft = e.clientX - elem.offsetLeft;
+			offsetTop = e.clientY - elem.offsetTop;
+
+			document.addEventListener('mousemove', mouseDrag);
+			document.addEventListener('mouseup', dragEnd);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			document.removeEventListener('mouseup', dragEnd);
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+
+			elem.style.left = e.clientX - offsetLeft + 'px';
+			elem.style.top = e.clientY - offsetTop + 'px';
+		};
+
+		elem.addEventListener('mousedown', dragStart, false);
+	};
+
+	var PreviewControl = function PreviewControl() {
+
+		var dragging = false;
+		var valueX = null;
+		var valueY = null;
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			valueX = e.clientX - preview.clientWidth;
+			valueY = e.clientY - preview.clientHeight;
+			dragging = true;
+
+			document.addEventListener('mousemove', mouseDrag);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0 || dragging === false)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			dragging = false;
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+			InputSliderManager.setValue('preview-width', e.clientX - valueX);
+			InputSliderManager.setValue('preview-height', e.clientY - valueY);
+		};
+
+		var init = function init() {
+
+			makeDraggable(preview);
+			makeDraggable(subject);
+
+			var handle = document.createElement('div');
+			handle.className = 'resize-handle';
+
+			handle.addEventListener('mousedown', dragStart);
+			document.addEventListener('mouseup', dragEnd);
+
+			preview.appendChild(handle);
+
+		};
+
+		return {
+			init: init
+		};
+
+	}();
+
+	var ImageReader = (function ImageReader() {
+
+		var fReader = new FileReader();
+		var browse = document.createElement('input');
+
+		var loadImage = function loadImage(e) {
+			if (browse.files.length === 0)
+				return;
+
+			var file = browse.files[0];
+
+			if (file.type.slice(0, 5) !== 'image')
+				return;
+
+			fReader.readAsDataURL(file);
+
+			return false;
+		};
+
+		fReader.onload = function(e) {
+			ImageControl.loadRemoteImage(e.target.result);
+		};
+
+		var load = function load() {
+			browse.click();
+		};
+
+		browse.setAttribute('type', 'file');
+		browse.style.display = 'none';
+		browse.onchange = loadImage;
+
+		return {
+			load: load
+		};
+
+	})();
+
+	var ImageControl = (function ImageControl() {
+
+		var scale = 0.5;
+		var imgSource = new Image();
+		var imgState = null;
+		var selected = null;
+
+
+		var topics = ['slice', 'width', 'outset'];
+		var properties = {};
+		properties['border1'] = {
+			fill			: false,
+
+			slice_values	: [27, 27, 27, 27],
+			width_values	: [20, 20, 20, 20],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [1, 1],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border2'] = {
+			fill			: false,
+
+			slice_values	: [33, 33, 33, 33],
+			width_values	: [1.5, 1.5, 1.5, 1.5],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [1, 1, 1, 1],
+			width_units		: [2, 2, 2, 2],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border3'] = {
+			fill			: true,
+
+			slice_values	: [15, 15, 15, 15],
+			width_values	: [10, 10, 10, 10],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border4'] = {
+			fill			: false,
+
+			slice_values	: [13, 13, 13, 13],
+			width_values	: [13, 13, 13, 13],
+			outset_values	: [13, 13, 13, 13],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border5'] = {
+			fill			: false,
+
+			slice_values	: [0, 12, 0, 12],
+			width_values	: [0, 12, 0, 12],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400,
+		};
+
+		properties['border6'] = {
+			fill			: false,
+
+			slice_values	: [42, 42, 42, 42],
+			width_values	: [42, 42, 42, 42],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [350, 350],
+			preview_area	: 500,
+		};
+
+
+		var loadLocalImage = function loadLocalImage(source) {
+			var location = "images/" + source;
+			imgSource.src = location;
+		};
+
+		var loadRemoteImage = function loadRemoteImage(source) {
+			imgSource.src = source;
+			if (selected)
+				selected.removeAttribute('selected');
+			Tool.setOutputCSS('source', 'url("' + source + '")');
+		};
+
+		var pickImage = function pickImage(e) {
+			if (e.target.className === 'image') {
+				selected = e.target;
+				selected.setAttribute('selected', 'true');
+				loadRemoteImage(e.target.src);
+				imgState = e.target.getAttribute('data-stateID');
+			}
+		};
+
+		var loadImageState = function loadImageState(stateID) {
+			if (properties[stateID] === undefined)
+				return;
+
+			var prop = properties[stateID];
+			var topic;
+			var unit_array;
+			var value_array;
+
+			for (var i in topics) {
+				for (var j=0; j&lt;4; j++) {
+					topic = topics[i] + '-' + positions[j];
+					unit_array = topics[i] + '_units';
+					value_array = topics[i] + '_values';
+					InputSliderManager.setValue(topic, prop[value_array][j]);
+					DropDownManager.setValue(topic, prop[unit_array][j]);
+				}
+			}
+
+			ButtonManager.setValue('slice-fill', prop['fill']);
+			DropDownManager.setValue('image-repeat-X', prop['repeat'][0]);
+			DropDownManager.setValue('image-repeat-Y', prop['repeat'][1]);
+			InputSliderManager.setValue('preview-width', prop['size'][0]);
+			InputSliderManager.setValue('preview-height', prop['size'][1]);
+			InputSliderManager.setValue('preview-area-height', prop['preview_area']);
+		};
+
+		var update = function update() {
+			scale =  Math.min(300, (30000 / this.width) | 0);
+			setScale(scale);
+			InputSliderManager.setValue('scale', scale, false);
+
+			subject.style.backgroundImage = 'url("' + this.src + '")';
+			preview.style.borderImageSource = 'url("' + this.src + '")';
+
+			guidelines['slice-top'].setMax(this.height);
+			guidelines['slice-right'].setMax(this.width);
+			guidelines['slice-bottom'].setMax(this.height);
+			guidelines['slice-left'].setMax(this.width);
+
+			if (imgState)
+				loadImageState(imgState);
+		};
+
+		var setScale = function setScale(value) {
+			scale = value;
+			var w = imgSource.width * scale / 100 | 0;
+			var h = imgSource.height * scale / 100 | 0;
+			subject.style.width = w + 'px';
+			subject.style.height = h + 'px';
+
+			for (var i = 0; i &lt; positions.length; i++)
+				guidelines['slice-' + positions[i]].updateGuidelinePos();
+		};
+
+		var getScale = function getScale() {
+			return scale/100;
+		};
+
+		var toggleGallery = function toggleGallery() {
+			var gallery = getElemById('image-gallery');
+			var button  = getElemById('toggle-gallery');
+			var state = 1;
+			button.addEventListener('click', function() {
+				state = 1 ^ state;
+				if (state === 0) {
+					gallery.setAttribute('data-collapsed', 'true');
+					button.setAttribute('data-action', 'show');
+				}
+				else {
+					gallery.removeAttribute('data-collapsed');
+					button.setAttribute('data-action', 'hide');
+				}
+			});
+		};
+
+		var init = function init() {
+			var gallery = getElemById('image-gallery');
+			var browse = getElemById('load-image');
+			var remote = getElemById('remote-url');
+			var load_remote = getElemById('load-remote');
+
+			remote.addEventListener('change', function(){
+				loadRemoteImage(this.value);
+			});
+
+			load_remote.addEventListener('click', function(){
+				loadRemoteImage(remote.value);
+			});
+
+			browse.addEventListener('click', ImageReader.load);
+			gallery.addEventListener('click', pickImage);
+			imgSource.addEventListener('load', update);
+
+			InputSliderManager.subscribe('scale', setScale);
+			InputSliderManager.setValue('scale', scale);
+			imgState = 'border1';
+			loadRemoteImage('https://mdn.mozillademos.org/files/6007/border-image-1.png');
+			toggleGallery();
+		};
+
+		return {
+			init: init,
+			getScale : getScale,
+			loadRemoteImage: loadRemoteImage
+		};
+
+	})();
+
+	var GuideLine = function GuideLine(node) {
+		var topic = node.getAttribute('data-topic');
+		var axis = node.getAttribute('data-axis');
+
+		this.node = node;
+		this.topic = topic;
+		this.axis = axis;
+		this.info = topic.split('-')[1];
+
+		this.position = 0;
+		this.value = 0;
+		this.unit = 0;
+		this.max = 0;
+		this.pos = positions.indexOf(this.info);
+
+		guidelines[topic] = this;
+
+		var relative_container = document.createElement('div');
+		var tooltip = document.createElement('div');
+		var tooltip2 = document.createElement('div');
+
+		tooltip.className = 'tooltip';
+		tooltip.setAttribute('data-info', this.info);
+
+		tooltip2.className = 'tooltip2';
+		tooltip2.textContent = this.info;
+		tooltip2.setAttribute('data-info', this.info);
+
+		this.tooltip = tooltip;
+
+		relative_container.appendChild(tooltip);
+		relative_container.appendChild(tooltip2);
+		node.appendChild(relative_container);
+
+		var startX = 0;
+		var startY = 0;
+		var start = 0;
+
+		var startDrag = function startDrag(e) {
+			startX = e.clientX;
+			startY = e.clientY;
+			start = guidelines[topic].position;
+			document.body.setAttribute('data-move', axis);
+			relative_container.setAttribute('data-active', '');
+			node.setAttribute('data-active', '');
+
+			document.addEventListener('mousemove', updateGuideline);
+			document.addEventListener('mouseup', endDrag);
+		};
+
+		var endDrag = function endDrag() {
+			document.body.removeAttribute('data-move');
+			relative_container.removeAttribute('data-active');
+			node.removeAttribute('data-active');
+
+			document.removeEventListener('mousemove', updateGuideline);
+		};
+
+		var updateGuideline = function updateGuideline(e) {
+			var value;
+			if (topic === 'slice-top')
+				value = e.clientY - startY + start;
+
+			if (topic === 'slice-right')
+				value = startX - e.clientX + start;
+
+			if (topic === 'slice-bottom')
+				value = startY - e.clientY + start;
+
+			if (topic === 'slice-left')
+				value = e.clientX - startX + start;
+
+			if (this.unit === 0)
+				InputSliderManager.setValue(topic, value * 1 / ImageControl.getScale() | 0);
+			else {
+				InputSliderManager.setValue(topic, (value * 100 / (this.max * ImageControl.getScale())) | 0);
+			}
+
+		}.bind(this);
+
+		node.addEventListener("mousedown", startDrag);
+
+		InputSliderManager.subscribe(topic, this.setPosition.bind(this));
+		InputSliderManager.setValue(topic, this.position);
+	};
+
+
+	GuideLine.prototype.updateGuidelinePos = function updateGuidelinePos() {
+		if (this.unit === 0)
+			this.position = this.value * ImageControl.getScale() | 0;
+		else
+			this.position = this.value * this.max * ImageControl.getScale() / 100 | 0;
+
+		this.node.style[this.info] = this.position + 'px';
+	};
+
+	GuideLine.prototype.setPosition = function setPosition(value) {
+		this.value = value;
+		this.tooltip.textContent = value;
+		this.updateGuidelinePos();
+		Tool.setBorderSlice(this.pos, value);
+	};
+
+	GuideLine.prototype.setMax = function setMax(max) {
+		this.max = max;
+		this.updateLimit();
+	};
+
+	GuideLine.prototype.updateLimit = function updateLimit() {
+		if (this.unit === 1)
+			InputSliderManager.setMax(this.topic, 100);
+		else
+			InputSliderManager.setMax(this.topic, this.max);
+	};
+
+	GuideLine.prototype.setUnit = function setUnit(type) {
+		if (type === '%')	this.unit = 1;
+		if (type === '')	this.unit = 0;
+		this.updateLimit();
+	};
+
+	/*
+	 * Unit panel
+	 */
+	var UnitPanel = (function UnitPanel () {
+
+		var panel;
+		var title;
+		var precision;
+		var step;
+		var unit_topic = null; // settings are made for this topic
+		var step_option = [1, 0.1, 0.01];
+
+		var updatePrecision = function updatePrecision(value) {
+			InputSliderManager.setPrecision('unit-step', value);
+			InputSliderManager.setStep('unit-step', step_option[value]);
+			InputSliderManager.setMin('unit-step', step_option[value]);
+
+			if (unit_topic)
+				InputSliderManager.setPrecision(unit_topic, value);
+		};
+
+		var updateUnitSettings = function updateUnitSettings(value) {
+			if (unit_topic)
+				InputSliderManager.setStep(unit_topic, value);
+		};
+
+		var show = function show(e) {
+			var topic = e.target.getAttribute('data-topic');
+			var precision = InputSliderManager.getPrecision(topic);
+			var step = InputSliderManager.getStep(topic);
+
+			unit_topic = topic;
+			title.textContent = topic;
+
+			panel.setAttribute('data-active', 'true');
+			panel.style.top = e.target.offsetTop - 40 + 'px';
+			panel.style.left = e.target.offsetLeft + 30 + 'px';
+
+			InputSliderManager.setValue('unit-precision', precision);
+			InputSliderManager.setValue('unit-step', step);
+		};
+
+		var init = function init() {
+			panel = document.createElement('div');
+			title = document.createElement('div');
+			var close = document.createElement('div');
+
+			step = InputSliderManager.createSlider('unit-step', 'step');
+			precision = InputSliderManager.createSlider('unit-precision', 'precision');
+
+			InputSliderManager.setStep('unit-precision', 1);
+			InputSliderManager.setMax('unit-precision', 2);
+			InputSliderManager.setValue('unit-precision', 2);
+			InputSliderManager.setSensivity('unit-precision', 20);
+
+			InputSliderManager.setValue('unit-step', 1);
+			InputSliderManager.setStep('unit-step', 0.01);
+			InputSliderManager.setPrecision('unit-step', 2);
+
+			InputSliderManager.subscribe('unit-precision', updatePrecision);
+			InputSliderManager.subscribe('unit-step', updateUnitSettings);
+
+			close.addEventListener('click', function () {
+				panel.setAttribute('data-active', 'false');
+			});
+
+			title.textContent = 'Properties';
+			title.className = 'title';
+			close.className = 'close';
+			panel.id = 'unit-settings';
+			panel.setAttribute('data-active', 'false');
+			panel.appendChild(title);
+			panel.appendChild(precision);
+			panel.appendChild(step);
+			panel.appendChild(close);
+			document.body.appendChild(panel);
+		};
+
+		return {
+			init : init,
+			show : show
+		};
+
+	})();
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+		var preview_area;
+		var dropdown_unit_options = [
+			{ '' : '--', '%' : '%'},
+			{ 'px' : 'px', '%' : '%', 'em' : 'em'},
+			{ 'px' : 'px', 'em' : 'em'},
+		];
+
+		var border_slice = [];
+		var border_width = [];
+		var border_outset = [];
+
+		var border_slice_values = [];
+		var border_width_values = [];
+		var border_outset_values = [];
+
+		var border_slice_units = ['', '', '', ''];
+		var border_width_units = ['px', 'px', 'px', 'px'];
+		var border_outset_units = ['px', 'px', 'px', 'px'];
+
+		var border_fill = false;
+		var border_repeat = ['round', 'round'];
+		var CSS_code = {
+			'source' : null,
+			'slice' : null,
+			'width' : null,
+			'outset' : null,
+			'repeat' : null
+		};
+
+		var setBorderSlice = function setBorderSlice(positionID, value) {
+			border_slice[positionID] = value + border_slice_units[positionID];
+			updateBorderSlice();
+		};
+
+		var updateBorderSlice = function updateBorderSlice() {
+			var value = border_slice.join(' ');
+			if (border_fill === true)
+				value += ' fill';
+
+			preview.style.borderImageSlice = value;
+			setOutputCSS('slice', value);
+		};
+
+		var setBorderFill = function setBorderFill(value) {
+			border_fill = value;
+			var bimgslice = border_slice.join(' ');;
+			if (value === true)
+				bimgslice += ' fill';
+
+			preview.style.borderImageSlice = bimgslice;
+		};
+
+		var updateBorderWidth = function updateBorderWidth() {
+			var value = border_width.join(' ');
+			preview.style.borderImageWidth = value;
+			setOutputCSS('width', value);
+		};
+
+		var updateBorderOutset = function updateBorderOutset() {
+			var value = border_outset.join(' ');
+			preview.style.borderImageOutset = border_outset.join(' ');
+			setOutputCSS('outset', value);
+		};
+
+		var setBorderRepeat = function setBorderRepeat(obj) {
+			border_repeat[obj.value] = obj.name;
+			var value = border_repeat.join(' ');
+			preview.style.borderImageRepeat = value;
+			setOutputCSS('repeat', value);
+		};
+
+		var setOutputCSS = function setOutputCSS(topic, value) {
+			CSS_code[topic].textContent = value + ';';
+		};
+
+		var setPreviewFontSize = function setPreviewFontSize(value) {
+			preview.style.fontSize = value + 'px';
+		};
+
+		var setPreviewWidth = function setPreviewWidth(value) {
+			preview.style.width = value + 'px';
+		};
+
+		var setPreviewHeight = function setPreviewHeight(value) {
+			preview.style.height = value + 'px';
+		};
+
+		var setPreviewAreaHeight = function setPreviewAreaHeight(value) {
+			preview_area.style.height = value + 'px';
+		};
+
+		var updateDragOption = function updateDragOption(value) {
+			if (value === true)
+				subject.setAttribute('data-draggable', 'true');
+			else
+				subject.removeAttribute('data-draggable');
+		};
+
+		var createProperty = function createProperty(topic, labelID, optionsID) {
+
+			var slider = InputSliderManager.createSlider(topic, positions[labelID]);
+			var dropdown = DropDownManager.createDropDown(topic, dropdown_unit_options[optionsID]);
+
+			InputSliderManager.setSensivity(topic, 3);
+			InputSliderManager.setPrecision(topic, 1);
+
+			var property = document.createElement('div');
+			var config = document.createElement('div');
+
+			property.className = 'property';
+			config.className = 'config';
+			config.setAttribute('data-topic', topic);
+			config.addEventListener('click', UnitPanel.show);
+
+			property.appendChild(slider);
+			property.appendChild(dropdown);
+			property.appendChild(config);
+
+			return property;
+		};
+
+		var initBorderSliceControls = function initBorderSliceControls() {
+			var container = getElemById('border-slice-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_slice_values[id] = value;
+					border_slice[id] = value + border_slice_units[id];
+					updateBorderSlice();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					guidelines[topic].setUnit(obj.value);
+					border_slice_units[id] = obj.value;
+					border_slice[id] = border_slice_values[id] + obj.value;
+					updateBorderSlice();
+				});
+			};
+
+			for (var i = 0; i &lt; positions.length; i++) {
+				var topic = 'slice-' + positions[i];
+				var property = createProperty(topic, i, 0);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+
+			container.appendChild(container.children[1]);
+
+		};
+
+		var initBorderWidthControls = function initBorderWidthControls() {
+			var container = getElemById('border-width-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_width_values[id] = value;
+					border_width[id] = value + border_width_units[id];
+					updateBorderWidth();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					if (obj.value === '%')
+						InputSliderManager.setMax(topic, 100);
+					else
+						InputSliderManager.setMax(topic, 1000);
+
+					border_width_units[id] = obj.value;
+					border_width[id] = border_width_values[id] + obj.value;
+					updateBorderWidth();
+				});
+			};
+
+			for (var i = 0; i &lt; positions.length; i++) {
+				var topic = 'width-' + positions[i];
+				var property = createProperty(topic, i, 1);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var initBorderOutsetControls = function initBorderOutsetControls() {
+
+			var container = getElemById('border-outset-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_outset_values[id] = value;
+					border_outset[id] = value + border_outset_units[id];
+					updateBorderOutset();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					border_outset_units[id] = obj.value;
+					border_outset[id] = border_outset_values[id] + obj.value;
+					updateBorderOutset();
+				});
+			};
+
+			for (var i = 0; i &lt; positions.length; i++) {
+				var topic = 'outset-' + positions[i];
+				var property = createProperty(topic, i, 2);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var init = function init() {
+
+			var gallery =
+			subject = getElemById('subject');
+			preview = getElemById("preview");
+			preview_area = getElemById("preview_section");
+
+
+			CSS_code['source'] = getElemById("out-border-source");
+			CSS_code['slice'] = getElemById("out-border-slice");
+			CSS_code['width'] = getElemById("out-border-width");
+			CSS_code['outset'] = getElemById("out-border-outset");
+			CSS_code['repeat'] = getElemById("out-border-repeat");
+
+			initBorderSliceControls();
+			initBorderWidthControls();
+			initBorderOutsetControls();
+
+			var elem = document.querySelectorAll('.guideline');
+			var size = elem.length;
+			for (var i = 0; i &lt; size; i++)
+				new GuideLine(elem[i]);
+
+			PreviewControl.init();
+
+			ButtonManager.subscribe('slice-fill',setBorderFill);
+			ButtonManager.subscribe('drag-subject', updateDragOption);
+			ButtonManager.setValue('drag-subject', false);
+
+			DropDownManager.subscribe('image-repeat-X', setBorderRepeat);
+			DropDownManager.subscribe('image-repeat-Y', setBorderRepeat);
+
+			InputSliderManager.subscribe('preview-area-height', setPreviewAreaHeight);
+			InputSliderManager.subscribe('preview-width', setPreviewWidth);
+			InputSliderManager.subscribe('preview-height', setPreviewHeight);
+			InputSliderManager.subscribe('font-size', setPreviewFontSize);
+			InputSliderManager.setValue('preview-width', 300);
+			InputSliderManager.setValue('preview-height', 200);
+		};
+
+		return {
+			init: init,
+			setOutputCSS: setOutputCSS,
+			setBorderSlice: setBorderSlice
+		};
+
+	})();
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		InputSliderManager.init();
+		DropDownManager.init();
+		ButtonManager.init();
+		UnitPanel.init();
+		Tool.init();
+		ImageControl.init();
+	};
+
+	return {
+		init : init
+	};
+
+})();
+
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('Border_Image_Generator', '100%', '1270px')}}</p>
diff --git a/files/fr/web/css/arrière-plans_et_bordures_css/générateur_border-radius/index.html b/files/fr/web/css/arrière-plans_et_bordures_css/générateur_border-radius/index.html
new file mode 100644
index 0000000000..344dd64bcc
--- /dev/null
+++ b/files/fr/web/css/arrière-plans_et_bordures_css/générateur_border-radius/index.html
@@ -0,0 +1,1600 @@
+---
+title: Générateur de border-radius
+slug: Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-radius
+tags:
+  - CSS
+  - Outil
+translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator
+---
+<p>Cet outil peut être utilisé afin de générer du code pour la propriété {{cssxref("border-radius")}}.</p>
+
+<div style="display: none;">
+<h2 id="border-radius-generator" name="border-radius-generator">border-radius</h2>
+
+<h3 id="Contenu_HTML">Contenu HTML</h3>
+
+<pre class="brush: html">&lt;div id="container"&gt;
+    &lt;div class="group section"&gt;
+        &lt;div id="preview" class="col span_12"&gt;
+            &lt;div id="subject"&gt;
+                &lt;div id="top-left" class="radius-container"
+                    data-X="left" data-Y="top"&gt;
+                &lt;/div&gt;
+                &lt;div id="top-right" class="radius-container"
+                    data-X="right" data-Y="top"&gt;
+                &lt;/div&gt;
+                &lt;div id="bottom-right" class="radius-container"
+                    data-X="right" data-Y="bottom"&gt;
+                &lt;/div&gt;
+                &lt;div id="bottom-left" class="radius-container"
+                    data-X="left" data-Y="bottom"&gt;
+                &lt;/div&gt;
+
+                &lt;div id="radius-ui-sliders"&gt;
+                    &lt;div id="tlr" class="ui-input-slider" data-topic="top-left"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="tlw" class="ui-input-slider" data-topic="top-left-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="tlh" class="ui-input-slider" data-topic="top-left-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="trr" class="ui-input-slider" data-topic="top-right"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="trw" class="ui-input-slider" data-topic="top-right-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="trh" class="ui-input-slider" data-topic="top-right-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="brr" class="ui-input-slider" data-topic="bottom-right"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="brw" class="ui-input-slider" data-topic="bottom-right-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="brh" class="ui-input-slider" data-topic="bottom-right-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="blr" class="ui-input-slider" data-topic="bottom-left"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="blw" class="ui-input-slider" data-topic="bottom-left-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="blh" class="ui-input-slider" data-topic="bottom-left-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div id="controls" class="group section"&gt;
+
+        &lt;div class="group section"&gt;
+            &lt;div id="dimensions"&gt;
+                &lt;div class="ui-input-slider" data-topic="width" data-info="width"
+                     data-unit=" px" data-min="150" data-max="700" data-sensivity="1"&gt;&lt;/div&gt;
+
+                &lt;div class="ui-input-slider" data-topic="height" data-info="height"
+                    data-unit=" px" data-min="75" data-max="350" data-sensivity="1"&gt;&lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="output"&gt;&lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div class="group section"&gt;
+            &lt;div id="radius-lock"&gt;
+                &lt;div class="info"&gt; Coins arrondis &lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='top-left'&gt;&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='top-right'&gt;&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='bottom-right'&gt;&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='bottom-left'&gt;&lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="unit-selection"&gt;
+                &lt;div class="info"&gt; Unités pour la bordure &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+    &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Contenu_CSS">Contenu CSS</h3>
+
+<pre class="brush: css">/*  GRID OF TEN
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider-container {
+	height: 20px;
+	margin: 10px 0;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider-container * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider &gt; input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*
+ * UI Component
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox &gt; input {
+ 	display: none;
+}
+
+.ui-checkbox &gt; label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 3px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox &gt; label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox &gt; input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+body {
+	max-width: 1000px;
+	margin: 0 auto;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/******************************************************************************/
+/******************************************************************************/
+/*
+ * Preview Area
+ */
+
+#preview {
+	height: 500px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+	overflow: hidden;
+	position: relative;
+}
+
+#preview .content {
+	width: 100%;
+	height: 100%;
+	display: block;
+}
+
+#preview input {
+	color: #333;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+}
+
+#subject {
+	width: 400px;
+	height: 150px;
+	margin: 0 auto;
+	border: 3px solid #C60;
+	background: #FFF;
+	position: relative;
+}
+
+.radius {
+	width: 50%;
+	height: 50%;
+	border: 1px solid #CCC;
+	display: none;
+	position: absolute;
+	z-index: 1;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.handle {
+	width: 16px;
+	height: 16px;
+	position: absolute;
+	z-index: 2;
+}
+
+.handle-top-left {
+	top: -12px;
+	left: -12px;
+	cursor: se-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top left no-repeat;
+}
+
+.handle-top-right {
+	top: -12px;
+	right: -12px;
+	cursor: sw-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top right no-repeat;
+}
+
+.handle-bottom-right {
+	bottom: -12px;
+	right: -12px;
+	cursor: nw-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom right no-repeat;
+}
+
+.handle-bottom-left {
+	bottom: -12px;
+	left: -12px;
+	cursor: ne-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom left no-repeat;
+}
+
+
+.radius-container {
+	position: absolute;
+	display : block;
+	z-index: 1;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/* TOP LEFT */
+#top-left {
+	top: 0;
+	left: 0;
+}
+
+#top-left .radius {
+	border-top-left-radius: 100%;
+	top: 0;
+	left: 0;
+}
+
+/* TOP RIGHT */
+#top-right {
+	top: 0;
+	right: 0;
+}
+
+#top-right .radius {
+	border-top-right-radius: 100%;
+	top: 0;
+	right: 0;
+}
+
+/* BOTTOM RIGHT */
+#bottom-right {
+	bottom: 0;
+	right: 0;
+}
+
+#bottom-right .radius {
+	border-bottom-right-radius: 100%;
+	bottom: 0;
+	right: 0;
+}
+
+/* BOTTOM lEFT */
+#bottom-left {
+	bottom: 0;
+	left: 0;
+}
+
+#bottom-left .radius {
+	border-bottom-left-radius: 100%;
+	bottom: 0;
+}
+
+/* INPUT SLIDERS */
+
+#preview .ui-input-slider {
+	margin: 10px;
+	position: absolute;
+	z-index: 10;
+}
+
+#radius-ui-sliders {
+	width: 100%;
+	height: 100%;
+	min-height: 75px;
+	min-width: 150px;
+	padding: 20px 50px;
+	top: -20px;
+	left: -50px;
+	position: relative;
+}
+
+#tlr {
+	top: -30px;
+	left: -50px;
+	display: none;
+}
+
+#tlw {
+	top: -30px;
+	left: 30px;
+}
+
+#tlh {
+	top: 20px;
+	left: -50px;
+}
+
+#trr {
+	top: -30px;
+	right: -50px;
+	display: none;
+}
+
+#trw {
+	top: -30px;
+	right: 30px;
+}
+
+#trh {
+	top: 20px;
+	right: -50px;
+}
+
+#brr {
+	bottom: -30px;
+	right: -50px;
+	display: none;
+}
+
+#brw {
+	bottom: -30px;
+	right: 30px;
+}
+
+#brh {
+	bottom: 20px;
+	right: -50px;
+}
+
+#blr {
+	bottom: -30px;
+	left: -50px;
+	display: none;
+}
+
+#blw {
+	bottom: -30px;
+	left: 30px;
+}
+
+#blh {
+	bottom: 20px;
+	left: -50px;
+}
+
+#preview .ui-input-slider-left, #preview .ui-input-slider-right {
+	visibility: hidden;
+}
+
+#preview .ui-input-slider-container:hover .ui-input-slider-left {
+	visibility: visible;
+}
+
+#preview .ui-input-slider-container:hover .ui-input-slider-right {
+	visibility: visible;
+}
+
+/*
+ *
+ */
+
+#unit-selection {
+	width: 200px;
+	height: 75px;
+	margin: 30px 30px 0 0;
+	padding: 30px;
+	border: 3px solid #555;
+	border-radius: 10px;
+	position: relative;
+	float: right;
+}
+
+#unit-selection .info {
+	height: 20%;
+	width: 100%;
+	line-height: 20%;
+	font-size: 20px;
+	text-align: center;
+	position: relative;
+	top: 40%;
+}
+
+#unit-selection .dropdown {
+	width: 50px;
+	height: 20px;
+	margin: 10px;
+	padding: 0;
+	border-radius: 3px;
+	position: absolute;
+	overflow: hidden;
+}
+
+#unit-selection select {
+	width: 50px;
+	height: 20px;
+	marign: 0;
+	padding: 0 0 0 10px;
+	background: #555;
+	border: 1px solid #555;
+	border: none;
+	color: #FFF;
+	float: left;
+}
+
+#unit-selection select option {
+	background: #FFF;
+	color: #333;
+}
+
+#unit-selection select:hover {
+	cursor: pointer;
+}
+
+#unit-selection .dropdown:before {
+	content: "";
+	width: 18px;
+	height: 20px;
+	display: block;
+	background-color: #555;
+	background-image: url("https://mdn.mozillademos.org/files/5675/dropdown.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	top: 0px;
+	right: 0px;
+	position: absolute;
+	z-index: 1;
+	pointer-events: none;
+}
+
+#unit-selection .unit-top-left {
+	top: 0;
+	left: 0;
+	display: none;
+}
+
+#unit-selection .unit-top-left-w {
+	top: -22px;
+	left: 30px;
+}
+
+#unit-selection .unit-top-left-h {
+	top: 20px;
+	left: -37px;
+}
+
+#unit-selection .unit-top-right {
+	top: 0;
+	right: 0;
+	display: none;
+}
+
+#unit-selection .unit-top-right-w {
+	top: -22px;
+	right: 30px;
+}
+
+#unit-selection .unit-top-right-h {
+	top: 20px;
+	right: -37px;
+}
+
+#unit-selection .unit-bottom-right {
+	bottom: 0;
+	right: 0;
+	display: none;
+}
+
+#unit-selection .unit-bottom-right-w {
+	bottom: -22px;
+	right: 30px;
+}
+
+#unit-selection .unit-bottom-right-h {
+	bottom: 20px;
+	right: -37px;
+}
+
+#unit-selection .unit-bottom-left {
+	bottom: 0;
+	left: 0;
+	display: none;
+}
+
+#unit-selection .unit-bottom-left-w {
+	bottom: -22px;
+	left: 30px;
+}
+
+#unit-selection .unit-bottom-left-h {
+	bottom: 20px;
+	left: -37px;
+}
+
+/******************************************************************************/
+/******************************************************************************/
+
+
+#radius-lock {
+	width: 200px;
+	height: 75px;
+	margin: 30px 0 0 30px;
+	padding: 30px;
+	border: 3px solid #555;
+	border-radius: 10px;
+	position: relative;
+	float: left;
+}
+
+#radius-lock .ui-checkbox {
+	color: #FFF;
+	position: absolute;
+}
+
+#radius-lock .ui-checkbox &gt; label {
+	height: 20px;
+	width: 34px;
+	padding: 0;
+}
+
+#radius-lock .info {
+	height: 20%;
+	width: 100%;
+	line-height: 20%;
+	font-size: 20px;
+	text-align: center;
+	position: relative;
+	top: 40%;
+}
+
+#radius-lock [data-topic="top-left"] {
+	top: 10px;
+	left: 10px;
+}
+
+#radius-lock [data-topic="top-right"] {
+	top: 10px;
+	right: 10px;
+}
+
+#radius-lock [data-topic="bottom-right"] {
+	bottom: 10px;
+	right: 10px;
+}
+
+#radius-lock [data-topic="bottom-left"] {
+	bottom: 10px;
+	left: 10px;
+}
+
+/**
+ * Controls
+ */
+
+#dimensions {
+	width: 200px;
+	color: #444;
+	float:left;
+}
+
+#dimensions input {
+	background: #555;
+	color: #FFF;
+	border: none;
+	border-radius: 3px;
+}
+
+#output {
+	width: 500px;
+	padding: 10px 0;
+	margin: 10px 0;
+	color: #555;
+	text-align: center;
+	border: 1px dashed #999;
+	border-radius: 3px;
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+
+	float: right;
+}
+
+
+</pre>
+
+<h3 id="Contenu_JavaScript">Contenu JavaScript</h3>
+
+<pre class="brush: js"><code class="language-js">'use strict';
+
+
+/**
+ * UI-InputSliderManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseInt(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		subscribe(obj.topic, function(value) {
+			input.value = value + obj.unit;
+		});
+
+		return input;
+	}
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		document.addEventListener("mouseup", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		});
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		}
+
+		return slider;
+	}
+
+	var InputSlider = function(node) {
+		var min		= node.getAttribute('data-min') | 0;
+		var max		= node.getAttribute('data-max') | 0;
+		var step	= node.getAttribute('data-step') | 0;
+		var value	= node.getAttribute('data-value') | 0;
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+
+		this.min = min;
+		this.max = max &gt; 0 ? max : 100;
+		this.step = step === 0 ? 1 : step;
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit;
+		this.sensivity = sensivity &gt; 0 ? sensivity : 5;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+		node.className = 'ui-input-slider ui-input-slider-container';
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	}
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		if (value &gt; slider.max) value = slider.max;
+		if (value &lt; slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		if (send_notify !== undefined &amp;&amp; send_notify === false) {
+			slider.input.value = value + slider.unit;
+			return;
+		}
+
+		notify.call(slider);
+	}
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	}
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	}
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	}
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	}
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new InputSlider(elem[i]);
+	}
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		getNode : getNode,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	}
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	}
+
+	var setValue = function setValue(topic, value) {
+		try {
+			buttons[topic].checkbox.checked = value;
+		}
+		catch(error) {
+			console.log(error);
+		}
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	}
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new CheckBox(elem[i]);
+	}
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+
+window.addEventListener("load", function() {
+	BorderRadius.init();
+});
+
+var BorderRadius = (function BorderRadius() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	/**
+	 * Shadow dragging
+	 */
+	var PreviewMouseTracking = (function Drag() {
+		var active = false;
+		var lastX = 0;
+		var lastY = 0;
+		var subscribers = [];
+
+		var init = function init(id) {
+			var elem = getElemById(id);
+			elem.addEventListener('mousedown', dragStart, false);
+			document.addEventListener('mouseup', dragEnd, false);
+		}
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			active = true;
+			lastX = e.clientX;
+			lastY = e.clientY;
+			document.addEventListener('mousemove', mouseDrag, false);
+		}
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			if (active === true) {
+				active = false;
+				document.removeEventListener('mousemove', mouseDrag, false);
+			}
+		}
+
+		var mouseDrag = function mouseDrag(e) {
+			notify(e.clientX - lastX, e.clientY - lastY);
+			lastX = e.clientX;
+			lastY = e.clientY;
+		}
+
+		var subscribe = function subscribe(callback) {
+			subscribers.push(callback);
+		}
+
+		var unsubscribe = function unsubscribe(callback) {
+			var index = subscribers.indexOf(callback);
+			subscribers.splice(index, 1);
+		}
+
+		var notify = function notify(deltaX, deltaY) {
+			for (var i in subscribers)
+				subscribers[i](deltaX, deltaY);
+		}
+
+		return {
+			init : init,
+			subscribe : subscribe,
+			unsubscribe : unsubscribe
+		}
+
+	})();
+
+	var subject;
+	var units = ['px', '%'];
+	var output = null;
+
+	var UnitSelector = function UnitSelector(topic) {
+
+		this.container = document.createElement("div");
+		this.select = document.createElement("select");
+		for (var i in units) {
+			var option = document.createElement("option");
+			option.value = i;
+			option.textContent = units[i];
+			this.select.appendChild(option);
+		}
+
+		this.container.className = 'dropdown ' + 'unit-' + topic;
+		this.container.appendChild(this.select);
+	}
+
+	UnitSelector.prototype.setValue = function setValue(value) {
+		this.salect.value = value;
+	}
+
+
+	var RadiusContainer = function RadiusContainer(node) {
+		var radius = document.createElement('div');
+		var handle = document.createElement('div');
+		var x = node.getAttribute('data-x');
+		var y = node.getAttribute('data-y');
+		var active = false;
+
+		this.id = node.id;
+		this.node = node;
+		this.radius = radius;
+		this.handle = handle;
+		this.width = 100;
+		this.height = 50;
+		this.size = 0;
+		this.rounded = false;
+
+		this.unitX = 0;
+		this.unitY = 0;
+		this.unitR = 0;
+
+		this.maxW = 100;
+		this.maxH = 100;
+		this.maxR = 100;
+
+		this.topic = y + '-' + x;
+
+		var sliderW = InputSliderManager.getNode(this.topic + '-w');
+		var sliderH = InputSliderManager.getNode(this.topic + '-h');
+		var sliderR = InputSliderManager.getNode(this.topic);
+
+		this.setUnitX(this.unitX);
+		this.setUnitY(this.unitY);
+		this.setUnitR(this.unitR);
+
+		this.updateWidth();
+		this.updateHeight();
+		this.updateRadius();
+
+		if (x === 'left')	this.resizeX =  1;
+		if (x === 'right')	this.resizeX = -1;
+		if (y === 'top')	this.resizeY =  1;
+		if (y === 'bottom')	this.resizeY = -1;
+
+		radius.className = 'radius';
+
+		var unit_selector = document.getElementById("unit-selection");
+		var unitW = new UnitSelector(this.topic + '-w');
+		var unitH = new UnitSelector(this.topic + '-h');
+		var unitR = new UnitSelector(this.topic);
+
+		unit_selector.appendChild(unitW.container);
+		unit_selector.appendChild(unitH.container);
+		unit_selector.appendChild(unitR.container);
+		node.appendChild(radius);
+		subject.appendChild(handle);
+
+		unitW.select.addEventListener('change', function(e) {
+			this.setUnitX(e.target.value | 0);
+		}.bind(this));
+
+		unitH.select.addEventListener('change', function(e) {
+			this.setUnitY(e.target.value | 0);
+		}.bind(this));
+
+		unitR.select.addEventListener('change', function(e) {
+			this.setUnitR(e.target.value | 0);
+		}.bind(this));
+
+		if (x === 'left' &amp;&amp; y == 'top') handle.className = 'handle handle-top-left'
+		if (x === 'right' &amp;&amp; y == 'top') handle.className = 'handle handle-top-right';
+		if (x === 'right' &amp;&amp; y == 'bottom') handle.className = 'handle handle-bottom-right';
+		if (x === 'left' &amp;&amp; y == 'bottom') 	handle.className = 'handle handle-bottom-left';
+
+		handle.addEventListener("mousedown", function(e) {
+			active = true;
+			this.radius.style.display = 'block';
+			PreviewMouseTracking.subscribe(this.updateContainer.bind(this));
+		}.bind(this));
+
+		document.addEventListener("mouseup", function(e) {
+			this.radius.style.display = 'none';
+			if (active === true)
+				PreviewMouseTracking.unsubscribe(this.updateContainer.bind(this));
+		}.bind(this));
+
+		InputSliderManager.subscribe(this.topic + '-w', this.setWidth.bind(this));
+		InputSliderManager.subscribe(this.topic + '-h', this.setHeight.bind(this));
+		InputSliderManager.subscribe(this.topic, this.setRadius.bind(this));
+
+		ButtonManager.subscribe(this.topic, function(value) {
+			this.rounded = value;
+			if (value === true) {
+				unitW.container.style.display = 'none';
+				unitH.container.style.display = 'none';
+				unitR.container.style.display = 'block';
+				sliderW.style.display = 'none';
+				sliderH.style.display = 'none';
+				sliderR.style.display = 'block';
+				this.setUnitR(this.unitR);
+				this.updateRadius();
+			}
+
+			if (value === false) {
+				unitW.container.style.display = 'block';
+				unitH.container.style.display = 'block';
+				unitR.container.style.display = 'none';
+				sliderW.style.display = 'block';
+				sliderH.style.display = 'block';
+				sliderR.style.display = 'none';
+				this.setUnitX(this.unitX);
+				this.setUnitY(this.unitY);
+				this.updateWidth();
+				this.updateHeight();
+			}
+
+			this.updateBorderRadius();
+
+		}.bind(this));
+
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.updateWidth = function updateWidth() {
+		this.node.style.width = this.width + units[this.unitX];
+		var value = Math.round(this.width / 2);
+		InputSliderManager.setValue(this.topic + '-w', value, false);
+	}
+
+	RadiusContainer.prototype.updateHeight = function updateHeight() {
+		this.node.style.height = this.height + units[this.unitY];
+		var value = Math.round(this.height / 2);
+		InputSliderManager.setValue(this.topic + '-h', value, false);
+	}
+
+	RadiusContainer.prototype.updateRadius = function updateRadius() {
+		var value = Math.round(this.size / 2);
+		this.node.style.width = this.size + units[this.unitR];
+		this.node.style.height = this.size + units[this.unitR];
+		InputSliderManager.setValue(this.topic, value, false);
+	}
+
+	RadiusContainer.prototype.setWidth = function setWidth(value) {
+		this.radius.style.display = 'block';
+		this.width = 2 * value;
+		this.node.style.width = this.width + units[this.unitX];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setHeight = function setHeight(value) {
+		this.radius.style.display = 'block';
+		this.height = 2 * value;
+		this.node.style.height = this.height + units[this.unitY];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setRadius = function setRadius(value) {
+		this.radius.style.display = 'block';
+		this.size = 2 * value;
+		this.node.style.width = this.size + units[this.unitR];
+		this.node.style.height = this.size + units[this.unitR];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setUnitX = function setUnitX(value) {
+		this.unitX = value;
+		if (this.unitX === 0) this.maxW = 2 * subject.clientWidth;
+		if (this.unitX === 1) this.maxW = 200;
+		InputSliderManager.setUnit(this.topic + '-w', units[this.unitX]);
+		InputSliderManager.setMax(this.topic + '-w', this.maxW / 2);
+	}
+
+	RadiusContainer.prototype.setUnitY = function setUnitY(value) {
+		this.unitY = value;
+		if (this.unitY === 0) this.maxH = 2 * subject.clientHeight;
+		if (this.unitY === 1) this.maxH = 200;
+		InputSliderManager.setUnit(this.topic + '-h', units[this.unitY]);
+		InputSliderManager.setMax(this.topic + '-h', this.maxH / 2);
+	}
+
+	RadiusContainer.prototype.setUnitR = function setUnitR(value) {
+		this.unitR = value;
+
+		if (this.unitR === 0)
+			this.maxR = 2 * Math.min(subject.clientHeight , subject.clientWidth);
+
+		if (this.unitR === 1)
+			this.maxR = 200;
+
+		InputSliderManager.setUnit(this.topic, units[this.unitR]);
+		InputSliderManager.setMax(this.topic, this.maxR / 2);
+	}
+
+	RadiusContainer.prototype.updateUnits = function updateUnits(unit) {
+		if (this.rounded) {
+			this.setUnitR(this.unitR);
+			return;
+		}
+
+		if (unit === 0)
+			this.setUnitX(this.unitX);
+
+		if (unit === 1)
+			this.setUnitY(this.unitY);
+	}
+
+	RadiusContainer.prototype.composeBorderRadius = function composeBorderRadius () {
+
+		if (this.rounded === true) {
+			var unit = units[this.unitR];
+			var value = Math.round(this.size / 2);
+			return value + unit;
+		}
+
+		var unitX = units[this.unitX];
+		var unitY = units[this.unitY];
+		var valueX = Math.round(this.width / 2);
+		var valueY = Math.round(this.height / 2);
+
+		if (valueX === valueY &amp;&amp; this.unitX === this.unitY)
+			return valueX + unitX;
+
+		return valueX + unitX + ' ' + valueY + unitY;
+	}
+
+	RadiusContainer.prototype.updateBorderRadius = function updateBorderRadius () {
+		var radius = this.composeBorderRadius();
+		var corner = 0;
+
+		if (this.topic === 'top-left') {
+			subject.style.borderTopLeftRadius = radius;
+			corner = 0;
+		}
+
+		if (this.topic === 'top-right') {
+			subject.style.borderTopRightRadius = radius;
+			corner = 1;
+		}
+
+		if (this.topic === 'bottom-right') {
+			subject.style.borderBottomRightRadius = radius;
+			corner = 2;
+		}
+
+		if (this.topic === 'bottom-left') {
+			subject.style.borderBottomLeftRadius = radius;
+			corner = 3;
+		}
+
+		Tool.updateOutput(corner, radius);
+	}
+
+	RadiusContainer.prototype.updateContainer = function updateContainer(deltaX, deltaY) {
+
+		if (this.rounded === true) {
+			this.size += this.resizeX * deltaX + this.resizeY * deltaY;
+			if (this.size &lt; 0)	this.size = 0;
+			if (this.size &gt; this.maxR)	this.size = this.maxR;
+			this.updateRadius();
+			this.updateBorderRadius();
+			return;
+		}
+
+		if (deltaX) {
+			this.width += this.resizeX * deltaX;
+			if (this.width &lt; 0)	this.width = 0;
+			if (this.width &gt; this.maxW)	this.width = this.maxW;
+			this.updateWidth();
+		}
+
+		if (deltaY) {
+			this.height += this.resizeY * deltaY;
+			if (this.height &lt; 0) this.height = 0;
+			if (this.height &gt; this.maxH)	this.height = this.maxH;
+			this.updateHeight();
+		}
+
+		if (deltaX || deltaY)
+			this.updateBorderRadius();
+	}
+
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+		var preview;
+		var preview_ui;
+		var radius_containers = [];
+		var border_width = 3;
+		var borders1 = [null, null, null, null];
+		var borders2 = [0, 0, 0, 0];
+
+		var updateUIWidth = function updateUIWidth(value) {
+			var pwidth = subject.parentElement.clientWidth;
+			var left = (pwidth - value) / 2;
+			subject.style.width = value + "px";
+
+			for (var i = 0; i &lt; 4; i++)
+				radius_containers[i].updateUnits(0);
+		}
+
+		var updateUIHeight = function updateUIHeight(value) {
+			var pheight = subject.parentElement.clientHeight;
+			var top = (pheight - value) / 2;
+			subject.style.height = value + "px";
+			subject.style.top = top - border_width + "px";
+
+			for (var i = 0; i &lt; 4; i++)
+				radius_containers[i].updateUnits(1);
+		}
+
+		var updatePreviewUIWidth = function updatePreviewUIWidth() {
+			var p = subject.parentElement.clientWidth;
+			var v = preview_ui.clientWidth;
+			console.log(p, v, (p - v ) / 2);
+			preview_ui.style.left = (p - v) / 2 + "px" ;
+		}
+
+		var updatePreviewUIHeight = function updatePreviewUIHeight() {
+			var p = subject.parentElement.clientHeight;
+			var v = preview_ui.clientHeight;
+			console.log(p, v, (p - v ) / 2);
+			preview_ui.style.top = (p - v) / 2 + "px" ;
+		}
+
+		var updateOutput = function updateOutput(corner, radius) {
+			var values = radius.split(" ");
+
+			borders1[corner] = values[0];
+			borders2[corner] = values[0];
+
+			if (values.length === 2)
+				borders2[corner] = values[1];
+
+			var border_1_value = borders1.join(" ");
+			var border_2_value = borders2.join(" ");
+			var border_radius = 'border-radius: ' + border_1_value;
+
+			if (border_2_value !== border_1_value)
+				border_radius += ' / ' + border_2_value;
+
+			border_radius += ';';
+			output.textContent = border_radius;
+		}
+
+		var init = function init() {
+			preview = getElemById("preview");
+			subject = getElemById("subject");
+			output = getElemById("output");
+			preview_ui = getElemById("radius-ui-sliders");
+
+			var elem = document.querySelectorAll('.radius-container');
+			var size = elem.length;
+			for (var i = 0; i &lt; size; i++)
+				radius_containers[i] = new RadiusContainer(elem[i]);
+
+			InputSliderManager.subscribe("width", updateUIWidth);
+			InputSliderManager.subscribe("height", updateUIHeight);
+
+			InputSliderManager.setValue("width", subject.clientWidth);
+			InputSliderManager.setValue("height", subject.clientHeight);
+		}
+
+		return {
+			init : init,
+			updateOutput : updateOutput
+		}
+
+	})();
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		ButtonManager.init();
+		InputSliderManager.init();
+		PreviewMouseTracking.init("preview");
+		Tool.init();
+	}
+
+	return {
+		init : init
+	}
+
+})();
+
+
+</code></pre>
+</div>
+
+<p>{{EmbedLiveSample('border-radius-generator', '100%', '800px', '')}}</p>
diff --git a/files/fr/web/css/arrière-plans_et_bordures_css/index.html b/files/fr/web/css/arrière-plans_et_bordures_css/index.html
new file mode 100644
index 0000000000..0b024147af
--- /dev/null
+++ b/files/fr/web/css/arrière-plans_et_bordures_css/index.html
@@ -0,0 +1,161 @@
+---
+title: Arrière-plans et bordures CSS
+slug: Web/CSS/Arrière-plans_et_bordures_CSS
+tags:
+  - CSS
+  - Référence(2)
+translation_of: Web/CSS/CSS_Backgrounds_and_Borders
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>Les arrière-plans et bordures CSS</strong> forment un module CSS qui définit la façon dont les arrière-plans et les bordures des éléments sont décrits. Les bordures peuvent ainsi être des lignes ou des images et les boîtes peuvent avoir un ou plusieurs arrière-plan, des coins arrondis, des ombres.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés_CSS">Propriétés CSS</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("background")}}</li>
+ <li>{{cssxref("background-attachment")}}</li>
+ <li>{{cssxref("background-clip")}}</li>
+ <li>{{cssxref("background-color")}}</li>
+ <li>{{cssxref("background-image")}}</li>
+ <li>{{cssxref("background-origin")}}</li>
+ <li>{{cssxref("background-position")}}</li>
+ <li>{{cssxref("background-repeat")}}</li>
+ <li>{{cssxref("background-size")}}</li>
+ <li>{{cssxref("border")}}</li>
+ <li>{{cssxref("border-bottom")}}</li>
+ <li>{{cssxref("border-bottom-color")}}</li>
+ <li>{{cssxref("border-bottom-left-radius")}}</li>
+ <li>{{cssxref("border-bottom-right-radius")}}</li>
+ <li>{{cssxref("border-bottom-style")}}</li>
+ <li>{{cssxref("border-bottom-width")}}</li>
+ <li>{{cssxref("border-collapse")}}</li>
+ <li>{{cssxref("border-color")}}</li>
+ <li>{{cssxref("border-image")}}</li>
+ <li>{{cssxref("border-image-outset")}}</li>
+ <li>{{cssxref("border-image-repeat")}}</li>
+ <li>{{cssxref("border-image-slice")}}</li>
+ <li>{{cssxref("border-image-source")}}</li>
+ <li>{{cssxref("border-image-width")}}</li>
+ <li>{{cssxref("border-left")}}</li>
+ <li>{{cssxref("border-left-color")}}</li>
+ <li>{{cssxref("border-left-style")}}</li>
+ <li>{{cssxref("border-left-width")}}</li>
+ <li>{{cssxref("border-radius")}}</li>
+ <li>{{cssxref("border-right")}}</li>
+ <li>{{cssxref("border-right-color")}}</li>
+ <li>{{cssxref("border-right-style")}}</li>
+ <li>{{cssxref("border-right-width")}}</li>
+ <li>{{cssxref("border-style")}}</li>
+ <li>{{cssxref("border-top")}}</li>
+ <li>{{cssxref("border-top-color")}}</li>
+ <li>{{cssxref("border-top-left-radius")}}</li>
+ <li>{{cssxref("border-top-right-radius")}}</li>
+ <li>{{cssxref("border-top-style")}}</li>
+ <li>{{cssxref("border-top-width")}}</li>
+ <li>{{cssxref("border-width")}}</li>
+ <li>{{cssxref("box-shadow")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/CSS_Background_and_Borders/Utiliser_des_fonds_multiples">Utiliser plusieurs arrière-plans CSS</a></dt>
+ <dd>Cet article explique comment définir plusieurs arrière-plans sur des éléments et la façon dont ceux-ci interagissent.</dd>
+ <dt><a href="/fr/docs/Web/CSS/CSS_Background_and_Borders/Scaling_background_images">Redimensionner des images d'arrière-plan</a></dt>
+ <dd>Cet article décrit comment modifier l'apparence des images d'arrière-plan en les étirant ou en les retirant afin de couvrir (ou non) tout un élément.</dd>
+</dl>
+
+<h2 id="Outils">Outils</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-image">Générateur de <code>border-image</code></a></dt>
+ <dd>Cet outil interactif permet de créer, de façon visuelle, des bordures avec images pour {{cssxref("border-image")}}.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-radius">Générateur de <code>border-radius</code></a></dt>
+ <dd>Cet outil interactif permet de créer des bordures arrondies pour {{cssxref("border-radius")}}.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Modèle_de_boîte_CSS/Générateur_box-shadow">Générateur de <code>box-shadow</code></a></dt>
+ <dd>Cet outil interactif permet de créer des ombres portées derrière les éléments avec {{cssxref("box-shadow")}}.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>4.0</td>
+   <td>3.5</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9.2")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/css/attr()/index.html b/files/fr/web/css/attr()/index.html
new file mode 100644
index 0000000000..5fcae4a665
--- /dev/null
+++ b/files/fr/web/css/attr()/index.html
@@ -0,0 +1,254 @@
+---
+title: attr()
+slug: Web/CSS/attr()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+translation_of: Web/CSS/attr()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>attr()</code></strong> est utilisée afin de récupérer la valeur d'un attribut d'un élément pour l'utiliser dans la feuille de style. Cette fonction peut également être utilisée sur <a href="/fr/docs/Web/CSS/Pseudo-elements">les pseudo-éléments</a> auquel cas c'est la valeur correspondant à l'élément source qui est renvoyée.</p>
+
+<pre class="brush:css no-line-numbers notranslate">/* Utilisation simple */
+attr(data-count);
+attr(title);
+
+/* Avec un type */
+attr(src url);
+attr(data-count number);
+attr(data-width px);
+
+/* Avec une valeur par défaut */
+attr(data-count number, 0);
+attr(src url, "");
+attr(data-width px, inherit);
+attr(data-something, "default");
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> La fonction <code>attr()</code> peut être utilisée sur n'importe quelle propriété CSS. Toutefois, en dehors de {{cssxref("content")}}, la prise en charge des navigateurs est expérimentale. Voir le tableau de compatibilité en fin d'article.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>attribute-name</code></dt>
+ <dd>Le nom de l'attribut de l'élément HTML ciblé par la déclaration CSS.</dd>
+ <dt><code>&lt;type-or-unit&gt;</code> {{experimental_inline}}</dt>
+ <dd>Un mot-clé indiquant le type de valeur pour l'attribut ou l'unité dans laquelle elle est exprimée. Si la valeur <code>&lt;type-or-unit&gt;</code> est invalide pour l'attribut ciblé, l'expression <code>attr()</code> sera également considérée comme invalide. Si cette valeur est absente, elle vaudra <code>string</code> par défaut. La liste des valeurs valides est :
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col">Mot-clé</th>
+    <th scope="col">Type associé</th>
+    <th scope="col">Commentaires</th>
+    <th scope="col">Valeur par défaut</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>string</code></td>
+    <td>{{cssxref("&lt;string&gt;")}}</td>
+    <td>La valeur de l'attribut est traitée comme une chaîne de caractères. Elle n'est pas réanalysée et les caractères sont utilisés tels quels (les échappements CSS ne sont pas transformés).</td>
+    <td>Une chaîne vide.</td>
+   </tr>
+   <tr>
+    <td><code>color</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;color&gt;")}}</td>
+    <td>La valeur de l'attribut est analysée comme un code sur 3 ou 6 chiffres ou comme un mot-clé. Elle doit être une valeur {{cssxref("&lt;string&gt;")}} valide. Les blancs en début et en fin de chaîne sont supprimés.</td>
+    <td><code>currentColor</code></td>
+   </tr>
+   <tr>
+    <td><code>url</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;uri&gt;")}}</td>
+    <td>La valeur de l'attribut est analysée comme une chaîne, utilisée dans une fonction <code>url()</code>.<br>
+     Une URL relative sera résolue par rapport au document original et non par rapport à la feuille de style. Les blancs en début et en fin de chaîne sont supprimés.</td>
+    <td>L'URL <code>about:invalid</code> qui pointe vers un document inexistant.</td>
+   </tr>
+   <tr>
+    <td><code>integer</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;integer&gt;")}}</td>
+    <td>La valeur de l'attribut est analysée comme un entier ({{cssxref("&lt;integer&gt;")}}). Si elle n'est pas valide (si ce n'est pass un entier ou s'il sort de l'intervalle autorisé par la propriété), ce sera la valeur par défaut qui sera utilisée.<br>
+     Les blancs en début et en fin de chaîne sont supprimés.</td>
+    <td><code>0</code>, ou, si <code>0</code> n'est pas valide, la valeur minimale de la propriété.</td>
+   </tr>
+   <tr>
+    <td><code>number</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;number&gt;")}}</td>
+    <td>La valeur de l'attribut est analysée comme un nombre ({{cssxref("&lt;number&gt;")}}). Si elle n'est pas valide (si ce n'est pas un nombre ou que celui-ci sort de l'intervalle autorisé par la propriété), ce sera la valeur par défaut qui sera utilisée.<br>
+     Les blancs en début et en fin de chaîne sont supprimés.</td>
+    <td><code>0</code>, ou, si <code>0</code> n'est pas valide, la valeur minimale de la propriété.</td>
+   </tr>
+   <tr>
+    <td><code>length</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;length&gt;")}}</td>
+    <td>
+     <p>La valeur de l'attribut est analysée comme une longueur ({{cssxref("&lt;length&gt;")}}) et inclut l'unité (par exemple <code>12.5em</code>). Si la valeur n'est pas valide (si ce n'est pas une longueur ou que celle-ci sort de l'intervalle autorisé par la propriété), ce sera la valeur par défaut qui sera utilisée.<br>
+      Si l'unité fournie est une unité relative, <code>attr()</code> calculera la valeur absolue correspondante. Les blancs en début et en fin de chaîne sont supprimés.</p>
+    </td>
+    <td><code>0</code>, ou, si <code>0</code> n'est pas valide, la valeur minimale de la propriété.</td>
+   </tr>
+   <tr>
+    <td><code>em</code>, <code>ex</code>, <code>px</code>, <code>rem</code>, <code>vw</code>, <code>vh</code>, <code>vmin</code>, <code>vmax</code>, <code>mm</code>, <code>cm</code>, <code>in</code>, <code>pt</code>, or <code>pc</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;length&gt;")}}</td>
+    <td>La valeur de l'attribut est analysée comme un nombre ({{cssxref("&lt;number&gt;")}}) (il n'y a pas d'unité) et interprétée comme une longueur ({{cssxref("&lt;length&gt;")}}) grâce à l'unité passée comme argument. Si la valeur n'est pas valide (ce n'est pas un nombre ou celui-ci sort de l'intervalle autorisé par la propriété), ce sera la valeur par défaut qui sera utilisée.<br>
+     Si l'unité indiquée est une unité de longueur relative, <code>attr()</code> calculera la valeur absolue correspondante.<br>
+     Les blancs en début et en fin de chaîne sont supprimés.</td>
+    <td><code>0</code>, ou, si <code>0</code> n'est pas valide, la valeur minimale de la propriété.</td>
+   </tr>
+   <tr>
+    <td><code>angle</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;angle&gt;")}}</td>
+    <td>La valeur de l'attribut est analysée comme un angle ({{cssxref("&lt;angle&gt;")}}) et inclut l'unité (par exemple <code>30.5deg</code>). Si la valeur n'est pas valide (si ce n'est pas un angle ou si la valeur sort de l'intervalle autorisé par la propriété CSS), ce sera la valeur par défaut qui sera utilisée.<br>
+     Les blancs en début et en fin de chaîne sont supprimés.</td>
+    <td><code>0deg</code>, ou, si <code>0deg</code> n'est pas valide, la valeur minimale de la propriété.</td>
+   </tr>
+   <tr>
+    <td><code>deg</code>, <code>grad</code>, <code>rad</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;angle&gt;")}}</td>
+    <td>
+     <p>La valeur de l'attribut est analysée comme un nombre ({{cssxref("&lt;number&gt;")}}) (il n'y a pas d'unité) et est interprétée comme un angle ({{cssxref("&lt;angle&gt;")}}) avec l'unité indiquée en paramètre. Si la vlaeur n'est pas vliade (ce n'est pas un nombre ou celui-ci sort de l'intervalle autorisé par la propriété), ce sera la valeur par défaut qui sera utilisée.<br>
+      Les blancs en début et en fin de chaîne sont supprimés.</p>
+    </td>
+    <td><code>0deg</code>, ou, si <code>0deg</code> n'est pas valide, la valeur minimale de la propriété.</td>
+   </tr>
+   <tr>
+    <td><code>time</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;time&gt;")}}</td>
+    <td>La valeur de l'attribut est analysée comme une durée ({{cssxref("&lt;time&gt;")}}) et inclut l'unité (par exemple <code>30.5ms</code>). Si elle n'est pas valide (la valeur n'est pas une durée ou n'est pas comprise dans l'intervalle autorisée), ce sera la valeur par défaut qui sera utilisée.<br>
+     Les blancs en début et en fin de chaîne sont supprimés.</td>
+    <td><code>0s</code>, ou, si <code>0s</code> n'est pas valide, la valeur minimale de la propriété.</td>
+   </tr>
+   <tr>
+    <td><code>s</code>, <code>ms</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;time&gt;")}}</td>
+    <td>La valeur de l'attribut est analysée comme un nombre ({{cssxref("&lt;number&gt;")}}) sans unité (par exemple <code>12.5</code>) et est interprétée comme une durée ({{cssxref("&lt;time&gt;")}}) grâce à l'unité passée en paramètre. Si la valeur n'est pas valide (ce n'est pas un nombre ou celui-ci n'est pas compris dans l'intervalle autorisé), ce sera la valeur par défaut qui sera utilisée.<br>
+     Les blancs en début et en fin de chaîne sont supprimés.</td>
+    <td><code>0s</code>, ou, si <code>0s</code> n'est pas valide, la valeur minimale de la propriété.</td>
+   </tr>
+   <tr>
+    <td><code>frequency</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;frequency&gt;")}}</td>
+    <td>La valeur de l'attribut est analysée comme une fréquence ({{cssxref("&lt;frequency&gt;")}}) et inclut l'unité (par exemple <code>30.5kHz</code>). Si elle n'est pas valide (ce n'est pas une fréquence ou celle-ci n'est pas comprise dans l'intervalle autorisé), ce sera la valeur par défaut qui sera utilisée. Les blancs en début et en fin de chaîne sont supprimés.</td>
+    <td><code>0Hz</code>, ou, si <code>0Hz</code> n'est pas valide, la valeur minimale de la propriété.</td>
+   </tr>
+   <tr>
+    <td><code>Hz</code>, <code>kHz</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;frequency&gt;")}}</td>
+    <td>La valeur de l'attribut est analysée comme un nombre ({{cssxref("&lt;number&gt;")}}) sans unité (par exemple <code>12.5</code>) et est interprétée comme une fréquence grâce à l'unité indiquée. Si la valeur n'est pas valide (ce n'est pas un nombre ou celui-ci n'est pas compris dans l'intervalle autorisé), ce sera la valeur par défaut qui sera utilisée.<br>
+     Les blancs en début et en fin de chaîne sont supprimés.</td>
+    <td><code>0Hz</code>, ou, si <code>0Hz</code> n'est pas valide, la valeur minimale de la propriété.</td>
+   </tr>
+   <tr>
+    <td><code>%</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;percentage&gt;")}}</td>
+    <td>La valeur de l'attribut est analysée comme un nombre ({{cssxref("&lt;number&gt;")}}) sans unité (par exemple <code>12.5</code>) et est interprétée comme un pourcentage ({{cssxref("&lt;percentage&gt;")}}). Si elle n'est pas valide (ce n'est pas un nombre ou celui-ci n'est pas compris dans l'intervalle autorisé par la propriété), ce sera la valeur par défaut qui sera utilisée.<br>
+     Si la valeur fournie est utilisée comme une longueur, <code>attr()</code> calcule la longueur absolue correspondante.<br>
+     Les blancs en début et en fin de chaîne sont supprimés.</td>
+    <td><code>0%</code>, ou, si <code>0%</code> n'est pas valide, la valeur minimale de la propriété.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt><code>&lt;fallback&gt;</code> {{experimental_inline}}</dt>
+ <dd>La valeur qui sera utilisée si l'attribut est absent ou contient une valeur invalide. La valeur indiquée avec ce paramètre doit être valide et ne doit pas contenir une autre expression <code>attr()</code>. Si <code>attr()</code> n'est pas le seul composant de la valeur d'une propriété, la valeur <code>&lt;fallback&gt;</code> doit correspondre au type défini par <code>&lt;type-or-unit&gt;</code>. Si ce paramètre n'est pas utilisé, le moteur de rendu utilisera la valeur par défaut définie par <code>&lt;type-or-unit&gt;</code>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_la_propriété_content">Utiliser la propriété <code>content</code></h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html; notranslate">&lt;p data-toto="coucou"&gt;world&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css; highlight[2] notranslate">[data-toto]::before {
+  content: attr(data-toto) " ";
+}</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Utiliser_la_propriété_content", "100%", "50")}}</p>
+
+<h3 id="Valeur_&lt;color>">Valeur <code>&lt;color&gt;</code></h3>
+
+<p>{{SeeCompatTable}}</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html; notranslate">&lt;div class="background" data-background="lime"&gt;&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<div class="hidden">
+<pre class="brush: css; notranslate">html,
+body,
+.background {
+  height: 100vh;
+}</pre>
+</div>
+
+<pre class="brush: css; highlight[6] notranslate">.background {
+  background-color: red;
+}
+
+.background[data-background] {
+  background-color: attr(data-background color, red);
+}</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Valeur_&lt;color&gt;", "100%", "50")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Values", "#attr-notation", "attr()")}}</td>
+   <td>{{Spec2("CSS4 Values")}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#attr-notation', 'attr()')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Ajout de deux paramètres optionnels. La fonction peut être utilisée sur toutes les propriétés et renvoyer des valeurs qui ne sont pas des chaînes de caractères. Ces modifications sont expérimentales et pourront être abandonnées pour la recommandation si la prise en charge des navigateurs est trop faible.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'generate.html#x18', 'attr()')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Utilisation limitée à {{cssxref("content")}}, la fonction renvoie toujours une chaîne de caractères ({{cssxref("&lt;string&gt;")}}).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.types.attr")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Sélecteurs_d_attribut">Sélecteur d'attribut</a></li>
+ <li><a href="/fr/docs/Web/HTML/Attributs_universels/data-*">Attributs HTML <code>data-*</code></a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute/data-*">Attributs SVG <code>data-*</code></a></li>
+</ul>
diff --git a/files/fr/web/css/auto/index.html b/files/fr/web/css/auto/index.html
new file mode 100644
index 0000000000..363f2c2b82
--- /dev/null
+++ b/files/fr/web/css/auto/index.html
@@ -0,0 +1,28 @@
+---
+title: auto
+slug: Web/CSS/auto
+tags:
+  - CSS
+  - Référence CSS
+translation_of: Web/CSS/width
+---
+<p>{{ CSSRef() }}</p>
+<h2 id="Résumé">Résumé</h2>
+<p>Indique qu'une valeur est calculée de manière automatique par le navigateur. Les effets de <code>auto</code> sont différents suivant la propriété à laquelle la valeur est affectée.</p>
+<h2 id="Utilisation">Utilisation</h2>
+<ul>
+ <li>{{ Cssxref("overflow") }}</li>
+ <li>{{ Cssxref("overflow-x") }}</li>
+ <li>{{ Cssxref("overflow-y") }}</li>
+ <li>{{ Cssxref("cursor") }}</li>
+ <li>{{ Cssxref("width") }}</li>
+ <li>{{ Cssxref("height") }}</li>
+ <li>{{ Cssxref("marker-offset") }}</li>
+ <li>{{ Cssxref("margin") }}</li>
+ <li>margin-* (left|bottom|top|right|start|end)</li>
+ <li>{{ Cssxref("bottom") }}</li>
+ <li>{{ Cssxref("left") }}</li>
+ <li>{{ Cssxref("table-layout") }}</li>
+ <li>{{ Cssxref("z-index") }}</li>
+ <li>{{ Cssxref("column-width") }}</li>
+</ul>
diff --git a/files/fr/web/css/azimuth/index.html b/files/fr/web/css/azimuth/index.html
new file mode 100644
index 0000000000..c8143dcaac
--- /dev/null
+++ b/files/fr/web/css/azimuth/index.html
@@ -0,0 +1,104 @@
+---
+title: azimuth
+slug: Web/CSS/azimuth
+tags:
+  - CSS
+  - Obsolete
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/azimuth
+---
+<div>{{CSSRef}}{{obsolete_header}}{{outdated}}</div>
+
+<p>Utilisée avec la propriété {{cssxref("elevation")}}, <strong><code>azimuth</code></strong> permet de positionner différentes sources audio dans l'espace pour une présentation auditive. Cela permet de séparer les voix de façons naturelles, qui pourront donc provenir de différents emplacements. Une sortie <em>stereo</em> permettra d'obtenir un son avec des sources situées sur deux dimensions, des écouteurs binauriculaires permettent d'obtenir un son tri-dimensionnel.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt>angle</dt>
+ <dd>Un angle indiquant la position de la source dans l'intervalle <code>-360deg</code> - <code>360deg</code>. La valeur <code>0deg</code> (la valeur par défaut) est dirigée vers le centre, <code>90deg</code> vers la droite, <code>180deg</code> vers l'arrière et <code>270deg</code> ou <code>-90deg</code> vers la gauche.</dd>
+</dl>
+
+<p><img alt="Image:Azimuth.png" src="/@api/deki/files/37/=Azimuth.png"></p>
+
+<h4 id="Mots-clés_pour_cette_propriété">Mots-clés pour cette propriété</h4>
+
+<ul>
+ <li><strong><code>left-side</code></strong> : Synonyme de <code>270deg</code>.</li>
+ <li><strong><code>left-side behind</code></strong> : Synonyme de <code>270deg</code>.</li>
+ <li><strong><code>far-left</code></strong> : Synonyme de <code>300deg</code>.</li>
+ <li><strong><code>far-left behind</code></strong> : Synonyme de <code>240deg</code>.</li>
+ <li><strong><code>left</code></strong> : Synonyme de <code>320deg</code>.</li>
+ <li><strong><code>left behind </code></strong>: Synonyme de <code>220deg</code>.</li>
+ <li><strong><code>center-left</code></strong> : Synonyme de <code>340deg</code>.</li>
+ <li><strong><code>center-left behind</code></strong> : Synonyme de <code>200deg</code>.</li>
+ <li><strong><code>center</code></strong> : Synonyme de <code>0deg</code>.</li>
+ <li><strong><code>center behind </code></strong>: Synonyme de <code>180deg</code>.</li>
+ <li><strong><code>center-right</code></strong> : Synonyme de <code>20deg</code>.</li>
+ <li><strong><code>center-right behind</code></strong> : Synonyme de <code>160deg</code>.</li>
+ <li><strong><code>right</code></strong> : Synonyme de <code>40deg</code>.</li>
+ <li><strong><code>right behind</code></strong> : Synonyme de <code>140deg</code>.</li>
+ <li><strong><code>far-right</code></strong> : Synonyme de <code>60deg</code>.</li>
+ <li><strong><code>far-right behind</code></strong> : Synonyme de <code>120deg</code>.</li>
+ <li><strong><code>right-side</code></strong> : Synonyme de <code>90deg</code>.</li>
+ <li><strong><code>right-side behind</code></strong> : Synonyme de <code>90deg</code>.</li>
+ <li><strong><code>behind</code></strong> : Synonyme de <code>180deg</code>. Also used as a modifier for other positional keyword values, as above.</li>
+ <li><strong><code>leftwards </code></strong>: Moves the sound counter-clockwise by 20 degrees, relative to the current angle.</li>
+ <li><strong><code>rightwards </code></strong>: Moves the sound clockwise by 20 degrees, relative to the current angle.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:css;">h1 {
+  azimuth: 30deg;
+}
+
+td.a {
+  azimuth: far-right;
+}
+
+#12 {
+  azimuth: behind far-right;  /* 120deg */
+}
+
+p.comment {
+  azimuth: behind;  /* 180deg */
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'aural.html#spatial-props', 'azimuth')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.azimuth")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("elevation")}}</li>
+</ul>
diff --git a/files/fr/web/css/backdrop-filter/index.html b/files/fr/web/css/backdrop-filter/index.html
new file mode 100644
index 0000000000..a84b25a18e
--- /dev/null
+++ b/files/fr/web/css/backdrop-filter/index.html
@@ -0,0 +1,138 @@
+---
+title: backdrop-filter
+slug: Web/CSS/backdrop-filter
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/backdrop-filter
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété CSS <code><strong>backdrop-filter</strong></code> permet d'obtenir un effet de flou ou de diffusion de la couleur sur la zone derrière l'élément. L'effet étant situé <em>derrière</em> l'élément, il pourra être observé en ajustant la transparence de l'élément.</p>
+
+<pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */
+backdrop-filter: none;
+
+/* Une valeur d'URL vers un filtre SVG */
+backdrop-filter: url(commonfilters.svg#filter);
+
+/* Les notations fonctionnelles pour les filtres */
+/* Valeur de type &lt;filter-function&gt; */
+backdrop-filter: blur(2px);
+backdrop-filter: brightness(60%);
+backdrop-filter: contrast(40%);
+backdrop-filter: drop-shadow(4px 4px 10px blue);
+backdrop-filter: grayscale(30%);
+backdrop-filter: hue-rotate(120deg);
+backdrop-filter: invert(70%);
+backdrop-filter: opacity(20%);
+backdrop-filter: sepia(90%);
+backdrop-filter: saturate(80%);
+
+/* On enchaîne plusieurs filtres */
+backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);
+
+/* Valeurs globales */
+backdrop-filter: inherit;
+backdrop-filter: initial;
+backdrop-filter: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Un mot-clé qui indique qu'aucun filtre n'est appliqué sur l'ombre portée.</dd>
+ <dt><code>&lt;filter-function-list&gt;</code></dt>
+ <dd>Une liste de fonctions de filtre (cf. {{cssxref("&lt;filter-function&gt;")}}), séparées par des espaces et qui seront appliquées à l'ombre. Les différentes fonctions qui peuvent être utilisées sont les mêmes que pour la propriété {{cssxref("filter")}}. On peut également utilisere <a href="/fr/docs/Web/SVG/Element/filter">un filtre SVG</a>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css language-css">.box {
+  background-color: rgba(255, 255, 255, 0.95);
+  border-radius: 5px;
+  font-family: sans-serif;
+  text-align: center;
+  line-height: 1;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  max-width: 50%;
+  max-height: 50%;
+  padding: 20px 40px;
+}
+
+html, body {
+  height: 100%;
+  width: 100%;
+}
+
+body {
+  background-image: url('https://lorempixel.com/400/200/');
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.container {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+  &lt;div class="box"&gt;
+    &lt;p&gt;backdrop-filter: blur(10px)&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', "600", "400")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Filters 2.0', '#BackdropFilterProperty', 'backdrop-filter')}}</td>
+   <td>{{Spec2('Filters 2.0')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une <em>pull request</em> sur ce dépôt: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("css.properties.backdrop-filter")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("filter")}}</li>
+ <li><a href="https://product.voxmedia.com/til/2015/2/17/8053347/css-ios-transparency-with-webkit-backdrop-filter">Construire des effets de transparences comme sur iOS avec <code>backdrop-filter</code> (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/backface-visibility/index.html b/files/fr/web/css/backface-visibility/index.html
new file mode 100644
index 0000000000..66ebec410a
--- /dev/null
+++ b/files/fr/web/css/backface-visibility/index.html
@@ -0,0 +1,217 @@
+---
+title: backface-visibility
+slug: Web/CSS/backface-visibility
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/backface-visibility
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>backface-visibility</code></strong> indique si la face arrière d'un élément doit être visible lorsqu'elle est orientée vers l'utilisateur. La face arrière d'un élément est un arrière-plan transparent qui, lorsqu'il est visible, permet de voir un reflet symétrique de la face avant de l'élément.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/backface-visibility.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Dans certains cas, on souhaite que la face avant ne soit pas visible par transparence. Par exemple, si on souhaite simuler une carte à jouer qu'on retourne.</p>
+
+<p>Cette propriété n'aura aucun effet tant que les transformations appliquées sont uniquement en 2D car aucun effet de perspective ne sera introduit.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+backface-visibility: visible;
+backface-visibility: hidden;
+
+/* Valeurs globales */
+backface-visibility: inherit;
+backface-visibility: initial;
+backface-visibility: unset;</pre>
+
+<p>La propriété <code>backface-visibility</code> est définie avec l'un des mots-clés suivants.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>visible</code></dt>
+ <dd>Ce mot-clé indique que la face arrière est visible lorsqu'elle est tournée vers l'utilisateur. Cela permet d'obtenir un effet miroir sur la face avant.</dd>
+ <dt><code>hidden</code></dt>
+ <dd>Ce mot-clé indique que la face arrière n'est pas visible. La face avant est donc cachée.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, on dessine un cube avec des faces transparentes.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* Des classes utilitaires pour afficher ou
+   masquer les faces arrières du cube */
+.hidebf div {
+  backface-visibility: hidden;
+}
+
+.showbf div {
+  backface-visibility: visible;
+}
+
+/* On définit les règles pour le conteneur, */
+/* le cube et une face quelconque */
+.container {
+  width: 150px;
+  height: 150px;
+  margin: 75px 0 0 75px;
+  border: none;
+}
+
+.cube {
+  width: 100%;
+  height: 100%;
+  perspective: 550px;
+  perspective-origin: 150% 150%;
+  transform-style: preserve-3d;
+}
+
+.face {
+  display: block;
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  border: none;
+  line-height: 100px;
+  font-family: sans-serif;
+  font-size: 60px;
+  color: white;
+  text-align: center;
+}
+
+/* On définit chacune des faces */
+.front {
+  background: rgba(0, 0, 0, 0.3);
+  transform: translateZ(50px);
+}
+
+.back {
+  background: rgba(0, 255, 0, 1);
+  color: black;
+  transform: rotateY(180deg) translateZ(50px);
+}
+
+.right {
+  background: rgba(196, 0, 0, 0.7);
+  transform: rotateY(90deg) translateZ(50px);
+}
+
+.left {
+  background: rgba(0, 0, 196, 0.7);
+  transform: rotateY(-90deg) translateZ(50px);
+}
+
+.top {
+  background: rgba(196, 196, 0, 0.7);
+  transform: rotateX(90deg) translateZ(50px);
+}
+
+.bottom {
+  background: rgba(196, 0, 196, 0.7);
+  transform: rotateX(-90deg) translateZ(50px);
+}
+
+/* On améliore le rendu du tableau */
+th, p, td {
+  background-color: #EEEEEE;
+  margin: 0px;
+  padding: 6px;
+  font-family: sans-serif;
+  text-align: left;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;th&gt;&lt;code&gt;backface-visibility: visible;&lt;/code&gt;&lt;/th&gt;
+      &lt;th&gt;&lt;code&gt;backface-visibility: hidden;&lt;/code&gt;&lt;/th&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;
+        &lt;div class="container"&gt;
+          &lt;div class="cube showbf"&gt;
+            &lt;div class="face front"&gt;1&lt;/div&gt;
+            &lt;div class="face back"&gt;2&lt;/div&gt;
+            &lt;div class="face right"&gt;3&lt;/div&gt;
+            &lt;div class="face left"&gt;4&lt;/div&gt;
+            &lt;div class="face top"&gt;5&lt;/div&gt;
+            &lt;div class="face bottom"&gt;6&lt;/div&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+        &lt;p&gt;
+          Toutes les faces sont transparentes et les trois
+          faces arrières sont visibles au travers des faces
+          avant.
+        &lt;/p&gt;
+      &lt;/td&gt;
+      &lt;td&gt;
+        &lt;div class="container"&gt;
+          &lt;div class="cube hidebf"&gt;
+            &lt;div class="face front"&gt;1&lt;/div&gt;
+            &lt;div class="face back"&gt;2&lt;/div&gt;
+            &lt;div class="face right"&gt;3&lt;/div&gt;
+            &lt;div class="face left"&gt;4&lt;/div&gt;
+            &lt;div class="face top"&gt;5&lt;/div&gt;
+            &lt;div class="face bottom"&gt;6&lt;/div&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+        &lt;p&gt;
+          Aucune face n'est opaque mais les trois faces arrières
+          sont désormais cachées.
+        &lt;/p&gt;
+      &lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '100%', 360)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Transforms 2', '#propdef-backface-visibility', 'backface-visibility')}}</td>
+   <td>{{Spec2('CSS Transforms 2')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.backface-visibility")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS">Utiliser les transformations CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/background-attachment/index.html b/files/fr/web/css/background-attachment/index.html
new file mode 100644
index 0000000000..05febc28f8
--- /dev/null
+++ b/files/fr/web/css/background-attachment/index.html
@@ -0,0 +1,151 @@
+---
+title: background-attachment
+slug: Web/CSS/background-attachment
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/background-attachment
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>background-attachment</code></strong> définit si la position de l'image d'arrière-plan est fixée dans la zone d'affichage (<em>viewport</em>) ou si celle-ci défile avec le bloc englobant.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/background-attachment.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+background-attachment: scroll;
+background-attachment: fixed;
+background-attachment: local;
+
+/* Valeurs globales */
+background-attachment: inherit;
+background-attachment: initial;
+background-attachment: unset;
+</pre>
+
+<p>La propriété <code>background-attachment</code> est définie avec un des mots-clés de la liste suivante.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>fixed</code></dt>
+ <dd>Ce mot-clé indique que l'arrière-plan est fixe par rapport à la zone d'affichage (<em>viewport</em>). Ainsi, même si l'élément dispose d'outils de défilement, l'arrière-plan ciblé ne se déplacera pas avec l'élément (cette valeur n'est pas compatible avec {{cssxref("background-clip", "background-clip: text", "#text")}}).</dd>
+ <dt><code>local</code></dt>
+ <dd>Ce mot-clé indique que l'arrière-plan se déplace avec le contenu de l'élément associé. Ainsi, si l'élément défile, l'arrière-plan défilera avec. Les zones de positionnement et de dessin de l'arrière-plan sont relatives à la zone de l'élément plutôt qu'au cadre extérieur.</dd>
+ <dt><code>scroll</code></dt>
+ <dd>Ce mot-clé indique que l'arrière-plan est fixé par rapport au contenu de l'élément (il ne défile pas avec) mais est rattaché à la bordure de l'élément.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush:css; highlight:[3];">p {
+  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif");
+  background-attachment: fixed;
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;
+  There were doors all round the hall, but they were all locked; and when
+  Alice had been all the way down one side and up the other, trying every
+  door, she walked sadly down the middle, wondering how she was ever to
+  get out again.
+&lt;/p&gt;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemple_simple")}}</p>
+
+<h3 id="Gestion_de_plusieurs_arrière-plans">Gestion de plusieurs arrière-plans</h3>
+
+<p>On peut utiliser cette propriété lorsqu'on travaille avec plusieurs images en arrière-plan. On peut définir, pour chaque image, un <code>background-attachment</code> spécifique. Pour cela, on utilisera une liste, séparée par des virgules. Les images seront associées dans l'ordre à chaque propriété d'attachement.</p>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush:css; highlight:[3];">p {
+  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"), url("https://mdn.mozillademos.org/files/12059/startransparent.gif");
+  background-attachment: fixed, scroll;
+  background-repeat: no-repeat, repeat-y;
+}</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;
+  There were doors all round the hall, but they were all locked; and when
+  Alice had been all the way down one side and up the other, trying every
+  door, she walked sadly down the middle, wondering how she was ever to
+  get out again.
+
+  Suddenly she came upon a little three-legged table, all made of solid
+  glass; there was nothing on it except a tiny golden key, and Alice's
+  first thought was that it might belong to one of the doors of the hall;
+  but, alas! either the locks were too large, or the key was too small,
+  but at any rate it would not open any of them. However, on the second
+  time round, she came upon a low curtain she had not noticed before, and
+  behind it was a little door about fifteen inches high: she tried the
+  little golden key in the lock, and to her great delight it fitted!
+&lt;/p&gt;</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Gestion_de_plusieurs_arrière-plans")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-background-attachment', 'background-attachment')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>La propriété a été étendue pour gérer plusieurs arrière-plans et la valeur <code>local</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-attachment', 'background-attachment')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Aucune modification significative.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#background-attachment', 'background-attachment')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div class="hidden">Les données de compatibilité présentées sur cette page sont générées à partir de données structurées. Si vous souhaitez contribuer à ces données, vous pouvez soumettre une <em>pull request</em> sur le dépôt <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.background-attachment")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Utiliser_plusieurs_arrière-plans" title="CSS/Multiple backgrounds">Gérer plusieurs arrière-plans</a></li>
+</ul>
diff --git a/files/fr/web/css/background-blend-mode/index.html b/files/fr/web/css/background-blend-mode/index.html
new file mode 100644
index 0000000000..82cdf6bdd0
--- /dev/null
+++ b/files/fr/web/css/background-blend-mode/index.html
@@ -0,0 +1,120 @@
+---
+title: background-blend-mode
+slug: Web/CSS/background-blend-mode
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/background-blend-mode
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>background-blend-mode</code></strong> définit la façon dont les images d'arrière-plan doivent être fusionnées entre elles et avec la couleur d'arrière-plan.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/background-blend-mode.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Les modes de fusions (<em>blending modes</em>) doivent être définis dans le même ordre que les images sont définies avec {{cssxref("background-image")}}. Si la liste des modes de fusion et la liste des images d'arrière-plan ne sont pas de la même longueur, la première liste sera répétée ou tronquée pour que les longueurs soient égales.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Une valeur qui s'applique à toutes les images */
+background-blend-mode: normal;
+
+/* Deux valeurs, chacune pour une image */
+background-blend-mode: darken, luminosity;
+
+/* Valeurs globales */
+background-blend-mode: initial;
+background-blend-mode: inherit;
+background-blend-mode: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;blend-mode&gt;</code></dt>
+ <dd>Une valeur décrivant un mode de fusion (type {{cssxref("&lt;blend-mode&gt;")}}) qui doit être appliqué. On peut avoir plusieurs valeurs et dans ce cas, elles doivent être séparées par des virgules.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre>Syntaxe Formelle: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: screen;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;
+
+&lt;select id="select"&gt;
+    &lt;option&gt;normal&lt;/option&gt;
+    &lt;option&gt;multiply&lt;/option&gt;
+    &lt;option selected&gt;screen&lt;/option&gt;
+    &lt;option&gt;overlay&lt;/option&gt;
+    &lt;option&gt;darken&lt;/option&gt;
+    &lt;option&gt;lighten&lt;/option&gt;
+    &lt;option&gt;color-dodge&lt;/option&gt;
+    &lt;option&gt;color-burn&lt;/option&gt;
+    &lt;option&gt;hard-light&lt;/option&gt;
+    &lt;option&gt;soft-light&lt;/option&gt;
+    &lt;option&gt;difference&lt;/option&gt;
+    &lt;option&gt;exclusion&lt;/option&gt;
+    &lt;option&gt;hue&lt;/option&gt;
+    &lt;option&gt;saturation&lt;/option&gt;
+    &lt;option&gt;color&lt;/option&gt;
+    &lt;option&gt;luminosity&lt;/option&gt;
+&lt;/select&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js ">document.getElementById("select").onchange = function(event) {
+    document.getElementById("div").style.backgroundBlendMode = document.getElementById("select").selectedOptions[0].innerHTML;
+}
+console.log(document.getElementById('div'));</pre>
+
+<p>{{EmbedLiveSample('Exemples', "330", "330")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Compositing', '#background-blend-mode', 'background-blend-mode')}}</td>
+   <td>{{Spec2('Compositing')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.background-blend-mode")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("&lt;blend-mode&gt;")}}</li>
+ <li>{{cssxref("mix-blend-mode")}}</li>
+</ul>
diff --git a/files/fr/web/css/background-clip/index.html b/files/fr/web/css/background-clip/index.html
new file mode 100644
index 0000000000..9b8e6c5426
--- /dev/null
+++ b/files/fr/web/css/background-clip/index.html
@@ -0,0 +1,151 @@
+---
+title: background-clip
+slug: Web/CSS/background-clip
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/background-clip
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>background-clip</code></strong> définit la façon dont l'arrière-plan d'un élément (que ce soit l'image ou la couleur) s'étend sous la boîte de bordure, la boîte de remplissage (<em>padding</em>) ou la boîte de contenu.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/background-clip.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Si aucune image ({{cssxref("background-image")}}) ni couleur ({{cssxref("background-color")}}) d'arrière-plan n'est définie, cette propriété aura uniquement un effet visuel lorsque la bordure possède des régions transparentes (via {{cssxref("border-style")}} ou {{cssxref("border-image")}}). Dans les autres cas, la bordure recouvrira la zone où se situera la différence .</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs utilisant un mot-clé */
+background-clip: border-box;
+background-clip: padding-box;
+background-clip: content-box;
+background-clip: text;
+
+/* Valeurs globales */
+background-clip: inherit;
+background-clip: initial;
+background-clip: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>border-box</code></dt>
+ <dd>L'arrière-plan s'étend jusqu'à la limite externe de la bordure. L'arrière-plan sera situé sous la bordure en termes d'ordre z.</dd>
+ <dt><code>padding-box</code></dt>
+ <dd>Aucun arrière-plan n'est dessiné dans la boîte de bordure. L'arrière-plan s'étend jusqu'à la limite de la boîte de remplissage (<em>padding</em>).</dd>
+ <dt><code>content-box</code></dt>
+ <dd>L'arrière-plan est limité (rogné) à la boîte de contenu.</dd>
+ <dt><code>text</code> {{experimental_inline}}</dt>
+ <dd>L'arrière-plan est limité (rogné) au texte en premier plan.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+ border: 10px navy;
+ border-style: dotted double;
+ margin: 1em;
+ padding: 2em;
+ background: #F8D575;
+ font: 900 1.2em sans-serif;
+ text-decoration: underline;
+}
+
+.border-box {
+  background-clip: border-box;
+}
+
+.padding-box {
+  background-clip: padding-box;
+}
+
+.content-box {
+  background-clip: content-box;
+}
+
+.text {
+  background-clip: text;
+  color: rgba(0,0,0,.2);
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="border-box"&gt;
+  L'arrière-plan s'étend sous la bordure.
+&lt;/p&gt;
+&lt;p class="padding-box"&gt;
+  L'arrière-plan s'étend jusqu'avant la
+  bordure.
+&lt;/p&gt;
+&lt;p class="content-box"&gt;
+  L'arrière-plan s'arrête à la boîte de
+  contenu.
+&lt;/p&gt;
+&lt;p class="text"&gt;
+  L'arrière-plan se limite au texte au
+  premier-plan.
+&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', 600, 580)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-background-clip', 'background-clip')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Backgrounds', '#background-clip', 'background-clip')}}</td>
+   <td>{{Spec2('CSS4 Backgrounds')}}</td>
+   <td>Ajout de la valeur <code>text</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Les données de compatibilité présentées sur cette page ont été générées à partir de données organisées. Ces données sont présentes sur le dépôt GitHub <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, n'hésitez pas à contribuer en proposant vos<em>pull request</em>.</p>
+
+<p>{{Compat("css.properties.background-clip")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("clip-path")}}</li>
+ <li>Les propriétés relatives à l'arrière-plan :
+  <ul>
+   <li>{{cssxref("background")}}</li>
+   <li>{{cssxref("background-color")}}</li>
+   <li>{{cssxref("background-image")}}</li>
+   <li>{{cssxref("background-origin")}}</li>
+  </ul>
+ </li>
+ <li><a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">Le modèle de boîtes CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/background-color/index.html b/files/fr/web/css/background-color/index.html
new file mode 100644
index 0000000000..06f072c36e
--- /dev/null
+++ b/files/fr/web/css/background-color/index.html
@@ -0,0 +1,161 @@
+---
+title: background-color
+slug: Web/CSS/background-color
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/background-color
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>background-color</code></strong> permet de définir la couleur utilisée pour l'arrière-plan d'un élément (celle-ci peut être une couleur transparente).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/background-color.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+background-color: red;
+
+
+/* Valeur hexadécimale */
+background-color: #bbff00;    /* Complètement opaque */
+background-color: #bf0;       /* Complètement opaque - notation raccourcie */
+background-color: #11ffee00;  /* Complètement transparent */
+background-color: #1fe0;      /* Complètement transparent - notation raccourcie */
+background-color: #11ffeeff;  /* Complètement opaque */
+background-color: #1fef;      /* Complètement opaque - notation raccourcie */
+
+/* Valeur RGB */
+background-color: rgb(255, 255, 128);
+
+/* Valeur RGBA : une valeur RGB avec un canal alpha */
+background-color: rgba(117, 190, 218, 0.0); /* 0.0 - transparent */
+background-color: rgba(117, 190, 218, 0.5); /* 0.5 - semi-transparent */
+background-color: rgba(117, 190, 218, 1.0); /* 1.0 - opaque */
+​​​​​​​
+/* Valeur HSLA */
+background-color: hsla(50, 33%, 25%, 0.75);
+
+/* Valeurs avec un mot-clé spécial */
+background-color: currentcolor;
+background-color: transparent;
+
+/* Valeurs globales */
+background-color: inherit;
+background-color: initial;
+background-color: unset;</pre>
+
+<p>La propriété <code>background-color</code> se définit grâce à une valeur de type <code>&lt;color&gt;</code>.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;color&gt;")}} qui indique la couleur uniforme de l'arrière-plan. Même si une ou plusieurs images sont définies grâce à {{cssxref("background-image")}}, la couleur peut avoir un impact en fonction de la transparence des images. De façon générale, c'est une bonne pratique que de définir une couleur malgré la présence d'image pour prévenir aux problèmes de chargement des images.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css;">.exemple_un {
+  background-color: teal;
+  color: white;
+}
+
+.exemple_deux {
+  background-color: rgb(153,102,153);
+  color: rgb(255,255,204);
+}
+
+.exemple_trois {
+  background-color: #777799;
+  color: #FFFFFF;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="exemple_un"&gt;
+  Lorem ipsum dolor sit amet, consectetuer
+&lt;/div&gt;
+
+&lt;div class="exemple_deux"&gt;
+  Lorem ipsum dolor sit amet, consectetuer
+&lt;/div&gt;
+
+&lt;div class="exemple_trois"&gt;
+  Lorem ipsum dolor sit amet, consectetuer
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","200","150")}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Il est important de vérifier que le contraste entre la couleur d'arrière-plan et la couleur du texte est suffisamment élevé afin que le contenu de la page puisse être lu, quelles que soient les conditions de vision.</p>
+
+<p>Le ratio de contraste entre les couleurs est déterminé en comparant la luminosité de la couleur du texte et celle de la couleur d'arrière-plan. Pour respecter les règles d'accessibilité <a href="https://www.w3.org/WAI/intro/wcag">Web Content Accessibility Guidelines (WCAG)</a>, il faut avoir un ratio de 4.5:1 pour le contenu textuel normal et un ratio de 3:1 pour les textes plus grands comme les titres (un texte sera considéré comme grand s'il est en gras et mesure au moins 18.66px ou s'il mesure au moins 24 pixels).</p>
+
+<ul>
+ <li><a href="https://webaim.org/resources/contrastchecker/">Vérificateur de contraste WebAIM</a></li>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html"><em>Understanding Success Criterion 1.4.3, W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Commentaires</th>
+   <th scope="col">Retours</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#background-color', 'background-color')}}</td>
+   <td>Le mot-clé <code>transparent</code> a été retiré de la propriété pour être intégré au type de données {{cssxref("&lt;color&gt;")}} (dans la pratique, il n'y a aucune différence).</td>
+   <td><a href="https://github.com/w3c/csswg-drafts/labels/css-backgrounds-3"><em>Issues</em> GitHub pour la spécification Background de niveau 3 (en anglais)</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-color', 'background-color')}}</td>
+   <td>Aucune modification.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#background-color', 'background-color')}}</td>
+   <td>Définition initiale.</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Les données de compatibilité présentées sur cette page ont été générées à partir de données organisées. Ces données sont présentes sur le dépôt GitHub <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, n'hésitez pas à contribuer en proposant vos<em>pull request</em>.</p>
+
+<p>{{Compat("css.properties.background-color")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>
+  <p><a href="/fr/docs/Web/CSS/CSS_Background_and_Borders/Utiliser_des_fonds_multiples">Gérer plusieurs arrières-plans</a></p>
+ </li>
+ <li>Le type de données {{cssxref("&lt;color&gt;")}}</li>
+ <li>Les autres propriétés relatives aux couleurs : {{cssxref("color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}}</li>
+ <li><a href="/fr/docs/Web/HTML/Applying_color">Appliquer des couleurs à des éléments HTML grâce à CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/background-image/index.html b/files/fr/web/css/background-image/index.html
new file mode 100644
index 0000000000..25d4f59de3
--- /dev/null
+++ b/files/fr/web/css/background-image/index.html
@@ -0,0 +1,173 @@
+---
+title: background-image
+slug: Web/CSS/background-image
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/background-image
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>background-image</code></strong> permet de définir une ou plusieurs images comme arrière(s)-plan(s) pour un élément.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/background-image.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Les images sont dessinées les unes au-dessus des autres. La première image indiquée est dessinée comme étant la plus proche de l'utilisateur.</p>
+
+<p>Les bordures de l'élément sont dessinés par-dessus l'arrière-plan et la couleur {{cssxref("background-color")}} est dessinée sous l'arrière-plan. La position et les limites de chaque image sont gérées grâce aux propriétés {{cssxref("background-clip")}} et {{cssxref("background-origin")}}.</p>
+
+<p>Si une image donnée ne peut pas être chargée (par exemple lorsqu'il est impossible de charger un fichier via l'URI indiquée), les navigateurs considèreront la valeur comme <code>none</code>.</p>
+
+<div class="note"><strong>Note :</strong> Même si les images sont opaques et que les couleurs ne seront pas affichées de façon normale, les développeurs doivent toujours définir une couleur d'arrière-plan via {{cssxref("background-color")}} au cas où les images ne peuvent être chargées.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeur simple */
+background-image: url('https://example.com/bck.png');
+
+/* Plusieurs valeurs */
+background-image: url('https://example.com/top.png'), url('https://example.com/bottom.png');
+
+/* Valeur avec un mot-clé */
+background-image: none;
+
+/* Valeurs globales */
+background-image: inherit;
+background-image: initial;
+background-image: unset;
+</pre>
+
+<p>Chaque image d'arrière-plan peut être définie avec le mot-clé <code>none</code> ou avec une valeur de type <code>&lt;image&gt;</code>. Pour indiquer plusieurs images d'arrière-plan, on listera les différentes valeurs les unes à la suite des autres et séparées par des virgules :</p>
+
+<pre class="brush: css">background-image:
+  linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)),
+  url("https://mdn.mozillademos.org/files/7693/catfront.png");
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Un mot-clé qui indique qu'aucune image ne doit être utilisée comme arrière-plan.</dd>
+ <dt><code>&lt;image&gt;</code></dt>
+ <dd>Une valeur {{cssxref("&lt;image&gt;")}} qui indique l'image à afficher. On peut avoir plusieurs images en arrière-plan en séparant les valeurs par des virgules. Lorsque c'est une URL qui est utilisée, on peut aussi bien utiliser des simples quotes (<code>'texte_avec_double_quotes_"_'</code>) ou des doubles quotes (<code>"texte_avec_simple_quote_'_"</code>) pour encadrer le texte qui forme l'URL.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>On voit ici l'effet obtenu avec plusieurs images : l'étoile est légèrement transparente et se superpose par-dessus l'image du chat.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="catsandstars"&gt;
+    Un paragraphe avec des chats&lt;br/&gt;
+    et des étoiles.
+  &lt;/p&gt;
+  &lt;p&gt;Pas ici.&lt;/p&gt;
+  &lt;p class="catsandstars"&gt;
+    Et voilà encore des chats.&lt;br/&gt;
+    Et des étoiles !
+  &lt;/p&gt;
+  &lt;p&gt;Puis plus rien.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  font-size: 1.5em;
+  color: #FE7F88;
+  background-color: transparent;
+  background-image: none;
+}
+
+div {
+  background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
+}
+
+.catsandstars {
+  background-image:  url("https://mdn.mozillademos.org/files/11991/startransparent.gif"),
+                     url("https://mdn.mozillademos.org/files/7693/catfront.png");
+  background-color: transparent;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Les navigateurs ne fournissent pas d'informations spécifiques aux outils d'assistance quant aux images d'arrière-plan. Les lecteurs d'écran ne pourront donc pas annoncer le sens de l'image aux utilisateurs. Si l'image contient des informations critiques pour la compréhension générale de la page, mieux vaudra décrire ces informations de façon sémantique dans le document.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">Comprendre les règles du WCAG 1.1</a></li>
+ <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">Understanding Success Criterion 1.1.1 - W3C Understanding WCAG 2.0 (en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#background-image', 'background-image')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>La propriété a été étendue pour gérer plusieurs arrières-plans et le type de donnée CSS {{cssxref("&lt;image&gt;")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.2', 'colors.html#propdef-background-image', 'background-image')}}</td>
+   <td>{{Spec2('CSS2.2')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-image', 'background-image')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>La gestion des dimensions intrinsèques (lorsqu'elles sont absentes ou présentes) est décrite.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#background-image', 'background-image')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Les données de compatibilité présentées sur cette page ont été générées à partir de données organisées. Ces données sont présentes sur le dépôt GitHub <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, n'hésitez pas à contribuer en proposant vos <em>pull request</em>.</p>
+
+<p>{{Compat("css.properties.background-image")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Images/Sprites_CSS">Implémenter des sprites en CSS</a></li>
+ <li>{{HTMLElement("img")}},</li>
+ <li>{{cssxref("&lt;image&gt;")}},</li>
+ <li>{{cssxref("&lt;gradient&gt;")}},</li>
+ <li>{{cssxref("linear-gradient")}},</li>
+ <li>{{cssxref("radial-gradient")}},</li>
+ <li>{{cssxref("repeating-linear-gradient")}},</li>
+ <li>{{cssxref("repeating-radial-gradient")}},</li>
+ <li>{{cssxref("element")}},</li>
+ <li>{{cssxref("_image", "image()")}},</li>
+ <li>{{cssxref("image-set")}},</li>
+ <li>{{cssxref("url","url()")}}</li>
+</ul>
diff --git a/files/fr/web/css/background-origin/index.html b/files/fr/web/css/background-origin/index.html
new file mode 100644
index 0000000000..e43076730c
--- /dev/null
+++ b/files/fr/web/css/background-origin/index.html
@@ -0,0 +1,109 @@
+---
+title: background-origin
+slug: Web/CSS/background-origin
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/background-origin
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>background-origin</code></strong> détermine l'origine de l'arrière-plan {{cssxref("background-image")}} à partir de la bordure, à l'intérieur de la bordure ou à l'intérieur de la zone de remplissage (<em>padding</em>).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/background-origin.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Attention, <code>background-origin</code> est ignorée lorsque {{cssxref("background-attachment")}} vaut <code>fixed</code>.</p>
+
+<div class="note"><strong>Note : </strong>Cette propriété est rattachée à la propriété raccourcie {{cssxref("background")}}. Aussi, si on a une déclaration <code>background-origin</code> avant la propriété raccourcie et que cette dernière ne définit pas la valeur de l'origine, ce sera la valeur initiale par défaut qui sera prise en compte pour <code>background-origin</code>.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+background-origin: border-box;
+background-origin: padding-box;
+background-origin: content-box;
+
+/* Valeurs globales */
+background-origin: inherit;
+background-origin: initial;
+background-origin: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>border-box</code></dt>
+ <dd>L'arrière-plan est positionné relativement à la boîte de bordure.</dd>
+ <dt><code>padding-box</code></dt>
+ <dd>L'arrière-plan est positionné relativement à la boîte de remplissage (<em>padding</em>).</dd>
+ <dt><code>content-box</code></dt>
+ <dd>L'arrière-plan est positionné relativement à la boîte de contenu.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css;">div {
+  width: 200px;
+  height: 100px;
+}
+
+.exemple {
+  border: 10px double;
+  padding: 10px;
+  background-image: url(https://mdn.mozillademos.org/files/12988/p_201.jpg);
+  background-color: palegreen;
+  background-position: 0px 40px;
+  background-origin: content-box;
+  background-repeat: no-repeat;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="exemple"&gt;&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","300","200")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-background-origin', 'background-origin')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Les données de compatibilité présentées sur cette page ont été générées à partir de données organisées. Ces données sont présentes sur le dépôt GitHub <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, n'hésitez pas à contribuer en proposant vos <em>pull request</em>.</p>
+
+<p>{{Compat("css.properties.background-origin")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("background-clip")}}</li>
+</ul>
diff --git a/files/fr/web/css/background-position-x/index.html b/files/fr/web/css/background-position-x/index.html
new file mode 100644
index 0000000000..b80a85a4da
--- /dev/null
+++ b/files/fr/web/css/background-position-x/index.html
@@ -0,0 +1,108 @@
+---
+title: background-position-x
+slug: Web/CSS/background-position-x
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/background-position-x
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>background-position-x</code></strong> définit la position horizontale initiale de chaque image d'arrière-plan par rapport à l'origine, définie avec {{cssxref("background-origin")}}.</p>
+
+<p>Pour plus d'informations, se référer à la documentation de la propriété {{cssxref("background-position")}} qui existe depuis plus longtemps.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/background-position-x.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note"><strong>Note : </strong>La valeur de cette propriété sera surchargée par n'importe quelle déclaration avec  {{cssxref("background")}} ou {{cssxref("background-position")}} située après la déclaration de <code>background-position-x</code>.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+background-position-x: left;
+background-position-x: right;
+background-position-x: center;
+
+/* Valeurs proportionnelles */
+/* Type &lt;percentage&gt;        */
+background-position-x: 25%;
+
+/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+background-position-x: 0px;
+background-position-x: 1cm;
+background-position-x: 8em;
+
+/* Déclaration indiquant un décalage  */
+/* relatif à un des côtés de la boîte */
+background-position-x: right 3px;
+
+/* Gestion de plusieurs valeurs */
+/* pour plusieurs arrières-plan */
+background-position-x: 0px, center;
+
+/* Valeurs globales */
+background-position-x: inherit;
+background-position-x: initial;
+background-position-x: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>left</code></dt>
+ <dd>Le bord gauche de l'image d'arrière-plan est aligné avec le bord gauche de la zone dédiée à l'arrière-plan.</dd>
+ <dt><code>center</code></dt>
+ <dd>L'image d'arrière-plan est centrée horizontalement par rapport à la zone dédiée à l'arrière-plan.</dd>
+ <dt><code>right</code></dt>
+ <dd>Le côté droit de l'image d'arrière-plan est aligné avec le côté droit de la zone dédiée à l'arrière-plan.</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une valeur de longueur (type {{cssxref("&lt;length&gt;")}}) qui définit le décalage horizontal de l'arrière-plan correspondant par rapport à un bord vertical de la zone d'arrière-plan. Si aucun côté n'est indiqué, l'écart fera référence au côté gauche.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Une valeur en pourcentages (type {{cssxref("&lt;percentage&gt;")}}) qui définit le décalage horizontal de l'arrière-plan correspondant par rapport à un bord vertical de la zone d'arrière-plan, proportionnellement à la largeur de la zone. Si aucun côté n'est indiqué, l'écart fera référence au côté gauche.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Backgrounds', '#background-position-longhands', 'background-position-x')}}</td>
+   <td>{{Spec2('CSS4 Backgrounds')}}</td>
+   <td>Spécification initiale pour les propriétés détaillées de {{cssxref("background-position")}}, implémentée depuis longtemps.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Les données de compatibilité présentées sur cette page ont été générées à partir de données organisées. Ces données sont présentes sur le dépôt GitHub <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, n'hésitez pas à contribuer en proposant vos <em>pull request</em>.</p>
+
+<p>{{Compat("css.properties.background-position-x")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("background-position")}}</li>
+ <li>{{cssxref("background-position-y")}}</li>
+ <li>{{cssxref("background-position-inline")}}</li>
+ <li>{{cssxref("background-position-block")}}</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Background_and_Borders/Utiliser_des_fonds_multiples">Manipuler plusieurs arrière-plans</a></li>
+</ul>
diff --git a/files/fr/web/css/background-position-y/index.html b/files/fr/web/css/background-position-y/index.html
new file mode 100644
index 0000000000..f7cb19173f
--- /dev/null
+++ b/files/fr/web/css/background-position-y/index.html
@@ -0,0 +1,107 @@
+---
+title: background-position-y
+slug: Web/CSS/background-position-y
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/background-position-y
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>background-position-y</code></strong> définit la position verticale initiale de chaque image d'arrière-plan. La position est relative à l'origine définie par {{cssxref("background-origin")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/background-position-y.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note"><strong>Note : </strong>La valeur de cette propriété sera surchargée par n'importe quelle déclaration avec  {{cssxref("background")}} ou {{cssxref("background-position")}} située après la déclaration.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+background-position-y: top;
+background-position-y: bottom;
+background-position-y: center;
+
+/* Valeurs proportionnelles */
+/* Type &lt;percentage&gt;        */
+background-position-y: 25%;
+
+/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+background-position-y: 0px;
+background-position-y: 1cm;
+background-position-y: 8em;
+
+/* Déclaration indiquant un décalage  */
+/* relatif à un des côtés de la boîte */
+background-position-y: bottom 3px;
+background-position-y: bottom 10%;
+
+/* Gestion de plusieurs valeurs */
+/* pour plusieurs arrières-plan */
+background-position-y: 0px, center;
+
+/* Valeurs globales */
+background-position-y: inherit;
+background-position-y: initial;
+background-position-y: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>top</code></dt>
+ <dd>Le bord haut de l'image d'arrière-plan est aligné avec le bord haut de la zone dédiée à l'arrière-plan.</dd>
+ <dt><code>center</code></dt>
+ <dd>L'image d'arrière-plan est centrée verticalement par rapport à la zone dédiée à l'arrière-plan.</dd>
+ <dt><code>bottom</code></dt>
+ <dd>Le bas de l'image d'arrière-plan est aligné avec le bas de la zone dédiée à l'arrière-plan.</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une valeur de longueur (type {{cssxref("&lt;length&gt;")}}) qui définit le décalage vertical de l'arrière-plan correspondant par rapport au bord haut de la zone d'arrière-plan. Si aucun côté n'est indiqué, l'écart fera référence au bord haut. Certains navigateurs permettent d'indiquer un décalage par rapport au côté bas.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Une valeur en pourcentages (type {{cssxref("&lt;percentage&gt;")}}) qui définit le décalage vertical de l'arrière-plan correspondant par rapport à un bord horizontal de la zone d'arrière-plan, proportionnellement à la hauteur de la zone. Si aucun côté n'est indiqué, l'écart fera référence au bord haut. Une valeur de 100% indique que le bas de l'image d'arrière-plan sera aligné avec le bas du conteneur et une valeur de 50% centrera l'image.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Backgrounds', '#background-position-longhands', 'background-position-y')}}</td>
+   <td>{{Spec2('CSS4 Backgrounds')}}</td>
+   <td>Spécification initiale pour les propriétés détaillées de {{cssxref("background-position")}}, implémentée depuis longtemps.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Les données de compatibilité présentées sur cette page ont été générées à partir de données organisées. Ces données sont présentes sur le dépôt GitHub <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, n'hésitez pas à contribuer en proposant vos <em>pull request</em>.</p>
+
+<p>{{Compat("css.properties.background-position-y")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("background-position")}}</li>
+ <li>{{cssxref("background-position-x")}}</li>
+ <li>{{cssxref("background-position-inline")}}</li>
+ <li>{{cssxref("background-position-block")}}</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Background_and_Borders/Utiliser_des_fonds_multiples">Manipuler plusieurs arrière-plans</a></li>
+</ul>
diff --git a/files/fr/web/css/background-position/index.html b/files/fr/web/css/background-position/index.html
new file mode 100644
index 0000000000..106dc30a38
--- /dev/null
+++ b/files/fr/web/css/background-position/index.html
@@ -0,0 +1,197 @@
+---
+title: background-position
+slug: Web/CSS/background-position
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/background-position
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>background-position</code></strong> permet de définir la position initiale, relative à l'origine définie par {{cssxref("background-origin")}}, pour chaque image d'arrière-plan.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/background-position.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs utilisant un mot-clé */
+background-position: top;
+background-position: bottom;
+background-position: left;
+background-position: right;
+background-position: center;
+
+/* Valeurs proportionnelles à la boîte */
+/* Type &lt;percentage&gt;                   */
+background-position: 25% 75%;
+
+/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+background-position: 0 0;
+background-position: 1cm 2cm;
+background-position: 10ch 8em;
+
+/* Plusieurs valeurs pour plusieurs arrières-plans */
+background-position: 0 0, center;
+
+/* Valeurs exprimant un décalage relatif aux côtés */
+background-position: bottom 10px right 20px;
+background-position: right 3em bottom 10px;
+background-position: bottom 10px right;
+background-position: top right 10px;
+
+/* Valeurs globales */
+background-position: inherit;
+background-position: initial;
+background-position: unset;
+</pre>
+
+<p>La propriété <code>background-position</code> peut être définie grâce à une ou plusieurs valeurs <code><a href="#&lt;position>">&lt;position&gt;</a></code>, séparées par des virgules.</p>
+
+<h3 id="Values" name="Values">Valeurs</h3>
+
+<dl>
+ <dt><a id="&lt;position>" name="&lt;position>"><code>&lt;position&gt;</code></a></dt>
+ <dd>Une valeur {{cssxref("&lt;position&gt;")}}. Une position définit un couple de coordonnées XY qui permet de placer un objet par rapport aux bords de la boîte d'un élément. Une position peut être définie avec une ou deux valeurs.La première correspond à la position horizontale et la seconde à la position verticale.</dd>
+ <dd>
+ <p><strong>Définition avec une valeur :</strong> la valeur peut être :</p>
+
+ <ul>
+  <li>Le mot-clé <code>center</code> qui centre l'image.</li>
+  <li>Un mot-clé parmi <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code>. Ce mot-clé indique le bord par rapport auquel placer l'élément. Pour l'autre dimension, on utilisera la moitié de la boîte (50%).</li>
+  <li>Une longeur ({{cssxref("&lt;length&gt;")}}) ou un pourcentage ({{cssxref("&lt;percentage&gt;")}}). Cette valeur définit l'abscisse du point par rapport au bord gauche. L'ordonnée est fixée à 50%.</li>
+ </ul>
+
+ <p><strong>Définition avec deux valeurs :</strong> la première valeur définit l'abscisse (la coordonnée horizontale X) et la seconde définit l'ordonnée (la coordonnée verticale Y). Chaque valeur peut être :</p>
+
+ <ul>
+  <li>Un des mots-clés parmi <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code>. Si <code>left</code> ou <code>right</code> est utilisé, la valeur définit l'abscisse et l'autre définira l'ordonnée. Si <code>top</code> ou <code>bottom</code> est indiqué, cette valeur définira l'ordonnée et l'autre valeur définira X.</li>
+  <li>Une valeur de longueur ({{cssxref("&lt;length&gt;")}}) ou un pourcentage ({{cssxref("&lt;percentage&gt;")}}). Si l'autre valeur vaut <code>left</code> ou <code>right</code>, cette valeur définira l'ordonnée par rapport au bord haut. Si l'autre valeur est <code>top</code> ou <code>bottom</code>,  cette valeur définira l'abscisse relativement au bord gauche. Si les deux valeurs sont des longueurs ou des pourcentages, la première définira l'abscisse et la seconde l'ordonnée.</li>
+ </ul>
+
+ <p>On notera que :</p>
+
+ <ul>
+  <li>si une valeur est <code>top</code> ou <code>bottom</code>, la seconde ne peut pas être <code>top</code> ou <code>bottom</code>.</li>
+  <li>si une valeur est <code>left</code> ou <code>right</code>, la seconde ne peut pas être <code>left</code> ou <code>right</code>.</li>
+ </ul>
+
+ <p>Autrement dit "<code>top top"</code> ou "<code>left right</code>" seront considérées comme invalides.</p>
+
+ <p><strong>À propos des pourcentages :</strong> lorsqu'on exprime un décalage en pourcentage, ce dernier est relatif au conteneur. Ainsi, une valeur de 0% indiquera que le côté gauche (ou haut) du bord de l'image est aligné avec le bord gauche (ou haut) du conteneur. Une valeur de 100% indiquera que le côté droit (ou bas) de l'image d'arrière-plan est alignée avec le bord droit (ou bas) du conteneur. Une valeur de 50% permettra de centrer l'image.</p>
+
+ <p>Autrement dit, lorsqu'on utilise un pourcentage, celui-ci s'inscrit dans la formule suivante :</p>
+
+ <p><code>(largeur conteneur - largeur image) * (position en %) = (décalage horizontal)</code><br>
+  <code>(hauteur conteneur - hauteur image) * (position en %) = (décalage vertical)</code>.</p>
+
+ <p>On notera donc que si l'image d'arrière-plan a les mêmes dimensions que le conteneur, les valeurs en pourcentage pour <code>background-position</code> n'auront aucun effet. Il faudra utiliser des valeurs absolues pour décaler l'image.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemples_utilisant_plusieurs_images">Exemples utilisant plusieurs images</h3>
+
+<p>Dans cet exemple, on a trois éléments jaunes qui ont chacun une étoile située différemment. Le rectangle final possède deux images d'arrière-plan, chacune à une position différente.</p>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">div {
+  background-color: #FFEE99;
+  background-repeat: no-repeat;
+  width: 300px;
+  height: 80px;
+  margin-bottom: 12px;
+}
+
+/* On utilise la propriété raccourcie background */
+.exemple_un {
+  background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 2.5cm bottom no-repeat;
+}
+.exemple_deux {
+  background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 3em 50% no-repeat;
+}
+
+/*
+Plusieurs images d'arrière-plan chacune positionnée
+différemment, on voit les virgules dans les déclarations.
+L'ordre est le même entre background-image et -position.
+*/
+.exemple_trois {
+  background-image:    url("https://mdn.mozillademos.org/files/11987/startransparent.gif"),
+                       url("https://mdn.mozillademos.org/files/7693/catfront.png");
+  background-position: 0px 0px,
+                       center;
+}</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="exemple_un"&gt;Premier exemple&lt;/div&gt;
+&lt;div class="exemple_deux"&gt;Deuxième exemple&lt;/div&gt;
+&lt;div class="exemple_trois"&gt;Troisième exemple&lt;/div&gt;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Exemples', 420, 200)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#background-position', 'background-position')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>La gestion de plusieurs arrières-plans a été ajoutée. La syntaxe avec quatre valeurs a été ajoutée. La définition des valeurs en pourcentages a été modifiée pour correspondre aux implémentations.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-position', 'background-position')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Cette spécification permet de mélanger les valeurs qui sont des mots-clés, les valeurs de type {{cssxref("&lt;length&gt;")}} et {{cssxref("&lt;percentage&gt;")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#background-position', 'background-position')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Les données de compatibilité présentées sur cette page ont été générées à partir de données organisées. Ces données sont présentes sur le dépôt GitHub <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, n'hésitez pas à contribuer en proposant vos <em>pull request</em>.</p>
+
+<p>{{Compat("css.properties.background-position")}}</p>
+
+<h3 id="Notes_relatives_à_Quantum_CSS">Notes relatives à Quantum CSS</h3>
+
+<ul>
+ <li>Un bug de Gecko empêche la transition de <code>background-position</code> entre deux valeurs qui contiennent différents nombres de valeurs {{cssxref("&lt;position&gt;")}} (par exemple <code>background-position: 10px 10px;</code> d'une part et <code>background-position: 20px 20px, 30px 30px;</code> d'autre part) (cf. {{bug(1390446)}}). Le nouveau moteur CSS de Firefox (appelé <a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> ou <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, prévu pour Firefox 57) corrige ce problème.</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Background_and_Borders/Utiliser_des_fonds_multiples">Gérer plusieurs arrières-plans</a></li>
+ <li>{{cssxref("background-position-x")}}</li>
+ <li>{{cssxref("background-position-y")}}</li>
+ <li>{{cssxref("background-position-inline")}}</li>
+ <li>{{cssxref("background-position-block")}}</li>
+ <li>{{cssxref("transform-origin")}}</li>
+</ul>
diff --git a/files/fr/web/css/background-repeat/index.html b/files/fr/web/css/background-repeat/index.html
new file mode 100644
index 0000000000..de3634fb94
--- /dev/null
+++ b/files/fr/web/css/background-repeat/index.html
@@ -0,0 +1,234 @@
+---
+title: background-repeat
+slug: Web/CSS/background-repeat
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/background-repeat
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>background-repeat</code></strong> définit la façon dont les images utilisées en arrière-plan sont répétées. Une image d'arrière-plan pourra ainsi être répétée sur l'axe horizontal, l'axe vertical ou bien ne pas être répétée.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/background-repeat.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Par défaut, les images répétées sont rognées à la taille de l'élément mais elles peuvent être redimensionnées pour occuper l'espace avec un nombre entier de répétitions (<code>round</code>) voire être distribuées avec des espaces entre les motifs pour remplir la zone (<code>space</code>).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+background-repeat: repeat-x;
+background-repeat: repeat-y;
+background-repeat: repeat;
+background-repeat: space;
+background-repeat: round;
+background-repeat: no-repeat;
+
+/* Syntaxe avec deux valeurs        */
+/* Première valeur : axe horizontal */
+/* Seconde valeur : axe vertical    */
+background-repeat: repeat space;
+background-repeat: repeat repeat;
+background-repeat: round space;
+background-repeat: no-repeat round;
+
+/* Valeurs globales */
+background-repeat: inherit;
+background-repeat: initial;
+background-repeat: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;repeat-style&gt;</code></dt>
+ <dd>Un mot-clé qui peut être utilisé dans la syntaxe à une valeur ou à deux valeurs. La syntaxe utilisant une valeur est une notation raccourcie dont voici le tableau de correspondance :</dd>
+ <dd>
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td><strong>Une seule valeur</strong></td>
+    <td><strong>Équivalent avec deux-valeurs</strong></td>
+   </tr>
+   <tr>
+    <td><code>repeat-x</code></td>
+    <td><code>repeat no-repeat</code></td>
+   </tr>
+   <tr>
+    <td><code>repeat-y</code></td>
+    <td><code>no-repeat repeat</code></td>
+   </tr>
+   <tr>
+    <td><code>repeat</code></td>
+    <td><code>repeat repeat</code></td>
+   </tr>
+   <tr>
+    <td><code>space</code></td>
+    <td><code>space space</code></td>
+   </tr>
+   <tr>
+    <td><code>round</code></td>
+    <td><code>round round</code></td>
+   </tr>
+   <tr>
+    <td><code>no-repeat</code></td>
+    <td><code>no-repeat no-repeat</code></td>
+   </tr>
+  </tbody>
+ </table>
+ Lorsqu'on utilise la syntaxe à deux valeurs, la première indique la méthode de répétition pour l'axe horizontal et la seconde celle pour l'axe vertical. Voici un tableau décrivant chacune des options :</dd>
+ <dd>
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td><code>repeat</code></td>
+    <td>L'image est répétée autant de fois que nécessaire pour recouvrir la zone dédiée à l'arrière-plan. La dernière image sera rognée si nécessaire.</td>
+   </tr>
+   <tr>
+    <td><code>space</code></td>
+    <td>L'image est répétée autant que possible sans rognage. La première et la dernière image sont accolées aux bords de l'élément et des espaces sont repartis de façon égale entre les images. La propriété {{cssxref("background-position")}} est ignorée sauf s'il n'y a qu'une seule image qui puisse être affichée sans être rognée. Le seul cas où <code>space</code> est utilisé et qu'une image est rognée se produit lorsque l'image est trop grande pour être affichée.</td>
+   </tr>
+   <tr>
+    <td><code>round</code></td>
+    <td>L'image est répétée autant que possible et est étirée si nécessaire afin qu'il n'y ait ni rognage ni espace restant. Dès qu'il y a la place d'ajouter une image, les autres sont compressées pour lui laisser la place. Ainsi, une image avec une largeur originale de 260px, répétée trois fois, pourra être étirée pour que chaque exemplaire mesure 300 pixels de large, lorsqu'une autre image sera ajoutée, elles seront compressées sur 225 pixels.</td>
+   </tr>
+   <tr>
+    <td><code>no-repeat</code></td>
+    <td>Il n'y a aucune répétition de l'image (dès lors, il est possible que toute la zone ne soit pas recouverte par cette image). La position de l'image est définie grâce à la propriété {{cssxref("background-position")}}.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* Commun à tous les DIVS */
+ol, li {
+  margin: 0;
+  padding: 0;
+}
+li {
+  margin-bottom: 12px;
+}
+div {
+    background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif);
+    width: 160px;
+    height: 70px;
+}
+
+/* background repeat CSS */
+.one {
+    background-repeat: no-repeat;
+}
+.two {
+    background-repeat: repeat;
+}
+.three {
+    background-repeat: repeat-x;
+}
+.four {
+    background-repeat: repeat-y;
+}
+
+.five {
+   background-repeat: space;
+}
+
+.six {
+   background-repeat: round;
+}
+
+/* Plusieurs images */
+.seven {
+    background-image:  url(https://mdn.mozillademos.org/files/12005/starsolid.gif),
+                       url(https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png);
+    background-repeat: repeat-x,
+                       repeat-y;
+    height: 144px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ol&gt;
+    &lt;li&gt;no-repeat
+        &lt;div class="one"&gt;&lt;/div&gt;
+    &lt;/li&gt;
+    &lt;li&gt;repeat
+        &lt;div class="two"&gt;&lt;/div&gt;
+    &lt;/li&gt;
+    &lt;li&gt;repeat-x
+        &lt;div class="three"&gt;&lt;/div&gt;
+    &lt;/li&gt;
+    &lt;li&gt;repeat-y
+        &lt;div class="four"&gt;&lt;/div&gt;
+    &lt;/li&gt;
+    &lt;li&gt;space
+        &lt;div class="five"&gt;&lt;/div&gt;
+    &lt;/li&gt;
+    &lt;li&gt;round
+        &lt;div class="six"&gt;&lt;/div&gt;
+    &lt;/li&gt;
+    &lt;li&gt;repeat-x, repeat-y (plusieurs images)
+        &lt;div class="seven"&gt;&lt;/div&gt;
+    &lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>Dans cet exemple, chaque élément de la liste illustre une valeur différente de <code>background-repeat</code>.</p>
+
+<p>{{EmbedLiveSample('Exemples', 240, 560)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-background-repeat', 'background-repeat')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Ajout de la prise en charge de plusieurs images d'arrière-plan. La syntaxe avec deux valeurs permet d'avoir des motifs de répétition différents pour les deux axes. Les mots-clés <code>space</code> et <code>round</code> sont ajoutés. La définition de la zone de dessin pour l'arrière-plan est mieux définie pour les éléments en ligne.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-repeat', 'background-repeat')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Aucune modification significative.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#background-repeat', 'background-repeat')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Les données de compatibilité présentées sur cette page ont été générées à partir de données organisées. Ces données sont présentes sur le dépôt GitHub <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, n'hésitez pas à contribuer en proposant vos <em>pull request</em>.</p>
+
+<p>{{Compat("css.properties.background-repeat")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Background_and_Borders/Utiliser_des_fonds_multiples">Utiliser plusieurs arrières-plans en CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/background-size/index.html b/files/fr/web/css/background-size/index.html
new file mode 100644
index 0000000000..e3c5fdd761
--- /dev/null
+++ b/files/fr/web/css/background-size/index.html
@@ -0,0 +1,267 @@
+---
+title: background-size
+slug: Web/CSS/background-size
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/background-size
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>background-size</code></strong> définit la taille des images d'arrière-plan pour l'élément. La taille de l'image peut être contrainte, complètement ou partiellement afin de conserver ses proportions.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/background-size.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note">
+<p><strong>Note :</strong> L'espace qui n'est pas rempli par l'image d'arrière-plan aura la couleur définie par la propriété {{cssxref("background-color")}}. De plus, la couleur d'arrière-plan sera visible si l'image d'arrière-plan est transparente.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+background-size: cover;
+background-size: contain;
+
+/* Une seule valeur                         */
+/* La valeur désigne la largeur de l'image. */
+/* La hauteur vaut 'auto'.                  */
+background-size: 50%;
+background-size: 3.2em;
+background-size: 12px;
+background-size: auto;
+
+/* Deux valeurs                            */
+/* Première valeur : la largeur de l'image */
+/* Seconde valeur : la hauteur de l'image  */
+background-size: 50% auto;
+background-size: 3em 25%;
+background-size: auto 6px;
+background-size: auto auto;
+
+/* Valeurs pour plusieurs arrière-plans */
+background-size: auto, auto; /* À ne pas confondre avec `auto auto` */
+background-size: 50%, 25%, 25%;
+background-size: 6px, auto, contain;
+
+/* Valeurs globales */
+background-size: inherit;
+background-size: initial;
+background-size: unset;
+</pre>
+
+<p>La propriété <code>background-size</code> peut être définie de différentes façons :</p>
+
+<ul>
+ <li>Avec l'un des mots-clés <code><a href="#contain">contain</a></code> ou <code><a href="#cover">cover</a></code>.</li>
+ <li>Avec une seule valeur qui indique la largeur de l'image (la hauteur vaut alors <code><a href="#auto">auto</a></code> par défaut)</li>
+ <li>Avec deux valeurs dont la première représente la largeur et la seconde la hauteur. Chaque valeur peut être une longueur (type {{cssxref("&lt;length&gt;")}}) ou un pourcentage (type {{cssxref("&lt;percentage&gt;")}}) ou encore <code><a href="#auto">auto</a></code>.</li>
+</ul>
+
+<p>Lorsqu'on souhaite paramétrer la taillle de plusieurs images d'arrière-plan, on peut séparer ces valeurs par des virgules (l'ordre utilisé entre les valeurs suit celui de {{cssxref("background-image")}}).</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt id="contain"><code>contain</code></dt>
+ <dd>Un mot-clé qui redimensionne l'image afin qu'elle soit la plus grande possible et que l'image conserve ses proportions. L'image est contrainte dans le conteneur. Les zones éventuellement vide sont remplies avec la couleur d'arrière-plan (définie grâce à {{cssxref("background-color")}}). Par défaut, l'image est centrée sauf si {{cssxref("background-position")}} a été modifiée.</dd>
+ <dt id="cover"><code>cover</code></dt>
+ <dd>Un mot-clé dont le comportement est opposé à celui de <code>contain</code>. L'image est redimensionnée pour être aussi grande que possible et pour conserver ses proportions. L'image couvre toute la largeur ou la hauteur du conteneur et les parties qui dépassent sont rognées si les proportions du conteneur sont différentes (il n'y aucun espace libre sur lequel on verrait la couleur d'arrière-plan).</dd>
+ <dt id="auto"><code>auto</code></dt>
+ <dd>Un mot-clé qui redimensionne l'image d'arrière-plan afin que ses proportions soient conservées.</dd>
+ <dt id="length"><code>&lt;length&gt;</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;length&gt;")}} qui redimensionne l'image afin que celle-ci occupe la longueur indiquée dans la dimension concernée. Les valeurs négatives ne sont pas autorisées.</dd>
+ <dt id="percentage"><code>&lt;percentage&gt;</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;percentage&gt;")}} qui redimensionne l'image d'arrière-plan proportionnellement à la taille de la zone dédiée à l'arrière-plan, définie via {{cssxref("background-origin")}}. Par défaut, cette zone correspond à la boîte de contenu et de remplissage (<em>padding</em>) mais peut être modifiée pour contenir uniquement la boîte de contenu ou, à l'inverse, les boîtes de contenu, remplissage et marge. Si la propriété {{cssxref("background-attachment")}} vaut <code>fixed</code>, la zone de positionnement de l'arrière-plan sera la fenêtre du navigateur (sans les barres de défilement). Les valeurs négatives ne sont pas autorisées.</dd>
+</dl>
+
+<h3 id="Dimensions_intrinsèques_et_proportions">Dimensions intrinsèques et proportions</h3>
+
+<p>Le calcul des valeurs dépend des dimensions intrinsèques de l'image (sa largeur et sa hauteur) et de ses proportions intrinsèques (le rapport entre la largeur et la hauteur). Voici les différents cas de figures possibles :</p>
+
+<ul>
+ <li>Une image matricielle (telle qu'une image JPG) possède toujours des dimensions intrinsèques et des proportions intrinsèques.</li>
+ <li>Une image vectorielle (telle qu'une image SVG) ne possède pas nécessairement de dimensions intrinsèque. Si elle possède à la fois une dimension verticale et une dimension horizontale intrinsèques, elle possèdera alors des proportions intrinsèques. Si elle ne possède qu'une ou aucune dimension intrinsèque, elle peut avoir ou ne pas avoir de proportions.</li>
+ <li>Un dégradé CSS (cf. {{cssxref("&lt;gradient&gt;")}}) ne possède ni dimension ni proportion intrinsèque.</li>
+ <li>Les images d'arrière-plan créées avec la fonction {{cssxref("element()")}} utiliseront les dimensions et proportions intrinsèques de l'élément générateur.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note :</strong> Le comportement associé aux dégradés (<code>&lt;gradient&gt;</code>) a été modifié avec Gecko 8.0 {{geckoRelease("8.0")}}. Auparavant, les dégradés étaient traités comme des images sans dimensions intrinsèques mais avec des proportions intrinsèques identiques à celles de la zone de positionnement de l'arrière-plan.</p>
+</div>
+
+<div class="note">
+<p><strong>Note :</strong> Pour Gecko, les images d'arrière-plan créées avec la fonction {{cssxref("element()")}} sont actuellement traitées comme des images ayant les dimensions de l'élément ou, si la zone de positionnement est un élément SVG, avec les proportions intrinsèques. Ce comportement n'est pas standard.</p>
+</div>
+
+<p>Selon le caractère intrinsèque ou non des dimensions et des proportions, la taille d'affichage de l'image d'arrière-plan est calculée de la façon suivante :</p>
+
+<dl>
+ <dt>Si les deux composants de <code>background-size</code> sont définis et qu'aucun ne vaut <code>auto</code> :</dt>
+ <dd>L'image utilise la taille définie.</dd>
+ <dt>Si <code>background-size</code> vaut <code>contain</code> ou <code>cover</code> :</dt>
+ <dd>L'image est affichée et ses proportions sont conservées pour que l'image soit contenue dans la zone ou la recouvre complètement. Si l'image ne possède pas de proportions intrinsèques; elle est affichée avec la taille de la zone de positionnement de l'arrière-plan.</dd>
+ <dt>Si <code>background-size</code> vaut <code>auto</code> ou <code>auto auto</code> :</dt>
+ <dd>
+ <ul>
+  <li>Si l'image possède deux dimensions intrinsèques, c'est cette taille qui est utilisée.</li>
+  <li>Si elle ne possède pas de dimension intrinsèque ni de proportion intrinsèque, elle est affichée avec la taille de la zone dédiée à l'arrière-plan.</li>
+  <li>Si elle n'a aucune dimensions mais possède une proportion, elle sera affichée comme si la valeur <code>contain</code> avait été utilisée.</li>
+  <li>Si l'image possède une dimension intrinsèque et une proportion, elle est affichée avec cette dimension et cette proportion.</li>
+  <li>Si l'image possède une dimension intrinsèque mais aucune proportion, elle sera affichée avec la dimension intrinsèque et l'autre dimension suivra la taille de la zone pour l'arrière-plan.</li>
+ </ul>
+ </dd>
+ <dd>
+ <div class="note"><strong>Note :</strong> Les images SVG peuvent contenir un attribut <code><a href="/fr/docs/Web/SVG/Attribute/preserveAspectRatio">preserveAspectRatio</a></code> pour lequel la valeur par défaut est équivalente à <code>contain</code>. Pour Firefox 43, à la différence de Chrome 52, une valeur explicite pour <code>background-size</code> permet d'ignorer <code>preserveAspectRatio</code>.</div>
+ </dd>
+ <dt>Si <code>background-size</code> possède une composante <code>auto</code> et que l'autre composante est différente de <code>auto</code> :</dt>
+ <dd>
+ <ul>
+  <li>Si l'image possède une proportion intrinsèque, elle sera affichée avec la dimension indiquée et la deuxième sera calculée grâce à la proportion.</li>
+  <li>Si l'image ne possède aucune proportion intrinsèque, la dimension indiquée sera utilisée pour la dimension concernée et on utilisera la dimension intrinsèque de l'image pour l'autre axe si elle existe. Sinon, on prendra la dimension de la zone de l'arrière-plan pour cet axe.</li>
+ </ul>
+ </dd>
+</dl>
+
+<div class="note">
+<p><strong>Note : </strong>Le dimensionnement des images d'arrière-plan qui sont des images vectorielles sans dimension ou proportion intrinsèque n'est pas implémenté par l'ensemble des navigateur. Attention à bien vérifier le résultat obtenu dans les différents navigateurs par rapport aux règles émises ci-avant.</p>
+</div>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="cover_2"><code>cover</code></h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">div {
+  height: 300px;
+  width: 200px;
+  background-color: palegreen;
+  background-image: url(https://mdn.mozillademos.org/files/12988/p_201.jpg);
+  background-repeat: no-repeat;
+}
+
+.exemple_cover {
+  background-size: cover;
+}</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="exemple_cover"&gt;&lt;/div&gt;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("cover","200","300")}}</p>
+
+<h3 id="contain_2"><code>contain</code></h3>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">div {
+  height: 300px;
+  width: 200px;
+  background-color: palegreen;
+  background-image: url(https://mdn.mozillademos.org/files/12988/p_201.jpg);
+  background-repeat: no-repeat;
+}
+
+.exemple_cover {
+  background-size: contain;
+}</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;div class="exemple_cover"&gt;&lt;/div&gt;</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("contain","200","300")}}</p>
+
+<h3 id="auto_50"><code>auto 50%</code></h3>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css">div {
+  height: 300px;
+  width: 200px;
+  background-color: palegreen;
+  background-image: url(https://mdn.mozillademos.org/files/12988/p_201.jpg);
+  background-repeat: no-repeat;
+}
+
+.exemple_cover {
+  background-size: auto 50%;
+}</pre>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;div class="exemple_cover"&gt;&lt;/div&gt;</pre>
+
+<h4 id="Résultat_3">Résultat</h4>
+
+<p>{{EmbedLiveSample("auto_50","200","300")}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Si on utilise un dégradé (<code>&lt;gradient&gt;</code>) comme arrière-plan et qu'on définit une valeur associée pour la propriété <code>background-size</code>, mieux vaut ne pas définir une taille qui n'utilise qu'un seul composant <code>auto</code> ou qu'une seule largeur (par exemple <code>background-size: 50%</code>). En effet, le rendu de tels éléments a été modifié avec Firefox 8 et peut avoir un comportement différent entre les navigateurs (tous n'implémentent pas exactement la <a href="https://www.w3.org/TR/css3-background/#the-background-size">spécification CSS3 pour <code>background-size</code></a> et <a href="https://dev.w3.org/csswg/css3-images/#gradients">la spécification CSS3 pour les images qui sont des dégradés</a>).</p>
+
+<pre class="brush: css">.gradient-exemple {
+  width: 50px;
+  height: 100px;
+  background-image: linear-gradient(blue, red);
+
+  /* Méthode risquée */
+  background-size: 25px;
+  background-size: 50%;
+  background-size: auto 50px;
+  background-size: auto 50%;
+
+  /* Sans risque */
+  background-size: 25px 50px;
+  background-size: 50% 50%;
+}
+</pre>
+
+<p>On notera qu'il n'est pas recommandé d'utiliser une dimension exprimée en pixels et une autre dimension avec <code>auto</code> lorsqu'on manipule des dégradés car il est impossible d'obtenir le même rendu que celui de Firefox pour les versions antérieures à Firefox 8 sans connaître la taille exacte de l'élément dont on définit l'arrière-plan.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-background-size', 'background-size')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("css.properties.background-size")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images">Redimensionner les images d'arrière-plan</a></li>
+ <li><a href="/fr/docs/Web/CSS/Redimensionnement_arrière-plans_SVG">Redimensionner les arrière-plans SVG</a></li>
+ <li>{{cssxref("object-fit")}}</li>
+</ul>
diff --git a/files/fr/web/css/background/index.html b/files/fr/web/css/background/index.html
new file mode 100644
index 0000000000..ea37897c46
--- /dev/null
+++ b/files/fr/web/css/background/index.html
@@ -0,0 +1,160 @@
+---
+title: background
+slug: Web/CSS/background
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/background
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>background</code></strong> est une <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">propriété raccourcie</a> qui permet de définir les différentes valeurs des propriétés liées à la gestion des arrière-plans d'un élément (couleur, image, origine, taille, répétition, etc.).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/background.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Elle permet de définir une ou plusieurs valeurs pour : {{cssxref("background-clip")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}, et {{cssxref("background-attachment")}}.</p>
+
+<p>Lorsqu'on utilise la propriété raccourcie <code>background</code>, les valeurs fournies sont appliquées et pour les valeurs absentes, la propriété réinitialisera les propriétés détaillées avec leurs valeurs initiales.</p>
+
+<div class="note">
+<p><strong>Note :</strong> La propriété {{cssxref("background-color")}} ne peut être définie que sur le dernier arrière-plan car il n'y a qu'une seule couleur d'arrière-plan pour un élément.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* On utilise une couleur &lt;background-color&gt; */
+background: green;
+
+/* Ici, une &lt;bg-image&gt; avec &lt;repeat-style&gt; */
+background: url("test.jpg") repeat-y;
+
+/* Là &lt;box&gt; et &lt;background-color&gt; */
+background: border-box red;
+
+/* Ici on utilise une seule image, centrée */
+/* et remise à l'échelle */
+background: no-repeat center/80% url("../img/image.png");
+</pre>
+
+<p>La propriété <code>background</code> permet de définir une ou plusieurs couches d'arrière-plan, séparées par des virgules. Chacune des couches peut être définie avec :</p>
+
+<ul>
+ <li>Zéro ou une occurence d'une valeur :
+  <ul>
+   <li><code><a href="#&lt;attachment>">&lt;attachment&gt;</a></code></li>
+   <li><code><a href="#&lt;bg-image>">&lt;bg-image&gt;</a></code></li>
+   <li><code><a href="#&lt;position>">&lt;position&gt;</a></code></li>
+   <li><code><a href="#&lt;bg-size>">&lt;bg-size&gt;</a></code></li>
+   <li><code><a href="#&lt;repeat-style>">&lt;repeat-style&gt;</a></code></li>
+  </ul>
+ </li>
+ <li>Une valeur <code><a href="#&lt;bg-size>">&lt;bg-size&gt;</a></code> qui peut uniquement être utilisée directement après une valeur <code><a href="#&lt;position>">&lt;position&gt;</a></code> suivie d'une barre oblique (par exemple "<code>center/80%</code>")</li>
+ <li>Une valeur <code><a href="#&lt;box>">&lt;box&gt;</a></code> présente zéro, une voire deux fois. Si elle n'est présente qu'une fois, cette valeur sera utilisée pour définir {{cssxref("background-origin")}} et {{cssxref("background-clip")}}. Si elle est présente à deux reprises, la première occurrence sera utilisée pour définir {{cssxref("background-origin")}} et la seconde définira {{cssxref("background-clip")}}.</li>
+ <li>Une valeur <code><a href="#&lt;background-color>">&lt;background-color&gt;</a></code> qui peut uniquement être incluse pour la dernière couche qui est définie.</li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;attachment&gt;</code></dt>
+ <dd>Voir {{cssxref("background-attachment")}}</dd>
+ <dt><code>&lt;box&gt;</code></dt>
+ <dd>Voir {{cssxref("background-clip")}} et {{cssxref("background-origin")}}</dd>
+ <dt><code>&lt;background-color&gt;</code></dt>
+ <dd>Voir {{cssxref("background-color")}}</dd>
+ <dt><code>&lt;bg-image&gt;</code></dt>
+ <dd>Voir {{Cssxref("background-image")}}</dd>
+ <dt><code>&lt;position&gt;</code></dt>
+ <dd>Voir {{cssxref("background-position")}}</dd>
+ <dt><code>&lt;repeat-style&gt;</code></dt>
+ <dd>Voir {{cssxref("background-repeat")}}</dd>
+ <dt><code>&lt;bg-size&gt;</code></dt>
+ <dd>Voir {{cssxref("background-size")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="banniere"&gt;
+  Dessine-moi une étoile&lt;br/&gt;
+  Qui brille&lt;br/&gt;
+  Dans le ciel.
+&lt;/p&gt;
+&lt;p class="attention"&gt;Voici un paragraphe !&lt;p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css' highlight:[2,6];">.attention {
+  background: pink;
+}
+
+.banniere {
+  background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #99f repeat-y fixed;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Les navigateurs ne fournissent pas d'informations spécifiques aux outils d'assistance quant aux images d'arrière-plan. Les lecteurs d'écran ne pourront donc pas annoncer le sens de l'image aux utilisateurs. Si l'image contient des informations critiques pour la compréhension générale de la page, mieux vaudra décrire ces informations de façon sémantique dans le document.</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">Comprendre la règle 1.1 du WCAG</a></li>
+ <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">Comprendre les critères pour 1.1.1, comprendre WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-background', 'background')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>La propriété raccourcie a été étendue pour gérer plusieurs arrière-plans et également gérer les propriétés {{cssxref("background-size")}}, {{cssxref("background-origin")}} et {{cssxref("background-clip")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background', 'background')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Pas de modification significative.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#background', 'background')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une poule requête sur : <a href="https://github.com/mdn/browser-compat-data/blob/master/css/properties/background.json">https://github.com/mdn/browser-compat-data/blob/master/css/properties/background.json</a>.</p>
+
+<p>{{Compat("css.properties.background")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("box-decoration-break")}}</li>
+ <li><a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">Les gradients</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Background_and_Borders/Utiliser_des_fonds_multiples">Gérer plusieurs arrière-plans</a></li>
+</ul>
diff --git a/files/fr/web/css/basic-shape/index.html b/files/fr/web/css/basic-shape/index.html
new file mode 100644
index 0000000000..e72b58ad92
--- /dev/null
+++ b/files/fr/web/css/basic-shape/index.html
@@ -0,0 +1,189 @@
+---
+title: <basic-shape>
+slug: Web/CSS/basic-shape
+tags:
+  - CSS
+  - Reference
+  - Type
+translation_of: Web/CSS/basic-shape
+---
+<div>{{CSSRef}}</div>
+
+<p>Le type <strong><code>&lt;basic-shape&gt;</code></strong> permet de définir une forme simple en utilisant des fonctions et est notamment utilisé pour les propriétés {{cssxref("clip-path")}}, {{cssxref("shape-outside")}} ou {{cssxref("offset-path")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/type-basic-shape.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Lorsque cette syntaxe est utilisée pour définir des formes, la boîte de référence sera indiquée par chaque propriété qui utilise des valeurs <code>&lt;basic-shape&gt;</code>. L'origine du repère utilisé se situe dans le coin en haut à gauche de la boîte de référence avec un axe des abscisses allant vers la droite et un axe des ordonnées allant vers le bas. Toutes les longueurs exprimées en pourcentages sont calculées en fonction des dimensions de la boîte de référence.</p>
+
+<p>Les formes qui suivent sont prises en charge. Toutes les valeurs <code>&lt;basic-shape&gt;</code> sont créées via une notation fonctionnelle (pour analyser la syntaxe, se référer à <a href="/fr/docs/Web/CSS/Syntaxe_de_d%C3%A9finition_des_valeurs">cette page explicative</a>).</p>
+
+<dl>
+ <dt><code><a name="inset()"></a>inset()</code></dt>
+ <dd>
+ <pre class="syntaxbox">inset( &lt;shape-arg&gt;{1,4} [round &lt;border-radius&gt;]? )</pre>
+
+ <p>Cette fonction permet de définir un rectangle incrusté (<em>inset</em>).</p>
+
+ <p>Lorsque les quatre premiers arguments sont fournis, ils représentent respectivement les décalages, vers l'intérieur, depuis les côtés haut, droit, bas et gauche par rapport à la boîte de référence. Ces arguments peuvent être utilisés de la même façon que pour {{cssxref("margin")}} afin d'utiliser seulement une, deux ou quatre valeurs.</p>
+
+ <p>L'argument facultatif <code>&lt;border-radius&gt;</code> permet de définir des coins arrondis pour le rectangle incrusté en utilisant la même syntaxe que pour la propriété raccourcie {{cssxref("border-radius")}}.</p>
+
+ <p>Si on utilise deux valeurs de décalage pour le même axe (par exemple un décalage depuis le bas et un décalage depuis le haut) dont la somme est supérieure à la dimension de la boîte sur cet axe, la forme obtenue ne contiendra aucune zone. On aura alors une zone de flottement vide.</p>
+ </dd>
+ <dt><code><a name="polygon()"></a>polygon()</code></dt>
+ <dd>
+ <pre class="syntaxbox">polygon( [&lt;fill-rule&gt;,]? [&lt;shape-arg&gt; &lt;shape-arg&gt;]# )</pre>
+
+ <p><code>&lt;fill-rule&gt;</code> représente <a href="/fr/docs/Web/SVG/Attribute/fill-rule">la règle de remplissage</a> utilisée pour déterminer l'intérieur du polygone. Les valeurs possibles sont <code>nonzero</code> et <code>evenodd</code>. La valeur par défaut pour cet argument est <code>nonzero</code>.</p>
+
+ <p>Ensuite, chaque paire d'arguments dans la liste représente les coordonnées <em>x<sub>i</sub></em> et <em>y<sub>i</sub></em> du i-ème sommet du polygone.</p>
+ </dd>
+ <dt><code><a name="circle()"></a>circle(</code>)</dt>
+ <dd>
+ <pre class="syntaxbox">circle( [&lt;shape-radius&gt;]? [at &lt;position&gt;]? )</pre>
+
+ <p>L'argument <code>&lt;shape-radius&gt;</code> représente le rayon du cercle. Les valeurs négatives ne sont pas autorisées et les valeurs exprimées en pourcentages seront calculées de la façon suivante en fonction de la hauteur et de la largeur de la boîte de référence <code>sqrt(largeur^2+hauteur^2)/sqrt(2)</code>.</p>
+
+ <p>L'argument {{cssxref("&lt;position&gt;")}} définit la position pour le centre du cercle. La valeur par défaut est <code>center</code>.</p>
+ </dd>
+ <dt><code><a name="ellipse()"></a>ellipse()</code></dt>
+ <dd>
+ <pre class="syntaxbox">ellipse( [&lt;shape-radius&gt;{2}]? [at &lt;position&gt;]? )</pre>
+
+ <p>Les arguments <code>&lt;shape-radius&gt;</code> représentent les demi-axes horizontaux (r<sub>x</sub>) et verticaux (r<sub>y</sub>) de l'ellipse. Les valeurs négatives ne sont pas autorisées. Les valeurs exprimées en pourcentages sont calculées : en fonction de la hauteur de la boîte de référence pour le demi-axe vertical, en fonction de la largeur de la boîte de référence pour le demi-axe horizontal.</p>
+
+ <p>L'argument {{cssxref("&lt;position&gt;")}} définit l'emplacement du centre de l'ellipse. La valeur par défaut est <code>center</code>.</p>
+ </dd>
+ <dt><code><a id="path()" name="path()"></a>path()</code></dt>
+ <dd>
+ <pre class="syntaxbox"><code>path( [&lt;fill-rule&gt;,]? &lt;string&gt;)</code></pre>
+
+ <p>L'argument optionnel <code>&lt;fill-rule&gt;</code> représente <a href="/fr/docs/Web/SVG/Attribute/fill-rule">la règle de remplissage</a> utilisée pour déterminer l'intérieur du chemin. Les valeurs possibles sont <code>nonzero</code> et <code>evenodd</code>. La valeur par défaut est <code>nonzero</code>.</p>
+
+ <p>L'argument obligatoire <code>&lt;string&gt;</code> est une chaîne de caractères, entre quotes, représentant <a href="/fr/docs/Web/SVG/Attribute/d">un chemin SVG</a>.</p>
+ </dd>
+</dl>
+
+<p>Les arguments qui ne sont pas définis ci-avant suivent cette syntaxe :</p>
+
+<pre class="syntaxbox">&lt;shape-arg&gt; = &lt;length&gt; | &lt;percentage&gt;
+&lt;shape-radius&gt; = &lt;length&gt; | &lt;percentage&gt; | closest-side | farthest-side</pre>
+
+<p><code>closest-side</code> utilise la distance entre le centre de la forme et le côté le plus proche de la boîte de la référence. Pour les cercles, cela au côté le plus proche dans les deux axes. Pour les ellipses, cela correspond au côté le plus proche dans l'axe du rayon de l'ellipse.</p>
+
+<p>À l'inverse, <code>farthest-side</code> utilise la distance entre le centre de la forme et le côté le plus éloigné de la boîte de référence.</p>
+
+<h2 id="Les_valeurs_calculées_des_formes_simples">Les valeurs calculées des formes simples</h2>
+
+<p>Les valeurs d'une fonction <code>&lt;basic-shape&gt;</code> sont calculées comme indiqué, avec ces exceptions :</p>
+
+<ul>
+ <li>Les valeurs absentes sont incluses et leurs valeurs calculées sont leurs valeurs par défaut.</li>
+ <li>Une valeur {{cssxref("&lt;position&gt;")}} pour <code>circle()</code> ou  <code>ellipse()</code> est calculée comme une paire de distances indiquant les décalages (horizontaux puis verticaux) depuis l'origine en haut à gauche. Chaque décalage est indiqué comme une combinaison d'une longueur absolue et d'un pourcentage.</li>
+ <li>Pour <code>inset()</code>, une valeur {{cssxref("border-radius")}} est calculée comme une liste développée de de huit valeurs {{cssxref("length")}} ou de huit pourcentages.</li>
+</ul>
+
+<h2 id="L'interpolation_des_formes_simples">L'interpolation des formes simples</h2>
+
+<div>Afin d'obtenir une interpolation entre deux formes simples, il faut que les règles qui suivent soient respectées. Les valeurs des argument des fonctions de formes sont interpolées comme une liste simple. Les valeurs de la liste sont interpolées comme <a href="/fr/docs/Web/CSS/length">des longueurs</a>, <a href="/fr/docs/Web/CSS/percentage">des pourcentages</a> ou <a href="/fr/docs/Web/CSS/calc">des valeurs calculées</a> lorsque c'est possible. Si les valeurs de la liste ne sont pas de ces types mais sont identiques, ces valeurs seront interpolées.</div>
+
+<div> </div>
+
+<ul>
+ <li>Les deux formes doivent partager la même boîte de référence.</li>
+ <li>Si les deux formes sont du même type et que ce type est <code>ellipse()</code> ou <code>circle()</code>, qu'aucun des rayons n'utilise les mots-clés <code>closest-side</code> ou <code>farthest-side</code>, on aura une interpolation entre chaque valeur.</li>
+ <li>Si les deux formes sont de type <code>inset()</code>, on aura une interpolation entre chaque valeur.</li>
+ <li>Si les deux formes sont de type <code>polygon()</code>, que les deux polygones possèdent le même nombre de sommets et utilisent la même règle <code>fill-rule</code>, l'interpolation sera appliquée entre chaque valeur.</li>
+ <li>Si les deux formes sont de type <code>path()</code>, que les deux chemins possèdent le même nombre de composantes, dans le même ordre et qu'elles sont de même type, les données sont interpolées entre chaque chemin comme des nombres réels.</li>
+ <li>Dans les autres cas, aucune interpolation n'est définie.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.clipped {
+  clip-path: circle(15px at 20px 20px); // bugs 1247229 / 1075457 pour Firefox
+}</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;img class="clipped" src="https://pixabay.com/static/uploads/photo/2016/01/17/04/29/rain-drops-1144448_960_720.jpg" alt="Rain Drops"&gt;
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Exemple_simple',"500","500")}}</p>
+
+<h3 id="Polygone_animé">Polygone animé</h3>
+
+<p>Dans cet exemple, on utilise la règle-@ {{cssxref("@keyframes")}} afin d'animer un chemin de rognage entre deux polygones. On notera que les deux polygones ont le même nombre de sommets, une condition nécessaire pour que l'animation fonctionne.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;div&gt;&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">div {
+  width: 300px;
+  height: 300px;
+  background: red;
+  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
+  animation: 5s poly infinite alternate ease-in-out;
+  margin: 1em auto;
+  display: block;
+}
+
+@keyframes poly {
+  from {
+    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
+  }
+
+  to {
+    clip-path: polygon(44% 26%, 58% 38%, 58% 38%, 44% 81%, 44% 81%, 25% 49%);
+  }
+}</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample('Polygone_animé','100%', '340')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Shapes', '#basic-shape-functions', '&lt;basic-shape&gt;')}}</td>
+   <td>{{Spec2('CSS Shapes')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.types.basic-shape")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("clip-path")}}</li>
+ <li>{{cssxref("shape-outside")}}</li>
+ <li><a href="/fr/docs/Outils/Inspecteur/Comment/Edit_CSS_shapes">Éditer des contours de formes CSS avec les outils de développement Firefox</a></li>
+</ul>
diff --git a/files/fr/web/css/blend-mode/index.html b/files/fr/web/css/blend-mode/index.html
new file mode 100644
index 0000000000..d7ef5c5700
--- /dev/null
+++ b/files/fr/web/css/blend-mode/index.html
@@ -0,0 +1,353 @@
+---
+title: <blend-mode>
+slug: Web/CSS/blend-mode
+tags:
+  - CSS
+  - Reference
+  - Type
+translation_of: Web/CSS/blend-mode
+---
+<div>{{CSSRef}}</div>
+
+<p>Le type <strong><code>&lt;blend-mode&gt;</code></strong> est un ensemble de mots-clés qui permettent de décrire les différents modes de fusion (<em>blend modes</em>). Ce type de valeur est utilisé pour les propriétés {{cssxref("background-blend-mode")}} et {{cssxref("mix-blend-mode")}}.</p>
+
+<p>Un mode de fusion est une méthode de calcul permettant de déterminer la couleur finale d'un pixel lorsque plusieurs couches sont empilées. Chaque mode de fusion prend en entrée la couleur du premier plan et de l'arrière-plan (dans cet ordre) pour calculer la valeur de la couleur obtenue. Le résultat final est la couche visible obtenue lorsque les différents plans ont été fusionnés avec les modes de fusion.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Une valeur de type de données <code>&lt;blend-mode&gt;</code> s'écrit avec l'un des mots-clés suivants.</p>
+
+<h3 id="Valeurs_possibles">Valeurs possibles</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>
+ <p>La couleur finale obtenue est la couleur du premier plan, quelle que soit la couleur de l'arrière-plan. On obtient ainsi un effet similaire à la superposition de deux feuilles de papier opaques.</p>
+
+ <div class="hidden" id="normal">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: normal;
+}</pre>
+ </div>
+
+ <p>{{EmbedLiveSample('normal', "300", "300")}}</p>
+ </dd>
+ <dt><code>multiply</code></dt>
+ <dd>
+ <p>La couleur finale est obtenue en multipliant les couleurs du premier plan et de l'arrière-plan.<br>
+  Si une des couches est noire, le résultat obtenu sera une image noire. Si une des couches est blanche, cela ne modifiera pas l'autre image. On obtient ainsi un effet semblable à la superposition de deux transparents.</p>
+
+ <div class="hidden" id="multiply">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: multiply;
+}</pre>
+ </div>
+
+ <p>{{EmbedLiveSample('multiply', "300", "300")}}</p>
+ </dd>
+ <dt><code>screen</code></dt>
+ <dd>
+ <p>La couleur finale est obtenue en : inversant les couleurs des deux plans, en les multipliant et en inversant la couleur obtenue. Si une des couches est noire, le résultat obtenu sera l'image de l'autre couche. Si une des couches est blanche, l'image obtenue sera blanche. L'effet obtenu est semblable à la projection de deux images sur un écran.</p>
+
+ <div class="hidden" id="screen">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: screen;
+}</pre>
+ </div>
+
+ <p>{{EmbedLiveSample('screen', "300", "300")}}</p>
+ </dd>
+ <dt><code>overlay</code></dt>
+ <dd>La couleur finale est celle décrite par <code>multiply</code> si l'arrière-plan est plus sombre ou de <code>screen</code> si elle est plus claire. On a un effet semblable à <code>hard-light</code> avec les couches interverties.
+ <div class="hidden" id="overlay">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: overlay;
+}</pre>
+ </div>
+
+ <p>{{EmbedLiveSample('overlay', "300", "300")}}</p>
+ </dd>
+ <dt><code>darken</code></dt>
+ <dd>
+ <p>La couleur finale est la couleur la plus sombre des deux couches.</p>
+
+ <div class="hidden" id="darken">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: darken;
+}</pre>
+ </div>
+
+ <p>{{EmbedLiveSample('darken', "300", "300")}}</p>
+ </dd>
+ <dt><code>lighten</code></dt>
+ <dd>
+ <p>La couleur finale est la couleur la plus claire des deux couches.</p>
+
+ <div class="hidden" id="lighten">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: lighten;
+}</pre>
+ </div>
+
+ <p>{{EmbedLiveSample('lighten', "300", "300")}}</p>
+ </dd>
+ <dt><code>color-dodge</code></dt>
+ <dd>
+ <p>La couleur finale est obtenue en divisant la couleur de l'arrière-plan avec l'inverse de la couleur du premier plan.<br>
+  Un premier-plan noir n'entraînera aucun changement.</p>
+
+ <div class="hidden" id="color-dodge">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: color-dodge;
+}</pre>
+ </div>
+
+ <p>{{EmbedLiveSample('color-dodge', "300", "300")}}</p>
+ </dd>
+ <dt><code>color-burn</code></dt>
+ <dd>
+ <p>La couleur finale est obtenu en inversant la couleur de l'arrière-plan qui sera divisée par la couleur du premier-plan puis inversée. Un premier-plan blanc n'entraînera aucun changement et un premier-plan qui possède exactement l'inverse de l'arrière-plan entraînera une image noire.</p>
+
+ <div class="hidden" id="color-burn">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: color-burn;
+}</pre>
+ </div>
+
+ <p>{{EmbedLiveSample('color-burn', "300", "300")}}</p>
+ </dd>
+ <dt><code>hard-light</code></dt>
+ <dd>
+ <p>La couleur finale est le résultat de <code>multiply</code> si le premier plan est plus sombre ou de <code>screen</code> si la couleur de premier-plan est plus claire. L'effet obtenu est équivalent à <code>overlay</code> avec les deux couches interverties.</p>
+
+ <div class="hidden" id="hard-light">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: hard-light;
+}</pre>
+ </div>
+
+ <p>{{EmbedLiveSample('hard-light', "300", "300")}}</p>
+ </dd>
+ <dt><code>soft-light</code></dt>
+ <dd>
+ <p>La couleur finale obtenue est semblable à <code>hard-light</code>, mais est plus douce<em><code>.</code></em></p>
+
+ <div class="hidden" id="soft-light">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: soft-light;
+}</pre>
+ </div>
+
+ <p>{{EmbedLiveSample('soft-light', "300", "300")}}</p>
+ </dd>
+ <dt><code>difference</code></dt>
+ <dd>
+ <p>La couleur finale est obtenue en soustrayant la couleur la plus sombre à la couleur la plus claire. Une couche noire n'aura aucun effet et une couche blanche inversera l'autre image.</p>
+
+ <div class="hidden" id="difference">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: difference;
+}</pre>
+ </div>
+
+ <p>{{EmbedLiveSample('difference', "300", "300")}}</p>
+ </dd>
+ <dt><code>exclusion</code></dt>
+ <dd>
+ <p>La couleur finale obtenue est semblable à <code>difference</code> avec moins de contraste. Comme pour <code>difference</code>, une couche noire n'aura aucun effet et une couche blanche inversera l'autre couche.</p>
+
+ <div class="hidden" id="exclusion">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: exclusion;
+}</pre>
+ </div>
+
+ <p>{{EmbedLiveSample('exclusion', "300", "300")}}</p>
+ </dd>
+ <dt><code>hue</code></dt>
+ <dd>
+ <p>La couleur finale aura la teinte de la couleur du premier-plan et la saturation et la luminosité de la couleur de l'arrière-plan.</p>
+
+ <div class="hidden" id="hue">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: hue;
+}</pre>
+ </div>
+
+ <p>{{EmbedLiveSample('hue', "300", "300")}}</p>
+ </dd>
+ <dt><code>saturation</code></dt>
+ <dd>
+ <p>La couleur finale aura la saturation de la couleur du premier plan et la teinte et la luminosité de la couleur de l'arrière-plan.</p>
+
+ <div class="hidden" id="saturation">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: saturation;
+}</pre>
+ </div>
+
+ <p>{{EmbedLiveSample('saturation', "300", "300")}}</p>
+ </dd>
+ <dt><code>color</code></dt>
+ <dd>
+ <p>La couleur finale aura la teinte et la saturation du premier plan et la luminosité de l'arrière-plan. Cet effet conserve les niveaux de gris et peut être utilisé pour coloriser le premier plan.</p>
+
+ <div class="hidden" id="color">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: color;
+}</pre>
+ </div>
+
+ <p>{{EmbedLiveSample('color', "300", "300")}}</p>
+ </dd>
+ <dt><code>luminosity</code></dt>
+ <dd>
+ <p>La couleur finale aura la luminosité de la couleur du premier plan et la teinte et la saturation de la couleur de l'arrière-plan.</p>
+
+ <div class="hidden" id="luminosity">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: luminosity;
+}</pre>
+ </div>
+
+ <p>{{EmbedLiveSample('luminosity', "300", "300")}}</p>
+ </dd>
+</dl>
+
+<h2 id="L'interpolation_des_modes_de_fusion">L'interpolation des modes de fusion</h2>
+
+<p>Il n'y a pas d'interpolation pour les modes de fusion. Toute transition se produit brutalement.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Compositing', '#ltblendmodegt', '&lt;blend-mode&gt;')}}</td>
+   <td>{{Spec2('Compositing')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une <em>pull request</em> sur ce dépôt: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("css.types.blend-mode")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés utilisant des valeurs de ce type :
+  <ul>
+   <li>{{cssxref("background-blend-mode")}}</li>
+   <li>{{cssxref("mix-blend-mode")}}</li>
+  </ul>
+ </li>
+ <li><a href="https://en.wikipedia.org/wiki/Blend_modes">Les modes de fusion sur Wikipédia (en anglais)</a></li>
+ <li><a href="/fr/docs/Web/CSS/Reference">La référence CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/block-size/index.html b/files/fr/web/css/block-size/index.html
new file mode 100644
index 0000000000..e77282ba64
--- /dev/null
+++ b/files/fr/web/css/block-size/index.html
@@ -0,0 +1,109 @@
+---
+title: block-size
+slug: Web/CSS/block-size
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/block-size
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>block-size</code></strong> est une propriété <em>logique</em> qui permet de définir la taille de l'élément dans la direction orthogonale au sens de lecture. Selon la valeur de la propriété {{cssxref("writing-mode")}}, elle correspondra à la propriété physique {{cssxref("width")}} ou {{cssxref("height")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/block-size.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Si le mode d'écriture est vertical, la valeur de <code>block-size</code> fera référence à la largeur de l'élément et sinon, elle fera référence à sa hauteur.</p>
+
+<p>L'autre propriété logique permettant de définir la dimension sur l'autre axe est {{cssxref("inline-size")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+block-size: 300px;
+block-size: 25em;
+
+/* Valeurs proportionnelles */
+/* Type &lt;percentage&gt;        */
+block-size: 75%;
+
+/* Valeurs avec un mot-clé */
+block-size: 25em border-box;
+block-size: 75% content-box;
+block-size: max-content;
+block-size: min-content;
+block-size: available;
+block-size: fit-content;
+block-size: auto;
+
+/* Valeurs globales */
+block-size: inherit;
+block-size: initial;
+block-size: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>La propriété <code>block-size</code> peut prendre les mêmes valeurs que {{cssxref("width")}} et {{cssxref("height")}}.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple {
+  writing-mode: vertical-rl;
+  background-color: yellow;
+  block-size: 200px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#logical-dimension-properties", "block-size")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.block-size")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes : {{cssxref("width")}} et {{cssxref("height")}}</li>
+ <li>{{cssxref("writing-mode")}}</li>
+</ul>
diff --git a/files/fr/web/css/block_formatting_context/index.html b/files/fr/web/css/block_formatting_context/index.html
new file mode 100644
index 0000000000..5b324fc6bb
--- /dev/null
+++ b/files/fr/web/css/block_formatting_context/index.html
@@ -0,0 +1,44 @@
+---
+title: Contexte de formatage de blocs
+slug: Web/CSS/Block_formatting_context
+tags:
+  - CSS
+  - Reference
+  - Web
+translation_of: Web/Guide/CSS/Block_formatting_context
+---
+<div>{{CSSRef}}</div>
+
+<p>Un <strong>contexte de formatage de blocs</strong> (<em>block formatting context</em>) est une partie du rendu visuel par le CSS, d'une page web. C'est la région qui délimite la mise en page des blocs et dans laquelle les éléments flottant interagissent les uns avec les autres.</p>
+
+<p>Un contexte de formatage de blocs est créé dans les situations suivantes :</p>
+
+<ul>
+ <li>L'élément racine ou quelque chose qui le contient</li>
+ <li>Les éléments flottants (éléments avec une valeur pour la propriété {{cssxref("float")}} autre que <code>none</code>)</li>
+ <li>Les éléments avec une position absolue (éléments avec la propriété {{cssxref("position")}} à <code>absolute</code> ou <code>fixed</code>)</li>
+ <li>Les blocs en ligne (éléments avec la propriété {{cssxref("display")}} à <code>inline-block</code>)</li>
+ <li>Les cellules de tableau (éléments avec {{cssxref("display")}}<code>: table-cell</code>, ce qui est le défaut pour les cellules de tableau)</li>
+ <li>Les titres de tableau (éléments avec {{cssxref("display")}}<code>: table-caption</code>, ce qui est le défaut pour {{HTMLElement("caption")}})</li>
+ <li>Les éléments où {{cssxref("overflow")}} a une valeur autre que <code>visible</code></li>
+ <li>Les boîtes flexibles (éléments avec {{cssxref("display")}}<code>: flex</code> ou <code>inline-flex</code>)</li>
+ <li>{{cssxref("display")}}<code>: flow-root</code></li>
+</ul>
+
+<p>Un contexte de formatage de blocs contient tout ce qui se trouve dans l'élément qui l'a créé, et qui ne se trouve pas aussi dans un élément descendant définissant un nouveau contexte de formatage de blocs.</p>
+
+<p>Les contextes de formatage de blocs sont important pour le positionnement (voir {{cssxref("float")}} et {{cssxref("clear")}}). Les règles de positionnement et de "libération" des blocs flottants (par {{cssxref("clear")}}) s'appliquent seulement aux éléments au sein d'un même contexte de formatage de blocs. Les blocs flottants n'influent pas sur le positionnement des éléments se trouvant dans d'autres contextes de formatage de blocs, et {{cssxref("clear")}} ne libère que des blocs flottants dans le même contexte de formatage de blocs.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#q15">CSS 2.1</a></li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("float")}}</li>
+ <li>{{cssxref("clear")}}</li>
+ <li>{{cssxref("display")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-block-color/index.html b/files/fr/web/css/border-block-color/index.html
new file mode 100644
index 0000000000..89093bbd82
--- /dev/null
+++ b/files/fr/web/css/border-block-color/index.html
@@ -0,0 +1,102 @@
+---
+title: border-block-color
+slug: Web/CSS/border-block-color
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/border-block-color
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>border-block-color</code></strong> définit la couleur de la bordure d'un élément sur les côtés de l'axe de bloc. Cette propriété correspondra à différentes propriétés physiques pour les couleurs de la bordure selon le mode d'écriture de l'élément, sa direction et l'orientation du texte. Autrement dit, cette propriété logique peut correspondre à {{cssxref("border-top-color")}} et {{cssxref("border-bottom-color")}} ou à {{cssxref("border-right-color")}} et {{cssxref("border-left-color")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<pre class="brush:css no-line-numbers">border-block-color: yellow;
+border-block-color: #F5F6F7;
+</pre>
+
+<p>Pour définir la couleur de la bordure sur l'autre dimension, on pourra utiliser la propriété logique {{cssxref("border-inline-color")}} qui définit {{cssxref("border-inline-start-color")}} et {{cssxref("border-inline-end-color")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;'color'&gt;</code></dt>
+ <dd>La couleur de la bordure. Voir {{cssxref("color")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.texteExemple {
+  writing-mode: vertical-lr;
+  border: 10px solid blue;
+  border-block-color: red;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="texteExemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-color", "border-block-color")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.border-block-color")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques qui peuvent correspondre à cette propriété :
+  <ul>
+   <li>{{cssxref("border-top-color")}},</li>
+   <li>{{cssxref("border-right-color")}},</li>
+   <li>{{cssxref("border-bottom-color")}},</li>
+   <li>{{cssxref("border-left-color")}}.</li>
+  </ul>
+ </li>
+ <li>Les propriétés relatives aux propriétés logiques : {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+ <li>{{bug("1297097")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-block-end-color/index.html b/files/fr/web/css/border-block-end-color/index.html
new file mode 100644
index 0000000000..1d2a352129
--- /dev/null
+++ b/files/fr/web/css/border-block-end-color/index.html
@@ -0,0 +1,117 @@
+---
+title: border-block-end-color
+slug: Web/CSS/border-block-end-color
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/border-block-end-color
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>border-block-end-color</code></strong> définit la couleur de la bordure pour le côté de la fin de l'élément orienté orthogonalement à l'axe de lecture. Elle correspond à une propriété physique selon le mode d'écriture de l'élément, sa directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}} ou {{cssxref("border-left-color")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-block-end-color.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cette propriété est à rapprocher des autres propriétés logiques permettant de définir les couleurs de la bordure d'un élément :</p>
+
+<ul>
+ <li>{{cssxref("border-block-start-color")}},</li>
+ <li>{{cssxref("border-inline-end-color")}},</li>
+ <li>{{cssxref("border-inline-start-color")}}.</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">border-block-end-color: red;
+border-block-end-color: #fffff;
+border-block-end-color: rgb(200, 0, 0);
+
+border-block-end-color: unset;
+border-block-end-color: initial;
+border-block-end-color: inherit;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;'border-color'&gt;</code></dt>
+ <dd>La couleur utilisée pour la bordure, voir {{cssxref("border-color")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  border: 10px solid blue;
+  border-block-end-color: red;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-end-color", "border-block-end-color")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-block-end-color")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes :
+  <ul>
+   <li>{{cssxref("border-top-color")}},</li>
+   <li>{{cssxref("border-right-color")}},</li>
+   <li>{{cssxref("border-bottom-color")}},</li>
+   <li>{{cssxref("border-left-color")}}.</li>
+  </ul>
+ </li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+ <li>{{bug("1297097")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-block-end-style/index.html b/files/fr/web/css/border-block-end-style/index.html
new file mode 100644
index 0000000000..efe5c0b546
--- /dev/null
+++ b/files/fr/web/css/border-block-end-style/index.html
@@ -0,0 +1,110 @@
+---
+title: border-block-end-style
+slug: Web/CSS/border-block-end-style
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-block-end-style
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>border-block-end-style</code></strong> définit le style de la bordure utilisé pour le côté de la fin de l'élément dans l'axe orthogonal au sens de lecture. Cette propriété logique correspondra à une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} selon les valeurs de {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-block-end-style.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Les autres propriétés logiques permettant de définir le style de la bordure sont les suivantes :</p>
+
+<ul>
+ <li>{{cssxref("border-inline-start-style")}}</li>
+ <li>{{cssxref("border-inline-end-style")}}</li>
+ <li>{{cssxref("border-block-start-style")}}.</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">border-block-end-style: dashed;
+border-block-end-style: dotted;
+border-block-end-style: groove;</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;'border-style'&gt;</code></dt>
+ <dd>Le style de la ligne pour la bordure, voir {{cssxref("border-style")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  border: 5px solid blue;
+  border-block-end-style: dashed;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-end-style", "border-block-end-style")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-block-end-style")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes :
+  <ul>
+   <li>{{cssxref("border-top-style")}},</li>
+   <li>{{cssxref("border-right-style")}},</li>
+   <li>{{cssxref("border-bottom-style")}},</li>
+   <li>{{cssxref("border-left-style")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-block-end-width/index.html b/files/fr/web/css/border-block-end-width/index.html
new file mode 100644
index 0000000000..ea7b2adf47
--- /dev/null
+++ b/files/fr/web/css/border-block-end-width/index.html
@@ -0,0 +1,106 @@
+---
+title: border-block-end-width
+slug: Web/CSS/border-block-end-width
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-block-end-width
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>border-block-end-width</code></strong> définit la largeur de la bordure pour le côté de bloc de la fin « logique » de l'élément. Cette propriété logique correspond à l'une des propriétés physiques équivalentes en fonction du mode d'écriture, de la directionnalité et de l'orientation du texte. Autrement dit, elle correspondra à  {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}} ou a {{cssxref("border-left-width")}} selon les valeurs des propriétés pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-block-end-width.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cette propriété logique est à rapprocher des autres propriétés logiques {{cssxref("border-block-start-width")}}, {{cssxref("border-inline-end-width")}} et {{cssxref("border-inline-end-width")}} qui permettent de définir la largeur de la bordure pour les différents côtés de l'élément.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeur de longueur */
+/* Type &lt;length&gt;      */
+border-block-end-width: 5px;
+border-block-end-width: thick;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;'border-width'&gt;</code></dt>
+ <dd>La largeur utilisée pour la bordure, voir {{cssxref("border-width")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  border: 1px solid blue;
+  border-block-end-width: 5px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-end-width", "border-block-end-width")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-block-end-width")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes :
+  <ul>
+   <li>{{cssxref("border-top-width")}}</li>
+   <li>{{cssxref("border-right-width")}}</li>
+   <li>{{cssxref("border-bottom-width")}}</li>
+   <li>{{cssxref("border-left-width")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-block-end/index.html b/files/fr/web/css/border-block-end/index.html
new file mode 100644
index 0000000000..45a72f3d55
--- /dev/null
+++ b/files/fr/web/css/border-block-end/index.html
@@ -0,0 +1,118 @@
+---
+title: border-block-end
+slug: Web/CSS/border-block-end
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-block-end
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>border-block-end</code></strong> est une propriété raccourcie qui permet de définir la bordure d'un élément pour le côté correspondant à la fin de l'élément dans l'axe orthogonal au sens de lecture. Elle peut être utilisée pour définir les valeurs de {{cssxref("border-block-end-width")}}, {{cssxref("border-block-end-style")}} et {{cssxref("border-block-end-color")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-block-end.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cette propriété logique correspond à l'une des propriété physique équivalente selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}} ou {{cssxref("border-left")}} selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<p>On peut rapprocher cette propriété des autres propriétés logiques raccourcies définissant les bordures des autres côtés :</p>
+
+<ul>
+ <li>{{cssxref("border-block-start")}},</li>
+ <li>{{cssxref("border-inline-end")}},</li>
+ <li>{{cssxref("border-inline-start")}}.</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">border-block-end: 1px;
+border-block-end: 2px dotted;
+border-block-end: medium dashed green;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>Une ou plusieurs valeurs parmi les suivantes, dans n'importe quel ordre :</p>
+
+<dl>
+ <dt><code>&lt;'border-width'&gt;</code></dt>
+ <dd>La largeur de la bordure, voir {{cssxref("border-width")}}.</dd>
+ <dt><code>&lt;'border-style'&gt;</code></dt>
+ <dd>Le style utilisé pour la ligne de la bordure, {{cssxref("border-style")}}.</dd>
+ <dt><code>&lt;'color'&gt;</code></dt>
+ <dd>La couleur de la bordure, voir {{cssxref("color")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-rl;
+  border-block-end: 5px dashed blue;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-end", "border-block-end")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-block-end")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes :
+  <ul>
+   <li>{{cssxref("border-top")}},</li>
+   <li>{{cssxref("border-right")}},</li>
+   <li>{{cssxref("border-bottom")}},</li>
+   <li>{{cssxref("border-left")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-block-start-color/index.html b/files/fr/web/css/border-block-start-color/index.html
new file mode 100644
index 0000000000..95ac2e171c
--- /dev/null
+++ b/files/fr/web/css/border-block-start-color/index.html
@@ -0,0 +1,116 @@
+---
+title: border-block-start-color
+slug: Web/CSS/border-block-start-color
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/border-block-start-color
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>border-block-start-color</code></strong> définit la couleur de la bordure pour le côté du début de l'élément orienté orthogonalement à l'axe de lecture. Elle correspond à une propriété physique selon le mode d'écriture de l'élément, sa directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}} ou {{cssxref("border-left-color")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-block-start-color.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cette propriété est à rapprocher des autres propriétés logiques permettant de définir les couleurs de la bordure d'un élément :</p>
+
+<ul>
+ <li>{{cssxref("border-block-end-color")}},</li>
+ <li>{{cssxref("border-inline-end-color")}},</li>
+ <li>{{cssxref("border-inline-start-color")}}.</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">border-block-start-color: red;
+border-block-start-color: #fffff;
+border-block-start-color: rgb(200, 0, 0);
+
+border-block-start-color: unset;
+border-block-start-color: initial;
+border-block-start-color: inherit;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;'border-color'&gt;</code></dt>
+ <dd>Voir {{cssxref("border-color")}}</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  border: 10px solid blue;
+  border-block-start-color: red;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-start-color", "border-block-start-color")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-block-start-color")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes :
+  <ul>
+   <li>{{cssxref("border-top-color")}},</li>
+   <li>{{cssxref("border-right-color")}},</li>
+   <li>{{cssxref("border-bottom-color")}},</li>
+   <li>{{cssxref("border-left-color")}}.</li>
+  </ul>
+ </li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-block-start-style/index.html b/files/fr/web/css/border-block-start-style/index.html
new file mode 100644
index 0000000000..5b00ba2aaf
--- /dev/null
+++ b/files/fr/web/css/border-block-start-style/index.html
@@ -0,0 +1,111 @@
+---
+title: border-block-start-style
+slug: Web/CSS/border-block-start-style
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-block-start-style
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>border-block-start-style</code></strong> définit le style de la bordure utilisé pour le côté du début de l'élément dans l'axe orthogonal au sens de lecture. Cette propriété logique correspondra à une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} selon les valeurs de {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-block-start-style.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Les autres propriétés logiques permettant de définir le style de la bordure sont les suivantes :</p>
+
+<ul>
+ <li>{{cssxref("border-inline-start-style")}}</li>
+ <li>{{cssxref("border-inline-end-style")}}</li>
+ <li>{{cssxref("border-block-end-style")}}.</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* border-block-start-style: style<em> */</em>
+border-block-start-style: dashed;
+border-block-start-style: dotted;
+border-block-start-style: groove;</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;'border-style'&gt;</code></dt>
+ <dd>Le style utilisé pour la ligne de la bordure, voir {{cssxref("border-style")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  border: 5px solid blue;
+  border-block-start-style: dashed;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-start-style", "border-block-start-style")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-block-start-style")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes :
+  <ul>
+   <li>{{cssxref("border-top-style")}},</li>
+   <li>{{cssxref("border-right-style")}},</li>
+   <li>{{cssxref("border-bottom-style")}},</li>
+   <li>{{cssxref("border-left-style")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-block-start-width/index.html b/files/fr/web/css/border-block-start-width/index.html
new file mode 100644
index 0000000000..81552b8563
--- /dev/null
+++ b/files/fr/web/css/border-block-start-width/index.html
@@ -0,0 +1,107 @@
+---
+title: border-block-start-width
+slug: Web/CSS/border-block-start-width
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/border-block-start-width
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>border-block-start-width</code></strong> définit la largeur de la bordure pour le côté de bloc du début « logique » de l'élément. Cette propriété logique correspond à l'une des propriétés physiques équivalentes en fonction du mode d'écriture, de la directionnalité et de l'orientation du texte. Autrement dit, elle correspondra à  {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}} ou a {{cssxref("border-left-width")}} selon les valeurs des propriétés pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-block-start-width.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cette propriété logique est à rapprocher des autres propriétés logiques {{cssxref("border-inline-start-width")}}, {{cssxref("border-block-end-width")}} et {{cssxref("border-inline-end-width")}} qui permettent de définir la largeur de la bordure pour les différents côtés de l'élément.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeur de longueur */
+/* Type &lt;length&gt; */
+border-block-start-width: 5px;
+border-block-start-width: thick;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;'border-width'&gt;</code></dt>
+ <dd>Voir {{cssxref("border-width")}}</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  border: 1px solid blue;
+  border-block-start-width: 5px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-start-width", "border-block-start-width")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-block-start-width")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes :
+  <ul>
+   <li>{{cssxref("border-top-width")}}</li>
+   <li>{{cssxref("border-right-width")}}</li>
+   <li>{{cssxref("border-bottom-width")}}</li>
+   <li>{{cssxref("border-left-width")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-block-start/index.html b/files/fr/web/css/border-block-start/index.html
new file mode 100644
index 0000000000..f4bc895c1e
--- /dev/null
+++ b/files/fr/web/css/border-block-start/index.html
@@ -0,0 +1,118 @@
+---
+title: border-block-start
+slug: Web/CSS/border-block-start
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-block-start
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>border-block-start</code></strong> est une propriété raccourcie qui permet de définir la bordure d'un élément pour le côté correspondant au début de l'élément dans l'axe orthogonal au sens de lecture. Elle peut être utilisée pour définir les valeurs de {{cssxref("border-block-start-width")}}, {{cssxref("border-block-start-style")}} et {{cssxref("border-block-start-color")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-block-start.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cette propriété logique correspond à l'une des propriété physique équivalente selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}} ou {{cssxref("border-left")}} selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<p>On peut rapprocher cette propriété des autres propriétés logiques raccourcies définissant les bordures des autres côtés :</p>
+
+<ul>
+ <li>{{cssxref("border-block-end")}},</li>
+ <li>{{cssxref("border-inline-end")}},</li>
+ <li>{{cssxref("border-inline-start")}}.</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css  no-line-numbers">border-block-start: 1px;
+border-block-start: 2px dotted;
+border-block-start: medium dashed green;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>Une ou plusieurs valeurs parmi les suivantes, dans n'importe quel ordre :</p>
+
+<dl>
+ <dt><code>&lt;'border-width'&gt;</code></dt>
+ <dd>La largeur utilisée pour la bordure de ce côté, voir {{cssxref("border-width")}}.</dd>
+ <dt><code>&lt;'border-style'&gt;</code></dt>
+ <dd>Le style utilisé pour la ligne de la bordure de ce côté, voir {{cssxref("border-style")}}.</dd>
+ <dt><code>&lt;'color'&gt;</code></dt>
+ <dd>La couleur de la bordure de ce côté, voir {{cssxref("color")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-rl;
+  border-block-start: 5px dashed blue;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-start", "border-block-start")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-block-start")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes :
+  <ul>
+   <li>{{cssxref("border-top")}},</li>
+   <li>{{cssxref("border-right")}},</li>
+   <li>{{cssxref("border-bottom")}},</li>
+   <li>{{cssxref("border-left")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-block-style/index.html b/files/fr/web/css/border-block-style/index.html
new file mode 100644
index 0000000000..192bb68db3
--- /dev/null
+++ b/files/fr/web/css/border-block-style/index.html
@@ -0,0 +1,103 @@
+---
+title: border-block-style
+slug: Web/CSS/border-block-style
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/border-block-style
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété<strong> <code>border-block-style</code></strong> permet de définir le style pour la bordure sur les côtés d'un élément qui correspondent à l'axe de bloc. Cette propriété logique correspond à différentes propriétés physiques selon le mode d'écriture, la direction et l'orientation du texte. Autrement dit, cette propriété correspond à {{cssxref("border-top-style")}} et {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} et {{cssxref("border-right-style")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de type &lt;'border-style'&gt; */
+border-block-style: dashed;
+border-block-style: dotted;
+border-block-style: groove;
+</pre>
+
+<p>Pour les autres côtés, la bordure peut être mise en forme grâce à la propriété {{cssxref("border-inline-style")}} qui définit {{cssxref("border-inline-start-style")}} et {{cssxref("border-inline-end-style")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeur">Valeur</h3>
+
+<dl>
+ <dt><code>&lt;'border-style'&gt;</code></dt>
+ <dd>Le style de la ligne pour la bordure. Voir {{ cssxref("border-style") }}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.texteExemple {
+  writing-mode: vertical-lr;
+  border: 5px solid blue;
+  border-block-style: dashed;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="texteExemple"&gt;Texte exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-style", "border-block-style")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.border-block-style")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques qui correspondent à cette propriété logique :
+  <ul>
+   <li>{{cssxref("border-top-style")}},</li>
+   <li>{{cssxref("border-right-style")}},</li>
+   <li>{{cssxref("border-bottom-style")}},</li>
+   <li>{{cssxref("border-left-style")}}.</li>
+  </ul>
+ </li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-block-width/index.html b/files/fr/web/css/border-block-width/index.html
new file mode 100644
index 0000000000..f3e3097db3
--- /dev/null
+++ b/files/fr/web/css/border-block-width/index.html
@@ -0,0 +1,96 @@
+---
+title: border-block-width
+slug: Web/CSS/border-block-width
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/border-block-width
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>border-block-width</code></strong> définit la largeur de la bordure sur les côtés d'un élément sur les côtés de l'axe de bloc. Cette propriété logique peut correspondre à différentes propriétés physiques selon le mode d'écriture, la direction et l'orientation du texte. Autrement dit, cette propriété correspond à {{cssxref("border-top-width")}} et {{cssxref("border-bottom-width")}} ou à {{cssxref("border-left-width")}} et {{cssxref("border-right-width")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de type &lt;'border-width'&gt; */
+border-block-width: 5px 10px;
+border-block-width: 5px;
+border-block-width: thick;
+</pre>
+
+<p>The border width in the other dimension can be set with {{cssxref("border-inline-width")}}, which sets {{cssxref("border-block-inline-width")}}, and {{cssxref("border-block-inline-width")}}.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeur">Valeur</h3>
+
+<dl>
+ <dt><code>&lt;'border-width'&gt;</code></dt>
+ <dd>La largeur de la bordure. Voir {{ cssxref("border-width") }}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.texteExemple {
+  writing-mode: vertical-lr;
+  border: 1px solid blue;
+  border-block-width: 5px 10px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="texteExemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-width", "border-block-width")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.border-block-width")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques qui peuvent correspondre à cette propriété logique {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, and {{cssxref("border-left-width")}}</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-block/index.html b/files/fr/web/css/border-block/index.html
new file mode 100644
index 0000000000..10586d701e
--- /dev/null
+++ b/files/fr/web/css/border-block/index.html
@@ -0,0 +1,111 @@
+---
+title: border-block
+slug: Web/CSS/border-block
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/border-block
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>border-block</code></strong> est une <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">propriété raccourcie</a> qui permet de paramétrer les différentes propriétés logiques relatives à la bordure sur l'axe en bloc.</p>
+
+<pre class="brush:css no-line-numbers">border-block: 1px;
+border-block: 2px dotted;
+border-block: medium dashed blue;
+</pre>
+
+<p><code>border-block</code> peut être utilisée afin de définir une ou plusieurs propriétés parmi {{cssxref("border-block-width")}}, {{cssxref("border-block-style")}} et {{cssxref("border-block-color")}}. La bordure est donc paramétrée de la même façon pour le début et la fin de l'axe de bloc. Les propriétés physiques correspondantes dépendront du mode d'écriture, de la direction et de l'orientation du texte. Autrement dit, cette propriété peut correspondre à {{cssxref("border-top")}} et {{cssxref("border-bottom")}} ou à {{cssxref("border-right")}} et {{cssxref("border-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<p>Les bordures sur l'autre dimension peuvent être définies grâce à {{cssxref("border-inline")}}, (qui est la proprété raccourcie pour {{cssxref("border-inline-start")}} et {{cssxref("border-inline-end")}}).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>La propriété <code>border-block</code> peut être utilisée avec une ou plusieurs de ces valeurs, quel que soit l'ordre.</p>
+
+<dl>
+ <dt><code>&lt;'border-width'&gt;</code></dt>
+ <dd>La largeur de la bordure. Voir {{cssxref("border-width")}}.</dd>
+ <dt><code>&lt;'border-style'&gt;</code></dt>
+ <dd>Le style pour la ligne de la bordure. Voir {{cssxref("border-style")}}.</dd>
+ <dt><code>&lt;'color'&gt;</code></dt>
+ <dd>La couleur de la bordure. Voir {{cssxref("color")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exempleTexte {
+  writing-mode: vertical-rl;
+  border-block: 5px dashed blue;
+}</pre>
+
+<p> </p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exempleTexte"&gt;Texte exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-block", "border-block")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.border-block")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques qui peuvent correspondre à cette propriété logique :
+  <ul>
+   <li>{{cssxref("border-top")}},</li>
+   <li>{{cssxref("border-right")}},</li>
+   <li>{{cssxref("border-bottom")}},</li>
+   <li>{{cssxref("border-left")}}.</li>
+  </ul>
+ </li>
+ <li>Les propriétés relatives aux propriétés logiques : {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-bottom-color/index.html b/files/fr/web/css/border-bottom-color/index.html
new file mode 100644
index 0000000000..bcb534cd89
--- /dev/null
+++ b/files/fr/web/css/border-bottom-color/index.html
@@ -0,0 +1,128 @@
+---
+title: border-bottom-color
+slug: Web/CSS/border-bottom-color
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-bottom-color
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>border-bottom-color</code></strong> permet de définir la couleur utilisée pour la bordure basse d'un élément.</p>
+
+<p>Pour avoir une formulation plus concise, on pourra utiliser les propriétés raccourcies {{cssxref("border-color")}} et/ou {{cssxref("border-bottom")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-bottom-color.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de type &lt;color&gt; */
+border-bottom-color: red;
+border-bottom-color: rgb(255, 128, 0);
+border-bottom-color: hsla(100%, 50%, 25%, 0.75);
+border-bottom-color: #ffbb00;
+border-bottom-color: currentColor;
+border-bottom-color: transparent;
+
+/* Valeurs globales */
+border-bottom-color: inherit;
+border-bottom-color: initial;
+border-bottom-color: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt>&lt;<code>color&gt;</code></dt>
+ <dd>Une valeur de couleur (type {{cssxref("&lt;color&gt;")}}) qui décrit la couleur utilisée pour la bordure du côté inférieur.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.maboite {
+  border: solid 0.3em gold;
+  border-bottom-color: red;
+  width: auto;
+}
+
+.texterouge {
+  color: red;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="maboite"&gt;
+  &lt;p&gt;Une boîte avec une bordure autour.
+     Notez le côté de la boîte qui est
+     &lt;span class="texterouge"&gt;rouge&lt;/span&gt;.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#border-bottom-color', 'border-bottom-color')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Pas de modification significative, la valeur <code>transparent</code> a été supprimée car elle fait désormais partie du type {{cssxref("&lt;color&gt;")}} qui a été étendu.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#propdef-border-bottom-color', 'border-bottom-color')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-bottom-color")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés raccourciées liées aux bordures
+  <ul>
+   <li>{{cssxref("border")}},</li>
+   <li>{{cssxref("border-bottom")}},</li>
+   <li>{{cssxref("border-color")}}.</li>
+  </ul>
+ </li>
+ <li>Les propriétés de couleur pour les autres bordures :
+  <ul>
+   <li>{{cssxref("border-right-color")}},</li>
+   <li>{{cssxref("border-top-color")}},</li>
+   <li>{{cssxref("border-left-color")}}.</li>
+  </ul>
+ </li>
+ <li>Les autres propriétés liées à la bordure du haut :
+  <ul>
+   <li>{{cssxref("border-bottom-style")}},</li>
+   <li>{{cssxref("border-bottom-width")}}.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/border-bottom-left-radius/index.html b/files/fr/web/css/border-bottom-left-radius/index.html
new file mode 100644
index 0000000000..0f304a14ab
--- /dev/null
+++ b/files/fr/web/css/border-bottom-left-radius/index.html
@@ -0,0 +1,143 @@
+---
+title: border-bottom-left-radius
+slug: Web/CSS/border-bottom-left-radius
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-bottom-left-radius
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>border-bottom-left-radius</code></strong> définit le rayon de courbure de la bordure pour le coin en bas à gauche de la boîte.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-bottom-left-radius.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>L'arrondi peut être un fragment de cercle ou d'ellipse. Si une des valeurs vaut 0, aucun arrondi n'a lieu et le coin est un angle droit.Un arrière-plan (que ce soit une couleur ou une image) sera rogné selon la bordure même si celle-ci est arrondie. L'endroit du rognage est défini selon la valeur de {{cssxref("background-clip")}}.</p>
+
+<div class="note"><strong>Note :</strong> Si la valeur de cette propriété n'est pas définie par la propriété raccourcie {{cssxref("border-radius")}} et que cette dernière est appliquée après <code>border-bottom-left-radius</code>, cela aura pour effet de réinitialiser la valeur avec la valeur initiale de <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">la propriété raccourcie</a>.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Le coin est un quart de cercle         */
+/* La valeur indique le rayon de courbure */
+border-bottom-left-radius: 3px;
+
+/* Valeurs avec un pourcentage */
+border-bottom-left-radius: 20%;
+
+/* Le coin est un quart d'ellipse         */
+/* La première valeur indique le demi-axe */
+/* horizontal et la seconde le demi-axe   */
+/* vertical                               */
+border-bottom-left-radius: 0.5em 1em;
+
+border-bottom-left-radius: inherit;
+</pre>
+
+<p>Cette propriété peut prendre deux formes :</p>
+
+<ul>
+ <li>Une première avec une longueur (<code>&lt;length&gt;</code>) ou un pourcentage (<code>&lt;percentage&gt;</code>) qui indique le rayon de courbure pour ce coin</li>
+ <li>Une seconde avec deux valeurs
+  <ul>
+   <li>La première est une longueur (<code>&lt;length&gt;</code>) ou un pourcentage (<code>&lt;percentage&gt;</code>) qui indique le rayon de courbure de l'axe horizontal de l'ellipse pour ce coin</li>
+   <li>La seconde est une longueur (<code>&lt;length&gt;</code>) ou un pourcentage (<code>&lt;percentage&gt;</code>) qui indique le rayon de courbure de l'axe vertical de l'ellipse pour ce coin</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>La mesure du rayon ou de l'un des demi-axes de l'ellipse. Une valeur absolue peut être exprimée dans n'importe quelle unité autorisée pour le type {{cssxref("&lt;length&gt;")}}. Les valeurs exprimées en pourcentage font référence à la hauteur de la boîte pour les valeurs verticales et à la largeur de la boîte pour les valeurs horizontales. Les valeurs négatives ne sont pas autorisées.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: lightgreen;
+  border: solid 1px black;
+  width: 100px;
+  height: 130px;
+}
+
+.arc_cercle {
+  border-bottom-left-radius: 40px 40px;
+}
+
+.arc_ellipse {
+  border-bottom-left-radius: 40px 20px;
+}
+
+.pourcentage {
+  border-bottom-left-radius: 40%;
+}
+
+.rognage {
+  border: black 10px double;
+  border-bottom-left-radius: 40%;
+  background-color: rgb(250,20,70);
+  background-clip: content-box; // essayez margin-box...
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html"> &lt;div class="arc_cercle"&gt;&lt;/div&gt;
+ &lt;div class="arc_ellipse"&gt;&lt;/div&gt;
+ &lt;div class="pourcentage"&gt;&lt;/div&gt;
+ &lt;div class="rognage"&gt;&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","200","540")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#border-bottom-left-radius', 'border-bottom-left-radius')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-bottom-left-radius")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La propriété raccourcie {{cssxref("border-radius")}}</li>
+ <li>Les propriétés pour les autres coins :
+  <ul>
+   <li>{{cssxref("border-top-right-radius")}},</li>
+   <li>{{cssxref("border-top-left-radius")}},</li>
+   <li>{{cssxref("border-bottom-right-radius")}}.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/border-bottom-right-radius/index.html b/files/fr/web/css/border-bottom-right-radius/index.html
new file mode 100644
index 0000000000..9d596cb38f
--- /dev/null
+++ b/files/fr/web/css/border-bottom-right-radius/index.html
@@ -0,0 +1,143 @@
+---
+title: border-bottom-right-radius
+slug: Web/CSS/border-bottom-right-radius
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-bottom-right-radius
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>border-bottom-right-radius</code></strong> définit le rayon de courbure de la bordure pour le coin en bas à droite de la boîte. L'arrondi peut être un fragment de cercle ou d'ellipse. Si une des valeurs vaut <code>0</code>, aucun arrondi n'a lieu et le coin est un angle droit.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-bottom-right-radius.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Un arrière-plan (que ce soit une couleur ou une image) sera rogné selon la bordure même si celle-ci est arrondie. L'endroit du rognage est défini selon la valeur de {{cssxref("background-clip")}}.</p>
+
+<div class="note"><strong>Note :</strong> Si la valeur de cette propriété n'est pas définie par la propriété raccourcie {{cssxref("border-radius")}} et que cette dernière est appliquée après <code>border-bottom-right-radius</code>, cela aura pour effet de réinitialiser la valeur avec la valeur initiale de <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">la propriété raccourcie</a>.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Le coin est un quart de cercle         */
+/* La valeur indique le rayon de courbure */
+border-bottom-right-radius: 3px;
+
+/* Valeur avec un pourcentage */
+border-bottom-right-radius: 20%;
+
+/* Le coin est un quart d'ellipse         */
+/* La première valeur indique le demi-axe */
+/* horizontal et la seconde le demi-axe   */
+/* vertical                               */
+border-bottom-right-radius: 0.5em 1em;
+
+border-bottom-right-radius: inherit;
+</pre>
+
+<p>Cette propriété peut prendre deux formes :</p>
+
+<ul>
+ <li>Une première avec une longueur (<code>&lt;length&gt;</code>) ou un pourcentage (<code>&lt;percentage&gt;</code>) qui indique le rayon de courbure pour ce coin</li>
+ <li>Une seconde avec deux valeurs
+  <ul>
+   <li>La première est une longueur (<code>&lt;length&gt;</code>) ou un pourcentage (<code>&lt;percentage&gt;</code>) qui indique le rayon de courbure de l'axe horizontal de l'ellipse pour ce coin</li>
+   <li>La seconde est une longueur (<code>&lt;length&gt;</code>) ou un pourcentage (<code>&lt;percentage&gt;</code>) qui indique le rayon de courbure de l'axe vertical de l'ellipse pour ce coin</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>La mesure du rayon ou de l'un des demi-axes de l'ellipse. La mesure du rayon ou de l'un des demi-axes de l'ellipse. Une valeur absolue peut être exprimée dans n'importe quelle unité autorisée pour le type {{cssxref("&lt;length&gt;")}}. Les valeurs exprimées en pourcentage font référence à la hauteur de la boîte pour les valeurs verticales et à la largeur de la boîte pour les valeurs horizontales. Les valeurs négatives ne sont pas autorisées.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: lightgreen;
+  border: solid 1px black;
+  width: 100px;
+  height: 130px;
+}
+
+.arc_cercle {
+  border-bottom-right-radius: 40px 40px;
+}
+
+.arc_ellipse {
+  border-bottom-right-radius: 40px 20px;
+}
+
+.pourcentage {
+  border-bottom-right-radius: 40%;
+}
+
+.rognage {
+  border: black 10px double;
+  border-bottom-right-radius: 40%;
+  background-color: rgb(250,20,70);
+  background-clip: content-box; // essayez margin-box...
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html"> &lt;div class="arc_cercle"&gt;&lt;/div&gt;
+ &lt;div class="arc_ellipse"&gt;&lt;/div&gt;
+ &lt;div class="pourcentage"&gt;&lt;/div&gt;
+ &lt;div class="rognage"&gt;&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","200","540")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#border-bottom-right-radius', 'border-bottom-right-radius')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-bottom-right-radius")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La propriété raccourcie {{cssxref("border-radius")}}</li>
+ <li>Les propriétés pour les autres coins :
+  <ul>
+   <li>{{cssxref("border-top-left-radius")}},</li>
+   <li>{{cssxref("border-top-right-radius")}},</li>
+   <li>{{cssxref("border-bottom-left-radius")}}.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/border-bottom-style/index.html b/files/fr/web/css/border-bottom-style/index.html
new file mode 100644
index 0000000000..2ceac6d55b
--- /dev/null
+++ b/files/fr/web/css/border-bottom-style/index.html
@@ -0,0 +1,228 @@
+---
+title: border-bottom-style
+slug: Web/CSS/border-bottom-style
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-bottom-style
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété<strong> <code>border-bottom-style</code></strong> définit le style de ligne utilisé pour mettre en forme la bordure en bas d'une boîte.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-bottom-style.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note"><strong>Note :</strong> La spécification ne définit pas la façon dont les bordures de différents styles se rejoignent dans les coins.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+border-bottom-style: none;
+border-bottom-style: hidden;
+border-bottom-style: dotted;
+border-bottom-style: dashed;
+border-bottom-style: solid;
+border-bottom-style: double;
+border-bottom-style: groove;
+border-bottom-style: ridge;
+border-bottom-style: inset;
+border-bottom-style: outset;
+
+/* Valeurs globales */
+border-bottom-style: inherit;
+border-bottom-style: initial;
+border-bottom-style: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;br-style&gt;</code></dt>
+ <dd>Un mot-clé décrivant la forme qu'on souhaite avoir pour la bordure du côté bas. Il peut prendre l'une des valeurs suivantes :
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td><code>none</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-bottom-style: none; background-color: palegreen;"> </div>
+    </td>
+    <td>L'effet obtenu est le même qu'avec <code>hidden</code> : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-bottom-width")}} sera <code>0</code>, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, <code>none</code> a la priorité la plus basse donc si une autre bordure est définie et fusionne avec celle-ci, elle sera affichée.</td>
+   </tr>
+   <tr>
+    <td><code>hidden</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-bottom-style: hidden; background-color: palegreen;"> </div>
+    </td>
+    <td>L'effet obtenu est le même qu'avec <code>none</code> : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-bottom-width")}} sera <code>0</code>, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, <code>hidden</code> a la plus haute priorité et donc si une autre bordure est définie et fusionne avec celle-ci, aucune ne sera affichée.</td>
+   </tr>
+   <tr>
+    <td><code>dotted</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-bottom-style: dotted; background-color: palegreen;"> </div>
+    </td>
+    <td>Affiche une série de points ronds. L'espace entre ces points n'est pas défini par la spécification et est donc laissé à l'implémentation. Le rayon des points correspond à la moitié de {{cssxref("border-bottom-width")}}.</td>
+   </tr>
+   <tr>
+    <td><code>dashed</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-bottom-style: dashed; background-color: palegreen;"> </div>
+    </td>
+    <td>Affiche une série de tirets. La taille de ces tirets n'est pas définie par la spécification et est laissée à l'implémentation.</td>
+   </tr>
+   <tr>
+    <td><code>solid</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-bottom-style: solid; background-color: palegreen;"> </div>
+    </td>
+    <td>Affiche une ligne droite continue.</td>
+   </tr>
+   <tr>
+    <td><code>double</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-bottom-style: double; background-color: palegreen;"> </div>
+    </td>
+    <td>Deux lignes droites sont affichées dont la somme des épaisseurs correspond à la valeur fournie par {{cssxref("border-width")}} ou {{cssxref("border-bottom-width")}}.</td>
+   </tr>
+   <tr>
+    <td><code>groove</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-bottom-style: groove; background-color: palegreen;"> </div>
+    </td>
+    <td>La bordure crée un effet 3D donnant l'impression qu'elle a été gravée dans le document. On obtient un effet opposé à <code>ridge</code>.</td>
+   </tr>
+   <tr>
+    <td><code>ridge</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-bottom-style: ridge; background-color: palegreen;"> </div>
+    </td>
+    <td>La bordure crée un effet 3D donnant l'impression que la bordure ressort du document. L'effet obtenu est opposé à celui obtenu avec <code>groove</code>.</td>
+   </tr>
+   <tr>
+    <td><code>inset</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-bottom-style: inset; background-color: palegreen;"> </div>
+    </td>
+    <td>La bordure crée un effet 3D qui donne l'impression que la boîte est renfoncée dans le document (l'effet obtenu est opposé à celui obtenu avec <code>outset</code>). Lorsqu'elle est appliquée sur une cellule de tableau et que {{cssxref("border-collapse")}} vaut <code>collapsed</code>, cette valeur se comporte comme <code>groove</code>.</td>
+   </tr>
+   <tr>
+    <td><code>outset</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-bottom-style: outset; background-color: palegreen;"> </div>
+    </td>
+    <td>
+     <p>La bordure crée un effet 3D qui fait ressortir la boîte (l'effet est opposé à <code>inset</code>). Lorsqu'elle est utilisé sur une cellule de tableau avec {{cssxref("border-collapse")}} qui vaut <code>collapsed</code>, cette valeur se comporte comme <code>ridge</code>.</p>
+    </td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* On applique un style sur le tableau */
+table {
+  border-width: 2px;
+  background-color: #52E385;
+}
+tr, td {
+  padding: 3px;
+}
+
+/* Des exemples pour border-bottom-style */
+.b1 {border-bottom-style:none;}
+.b2 {border-bottom-style:hidden;}
+.b3 {border-bottom-style:dotted;}
+.b4 {border-bottom-style:dashed;}
+.b5 {border-bottom-style:solid;}
+.b6 {border-bottom-style:double;}
+.b7 {border-bottom-style:groove;}
+.b8 {border-bottom-style:ridge;}
+.b9 {border-bottom-style:inset;}
+.b10 {border-bottom-style:outset;}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td class="b1"&gt;none&lt;/td&gt;
+    &lt;td class="b2"&gt;hidden&lt;/td&gt;
+    &lt;td class="b3"&gt;petits points&lt;/td&gt;
+    &lt;td class="b4"&gt;tirets&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td class="b5"&gt;solid&lt;/td&gt;
+    &lt;td class="b6"&gt;double&lt;/td&gt;
+    &lt;td class="b7"&gt;groove&lt;/td&gt;
+    &lt;td class="b8"&gt;ridge&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td class="b9"&gt;inset&lt;/td&gt;
+    &lt;td class="b10"&gt;outset&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', 300, 200)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-border-style', 'border-bottom-style')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Aucune modification significative.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-bottom-style')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-bottom-style")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les autres propriétés liées au style des bordures :
+  <ul>
+   <li>{{cssxref("border-left-style")}}</li>
+   <li>{{cssxref("border-right-style")}}</li>
+   <li>{{cssxref("border-top-style")}}</li>
+   <li>{{cssxref("border-style")}}.</li>
+  </ul>
+ </li>
+ <li>Les autres propriétés liées à la bordure haute :
+  <ul>
+   <li>{{cssxref("border-bottom")}}</li>
+   <li>{{cssxref("border-bottom-color")}}</li>
+   <li>{{cssxref("border-bottom-width")}}.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/border-bottom-width/index.html b/files/fr/web/css/border-bottom-width/index.html
new file mode 100644
index 0000000000..f1718f62d0
--- /dev/null
+++ b/files/fr/web/css/border-bottom-width/index.html
@@ -0,0 +1,163 @@
+---
+title: border-bottom-width
+slug: Web/CSS/border-bottom-width
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-bottom-width
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>border-bottom-width</code></strong> définit l'épaisseur de la bordure pour le côté bas d'un élément.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-bottom-width.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Une valeur de longueur */
+/* Type &lt;length&gt;          */
+border-bottom-width: 10em;
+border-bottom-width: 3vmax;
+border-bottom-width: 6px;
+
+/* Valeurs avec un mot-clé */
+border-bottom-width: thin;
+border-bottom-width: medium;
+border-bottom-width: thick;
+
+/* Valeurs globales */
+border-bottom-width: inherit;
+border-bottom-width: initial;
+border-bottom-width: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;line-width&gt;</code></dt>
+ <dd>Une valeur de longueur ({{cssxref("&lt;length&gt;")}}) positive ou un mot-clé qui indique l'épaisseur de la bordure pour le bas de la boîte. Si la valeur est un mot-clé, ce doit être l'une des valeurs suivantes :
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td><code>thin</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-bottom-style: solid; border-bottom-width: thin; background-color: palegreen;"> </div>
+    </td>
+    <td>Une bordure fine.</td>
+   </tr>
+   <tr>
+    <td><code>medium</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-bottom-style: solid; border-bottom-width: medium; background-color: palegreen;"> </div>
+    </td>
+    <td>Une bordure moyenne.</td>
+   </tr>
+   <tr>
+    <td><code>thick</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-bottom-style: solid; border-bottom-width: thick; background-color: palegreen;"> </div>
+    </td>
+    <td>Une bordure épaisse.</td>
+   </tr>
+  </tbody>
+ </table>
+ La spécification ne précise pas de façon exacte l'épaisseur correspondant à chacun de ces mots-clés (c'est donc à chaque implémentation de choisir). La spécification requiert toutefois que l'inégalité suivante soit respectée <code>thin ≤ medium ≤ thick</code> et que ces valeurs soient constantes pour un même document<code>.</code></dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.element1{
+  border-bottom: thick solid red;
+}
+.element2{
+  border-bottom: medium solid orange;
+}
+.element3{
+  border-bottom: thin solid green;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="element1"&gt;
+  Une bordure épaisse rouge.
+&lt;/p&gt;
+
+&lt;p class="element2"&gt;
+  Une bordure moyenne orange.
+&lt;/p&gt;
+
+&lt;p class="element3"&gt;
+  Et une bordure fine verte.
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","200","300")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-bottom-width')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Pas de modification significative.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-bottom-width')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border-left-width', 'border-bottom-width')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-bottom-width")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les autres propriétés liées à la largeur de la bordure :
+  <ul>
+   <li>{{cssxref("border-left-width")}},</li>
+   <li>{{cssxref("border-right-width")}},</li>
+   <li>{{cssxref("border-top-width")}},</li>
+   <li>{{cssxref("border-width")}}</li>
+  </ul>
+ </li>
+ <li>Les autres propriétés CSS liées à la bordure du côté haut :
+  <ul>
+   <li>{{cssxref("border")}},</li>
+   <li>{{cssxref("border-bottom")}},</li>
+   <li>{{cssxref("border-bottom-style")}},</li>
+   <li>{{cssxref("border-bottom-color")}}.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/border-bottom/index.html b/files/fr/web/css/border-bottom/index.html
new file mode 100644
index 0000000000..2a0c3e73cd
--- /dev/null
+++ b/files/fr/web/css/border-bottom/index.html
@@ -0,0 +1,126 @@
+---
+title: border-bottom
+slug: Web/CSS/border-bottom
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-bottom
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>border-bottom</code></strong> est une propriété raccourcie qui définit la bordure du côté bas d'un élément.</p>
+
+<p>C'est une propriété raccourcie qui synthétise :</p>
+
+<ul>
+ <li>{{cssxref("border-bottom-width")}},</li>
+ <li>{{cssxref("border-bottom-color")}},</li>
+ <li>{{cssxref("border-bottom-style")}}.</li>
+</ul>
+
+<p>Ces propriétés permettent de décrire la bordure du côté bas d'un élément.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-bottom.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note">
+<p><strong>Note :</strong> Comme pour les autres propriétés raccourcies, <code>border-bottom</code> définit toujours les valeurs de toutes les propriétés qu'elle peut définir, même si celles-ci ne sont pas indiquées. Pour les valeurs qui ne sont pas indiquées, on prendra les valeurs par défaut. Ainsi :</p>
+
+<pre class="brush:css">  border-bottom-style: dotted;
+  border-bottom: thick green;
+</pre>
+
+<p>est équivalent à :</p>
+
+<pre class="brush:css">  border-bottom-style: dotted;
+  border-bottom: none thick green;
+</pre>
+
+<p> et la valeur {{cssxref("border-bottom-style")}} fournie avant <code>border-bottom</code> est ignorée.</p>
+
+<p>La valeur par défaut de {{cssxref("border-bottom-style")}} étant <code>none</code>, si on ne définit pas le style de la bordure, on aura la valeur par défaut, c'est-à-dire qu'on aura aucune bordure.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">border-bottom: 1px;
+border-bottom: 2px dotted;
+border-bottom: medium dashed green;
+</pre>
+
+<p>Les trois valeurs de la propriété raccourcie peuvent être définies dans n'importe quel ordre et une ou deux d'entre elles peuvent être absentes.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;br-width&gt; </code></dt>
+ <dd>Voir {{cssxref("border-bottom-width")}}.</dd>
+ <dt><code>&lt;br-style&gt; </code></dt>
+ <dd>Voir {{cssxref("border-bottom-style")}}.</dd>
+ <dt><code>&lt;color&gt; </code></dt>
+ <dd>Voir {{cssxref("border-bottom-color")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple {
+  border-bottom: 3px dotted orange;
+} </pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="exemple"&gt;
+  En passant elle prit sur un rayon un pot
+  de confiture portant cette étiquette,
+  « MARMELADE D’ORANGES. »
+&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","200","150")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#border-bottom', 'border-bottom')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Pas de modification directe bien que la modification de valeurs pour {{cssxref("border-bottom-color")}} s'applique.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#propdef-border-bottom', 'border-bottom')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Aucune modification significative.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border-bottom', 'border-bottom')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-bottom")}}</p>
diff --git a/files/fr/web/css/border-collapse/index.html b/files/fr/web/css/border-collapse/index.html
new file mode 100644
index 0000000000..746860e8fe
--- /dev/null
+++ b/files/fr/web/css/border-collapse/index.html
@@ -0,0 +1,152 @@
+---
+title: border-collapse
+slug: Web/CSS/border-collapse
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-collapse
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>border-collapse</code></strong> détermine si les bordures d'un tableau sont séparées ou fusionnées. Quand elles sont séparées, chaque cellule du tableau a ses propres bordures, distinctes. Quand elles sont fusionnées, les bordures des cellules sont partagées.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-collapse.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Le modèle des <em>bordures séparées</em> est celui qui est traditionnellement utilisé par HTML. Les cellules adjacente ont des bordures distinctes et la distance entre ces bordures est définie par la propriété {{cssxref("border-spacing")}}.</p>
+
+<p>Le modèle des <em>bordures fusionnées</em> permet que les cellules adjacentes partagent leurs bordures. Lorsqu'on utilise ce modèle, les valeurs <code>inset</code> et <code>outset</code> de {{cssxref("border-style")}} se comportent respectivement comme <code>groove</code> et <code>ridge</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+border-collapse: collapse;
+border-collapse: separate;
+
+/* Valeurs globales */
+border-collapse: inherit;
+border-collapse: initial;
+border-collapse: unset;
+</pre>
+
+<p>La propriété <code>border-collapse</code> est définie avec un seul mot-clé parmi ceux définis ci-après.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>collapse</code></dt>
+ <dd>Un mot-clé qui indique que le modèle des bordures fusionnées doit être utilisé.</dd>
+ <dt><code>separate</code></dt>
+ <dd>Un mot-clé qui indique que le modèle des bordures séparées doit être utilisé. C'est la valeur par défaut.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.collapse {
+  border-collapse: collapse;
+}
+.separate {
+  border-collapse: separate;
+}
+table {
+  display: inline-table;
+  margin: 1em;
+  border: dashed 6px;
+  border-width: 6px;
+}
+table th, table td {
+  border: solid 3px;
+}
+.fx { border-color: orange blue; }
+.gk { border-color: black red; }
+.ie { border-color: blue gold; }
+.tr { border-color: aqua; }
+.sa { border-color: silver blue; }
+.wk { border-color: gold blue; }
+.ch { border-color: red yellow green blue; }
+.bk { border-color: navy blue teal aqua; }
+.op { border-color: red; }</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;table class="separate"&gt;
+  &lt;caption&gt;&lt;code&gt;border-collapse: separate&lt;/code&gt;&lt;/caption&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;&lt;th&gt;Navigateur&lt;/th&gt; &lt;th&gt;Moteur de rendu&lt;/th&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;&lt;td class="fx"&gt;Firefox&lt;/td&gt; &lt;td class="gk"&gt;Gecko&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;&lt;td class="ie"&gt;Internet Explorer&lt;/td&gt; &lt;td class="tr"&gt;Trident&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;&lt;td class="sa"&gt;Safari&lt;/td&gt; &lt;td class="wk"&gt;Webkit&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;&lt;td class="ch"&gt;Chrome&lt;/td&gt; &lt;td class="bk"&gt;Blink&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;&lt;td class="op"&gt;Opera&lt;/td&gt; &lt;td class="bk"&gt;Blink&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+&lt;table class="collapse"&gt;
+  &lt;caption&gt;&lt;code&gt;border-collapse: collapse&lt;/code&gt;&lt;/caption&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;&lt;th&gt;Navigateur&lt;/th&gt; &lt;th&gt;Moteur de rendu&lt;/th&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;&lt;td class="fx"&gt;Firefox&lt;/td&gt; &lt;td class="gk"&gt;Gecko&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;&lt;td class="ie"&gt;Internet Explorer&lt;/td&gt; &lt;td class="tr"&gt;Trident&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;&lt;td class="sa"&gt;Safari&lt;/td&gt; &lt;td class="wk"&gt;Webkit&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;&lt;td class="ch"&gt;Chrome&lt;/td&gt; &lt;td class="bk"&gt;Blink&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;&lt;td class="op"&gt;Opera&lt;/td&gt; &lt;td class="bk"&gt;Blink&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', 400, 300)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'tables.html#borders', 'border-collapse')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-collapse")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("border-spacing")}}</li>
+ <li>{{cssxref("border-style")}}</li>
+ <li>L'élément HTML {{HTMLElement("table")}} impacté <code>border-collapse</code>.</li>
+</ul>
diff --git a/files/fr/web/css/border-color/index.html b/files/fr/web/css/border-color/index.html
new file mode 100644
index 0000000000..c1adde982e
--- /dev/null
+++ b/files/fr/web/css/border-color/index.html
@@ -0,0 +1,198 @@
+---
+title: border-color
+slug: Web/CSS/border-color
+tags:
+  - CSS
+  - Propriété
+  - Propriété raccourcie
+  - Reference
+translation_of: Web/CSS/border-color
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>border-color</code></strong> est une <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">propriété raccourcie</a> qui permet de définir la couleur de la bordure sur les quatre côtés de la boîte de bordure d'un élément.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-color.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Chaque côté peut être paramétré individuellement grâce aux propriétés {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}} et {{cssxref("border-left-color")}} ou, si on utilise les propriétés logiques : {{cssxref("border-block-start-color")}}, {{cssxref("border-block-end-color")}}, {{cssxref("border-inline-start-color")}} et {{cssxref("border-inline-end-color")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* border-color : Une valeur        */
+/* Une valeur pour les quatre côtés */
+border-color: red;
+
+/* border-color : Deux valeurs         */
+/* Première valeur : côtés horizontaux */
+/* Seconde valeur : côtés verticaux    */
+border-color: red #f015ca;
+
+/* border-color : Trois valeurs        */
+/* Première valeur : côté haut         */
+/* Deuxième valeur : côtés verticaux */
+/* Troisième valeur : côté bas         */
+border-color: red yellow green;
+
+/* border-color : Quatre valeurs  */
+/* Première valeur : côté haut    */
+/* Deuxième valeur : côté droit   */
+/* Troisième valeur : côté bas    */
+/* Quatrième valeur : côté gauche */
+border-color: red yellow green blue;
+
+/* Valeurs globales */
+border-color: inherit;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;color&gt;")}} qui indique la couleur qu'on souhaite appliquer sur un ou plusieurs côtés de la boîte de bordure.</dd>
+ <dt><code>inherit</code></dt>
+ <dd>Un mot-clé qui indique que les quatre valeurs sont héritées depuis la valeur calculée de la propriété pour l'élément parent.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#unevaleur {
+  border-color: red;
+}
+
+#horzvert {
+  border-color: gold red;
+}
+
+#hauthoribas {
+  border-color: red cyan gold;
+}
+
+#hdbg {
+  border-color: red cyan black gold;
+}
+
+/* Set width and style for all divs */
+div {
+  border: solid 0.3em;
+  width: auto;
+  margin: 0.5em;
+  padding: 0.5em;
+}
+
+ul {
+  margin: 0;
+  list-style: none;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="unevaleur"&gt;
+  &lt;p&gt;&lt;code&gt;border-color: red;&lt;/code&gt; équivalent à&lt;/p&gt;
+  &lt;ul&gt;&lt;li&gt;&lt;code&gt;border-top-color: red;&lt;/code&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;code&gt;border-right-color: red;&lt;/code&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;code&gt;border-bottom-color: red;&lt;/code&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;code&gt;border-left-color: red;&lt;/code&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;
+&lt;div id="horzvert"&gt;
+  &lt;p&gt;&lt;code&gt;border-color: gold red;&lt;/code&gt; équivalent à&lt;/p&gt;
+  &lt;ul&gt;&lt;li&gt;&lt;code&gt;border-top-color: gold;&lt;/code&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;code&gt;border-right-color: red;&lt;/code&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;code&gt;border-bottom-color: gold;&lt;/code&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;code&gt;border-left-color: red;&lt;/code&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;
+&lt;div id="hauthoribas"&gt;
+  &lt;p&gt;&lt;code&gt;border-color: red cyan gold;&lt;/code&gt; équivalent à&lt;/p&gt;
+  &lt;ul&gt;&lt;li&gt;&lt;code&gt;border-top-color: red;&lt;/code&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;code&gt;border-right-color: cyan;&lt;/code&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;code&gt;border-bottom-color: gold;&lt;/code&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;code&gt;border-left-color: cyan;&lt;/code&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;
+&lt;div id="hdbg"&gt;
+  &lt;p&gt;&lt;code&gt;border-color: red cyan black gold;&lt;/code&gt; équivalent à&lt;/p&gt;
+  &lt;ul&gt;&lt;li&gt;&lt;code&gt;border-top-color: red;&lt;/code&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;code&gt;border-right-color: cyan;&lt;/code&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;code&gt;border-bottom-color: black;&lt;/code&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;code&gt;border-left-color: gold;&lt;/code&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', 600, 300)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#logical-shorthand-keyword")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Ajout du mot-clé <code>logical</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Backgrounds", "#border-color", "border-color")}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Le mot-clé <code>transparent</code> a été retiré pour être ajouté au type {{cssxref("&lt;color&gt;")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "box.html#border-color-properties", "border-color")}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Cette propriété est désormais une propriété raccourcie.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1", "#border-color", "border-color")}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-color")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés liées à la couleur de la bordure
+  <ul>
+   <li>{{cssxref("border")}},</li>
+   <li>{{cssxref("border-top-color")}},</li>
+   <li>{{cssxref("border-right-color")}},</li>
+   <li>{{cssxref("border-bottom-color")}},</li>
+   <li>{{cssxref("border-left-color")}},</li>
+  </ul>
+ </li>
+ <li>Les autres propriétés raccourcies liées à la bordure :
+  <ul>
+   <li>{{cssxref("border-width")}},</li>
+   <li>{{cssxref("border-style")}}.</li>
+  </ul>
+ </li>
+ <li><a href="/fr/docs/Web/HTML/Applying_color">Appliquer des couleurs sur des éléments HTML grâce à CSS</a></li>
+ <li>Le type de données {{cssxref("&lt;color&gt;")}}</li>
+ <li>Les autres propriétés relatives aux couleurs : {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}}.</li>
+</ul>
diff --git a/files/fr/web/css/border-end-end-radius/index.html b/files/fr/web/css/border-end-end-radius/index.html
new file mode 100644
index 0000000000..45aa632ec6
--- /dev/null
+++ b/files/fr/web/css/border-end-end-radius/index.html
@@ -0,0 +1,107 @@
+---
+title: border-end-end-radius
+slug: Web/CSS/border-end-end-radius
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/border-end-end-radius
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>border-end-end-radius</code></strong> définit le rayon de courbure de la bordure pour un angle d'un élément. Cette propriété logique correspond à une propriété physique de rayon de bordure selon la directionalité du texte et le mode d'écriture. Autrement dit, cette propriété concerne un angle différent selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+/* Avec une valeur, le coin sera circulaire */
+border-end-end-radius: 10px;
+border-end-end-radius: 1em;
+
+/* Avec deux valeurs, le coin sera une ellipse */
+border-end-end-radius: 1em 2em;
+
+/* Valeurs globales */
+border-end-end-radius: inherit;
+border-end-end-radius: initial;
+border-end-end-radius: unset;
+</pre>
+
+<p>Ainsi, avec un mode d'écriture <code>horizontal-tb</code>, cette propriété logique correspondra à la propriété physique {{CSSxRef("border-bottom-right-radius")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>Cette valeur exprime le rayon de courbure ou les demi-axes d'une ellipse. Pour les valeurs qui expriment une longueur, on peut utiliser n'importe quelle valeur du type de donnée {{cssxref("&lt;length&gt;")}}. Les pourcentages sur l'axe horizontal sont relatifs à la largeur de la boîte et à la hauteur de la boîte pour l'axe vertical. Les valeurs négatives sont invalides.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: rebeccapurple;
+  width: 120px;
+  height: 120px;
+  border-end-end-radius: 10px;
+}
+
+.texteExemple {
+  writing-mode: vertical-rl;
+  padding: 10px;
+  background-color: #fff;
+  border-end-end-radius: 10px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="texteExemple"&gt;Exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-end-end-radius", "border-end-end-radius")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.border-end-end-radius")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La propriété physique correspondante : {{CSSxRef("border-bottom-right-radius")}}</li>
+ <li>{{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-end-start-radius/index.html b/files/fr/web/css/border-end-start-radius/index.html
new file mode 100644
index 0000000000..5df2061bff
--- /dev/null
+++ b/files/fr/web/css/border-end-start-radius/index.html
@@ -0,0 +1,107 @@
+---
+title: border-end-start-radius
+slug: Web/CSS/border-end-start-radius
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/border-end-start-radius
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>border-end-start-radius</code></strong> définit le rayon de courbure de la bordure pour un angle d'un élément. Cette propriété logique correspond à une propriété physique de rayon de bordure selon la directionalité du texte et le mode d'écriture. Autrement dit, cette propriété concerne un angle différent selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+/* Avec une valeur, le coin sera circulaire */
+border-end-start-radius: 10px;
+border-end-start-radius: 1em;
+
+/* Avec deux valeurs, le coin sera une ellipse */
+border-end-start-radius: 1em 2em;
+
+/* Valeurs globales */
+border-end-start-radius: inherit;
+border-end-start-radius: initial;
+border-end-start-radius: unset;
+</pre>
+
+<p>Ainsi, avec un mode d'écriture <code>horizontal-tb</code>, cette propriété logique correspondra à la propriété physique {{CSSxRef("border-top-right-radius")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>Cette valeur exprime le rayon de courbure ou les demi-axes d'une ellipse. Pour les valeurs qui expriment une longueur, on peut utiliser n'importe quelle valeur du type de donnée {{cssxref("&lt;length&gt;")}}. Les pourcentages sur l'axe horizontal sont relatifs à la largeur de la boîte et à la hauteur de la boîte pour l'axe vertical. Les valeurs négatives sont invalides.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: rebeccapurple;
+  width: 120px;
+  height: 120px;
+  border-end-start-radius: 10px;
+}
+
+.texteExemple {
+  writing-mode: vertical-rl;
+  padding: 10px;
+  background-color: #fff;
+  border-end-start-radius: 10px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="texteExemple"&gt;Exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-end-start-radius", "border-end-start-radius")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.border-end-start-radius")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La propriété physique correspondante : {{CSSxRef("border-top-right-radius")}}</li>
+ <li>{{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-image-outset/index.html b/files/fr/web/css/border-image-outset/index.html
new file mode 100644
index 0000000000..1f79067683
--- /dev/null
+++ b/files/fr/web/css/border-image-outset/index.html
@@ -0,0 +1,114 @@
+---
+title: border-image-outset
+slug: Web/CSS/border-image-outset
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-image-outset
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>border-image-outset</code></strong> définit la distance avec laquelle la bordure est déplacée par rapport à la boîte de bordure.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-image-outset.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Les fragments de l'image de bordure qui sont affichées en dehors de la boîte de bordure suite à l'utilisation de cette propriété n'entraîneront pas la création de barres de défilement. Ces zones ne capturent ni n'entraînent d'événements de pointeur par rapport à l'élément concerné.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* border-image-outset :                 */
+/* Une même valeur pour les quatre côtés */
+border-image-outset: 1.5;
+
+/* border-image-outset :              */
+/* Première valeur : côtés verticaux  */
+/* Seconde valeur : côtés horizontaux */
+border-image-outset: 1 1.2;
+
+/* border-image-outset :               */
+/* Première valeur : côté haut         */
+/* Deuxième valeur : côtés horizontaux */
+/* Troisième valeur : côté bas         */
+border-image-outset: 30px 2 45px;
+
+/* border-image-outset :          */
+/* Première valeur : côté haut    */
+/* Deuxième valeur : côté droit   */
+/* Troisième valeur : côté bas    */
+/* Quatrième valeur : côté gauche */
+border-image-outset: 7px 12px 14px 5px;
+
+/* Valeurs globales */
+border-image-outset: inherit;
+border-image-outset: initial;
+border-image-outset: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une valeur de longueur (cf. type {{cssxref("&lt;length&gt;")}}) qui indique l'espace duquel on peut dépasser de la boîte de bordure. Les valeurs négatives ne sont pas autorisées.</dd>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>Une valeur numérique (cf. type {{cssxref("&lt;number&gt;")}}) qui sera multipliée par la valeur calculée de {{cssxref("border-width")}} afin de déterminer la longueur de l'espace duquel dépasser.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  border-image-source: url("https://mdn.mozillademos.org/files/10470/border.png");
+  border-image-slice: 30;
+  border-image-width: 20px;
+  border-image-repeat: round;
+  border-image-outset: 10px;
+  padding: 40px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
+  no sea takimata sanctus est Lorem ipsum dolor sit amet.
+&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '480', '320')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-border-image-outset', 'border-image-outset')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-image-outset")}}</p>
diff --git a/files/fr/web/css/border-image-repeat/index.html b/files/fr/web/css/border-image-repeat/index.html
new file mode 100644
index 0000000000..a790da5075
--- /dev/null
+++ b/files/fr/web/css/border-image-repeat/index.html
@@ -0,0 +1,108 @@
+---
+title: border-image-repeat
+slug: Web/CSS/border-image-repeat
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-image-repeat
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>border-image-repeat</code></strong> définit la façon dont les zones de l'image de bordure sont utilisée pour s'étendre sur chacun des côtés de la bordure. Cette propriété est multi-valuée : une valeur indiquera le comportement pour tous les côtés et deux valeurs indiqueront respectivement le comportement pour les côtés horizontaux et verticaux.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-image-repeat.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* border-image-repeat                      */
+/* Une valeur : s'applique à tous les côtés */
+border-image-repeat: stretch;
+
+/* border-image-repeat
+/* Première valeur : côtés horizontaux */
+/* Deuxième valeur : côtés verticaux   */
+border-image-repeat: round stretch;
+
+/* Valeurs globales */
+border-image-repeat: inherit;
+border-image-repeat: initial;
+border-image-repeat: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>stretch</code></dt>
+ <dd>Un mot-clé qui indique que la zone de l'image doit être étirée pour remplir l'espace entre les deux bordures.</dd>
+ <dt><code>repeat</code></dt>
+ <dd>Un mot-clé qui indique que la zone de l'image doit être répétée jusqu'à remplir l'espace entre les deux bordures.</dd>
+ <dt><code>round</code></dt>
+ <dd>Un mot-clé qui indique que la zone de l'image doit être répétée jusqu'à remplir l'espace entre les deux bordures. Si on ne peut pas remplir cet espace avec un nombre entier de motifs, ceux-ci seront étirés pour qu'il y ait une répétition entière et que l'espace soit parfaitement rempli.</dd>
+ <dt><code>space</code></dt>
+ <dd>Un mot-clé qui indique que la zone de l'image est répétée afin de remplir la zone entre les deux bordures. Si on ne peut pas remplir exactement la zone avec un nombre entier de motifs, l'espace restant sera répartis entre ces motifs.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+ border-image-source: url("https://mdn.mozillademos.org/files/10470/border.png");
+ border-image-slice: 30;
+ border-image-width: 20px;
+ border-image-repeat: round;
+ padding: 40px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
+  no sea takimata sanctus est Lorem ipsum dolor sit amet.
+&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '480', '320')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-border-image-repeat', 'border-image-repeat')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-image-repeat")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://css-tricks.com/almanac/properties/b/border-image/">L'article de CSS Tricks sur <code>border-image</code> (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/border-image-slice/index.html b/files/fr/web/css/border-image-slice/index.html
new file mode 100644
index 0000000000..35136b7f07
--- /dev/null
+++ b/files/fr/web/css/border-image-slice/index.html
@@ -0,0 +1,132 @@
+---
+title: border-image-slice
+slug: Web/CSS/border-image-slice
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-image-slice
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>border-image-slice</code></strong> permet de découper l'image fournie via la propriété {{cssxref("border-image-source")}} en 9 régions : quatre pour les coins, quatre pour les côtés et une pour le milieu. Ces régions sont définies à l'aide de quatre valeurs mesurées depuis les bords vers l'intérieur de l'image.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-image-slice.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p><img alt="Les 9 zones définies par border-image-slice" src="/files/3814/border-image-slice.png" style="height: 132px; margin: 1px; padding: 1em; width: 250px;"></p>
+
+<p>Les quatre valeurs contrôlent les positions des lignes de découpe. Si certaines ne sont pas définies, leurs valeurs sont déduites des valeurs fournies (se référer à la section sur la syntaxe).</p>
+
+<p>La zone du milieu ne sera pas utilisée par la bordure même mais pourra être utilisée comme image d'arrière-plan si on utilise le mot-clé <code>fill</code>. Ce mot-clé peut être utilisé à n'importe quelle position dans la déclaration (avant, après ou entre les autres valeurs).</p>
+
+<p>Les propriétés {{cssxref("border-image-repeat")}}, {{cssxref("border-image-width")}}, {{cssxref("border-image-outset")}} définissent la façon dont ces images seront utilisées.</p>
+
+<p>La propriété raccourcie {{cssxref("border-image")}} peut éventuellement réinitialiser cette propriété avec sa valeur par défaut.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* border-image-slice :                       */
+/* Une valeur qui s'applique aux quatre côtés */
+border-image-slice: 30%;
+
+/* border-image-slice :                */
+/* Première valeur : côtés verticaux   */
+/* Deuxième valeur : côtés horizontaux */
+border-image-slice: 10% 30%;
+
+/* border-image-slice :                */
+/* Première valeur : côté haut         */
+/* Deuxième valeur : côtés horizontaux */
+/* Troisième valeur : côté bas         */
+border-image-slice: 30 30% 45;
+
+/* border-image-slice :           */
+/* Première valeur : côté haut    */
+/* Deuxième valeur : côté droit   */
+/* Troisième valeur : côté bas    */
+/* Quatrième valeur : côté gauche */
+border-image-slice: 7 12 14 5;
+
+/* border-image-slice: … fill          */
+/* Le mot-clé fill peut être intercalé */
+/* à n'importe quel endroit            */
+border-image-slice: 10% fill 7 12;
+
+/* Valeurs globales */
+border-image-slice: inherit;
+border-image-slice: initial;
+border-image-slice: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>slice</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;number&gt;")}} ou {{cssxref("&lt;percentage&gt;")}} qui indique le décalage entre le bord de l'image et la droite utilisée pour « découper » l'image. On notera qu'une valeur de type {{cssxref("&lt;length&gt;")}} n'est pas autorisée et est donc invalide. Une valeur de type {{cssxref("&lt;number&gt;")}} correspondra à des <em>pixels</em> pour les images matricielles et à des coordonnées pour les images vectorielles. Les valeurs de type {{cssxref("&lt;percentage&gt;")}} sont relatives à la hauteur de l'image pour les axes verticaux et à la largeur de l'image pour les axes horizontaux. Les valeurs négatives sont invalides et les valeurs dépassant les bornes sont ramenées à <code>100%</code>. Il est préférable d'utiliser des pourcentages pour les images vectorielles.</dd>
+ <dt><code>fill</code></dt>
+ <dd>Un mot-clé qui, s'il est présent, force la zone centrale de l'image à être affichée par dessus l'image d'arrière plan de l'élément. La hauteur et la largeur de l'image sont redimensionnées comme les tranches haute et gauche.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+ border-image-source: url("https://mdn.mozillademos.org/files/10470/border.png");
+ border-image-slice: 30;
+ border-image-width: 20px;
+ border-image-repeat: round;
+ padding: 40px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
+  no sea takimata sanctus est Lorem ipsum dolor sit amet.
+&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '480', '320')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-border-image-slice', 'border-image-slice')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-image-slice")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Propriétés_raccourcies#Quelques_cas_aux_limites_épineux">Description illustrée de la syntaxe multi-valuée</a></li>
+</ul>
diff --git a/files/fr/web/css/border-image-source/index.html b/files/fr/web/css/border-image-source/index.html
new file mode 100644
index 0000000000..ad49355e23
--- /dev/null
+++ b/files/fr/web/css/border-image-source/index.html
@@ -0,0 +1,89 @@
+---
+title: border-image-source
+slug: Web/CSS/border-image-source
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-image-source
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>border-image-source</code></strong> définit l'image (type {{cssxref("&lt;image&gt;")}}) qu'on souhaite utiliser pour mettre en forme la bordure. Si la valeur de cette propriété vaut <code>none</code>, ce sera la mise en forme définie par la propriété {{cssxref("border-style")}} qui sera utilisée.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-image-source.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeur avec un mot-clé */
+/* Ici, pas de border-image, */
+/* on utilise border-style */
+border-image-source: none;
+
+/* Valeur de type &lt;image&gt; */
+border-image-source: url(image.jpg);
+border-image-source: linear-gradient(to top, red, yellow);
+
+/* Valeurs globales */
+border-image-source: inherit;
+border-image-source: initial;
+border-image-source: unset;
+</pre>
+
+<p>La propriété {{cssxref("border-image-slice")}} peut être utilisée afin de diviser une image source en régions qui seront insérées dynamiquement pour constituer la bordure imagée finale.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Cette valeur permet d'indiquer qu'aucune image ne doit être utilisée pour la bordure. Ce sera le style défini par la propriété {{cssxref("border-style")}} qui sera utilisé.</dd>
+ <dt><code>&lt;image&gt;</code></dt>
+ <dd>Une référence vers l'Image qu'on souhaite utiliser pour dessiner la bordure. Voir {{cssxref("&lt;image&gt;")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Voir la page de la propriété raccourcie {{cssxref("border-image")}} et les différents exemples.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-border-image-source', 'border-image-source')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-image-source")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("border")}}</li>
+ <li>{{cssxref("outline")}}</li>
+ <li>{{cssxref("box-shadow")}}</li>
+ <li>{{cssxref("background-image")}}</li>
+ <li>{{cssxref("url()", "url()")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-image-width/index.html b/files/fr/web/css/border-image-width/index.html
new file mode 100644
index 0000000000..d46f98e4e9
--- /dev/null
+++ b/files/fr/web/css/border-image-width/index.html
@@ -0,0 +1,127 @@
+---
+title: border-image-width
+slug: Web/CSS/border-image-width
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-image-width
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>border-image-width</code></strong> définit la largeur de la bordure imagée.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-image-width.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Si <code>border-image-width</code> est supérieur à {{cssxref("border-width")}}, la bordure imagée s'étendra au-delà du <em>padding</em> voire du contenu.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeur avec un mot-clé */
+border-image-width: auto;
+
+/* Longueur */
+/* Type &lt;length&gt; */
+border-image-width: 1rem;
+
+/* Valeur proportionnelle */
+/* Type &lt;percentage&gt; */
+border-image-width: 25%;
+
+/* Valeur numérique */
+/* Type &lt;number&gt; */
+border-image-width: 3;
+
+/* épaisseur verticale | horizontale */
+border-image-width: 2em 3em;
+
+/* haut | côtés horizontaux | bas */
+border-image-width: 5% 15% 10%;
+
+/* haut | droit | bas | gauche */
+border-image-width: 5% 2em 10% auto;
+
+/* Valeurs globales */
+border-image-width: inherit;
+border-image-width: initial;
+border-image-width: unset;
+</pre>
+
+<p>La propriété <code>border-image-width</code> est définie avec une, deux, trois ou quatre valeurs parmi celles de la liste qui suit.</p>
+
+<ul>
+ <li>Lorsqu'une valeur est utilisée, c'est cette valeur qui est utilisée pour les quatre côtés</li>
+ <li>Lorsque deux valeurs sont utilisées, la premières s'applique aux côtés haut et bas et la seconde aux côté gauche et droit</li>
+ <li>Lorsque trois valeurs sont utilisées, la première s'applique au côté haut, la deuxième aux côtés gauche et droit et la troisième au côté bas.</li>
+ <li>Lorsque quatre valeurs sont utilisées, elles s'appliquent (dans cet ordre) au côté haut, droit, bas et gauche (dans le sens horaire).</li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>Une longueur ou un pourcentage représentant la largeur de la bordure. Cette longueur peut être absolue (ex. <code>px</code>) ou relative (ex. <code>rem</code>). Les pourcentages sont relatifs à la largeur de la boîte de bordure. Les valeurs négatives sont considérées invalides<code>.</code></dd>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>Représente un multiple de <a href="/fr/docs/Web/CSS/Valeur_calculée">la valeur calculée</a> de la propriété {{cssxref("border-width")}} de l'élément. Les valeurs négatives sont considérées invalides.</dd>
+ <dt><code>auto</code></dt>
+ <dd>L'épaisseur de la bordure imagée est égale à la largeur ou à la hauteur (selon ce qui peut s'appliquer) de la propriété {{cssxref("border-image-slice")}} correspondante. Si l'image ne possède pas de dimensions intrinsèques, c'est la valeur calculée de <code>border-width</code> qui sera utilisée à la place.</dd>
+ <dt><code>inherit</code></dt>
+ <dd>Un mot-clé qui indique que les quatre valeurs sont héritées des valeurs calculées pour la propriété de l'élément parent.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  border: 20px solid;
+  border-image: url("https://mdn.mozillademos.org/files/10470/border.png") 30 round;
+  border-image-width: 16px;
+  padding: 40px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
+  no sea takimata sanctus est Lorem ipsum dolor sit amet.
+&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '480', '320')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-border-image-width', 'border-image-width')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-image-width")}}</p>
diff --git a/files/fr/web/css/border-image/index.html b/files/fr/web/css/border-image/index.html
new file mode 100644
index 0000000000..d941174c50
--- /dev/null
+++ b/files/fr/web/css/border-image/index.html
@@ -0,0 +1,166 @@
+---
+title: border-image
+slug: Web/CSS/border-image
+tags:
+  - CSS
+  - Propriété
+  - Propriété raccourcie
+  - Reference
+translation_of: Web/CSS/border-image
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>border-image</code></strong> dessine une image sur la bordure d'un élément. C'est <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">une propriété raccourcie</a> qui permet de définir {{cssxref("border-image-source")}}, {{cssxref("border-image-width")}}, {{cssxref("border-image-repeat")}}, {{cssxref("border-image-slice")}}, {{cssxref("border-image-outset")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-image.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cela permet d'obtenir des effets de dessin complexes sans avoir à complexifier l'utilisation des boîtes CSS. La propriété <code>border-image</code> sera utilisée plutôt que le style défini via la propriété {{cssxref("border-style")}}. Selon la spécification, <code>border-style</code> <strong>doit</strong> être présente si <code>border-image</code> est utilisée.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Si <a href="/fr/docs/Web/CSS/Valeur_calculée">la valeur calculée</a> de {{cssxref("border-image-source")}} vaut <code>none</code> (via <code>border-image-source</code> ou via la propriété raccourcie <code>border-image</code>), ce sera le style indiqué par {{cssxref("border-style")}} qui sera utilisé.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* source | slice */
+border-image: linear-gradient(red, blue) 27;
+
+/* source | slice | repeat */
+border-image: url("/images/border.png") 27 space;
+
+/* source | slice | width */
+border-image: linear-gradient(red, blue) 27 / 35px;
+
+/* source | slice | width | outset | repeat */
+border-image: url("/images/border.png") 27 23 / 50px 30px / 1rem round space;
+</pre>
+
+<p>La propriété <code>border-image</code> peut être définie avec une à cinq valeurs parmi celles définies ci-après.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Si la <a href="/fr/docs/Web/CSS/Valeur_calculée">valeur calculée</a> de {{cssxref("border-image-source")}} vaut <code>none</code> ou si l'image ne peut pas être affichée, c'est le {{cssxref("border-style")}} correspondant qui sera affiché.</p>
+</div>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>border-image-source</code></dt>
+ <dd>L'image source. Voir {{cssxref("border-image-source")}}.</dd>
+ <dt><code>border-image-slice</code></dt>
+ <dd>La façon dont l'image est découpée en zones (jusqu'à 4). Voir {{cssxref("border-image-slice")}}.</dd>
+ <dt><code>border-image-width</code></dt>
+ <dd>La largeur de la bordure avec l'image. Voir {{cssxref("border-image-width")}}.</dd>
+ <dt><code>border-image-outset</code></dt>
+ <dd>La distance entre la bordure et le bord de l'élément. Voir {{cssxref("border-image-outset")}}.</dd>
+ <dt><code>border-image-repeat</code></dt>
+ <dd>La façon dont l'image source est adaptée afin de correspondre aux dimensions de la bordure. Voir {{cssxref("border-image-repeat")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_une_image_matricielle_étirée">Utiliser une image matricielle étirée</h3>
+
+<p>On découpe l'image et on la répète pour remplir la zone entre les bordures.</p>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush:css">#bitmap {
+  border: 30px solid transparent;
+  padding: 20px;
+  border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 30;
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div id="bitmap"&gt;
+  L'image est étirée pour remplir l'espace.
+&lt;/div&gt;
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Utiliser_une_image_matricielle_répétée')}}</p>
+
+<h3 id="Utiliser_un_dégradé">Utiliser un dégradé</h3>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush:css">#gradient {
+  border: 30px solid;
+  border-image: linear-gradient(red, yellow) 10;
+  padding: 20px;
+}
+</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;div id="gradient"&gt;
+  L'image formée par le gradient est étirée pour remplir la zone.
+&lt;/div&gt;
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample('Utiliser_un_dégradé')}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Les technologies d'assistance ne peuvent pas analyser les images de bordure. Si l'image contient des informations essentielles au sens de la page, mieux vaut décrire ces informations dans le contenu sémantique du document.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">Comprendre les règles WCAG 1.1</a></li>
+ <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html" rel="noopener"><em>Understanding Success Criterion 1.1.1 - Understanding WCAG 2.0</em> (en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-border-image', 'border-image')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-image")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("border")}}</li>
+ <li>{{cssxref("outline")}}</li>
+ <li>{{cssxref("box-shadow")}}</li>
+ <li>{{cssxref("background-image")}}</li>
+ <li>{{cssxref("url()", "url()")}}</li>
+ <li>Fonctions pour les dégradés
+  <ul>
+   <li>{{CSSxRef("conic-gradient")}}</li>
+   <li>{{CSSxRef("linear-gradient")}}</li>
+   <li>{{CSSxRef("repeating-linear-gradient")}}</li>
+   <li>{{CSSxRef("radial-gradient")}}</li>
+   <li>{{CSSxRef("repeating-radial-gradient")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/border-inline-color/index.html b/files/fr/web/css/border-inline-color/index.html
new file mode 100644
index 0000000000..8fb839bd4b
--- /dev/null
+++ b/files/fr/web/css/border-inline-color/index.html
@@ -0,0 +1,102 @@
+---
+title: border-inline-color
+slug: Web/CSS/border-inline-color
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/border-inline-color
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>border-inline-color</code></strong> définit la couleur de la bordure d'un élément sur les côtés de l'axe en ligne. Cette propriété correspondra à différentes propriétés physiques pour les couleurs de la bordure selon le mode d'écriture de l'élément, sa direction et l'orientation du texte. Autrement dit, cette propriété logique peut correspondre à {{cssxref("border-top-color")}} et {{cssxref("border-bottom-color")}} ou à {{cssxref("border-right-color")}} et {{cssxref("border-left-color")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<pre class="brush:css no-line-numbers">border-inline-color: yellow;
+border-inline-color: #F5F6F7;
+</pre>
+
+<p>Pour définir la couleur de la bordure sur l'autre dimension, on pourra utiliser la propriété logique {{cssxref("border-block-color")}} qui définit {{cssxref("border-block-start-color")}} et {{cssxref("border-block-end-color")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;'color'&gt;</code></dt>
+ <dd>La couleur de la bordure. Voir {{cssxref("color")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.texteExemple {
+  writing-mode: vertical-lr;
+  border: 10px solid blue;
+  border-inline-color: red;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="texteExemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-color", "border-inline-color")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.border-inline-color")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques qui peuvent correspondre à cette propriété :
+  <ul>
+   <li>{{cssxref("border-top-color")}},</li>
+   <li>{{cssxref("border-right-color")}},</li>
+   <li>{{cssxref("border-bottom-color")}},</li>
+   <li>{{cssxref("border-left-color")}}.</li>
+  </ul>
+ </li>
+ <li>Les propriétés relatives aux propriétés logiques : {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+ <li>{{bug("1297097")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-inline-end-color/index.html b/files/fr/web/css/border-inline-end-color/index.html
new file mode 100644
index 0000000000..5492baa5d7
--- /dev/null
+++ b/files/fr/web/css/border-inline-end-color/index.html
@@ -0,0 +1,115 @@
+---
+title: border-inline-end-color
+slug: Web/CSS/border-inline-end-color
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-inline-end-color
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>border-inline-end-color</code></strong> définit la couleur de la bordure pour le côté de la fin de l'élément orienté dans l'axe de lecture. Elle correspond à une propriété physique selon le mode d'écriture de l'élément, sa directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}} ou {{cssxref("border-left-color")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-inline-end-color.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cette propriété est à rapprocher des autres propriétés logiques permettant de définir les couleurs de la bordure d'un élément :</p>
+
+<ul>
+ <li>{{cssxref("border-block-start-color")}},</li>
+ <li>{{cssxref("border-block-end-color")}},</li>
+ <li>{{cssxref("border-inline-start-color")}}.</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">border-inline-end-color: red;
+border-inline-end-color: #fffff;
+border-inline-end-color: rgb(200, 0, 0);
+
+border-inline-end-color: unset;
+border-inline-end-color: initial;
+border-inline-end-color: inherit;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;'border-color'&gt;</code></dt>
+ <dd>Voir {{cssxref("border-color")}}</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  border: 10px solid blue;
+  border-inline-end-color: red;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-end-color", "border-inline-end-color")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-inline-end-color")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes :
+  <ul>
+   <li>{{cssxref("border-top-color")}},</li>
+   <li>{{cssxref("border-right-color")}},</li>
+   <li>{{cssxref("border-bottom-color")}},</li>
+   <li>{{cssxref("border-left-color")}}.</li>
+  </ul>
+ </li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-inline-end-style/index.html b/files/fr/web/css/border-inline-end-style/index.html
new file mode 100644
index 0000000000..5bfc8a592a
--- /dev/null
+++ b/files/fr/web/css/border-inline-end-style/index.html
@@ -0,0 +1,110 @@
+---
+title: border-inline-end-style
+slug: Web/CSS/border-inline-end-style
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-inline-end-style
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>border-inline-end-style</code></strong> définit le style de la bordure utilisé pour le côté de la fin de l'élément dans l'axe de lecture. Cette propriété logique correspondra à une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} selon les valeurs de {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-inline-end-style.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Les autres propriétés logiques permettant de définir le style de la bordure sont les suivantes :</p>
+
+<ul>
+ <li>{{cssxref("border-block-start-style")}}</li>
+ <li>{{cssxref("border-block-end-style")}}</li>
+ <li>{{cssxref("border-inline-start-style")}}.</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">border-inline-end-style: dashed;
+border-inline-end-style: dotted;
+border-inline-end-style: groove;</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;'border-style'&gt;</code></dt>
+ <dd>Le style utilisé pour la ligne de la bordure sur ce côté, voir {{cssxref("border-style")}}</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  border: 5px solid blue;
+  border-inline-end-style: dashed;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-end-style", "border-inline-end-style")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-inline-end-style")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes :
+  <ul>
+   <li>{{cssxref("border-top-style")}},</li>
+   <li>{{cssxref("border-right-style")}},</li>
+   <li>{{cssxref("border-bottom-style")}},</li>
+   <li>{{cssxref("border-left-style")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-inline-end-width/index.html b/files/fr/web/css/border-inline-end-width/index.html
new file mode 100644
index 0000000000..03607a3631
--- /dev/null
+++ b/files/fr/web/css/border-inline-end-width/index.html
@@ -0,0 +1,106 @@
+---
+title: border-inline-end-width
+slug: Web/CSS/border-inline-end-width
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-inline-end-width
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>border-inline-end-width</code></strong> définit la largeur de la bordure pour le côté de la fin « logique » de l'élément. Cette propriété logique correspond à l'une des propriétés physiques équivalentes en fonction du mode d'écriture, de la directionnalité et de l'orientation du texte. Autrement dit, elle correspondra à  {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}} ou a {{cssxref("border-left-width")}} selon les valeurs des propriétés pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-inline-end-width.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cette propriété logique est à rapprocher des autres propriétés logiques {{cssxref("border-block-start-width")}}, {{cssxref("border-block-end-width")}} et {{cssxref("border-inline-start-width")}} qui permettent de définir la largeur de la bordure pour les différents côtés de l'élément.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeur de longueur */
+/* Type &lt;length&gt; */
+border-inline-end-width: 5px;
+border-inline-end-width: thick;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;'border-width'&gt;</code></dt>
+ <dd>La largeur de la bordure, voir {{cssxref("border-width")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  border: 1px solid blue;
+  border-inline-end-width: 5px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-end-width", "border-inline-end-width")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-inline-end-width")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes :
+  <ul>
+   <li>{{cssxref("border-top-width")}}</li>
+   <li>{{cssxref("border-right-width")}}</li>
+   <li>{{cssxref("border-bottom-width")}}</li>
+   <li>{{cssxref("border-left-width")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-inline-end/index.html b/files/fr/web/css/border-inline-end/index.html
new file mode 100644
index 0000000000..aa0fd3e579
--- /dev/null
+++ b/files/fr/web/css/border-inline-end/index.html
@@ -0,0 +1,118 @@
+---
+title: border-inline-end
+slug: Web/CSS/border-inline-end
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-inline-end
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>border-inline-end</code></strong> est une propriété raccourcie qui permet de définir la bordure d'un élément pour le côté correspondant à la fin de l'élément dans le sens de lecture. Elle peut être utilisée pour définir les valeurs de {{cssxref("border-inline-end-width")}}, {{cssxref("border-inline-end-style")}} et {{cssxref("border-inline-end-color")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-inline-end.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cette propriété logique correspond à l'une des propriété physique équivalente selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}} ou {{cssxref("border-left")}} selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<p>On peut rapprocher cette propriété des autres propriétés logiques raccourcies définissant les bordures des autres côtés :</p>
+
+<ul>
+ <li>{{cssxref("border-block-start")}},</li>
+ <li>{{cssxref("border-block-end")}},</li>
+ <li>{{cssxref("border-inline-start")}}.</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">border-inline-end: 1px;
+border-inline-end: 2px dotted;
+border-inline-end: medium dashed green;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>Une ou plusieurs valeurs parmi les suivantes, dans n'importe quel ordre :</p>
+
+<dl>
+ <dt><code>&lt;'border-width'&gt;</code></dt>
+ <dd>La largeur de la bordure pour ce côté, voir {{cssxref("border-width")}}.</dd>
+ <dt><code>&lt;'border-style'&gt;</code></dt>
+ <dd>Le style de la ligne utilisé pour la bordure de ce côté, voir {{cssxref("border-style")}}.</dd>
+ <dt><code>&lt;'color'&gt;</code></dt>
+ <dd>La couleur de la bordure sur ce côté, voir {{cssxref("color")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-rl;
+  border-inline-end: 5px dashed blue;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-end", "border-inline-end")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-inline-end")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes :
+  <ul>
+   <li>{{cssxref("border-top")}},</li>
+   <li>{{cssxref("border-right")}},</li>
+   <li>{{cssxref("border-bottom")}},</li>
+   <li>{{cssxref("border-left")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-inline-start-color/index.html b/files/fr/web/css/border-inline-start-color/index.html
new file mode 100644
index 0000000000..aadf962104
--- /dev/null
+++ b/files/fr/web/css/border-inline-start-color/index.html
@@ -0,0 +1,112 @@
+---
+title: border-inline-start-color
+slug: Web/CSS/border-inline-start-color
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/border-inline-start-color
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>border-inline-start-color</code></strong> définit la couleur de la bordure pour le côté du début de l'élément orienté dans l'axe de lecture. Elle correspond à une propriété physique selon le mode d'écriture de l'élément, sa directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}} ou {{cssxref("border-left-color")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-inline-start-color.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cette propriété est à rapprocher des autres propriétés logiques permettant de définir les couleurs de la bordure d'un élément :</p>
+
+<ul>
+ <li>{{cssxref("border-block-start-color")}},</li>
+ <li>{{cssxref("border-block-end-color")}},</li>
+ <li>{{cssxref("border-inline-end-color")}}.</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">border-inline-start-color: red;
+border-inline-start-color: #fffff;
+border-inline-start-color: rgb(200, 0, 0);
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;'border-color'&gt;</code></dt>
+ <dd>La couleur de la bordure, voir {{cssxref("border-color")}} et {{cssxref("&lt;color&gt;")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  border: 10px solid blue;
+  border-inline-start-color: red;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-start-color", "border-inline-start-color")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-inline-start-color")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes :
+  <ul>
+   <li>{{cssxref("border-top-color")}},</li>
+   <li>{{cssxref("border-right-color")}},</li>
+   <li>{{cssxref("border-bottom-color")}},</li>
+   <li>{{cssxref("border-left-color")}}.</li>
+  </ul>
+ </li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-inline-start-style/index.html b/files/fr/web/css/border-inline-start-style/index.html
new file mode 100644
index 0000000000..b09e1dad61
--- /dev/null
+++ b/files/fr/web/css/border-inline-start-style/index.html
@@ -0,0 +1,112 @@
+---
+title: border-inline-start-style
+slug: Web/CSS/border-inline-start-style
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-inline-start-style
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>border-inline-start-style</code></strong> définit le style de la bordure utilisé pour le côté du début de l'élément dans l'axe de lecture. Cette propriété logique correspondra à une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} selon les valeurs de {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-inline-start-style.html")}}</div>
+
+
+
+<p>Les autres propriétés logiques permettant de définir le style de la bordure sont les suivantes :</p>
+
+<ul>
+ <li>{{cssxref("border-block-start-style")}}</li>
+ <li>{{cssxref("border-block-end-style")}}</li>
+ <li>{{cssxref("border-inline-end-style")}}.</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeur avec un mot-clé<em> */</em>
+border-inline-start-style: dashed;
+border-inline-start-style: dotted;
+border-inline-start-style: groove;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;'border-style'&gt;</code></dt>
+ <dd>Le style de la ligne utilisé pour la bordure, voir {{cssxref("border-style")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  border: 5px solid blue;
+  border-inline-start-style: dashed;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-start-style", "border-inline-start-style")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-inline-start-style")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes :
+  <ul>
+   <li>{{cssxref("border-top-style")}},</li>
+   <li>{{cssxref("border-right-style")}},</li>
+   <li>{{cssxref("border-bottom-style")}},</li>
+   <li>{{cssxref("border-left-style")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-inline-start-width/index.html b/files/fr/web/css/border-inline-start-width/index.html
new file mode 100644
index 0000000000..89a5e39ca6
--- /dev/null
+++ b/files/fr/web/css/border-inline-start-width/index.html
@@ -0,0 +1,107 @@
+---
+title: border-inline-start-width
+slug: Web/CSS/border-inline-start-width
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/border-inline-start-width
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>border-inline-start-width</code></strong> définit la largeur de la bordure pour le côté du début « logique » de l'élément. Cette propriété logique correspond à l'une des propriétés physiques équivalentes en fonction du mode d'écriture, de la directionnalité et de l'orientation du texte. Autrement dit, elle correspondra à  {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}} ou a {{cssxref("border-left-width")}} selon les valeurs des propriétés pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-inline-start-width.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cette propriété logique est à rapprocher des autres propriétés logiques {{cssxref("border-block-start-width")}}, {{cssxref("border-block-end-width")}} et {{cssxref("border-inline-end-width")}} qui permettent de définir la largeur de la bordure pour les différents côtés de l'élément.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeur de longueur */
+/* Type &lt;length&gt;      */
+border-inline-start-width: 5px;
+border-inline-start-width: thick;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;'border-width'&gt;</code></dt>
+ <dd>La largeur de la bordure, voir {{cssxref("border-width")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  border: 1px solid blue;
+  border-inline-start-width: 5px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-start-width", "border-inline-start-width")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-inline-start-width")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes :
+  <ul>
+   <li>{{cssxref("border-top-width")}}</li>
+   <li>{{cssxref("border-right-width")}}</li>
+   <li>{{cssxref("border-bottom-width")}}</li>
+   <li>{{cssxref("border-left-width")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-inline-start/index.html b/files/fr/web/css/border-inline-start/index.html
new file mode 100644
index 0000000000..d829e716ec
--- /dev/null
+++ b/files/fr/web/css/border-inline-start/index.html
@@ -0,0 +1,119 @@
+---
+title: border-inline-start
+slug: Web/CSS/border-inline-start
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/border-inline-start
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété<strong> <code>border-inline-start</code></strong> est une propriété raccourcie qui permet de définir la bordure d'un élément pour le côté correspondant au début de l'élément dans le sens de lecture. Elle peut être utilisée pour définir les valeurs de {{cssxref("border-inline-start-width")}}, {{cssxref("border-inline-start-style")}} et {{cssxref("border-inline-start-color")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-inline-start.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cette propriété logique correspond à l'une des propriété physique équivalente selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}} ou {{cssxref("border-left")}} selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<p>On peut rapprocher cette propriété des autres propriétés logiques raccourcies définissant les bordures des autres côtés :</p>
+
+<ul>
+ <li>{{cssxref("border-block-start")}},</li>
+ <li>{{cssxref("border-block-end")}},</li>
+ <li>{{cssxref("border-inline-end")}}.</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">border-inline-start: 1px;
+border-inline-start: 2px dotted;
+border-inline-start: medium dashed green;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>Une ou plusieurs valeurs parmi les suivantes, dans n'importe quel ordre :</p>
+
+<dl>
+ <dt><code>&lt;'border-width'&gt;</code></dt>
+ <dd>La largeur de la bordure, voir {{cssxref("border-width")}}.</dd>
+ <dt><code>&lt;'border-style'&gt;</code></dt>
+ <dd>Le style utilisé pour la ligne de la bordure sur ce côté, voir {{cssxref("border-style")}}.</dd>
+ <dt><code>&lt;'color'&gt;</code></dt>
+ <dd>La couleur utilisé pour la bordure sur ce côté, voir {{cssxref("color")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-rl;
+  border-inline-start: 5px dashed blue;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-start", "border-inline-start")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-inline-start")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes :
+  <ul>
+   <li>{{cssxref("border-top")}},</li>
+   <li>{{cssxref("border-right")}},</li>
+   <li>{{cssxref("border-bottom")}},</li>
+   <li>{{cssxref("border-left")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-inline-style/index.html b/files/fr/web/css/border-inline-style/index.html
new file mode 100644
index 0000000000..1455b07238
--- /dev/null
+++ b/files/fr/web/css/border-inline-style/index.html
@@ -0,0 +1,103 @@
+---
+title: border-inline-style
+slug: Web/CSS/border-inline-style
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/border-inline-style
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété<strong> <code>border-inline-style</code></strong> permet de définir le style pour la bordure sur les côtés d'un élément qui correspondent à l'axe en ligne. Cette propriété logique correspond à différentes propriétés physiques selon le mode d'écriture, la direction et l'orientation du texte. Autrement dit, cette propriété correspond à {{cssxref("border-top-style")}} et {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} et {{cssxref("border-right-style")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de type &lt;'border-style'&gt; */
+border-inline-style: dashed;
+border-inline-style: dotted;
+border-inline-style: groove;
+</pre>
+
+<p>Pour les autres côtés, la bordure peut être mise en forme grâce à la propriété {{cssxref("border-block-style")}} qui définit {{cssxref("border-block-start-style")}} et {{cssxref("border-block-end-style")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeur">Valeur</h3>
+
+<dl>
+ <dt><code>&lt;'border-style'&gt;</code></dt>
+ <dd>Le style de la ligne pour la bordure. Voir {{ cssxref("border-style") }}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.texteExemple {
+  writing-mode: vertical-lr;
+  border: 5px solid blue;
+  border-inline-style: dashed;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="texteExemple"&gt;Texte exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-style", "border-inline-style")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.border-inline-style")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques qui correspondent à cette propriété logique :
+  <ul>
+   <li>{{cssxref("border-top-style")}},</li>
+   <li>{{cssxref("border-right-style")}},</li>
+   <li>{{cssxref("border-bottom-style")}},</li>
+   <li>{{cssxref("border-left-style")}}.</li>
+  </ul>
+ </li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-inline-width/index.html b/files/fr/web/css/border-inline-width/index.html
new file mode 100644
index 0000000000..bb3fb70daf
--- /dev/null
+++ b/files/fr/web/css/border-inline-width/index.html
@@ -0,0 +1,96 @@
+---
+title: border-inline-width
+slug: Web/CSS/border-inline-width
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/border-inline-width
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>border-inline-width</code></strong> définit la largeur de la bordure sur les côtés d'un élément sur les côtés de l'axe en ligne. Cette propriété logique peut correspondre à différentes propriétés physiques selon le mode d'écriture, la direction et l'orientation du texte. Autrement dit, cette propriété correspond à {{cssxref("border-top-width")}} et {{cssxref("border-bottom-width")}} ou à {{cssxref("border-left-width")}} et {{cssxref("border-right-width")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de type &lt;'border-width'&gt; */
+border-inline-width: 5px 10px;
+border-inline-width: 5px;
+border-inline-width: thick;
+</pre>
+
+<p>The border width in the other dimension can be set with {{cssxref("border-block-width")}}, which sets {{cssxref("border-block-start-width")}}, and {{cssxref("border-block-end-width")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeur">Valeur</h3>
+
+<dl>
+ <dt><code>&lt;'border-width'&gt;</code></dt>
+ <dd>La largeur de la bordure. Voir {{ cssxref("border-width") }}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.texteExemple {
+  writing-mode: vertical-lr;
+  border: 1px solid blue;
+  border-inline-width: 5px 10px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="texteExemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-width", "border-block-width")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.border-block-width")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques qui peuvent correspondre à cette propriété logique {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, and {{cssxref("border-left-width")}}</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-inline/index.html b/files/fr/web/css/border-inline/index.html
new file mode 100644
index 0000000000..3360d5b1c4
--- /dev/null
+++ b/files/fr/web/css/border-inline/index.html
@@ -0,0 +1,113 @@
+---
+title: border-inline
+slug: Web/CSS/border-inline
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/border-inline
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>border-inline</code></strong> est une <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">propriété raccourcie</a> qui permet de paramétrer les différentes propriétés logiques relatives à la bordure sur l'axe en ligne.</p>
+
+<pre class="brush:css no-line-numbers">border-inline: 1px;
+border-inline: 2px dotted;
+border-inline: medium dashed blue;
+</pre>
+
+<p><code>border-inline</code> peut être utilisée afin de définir une ou plusieurs propriétés parmi {{cssxref("border-inline-width")}}, {{cssxref("border-inline-style")}} et {{cssxref("border-inline-color")}}. La bordure est donc paramétrée de la même façon pour le début et la fin de l'axe de en ligne. Les propriétés physiques correspondantes dépendront du mode d'écriture, de la direction et de l'orientation du texte. Autrement dit, cette propriété peut correspondre à {{cssxref("border-top")}} et {{cssxref("border-bottom")}} ou à {{cssxref("border-right")}} et {{cssxref("border-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<p>Les bordures sur l'autre dimension peuvent être définies grâce à {{cssxref("border-block")}}, (qui est la proprété raccourcie pour {{cssxref("border-block-start")}} et {{cssxref("border-block-end")}}).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>La propriété <code>border-inline</code> peut être utilisée avec une ou plusieurs de ces valeurs, quel que soit l'ordre.</p>
+
+<dl>
+ <dt><code>&lt;'border-width'&gt;</code></dt>
+ <dd>La largeur de la bordure. Voir {{cssxref("border-width")}}.</dd>
+ <dt><code>&lt;'border-style'&gt;</code></dt>
+ <dd>Le style pour la ligne de la bordure. Voir {{cssxref("border-style")}}.</dd>
+ <dt><code>&lt;'color'&gt;</code></dt>
+ <dd>La couleur de la bordure. Voir {{cssxref("color")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p> </p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exempleTexte {
+  writing-mode: vertical-rl;
+  border-inline: 5px dashed blue;
+}</pre>
+
+<p> </p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exempleTexte"&gt;Texte exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline", "border-inline")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.border-inline")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques qui peuvent correspondre à cette propriété logique :
+  <ul>
+   <li>{{cssxref("border-top")}},</li>
+   <li>{{cssxref("border-right")}},</li>
+   <li>{{cssxref("border-bottom")}},</li>
+   <li>{{cssxref("border-left")}}.</li>
+  </ul>
+ </li>
+ <li>Les propriétés relatives aux propriétés logiques : {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-left-color/index.html b/files/fr/web/css/border-left-color/index.html
new file mode 100644
index 0000000000..974ccbd709
--- /dev/null
+++ b/files/fr/web/css/border-left-color/index.html
@@ -0,0 +1,128 @@
+---
+title: border-left-color
+slug: Web/CSS/border-left-color
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-left-color
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>border-left-color</code></strong> permet de définir la couleur utilisée pour la bordure gauche d'un élément.</p>
+
+<p>Pour avoir une formulation plus concise, on pourra utiliser les propriétés raccourcies {{cssxref("border-color")}} et/ou {{cssxref("border-left")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-left-color.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de type &lt;color&gt; */
+border-left-color: red;
+border-left-color: rgb(255, 128, 0);
+border-left-color: hsla(100%, 50%, 25%, 0.75);
+border-left-color: #ffbb00;
+border-left-color: currentColor;
+border-left-color: transparent;
+
+/* Valeurs globales */
+border-left-color: inherit;
+border-left-color: initial;
+border-left-color: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt>&lt;<code>color&gt;</code></dt>
+ <dd>Une valeur de couleur (type {{cssxref("&lt;color&gt;")}}) qui décrit la couleur utilisée pour la bordure du côté gauche.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.maboite {
+  border: solid 0.3em gold;
+  border-left-color: red;
+  width: auto;
+}
+
+.texterouge {
+  color: red;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="maboite"&gt;
+  &lt;p&gt;Une boîte avec une bordure autour.
+     Notez le côté de la boîte qui est
+     &lt;span class="texterouge"&gt;rouge&lt;/span&gt;.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-border-color', 'border-color')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Pas de modification significative, la valeur <code>transparent</code> a été supprimée car elle fait désormais partie du type {{cssxref("&lt;color&gt;")}} qui a été étendu.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#border-color-properties', 'border-left-color')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-left-color")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés raccourcies liées aux bordures
+  <ul>
+   <li>{{cssxref("border")}},</li>
+   <li>{{cssxref("border-left")}},</li>
+   <li>{{cssxref("border-color")}}.</li>
+  </ul>
+ </li>
+ <li>Les propriétés de couleur pour les autres bordures :
+  <ul>
+   <li>{{cssxref("border-top-color")}},</li>
+   <li>{{cssxref("border-bottom-color")}},</li>
+   <li>{{cssxref("border-right-color")}}.</li>
+  </ul>
+ </li>
+ <li>Les autres propriétés liées à la bordure gauche :
+  <ul>
+   <li>{{cssxref("border-left-style")}},</li>
+   <li>{{cssxref("border-left-width")}}.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/border-left-style/index.html b/files/fr/web/css/border-left-style/index.html
new file mode 100644
index 0000000000..f677494c11
--- /dev/null
+++ b/files/fr/web/css/border-left-style/index.html
@@ -0,0 +1,228 @@
+---
+title: border-left-style
+slug: Web/CSS/border-left-style
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-left-style
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété<strong> <code>border-left-style</code></strong> définit le style de ligne utilisé pour mettre en forme la bordure sur le côté gauche d'une boîte.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-left-style.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note"><strong>Note :</strong> La spécification ne définit pas la façon dont les bordures de différents styles se rejoignent dans les coins.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+border-left-style: none;
+border-left-style: hidden;
+border-left-style: dotted;
+border-left-style: dashed;
+border-left-style: solid;
+border-left-style: double;
+border-left-style: groove;
+border-left-style: ridge;
+border-left-style: inset;
+border-left-style: outset;
+
+/* Valeurs globales */
+border-left-style: inherit;
+border-left-style: initial;
+border-left-style: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;br-style&gt;</code></dt>
+ <dd>Un mot-clé décrivant la forme qu'on souhaite avoir pour la bordure du côté gauche. Il peut prendre l'une des valeurs suivantes :
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td><code>none</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-left-style: none; background-color: palegreen;"> </div>
+    </td>
+    <td>L'effet obtenu est le même qu'avec <code>hidden</code> : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-left-width")}} sera <code>0</code>, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, <code>none</code> a la priorité la plus basse donc si une autre bordure est définie et fusionne avec celle-ci, elle sera  affichée.</td>
+   </tr>
+   <tr>
+    <td><code>hidden</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: hidden; background-color: palegreen;"> </div>
+    </td>
+    <td>L'effet obtenu est le même qu'avec <code>none</code> : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-left-width")}} sera <code>0</code>, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, <code>hidden</code> a la plus haute priorité et donc si une autre bordure est définie et fusionne avec celle-ci, aucune ne sera  affichée.</td>
+   </tr>
+   <tr>
+    <td><code>dotted</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: dotted; background-color: palegreen;"> </div>
+    </td>
+    <td>Affiche une série de points ronds. L'espace entre ces points n'est pas défini par la spécification et est donc laissé à l'implémentation. Le rayon des points correspond à la moitié de {{cssxref("border-left-width")}}.</td>
+   </tr>
+   <tr>
+    <td><code>dashed</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: dashed; background-color: palegreen;"> </div>
+    </td>
+    <td>Affiche une série de tirets. La taille de ces tirets n'est pas définie par la spécification et est laissée à l'implémentation.</td>
+   </tr>
+   <tr>
+    <td><code>solid</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: solid; background-color: palegreen;"> </div>
+    </td>
+    <td>Affiche une ligne droite continue.</td>
+   </tr>
+   <tr>
+    <td><code>double</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: double; background-color: palegreen;"> </div>
+    </td>
+    <td>Deux lignes droites sont affichées dont la somme des épaisseurs correspond à la valeur fournie par {{cssxref("border-width")}} ou {{cssxref("border-left-width")}}.</td>
+   </tr>
+   <tr>
+    <td><code>groove</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: groove; background-color: palegreen;"> </div>
+    </td>
+    <td>La bordure crée un effet 3D donnant l'impression qu'elle a été gravée dans le document. On obtient un effet opposé à <code>ridge</code>.</td>
+   </tr>
+   <tr>
+    <td><code>ridge</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: ridge; background-color: palegreen;"> </div>
+    </td>
+    <td>La bordure crée un effet 3D donnant l'impression que la bordure ressort du document. L'effet obtenu est opposé à celui obtenu avec <code>groove</code>.</td>
+   </tr>
+   <tr>
+    <td><code>inset</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: inset; background-color: palegreen;"> </div>
+    </td>
+    <td>La bordure crée un effet 3D qui donne l'impression que la boîte est renfoncée dans le document (l'effet obtenu est opposé à celui obtenu avec <code>outset</code>). Lorsqu'elle est appliquée sur une cellule de tableau et que {{cssxref("border-collapse")}} vaut <code>collapsed</code>, cette valeur se comporte comme <code>groove</code>.</td>
+   </tr>
+   <tr>
+    <td><code>outset</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: outset; background-color: palegreen;"> </div>
+    </td>
+    <td>
+     <p>La bordure crée un effet 3D qui fait ressortir la boîte (l'effet est opposé à <code>inset</code>). Lorsqu'elle est utilisé sur une cellule de tableau avec {{cssxref("border-collapse")}} qui vaut <code>collapsed</code>, cette valeur se comporte comme <code>ridge</code>.</p>
+    </td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* On applique un style sur le tableau */
+table {
+  border-width: 2px;
+  background-color: #52E385;
+}
+tr, td {
+  padding: 3px;
+}
+
+/* Des exemples pour border-left-style */
+.b1 {border-left-style:none;}
+.b2 {border-left-style:hidden;}
+.b3 {border-left-style:dotted;}
+.b4 {border-left-style:dashed;}
+.b5 {border-left-style:solid;}
+.b6 {border-left-style:double;}
+.b7 {border-left-style:groove;}
+.b8 {border-left-style:ridge;}
+.b9 {border-left-style:inset;}
+.b10 {border-left-style:outset;}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td class="b1"&gt;none&lt;/td&gt;
+    &lt;td class="b2"&gt;hidden&lt;/td&gt;
+    &lt;td class="b3"&gt;petits points&lt;/td&gt;
+    &lt;td class="b4"&gt;tirets&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td class="b5"&gt;solid&lt;/td&gt;
+    &lt;td class="b6"&gt;double&lt;/td&gt;
+    &lt;td class="b7"&gt;groove&lt;/td&gt;
+    &lt;td class="b8"&gt;ridge&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td class="b9"&gt;inset&lt;/td&gt;
+    &lt;td class="b10"&gt;outset&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', 300, 200)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-border-style', 'border-left-style')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Aucune modification significative.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-left-style')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-left-style")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les autres propriétés liées au style des bordures :
+  <ul>
+   <li>{{cssxref("border-right-style")}}</li>
+   <li>{{cssxref("border-top-style")}}</li>
+   <li>{{cssxref("border-bottom-style")}}</li>
+   <li>{{cssxref("border-style")}}.</li>
+  </ul>
+ </li>
+ <li>Les autres propriétés liées à la bordure gauche :
+  <ul>
+   <li>{{cssxref("border-left")}}</li>
+   <li>{{cssxref("border-left-color")}}</li>
+   <li>{{cssxref("border-left-width")}}.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/border-left-width/index.html b/files/fr/web/css/border-left-width/index.html
new file mode 100644
index 0000000000..047c1c5968
--- /dev/null
+++ b/files/fr/web/css/border-left-width/index.html
@@ -0,0 +1,169 @@
+---
+title: border-left-width
+slug: Web/CSS/border-left-width
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-left-width
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>border-left-width</code></strong> définit l'épaisseur de la bordure pour le côté gauche d'un élément.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-left-width.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Une valeur de longueur */
+/* Type &lt;length&gt;          */
+border-left-width: 10em;
+border-left-width: 3vmax;
+border-left-width: 6px;
+
+/* Valeurs avec un mot-clé */
+border-left-width: thin;
+border-left-width: medium;
+border-left-width: thick;
+
+/* Valeurs globales */
+border-left-width: inherit;
+border-left-width: initial;
+border-left-width: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;br-width&gt;</code></dt>
+ <dd>Une valeur de longueur ({{cssxref("&lt;length&gt;")}}) positive ou un mot-clé qui indique l'épaisseur de la bordure pour le côté gauche de la boîte. Si la valeur est un mot-clé, ce doit être l'une des valeurs suivantes :
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td><code>thin</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-left-style: solid; border-left-width: thin; background-color: palegreen;"> </div>
+    </td>
+    <td>Une bordure fine.</td>
+   </tr>
+   <tr>
+    <td><code>medium</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-left-style: solid; border-left-width: medium; background-color: palegreen;"> </div>
+    </td>
+    <td>Une bordure moyenne.</td>
+   </tr>
+   <tr>
+    <td><code>thick</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-left-style: solid; border-left-width: thick; background-color: palegreen;"> </div>
+    </td>
+    <td>Une bordure épaisse.</td>
+   </tr>
+  </tbody>
+ </table>
+ La spécification ne précise pas de façon exacte l'épaisseur correspondant à chacun de ces mots-clés (c'est donc à chaque implémentation de choisir). La spécification requiert toutefois que l'inégalité suivante soit respectée <code>thin ≤ medium ≤ thick</code> et que ces valeurs soient constantes pour un même document<code>.</code></dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.element1{
+  border-left-width: thick;
+  border-left-style: solid;
+  border-left-color: red;
+}
+.element2{
+  border-left-width: medium;
+  border-left-style: solid;
+  border-left-color: orange;
+}
+.element3{
+  border-left-width: thin;
+  border-left-style: solid;
+  border-left-color: green;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="element1"&gt;
+  Une bordure épaisse rouge.
+&lt;/p&gt;
+
+&lt;p class="element2"&gt;
+  Une bordure moyenne orange.
+&lt;/p&gt;
+
+&lt;p class="element3"&gt;
+  Et une bordure fine verte.
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","200","300")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-left-width')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Pas de modification significative.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-left-width')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Pas de modification significative.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border-left-width', 'border-left-width')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-left-width")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les autres propriétés liées à la largeur de la bordure :
+  <ul>
+   <li>{{cssxref("border-right-width")}},</li>
+   <li>{{cssxref("border-top-width")}},</li>
+   <li>{{cssxref("border-bottom-width")}},</li>
+   <li>{{cssxref("border-width")}}</li>
+  </ul>
+ </li>
+ <li>Les autres propriétés CSS liées à la bordure du côté gauche :
+  <ul>
+   <li>{{cssxref("border")}},</li>
+   <li>{{cssxref("border-left")}},</li>
+   <li>{{cssxref("border-left-style")}},</li>
+   <li>{{cssxref("border-left-color")}}.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/border-left/index.html b/files/fr/web/css/border-left/index.html
new file mode 100644
index 0000000000..8ba3a36011
--- /dev/null
+++ b/files/fr/web/css/border-left/index.html
@@ -0,0 +1,126 @@
+---
+title: border-left
+slug: Web/CSS/border-left
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-left
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>border-left</code></strong> est une propriété raccourcie qui permet de définir la bordure gauche d'un élément</p>
+
+<p>Cette propriété raccourcie définit les valeurs des propriétés détaillées suivantes :</p>
+
+<ul>
+ <li>{{cssxref("border-left-width")}},</li>
+ <li>{{cssxref("border-left-style")}},</li>
+ <li>{{cssxref("border-left-color")}}.</li>
+</ul>
+
+<p>Ces propriétés permettent de décrire la bordure du côté gauche d'un élément.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-left.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note">
+<p><strong>Note :</strong> Les trois valeurs de la propriété raccourcie peuvent être définies dans n'importe quel ordre et une ou deux d'entre elles peuvent être absentes.</p>
+
+<p>Comme pour les autres propriétés raccourcies, <code>border-left</code> définit toujours les valeurs de toutes les propriétés qu'elle peut définir, même si celles-ci ne sont pas indiquées. Pour les valeurs qui ne sont pas indiquées, on prendra les valeurs par défaut. Ainsi :</p>
+
+<pre class="brush:css">  border-left-style: dotted;
+  border-left: thick green;
+</pre>
+
+<p>est équivalent à :</p>
+
+<pre class="brush:css">  border-left-style: dotted;
+  border-left: none thick green;
+</pre>
+
+<p> et la valeur {{cssxref("border-left-style")}} fournie avant <code>border-left</code> est ignorée.</p>
+
+<p>La valeur par défaut de {{cssxref("border-left-style")}} étant <code>none</code>, si on ne définit pas le style de la bordure, on aura la valeur par défaut, c'est-à-dire qu'on aura aucune bordure.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">border-left: 1px;
+border-left: 2px dotted;
+border-left: medium dashed green;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;br-width&gt; </code></dt>
+ <dd>Voir {{cssxref("border-left-width")}}.</dd>
+ <dt><code>&lt;br-style&gt; </code></dt>
+ <dd>Voir {{cssxref("border-left-style")}}.</dd>
+ <dt><code>&lt;color&gt; </code></dt>
+ <dd>Voir {{cssxref("border-left-color")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple {
+  border-left: 3px dotted orange;
+} </pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="exemple"&gt;
+  En passant elle prit sur un rayon un pot
+  de confiture portant cette étiquette,
+  « MARMELADE D’ORANGES. »
+&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","200","150")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#border-left', 'border-left')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Pas de modification directe bien que la modification de valeurs pour {{cssxref("border-left-color")}} s'applique.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#propdef-border-left', 'border-left')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Aucune modification significative.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border-left', 'border-left')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-left")}}</p>
diff --git a/files/fr/web/css/border-radius/index.html b/files/fr/web/css/border-radius/index.html
new file mode 100644
index 0000000000..0966c69e16
--- /dev/null
+++ b/files/fr/web/css/border-radius/index.html
@@ -0,0 +1,256 @@
+---
+title: border-radius
+slug: Web/CSS/border-radius
+tags:
+  - CSS
+  - Propriété
+  - Reference
+  - Web
+translation_of: Web/CSS/border-radius
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>border-radius</code></strong> permet de définir des coins arrondis pour la bordure d'un élément. La courbure de chaque coin est définie avec un ou deux rayons de courbures qui permettent de définir un arc de cercle ou un arc d'ellipse.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-radius.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La courbure s'applique à l'arrière-plan (défini avec la propriété {{cssxref("background")}}) même si l'élément n'a aucune bordure. Le rognage de l'arrière plan s'applique sur la boîte définie par {{cssxref("background-clip")}}.</p>
+
+<p>Cette propriété est une <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">propriété raccourcie</a> qui permet de définir :</p>
+
+<ul>
+ <li>{{cssxref("border-top-left-radius")}},</li>
+ <li>{{cssxref("border-top-right-radius")}},</li>
+ <li>{{cssxref("border-bottom-right-radius")}},</li>
+ <li>{{cssxref("border-bottom-left-radius")}}.</li>
+</ul>
+
+<p>La propriété <code>border-radius</code> ne s'applique pas aux tableaux lorsque {{cssxref("border-collapse")}} vaut <code>collapse</code>.</p>
+
+<div class="note"><strong>Note :</strong> Comme pour les autres propriétés raccourcies, il n'est pas possible d'hériter de valeurs individuelles (par exemple (<code>border-radius:0 0 inherit inherit</code> pour surcharger les définitions existantes). Si on souhaite avoir un comportement de ce type, on devra utiliser les propriétés détaillées.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers"><strong>/* Quand on utilise un seul rayon, on peut avoir jusqu'à quatre valeurs */</strong>
+/* On utilise le même rayon pour les quatre angles */
+border-radius: 10px;
+
+/* 1. coin en haut à gauche et en bas à droite     */
+/* 2. puis coin en haut à droit et en bas à gauche */
+border-radius: 10px 5%;
+
+/* 1. coin en haut à gauche                    */
+/* 2. coin en haut à droite et en bas à gauche */
+/* 3. coin en bas à droite                     */
+border-radius: 2px 4px 2px;
+
+/* 1. coin en haut à gauche */
+/* 2. coin en haut à droite */
+/* 3. coin en bas à droite  */
+/* 4. coin en bas à gauche  */
+border-radius: 1px 0 3px 4px;
+
+<strong>/* En utilisant deux rayons, on peut avoir jusqu'à quatre valeurs          */</strong>
+<strong>/* On sépare les rayons horizontaux des verticaux par une barre oblique    */</strong>
+/* rayons horizontaux (cf. ci-avant) <strong>/</strong> rayon vertical pour tous les angles */
+border-radius: 10px 5% / 20px;
+
+/* rayons horizontaux puis <strong>/</strong> puis rayons verticaux */
+/* 1. coin en haut à gauche et en bas à droite     */
+/* 2. puis coin en haut à droit et en bas à gauche */
+border-radius: 10px 5% / 20px 30px;
+
+/* rayons horizontaux puis <strong>/</strong> puis rayons verticaux */
+/* 1. coin en haut à gauche                        */
+/* 2. coin en haut à droite et en bas à gauche     */
+/* 3. coin en bas à droite                         */
+border-radius: 10px 5px 2em / 20px 25px 30%;
+
+/* rayons horizontaux puis <strong>/</strong> puis rayons verticaux */
+/* 1. coin en haut à gauche                        */
+/* 2. coin en haut à droite                        */
+/* 3. coin en bas à droite                         */
+/* 4. coin en bas à gauche                         */
+border-radius: 10px 5% / 20px 25em 30px 35em;
+
+/* Valeurs globales */
+border-radius: inherit;
+border-radius: initial;
+border-radius: unset;
+</pre>
+
+<p>La propriété <code>border-radius</code> peut être définie avec :</p>
+
+<ul>
+ <li>une, deux, trois voire quatre valeurs de longueur (<code><a href="#length">&lt;length&gt;</a></code>) ou de pourcentages (<code><a href="#percentage">&lt;percentage&gt;</a></code>). Ces valeurs sont utilisées pour désigner un rayon de courbure pour chaque angle.</li>
+ <li>puis éventuellement une barre oblique (/) suivie d'une, deux, trois ou quatre valeurs de longueur ou de pourcentage qui permettent de définir un rayon de courbure supplémentaire pour créer des coins elliptiques.</li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<table>
+ <tbody>
+  <tr>
+   <td style="vertical-align: top;">Une seule valeur</td>
+   <td><img alt="all-corner.png" class="default internal" src="/@api/deki/files/6138/=all-corner.png"></td>
+   <td style="vertical-align: top;">Une valeur de longueur (type {{cssxref("&lt;length&gt;")}}) ou un pourcentage (type {{cssxref("&lt;percentage&gt;")}}) qui indique le rayon à utiliser pour chaque coin lorsqu'on utilise une seule valeur dans la déclaration.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">Deux valeurs (coin en haut à gauche et en bas à droite)</td>
+   <td><img alt="top-left-bottom-right.png" class="default internal" src="/@api/deki/files/6141/=top-left-bottom-right.png"></td>
+   <td style="vertical-align: top;">Une valeur de longueur (type {{cssxref("&lt;length&gt;")}}) ou un pourcentage (type {{cssxref("&lt;percentage&gt;")}}) qui indique le rayon de courbure à utiliser pour le coin en haut à gauche et le coin en bas à droite de la boîte de bordure lorsqu'on utilise deux valeurs dans la déclaration.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">Coin en haut à droite et en bas à gauche (syntaxe à deux et trois valeurs)</td>
+   <td><img alt="top-right-bottom-left.png" class="default internal" src="/@api/deki/files/6143/=top-right-bottom-left.png"></td>
+   <td style="vertical-align: top;">Une valeur de longueur (type {{cssxref("&lt;length&gt;")}}) ou un pourcentage (type {{cssxref("&lt;percentage&gt;")}}) qui indique le rayon de courbure à utiliser pour le coin en haut à droite et le coin en bas à gauche de la boîte de bordure lorsqu'on utilise deux ou trois valeurs dans la déclaration.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">Coin en haut à gauche</td>
+   <td><img alt="top-left.png" class="default internal" src="/@api/deki/files/6142/=top-left.png"></td>
+   <td style="vertical-align: top;">Une valeur de longueur (type {{cssxref("&lt;length&gt;")}}) ou un pourcentage (type {{cssxref("&lt;percentage&gt;")}}) qui indique le rayon de courbure à utiliser pour le coin en haut à gauche de l'élément. Cette valeur est utilisée lorsqu'on utilise la syntaxe avec trois ou quatre valeurs.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">Coin en haut à droite</td>
+   <td style="margin-left: 2px;"><img alt="top-right.png" class="default internal" src="/@api/deki/files/6144/=top-right.png"></td>
+   <td style="vertical-align: top;">Une valeur de longueur (type {{cssxref("&lt;length&gt;")}}) ou un pourcentage (type {{cssxref("&lt;percentage&gt;")}}) qui indique le rayon de courbure à utiliser pour le coin en haut à droite de l'élément. Cette valeur est utilisée lorsqu'on utilise la syntaxe avec quatre valeurs.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">Coin en bas à droite</td>
+   <td style="margin-left: 2px;"><img alt="bottom-rigth.png" class="default internal" src="/@api/deki/files/6140/=bottom-rigth.png"></td>
+   <td style="vertical-align: top;">Une valeur de longueur (type {{cssxref("&lt;length&gt;")}}) ou un pourcentage (type {{cssxref("&lt;percentage&gt;")}}) qui indique le rayon de courbure à utiliser pour le coin en bas à droite de l'élément. Cette valeur est utilisée lorsqu'on utilise la syntaxe avec trois ou quatre valeurs.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">Coin en bas à gauche</td>
+   <td><img alt="bottom-left.png" class="default internal" src="/@api/deki/files/6139/=bottom-left.png"></td>
+   <td style="vertical-align: top;">Une valeur de longueur (type {{cssxref("&lt;length&gt;")}}) ou un pourcentage (type {{cssxref("&lt;percentage&gt;")}}) qui indique le rayon de courbure à utiliser pour le coin en bas à gauche de l'élément. Cette valeur est utilisée lorsqu'on utilise la syntaxe avec quatre valeurs.</td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt><a id="length" name="length"><code>&lt;length&gt;</code></a></dt>
+ <dd>Cette valeur indique la mesure du rayon de courbure du cercle ou la mesure du demi grand axe ou du demi petit axe de l'ellipse traduisant la courbure. Cette valeur peut être exprimée avec les différentes unités de {{cssxref("&lt;length&gt;")}}. Les valeurs négatives sont considérées comme invalides.</dd>
+ <dt><a id="percentage" name="percentage"><code>&lt;percentage&gt;</code></a></dt>
+ <dd>Cette valeur traduit la mesure du rayon de courbure (elliptique ou circulaire) exprimée en pourcentages par rapport à la taille de la boîte. Les rayons verticaux sont donc proportionnels à la hauteur de la boîte et les rayons horizontaux proportionnels à la largeur de la boîte. Les valeurs négatives sont considérées comme invalides. Voir {{cssxref("&lt;percentage&gt;")}} pour plus de détails.</dd>
+</dl>
+
+<p>Ainsi :</p>
+
+<pre class="brush: css">border-radius: 1em/5em;
+
+/* est équivalent à */
+
+border-top-left-radius:     1em 5em;
+border-top-right-radius:    1em 5em;
+border-bottom-right-radius: 1em 5em;
+border-bottom-left-radius:  1em 5em;
+</pre>
+
+<pre class="brush: css">border-radius: 4px 3px 6px / 2px 4px;
+
+/* est équivalent à : */
+
+border-top-left-radius:     4px 2px;
+border-top-right-radius:    3px 4px;
+border-bottom-right-radius: 6px 2px;
+border-bottom-left-radius:  3px 4px;
+</pre>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  height: 100px;
+  width: 200px;
+  border-style: solid;
+  border-color: black;
+  background-color: palegreen;
+}
+
+.arrondi_droit {
+  border-radius: 10px 40px 40px 10px;
+}
+
+.ellipse {
+  border-radius: 50%;
+}
+
+.pointille {
+  border: dotted;
+  border-width: 10px 4px;
+  border-radius: 10px 40px;
+}
+
+.tirets {
+  border: dashed;
+  border-width: 2px 4px;
+  border-radius: 40px;
+
+}
+
+.slash {
+  border-radius: 13em/3em;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="arrondi_droit"&gt;&lt;/div&gt;
+
+&lt;div class="ellipse"&gt;&lt;/div&gt;
+
+&lt;div class="tirets"&gt;&lt;/div&gt;
+
+&lt;div class="pointille"&gt;&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","300","400")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#border-radius', 'border-radius')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-radius")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés liées à la courbure de la bordure
+  <ul>
+   <li>{{cssxref("border-top-left-radius")}},</li>
+   <li>{{cssxref("border-top-right-radius")}},</li>
+   <li>{{cssxref("border-bottom-right-radius")}},</li>
+   <li>{{cssxref("border-bottom-left-radius")}}.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/border-right-color/index.html b/files/fr/web/css/border-right-color/index.html
new file mode 100644
index 0000000000..23507f4a4e
--- /dev/null
+++ b/files/fr/web/css/border-right-color/index.html
@@ -0,0 +1,126 @@
+---
+title: border-right-color
+slug: Web/CSS/border-right-color
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-right-color
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>border-right-color</code></strong> définit la couleur utilisée pour la bordure droite d'un élément. Pour avoir une formulation plus concise, on pourra utiliser les propriétés raccourcies {{cssxref("border-color")}} et/ou {{cssxref("border-right")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-right-color.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de type &lt;color&gt; */
+border-right-color: red;
+border-right-color: rgb(255, 128, 0);
+border-right-color: hsla(100%, 50%, 25%, 0.75);
+border-right-color: #ffbb00;
+border-right-color: currentColor;
+border-right-color: transparent;
+
+/* Valeurs globales */
+border-right-color: inherit;
+border-right-color: initial;
+border-right-color: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt>&lt;<code>color&gt;</code></dt>
+ <dd>Une valeur de couleur (type {{cssxref("&lt;color&gt;")}}) qui décrit la couleur utilisée pour la bordure du côté droit.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.maboite {
+  border: solid 0.3em gold;
+  border-right-color: red;
+  width: auto;
+}
+
+.texterouge {
+  color: red;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="maboite"&gt;
+  &lt;p&gt;Une boîte avec une bordure autour.
+     Notez le côté de la boîte qui est
+     &lt;span class="texterouge"&gt;rouge&lt;/span&gt;.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#border-right-color', 'border-right-color')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Pas de modification significative, la valeur <code>transparent</code> a été supprimée car elle fait désormais partie du type {{cssxref("&lt;color&gt;")}} qui a été étendu.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#propdef-border-right-color', 'border-right-color')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-right-color")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés raccourcies liées aux bordures
+  <ul>
+   <li>{{cssxref("border")}},</li>
+   <li>{{cssxref("border-right")}},</li>
+   <li>{{cssxref("border-color")}}.</li>
+  </ul>
+ </li>
+ <li>Les propriétés de couleur pour les autres bordures :
+  <ul>
+   <li>{{cssxref("border-top-color")}},</li>
+   <li>{{cssxref("border-bottom-color")}},</li>
+   <li>{{cssxref("border-left-color")}}.</li>
+  </ul>
+ </li>
+ <li>Les autres propriétés liées à la bordure droite :
+  <ul>
+   <li>{{cssxref("border-right-style")}},</li>
+   <li>{{cssxref("border-right-width")}}.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/border-right-style/index.html b/files/fr/web/css/border-right-style/index.html
new file mode 100644
index 0000000000..0ae7291ec4
--- /dev/null
+++ b/files/fr/web/css/border-right-style/index.html
@@ -0,0 +1,230 @@
+---
+title: border-right-style
+slug: Web/CSS/border-right-style
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-right-style
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété<strong> <code>border-right-style</code></strong> définit le style de ligne utilisé pour mettre en forme la bordure sur le côté droit d'une boîte.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-right-style.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note"><strong>Note :</strong> La spécification ne définit pas la façon dont les bordures de différents styles se rejoignent dans les coins.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+border-right-style: none;
+border-right-style: hidden;
+border-right-style: dotted;
+border-right-style: dashed;
+border-right-style: solid;
+border-right-style: double;
+border-right-style: groove;
+border-right-style: ridge;
+border-right-style: inset;
+border-right-style: outset;
+
+/* Valeurs globales */
+border-right-style: inherit;
+border-right-style: initial;
+border-right-style: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;br-style&gt;</code></dt>
+ <dd>Un mot-clé décrivant la forme qu'on souhaite avoir pour la bordure du côté droit. Il peut prendre l'une des valeurs suivantes :
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td><code>none</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-right-style: none; background-color: palegreen;"> </div>
+    </td>
+    <td>L'effet obtenu est le même qu'avec <code>hidden</code> : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-right-width")}} sera <code>0</code>, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, <code>none</code> a la priorité la plus basse donc si une autre bordure est définie et fusionne avec celle-ci, elle sera  affichée.</td>
+   </tr>
+   <tr>
+    <td><code>hidden</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-right-style: hidden; background-color: palegreen;"> </div>
+    </td>
+    <td>L'effet obtenu est le même qu'avec <code>none</code> : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-right-width")}} sera <code>0</code>, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, <code>hidden</code> a la plus haute priorité et donc si une autre bordure est définie et fusionne avec celle-ci, aucune ne sera  affichée.</td>
+   </tr>
+   <tr>
+    <td><code>dotted</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-right-style: dotted; background-color: palegreen;"> </div>
+    </td>
+    <td>Affiche une série de points ronds. L'espace entre ces points n'est pas défini par la spécification et est donc laissé à l'implémentation. Le rayon des points correspond à la moitié de {{cssxref("border-right-width")}}.</td>
+   </tr>
+   <tr>
+    <td><code>dashed</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-right-style: dashed; background-color: palegreen;"> </div>
+    </td>
+    <td>Affiche une série de tirets. La taille de ces tirets n'est pas définie par la spécification et est laissée à l'implémentation.</td>
+   </tr>
+   <tr>
+    <td><code>solid</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-right-style: solid; background-color: palegreen;"> </div>
+    </td>
+    <td>Affiche une ligne droite continue.</td>
+   </tr>
+   <tr>
+    <td><code>double</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-right-style: double; background-color: palegreen;"> </div>
+    </td>
+    <td>Deux lignes droites sont affichées dont la somme des épaisseurs correspond à la valeur fournie par {{cssxref("border-width")}} ou {{cssxref("border-right-width")}}.</td>
+   </tr>
+   <tr>
+    <td><code>groove</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-right-style: groove; background-color: palegreen;"> </div>
+    </td>
+    <td>La bordure crée un effet 3D donnant l'impression qu'elle a été gravée dans le document. On obtient un effet opposé à <code>ridge</code>.</td>
+   </tr>
+   <tr>
+    <td><code>ridge</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-right-style: ridge; background-color: palegreen;"> </div>
+    </td>
+    <td>La bordure crée un effet 3D donnant l'impression que la bordure ressort du document. L'effet obtenu est opposé à celui obtenu avec <code>groove</code>.</td>
+   </tr>
+   <tr>
+    <td><code>inset</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-right-style: inset; background-color: palegreen;"> </div>
+    </td>
+    <td>La bordure crée un effet 3D qui donne l'impression que la boîte est renfoncée dans le document (l'effet obtenu est opposé à celui obtenu avec <code>outset</code>). Lorsqu'elle est appliquée sur une cellule de tableau et que {{cssxref("border-collapse")}} vaut <code>collapsed</code>, cette valeur se comporte comme <code>groove</code>.</td>
+   </tr>
+   <tr>
+    <td><code>outset</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-right-style: outset; background-color: palegreen;"> </div>
+    </td>
+    <td>
+     <p>La bordure crée un effet 3D qui fait ressortir la boîte (l'effet est opposé à <code>inset</code>). Lorsqu'elle est utilisé sur une cellule de tableau avec {{cssxref("border-collapse")}} qui vaut <code>collapsed</code>, cette valeur se comporte comme <code>ridge</code>.</p>
+    </td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt><code>inherit</code></dt>
+ <dd>Ce mot-clé représente le style de la bordure utilisé pour l'élément parent.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* On applique un style sur le tableau */
+table {
+  border-width: 2px;
+  background-color: #52E385;
+}
+tr, td {
+  padding: 3px;
+}
+
+/* Des exemples pour border-right-style */
+.b1 {border-right-style:none;}
+.b2 {border-right-style:hidden;}
+.b3 {border-right-style:dotted;}
+.b4 {border-right-style:dashed;}
+.b5 {border-right-style:solid;}
+.b6 {border-right-style:double;}
+.b7 {border-right-style:groove;}
+.b8 {border-right-style:ridge;}
+.b9 {border-right-style:inset;}
+.b10 {border-right-style:outset;}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td class="b1"&gt;none&lt;/td&gt;
+    &lt;td class="b2"&gt;hidden&lt;/td&gt;
+    &lt;td class="b3"&gt;petits points&lt;/td&gt;
+    &lt;td class="b4"&gt;tirets&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td class="b5"&gt;solid&lt;/td&gt;
+    &lt;td class="b6"&gt;double&lt;/td&gt;
+    &lt;td class="b7"&gt;groove&lt;/td&gt;
+    &lt;td class="b8"&gt;ridge&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td class="b9"&gt;inset&lt;/td&gt;
+    &lt;td class="b10"&gt;outset&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', 300, 200)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-border-style', 'border-right-style')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Aucune modification significative.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-right-style')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-right-style")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les autres propriétés liées au style des bordures :
+  <ul>
+   <li>{{cssxref("border-left-style")}}</li>
+   <li>{{cssxref("border-top-style")}}</li>
+   <li>{{cssxref("border-bottom-style")}}</li>
+   <li>{{cssxref("border-style")}}.</li>
+  </ul>
+ </li>
+ <li>Les autres propriétés liées à la bordure droite :
+  <ul>
+   <li>{{cssxref("border-right")}}</li>
+   <li>{{cssxref("border-right-color")}}</li>
+   <li>{{cssxref("border-right-width")}}.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/border-right-width/index.html b/files/fr/web/css/border-right-width/index.html
new file mode 100644
index 0000000000..1461fcc36c
--- /dev/null
+++ b/files/fr/web/css/border-right-width/index.html
@@ -0,0 +1,162 @@
+---
+title: border-right-width
+slug: Web/CSS/border-right-width
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-right-width
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>border-right-width</code></strong> définit l'épaisseur de la bordure pour le côté droit d'une boîte.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-right-width.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+border-right-width: thin;
+border-right-width: medium;
+border-right-width: thick;
+
+/* Valeurs de longueurs */
+/* Type &lt;length&gt; */
+border-right-width: 10em;
+border-right-width: 3vmax;
+border-right-width: 6px;
+
+/* Valeurs globales */
+border-right-width: inherit;
+border-right-width: initial;
+border-right-width: unset;</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;br-width&gt;</code></dt>
+ <dd>Une valeur de longueur ({{cssxref("&lt;length&gt;")}}) positive ou un mot-clé qui indique l'épaisseur de la bordure pour le côté droit de la boîte. Si la valeur est un mot-clé, ce doit être l'une des valeurs suivantes :
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td><code>thin</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-right-style: solid; border-right-width: thin; background-color: palegreen;"> </div>
+    </td>
+    <td>Une bordure fine.</td>
+   </tr>
+   <tr>
+    <td><code>medium</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-right-style: solid; border-right-width: medium; background-color: palegreen;"> </div>
+    </td>
+    <td>Une bordure moyenne.</td>
+   </tr>
+   <tr>
+    <td><code>thick</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-right-style: solid; border-right-width: thick; background-color: palegreen;"> </div>
+    </td>
+    <td>Une bordure épaisse.</td>
+   </tr>
+  </tbody>
+ </table>
+ La spécification ne précise pas de façon exacte l'épaisseur correspondant à chacun de ces mots-clés (c'est donc à chaque implémentation de choisir). La spécification requiert toutefois que l'inégalité suivante soit respectée <code>thin ≤ medium ≤ thick</code> et que ces valeurs soient constantes pour un même document.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.element1{
+	border-right: thick solid red;
+}
+.element2{
+	border-right: medium solid orange;
+}
+.element3{
+	border-right: thin solid green;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="element1"&gt;
+  Une bordure épaisse rouge.
+&lt;/p&gt;
+
+&lt;p class="element2"&gt;
+  Une bordure moyenne orange.
+&lt;/p&gt;
+
+&lt;p class="element3"&gt;
+  Et une bordure fine verte.
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","200","300")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-right-width')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Pas de modification significative.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-right-width')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Pas de modification significative.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border-right-width', 'border-right-width')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-right-width")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les autres propriétés liées à la largeur de la bordure :
+  <ul>
+   <li>{{cssxref("border-left-width")}},</li>
+   <li>{{cssxref("border-top-width")}},</li>
+   <li>{{cssxref("border-bottom-width")}},</li>
+   <li>{{cssxref("border-width")}}</li>
+  </ul>
+ </li>
+ <li>Les autres propriétés CSS liées à la bordure du côté droit :
+  <ul>
+   <li>{{cssxref("border")}},</li>
+   <li>{{cssxref("border-right")}},</li>
+   <li>{{cssxref("border-right-style")}},</li>
+   <li>{{cssxref("border-right-color")}}.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/border-right/index.html b/files/fr/web/css/border-right/index.html
new file mode 100644
index 0000000000..f0e56d1448
--- /dev/null
+++ b/files/fr/web/css/border-right/index.html
@@ -0,0 +1,126 @@
+---
+title: border-right
+slug: Web/CSS/border-right
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-right
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>border-right</code></strong> est une <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">propriété raccourcie</a> qui permet de décrire la bordure droite d'un élément.</p>
+
+<p>Elle définit les valeurs des propriétés suivantes :</p>
+
+<ul>
+ <li>{{cssxref("border-right-width")}},</li>
+ <li>{{cssxref("border-right-style")}},</li>
+ <li>{{cssxref("border-right-color")}}.</li>
+</ul>
+
+<div>{{EmbedInteractiveExample("pages/css/border-right.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Ces propriétés permettent de décrire la bordure du côté droit d'un élément.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Les trois valeurs de la propriété raccourcie peuvent être définies dans n'importe quel ordre et une ou deux d'entre elles peuvent être absentes.</p>
+
+<p>Comme pour les autres propriétés raccourcies, <code>border-right</code> définit toujours les valeurs de toutes les propriétés qu'elle peut définir, même si celles-ci ne sont pas indiquées. Pour les valeurs qui ne sont pas indiquées, on prendra les valeurs par défaut. Ainsi :</p>
+
+<pre class="brush:css">  border-right-style: dotted;
+  border-right: thick green;
+</pre>
+
+<p>est équivalent à :</p>
+
+<pre class="brush:css">  border-right-style: dotted;
+  border-right: none thick green;
+</pre>
+
+<p> et la valeur {{cssxref("border-right-style")}} fournie avant <code>border-right</code> est ignorée.</p>
+
+<p>La valeur par défaut de {{cssxref("border-right-style")}} étant <code>none</code>, si on ne définit pas le style de la bordure, on aura la valeur par défaut, c'est-à-dire qu'on aura aucune bordure.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">border-right: 1px;
+border-right: 2px dotted;
+border-right: medium dashed green;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;br-width&gt; </code></dt>
+ <dd>Voir {{cssxref("border-right-width")}}.</dd>
+ <dt><code>&lt;br-style&gt; </code></dt>
+ <dd>Voir {{cssxref("border-right-style")}}.</dd>
+ <dt><code>&lt;color&gt; </code></dt>
+ <dd>Voir {{cssxref("border-right-color")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple {
+  border-right: 3px dotted orange;
+} </pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="exemple"&gt;
+  En passant elle prit sur un rayon un pot
+  de confiture portant cette étiquette,
+  « MARMELADE D’ORANGES. »
+&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","200","150")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#border-right', 'border-right')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Pas de modification directe bien que la modification de valeurs pour {{cssxref("border-right-color")}} s'applique.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#propdef-border-right', 'border-right')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Aucune modification significative.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border-right', 'border-right')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-right")}}</p>
diff --git a/files/fr/web/css/border-spacing/index.html b/files/fr/web/css/border-spacing/index.html
new file mode 100644
index 0000000000..b40da3aece
--- /dev/null
+++ b/files/fr/web/css/border-spacing/index.html
@@ -0,0 +1,137 @@
+---
+title: border-spacing
+slug: Web/CSS/border-spacing
+tags:
+  - CSS
+  - Propriété
+  - Reference
+  - Tableaux CSS
+translation_of: Web/CSS/border-spacing
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>border-spacing</code></strong> définit la distance qu'il y a entre les bordures de cellules adjacentes d'un tableau (uniquement lorsque {{cssxref("border-collapse")}} vaut <code>separate</code>). Cette propriété est équivalente à l'attribut HTML déprécié {{htmlattrxref("cellspacing","table")}} mais une deuxième valeur peut être utilisée afin d'obtenir un espacement vertical différent de l'espacement horizontal.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-spacing.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La valeur de <code>border-spacing</code> est également utilisée le long du bord extérieur du tableau, où la distance entre la bordure du tableau et les cellules dans la première/dernière colonne ou ligne est la somme du <code>border-spacing</code> approprié (horizontal ou vertical) et du {{cssxref("padding")}} correspondant (top, right, bottom ou left).</p>
+
+<div class="note">
+<p><strong>Note</strong> : La propriété <code>border-spacing</code> équivaut à l'attribut déprécié <code>cellspacing</code> de l'élément <code>&lt;table&gt;</code>, sauf qu'il possède une seconde valeur optionnelle qui peut être utilisée pour définir différents espacements horizontaux et verticaux.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css  no-line-numbers">/* Une valeur de longueur */
+/* Type &lt;length&gt;         */
+border-spacing: 2px;
+
+/* La première valeur indique */
+/* l'espacement horizontal et */
+/* la seconde le vertical.    <em>*/</em>
+border-spacing: 1cm 2em;
+
+/* Valeurs globales */
+border-spacing: inherit;
+border-spacing: initial;
+border-spacing: unset;
+</pre>
+
+<p>La propriété <code>border-spacing</code> peut être définie avec une ou deux valeurs :</p>
+
+<ul>
+ <li>Avec une valeur de type {{cssxref("&lt;length&gt;")}}, la valeur est utilisée pour l'espacement vertical ainsi que pour l'espacement horizontal.</li>
+ <li>Avec deux valeurs de type {{cssxref("&lt;length&gt;")}}, la première définit l'espacement horizontal (entre les colonnes) et la seconde définit l'espacement vertical (entre les lignes).</li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>length</code></dt>
+ <dd>Une valeur de longueur ({{cssxref("&lt;length&gt;")}} qui décrit l'espacement entre les cellules.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">table {
+  border-collapse: separate;
+  border: 1px solid #000;
+}
+
+td {
+  border: 1px solid #000;
+  padding: 5px;
+}
+
+.unevaleur {
+  border-spacing: 5px;
+}
+
+.deuxvaleurs {
+  border-spacing: 5px 10px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;table class="unevaleur"&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Ces cellules&lt;/td&gt;
+    &lt;td&gt;sont séparées par 5px&lt;/td&gt;
+    &lt;td&gt;tout autour.&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+&lt;br /&gt;
+&lt;table class="deuxvaleurs"&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Ces cellules&lt;/td&gt;
+    &lt;td&gt;sont séparées par 5px d'écart horizontal&lt;/td&gt;
+    &lt;td&gt;et 10px d'écart vertical.&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","300","300")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'tables.html#separated-borders', 'border-spacing')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-spacing")}}</p>
+
+<h2 id="Voir_auss">Voir auss</h2>
+
+<ul>
+ <li>{{cssxref("border-collapse")}}</li>
+ <li>{{cssxref("border-style")}}</li>
+ <li>L'élément HTML {{htmlelement("table")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-start-end-radius/index.html b/files/fr/web/css/border-start-end-radius/index.html
new file mode 100644
index 0000000000..958bb9fda2
--- /dev/null
+++ b/files/fr/web/css/border-start-end-radius/index.html
@@ -0,0 +1,107 @@
+---
+title: border-start-end-radius
+slug: Web/CSS/border-start-end-radius
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/border-start-end-radius
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>border-start-end-radius</code></strong> définit le rayon de courbure de la bordure pour un angle d'un élément. Cette propriété logique correspond à une propriété physique de rayon de bordure selon la directionalité du texte et le mode d'écriture. Autrement dit, cette propriété concerne un angle différent selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+/* Avec une valeur, le coin sera circulaire */
+border-start-end-radius: 10px;
+border-start-end-radius: 1em;
+
+/* Avec deux valeurs, le coin sera une ellipse */
+border-start-end-radius: 1em 2em;
+
+/* Valeurs globales */
+border-start-end-radius: inherit;
+border-start-end-radius: initial;
+border-start-end-radius: unset;
+</pre>
+
+<p>Ainsi, avec un mode d'écriture <code>horizontal-tb</code>, cette propriété logique correspondra à la propriété physique {{CSSxRef("border-bottom-left-radius")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>Cette valeur exprime le rayon de courbure ou les demi-axes d'une ellipse. Pour les valeurs qui expriment une longueur, on peut utiliser n'importe quelle valeur du type de donnée {{cssxref("&lt;length&gt;")}}. Les pourcentages sur l'axe horizontal sont relatifs à la largeur de la boîte et à la hauteur de la boîte pour l'axe vertical. Les valeurs négatives sont invalides.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: rebeccapurple;
+  width: 120px;
+  height: 120px;
+  border-start-end-radius: 10px;
+}
+
+.texteExemple {
+  writing-mode: vertical-rl;
+  padding: 10px;
+  background-color: #fff;
+  border-start-end-radius: 10px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="texteExemple"&gt;Exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-start-end-radius", "border-start-end-radius")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.border-start-end-radius")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La propriété physique correspondante : {{CSSxRef("border-bottom-left-radius")}}</li>
+ <li>{{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-start-start-radius/index.html b/files/fr/web/css/border-start-start-radius/index.html
new file mode 100644
index 0000000000..89501028b0
--- /dev/null
+++ b/files/fr/web/css/border-start-start-radius/index.html
@@ -0,0 +1,107 @@
+---
+title: border-start-start-radius
+slug: Web/CSS/border-start-start-radius
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/border-start-start-radius
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>border-start-start-radius</code></strong> définit le rayon de courbure de la bordure pour un angle d'un élément. Cette propriété logique correspond à une propriété physique de rayon de bordure selon la directionalité du texte et le mode d'écriture. Autrement dit, cette propriété concerne un angle différent selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+/* Avec une valeur, le coin sera circulaire */
+border-start-start-radius: 10px;
+border-start-start-radius: 1em;
+
+/* Avec deux valeurs, le coin sera une ellipse */
+border-start-start-radius: 1em 2em;
+
+/* Valeurs globales */
+border-start-start-radius: inherit;
+border-start-start-radius: initial;
+border-start-start-radius: unset;
+</pre>
+
+<p>Ainsi, avec un mode d'écriture <code>horizontal-tb</code>, cette propriété logique correspondra à la propriété physique {{CSSxRef("border-top-left-radius")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>Cette valeur exprime le rayon de courbure ou les demi-axes d'une ellipse. Pour les valeurs qui expriment une longueur, on peut utiliser n'importe quelle valeur du type de donnée {{cssxref("&lt;length&gt;")}}. Les pourcentages sur l'axe horizontal sont relatifs à la largeur de la boîte et à la hauteur de la boîte pour l'axe vertical. Les valeurs négatives sont invalides.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+background-color: rebeccapurple;
+width: 120px;
+height: 120px;
+  border-start-start-radius: 10px;
+}
+
+.texteExemple {
+writing-mode: vertical-rl;
+padding: 10px;
+background-color: #fff;
+  border-start-start-radius: 10px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+&lt;p class="texteExemple"&gt;Exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-start-start-radius", "border-start-start-radius")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.border-start-start-radius")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La propriété physique correspondante : {{CSSxRef("border-top-left-radius")}}</li>
+ <li>{{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-style/index.html b/files/fr/web/css/border-style/index.html
new file mode 100644
index 0000000000..2ff9885747
--- /dev/null
+++ b/files/fr/web/css/border-style/index.html
@@ -0,0 +1,247 @@
+---
+title: border-style
+slug: Web/CSS/border-style
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-style
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>border-style</code></strong> est une <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">propriété raccourcie</a> qui permet de définir le style des lignes utilisées pour les bordures des quatre côtés de la boîte d'un élément.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-style.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+border-style: none;
+border-style: hidden;
+border-style: dotted;
+border-style: dashed;
+border-style: solid;
+border-style: double;
+border-style: groove;
+border-style: ridge;
+border-style: inset;
+border-style: outset;
+
+/*  côtés horizontaux | côtés verticaux */
+border-style: dotted solid;
+
+/* haut | côtés verticaux | bas */
+border-style: hidden double dashed;
+
+/* haut | droite | bas | gauche */
+border-style: none solid dotted dashed;
+
+/* Valeurs globales */
+border-style: inherit;
+border-style: initial;
+border-style: unset;
+</pre>
+
+<div class="note"><strong>Note :</strong> La valeur par défaut de <code>border-style</code> est <code>none</code>. Cela signifie que si on modifie {{cssxref("border-width")}} et {{cssxref("border-color")}}, on ne verra pas la bordure tant que cette propriété n'est pas différente de <code>none</code> ou de <code>hidden</code>.</div>
+
+<p>La propriété <code>border-style</code> peut être définie avec une, deux, trois ou quatre valeurs :</p>
+
+<ul>
+ <li><strong>Avec une valeur</strong>, celle-ci s'applique aux quatre côté</li>
+ <li><strong>Avec deux valeurs</strong>, la première s'applique aux côté haut et bas et la seconde aux côtés gauche et droit</li>
+ <li><strong>Avec trois valeurs</strong>, la première s'applique au côté haut, la deuxième aux côtés gauche et droit puis la troisième au côté bas</li>
+ <li><strong>Avec quatre valeurs</strong>, les valeurs s'applique dans le sens des aiguilles d'une montre (la première sur le côté haut, la deuxième sur le côté droit, la troisième sur le côté bas et la quatrième sur le côté gauche).</li>
+</ul>
+
+<p>Chacune des valeurs peut être un des mots-clés parmi la liste suivante.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;line-style&gt;</code></dt>
+ <dd>Un mot-clé qui décrit le style utilisé pour la bordure sur les côtés de la boîte. Ce mot-clé peut prendre l'une des valeurs suivantes :
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td><code>none</code></td>
+    <td>
+     <div style="border-width: 3px; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"> </div>
+    </td>
+    <td>L'effet obtenu est le même qu'avec <code>hidden</code> : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-width")}} sera <code>0</code>, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, <code>none</code> a la priorité la plus basse donc si une autre bordure est définie et fusionne avec celle-ci, elle sera  affichée.</td>
+   </tr>
+   <tr>
+    <td><code>hidden</code></td>
+    <td>
+     <div style="border-width: 3px; border-style: hidden; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"> </div>
+    </td>
+    <td>L'effet obtenu est le même qu'avec <code>none</code> : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-width")}} sera <code>0</code>, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, <code>hidden</code> a la plus haute priorité et donc si une autre bordure est définie et fusionne avec celle-ci, aucune ne sera  affichée.</td>
+   </tr>
+   <tr>
+    <td><code>dotted</code></td>
+    <td>
+     <div style="border-width: 3px; border-style: dotted; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"> </div>
+    </td>
+    <td>Affiche une série de points ronds. L'espace entre ces points n'est pas défini par la spécification et est donc laissé à l'implémentation. Le rayon des points correspond à la moitié de {{cssxref("border-width")}}.</td>
+   </tr>
+   <tr>
+    <td><code>dashed</code></td>
+    <td>
+     <div style="border-width: 3px; border-style: dashed; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"> </div>
+    </td>
+    <td>Affiche une série de tirets. La taille de ces tirets n'est pas définie par la spécification et est laissée à l'implémentation.</td>
+   </tr>
+   <tr>
+    <td><code>solid</code></td>
+    <td>
+     <div style="border-width: 3px; border-style: solid; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"> </div>
+    </td>
+    <td>Affiche une ligne droite continue.</td>
+   </tr>
+   <tr>
+    <td><code>double</code></td>
+    <td>
+     <div style="border-width: 3px; border-style: double; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"> </div>
+    </td>
+    <td>Deux lignes droites sont affichées dont la somme des épaisseurs correspond à la valeur fournie par {{cssxref("border-width")}}.</td>
+   </tr>
+   <tr>
+    <td><code>groove</code></td>
+    <td>
+     <div style="border-width: 3px; border-style: groove; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"> </div>
+    </td>
+    <td>La bordure crée un effet 3D donnant l'impression qu'elle a été gravée dans le document. On obtient un effet opposé à <code>ridge</code>.</td>
+   </tr>
+   <tr>
+    <td><code>ridge</code></td>
+    <td>
+     <div style="border-width: 3px; border-style: ridge; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"> </div>
+    </td>
+    <td>La bordure crée un effet 3D donnant l'impression que la bordure ressort du document. L'effet obtenu est opposé à celui obtenu avec <code>groove</code>.</td>
+   </tr>
+   <tr>
+    <td><code>inset</code></td>
+    <td>
+     <div style="border-width: 3px; border-style: inset; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"> </div>
+    </td>
+    <td>La bordure crée un effet 3D qui donne l'impression que la boîte est renfoncée dans le document (l'effet obtenu est opposé à celui obtenu avec <code>outset</code>). Lorsqu'elle est appliquée sur une cellule de tableau et que {{cssxref("border-collapse")}} vaut <code>collapsed</code>, cette valeur se comporte comme <code>groove</code>.</td>
+   </tr>
+   <tr>
+    <td><code>outset</code></td>
+    <td>
+     <div style="border-width: 3px; border-style: outset; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"> </div>
+    </td>
+    <td>
+     <p>La bordure crée un effet 3D qui fait ressortir la boîte (l'effet est opposé à <code>inset</code>). Lorsqu'elle est utilisé sur une cellule de tableau avec {{cssxref("border-collapse")}} qui vaut <code>collapsed</code>, cette valeur se comporte comme <code>ridge</code>.</p>
+    </td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* On définit la mise en forme */
+/* du tableau.                 */
+table {
+    border-width: 3px;
+    background-color: #52E396;
+}
+tr, td {
+    padding: 2px;
+}
+
+/* voici des classes pour les exemples */
+.b1 {border-style:none;}
+.b2 {border-style:hidden;}
+.b3 {border-style:dotted;}
+.b4 {border-style:dashed;}
+.b5 {border-style:solid;}
+.b6 {border-style:double;}
+.b7 {border-style:groove;}
+.b8 {border-style:ridge;}
+.b9 {border-style:inset;}
+.b10 {border-style:outset;}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;table&gt;
+    &lt;tr&gt;
+        &lt;td class="b1"&gt;none&lt;/td&gt;
+        &lt;td class="b2"&gt;hidden&lt;/td&gt;
+        &lt;td class="b3"&gt;dotted&lt;/td&gt;
+        &lt;td class="b4"&gt;dashed&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+        &lt;td class="b5"&gt;solid&lt;/td&gt;
+        &lt;td class="b6"&gt;double&lt;/td&gt;
+        &lt;td class="b7"&gt;groove&lt;/td&gt;
+        &lt;td class="b8"&gt;ridge&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+        &lt;td class="b9"&gt;inset&lt;/td&gt;
+        &lt;td class="b10"&gt;outset&lt;/td&gt;
+    &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', 300, 200)}}</p>
+
+<h2 id="Spécific​ations">Spécific​ations</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#border-style', 'border-style')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#propdef-border-style', 'border-style')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Ajout du mot-clé <code>hidden</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border-style', 'border-style')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-style")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les autres propriétés raccourcies liées aux bordures :
+  <ul>
+   <li>{{cssxref("border")}},</li>
+   <li>{{cssxref("border-width")}},</li>
+   <li>{{cssxref("border-color")}},</li>
+   <li>{{cssxref("border-radius")}}.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/border-top-color/index.html b/files/fr/web/css/border-top-color/index.html
new file mode 100644
index 0000000000..e3a877462e
--- /dev/null
+++ b/files/fr/web/css/border-top-color/index.html
@@ -0,0 +1,128 @@
+---
+title: border-top-color
+slug: Web/CSS/border-top-color
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-top-color
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>border-top-color</code></strong> définit la couleur utilisée pour la bordure haute d'un élément.</p>
+
+<p>Pour avoir une formulation plus concise, on pourra utiliser les propriétés raccourcies {{cssxref("border-color")}} et/ou {{cssxref("border-top")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-top-color.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de type &lt;color&gt; */
+border-top-color: red;
+border-top-color: #ffbb00;
+border-top-color: rgb(255, 0, 0);
+border-top-color: hsla(100%, 50%, 25%, 0.75);
+border-top-color: currentColor;
+border-top-color: transparent;
+
+/* Valeurs globales */
+border-top-color: inherit;
+border-top-color: initial;
+border-top-color: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>Une valeur de couleur (type {{cssxref("&lt;color&gt;")}}) qui décrit la couleur utilisée pour la bordure du côté haut.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.maboite {
+  border: solid 0.3em gold;
+  border-top-color: red;
+  width: auto;
+}
+
+.texterouge {
+  color: red;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="maboite"&gt;
+  &lt;p&gt;Une boîte avec une bordure autour.
+     Notez le côté de la boîte qui est
+     &lt;span class="texterouge"&gt;rouge&lt;/span&gt;.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#border-top-color', 'border-top-color')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Pas de modification significative, la valeur <code>transparent</code> a été supprimée car elle fait désormais partie du type {{cssxref("&lt;color&gt;")}} qui a été étendu.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#propdef-border-top-color', 'border-top-color')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-top-color")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés raccourciées liées aux bordures
+  <ul>
+   <li>{{cssxref("border")}},</li>
+   <li>{{cssxref("border-top")}},</li>
+   <li>{{cssxref("border-color")}}.</li>
+  </ul>
+ </li>
+ <li>Les propriétés de couleur pour les autres bordures :
+  <ul>
+   <li>{{cssxref("border-right-color")}},</li>
+   <li>{{cssxref("border-bottom-color")}},</li>
+   <li>{{cssxref("border-left-color")}}.</li>
+  </ul>
+ </li>
+ <li>Les autres propriétés liées à la bordure du haut :
+  <ul>
+   <li>{{cssxref("border-top-style")}},</li>
+   <li>{{cssxref("border-top-width")}}.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/border-top-left-radius/index.html b/files/fr/web/css/border-top-left-radius/index.html
new file mode 100644
index 0000000000..8654e68903
--- /dev/null
+++ b/files/fr/web/css/border-top-left-radius/index.html
@@ -0,0 +1,138 @@
+---
+title: border-top-left-radius
+slug: Web/CSS/border-top-left-radius
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-top-left-radius
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>border-top-left-radius</code></strong> définit le rayon de courbure de la bordure pour le coin en haut à gauche de la boîte. L'arrondi peut être un fragment de cercle ou d'ellipse. Si une des valeurs vaut <code>0</code>, aucun arrondi n'a lieu et le coin est un angle droit.Un arrière-plan (que ce soit une couleur ou une image) sera rogné selon la bordure même si celle-ci est arrondie. L'endroit du rognage est défini selon la valeur de {{cssxref("background-clip")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-top-left-radius.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note"><strong>Note :</strong> Si la valeur de cette propriété n'est pas définie par la propriété raccourcie {{cssxref("border-radius")}} et que cette dernière est appliquée après <code>border-top-left-radius</code>, cela aura pour effet de réinitialiser la valeur avec la valeur initiale de <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">la propriété raccourcie</a>.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Le coin est un quart de cercle         */
+/* La valeur indique le rayon de courbure */
+border-top-left-radius: 3px;
+
+/* Le coin est un quart d'ellipse         */
+/* La première valeur indique le demi-axe */
+/* horizontal et la seconde le demi-axe   */
+/* vertical                               */
+border-top-left-radius: 0.5em 1em;
+
+border-top-left-radius: inherit;
+</pre>
+
+<p>Cette propriété peut prendre deux formes :</p>
+
+<ul>
+ <li>Une première avec une longueur (<code>&lt;length&gt;</code>) ou un pourcentage (<code>&lt;percentage&gt;</code>) qui indique le rayon de courbure pour ce coin</li>
+ <li>Une seconde avec deux valeurs
+  <ul>
+   <li>La première est une longueur (<code>&lt;length&gt;</code>) ou un pourcentage (<code>&lt;percentage&gt;</code>) qui indique le rayon de courbure de l'axe horizontal de l'ellipse pour ce coin</li>
+   <li>La seconde est une longueur (<code>&lt;length&gt;</code>) ou un pourcentage (<code>&lt;percentage&gt;</code>) qui indique le rayon de courbure de l'axe vertical de l'ellipse pour ce coin</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>La mesure du rayon ou de l'un des demi-axes de l'ellipse. Une valeur absolue peut être exprimée dans n'importe quelle unité autorisée pour le type {{cssxref("&lt;length&gt;")}}. Les valeurs exprimées en pourcentage font référence à la hauteur de la boîte pour les valeurs verticales et à la largeur de la boîte pour les valeurs horizontales. Les valeurs négatives ne sont pas autorisées.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: lightgreen;
+  border: solid 1px black;
+  width: 100px;
+  height: 130px;
+}
+
+.arc_cercle {
+  border-top-left-radius: 40px 40px;
+}
+
+.arc_ellipse {
+  border-top-left-radius: 40px 20px;
+}
+
+.pourcentage {
+  border-top-left-radius: 40%;
+}
+
+.rognage {
+  border: black 10px double;
+  border-top-left-radius: 40%;
+  background-color: rgb(250,20,70);
+  background-clip: content-box; // essayez margin-box...
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html"> &lt;div class="arc_cercle"&gt;&lt;/div&gt;
+ &lt;div class="arc_ellipse"&gt;&lt;/div&gt;
+ &lt;div class="pourcentage"&gt;&lt;/div&gt;
+ &lt;div class="rognage"&gt;&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","200","540")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-border-radius', 'border-top-left-radius')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-top-left-radius")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La propriété raccourcie {{cssxref("border-radius")}}</li>
+ <li>Les propriétés pour les autres coins :
+  <ul>
+   <li>{{cssxref("border-top-right-radius")}},</li>
+   <li>{{cssxref("border-bottom-right-radius")}},</li>
+   <li>{{cssxref("border-bottom-left-radius")}}.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/border-top-right-radius/index.html b/files/fr/web/css/border-top-right-radius/index.html
new file mode 100644
index 0000000000..1b3c846a99
--- /dev/null
+++ b/files/fr/web/css/border-top-right-radius/index.html
@@ -0,0 +1,140 @@
+---
+title: border-top-right-radius
+slug: Web/CSS/border-top-right-radius
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-top-right-radius
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>border-top-right-radius</code></strong> définit le rayon de courbure de la bordure pour le coin en haut à droite de la boîte. L'arrondi peut être un fragment de cercle ou d'ellipse. Si une des valeurs vaut <code>0</code>, aucun arrondi n'a lieu et le coin est un angle droit.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-top-right-radius.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Un arrière-plan (que ce soit une couleur ou une image) sera rogné selon la bordure même si celle-ci est arrondie. L'endroit du rognage est défini selon la valeur de {{cssxref("background-clip")}}.</p>
+
+<div class="note"><strong>Note :</strong> Si la valeur de cette propriété n'est pas définie par la propriété raccourcie {{cssxref("border-radius")}} et que cette dernière est appliquée après <code>border-top-radius-radius</code>, cela aura pour effet de réinitialiser la valeur avec la valeur initiale de <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">la propriété raccourcie</a>.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Le coin est un quart de cercle         */
+/* La valeur indique le rayon de courbure */
+border-top-right-radius: 3px;
+
+/* Le coin est un quart d'ellipse         */
+/* La première valeur indique le demi-axe */
+/* horizontal et la seconde le demi-axe   */
+/* vertical                               */
+border-top-right-radius: 0.5em 1em;
+
+border-top-right-radius: inherit;
+</pre>
+
+<p>Cette propriété peut prendre deux formes :</p>
+
+<ul>
+ <li>Une première avec une longueur (<code>&lt;length&gt;</code>) ou un pourcentage (<code>&lt;percentage&gt;</code>) qui indique le rayon de courbure pour ce coin</li>
+ <li>Une seconde avec deux valeurs
+  <ul>
+   <li>La première est une longueur (<code>&lt;length&gt;</code>) ou un pourcentage (<code>&lt;percentage&gt;</code>) qui indique le rayon de courbure de l'axe horizontal de l'ellipse pour ce coin</li>
+   <li>La seconde est une longueur (<code>&lt;length&gt;</code>) ou un pourcentage (<code>&lt;percentage&gt;</code>) qui indique le rayon de courbure de l'axe vertical de l'ellipse pour ce coin</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>La mesure du rayon ou de l'un des demi-axes de l'ellipse. Une valeur absolue peut être exprimée dans n'importe quelle unité autorisée pour le type {{cssxref("&lt;length&gt;")}}. Les valeurs exprimées en pourcentage font référence à la hauteur de la boîte pour les valeurs verticales et à la largeur de la boîte pour les valeurs horizontales. Les valeurs négatives ne sont pas autorisées<code>.</code></dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: lightgreen;
+  border: solid 1px black;
+  width: 100px;
+  height: 130px;
+}
+
+.arc_cercle {
+  border-top-right-radius: 40px 40px;
+}
+
+.arc_ellipse {
+  border-top-right-radius: 40px 20px;
+}
+
+.pourcentage {
+  border-top-right-radius: 40%;
+}
+
+.rognage {
+  border: black 10px double;
+  border-top-right-radius: 40%;
+  background-color: rgb(250,20,70);
+  background-clip: content-box; // essayez margin-box...
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html"> &lt;div class="arc_cercle"&gt;&lt;/div&gt;
+ &lt;div class="arc_ellipse"&gt;&lt;/div&gt;
+ &lt;div class="pourcentage"&gt;&lt;/div&gt;
+ &lt;div class="rognage"&gt;&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","200","540")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-border-radius', 'border-top-right-radius')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.border-top-right-radius")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La propriété raccourcie {{cssxref("border-radius")}}</li>
+ <li>Les propriétés pour les autres coins :
+  <ul>
+   <li>{{cssxref("border-top-left-radius")}},</li>
+   <li>{{cssxref("border-bottom-right-radius")}},</li>
+   <li>{{cssxref("border-bottom-left-radius")}}.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/border-top-style/index.html b/files/fr/web/css/border-top-style/index.html
new file mode 100644
index 0000000000..d541ac4b44
--- /dev/null
+++ b/files/fr/web/css/border-top-style/index.html
@@ -0,0 +1,230 @@
+---
+title: border-top-style
+slug: Web/CSS/border-top-style
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-top-style
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété<strong> <code>border-top-style</code></strong> définit le style de ligne utilisé pour mettre en forme la bordure en haut d'une boîte.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-top-style.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note"><strong>Note :</strong> La spécification ne définit pas la façon dont les bordures de différents styles se rejoignent dans les coins.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+border-top-style: none;
+border-top-style: hidden;
+border-top-style: dotted;
+border-top-style: dashed;
+border-top-style: solid;
+border-top-style: double;
+border-top-style: groove;
+border-top-style: ridge;
+border-top-style: inset;
+border-top-style: outset;
+
+/* Valeurs globales */
+border-top-style: inherit;
+border-top-style: inherit;
+border-top-style: inherit;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;br-style&gt;</code></dt>
+ <dd>Un mot-clé décrivant la forme qu'on souhaite avoir pour la bordure du côté haut. Il peut prendre l'une des valeurs suivantes :
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td><code>none</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-top-style: none; background-color: palegreen;"> </div>
+    </td>
+    <td>L'effet obtenu est le même qu'avec <code>hidden</code> : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-top-width")}} sera <code>0</code>, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, <code>none</code> a la priorité la plus basse donc si une autre bordure est définie et fusionne avec celle-ci, elle sera  affichée.</td>
+   </tr>
+   <tr>
+    <td><code>hidden</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: hidden; background-color: palegreen;"> </div>
+    </td>
+    <td>L'effet obtenu est le même qu'avec <code>none</code> : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-top-width")}} sera <code>0</code>, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, <code>hidden</code> a la plus haute priorité et donc si une autre bordure est définie et fusionne avec celle-ci, aucune ne sera  affichée.</td>
+   </tr>
+   <tr>
+    <td><code>dotted</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: dotted; background-color: palegreen;"> </div>
+    </td>
+    <td>Affiche une série de points ronds. L'espace entre ces points n'est pas défini par la spécification et est donc laissé à l'implémentation. Le rayon des points correspond à la moitié de {{cssxref("border-top-width")}}.</td>
+   </tr>
+   <tr>
+    <td><code>dashed</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: dashed; background-color: palegreen;"> </div>
+    </td>
+    <td>Affiche une série de tirets. La taille de ces tirets n'est pas définie par la spécification et est laissée à l'implémentation.</td>
+   </tr>
+   <tr>
+    <td><code>solid</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: solid; background-color: palegreen;"> </div>
+    </td>
+    <td>Affiche une ligne droite continue.</td>
+   </tr>
+   <tr>
+    <td><code>double</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: double; background-color: palegreen;"> </div>
+    </td>
+    <td>Deux lignes droites sont affichées dont la somme des épaisseurs correspond à la valeur fournie par {{cssxref("border-width")}} ou {{cssxref("border-top-width")}}.</td>
+   </tr>
+   <tr>
+    <td><code>groove</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: groove; background-color: palegreen;"> </div>
+    </td>
+    <td>La bordure crée un effet 3D donnant l'impression qu'elle a été gravée dans le document. On obtient un effet opposé à <code>ridge</code>.</td>
+   </tr>
+   <tr>
+    <td><code>ridge</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: ridge; background-color: palegreen;"> </div>
+    </td>
+    <td>La bordure crée un effet 3D donnant l'impression que la bordure ressort du document. L'effet obtenu est opposé à celui obtenu avec <code>groove</code>.</td>
+   </tr>
+   <tr>
+    <td><code>inset</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: inset; background-color: palegreen;"> </div>
+    </td>
+    <td>La bordure crée un effet 3D qui donne l'impression que la boîte est renfoncée dans le document (l'effet obtenu est opposé à celui obtenu avec <code>outset</code>). Lorsqu'elle est appliquée sur une cellule de tableau et que {{cssxref("border-collapse")}} vaut <code>collapsed</code>, cette valeur se comporte comme <code>groove</code>.</td>
+   </tr>
+   <tr>
+    <td><code>outset</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: outset; background-color: palegreen;"> </div>
+    </td>
+    <td>
+     <p>La bordure crée un effet 3D qui fait ressortir la boîte (l'effet est opposé à <code>inset</code>). Lorsqu'elle est utilisé sur une cellule de tableau avec {{cssxref("border-collapse")}} qui vaut <code>collapsed</code>, cette valeur se comporte comme <code>ridge</code>.</p>
+    </td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt><code>inherit</code></dt>
+ <dd>Ce mot-clé représente le style de la bordure utilisé pour l'élément parent.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* On applique un style sur le tableau */
+table {
+  border-width: 2px;
+  background-color: #52E385;
+}
+tr, td {
+  padding: 3px;
+}
+
+/* Des exemples pour border-top-style */
+.b1 {border-top-style:none;}
+.b2 {border-top-style:hidden;}
+.b3 {border-top-style:dotted;}
+.b4 {border-top-style:dashed;}
+.b5 {border-top-style:solid;}
+.b6 {border-top-style:double;}
+.b7 {border-top-style:groove;}
+.b8 {border-top-style:ridge;}
+.b9 {border-top-style:inset;}
+.b10 {border-top-style:outset;}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td class="b1"&gt;none&lt;/td&gt;
+    &lt;td class="b2"&gt;hidden&lt;/td&gt;
+    &lt;td class="b3"&gt;petits points&lt;/td&gt;
+    &lt;td class="b4"&gt;tirets&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td class="b5"&gt;solid&lt;/td&gt;
+    &lt;td class="b6"&gt;double&lt;/td&gt;
+    &lt;td class="b7"&gt;groove&lt;/td&gt;
+    &lt;td class="b8"&gt;ridge&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td class="b9"&gt;inset&lt;/td&gt;
+    &lt;td class="b10"&gt;outset&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', 300, 200)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-border-style', 'border-top-style')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Aucune modification significative.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-top-style')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.border-top-style")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les autres propriétés liées au style des bordures :
+  <ul>
+   <li>{{cssxref("border-left-style")}}</li>
+   <li>{{cssxref("border-right-style")}}</li>
+   <li>{{cssxref("border-bottom-style")}}</li>
+   <li>{{cssxref("border-style")}}.</li>
+  </ul>
+ </li>
+ <li>Les autres propriétés liées à la bordure haute :
+  <ul>
+   <li>{{cssxref("border-top")}}</li>
+   <li>{{cssxref("border-top-color")}}</li>
+   <li>{{cssxref("border-top-width")}}.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/border-top-width/index.html b/files/fr/web/css/border-top-width/index.html
new file mode 100644
index 0000000000..1f61f14ebc
--- /dev/null
+++ b/files/fr/web/css/border-top-width/index.html
@@ -0,0 +1,158 @@
+---
+title: border-top-width
+slug: Web/CSS/border-top-width
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-top-width
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>border-top-width</code></strong> définit l'épaisseur de la bordure pour le côté haut d'une boîte.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-top-width.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Une valeur de longueur */
+/* Type &lt;length&gt;          */
+border-top-width: 10em;
+border-top-width: 3vmax;
+border-top-width: 6px;
+
+/* Valeurs avec un mot-clé */
+border-top-width: thin;
+border-top-width: medium;
+border-top-width: thick;
+
+/* Valeurs globales */
+border-top-width: inherit;
+border-top-width: initial;
+border-top-width: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;line-width&gt;</code></dt>
+ <dd>Une valeur de longueur ({{cssxref("&lt;length&gt;")}}) positive ou un mot-clé qui indique l'épaisseur de la bordure pour le haut de la boîte. Si la valeur est un mot-clé, ce doit être l'une des valeurs suivantes :
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td><code>thin</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-top-style: solid; border-top-width: thin; background-color: palegreen;"> </div>
+    </td>
+    <td>Une bordure fine.</td>
+   </tr>
+   <tr>
+    <td><code>medium</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-top-style: solid; border-top-width: medium; background-color: palegreen;"> </div>
+    </td>
+    <td>Une bordure moyenne.</td>
+   </tr>
+   <tr>
+    <td><code>thick</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-top-style: solid; border-top-width: thick; background-color: palegreen;"> </div>
+    </td>
+    <td>Une bordure épaisse.</td>
+   </tr>
+  </tbody>
+ </table>
+ La spécification ne précise pas de façon exacte l'épaisseur correspondant à chacun de ces mots-clés (c'est donc à chaque implémentation de choisir). La spécification requiert toutefois que l'inégalité suivante soit respectée <code>thin ≤ medium ≤ thick</code> et que ces valeurs soient constantes pour un même document.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.element1{
+	border-top: thick solid red;
+}
+.element2{
+	border-top: medium solid orange;
+}
+.element3{
+	border-top: thin solid green;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="element1"&gt;
+  Une bordure épaisse rouge.
+&lt;/p&gt;
+
+&lt;p class="element2"&gt;
+  Une bordure moyenne orange.
+&lt;/p&gt;
+
+&lt;p class="element3"&gt;
+  Et une bordure fine verte.
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","200","300")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-top-width')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Pas de modification significative.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-top-width')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.border-top-width")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les autres propriétés liées à la largeur de la bordure :
+  <ul>
+   <li>{{cssxref("border-left-width")}},</li>
+   <li>{{cssxref("border-right-width")}},</li>
+   <li>{{cssxref("border-bottom-width")}},</li>
+   <li>{{cssxref("border-width")}}</li>
+  </ul>
+ </li>
+ <li>Les autres propriétés CSS liées à la bordure du côté haut :
+  <ul>
+   <li>{{cssxref("border")}},</li>
+   <li>{{cssxref("border-top")}},</li>
+   <li>{{cssxref("border-top-style")}},</li>
+   <li>{{cssxref("border-top-color")}}.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/border-top/index.html b/files/fr/web/css/border-top/index.html
new file mode 100644
index 0000000000..9581bf1ec2
--- /dev/null
+++ b/files/fr/web/css/border-top/index.html
@@ -0,0 +1,126 @@
+---
+title: border-top
+slug: Web/CSS/border-top
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-top
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>border-top</code></strong> est une <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">propriété raccourcie</a> qui permet de paramétrer la bordure haute d'un élément.</p>
+
+<p>C'est une propriété raccourcie qui permet de définir les valeurs de :</p>
+
+<ul>
+ <li>{{cssxref("border-top-width")}},</li>
+ <li>{{cssxref("border-top-style")}},</li>
+ <li>{{cssxref("border-top-color")}}.</li>
+</ul>
+
+<div>{{EmbedInteractiveExample("pages/css/border-top.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note">
+<p><strong>Note :</strong> Les trois valeurs de la propriété raccourcie peuvent être définies dans n'importe quel ordre et une ou deux d'entre elles peuvent être absentes.</p>
+
+<p>Comme pour les autres propriétés raccourcies, <code>border-top</code> définit toujours les valeurs de toutes les propriétés qu'elle peut définir, même si celles-ci ne sont pas indiquées. Pour les valeurs qui ne sont pas indiquées, on prendra les valeurs par défaut. Ainsi :</p>
+
+<pre class="brush:css">border-top-style: dotted;
+border-top: thick green;
+</pre>
+
+<p>est équivalent à :</p>
+
+<pre class="brush:css">border-top-style: dotted;
+border-top: none thick green;
+</pre>
+
+<p> et la valeur {{cssxref("border-top-style")}} fournie avant <code>border-top</code> est ignorée.</p>
+
+<p>La valeur par défaut de {{cssxref("border-top-style")}} étant <code>none</code>, si on ne définit pas le style de la bordure, on aura la valeur par défaut, c'est-à-dire qu'on aura aucune bordure.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">border-top: 1px;
+border-top: 2px dotted;
+border-top: medium dashed green;
+</pre>
+
+<p>Les valeurs de la propriété raccourcie peuvent être fournies dans n'importe quel ordre et une voire deux valeurs peuvent être omises.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;br-width&gt; </code></dt>
+ <dd>Voir {{cssxref("border-top-width")}}.</dd>
+ <dt><code>&lt;br-style&gt; </code></dt>
+ <dd>Voir {{cssxref("border-top-style")}}.</dd>
+ <dt><code>&lt;color&gt; </code></dt>
+ <dd>Voir {{cssxref("border-top-color")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple {
+  border-top: 3px dotted orange;
+} </pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="exemple"&gt;
+  En passant elle prit sur un rayon un pot
+  de confiture portant cette étiquette,
+  « MARMELADE D’ORANGES. »
+&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","200","150")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#border-top', 'border-top')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Pas de modification directe bien que la modification de valeurs pour {{cssxref("border-top-color")}} s'applique.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#propdef-border-top', 'border-top')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Aucune modification significative.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border-top', 'border-top')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-top")}}</p>
diff --git a/files/fr/web/css/border-width/index.html b/files/fr/web/css/border-width/index.html
new file mode 100644
index 0000000000..a4ced190b5
--- /dev/null
+++ b/files/fr/web/css/border-width/index.html
@@ -0,0 +1,216 @@
+---
+title: border-width
+slug: Web/CSS/border-width
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-width
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>border-width</code></strong> est une <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">propriété raccourcie</a> qui définit la largeur de la bordure d'un élément.</p>
+
+<p>Cette propriété raccourcie définit les propriétés détaillées</p>
+
+<ul>
+ <li>{{cssxref("border-top-width")}},</li>
+ <li>{{cssxref("border-right-width")}},</li>
+ <li>{{cssxref("border-bottom-width")}}</li>
+ <li>{{cssxref("border-left-width")}}.</li>
+</ul>
+
+<p>Si on utilise les propriétés logiques, elle définit {{cssxref("border-block-start-width")}}, {{cssxref("border-block-end-width")}}, {{cssxref("border-inline-start-width")}} et {{cssxref("border-inline-end-width")}}.</p>
+
+<p>Afin de paramétrer une bordure de façon plus pratique, on pourra utiliser la propriété raccourcie {{cssxref("border")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-width.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+border-width: thin;
+border-width: medium;
+border-width: thick;
+
+/* Une largeur pour chaque côté */
+/* Valeur de type &lt;length&gt; */<em>
+</em>border-width: 5px;<em>
+</em>
+/* largeur verticale puis horizontale */
+border-width: 2px 1.5em;
+
+/* haut | largeur horizontale | bas */
+border-width: 1px 2em 1.5cm;
+
+/* haut | droite | bas | gauche */
+border-width: 1px 2em 0 4rem;
+
+/* Valeurs globales */
+border-width: inherit;
+border-width: initial;
+border-width: unset;
+</pre>
+
+<p>La propriété <code>border-width</code> peut être définie avec une, deux, trois ou quatre valeurs.</p>
+
+<ul>
+ <li>Lorsqu'une valeur est fournie, elle est appliquée comme largeur pour les quatre côtés</li>
+ <li>Lorsque deux valeurs sont fournies, la première est appliquée comme largeur pour la bordure basse et haute et la seconde pour la bordure gauche et droite</li>
+ <li>Lorsque trois valeurs sont fournies, la première est appliquée à la bordure haute, la deuxième à la bordure gauche et à la bordure droite et la troisième à la bordure basse</li>
+ <li>Lorsque quatres valeurs sont fournies, elles s'appliquent respectivement aux cotés haut, droit, bas et gauche (sens des aiguilles d'une montre).</li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;line-width&gt;</code></dt>
+ <dd>Une valeur de longueur (type {{cssxref("&lt;length&gt;")}} ou un mot-clé indiquant l'épaisseur de la bordure. Le mot-clé doit être l'une des valeurs suivantes :
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td><code>thin</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-style: solid; border-width: thin; background-color: palegreen;"> </div>
+    </td>
+    <td>La bordure est fine.</td>
+   </tr>
+   <tr>
+    <td><code>medium</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-style: solid; border-width: medium; background-color: palegreen;"> </div>
+    </td>
+    <td>La bordure est moyenne.</td>
+   </tr>
+   <tr>
+    <td><code>thick</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-style: solid; border-width: thick; background-color: palegreen;"> </div>
+    </td>
+    <td>La bordure est épaisse.</td>
+   </tr>
+  </tbody>
+ </table>
+  La spécification ne définit pas précisément l'épaisseur correspondante à chacun de ces mots-clés, les rendant dépendants de l'implémentation. Toutefois, la spécification indique que l'épaisseur doit suivre la relation d'inégalité suivante : <code>thin ≤ medium ≤ thick</code> et que les valeurs pour chaque mot-clé doivent être constantes pour un même document.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p id="unevaleur"&gt;
+  Une valeur : la bordure fait 6px sur les 4 côtés.
+&lt;/p&gt;
+
+&lt;p id="deuxvaleurs"&gt;
+  Deux valeurs différentes : elle fait 2px en haut
+  et en bas et elle mesure 10px pour les bords droit
+  et gauche.
+&lt;/p&gt;
+
+&lt;p id="troisvaleurs"&gt;
+  Trois valeurs différentes : 0.3em pour le haut,
+  9px pour le bas et zéro pour la droite et la
+  gauche.
+&lt;/p&gt;
+
+&lt;p id="quatrevaleurs"&gt;
+  Quatre valeurs différentes : "thin" pour le haut,
+  "medium" pour la droite, "thick" pour le bas
+  et 1em pour la gauche.
+&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#unevaleur {
+  border: ridge #ccc;
+  border-width: 6px;
+}
+
+#deuxvaleurs {
+  border: solid red;
+  border-width: 2px 10px;
+}
+
+#troisvaleurs {
+  border: dotted orange;
+  border-width: 0.3em 0 9px;
+}
+
+#quatrevaleurs {
+  border: solid lightgreen;
+  border-width: thin medium thick 1em;
+}
+
+p {
+  width: auto;
+  margin: 0.25em;
+  padding: 0.25em;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', 300, 180) }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-width')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Pas de modification directe. La modification du type de données {{cssxref("&lt;length&gt;")}} impacte cette propriété.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-width')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Ajout de la contrainte indiquant que la signification des valeurs doit être constante au sein d'un document.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border-width', 'border-width')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.border-width")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés raccourcies liées aux bordures
+  <ul>
+   <li>{{cssxref("border")}},</li>
+   <li>{{cssxref("border-style")}}</li>
+   <li>{{cssxref("border-color")}}</li>
+  </ul>
+ </li>
+ <li>Les propriétés liées à la largeur des bordures
+  <ul>
+   <li>{{cssxref("border-bottom-width")}},</li>
+   <li>{{cssxref("border-left-width")}},</li>
+   <li>{{cssxref("border-right-width")}},</li>
+   <li>{{cssxref("border-top-width")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/border/index.html b/files/fr/web/css/border/index.html
new file mode 100644
index 0000000000..19e1675de2
--- /dev/null
+++ b/files/fr/web/css/border/index.html
@@ -0,0 +1,148 @@
+---
+title: border
+slug: Web/CSS/border
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border
+---
+<div>{{CSSRef("CSS Borders")}}</div>
+
+<p>La propriété CSS <strong><code>border</code></strong> est <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">une propriété raccourcie</a> qui permet de définir les propriétés liées à la bordure. <code>border</code> peut être utilisée pour définir les valeurs de {{cssxref("border-width")}}, {{cssxref("border-style")}} et {{cssxref("border-color")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Comme pour toutes les propriétés raccourcie, si une valeur est absente pour la propriété détaillée correspondante, cette dernière sera réinitialisée avec sa valeur initiale. On notera également que {{cssxref("border-image")}} ne peut pas être définie via cette propriété raccourcie mais elle sera quand même réinitialisée (sa valeur initiale est <code>none</code>). Ainsi, <code>border</code> peut être utilisée pour réinitialiser n'importe quelle propriété liée à la bordure définie plus haut dans la cascade.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Bien que les propriétés raccourcies {{cssxref("border-width")}}, {{cssxref("border-style")}} et {{cssxref("border-color")}} acceptent jusqu'à quatre valeurs pour les différents côtés, cette propriété (<code>border</code>) n'accepte qu'une seule valeur pour chaque propriété détaillée. Le résultat obtenu sera donc homogène sur les quatre côtés.</p>
+</div>
+
+<h3 id="Différences_entre_les_bordures_et_les_contours_(outlines)">Différences entre les bordures et les contours (<em>outlines</em>)</h3>
+
+<p>Les bordures et <a href="/fr/docs/Web/CSS/outline">contours</a> sont similaires mais quelques différences les distinguent :</p>
+
+<ul>
+ <li>Les contours n'occupent pas d'espace sur l'élément : ils sont dessinés en dehors du contenu de l'élément</li>
+ <li>Selon la spécification, les contours ne sont pas nécessairement rectangulaires.</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* style */
+border: solid;
+
+/* largeur | style */
+border: 2px dotted;
+
+/* style | couleur */
+border: outset #f33;
+
+/* largeur | style | couleur */
+border: medium dashed green;
+
+/* Valeurs globales */
+border: inherit;
+border: initial;
+border: unset;
+</pre>
+
+<p>La propriété <code>border</code> peut être définie grâce à une ou plusieurs valeurs <code><a href="#br-width">&lt;line-width&gt;</a></code>, <code><a href="#br-style">&lt;line-style&gt;</a></code> ou <code><a href="#color">&lt;color&gt;</a></code>.</p>
+
+<div class="note">
+<p><strong>Note :</strong> La bordure pourra être invisible si son style n'est pas défini. En effet, sa valeur par défaut est <code>none</code>.</p>
+</div>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><a id="br-width" name="br-width"><code>&lt;line-width&gt;</code></a></dt>
+ <dd>Voir {{cssxref("border-width")}} (la valeur par défaut est <code>medium</code>).</dd>
+ <dt><a id="br-style" name="br-style"><code>&lt;line-style&gt;</code></a></dt>
+ <dd>Voir {{cssxref("border-style")}} (la valeur par défaut est <code>none</code>).</dd>
+ <dt><a id="color" name="color"><code>&lt;color&gt;</code></a></dt>
+ <dd>Voir {{cssxref("border-color")}}. Une valeur de type {{cssxref("&lt;color&gt;")}} qui indique la couleur de la bordure. La valeur par défaut qui sera utilisée sera la valeur de la propriété {{cssxref("color")}} de l'élément (qui est la couleur du texte de l'élément, pas de son arrière-plan).</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.brd {
+  border: 1px solid black;
+}
+style {
+  border: 1px dashed black;
+  display:block;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="brd"&gt;Oh des bordures&lt;/div&gt;
+&lt;p&gt;
+  N'hésitez pas à éditer le CSS qui suit pour voir
+  l'effet des valeurs.
+&lt;/p&gt;
+&lt;style contenteditable&gt;
+  .brd {
+    border: 1px solid black;
+  }
+&lt;/style&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-border-shorthands', 'border')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>La prise en charge du mot-clé <code>transparent</code> est retirée car celui-ci est désormais intégré au type {{cssxref("&lt;color&gt;")}}. En pratique, cela n'a pas d'impact. Bien que {{cssxref("border-image")}} ne puisse être définie via <code>border</code>, cette dernière la réinitialise quand même avec sa valeur initiale (<code>none</code>).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#border-shorthand-properties', 'border')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Le mot-clé <code>inherit</code> peut être utilisé et <code>transparent</code> est considéré comme une couleur valide.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border', 'border')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("border-top-left-radius")}},</li>
+ <li>{{cssxref("border-top-right-radius")}},</li>
+ <li>{{cssxref("border-bottom-right-radius")}},</li>
+ <li>{{cssxref("border-bottom-left-radius")}}</li>
+</ul>
diff --git a/files/fr/web/css/bottom/index.html b/files/fr/web/css/bottom/index.html
new file mode 100644
index 0000000000..e50831a502
--- /dev/null
+++ b/files/fr/web/css/bottom/index.html
@@ -0,0 +1,166 @@
+---
+title: bottom
+slug: Web/CSS/bottom
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/bottom
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>bottom</code></strong> contribue à la définition de l'emplacement vertical des <a href="/fr/docs/Web/CSS/position">éléments positionnés</a>. Elle n'a aucun effet pour les éléments non-positionnés.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/bottom.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Pour les <strong>éléments positionnés de façon absolue</strong>, c'est-à-dire ceux dont la valeur de la propriété {{cssxref("position")}} vaut <code>absolute</code> ou <code>fixed</code>, la propriété <code>bottom</code> définit la distance entre le bord bas de la marge de l'élément et le bord bas du bloc qui contient l'élément.</p>
+
+<p>Pour les <strong>éléments positionnés de façon relative</strong>, c'est-à-dire ceux dont la valeur de propriété {{cssxref("position")}} est <code>relative</code>, la propriété <code>bottom</code> définit la distance dont le bord bas de l'élément est déplacé au-dessus de sa position normale.</p>
+
+<p>Pour les éléments adhérents, c'est-à-dire ceux dont la valeur de la propriété {{cssxref("position")}} est <code>sticky</code></p>
+
+<p>Lorsque les propriétés {{cssxref("top")}} et <code>bottom</code> sont définies et que {{cssxref("height")}} n'est pas définie ou vaut <code>auto</code> ou <code>100%</code>, les distances indiquées par {{cssxref("top")}} et <code>bottom</code> sont respectées. Dans les autres cas, si {{cssxref("height")}} est contrainte, la propriété {{cssxref("top")}} prendra le pas sur la propriété <code>bottom</code> qui sera alors ignorée.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+bottom: 3px;
+bottom: 2.4em;
+
+/* Valeurs proportionnelles à la hauteur */
+/* du bloc englobant                     */
+/* Type &lt;percentages&gt;                    */
+bottom: 10%;
+
+/* Valeurs avec un mot-clé */
+bottom: auto;
+
+/* Valeurs globales */
+bottom: inherit;
+bottom: initial;
+bottom: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une longueur (type {{cssxref("&lt;length&gt;")}} qui représente :
+ <ul>
+  <li>La distance depuis le bord bas du bloc englobant pour <strong>les éléments positionnés de façon absolue</strong></li>
+  <li>Le décalage avec lequel l'élément est déplacé au-dessus de sa position normale dans le flux pour pour <strong>les éléments positionnés de façon relative </strong>.</li>
+ </ul>
+ </dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Une valeur de pourcentage (type {{cssxref("&lt;percentage&gt;")}} exprimée par rapport à la hauteur du bloc englobant.</dd>
+ <dt><code>auto</code></dt>
+ <dd>
+ <ul>
+  <li>Pour <strong>les éléments positionnés de façon absolue :</strong> la position de l'élément se base sur la propriété {{cssxref("top")}} et <code>height: auto</code> est traitée comme une hauteur basée sur la taille du contenu</li>
+  <li>Pour <strong>les éléments positionnés de façon relative :</strong> le décalage avec lequel l'élément est déplacé est construit à partir de la propriété {{cssxref("top")}} et si celle-ci vaut également <code>auto</code>, l'élément n'est pas déplacé verticalement.</li>
+ </ul>
+ </dd>
+ <dt><code>inherit</code></dt>
+ <dd>Cette valeur indique que la valeur est la même que la valeur calculée pour l'élément parent (qui peut ne pas être le bloc englobant). Cette valeur calculée est gérée comme si elle était une longueur, un pourcentage ou le mot-clé <code>auto</code>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on illustre la différence de comportement de la propriété <code>bottom</code> lorsque {{cssxref("position")}} vaut <code>absolute</code> ou lorsqu'elle vaut <code>fixed</code>. When the regular text becomes taller than the viewable portion of the page (that is, the browser window's viewport), blocks positioned with <code>position:absolute</code> scroll with the page, while blocks positioned with <code>position:fixed</code> don't.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  font-size:30px;
+  line-height:3em;
+}
+
+div.pos {
+  width:49%;
+  text-align:center;
+  border:2px solid #00f;
+}
+
+div#abs {
+  position:absolute;
+  bottom:0;
+  left:0;
+}
+
+div#fix {
+  position:fixed;
+  bottom:0;
+  right:0;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  Voici &lt;br&gt;un&lt;br&gt;grand&lt;br&gt;grand,&lt;br&gt;grand,
+  &lt;br&gt;grand,&lt;br&gt;grand,&lt;br&gt;grand&lt;br&gt;contenu.
+&lt;/p&gt;
+
+&lt;div id="fix" class="pos"&gt;
+  &lt;p&gt;Fixe&lt;/p&gt;
+&lt;/div&gt;
+
+&lt;div id="abs" class="pos"&gt;
+  &lt;p&gt;Absolu&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","300","300")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#choose-position', 'bottom')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'bottom')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>bottom</code> peut désormais être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Positioning', '#propdef-bottom', 'bottom')}}</td>
+   <td>{{Spec2('CSS3 Positioning')}}</td>
+   <td>Décrit le comportement pour le positionnement adhérent (<em>sticky</em>).</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.bottom")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("position")}},</li>
+ <li>{{cssxref("top")}},</li>
+ <li>{{cssxref("left")}},</li>
+ <li>{{cssxref("right")}}</li>
+</ul>
diff --git a/files/fr/web/css/box-align/index.html b/files/fr/web/css/box-align/index.html
new file mode 100644
index 0000000000..1f9c66610d
--- /dev/null
+++ b/files/fr/web/css/box-align/index.html
@@ -0,0 +1,134 @@
+---
+title: box-align
+slug: Web/CSS/box-align
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/box-align
+---
+<div>{{CSSRef}}{{Non-standard_header}}{{warning("Cette propriété s'inscrivait dans une ancienne version du standard pour le module CSS sur les boîtes flexibles et a été remplacée dans une nouvelle version du standard.")}}</div>
+
+<p>La propriété CSS <strong><code>box-align</code></strong> définit comment un élément aligne son contenu par rapport à l'axe orthogonal à la disposition. L'effet obtenu ne sera visible que s'il y a de l'espace supplémentaire dans la boîte flexible. Voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS" title="CSS/Flexible_boxes">Flexbox</a> pour plus d'informations.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+box-align: start;
+box-align: center;
+box-align: end;
+box-align: baseline;
+box-align: stretch;
+
+/* Valeurs globales */
+box-lines: inherit;
+box-lines: initial;
+box-lines: unset;
+</pre>
+
+<p>La direction de l'élément dépend de son orientation.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <code>box-align</code> est paramétrée grâce à l'un des mots-clés suivants.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>start</code></dt>
+ <dd>La boîte aligne son contenu au début (l'espace restant est alors situé à la fin).</dd>
+ <dt><code>center</code></dt>
+ <dd>La boîte aligne son contenu sur le centre (l'espace restant est équitablement réparti entre le début et la fin).</dd>
+ <dt><code>end</code></dt>
+ <dd>La boîte aligne son contenu au début (l'espace restant est alors situé au début).</dd>
+ <dt><code>baseline</code></dt>
+ <dd>La boîte aligne les lignes de base des contenus (le texte sera sur la même ligne). Cela ne s'applique que si l'orientation de la boîte est horizontale.</dd>
+ <dt><code>stretch</code></dt>
+ <dd>Les boîtes s'étirent afin qu'il n'y ait plus d'espace restant dans la boîte.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div.exemple {
+  display: box;
+  display: -moz-box; /* Mozilla */
+  display: -webkit-box; /* WebKit */
+
+  /* La boîte est plus grande que ses
+     éléments afin que box-pack ait
+     un effet */
+  height: 400px;
+
+  /* La boîte est plus large que ses
+     éléments afin que box-align ait
+     un effet */
+  width: 300px;
+
+  /* Les éléments fils seront orientés
+     verticalement */
+  box-orient: vertical;
+  -moz-box-orient: vertical; /* Mozilla */
+  -webkit-box-orient: vertical; /* WebKit */
+
+  /* On centre les éléments horizontalement */
+  box-align: center;
+  -moz-box-align: center; /* Mozilla */
+  -webkit-box-align: center; /* WebKit */
+
+  /* On les regroupe vers le bas */
+  box-pack: end;
+  -moz-box-pack: end; /* Mozilla */
+  -webkit-box-pack: end; /* WebKit */
+}
+
+div.exemple &gt; p {
+  /* On réduit les éléments fils pour que
+     box-align ait un impact. */
+  width: 200px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="exemple"&gt;
+  &lt;p&gt;Je serai deuxième en partant du bas, centré horizontalement.&lt;/p&gt;
+  &lt;p&gt;Je serai en bas de div.exemple, centré horizontalement.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","500","500")}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Le bord de la boîte qui est indiqué par <code>start</code> dépend de l'orientation de la boîte : si celle-ci est orientée horizontalement, ce sera le côté haut, si elle est orientée verticalement, ce sera le côté bas. Le côté désigné par <code>end</code> est le côté opposé à <code>start</code>.</p>
+
+<p>Si l'alignement est défini via l'attribut HTML <code>align</code>, la déclaration sera alors ignorée.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/css3-flexbox/">Brouillon de travail pour le module des boîtes flexibles (W3C)</a> {{Note("L'état actuel de cette spécification ne reflète pas l'implémentation de Gecko ou WebKit.")}}</li>
+ <li><a class="external" href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">Ancienne version de la spécification</a> {{Note("Les implémentations de WebKit et Gecko reflètent cette version de la spécification.")}}</li>
+</ul>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.box-align")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("align-items")}},</li>
+ <li>{{cssxref("box-orient")}},</li>
+ <li>{{cssxref("box-direction")}},</li>
+ <li>{{cssxref("box-pack")}}.</li>
+</ul>
diff --git a/files/fr/web/css/box-decoration-break/index.html b/files/fr/web/css/box-decoration-break/index.html
new file mode 100644
index 0000000000..94b952c8db
--- /dev/null
+++ b/files/fr/web/css/box-decoration-break/index.html
@@ -0,0 +1,163 @@
+---
+title: box-decoration-break
+slug: Web/CSS/box-decoration-break
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/box-decoration-break
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>box-decoration-break</code></strong> définit la façon dont les propriétés {{cssxref("background")}}, {{cssxref("padding")}}, {{cssxref("border")}}, {{cssxref("border-image")}}, {{cssxref("box-shadow")}}, {{cssxref("margin")}} et {{cssxref("clip")}} sont appliquées sur un élément lorsque la boîte de celui-ci est fragmentée. La fragmentation apparaît lorsqu'une boîte en ligne s'étend sur plusieurs lignes ou lorsqu'un bloc s'étend sur plus d'une colonne lorsque qu'il est dans conteneur disposé en colonne ou lorsqu'un bloc déclenche un saut de page sur un média imprimé. Chaque « morceau » de l'élément est alors appelé un fragment.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/box-decoration-break.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+box-decoration-break: slice;
+box-decoration-break: clone;
+
+/* Valeurs globales */
+box-decoration-break: initial;
+box-decoration-break: inherit;
+box-decoration-break: unset;
+</pre>
+
+<p>La propriété <code>box-decoration-break</code> est définie avec l'un des mots-clés définis ci-après.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>clone</code></dt>
+ <dd>Le rendu de chaque fragment de boîte est obtenu indépendamment avec la bordure, le remplissage, la marge indiqués pour chacun des fragments. Les propriétés {{cssxref("border-radius")}}, {{cssxref("border-image")}} et {{cssxref("box-shadow")}} sont appliquées indépendamment à chaque fragment. L'arrière-plan est dessiné indépendamment pour chaque fragment (ainsi, une image d'arrière-plan avec {{cssxref("background-repeat")}}: <code>no-repeat</code> pourra être présente à plusieurs reprises).</dd>
+ <dt><code>slice</code></dt>
+ <dd>L'élément est initialement affiché comme si la boîte n'était pas fragmentée puis le rendu de cette boîte hypothétique est découpé en fragments pour chaque ligne/colonne/page. On notera que la boîte hypothétique peut être différente pour chaque fragment car elle utilise sa propre hauteur (si la rupture apparaît dans la direction de l'élément) ou sa propre largeur (si la rupture apparaît dans la direction orthogonale). C'est la valeur initiale de la propriété.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Gestion_des_fragments_pour_les_boîtes_en_ligne">Gestion des fragments pour les boîtes en ligne</h3>
+
+<h4 id="Avec_slice_(valeur_initiale)">Avec <code>slice</code> (valeur initiale)</h4>
+
+<h5 id="CSS">CSS</h5>
+
+<pre class="brush: css">.exemple {
+  background: linear-gradient(to bottom right, yellow, green);
+  box-shadow: 8px 8px 10px 0px deeppink, -5px -5px 5px 0px blue, 5px 5px 15px 0px yellow;
+  padding: 0em 1em;
+  border-radius: 16px;
+  border-style: solid;
+  margin-left: 10px;
+  font: 24px sans-serif;
+  line-height: 2;
+}</pre>
+
+<h5 id="HTML">HTML</h5>
+
+<pre class="brush: html">&lt;span class="exemple"&gt;The&lt;br&gt;quick&lt;br&gt;orange fox&lt;/span&gt;</pre>
+
+<h5 id="Résultat_live">Résultat <em>live</em></h5>
+
+<p>{{EmbedLiveSample("Avec_slice_(valeur_initiale)","200","200")}}</p>
+
+<h5 id="Image_équivalente">Image équivalente</h5>
+
+<p><img alt="A screenshot of the rendering of an inline element styled with box-decoration-break:slice and styles given in the example." src="https://mdn.mozillademos.org/files/8167/box-decoration-break-inline-slice.png" style="height: 177px; width: 191px;"></p>
+
+<h4 id="Avec_clone">Avec <code>clone</code></h4>
+
+<h5 id="CSS_2">CSS</h5>
+
+<pre class="brush: css">.exemple {
+  background: linear-gradient(to bottom right, yellow, green);
+  box-shadow: 8px 8px 10px 0px deeppink, -5px -5px 5px 0px blue, 5px 5px 15px 0px yellow;
+  padding: 0em 1em;
+  border-radius: 16px;
+  border-style: solid;
+  margin-left: 10px;
+  font: 24px sans-serif;
+  line-height: 2;
+
+ -webkit-box-decoration-break: clone;
+ -o-box-decoration-break: clone;
+  box-decoration-break: clone;
+}</pre>
+
+<h5 id="HTML_2">HTML</h5>
+
+<pre class="brush: html">&lt;span class="exemple"&gt;The&lt;br&gt;quick&lt;br&gt;orange fox&lt;/span&gt;</pre>
+
+<h5 id="Résultat_live_2">Résultat <em>live</em></h5>
+
+<p>{{EmbedLiveSample("Avec_clone","200","200")}}</p>
+
+<h5 id="Image_équivalente_2">Image équivalente</h5>
+
+<p><img alt="A screenshot of the rendering of an inline element styled with box-decoration-break:clone and styles given in the example" src="https://mdn.mozillademos.org/files/8169/box-decoration-break-inline-clone.png" style="height: 180px; width: 231px;"></p>
+
+<h3 id="Gestion_des_fragments_pour_les_boîtes_en_bloc">Gestion des fragments pour les boîtes en bloc</h3>
+
+<p>Voici ce qu'on pourra obtenir de façon analogue avec un élément de bloc :</p>
+
+<ol>
+ <li>Sans fragmentation</li>
+</ol>
+
+<p><img alt="A screenshot of the rendering of the block element used in the examples without any fragmentation." src="https://mdn.mozillademos.org/files/8181/box-decoration-break-block.png" style="height: 149px; width: 333px;"></p>
+
+<ol start="2">
+ <li>En décomposant le bloc sur trois colonnes, normalement (<code>slice</code>), on aura :</li>
+</ol>
+
+<p><img alt="A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:slice." src="https://mdn.mozillademos.org/files/8183/box-decoration-break-block-slice.png" style="height: 55px; max-width: none; width: 1025px;"></p>
+
+<ol start="3">
+ <li>Si on applique <code>box-decoration-break:clone</code>, voici le résultat :</li>
+</ol>
+
+<p><img alt="A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:clone." src="https://mdn.mozillademos.org/files/8185/box-decoration-break-block-clone.png" style="height: 61px; max-width: none; width: 1023px;"></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fragmentation', '#break-decoration', 'box-decoration-break')}}</td>
+   <td>{{Spec2('CSS3 Fragmentation')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.box-decoration-break")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("break-after")}}</li>
+ <li>{{cssxref("break-before")}}</li>
+ <li>{{cssxref("break-inside")}}</li>
+</ul>
diff --git a/files/fr/web/css/box-direction/index.html b/files/fr/web/css/box-direction/index.html
new file mode 100644
index 0000000000..dfb902df46
--- /dev/null
+++ b/files/fr/web/css/box-direction/index.html
@@ -0,0 +1,81 @@
+---
+title: box-direction
+slug: Web/CSS/box-direction
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/box-direction
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<div class="warning">
+<p><strong>Attention ! </strong>Cette propriété fait partie de la première version du standard pour les boîtes flexibles (<em>flexbox</em>) et sera remplacée dans une prochaine version. La propriété <code>-moz-box-direction</code> ne peut être utilisée que dans des composants XUL tandis que la propriété <code>box-direction</code> a été remplacée par la propriété standard <code>flex-direction</code>. Voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Flexbox</a> pour plus d'informations sur ce qui doit être utilisé à la place.</p>
+</div>
+
+<p>La propriété <strong><code>box-direction</code></strong> définit si une boîte doit organiser son contenu dans la direction normale (de haut en bas ou de gauche à droite). Pour plus de détails sur les propriétés des éléments flexibles, voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Flexbox</a>.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+box-direction: normal;
+box-direction: reverse;
+
+/* Valeurs globales */
+box-direction: inherit;
+box-direction: initial;
+box-direction: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>La boîte répartit son contenu à partir du début (le côté gauche si la boîte est orientée horizontalement ou le côté haut si la boîte est orientée verticalement).</dd>
+ <dt><code>reverse</code></dt>
+ <dd>La boîte répartit son contenu à partir de la fin (le côté droit si la boîte est orientée horizontalement ou le côté bas si la boîte est orienté verticalement).</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:css">.exemple {
+  /* du bas vers le haut */
+  -moz-box-direction: reverse;      /* Mozilla */
+  -webkit-box-direction: reverse;   /* WebKit */
+  box-direction: reverse;
+}
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Si la direction de l'élément est définie grâce à l'attribut <code>dir</code>, la déclaration est ignorée.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/css3-flexbox/">Brouillon de travail pour le module des boîtes flexibles (W3C)</a> {{note("L'état de cette spécification ne reflète pas l'implémentation de Mozilla ou Webkit.")}}</li>
+ <li><a class="external" href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">Ancienne version de la spécification</a> {{note("Les implémentations de WebKit et Mozilla se basent sur cette version de la spécification")}}</li>
+</ul>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.box-direction")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("box-orient")}},</li>
+ <li>{{cssxref("box-pack")}},</li>
+ <li>{{cssxref("box-align")}},</li>
+ <li>{{cssxref("flex-direction")}}.</li>
+</ul>
diff --git a/files/fr/web/css/box-flex-group/index.html b/files/fr/web/css/box-flex-group/index.html
new file mode 100644
index 0000000000..d875361fa4
--- /dev/null
+++ b/files/fr/web/css/box-flex-group/index.html
@@ -0,0 +1,65 @@
+---
+title: box-flex-group
+slug: Web/CSS/box-flex-group
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/box-flex-group
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<div class="warning">
+<p><strong>Attention ! </strong>Cette propriété fait partie de la première version du standard pour les boîtes flexibles (<em>flexbox</em>) et sera remplacée dans une prochaine version.</p>
+</div>
+
+<p>Voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Flexbox</a> pour plus d'informations.</p>
+
+<p>La propriété <strong><code>box-flex-group</code></strong> permet d'affecter un élément fils de la boîte flexible à un groupe. Pour plus de détails, se référer à la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Flexbox</a> qui décrit les différentes propriétés des boîtes flexibles.</p>
+
+<pre class="brush:css no-line-numbers">/* Un entier désignant le groupe */
+/* Type &lt;integer&gt;                */
+box-flex-group: 1;
+box-flex-group: 5;
+
+/* Valeurs globales */
+box-flex-group: inherit;
+box-flex-group: initial;
+box-flex-group: unset;
+</pre>
+
+<p>Les éléments flexibles sont affectés à des groupes. Le premier groupe sera désigné par l'indice 1 et les groupes suivants par 2, 3, et ainsi de suite. Lorsque l'espace restant dans la boîte est réparti, le moteur prend d'abord en compte les éléments du premier groupe et répartit l'espace entre les différents éléments de ce groupe selon leurs flexibilités relatives. Une fois l'espace augmenté au maximum, le moteur passe au groupe qui suit en utilisant l'espace restant et ainsi de suite. Si, une fois l'ensemble des groupes traités, il y a encore de l'espace, celui-ci est réparti grâce à la propriété {{cssxref("box-pack")}}.</p>
+
+<p>Si la boîte dépasse une fois que l'espace pour l'élément fils a été calculé, l'espace est alors retiré (chaque groupe est examiné dans l'ordre et l'espace est retiré selon la flexibilité de chaque élément). Les éléments ne sont pas réduits en deçà de leurs largeurs minimales.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Cette propriété est définie avec un entier positif.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/css3-flexbox/">Brouillon de travail pour le module des boîtes flexibles (W3C)</a> {{Note("L'état actuel de cette spécification ne reflète pas l'implémentation de Gecko ou WebKit.")}}</li>
+ <li><a class="external" href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">Ancienne version de la spécification.</a> {{Note("Les implémentations de WebKit et Gecko reflètent cette version de la spécification.")}}</li>
+</ul>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<div>{{Compat("css.properties.box-flex-group")}}</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("box-flex")}},</li>
+ <li>{{cssxref("box-ordinal-group")}},</li>
+ <li>{{cssxref("box-pack")}}.</li>
+</ul>
diff --git a/files/fr/web/css/box-flex/index.html b/files/fr/web/css/box-flex/index.html
new file mode 100644
index 0000000000..9a84412069
--- /dev/null
+++ b/files/fr/web/css/box-flex/index.html
@@ -0,0 +1,110 @@
+---
+title: box-flex
+slug: Web/CSS/box-flex
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/box-flex
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p class="warning">Cette propriété est utilisée pour contrôler certaines parties du modèle de boîtes XUL. Elle ne correspond ni à l'ancienne version de la spécification pour <code>box-flex</code> ni au comportement de <code>-webkit-box-flex</code>. Voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Flexbox</a> pour plus d'informations sur ce qui doit être utilisé à la place.</p>
+
+<p>Les propriétés <strong><code>-moz-box-flex</code></strong> et <strong><code>-webkit-box-flex</code></strong> définissent la façon dont une boîte <code>-moz-box</code> ou <code>-webkit-box</code> s'étend pour remplir la boîte englobante, dans la direction indiquée par la disposition de la boîte. Pour plus de détails, se référer à la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Flexbox</a> qui décrit les différentes propriétés des boîtes flexibles.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs numériques */
+/* Type &lt;number&gt;      */
+-moz-box-flex: 0;
+-moz-box-flex: 2;
+-moz-box-flex: 3.5;
+-webkit-box-flex: 0;
+-webkit-box-flex: 2;
+-webkit-box-flex: 3.5;
+
+/* Valeurs globales */
+-moz-box-flex: inherit;
+-moz-box-flex: initial;
+-moz-box-flex: unset;
+-webkit-box-flex: inherit;
+-webkit-box-flex: initial;
+-webkit-box-flex: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;number&gt;")}}. Si la valeur vaut 0, la boîte ne s'étend pas. Si elle est supérieure à 0, la boîte s'étendra sur l'espace disponible de façon proportionnelle.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div.exemple {
+  display: -moz-box;
+  display: -webkit-box;
+  border: 1px solid black;
+  width: 100%;
+}
+
+div.exemple &gt; p:nth-child(1) {
+  -moz-box-flex: 1; /* Mozilla */
+  -webkit-box-flex: 1; /* WebKit */
+  border: 1px solid black;
+}
+
+div.exemple &gt; p:nth-child(2) {
+  -moz-box-flex: 0; /* Mozilla */
+  -webkit-box-flex: 0; /* WebKit */
+  border: 1px solid black;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="exemple"&gt;
+  &lt;p&gt;Je m'étends sur l'espace.&lt;/p&gt;
+  &lt;p&gt;Je ne me dilate pas.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","200","200")}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>La boîte englobante distribue l'espace supplémentaire en fonction de la valeur de <code>flex</code> de chaque élément. Les éléments pour lesquels ce coefficient est nul ne s'agrandiront pas. Si un seul élément possède un coefficient non nul, celui-ci occupera l'espace supplémentaires.</p>
+
+<p>Les éléments qui possèdent le même coefficient grandiront de la même façon.</p>
+
+<p>Si la valeur de cette propriété est définie via l'attribut XUL <code>flex</code>, la déclaration est ignorée. Afin que les éléments XUL d'une même boîte aient la même taille, on utilisera l'attribut <code>equalsize</code> avec la valeur <code>always</code>. Il n'existe pas de propriété CSS correspondante.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété n'est pas une propriété standard. <a class="external" href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">Une ancienne version de la spécification CSS3 pour les boîtes flexibles</a> définissait une propriété <code>box-flex</code> mais ce brouillon a depuis été remplacé.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<div>{{Compat("css.properties.box-flex")}}</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("box-orient")}},</li>
+ <li>{{cssxref("box-pack")}},</li>
+ <li>{{cssxref("box-direction")}},</li>
+ <li>{{cssxref("flex")}}.</li>
+</ul>
diff --git a/files/fr/web/css/box-lines/index.html b/files/fr/web/css/box-lines/index.html
new file mode 100644
index 0000000000..cae417f7d6
--- /dev/null
+++ b/files/fr/web/css/box-lines/index.html
@@ -0,0 +1,79 @@
+---
+title: box-lines
+slug: Web/CSS/box-lines
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/box-lines
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<div class="blockIndicator warning">
+<p><strong>Attention ! </strong>Cette propriété fait partie de la première version du standard pour les boîtes flexibles (<em>flexbox</em>) et sera remplacée dans une prochaine version.</p>
+</div>
+
+<p>Voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Flexbox</a> pour plus d'informations.</p>
+
+<p>La propriété <strong><code>box-lines</code></strong> détermine si la boîte se compose d'une ou plusieurs rangées (des lignes pour les boîtes orientées horizontalement et des colonnes pour les boîtes orientées verticalement). Pour plus de détails, se référer à la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Flexbox</a> qui décrit les différentes propriétés des boîtes flexibles.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+box-lines: single;
+box-lines: multiple;
+
+/* Valeurs globales */
+box-lines: inherit;
+box-lines: initial;
+box-lines: unset;
+</pre>
+
+<p>Par défaut, une boîte horizontale organisera ses éléments sur une seule ligne et une boîte verticale les organisera sur une seule colonne. On peut modifier ce comportement en utilisant <strong><code>box-lines</code></strong>. La valeur par défaut est <strong><code>single</code></strong> (ce qui correspond au cas expliqué avant) et les éléments qui ne peuvent être contenus dans cette ligne ou cette colonne dépasseront.</p>
+
+<p>Si, au contraire, on utilise la valeur <strong><code>multiple</code></strong>, la boîte pourra s'étendre sur plusieurs rangées (des lignes ou des colonnes) afin de contenir ses différents éléments fils. La boîte utilisera alors le moins de lignes ou de colonnes possibles et réduira les éléments à leur taille minimale si nécessaire.</p>
+
+<p>Si les éléments fils d'une boîte horizontale ne rentrent pas dans une ligne après avoir été réduits à leur taille minimale, ils sont déplacés sur une nouvelle ligne jusqu'à ce que rien ne dépasse de la ligne précédente. Le procédé est répété autant de fois que nécessaire. Si une ligne contient un seul élément et que celui-ci est trop grand, ce dernier restera sur cette ligne et dépassera en dehors de la boîte. Les nouvelles lignes sont créées en dessous des premières lorsque la direction de la boîte est <code>normal</code>, dans le sens inverse (<code>reverse</code>) elles seront empilées les unes au dessus des autres. La hauteur d'une ligne sera égale à la plus grande hauteur des éléments portés sur cette ligne. Aucun espace ne sera ajouté entre les lignes en dehors des marges décrites par les plus grands éléments. Lors du calcul de la hauteur, les éléments avec une marge dont la valeur calculée est <code>auto</code> seront traités comme si la marge était nulle (<code>0</code>).</p>
+
+<p>On aura un fonctionnement analogue avec une disposition verticale.</p>
+
+<p>Une fois que le nombre de rangées a été calculé, les éléments pour lesquels {{cssxref("box-flex")}} a une valeur calculée différentes de <code>0</code> seront étirés afin de remplir les espaces restants sur les lignes. Ces étirements sont calculés de façon indépendante selon chaque ligne (notamment pour {{cssxref("box-flex")}} et {{cssxref("box-flex-group")}}). Il en va de même pour le regroupement des éléments sur une ligne avec la propriété {{cssxref("box-pack")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Cette propriété est définie grâce à l'un des mots-clés suivants.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>single</code></dt>
+ <dd>Les éléments d'une boîte sont disposés sur une seule ligne ou sur une seule colonne.</dd>
+ <dt><code>multiple</code></dt>
+ <dd>Les éléments de la boîte sont disposés sur plusieurs lignes ou colonnes si nécessaire.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/css3-flexbox/">Brouillon de travail pour le module des boîtes flexibles (W3C)</a> {{Note("L'état actuel de cette spécification ne reflète pas l'implémentation de Gecko ou WebKit.")}}</li>
+ <li><a class="external" href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">Ancienne version de la spécification.</a> {{Note("Les implémentations de WebKit et Gecko reflètent cette version de la spécification.")}}</li>
+</ul>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<div>{{Compat("css.properties.box-lines")}}</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("box-flex")}},</li>
+ <li>{{cssxref("box-flex-groups")}},</li>
+ <li>{{cssxref("box-pack")}}</li>
+</ul>
diff --git a/files/fr/web/css/box-ordinal-group/index.html b/files/fr/web/css/box-ordinal-group/index.html
new file mode 100644
index 0000000000..76bee83c53
--- /dev/null
+++ b/files/fr/web/css/box-ordinal-group/index.html
@@ -0,0 +1,63 @@
+---
+title: box-ordinal-group
+slug: Web/CSS/box-ordinal-group
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/box-ordinal-group
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<div class="warning">
+<p><strong>Attention ! </strong>Cette propriété fait partie de la première version du standard pour les boîtes flexibles (<em>flexbox</em>) et sera remplacée dans une prochaine version.</p>
+</div>
+
+<p><span class="seoSummary">La propriété <strong><code>box-ordinal-group</code></strong> permet d'affecter les éléments fils d'une boîtes flexible à un groupe numéroté. Pour plus de détails, se référer à la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Flexbox</a> qui décrit les différentes propriétés des boîtes flexibles.</span></p>
+
+<p>Voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Flexbox</a> pour plus d'informations.</p>
+
+<pre class="brush:css">/* Un entier indiquant le groupe */
+/* Type &lt;integer&gt;                */
+box-ordinal-group: 1;
+box-ordinal-group: 5;
+
+/* Global values */
+box-ordinal-group: inherit;
+box-ordinal-group: initial;
+box-ordinal-group: unset;
+</pre>
+
+<p>Les groupes ordinaux peuvent être utilisés avec la propriété {{cssxref("box-direction")}} afin de contrôler l'ordre dans lequel les éléments fils apparaissent dans la boîte. Lorsque <a href="/fr/docs/Web/CSS/Valeur_calculée">la valeur calculée</a> de <strong><code>box-direction</code></strong> est <code>normal</code>, une boîte affichera ses éléments en commençant par le groupe dont l'ordre est le plus faible et les disposera de gauche à droite pour les boîtes horizontales et du haut vers le bas pour les boîtes verticales. Les éléments dont l'ordre est égal seront disposés dans l'ordre dans lequel ils apparaissent. Lorsque la direction est inversée, les ordres sont gérés de la même façon, les éléments apparaîtront dans l'ordre inverse.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Cette propriété se définit avec un entier positif.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<ul>
+ <li><a class="external" href="https://www.w3.org/TR/css3-flexbox/">Brouillon de travail pour le module des boîtes flexibles (W3C)</a>{{Note("L'état actuel de cette spécification ne reflète pas l'implémentation de Gecko ou WebKit.")}}</li>
+ <li><a class="external" href="https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">Ancienne version de la spécification.</a>{{Note("Les implémentations de WebKit et Gecko reflètent cette version de la spécification.")}}</li>
+</ul>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.box-ordinal-group")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("box-flex")}},</li>
+ <li>{{cssxref("box-flex-group")}},</li>
+ <li>{{cssxref("box-pack")}}</li>
+</ul>
diff --git a/files/fr/web/css/box-orient/index.html b/files/fr/web/css/box-orient/index.html
new file mode 100644
index 0000000000..a00996d4bd
--- /dev/null
+++ b/files/fr/web/css/box-orient/index.html
@@ -0,0 +1,111 @@
+---
+title: box-orient
+slug: Web/CSS/box-orient
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/box-orient
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<div class="warning">
+<p><strong>Attention ! </strong>Cette propriété fait partie de la première version du standard pour les boîtes flexibles (<em>flexbox</em>) et sera remplacée dans une prochaine version.</p>
+</div>
+
+<p>La propriété CSS <strong><code>box-orient</code></strong> définit si un élément organise son contenu horizontalement ou verticalement.</p>
+
+<p>Pour plus de détails, se référer à la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Flexbox</a> qui décrit les différentes propriétés des boîtes flexibles.</p>
+
+<pre class="brush:css">/* Valeurs avec un mot-clé */
+box-orient: horizontal;
+box-orient: vertical;
+box-orient: inline-axis;
+box-orient: block-axis;
+
+/* Valeurs globales */
+box-orient: inherit;
+box-orient: initial;
+box-orient: unset;
+</pre>
+
+<p>Ainsi, les éléments XUL {{XULElem("box")}} et {{XULElem("hbox")}} disposent leurs contenus horizontalement par défaut alors que  {{XULElem("vbox")}} organise son contenu de façon verticale par défaut.</p>
+
+<p>Les éléments HTML disposent leurs contenus selon l'axe <em>inline</em> par défaut. Cette propriété CSS ne s'applique qu'aux éléments HTML pour lesquels la propriété {{cssxref("display")}} vaut {{cssxref("box")}} ou {{cssxref("inline-box")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>horizontal</code></dt>
+ <dd>La boîte organise son contenu horizontalement.</dd>
+ <dt><code>vertical</code></dt>
+ <dd>La boîte organise son contenu verticalement.</dd>
+ <dt><code>inline-axis</code> (HTML)</dt>
+ <dd>La boîte organise son contenu (ses éléments-fils) dans le sens de l'axe de lecture (axe <em>inline</em>).</dd>
+ <dt><code>block-axis</code> (HTML)</dt>
+ <dd>La boîte organise son contenu (ses éléments-fils) dans le sens perpendiculaire à l'axe de lecteur (axe <em>block</em>).</dd>
+</dl>
+
+<p>Les axes <em>inline</em> et <em>block</em> dépendent du mode d'écriture (pour l'anglais, ils correspondront, respectivement, à <code>horizontal</code> et <code>vertical</code>.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div.exemple {
+  display: -moz-box; /* Mozilla */
+  display: -webkit-box; /* WebKit */
+  display: box; /* On utilise les boîtes */
+
+  -moz-box-orient: horizontal; /* Mozilla */
+  -webkit-box-orient: horizontal; /* WebKit */
+  box-orient: horizontal; /* spécifié */
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="exemple"&gt;
+  &lt;p&gt;Je serai à gauche de mon voisin.&lt;/p&gt;
+  &lt;p&gt;Et moi à droite de mon voisin.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>On aura les deux paragraphes situés côte à côte.</p>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Pour les éléments XUL, si l'orientation est définie avec l'attribut {{XULAttr("orient")}} cette propriété est ignorée.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<ul>
+ <li><a class="external" href="https://www.w3.org/TR/css3-flexbox/">Brouillon de travail pour le module des boîtes flexibles (W3C)</a> {{Note("L'état actuel de cette spécification ne reflète pas l'implémentation de Gecko ou WebKit.")}}</li>
+ <li><a class="external" href="https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">Ancienne version de la spécification.</a> {{Note("Les implémentations de WebKit et Gecko reflètent cette version de la spécification.")}}</li>
+</ul>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.box-orient")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("box-direction")}},</li>
+ <li>{{cssxref("box-pack")}},</li>
+ <li>{{cssxref("box-align")}},</li>
+ <li>{{cssxref("flex-direction")}}.</li>
+</ul>
diff --git a/files/fr/web/css/box-pack/index.html b/files/fr/web/css/box-pack/index.html
new file mode 100644
index 0000000000..bd634e8f81
--- /dev/null
+++ b/files/fr/web/css/box-pack/index.html
@@ -0,0 +1,149 @@
+---
+title: box-pack
+slug: Web/CSS/box-pack
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/box-pack
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<div class="blockIndicator warning">
+<p><strong>Attention ! </strong>Cette propriété fait partie de la première version du standard pour les boîtes flexibles (<em>flexbox</em>) et sera remplacée dans une prochaine version.</p>
+</div>
+
+<div>Les propriétés CSS <strong><code>-moz-box-pack</code></strong> et <strong><code>-webkit-box-pack</code></strong> définissent la façon dont une boîte <code>-moz-box</code> ou <code>-webkit-box</code> groupe son contenu dans la direction de la disposition. L'effet de cette propriété n'est visible que s'il reste de l'espace supplémentaire dans la boîte. Pour plus de détails, se référer à la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Flexbox</a> qui décrit les différentes propriétés des boîtes flexibles.</div>
+
+<pre class="brush:css no-line-numbers">/*  Valeurs avec un mot-clé */
+box-pack: start;
+box-pack: center;
+box-pack: end;
+box-pack: justify;
+
+/* Valeurs globales */
+box-pack: inherit;
+box-pack: initial;
+box-pack: unset;
+</pre>
+
+<p>Voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Flexbox</a> pour plus d'informations.</p>
+
+<p>La direction de la disposition dépend de l'orientation de l'élément : horizontale ou verticale.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Cette propriété se définit grâce à l'un des mots-clés définis ci-après.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>start</code></dt>
+ <dd>La boîte regroupe son contenu au début. L'espace restant est donc laissé à la fin.</dd>
+ <dt><code>center</code></dt>
+ <dd>La boîte regroupe son contenu au centre. L'espace restant est divisé de façon égale entre le début et la fin.</dd>
+ <dt><code>end</code></dt>
+ <dd>La boîte regroupe son contenu à la fin. L'espace restant est donc laissé au début.</dd>
+ <dt><code>justify</code></dt>
+ <dd>L'espace est réparti entre chacun des éléments fils sans qu'un espace soit placé avant le premier fils ou après le dernier. S'il y a un seul élément fils, la valeur est synonyme de <code>start</code>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div.exemple {
+  border-style: solid;
+
+  display: -moz-box; /* Mozilla */
+  display: -webkit-box; /* WebKit */
+
+  /* On rend la boîte plus grande que son
+     contenu pour avoir de l'espace pour box-pack */
+  height: 300px;
+  /* On rend la boîte suffisament large pour que
+     contenu soit centré horizontalemen */
+  width: 300px;
+
+  /* On oriente les éléments fils verticalement */
+  -moz-box-orient: vertical; /* Mozilla */
+  -webkit-box-orient: vertical; /* WebKit */
+
+  /* On aligne les fils sur le centre horizontal */
+  -moz-box-align: center; /* Mozilla */
+  -webkit-box-align: center; /* WebKit */
+
+  /* On groupe les éléments fils en bas de la boîte */
+  -moz-box-pack: end;             /* Mozilla */
+  -webkit-box-pack: end;          /* WebKit */
+}
+
+div.exemple p {
+  /* On réduit les éléments fils, pour
+     qu'il y ait de la place pour box-align */
+  width: 200px;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="exemple"&gt;
+  &lt;p&gt;Je serai 2nd en partant du bas de div.exemple, centré horizontalement.&lt;/p&gt;
+  &lt;p&gt;Je serai tout en bas de div.exemple, centré horizontalement.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', 310, 310)}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Le « début » et la « fin » de la boîte dépendent de l'orientation et de la direction de la boîte. Voici le tableau indiquant le début de la boîte en fonction de l'orientation et de la direction :</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th> </th>
+   <th><strong>Normal</strong></th>
+   <th><strong>Inverse</strong></th>
+  </tr>
+  <tr>
+   <th><strong>Horizontal</strong></th>
+   <td>gauche</td>
+   <td>droit</td>
+  </tr>
+  <tr>
+   <th><strong>Vertical</strong></th>
+   <td>hau</td>
+   <td>bas</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Si le regroupement utilise l'attribut <code>pack</code> de l'élément, le style est ignoré.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété n'est pas standard mais une propriété semblable est apparue <a class="external" href="https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">avec les brouillons de spécification pour les boîtes flexibles CSS3</a> et a été remplacée dans les versions suivantes de la spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<div>{{Compat("css.properties.box-pack")}}</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("box-orient")}},</li>
+ <li>{{cssxref("box-direction")}},</li>
+ <li>{{cssxref("box-align")}}</li>
+</ul>
diff --git a/files/fr/web/css/box-shadow/index.html b/files/fr/web/css/box-shadow/index.html
new file mode 100644
index 0000000000..b92597dddb
--- /dev/null
+++ b/files/fr/web/css/box-shadow/index.html
@@ -0,0 +1,156 @@
+---
+title: box-shadow
+slug: Web/CSS/box-shadow
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/box-shadow
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>box-shadow</code></strong> ajoute des ombres à la boîte d'un élément via une liste d'ombres séparées par des virgules. Une boîte d'ombre est définie avec des décalages horizontal et vertical par rapport à l'élément, avec des rayons de flou et d'étalement et avec une couleur.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/box-shadow.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Elle permet de projeter une ombre depuis un élément. Si une {{cssxref("border-radius")}} est définie sur l'élément avec l'ombre, la boîte de l'ombre prendra les mêmes arrondis. L'ordre des couches (<em>z order</em>) pour plusieurs ombres sera le même <a href="/fr/docs/Web/CSS/text-shadow">que pour les ombres texte</a> (la première ombre est sur le dessus).</p>
+
+<p><a href="/fr/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator">Le générateur de <code>box-shadow</code></a> est un outil interactif qui permet de générer des valeurs pour <code>box-shadow</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* offset-x | offset-y | color */
+box-shadow: 60px -16px teal;
+
+/* offset-x | offset-y | blur-radius | color */
+box-shadow: 10px 5px 5px black;
+
+/* offset-x | offset-y | blur-radius | spread-radius | color */
+box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
+
+/* inset | offset-x | offset-y | color */
+box-shadow: inset 5em 1em gold;
+
+/* Une liste d'ombres, séparées par des virgules */
+box-shadow: 3px 3px red, -1em 0 0.4em olive;
+
+/* Mots-clés globaux */
+box-shadow: inherit;
+box-shadow: initial;
+box-shadow: unset;
+</pre>
+
+<p>La propriété <code>box-shadow</code> peut être définie grâce :</p>
+
+<ul>
+ <li>À deux, trois ou quatre valeurs de longueur ({{cssxref("&lt;length&gt;")}}) :
+  <ul>
+   <li>Avec deux valeurs, celles-ci sont respectivement considérées comme les coordonnées de décalage de l'ombre : <a href="#offset"><code>&lt;offset-x&gt;</code> et <code>&lt;offset-y&gt;</code></a></li>
+   <li>Si une troisième valeur est fournie, celle-ci correspondra au rayon du flou : <code><a href="#blur">&lt;blur-radius&gt;</a></code></li>
+   <li>Si une quatrième valeur est fournie, celle-ci correspondra au rayon d'étalement : <code><a href="#spread">&lt;spread-radius&gt;</a></code>.</li>
+  </ul>
+ </li>
+ <li>Au mot-clé optionnel <code><a href="#inset">inset</a></code></li>
+ <li>À une valeur de couleur (<code><a href="#color">&lt;color&gt;</a></code>) optionnelle.</li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><a id="inset" name="inset"><code>inset</code></a></dt>
+ <dd>Si la valeur n'est pas définie (le cas par défaut), l'ombre sera une ombre portée (comme si la boîte était élevée au-dessus du contenu).<br>
+ La présence du mot-clé <code>inset</code> modifie l'ombre afin qu'elle soit tournée vers l'intérieur du cadre (comme si le contenu était enfoncé dans la boîte). Les ombres tournées vers l'intérieur sont dessinées à l'intérieur de la bordure (même les transparentes), au-dessus de l'arrière-plan mais sous le contenu.</dd>
+ <dt><a id="offset" name="offset"><code>&lt;offset-x&gt;</code> <code>&lt;offset-y&gt;</code></a></dt>
+ <dd>Deux valeurs de longueur ({{cssxref("&lt;length&gt;")}} qui permettent de définir le décalage de l'ombre. <code>&lt;offset-x&gt;</code> définit la distance horizontale du décalage et les valeurs négatives placeront l'ombre à gauche de l'élément. <code>&lt;offset-y&gt;</code> définit la distance verticale et les distances négatives placent l'ombre au-dessus de l'élément (cf. {{cssxref("&lt;length&gt;")}} pour les différentes unités possibles).<br>
+ Si les deux valeurs sont <code>0</code>, l'ombre est placée derrière l'élément (et peut générer un effet de flou si <code>&lt;blur-radius&gt;</code> et/ou <code>&lt;spread-radius&gt;</code> est utilisé).</dd>
+ <dt><a id="blur" name="blur"><code>&lt;blur-radius&gt;</code></a></dt>
+ <dd>Une troisième valeur de longueur ({{cssxref("&lt;length&gt;")}}). Plus cette valeur sera grande, plus le flou de l'ombre sera diffus : l'ombre sera donc plus étalée et plus légère. Les valeurs négatives ne sont pas autorisées. Si la valeur n'est pas définie, sa valeur par défaut est <code>0</code> (le côté de l'ombre est rectiligne).</dd>
+ <dt><a id="spread" name="spread"><code>&lt;spread-radius&gt;</code></a></dt>
+ <dd>Une quatrième valeur de longueur ({{cssxref("&lt;length&gt;")}}). Les valeurs positives étaleront l'ombre et les valeurs négatives rétréciront l'ombre. Si elle n'est pas définie, la valeur par défaut est <code>0</code> (l'ombre aura la même taille que l'élément).</dd>
+ <dt><a id="color" name="color"><code>&lt;color&gt;</code></a></dt>
+ <dd>Une valeur de couleur ({{cssxref("&lt;color&gt;")}}). Si la valeur n'est pas définie, la couleur utilisée dépend du navigateur ce sera généralement la propriété {{cssxref("color")}} mais Safari affiche une ombre transparente.</dd>
+</dl>
+
+<h3 id="Interpolation">Interpolation</h3>
+
+<p>Chaque ombre de la liste (<code>none</code> sera traitée comme une liste de longueur nulle) est interpolée via la couleur, le décalage horizontal et vertical, le rayon de flou et l'étalement (lorsque c'est pertinent). Pour chaque ombre, si les deux ombres sont ou ne sont pas <code>inset</code>, l'ombre interpolée doit respecter cette valeur. Si l'une des ombres a <code>inset</code> et l'autre non, la liste d'ombres ne peut pas être interpolée. Si les listes d'ombres ont des longueurs différentes, la liste la plus courte sera complétée à la fin avec des ombres dont la couleur est <code>transparent</code>, toutes les longueurs valent <code>0</code> et <code>inset</code> pour que la valeur corresponde à la plus longue liste.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 class="cleared" id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  height: 5em;
+  width: 300px;
+  background-color: rgba(128,128,128,0.1);
+}
+.ombre_droite_haut {
+  box-shadow: 60px -16px teal; /* la valeur négative décale vers le haut */
+}
+
+.ombre_interieure {
+  box-shadow: inset 5em 1em gold;
+  /* le mot-clé inset renverse l'ombre à l'intérieur */
+}
+
+.ombres_multiples_diffuses {
+  box-shadow: inset 0 0 1em gold, 0 0 2em red;
+  /* deux ombres dans la liste et des rayons de flou pour chacune */
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="ombre_droite_haut"&gt;Déportée dans l'autre sens&lt;/p&gt;
+
+&lt;p class="ombre_interieure"&gt;L'ombre est dans le contenu !&lt;/p&gt;
+
+&lt;p class="ombres_multiples_diffuses"&gt;Du rouge dehors et du doré dedans&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","400","300")}}</p>
+
+<h2 class="cleared" id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#box-shadow', 'box-shadow')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.box-shadow")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://www.elektronotdienst-nuernberg.de/bugs/box-shadow_inset.html">Quelques tests sur <code>box-shadow</code> (en anglais)</a></li>
+ <li><a href="https://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/">Tutoriel et box-shadow tutorial and examples</a></li>
+ <li><a href="https://cssgenerator.org/box-shadow-css-generator.html">Générateur d'ombres CSS</a></li>
+ <li><a href="/fr/docs/Web/HTML/Applying_color">Appliquer des couleurs sur des éléments HTML grâce à CSS</a></li>
+ <li>Le type de données {{cssxref("&lt;color&gt;")}}</li>
+ <li>Les autres propriétés relatives aux couleurs : {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}}.</li>
+</ul>
diff --git a/files/fr/web/css/box-sizing/index.html b/files/fr/web/css/box-sizing/index.html
new file mode 100644
index 0000000000..5e39cf30d5
--- /dev/null
+++ b/files/fr/web/css/box-sizing/index.html
@@ -0,0 +1,142 @@
+---
+title: box-sizing
+slug: Web/CSS/box-sizing
+tags:
+  - Boîtes
+  - CSS
+  - Mocèle de Boîte CSS
+  - Propriété CSS
+  - Reference
+  - border-box
+  - box-sizing
+  - content-box
+  - height
+  - modèle de boîte
+  - size
+  - width
+translation_of: Web/CSS/box-sizing
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>box-sizing</code></strong> définit la façon dont la hauteur et la largeur totale d'un élément est calculée (avec <a href="/fr/docs/CSS/Modèle_de_boîte">le modèle de boîte CSS</a>).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/box-sizing.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>En CSS, la largeur et la hauteur affectées à un élément s'appliquent par défaut à la boîte de contenu (<em>content box</em>) de l'élément. Si l'élément possède une bordure (<em>border</em>) ou du remplissage (<em>padding</em>), celui-ci est ajouté à la largeur et/ou à la hauteur de la boîte affichée à l'écran. Cela signifie qu'il faut ajuster les valeurs de hauteur et de largeur afin qu'elles permettent d'ajouter n'importe quelle bordure ou n'importe quel remplissage qui serait ajouté par la suite.</p>
+
+<p>La propriété <code>box-sizing</code> peut être utilisée afin d'ajuster ce comportement :</p>
+
+<ul>
+ <li><code>content-box</code> est la valeur par défaut et correspond au comportement par défaut décrit ci-avant. Si on définit un élément avec une largeur de 100 pixels, la boîte de contenu de cet élément mesurera 100 pixels de large et la largeur de la bordure et/ou du remplissage sera alors ajoutée pour constituer la largeur finalement affichée.</li>
+ <li><code>border-box</code> indique au navigateur de prendre en compte la bordure et le remplissage dans la valeur définie pour la largeur et la hauteur. Autrement dit, si on définit un élément avec une largeur de 100 pixels, ces 100 pixels inclueront la bordure et le remplissage éventuellement ajoutés et c'est le contenu de la boîte qui sera compressé pour absorber cette largeur supplémentaire. Cela permet généralement de simplifier le dimensionnement des éléments.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Il est souvent utile de définir <code>box-sizing</code> à <code>border-box</code> aux éléments de mise en page. Cela facilite grandement la gestion de la taille des éléments et élimine généralement un certain nombre d'écueils que vous pouvez rencontrer lors de la mise en page de votre contenu.  D'autre part, lors de l'utilisation de la <code>position: relative</code> ou <code>position: absolute</code>, l'utilisation de <code>box-sizing: content-box</code> permet aux valeurs de positionnement d'être relatives au contenu, et indépendantes des changements de taille des bordures et de la taille de la marge interne, ce qui est parfois souhaitable.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+box-sizing: content-box;
+box-sizing: border-box;
+
+/* Valeurs globales */
+box-sizing: inherit;
+box-sizing: initial;
+box-sizing: unset;
+</pre>
+
+<p>La propriété <code>box-sizing</code> peut être définie avec l'un des mots-clés suivants.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>content-box</code></dt>
+ <dd>C'est la valeur initiale et la valeur par défaut, spécifiée dans le standard CSS. Les propriétés {{cssxref("width")}} et {{cssxref("height")}} sont mesurées en incluant le contenu, mais pas le remplissage, la bordure, la marge extérieure ou intérieure. Les dimensions de l'élément sont donc calculées à partir de la hauteur et de la largeur du contenu (on ne tient pas compte de la bordure ou du remplissage (<em>padding</em>)). Ainsi, <code>.box {width: 350px; border:10px solid black;}</code> fournira une boîte dont la largeur vaut  <code>370px</code>.</dd>
+ <dt><code>border-box</code></dt>
+ <dd>Les propriétés {{cssxref("width")}} et {{cssxref("height")}} incluent le contenu, le remplissage (<em>padding</em>), la bordure, mais pas la marge. C'est le <a href="/fr/docs/CSS/Modèle_de_boîte">modèle de boîte</a> utilisé par Internet Explorer lorsque le document est en mode de compatibilité (Quirks). La boîte de contenu ne peut pas être négative et est ramenée à 0 si nécessaire, il est donc impossible d'utiliser <code>border-box</code> pour faire disparaître l'élément. Les dimensions de l'élément sont calculées comme la somme de la bordure, du remplissage (<em>padding</em>) et du contenu.<br>
+ <br>
+ Ici, les dimensions de l'élément sont calculées comme suit : <em>largeur = bordure + marge interne + largeur du contenu</em>, et <em>hauteur = bordure + marge interne + hauteur du contenu</em>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<div class="blockIndicator note">
+<p>Note : La valeur <code>padding-box</code> a été dépréciée.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  width: 160px;
+  height: 80px;
+  padding: 20px;
+  border: 8px solid red;
+  background: yellow;
+}
+
+.content-box {
+  box-sizing: content-box;
+  /* Largeur totale : 160px + (2 * 20px) + (2 * 8px) = 216px
+     Hauteur totale : 80px + (2 * 20px) + (2 * 8px) = 136px
+     Largeur de la boîte de contenu : 160px
+     Hauteur de la boîte de contenu : 80px */
+}
+
+.border-box {
+  box-sizing: border-box;
+  /* Largeur totale : 160px
+     Hauteur totale : 80px
+     Largeur de la boîte de contenu : 160px - (2 * 20px) - (2 * 8px) = 104px
+     Hauteur de la boîte de contenu : 80px - (2 * 20px) - (2 * 8px) = 24px */
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="content-box"&gt;Content box&lt;/div&gt;
+&lt;br&gt;
+&lt;div class="border-box"&gt;Border box&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","auto","200")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#box-sizing', 'box-sizing')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.box-sizing")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">Apprendre : Le modèle de boîte CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/break-after/index.html b/files/fr/web/css/break-after/index.html
new file mode 100644
index 0000000000..8db0380d03
--- /dev/null
+++ b/files/fr/web/css/break-after/index.html
@@ -0,0 +1,211 @@
+---
+title: break-after
+slug: Web/CSS/break-after
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/break-after
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>break-after</code></strong> définit la façon dont la page, la colonne ou la région se fragmente après la boîte générée. S'il n'y a aucune boîte générée, la propriété est ignorée.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs génériques */
+break-after: auto;
+break-after: avoid;
+break-after: always;
+break-after: all;
+
+/* Valeurs de rupture liées aux pages */
+break-after: avoid-page;
+break-after: page;
+break-after: always;
+break-after: left;
+break-after: right;
+break-after: recto;
+break-after: verso;
+
+/* Valeurs de rupture liées aux colonnes */
+break-after: avoid-column;
+break-after: column;
+
+/* Valeurs de rupture liées aux régions */
+break-after: avoid-region;
+break-after: region;
+
+/* Valeurs globales */
+break-after: inherit;
+break-after: initial;
+break-after: unset;
+</pre>
+
+<p>Chaque point de rupture éventuel (c'est-à-dire chaque frontière d'élément) est influencé par trois propriétés : la valeur de {{cssxref("break-after")}} de l'élément précédent, la valeur de {{cssxref("break-before")}} de l'élément suivant et la valeur de <code>break-inside</code> de l'élément englobant.</p>
+
+<p>Pour déterminer si on a une rupture, on applique les règles suivantes :</p>
+
+<ol>
+ <li>Si l'une des trois valeurs correspond à une rupture forcée (<code>always</code>, <code>left</code>, <code>right</code>, <code>page</code>, <code>column</code> ou <code>region</code>), cette valeur l'emporte. Si plusieurs valeurs décrivent une rupture forcée, c'est celle de l'élément qui apparaît le plus tard dans le flux qui est prise en compte (autrement dit, {{cssxref("break-before")}} l'emporte sur {{cssxref("break-after")}} qui l'emporte sur {{cssxref("break-inside")}}).</li>
+ <li>Si l'une des trois valeurs correspond à une valeur visant à éviter une rupture (<code>avoid</code>, <code>avoid-page</code>, <code>avoid-region</code>, <code>avoid-column</code>), aucune rupture ne sera appliquée à cet endroit.</li>
+</ol>
+
+<p>Une fois que les ruptures forcées ont été appliquées, le moteur peut ajouter des ruptures « douces » sauf aux endroits où les propriétés empêchent les ruptures.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Valeur initiale qui ne force ni n'interdit de rupture (de page, de colonne ou de région) après la boîte.</dd>
+ <dt><code>always</code>{{experimental_inline}}</dt>
+ <dd>Force la rupture après la boîte principale. Le type de rupture dépend du contexte de fragmentation. Si on est dans un conteneur multi-colonne, il y aura une rupture de colonne et si on est à l'intérieur d'un média paginé, il y aura une rupture de page.</dd>
+ <dt><code>all</code>{{experimental_inline}}</dt>
+ <dd>Force la rupture de page après la boîte principale. La rupture a lieu quel que soit le contexte de fragmentation. Ainsi, si on a un élément dans un conteneur multi-colonne lui-même situé dans un média paginé, il y aura une rupture de colonne et une rupture de page.</dd>
+ <dt><code>avoid</code></dt>
+ <dd>Empêche toute rupture (de page, de colonne ou de région) après la boîte.</dd>
+ <dt><code>left</code></dt>
+ <dd>Force un ou deux saut de page après la boîte de l'élément afin que la prochaine page soit une page gauche.</dd>
+ <dt><code>right</code></dt>
+ <dd>Force un ou deux saut de page après la boîte de l'élément afin que la prochaine page soit une page droite.</dd>
+ <dt><code>page</code></dt>
+ <dd>Force un saut de page après la boîte de l'élément.</dd>
+ <dt><code>column</code></dt>
+ <dd>Force une rupture de colonne de page après la boîte de l'élément.</dd>
+ <dt><code>region</code> {{experimental_inline}}</dt>
+ <dd>Force une rupture de région après la boîte de l'élément.</dd>
+ <dt><code>recto</code> {{experimental_inline}}</dt>
+ <dd>Force un ou deux sauts de page après la boîte de l'élément afin que la prochaine page soit une page recto (une page droite pour le sens de lecture gauche à droite et une page gauche pour le sens de lecture droite à gauche).</dd>
+ <dt><code>verso</code> {{experimental_inline}}</dt>
+ <dd>Force un ou deux sauts de page après la boîte de l'élément afin que la prochaine page soit une page verso (une page gauche pour le sens de lecture gauche à droite et une page droite pour le sens de lecture droite à gauche).</dd>
+ <dt><code>avoid-page</code></dt>
+ <dd>Empêche toute saut de page après la boîte de l'élément.</dd>
+ <dt><code>avoid-column</code></dt>
+ <dd>Empêche toute rupture de colonne après la boîte de l'élément.</dd>
+ <dt><code>avoid-region </code>{{experimental_inline}}</dt>
+ <dd>Empêche toute rupture de région après boîte de l'élément.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Synonymes_pour_page-break-after">Synonymes pour <code>page-break-after</code></h2>
+
+<p>Pour des raisons de compatibilité, la propriété historique {{cssxref("page-break-after")}} devrait être traitée par les navigateurs comme un alias de <code>break-after</code>. Cela permet de s'assurer que les sites qui utilisaient <code>page-break-after</code> continuent de fonctionner. Voici un sous-ensemble des valeurs avec leurs alias :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><code>page-break-after</code></th>
+   <th scope="col"><code>break-after</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>auto</code></td>
+   <td><code>auto</code></td>
+  </tr>
+  <tr>
+   <td><code>left</code></td>
+   <td><code>left</code></td>
+  </tr>
+  <tr>
+   <td><code>right</code></td>
+   <td><code>right</code></td>
+  </tr>
+  <tr>
+   <td><code>avoid</code></td>
+   <td><code>avoid</code></td>
+  </tr>
+  <tr>
+   <td><code>always</code></td>
+   <td><code>page</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> La valeur <code>always</code> de <code>page-break-*</code> a été implémenté par les navigateurs comme une rupture de page et pas comme une rupture de colonne. C'est pourquoi l'alias correspondant à cette valeur est <code>page</code> et pas <code>always</code>.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple {
+  -webkit-column-count: 4;
+  -moz-column-count: 4;
+  column-count: 4;
+}
+
+p {
+  break-after: avoid-column;
+  /* Pour Firefox : */
+  page-break-after: avoid;
+  /* Pour WebKit : */
+  -webkit-column-break-after: avoid;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="exemple"&gt;
+  &lt;p&gt;« Mais alors, » pensa Alice, « ne serai-je donc
+  jamais plus vieille que je ne le suis maintenant ?
+  D’un côté cela aura ses avantages, ne jamais être
+  une vieille femme. Mais alors avoir toujours des
+  leçons à apprendre ! Oh, je n’aimerais pas cela du
+  tout. »&lt;/p&gt;
+  &lt;p&gt;« Oh ! Alice, petite folle, » se répondit-elle.
+  « Comment pourriez-vous apprendre des leçons ici ?
+  Il y a à peine de la place pour vous, et il n’y en
+  a pas du tout pour vos livres de leçons. »&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","400","300")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fragmentation', '#break-after', 'break-after')}}</td>
+   <td>{{Spec2('CSS3 Fragmentation')}}</td>
+   <td>Ajouts des mots-clés <code>recto</code> et <code>verso</code>. Le type de média pour cette propriété est passé de <code>paged</code> à <code>visual</code>. L'algorithme de rupture est précisé afin de gérer les différents types de rupture.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Regions', '#region-flow-break', 'break-after')}}</td>
+   <td>{{Spec2('CSS3 Regions')}}</td>
+   <td>La spécification étend la propriété pour gérer les sauts de région. Les mots-clés <code>avoid-region</code> et <code>region</code> sont ajoutés.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Multicol', '#break-after', 'break-after')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>Définition initiale. La spécification étend la propriété {{cssxref("page-break-after")}} de CSS 2.1 afin de gérer les sauts de page ou de colonne.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<h3 id="Prise_en_charge_pour_une_disposition_multi-colonnes">Prise en charge pour une disposition multi-colonnes</h3>
+
+<p>{{Compat("css.properties.break-after.multicol_context")}}</p>
+
+<h3 id="Prise_en_charge_pour_les_média_paginés">Prise en charge pour les média paginés</h3>
+
+<p>{{Compat("css.properties.break-after.paged_context")}}</p>
diff --git a/files/fr/web/css/break-before/index.html b/files/fr/web/css/break-before/index.html
new file mode 100644
index 0000000000..35e2f5dbf8
--- /dev/null
+++ b/files/fr/web/css/break-before/index.html
@@ -0,0 +1,229 @@
+---
+title: break-before
+slug: Web/CSS/break-before
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/break-before
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété<strong> <code>break-before</code></strong> décrit la façon dont la page, la colonne ou la région se fragmente avant la boîte générée. S'il n'y a aucune boîte générée, la propriété est ignorée.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de rupture génériques */
+break-before: auto;
+break-before: avoid;
+break-before: always;
+break-before: all;
+
+/* Valeurs de rupture pour les pages */
+break-before: avoid-page;
+break-before: page:
+break-before: left;
+break-before: right;
+break-before: recto;
+break-before: verso;
+
+/* Valeurs de rupture pour les colonnes */
+break-before: avoid-column;
+break-before: column;
+
+/* Valeurs de rupture pour les régions */
+break-before: avoid-region;
+break-before: region;
+
+/* Valeurs globales */
+break-before: inherit;
+break-before: initial;
+break-before: unset;
+</pre>
+
+<p>Chaque point de rupture éventuel (c'est-à-dire chaque frontière d'élément) est influencé par trois propriétés : la valeur de {{cssxref("break-after")}} de l'élément précédent, la valeur de {{cssxref("break-before")}} de l'élément suivant et la valeur de <code>break-inside</code> de l'élément englobant.</p>
+
+<p>Pour déterminer si on a une rupture, on applique les règles suivantes :</p>
+
+<ol>
+ <li>Si l'une des trois valeurs correspond à une rupture forcée (<code>always</code>, <code>left</code>, <code>right</code>, <code>page</code>, <code>column</code> ou <code>region</code>), cette valeur l'emporte. Si plusieurs valeurs décrivent une rupture forcée, c'est celle de l'élément qui apparaît le plus tard dans le flux qui est prise en compte (autrement dit, {{cssxref("break-before")}} l'emporte sur {{cssxref("break-after")}} qui l'emporte sur {{cssxref("break-inside")}}).</li>
+ <li>Si l'une des trois valeurs correspond à une valeur visant à éviter une rupture (<code>avoid</code>, <code>avoid-page</code>, <code>avoid-region</code>, <code>avoid-column</code>), aucune rupture ne sera appliquée à cet endroit.</li>
+</ol>
+
+<p>Une fois que les ruptures forcées ont été appliquées, le moteur peut ajouter des ruptures « douces » sauf aux endroits où les propriétés empêchent les ruptures.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <code>break-before</code> se paramètre avec un des mots-clés définis ci-après.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<h4 id="Valeurs_de_rupture_génériques">Valeurs de rupture génériques</h4>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Valeur initiale qui ne force ni n'interdit de rupture (de page, de colonne ou de région) avant la boîte.</dd>
+ <dt><code>all</code>{{experimental_inline}}</dt>
+ <dd>Force la rupture juste avant la boîte principale. La rupture a lieu pour l'ensemble des contextes de fragmentation. Ainsi si l'élément concerné est dans un conteneur multi-colonnes dans un média paginé, il y aura une rupture de colonne et une rupture de page.</dd>
+ <dt><code>always</code>{{experimental_inline}}</dt>
+ <dd>Force la rupture juste avant la boîte principale. Le type de rupture dépend du contexte de fragmentation englobant l'élément. Si l'élément est situé dans un conteneur multi-colonne, une rupture de colonne sera ajoutée. Si l'élément est situé dans un média paginé (mais pas dans un conteneur multi-colonnes), la rupture introduite sera une rupture de page.</dd>
+ <dt><code>avoid</code></dt>
+ <dd>Empêche toute rupture (de page, de colonne ou de région) avant la boîte.</dd>
+</dl>
+
+<h4 id="Valeurs_de_rupture_liées_aux_médias_paginés">Valeurs de rupture liées aux médias paginés</h4>
+
+<dl>
+ <dt><code>avoid-page</code></dt>
+ <dd>Empêche toute saut de page avant la boîte de l'élément.</dd>
+ <dt><code>page</code></dt>
+ <dd>Force un saut de page avant la boîte de l'élément</dd>
+ <dt><code>left</code></dt>
+ <dd>Force un ou deux saut de page avant la boîte de l'élément afin que la prochaine page soit une page gauche.</dd>
+ <dt><code>recto</code> {{experimental_inline}}</dt>
+ <dd>Force un ou deux sauts de page avant la boîte de l'élément afin que la prochaine page soit une page recto (une page droite pour le sens de lecture gauche à droite et une page gauche pour le sens de lecture droite à gauche).</dd>
+ <dt><code>right</code></dt>
+ <dd>Force un ou deux saut de page avant la boîte de l'élément afin que la prochaine page soit une page droite.</dd>
+ <dt><code>verso</code>{{experimental_inline}}</dt>
+ <dd>Force un ou deux sauts de page avant la boîte de l'élément afin que la prochaine page soit une page verso (une page gauche pour le sens de lecture gauche à droite et une page droite pour le sens de lecture droite à gauche).</dd>
+</dl>
+
+<h4 id="Valeurs_de_ruptures_relatives_aux_dispositions_en_colonnes">Valeurs de ruptures relatives aux dispositions en colonnes</h4>
+
+<dl>
+ <dt><code>avoid-column</code></dt>
+ <dd>Empêche toute rupture de colonne avant la boîte de l'élément.</dd>
+ <dt><code>column</code></dt>
+ <dd>Force une rupture de colonne de page avant la boîte de l'élément.</dd>
+</dl>
+
+<h4 id="Valeurs_de_ruptures_relatives_aux_régions">Valeurs de ruptures relatives aux régions</h4>
+
+<dl>
+ <dt><code>region</code>{{experimental_inline}}</dt>
+ <dd>Force une rupture de région avant la boîte de l'élément.</dd>
+ <dt><code>avoid-region</code>{{experimental_inline}}</dt>
+ <dd>Empêche toute rupture de région avant la boîte de l'élément.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Aliassynonymes_pour_les_ruptures_de_page">Alias/synonymes pour les ruptures de page</h2>
+
+<p>Pour des raisons de compatibilité, la propriété historique {{cssxref("page-break-before")}} devrait être considérée par les navigateurs comme un synonyme de <code>break-before</code>. Cela permet aux sites utilisant <code>page-break-before</code> de continuer à fonctionner comme précédemment. Voici un sous-ensemble des valeurs avec leurs alias :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><code>page-break-before</code></th>
+   <th scope="col"><code>break-before</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>auto</code></td>
+   <td><code>auto</code></td>
+  </tr>
+  <tr>
+   <td><code>left</code></td>
+   <td><code>left</code></td>
+  </tr>
+  <tr>
+   <td><code>right</code></td>
+   <td><code>right</code></td>
+  </tr>
+  <tr>
+   <td><code>avoid</code></td>
+   <td><code>avoid</code></td>
+  </tr>
+  <tr>
+   <td><code>always</code></td>
+   <td><code>page</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> La valeur <code>always</code> pour <code>page-break-before</code> a été implémentée par les navigateurs comme une rupture de page et non comme une rupture de colonne. C'est pourquoi l'alias ici utilisé est <code>page</code> et non <code>always</code>.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple {
+  -webkit-column-count: 4;
+  -moz-column-count: 4;
+  column-count: 4;
+}
+
+p {
+  break-before: avoid-column;
+  /* Pour Firefox : */
+  page-break-before: avoid;
+  /* Pour WebKit : */
+  -webkit-column-break-before: avoid;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="exemple"&gt;
+  &lt;p&gt;« Mais alors, » pensa Alice, « ne serai-je donc
+  jamais plus vieille que je ne le suis maintenant ?
+  D’un côté cela aura ses avantages, ne jamais être
+  une vieille femme. Mais alors avoir toujours des
+  leçons à apprendre ! Oh, je n’aimerais pas cela du
+  tout. »&lt;/p&gt;
+  &lt;p&gt;« Oh ! Alice, petite folle, » se répondit-elle.
+  « Comment pourriez-vous apprendre des leçons ici ?
+  Il y a à peine de la place pour vous, et il n’y en
+  a pas du tout pour vos livres de leçons. »&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","400","300")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fragmentation', '#break-between', 'break-before')}}</td>
+   <td>{{Spec2('CSS3 Fragmentation')}}</td>
+   <td>Ajouts des mots-clés <code>recto</code> et <code>verso</code>. Le type de média pour cette propriété est passé de <code>paged</code> à <code>visual</code>. L'algorithme de rupture est précisé afin de gérer les différents types de rupture.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Regions', '#region-flow-break', 'break-before')}}</td>
+   <td>{{Spec2('CSS3 Regions')}}</td>
+   <td>La spécification étend la propriété pour gérer les sauts de région. Les mots-clés <code>avoid-region</code> et <code>region</code> sont ajoutés.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Multicol', '#break-before-break-after-break-inside', 'break-before')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>Définition initiale. La spécification étend la propriété {{cssxref("page-break-before")}} de  CSS 2.1 afin de gérer les sauts de page ou de colonne.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<h3 id="Prise_en_charge_pour_une_disposition_multi-colonnes">Prise en charge pour une disposition multi-colonnes</h3>
+
+<p>{{Compat("css.properties.break-before.multicol_context")}}</p>
+
+<h3 id="Prise_en_charge_pour_les_média_paginés">Prise en charge pour les média paginés</h3>
+
+<p>{{Compat("css.properties.break-before.paged_context")}}</p>
diff --git a/files/fr/web/css/break-inside/index.html b/files/fr/web/css/break-inside/index.html
new file mode 100644
index 0000000000..89fd65ae74
--- /dev/null
+++ b/files/fr/web/css/break-inside/index.html
@@ -0,0 +1,163 @@
+---
+title: break-inside
+slug: Web/CSS/break-inside
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/break-inside
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>break-inside</code></strong> définit comment la page, la colonne ou la région se fragmente au sein de la boîte générée. S'il n'y a aucune boîte générée, la propriété est ignorée.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+break-inside: auto;
+break-inside: avoid;
+break-inside: avoid-page;
+break-inside: avoid-column;
+break-inside: avoid-region;
+
+/* Valeurs globales */
+break-inside: inherit;
+break-inside: initial;
+break-inside: unset;
+</pre>
+
+<p>Chaque point de rupture éventuel (c'est-à-dire chaque frontière d'élément) est influencé par trois propriétés : la valeur de {{cssxref("break-after")}} de l'élément précédent, la valeur de {{cssxref("break-before")}} de l'élément suivant et la valeur de <code>break-inside</code> de l'élément englobant.</p>
+
+<p>Pour déterminer si on a une rupture, on applique les règles suivantes :</p>
+
+<ol>
+ <li>Si l'une des trois valeurs correspond à une rupture forcée (<code>always</code>, <code>left</code>, <code>right</code>, <code>page</code>, <code>column</code> ou <code>region</code>), cette valeur l'emporte. Si plusieurs valeurs décrivent une rupture forcée, c'est celle de l'élément qui apparaît le plus tard dans le flux qui est prise en compte (autrement dit, {{cssxref("break-before")}} l'emporte sur {{cssxref("break-after")}} qui l'emporte sur <code>break-inside</code>).</li>
+ <li>Si l'une des trois valeurs correspond à une valeur visant à éviter une rupture (<code>avoid</code>, <code>avoid-page</code>, <code>avoid-region</code> ou <code>avoid-column</code>), aucune rupture ne sera appliquée à cet endroit.</li>
+</ol>
+
+<p>Une fois que les ruptures forcées ont été appliquées, le moteur peut ajouter des ruptures « douces » sauf aux endroits où les propriétés empêchent les ruptures.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <code>break-inside</code> se définit avec un mot-clé parmi ceux de la liste ci-après.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Cette valeur n'interdit ni ne force une rupture (pour une page, une colonne ou une région).</dd>
+ <dt><code>avoid</code></dt>
+ <dd>Cette valeur interdit toute rupture (de page, de colonne ou de région) dans la boîte principale.</dd>
+ <dt><code>avoid-page</code></dt>
+ <dd>Cette valeur interdit toute rupture de page au sein de la boîte.</dd>
+ <dt><code>avoid-column</code></dt>
+ <dd>Cette valeur interdit toute rupture de colonne au sein de la boîte.</dd>
+ <dt><code>avoid-region</code> {{experimental_inline}}</dt>
+ <dd>Cette valeur interdit toute rupture de région au sein de la boîte.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Synonymes_pour_page-break-inside">Synonymes pour <code>page-break-inside</code></h2>
+
+<p>Pour des raisons de compatibilité, la propriété historique {{cssxref("page-break-inside")}} devrait être traitée par les navigateurs comme <code>break-inside</code>. De cette façon, cela permet aux sites qui utilisaient <code>page-break-inside</code> de continuer à fonctionner. Voici un sous-ensemble de valeurs avec leurs alias :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><code>page-break-inside</code></th>
+   <th scope="col"><code>break-inside</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>auto</code></td>
+   <td><code>auto</code></td>
+  </tr>
+  <tr>
+   <td><code>avoid</code></td>
+   <td><code>avoid</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple {
+  -webkit-column-count: 4;
+  -moz-column-count: 4;
+  column-count: 4;
+}
+
+p {
+  break-inside: avoid-column;
+  /* Pour Firefox : */
+  page-break-inside: avoid;
+  /* Pour WebKit : */
+  -webkit-column-break-inside: avoid;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="exemple"&gt;
+  &lt;p&gt;« Mais alors, » pensa Alice, « ne serai-je donc
+  jamais plus vieille que je ne le suis maintenant ?
+  D’un côté cela aura ses avantages, ne jamais être
+  une vieille femme. Mais alors avoir toujours des
+  leçons à apprendre ! Oh, je n’aimerais pas cela du
+  tout. »&lt;/p&gt;
+  &lt;p&gt;« Oh ! Alice, petite folle, » se répondit-elle.
+  « Comment pourriez-vous apprendre des leçons ici ?
+  Il y a à peine de la place pour vous, et il n’y en
+  a pas du tout pour vos livres de leçons. »&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","400","300")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fragmentation', '#break-within', 'break-inside')}}</td>
+   <td>{{Spec2('CSS3 Fragmentation')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Regions', '#region-flow-break', 'break-inside')}}</td>
+   <td>{{Spec2('CSS3 Regions')}}</td>
+   <td>Ajout de la gestion des ruptures de région.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Multicol', '#break-before-break-after-break-inside', 'break-inside')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.break-inside", 4)}}</p>
+
+<h3 id="Notes_relatives_à_la_compatibilité">Notes relatives à la compatibilité</h3>
+
+<p>Avant Firefox 65, l'ancienne propriété {{cssxref("page-break-inside")}} fonctionnait dans Firefox en empêchant les ruptures de colonnes et de pages. On utilisera les deux propriétés afin d'obtenir une rétrocompatibilité avec ces versions.</p>
+
+<p>Pour les anciens navigateurs basés sur WebKit, on peut utiliser la propriété préfixée <code>-webkit-column-break-inside</code> afin de contrôler les ruptures de colonne.</p>
diff --git a/files/fr/web/css/calc()/index.html b/files/fr/web/css/calc()/index.html
new file mode 100644
index 0000000000..da2f5a704a
--- /dev/null
+++ b/files/fr/web/css/calc()/index.html
@@ -0,0 +1,163 @@
+---
+title: calc
+slug: Web/CSS/calc()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Web
+translation_of: Web/CSS/calc()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>calc()</code></strong> peut être utilisée à n'importe quel endroit où une {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;frequency&gt;")}}, {{cssxref("&lt;angle&gt;")}}, {{cssxref("&lt;time&gt;")}}, {{cssxref("&lt;number&gt;")}}, {{cssxref("&lt;percentage&gt;")}} ou {{cssxref("&lt;integer&gt;")}} est nécessaire. Grâce à <code>calc()</code>, il est possible de réaliser des calculs pour déterminer la valeur d'une propriété CSS.</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* property: calc(expression) */
+width: calc(100% - 80px);
+</pre>
+
+<p>Il est aussi possible d'utiliser <code>calc()</code> dans une autre fonction <code>calc()</code> et ainsi d'imbriquer les fonctions les unes dans les autres.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Une fonction qui prend comme seul argument une expression mathématique et dont le résultat est utilisé comme valeur de retour. L'expression peut être n'importe quelle expression combinant les différents opérateurs suivants, en respectant l'ordre de priorité des opérateurs :</p>
+
+<dl>
+ <dt><code>+</code></dt>
+ <dd>Addition</dd>
+ <dt><code>-</code></dt>
+ <dd>Soustraction</dd>
+ <dt><code>*</code></dt>
+ <dd>Multiplication. Au moins un des arguments doit être un {{cssxref("&lt;number&gt;")}}.</dd>
+ <dt><code>/</code></dt>
+ <dd>Division. Il n'est pas possible de diviser par une longueur. Ceci peut être utilisé, par exemple, pour que votre longueur soit une fraction d'une longueur existante. L'opérande droit doit être une valeur de type {{cssxref("&lt;number&gt;")}}.</dd>
+</dl>
+
+<p>L'opérande dans l'expression peut utiliser n'importe quelle syntaxe de longueur. Vous pouvez utiliser des unités différentes pour chacune des valeurs si vous le souhaitez. Vous pouvez aussi utiliser les parenthèses pour définir l'ordre des opérations.</p>
+
+<h3 id="Notes">Notes</h3>
+
+<ul>
+ <li>Une division par zéro aboutit à une erreur qui est générée par le parseur HTML.</li>
+ <li>Les opérateurs <code>+</code> et <code>-</code> <strong>doivent toujours être entouré d'espaces</strong>. Par exemple l'opérande de <code>calc(50% -8px)</code> sera interprété comme une valeur en pourcentage suivie d'une longueur négative, l'expression est invalide. L'opérande de <code>calc(50% - 8px)</code> est une valeur en pourcentage suivie d'un signe moins et d'une longueur. Et ainsi, <code>calc(8px + -50%)</code> est interprété comme une longueur suivi d'un signe plus et d'un pourcentage négatif.</li>
+ <li>Les opérateurs <code>*</code> et <code>/</code> ne nécessitent pas d'espaces, mais les ajouter pour conserver la cohérence est recommandé.</li>
+ <li>Les expressions mathématiques manipulant des pourcentages pour les hauteurs et largeurs de colonnes d'un tableau, de groupes de colonne, de lignes d'un tableau ou de groupes de lignes contribuant à un tableau organisé de façon automatique ou en disposition fixe pourront être traitées comme si c'était <code>auto</code> qui avait été utilisé.</li>
+ <li>Il est possible d'imbriquer des fonctions <code>calc()</code>, auquel cas, les appels « internes » sont considérés comme des parenthèses.</li>
+</ul>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Positionner_un_objet_sur_l’écran_avec_une_marge">Positionner un objet sur l’écran avec une marge</h3>
+
+<p><code>calc()</code> rend le positionnement des objets facile en définissant une marge. Dans cet exemple, le CSS crée une bannière qui s'étend sur toute la fenêtre, avec un espace de 40 pixels entre chaque bout de la bannière et les bords de la fenêtre :</p>
+
+<pre class="brush: css notranslate">.banniere {
+  position: absolute;
+  left: 40px;
+  width: calc(100% - 80px);
+  border: solid black 1px;
+  box-shadow: 1px 2px;
+  background-color: yellow;
+  padding: 6px;
+  text-align: center;
+  box-sizing: border-box;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="banniere"&gt;C'est une bannière !&lt;/div&gt;</pre>
+
+<p>{{EmbedLiveSample("Positionner_un_objet_sur_l’écran_avec_une_marge", '100%', '60')}}</p>
+
+<h3 id="Dimensionner_automatiquement_les_champs_d’un_formulaire_pour_s’ajuster_au_conteneur">Dimensionner automatiquement les champs d’un formulaire pour s’ajuster au conteneur</h3>
+
+<p>Un autre cas d'utilisation de <code>calc()</code> est d'aider à s'assurer que les champs d'un formulaire s'adaptent à l'espace disponible, sans s'étendre au-delà de la bordure du conteneur, tout en conservant une marge appropriée.</p>
+
+<p>Regardons un peu le CSS :</p>
+
+<pre class="brush: css notranslate">input {
+  padding: 2px;
+  display: block;
+  width: calc(100% - 1em);
+}
+
+#boiteformulaire {
+  width: calc(100%/6);
+  border: 1px solid black;
+  padding: 4px;
+}
+</pre>
+
+<p>Dans ce cas, le formulaire est lui-même défini pour utiliser un sixième de la taille disponible de la fenêtre. Ensuite, pour s'assurer que les champs gardent une taille appropriée, nous utilisons <code>calc()</code> pour définir qu'ils doivent être de la largeur de leur conteneur moins 1em. Enfin, le HTML suivant utilise le CSS défini :</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div id="boiteformulaire"&gt;
+  &lt;label&gt;Tapez quelque chose :&lt;/label&gt;
+  &lt;input type="text"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Dimensionner_automatiquement_les_champs_d’un_formulaire_pour_s’ajuster_au_conteneur", '100%', '80')}}</p>
+
+<h3 id="Imbriquer_plusieurs_calc_grâce_aux_variables_CSS">Imbriquer plusieurs <code>calc()</code> grâce aux variables CSS</h3>
+
+<p>Prenons la feuille de style suivante :</p>
+
+<pre class="brush: css notranslate">.toto {
+  --largeurA: 100px;
+  --largeurB: calc(var(--largeurA) / 2);
+  --largeurC: calc(var(--largeurB) / 2);
+  width: var(--largeurC);
+}</pre>
+
+<p>Une fois que toutes les variables sont développées, <code>largeurC</code> aura la valeur <code>calc( calc( 100px / 2) / 2)</code> et sera ensuite affectée à la propriété {{cssxref("width")}} des éléments de la classe <code>toto</code>. Tous les <code>calc()</code> imbriqués, quel que soit leur nombre, seront convertis en parenthèses, la valeur sera donc calculée comme <code>calc( ( 100px / 2) / 2)</code> (soit 25px). En résumé, utiliser des <code>calc()</code> imbriqués revient à utiliser des parenthèses.</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Lorsque vous utilisez <code>calc()</code> pour définir la taille d'un texte, assurez-vous d'inclure <a href="/fr/docs/Web/CSS/length#Unités_de_longueur_relatives">une unité de longueur relative</a>. Par exemple :</p>
+
+<pre class="brush: css notranslate">h1 {
+  font-size: calc(1.5rem + 3vw);
+}</pre>
+
+<p>De cette façon, la taille du texte s'adaptera si le lecteur zoome/dézoome.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html"><em>Understanding Success Criterion 1.4.4 - W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#calc-notation', 'calc()')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.types.calc")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://hacks.mozilla.org/2010/06/css3-calc/" title="Firefox 4: CSS3 calc() ✩ Mozilla Hacks – the Web developer blog">Firefox 4 : CSS3 <code>calc()</code> sur Mozilla Hacks</a></li>
+</ul>
diff --git a/files/fr/web/css/caption-side/index.html b/files/fr/web/css/caption-side/index.html
new file mode 100644
index 0000000000..8dc73a5ca1
--- /dev/null
+++ b/files/fr/web/css/caption-side/index.html
@@ -0,0 +1,116 @@
+---
+title: caption-side
+slug: Web/CSS/caption-side
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/caption-side
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>caption-side</code></strong> permet de choisir l'emplacement de la légende d'un tableau (représentée par l'élément {{HTMLElement("caption")}} du tableau). Les valeurs sont relatives au mode d'écriture (cf. {{cssxref("writing-mode")}}) du tableau.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/caption-side.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+/* Valeurs directionnelles */
+caption-side: top;
+caption-side: bottom;
+
+/* Valeurs non-standards */
+caption-side: left;
+caption-side: right;
+caption-side: top-outside;
+caption-side: bottom-outside;
+
+
+/* Valeur globales */
+caption-side: inherit;
+caption-side: initial;
+caption-side: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>top</code></dt>
+ <dd>Un mot-clé qui indique que la boîte de la légende doit être positionnée au-dessus du tableau.</dd>
+ <dt><code>bottom</code></dt>
+ <dd>Un mot-clé qui indique que la boîte de la légende doit être positionnée en-dessous du tableau.</dd>
+ <dt><code>left</code> {{non-standard_inline}}</dt>
+ <dd>Un mot-clé qui indique que la boîte de la légende doit être positionnée à gauche du tableau.<br>
+ {{Note("Cette valeur a été proposée pour CSS 2, mais fut retirée avec la spécification CSS 2.1. Elle est non-standard.")}}</dd>
+ <dt><code>right</code> {{non-standard_inline}}</dt>
+ <dd>Un mot-clé qui indique que la boîte de la légende doit être positionnée à droite du tableau.<br>
+ {{Note("Cette valeur a été proposée pour CSS 2, mais fut retirée avec la spécification CSS 2.1. Elle est non-standard.")}}</dd>
+ <dt><code>top-outside</code> {{non-standard_inline}}</dt>
+ <dd>Un mot-clé qui indique que la boîte de la légende doit être positionnée au-dessus du tableau sans que la largeur ou l'alignement horizontal soient liées à la disposition horizontale du tableau.<br>
+ {{Note("La spécification CSS 2.1 note que la spécification CSS 2 a défini un autre comportement pour la valeur <code>top</code>, réintroduit avec cette valeur dans une future spécification.")}}</dd>
+ <dt><code>bottom-outside</code> {{non-standard_inline}}</dt>
+ <dd>Un mot-clé qui indique que la boîte de la légende doit être positionnée en-dessous du tableau sans que la largeur ou l'alignement horizontal soient liées à la disposition horizontale du tableau.<br>
+ {{Note("La spécification CSS 2.1 note que la spécification CSS 2 a défini un autre comportement pour la valeur <code>bottom</code>, réintroduit avec cette valeur dans une future spécification.")}}</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">caption {
+  caption-side: bottom;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;caption&gt;Une légende&lt;/caption&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Des données d'un tableau&lt;/td&gt;
+    &lt;td&gt;Pfiou encore des données&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","300","300")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Logical Properties', '#caption-side', 'caption-side')}}</td>
+   <td>{{Spec2('CSS Logical Properties')}}</td>
+   <td>Les valeurs <code>top</code> et <code>bottom</code> sont désormais définies comme relatives à la valeur de <code>writing-mode</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'tables.html#caption-position', 'caption-side')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.caption-side")}}</p>
diff --git a/files/fr/web/css/caret-color/index.html b/files/fr/web/css/caret-color/index.html
new file mode 100644
index 0000000000..e7d3578762
--- /dev/null
+++ b/files/fr/web/css/caret-color/index.html
@@ -0,0 +1,104 @@
+---
+title: caret-color
+slug: Web/CSS/caret-color
+tags:
+  - CSS
+  - Propriété
+  - Reference
+  - Web
+translation_of: Web/CSS/caret-color
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>caret-color</code></strong> définit la couleur du curseur visible à l'endroit où l'utilisateur peut ajouter du texte ou un autre contenu dans l'élément lorsqu'il saisit au clavier ou qu'il édite les informations.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/caret-color.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note">
+<p><strong>Note :</strong> Les agents utilisateurs peuvent considérer que d'autres objets doivent être impactés par cette propriété : par exemple le curseur de navigation, qui ressemble au curseur de saisie et qui peut être déplacé sur un texte non-éditable. En revanche, bien que l'icône du curseur de la souris puisse ressembler à un curseur de saisie lorsque {{cssxref("cursor")}} vaut <code>auto</code> ou <code>text</code> ou <code>vertical-text</code>, celle-ci n'est pas modifiée par cette propriété. Pour certains navigateurs qui ne prennent pas en charge cette propriété, la couleur du curseur de saisie n'est pas associée à la couleur de la police.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */
+caret-color: auto;
+caret-color: transparent;
+color: currentColor;
+
+/* Valeurs de couleur */
+/* Type &lt;color&gt; */
+caret-color: red;
+caret-color: #5729e9;
+caret-color: rgb(0, 200, 0);
+caret-color: hsla(228, 4%, 24%, 0.8);</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>L'agent utilisateur doit utiliser <code>currentcolor</code> mais peut ajuster la couleur du curseur afin d'améliorer la visibilité et le contraste avec le contenu environnant (l'arrière-plan, les ombres, etc.).
+ <div class="note"><strong>Note :</strong> Bien que l'agent utilisateur puisse utiliser <code>currentcolor</code> pour la valeur <code>auto</code>, cette dernière ne sera pas interpolée lors des animations/transitions (à la différence de la valeur <code>currentcolor</code>).</div>
+ </dd>
+ <dt>&lt;color&gt;</dt>
+ <dd>L'agent utilisateur utilise la couleur ({{cssxref("&lt;color&gt;")}}) indiquée comme couleur pour le curseur de saisie.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#exemple {
+  caret-color: red;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input id="exemple" /&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 UI", "#propdef-caret-color", "caret-color")}}</td>
+   <td>{{Spec2("CSS3 UI")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.caret-color")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("input")}}</li>
+ <li>L'attribut HTML {{htmlattrxref("contenteditable")}} qui rend le texte d'un élément éditable</li>
+ <li><a href="/fr/docs/Web/HTML/Contenu_editable">Rendre du contenu éditable</a></li>
+ <li><a href="/fr/docs/Web/HTML/Applying_color">Appliquer des couleurs sur des éléments HTML grâce à CSS</a></li>
+ <li>Le type de données {{cssxref("&lt;color&gt;")}}</li>
+ <li>Les autres propriétés relatives aux couleurs : {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}}.</li>
+</ul>
diff --git a/files/fr/web/css/clamp()/index.html b/files/fr/web/css/clamp()/index.html
new file mode 100644
index 0000000000..8b30108198
--- /dev/null
+++ b/files/fr/web/css/clamp()/index.html
@@ -0,0 +1,120 @@
+---
+title: clamp()
+slug: Web/CSS/clamp()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+translation_of: Web/CSS/clamp()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction CSS <code><strong>clamp</strong></code><strong><code>()</code></strong> permet de ramener (d'écrêter) une valeur entre deux bornes inférieure et supérieure. Cette fonction utilise trois paramètres : une valeur minimale, la valeur à tester et une valeur maximale. La fonction <code>clamp()</code> peut être utilisée à tout endroit où une valeur de type {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;frequency&gt;")}}, {{cssxref("&lt;angle&gt;")}}, {{cssxref("&lt;time&gt;")}}, {{cssxref("&lt;percentage&gt;")}}, {{cssxref("&lt;number&gt;")}} ou {{cssxref("&lt;integer&gt;")}} peut être utilisée.</p>
+
+<div class="note">
+<p><strong>Note :</strong> l'expression  <code>clamp(MIN, VAL, MAX)</code> sera résolue comme <code>max(MIN, min(VAL, MAX)))</code>.</p>
+</div>
+
+<pre class="brush: css no-line-numbers notranslate">width: clamp(10px, 4em, 80px);
+</pre>
+
+<p>Dans l'exemple précédent, la largeur fera au plus 80 pixels et au moins 10 pixels mais mesurera 4em de large si un em mesure entre 2.5 et 20px.</p>
+
+<p>Prenons comme hypothèse qu'un em mesure 16px de large :</p>
+
+<pre class="brush: css no-line-numbers notranslate">width: clamp(10px, 4em, 80px);
+/* avec 1em = 16px, on a 4em = 16px * 4 = 64px */
+width: clamp(10px, 64px, 80px);
+/* clamp(MIN, VAL, MAX) est résolue comme max(MIN, min(VAL, MAX))) */
+width: max(10px, min(64px, 80px))
+width: max(10px, 64px);
+width: 64px;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La fonction <code>clamp()</code> utilise trois expressions séparées par des virgules comme paramètres. Ces paramètres sont, dans l'ordre, la valeur minimale, la valeur préférée et la valeur maximale.</p>
+
+<p>La valeur minimale est la borne inférieure des valeurs autorisées. C'est cette valeur qui sera utilisée si la valeur préférée lui est inférieure.</p>
+
+<p>La valeur préférée correspond à la valeur qui sera utilisée si elle est supérieure à la borne inférieure et inférieure à la borne supérieure.</p>
+
+<p>La valeur maximale est la borne supérieure des valeurs autorisées. C'est cette valeur qui sera utilisée si la valeur préférée lui est supérieure.</p>
+
+<p>Les expressions passées en paramètres peuvent utiliser des fonctions mathématiques (voir  {{CSSxRef("calc")}} pour plus d'informationsn), des valeurs littérales ou d'autres expressions ( {{CSSxRef("attr", "attr()")}} par exemple) tant que le résultat de cette expression est évalué avec un type valide. Il est aussi possible d'utiliser des expressions mathématiques sans <code>calc()</code> et il est également possible d'ajouter des parenthèses pour prioriser correctement les opérations imbriquées.</p>
+
+<p>Il est possible d'utiliser différentes unités pour chacune des valeurs des expressions.</p>
+
+<h3 id="Notes">Notes</h3>
+
+<ul>
+ <li>Les expressions mathématiques qui utilisent des pourcentages pour les hauteurs et largeurs de colonnes de tableaux, de groupes de colonnes de tableaux, pour les lignes de tableaux, pour les groupes de lignes de tableaux et pour les cellules de tableau seront considérées comme <code>auto</code> si le tableau suit une disposition automatique ou fixée.</li>
+ <li>Il est possible d'imbriquer des fonctions <code>max()</code> et <code>min()</code> dans les expressions et d'utiliser les opérateurs mathématiques d'addition, soustraction, multiplication, division sans nécessairement recourir à <code>calc()</code>.</li>
+ <li>Attention à bien utiliser un espace de chaque côté des opérateurs + et -.</li>
+</ul>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Indiquer_une_taille_de_police_minimale_et_maximale">Indiquer une taille de police minimale et maximale</h3>
+
+<p>Un autre cas d'utilisation est de permettre à une taille de police de caractères de varier sans être minuscule et illisible et sans non plus être énorme.</p>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">h1 {
+  font-size: 2rem;
+}
+h1.responsive {
+  font-size: clamp(32px, 2em, 2rem);
+}
+</pre>
+
+<p>Ici on utilise l'unité <code>rem</code> pour fixer un maximum correspondant à deux fois la taille <code>em</code> de la racine.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Ce texte est toujours lisible mais sa taille ne change pas.&lt;/h1&gt;
+&lt;h1 class="responsive"&gt;Ce texte est toujours lisible et s'adapte dans une certaine mesure.&lt;/h1&gt;
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Indiquer_une_taille_de_police_minimale_et_maximale", '700', '300')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Values', '#calc-notation', 'clamp()')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.types.clamp")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{CSSxRef("calc")}}</li>
+ <li>{{CSSxRef("max")}}</li>
+ <li>{{CSSxRef("min")}}</li>
+ <li><a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/Values_and_units">Valeurs CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/clear/index.html b/files/fr/web/css/clear/index.html
new file mode 100644
index 0000000000..a91dbec9b0
--- /dev/null
+++ b/files/fr/web/css/clear/index.html
@@ -0,0 +1,236 @@
+---
+title: clear
+slug: Web/CSS/clear
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/clear
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>clear</code></strong> indique si un élément peut être situé à côté d'éléments <a href="/fr/docs/Web/CSS/float">flottants</a> qui le précèdent ou s'il doit être déplacé vers le bas pour être en dessous de ces éléments. La propriété <code>clear</code> s'applique aux éléments flottants comme aux éléments non-flottants.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/clear.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Lorsqu'elle est appliquée aux blocs non-flottants, elle déplace <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">le bord de la bordure</a> de l'élément sous <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">le bord de la marge</a> de tous les éléments flottants concernés. Il y aura<a href="/fr/docs/Web/CSS/Fusion_des_marges"> fusion des marges (<em>margin collapsing</em>)</a> verticales entre l'élément flottant et le bloc non-flottant mais pas entre les élément flottants.</p>
+
+<p>Lorsqu'elle est appliquée aux éléments flottants, elle déplace <a href="/fr/Apprendre/CSS/Les_bases/Le_mod%C3%A8le_de_bo%C3%AEte">le bord de la marge</a> de l'élément sous <a href="/fr/Apprendre/CSS/Les_bases/Le_mod%C3%A8le_de_bo%C3%AEte">le bord de la marge</a> de tous les éléments flottants concernés. Cela impacte la position des éléments flottants suivants car ceux-ci ne peuvent pas être situés plus haut que les éléments flottants qui les précèdent.</p>
+
+<p>Les éléments flottants qui sont dégagés sont les éléments flottants précédant l'élément ciblé, au sein de du <a href="/fr/docs/Web/CSS/Block_formatting_context">même contexte de formatage</a>.</p>
+
+<div class="note">
+<p><strong>Note : </strong>Si un élément ne contient que des éléments flottants, sa hauteur sera nulle. Si on souhaite redimensionner l'élément afin qu'il contienne tous les éléments flottants à l'intérieur, on peut faire flotter ce conteneur ou utiliser <code>clear</code> sur un pseudo-élément remplacé {{cssxref("::after")}}.</p>
+
+<pre class="brush: css">#conteneur::after {
+   content: "";
+   display: block;
+   clear: both;
+}
+</pre>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css:no-line-numbers">/* Valeurs avec mot-clé */
+clear: none;
+clear: left;
+clear: right;
+clear: both;
+clear: inline-start;
+clear: inline-end;
+
+/* Valeurs globales */
+clear: inherit;
+clear: initial;
+clear: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Un mot-clé qui indique que l'élément n'est pas déplacé vers le bas pour dégager le flottement.</dd>
+ <dt><code>left</code></dt>
+ <dd>Un mot-clé qui indique que l'élément est déplacé vers le bas afin de dégager les flottements à gauche.</dd>
+ <dt><code>right</code></dt>
+ <dd>Un mot-clé qui indique que l'élément est déplacé vers le bas afin de dégager les flottements à droite.</dd>
+ <dt><code>both</code></dt>
+ <dd>Un mot-clé qui indique que l'élément est déplacé vers le bas afin de dégager les flottements à gauche et à droite.</dd>
+ <dt><code>inline-start</code></dt>
+ <dd>Un mot-clé qui indique que l'élément est déplacé vers le bas pour dégager le contenu vers le début du bloc englobant. Autrement dit, cela dégage à gauche pour les scripts de gauche à droite (<em>LTR</em> pour <em>left to right</em>) et dégage à droite pour les scripts de droite à gauche (<em>RTL</em> pour <em>droite à gauche</em>).</dd>
+ <dt><code>inline-end</code></dt>
+ <dd>Un mot-clé qui indique que l'élément est déplacé vers le bas pour dégager le contenu du côté de la fin du bloc englobant. Autrement dit, cela dégage à droite pour les scripts de gauche à droite (<em>LTR</em> pour <em>left to right</em>) et dégage à gauche pour les scripts de droite à gauche (<em>RTL</em> pour <em>droite à gauche</em>).</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="clear_left"><code>clear: left</code></h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;p class="black"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.&lt;/p&gt;
+  &lt;p class="red"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;/p&gt;
+  &lt;p class="left"&gt;Ce paragraphe est dégagé à gauche.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.wrapper{
+  border:1px solid black;
+  padding:10px;
+}
+.left {
+  border: 1px solid black;
+  clear: left;
+}
+.black {
+  float: left;
+  margin: 0;
+  background-color: black;
+  color: #fff;
+  width: 20%;
+}
+.red {
+  float: left;
+  margin: 0;
+  background-color: red;
+  width:20%;
+}
+p {
+  width: 50%;
+}
+</pre>
+
+<p>{{EmbedLiveSample('clear_left','100%','250')}}</p>
+
+<h3 id="clear_right"><code>clear: right</code></h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;p class="black"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.&lt;/p&gt;
+  &lt;p class="red"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;/p&gt;
+  &lt;p class="right"&gt;Ce paragraphe est dégagé à droite.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">.wrapper{
+  border:1px solid black;
+  padding:10px;
+}
+.right {
+  border: 1px solid black;
+  clear: right;
+}
+.black {
+  float: right;
+  margin: 0;
+  background-color: black;
+  color: #fff;
+  width:20%;
+}
+.red {
+  float: right;
+  margin: 0;
+  background-color: red;
+  width:20%;
+}
+p {
+  width: 50%;
+}</pre>
+
+<p>{{EmbedLiveSample('clear_right','100%','250')}}</p>
+
+<h3 id="clear_both"><code>clear: both</code></h3>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;p class="black"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus ac dui.&lt;/p&gt;
+  &lt;p class="red"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.&lt;/p&gt;
+  &lt;p class="both"&gt;Ce paragraphe est dégagé de chaque côté.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css">.wrapper{
+  border:1px solid black;
+  padding:10px;
+}
+.both {
+  border: 1px solid black;
+  clear: both;
+}
+.black {
+  float: left;
+  margin: 0;
+  background-color: black;
+  color: #fff;
+  width:20%;
+}
+.red {
+  float: right;
+  margin: 0;
+  background-color: red;
+  width:20%;
+}
+p {
+  width: 45%;
+}</pre>
+
+<p>{{EmbedLiveSample('clear_both','100%','300')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}}</td>
+   <td>{{Spec2('CSS Logical Properties')}}</td>
+   <td>Ajout des valeurs <code>inline-start</code> et <code>inline-end</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#flow-control', 'clear')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Pas de modification significative, clarification de certains détails.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#clear', 'clear')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.clear")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">Le modèle de boîtes</a></li>
+</ul>
diff --git a/files/fr/web/css/clip-path/index.html b/files/fr/web/css/clip-path/index.html
new file mode 100644
index 0000000000..0fc8221df3
--- /dev/null
+++ b/files/fr/web/css/clip-path/index.html
@@ -0,0 +1,614 @@
+---
+title: clip-path
+slug: Web/CSS/clip-path
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/clip-path
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <code><strong>clip-path</strong></code> empêche une portion d'un élément d'être affichée en définissant une région de rognage. Seule une zone spécifique de l'élément sera affichée. La zone de rognage est un chemin défini avec une URL faisant référence à un SVG externe ou en ligne ou grâce à une fonction de forme comme <code><a href="/fr/docs/Web/SVG/Element/circle">circle()</a></code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/clip-path.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note">
+<p><strong>Note :</strong> La propriété <code>clip-path</code> remplace la propriété {{cssxref("clip")}} désormais dépréciée.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+clip-path: none;
+
+/* Valeurs pointant vers une image */
+/* Type &lt;clip-source&gt; */
+clip-path: url(resources.svg#c1);
+
+/* Valeurs de boîte */
+clip-path: fill-box;
+clip-path: stroke-box;
+clip-path: view-box;
+clip-path: margin-box;
+clip-path: border-box;
+clip-path: padding-box;
+clip-path: content-box;
+
+/* Valeurs géométriques            */
+/* avec une notation fonctionnelle */
+clip-path: inset(100px 50px);
+clip-path: circle(50px at 0 100px);
+clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
+clip-path: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z');
+
+/* Combinaison boîte &amp; géométrie */
+clip-path: padding-box circle(50px at 0 100px);
+
+/* Valeurs globales */
+clip-path: inherit;
+clip-path: initial;
+clip-path: unset;
+</pre>
+
+<p>La propriété <code>clip-path</code> est définie avec une ou plusieurs des valeurs listées ci-après.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>url()</code></dt>
+ <dd>Une URL qui fait référence à un élément contenant le chemin de rognage.</dd>
+ <dt><code>inset()</code>, <code>circle()</code>, <code>ellipse()</code>, <code>polygon()</code></dt>
+ <dd>Une fonction {{cssxref("&lt;basic-shape&gt;")}}. Une telle forme utilise la valeur <code>&lt;geometry-box&gt;</code> pour déterminer la taille et la position de la forme. Si aucune boîte de géométrie n'est indiquée, c'est la boîte de bordure (<code>border-box</code>) qui sera utilisée comme boîte de réference.</dd>
+ <dt><code>&lt;geometry-box&gt;</code></dt>
+ <dd>Si cette valeur est combinée avec une valeur <code>&lt;basic-shape&gt;</code>, elle définira la boîte de référence dans laquelle placer la forme. Si elle est utilisée seule, ce sont les bords de la boîte (ainsi que les éventuels coins arrondis définis avec {{cssxref("border-radius")}}) qui sont utilisés comme ligne de rognage. Cette composante peut prendre les valeurs suivante :
+ <dl>
+  <dt><code>fill-box</code></dt>
+  <dd>La boîte englobant (<em>bounding box</em>) est utilisée comme boîte de référence.</dd>
+  <dt><code>stroke-box</code></dt>
+  <dd>La boîte de contour de la boîte englobante est utilisée comme boîte de référence.</dd>
+  <dt><code>view-box</code></dt>
+  <dd>La zone d'affichage SVG la plus proche est utilisée comme boîte de référence. Si un attribut {{SVGAttr("viewBox")}} est défini pour l'élément qui crée la zone d'affichage SVG, la boîte de référence est située à l'origine du système construit par <code>viewBox</code> et les dimensions de la boîte de référence sont les valeurs de hauteur et de largeur de l'attribut <code>viewBox</code>.</dd>
+  <dt><code>margin-box</code></dt>
+  <dd>La boîte de marge est utilisée comme boîte de référence</dd>
+  <dt><code>border-box</code></dt>
+  <dd>La boîte de bordure est utilisée comme boîte de référence</dd>
+  <dt><code>padding-box</code></dt>
+  <dd>La boîte de remplissage (<em>padding</em>) est utilisée comme boîte de référence</dd>
+  <dt><code>content-box</code></dt>
+  <dd>La boîte de contenu est utilisée comme boîte de référence.</dd>
+ </dl>
+ </dd>
+ <dt><code>none</code></dt>
+ <dd>Aucun chemin de rognage n'est créé.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> Si <a href="/fr/docs/Web/CSS/Valeur_calcul%C3%A9e">la valeur calculée</a> est différente de <code>none</code>, cela entraînera  la création d'un nouveau <a href="/fr/docs/Glossaire/Contexte_d_empilement">contexte d'empilement</a> (de la même façon qu'{{cssxref("opacity")}} avec des valeurs différentes de 1).</p>
+</div>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Comparaison_entre_HTML_et_SVG">Comparaison entre HTML et SVG</h3>
+
+<div class="hidden" id="clip-path">
+<pre class="brush: html">&lt;svg class="defs"&gt;
+  &lt;defs&gt;
+    &lt;clipPath id="myPath" clipPathUnits="objectBoundingBox"&gt;
+      &lt;path d="M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z" /&gt;
+    &lt;/clipPath&gt;
+  &lt;/defs&gt;
+&lt;/svg&gt;
+
+&lt;div class="grid"&gt;
+  &lt;div class="col"&gt;
+    &lt;div class="note"&gt;clip-path: none&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="none"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="none"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;clip-path: url(#myPath)&lt;br&gt;&lt;br&gt;
+      Assuming the following clipPath definition:
+      &lt;pre&gt;
+&amp;lt;svg&amp;gt;
+  &amp;lt;clipPath id="myPath" clipPathUnits="objectBoundingBox"&amp;gt;
+    &amp;lt;path d="M0.5,1
+      C 0.5,1,0,0.7,0,0.3
+      A 0.25,0.25,1,1,1,0.5,0.3
+      A 0.25,0.25,1,1,1,1,0.3
+      C 1,0.7,0.5,1,0.5,1 Z" /&amp;gt;
+  &amp;lt;/clipPath&amp;gt;
+&amp;lt;/svg&amp;gt;&lt;/pre&gt;
+    &lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="svg"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="svg"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;clip-path: path('M15,45 A30,30,0,0,1,75,45 A30,30,0,0,1,135,45 Q135,90,75,130 Q15,90,15,45 Z')
+    &lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="svg2"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="svg2"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+
+
+    &lt;div class="note"&gt;clip-path: circle(25%)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="shape1"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="shape1"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;clip-path: circle(25% at 25% 25%)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="shape2"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="shape2"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;clip-path: fill-box circle(25% at 25% 25%)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="shape3"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="shape3"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;clip-path: stroke-box circle(25% at 25% 25%)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="shape4"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="shape4"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;clip-path: view-box circle(25% at 25% 25%)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="shape5"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="shape5"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;clip-path: margin-box circle(25% at 25% 25%)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="shape6"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="shape6"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;clip-path: border-box circle(25% at 25% 25%)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="shape7"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="shape7"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;clip-path: padding-box circle(25% at 25% 25%)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="shape8"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="shape8"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;clip-path: content-box circle(25% at 25% 25%)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="shape9"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="shape9"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">html,body {
+  height: 100%;
+  box-sizing: border-box;
+  background: #EEE;
+}
+
+.grid {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  font: 1em monospace;
+}
+
+.row {
+  display: flex;
+  flex: 1 auto;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.col {
+  flex: 1 auto;
+}
+
+.cell {
+  margin: .5em;
+  padding: .5em;
+  background-color: #FFF;
+  overflow: hidden;
+  text-align: center;
+  flex: 1;
+}
+
+.note {
+  background: #fff3d4;
+  padding: 1em;
+  margin: .5em .5em 0;
+  font: .8em sans-serif;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.note + .row .cell {
+  margin-top: 0;
+}
+
+.container {
+  display: inline-block;
+  border: 1px dotted grey;
+  position:relative;
+}
+
+.container:before {
+  content: 'margin';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  font: italic .6em sans-serif;
+}
+
+.viewbox {
+  box-shadow: 1rem 1rem 0 #EFEFEF inset, -1rem -1rem 0 #EFEFEF inset;
+}
+
+.container.viewbox:after {
+  content: 'viewbox';
+  position: absolute;
+  left: 1.1rem;
+  top: 1.1rem;
+  font: italic .6em sans-serif;
+}
+
+.cell span {
+  display: block;
+  margin-bottom: .5em;
+}
+
+p {
+  font-family: sans-serif;
+  background: #000;
+  color: pink;
+  margin: 2em;
+  padding: 3em 1em;
+  border: 1em solid pink;
+  width: 6em;
+}
+
+.none { clip-path: none; }
+.svg  { clip-path: url(#myPath); }
+.svg2 { clip-path: path('M15,45 A30,30,0,0,1,75,45 A30,30,0,0,1,135,45 Q135,90,75,130 Q15,90,15,45 Z');}
+.shape1 { clip-path: circle(25%); }
+.shape2 { clip-path: circle(25% at 25% 25%); }
+.shape3 { clip-path: fill-box    circle(25% at 25% 25%); }
+.shape4 { clip-path: stroke-box  circle(25% at 25% 25%); }
+.shape5 { clip-path: view-box    circle(25% at 25% 25%); }
+.shape6 { clip-path: margin-box  circle(25% at 25% 25%); }
+.shape7 { clip-path: border-box  circle(25% at 25% 25%); }
+.shape8 { clip-path: padding-box circle(25% at 25% 25%); }
+.shape9 { clip-path: content-box circle(25% at 25% 25%); }
+
+.defs {
+  width: 0;
+  height: 0;
+  margin: 0;
+}
+
+pre { margin-bottom: 0; }
+
+svg {
+  margin: 1em;
+  font-family: sans-serif;
+  width: 192px;
+  height: 192px;
+}
+
+svg rect {
+  stroke: pink;
+  stroke-width: 16px;
+}
+
+svg text {
+  fill: pink;
+  text-anchor: middle;
+}
+
+svg text.em {
+  font-style: italic;
+}</pre>
+</div>
+
+<p>{{EmbedLiveSample("clip-path", "100%", 800, "", "", "example-outcome-frame")}}</p>
+
+<h3 id="Exemple_complet">Exemple complet</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;img id="clipped" src="https://mdn.mozillademos.org/files/12668/MDN.svg"
+    alt="MDN logo"&gt;
+&lt;svg height="0" width="0"&gt;
+  &lt;defs&gt;
+    &lt;clipPath id="cross"&gt;
+      &lt;rect y="110" x="137" width="90" height="90"/&gt;
+      &lt;rect x="0" y="110" width="90" height="90"/&gt;
+      &lt;rect x="137" y="0" width="90" height="90"/&gt;
+      &lt;rect x="0" y="0" width="90" height="90"/&gt;
+    &lt;/clipPath&gt;
+  &lt;/defs&gt;
+&lt;/svg&gt;
+
+&lt;select id="clipPath"&gt;
+  &lt;option value="none"&gt;none&lt;/option&gt;
+  &lt;option value="circle(100px at 110px 100px)"&gt;circle&lt;/option&gt;
+  &lt;option value="url(#cross)" selected&gt;cross&lt;/option&gt;
+  &lt;option value="inset(20px round 20px)"&gt;inset&lt;/option&gt;
+  &lt;option value="path('M 0 200 L 0,110 A 110,90 0,0,1 240,100 L 200 340 z')"&gt;path&lt;/option&gt;
+&lt;/select&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">#clipped {
+  margin-bottom: 20px;
+  clip-path: url(#cross);
+}
+</pre>
+
+<div class="hidden">
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">var clipPathSelect = document.getElementById("clipPath");
+clipPathSelect.addEventListener("change", function (evt) {
+  document.getElementById("clipped").style.clipPath = evt.target.value;
+});
+</pre>
+</div>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemple_complet", 230, 250)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Masks", "#the-clip-path", 'clip-path')}}</td>
+   <td>{{Spec2('CSS Masks')}}</td>
+   <td>Extension aux élément HTML. <code>clip-path</code> remplace la propriété {{cssxref("clip")}} désormais dépréciée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'masking.html#ClipPathProperty', 'clip-path')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Définition initiale (s'applique uniquement aux éléments SVG)</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.clip-path")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("mask")}}</li>
+ <li>{{cssxref("filter")}}</li>
+ <li><a href="/fr/docs/Applying_SVG_effects_to_HTML_content">Appliquer des effets SVG sur du contenu HTML</a></li>
+ <li><a href="https://hacks.mozilla.org/2017/06/css-shapes-clipping-and-masking/">Les formes CSS, le <em>clipping</em> et le <em>masking</em> : comment les utiliser (article en anglais)</a></li>
+ <li>L'attribut SVG {{SVGAttr("clip-path")}}</li>
+ <li>L'attribut SVG {{SVGAttr("clip-rule")}}</li>
+</ul>
diff --git a/files/fr/web/css/clip/index.html b/files/fr/web/css/clip/index.html
new file mode 100644
index 0000000000..b5aed6422a
--- /dev/null
+++ b/files/fr/web/css/clip/index.html
@@ -0,0 +1,145 @@
+---
+title: clip
+slug: Web/CSS/clip
+tags:
+  - CSS
+  - Déprécié
+  - Propriété
+  - Reference
+translation_of: Web/CSS/clip
+---
+<div>{{CSSRef}}{{deprecated_header}}</div>
+
+<p>La propriété <strong><code>clip</code></strong> permet de définir la zone d'un élément qui est visible. La propriété <code>clip</code> s'applique uniquement aux éléments positionnés de façon absolue (autrement dit, ceux avec {{cssxref("position","position:absolute")}} ou {{cssxref("position","position:fixed")}}).</p>
+
+<pre class="brush: css  no-line-numbers">/* Valeur avec un mot-clé */
+clip: auto;
+
+/* Valeurs de forme */
+/* Type &lt;shape&gt;     */
+clip: rect(1px 10em 3rem 2ch);
+clip: rect(1px, 10em, 3rem, 2ch);
+
+/* Valeurs globales */
+clip: inherit;
+clip: initial;
+clip: unset;
+</pre>
+
+<div class="warning">
+<p><strong>Attention ! </strong>Cette propriété est dépréciée et ne doit plus être utilisée. La propriété {{cssxref("clip-path")}} peut être utilisée à la place.</p>
+</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;shape&gt;</code></dt>
+ <dd>Une forme rectangulaire indiquée avec <code>rect(&lt;haut&gt;, &lt;droite&gt;, &lt;bas&gt;, &lt;gauche&gt;)</code> ou avec <code>rect(&lt;haut&gt; &lt;droite&gt; &lt;bas&gt; &lt;gauche&gt;)</code>. <code>&lt;haut&gt;</code> et <code>&lt;bas&gt;</code> indiquent les décalages à partir du haut de la boîte de bordure, <code>&lt;gauche&gt;</code> et <code>&lt;droite&gt;</code> indiquent les décalages à partir du bord gauche de la boîte de bordure.</dd>
+ <dd><code>&lt;haut&gt;</code>, <code>&lt;droite&gt;</code>, <code>&lt;bas&gt;</code> et <code>&lt;gauche&gt;</code> peuvent avoir une valeur de longueur (type {{cssxref("&lt;length&gt;")}}) ou<code> auto</code>. Si un des côtés vaut <code>auto</code>, l'élément est rogné sur ce côté avec le bord intérieur de la boîte de bordure.</dd>
+ <dt><code>auto</code></dt>
+ <dd>L'élément n'est pas rogné (la valeur par défaut). Attention, l'effet obtenu n'est pas le même que <code>rect(auto, auto, auto, auto)</code>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">.dotted-border {
+  border: dotted;
+  position: relative;
+  width: 536px;
+  height: 350px;
+}
+
+#top-left, #middle, #bottom-right {
+  position: absolute;
+  top: 0px;
+}
+
+#top-left {
+  left: 360px;
+  clip: rect(0px, 175px, 113px, 0px);
+}
+
+
+#middle {
+  left: 280px;
+  clip: rect(119px, 255px, 229px, 80px);
+  /* standard syntax, unsupported by Internet Explorer 4-7 */
+}
+
+#bottom-right {
+  left: 200px;
+  clip: rect(235px 335px 345px 160px);
+  /* non-standard syntax, but supported by all major browsers*/
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html">&lt;p class="dotted-border"&gt;
+  &lt;img src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Original graphic"&gt;
+  &lt;img id="top-left" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped to upper left"&gt;
+  &lt;img id="middle" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped towards middle"&gt;
+  &lt;img id="bottom-right" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped to bottom right"&gt;
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '689px', '410px')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Masks', '#clip-property', 'clip')}}</td>
+   <td>{{Spec2('CSS Masks')}}</td>
+   <td>Dépréciation de la propriété <code>clip</code> et proposition de  {{cssxref("clip-path")}} comme remplacement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'clip')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>clip</code> peut être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visufx.html#clipping', 'clip')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.clip")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La propriété {{cssxref("clip-path")}} qui doit être utilisée à la place</li>
+ <li>{{cssxref("text-overflow")}}</li>
+ <li>{{cssxref("white-space")}}</li>
+ <li>{{cssxref("overflow-x")}}</li>
+ <li>{{cssxref("overflow-y")}}</li>
+ <li>{{cssxref("overflow")}}</li>
+ <li>{{cssxref("display")}}</li>
+ <li>{{cssxref("position")}}</li>
+</ul>
diff --git a/files/fr/web/css/color-adjust/index.html b/files/fr/web/css/color-adjust/index.html
new file mode 100644
index 0000000000..b4ba77f6fd
--- /dev/null
+++ b/files/fr/web/css/color-adjust/index.html
@@ -0,0 +1,118 @@
+---
+title: color-adjust
+slug: Web/CSS/color-adjust
+tags:
+  - CSS
+  - Propriété
+  - Reference
+  - Web
+  - color-adjust
+translation_of: Web/CSS/color-adjust
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">La propriété CSS <strong><code>color-adjust</code></strong> contrôle la façon dont l'agent utilisateur peut optimiser l'apparence de l'élément sur l'appareil. Par défaut, le navigateur est autorisé à appliquer tous les ajustements qu'il estime nécessaires afin d'ajuster l'élément au mieux pour l'appareil utilisé.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/css/color-adjust.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Dans l'exemple précédent, le texte utilise la couleur ({{cssxref("color")}}), <code>#411</code> qui est très sombre et qui peut donc être difficile à lire avec l'arrière-plan noir (<code>black</code> pour la propriété {{cssxref("background-color")}}). Selon le navigateur, sa configuration et l'appareil utilisé, le navigateur peut choisir de retirer l'arrière-plan noir ou de modifier la couleur du texte afin d'améliorer le contraste et la lisibilité.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">color-adjust: economy;
+color-adjust: exact;</pre>
+
+<p>La valeur de la propriété <code>color-adjust</code> peut être un de ces deux mots-clés.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>economy</code></dt>
+ <dd>L'agent utilisateur est autorisé à appliquer les ajustements estimés nécessaires afin d'optimiser l'affichage du document sur l'appareil. Par exemple, un navigateur pourra, lors d'une impression, supprimer les images d'arrière-plan et ajuster les couleurs du texte afin de s'assurer que le contraste obtenu sur le papier sera suffisant. Cette valeur est la valeur par défaut.</dd>
+ <dt><code><strong>exact</strong></code></dt>
+ <dd>Le contenu de l'élément a spécifiquement été conçu afin d'utiliser des couleurs, des images et des styles de façon importante et toute modification opérée par le navigateur détériorerait le document. L'apparence du contenu ne devrait pas être modifiée sauf si l'utilisateur le demande. Ainsi, si une page contient un tableau dont les lignes sont alternées en gris et blanc, il ne faudrait pas retirer cette alternance au risque de perdre en lisibilité.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+
+<p>Plusieurs raisons peuvent entraîner un agent utilisateur à modifier l'apparence finale par rapport à l'apparence indiquée via CSS :</p>
+
+<ul>
+ <li>Le contenu utilise des couleurs trop proches pour le texte et l'arrière-plan pour que le résultat soit lisible sur l'appareil ciblé (écran ou papier par exemple)..</li>
+ <li>Si l'appareil d'affichage est une imprimante, afin d'économiser de l'encre, le navigateur peut choisir de retirer les images d'arrière-plan sombres ou trop denses.</li>
+ <li>Lors de l'impression, l'agent utilisateur peut choisir de remplacer du texte clair sur un fond sombre par du texte sombre sur un fond blanc.</li>
+</ul>
+
+<p>Si l'agent utilisateur propose des options à l'utilisateur quant à l'affichage des couleurs et des images, celles-ci seront prioritaires sur <code>color-adjust</code>. Autrement dit, il n'est pas absolument certain que <code>color-adjust</code> ait un quelconque effet. Tout d'abord parce que l'utilisateur peut choisir d'outrepasser ces règles mais aussi parce qu'il revient à l'agent utilisateur de choisir comment gérer <code>color-adjust</code> dans chaque situation.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, une boîte utilise une image d'arrière-plan ({{cssxref("background-image")}}) ainsi qu'un dégradé linéaire ({{cssxref("linear-gradient()")}}) sur un arrière-plan noir afin d'avoir un dégradé bleu foncé derrière un texte rouge. Pour une raison quelconque, c'est l'apparence souhaitée quel que soit l'environnement (y compris du papier) et c'est donc <code>color-adjust: exact</code> qui est utilisé afin d'interdire au navigateur d'ajuster quoi que ce soit.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.ma-boite {
+  background-color: black;
+  background-image: linear-gradient(rgba(0, 0, 180, 0.5), rgba(70, 140, 220, 0.5));
+  color: #900;
+  width: 15rem;
+  height: 6rem;
+  text-align: center;
+  font: 24px "Helvetica", sans-serif;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color-adjust: exact;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="ma-boite"&gt;
+  &lt;p&gt;Il nous faut plus de contraste !&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 640, 120)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Color Adjust', '#propdef-color-adjust', 'color-adjust')}}</td>
+   <td>{{Spec2('CSS Color Adjust')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.color-adjust")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/HTML/Appliquer_des_couleurs">Appliquer des couleurs sur des éléments HTML grâce à CSS</a></li>
+ <li>Les autres propriétés CSS relatives aux couleurs : {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}}</li>
+ <li>{{cssxref("background-image")}}</li>
+</ul>
diff --git a/files/fr/web/css/color/index.html b/files/fr/web/css/color/index.html
new file mode 100644
index 0000000000..805eeb54fb
--- /dev/null
+++ b/files/fr/web/css/color/index.html
@@ -0,0 +1,179 @@
+---
+title: color
+slug: Web/CSS/color
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/color
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>color</code></strong> définit la couleur de premier plan d'un élément texte et de ses éventuelles <a href="/fr/docs/Web/CSS/text-decoration">décorations</a>. Elle définit également la valeur de {{cssxref("currentColor")}} qui peut être utilisée pour d'autres propriétés (par exemple comme valeur par défaut pour {{cssxref("border-color")}}).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/color.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La valeur de cette propriété doit être une couleur uniforme. Celle-ci peut contenir des informations de transparences à partir de CSS3 mais ce ne doit pas être un dégradé ({{cssxref("&lt;gradient&gt;")}}) car en CSS un dégradé est considéré comme une image (type {{cssxref("&lt;image&gt;")}}) et pas comme une couleur.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+color: currentcolor;
+
+/* Valeurs avec un mot-clé pour une couleur nommée */
+color: red;
+color: orange;
+color: tan;
+color: rebeccapurple;
+
+/* Valeurs hexadécimales &lt;hex-color&gt; */
+color: #090;
+color: #009900;
+color: #090a;
+color: #009900aa;
+
+/* Valeurs utilisant la fonction &lt;rgb()&gt; */
+color: rgb(34, 12, 64, 0.6);
+color: rgba(34, 12, 64, 0.6);
+color: rgb(34 12 64 / 0.6);
+color: rgba(34 12 64 / 0.3);
+color: rgb(34.0 12 64 / 60%);
+color: rgba(34.6 12 64 / 30%);
+
+/* Valeurs &lt;hsl()&gt; */
+color: hsl(30, 100%, 50%, 0.6);
+color: hsla(30, 100%, 50%, 0.6);
+color: hsl(30 100% 50% / 0.6);
+color: hsla(30 100% 50% / 0.6);
+color: hsl(30.0 100% 50% / 60%);
+color: hsla(30.2 100% 50% / 60%);
+
+
+/* Valeurs globales */
+color: inherit;
+color: initial;
+color: unset;
+</pre>
+
+<p>La propriété <code>color</code> est définie grâce à une valeur de type {{cssxref("&lt;color&gt;")}}.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;color&gt;")}} qui fournit la couleur pour les éléments textuels de l'élément.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple {
+  color: rgb(0, 0, 255);
+  /* équivalent à
+  color: blue;
+  color: #0000ff;
+  color: #00f;
+  color: hsl(0, 100%, 50%); */
+}
+
+.confiture {
+  color: orange;
+  /* on pourrait aussi utiliser
+  color: rgb(255, 128, 0); */
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="exemple"&gt;
+  En passant elle prit sur un rayon un pot de
+  confiture portant cette étiquette,
+  &lt;span class="confiture"&gt;
+    « MARMELADE D’ORANGES. »
+  &lt;/span&gt;
+  Mais, à son grand regret, le pot était vide :
+  elle n’osait le laisser tomber dans la crainte
+  de tuer quelqu’un ; aussi s’arrangea-t-elle de
+  manière à le déposer en passant dans une
+  des armoires.
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Il est important de vérifier le contraste entre la couleur utilisée pour le texte et celle utilisée pour l'arrière-plan afin que les personnes ayant une vision faible ou lisant le document dans de mauvaises conditions puissent correctement lire le document.</p>
+
+<p>Le ratio de contraste est déterminé en comparant la luminosité de la couleur du texte et celle de la couleur d'arrière-plan. Afin de respecter <a href="https://www.w3.org/WAI/intro/wcag">les règles d'accessibilité (WCAG)</a>, on doit avoir un ratio de 4.5:1 pour les textes « normaux » et un ratio de 3:1 pour les textes plus grands comme les titres (un texte est considéré comme « grand » s'il est en gras et qu'une lettre mesure plus de 18.66 px ou bien si une lettre mesure plus de 24 pixels).</p>
+
+<ul>
+ <li><a href="https://webaim.org/resources/contrastchecker/">Contrôleur de contraste WebAIM</a></li>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li>
+ <li><em><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3  | W3C Understanding WCAG 2.0 </a></em><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">(en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Colors', '#the-color-property', 'color')}}</td>
+   <td>{{Spec2('CSS4 Colors')}}</td>
+   <td>Ajout de la syntaxe sans virgule pour les fonctions <code>rgb()</code>, <code>rgba()</code>, <code>hsl()</code> et <code>hsla()</code> Une valeur alpha peut être utilisée dans <code>rgb()</code> et <code>hsl()</code>, <code>rgba()</code> et <code>hsla()</code> sont donc des synonymes (dépréciés) de ces fonctions. Ajout de la couleur <code>rebeccapurple</code>.<br>
+    Ajout des valeurs hexadécimales sur 4 et 8 chiffres où le dernier chiffre indique la composante alpha.<br>
+    Ajout des fonctions <code>hwb()</code>, <code>device-cmyk()</code> et <code>color()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'color')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>color</code> peut désormais être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Colors', '#color', 'color')}}</td>
+   <td>{{Spec2('CSS3 Colors')}}</td>
+   <td>Dépréciation des couleurs système. Ajout des couleurs SVG. Ajout des fonctions <code>rgba()</code>, <code>hsl()</code> et <code>hsla()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html#colors', 'color')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Ajout de la couleur <code>orange</code> et des couleurs système.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#color', 'color')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.color")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Le type de donnée {{cssxref("&lt;color&gt;")}}</li>
+ <li>Les autres propriétés relatives aux couleurs : {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}} et {{cssxref("color-adjust")}}</li>
+ <li><a href="/fr/docs/Web/HTML/Applying_color">Appliquer des couleurs aux éléments HTML grâce à CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/column-count/index.html b/files/fr/web/css/column-count/index.html
new file mode 100644
index 0000000000..97e3a14f65
--- /dev/null
+++ b/files/fr/web/css/column-count/index.html
@@ -0,0 +1,106 @@
+---
+title: column-count
+slug: Web/CSS/column-count
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/column-count
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>column-count</code></strong> décrit le nombre de colonnes d'un élément lorsqu'on utilise une disposition en colonnes.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/column-count.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+column-count: auto;
+
+/* Valeurs numériques */
+/* Type &lt;number&gt; */
+column-count: 3;
+
+/* Valeurs globales */
+column-count: inherit;
+column-count: initial;
+column-count: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Un mot-clé qui indique que le nombre de colonnes doit être déterminé à partir d'autres propriétés CSS (par exemple à partir de {{cssxref("column-width")}}).</dd>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>Un nombre (type {{cssxref("&lt;integer&gt;")}}) strictement positif qui décrit le nombre idéal de colonnes avec lequel répartir le contenu de l'élément. Si la valeur de {{cssxref("column-width")}} n'est pas <code>auto</code>, cette propriété indique simplement le nombre maximal de colonnes autorisé.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">.exemple {
+  border: 10px solid #000000;
+  column-count:3;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="exemple"&gt;
+  « Mais alors, » pensa Alice, « ne serai-je donc
+  jamais plus vieille que je ne le suis maintenant ?
+  D’un côté cela aura ses avantages, ne jamais être
+  une vieille femme. Mais alors avoir toujours des
+  leçons à apprendre ! Oh, je n’aimerais pas cela du
+  tout. »
+  « Oh ! Alice, petite folle, » se répondit-elle.
+  « Comment pourriez-vous apprendre des leçons ici ?
+  Il y a à peine de la place pour vous, et il n’y en
+  a pas du tout pour vos livres de leçons. »
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","800","300")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Multicol', '#cc', 'column-count')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.column-count")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Apprendre - la disposition multi-colonnes</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol">Les concepts de bases pour la disposition multi-colonnes</a></li>
+</ul>
diff --git a/files/fr/web/css/column-fill/index.html b/files/fr/web/css/column-fill/index.html
new file mode 100644
index 0000000000..a2a64b6849
--- /dev/null
+++ b/files/fr/web/css/column-fill/index.html
@@ -0,0 +1,102 @@
+---
+title: column-fill
+slug: Web/CSS/column-fill
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/column-fill
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>column-fill</code></strong> permet de contrôler la façon dont le contenu est réparti entre les colonnes. Le contenu peut être équilibré (afin de prendre la même hauteur sur toutes les colonnes) ou être réparti de façon automatique (avec <code>auto</code>) et remplir l'espace nécessaire.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/column-fill.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+column-fill: auto;
+column-fill: balance;
+column-fill: balance-all;
+
+/* Valeurs globales */
+column-fill: inherit;
+column-fill: initial;
+column-fill: unset;
+</pre>
+
+<p>Cette propriété est définie grâce à l'un des mots-clés définis ci-après.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Un mot-clé indiquant que les colonnes sont remplies dans l'ordre.</dd>
+ <dt><code>balance</code></dt>
+ <dd>Un mot-clé indiquant que le contenu doit être équitablement réparti entre les colonnes. Pour les médias paginés, seule la dernière page est équilibrée.</dd>
+ <dt><code>balance-all</code></dt>
+ <dd>Un mot-clé indiquant que le contenu doit être équitablement réparti entre les colonnes. Pour les média paginés, toutes les pages sont équilibrées.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">.exemple {
+  border: 10px solid #000000;
+  column-count:3;
+  column-fill: balance;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="exemple"&gt;
+  « Mais alors, » pensa Alice, « ne serai-je donc
+  jamais plus vieille que je ne le suis maintenant ?
+  D’un côté cela aura ses avantages, ne jamais être
+  une vieille femme. Mais alors avoir toujours des
+  leçons à apprendre ! Oh, je n’aimerais pas cela du
+  tout. »
+  « Oh ! Alice, petite folle, » se répondit-elle.
+  « Comment pourriez-vous apprendre des leçons ici ?
+  Il y a à peine de la place pour vous, et il n’y en
+  a pas du tout pour vos livres de leçons. »
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","800","300")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Multicol', '#cf', 'column-fill')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.column-fill")}}</p>
diff --git a/files/fr/web/css/column-gap/index.html b/files/fr/web/css/column-gap/index.html
new file mode 100644
index 0000000000..99ac3c185c
--- /dev/null
+++ b/files/fr/web/css/column-gap/index.html
@@ -0,0 +1,206 @@
+---
+title: column-gap
+slug: Web/CSS/column-gap
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/column-gap
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>column-gap</code></strong> permet de définir l'espace entre les colonnes d'un élément.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/column-gap.html")}}</div>
+
+<div>{{EmbedInteractiveExample("pages/css/grid-column-gap.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La propriété <code>column-gap</code> était initialement définie dans le module de spécification <a href="/fr/docs/Web/CSS/Colonnes_CSS"><em>Multi-column Layout</em> (disposition en colonnes)</a>. Cette définition a depuis été élargie afin de pouvoir être utilisée dans les différents modes de disposition et fait désormais partie du module de spécification <em><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></em>. Cette propriété peut être utilisée pour les dispositions en colonnes, les dispositions flexibles ou les disposition en grille.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Le module de spécification <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></em> définissait initialement la propriété <code>grid-column-gap</code>. Cette version préfixée a été remplacée par <code>column-gap</code>. Toutefois, à des fins de compatibilité envers les navigateurs qui ne prendraient pas en charge cette évolution, mieux vaut utiliser les deux versions (voir l'exemple interactif ci-avant).</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css">/* Valeur avec un mot-clé */
+column-gap: normal;
+
+/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+column-gap: 3px;
+column-gap: 2.5em;
+
+/* Valeurs de pourcentage */
+/* Type &lt;percentage&gt; */
+column-gap: 3%;
+
+/* Valeurs globales */
+column-gap: inherit;
+column-gap: initial;
+column-gap: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Un mot-clé qui indique qu'on souhaite utiliser l'espacement par défaut créé par le navigateur. Pour les dispositions en colonnes, cette valeur correspond à <code>1em</code>, sinon elle correspond à <code>0</code>.</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une valeur de longueur (type {{cssxref("&lt;length&gt;")}}) qui définit la taille de l'espace entre les colonnes. Cette valeur peut être nulle mais ne doit pas être négative.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Une valeur de pourcentage (type {{cssxref("&lt;percentage&gt;")}} qui définit la taille de l'espace entre les colonnes. Cette valeur peut être nulle mais ne doit pas être négative.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Disposition_flexible">Disposition flexible</h3>
+
+<p>{{SeeCompatTable}}</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div id="flexbox"&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">#flexbox {
+  display: flex;
+  height: 100px;
+  column-gap: 20px;
+}
+
+#flexbox &gt; div {
+  border: 1opx solid green;
+  background-color: lime;
+  flex: auto;
+}</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Disposition_flexible","auto","120px")}}</p>
+
+<h3 id="Disposition_en_colonnes">Disposition en colonnes</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;p class="content-box"&gt;
+  Un texte sur plusieurs colonnes avec une gouttière
+  de 40px paramétrée grâce à la propriété `column-gap`.
+  C'est plutôt pas mal comme effet non ?
+&lt;/p&gt;
+</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush:css">.content-box {
+  column-count: 3;
+  column-gap: 40px;
+}
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Disposition_en_colonnes", "auto", "120px")}}</p>
+
+<h3 id="Disposition_en_grille">Disposition en grille</h3>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;div id="grid"&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css; highlight[6]">#grid {
+  display: grid;
+  height: 100px;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: 100px;
+  column-gap: 20px;
+}
+
+#grid &gt; div {
+  background-color: lime;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">#grid {
+  grid-column-gap: 20px;
+}</pre>
+</div>
+
+<h4 id="Résultat_3">Résultat</h4>
+
+<p>{{EmbedLiveSample("Disposition_en_grille", "auto", "120px")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Box Alignment", "#column-row-gap", "column-gap")}}</td>
+   <td>{{Spec2("CSS3 Box Alignment")}}</td>
+   <td>Applique cette propriété aux grilles et aux boîtes flexibles (<em>flexbox</em>).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Grid", "#gutters", "column-gap")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Définition de l'impact de cette propriété sur les dispositions en grille.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Multicol", "#column-gap", "column-gap")}}</td>
+   <td>{{Spec2("CSS3 Multicol")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<h3 id="Prise_en_charge_pour_les_dispositions_flexibles">Prise en charge pour les dispositions flexibles</h3>
+
+<p>{{Compat("css.properties.column-gap.flex_context")}}</p>
+
+<h3 id="Prise_en_charge_pour_les_dispositions_en_grille">Prise en charge pour les dispositions en grille</h3>
+
+<p>{{Compat("css.properties.column-gap.grid_context")}}</p>
+
+<h3 id="Prise_en_charge_pour_les_dispositions_en_colonnes">Prise en charge pour les dispositions en colonnes</h3>
+
+<p>{{Compat("css.properties.column-gap.multicol_context")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("row-gap")}}</li>
+ <li>{{cssxref("gap")}}</li>
+ <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Concepts de base des flexbox</a></em></li>
+ <li>Guide sur les grilles : <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base#Les_gouttières">Concepts de base des grilles : les gouttières</a></em></li>
+ <li>Guide sur la disposition multi-colonnes : <em><a href="/fr/docs/Web/CSS/CSS_Columns/Styling_Columns">Mettre en forme les colonnes</a></em></li>
+</ul>
diff --git a/files/fr/web/css/column-rule-color/index.html b/files/fr/web/css/column-rule-color/index.html
new file mode 100644
index 0000000000..e49ae2b9e4
--- /dev/null
+++ b/files/fr/web/css/column-rule-color/index.html
@@ -0,0 +1,110 @@
+---
+title: column-rule-color
+slug: Web/CSS/column-rule-color
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/column-rule-color
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété<strong> <code>column-rule-color</code></strong> permet de définir la couleur de la ligne tracée entre les colonnes lorsqu'on utilise une disposition en colonnes.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/column-rule-color.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de couleur */
+/* Type &lt;color&gt; */
+column-rule-color: red;
+column-rule-color: rgb(192, 56, 78);
+column-rule-color: transparent;
+column-rule-color: hsla(0, 100%, 50%, 0.6);
+
+/* Valeurs globales */
+column-rule-color: inherit;
+column-rule-color: initial;
+column-rule-color: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>Une valeur de couleur (type {{cssxref("&lt;color&gt;")}}) qui indique la couleur du trait entre les colonnes.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">.exemple {
+  border: 10px solid #000000;
+
+  columns:3;
+  column-rule-width: thick;
+  column-rule-color: blue;
+  column-rule-style: solid;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class=exemple&gt;
+  « Mais alors, » pensa Alice, « ne serai-je donc
+  jamais plus vieille que je ne le suis maintenant ?
+  D’un côté cela aura ses avantages, ne jamais être
+  une vieille femme. Mais alors avoir toujours des
+  leçons à apprendre ! Oh, je n’aimerais pas cela du
+  tout. »
+  « Oh ! Alice, petite folle, » se répondit-elle.
+  « Comment pourriez-vous apprendre des leçons ici ?
+  Il y a à peine de la place pour vous, et il n’y en
+  a pas du tout pour vos livres de leçons. »
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Multicol', '#crc', 'column-rule-color')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.column-rule-color")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Le type de donnée {{cssxref("&lt;color&gt;")}}</li>
+ <li>Les autres propriétés relatives aux couleurs : {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}} et {{cssxref("caret-color")}}</li>
+ <li><a href="/fr/docs/Web/HTML/Applying_color">Appliquer des couleurs aux éléments HTML grâce à CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/column-rule-style/index.html b/files/fr/web/css/column-rule-style/index.html
new file mode 100644
index 0000000000..64a2b08caa
--- /dev/null
+++ b/files/fr/web/css/column-rule-style/index.html
@@ -0,0 +1,109 @@
+---
+title: column-rule-style
+slug: Web/CSS/column-rule-style
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/column-rule-style
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>column-rule-style</code></strong> permet de définir le style de la ligne tracée entre plusieurs colonnes lorsqu'on utilise une disposition en colonnes.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/column-rule-style.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+column-rule-style: none;
+column-rule-style: hidden;
+column-rule-style: dotted;
+column-rule-style: dashed;
+column-rule-style: solid;
+column-rule-style: double;
+column-rule-style: groove;
+column-rule-style: ridge;
+column-rule-style: inset;
+column-rule-style: outset;
+
+/* Valeurs globales */
+column-rule-style: inherit;
+column-rule-style: initial;
+column-rule-style: unset;
+</pre>
+
+<p>La propriété <code>column-rule-style</code> avec une valeur unique de type <code>&lt;br-style&gt;</code>.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;br-style&gt; </code></dt>
+ <dd>Un mot-clé (défini comme pour {{cssxref("border-style")}}) qui permet de définir le style appliqué au trait. Les épaisseurs résultantes sont calculées avec la même méthode que pour les bordures (cf. <em><a href="https://www.w3.org/TR/CSS2/tables.html#collapsing-borders">collapsing border model</a></em>).</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">.exemple {
+  border: 10px solid #000000;
+
+  columns:3;
+  column-rule-width: thick;
+  column-rule-color: blue;
+  column-rule-style: dashed;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class=exemple&gt;
+  « Mais alors, » pensa Alice, « ne serai-je donc
+  jamais plus vieille que je ne le suis maintenant ?
+  D’un côté cela aura ses avantages, ne jamais être
+  une vieille femme. Mais alors avoir toujours des
+  leçons à apprendre ! Oh, je n’aimerais pas cela du
+  tout. »
+  « Oh ! Alice, petite folle, » se répondit-elle.
+  « Comment pourriez-vous apprendre des leçons ici ?
+  Il y a à peine de la place pour vous, et il n’y en
+  a pas du tout pour vos livres de leçons. »
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Multicol', '#crs', 'column-rule-style')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.column-rule-style")}}</p>
diff --git a/files/fr/web/css/column-rule-width/index.html b/files/fr/web/css/column-rule-width/index.html
new file mode 100644
index 0000000000..3797b147cb
--- /dev/null
+++ b/files/fr/web/css/column-rule-width/index.html
@@ -0,0 +1,106 @@
+---
+title: column-rule-width
+slug: Web/CSS/column-rule-width
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/column-rule-width
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>column-rule-width</code></strong> permet de définir la largeur du trait tracé entre les colonnes lorsqu'on utilise une disposition en colonnes.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/column-rule-width.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+column-rule-width: thin;
+column-rule-width: medium;
+column-rule-width: thick;
+
+/* Valeurs de longueurs */
+/* Type &lt;length&gt;        */
+column-rule-width: 1px;
+column-rule-width: 2.5em;
+
+/* Valeurs globales */
+column-rule-width: inherit;
+column-rule-width: initial;
+column-rule-width: unset;
+</pre>
+
+<p>La propriété <code>column-rule-width</code> est définie grâce à une valeur de type <code>&lt;br-width&gt;</code>.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;br-width&gt;</code></dt>
+ <dd>Une valeur de longueur (type {{cssxref("&lt;length&gt;")}}) ou un mot-clé parmi <code>thin</code>, <code>medium</code> ou <code>thick</code> qui décrit l'épaisseur du trait séparant deux colonnes. C'est le type de valeur qui sera également utilisé pour la propriété {{cssxref("border-width")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">.exemple {
+  border: 10px solid #000000;
+  columns:3;
+  column-rule-width: thick;
+  column-rule-color: blue;
+  column-rule-style: dashed;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class=exemple&gt;
+  « Mais alors, » pensa Alice, « ne serai-je donc
+  jamais plus vieille que je ne le suis maintenant ?
+  D’un côté cela aura ses avantages, ne jamais être
+  une vieille femme. Mais alors avoir toujours des
+  leçons à apprendre ! Oh, je n’aimerais pas cela du
+  tout. »
+  « Oh ! Alice, petite folle, » se répondit-elle.
+  « Comment pourriez-vous apprendre des leçons ici ?
+  Il y a à peine de la place pour vous, et il n’y en
+  a pas du tout pour vos livres de leçons. »
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Multicol', '#crw', 'column-rule-width')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.column-rule-width")}}</p>
diff --git a/files/fr/web/css/column-rule/index.html b/files/fr/web/css/column-rule/index.html
new file mode 100644
index 0000000000..b5df7f6e0e
--- /dev/null
+++ b/files/fr/web/css/column-rule/index.html
@@ -0,0 +1,109 @@
+---
+title: column-rule
+slug: Web/CSS/column-rule
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/column-rule
+---
+<div>{{CSSRef}}</div>
+
+<p>Lorsqu'on utilise une disposition sur plusieurs colonnes, la <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">propriété raccourcie</a> <strong><code>column-rule</code></strong> permet de définir l'affichage d'une ligne droite (aussi appelée « règle ») entre chaque colonne.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/column-rule.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cette propriété est une propriété raccourcie qui permet de définir {{cssxref("column-rule-width")}}, {{cssxref("column-rule-style")}} et {{cssxref("column-rule-color")}} (plutôt que d'avoir à les définir une par une, ce qui est plus laborieux).</p>
+
+<div class="note">
+<p><strong>Note :</strong> Cette propriété étant une propriété raccourcie, elle surcharge toutes les déclarations avec les propriétés individuelles écrites avant au sein d'une même règle.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css">/* Syntaxe avec des mots-clés */
+column-rule: dotted;
+column-rule: solid blue;
+column-rule: solid 8px;
+column-rule: thick inset blue;
+
+/* Valeurs globales */
+column-rule: inherit;
+column-rule: initial;
+column-rule: unset;
+</pre>
+
+<p>Cette propriété peut être définie avec une, deux ou trois valeurs telles que définies ci-après, dans n'importe quel ordre.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;'column-rule-width'&gt;</code></dt>
+ <dd>Une valeur de longueur (type {{cssxref("&lt;length&gt;")}}) ou l'un des mots-clés <code>thin</code>, <code>medium</code> ou <code>thick</code>. Pour plus de détails, voir {{cssxref("border-width")}}.</dd>
+ <dt><code>&lt;'column-rule-style'&gt;</code></dt>
+ <dd>Voir {{cssxref("border-style")}} pour les différentes valeurs possibles.</dd>
+ <dt><code>&lt;'column-rule-color'&gt;</code></dt>
+ <dd>Une valeur de couleur (type {{cssxref("&lt;color&gt;")}}).</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<div id="htmlOutputWrapper">
+<pre class="brush: html" id="htmlOutput">&lt;div id="col_rul"&gt;
+  &lt;p&gt; column one &lt;/p&gt;
+  &lt;p&gt; column two &lt;/p&gt;
+  &lt;p&gt; column three &lt;/p&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#col_rul{
+  padding: 0.3em;
+  background: gold;
+  border: groove 2px gold;
+  column-rule: inset 2px gold;
+  column-count: 3;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Multicol', '#column-rule', 'column-rule')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.column-rule")}}</p>
diff --git a/files/fr/web/css/column-span/index.html b/files/fr/web/css/column-span/index.html
new file mode 100644
index 0000000000..384a645097
--- /dev/null
+++ b/files/fr/web/css/column-span/index.html
@@ -0,0 +1,101 @@
+---
+title: column-span
+slug: Web/CSS/column-span
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/column-span
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>column-span</code></strong> permet à un élément de s'étendre sur toutes les colonnes lorsque la valeur de cette propriété est <code>all</code>. Un élément qui s'étend sur plus d'une colonne est appelé un élément étendu (<em>spanning element</em>).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/column-span.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+column-span: none;
+column-span: all;
+
+/* Valeurs globales */
+column-span: inherit;
+column-span: initial;
+column-span: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>L'élément ne s'étend pas sur plusieurs colonnes.</dd>
+ <dt><code>all</code></dt>
+ <dd>L'élément s'étend sur l'ensemble des colonnes. Le contenu du flux normal apparaissant avant l'élément est équilibré entre toutes les colonnes de façon automatique. L'élément établit un nouveau bloc de contexte de formatage.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple {
+  border: 10px solid #000000;
+  columns:3;
+}
+
+h2 {
+  column-span: all;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class=exemple&gt;
+  « Mais alors, » pensa Alice, « ne serai-je donc
+  jamais plus vieille que je ne le suis maintenant ?
+  D’un côté cela aura ses avantages, ne jamais être
+  une vieille femme. Mais alors avoir toujours des
+  leçons à apprendre ! Oh, je n’aimerais pas cela du
+  tout. »
+  &lt;h2&gt; La suite&lt;/h2&gt;
+  « Oh ! Alice, petite folle, » se répondit-elle.
+  « Comment pourriez-vous apprendre des leçons ici ?
+  Il y a à peine de la place pour vous, et il n’y en
+  a pas du tout pour vos livres de leçons. »
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","auto",120)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Multicol', '#column-span', 'column-span')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.column-span")}}</p>
diff --git a/files/fr/web/css/column-width/index.html b/files/fr/web/css/column-width/index.html
new file mode 100644
index 0000000000..748eadc8ec
--- /dev/null
+++ b/files/fr/web/css/column-width/index.html
@@ -0,0 +1,113 @@
+---
+title: column-width
+slug: Web/CSS/column-width
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/column-width
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>column-width</code></strong> définit une largeur de colonne idéale lorsqu'on utilise une disposition en colonnes. Aussi, on aura le plus de colonnes possible et pour lesquelles aucune n'est moins large que <code>column-width</code>. La colonne réelle peut être plus petite que cette taille si son conteneur est moins large que cette valeur.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/column-width.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Ainsi, si on a une colonne large de 300px avec un écart de 0px, on pourrait placer une seule colonne sur 599px mais avoir deux colonnes avec 600px. Ce réglage permet donc d'obtenir des effets qui s'adaptent aux différentes tailles d'écrans. Manipulée avec la propriété {{cssxref("column-count")}} qui a la précédence, il est nécessaire de définir toutes les valeurs de longueur pour avoir une largeur de colonne CSS exacte. Pour du texte horizontal, ces propriétés sont {{cssxref('width')}}, {{cssxref('column-width')}}, {{cssxref('column-gap')}} et {{cssxref('column-rule-width')}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeur avec un mot-clé */
+column-width: auto;
+
+/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+column-width: 60px;
+column-width: 15.5em;
+column-width: 3.3vw;
+
+/* Valeurs globales */
+column-width: inherit;
+column-width: initial;
+column-width: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une valeur de longueur (type {{cssxref("&lt;length&gt;")}}) qui fournit une indication sur la largeur optimale d'une colonne. La colonne réelle peut être plus large que cette longueur (pour remplir l'espace disponible) ou plus étroite (uniquement si l'espace disponible est inférieur à la largeur indiquée). La longueur exprimée doit être strictement positive sinon la déclaration est considérée invalide. Les valeurs exprimées en pourcentages sont invalides.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Un mot-clé indiquant que la largeur de la colonne doit être déterminée grâce aux autres propriétés CSS comme {{cssxref("column-count")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.content-box {
+  border: 10px solid #0ff;
+
+  -webkit-column-width: 100px;
+  -moz-column-width: 100px;
+  column-width: 100px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="content-box"&gt;
+  Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
+  sed diam nonummy nibh euismod tincidunt ut laoreet dolore
+  magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
+  quis nostrud exerci tation ullamcorper suscipit lobortis
+  nisl ut aliquip ex ea commodo consequat.
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '300px', '200px')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Writing Modes', '#auto-multicol', 'column-width')}}</td>
+   <td>{{Spec2('CSS4 Writing Modes')}}</td>
+   <td>Ajoutes des tailles intrinsèques grâce aux mots-clés <code>min-content</code>, <code>max-content</code>, <code>fill-available</code> et <code>fit-content</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Multicol', '#cw', 'column-width')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.column-width")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Apprendre - La disposition multi-colonnes</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol">Les concepts de base pour la disposition multi-colonnes</a></li>
+</ul>
diff --git a/files/fr/web/css/columns/index.html b/files/fr/web/css/columns/index.html
new file mode 100644
index 0000000000..ce9e7257c9
--- /dev/null
+++ b/files/fr/web/css/columns/index.html
@@ -0,0 +1,112 @@
+---
+title: columns
+slug: Web/CSS/columns
+tags:
+  - CSS
+  - Propriété
+  - Propriété raccourcie
+  - Reference
+translation_of: Web/CSS/columns
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>columns</code></strong> est une propriété raccourcie permettant de définir les deux propriétés {{cssxref('column-width')}} (qui définit la largeur des colonnes) et {{cssxref("column-count")}} (qui définit le nombre de colonnes) en même temps.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/columns.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Comme pour toute propriété raccourcie, toute propriété détaillée qui n'est pas définie se voit réinitialisée à sa valeur par défaut (surchargeant ainsi les éventuelles règles déclarées avant).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Largeur */
+columns: 18em;
+
+/* Nombre de colonnes */
+columns: 1;
+columns: auto;
+
+/* Combinaison d'une largeur et d'un nombre */
+columns: 1 auto;
+columns: auto 12em;
+columns: auto auto;
+
+
+/* Valeurs globales */
+columns: inherit;
+columns: initial;
+columns: unset;
+</pre>
+
+<p>La propriété <code>columns</code> se définit avec un ou deux valeurs parmi celles décrites ci-après. L'ordre de ces valeurs n'a pas d'importance.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;'column-width'&gt;</code></dt>
+ <dd>Une valeur de longueur (type {{cssxref("&lt;length&gt;")}}) fournissant une indication quant à la largeur optimale de la colonne ou le mot-clé auto. La colonne réelle peut être plus large (pour remplir l'espace disponible) ou plus étroite (s'il n'y a pas suffisamment d'espace disponible). La longueur exprimée doit être strictement positive, dans le cas contraire, la déclaration sera invalide.</dd>
+ <dt><code>&lt;'column-count'&gt;</code></dt>
+ <dd>Une quantité (type {{cssxref("&lt;integer&gt;")}}) strictement positive qui décrit le nombre idéal de colonnes parmi lesquelles disposer le contenu de l'élément. Si la valeur de {{cssxref("column-width")}} n'est pas une valeur automatique, cette valeur indique simplement le nombre maximal de colonnes.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">.exemple {
+  margin: 0;
+  height: 90px;
+  border: 3px solid black;
+  columns: 3;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class=exemple&gt;
+  « Mais alors, » pensa Alice, « ne serai-je donc
+  jamais plus vieille que je ne le suis maintenant ?
+  D’un côté cela aura ses avantages, ne jamais être
+  une vieille femme. Mais alors avoir toujours des
+  leçons à apprendre ! Oh, je n’aimerais pas cela du
+  tout. »
+  « Oh ! Alice, petite folle, » se répondit-elle.
+  « Comment pourriez-vous apprendre des leçons ici ?
+  Il y a à peine de la place pour vous, et il n’y en
+  a pas du tout pour vos livres de leçons. »
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples",300,120)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Multicol', '#columns', 'columns')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.columns")}}</p>
diff --git a/files/fr/web/css/combinateur_colonne/index.html b/files/fr/web/css/combinateur_colonne/index.html
new file mode 100644
index 0000000000..b971e8ae4c
--- /dev/null
+++ b/files/fr/web/css/combinateur_colonne/index.html
@@ -0,0 +1,97 @@
+---
+title: Combinateur de colonne
+slug: Web/CSS/Combinateur_colonne
+tags:
+  - CSS
+  - Reference
+  - Sélecteur
+translation_of: Web/CSS/Column_combinator
+---
+<div>{{CSSRef("Selectors")}}{{Draft}}{{SeeCompatTable}}</div>
+
+<p>Le <strong>combinateur de colonne</strong> (<code>||</code>) est placé entre deux sélecteurs CSS. Les éléments ciblés sont ceux ciblés par le deuxième sélecteur et qui appartiennent à un élément en colonne qui correspond au premier sélecteur.</p>
+
+<pre class="brush: css no-line-numbers">/* Les cellules de tableaux qui appartiennent */
+/* à la colonne "selected" */
+col.selected || td {
+  background: gray;
+}
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>column-selector</var> || <var>cell-selector</var> {
+  <var>/* propriétés pour le style */</var>
+}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;table border="1"&gt;
+  &lt;colgroup&gt;
+    &lt;col span="2"/&gt;
+    &lt;col class="selected"/&gt;
+  &lt;/colgroup&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;A
+      &lt;td&gt;B
+      &lt;td&gt;C
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td colspan="2"&gt;D&lt;/td&gt;
+      &lt;td&gt;E&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;F&lt;/td&gt;
+      &lt;td colspan="2"&gt;G&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">col.selected || td {
+  background: gray;
+  color: white;
+  font-weight: bold;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "100%")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors", "#the-column-combinator", "column combinator")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Array.sort")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("col")}}</li>
+ <li>{{HTMLElement("colgroup")}}</li>
+ <li>{{CSSxRef("grid")}}</li>
+</ul>
diff --git a/files/fr/web/css/combinateur_de_voisin_direct/index.html b/files/fr/web/css/combinateur_de_voisin_direct/index.html
new file mode 100644
index 0000000000..4898c755c4
--- /dev/null
+++ b/files/fr/web/css/combinateur_de_voisin_direct/index.html
@@ -0,0 +1,86 @@
+---
+title: Combinateur de voisin direct
+slug: Web/CSS/Combinateur_de_voisin_direct
+tags:
+  - CSS
+  - Reference
+  - Sélecteur
+translation_of: Web/CSS/Adjacent_sibling_combinator
+---
+<div>{{CSSRef("Selectors")}}</div>
+
+<p>Cette forme de combinateur permet de sélectionner un élément uniquement si celui-ci « suit » un élément donné et que les deux éléments sont les fils d'un même élément parent.</p>
+
+<pre class="brush: css">/* Ne cible que les paragraphes situé directement après une image */
+img + p {
+  font-style: bold;
+}</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">premier_element + element_cible { <em>styles</em> }
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<div id="Example_1">
+<pre class="brush: css">li:first-of-type + li {
+  color: red;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;Un&lt;/li&gt;
+  &lt;li&gt;Deux&lt;/li&gt;
+  &lt;li&gt;Trois&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+</div>
+
+<p>{{EmbedLiveSample('Exemples', 200, 100)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#adjacent-sibling-combinators', 'next-sibling combinator')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Renomme ce sélecteur en « <em>next-sibling combinator</em> ».</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#adjacent-sibling-combinators', 'Adjacent sibling combinator')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#adjacent-selectors', 'Adjacent sibling selectors')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.adjacent_sibling")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Sélecteurs_de_voisins_généraux">Les combinateurs d'éléments voisins</a></li>
+</ul>
diff --git a/files/fr/web/css/comments/index.html b/files/fr/web/css/comments/index.html
new file mode 100644
index 0000000000..1176e56c99
--- /dev/null
+++ b/files/fr/web/css/comments/index.html
@@ -0,0 +1,54 @@
+---
+title: Commentaires
+slug: Web/CSS/Comments
+tags:
+  - CSS
+  - Débutant
+  - Reference
+translation_of: Web/CSS/Comments
+---
+<div>{{CSSRef}}</div>
+
+<p>Les commentaires sont utilisés afin d'ajouter des notes explicatives ou pour empêcher le navigateur d'interpréter certaines parties de la feuille de style. Les commentaires n'ont donc aucun impact sur la disposition d'un document.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>On peut utiliser des commentaires à chaque endroit où un blanc est autorisé.</p>
+
+<pre class="syntaxbox">/* Commentaire */
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">/* Commentaire sur une ligne */
+
+/*
+Commentaire
+sur plusieurs
+lignes
+*/
+
+
+/* Le commentaire qui suit permet
+   de désactiver une règle */
+/*
+span {
+  color: blue;
+  font-size: 1.5em;
+}
+*/
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>La syntaxe des commentaires avec <code>/* */</code> est utilisée pour étaler un commentaire sur une ou plusieurs lignes. On ne peut pas utiliser d'autres moyens pour les commentaires dans une feuille de style externe. Lorsqu'on utilise l'élément {{HTMLElement("style")}}, on peut utiliser les commentaires HTML <code>&lt;!-- --&gt;</code> pour masquer du CSS sur des navigateurs plus anciens mais cela n'est pas une méthode recommandée.</p>
+
+<p>À l'instar des autres langages de programmation programmation qui utilisent <code>/* */</code> pour les commentaires, il est impossible de les imbriquer. Autrement dit, la première apparition de <code>*/</code> suivant un <code>/*</code>, ferme le commentaire.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<ul>
+ <li>
+  <div><a href="/fr/docs/Web/CSS/Reference">La référence CSS</a></div>
+ </li>
+</ul>
diff --git a/files/fr/web/css/compartimentation_css/index.html b/files/fr/web/css/compartimentation_css/index.html
new file mode 100644
index 0000000000..34af6f3274
--- /dev/null
+++ b/files/fr/web/css/compartimentation_css/index.html
@@ -0,0 +1,123 @@
+---
+title: Compartimentation CSS (CSS Containment)
+slug: Web/CSS/Compartimentation_CSS
+tags:
+  - CSS
+  - CSS Containment
+translation_of: Web/CSS/CSS_Containment
+---
+<p>{{CSSRef}}<br>
+ L'objectif du module de spécification <em>CSS Containment</em> (pour Compartimentation CSS) consiste à améliorer les performances des pages web en permettant aux développeurs d'isoler un sous-ensemble de la page. Si le navigateur sait que cette partie est indépendante, le rendu peut être optimisé et les performances améliorées. Ce module de spécification définit une seule propriété CSS : {{cssxref("contain")}}. Dans cet article, nous verrons les objectifs principaux de cette spécification.</p>
+
+<h2 id="Exemple_simple">Exemple simple</h2>
+
+<p>De nombreuses pages web disposent de plusieurs sections qui sont indépendantes les unes des autres. Voici une liste d'articles avec leurs titres et leurs contenus.</p>
+
+<pre class="brush: html">&lt;h1&gt;Mon blog&lt;/h1&gt;
+&lt;article&gt;
+  &lt;h2&gt;Titre d'un article sympa&lt;/h2&gt;
+  &lt;p&gt;Un peu de contenu.&lt;/p&gt;
+&lt;/article&gt;
+&lt;article&gt;
+  &lt;h2&gt;Un autre titre pour un autre article&lt;/h2&gt;
+  &lt;p&gt;Un peu plus de contenu ici.&lt;/p&gt;
+&lt;/article&gt;</pre>
+
+<p>Pour chaque article, on applique la propriété {{cssxref("contain")}} avec la valeur <code>content</code>.</p>
+
+<pre class="brush: css">article {
+  contain: content;
+}</pre>
+
+<p>Chaque article est indépendant des autres articles de la page et on fournit <code>contain: content</code> afin d'indiquer cette indépendance au navigateur. Ce dernier peut alors prendre des décisions quant au rendu du contenu (par exemple, ne pas travailler sur le rendu d'articles qui ne sont pas sur la zone visible).</p>
+
+<p>Si on fournit <code>contain: content</code> pour chaque <code>&lt;article&gt;</code>, lorsque de nouveaux éléments sont insérés, le navigateur comprendra qu'il n'est pas nécessaire de tout repeindre/redisposer à l'intérieur de l'arbre de l'élément. Toutefois, si <code>&lt;article&gt;</code> est mis en forme de telle façon que sa forme dépend de son contenu (ex. <code>height: auto</code>), le navigateur devra prendre en compte le redimensionnement.</p>
+
+<p>La valeur <code>content</code> est une valeur synthétique pour <code>contain: layout paint</code>. Elle indique au navigateur que la disposition de l'élément est complètement séparée de celle du reste de la page et que tout ce qui concerne l'élément est peint à l'intérieur de son cadre et que rien ne peut dépasser.</p>
+
+<p>Cette information est parfois connue voire évidente pour la ou les personnes qui construisent la page. Toutefois, les navigateurs ne peuvent pas simplement deviner cette intention et partir du principe que chaque article ne débordera pas. Cette propriété permet ainsi d'expliquer la situation au navigateur afin que celui-ci puisse en tirer parti et optimiser ce qu'il peut grâce à cette hypothèse.</p>
+
+<h2 id="Concepts_et_terminologie">Concepts et terminologie</h2>
+
+<p>Cette spécification ne définit qu'une seule propriété : {{cssxref("contain")}}. Les valeurs fournies à cette propriété indiquent le type de compartimentation qu'on souhaite appliquer à l'élément.</p>
+
+<h3 id="Compartimentation_de_la_disposition">Compartimentation de la disposition</h3>
+
+<pre class="brush: css">article {
+  contain: layout;
+}</pre>
+
+<p>La disposition porte normalement sur l'intégralité d'un document et si on déplace un élément, c'est tout le document qui doit être reconsidéré car tout peut avoir bougé. Avec <code>contain: layout</code>, on indique au navigateur qu'il est uniquement nécessaire de vérifier cet élément et son contenu : tout ce qu'il contient n'affecte pas le reste de la page et la boîte englobante crée un contexte de formatage indépendant.</p>
+
+<p>De plus :</p>
+
+<ul>
+ <li>Les dispositions flottantes (avec <code>display:</code><code>float</code>) seront traitées indépendamment.</li>
+ <li>Les marges ne fusionneront pas en dehors des limites du bloc englobant ainsi compartimenté</li>
+ <li>Le conteneur de la disposition sera un bloc englobant pour les éléments descendants avec des positions <code>absolute</code>/<code>fixed</code>.</li>
+ <li>La boîte englobante crée un contexte d'empilement et on peut donc utiliser {{cssxref("z-index")}}.</li>
+</ul>
+
+<h3 id="Compartimentation_pour_la_peinture">Compartimentation pour la peinture</h3>
+
+<pre class="brush: css">article {
+  contain: paint;
+}</pre>
+
+<p>La compartimentation avec <code>paint</code> limite/rogne la boîte jusqu'à la limite de la zone de remplissage (<em>padding</em>) de la boîte principale. Autrement dit, il ne peut pas y avoir de chevauchement visible. On a également les mêmes règles qu'avec <code>layout</code> (voir ci-avant).</p>
+
+<p>De plus, lorsque la boîte englobante est hors de l'écran, le navigateur n'a pas besoin de peindre ses éléments (car ceux-ci sont contenus dans cette boîte au sens géométrique).</p>
+
+<h3 id="Compartimentation_pour_le_dimensionnement">Compartimentation pour le dimensionnement</h3>
+
+<pre class="brush: css">article {
+  contain: size;
+}</pre>
+
+<p>La compartimentation du dimensionnement, utilisée seule, n'offre pas un grand intérêt quant aux performances. Cette valeur signifie que la taille des éléments fils ne doit pas affecter la taille de l'élément ciblé — sa taille est calculée comme si l'élément n'avait pas de fils.</p>
+
+<p>Si on active <code>contain: size</code>, il faut alors définir la taille de l'élément sur lequel on l'applique. Sinon, dans la plupart des cas, l'élément aura des dimensions nulles.</p>
+
+<h3 id="Compartimentation_pour_le_style">Compartimentation pour le style</h3>
+
+<pre class="brush: css">article {
+  contain: style;
+}</pre>
+
+<p>Malgré son nom, cette valeur ne fournit pas un style compartimenté comme on pourrait l'avoir avec un <a href="/fr/docs/Web/Web_Components/Using_shadow_DOM"><em>Shadow</em> DOM</a>. Cette valeur sert principlament pour les <a href="/fr/docs/Web/CSS/CSS_Lists/Compteurs_CSS">compteurs CSS</a> qui pourraient changer sur un élément et affecter le reste de l'arborescence.</p>
+
+<p>En utilisant <code>contain: style</code>, on s'assure que les propriétés {{cssxref("counter-increment")}} et {{cssxref("counter-set")}} créent de nouveaux compteurs limités à ce sous-arbre.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> La valeur <code>style</code> est considérée comme « à risque » dans la spécification actuelle et pourrait ne pas être prise en charge partout (elle n'est actuellement pas prise en charge dans Firefox - novembre 2019).</p>
+</div>
+
+<h3 id="Valeurs_spéciales">Valeurs spéciales</h3>
+
+<p>La propriété <code>contain</code> possède deux valeurs spéciales :</p>
+
+<ul>
+ <li><code>content</code></li>
+ <li><code>strict</code></li>
+</ul>
+
+<p>La première (vue dans le premier exemple) est un synonyme pour la conjonction de <code>layout</code> et <code>paint</code>. La spécification décrit cette valeur comme pouvant « raisonnablement être appliquée largement de façon saine ». Elle n'applique pas la compartimentation pour le dimensionnement (<code>size</code>) donc on ne risque pas d'avoir une boîte avec une taille nulle en raison de la taille de ses enfants.</p>
+
+<p>Pour obtenir la compartimentation la plus forte, on utilisera <code>contain: strict</code> qui est synonyme de <code>contain: size layout paint</code> voire on ajoutera ensuite la compartimentation du style pour les navigateurs qui la prennent en charge :</p>
+
+<pre class="brush: css">contain: strict;
+contain: strict style;</pre>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés_CSS">Propriétés CSS</h3>
+
+<ul>
+ <li>{{cssxref("contain")}}</li>
+</ul>
+
+<h2 id="Ressources_externes">Ressources externes</h2>
+
+<ul>
+ <li><a href="https://blogs.igalia.com/mrego/2019/01/11/an-introduction-to-css-containment/">Une introduction à la compartimentation CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/compositing_and_blending/index.html b/files/fr/web/css/compositing_and_blending/index.html
new file mode 100644
index 0000000000..a8df83d071
--- /dev/null
+++ b/files/fr/web/css/compositing_and_blending/index.html
@@ -0,0 +1,74 @@
+---
+title: Compositing and Blending
+slug: Web/CSS/Compositing_and_Blending
+tags:
+  - Aperçu
+  - CSS
+  - Compositing and Blending
+  - Overview
+  - Reference
+translation_of: Web/CSS/Compositing_and_Blending
+---
+<div>{{CSSRef}}</div>
+
+<p><em><strong>Compositing and Blending</strong></em> (Composition et fusion) est un module de la spécification CSS qui définit la façon dont les formes de différents éléments sont combinés afin de former une seule image.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("background-blend-mode")}}</li>
+ <li>{{cssxref("isolation")}}</li>
+ <li>{{cssxref("mix-blend-mode")}}</li>
+ <li> </li>
+</ul>
+</div>
+
+<h3 id="Types_de_donnée">Types de donnée</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("&lt;blend-mode&gt;")}}</li>
+</ul>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Compositing")}}</td>
+   <td>{{Spec2("Compositing")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<h3 id="background-blend-mode"><code>background-blend-mode</code></h3>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.background-blend-mode")}}</p>
+
+<h3 id="isolation"><code>isolation</code></h3>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.isolation")}}</p>
+
+<h3 id="mix-blend-mode"><code>mix-blend-mode</code></h3>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.mix-blend-mode")}}</p>
diff --git a/files/fr/web/css/comprendre_z-index/ajout_de_z-index/index.html b/files/fr/web/css/comprendre_z-index/ajout_de_z-index/index.html
new file mode 100644
index 0000000000..d12e2113d1
--- /dev/null
+++ b/files/fr/web/css/comprendre_z-index/ajout_de_z-index/index.html
@@ -0,0 +1,149 @@
+---
+title: Ajouter z-index
+slug: Web/CSS/Comprendre_z-index/Ajout_de_z-index
+tags:
+  - Avancé
+  - CSS
+  - Guide
+  - z-index
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index
+---
+<div>{{CSSRef}}{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Empilement_et_float","Web/CSS/Comprendre_z-index/Empilement_de_couches", "Web/CSS/Comprendre_z-index")}}</div>
+
+<h2 id="Ajouter_z-index">Ajouter <code>z-index</code></h2>
+
+<p>Dans le premier exemple, <a href="/fr/docs/Web/CSS/Comprendre_z-index/Empilement_sans_z-index">« empilement sans <code>z-index</code> »</a>,  illustre comment l'empilement fonctionne par défaut. Pour définir un ordre d'empilement différent, il faut utiliser la propriété CSS {{cssxref("z-index")}}.</p>
+
+<p>Cette propriété, dont l'attribut est une valeur entière (positive ou négative), représente la position de l'élément le long de l'axe Z. Pour se représenter cette notion, on peut imaginer que la page possède plusieurs couches, les unes au dessus des autres. Chaque couche est numérotée. Un couche avec une grande valeur de <code>z-index</code> est affichée par dessus toutes celles dont la valeur est inférieure à la sienne.</p>
+
+<div class="warning">
+<p><strong>Attention :</strong> <code>z-index</code> a un effet sur les éléments uniquement si ceux-ci sont <a href="/fr/docs/Web/CSS/position">positionnés</a>.</p>
+</div>
+
+<ul>
+ <li><em>Bas : couche la plus lointaine de l'observateur</em></li>
+ <li>…</li>
+ <li>Couche -3</li>
+ <li>Couche -2</li>
+ <li>Couche -1</li>
+ <li>Couche 0 <em>couche de rendu par défaut</em></li>
+ <li>Couche 1</li>
+ <li>Couche 2</li>
+ <li>Couche 3</li>
+ <li>…</li>
+ <li><em>Haut : couche la plus proche de l'observateur</em></li>
+</ul>
+
+<div class="note">
+<p><strong>Notes :</strong></p>
+
+<ul>
+ <li>Lorsque la propriété <code>z-index</code> n'est pas définie, les éléments sont rendus sur la couche 0 par défaut.</li>
+ <li>Si plusieurs éléments possède la même valeur de <code>z-index</code> (c'est-à-dire qu'ils sont placés sur la même couche), alors les règles d'empilement expliquées dans <a href="/fr/docs/Web/CSS/Comprendre_z-index/Empilement_sans_z-index">empilement sans <code>z-index</code></a> s'appliquent.</li>
+</ul>
+</div>
+
+<p>Dans l'exemple qui suit, l'empilement des couches a été réordonné en utilisant <code>z-index</code>. Le <code>z-index</code> du bloc DIV#5 n'a pas d'effet, l'élément n'étant pas positionné.</p>
+
+<p>{{EmbedLiveSample("Code_source_de_l’exemple", '468', '365')}}</p>
+
+<h2 id="Code_source_de_l’exemple"><strong>Code source de l’exemple</strong></h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="abs1"&gt;
+  &lt;b&gt;DIV #1&lt;/b&gt;
+  &lt;br /&gt;position: absolute;
+  &lt;br /&gt;z-index: 5;
+&lt;/div&gt;
+
+&lt;div id="rel1"&gt;
+  &lt;b&gt;DIV #2&lt;/b&gt;
+  &lt;br /&gt;position: relative;
+  &lt;br /&gt;z-index: 3;
+&lt;/div&gt;
+
+&lt;div id="rel2"&gt;
+  &lt;b&gt;DIV #3&lt;/b&gt;
+  &lt;br /&gt;position: relative;
+  &lt;br /&gt;z-index: 2;
+&lt;/div&gt;
+
+&lt;div id="abs2"&gt;
+  &lt;b&gt;DIV #4&lt;/b&gt;
+  &lt;br /&gt;position: absolute;
+  &lt;br /&gt;z-index: 1;
+&lt;/div&gt;
+
+&lt;div id="sta1"&gt;
+  &lt;b&gt;DIV #5&lt;/b&gt;
+  &lt;br /&gt;no positioning
+  &lt;br /&gt;z-index: 8;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  padding: 10px;
+  opacity: 0.7;
+  text-align: center;
+}
+
+b {
+  font-family: sans-serif;
+}
+
+#abs1 {
+  z-index: 5;
+  position: absolute;
+  width: 150px;
+  height: 350px;
+  top: 10px;
+  left: 10px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+}
+
+#rel1 {
+  z-index: 3;
+  height: 100px;
+  position: relative;
+  top: 30px;
+  border: 1px dashed #696;
+  background-color: #cfc;
+  margin: 0px 50px 0px 50px;
+}
+
+#rel2 {
+  z-index: 2;
+  height: 100px;
+  position: relative;
+  top: 15px;
+  left: 20px;
+  border: 1px dashed #696;
+  background-color: #cfc;
+  margin: 0px 50px 0px 50px;
+}
+
+#abs2 {
+  z-index: 1;
+  position: absolute;
+  width: 150px;
+  height: 350px;
+  top: 10px;
+  right: 10px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+}
+
+#sta1 {
+  z-index: 8;
+  height: 70px;
+  border: 1px dashed #996;
+  background-color: #ffc;
+  margin: 0px 50px 0px 50px;
+}
+</pre>
+
+<p>{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Empilement_et_float","Web/CSS/Comprendre_z-index/Empilement_de_couches", "Web/CSS/Comprendre_z-index")}}</p>
diff --git a/files/fr/web/css/comprendre_z-index/empilement_de_couches/index.html b/files/fr/web/css/comprendre_z-index/empilement_de_couches/index.html
new file mode 100644
index 0000000000..20fa6ab2ce
--- /dev/null
+++ b/files/fr/web/css/comprendre_z-index/empilement_de_couches/index.html
@@ -0,0 +1,213 @@
+---
+title: L'empilement de couches
+slug: Web/CSS/Comprendre_z-index/Empilement_de_couches
+tags:
+  - Avancé
+  - CSS
+  - Guide
+  - z-index
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
+---
+<div>{{CSSRef}}{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Ajout_de_z-index","Web/CSS/Comprendre_z-index/Exemple_1", "Web/CSS/Comprendre_z-index")}}</div>
+
+<h2 id="Le_contexte_dempilement">Le contexte d'empilement</h2>
+
+<p>Dans l'exemple précédent, <a href="/fr/docs/Web/CSS/Comprendre_z-index/Ajout_de_z-index">Ajout de z-index</a>, les blocs <em>DIV</em> sont rendus les uns au dessus des autres (de l'arrière vers l'avant), en commençant par celui dont la valeur de {{cssxref("z-index")}} est la plus faible et en finissant par celui dont la valeur de <code>z-index</code> est la plus forte. Dans cet exemple, il n'y a qu'un seul <em>contexte d'empilement</em>, qui est l'élément <code>HTML</code> racine de la page.</p>
+
+<p>Dans certaines conditions, un contexte d'empilement enfant peut être créé à l'intérieur d'un bloc <em>DIV</em> (ou un autre élément) n'importe où dans le document. En particulier, un élément positionné (en absolu ou en relatif) possédant une valeur de <code>z-index</code> différente de <em>auto</em> crée son propre contexte d'empilement : tous ses éléments enfants sont entièrement empilés dans ce contexte, suivant les mêmes règles que celles expliquées précédemment. Les valeurs de <code>z-index</code> de ses enfants n'ont de signification que dans ce contexte. Le bloc <em>DIV</em> entier et son contenu sont empilés comme un seul élément dans le contexte d'empilement de leur parent.</p>
+
+<p>Un contexte d'empilement est formé dans le document par n'importe quel élément qui répond à l'un de ces critères :</p>
+
+<ul>
+ <li>L'élément racine du document (HTML)</li>
+ <li>Un élément pour lequel {{cssxref("position")}} vaut <code>absolute</code> ou <code>relative</code> et pour lequel {{cssxref("z-index")}} est différente de <code>auto</code></li>
+ <li>Un élément pour lequel {{cssxref("position")}} vaut <code>fixed</code> ou <code>sticky</code></li>
+ <li>Un élément qui est le fils d'un conteneur flexible ({{cssxref("flexbox")}}) pour lequel {{cssxref("z-index")}} est différente de <code>auto</code></li>
+ <li>Un élément qui est le fils d'un conteneur en grille ({{cssxref("grid")}}) pour lequel {{cssxref("z-index")}} est différente de <code>auto</code></li>
+ <li>Un élément pour lequel {{cssxref("opacity")}} est inférieure à 1 (cf. <a href="https://www.w3.org/TR/css3-color/#transparency">la spécification</a>)</li>
+ <li>Un élément pour lequel {{cssxref("mix-blend-mode")}} est différente de <code>normal</code></li>
+ <li>Un élément pour lequel n'importe laquelle de ces propriétés est différente de <code>none</code> :
+  <ul>
+   <li>{{cssxref("transform")}}</li>
+   <li>{{cssxref("filter")}}</li>
+   <li>{{cssxref("perspective")}}</li>
+   <li>{{cssxref("clip-path")}}</li>
+   <li>{{cssxref("mask")}} / {{cssxref("mask-image")}} / {{cssxref("mask-border")}}</li>
+  </ul>
+ </li>
+ <li>Un élément pour lequel {{cssxref("isolation")}} vaut <code>isolate</code></li>
+ <li>Un élément pour lequel {{cssxref("-webkit-overflow-scrolling")}} vaut <code>touch</code>.</li>
+ <li>Un élément pour lequel la valeur de la propriété {{cssxref("will-change")}} concerne une propriété qui créerait un contexte d'empilement avec une valeur non-initiale.</li>
+ <li>Un élément pour lequel la valeur de la propriété {{cssxref("contain")}} est <code>layout</code>, <code>paint</code> ou une valeur composite contenant un de ces mots-clés (par exemple <code>contain: strict</code> ou <code>contain: content</code>).</li>
+</ul>
+
+<p>Sans contexte d'empilement, les éléments fils sont empilés selon les règles vues avant. Les valeurs des <code>z-index</code> pour les contextes d'empilement des éléments fils ont uniquement un sens pour l'élément parent. Les contextes d'empilement sont traités de façon atomique, comme une seule unité, dans le contexte de l'élément parent.</p>
+
+<p>En bref :</p>
+
+<ul>
+ <li>Les contextes d'empilement peuvent être enfants d'autres contextes d'empilement, et ensemble forment une hiérarchie de contextes d'empilement.</li>
+ <li>Chaque contexte d'empilement est indépendant de ses voisins : seuls les éléments enfants sont pris en compte lorsque l'empilement est traité.</li>
+ <li>Chaque contexte d'empilement est autonome : Une fois que le contenu de l'élément est empilé, l'élément entier est pris en compte dans l'ordre d'empilement du contexte parent.</li>
+</ul>
+
+<div class="note"><strong>Notes :</strong> La hiérarchie des contextes d'empilement est un sous-ensemble de la hiérarchie des éléments HTML, car seuls les éléments positionnés dans l'espace (avec la propriété <code>z-index</code> créent des contextes d'empilement. On peut dire que les éléments qui ne créent pas leur propre contexte d'empilement sont <em>assimilés</em> par le contexte d'empilement parent.</div>
+
+<h4 id="Illustration">Illustration</h4>
+
+<p><img alt="Figure 1. Exemple de règles d'empilement modifiées avec la propriété z-index" class="internal" src="/@api/deki/files/1451/=Understanding_zindex_04.png"></p>
+
+<p>Dans cet exemple, tous les éléments positionnés créent leur propre contexte d'empilement, du fait de leur positionnement et de leur valeur <code>z-index</code>. La hiérarchie des contextes d'empilement est organisée comme suit :</p>
+
+<ul>
+ <li>Racine
+  <ul>
+   <li>DIV #1</li>
+   <li>DIV #2</li>
+   <li>DIV #3
+    <ul>
+     <li>DIV #4</li>
+     <li>DIV #5</li>
+     <li>DIV #6</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+</ul>
+
+<p>Il est important de noter que les blocs <em>DIV #4</em>, <em>DIV #5</em> et <em>DIV #6</em> sont les enfants du bloc <em>DIV #3</em>, donc leur empilement est complètement résolu à l'intérieur de ce dernier. Une fois que l'empilement et le rendu à l'intérieur du bloc 3 sont définis, la totalité de l'élément <em>DIV #3</em> est prise en compte pour l'empilement dans l'élément racine par rapport à ses <em>DIV</em> voisins.</p>
+
+<div class="note">
+<p><strong>Notes :</strong></p>
+
+<ul>
+ <li><em>DIV #4</em> est rendu dans le bloc <em>DIV #1</em> car le <code>z-index</code> (5) de celui-ci est valide à l'intérieur du contexte d'empilement de l'élément racine, alors que le <code>z-index</code> (6) du bloc <em>DIV #4</em> est valide à l'intérieur du contexte d'empilement du bloc <em>DIV #3</em>. Ainsi, DIV #4 se trouve sous <em>DIV #1</em>, parce que <em>DIV #4</em> appartient à <em>DIV #3</em>, qui possède une valeur de <code>z-index</code> plus petite.</li>
+ <li>Pour la même raison <em>DIV #2</em> (dont le <code>z-index</code> est 2) est rendu sous <em>DIV#5</em> (de <code>z-index</code> égal à 1) parce que <em>DIV #5</em> appartient à <em>DIV #3</em>, qui possède une valeur de <code>z-index</code> plus grande.</li>
+ <li>Le <code>z-index</code> du bloc <em>DIV #3</em> est 4, mais cette valeur est indépendante du <code>z-index</code> du bloc <em>DIV #4</em>, <em>DIV #5</em> et <em>DIV #6</em>, parce qu'il appartient à un contexte d'empilement différent.</li>
+</ul>
+</div>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">* {
+  margin: 0;
+}
+
+html {
+  padding: 20px;
+  font: 12px/20px Arial, sans-serif;
+}
+
+div {
+  opacity: 0.7;
+  position: relative;
+}
+
+h1 {
+  font: inherit;
+  font-weight: bold;
+}
+
+#div1, #div2 {
+  border: 1px dashed #696;
+  padding: 10px;
+  background-color: #cfc;
+}
+
+#div1 {
+  z-index: 5;
+  margin-bottom: 190px;
+}
+
+#div2 {
+  z-index: 2;
+}
+
+#div3 {
+  z-index: 4;
+  opacity: 1;
+  position: absolute;
+  top: 40px;
+  left: 180px;
+  width: 330px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+  padding: 40px 20px 20px;
+}
+
+#div4, #div5 {
+  border: 1px dashed #996;
+  background-color: #ffc;
+}
+
+#div4 {
+  z-index: 6;
+  margin-bottom: 15px;
+  padding: 25px 10px 5px;
+}
+
+#div5 {
+  z-index: 1;
+  margin-top: 15px;
+  padding: 5px 10px;
+}
+
+#div6 {
+  z-index: 3;
+  position: absolute;
+  top: 20px;
+  left: 180px;
+  width: 150px;
+  height: 125px;
+  border: 1px dashed #009;
+  padding-top: 125px;
+  background-color: #ddf;
+  text-align: ce        }
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="div1"&gt;
+  &lt;h1&gt;Division Element #1&lt;/h1&gt;
+  &lt;code&gt;position: relative;&lt;br/&gt;
+  z-index: 5;&lt;/code&gt;
+&lt;/div&gt;
+
+&lt;div id="div2"&gt;
+  &lt;h1&gt;Division Element #2&lt;/h1&gt;
+  &lt;code&gt;position: relative;&lt;br/&gt;
+  z-index: 2;&lt;/code&gt;
+&lt;/div&gt;
+
+&lt;div id="div3"&gt;
+
+  &lt;div id="div4"&gt;
+    &lt;h1&gt;Division Element #4&lt;/h1&gt;
+    &lt;code&gt;position: relative;&lt;br/&gt;
+    z-index: 6;&lt;/code&gt;
+  &lt;/div&gt;
+
+  &lt;h1&gt;Division Element #3&lt;/h1&gt;
+  &lt;code&gt;position: absolute;&lt;br/&gt;
+  z-index: 4;&lt;/code&gt;
+
+  &lt;div id="div5"&gt;
+    &lt;h1&gt;Division Element #5&lt;/h1&gt;
+    &lt;code&gt;position: relative;&lt;br/&gt;
+    z-index: 1;&lt;/code&gt;
+  &lt;/div&gt;
+
+  &lt;div id="div6"&gt;
+    &lt;h1&gt;Division Element #6&lt;/h1&gt;
+    &lt;code&gt;position: absolute;&lt;br/&gt;
+    z-index: 3;&lt;/code&gt;
+  &lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemple","556","396")}}</p>
+
+<div>{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Ajout_de_z-index","Web/CSS/Comprendre_z-index/Exemple_1", "Web/CSS/Comprendre_z-index")}}</div>
diff --git a/files/fr/web/css/comprendre_z-index/empilement_et_float/index.html b/files/fr/web/css/comprendre_z-index/empilement_et_float/index.html
new file mode 100644
index 0000000000..de0cc3761f
--- /dev/null
+++ b/files/fr/web/css/comprendre_z-index/empilement_et_float/index.html
@@ -0,0 +1,135 @@
+---
+title: Empilement et éléments flottants
+slug: Web/CSS/Comprendre_z-index/Empilement_et_float
+tags:
+  - Avancé
+  - CSS
+  - Contextes d’empilement
+  - Guide
+  - Ordre d’empilement
+  - float
+  - z-index
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float
+---
+<div>{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Empilement_sans_z-index","Web/CSS/Comprendre_z-index/Ajout_de_z-index", "Web/CSS/Comprendre_z-index")}}</div>
+
+<h2 id="L'empilement_et_les_éléments_flottants">L'empilement et les éléments flottants</h2>
+
+<p>Pour les blocs flottants, l'ordre d'empilement est légèrement différent. Les blocs flottants sont disposés entre les blocs non positionnés et les blocs positionnés. Voici l'ordre d'empilement :</p>
+
+<ol>
+ <li>L'arrière-plan et les bordures de l'élément racine du document</li>
+ <li>Les blocs qui descendent les uns des autres et qui sont situés dans le flux normal, dans l'ordre dans lequel ils apparaissent (pour HTML) ;</li>
+ <li>Les blocs flottants ;</li>
+ <li>Les éléments enfants positionnés, dans leur ordre d'apparence (pour HTML).</li>
+</ol>
+
+<p>En fait, comme on le voit avec l'exemple ci-après, l'arrière-plan et la bordure du bloc non positionné (DIV n°4) ne sont pas impactés par les blocs flottants alors que le contenu est affecté. Il s'agit du comportement standard de la propriété CSS {{cssxref("float")}}.</p>
+
+<p>Ce comportement peut être expliqué en améliorant la liste précédente :</p>
+
+<ol>
+ <li>L'arrière-plan et les bordures de l'élément racine ;</li>
+ <li>Les blocs enfants dans le flux normal, dans leur ordre d'apparence (en HTML) ;</li>
+ <li>Les blocs flottants ;</li>
+ <li>Les éléments « en-ligne » enfants dans le flux normal ;</li>
+ <li>Les éléments enfants positionnés, dans leur ordre d'apparence (en HTML).</li>
+</ol>
+
+<div class="note"><strong>Note :</strong> Dans l'exemple qui suit, tous les blocs sont transparents, excepté celui qui n'est pas positionné, montrant ainsi l'ordre d'empilement. Si l'on réduit l'opacité du bloc non positionné (DIV #4), il se produit quelque chose d'étrange : l'arrière-plan et la bordure de cet élément se placent par dessus les blocs flottants et les blocs positionnés. Il s'agit d'une interprétation particulière des spécifications CSS : l'application de l'opacité crée un nouveau contexte d'empilement (voir l'article : <a href="https://philipwalton.com/articles/what-no-one-told-you-about-z-index/">What No One Told You About Z-Index</a> de Philip Walton ou son excellente traduction de Vincent De Oliveira, <a href="https://iamvdo.me/blog/comprendre-z-index-et-les-contextes-dempilement">Ce que personne ne vous a dit sur z-index</a> et, bien-sûr, la <a href="https://www.w3.org/TR/CSS2/zindex.html">spécification</a>).</div>
+
+<p>{{EmbedLiveSample("Code_source_de_l’exemple", 600, 250)}}</p>
+
+<h2 id="Code_source_de_l'exemple">Code source de l'exemple</h2>
+
+<h3 id="HTML"><strong>HTML</strong></h3>
+
+<pre class="brush: html">&lt;div id="abs1"&gt;
+  &lt;b&gt;DIV #1&lt;/b&gt;&lt;br /&gt;position: absolute;&lt;/div&gt;
+
+&lt;div id="flo1"&gt;
+  &lt;b&gt;DIV #2&lt;/b&gt;&lt;br /&gt;float: left;&lt;/div&gt;
+
+&lt;div id="flo2"&gt;
+  &lt;b&gt;DIV #3&lt;/b&gt;&lt;br /&gt;float: right;&lt;/div&gt;
+
+&lt;br /&gt;
+
+&lt;div id="sta1"&gt;
+  &lt;b&gt;DIV #4&lt;/b&gt;&lt;br /&gt;no positioning&lt;/div&gt;
+
+&lt;div id="abs2"&gt;
+  &lt;b&gt;DIV #5&lt;/b&gt;&lt;br /&gt;position: absolute;&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  padding: 10px;
+  text-align: center;
+}
+
+b {
+  font-family: sans-serif;
+}
+
+#abs1 {
+  position: absolute;
+  width: 150px;
+  height: 200px;
+  top: 10px;
+  right: 140px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+}
+
+#sta1 {
+  height: 100px;
+  border: 1px dashed #996;
+  background-color: #ffc;
+  margin: 0px 10px 0px 10px;
+  text-align: left;
+}
+
+#flo1 {
+  margin: 0px 10px 0px 20px;
+  float: left;
+  width: 150px;
+  height: 200px;
+  border: 1px dashed #090;
+  background-color: #cfc;
+}
+
+#flo2 {
+  margin: 0px 20px 0px 10px;
+  float: right;
+  width: 150px;
+  height: 200px;
+  border: 1px dashed #090;
+  background-color: #cfc;
+}
+
+#abs2 {
+  position: absolute;
+  width: 150px;
+  height: 100px;
+  top: 130px;
+  left: 100px;
+  border: 1px dashed #990;
+  background-color: #fdd;
+}</pre>
+
+<h2 id="Voir_aussi"><strong>Voir aussi</strong></h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Empilement_sans_z-index">L'empilement sans z-index</a> : Règles d'empilement par défaut</li>
+ <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Ajout_de_z-index">Ajouter z-index</a> : Utiliser z-index pour modifier l'empilement par défaut</li>
+ <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Empilement_de_couches">L'empilement de couches</a> : Remarques sur l'empilement de couches</li>
+ <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Exemple_1">Exemple d'empilement n°1</a> : Hiérarchie HTML à 2 niveaux, z-index sur le dernier niveau</li>
+ <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Exemple_2">Exemple d'empilement n°2</a> : Hiérarchie HTML à 2 niveaux, z-index sur tous les éléments</li>
+ <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Exemple_3">Exemple d'empilement n°3</a> : Hiérarchie HTML à 3 niveaux, z-index sur le deuxième niveau</li>
+</ul>
+
+
+
+<div>{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Empilement_sans_z-index","Web/CSS/Comprendre_z-index/Ajout_de_z-index", "Web/CSS/Comprendre_z-index")}}</div>
diff --git a/files/fr/web/css/comprendre_z-index/empilement_sans_z-index/index.html b/files/fr/web/css/comprendre_z-index/empilement_sans_z-index/index.html
new file mode 100644
index 0000000000..db892c51dc
--- /dev/null
+++ b/files/fr/web/css/comprendre_z-index/empilement_sans_z-index/index.html
@@ -0,0 +1,122 @@
+---
+title: Empilement sans z-index
+slug: Web/CSS/Comprendre_z-index/Empilement_sans_z-index
+tags:
+  - Avancé
+  - CSS
+  - Guide
+  - z-index
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index
+---
+<div>{{PreviousMenuNext("","Web/CSS/Comprendre_z-index/Empilement_et_float", "Web/CSS/Comprendre_z-index")}}</div>
+
+<h2 id="Empilement_sans_z-index">Empilement sans <code>z-index</code></h2>
+
+<p>Lorsqu’aucun élément n'a de {{cssxref("z-index")}} définis, tous les éléments sont empilés dans cet ordre (de bas en haut) :</p>
+
+<ol>
+ <li>Arrière-plans et bordures de l'élément racine</li>
+ <li>Blocs enfants dans le flux normal, dans leur ordre d'apparition (en HTML)</li>
+ <li>Éléments enfants positionnés, dans leur ordre d'apparition (en HTML)</li>
+</ol>
+
+<p>On gardera à l'esprit que, lorsque la propriété {{cssxref("order")}} modifie l'ordre visuel des conteneurs flexibles ({{cssxref("flex")}}), cela modifie également l'ordre du contexte d'empilement.</p>
+
+<p>Dans l'exemple suivant, les blocs en position absolue et relative sont correctement positionnés et dimensionnés pour illustrer les règles d'empilement. L'opacité a été réduite pour rendre les éléments transparents et faciliter ainsi la visualisation des superpositions.</p>
+
+<div class="note">
+<p><strong>Notes :</strong></p>
+
+<ul>
+ <li>Dans un groupe d'éléments sans aucune propriété <code>z-index</code>, tel que les blocs positionnés (DIV #1 à #4) dans l'exemple, l'ordre d'empilement des éléments est celui de leur ordre dans la hiérarchie HTML, quelle que soit leur position.</li>
+ <li>Les blocs standards (DIV #5) dans le flux normal, sans aucune propriété de positionnement, sont toujours rendus avant les éléments positionnés, et apparaissent en dessous de ces derniers, même s'ils interviennent plus tard dans la hiérarchie HTML.</li>
+ <li><strong>Attention</strong> : en copiant-collant le code ci-dessous, l'exemple ne fonctionnera pas pour le DIV#5 à cause de la propriété d'opacité qui lui a été affecté. Il apparaîtra donc au dessus des autres blocs.</li>
+</ul>
+</div>
+
+<p><img alt="Figure 1. Exemple de règles d'empilement sans propriété z-index" class="internal" src="/@api/deki/files/1448/=Understanding_zindex_01.png"></p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="abs1" class="absolute"&gt;
+  &lt;b&gt;DIV #1&lt;/b&gt;&lt;br /&gt;position: absolute;&lt;/div&gt;
+&lt;div id="rel1" class="relative"&gt;
+  &lt;b&gt;DIV #2&lt;/b&gt;&lt;br /&gt;position: relative;&lt;/div&gt;
+&lt;div id="rel2" class="relative"&gt;
+  &lt;b&gt;DIV #3&lt;/b&gt;&lt;br /&gt;position: relative;&lt;/div&gt;
+&lt;div id="abs2" class="absolute"&gt;
+  &lt;b&gt;DIV #4&lt;/b&gt;&lt;br /&gt;position: absolute;&lt;/div&gt;
+&lt;div id="sta1" class="static"&gt;
+  &lt;b&gt;DIV #5&lt;/b&gt;&lt;br /&gt;position: static;&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">b {
+  font-family: sans-serif;
+}
+
+div {
+  padding: 10px;
+  border: 1px dashed;
+  text-align: center;
+}
+
+.static {
+  position: static;
+  height: 80px;
+  background-color: #ffc;
+  border-color: #996;
+}
+
+.absolute {
+  position: absolute;
+  width: 150px;
+  height: 350px;
+  background-color: #fdd;
+  border-color: #900;
+  opacity: 0.7;
+}
+
+.relative {
+  position: relative;
+  height: 80px;
+  background-color: #cfc;
+  border-color: #696;
+  opacity: 0.7;
+}
+
+#abs1 {
+  top: 10px;
+  left: 10px;
+}
+
+#rel1 {
+  top: 30px;
+  margin: 0px 50px 0px 50px;
+}
+
+#rel2 {
+  top: 15px;
+  left: 20px;
+  margin: 0px 50px 0px 50px;
+}
+
+#abs2 {
+  top: 10px;
+  right: 10px;
+}
+
+#sta1 {
+  background-color: #ffc;
+  margin: 0px 50px 0px 50px;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemple","600","400")}}</p>
+
+<div>{{PreviousMenuNext("","Web/CSS/Comprendre_z-index/Empilement_et_float", "Web/CSS/Comprendre_z-index")}}</div>
diff --git a/files/fr/web/css/comprendre_z-index/exemple_1/index.html b/files/fr/web/css/comprendre_z-index/exemple_1/index.html
new file mode 100644
index 0000000000..f155461dd4
--- /dev/null
+++ b/files/fr/web/css/comprendre_z-index/exemple_1/index.html
@@ -0,0 +1,117 @@
+---
+title: Exemple d'empilement 1
+slug: Web/CSS/Comprendre_z-index/Exemple_1
+tags:
+  - Avancé
+  - CSS
+  - Guide
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1
+---
+<div>{{PreviousMenuNext("Web/CSS/Comprendre_z-index/L'empilement_de_couches","Web/CSS/Comprendre_z-index/Exemple_2", "Web/CSS/Comprendre_z-index")}}</div>
+
+<h2 id="Premier_exemple">Premier exemple</h2>
+
+<p>Commençons par un exemple simple, dans le contexte d'empilement racine nous avons deux blocs <em>DIV</em> (<em>DIV #1</em> et <em>DIV #3</em>), tout deux positionnés relativement, mais sans propriété {{ cssxref("z-index") }}. Dans le bloc <em>DIV #1</em> il y a un bloc <em>DIV #2</em> en position absolue, alors que dans le bloc <em>DIV #3</em> il y a un bloc <em>DIV #4</em> en position absolue, tout deux également sans propriété <code>z-index</code>.</p>
+
+<p>Le seul et unique contexte d'empilement est le contexte racine. Sans <code>z-index</code>, les éléments sont empilés dans leur ordre d'apparition dans le code HTML.</p>
+
+<p><img alt="Figure 5a : Exemple de contexte d'empilement 1" class="internal" src="/@api/deki/files/1452/=Understanding_zindex_05a.png"></p>
+
+<p>Si on assigne au bloc <em>DIV #2</em> une valeur de <code>z-index</code> positive (non nulle et non automatique), il est rendu par dessus tous les autres blocs.</p>
+
+<p><img alt="Figure 5b : Exemple de contexte d'empilement 1" class="internal" src="/@api/deki/files/1453/=Understanding_zindex_05b.png"></p>
+
+<p>Si maintenant on assigne également au bloc <em>DIV #4</em> une valeur de <code>z-index</code> positive, plus grande que celle du <em>DIV #2</em>, le bloc <em>DIV #4</em> est rendu par dessus tous les autres, y compris par dessus le bloc <em>DIV #2</em>.</p>
+
+<p><img alt="Figure 5c : Exemple de contexte d'empilement 1" class="internal" src="/@api/deki/files/1454/=Understanding_zindex_05c.png"></p>
+
+<p>Dans le dernier exemple, vous pouvez voir que les blocs <em>DIV #2</em> et <em>DIV #4</em> ne sont pas frères, parce qu'ils appartiennent à des parents différents dans la hiérarchie des éléments HTML. Néanmoins, l'empilement du bloc <em>DIV #4</em>, tout en respectant le bloc <em>DIV #2</em>, peut être contrôlé avec la propriété <code>z-index</code>. Il se fait que les éléments <em>DIV #1</em> et <em>DIV #3</em> n'ayant pas de <code>z-index</code> défini, ils ne créent pas de contexte d'empilement. Cela signifie que l'ensemble de leur contenu, y compris les blocs <em>DIV #2</em> et <em>DIV #3</em>, appartient au contexte d'empilement de la racine.</p>
+
+<p>Dans le contexte d'empilement, les blocs <em>DIV #1</em> et <em>DIV #3</em> sont simplement assimilés dans l'élément racine, et la hiérarchie résultante est la suivante :</p>
+
+<ul>
+ <li>Contexte d'empilement racine
+  <ul>
+   <li>DIV #2 (z-index 1)</li>
+   <li>DIV #4 (z-index 2)</li>
+  </ul>
+ </li>
+</ul>
+
+<div class="note"><strong>Note :</strong> Les blocs <em>DIV #1</em> et <em>DIV #3</em> ne sont pas translucides. Il est important de se souvenir que d'assigner une valeur d'opacité inférieure à 1 à un élément positionné, crée implicitement un contexte d'empilement, de la même façon que l'ajout de propriétés <code>z-index</code>. Et cet exemple montre ce qui arrive lorsqu'un élément parent ne crée pas de contexte d'empilement.</div>
+
+<h2 id="Exemple"><strong>Exemple</strong></h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.bold {
+  font-weight: bold;
+  font: 12px Arial;
+}
+#div1,
+#div3 {
+  height: 80px;
+  position: relative;
+  border: 1px dashed #669966;
+  background-color: #ccffcc;
+  padding-left: 5px;
+}
+
+#div2 {
+  opacity: 0.8;
+  z-index: 1;
+  position: absolute;
+  width: 150px;
+  height: 200px;
+  top: 20px;
+  left: 170px;
+  border: 1px dashed #990000;
+  background-color: #ffdddd;
+  text-align: center;
+}
+
+#div4 {
+  opacity: 0.8;
+  z-index: 2;
+  position: absolute;
+  width: 200px;
+  height: 70px;
+  top: 65px;
+  left: 50px;
+  border: 1px dashed #000099;
+  background-color: #ddddff;
+  text-align: left;
+  padding-left: 10px;
+}</pre>
+
+<h3 id="HTML"><strong>HTML</strong></h3>
+
+<pre class="brush: html">&lt;div id="div1"&gt;
+  &lt;br/&gt;
+  &lt;span class="bold"&gt;DIV #1&lt;/span&gt;
+  &lt;br/&gt;position: relative;
+  &lt;div id="div2"&gt;
+    &lt;br/&gt;&lt;span class="bold"&gt;DIV #2&lt;/span&gt;
+    &lt;br/&gt;position: absolute;
+     &lt;br/&gt;z-index: 1;
+  &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;br/&gt;
+
+&lt;div id="div3"&gt;
+  &lt;b/&gt;&lt;span class="bold"&gt;DIV #3&lt;/span&gt;
+  &lt;br/&gt;position: relative;
+  &lt;div id="div4"&gt;
+    &lt;br/&gt;&lt;span class="bold"&gt;DIV #4&lt;/span&gt;
+    &lt;br/&gt;position: absolute;
+    &lt;br/&gt;z-index: 2;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemple')}}</p>
+
+<div>{{PreviousMenuNext("Web/CSS/Comprendre_z-index/L'empilement_de_couches","Web/CSS/Comprendre_z-index/Exemple_2", "Web/CSS/Comprendre_z-index")}}</div>
diff --git a/files/fr/web/css/comprendre_z-index/exemple_2/index.html b/files/fr/web/css/comprendre_z-index/exemple_2/index.html
new file mode 100644
index 0000000000..75bbba62d9
--- /dev/null
+++ b/files/fr/web/css/comprendre_z-index/exemple_2/index.html
@@ -0,0 +1,128 @@
+---
+title: Exemple d'empilement 2
+slug: Web/CSS/Comprendre_z-index/Exemple_2
+tags:
+  - Avancé
+  - CSS
+  - Guide
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2
+---
+<div>{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Exemple_1","Web/CSS/Comprendre_z-index/Exemple_3", "Web/CSS/Comprendre_z-index")}}</div>
+
+<h2 id="Deuxième_exemple">Deuxième exemple</h2>
+
+<p>Ce deuxième exemple est très simple, mais il est essentiel à la compréhension du concept de <em>contexte d'empilement</em>. Nous avons les 4 mêmes blocs que l'exemple précédent, mais maintenant, nous appliquons des propriétés {{cssxref("z-index")}} aux deux niveaux de la hiérarchie.</p>
+
+<p><img alt="Figure 6 : Exemple de contexte d'empilement 2" class="internal" src="/@api/deki/files/1455/=Understanding_zindex_06.png"></p>
+
+<p>Vous pouvez voir que le bloc <em>DIV #2</em> (z-index : 2) est au dessus du bloc <em>DIV #3</em> (z-index : 1), parce qu'ils appartiennent tout les deux au même contexte d'empilement (celui de la racine), donc les valeurs de <code>z-index</code> régissent l'empilement des éléments.</p>
+
+<p>Ce qui peut apparaitre comme étrange, c'est que le bloc <em>DIV #2</em> (z-index : 2) est au dessus du bloc <em>DIV #4</em> (z-index : 10), malgré leurs valeurs de <code>z-index</code>. La raison est qu'ils n'appartiennent pas au même contexte d'empilement. Le bloc <em>DIV #4</em> appartient au contexte d'empilement créé par le bloc <em>DIV #3</em>, et, comme expliqué précédemment, le bloc <em>DIV #3</em> (et tout son contenu) est au dessous du bloc <em>DIV #2</em>.</p>
+
+<p>Pour mieux comprendre la situation, voici la hiérarchie du contexte d'empilement :</p>
+
+<ul>
+ <li>Contexte d'empilement racine
+  <ul>
+   <li>DIV #2 (z-index 2)</li>
+   <li>DIV #3 (z-index 1)
+    <ul>
+     <li>DIV #4 (z-index 10)</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+</ul>
+
+<div class="note"><strong>Note :</strong> Il est important de se souvenir qu'en général, la hiérarchie HTML est différente de la hiérarchie du contexte d'empilement. Dans la hiérarchie du contexte d'empilement, les éléments qui ne créent pas un contexte d'empilement sont regroupés avec leur parents.</div>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  font: 12px Arial;
+}
+
+span.bold {
+  font-weight: bold;
+}
+
+#div2 {
+  z-index: 2;
+}
+
+#div3 {
+  z-index: 1;
+}
+
+#div4 {
+  z-index: 10;
+}
+
+#div1,#div3 {
+  height: 80px;
+  position: relative;
+  border: 1px dashed #669966;
+  background-color: #ccffcc;
+  padding-left: 5px;
+}
+
+#div2 {
+  opacity: 0.8;
+  position: absolute;
+  width: 150px;
+  height: 200px;
+  top: 20px;
+  left: 170px;
+  border: 1px dashed #990000;
+  background-color: #ffdddd;
+  text-align: center;
+}
+
+#div4 {
+  opacity: 0.8;
+  position: absolute;
+  width: 200px;
+  height: 70px;
+  top: 65px;
+  left: 50px;
+  border: 1px dashed #000099;
+  background-color: #ddddff;
+  text-align: left;
+  padding-left: 10px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;br/&gt;
+
+&lt;div id="div1"&gt;
+  &lt;br/&gt;&lt;span class="bold"&gt;DIV #1&lt;/span&gt;
+  &lt;br/&gt;position: relative;
+  &lt;div id="div2"&gt;
+    &lt;br/&gt;&lt;span class="bold"&gt;DIV #2&lt;/span&gt;
+    &lt;br/&gt;position: absolute;
+    &lt;br/&gt;z-index: 2;
+  &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;br/&gt;
+
+&lt;div id="div3"&gt;
+  &lt;br/&gt;&lt;span class="bold"&gt;DIV #3&lt;/span&gt;
+  &lt;br/&gt;position: relative;
+  &lt;br/&gt;z-index: 1;
+  &lt;div id="div4"&gt;
+    &lt;br/&gt;&lt;span class="bold"&gt;DIV #4&lt;/span&gt;
+    &lt;br/&gt;position: absolute;
+    &lt;br/&gt;z-index: 10;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemple")}}</p>
+
+<div>{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Exemple_1","Web/CSS/Comprendre_z-index/Exemple_3", "Web/CSS/Comprendre_z-index")}}</div>
diff --git a/files/fr/web/css/comprendre_z-index/exemple_3/index.html b/files/fr/web/css/comprendre_z-index/exemple_3/index.html
new file mode 100644
index 0000000000..5530887ec2
--- /dev/null
+++ b/files/fr/web/css/comprendre_z-index/exemple_3/index.html
@@ -0,0 +1,160 @@
+---
+title: Exemple d'empilement 3
+slug: Web/CSS/Comprendre_z-index/Exemple_3
+tags:
+  - Avancé
+  - CSS
+  - Guide
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3
+---
+<div>{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Exemple_2","", "Web/CSS/Comprendre_z-index")}}</div>
+
+<h2 id="Troisième_exemple">Troisième exemple</h2>
+
+<p>Ce dernier exemple illustre les problèmes qui peuvent survenir lorsqu'on utilise des éléments positionnés dans une hiérarchie HTML à plusieurs niveaux et lorsque des {{cssxref("z-index")}} sont assignés à l'aide de sélecteurs de classe.</p>
+
+<p>Prenons un exemple de menu hiérarchique à 3 niveaux, fait de plusieurs <em>DIV</em> positionnés. Les deuxième et troisième niveaux apparaissent lors du survol ou d'un clic sur leur parent. D'ordinaire, ce type de menu est généré par un script, côté client ou côté serveur, de façon à ce que les règles de styles soient assignées à l'aide de sélecteurs de classe plutôt qu'avec des sélecteurs d'<em>id</em>.</p>
+
+<p>Si les trois niveaux du menu se chevauchent partiellement, alors la gestion de l'empilement peut devenir problématique.</p>
+
+<p><img alt="Figure 7 : Exemple de contexte d'empilement 3" class="internal" src="/@api/deki/files/1456/=Understanding_zindex_07.png"></p>
+
+<p>Le menu de premier niveau est positionné relativement, ainsi aucun contexte d'empilement n'est créé.</p>
+
+<p>Le menu de deuxième niveau est positionné en absolu à l'intérieur de son élément parent. Afin de le faire apparaître au dessus de tous les menus de premier niveau, on utilise un <code>z-index</code>. Le problème est que pour chaque menu de deuxième niveau, un contexte d'empilement se crée et chaque menu de troisième niveau appartient au contexte d'empilement de son parent.</p>
+
+<p>Ainsi donc, un menu de troisième niveau s'empilera sous les menus de deuxième niveau suivants, car tous les menus de deuxième niveau partagent la même valeur de <code>z-index</code> et que les règles d'empilement par défaut s'appliquent.</p>
+
+<p>Pour mieux comprendre la situation, voici la hiérarchie du contexte d'empilement :</p>
+
+<ul>
+ <li>Contexte d'empilement racine
+  <ul>
+   <li>Niveau #1
+    <ul>
+     <li>Niveau #2 (z-index : 1)
+      <ul>
+       <li>Niveau #3</li>
+       <li>…</li>
+       <li>Niveau #3</li>
+      </ul>
+     </li>
+     <li>Niveau #2 (z-index : 1)</li>
+     <li>…</li>
+     <li>Niveau #2 (z-index : 1)</li>
+    </ul>
+   </li>
+   <li>Niveau #1</li>
+   <li>…</li>
+   <li>Niveau #1</li>
+  </ul>
+ </li>
+</ul>
+
+<p>On peut contourner ce problème en supprimant le chevauchement entre les différents niveaux du menu, ou en utilisant des valeurs de <code>z-index</code> individuelles (et différentes) assignées à l'aide de sélecteurs d'<em>id</em> plutôt que des sélecteurs de classe ou encore en aplatissant la hiérarchie HTML.</p>
+
+<div class="note"><strong>Note :</strong> Dans le code source, vous remarquerez que les menus de deuxième et troisième niveaux sont construits à l'aide de plusieurs boîtes <em>DIV</em> contenues dans un élément positionné en absolu. Ceci sert à les grouper et à les positionner en une seule fois.</div>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  font: 12px Arial;
+}
+
+span.bold {
+  font-weight: bold;
+}
+
+div.lev1 {
+  width: 250px;
+  height: 70px;
+  position: relative;
+  border: 2px outset #669966;
+  background-color: #ccffcc;
+  padding-left: 5px;
+}
+
+#container1 {
+  z-index: 1;
+  position: absolute;
+  top: 30px;
+  left: 75px;
+}
+
+div.lev2 {
+  opacity: 0.9;
+  width: 200px;
+  height: 60px;
+  position: relative;
+  border: 2px outset #990000;
+  background-color: #ffdddd;
+  padding-left: 5px;
+}
+
+#container2 {
+  z-index: 1;
+  position: absolute;
+  top: 20px;
+  left: 110px;
+}
+
+div.lev3 {
+  z-index: 10;
+  width: 100px;
+  position: relative;
+  border: 2px outset #000099;
+  background-color: #ddddff;
+  padding-left: 5px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;br/&gt;
+
+&lt;div class="lev1"&gt;
+&lt;span class="bold"&gt;LEVEL #1&lt;/span&gt;
+  &lt;div id="container1"&gt;
+    &lt;div class="lev2"&gt;
+      &lt;br/&gt;&lt;span class="bold"&gt;LEVEL #2&lt;/span&gt;
+      &lt;br/&gt;z-index: 1;
+      &lt;div id="container2"&gt;
+        &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+        &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+        &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+        &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+        &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+        &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+        &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+        &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+        &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+        &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+        &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class="lev2"&gt;
+      &lt;br/&gt;&lt;span class="bold"&gt;LEVEL #2&lt;/span&gt;
+      &lt;br/&gt;z-index: 1;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="lev1"&gt;
+  &lt;span class="bold"&gt;LEVEL #1&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;div class="lev1"&gt;
+  &lt;span class="bold"&gt;LEVEL #1&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;div class="lev1"&gt;
+  &lt;span class="bold"&gt;LEVEL #1&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemple")}}</p>
+
+<div>{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Exemple_2","", "Web/CSS/Comprendre_z-index")}}</div>
diff --git a/files/fr/web/css/comprendre_z-index/index.html b/files/fr/web/css/comprendre_z-index/index.html
new file mode 100644
index 0000000000..0c6c636886
--- /dev/null
+++ b/files/fr/web/css/comprendre_z-index/index.html
@@ -0,0 +1,36 @@
+---
+title: Comprendre z-index en CSS
+slug: Web/CSS/Comprendre_z-index
+tags:
+  - Avancé
+  - CSS
+  - Guide
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index
+---
+<p>{{CSSRef}}{{PreviousMenuNext("","Web/CSS/Comprendre_z-index/Empilement_sans_z-index", "Web/CSS/Comprendre_z-index")}}</p>
+
+<p>Généralement, les pages HTML sont vues comme des objets en deux dimensions et le texte, les images et les autres éléments sont disposés sans se chevaucher. Il y a un seul flux de rendu, et tous les éléments connaissent la place occupée par les autres.</p>
+
+<blockquote>
+<p><em>Dans CSS 2.1, chaque boîte a une position dans les 3 dimensions. En plus de leurs positions horizontale et verticale, les boîtes sont disposées sur un axe Z et sont disposées les unes sur les autres. Les positions sur l'axe Z sont particulièrement importantes lorsque deux boîtes se chevauchent visuellement. </em></p>
+</blockquote>
+
+<p>Source : <a class="external" href="https://www.w3.org/TR/CSS2/visuren.html#z-index">Section 9.9.1. de CSS 2.1 - La présentation en couches</a></p>
+
+<p>Cela signifie que les règles de style CSS permettent de positionner des boîtes sur différentes couches, la couche « normale » étant la couche située en 0 sur l'axe Z. La position de chaque couche sur l'axe Z est exprimée par un nombre entier qui représente l'ordre d'empilement pour le rendu visuel. Plus cet entier sera grand, plus la couche sera haute dans la pile. Cette valeur se contrôle via la propriété CSS {{cssxref("z-index")}}.</p>
+
+<p><code>z-index</code> peut sembler simple d'utilisation : il ne s'agit que d'une seule propriété, exprimée avec un entier et un comportement plutôt simple de prime abord. Cependant, lorsque <code>z-index</code> est appliquée à des hiérarchies complexes d'éléments HTML, son comportement peut vite devenir difficile à appréhender, voire imprévisible. Ceci est dû aux règles complexes d'empilement.</p>
+
+<p>Ces articles ont pour but d'expliquer ces règles, de proposer quelques simplifications et de nombreux exemples.</p>
+
+<ol>
+ <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Empilement_sans_z-index">L'empilement sans <code>z-index</code></a> : Règles d'empilement par défaut</li>
+ <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Empilement_et_float">L'empilement et <code>float</code></a> : Comportement des éléments flottants</li>
+ <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Ajout_de_z-index">Ajouter <code>z-index</code></a> : Utiliser <code>z-index</code> pour modifier l'empilement par défaut</li>
+ <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Empilement_de_couches">L'empilement de couches</a> : Remarques sur l'empilement de couches</li>
+ <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Exemple_1">Exemple d'empilement n°1</a> : Hiérarchie HTML à 2 niveaux, <code>z-index</code> sur le dernier niveau</li>
+ <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Exemple_2">Exemple d'empilement n°2</a> : Hiérarchie HTML à 2 niveaux, <code>z-index</code> sur tous les éléments</li>
+ <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Exemple_3">Exemple d'empilement n°3</a> : Hiérarchie HTML à 3 niveaux, <code>z-index</code> sur le deuxième niveau</li>
+</ol>
+
+<p>{{PreviousMenuNext("","Web/CSS/Comprendre_z-index/Empilement_sans_z-index", "Web/CSS/Comprendre_z-index")}}</p>
diff --git a/files/fr/web/css/concepts_viewport/index.html b/files/fr/web/css/concepts_viewport/index.html
new file mode 100644
index 0000000000..56143515c0
--- /dev/null
+++ b/files/fr/web/css/concepts_viewport/index.html
@@ -0,0 +1,156 @@
+---
+title: Concepts relatifs au viewport
+slug: Web/CSS/Concepts_viewport
+tags:
+  - CSS
+  - Guide
+  - viewport
+translation_of: Web/CSS/Viewport_concepts
+---
+<p>{{CSSRef}}</p>
+
+<p class="summary">Dans cet article, nous définirons le concept de <em>viewport</em> ou de zone d'affichage, les différences entre la zone d'affichage visuelle et la zone d'affichage pour la disposition. Nous verrons également ce que signifie la zone d'affichage pour CSS, SVG et pour les appareils mobiles.</p>
+
+<h2 id="Qu'est-ce_qu'une_zone_d'affichage_(viewport)">Qu'est-ce qu'une zone d'affichage (<em>viewport</em>) ?</h2>
+
+<p>Une zone d'affichage (aussi appelée <em>viewport</em> en anglais) représente la zone actuellement visible sur l'appareil. Pour un navigateur web, la zone d'affichage correspond généralement à la fenêtre du navigateur sans les éléments d'interface du navigateur (barre de menu, etc.). Bref, sur le Web, la zone d'affichage correspond la plupart du temps à la région à l'intérieur de la fenêtre dans laquelle vous consultez un site ou une application.</p>
+
+<p>Les documents (à l'instar de cet article) peuvent être très longs. La zone d'affichage correspond à ce qui est actuellement visible. Dans notre cas particulier, vous devriez pouvoir voir le titre Qu'est-ce qu'une zone d'affichage peut-être le menu de navigation. La taille de la zone d'affichage dépend de la taille de l'écran, de l'activation du mode plein écran, du niveau de zoom, etc. Le contenu situé à l'extérieur de la zone d'affichage (la section Voir aussi de ce document par exemple) n'est pas visible tant que l'utilisateur n'a pas fait défilé le contenu jusqu'à ce point.</p>
+
+<ul>
+ <li>Pour les écrans les plus grands où les applications ne sont pas nécessairement en plein écran, la zone d'affichage mesure la taille de la fenêtre du navigateur</li>
+ <li>Sur la plupart des appareils mobiles ou lorsque le navigateur est en plein écran, la zone d'affichage correspond à l'ensemble de l'écran</li>
+</ul>
+
+<p>En mode plein écran, la zone d'affichage sera l'écran de l'appareil, la fenêtre du navigateur pourra être plus grande ou plus petite que la zone d'affichage et le document sera le site web consulté et qui peut être plus grand ou plus large que la zone d'affichage.</p>
+
+<p>Pour résumer, la zone d'affichage est la zone du document actuellement visible à l'écran.</p>
+
+<h3 id="Les_dimensions_de_la_zone_d'affichage_sont_modifiables">Les dimensions de la zone d'affichage sont modifiables</h3>
+
+<p>La largeur de la zone d'affichage n'est pas toujours la largeur de la fenêtre. Si vous accédez à la largeur et à la hauteur de la fenêtre et à celles du document avec Chrome ou Firefox, vous pourrez obtenir un résultat comme celui-ci :</p>
+
+<pre class="brush: js">document.documentElement.clientWidth /* 1200 */
+window.innerWidth /* 1200 */
+window.outerWidth /* 1200 */
+</pre>
+
+<pre class="brush: js">document.documentElement.clientHeight /* 800 */
+window.innerHeight /* 800 */
+window.outerHeight /* 900 */
+</pre>
+
+<p>Il existe plusieurs propriétés du DOM qui permettent d'obtenir la taille de la zone d'affichage et certaines dimensions associées :</p>
+
+<ul>
+ <li>La propriété du document {{DOMxRef("Element.clientWidth")}} est la largeur interne du document, exprimée en <a href="/fr/docs/Mozilla/Mobile/Balise_meta_viewport#Un_pixel_n'est_pas_un_pixel">pixels CSS</a>, et inclut le remplissage (<em>padding</em>) mais pas les marges, les bordures et les barres de défilement. <strong>C'est la largeur de la zone d'affichage</strong>.</li>
+ <li>La propriété {{DOMxRef("Window.innerWidth")}} correspond à la largeur, exprimée en pixels CSS, de la zone d'affichage dans la fenêtre du navigateur qui contient les éventuelles barres de défilement verticales.</li>
+ <li>La propriété {{DOMxRef("Window.outerWidth")}} correspond à la largeur extérieure de la fenêtre du navigateur et qui contient l'ensemble du <em>chrome</em> (les éléments d'interface utilisateur du navigateur qui ne sont pas ceux de la page web consultée).</li>
+</ul>
+
+<p>Dans l'exemple précédent, on peut voir que <code>innerWidth</code> et <code>outerWidth</code> ont la même valeur mais que <code>outerHeight</code> mesure 100 pixels de plus que <code>innerHeight</code>. En effet, <code>outerHeight</code> tient compte du chrome du navigateur et les mesures ont été effectuées avec un navigateur dont la barre d'adresse, les onglets et la barre de favoris mesuraient ensemble 100 pixels de haut. En revanche, il n'y avait pas de <em>chrome</em> à gauche ou à droite de la fenêtre.</p>
+
+<p>La zone contenu entre <code>innerHeight</code> et <code>innerWidth</code> correspond à <strong>la zone d'affichage pour la disposition (<em>layout viewport</em>)</strong>. Le chrome du navigateur ne fait pas partie de la zone d'affichage.</p>
+
+<p>Lorsqu'on zoome, FIrefox et Chrome renvoient une nouvelle taille, en pixels CSS, pour <code>innerWidth</code> et <code>clientWidth</code>. Les valeurs renvoyées pour <code>outerWidth</code> et <code>outerHeight</code> dépendent du navigateur : Firefox rapporte la nouvelle valeur en pixels CSS et Chrome renvoie la longueur exprimée avec la taille par défaut d'un pixel. Lorsqu'on a zoomé, on pourra obtenir :</p>
+
+<pre class="brush: js">document.documentElement.clientWidth /* 800 */
+window.innerWidth /* 800 */
+window.outerWidth /* 800 dans Firefox, 1200 dans Chrome */
+</pre>
+
+<pre class="brush: js">document.documentElement.clientHeight /* 533 */
+window.innerHeight /* 533 */
+window.outerHeight /* 596 dans Firefox, 900 dans Chrome */
+</pre>
+
+<p>La zone d'affichage mesurait initialement 1200 x 800 pixels. Après le zoom, la zone d'affichage mesure 800 x 533 pixels. C'est la zone d'affichage pour la disposition. Avec la feuille de style suivante, les hauts et pieds de page seront placés en haut et en bas de <em>la zone d'affichage pour la disposition</em>.</p>
+
+<pre class="brush: css">body &gt; header {
+  position: fixed;
+  top: 0;
+}
+body &gt; footer {
+  position: fixed;
+  bottom: 0;
+}
+</pre>
+
+<p>On a mesuré 800 x 533 après avoir zoomé à l'aide du clavier. Le haut et le bas de page ont suivi le haut et le bas de la fenêtre. Mais que ce serait-il passé si on avait zoomé au doigt sur une tablette ? Que se serait-il passé si un clavier tactile logiciel s'était ouvert sur le bas du téléphone ?</p>
+
+<p>Dans le contexte du Web, on parle de deux zones d'affichage : <strong>la zone d'affichage pour la disposition (<em>layout viewport</em>)</strong> et <strong>la zone d'affichage visuelle (<em>visual viewport</em>)</strong>. La zone d'affichage visuelle est la partie de la page web qui est actuellement visible dans le navigateur et qui peut changer. Lorsqu'un utilisateur zoome en pinçant, provoque l'ouverture d'un clavier tactile ou lorsqu'une barre d'adresse s'affiche, la zone d'affichage visuelle se réduit mais la zone d'affichage pour la disposition reste inchangée.</p>
+
+<p>Les hauts et bas de pages vus dans l'exemple précédent se caleront en haut et en bas de la zone d'affichage pour la disposition. Aussi, ils resteront visibles lorsqu'on zoome au clavier mais pourrait être masqués (partiellement ou complètement) par un clavier visuel : autrement dit, ils pourraient ne pas faire partie de la zone d'affichage visuelle.</p>
+
+<p>La zone d'affichage visuelle correspond à la partie de l'écran qui est visible sans contenir les claviers visuels, les zones en dehors de la région zoomée ou toute autre partie qui ne suit pas les dimensions d'une page. Ainsi, la zone d'affichage visuelle pourra avoir la même taille ou être plus petite que la zone d'affichage pour la disposition.</p>
+
+<p>Pour une page contenant des <em>iframes</em>, des objets ou des SVG externes, chaque page imbriquée et chaque fichier inclus possède son propre objet pour la fenêtre. Seule la fenêtre de plus haut niveau possède une zone d'affichage visuelle qui peut être différente de la zone d'affichage pour la disposition. Pour les éléments imbriqués, la zone d'affichage visuelle et la zone d'affichage pour la disposition sont identiques.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<p>La zone d'affichage pour la disposition et la zone d'affichage visuelle mentionnées jusqu'à présent ne sont pas les seules zones d'affichages à considérer. Toute zone d'affichage imbriquée, pleinement ou partiellement affichée dans la zone d'affichage pour la disposition sera considérée comme une zone d'affichage visuelle.</p>
+
+<p>On pense généralement que les hauteurs et largeurs utilisées pour les requêtes média correspondent à la hauteur et à la largeur de la fenêtre du navigateur mais elles correspondent en réalité à la taille de la zone d'affichage (la fenêtre pour le document principal ou les dimensions intrinsèques des objets imbriqués). En CSS, on peut également utiliser des unités proportionnelles aux dimensions de la zone d'affichage. Un <code>vh</code> correspond à 1% de la hauteur de la zone d'affichage pour la disposition et <code>vw</code> mesurera, de façon analogue, 1% de la largeur de la zone d'affichage pour la disposition.</p>
+
+<h4 id="&lt;iframe>"><code>&lt;iframe&gt;</code></h4>
+
+<p>À l'intérieur d'une <em>iframe</em>, la zone d'affichage visuelle est mesurée comme la largeur et la hauteur internes de l'<em>iframe</em> et non comme celles du document parent. Il est possible de définir n'importe quelle hauteur et largeur pour une <em>iframe</em> mais le document pourra ne pas être visible dans son intégralité.</p>
+
+<p>Si on utilise les unités de longueur relatives à la zone d'affichage pour la mise en forme du document situé dans l'<em>iframe</em>, <code>1vh</code> correspondra à 1% de la hauteur de l'<em>iframe</em> et <code>1vw</code> correspondra à 1% de la largeur du document imbriqué.</p>
+
+<pre class="brush: css">iframe {
+  width: 50vw;
+}
+</pre>
+
+<p>Si l'<em>iframe</em> est dimensionnée à <code>50vw</code>, elle mesurera 50% de large des <code>1200px</code> du document parent (soit <code>600px</code>). À l'intérieur de cette <em>iframe</em>, <code>1vw</code> correspondra donc à <code>6px</code>. Lorsqu'on zoomera, l'<em>iframe</em> se réduira à <code>400px</code> de large et <code>1vw</code> correspondra alors à <code>4px</code>.</p>
+
+<p>Lorsqu'on utilise une requête média à l'intérieur du document de l'<em>iframe</em>, les dimensions utilisées sont relatives à la zone d'affichage de l'<em>iframe</em>.</p>
+
+<pre class="brush: css">@media screen and (min-width: 500px) {
+  p {
+    color: red;
+  }
+}
+</pre>
+
+<p>Si le fragment de code CSS était inclus dans l'<em>iframe</em>, les paragraphes seraient rouges avec un zoom utilisateur et normaux sinon.</p>
+
+<h4 id="SVG">SVG</h4>
+
+<p>Pour un document SVG, la zone d'affichage correspond à la partie de l'image SVG qui est visible à l'écran. On peut définir n'importe quelle hauteur et largeur sur un SVG mais l'image pourra ne pas être entièrement visible. La taille de la zone d'affichage pourra être définie à l'aide des attributs <code>width</code> et <code>height</code> de l'élément {{SVGElement("svg")}}.</p>
+
+<pre class="brush: html">&lt;svg height="300" width="400"&gt;&lt;/svg&gt;</pre>
+
+<p>Dans cet exemple, la zone d'affichage possède un ratio de 3::4 et mesure 400 x 300 unités (où les unités par défaut sont généralement des pixels CSS).</p>
+
+<p>SVG possède un système de coordonnées interne qui est défini grâce à l'attribut <code><a href="/fr/docs/Web/SVG/Attribute/viewBox">viewbox</a></code> mais qui n'est pas directement lié à la problématique des zones d'affichage.</p>
+
+<p>Si on inclut un fichier SVG dans un document HTML, la zone d'affichage pour le SVG sera le bloc englobant initial ou la largeur et la hauteur du conteneur SVG. Si on utilise une requête média {{CSSxRef("@media")}} dans le code CSS du SVG, celle-ci sera relative à la taille du conteneur et pas à celle de la zone d'affichage du document.</p>
+
+<pre class="brush: css">@media screen and (min-width: 400px) and (max-width: 500px) {
+  /* styles CSS ici */
+}</pre>
+
+<p>Lorsqu'on utilise la requête média précédente, les styles sont généralement appliqués lorsque la fenêtre du navigateur mesure entre 400px et 500px de large. Lorsqu'on utilise cette même requête à l'intérieur d'un document SVG, ce sera la largeur du conteneur (l'élément {{htmlelement("img")}} par exemple ou l'élément parent) qui sera considérée. Autrement dit, si on utilise la requête média précédente sur un document SVG, les styles seront appliqués si le conteneur du SVG mesure entre 400 et 500 pixels.</p>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>L'API <a href="/fr/docs/Web/API/Visual_Viewport_API">Visual Viewport</a> fournit des outils pour récupérer et modifier les propriétés de la zone d'affichage visuelle.</p>
+
+<h2 id="Zones_d'affichage_sur_mobiles">Zones d'affichage sur mobiles</h2>
+
+<p>Il existe une grande variété de tailles et de proportions pour les appareils mobiles. La zone d'affichage d'un navigateur mobile est la zone de la fenêtre sur laquelle le contenu web peut être consulté et cette zone n'a pas nécessairement la même taille que la page affichée. Les navigateurs mobiles affichent les pages sur une zone d'affichage virtuelle (mesurant généralement 960px) plus large que l'écran puis réduisent le résultat afin que l'utilisateur puisse voir l'ensemle du document. L'utilisateur peut alors se déplacer ou zoomer au doigt pour accéder aux différentes zones de la page. Ainsi, si un appareil mobile a un écran large de 320px, un site web pourra être affiché selon une zone d'affichage virtuelle sur 960px puis réduit afin de pouvoir s'inscrire dans l'espace large de 320px. Le résultat ainsi obtenu risque peu d'être lisible. Pour indiquer à un navigateur mobile d'utiliser la largeur de la zone d'affichage réelle plutôt que la largeur virtuelle de 960px, on pourra placer la balise <code>&lt;meta&gt;</code> suivante :</p>
+
+<pre class="brush: html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>meta</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>viewport<span class="punctuation token">"</span></span> <span class="attr-name token">content</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>width<span class="punctuation token">=</span>device-width<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p>La propriété <code>width</code> contrôle la taille de la zone d'affichage et on l'utilisera généralement avec <code>device-width</code> qui correspond à la largeur de l'écran, exprimée en pixels CSS, avec un zoom de 100%. Il est possible d'utiliser d'autres propriétés comme <code>maximum-scale</code>, <code>minimum-scale</code> et <code>user-scalable</code> afin de contrôler si l'utilisateur peut zoomer/dézoomer sur la page mais les valeurs par défaut restent les meilleures en termes d'accessibilité et d'ergonomie et ne seront pas plus abordées ici par souci de concision.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/@viewport">La règle @ <code>@viewport</code></a></li>
+ <li><a href="/fr/docs/Web/API/Visual_Viewport_API">L'API Visual Viewport</a></li>
+ <li>L'élément {{HTMLElement("meta")}} et notamment <code>&lt;meta name="viewport"&gt;</code></li>
+ <li><a href="/fr/docs/Mozilla/Mobile/Balise_meta_viewport">L'utilisation de la balise méta <code>viewport</code> afin de contrôler la disposition sur les navigateurs mobiles</a></li>
+</ul>
diff --git a/files/fr/web/css/conic-gradient()/index.html b/files/fr/web/css/conic-gradient()/index.html
new file mode 100644
index 0000000000..a403061a07
--- /dev/null
+++ b/files/fr/web/css/conic-gradient()/index.html
@@ -0,0 +1,264 @@
+---
+title: conic-gradient()
+slug: Web/CSS/conic-gradient()
+tags:
+  - CSS
+  - Fonction
+  - Guide
+  - Reference
+translation_of: Web/CSS/conic-gradient()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction CSS <strong><code>conic-gradient()</code></strong> permet de créer une image consistuée d'un dégradé radial pour lequel les transitions entre les couleurs ont lieu autour d'un centre plutôt que depuis le centre. Un dégradé conique pourra par exemple être un graphique en camembert. Le résultat de la fonction <code>conic-gradient()</code> est un objet du type de données {{CSSxRef("&lt;gradient&gt;")}} qui est un type particulier d'{{CSSxRef("&lt;image&gt;")}}.</p>
+
+<p>{{EmbedInteractiveExample("pages/css/function-conic-gradient.html")}}</p>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>À l'instar des autres dégradés, les dégradés coniques ne possèdent pas <a href="/en-US/docs/CSS/image#no_intrinsic">de dimension intrinsèque</a> (ils n'ont pas de taille préférentielle ou de ratio) : la taille réelle correspondra à la taille de l'élément auquel le dégradé s'applique ou à la taille de l'image.</p>
+
+<p>Pour créer un dégradé conique qui se répète afin de couvrir 360° (un tour complet), on utilisera plutôt la notation fonctionnelle {{CSSxRef("repeating-conic-gradient")}}.</p>
+
+<p>Les dégradés (<code>&lt;gradient&gt;</code>) sont un type d'image (<code>&lt;image&gt;</code>) et ne peuvent être utilisés qu'aux endroits où les images peuvent être utilisées. Aussi, <code>conic-gradient()</code> ne fonctionnera pas pour la propriété {{CSSxRef("background-color")}} ou pour les autres propriétés qui utilisent les données de type {{CSSxRef("&lt;color&gt;")}}.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Un tel dégradé est appelé conique car, vu du dessus, la répartition des couleurs fait apparaître un cône.</p>
+</div>
+
+<h2 id="Quest-ce_quun_dégradé_conique">Qu'est-ce qu'un dégradé conique ?</h2>
+
+<p>Un dégradé conique est semblable à un dégradé radial mais les transitions de couleurs sont placées sur différents angles plutôt que sur différents rayons. Avec les dégradés coniques, les transition entre les couleurs commencent depuis la direction pointant vers le haut puis dans le sens des aiguilles d'une montre. Avec un dégradé radial, les transitions progressent depuis le centre vers l'extérieur du cercle.</p>
+
+<p><img alt="color stops along the circumference of a conic gradient and the axis of a radial gradient." src="https://mdn.mozillademos.org/files/16361/Screenshot_2018-11-29_21.09.19.png" style="height: 258px; width: 515px;"></p>
+
+<p>Un dégradé conique est défini en indiquant un angle de rotation, le centre du dégradé puis en indiquant une liste de points d'arrêt de couleur. À la différence des dégradés linéaires et des dégradés radiaux pour lesquels les points d'arrêt de couleur sont placés avec une longueur, les points d'arrêt de couleur d'un dégradé conique sont placés à l'aide d'un angle. Les unités utilisables pour les angles sont <code>deg</code> (pour les degrés), <code>rad</code> (pour les radians), <code>grad</code> (pour les grades) et <code>turn</code> (pour les tours). Un cercle se divise en 360 degrés, 400 grades, 2 radians et un tour. Les navigateurs qui prennent en charge les dégradés coniques acceptent également les valeurs exprimées en pourcentage (100% correspondant à 360 degrés) mais cela ne fait pas partie de la spécification.</p>
+
+<p>Comme pour les dégradés radiaux, la syntaxe pour les dégradés coniques permet de situer le centre du dégradé à n'importe quel endroit de l'image ou de l'élément, même en dehors. La position s'exprime avec deux valeurs, de façon semblable à la syntaxe de {{cssxref("background-position")}}.</p>
+
+<p>L'arc du dégradé représente le périmètre du dégradé. Le point de départ du dégradé est situé en haut de l'axe vertical. Ensuite le dégradé évolue à partir de cet angle. Les couleurs du dégradé sont déterminées grâce aux points d'arrêt de couleur angulaires, aux points de départ et aux points d'arrivée et éventuellement aux points d'arrêt intermédiaires. Les transitions entre les couleurs peuvent être modifiées grâce à des indications entre les différents points d'arrêt.</p>
+
+<h3 id="Adapter_les_dégradés">Adapter les dégradés</h3>
+
+<p>En ajoutant plusieurs points d'arrêt de couleur sur l'arc du dégradé, il est possible de créer une transition personnalisée entre de nombreuses couleurs. La position d'un point d'arrêt de couleur peut être définie de façon explicite grâce à une valeur de type {{CSSxRef("&lt;angle&gt;")}}. Si on ne définit pas l'emplacement d'un point d'arrêt, ce dernier sera placé à mi-chemin entre le point d'arrêt précédent et le suivant. Si on ne définit pas d'angle pour le premier ou le dernier point d'arrêt de couleur, ils seront respectivement situés à <code>0deg</code> et <code>360deg</code>. Autrement dit, les deux dégradés suivants sont équivalents :</p>
+
+<pre class="brush: css notranslate">conic-gradient(red, orange, yellow, green, blue);
+conic-gradient(red 0deg, orange 90deg, yellow 180deg, green 270deg, blue 360deg);</pre>
+
+<p>Par défaut, la transition entre les couleurs de deux points d'arrêt se fera progressivement avec la moitié de la transition à la moitié de l'angle. Ce milieu de transition peut être déplacé en ajoutant une indication de couleur qui définit l'emplacement voulu. L'exemple suivant commence avec du rouge jusqu'à 10%, fait une transition du rouge au bleu sur 80% du tour, les 10% restants sont en bleu. Cependant, le point de changement entre le bleu et le rouge se situe à 20% plutôt qu'à 50% (ce qui se serait produit sans l'indication <code>80grad</code>).</p>
+
+<pre class="brush: css notranslate">conic-gradient(red 40grad, 80grad, blue 360grad);</pre>
+
+<p>Si deux ou plusieurs points d'arrêt de couleur partagent le même emplacement, la transition sera franche entre la première et la dernière couleur déclarées pour cet emplacement. Si on emploie les dégradés coniques pour faire des camemberts (une mauvaise pratique car les dégradés ne sont pas accessibles), on peut utiliser des points d'arrêt avec plusieurs couleurs au même endroit pour créer une transition nette. Les deux déclarations suivantes sont synonymes :</p>
+
+<pre class="brush: css notranslate">conic-gradient(#fff 0.09turn, #bbb 0.09turn, #bbb 0.27turn, #666 0.27turn, #666 0.54turn, #000 0.54turn);
+conic-gradient(#fff 0turn 0.09turn, #bbb 0.09turn 0.27turn, #666 0.27turn 0.54turn, #000 0.54turn 1turn);</pre>
+
+<p>Les points d'arrêt de couleur devraient être listés dans l'ordre croissant. Les points d'arrêt situés après mais dont la valeur d'angle est inférieure surchargeront les valeurs des points d'arrêt précédents et créeraient une rupture tranchée. Le dégradé qui suit passe de rouge à jaune à 30% puis de jaune à bleu après 35% :</p>
+
+<pre class="brush: css notranslate">conic-gradient(red .8rad, yellow .6rad, blue 1.3rad);
+</pre>
+
+<p>Il est possible d'obtenir d'autres effets avec les dégradés coniques. On peut même créer un damier en créant des quadrants supérieurs gauches et inférieurs droits en blanc et supérieurs droits et inférieurs gauches en noir puis en répétant le dégradé 16 fois (quatre fois en horizontal et quatre fois en vertical) :</p>
+
+<pre class="brush: css notranslate">conic-gradient(#fff 90deg, #000 0.25turn 0.5turn, #fff 1rad 1.5rad, #000 300grad);
+background-size: 25% 25%;
+</pre>
+
+<p>On voit avec l'exemple précédent qu'il est aussi possible de mélanger différentes unités d'angle mais attention, cela diminue fortement la lisibilité.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="language-css notranslate" id="css">/* Un dégradé conique tourné de 45 degrés,
+   qui commence en bleu et finit en rouge */
+conic-gradient(from 45deg, blue, red);
+
+/* Une boîte bleu violette : le dégradé commence du bleu
+   vers le rouge mais seule la partie inférieure droite du
+   quadrant est visible car le centre du dégradé conique est
+   dans le coin supérieur gauche */
+conic-gradient(from 90deg at 0 0, blue, red);
+
+/* Une roue des couleurs */
+background: conic-gradient(
+    hsl(360, 100%, 50%),
+    hsl(315, 100%, 50%),
+    hsl(270, 100%, 50%),
+    hsl(225, 100%, 50%),
+    hsl(180, 100%, 50%),
+    hsl(135, 100%, 50%),
+    hsl(90, 100%, 50%),
+    hsl(45, 100%, 50%),
+    hsl(0, 100%, 50%)
+);</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt>{{CSSxRef("&lt;angle&gt;")}}</dt>
+ <dd>Une valeur précédée du mot-clé <code>from</code> qui indique un angle et qui définit la rotation du dégradé selon le sens des aiguilles d'une montre.</dd>
+ <dt><code>&lt;position&gt;</code></dt>
+ <dd>La position définit le centre du dégradé en respectant la même syntaxe que celle utilisée pour la propriété {{cssxref("background-position")}}. Si cette valeur est absente, ce sera la valeur <code>center</code> qui sera utilisée comme valeur par défaut, indiquant que le dégradé sera centré.</dd>
+ <dt><code>&lt;angular-color-stop&gt;</code></dt>
+ <dd>Un point d'arrêt de couleur utilisant une valeur de type {{CSSxRef("&lt;color&gt;")}} suivie par une ou deux positions d'arrêt (une valeur de type {{CSSxRef("&lt;angle&gt;")}} située le long de l'arc du dégradé).</dd>
+ <dt><code>&lt;color-hint&gt;</code></dt>
+ <dd>Une indication de couleur pour l'interpolation entre deux points d'arrêt. La longueur définit l'emplacement où les deux couleurs des points d'arrêts alentour doivent se joindre. Autrement dit, la longueur à laquelle la transition est effectuée à moitié. Si cette valeur est absente, la moitié de la transition est atteinte à la moitié de l'angle entre les deux points d'arrêt.</dd>
+ <dd>
+ <div class="note">
+ <p><strong>Note :</strong> Le rendu des points d'arrêt de couleur pour les dégradés CSS respecte les mêmes règles que les points d'arrêt de couleur des <a href="/fr/docs/Web/SVG/Tutorial/Gradients">dégradés SVG</a>.</p>
+ </div>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">conic-gradient(
+  [ from &lt;angle&gt; ]? [ at &lt;position&gt; ]?, &lt;angular-color-stop-list&gt; )
+  \---------------------------------/ \----------------------------/
+        Gradient definition                List of color stops
+
+where &lt;angular-color-stop-list&gt; = [ &lt;angular-color-stop&gt; [, &lt;angular-color-hint&gt;]? ]# , &lt;angular-color-stop&gt;
+  and &lt;angular-color-stop&gt; = &lt;color&gt; &amp;&amp; &lt;color-stop-angle&gt;?
+  and &lt;angular-color-hint&gt; = &lt;angle-percentage&gt;
+  and &lt;color-stop-angle&gt; = &lt;angle-percentage&gt;{1,2}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<div>
+<h3 id="Un_dégradé_à_40°">Un dégradé à 40°</h3>
+
+<div class="hidden">
+<pre class="brush: css notranslate">div {
+  width: 100px;
+  height: 100px;
+}</pre>
+
+<pre class="brush: html notranslate">&lt;div&gt;&lt;/div&gt;
+</pre>
+</div>
+
+<pre class="brush: css notranslate">div {
+  background-image:
+     conic-gradient(from 40deg, #fff, #000);
+}
+</pre>
+
+<p>{{EmbedLiveSample("Un_dégradé_à_40°", 120, 120)}}</p>
+</div>
+
+<div>
+<h3 id="Un_dégradé_décentré">Un dégradé décentré</h3>
+
+<div class="hidden">
+<pre class="brush: css notranslate">div {
+  width: 100px;
+  height: 100px;
+}</pre>
+
+<pre class="brush: html notranslate">&lt;div&gt;&lt;/div&gt;
+</pre>
+</div>
+
+<pre class="brush: css notranslate">div {
+  background: conic-gradient(from 0deg at 0% 25%, blue, green, yellow 180deg);
+}</pre>
+
+<p>{{EmbedLiveSample("Un_dégradé_décentré", 120, 120)}}</p>
+</div>
+
+<div>
+<h3 id="Un_camembert_sous_forme_de_dégradé">Un camembert sous forme de dégradé</h3>
+
+<p>This example uses multi-position color stops, with adjacent colors having the same color stop value, creating a striped effect.</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">div {
+  width: 100px;
+  height: 100px;
+}</pre>
+
+<pre class="brush: html notranslate">&lt;div&gt;&lt;/div&gt;
+</pre>
+</div>
+
+<pre class="brush: css notranslate">div {
+  background: conic-gradient(
+     red 36deg, orange 36deg 170deg, yellow 170deg);
+  border-radius: 50%
+}</pre>
+
+<p>{{EmbedLiveSample("Un_camembert_sous_forme_de_dégradé", 120, 120)}}</p>
+</div>
+
+<div>
+<h3 id="Un_damier">Un damier</h3>
+
+<div class="hidden">
+<pre class="brush: css notranslate">div {
+  width: 100px;
+  height: 100px;
+}</pre>
+
+<pre class="brush: html notranslate">&lt;div&gt;&lt;/div&gt;
+</pre>
+</div>
+
+<pre class="brush: css notranslate">div {
+  background:
+     conic-gradient(#fff 0.25turn, #000 0.25turn 0.5turn, #fff 0.5turn 0.75turn, #000 0.75turn)
+     top left / 25% 25% repeat;
+  border: 1px solid;
+}</pre>
+
+<p>{{EmbedLiveSample("Un_damier", 120, 120)}}</p>
+</div>
+
+<div class="note">
+<p><strong>Note :</strong> Voir <a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">Utiliser les dégradés CSS</a> pour plus d'exemples.</p>
+</div>
+
+<h2 id="Acessibilité">Acessibilité</h2>
+
+<p>Les outils d'assistance ne peuvent pas analyser les images d'arrière-plan. Aussi, bien qu'il soit possible de créer des camemberts graphiques, des damiers ou d'autres effets grâce aux dégradés coniques, les images construites en CSS ne sont pas accessibles. Les images créées avec des dégradés coniques ne sont donc pas accessibles non plus. Si l'image contient des informations essentielles à la compréhension du document, mieux vaudra la décrire de façon sémantique dans le document afin que ce dernier soit correctement accessible.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">Comprendre les règles WCAG 1.1.</a></li>
+ <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">Comprendre les critères de succès 1.1.1  pour WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Images', '#conic-gradients', 'conic-gradient()')}}</td>
+   <td>{{Spec2('CSS4 Images')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.types.image.gradient.conic-gradient")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients">Utiliser les dégradés CSS</a></li>
+ <li>Les autres fonctions associées aux dégradés : {{CSSxRef("repeating-conic-gradient")}}, {{CSSxRef("linear-gradient")}}, {{CSSxRef("repeating-linear-gradient")}}, {{CSSxRef("radial-gradient")}}, {{CSSxRef("repeating-radial-gradient")}}</li>
+ <li>{{CSSxRef("&lt;image&gt;")}}</li>
+ <li>{{cssxref("_image","image()")}}</li>
+ <li>{{cssxref("element()")}}</li>
+ <li>{{cssxref("image-set","image-set()")}}</li>
+ <li>{{cssxref("cross-fade")}}</li>
+</ul>
diff --git a/files/fr/web/css/contain/index.html b/files/fr/web/css/contain/index.html
new file mode 100644
index 0000000000..c6c9747b19
--- /dev/null
+++ b/files/fr/web/css/contain/index.html
@@ -0,0 +1,98 @@
+---
+title: contain
+slug: Web/CSS/contain
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/contain
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété CSS <strong><code>contain</code></strong> permet d'indiquer qu'un élément, ainsi que son contenu, sont, autant que possible, indépendants du reste de l'arbre du document. Cela permet au navigateur de recalculer la disposition, la mise en forme, la taille, les <em>peintures</em> ou toute combinaison de ces éléments pour une zone donnée du DOM plutôt que pour la page complète.</p>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+contain: none;
+contain: strict;
+contain: content;
+contain: size;
+contain: layout;
+contain: style;
+contain: paint;
+
+/* Valeurs globales */
+contain: inherit;
+contain: initial;
+contain: unset;
+</pre>
+
+<p>Cette propriété s'avère utile pour les pages qui contiennent de nombreux composants indépendants et permet de limiter la portée des règles sur le reste de la page.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Lorsqu'elle est appliquée avec une valeur <code>paint</code>, <code>strict</code> ou <code>content</code>, cette propriété crée :</p>
+
+<ul>
+ <li>un nouveau <a href="/fr/docs/Web/CSS/A_Propos_Du_Bloc_Conteneur">bloc englobant</a> (le bloc servant de référence pour les éléments fils dont la position sera absolue ou <code>fixed</code>)</li>
+ <li>un nouveau <a href="/fr/docs/Web/CSS/Comprendre_z-index/Empilement_de_couches">contexte d'empilement</a></li>
+ <li>un nouveau <a href="/fr/docs/Web/CSS/Block_formatting_context">contexte de formatage de bloc</a>.</li>
+</ul>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>L'élément est affiché normalement, aucun confinement n'est appliqué.</dd>
+ <dt><code>strict</code></dt>
+ <dd>Toutes les règles possibles de confinement à l'exception de <code>style</code> sont appliquées. Cela correspond à <code>contain: size layout paint</code>.</dd>
+ <dt><code>content</code></dt>
+ <dd>Toutes les règles de confinement, à l'exception de celles pour <code>size</code> et <code>style</code>, sont appliquées à l'élément. Cela est équivalent à <code>contain: layout paint</code>.</dd>
+ <dt><code>size</code></dt>
+ <dd>Cette valeur indique que l'élément peut être dimensionné sans avoir à examiner les éléments descendants pour les modifications de la taille.</dd>
+ <dt><code>layout</code></dt>
+ <dd>Cette valeur indique qu'aucun élément en dehors de l'élément, ne peut impacter sa disposition interne et réciproquement.</dd>
+ <dt><code>style</code></dt>
+ <dd>Cette valeur indique que les propriétés ayant un effet sur un un élément et ses descendants voire plus sont bien limitées à l'élément englobant.</dd>
+ <dt><code>paint</code></dt>
+ <dd>Cette valeur indique que les éléments descendants de l'élément ne sont pas affichés en dehors de ses limites. Si un élément est en dehors de l'écran ou n'est pas visible, cette valeur assure que les éléments descendants ne sont pas visibles non plus.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Containment')}}</td>
+   <td>{{Spec2('CSS Containment')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.contain")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La propriété CSS {{cssxref("position")}}</li>
+</ul>
diff --git a/files/fr/web/css/content/index.html b/files/fr/web/css/content/index.html
new file mode 100644
index 0000000000..6734f52912
--- /dev/null
+++ b/files/fr/web/css/content/index.html
@@ -0,0 +1,268 @@
+---
+title: content
+slug: Web/CSS/content
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/content
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>content</code></strong> est utilisée avec les pseudo-éléments {{cssxref("::before")}} et {{cssxref("::after")}} afin de générer le contenu d'un élément. Les objets insérés via la propriété <code>content</code> sont des <em><a href="/fr/docs/Web/CSS/Élément_remplacé">éléments remplacés anonymes</a>.</em></p>
+
+<pre class="brush: css no-line-numbers">/* Des mots-clés qui ne peuvent pas être mélangés
+  avec d'autres valeurs */
+content: normal;
+content: none;
+
+/* Valeurs pour une image */
+content: url("http://www.example.com/test.png");
+content: linear-gradient(#e66465, #9198e5);
+
+/* Une valeur &lt;string&gt;, les caractères non-latin */
+/* doivent être échappées par ex. \000A9 for &amp;copy; */
+content: 'prefix';
+
+/* Valeurs utilisant un compteur */
+content: counter(compteur_chapitre);
+content: counter(compteur_section, ".");
+
+/* attr() lie à la valeur de l'attribut HTML */
+content: attr(value string);
+
+/* Mots-clés dépendant de langue */
+/* ou de la position             */
+content: open-quote;
+content: close-quote;
+content: no-open-quote;
+content: no-close-quote;
+
+/* Sauf avec normal et none, on peut utiliser */
+/* plusieurs valeurs de façon simultanée */
+content: open-quote chapter_counter;
+
+/* Valeurs globales */
+content: inherit;
+content: initial;
+content: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Le pseudo-élément n'est pas généré.</dd>
+ <dt><code>normal</code></dt>
+ <dd>Résulte en <code>none</code> pour les pseudo-éléments <code>:before</code> et <code>:after</code>.</dd>
+ <dt>{{cssxref("&lt;string&gt;")}}</dt>
+ <dd>Contenu sous forme de texte. Les caractères non-latins doivent être encodés avec leur séquence d'échappement Unicode (<code>\000A9</code> représentera par exemple le symbole ©).</dd>
+ <dt>{{cssxref("&lt;image&gt;")}}</dt>
+ <dd>Une image (valeur de type {{cssxref("&lt;image&gt;")}}) de type {{cssxref("&lt;url&gt;")}} ou {{cssxref("&lt;gradient&gt;")}} ou une partie de la page web fournie par la fonction {{cssxref("element", "element()")}} et qui indique le contenu à afficher.</dd>
+ <dt><code>counter()</code> ou <code>counters()</code> (cf. {{cssxref("&lt;counter&gt;")}})</dt>
+ <dd>Un compteur CSS, généralement un nombre, qui peut être affiché grâce à la fonction {{cssxref("counter")}} or {{cssxref("counters")}}.</dd>
+ <dd>La première possède deux formes : 'counter(<var>name</var>)' ou 'counter(<var>name</var>, <var>style</var>)'. Le texte généré est la valeur du compteur le plus profond possédant un nom donné dans ce pseudo-élément ; il est formaté selon le style indiqué (<code>decimal</code> par défaut).</dd>
+ <dd>La seconde a également deux formes : <code>counters(<var>name</var>, <var>string</var>)</code> ou <code>counters(<var>name</var>, <var>string</var>, <var>style</var>)</code>. Le texte généré est la valeur de tous les compteurs d'un nom donné dans ce pseudo-élément, depuis le moins profond jusqu'au plus profond séparés par la chaîne définie. Les compteurs sont formatés selon le style indiqué (<code>decimal</code> par défaut). Voir <a href="/fr/docs/Web/CSS/counter">la section sur les compteurs automatiques</a> et sur la numérotation pour plus d'informations.</dd>
+ <dt><code>attr(X)</code></dt>
+ <dd>Renvoie la valeur de l'attribut X de l'élément comme une chaîne. S'il n'existe pas d'attribut X, une chaîne vide est renvoyée. La sensibilité à la casse du nom de l'attribut dépend du langage utilisé.</dd>
+ <dt><code>open-quote</code> | <code>close-quote</code></dt>
+ <dd>Ces valeurs sont remplacées par la chaîne appropriée de la propriété {{ cssxref("quotes") }}.</dd>
+ <dt><code>no-open-quote</code> | <code>no-close-quote</code></dt>
+ <dd>N'introduit aucun contenu, mais incrémente (respectivement décrémente) le niveau d'imbrication des citations.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Titres_et_citations">Titres et citations</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;h1&gt;5&lt;/h1&gt;
+&lt;p&gt; Commençons par une citation de Sir Tim Berners-Lee,
+    &lt;q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet"&gt;
+        I was lucky enough to invent the Web at the time when the Internet already existed - and had for a decade and a half.&lt;/q&gt;  We must understand that there is nothing fundamentally wrong with building on the contributions of others.
+&lt;/p&gt;
+
+&lt;h1&gt;6&lt;/h1&gt;
+&lt;p&gt; Citons le manifeste Mozilla
+    &lt;q cite="http://www.mozilla.org/about/manifesto/"&gt;
+        Internet est une ressource publique mondiale qui doit demeurer ouverte et accessible.
+&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">q {
+    color: #00008B;
+    font-style: italic;
+}
+
+q::before   { content: open-quote }
+q::after    { content: close-quote }
+
+h1::before  { content: "Chapitre "; }</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Titres_et_citations', 460, 100)}}</p>
+
+<h3 id="Ajouter_une_icône_avant_un_lien">Ajouter une icône avant un lien</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;a href="http://www.mozilla.org/fr/"&gt;Accueil&lt;/a&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">a::before{
+    content: url(https://mozorg.cdn.mozilla.net/media/img/favicon.ico) " MOZILLA: ";
+    font:    x-small Arial,freeSans,sans-serif;
+    color:   gray;
+}</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample('Ajouter_une_icône_avant_un_lien', 200, 60)}}</p>
+
+<h3 id="Utiliser_les_classes">Utiliser les classes</h3>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;h2&gt;Top des ventes&lt;/h2&gt;
+&lt;ol&gt;
+    &lt;li&gt;Thriller politique&lt;/li&gt;
+    &lt;li class="nouveaute"&gt;Histoires effrayantes&lt;/li&gt;
+    &lt;li&gt;Ma biographie&lt;/li&gt;
+    &lt;li class="nouveaute"&gt;Bit-lit&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css">.nouveaute::after {
+    content: " Nouveau !";
+    color: red;
+}</pre>
+
+<h4 id="Résultat_3">Résultat</h4>
+
+<p>{{EmbedLiveSample('Utiliser_les_classes', 300, 200)}}</p>
+
+<h3 id="Utiliser_les_attributs_d’image_et_d’élément">Utiliser les attributs d’image et d’élément</h3>
+
+<p>Dans cet exemple, on insère une image avant chaque lien et on ajoute son identifiant après.</p>
+
+<h4 id="HTML_4">HTML</h4>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;&lt;a id="moz" href="https://www.mozilla.org/"&gt;Page d'accueil Mozilla&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a id="mdn" href="https://developer.mozilla.org/"&gt;Mozilla Developer Network&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h4 id="CSS_4">CSS</h4>
+
+<pre class="brush: css">a {
+  text-decoration: none;
+  border-bottom: 3px dotted navy;
+}
+
+a::after {
+  content: " (" attr(id) ")";
+}
+
+#moz::before {
+  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico");
+}
+
+#mdn::before {
+  content: url("https://mozorg.cdn.mozilla.net/files/7691/mdn-favicon16.ico");
+}
+
+li {
+  margin: 1em;
+}</pre>
+
+<h4 id="Résultat_4">Résultat</h4>
+
+<p>{{EmbedLiveSample("Utiliser_les_attributs_d’images_et_d’élément", '100%', 160)}}</p>
+
+<h3 id="Remplacer_un_élément">Remplacer un élément</h3>
+
+<p>Dans cet exemple, on remplace le contenu d'un élément avec une image. Il est possible de remplacer le contenu d'un élément avec une valeur de type {{cssxref("&lt;url&gt;")}} ou {{cssxref("&lt;image&gt;")}} . Le contenu ajouté avec <code>::before</code> ou avec <code>::after</code> ne sera plus généré car l'élément sera devenu un élément remplacé.</p>
+
+<h4 id="HTML_5">HTML</h4>
+
+<pre class="brush: html">&lt;div id="replaced"&gt;Mozilla&lt;/div&gt;
+</pre>
+
+<h4 id="CSS_5">CSS</h4>
+
+<pre class="brush: css">#replaced {
+  content: url("https://mdn.mozillademos.org/files/12668/MDN.svg");
+}
+
+#replaced::after { /* Ceci ne sera pas affiché, */
+                   /* l'élément sera un élément remplacé */
+  content: " (" attr(id) ")";
+}</pre>
+
+<h4 id="Résultat_5">Résultat</h4>
+
+<p>{{EmbedLiveSample('Remplacer_un_élément', '100%', 200)}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Le contenu généré par CSS n'est pas inclus dans le <a href="/fr/docs/Web/API/Document_Object_Model/Introduction">DOM</a>. Pour cette raison, il ne fait pas partie de l'<a href="/fr/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">arbre d'accessibilité</a> et certaines technologies d'assistances ou certains navigateurs ne permettront pas d'annoncer ce contenu. Si ce contenu porte des informations essentielles à la compréhension de la page, il faut inclure ces informations de façon sémantique dans le document principal.</p>
+
+<ul>
+ <li><a href="https://tink.uk/accessibility-support-for-css-generated-content/">La prise en charge relative à l'accessibilité pour les contenus générés par CSS generated content – Tink (en anglais)</a></li>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">Comprendre les règles WCAG 1.3</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html"><em>Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Content", "#content-property", "content")}}</td>
+   <td>{{Spec2("CSS3 Content")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'generate.html#content', 'content')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.content")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("::after")}}</li>
+ <li>{{cssxref("::before")}}</li>
+ <li>{{cssxref("quotes")}}</li>
+ <li>{{Cssxref("::marker")}}</li>
+ <li>{{cssxref("url()", "url()")}}</li>
+</ul>
diff --git a/files/fr/web/css/contexte_de_formatage_en_ligne/index.html b/files/fr/web/css/contexte_de_formatage_en_ligne/index.html
new file mode 100644
index 0000000000..bb40bcce6d
--- /dev/null
+++ b/files/fr/web/css/contexte_de_formatage_en_ligne/index.html
@@ -0,0 +1,63 @@
+---
+title: Contexte de formatage en ligne (inline/incise)
+slug: Web/CSS/Contexte_de_formatage_en_ligne
+tags:
+  - CSS
+  - Guide
+translation_of: Web/CSS/Inline_formatting_context
+---
+<p>{{CSSRef}}</p>
+
+<p>Dans cet article, nous allons voir ce qu'est le contexte de formatage en ligne (<em>inline formatting context</em>).</p>
+
+<h2 id="Concepts-clés">Concepts-clés</h2>
+
+<p>Le contexte de formatage en ligne est une des méthodes permettant de créer le rendu visuel d'une page web. Les boîtes en ligne sont disposées les unes après les autres selon le mode d'écriture utilisé :</p>
+
+<ul>
+ <li>Pour un mode d'écriture horizontal, les boîtes en ligne sont disposées horizontalement de la gauche vers la droite.</li>
+ <li>Pour une mode d'écriture vertical, les boîtes en lignes sont disposées verticalement du haut vers le bas.</li>
+</ul>
+
+<p>Dans l'exemple qui suit, on a deux éléments ({{HTMLElement("div")}}) avec une bordure noire qui forment chacuns <a href="/fr/docs/Web/CSS/Block_formatting_context">un contexte de formatage de bloc</a> au sein duquel chaque mot contribue à un contexte de formatage en ligne. Les boîtes utilisées dans le mode d'écriture horizontal sont organisées horizontalement tandis que celles dans l'élément avec un mode d'écriture vertical sont disposées verticalement.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/inline-formatting/inline.html", '100%', 720)}}</p>
+
+<p>Les boîtes qui forment une ligne sont contenues dans une zone rectangulaire qu'on appelle boîte de ligne (<em>line box</em>). Cette boîte sera assez grande pour contenir l'ensemble des boîtes en ligne de cette ligne. Lorsqu'il n'y a plus de place disponible sur l'axe en ligne, une autre ligne est créée. Ainsi, un paragraphe est formé par un ensemble de boîtes de ligne, empilées le long de l'axe de bloc.</p>
+
+<p>Lorsqu'une boîte en ligne est découpée en deux, les marges, bordures et le remplissage (<em>padding</em>) n'ont pas d'impact visuel à l'emplacement de la séparation. Dans le prochain exemple, on peut voir un élément ({{HTMLElement("span")}}) enveloppant un ensemble de mots s'étirant sur deux lignes. On voit que la bordure sur <code>&lt;span&gt;</code> est coupée au passage à la ligne.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/inline-formatting/break.html", '100%', 720)}}</p>
+
+<p>Les marges, les bordures et le remplissage (<em>padding</em>) le long de la direction en ligne sont respectés. Dans l'exemple suivant, on peut voir comment sont ajoutés les marges, bordures et le remplissage à l'élément en ligne <code>&lt;span&gt;</code> qui a été ajouté.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/inline-formatting/mbp.html", '100%', 920)}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong> : Dans ces exemples, on utilise les propriétés logiques (relatives à la direction du flux avec le mode d'écriture et la directionnalité) (ex. {{cssxref("padding-inline-start")}} plutôt que {{cssxref("padding-left")}}) afin qu'elles s'appliquent le long de la direction en ligne, que le texte soit horizontal ou vertical. Pour en savoir plus sur ces propriétés, voir <a href="/fr/docs/Web/CSS/CSS_Logical_Properties">les propriétés et les valeurs logiques en CSS</a>.</p>
+</div>
+
+<h2 id="Alignement_sur_la_direction_de_bloc_block">Alignement sur la direction de bloc (<em>block</em>)</h2>
+
+<p>Les boîtes en ligne peuvent être alignées sur la direction de bloc de différentes façons avec la propriété {{cssxref("vertical-align")}}. Celle-ci permettra d'aligner le contenu sur l'axe de bloc (lorsque le mode d'écriture est vertical, <code>vertical-align</code> ne permet pas d'aligner sur l'axe vertical !). Dans l'exemple qui suit, une portion de texte plus grande rend la boîte de ligne plus grande pour la première phrase. On peut alors utiliser <code>vertical-align</code> afin d'aligner les boîtes en ligne. L'exemple utilise initialement la valeur <code>top</code> mais vous pouvez le modifier en utilisant <code>middle</code>, <code>bottom</code> ou encore <code>baseline</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/inline-formatting/align.html", '100%', 920)}}</p>
+
+<h2 id="Alignement_le_long_de_la_direction_en_ligne_inline">Alignement le long de la direction en ligne (<em>inline</em>)</h2>
+
+<p>S'il reste de l'espace le long de la direction en ligne, la propriété {{cssxref("text-align")}} permetra d'aligner le contenu des boîtes en lignes au sein des boîtes de ligne. Dans l'exemple qui suit, vous pouvez notamment changer la valeur de <code>text-align</code> afin d'utiliser <code>end</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/inline-formatting/text-align.html", '100%', 920)}}</p>
+
+<h2 id="Effets_du_flottement_float">Effets du flottement (<code>float</code>)</h2>
+
+<p>Les boîtes de ligne ont généralement la même taille sur l'axe en ligne (c'est-à-dire la même largeur quand on utilise un mode d'écriture horizontal ou la même hauteur si on utilise un mode d'écriture vertical). S'il existe un élément flottant ({{cssxref("float")}}) au sein du même contexte de formatage de bloc, cet élément entraînera la diminution de la taille des boîtes de ligne pour celles qui entourent l'élément flottant.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/float.html", '100%', 720)}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Block_formatting_context">Le contexte de formatage en bloc</a></li>
+ <li><a href="/fr/docs/Web/CSS/Modèle_de_mise_en_forme_visuelle">Le modèle de formatage visuel</a></li>
+</ul>
diff --git a/files/fr/web/css/couleurs_css/index.html b/files/fr/web/css/couleurs_css/index.html
new file mode 100644
index 0000000000..75f099f9d7
--- /dev/null
+++ b/files/fr/web/css/couleurs_css/index.html
@@ -0,0 +1,132 @@
+---
+title: Couleurs CSS
+slug: Web/CSS/Couleurs_CSS
+tags:
+  - Aperçu
+  - CSS
+  - CSS Color
+  - Reference
+translation_of: Web/CSS/CSS_Color
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>Les couleurs CSS</strong> (<em>CSS Color</em> en anglais) forment un module CSS qui décrit la manipulation des couleurs, les types de données liées aux couleurs et l'application de la transparence en CSS.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés_CSS">Propriétés CSS</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("color")}}</li>
+ <li>{{cssxref("opacity")}}</li>
+</ul>
+</div>
+
+<h3 id="Types_de_donnée">Types de donnée</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("&lt;color&gt;")}}</li>
+</ul>
+</div>
+
+<h2 id="Guide">Guide</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/HTML/Applying_color">Appliquer des couleurs sur des éléments HTML grâce à CSS</a></dt>
+ <dd>Un guide qui illustre comment utiliser CSS afin d'appliquer des couleurs sur différents contenus.</dd>
+</dl>
+
+<h2 id="Outils">Outils</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/Couleurs_CSS/Sélecteur_de_couleurs">Un sélecteur de couleurs</a></dt>
+ <dd>Cet outil vous permet de créer, ajuster et manipuler des couleurs.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Colors')}}</td>
+   <td>{{Spec2('CSS3 Colors')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>3.0</td>
+   <td>3.5</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>6.0</td>
+   <td>6.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Attention, en CSS, les dégradés de couleurs ne sont pas des couleurs mais <a href="/fr/docs/Web/CSS/CSS_Images">des images</a>.</li>
+ <li>Les autres propriétés relatives aux couleurs et qui font partie d'autres modules de spécification : {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}}.</li>
+</ul>
diff --git a/files/fr/web/css/couleurs_css/sélecteur_de_couleurs/index.html b/files/fr/web/css/couleurs_css/sélecteur_de_couleurs/index.html
new file mode 100644
index 0000000000..df4aa4661c
--- /dev/null
+++ b/files/fr/web/css/couleurs_css/sélecteur_de_couleurs/index.html
@@ -0,0 +1,3235 @@
+---
+title: Sélecteur de couleurs CSS
+slug: Web/CSS/Couleurs_CSS/Sélecteur_de_couleurs
+tags:
+  - CSS
+  - Outil
+translation_of: Web/CSS/CSS_Colors/Color_picker_tool
+---
+<div style="display: none;">
+<h2 id="ColorPIcker_Tool" name="ColorPIcker_Tool">ColorPIcker Tool</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html"> &lt;div id="container"&gt;
+  &lt;div id="palette" class="block"&gt;
+   &lt;div id="color-palette"&gt;&lt;/div&gt;
+   &lt;div id="color-info"&gt;
+    &lt;div class="title"&gt;Couleurs CSS &lt;/div&gt;
+   &lt;/div&gt;
+  &lt;/div&gt;
+
+  &lt;div id="picker" class="block"&gt;
+   &lt;div class="ui-color-picker" data-topic="picker" data-mode="HSL"&gt;&lt;/div&gt;
+   &lt;div id="picker-samples" sample-id="master"&gt;&lt;/div&gt;
+   &lt;div id="controls"&gt;
+    &lt;div id="delete"&gt;
+     &lt;div id="trash-can"&gt;&lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div id="void-sample" class="icon"&gt;&lt;/div&gt;
+   &lt;/div&gt;
+  &lt;/div&gt;
+
+  &lt;div id="canvas" data-tutorial="drop"&gt;
+   &lt;div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index"
+    data-max="20" data-sensivity="10"&gt;&lt;/div&gt;
+  &lt;/div&gt;
+ &lt;/div&gt;
+
+</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">/*
+ * COLOR PICKER TOOL
+ */
+
+.ui-color-picker {
+	width: 420px;
+	margin: 0;
+	border: 1px solid #DDD;
+	background-color: #FFF;
+	display: table;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-color-picker .picking-area {
+	width: 198px;
+	height: 198px;
+	margin: 5px;
+	border: 1px solid #DDD;
+	position: relative;
+	float: left;
+	display: table;
+}
+
+.ui-color-picker .picking-area:hover {
+	cursor: default;
+}
+
+/* HSV format - Hue-Saturation-Value(Brightness) */
+.ui-color-picker .picking-area {
+	background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center;
+
+	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-ms-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-o-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+
+	background-color: #F00;
+}
+
+/* HSL format - Hue-Saturation-Lightness */
+.ui-color-picker[data-mode='HSL'] .picking-area {
+	background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background-color: #F00;
+}
+
+.ui-color-picker .picker {
+	width: 10px;
+	height: 10px;
+	border-radius: 50%;
+	border: 1px solid #FFF;
+	position: absolute;
+	top: 45%;
+	left: 45%;
+}
+
+.ui-color-picker .picker:before {
+	width: 8px;
+	height: 8px;
+	content: "";
+	position: absolute;
+	border: 1px solid #999;
+	border-radius: 50%;
+}
+
+.ui-color-picker .hue,
+.ui-color-picker .alpha {
+	width: 198px;
+	height: 28px;
+	margin: 5px;
+	border: 1px solid #FFF;
+	float: left;
+}
+
+.ui-color-picker .hue {
+	background: url("https://mdn.mozillademos.org/files/5701/hue.png") center;
+	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -ms-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -o-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+}
+
+.ui-color-picker .alpha {
+	border: 1px solid #CCC;
+	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+}
+
+.ui-color-picker .alpha-mask {
+	width: 100%;
+	height: 100%;
+	background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png");
+}
+
+.ui-color-picker .slider-picker {
+	width: 2px;
+	height: 100%;
+	border: 1px solid #777;
+	background-color: #FFF;
+	position: relative;
+	top: -1px;
+}
+
+/* input HSV and RGB */
+
+.ui-color-picker .info {
+	width: 200px;
+	margin: 5px;
+	float: left;
+}
+
+.ui-color-picker .info * {
+	float: left;
+}
+
+.ui-color-picker .input {
+	width: 64px;
+	margin: 5px 2px;
+	float: left;
+}
+
+.ui-color-picker .input .name {
+	height: 20px;
+	width: 30px;
+	text-align: center;
+	font-size: 14px;
+	line-height: 18px;
+	float: left;
+}
+
+.ui-color-picker .input input {
+	width: 30px;
+	height: 18px;
+	margin: 0;
+	padding: 0;
+	border: 1px solid #DDD;
+	text-align: center;
+	float: right;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+.ui-color-picker .input[data-topic="lightness"] {
+	display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="value"] {
+	display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="lightness"] {
+	display: block;
+}
+
+.ui-color-picker .input[data-topic="alpha"] {
+	margin-top: 10px;
+	width: 93px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] &gt; .name {
+	width: 60px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] &gt; input {
+	float: right;
+}
+
+.ui-color-picker .input[data-topic="hexa"] {
+	width: auto;
+	float: right;
+	margin: 6px 8px 0 0;
+}
+
+.ui-color-picker .input[data-topic="hexa"] &gt; .name {
+	display: none;
+}
+
+.ui-color-picker .input[data-topic="hexa"] &gt; input {
+	width: 90px;
+	height: 24px;
+	padding: 2px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/* Preview color */
+.ui-color-picker .preview {
+	width: 95px;
+	height: 53px;
+	margin: 5px;
+	margin-top: 10px;
+	border: 1px solid #DDD;
+	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+	float: left;
+	position: relative;
+}
+
+.ui-color-picker .preview:before {
+	height: 100%;
+	width: 50%;
+	left: 50%;
+	top: 0;
+	content: "";
+	background: #FFF;
+	position: absolute;
+	z-index: 1;
+}
+
+.ui-color-picker .preview-color {
+	width: 100%;
+	height: 100%;
+	background-color: rgba(255, 0, 0, 0.5);
+	position: absolute;
+	z-index: 1;
+}
+
+.ui-color-picker .switch_mode {
+	width: 10px;
+	height: 20px;
+	position: relative;
+	border-radius: 5px 0 0 5px;
+	border: 1px solid #DDD;
+	background-color: #EEE;
+	left: -12px;
+	top: -1px;
+	z-index: 1;
+	transition: all 0.5s;
+}
+
+.ui-color-picker .switch_mode:hover {
+	background-color: #CCC;
+	cursor: pointer;
+}
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider {
+	height: 20px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider &gt; input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*
+ * COLOR PICKER TOOL
+ */
+
+body {
+	max-width: 1000px;
+	margin: 0 auto;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	box-shadow: 0 0 5px 0 #999;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+
+}
+
+/**
+ * Resize Handle
+ */
+.resize-handle {
+	width: 10px;
+	height: 10px;
+	background: url('https://mdn.mozillademos.org/files/6083/resize.png') center center no-repeat;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+[data-resize='both']:hover {
+	cursor: nw-resize !important;
+}
+
+[data-resize='width']:hover {
+	cursor: w-resize !important;
+}
+
+[data-resize='height']:hover {
+	cursor: n-resize !important;
+}
+
+[data-hidden='true'] {
+	display: none;
+}
+
+[data-collapsed='true'] {
+	height: 0 !important;
+}
+
+.block {
+	display: table;
+}
+
+
+/**
+ * 	Container
+ */
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	display: table;
+}
+
+/**
+ * 	Picker Zone
+ */
+
+#picker {
+	padding: 10px;
+	width: 980px;
+}
+
+.ui-color-picker {
+	padding: 3px 5px;
+	float: left;
+	border-color: #FFF;
+}
+
+.ui-color-picker .switch_mode {
+	display: none;
+}
+
+.ui-color-picker .preview-color:hover {
+	cursor: move;
+}
+
+/**
+ * Picker Container
+ */
+
+#picker-samples {
+	width: 375px;
+	height: 114px;
+	max-height: 218px;
+	margin: 0 10px 0 30px;
+	overflow: hidden;
+	position: relative;
+	float: left;
+
+	transition: all 0.2s;
+}
+
+#picker-samples .sample {
+	width: 40px;
+	height: 40px;
+	margin: 5px;
+	border: 1px solid #DDD;
+	position: absolute;
+	float: left;
+	transition: all 0.2s;
+}
+
+#picker-samples .sample:hover {
+	cursor: pointer;
+	border-color: #BBB;
+	transform: scale(1.15);
+	border-radius: 3px;
+}
+
+#picker-samples .sample[data-active='true'] {
+	border-color: #999;
+}
+
+#picker-samples .sample[data-active='true']:after {
+	content: "";
+	position: absolute;
+	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
+	width: 100%;
+	height: 12px;
+	top: -12px;
+	z-index: 2;
+}
+
+#picker-samples #add-icon {
+	width: 100%;
+	height: 100%;
+	position: relative;
+	box-shadow: inset 0px 0px 2px 0px #DDD;
+}
+
+#picker-samples #add-icon:hover {
+	cursor: pointer;
+	border-color: #DDD;
+	box-shadow: inset 0px 0px 5px 0px #CCC;
+}
+
+#picker-samples #add-icon:before,
+#picker-samples #add-icon:after {
+	content: "";
+	position: absolute;
+	background-color: #EEE;
+	box-shadow: 0 0 1px 0 #EEE;
+}
+
+#picker-samples #add-icon:before {
+	width: 70%;
+	height: 16%;
+	top: 42%;
+	left: 15%;
+}
+
+#picker-samples #add-icon:after {
+	width: 16%;
+	height: 70%;
+	top: 15%;
+	left: 42%;
+}
+
+#picker-samples #add-icon:hover:before,
+#picker-samples #add-icon:hover:after {
+	background-color: #DDD;
+	box-shadow: 0 0 1px 0 #DDD;
+}
+
+/**
+ * 	Controls
+ */
+
+#controls {
+	width: 110px;
+	padding: 10px;
+	float: right;
+}
+
+#controls #picker-switch {
+	text-align: center;
+	float: left;
+}
+
+#controls .icon {
+	width: 48px;
+	height: 48px;
+	margin: 10px 0;
+	background-repeat: no-repeat;
+	background-position: center;
+	border: 1px solid #DDD;
+	display: table;
+	float: left;
+}
+
+#controls .icon:hover {
+	cursor: pointer;
+}
+
+#controls .picker-icon {
+	background-image: url('https://mdn.mozillademos.org/files/6081/picker.png');
+}
+
+#controls #void-sample {
+	margin-right: 10px;
+	background-image: url('https://mdn.mozillademos.org/files/6087/void.png');
+	background-position: center left;
+}
+
+#controls #void-sample[data-active='true'] {
+	border-color: #CCC;
+	background-position: center right;
+}
+
+#controls .switch {
+	width: 106px;
+	padding: 1px;
+	border: 1px solid #CCC;
+	font-size: 14px;
+	text-align: center;
+	line-height: 24px;
+	overflow: hidden;
+	float: left;
+}
+
+#controls .switch:hover {
+	cursor: pointer;
+}
+
+#controls .switch &gt; * {
+	width: 50%;
+	padding: 2px 0;
+	background-color: #EEE;
+	float: left;
+}
+
+#controls .switch [data-active='true'] {
+	color: #FFF;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-color: #777;
+}
+
+/**
+ * 	Trash Can
+ */
+
+#delete {
+	width: 100%;
+	height: 94px;
+	background-color: #DDD;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+
+	text-align: center;
+	color: #777;
+
+	position: relative;
+	float: right;
+}
+
+#delete #trash-can {
+	width: 80%;
+	height: 80%;
+	border: 2px dashed #FFF;
+	border-radius: 5px;
+	background: url('https://mdn.mozillademos.org/files/6085/trash-can.png') no-repeat center;
+
+	position: absolute;
+	top: 10%;
+	left: 10%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	transition: all 0.2s;
+}
+
+#delete[drag-state='enter'] {
+	background-color: #999;
+}
+
+/**
+ * 	Color Theme
+ */
+
+#color-theme {
+	margin: 0 8px 0 0;
+	border: 1px solid #EEE;
+	display: inline-block;
+	float: right;
+}
+
+#color-theme .box {
+	width: 80px;
+	height: 92px;
+	float: left;
+}
+
+/**
+ * Color info box
+ */
+#color-info {
+	width: 360px;
+	float: left;
+}
+
+#color-info .title {
+	width: 100%;
+	padding: 15px;
+	font-size: 18px;
+	text-align: center;
+	background-image: url('https://mdn.mozillademos.org/files/6071/color-wheel.png');
+	background-repeat:no-repeat;
+	background-position: center left 28%;
+}
+
+#color-info .copy-container {
+	position: absolute;
+	top: -100%;
+}
+
+#color-info .property {
+	min-width: 280px;
+	height: 30px;
+	margin: 10px 0;
+	text-align: center;
+	line-height: 30px;
+}
+
+#color-info .property &gt; * {
+	float: left;
+}
+
+#color-info .property .type {
+	width: 60px;
+	height: 100%;
+	padding: 0 16px 0 0;
+	text-align: right;
+}
+
+#color-info .property .value {
+	width: 200px;
+	height: 100%;
+	padding: 0 10px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	font-size: 16px;
+	color: #777;
+	text-align: center;
+	background-color: #FFF;
+	border: none;
+}
+
+#color-info .property .value:hover {
+	color: #37994A;
+}
+
+#color-info .property .value:hover + .copy {
+	background-position: center right;
+}
+
+#color-info .property .copy {
+	width: 24px;
+	height: 100%;
+	padding: 0 5px;
+	background-color: #FFF;
+	background-image: url('https://mdn.mozillademos.org/files/6073/copy.png');
+	background-repeat: no-repeat;
+	background-position: center left;
+	border-left: 1px solid #EEE;
+	text-align: right;
+	float: left;
+}
+
+#color-info .property .copy:hover {
+	background-position: center right;
+}
+
+
+/**
+ * 	Color Palette
+ */
+
+#palette {
+	width: 1000px;
+	padding: 10px 0;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+	background-color: #EEE;
+	color: #777;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#color-palette {
+	width: 640px;
+	font-family: Arial, Helvetica, sans-serif;
+	color: #777;
+	float: left;
+}
+
+#color-palette .container {
+	width: 100%;
+	height: 50px;
+	line-height: 50px;
+	overflow: hidden;
+	float: left;
+	transition: all 0.5s;
+}
+
+#color-palette .container &gt; * {
+	float: left;
+}
+
+#color-palette .title {
+	width: 100px;
+	padding: 0 10px;
+	text-align: right;
+	line-height: inherit;
+}
+
+#color-palette .palette {
+	width: 456px;
+	height: 38px;
+	margin: 3px;
+	padding: 3px;
+	display: table;
+	background-color: #FFF;
+}
+
+#color-palette .palette .sample {
+	width: 30px;
+	height: 30px;
+	margin: 3px;
+	position: relative;
+	border: 1px solid #DDD;
+	float: left;
+	transition: all 0.2s;
+}
+
+#color-palette .palette .sample:hover {
+	cursor: pointer;
+	border-color: #BBB;
+	transform: scale(1.15);
+	border-radius: 3px;
+}
+
+#color-palette .controls {
+}
+
+#color-palette .controls &gt; * {
+	float: left;
+}
+
+#color-palette .controls &gt; *:hover {
+	cursor: pointer;
+}
+
+#color-palette .controls .lock {
+	width: 24px;
+	height: 24px;
+	margin: 10px;
+	padding: 3px;
+	background-image: url('https://mdn.mozillademos.org/files/6077/lock.png');
+	background-repeat: no-repeat;
+	background-position: bottom right;
+}
+
+#color-palette .controls .lock:hover {
+	/*background-image: url('images/unlocked-hover.png');*/
+	background-position: bottom left;
+}
+
+#color-palette .controls .lock[locked-state='true'] {
+	/*background-image: url('images/locked.png');*/
+	background-position: top left ;
+}
+
+#color-palette .controls .lock[locked-state='true']:hover {
+	/*background-image: url('images/lock-hover.png');*/
+	background-position: top right;
+}
+
+/**
+ * Canvas
+ */
+
+#canvas {
+	width: 100%;
+	height: 300px;
+	min-height: 250px;
+	border-top: 1px solid #DDD;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+	position: relative;
+	float: left;
+}
+
+#canvas[data-tutorial='drop'] {
+	text-align: center;
+	font-size: 30px;
+	color: #777;
+}
+
+#canvas[data-tutorial='drop']:before {
+	content: "Déposez vos couleurs ici";
+	width: 40%;
+	padding: 30px 9% 70px 11%;
+
+	background-image: url('https://mdn.mozillademos.org/files/6075/drop.png');
+	background-repeat: no-repeat;
+	background-position: left 35px top 60%;
+
+	text-align: center;
+
+	border: 3px dashed rgb(221, 221, 221);
+	border-radius: 15px;
+
+	position: absolute;
+	top: 50px;
+	left: 20%;
+}
+
+#canvas[data-tutorial='drop']:after {
+	content: "pour les comparer, les ajuster ou les modifier.";
+	width: 40%;
+	font-size: 24px;
+	position: absolute;
+	top: 130px;
+	left: 32%;
+	z-index: 2;
+}
+
+#canvas [data-tutorial='dblclick'] {
+	background-color: #999 !important;
+}
+
+#canvas [data-tutorial='dblclick']:before {
+	content: "double click pour activer";
+	width: 80px;
+	color: #FFF;
+	position: absolute;
+	top: 10%;
+	left: 20%;
+	z-index: 2;
+}
+
+#canvas .sample {
+	width: 100px;
+	height: 100px;
+	min-width: 20px;
+	min-height: 20px;
+	position: absolute;
+	border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+#canvas .sample:hover {
+	cursor: move;
+}
+
+#canvas .sample[data-active='true']:after {
+	content: "";
+	position: absolute;
+	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
+	width: 100%;
+	height: 12px;
+	top: -12px;
+	z-index: 2;
+}
+
+#canvas .sample:hover &gt; * {
+	cursor: pointer;
+	display: block !important;
+}
+
+#canvas .sample .resize-handle {
+	display: none;
+}
+
+#canvas .sample .pick {
+	width: 10px;
+	height: 10px;
+	margin: 5px;
+	background: url('https://mdn.mozillademos.org/files/6079/pick.png') center no-repeat;
+	position: absolute;
+	top: 0;
+	left: 0;
+	display: none;
+}
+
+#canvas .sample .delete {
+	width: 10px;
+	height: 10px;
+	margin: 5px;
+	background: url('https://mdn.mozillademos.org/files/6069/close.png') center no-repeat;
+	position: absolute;
+	top: 0;
+	right: 0;
+	display: none;
+}
+
+
+/**
+ * Canvas controls
+ */
+
+#canvas .toggle-bg {
+	width: 16px;
+	height: 16px;
+	margin: 5px;
+	background: url("images/canvas-controls.png") center left no-repeat;
+	position: absolute;
+	top: 0;
+	right: 0;
+}
+
+#canvas .toggle-bg:hover {
+	cursor: pointer;
+}
+
+#canvas[data-bg='true'] {
+	background: none;
+}
+
+#canvas[data-bg='true'] .toggle-bg {
+	background: url('https://mdn.mozillademos.org/files/6067/canvas-controls.png') center right no-repeat;
+}
+
+#zindex {
+	height: 20px;
+	margin: 5px;
+	font-size: 16px;
+	position: absolute;
+	opacity: 0;
+	top: -10000px;
+	left: 0;
+	color: #777;
+	float: left;
+	transition: opacity 1s;
+}
+
+#zindex input {
+	border: 1px solid #DDD;
+	font-size: 16px;
+	color: #777;
+}
+
+#zindex .ui-input-slider-info {
+	width: 60px;
+}
+
+#zindex[data-active='true'] {
+	top: 0;
+	opacity: 1;
+}
+
+</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js">'use strict';
+
+var UIColorPicker = (function UIColorPicker() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	var subscribers = [];
+	var pickers = [];
+
+	/**
+	 * RGBA Color class
+	 *
+	 * HSV/HSB and HSL (hue, saturation, value / brightness, lightness)
+	 * @param hue			0-360
+	 * @param saturation	0-100
+	 * @param value 		0-100
+	 * @param lightness		0-100
+	 */
+
+	function Color(color) {
+
+		if(color instanceof Color === true) {
+			this.copy(color);
+			return;
+		}
+
+		this.r = 0;
+		this.g = 0;
+		this.b = 0;
+		this.a = 1;
+		this.hue = 0;
+		this.saturation = 0;
+		this.value = 0;
+		this.lightness = 0;
+		this.format = 'HSV';
+	}
+
+	function RGBColor(r, g, b) {
+		var color = new Color();
+		color.setRGBA(r, g, b, 1);
+		return color;
+	}
+
+	function RGBAColor(r, g, b, a) {
+		var color = new Color();
+		color.setRGBA(r, g, b, a);
+		return color;
+	}
+
+	function HSVColor(h, s, v) {
+		var color = new Color();
+		color.setHSV(h, s, v);
+		return color;
+	}
+
+	function HSVAColor(h, s, v, a) {
+		var color = new Color();
+		color.setHSV(h, s, v);
+		color.a = a;
+		return color;
+	}
+
+	function HSLColor(h, s, l) {
+		var color = new Color();
+		color.setHSL(h, s, l);
+		return color;
+	}
+
+	function HSLAColor(h, s, l, a) {
+		var color = new Color();
+		color.setHSL(h, s, l);
+		color.a = a;
+		return color;
+	}
+
+	Color.prototype.copy = function copy(obj) {
+		if(obj instanceof Color !== true) {
+			console.log('Typeof parameter not Color');
+			return;
+		}
+
+		this.r = obj.r;
+		this.g = obj.g;
+		this.b = obj.b;
+		this.a = obj.a;
+		this.hue = obj.hue;
+		this.saturation = obj.saturation;
+		this.value = obj.value;
+		this.format = '' + obj.format;
+		this.lightness = obj.lightness;
+	};
+
+	Color.prototype.setFormat = function setFormat(format) {
+		if (format === 'HSV')
+			this.format = 'HSV';
+		if (format === 'HSL')
+			this.format = 'HSL';
+	};
+
+	/*========== Methods to set Color Properties ==========*/
+
+	Color.prototype.isValidRGBValue = function isValidRGBValue(value) {
+		return (typeof(value) === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
+			value &gt;= 0 &amp;&amp; value &lt;= 255);
+	};
+
+	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
+		if (this.isValidRGBValue(red) === false ||
+			this.isValidRGBValue(green) === false ||
+			this.isValidRGBValue(blue) === false)
+			return;
+
+			this.r = red | 0;
+			this.g = green | 0;
+			this.b = blue | 0;
+
+		if (this.isValidRGBValue(alpha) === true)
+			this.a = alpha | 0;
+	};
+
+	Color.prototype.setByName = function setByName(name, value) {
+		if (name === 'r' || name === 'g' || name === 'b') {
+			if(this.isValidRGBValue(value) === false)
+				return;
+
+			this[name] = value;
+			this.updateHSX();
+		}
+	};
+
+	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.value = value;
+		this.HSVtoRGB();
+	};
+
+	Color.prototype.setHSL = function setHSL(hue, saturation, lightness) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.lightness = lightness;
+		this.HSLtoRGB();
+	};
+
+	Color.prototype.setHue = function setHue(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value &lt; 0 || value &gt; 359)
+			return;
+		this.hue = value;
+		this.updateRGB();
+	};
+
+	Color.prototype.setSaturation = function setSaturation(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value &lt; 0 || value &gt; 100)
+			return;
+		this.saturation = value;
+		this.updateRGB();
+	};
+
+	Color.prototype.setValue = function setValue(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value &lt; 0 || value &gt; 100)
+			return;
+		this.value = value;
+		this.HSVtoRGB();
+	};
+
+	Color.prototype.setLightness = function setLightness(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value &lt; 0 || value &gt; 100)
+			return;
+		this.lightness = value;
+		this.HSLtoRGB();
+	};
+
+	Color.prototype.setHexa = function setHexa(value) {
+		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value);
+
+		if (valid !== true)
+			return;
+
+		if (value[0] === '#')
+			value = value.slice(1, value.length);
+
+		if (value.length === 3)
+			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,'$1$1$2$2$3$3');
+
+		this.r = parseInt(value.substr(0, 2), 16);
+		this.g = parseInt(value.substr(2, 2), 16);
+		this.b = parseInt(value.substr(4, 2), 16);
+
+		this.alpha	= 1;
+		this.RGBtoHSV();
+	};
+
+	/*========== Conversion Methods ==========*/
+
+	Color.prototype.convertToHSL = function convertToHSL() {
+		if (this.format === 'HSL')
+			return;
+
+		this.setFormat('HSL');
+		this.RGBtoHSL();
+	};
+
+	Color.prototype.convertToHSV = function convertToHSV() {
+		if (this.format === 'HSV')
+			return;
+
+		this.setFormat('HSV');
+		this.RGBtoHSV();
+	};
+
+	/*========== Update Methods ==========*/
+
+	Color.prototype.updateRGB = function updateRGB() {
+		if (this.format === 'HSV') {
+			this.HSVtoRGB();
+			return;
+		}
+
+		if (this.format === 'HSL') {
+			this.HSLtoRGB();
+			return;
+		}
+	};
+
+	Color.prototype.updateHSX = function updateHSX() {
+		if (this.format === 'HSV') {
+			this.RGBtoHSV();
+			return;
+		}
+
+		if (this.format === 'HSL') {
+			this.RGBtoHSL();
+			return;
+		}
+	};
+
+	Color.prototype.HSVtoRGB = function HSVtoRGB() {
+		var sat = this.saturation / 100;
+		var value = this.value / 100;
+		var C = sat * value;
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = value - C;
+		var precision = 255;
+
+		C = (C + m) * precision | 0;
+		X = (X + m) * precision | 0;
+		m = m * precision | 0;
+
+		if (H &gt;= 0 &amp;&amp; H &lt; 1) {	this.setRGBA(C, X, m);	return; }
+		if (H &gt;= 1 &amp;&amp; H &lt; 2) {	this.setRGBA(X, C, m);	return; }
+		if (H &gt;= 2 &amp;&amp; H &lt; 3) {	this.setRGBA(m, C, X);	return; }
+		if (H &gt;= 3 &amp;&amp; H &lt; 4) {	this.setRGBA(m, X, C);	return; }
+		if (H &gt;= 4 &amp;&amp; H &lt; 5) {	this.setRGBA(X, m, C);	return; }
+		if (H &gt;= 5 &amp;&amp; H &lt; 6) {	this.setRGBA(C, m, X);	return; }
+	};
+
+	Color.prototype.HSLtoRGB = function HSLtoRGB() {
+		var sat = this.saturation / 100;
+		var light = this.lightness / 100;
+		var C = sat * (1 - Math.abs(2 * light - 1));
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = light - C/2;
+		var precision = 255;
+
+		C = (C + m) * precision | 0;
+		X = (X + m) * precision | 0;
+		m = m * precision | 0;
+
+		if (H &gt;= 0 &amp;&amp; H &lt; 1) {	this.setRGBA(C, X, m);	return; }
+		if (H &gt;= 1 &amp;&amp; H &lt; 2) {	this.setRGBA(X, C, m);	return; }
+		if (H &gt;= 2 &amp;&amp; H &lt; 3) {	this.setRGBA(m, C, X);	return; }
+		if (H &gt;= 3 &amp;&amp; H &lt; 4) {	this.setRGBA(m, X, C);	return; }
+		if (H &gt;= 4 &amp;&amp; H &lt; 5) {	this.setRGBA(X, m, C);	return; }
+		if (H &gt;= 5 &amp;&amp; H &lt; 6) {	this.setRGBA(C, m, X);	return; }
+	};
+
+	Color.prototype.RGBtoHSV = function RGBtoHSV() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / cmax;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue &lt; 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.value = (cmax * 100) | 0;
+	};
+
+	Color.prototype.RGBtoHSL = function RGBtoHSL() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+		var lightness = (cmax + cmin) / 2;
+		var X = (1 - Math.abs(2 * lightness - 1));
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / X;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue &lt; 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.lightness = (lightness * 100) | 0;
+	};
+
+	/*========== Get Methods ==========*/
+
+	Color.prototype.getHexa = function getHexa() {
+		var r = this.r.toString(16);
+		var g = this.g.toString(16);
+		var b = this.b.toString(16);
+		if (this.r &lt; 16) r = '0' + r;
+		if (this.g &lt; 16) g = '0' + g;
+		if (this.b &lt; 16) b = '0' + b;
+		var value = '#' + r + g + b;
+		return value.toUpperCase();
+	};
+
+	Color.prototype.getRGBA = function getRGBA() {
+
+		var rgb = '(' + this.r + ', ' + this.g + ', ' + this.b;
+		var a = '';
+		var v = '';
+		var x = parseFloat(this.a);
+		if (x !== 1) {
+			a = 'a';
+			v = ', ' + x;
+		}
+
+		var value = 'rgb' + a + rgb + v + ')';
+		return value;
+	};
+
+	Color.prototype.getHSLA = function getHSLA() {
+		if (this.format === 'HSV') {
+			var color = new Color(this);
+			color.setFormat('HSL');
+			color.updateHSX();
+			return color.getHSLA();
+		}
+
+		var a = '';
+		var v = '';
+		var hsl = '(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness +'%';
+		var x = parseFloat(this.a);
+		if (x !== 1) {
+			a = 'a';
+			v = ', ' + x;
+		}
+
+		var value = 'hsl' + a + hsl + v + ')';
+		return value;
+	};
+
+	Color.prototype.getColor = function getColor() {
+		if (this.a | 0 === 1)
+			return this.getHexa();
+		return this.getRGBA();
+	};
+
+	/*=======================================================================*/
+	/*=======================================================================*/
+
+	/*========== Capture Mouse Movement ==========*/
+
+	var setMouseTracking = function setMouseTracking(elem, callback) {
+		elem.addEventListener('mousedown', function(e) {
+			callback(e);
+			document.addEventListener('mousemove', callback);
+		});
+
+		document.addEventListener('mouseup', function(e) {
+			document.removeEventListener('mousemove', callback);
+		});
+	};
+
+	/*====================*/
+	// Color Picker Class
+	/*====================*/
+
+	function ColorPicker(node) {
+		this.color = new Color();
+		this.node = node;
+		this.subscribers = [];
+
+		var type = this.node.getAttribute('data-mode');
+		var topic = this.node.getAttribute('data-topic');
+
+		this.topic = topic;
+		this.picker_mode = (type === 'HSL') ? 'HSL' : 'HSV';
+		this.color.setFormat(this.picker_mode);
+
+		this.createPickingArea();
+		this.createHueArea();
+
+		this.newInputComponent('H', 'hue', this.inputChangeHue.bind(this));
+		this.newInputComponent('S', 'saturation', this.inputChangeSaturation.bind(this));
+		this.newInputComponent('V', 'value', this.inputChangeValue.bind(this));
+		this.newInputComponent('L', 'lightness', this.inputChangeLightness.bind(this));
+
+		this.createAlphaArea();
+
+		this.newInputComponent('R', 'red', this.inputChangeRed.bind(this));
+		this.newInputComponent('G', 'green', this.inputChangeGreen.bind(this));
+		this.newInputComponent('B', 'blue', this.inputChangeBlue.bind(this));
+
+		this.createPreviewBox();
+		this.createChangeModeButton();
+
+		this.newInputComponent('alpha', 'alpha', this.inputChangeAlpha.bind(this));
+		this.newInputComponent('hexa', 'hexa', this.inputChangeHexa.bind(this));
+
+		this.setColor(this.color);
+		pickers[topic] = this;
+	}
+
+	/*************************************************************************/
+	//				Function for generating the color-picker
+	/*************************************************************************/
+
+	ColorPicker.prototype.createPickingArea = function createPickingArea() {
+		var area = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'picking-area';
+		picker.className = 'picker';
+
+		this.picking_area = area;
+		this.color_picker = picker;
+		setMouseTracking(area, this.updateColor.bind(this));
+
+		area.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createHueArea = function createHueArea() {
+		var area = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'hue';
+		picker.className ='slider-picker';
+
+		this.hue_area = area;
+		this.hue_picker = picker;
+		setMouseTracking(area, this.updateHueSlider.bind(this));
+
+		area.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createAlphaArea = function createAlphaArea() {
+		var area = document.createElement('div');
+		var mask = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'alpha';
+		mask.className = 'alpha-mask';
+		picker.className = 'slider-picker';
+
+		this.alpha_area = area;
+		this.alpha_mask = mask;
+		this.alpha_picker = picker;
+		setMouseTracking(area, this.updateAlphaSlider.bind(this));
+
+		area.appendChild(mask);
+		mask.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createPreviewBox = function createPreviewBox(e) {
+		var preview_box = document.createElement('div');
+		var preview_color = document.createElement('div');
+
+		preview_box.className = 'preview';
+		preview_color.className = 'preview-color';
+
+		this.preview_color = preview_color;
+
+		preview_box.appendChild(preview_color);
+		this.node.appendChild(preview_box);
+	};
+
+	ColorPicker.prototype.newInputComponent = function newInputComponent(title, topic, onChangeFunc) {
+		var wrapper = document.createElement('div');
+		var input = document.createElement('input');
+		var info = document.createElement('span');
+
+		wrapper.className = 'input';
+		wrapper.setAttribute('data-topic', topic);
+		info.textContent = title;
+		info.className = 'name';
+		input.setAttribute('type', 'text');
+
+		wrapper.appendChild(info);
+		wrapper.appendChild(input);
+		this.node.appendChild(wrapper);
+
+		input.addEventListener('change', onChangeFunc);
+		input.addEventListener('click', function() {
+			this.select();
+		});
+
+		this.subscribe(topic, function(value) {
+			input.value = value;
+		});
+	};
+
+	ColorPicker.prototype.createChangeModeButton = function createChangeModeButton() {
+
+		var button = document.createElement('div');
+		button.className = 'switch_mode';
+		button.addEventListener('click', function() {
+			if (this.picker_mode === 'HSV')
+				this.setPickerMode('HSL');
+			else
+				this.setPickerMode('HSV');
+
+		}.bind(this));
+
+		this.node.appendChild(button);
+	};
+
+	/*************************************************************************/
+	//					Updates properties of UI elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.updateColor = function updateColor(e) {
+		var x = e.pageX - this.picking_area.offsetLeft;
+		var y = e.pageY - this.picking_area.offsetTop;
+		var picker_offset = 5;
+
+		// width and height should be the same
+		var size = this.picking_area.clientWidth;
+
+		if (x &gt; size) x = size;
+		if (y &gt; size) y = size;
+		if (x &lt; 0) x = 0;
+		if (y &lt; 0) y = 0;
+
+		var value = 100 - (y * 100 / size) | 0;
+		var saturation = x * 100 / size | 0;
+
+		if (this.picker_mode === 'HSV')
+			this.color.setHSV(this.color.hue, saturation, value);
+		if (this.picker_mode === 'HSL')
+			this.color.setHSL(this.color.hue, saturation, value);
+
+		this.color_picker.style.left = x - picker_offset + 'px';
+		this.color_picker.style.top = y - picker_offset + 'px';
+
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('value', value);
+		this.notify('lightness', value);
+		this.notify('saturation', saturation);
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.updateHueSlider = function updateHueSlider(e) {
+		var x = e.pageX - this.hue_area.offsetLeft;
+		var width = this.hue_area.clientWidth;
+
+		if (x &lt; 0) x = 0;
+		if (x &gt; width) x = width;
+
+		// TODO 360 =&gt; 359
+		var hue = ((359 * x) / width) | 0;
+		// if (hue === 360) hue = 359;
+
+		this.updateSliderPosition(this.hue_picker, x);
+		this.setHue(hue);
+	};
+
+	ColorPicker.prototype.updateAlphaSlider = function updateAlphaSlider(e) {
+		var x = e.pageX - this.alpha_area.offsetLeft;
+		var width = this.alpha_area.clientWidth;
+
+		if (x &lt; 0) x = 0;
+		if (x &gt; width) x = width;
+
+		this.color.a = (x / width).toFixed(2);
+
+		this.updateSliderPosition(this.alpha_picker, x);
+		this.updatePreviewColor();
+
+		this.notify('alpha', this.color.a);
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.setHue = function setHue(value) {
+		this.color.setHue(value);
+
+		this.updatePickerBackground();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+		this.notify('hue', this.color.hue);
+
+		notify(this.topic, this.color);
+	};
+
+	// Updates when one of Saturation/Value/Lightness changes
+	ColorPicker.prototype.updateSLV = function updateSLV() {
+		this.updatePickerPosition();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+
+		notify(this.topic, this.color);
+	};
+
+	/*************************************************************************/
+	//				Update positions of various UI elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.updatePickerPosition = function updatePickerPosition() {
+		var size = this.picking_area.clientWidth;
+		var value = 0;
+		var offset = 5;
+
+		if (this.picker_mode === 'HSV')
+			value = this.color.value;
+		if (this.picker_mode === 'HSL')
+			value = this.color.lightness;
+
+		var x = (this.color.saturation * size / 100) | 0;
+		var y = size - (value * size / 100) | 0;
+
+		this.color_picker.style.left = x - offset + 'px';
+		this.color_picker.style.top = y - offset + 'px';
+	};
+
+	ColorPicker.prototype.updateSliderPosition = function updateSliderPosition(elem, pos) {
+		elem.style.left = Math.max(pos - 3, -2) + 'px';
+	};
+
+	ColorPicker.prototype.updateHuePicker = function updateHuePicker() {
+		var size = this.hue_area.clientWidth;
+		var offset = 1;
+		var pos = (this.color.hue * size / 360 ) | 0;
+		this.hue_picker.style.left = pos - offset + 'px';
+	};
+
+	ColorPicker.prototype.updateAlphaPicker = function updateAlphaPicker() {
+		var size = this.alpha_area.clientWidth;
+		var offset = 1;
+		var pos = (this.color.a * size) | 0;
+		this.alpha_picker.style.left = pos - offset + 'px';
+	};
+
+	/*************************************************************************/
+	//						Update background colors
+	/*************************************************************************/
+
+	ColorPicker.prototype.updatePickerBackground = function updatePickerBackground() {
+		var nc = new Color(this.color);
+		nc.setHSV(nc.hue, 100, 100);
+		this.picking_area.style.backgroundColor = nc.getHexa();
+	};
+
+	ColorPicker.prototype.updateAlphaGradient = function updateAlphaGradient() {
+		this.alpha_mask.style.backgroundColor = this.color.getHexa();
+	};
+
+	ColorPicker.prototype.updatePreviewColor = function updatePreviewColor() {
+		this.preview_color.style.backgroundColor = this.color.getColor();
+	};
+
+	/*************************************************************************/
+	//						Update input elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.inputChangeHue = function inputChangeHue(e) {
+		var value = parseInt(e.target.value);
+		this.setHue(value);
+		this.updateHuePicker();
+	};
+
+	ColorPicker.prototype.inputChangeSaturation = function inputChangeSaturation(e) {
+		var value = parseInt(e.target.value);
+		this.color.setSaturation(value);
+		e.target.value = this.color.saturation;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeValue = function inputChangeValue(e) {
+		var value = parseInt(e.target.value);
+		this.color.setValue(value);
+		e.target.value = this.color.value;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeLightness = function inputChangeLightness(e) {
+		var value = parseInt(e.target.value);
+		this.color.setLightness(value);
+		e.target.value = this.color.lightness;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeRed = function inputChangeRed(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('r', value);
+		e.target.value = this.color.r;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeGreen = function inputChangeGreen(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('g', value);
+		e.target.value = this.color.g;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeBlue = function inputChangeBlue(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('b', value);
+		e.target.value = this.color.b;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeAlpha = function inputChangeAlpha(e) {
+		var value = parseFloat(e.target.value);
+
+		if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
+			value &gt;= 0 &amp;&amp; value &lt;= 1)
+			this.color.a = value.toFixed(2);
+
+		e.target.value = this.color.a;
+		this.updateAlphaPicker();
+	};
+
+	ColorPicker.prototype.inputChangeHexa = function inputChangeHexa(e) {
+		var value = e.target.value;
+		this.color.setHexa(value);
+		this.setColor(this.color);
+	};
+
+	/*************************************************************************/
+	//							Internal Pub/Sub
+	/*************************************************************************/
+
+	ColorPicker.prototype.subscribe = function subscribe(topic, callback) {
+		this.subscribers[topic] = callback;
+	};
+
+	ColorPicker.prototype.notify = function notify(topic, value) {
+		if (this.subscribers[topic])
+			this.subscribers[topic](value);
+	};
+
+	/*************************************************************************/
+	//							Set Picker Properties
+	/*************************************************************************/
+
+	ColorPicker.prototype.setColor = function setColor(color) {
+		if(color instanceof Color !== true) {
+			console.log('Typeof parameter not Color');
+			return;
+		}
+
+		if (color.format !== this.picker_mode) {
+			color.setFormat(this.picker_mode);
+			color.updateHSX();
+		}
+
+		this.color.copy(color);
+		this.updateHuePicker();
+		this.updatePickerPosition();
+		this.updatePickerBackground();
+		this.updateAlphaPicker();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+
+		this.notify('hue', this.color.hue);
+		this.notify('saturation', this.color.saturation);
+		this.notify('value', this.color.value);
+		this.notify('lightness', this.color.lightness);
+
+		this.notify('alpha', this.color.a);
+		this.notify('hexa', this.color.getHexa());
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.setPickerMode = function setPickerMode(mode) {
+		if (mode !== 'HSV' &amp;&amp; mode !== 'HSL')
+			return;
+
+		this.picker_mode = mode;
+		this.node.setAttribute('data-mode', this.picker_mode);
+		this.setColor(this.color);
+	};
+
+	/*************************************************************************/
+	//								UNUSED
+	/*************************************************************************/
+
+	var setPickerMode = function setPickerMode(topic, mode) {
+		if (pickers[topic])
+			pickers[topic].setPickerMode(mode);
+	};
+
+	var setColor = function setColor(topic, color) {
+		if (pickers[topic])
+			pickers[topic].setColor(color);
+	};
+
+	var getColor = function getColor(topic) {
+		if (pickers[topic])
+			return new Color(pickers[topic].color);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(callback) {
+		subscribers.indexOf(callback);
+		subscribers.splice(index, 1);
+	};
+
+	var notify = function notify(topic, value) {
+		if (subscribers[topic] === undefined || subscribers[topic].length === 0)
+			return;
+
+		var color = new Color(value);
+		for (var i in subscribers[topic])
+			subscribers[topic][i](color);
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-color-picker');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new ColorPicker(elem[i]);
+	};
+
+	return {
+		init : init,
+		Color : Color,
+		RGBColor : RGBColor,
+		RGBAColor : RGBAColor,
+		HSVColor : HSVColor,
+		HSVAColor : HSVAColor,
+		HSLColor : HSLColor,
+		HSLAColor : HSLAColor,
+		setColor : setColor,
+		getColor : getColor,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPickerMode : setPickerMode
+	};
+
+})();
+
+
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		input.style.width = 50 + obj.precision * 10 + 'px';
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseFloat(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		return input;
+	};
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+
+			document.addEventListener("mouseup", slideEnd);
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		var slideEnd = function slideEnd(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		};
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		};
+
+		return slider;
+	};
+
+	var InputSlider = function(node) {
+		var min		= parseFloat(node.getAttribute('data-min'));
+		var max		= parseFloat(node.getAttribute('data-max'));
+		var step	= parseFloat(node.getAttribute('data-step'));
+		var value	= parseFloat(node.getAttribute('data-value'));
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+		var precision = node.getAttribute('data-precision') | 0;
+
+		this.min = isNaN(min) ? 0 : min;
+		this.max = isNaN(max) ? 100 : max;
+		this.precision = precision &gt;= 0 ? precision : 0;
+		this.step = step &lt; 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit === null ? '' : unit;
+		this.sensivity = sensivity &gt; 0 ? sensivity : 5;
+		value = isNaN(value) ? this.min : value;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	};
+
+	InputSlider.prototype.setInputValue = function setInputValue() {
+		this.input.value = this.value.toFixed(this.precision) + this.unit;
+	};
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = parseFloat(value.toFixed(slider.precision));
+
+		if (value &gt; slider.max) value = slider.max;
+		if (value &lt; slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		slider.setInputValue();
+
+		if (send_notify === false)
+			return;
+
+		notify.call(slider);
+	};
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	};
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	};
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	};
+
+	var setStep = function setStep(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.step = parseFloat(value);
+		setValue(topic, slider.value);
+	};
+
+	var setPrecision = function setPrecision(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+		slider.precision = value;
+
+		var step = parseFloat(slider.step.toFixed(value));
+		if (step === 0)
+			slider.step = 1 / Math.pow(10, value);
+
+		setValue(topic, slider.value);
+	};
+
+	var setSensivity = function setSensivity(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+
+		slider.sensivity = value &gt; 0 ? value : 5;
+	};
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	};
+
+	var getPrecision =  function getPrecision(topic) {
+		return sliders[topic].precision;
+	};
+
+	var getStep =  function getStep(topic) {
+		return sliders[topic].step;
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.value);
+	};
+
+	var createSlider = function createSlider(topic, label) {
+		var slider = document.createElement('div');
+		slider.className = 'ui-input-slider';
+		slider.setAttribute('data-topic', topic);
+
+		if (label !== undefined)
+			slider.setAttribute('data-info', label);
+
+		new InputSlider(slider);
+		return slider;
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new InputSlider(elem[i]);
+	};
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		setStep : setStep,
+		getNode : getNode,
+		getStep : getStep,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPrecision : setPrecision,
+		setSensivity : setSensivity,
+		getPrecision : getPrecision,
+		createSlider : createSlider,
+	};
+
+})();
+
+
+'use strict';
+
+window.addEventListener("load", function() {
+	ColorPickerTool.init();
+});
+
+var ColorPickerTool = (function ColorPickerTool() {
+
+	/*========== Get DOM Element By ID ==========*/
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	function allowDropEvent(e) {
+		e.preventDefault();
+	}
+
+	/*========== Make an element resizable relative to it's parent ==========*/
+
+	var UIComponent = (function UIComponent() {
+
+		function makeResizable(elem, axis) {
+			var valueX = 0;
+			var valueY = 0;
+			var action = 0;
+
+			var resizeStart = function resizeStart(e) {
+				e.stopPropagation();
+				e.preventDefault();
+				if (e.button !== 0)
+					return;
+
+				valueX = e.clientX - elem.clientWidth;
+				valueY = e.clientY - elem.clientHeight;
+
+				document.body.setAttribute('data-resize', axis);
+				document.addEventListener('mousemove', mouseMove);
+				document.addEventListener('mouseup', resizeEnd);
+			};
+
+			var mouseMove = function mouseMove(e) {
+				if (action &gt;= 0)
+					elem.style.width = e.clientX - valueX + 'px';
+				if (action &lt;= 0)
+					elem.style.height = e.clientY - valueY + 'px';
+			};
+
+			var resizeEnd = function resizeEnd(e) {
+				if (e.button !== 0)
+					return;
+
+				document.body.removeAttribute('data-resize', axis);
+				document.removeEventListener('mousemove', mouseMove);
+				document.removeEventListener('mouseup', resizeEnd);
+			};
+
+			var handle = document.createElement('div');
+			handle.className = 'resize-handle';
+
+			if (axis === 'width') action = 1;
+			else if (axis === 'height') action = -1;
+			else axis = 'both';
+
+			handle.className = 'resize-handle';
+			handle.setAttribute('data-resize', axis);
+			handle.addEventListener('mousedown', resizeStart);
+			elem.appendChild(handle);
+		};
+
+		/*========== Make an element draggable relative to it's parent ==========*/
+
+		var makeDraggable = function makeDraggable(elem, endFunction) {
+
+			var offsetTop;
+			var offsetLeft;
+
+			elem.setAttribute('data-draggable', 'true');
+
+			var dragStart = function dragStart(e) {
+				e.preventDefault();
+				e.stopPropagation();
+
+				if (e.target.getAttribute('data-draggable') !== 'true' ||
+					e.target !== elem || e.button !== 0)
+					return;
+
+				offsetLeft = e.clientX - elem.offsetLeft;
+				offsetTop = e.clientY - elem.offsetTop;
+
+				document.addEventListener('mousemove', mouseDrag);
+				document.addEventListener('mouseup', dragEnd);
+			};
+
+			var dragEnd = function dragEnd(e) {
+				if (e.button !== 0)
+					return;
+
+				document.removeEventListener('mousemove', mouseDrag);
+				document.removeEventListener('mouseup', dragEnd);
+			};
+
+			var mouseDrag = function mouseDrag(e) {
+				elem.style.left = e.clientX - offsetLeft + 'px';
+				elem.style.top = e.clientY - offsetTop + 'px';
+			};
+
+			elem.addEventListener('mousedown', dragStart, false);
+		};
+
+		return {
+			makeResizable : makeResizable,
+			makeDraggable : makeDraggable
+		};
+
+	})();
+
+	/*========== Color Class ==========*/
+
+	var Color = UIColorPicker.Color;
+	var HSLColor = UIColorPicker.HSLColor;
+
+	/**
+	 * ColorPalette
+	 */
+	var ColorPalette = (function ColorPalette() {
+
+		var samples = [];
+		var color_palette;
+		var complementary;
+
+		var hideNode = function(node) {
+			node.setAttribute('data-hidden', 'true');
+		};
+
+		var ColorSample = function ColorSample(id) {
+			var node = document.createElement('div');
+			node.className = 'sample';
+
+			this.uid = samples.length;
+			this.node = node;
+			this.color = new Color();
+
+			node.setAttribute('sample-id', this.uid);
+			node.setAttribute('draggable', 'true');
+			node.addEventListener('dragstart', this.dragStart.bind(this));
+			node.addEventListener('click', this.pickColor.bind(this));
+
+			samples.push(this);
+		};
+
+		ColorSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		ColorSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateHue = function updateHue(color, degree, steps) {
+			this.color.copy(color);
+			var hue = (steps * degree + this.color.hue) % 360;
+			if (hue &lt; 0) hue += 360;
+			this.color.setHue(hue);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateSaturation = function updateSaturation(color, value, steps) {
+			var saturation = color.saturation + value * steps;
+			if (saturation &lt;= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setSaturation(saturation);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateLightness = function updateLightness(color, value, steps) {
+			var lightness = color.lightness + value * steps;
+			if (lightness &lt;= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setLightness(lightness);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateBrightness = function updateBrightness(color, value, steps) {
+			var brightness = color.value + value * steps;
+			if (brightness &lt;= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setValue(brightness);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateAlpha = function updateAlpha(color, value, steps) {
+			var alpha = parseFloat(color.a) + value * steps;
+			if (alpha &lt;= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.a = parseFloat(alpha.toFixed(2));
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.pickColor = function pickColor() {
+			UIColorPicker.setColor('picker', this.color);
+		};
+
+		ColorSample.prototype.dragStart = function dragStart(e) {
+			e.dataTransfer.setData('sampleID', this.uid);
+			e.dataTransfer.setData('location', 'palette-samples');
+		};
+
+		var Palette = function Palette(text, size) {
+			this.samples = [];
+			this.locked = false;
+
+			var palette = document.createElement('div');
+			var title = document.createElement('div');
+			var controls = document.createElement('div');
+			var container = document.createElement('div');
+			var lock = document.createElement('div');
+
+			container.className = 'container';
+			title.className = 'title';
+			palette.className = 'palette';
+			controls.className = 'controls';
+			lock.className = 'lock';
+			title.textContent = text;
+
+			controls.appendChild(lock);
+			container.appendChild(title);
+			container.appendChild(controls);
+			container.appendChild(palette);
+
+			lock.addEventListener('click', function () {
+				this.locked = !this.locked;
+				lock.setAttribute('locked-state', this.locked);
+			}.bind(this));
+
+			for(var i = 0; i &lt; size; i++) {
+				var sample = new ColorSample();
+				this.samples.push(sample);
+				palette.appendChild(sample.node);
+			}
+
+			this.container = container;
+			this.title = title;
+		};
+
+		var createHuePalette = function createHuePalette() {
+			var palette = new Palette('Teinte', 12);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i &lt; 12; i++) {
+					palette.samples[i].updateHue(color, 30, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var createSaturationPalette = function createSaturationPalette() {
+			var palette = new Palette('Saturation', 11);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i &lt; 11; i++) {
+					palette.samples[i].updateSaturation(color, -10, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		/* Brightness or Lightness - depends on the picker mode */
+		var createVLPalette = function createSaturationPalette() {
+			var palette = new Palette('Lightness', 11);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				if(color.format === 'HSL') {
+					palette.title.textContent = 'Luminosité';
+					for(var i = 0; i &lt; 11; i++)
+						palette.samples[i].updateLightness(color, -10, i);
+				}
+				else {
+					palette.title.textContent = 'Valeur';
+					for(var i = 0; i &lt; 11; i++)
+						palette.samples[i].updateBrightness(color, -10, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var isBlankPalette = function isBlankPalette(container, value) {
+			if (value === 0) {
+				container.setAttribute('data-collapsed', 'true');
+				return true;
+			}
+
+			container.removeAttribute('data-collapsed');
+			return false;
+		};
+
+		var createAlphaPalette = function createAlphaPalette() {
+			var palette = new Palette('Alpha', 10);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i &lt; 10; i++) {
+					palette.samples[i].updateAlpha(color, -0.1, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var getSampleColor = function getSampleColor(id) {
+			if (samples[id] !== undefined &amp;&amp; samples[id]!== null)
+				return new Color(samples[id].color);
+		};
+
+		var init = function init() {
+			color_palette = getElemById('color-palette');
+
+			createHuePalette();
+			createSaturationPalette();
+			createVLPalette();
+			createAlphaPalette();
+
+		};
+
+		return {
+			init : init,
+			getSampleColor : getSampleColor
+		};
+
+	})();
+
+	/**
+	 * ColorInfo
+	 */
+	var ColorInfo = (function ColorInfo() {
+
+		var info_box;
+		var select;
+		var RGBA;
+		var HEXA;
+		var HSLA;
+
+		var updateInfo = function updateInfo(color) {
+			if (color.a | 0 === 1) {
+				RGBA.info.textContent = 'RGB';
+				HSLA.info.textContent = 'HSL';
+			}
+			else {
+				RGBA.info.textContent = 'RGBA';
+				HSLA.info.textContent = 'HSLA';
+			}
+
+			RGBA.value.value = color.getRGBA();
+			HSLA.value.value = color.getHSLA();
+			HEXA.value.value = color.getHexa();
+		};
+
+		var InfoProperty = function InfoProperty(info) {
+
+			var node = document.createElement('div');
+			var title = document.createElement('div');
+			var value = document.createElement('input');
+			var copy = document.createElement('div');
+
+			node.className = 'property';
+			title.className = 'type';
+			value.className = 'value';
+			copy.className = 'copy';
+
+			title.textContent = info;
+			value.setAttribute('type', 'text');
+
+			copy.addEventListener('click', function() {
+				value.select();
+			});
+
+			node.appendChild(title);
+			node.appendChild(value);
+			node.appendChild(copy);
+
+			this.node = node;
+			this.value = value;
+			this.info = title;
+
+			info_box.appendChild(node);
+		};
+
+		var init = function init() {
+
+			info_box = getElemById('color-info');
+
+			RGBA = new InfoProperty('RGBA');
+			HSLA = new InfoProperty('HSLA');
+			HEXA = new InfoProperty('HEXA');
+
+			UIColorPicker.subscribe('picker', updateInfo);
+
+		};
+
+		return {
+			init: init
+		};
+
+	})();
+
+	/**
+	 * ColorPicker Samples
+	 */
+	var ColorPickerSamples = (function ColorPickerSamples() {
+
+		var samples = [];
+		var nr_samples = 0;
+		var active = null;
+		var container = null;
+		var	samples_per_line = 10;
+		var trash_can = null;
+		var base_color = new HSLColor(0, 50, 100);
+		var add_btn;
+		var add_btn_pos;
+
+		var ColorSample = function ColorSample() {
+			var node = document.createElement('div');
+			node.className = 'sample';
+
+			this.uid = samples.length;
+			this.index = nr_samples++;
+			this.node = node;
+			this.color = new Color(base_color);
+
+			node.setAttribute('sample-id', this.uid);
+			node.setAttribute('draggable', 'true');
+
+			node.addEventListener('dragstart', this.dragStart.bind(this));
+			node.addEventListener('dragover' , allowDropEvent);
+			node.addEventListener('drop'     , this.dragDrop.bind(this));
+
+			this.updatePosition(this.index);
+			this.updateBgColor();
+			samples.push(this);
+		};
+
+		ColorSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		ColorSample.prototype.updatePosition = function updatePosition(index) {
+			this.index = index;
+			this.posY = 5 + ((index / samples_per_line) | 0) * 52;
+			this.posX = 5 + ((index % samples_per_line) | 0) * 52;
+			this.node.style.top  = this.posY + 'px';
+			this.node.style.left = this.posX + 'px';
+		};
+
+		ColorSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.activate = function activate() {
+			UIColorPicker.setColor('picker', this.color);
+			this.node.setAttribute('data-active', 'true');
+		};
+
+		ColorSample.prototype.deactivate = function deactivate() {
+			this.node.removeAttribute('data-active');
+		};
+
+		ColorSample.prototype.dragStart = function dragStart(e) {
+			e.dataTransfer.setData('sampleID', this.uid);
+			e.dataTransfer.setData('location', 'picker-samples');
+		};
+
+		ColorSample.prototype.dragDrop = function dragDrop(e) {
+			e.stopPropagation();
+			this.color = Tool.getSampleColorFrom(e);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.deleteSample = function deleteSample() {
+			container.removeChild(this.node);
+			samples[this.uid] = null;
+			nr_samples--;
+		};
+
+		var updateUI = function updateUI() {
+			updateContainerProp();
+
+			var index = 0;
+			var nr = samples.length;
+			for (var i=0; i &lt; nr; i++)
+				if (samples[i] !== null) {
+					samples[i].updatePosition(index);
+					index++;
+				}
+
+			AddSampleButton.updatePosition(index);
+		};
+
+		var deleteSample = function deleteSample(e) {
+			trash_can.parentElement.setAttribute('drag-state', 'none');
+
+			var location = e.dataTransfer.getData('location');
+			if (location !== 'picker-samples')
+				return;
+
+			var sampleID = e.dataTransfer.getData('sampleID');
+			samples[sampleID].deleteSample();
+			console.log(samples);
+
+			updateUI();
+		};
+
+		var createDropSample = function createDropSample() {
+			var sample = document.createElement('div');
+			sample.id = 'drop-effect-sample';
+			sample.className = 'sample';
+			container.appendChild(sample);
+		};
+
+		var setActivateSample = function setActivateSample(e) {
+			if (e.target.className !== 'sample')
+				return;
+
+			unsetActiveSample(active);
+			Tool.unsetVoidSample();
+			CanvasSamples.unsetActiveSample();
+			active = samples[e.target.getAttribute('sample-id')];
+			active.activate();
+		};
+
+		var unsetActiveSample = function unsetActiveSample() {
+			if (active)
+				active.deactivate();
+			active = null;
+		};
+
+		var getSampleColor = function getSampleColor(id) {
+			if (samples[id] !== undefined &amp;&amp; samples[id]!== null)
+				return new Color(samples[id].color);
+		};
+
+		var updateContainerProp = function updateContainerProp() {
+			samples_per_line = ((container.clientWidth - 5) / 52) | 0;
+			var height = 52 * (1 + (nr_samples / samples_per_line) | 0);
+			container.style.height = height + 10 + 'px';
+		};
+
+		var AddSampleButton = (function AddSampleButton() {
+			var node;
+			var _index = 0;
+			var _posX;
+			var _posY;
+
+			var updatePosition = function updatePosition(index) {
+				_index = index;
+				_posY = 5 + ((index / samples_per_line) | 0) * 52;
+				_posX = 5 + ((index % samples_per_line) | 0) * 52;
+
+				node.style.top  = _posY + 'px';
+				node.style.left = _posX + 'px';
+			};
+
+			var addButtonClick = function addButtonClick() {
+				var sample = new ColorSample();
+				container.appendChild(sample.node);
+				updatePosition(_index + 1);
+				updateUI();
+			};
+
+			var init = function init() {
+				node = document.createElement('div');
+				var icon = document.createElement('div');
+
+				node.className = 'sample';
+				icon.id = 'add-icon';
+				node.appendChild(icon);
+				node.addEventListener('click', addButtonClick);
+
+				updatePosition(0);
+				container.appendChild(node);
+			};
+
+			return {
+				init : init,
+				updatePosition : updatePosition
+			};
+		})();
+
+		var init = function init() {
+			container = getElemById('picker-samples');
+			trash_can = getElemById('trash-can');
+
+			AddSampleButton.init();
+
+			for (var i=0; i&lt;16; i++) {
+				var sample = new ColorSample();
+				container.appendChild(sample.node);
+			}
+
+			AddSampleButton.updatePosition(samples.length);
+			updateUI();
+
+			active = samples[0];
+			active.activate();
+
+			container.addEventListener('click', setActivateSample);
+
+			trash_can.addEventListener('dragover', allowDropEvent);
+			trash_can.addEventListener('dragenter', function() {
+				this.parentElement.setAttribute('drag-state', 'enter');
+			});
+			trash_can.addEventListener('dragleave', function(e) {
+				this.parentElement.setAttribute('drag-state', 'none');
+			});
+			trash_can.addEventListener('drop', deleteSample);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (active)
+					active.updateColor(color);
+			});
+
+		};
+
+		return {
+			init : init,
+			getSampleColor : getSampleColor,
+			unsetActiveSample : unsetActiveSample
+		};
+
+	})();
+
+	/**
+	 * Canvas Samples
+	 */
+	var CanvasSamples = (function CanvasSamples() {
+
+		var active = null;
+		var canvas = null;
+		var samples = [];
+		var zindex = null;
+		var tutorial = true;
+
+		var CanvasSample = function CanvasSample(color, posX, posY) {
+
+			var node = document.createElement('div');
+			var pick = document.createElement('div');
+			var delete_btn = document.createElement('div');
+			node.className = 'sample';
+			pick.className = 'pick';
+			delete_btn.className = 'delete';
+
+			this.uid = samples.length;
+			this.node = node;
+			this.color = color;
+			this.updateBgColor();
+			this.zIndex = 1;
+
+			node.style.top = posY - 50 + 'px';
+			node.style.left = posX - 50 + 'px';
+			node.setAttribute('sample-id', this.uid);
+
+			node.appendChild(pick);
+			node.appendChild(delete_btn);
+
+			var activate = function activate() {
+				setActiveSample(this);
+			}.bind(this);
+
+			node.addEventListener('dblclick', activate);
+			pick.addEventListener('click', activate);
+			delete_btn.addEventListener('click', this.deleteSample.bind(this));
+
+			UIComponent.makeDraggable(node);
+			UIComponent.makeResizable(node);
+
+			samples.push(this);
+			canvas.appendChild(node);
+			return this;
+		};
+
+		CanvasSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		CanvasSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		CanvasSample.prototype.updateZIndex = function updateZIndex(value) {
+			this.zIndex = value;
+			this.node.style.zIndex = value;
+		};
+
+		CanvasSample.prototype.activate = function activate() {
+			this.node.setAttribute('data-active', 'true');
+			zindex.setAttribute('data-active', 'true');
+
+			UIColorPicker.setColor('picker', this.color);
+			InputSliderManager.setValue('z-index', this.zIndex);
+		};
+
+		CanvasSample.prototype.deactivate = function deactivate() {
+			this.node.removeAttribute('data-active');
+			zindex.removeAttribute('data-active');
+		};
+
+		CanvasSample.prototype.deleteSample = function deleteSample() {
+			if (active === this)
+				unsetActiveSample();
+			canvas.removeChild(this.node);
+			samples[this.uid] = null;
+		};
+
+		CanvasSample.prototype.updatePosition = function updatePosition(posX, posY) {
+			this.node.style.top = posY - this.startY + 'px';
+			this.node.style.left = posX - this.startX + 'px';
+		};
+
+		var canvasDropEvent = function canvasDropEvent(e) {
+			var color = Tool.getSampleColorFrom(e);
+
+			if (color) {
+				var offsetX = e.pageX - canvas.offsetLeft;
+				var offsetY = e.pageY - canvas.offsetTop;
+				var sample = new CanvasSample(color, offsetX, offsetY);
+				if (tutorial) {
+					tutorial = false;
+					canvas.removeAttribute('data-tutorial');
+					var info = new CanvasSample(new Color(), 100, 100);
+					info.node.setAttribute('data-tutorial', 'dblclick');
+				}
+			}
+
+		};
+
+		var setActiveSample = function setActiveSample(sample) {
+			ColorPickerSamples.unsetActiveSample();
+			Tool.unsetVoidSample();
+			unsetActiveSample();
+			active = sample;
+			active.activate();
+		};
+
+		var unsetActiveSample = function unsetActiveSample() {
+			if (active)
+				active.deactivate();
+			active = null;
+		};
+
+		var createToggleBgButton = function createToggleBgButton() {
+			var button = document.createElement('div');
+			var state = false;
+			button.className = 'toggle-bg';
+			canvas.appendChild(button);
+
+			button.addEventListener('click', function() {
+				console.log(state);
+				state = !state;
+				canvas.setAttribute('data-bg', state);
+			});
+		};
+
+		var init = function init() {
+			canvas = getElemById('canvas');
+			zindex = getElemById('zindex');
+
+			canvas.addEventListener('dragover', allowDropEvent);
+			canvas.addEventListener('drop', canvasDropEvent);
+
+			createToggleBgButton();
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (active)	active.updateColor(color);
+			});
+
+			InputSliderManager.subscribe('z-index', function (value) {
+				if (active)	active.updateZIndex(value);
+			});
+
+			UIComponent.makeResizable(canvas, 'height');
+		};
+
+		return {
+			init : init,
+			unsetActiveSample : unsetActiveSample
+		};
+
+	})();
+
+	var StateButton = function StateButton(node, state) {
+		this.state = false;
+		this.callback = null;
+
+		node.addEventListener('click', function() {
+			this.state = !this.state;
+			if (typeof this.callback === "function")
+				this.callback(this.state);
+		}.bind(this));
+	};
+
+	StateButton.prototype.set = function set() {
+		this.state = true;
+		if (typeof this.callback === "function")
+			this.callback(this.state);
+	};
+
+	StateButton.prototype.unset = function unset() {
+		this.state = false;
+		if (typeof this.callback === "function")
+			this.callback(this.state);
+	};
+
+	StateButton.prototype.subscribe = function subscribe(func) {
+		this.callback = func;
+	};
+
+
+	/**
+	 * Tool
+	 */
+	var Tool = (function Tool() {
+
+		var samples = [];
+		var controls = null;
+		var void_sw;
+
+		var createPickerModeSwitch = function createPickerModeSwitch() {
+			var parent = getElemById('controls');
+			var icon = document.createElement('div');
+			var button = document.createElement('div');
+			var hsv = document.createElement('div');
+			var hsl = document.createElement('div');
+			var active = null;
+
+			icon.className = 'icon picker-icon';
+			button.className = 'switch';
+			button.appendChild(hsv);
+			button.appendChild(hsl);
+
+			hsv.textContent = 'HSV';
+			hsl.textContent = 'HSL';
+
+			active = hsl;
+			active.setAttribute('data-active', 'true');
+
+			function switchPickingModeTo(elem) {
+				active.removeAttribute('data-active');
+				active = elem;
+				active.setAttribute('data-active', 'true');
+				UIColorPicker.setPickerMode('picker', active.textContent);
+			};
+
+			var picker_sw = new StateButton(icon);
+			picker_sw.subscribe(function() {
+				if (active === hsv)
+					switchPickingModeTo(hsl);
+				else
+					switchPickingModeTo(hsv);
+			});
+
+			hsv.addEventListener('click', function() {
+				switchPickingModeTo(hsv);
+			});
+			hsl.addEventListener('click', function() {
+				switchPickingModeTo(hsl);
+			});
+
+			parent.appendChild(icon);
+			parent.appendChild(button);
+		};
+
+		var setPickerDragAndDrop = function setPickerDragAndDrop() {
+			var preview = document.querySelector('#picker .preview-color');
+			var picking_area = document.querySelector('#picker .picking-area');
+
+			preview.setAttribute('draggable', 'true');
+			preview.addEventListener('drop', drop);
+			preview.addEventListener('dragstart', dragStart);
+			preview.addEventListener('dragover', allowDropEvent);
+
+			picking_area.addEventListener('drop', drop);
+			picking_area.addEventListener('dragover', allowDropEvent);
+
+			function drop(e) {
+				var color = getSampleColorFrom(e);
+				UIColorPicker.setColor('picker', color);
+			};
+
+			function dragStart(e) {
+				e.dataTransfer.setData('sampleID', 'picker');
+				e.dataTransfer.setData('location', 'picker');
+			};
+		};
+
+		var getSampleColorFrom = function getSampleColorFrom(e) {
+			var sampleID = e.dataTransfer.getData('sampleID');
+			var location = e.dataTransfer.getData('location');
+
+			if (location === 'picker')
+				return UIColorPicker.getColor(sampleID);
+			if (location === 'picker-samples')
+				return ColorPickerSamples.getSampleColor(sampleID);
+			if (location === 'palette-samples')
+				return ColorPalette.getSampleColor(sampleID);
+		};
+
+		var setVoidSwitch = function setVoidSwitch() {
+			var void_sample = getElemById('void-sample');
+			void_sw = new StateButton(void_sample);
+			void_sw.subscribe( function (state) {
+				void_sample.setAttribute('data-active', state);
+				if (state === true) {
+					ColorPickerSamples.unsetActiveSample();
+					CanvasSamples.unsetActiveSample();
+				}
+			});
+		};
+
+		var unsetVoidSample = function unsetVoidSample() {
+			void_sw.unset();
+		};
+
+		var init = function init() {
+			controls = getElemById('controls');
+
+			var color = new Color();
+			color.setHSL(0, 51, 51);
+			UIColorPicker.setColor('picker', color);
+
+			setPickerDragAndDrop();
+			createPickerModeSwitch();
+			setVoidSwitch();
+		};
+
+		return {
+			init : init,
+			unsetVoidSample : unsetVoidSample,
+			getSampleColorFrom : getSampleColorFrom
+		};
+
+	})();
+
+	var init = function init() {
+		UIColorPicker.init();
+		InputSliderManager.init();
+		ColorInfo.init();
+		ColorPalette.init();
+		ColorPickerSamples.init();
+		CanvasSamples.init();
+		Tool.init();
+	};
+
+	return {
+		init : init
+	};
+
+})();
+
+</pre>
+</div>
+
+
+<div>{{CSSRef}}</div>
+
+<p>Cet outil vous permet de définir des couleurs web personnalisées.</p>
+
+<p>L'outil offre également une conversion facile entre les différents formats de couleurs CSS: couleurs hexadécimales, RVB (Rouge, Vert, Bleu) (aussi appelé <em>RGB</em> en anglais) et TSL (Teinte, Saturation Luminosité) (aussi appelé <em>HSL</em> en anglais). Le canal Alpha est également pris en charge pour les formats RGB (rgba) et HSL (hsla).</p>
+
+<p>Chaque couleur est prédéfinie dans les 3 formats standard CSS.</p>
+
+<p>En fonction de la couleur courante, une palette de couleurs est générée sur une échelle TSL ainsi que sur une échelle de transparence (en faisant varier l'alpha).</p>
+
+<p>Le sélecteur peut être réglé sur les formats HSL ou HSV (valeur de teinte et staturation).</p>
+
+<p>{{EmbedLiveSample('ColorPIcker_Tool', '100%', '900')}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/HTML/Applying_color">Appliquer des couleurs sur des éléments HTML avec CSS</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Styling_text/Fundamentals">La mise en forme du texte et les polices</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Styling_boxes/Borders">Mettre en forme des bordures avec CSS</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Styling_boxes/Backgrounds">Modifier l'arrière-plan avec CSS</a></li>
+ <li><a href="/fr/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">Les couleurs et le contraste</a></li>
+</ul>
diff --git a/files/fr/web/css/counter()/index.html b/files/fr/web/css/counter()/index.html
new file mode 100644
index 0000000000..a53c715337
--- /dev/null
+++ b/files/fr/web/css/counter()/index.html
@@ -0,0 +1,142 @@
+---
+title: counter()
+slug: Web/CSS/counter()
+tags:
+  - CSS
+  - Compteur CSS
+  - Fonction
+  - Reference
+translation_of: Web/CSS/counter()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction CSS <code><strong>counter</strong></code><strong><code>()</code></strong> renvoie une chaîne de caractères qui représente la valeur courante du compteur nommé (dont le nom est passé en argument). Elle est généralement utilisée pour construire un <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-élément</a> mais elle peut tout à fait être utilisée à n'importe quel endroit où une valeur {{cssxref("&lt;string&gt;")}} est attendue.</p>
+
+<pre class="notranslate">/* Usage simple */
+counter(nomcompteur);
+
+/* Modifier le type d'affichage du compteur */
+counter(nomcompteur, upper-roman)</pre>
+
+<p>Un <a href="/fr/docs/Web/CSS/CSS_Lists/Compteurs_CSS">compteur</a> CSS n'a aucun effet visible en lui-même. C'est la fonction <code>counter()</code> (ainsi que <code>counters()</code>) qui permet d'utiliser la chaîne de caractère ou l'image résultante.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note  :</strong> La fonction <code>counter()</code> peut être utilisée avec n'importe quelle propriété CSS mais la prise en charge des propriétés autres que {{CSSxRef("content")}} reste expérimentale et la prise en charge du paramètre « type ou unité » est hétérogène.</p>
+
+<p>Veillez à consulter <a href="#Browser_compatibility">le tableau de compatibilité des navigateurs</a> avant d'utiliser ces fonctionnalités en production.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;custom-ident&gt;")}}</dt>
+ <dd>Un nom identifiant le compteur (sensible à la casse). C'est le même nom qui pourra être utilisé avec {{cssxref("counter-reset")}} et  {{cssxref("counter-increment")}}. Le nom ne peut pas commencer avec deux tirets et ne peut pas être l'un des mots-clés <code>none</code>, <code>unset</code>, <code>initial</code> ou <code>inherit</code>.</dd>
+ <dt><code style="white-space: nowrap;">&lt;counter-style&gt;</code></dt>
+ <dd>Un nom de style de compteur ou une fonction <code><a href="/fr/docs/Web/CSS/symbols">symbols()</a></code>. Le nom d'un style de compteur peut indiquer un compteur <a href="/fr/docs/Web/CSS/list-style-type#Valeurs">alphabétique, numérique, symbolique ou encore utilisant un système de numération asiatique ou éthiopien</a> ou un autre <a href="/fr/docs/Web/CSS/CSS_Counter_Styles">style de compteur prédéfini</a>. Si cette valeur n'est pas fournie, le style par défaut est décimal.</dd>
+ <dt><code>none</code></dt>
+ <dd>Représente la chaîne de caractère vide.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Comparaison_entre_compteur_par_défaut_et_chiffres_romains_majuscules">Comparaison entre compteur par défaut et chiffres romains majuscules</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html; notranslate">&lt;ol&gt;
+  &lt;li&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css; highlight[2] notranslate">ol {
+  counter-reset: listCounter;
+}
+li {
+  counter-increment: listCounter;
+}
+li::after {
+  content: "[" counter(listCounter) "] == ["
+               counter(listCounter, upper-roman) "]";
+}</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Comparaison_entre_compteur_par_défaut_et_chiffres_romains_majuscules", "100%", 150)}}</p>
+
+<h3 id="Comparaison_entre_compteur_décimal_avec_zéro_et_compteur_alphabétique_minuscule">Comparaison entre compteur décimal avec zéro et compteur alphabétique minuscule</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;ol&gt;
+  &lt;li&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">ol {
+  counter-reset: count;
+}
+
+li {
+  counter-increment: count;
+}
+
+li::after {
+  content: "[" counter(count, decimal-leading-zero) "] == ["
+               counter(count, lower-alpha) "]";
+}</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Comparaison_entre_compteur_décimal_avec_zéro_et_compteur_alphabétique_minuscule", "100%", 150)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Lists", "#counter-functions", "CSS Counters")}}</td>
+   <td>{{Spec2("CSS3 Lists")}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "generate.html#counters", "CSS Counters")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.types.counter")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Lists/Compteurs_CSS">Utiliser les compteurs CSS</a></li>
+ <li>{{cssxref("counter-reset")}}</li>
+ <li>{{cssxref("counter-increment")}}</li>
+ <li>{{cssxref("@counter-style")}}</li>
+ <li>La fonction CSS <code><a href="/fr/docs/Web/CSS/counters">counters()</a></code></li>
+</ul>
diff --git a/files/fr/web/css/counter-increment/index.html b/files/fr/web/css/counter-increment/index.html
new file mode 100644
index 0000000000..7eaa65b7d3
--- /dev/null
+++ b/files/fr/web/css/counter-increment/index.html
@@ -0,0 +1,133 @@
+---
+title: counter-increment
+slug: Web/CSS/counter-increment
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/counter-increment
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>counter-increment</code></strong> est utilisée afin d'augmenter la valeur d'un <a href="/fr/docs/Web/CSS/Compteurs_CSS">compteur CSS</a> d'une valeur donnée.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/counter-increment.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note">
+<p><strong>Note :</strong> La valeur du compteur peut être réinitialisée avec une valeur arbitraire grâce à la propriété {{cssxref("counter-reset")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* On incrémente 'mon-compteur' de 1 */
+counter-increment: mon-compteur;
+
+/* On réduit 'mon-compteur' de 1 */
+counter-increment: mon-compteur -1;
+
+/* On incrémente 'compteur1' de 1 et on décrémente 'compteur2' de 4 */
+counter-increment: compteur1 compteur2 -4;
+
+/* On n'incrémente/décremente rien */
+/* cela permet d'effacer les règles moins spécifiques */
+counter-increment: none;
+
+/* Valeurs globales */
+counter-increment: inherit;
+counter-increment: initial;
+counter-increment: unset;
+</pre>
+
+<p>La propriété <code>counter-increment</code> peut être définie de deux façons :</p>
+
+<ul>
+ <li>Avec le mot-clé <code>none</code></li>
+ <li>Avec un identifiant ({{cssxref("&lt;custom-ident&gt;")}}) qui identifie le compteur et qui est éventuellement suivi par un entier ({{cssxref("&lt;integer&gt;")}}). On peut définir autant de compteurs qu'on veut, chacun étant séparé par un espace.</li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;custom-ident&gt;")}}</dt>
+ <dd>Le nom du compteur qu'on souhaite incrémenter.L'identifiant peut se composer d'une combinaison de lettres entre <code>a</code> et <code>z</code> (sensible à la casse), de nombres compris entre <code>0</code> et <code>9</code>, de tirets bas (<code>_</code> ou <em>underscores</em>) et/ou de tirets. Le premier caractère qui n'est pas un tiret doit être une lettre. Il est également interdit d'utiliser deux tirets au début d'un identifiant. Enfin, un identifiant ne doit pas être <code>none</code>, <code>unset</code>, <code>initial</code> ou <code>inherit</code> quelque soit la combinaison de la casse.</dd>
+ <dt>{{cssxref("&lt;integer&gt;")}}</dt>
+ <dd>La valeur qu'on souhaite ajouter au compteur. La valeur par défaut est 1 (le compteur est alors incrémenté de 1).</dd>
+ <dt><code>none</code></dt>
+ <dd>Aucun compteur n'est incrémenté. Cette valeur est utilisée comme valeur par défaut et permet également d'annuler des incréments décrits par des règles moins spécifiques.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">ol {
+  list-style-type: none;
+  counter-reset: compteListe;
+}
+
+li::before {
+  counter-increment: compteListe 2;
+  content: counter(compteListe) " ";
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ol&gt;
+  &lt;li&gt;Et de deux&lt;/li&gt;
+  &lt;li&gt;Et de quatre&lt;/li&gt;
+  &lt;li&gt;Et de six&lt;/li&gt;
+&lt;/ol&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Lists", "#propdef-counter-increment", "counter-increment")}}</td>
+   <td>{{Spec2("CSS3 Lists")}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "generate.html#propdef-counter-increment", "counter-increment")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.counter-increment")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Compteurs_CSS">Utiliser les compteurs CSS</a></li>
+ <li>{{cssxref("counter-reset")}}</li>
+ <li>{{cssxref("counter-set")}}</li>
+ <li>{{cssxref("@counter-style")}}</li>
+ <li>Les fonctions CSS {{cssxref("counter")}} et {{cssxref("counters")}}</li>
+</ul>
diff --git a/files/fr/web/css/counter-reset/index.html b/files/fr/web/css/counter-reset/index.html
new file mode 100644
index 0000000000..ec093ec4ac
--- /dev/null
+++ b/files/fr/web/css/counter-reset/index.html
@@ -0,0 +1,142 @@
+---
+title: counter-reset
+slug: Web/CSS/counter-reset
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/counter-reset
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>counter-reset</code></strong> permet de réinitialiser un <a href="/fr/docs/Web/CSS/Compteurs_CSS">compteur CSS</a> avec une valeur donnée.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/counter-reset.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note">
+<p><strong>Note :</strong> Pour incrémenter ou décrémenter le compteur, on pourra utiliser la propriété CSS {{cssxref("counter-increment")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* On réinitialise nom-compteur à 0 */
+counter-reset: nom-compteur;
+
+/* On réinitialise nom-compteur à -1 */
+counter-reset: nom-compteur -1;
+
+/* On initialise compteur1 à 1 et compteur2 à 4 */
+counter-reset: compteur1 1 compteur2 4;
+
+/* On annule toute réinitialisation qui aurait
+   pu être déclarée avec des règles moins spé-
+   cifiques */
+counter-reset: none;
+
+/* Valeurs globales */
+counter-reset: inherit;
+counter-reset: initial;
+counter-reset: unset;
+</pre>
+
+<p>Cette propriété se définit grâce à :</p>
+
+<ul>
+ <li>un identifiant (<code>&lt;custom-ident&gt;</code>) qui représente le compteur, éventuellement suivi par un entier (<code>&lt;integer&gt;</code>). Cela peut être répété plusieurs fois avec un espace en tant que séparateur.</li>
+ <li>ou grâce au mot-clé <code>none</code>.</li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt>{{cssxref("custom-ident", "&lt;custom-ident&gt;")}}</dt>
+ <dd>Le nom du compteur qu'on souhaite incrémenter. L'identifiant peut se composer d'une combinaison de lettres entre <code>a</code> et <code>z</code> (sensible à la casse), de nombres compris entre <code>0</code> et <code>9</code>, de tirets bas (<code>_</code> ou <em>underscores</em>) et/ou de tirets. Le premier caractère qui n'est pas un tiret doit être une lettre. Il est également interdit d'utiliser deux tirets au début d'un identifiant. Enfin, un identifiant ne doit pas être <code>none</code>, <code>unset</code>, <code>initial</code> ou <code>inherit</code> quelque soit la combinaison de la casse.</dd>
+ <dt>{{cssxref("&lt;integer&gt;")}}</dt>
+ <dd>La valeur avec laquelle on souhaite réinitialiser le compteur pour chaque occurrence de l'élément. La valeur par défaut est <code>0</code>.</dd>
+ <dt><code>none</code></dt>
+ <dd>Un mot-clé indiquant qu'il ne faut pas réinitialiser le compteur. Cette valeur peut être utilisée pour masquer des réinitialisations provenant de règles moins spécifiques.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">ol {
+  list-style-type: none;
+  counter-reset: compteListe;
+}
+
+li::before {
+  counter-increment: compteListe;
+  content: counter(compteListe) " ";
+}
+
+.reinit {
+  counter-reset: compteListe;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ol&gt;
+  &lt;li&gt;Et de un&lt;/li&gt;
+  &lt;li&gt;Et de deux&lt;/li&gt;
+  &lt;li&gt;Et de trois&lt;/li&gt;
+  &lt;li class="reinit"&gt;Et ça repart&lt;/li&gt;
+  &lt;li&gt;Et de deux&lt;/li&gt;
+&lt;/ol&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Lists', '#counter-reset', 'counter-reset')}}</td>
+   <td>{{Spec2('CSS3 Lists')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'generate.html#propdef-counter-reset', 'counter-reset')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.counter-reset")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Compteurs_CSS">Les compteurs CSS</a></li>
+ <li>{{cssxref("counter-increment")}}</li>
+ <li>{{cssxref("@counter-style")}}</li>
+ <li>{{cssxref("counter-set")}}</li>
+ <li>{{cssxref("counter")}} et {{cssxref("counters")}}</li>
+ <li>{{cssxref("content")}}</li>
+</ul>
diff --git a/files/fr/web/css/counter-set/index.html b/files/fr/web/css/counter-set/index.html
new file mode 100644
index 0000000000..30836ddc75
--- /dev/null
+++ b/files/fr/web/css/counter-set/index.html
@@ -0,0 +1,108 @@
+---
+title: counter-set
+slug: Web/CSS/counter-set
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/counter-set
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>counter-set</code></strong> définit un <a href="/fr/docs/Web/CSS/CSS_Lists/Compteurs_CSS">compteur CSS</a> avec une certaine valeur. Elle permet de manipuler les valeurs des compteurs existants et ne créera qu'un nouveau compteur que lorsqu'il n'existe pas de compteur avec le nom indiqué sur l'élément.</p>
+
+<div class="note">
+<p><strong>Note :</strong> La valeur d'un compteur peut être incrémentée ou décrémentée grâce à la propriété CSS {{cssxref("counter-increment")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Définir "mon-compteur" avec la valeur 0 */
+counter-set: mon-compteur;
+
+/* Définir "mon-compteur" avec la valeur -1 */
+counter-set: mon-compteur -1;
+
+/* Définir "compteur1" avec 1 et "compteur2" à 4 */
+counter-set: compteur1 1 compteur2 4;
+
+/* Réinitialiser les compteurs qui auraient été */
+/* définis avec des règles moins spécifiques */
+counter-set: none;
+
+/* Valeurs globales */
+counter-set: inherit;
+counter-set: initial;
+counter-set: unset;
+</pre>
+
+<p>La propriété <code>counter-set</code> est définit avec l'une de ces deux valeurs :</p>
+
+<ul>
+ <li>Une valeur de type <code>&lt;custom-ident&gt;</code> qui fournit le nom du compteur, éventuellement suivie d'un entier (<code>&lt;integer&gt;</code>). Il est possible de définir plusieurs compteurs à réinitialiser en séparant les valeurs grâce à un espace.</li>
+ <li>Le mot-clé <code>none</code>.</li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt>{{cssxref("custom-ident", "&lt;custom-ident&gt;")}}</dt>
+ <dd>Le nom du compteur à définir ou à modifier.</dd>
+ <dt>{{cssxref("&lt;integer&gt;")}}</dt>
+ <dd>La valeur à utiliser pour le compteur à chaque occurrence de l'élément. Par cette valeur sera <code>0</code>. S'il n'existe pas déjà de compteur avec le nom courant pour l'élément, l'élément créera un nouveau compteur avec ce nom et utilisera alors cette valeur.</dd>
+ <dt><code>none</code></dt>
+ <dd>Aucune définition ou modification de compteur ne doit être appliquée. Cette valeur peut être utilisée afin de surcharger une déclaration <code>counter-set</code> d'une règle moins spécifique.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:css">h1 {
+  counter-set: chapitre section 1 page;
+  /* Les compteurs "chapitre" et "page" sont
+     définis à 0, et le compteur "section"
+     est défini à 1. */
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Lists', '#counter-set', 'counter-set')}}</td>
+   <td>{{Spec2('CSS3 Lists')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.counter-set")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Lists/Compteurs_CSS">Utiliser les compteurs CSS</a></li>
+ <li>{{cssxref("counter-increment")}}</li>
+ <li>{{cssxref("counter-reset")}}</li>
+ <li>{{cssxref("@counter-style")}}</li>
+ <li>Les fonctions {{cssxref("counter")}} et {{cssxref("counters")}}</li>
+ <li>{{cssxref("content")}}</li>
+</ul>
diff --git a/files/fr/web/css/counters()/index.html b/files/fr/web/css/counters()/index.html
new file mode 100644
index 0000000000..9c58ab42a0
--- /dev/null
+++ b/files/fr/web/css/counters()/index.html
@@ -0,0 +1,189 @@
+---
+title: counters()
+slug: Web/CSS/counters()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+translation_of: Web/CSS/counters()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction CSS <code><strong>counters()</strong></code> permet d'obtenir des compteurs imbriqués en renvoyant la concaténation des chaînes de caractères des valeurs des compteurs passés en arguments. La fonction <code>counters()</code> peut s'utiliser sous deux formes :</p>
+
+<ul>
+ <li><code>counters(<var>name</var>, <var>string</var>)</code></li>
+ <li><code>counters(<var>name</var>, <var>string</var>, <var>style</var>)</code></li>
+</ul>
+
+<p>Cette fonction est généralement utilisée sur des <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-éléments</a> mais peut théoriquement être utilisée à tout endroit où une valeur <code><a href="/fr/docs/Web/CSS/string">&lt;string&gt;</a></code> est attendue. Le texte généré est la concaténation des compteurs en commençant par les compteurs « parents » puis en ajoutant la valeurs des compteurs « fils ». Les compteurs sont affichés avec le style indiqué (par défaut, ce sera <code>decimal</code>).</p>
+
+<pre class="notranslate">/* Utilisation simple - style decimal par défaut */
+counters(countername, '-');
+
+/* Changement du style d'affichage */
+counters(countername, '.', upper-roman)</pre>
+
+<p>Un compteur n'est pas visible en tant que tel. Les fonctions <code>counters()</code> et <code><a href="/fr/docs/Web/CSS/counter_function">counter()</a></code> doivent être utilisées pour créer du contenu.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Bien que la fonction <code>counters()</code> puisse être utilisée avec n'importe quelle propriété CSS, la prise en charge des propriétés autres que {{CSSxRef("content")}} reste experimentale.</p>
+
+<p>Avant d'utiliser cette fonctionnalité en production, référez vous au tableau de compatibilité ci-après.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;custom-ident&gt;")}}</dt>
+ <dd>Un nom identifiant les compteurs à utiliser. C'est le même nom qui pourra être utilisé avec les propriétés {{cssxref("counter-reset")}} et {{cssxref("counter-increment")}}. Le nom ne peut pas commencer par deux tirets et ne peut pas être <code>none</code>, <code>unset</code>, <code>initial</code> ou <code>inherit</code>.</dd>
+ <dt><code style="white-space: nowrap;">&lt;counter-style&gt;</code></dt>
+ <dd>Un style de compteur (cf. <a href="/fr/docs/Web/CSS/list-style-type#Valeurs">les valeurs décrites pour <code>list-style-type</code></a>) ou une fonction <code><a href="/fr/docs/Web/CSS/symbols">symbols()</a></code>. En absence de valeur, le style utilisé sera <code>decimal</code>.</dd>
+ <dt>{{cssxref("&lt;string&gt;")}}</dt>
+ <dd>Une suite de caractères. Les caractères qui ne sont pas latins doivent être encodés avec leur séquence d'échappement Unicode. <code>\000A9</code> représentera par exemple le symbole copyright (©).</dd>
+ <dt><code>none</code></dt>
+ <dd>Représente la chaîne vide.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Style_par_défaut_et_chiffres_romains">Style par défaut et chiffres romains</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html; notranslate">&lt;ol&gt;
+  &lt;li&gt;
+     &lt;ol&gt;
+        &lt;li&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;/li&gt;
+      &lt;/ol&gt;
+  &lt;/li&gt;
+  &lt;li&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;/li&gt;
+  &lt;li&gt;
+     &lt;ol&gt;
+        &lt;li&gt;&lt;/li&gt;
+        &lt;li&gt;
+           &lt;ol&gt;
+              &lt;li&gt;&lt;/li&gt;
+              &lt;li&gt;&lt;/li&gt;
+              &lt;li&gt;&lt;/li&gt;
+           &lt;/ol&gt;
+        &lt;/li&gt;
+      &lt;/ol&gt;
+  &lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css; highlight[2] notranslate">ol {
+  counter-reset: listCounter;
+}
+li {
+  counter-increment: listCounter;
+}
+li::marker {
+   content:  counters(listCounter, '.', upper-roman) ') ';
+}
+li::before {
+  content:  counters(listCounter, ".") " == " counters(listCounter, ".", lower-roman) ;
+}</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Style_par_défaut_et_chiffres_romains", "100%", 150)}}</p>
+
+<h3 id="Numérotation_décimale_avec_zéro_et_indices_alphabétiques"><dfn>Numérotation décimale (avec zéro) et indices alphabétiques</dfn></h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html; notranslate">&lt;ol&gt;
+  &lt;li&gt;
+     &lt;ol&gt;
+        &lt;li&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;/li&gt;
+      &lt;/ol&gt;
+  &lt;/li&gt;
+  &lt;li&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;/li&gt;
+  &lt;li&gt;
+     &lt;ol&gt;
+        &lt;li&gt;&lt;/li&gt;
+        &lt;li&gt;
+           &lt;ol&gt;
+              &lt;li&gt;&lt;/li&gt;
+              &lt;li&gt;&lt;/li&gt;
+              &lt;li&gt;&lt;/li&gt;
+           &lt;/ol&gt;
+        &lt;/li&gt;
+      &lt;/ol&gt;
+  &lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css; highlight[2] notranslate">ol {
+  counter-reset: count;
+}
+li {
+  counter-increment: count;
+}
+li::marker {
+   content: counters(count, '.', upper-alpha) ') ';
+}
+li::before {
+  content: counters(count, ".", <dfn>decimal-leading-zero</dfn>) " == " counters(count, ".", lower-alpha);
+}</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Numérotation_décimale_(avec_zéro)_et_indices_alphabétiques", "100%", 150)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Lists", "#counter-functions", "CSS Counters")}}</td>
+   <td>{{Spec2("CSS3 Lists")}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "generate.html#counter-styles", "CSS Counters")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.types.counters")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Lists/Compteurs_CSS">Utiliser les compteurs CSS</a></li>
+ <li>{{cssxref("counter-reset")}}</li>
+ <li>{{cssxref("counter-increment")}}</li>
+ <li>{{cssxref("@counter-style")}}</li>
+ <li>La fonction CSS <code><a href="/fr/docs/Web/CSS/counter_function">counter()</a></code></li>
+ <li>{{cssxref("::marker")}}</li>
+</ul>
diff --git a/files/fr/web/css/cross-fade()/index.html b/files/fr/web/css/cross-fade()/index.html
new file mode 100644
index 0000000000..0c995b6816
--- /dev/null
+++ b/files/fr/web/css/cross-fade()/index.html
@@ -0,0 +1,166 @@
+---
+title: cross-fade()
+slug: Web/CSS/cross-fade()
+tags:
+  - CSS
+  - Experimental
+  - Fonction
+  - Reference
+translation_of: Web/CSS/cross-fade()
+---
+<div>{{draft}}{{CSSRef}}</div>
+
+<p>La fonction CSS <strong><code>cross-fade()</code></strong> peut être utilisée afin de fusionner deux ou plusieurs images avec une transparence donnée. On peut l'utiliser pour de nombreuses manipulations d'image : teinter une image avec une couleur donnée ou mettre en avant une zone de l'image en combinant celle-ci avec un dégradé radial.</p>
+
+<div class="blockIndicator warning">
+<p><strong>Attention !</strong> À l'heure actuelle (janvier 2019), la syntaxe décrite par la spécification et les syntaxes implémentées sont différentes. Nous commencerons ici par définir la syntaxe telle que définie par la spécification puis celle utilisée au sein des implémentations actuelles.</p>
+</div>
+
+<h2 id="Syntaxe_spécification"><a id="Syntaxe" name="Syntaxe">Syntaxe (spécification)</a></h2>
+
+<p>La fonction <code>cross-fade()</code> prend comme argument une liste d'images accompagnée d'un pourcentage qui définit la proportion de chaque image dans le « mélange » obtenu. La valeur en pourcentage ne doit pas être entourée de quotes, doit contenir le symbole « % » et être comprise entre 0% et 100%.</p>
+
+<p>Cette fonction pourra être utilisée à tout endroit où une image (cf. {{cssxref("&lt;image&gt;")}}) CSS peut être utilisée.</p>
+
+<h3 id="Utilisation_des_pourcentages">Utilisation des pourcentages</h3>
+
+<p>Le pourcentage utilisé pour chaque image peut être considéré comme une valeur d'opacité. Un coefficient à 0% indiquera que l'image sera complètement transparente pour le mélange final tandis qu'un coefficient à 100% rendra l'image complètement opaque. Si un des pourcentages est absent, l'ensemble des pourcentages exprimés est sommé et la différence avec 100% est répartie également entre toutes les images qui n'ont pas de coefficient.</p>
+
+<pre class="brush: css notranslate">cross-fade(url(white.png)   0%, url(black.png) 100%); /* complètement noire */
+cross-fade(url(white.png)  25%, url(black.png)  75%); /* 25% blanche, 75% noire*/
+cross-fade(url(white.png)  50%, url(black.png)  50%); /* 50% blanche, 50% noire */
+cross-fade(url(white.png)  75%, url(black.png)  25%); /* 75% blanche, 25% noire */
+cross-fade(url(white.png) 100%, url(black.png)   0%); /* complètement blanche */
+cross-fade(url(green.png)  75%, url(red.png)    75%); /* image avec du rouge et vert à 75% */
+</pre>
+
+<p>Dans le cas le plus simple, seules deux images sont fusionnées. Dans ce cas, seul un coefficient est nécessaire (la seconde image recevra dans tous les cas le complément à 100% du premier coefficient). Ainsi, si on utilise 0% pour la première image, le mélange résultant correspondra à la deuxième image. Inversement, un coefficient de 100% pour la première image masquera complètement la seconde. Utiliser 50% permettra d'obtenir un mélange à proportions égales. Un coefficient de 75% montrera la première image à 75% et la seconde à 25%.</p>
+
+<p>Les lignes précédentes peuvent ainsi s'écrire également :</p>
+
+<pre class="brush: css notranslate">cross-fade(url(white.png)   0%, url(black.png)); /* complètement noire */
+cross-fade(url(white.png)  25%, url(black.png)); /* 25% blanche, 75% noire*/
+cross-fade(url(white.png), url(black.png)); /* 50% blanche, 50% noire */
+cross-fade(url(white.png)  75%, url(black.png)); /* 75% blanche, 25% noire */
+cross-fade(url(white.png) 100%, url(black.png)); /* complètement blanche */
+cross-fade(url(green.png)  75%, url(red.png) 75%); /* image avec du rouge et vert à 75% */
+</pre>
+
+<p>Si aucun pourcentage n'est indiqué, toutes les images contribuent également (si on a deux images, chacune contribuera à 50%).</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<div class="hidden">La syntaxe formelle décrite sur cette page est générée à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à proposer une<em>pull request</em> sur <a href="https://github.com/mdn/data">https://github.com/mdn/data</a>.</div>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<ul>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[4-6] notranslate">#div {
+    width: 300px;
+    height: 300px;
+    background-image: cross-fade(
+        75% url('https://mdn.mozillademos.org/files/8543/br.png'),
+        url('https://mdn.mozillademos.org/files/8545/tr.png'));
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "330", "330")}}</p>
+
+<h2 id="Ancienne_syntaxe_implémentations">Ancienne syntaxe (implémentations)</h2>
+
+<pre class="syntaxbox notranslate">cross-fade( &lt;image, &lt;image&gt;, &lt;percentage&gt; )</pre>
+
+<p>La spécification de la fonction <code>cross-fade()</code> permet d'avoir plusieurs images et d'associer un coefficient de transparence à chacune des images. Ce n'a pas toujours été le cas et <a href="#Syntaxe">la syntaxe originale</a>, implémentée par certains navigateurs, ne permet d'avoir que deux images pour lesquelles la somme des coefficients doit être 100%. Cette syntaxe est prise en charge par Safari et préfixée avec <code>-webkit-</code> pour Chrome, Opera et les autres navigateurs basés sur Blink.</p>
+
+<pre class="brush: css notranslate">cross-fade(url(white.png), url(black.png), 0%);   /* complètement noire */
+cross-fade(url(white.png), url(black.png), 25%);  /* 25% blanche, 75% noire */
+cross-fade(url(white.png), url(black.png), 50%);  /* 50% blanche, 50% noire */
+cross-fade(url(white.png), url(black.png), 75%);  /* 75% blanche, 25% noire */
+cross-fade(url(white.png), url(black.png), 100%); /* complètement blanche */
+</pre>
+
+<p>Pour cette syntaxe, les deux images sont déclarées en premières et séparées par une virgule puis arrive le coefficient. Si la virgule ou si le caractère pourcent est absent, la propriété est considérée invalide. Le coefficient utilisé dans la syntaxe est attribué à la première image. La deuxième image utilisera donc un coefficient implicite qui est le complément à 100 du premier complément.</p>
+
+<p>Dans les exemples associés à la syntaxe de la spécification, on avait un cas où la somme des coefficients valait 150% : ce cas ne serait pas possible avec la syntaxe implémentée actuellement. De même, on ne peut pas mélanger trois images (ou plus) avec cette syntaxe.</p>
+
+<h3 id="Exemples_2">Exemples</h3>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css; highlight[4-11] notranslate">.crossfade {
+    width: 300px;
+    height: 300px;
+    background-image: -webkit-cross-fade(
+        url('https://mdn.mozillademos.org/files/8543/br.png'),
+        url('https://mdn.mozillademos.org/files/8545/tr.png'),
+        75%);
+    background-image: cross-fade(
+        url('https://mdn.mozillademos.org/files/8543/br.png'),
+        url('https://mdn.mozillademos.org/files/8545/tr.png'),
+        75%);
+}</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="crossfade"&gt;&lt;/div&gt;</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Ancienne_syntaxe_(implémentations)", "330", "330")}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Les outils d'assistance ne peuvent pas analyser les images d'arrière-plan. Si l'image contient des informations essentielles à la compréhension du document, mieux vaudra la décrire de façon sémantique dans le document afin que ce dernier soit correctement accessible. Lorsqu'on utilisera des images d'arrière-plan, on s'assurera que le contraste est suffisamment élevé par rapport au texte qui serait affiché par dessus.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">Comprendre les règles WCAG 1.1.</a></li>
+ <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">Comprendre les critères de succès 1.1.1  pour WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Spécification</th>
+   <th>État</th>
+   <th>Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Images', '#cross-fade-function', 'cross-fade()')}}</td>
+   <td>{{Spec2('CSS4 Images')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<div>{{Compat("css.types.image.cross-fade")}}</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("image")}}</li>
+ <li>{{cssxref("url")}}</li>
+ <li>{{cssxref("_image", "image()")}}</li>
+ <li>{{cssxref("image-set")}}</li>
+ <li>{{cssxref("element")}}</li>
+ <li><a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS" title="Using gradients">Utiliser les dégradés CSS</a></li>
+ <li>Fonctions de création de dégradés : {{cssxref("linear-gradient", "linear-gradient()")}}, {{cssxref("radial-gradient", "radial-gradient()")}}, {{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}, {{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}, {{cssxref("conic-gradient", "conic-gradient()")}},</li>
+</ul>
diff --git a/files/fr/web/css/css_backgrounds_and_borders/index.html b/files/fr/web/css/css_backgrounds_and_borders/index.html
new file mode 100644
index 0000000000..3180021066
--- /dev/null
+++ b/files/fr/web/css/css_backgrounds_and_borders/index.html
@@ -0,0 +1,117 @@
+---
+title: CSS Backgrounds and Borders
+slug: Web/CSS/CSS_Backgrounds_and_Borders
+tags:
+  - Aperçu
+  - CSS
+  - CSS Backgrounds and Borders
+  - Reference
+translation_of: Web/CSS/CSS_Backgrounds_and_Borders
+---
+<div>{{CSSRef}}</div>
+
+<p><em><strong>CSS Backgrounds and Borders</strong></em> est un module CSS qui permet de mettre en forme les bordures et arrière-plans des éléments. Les arrière-plans peuvent être dessinés avec une couleur ou une image, rognés, redimensionnés voire modifiés. Les bordures peuvent être décorées avec des lignes, des images, former des angles droits ou des angles courbes. Il est également possible de décorer les boîtes des éléments avec des ombres.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés_CSS">Propriétés CSS</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("background")}}</li>
+ <li>{{cssxref("background-attachment")}}</li>
+ <li>{{cssxref("background-clip")}}</li>
+ <li>{{cssxref("background-color")}}</li>
+ <li>{{cssxref("background-image")}}</li>
+ <li>{{cssxref("background-origin")}}</li>
+ <li>{{cssxref("background-position")}}</li>
+ <li>{{cssxref("background-position-x")}}</li>
+ <li>{{cssxref("background-position-y")}}</li>
+ <li>{{cssxref("background-repeat")}}</li>
+ <li>{{cssxref("background-size")}}</li>
+ <li>{{cssxref("border")}}</li>
+ <li>{{cssxref("border-bottom")}}</li>
+ <li>{{cssxref("border-bottom-color")}}</li>
+ <li>{{cssxref("border-bottom-left-radius")}}</li>
+ <li>{{cssxref("border-bottom-right-radius")}}</li>
+ <li>{{cssxref("border-bottom-style")}}</li>
+ <li>{{cssxref("border-bottom-width")}}</li>
+ <li>{{cssxref("border-collapse")}}</li>
+ <li>{{cssxref("border-color")}}</li>
+ <li>{{cssxref("border-image")}}</li>
+ <li>{{cssxref("border-image-outset")}}</li>
+ <li>{{cssxref("border-image-repeat")}}</li>
+ <li>{{cssxref("border-image-slice")}}</li>
+ <li>{{cssxref("border-image-source")}}</li>
+ <li>{{cssxref("border-image-width")}}</li>
+ <li>{{cssxref("border-left")}}</li>
+ <li>{{cssxref("border-left-color")}}</li>
+ <li>{{cssxref("border-left-style")}}</li>
+ <li>{{cssxref("border-left-width")}}</li>
+ <li>{{cssxref("border-radius")}}</li>
+ <li>{{cssxref("border-right")}}</li>
+ <li>{{cssxref("border-right-color")}}</li>
+ <li>{{cssxref("border-right-style")}}</li>
+ <li>{{cssxref("border-right-width")}}</li>
+ <li>{{cssxref("border-style")}}</li>
+ <li>{{cssxref("border-top")}}</li>
+ <li>{{cssxref("border-top-color")}}</li>
+ <li>{{cssxref("border-top-left-radius")}}</li>
+ <li>{{cssxref("border-top-right-radius")}}</li>
+ <li>{{cssxref("border-top-style")}}</li>
+ <li>{{cssxref("border-top-width")}}</li>
+ <li>{{cssxref("border-width")}}</li>
+ <li>{{cssxref("box-shadow")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">Manipuler plusieurs arrière-plans</a></dt>
+ <dd>Dans cet article, on voit comment paramétrer un ou plusieurs arrière-plans pour un élément.</dd>
+ <dt><a href="/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images">Mettre à l'échelle les images utilisées pour un arrière-plan</a></dt>
+ <dd>Dans cet article, on voit comment modifier la taille et paramétrer la répétition d'une image d'arrière-plan.</dd>
+ <dt><a href="/fr/docs/Web/HTML/Applying_color">Appliquer des couleurs sur des éléments HTML grâce à CSS</a></dt>
+ <dd>Dans cet article, on voit comment utiliser CSS pour ajouter de la couleur sur des éléments HTML, y compris sur les bordures.</dd>
+</dl>
+
+<h2 id="Outils">Outils</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-image">Générateur pour <code>border-image</code></a></dt>
+ <dd>Un outil interactif pour créer visuellement des images de bordure (cf. la propriété {{cssxref("border-image")}}).</dd>
+ <dt><a href="/fr/docs/Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-radius">Générateur pour <code>border-radius</code></a></dt>
+ <dd>Un outil interactif pour créer visuellement des angles arrondies (cf. la propriété {{cssxref("border-radius")}}).</dd>
+ <dt><a href="/fr/docs/Web/CSS/Modèle_de_boîte_CSS/Générateur_box-shadow">Générateur pour <code>box-shadow</code></a></dt>
+ <dd>Un outil interactif pour créer visuellement des ombres derrière les éléments (cf. la propriété {{cssxref("box-shadow")}}).</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/css/css_backgrounds_and_borders/scaling_background_images/index.html b/files/fr/web/css/css_backgrounds_and_borders/scaling_background_images/index.html
new file mode 100644
index 0000000000..f9cce126c9
--- /dev/null
+++ b/files/fr/web/css/css_backgrounds_and_borders/scaling_background_images/index.html
@@ -0,0 +1,117 @@
+---
+title: Mettre à l'échelle des images en arrière-plan
+slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images
+tags:
+  - CSS
+  - Guide
+  - Intermédiaire
+  - Reference
+translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS {{cssxref("background-size")}} permet d'ajuster la taille des images utilisées en arrière-plan et de remplacer le comportement par défaut qui consiste à créer un carrelage de l'image à sa pleine grandeur. Il est ainsi possible d'agrandir ou de rapetisser l'image.</p>
+
+<h2 id="Carreler_une_image_de_grande_taille">Carreler une image de grande taille</h2>
+
+<p>Prenons une image de grande taille (par exemple l'ancien logo de Firefox en 2485x2340px). On souhaite la carreler en quatre copies de 300x300 px, comme dans l'image suivante.</p>
+
+<p><img alt="" src="https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png" style="height: 636px; width: 636px;"></p>
+
+<p>On peut utiliser la feuille de style CSS suivante pour obtenir l'effet voulu :</p>
+
+<pre class="brush: css;  highlight:[8]">.square {
+  width: 300px;
+  height: 300px;
+  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
+  border: solid 2px;
+  text-shadow: white 0px 0px 2px;
+  font-size: 16px;
+  background-size: 150px;
+}
+</pre>
+
+<p>On notera que, dans l'exemple précédent, une seule valeur avait été précisée pour {{cssxref("background-size")}} : 150 px. Dans ce cas, cette valeur est utilisée pour la largeur et la hauteur est alors fixée à <code>auto</code>.</p>
+
+<h2 id="Étirer_une_image">Étirer une image</h2>
+
+<p>Il est aussi possible de spécifier, respectivement, la largeur et la hauteur de l'image, comme dans l'exemple suivant, où la taille de l'image est imposée à 300x150 px.</p>
+
+<pre class="brush:css">background-size: 300px 150px;
+</pre>
+
+<p>L'image suivante montre le résultat obtenu.</p>
+
+<p><img alt="Logo de Firefox étité" src="https://mdn.mozillademos.org/files/16630/s.codepen.io_Richienb_debug_LoNxGp_PNkvYGvgGyXA.png" style="height: 636px; width: 636px;"></p>
+
+<h2 id="Agrandir_une_image">Agrandir une image</h2>
+
+<p>On peut agrandir une image en arrière-plan. À l'image suivante, une favicône de 32x32 px est agrandie à 300x300 px.</p>
+
+<p><img alt="Logo MDN à l'échelle" src="https://mdn.mozillademos.org/files/16631/favicon57.de33179910ae.1.1.png" style="height: 636px; width: 636px;"></p>
+
+<pre class="brush: css; highlight:[5]">.square2 {
+  width: 300px;
+  height: 300px;
+  background-image: url(favicon.png);
+  background-size: 300px;
+  border: solid 2px;
+  text-shadow: white 0px 0px 2px;
+  font-size: 16px;
+}
+</pre>
+
+<p>On remarque que la feuille de style utilisée est identique à la précédente, sauf en ce qui concerne le nom de l'image.</p>
+
+<h2 id="Valeurs_spéciales_contain_et_cover">Valeurs spéciales : <code>contain</code> et <code>cover</code></h2>
+
+<p>En plus de {{cssxref("&lt;length&gt;")}}, la propriété CSS {{cssxref("background-size")}} permet d'employer deux autres valeurs : <code>contain</code> et <code>cover</code>. </p>
+
+<h3 id="contain"><code>contain</code></h3>
+
+<p>La valeur <code>contain</code> spécifie les dimensions de l'image d'arrière-plan de manière à ce que sa largeur et sa hauteur soient aussi grandes que possible, tout en conservant l'image à l'intérieur de son élément conteneur. Ainsi, l'image ne peut déborder de son élément conteneur.</p>
+
+<p>Essayez de redimensionner la fenêtre de votre navigateur afin de voir la valeur <code>contain</code> en action (Votre navigateur doit supporter la mise à l'échelle d'images d'arrière-plan).</p>
+
+<figure>
+<p>{{EmbedLiveSample("contain", "100%", "220")}}</p>
+</figure>
+
+<pre class="brush:html">&lt;div class="bgSizeContain"&gt;
+  &lt;p&gt;Redimensionnez la fenêtre de votre navigateur.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush:css;highlight:[4]">.bgSizeContain {
+  height: 200px;
+  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
+  background-size: contain;
+  border: 2px solid darkgray;
+  color: #000; text-shadow: 1px 1px 0 #fff;
+}</pre>
+
+<h3 id="cover"><code>cover</code></h3>
+
+<p>La valeur <code>cover</code> assure que l'image d'arrière-plan soit aussi petite que possible, tout en maintenant ses dimensions plus grandes ou égales à la taille de l'élément conteneur. L'échelle entre la largeur et la hauteur est maintenue.</p>
+
+<p>{{EmbedLiveSample("cover", "100%", "220")}}</p>
+
+<p>Cet exemple utilise le document HTML et la feuille de style suivants :</p>
+
+<pre class="brush:html">&lt;div class="bgSizeCover"&gt;
+  &lt;p&gt;Redimensionnez la fenêtre de votre navigateur.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush:css;highlight:[4]">.bgSizeCover {
+  height: 200px;
+  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
+  background-size: cover;
+  border: 2px solid darkgray;
+  color: #000; text-shadow: 1px 1px 0 #fff;
+</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("background-size")}}</li>
+ <li>{{cssxref("background")}}</li>
+</ul>
diff --git a/files/fr/web/css/css_backgrounds_and_borders/utiliser_plusieurs_arrière-plans/index.html b/files/fr/web/css/css_backgrounds_and_borders/utiliser_plusieurs_arrière-plans/index.html
new file mode 100644
index 0000000000..fd4961c49f
--- /dev/null
+++ b/files/fr/web/css/css_backgrounds_and_borders/utiliser_plusieurs_arrière-plans/index.html
@@ -0,0 +1,55 @@
+---
+title: Utiliser plusieurs arrière-plans
+slug: Web/CSS/CSS_Backgrounds_and_Borders/Utiliser_plusieurs_arrière-plans
+tags:
+  - CSS
+  - Guide
+  - Reference
+translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds
+---
+<div>{{CSSRef}}</div>
+
+<p>Avec <a href="/fr/docs/Web/CSS/CSS3">CSS3</a>, on peut appliquer plusieurs arrière-plans à des éléments. Ceux-ci seront empilés les uns sur les autres (le premier de la liste étant le plus « haut » dans la pile et le dernier étant le plus « bas ». Seul le dernier arrière-plan peut décrire une couleur.</p>
+
+<p>Pour cela, il suffit simplement d'utiliser une liste de valeur avec {{cssxref("background")}} :</p>
+
+<pre class="brush: css">.maClasse {
+  background: background1, background 2, ..., backgroundN;
+}
+</pre>
+
+<p>Cela fonctionne aussi bien avec la propriété raccourcie {{cssxref("background")}} qu'avec les propriétés détaillées, exception faite de {{cssxref("background-color")}}. On peut donc utiliser une liste de valeurs, chacune pour un arrière-plan différent, pour les propriétés suivantes : {{cssxref("background")}}, {{cssxref("background-attachment")}}, {{cssxref("background-clip")}},<code> </code>{{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, on cumule trois arrière-plans : le logo de Firefox, un dégradé linéaire (cf. {{cssxref("linear-gradient")}}) et une image de bulles.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple_multi_ar {
+  width: 100%;
+  height: 400px;
+  background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png), url(https://mdn.mozillademos.org/files/11307/bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
+  background-repeat: no-repeat, no-repeat, no-repeat;
+  background-position: bottom right, left, right;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="exemple_multi_ar"&gt;&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemple','100%','400')}}</p>
+
+<p>Comme on peut le voir ici, le logo qui est le premier élément de la liste apparaît en dessus, il est suivi par le dégradé puis par les bulles. Chacune des propriétés ({{cssxref("background-repeat")}} et {{cssxref("background-position")}}) s'applique aux arrière-plans correspondant (la première valeur de la liste pour le premier arrière-plan, etc.).</p>
+
+<div class="note">
+<p><strong>Note :</strong> Si l'image n'apparaît pas sous CodePen, cliquez sur le bouton <em>Tidy</em> de la section CSS.</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">Utiliser les dégradés CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/css_basic_user_interface/index.html b/files/fr/web/css/css_basic_user_interface/index.html
new file mode 100644
index 0000000000..2e2abcc1f1
--- /dev/null
+++ b/files/fr/web/css/css_basic_user_interface/index.html
@@ -0,0 +1,75 @@
+---
+title: CSS Basic User Interface
+slug: Web/CSS/CSS_Basic_User_Interface
+tags:
+  - Aperçu
+  - CSS
+  - CSS Basic User Interface
+  - Overview
+  - Reference
+translation_of: Web/CSS/CSS_Basic_User_Interface
+---
+<p>{{CSSRef}}</p>
+
+<p><em><strong>CSS Basic User Interface</strong></em> est un module de la spécification CSS qui décrit les fonctionnalités et le rendu associés aux fonctionnalités de l'interface utilisateur.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("appearance")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("box-sizing")}}</li>
+ <li>{{CSSxRef("cursor")}}</li>
+ <li>{{CSSxRef("ime-mode")}} {{Deprecated_Inline}}</li>
+ <li>{{CSSxRef("nav-down")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("nav-left")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("nav-right")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("nav-up")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("outline")}}</li>
+ <li>{{CSSxRef("outline-width")}}</li>
+ <li>{{CSSxRef("outline-style")}}</li>
+ <li>{{CSSxRef("outline-color")}}</li>
+ <li>{{CSSxRef("outline-offset")}}</li>
+ <li>{{CSSxRef("resize")}}</li>
+ <li>{{CSSxRef("text-overflow")}}</li>
+ <li>{{CSSxRef("user-select")}} {{Experimental_Inline}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/CSS_Basic_User_Interface/Utilisation_d_URL_pour_la_propriété_cursor">Utiliser des URL pour la propriété <code>cursor</code></a></dt>
+ <dd>Ce guide décrit comment utiliser des URL avec la propriété {{CSSxRef("cursor")}} afin de créer des curseurs personnalisés.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Basic UI")}}</td>
+   <td>{{Spec2("CSS4 Basic UI")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Basic UI")}}</td>
+   <td>{{Spec2("CSS3 Basic UI")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "ui.html")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/css/css_basic_user_interface/utilisation_d_url_pour_la_propriété_cursor/index.html b/files/fr/web/css/css_basic_user_interface/utilisation_d_url_pour_la_propriété_cursor/index.html
new file mode 100644
index 0000000000..69b0043c13
--- /dev/null
+++ b/files/fr/web/css/css_basic_user_interface/utilisation_d_url_pour_la_propriété_cursor/index.html
@@ -0,0 +1,104 @@
+---
+title: Utilisation d'URL pour la propriété cursor
+slug: Web/CSS/CSS_Basic_User_Interface/Utilisation_d_URL_pour_la_propriété_cursor
+tags:
+  - CSS
+  - Débutant
+  - Guide
+translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property
+---
+<div>{{CSSRef}}</div>
+
+<p>Gecko 1.8 ({{geckoRelease("1.8")}} prend en charge des valeurs d'URL pour manipuler la propriété {{cssxref("cursor")}}. Ceci permet de définir des images arbitraires comme curseurs de souris — n'importe quel format d'image géré par Gecko peut être utilisé.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La syntaxe de base (CSS 2.1) pour cette propriété est :</p>
+
+<pre class="syntaxbox">{{CSSxRef("cursor")}}: <a href="/en-US/docs/CSS/Value_definition_syntax#Brackets">[</a> {{CSSxRef("&lt;url&gt;")}} , <a href="/fr/docs/Web/CSS/Syntaxe_de_définition_des_valeurs">]</a><a href="/fr/docs/Web/CSS/Syntaxe_de_définition_des_valeurs">*</a> {{CSSxRef("cursor", "<var>&lt;keyword&gt;</var>", "#Valeurs")}}</pre>
+
+<p>Ceci signifie que zéro URL ou plus peuvent être définies en étant séparées par des virgules et doivent être suivies par un des mots-clés comme <code>auto</code> ou <code>pointer</code>.</p>
+
+<p>On pourra ainsi utiliser :</p>
+
+<pre class="brush: css">cursor: url(toto.cur), url(http://www.exemple.org/truc.gif), auto;
+</pre>
+
+<p>En utilisant cette règle, le moteur essaiera d'abord de charger <code>toto.cur</code>. Si ce fichier n'existe pas ou si, pour une autre raison, l'URL n'est pas valable, ce sera celle de <code>truc.gif</code> qui sera essayée. Si cette valeur ne peut pas être utilisée non plus, le curseur correspondant à la valeur <code>auto</code> sera utilisé.</p>
+
+<p>Le support de la <a class="external" href="https://www.w3.org/TR/css3-ui/#cursor">syntaxe</a> CSS3 pour les valeurs du curseur a été ajoutée à partir de Firefox 1.5.</p>
+
+<pre class="syntaxbox">{{CSSxRef("cursor")}}: <a href="/en-US/docs/CSS/Value_definition_syntax#Brackets">[</a> {{CSSxRef("&lt;uri&gt;")}} <a href="/en-US/docs/CSS/Value_definition_syntax#Brackets">[</a> &lt;x&gt; &lt;y&gt; <a href="/fr/docs/Web/CSS/Syntaxe_de_définition_des_valeurs">]</a><a href="/fr/docs/Web/CSS/Syntaxe_de_définition_des_valeurs">?</a> , <a href="/fr/docs/Web/CSS/Syntaxe_de_définition_des_valeurs">]</a><a href="/fr/docs/Web/CSS/Syntaxe_de_définition_des_valeurs">*</a> {{CSSxRef("cursor", "<var>&lt;keyword&gt;</var>", "#Valeurs")}}
+</pre>
+
+<p>Cette syntaxe permet d'indiquer les coordonnées des points chauds du curseur qui seront maintenues aux frontières de l'image du curseur. Si aucun n'est indiqué, les coordonnées du point chaud sont lus à partir du fichier lui-même (pour les fichier CUR et XBM) ou sont réglés au coin supérieur gauche de l'image. Un exemple de la syntaxe CSS3 est:</p>
+
+<pre class="eval">cursor: url(toto.png) 4 12, auto;
+</pre>
+
+<p>Le premier nombre est la coordonnée <var>x</var>, le second numéro est la coordonnée <var>y</var>. L'exemple va régler le point chaud afin d'être le pixel (4,12) par rapport au (0,0) en haut à gauche.</p>
+
+<h2 id="Limitations">Limitations</h2>
+
+<p>Tous les formats d'image pris en charge par Gecko peuvent être utilisés : PNG, GIF, JPG, BMP, CUR, etc. Le format ANI n'est pas pris en charge et les images animées PNG ou GIF ne créeront pas de curseurs animés.</p>
+
+<div class="note">
+<p><strong>Note :</strong> À partir de Gecko 2.0 {{geckoRelease("2.0")}}, Gecko prend en charge les images SVG pour les curseurs. Mais les dimensions de l'image SVG doivent être explicites et non relative. Les instructions JavaScript ou CSS, les déclarations SMIL contenues dans l'image SVG sont ignorées. SVG ne peut donc pas être utilisé pour créer un curseur animé.</p>
+</div>
+
+<p>Pour Gecko, la taille limite des curseurs est 128 pixels par 128 pixels. Les images plus grandes seront ignorées. Toutefois, certains systèmes d'exploitation sont limités à des images de 32 pixels par 32 pixels.</p>
+
+<p>Les curseurs translucides ne sont pas pris en charge par Windows avant Windows XP.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Microsoft Internet Explorer 6.0 prend également en charge les valeurs URI pour la propriété <code>cursor</code>. Toutefois :</p>
+
+<ul>
+ <li>IE ne prend en charge que les formats CUR et ANI</li>
+ <li>IE ne prend pas en charge la syntaxe CSS3 avec les coordonnées x et y. L'image du curseur et le reste de la propriété sont alors ignorés.</li>
+</ul>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Navigateur</th>
+   <th>Version minimum</th>
+   <th>Formats</th>
+   <th>Coordonnées x-y</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td><strong>6.0</strong></td>
+   <td><code>.cur | .ani</code></td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>Firefox (Gecko), Windows et Linux</td>
+   <td><strong>1.5</strong> (1.8)</td>
+   <td><code>.cur | .png | .gif | .jpg</code></td>
+   <td>1.5 (1.8)</td>
+  </tr>
+  <tr>
+   <td>Firefox (Gecko)</td>
+   <td><strong>4.0</strong> (2.0)</td>
+   <td><code>.cur | .png | .gif | .jpg | .svg</code></td>
+   <td>(Gecko 2.0)</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>---</td>
+   <td>---</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td rowspan="2">Safari (Webkit)</td>
+   <td><strong>3.0</strong> (522-523)</td>
+   <td><code>.cur | .png | .gif | .jpg</code></td>
+   <td rowspan="2">3.0 (522-523)</td>
+  </tr>
+  <tr>
+   <td colspan="2">OS X 10.5 pour la prise en charge des fichiers <code>.cur</code></td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/css/css_box_alignment/alignement_boîtes_disposition_bloc_absolue_tableau/index.html b/files/fr/web/css/css_box_alignment/alignement_boîtes_disposition_bloc_absolue_tableau/index.html
new file mode 100644
index 0000000000..45945b3040
--- /dev/null
+++ b/files/fr/web/css/css_box_alignment/alignement_boîtes_disposition_bloc_absolue_tableau/index.html
@@ -0,0 +1,77 @@
+---
+title: 'L''alignement des boîtes pour les dispositions : en bloc, absolue, en tableau'
+slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_bloc_absolue_tableau
+tags:
+  - CSS
+  - Guide
+translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Le module de spécification <em><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></em> détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes dans une disposition en bloc, y compris pour les éléments flottants, les éléments positionnés et les tableaux. Cette page détaille les aspects spécifiques relatifs à l'alignement et à la disposition en bloc. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir <a href="/fr/docs/Web/CSS/CSS_Box_Alignment">la page principale sur cette spécification</a>.</p>
+
+<div class="note">
+<p><strong>Note :</strong> À l'heure où cet article est écrit (juin 2018), il n'y a pas de réelle prise en charge des propriétés d'alignement pour la disposition en bloc. Ce document détaille les intentions de la spécification dans un souci d'exhaustivité mais il est probable que des modifications soient apportées au fur et à mesure de l'évolution de la spécification et de l'implémentation par les navigateurs.</p>
+</div>
+
+<h2 id="align-content_et_justify-content"><code>align-content</code> et <code>justify-content</code></h2>
+
+<p>La propriété {{cssxref("justify-content")}} ne s'applique pas aux conteneurs en bloc ou aux cellules de tableau.</p>
+
+<p>La propriété {{cssxref("align-content")}} s'applique sur l'axe de bloc afin d'aligne les contenus de la boîte dans le conteneur. Si une méthode de distribution telle que <code>space-between</code>, <code>space-around</code> ou <code>space-evenly</code> est utilisée, c'est la méthode de recours qui sera utilisée car tout le contenu est considéré comme <a href="/fr/docs/Web/CSS/CSS_Box_Alignment#Le_sujet_de_l'alignement_(alignment_subject)">un seul sujet d'alignement</a>.</p>
+
+<h2 id="justify-self"><code>justify-self</code></h2>
+
+<p>La propriété {{cssxref("justify-self")}} est utilisée afin d'aligner un objet au sein de son bloc englobant selon l'axe en ligne.</p>
+
+<p>Cette propriété ne s'applique pas aux éléments flottants ou aux cellules de tableau.</p>
+
+<h3 id="Éléments_positionnés_de_façon_absolue">Éléments positionnés de façon absolue</h3>
+
+<p>Le conteneur d'alignement correspond au bloc positionné en prenant en compte les valeurs de décalage <code>top</code>, <code>left</code>, <code>bottom</code> et <code>right</code>. Le mot-clé <code>normal</code> est considéré équivalent à <code>stretch</code> sauf si l'élément positionné est un élément remplacé, auquel cas il est équivalent à <code>start</code>.</p>
+
+<h2 id="align-self"><code>align-self</code></h2>
+
+<p>La propriété {{cssxref("align-self")}} ne s'applique pas aux boîtes de bloc (y compris pour les éléments flottants) car il y a plus d'un objet sur l'axe de bloc. Elle ne s'applique pas non plus aux cellules des tableaux.</p>
+
+<h3 id="Éléments_positionnés_de_façon_absolue_2">Éléments positionnés de façon absolue</h3>
+
+<p>Le conteneur d'alignement correspond au bloc positionné en prenant en compte les valeurs de décalage <code>top</code>, <code>left</code>, <code>bottom</code> et <code>right</code>. Le mot-clé <code>normal</code> est considéré équivalent à <code>stretch</code> sauf si l'élément positionné est un élément remplacé, auquel cas il est équivalent à <code>start</code>.</p>
+
+<h2 id="Utilisation_actuelle_de_l'alignement_pour_ces_dispositions">Utilisation actuelle de l'alignement pour ces dispositions</h2>
+
+<p>À l'heure actuelle, les navigateurs n'implémentent pas l'alignement des boîtes pour la disposition en bloc. Il faut donc, pour le moment, utiliser les méthodes existantes ou placer un élément dans un conteneur flexible afin de tirer parti des fonctionnalités d'alignement des boîtes flexibles.</p>
+
+<p>Avant l'apparition des boîtes flexibles (<em>flexbox</em>), l'alignement horizontal était généralement obtenu avec des marges automatiques. En effet, {{cssxref("margin")}} avec <code>auto</code> absorbera tout l'espace disponible sur la dimension souhaité et avec une marge droite et une marge gauche automatiques, le bloc sera placé au centre :</p>
+
+<pre class="brush: css">.container {
+  width: 20em;
+  margin-left: auto;
+  margin-right: auto;
+}
+</pre>
+
+<p>Dans une disposition en tableau, il faut accéder à la propriété {{cssxref("vertical-align")}} afin d'aligner le contenu d'une cellule dans celle-ci.</p>
+
+<p>Pour de nombreux scénarios, transformer le conteneur de bloc en élément flexible fournira les options d'alignement souhaitées. Dans l'exemple qui suit, on dispose d'un conteneur avec un seul élément et ce conteneur a été transformé en élément flexible afin d'utiliser les propriétés d'alignement.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés_CSS">Propriétés CSS</h3>
+
+<ul>
+ <li>{{cssxref("justify-content")}}</li>
+ <li>{{cssxref("align-content")}}</li>
+ <li>{{cssxref("justify-self")}}</li>
+ <li>{{cssxref("align-self")}}</li>
+</ul>
+
+<h3 id="Termes_du_glossaire">Termes du glossaire</h3>
+
+<ul>
+ <li><a href="/fr/docs/Glossary/Alignment_Subject">Sujet d'alignement</a></li>
+ <li><a href="/fr/docs/Glossary/Alignment_Container">Conteneur d'alignement</a></li>
+ <li><a href="/fr/docs/Glossary/Fallback_Alignment">Alignement de recours</a></li>
+</ul>
diff --git a/files/fr/web/css/css_box_alignment/alignement_boîtes_disposition_colonnes/index.html b/files/fr/web/css/css_box_alignment/alignement_boîtes_disposition_colonnes/index.html
new file mode 100644
index 0000000000..36bee5640e
--- /dev/null
+++ b/files/fr/web/css/css_box_alignment/alignement_boîtes_disposition_colonnes/index.html
@@ -0,0 +1,51 @@
+---
+title: L'alignement des boîtes avec une disposition en colonnes
+slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_colonnes
+tags:
+  - CSS
+  - Guide
+translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Multi-column_Layout
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Le module de spécification <em><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></em> détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes avec <a href="/fr/docs/Web/CSS/Colonnes_CSS">une disposition multi-colonnes</a>. Cette page détaille les aspects spécifiques relatifs à l'alignement et au module <em>Multi-Column Layout</em>. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir <a href="/fr/docs/Web/CSS/CSS_Box_Alignment">la page principale sur cette spécification</a>.</p>
+
+<p>Pour une disposition en colonne, le conteneur d'alignement est le conteneur de colonnes. Le sujet d'alignement correspond à la boîte de colonne. Les propriétés qui s'appliquent pour ce type de disposition sont détaillées ci-après.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Le module de spécification de la disposition en colonnes (<em>Multi-Column Layout</em>) précède celui pour l'alignement des boîtes. Aussi, certaines des propriétés décrites ici, bien que spécifiées afin de fonctionner pour ce mode de disposition, peuvent ne pas encore être prises en charge par les navigateurs.</p>
+</div>
+
+<h2 id="align-content_et_justify-content"><code>align-content</code> et <code>justify-content</code></h2>
+
+<p>La propriété {{cssxref("align-content")}} s'applique à l'axe de bloc et la propriété {{cssxref("justify-content")}} s'applique à l'axe en ligne. Tout espace ajouté entre les colonnes selon la distribution choisie sera ajouté entre les colonnes. Les gouttières pourront donc être plus larges que celles indiquées par la propriété {{cssxref("column-gap")}}.</p>
+
+<p>Utiliser <code>justify-content</code> avec une valeur différente de <code>normal</code> ou <code>stretch</code> entraînera un dimensionnement des colonnes avec la valeur de {{cssxref("column-width")}}, définie sur le conteneur multi-colonnes. L'espace restant sera alors réparti selon la valeur de <code>justify-content</code>.</p>
+
+<h2 id="column-gap"><code>column-gap</code></h2>
+
+<p>La propriété {{cssxref("column-gap")}} a été définie dans des versions antérieures du module de spécification pour la disposition multi-colonne. Son rôle a été généralisé avec les autres propriétés d'espacement dans le module d'alignement des boîtes.</p>
+
+<p>On notera que, si les autres modes de disposition utilisent une valeur initiale de <code>0</code> pour <code>column-gap</code>, la disposition multi-colonne utilise une valeur initiale de <code>1em</code>.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés_CSS">Propriétés CSS</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("justify-content")}}</li>
+ <li>{{cssxref("align-content")}}</li>
+ <li>{{cssxref("column-gap")}}</li>
+</ul>
+</div>
+
+<h3 id="Termes_du_glossaire">Termes du glossaire</h3>
+
+<div class="index">
+<ul>
+ <li><a href="/fr/docs/Glossary/Alignment_Subject">Sujet d'alignement</a></li>
+ <li><a href="/fr/docs/Glossary/Alignment_Container">Conteneur d'alignement</a></li>
+ <li><a href="/fr/docs/Glossary/Fallback_Alignment">Alignement de recours</a></li>
+</ul>
+</div>
diff --git a/files/fr/web/css/css_box_alignment/alignement_boîtes_disposition_flexbox/index.html b/files/fr/web/css/css_box_alignment/alignement_boîtes_disposition_flexbox/index.html
new file mode 100644
index 0000000000..8acebc248d
--- /dev/null
+++ b/files/fr/web/css/css_box_alignment/alignement_boîtes_disposition_flexbox/index.html
@@ -0,0 +1,119 @@
+---
+title: L'alignement des boîtes avec Flexbox
+slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_Flexbox
+tags:
+  - CSS
+  - Guide
+  - flexbox
+translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Le module de spécification <em><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></em> détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes avec les boîtes flexibles (<em>flexbox</em>). Cette page détaille les aspects spécifiques relatifs à l'alignement et aux boîtes flexibles. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir <a href="/fr/docs/Web/CSS/CSS_Box_Alignment">la page principale sur cette spécification</a>.</p>
+
+<h2 id="Exemple_simple">Exemple simple</h2>
+
+<p>Dans cet exemple, trois objets flexibles sont alignés sur l'axe principal avec {{cssxref("justify-content")}} et sur l'axe secondaire grâce à {{cssxref("align-items")}}. Le premier objet surcharge l'alignement fourni par <code>align-items</code>en utilisant <code>center</code> comme valeur pour la propriété {{cssxref("align-self")}}.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/box-alignment/overview/flex-align-items.html", '100%', 500)}}</p>
+
+<h2 id="Liens_entre_les_axes_et_flex-direction">Liens entre les axes et <code>flex-direction</code></h2>
+
+<p>Les boîtes flexibles respectent le mode d'écriture du document. Aussi, si on travaille sur un document en français et qu'on utilise {{cssxref("justify-content")}} avec <code>flex-end</code>, les éléments seront alignés à la fin du conteneur flexible. Si on utilise {{cssxref("flex-direction")}} avec la valeur <code>row</code>, cet alignement suivra la direction en ligne (celle selon laquelle le texte est écrit).</p>
+
+<p>Toutefois, <em>Flexbox</em> permet de modifier l'axe principal en utilisant <code>flex-direction</code> avec la valeur <code>column</code>. Dans ce cas, <code>justify-content</code> alignera les objets selon la direction de bloc. Aussi, mieux vaut penser en termes d'axes principal (<em>main axis</em>) et d'axe secondaire (<em>cross axis</em>) lorsqu'on travaille sur des boîtes flexibles :</p>
+
+<ul>
+ <li>L'axe principal correspond à la direction fournie par <code>flex-direction</code> et l'alignement sur cet axe s'effectue avec <code>justify-content</code></li>
+ <li>L'axe secondaire est orthogonal à l'axe principal et l'alignement s'effectue avec <code>align-content</code>, <code>align-self</code>/<code>align-items</code></li>
+</ul>
+
+<h3 id="Alignement_sur_l'axe_principal">Alignement sur l'axe principal</h3>
+
+<ul>
+ <li>{{cssxref("justify-content")}}</li>
+</ul>
+
+<h3 id="Alignement_sur_l'axe_secondaire">Alignement sur l'axe secondaire</h3>
+
+<ul>
+ <li>{{cssxref("align-self")}}</li>
+ <li>{{cssxref("align-items")}}</li>
+ <li>{{cssxref("align-content")}}</li>
+</ul>
+
+<h3 id="Absence_de_justify-self_pour_Flexbox">Absence de <code>justify-self</code> pour <em>Flexbox</em></h3>
+
+<p>Sur l'axe principal et avec les boîtes flexibles, le contenu est considéré comme un seul groupe. La quantité d'espace nécessaire est calculée pour disposer les différents éléments et l'espace restant peut être réparti. La propriété <code>justify-content</code> contrôle la répartition de cet espace. Avec <code>justify-content: flex-end</code>, l'espace supplémentaire sera ajouté avant les éléments et avec <code>justify-content: space-around</code>, il sera placé de chaque côté.</p>
+
+<p>Autrement dit, <code>justify-self</code> n'a pas de sens pour les boîtes flexibles car le contenu est considéré comme un seul « tenant » qui est déplacé.</p>
+
+<p>Pour l'axe secondaire, <code>align-self</code> peut être pertinent car il peut y avoir un espace supplémentaire sur cet axe et selon lequel on peut déplacer un seul des éléments.</p>
+
+<h2 id="Alignement_et_marges_automatiques">Alignement et marges automatiques</h2>
+
+<p><code>justify-self</code> pourrait être utile lorsqu'on souhaite séparer un ensemble d'éléments flexibles pour créer un menu de navigation. Dans ce cas, on peut utiliser des marges automatiques avec <code>auto</code>. En effet, une marge avec cette valeur consommera tout l'espace disponible sur cette dimension. En définissant les marges gauche et droite avec <code>auto</code>, les deux côtés du bloc occuperont tout l'espace disponible et la boîte sera alors placée au centre.</p>
+
+<p>En utilisant {{cssxref("margin")}} avec <code>auto</code> sur un élément d'un ensemble d'éléments flexibles alignés vers le début, on peut créer un tel effet. Dès qu'il n'y a plus d'espace disponible pour les marges automatiques, l'objet se comporte comme les autres objets flexibles et se réduit pour s'inscrire dans l'espace disponible.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/box-alignment/flexbox/auto-margins.html", '100%', 500)}}</p>
+
+<h2 id="Les_propriétés_gap">Les propriétés <code>gap</code></h2>
+
+<ul>
+ <li>{{cssxref("row-gap")}}</li>
+ <li>{{cssxref("column-gap")}}</li>
+ <li>{{cssxref("gap")}}</li>
+</ul>
+
+<h3 id="Créer_des_gouttières_fixes_entre_chaque_objet">Créer des gouttières fixes entre chaque objet</h3>
+
+<p>Sur l'axe principal, la propriété <code>column-gap</code> permettra de créer des gouttières de taille fixe de chaque côté de l'objet.</p>
+
+<p>Sur l'axe secondaire, <code>row-gap</code> permettra d'espace les lignes adjacentes. Aussi, il faut que <code>flex-wrap</code> vaille <code>wrap</code> afin que <code>row-gap</code> ait un effet.</p>
+
+<div class="note">
+<p><strong>Note :</strong> À l'heure où ces lignes sont écrites, seul Firefox 63 prend en charge les propriétés <code>gap</code> pour les boîtes flexibles. En effet, le comportement de ces propriétés pour les dispositions flexibles est un ajout récent à la spécification.</p>
+</div>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés_CSS">Propriétés CSS</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("justify-content")}}</li>
+ <li>{{cssxref("align-content")}}</li>
+ <li>{{cssxref("place-content")}}t</li>
+ <li>{{cssxref("justify-items")}}</li>
+ <li>{{cssxref("align-items")}}</li>
+ <li>{{cssxref("place-items")}}</li>
+ <li>{{cssxref("align-self")}}</li>
+ <li>{{cssxref("row-gap")}}</li>
+ <li>{{cssxref("column-gap")}}</li>
+ <li>{{cssxref("gap")}}</li>
+</ul>
+</div>
+
+<h3 id="Termes_du_glossaire">Termes du glossaire</h3>
+
+<div class="index">
+<ul>
+ <li><a href="/fr/docs/Glossaire/Axe_transversal">Axe secondaire</a></li>
+ <li><a href="/fr/docs/Glossaire/Axe_principal">Axe principal</a></li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible">L'alignement avec <em>Flexbox</em></a></li>
+</ul>
+
+<h2 id="Ressources_externes">Ressources externes</h2>
+
+<ul>
+ <li><a href="https://rachelandrew.co.uk/css/cheatsheets/box-alignment">Anti-sèche pour l'alignement des boîtes (en anglais)</a></li>
+ <li><a href="https://www.smashingmagazine.com/2016/11/css-grids-flexbox-box-alignment-new-layout-standard/">Alignement pour les grilles, les boîtes flexibles et les boîtes (en anglais)</a></li>
+ <li><a href="https://blogs.igalia.com/jfernandez/2017/05/03/can-i-use-css-box-alignment/">Quelques pensées sur les implémentations partielles de <em>Box Alignment</em> (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/css_box_alignment/alignement_boîtes_disposition_grille/index.html b/files/fr/web/css/css_box_alignment/alignement_boîtes_disposition_grille/index.html
new file mode 100644
index 0000000000..4adf375ac4
--- /dev/null
+++ b/files/fr/web/css/css_box_alignment/alignement_boîtes_disposition_grille/index.html
@@ -0,0 +1,119 @@
+---
+title: L'alignement des boîtes avec une grille CSS
+slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_grille
+tags:
+  - CSS
+  - CSS Grid
+  - Grilles CSS
+  - Guide
+translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Le module de spécification <em><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></em> détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes avec <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">les grilles CSS</a>. Cette page détaille les aspects spécifiques relatifs à l'alignement et aux grilles. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir <a href="/fr/docs/Web/CSS/CSS_Box_Alignment">la page principale sur cette spécification</a>.</p>
+
+<h2 id="Exemple_simple">Exemple simple</h2>
+
+<p>Dans l'exemple qui suit, on utilise une disposition en grille et le conteneur possède un espace restant après avoir disposé les pistes à largeur fixe le long de l'axe en ligne. L'espace restant est distribué grâce à la propriété <code>justify-content</code>. Le long de l'axe secondaire, les éléments sont alignés au sein de leurs zones avec la propriété <code>align-items</code>. Le premier objet surcharge la valeur fournie par <code>align-items</code> en utilisant <code>align-self</code> avec la valeur <code>center</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-align-items.html", '100%', 500)}}</p>
+
+<h2 id="Axes_de_la_grille">Axes de la grille</h2>
+
+<p>La grille est une méthode de disposition sur deux dimensions.</p>
+
+<p>L'axe en ligne correspond à l'axe selon lequel les mots d'une phrase sont écrits pour le mode d'écriture utilisé. Ainsi, pour une langue écrite horizontalement (comme le français ou l'arabe), l'axe en ligne sera horizontal. Pour les modes d'écriture verticaux, cet axe sera vertica.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15962/Inline_Axis.png" style="height: 306px; width: 940px;"></p>
+
+<p>Pour aligner des éléments selon l'axe en ligne, on utilisera les propriétés commençant par <code>justify-</code> : {{cssxref("justify-content")}}, {{cssxref("justify-items")}} et {{cssxref("justify-self")}}.</p>
+
+<p>L'axe de bloc est orthogonal à l'axe en ligne et évolue dans le sens où les blocs sont affichés sur la page (en français, par exemple, les blocs sont disposés de bas en haut).</p>
+
+<p>Pour aligner des éléments sur l'axe de bloc, on utilisera les propriétés commençant par <code>align-</code> : {{cssxref("align-content")}}, {{cssxref("align-items")}} et {{cssxref("align-self")}}.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15961/Block_Axis.png" style="height: 306px; width: 940px;"></p>
+
+<h2 id="Alignement_individuel">Alignement individuel</h2>
+
+<ul>
+ <li>{{cssxref("justify-self")}}</li>
+ <li>{{cssxref("align-self")}}</li>
+ <li>{{cssxref("place-self")}}</li>
+ <li>{{cssxref("justify-items")}}</li>
+ <li>{{cssxref("align-items")}}</li>
+ <li>{{cssxref("place-items")}}</li>
+</ul>
+
+<p>Ces propriétés permettent d'aligner individuellement chacun des éléments au sein de leur zone de grille. Les propriétés <code>align-items</code> et <code>justify-items</code> sont appliquées au conteneur de grille et définissent <code>align-self</code> et <code>justify-self</code> pour l'ensemble des sujets d'alignement. Cela signifie qu'on peut indiquer un alignement global au niveau du conteneur puis surcharger cette règle au cas par cas si besoin en utilisant <code>align-self</code> ou <code>justify-self</code> sur les éléments souhaités.</p>
+
+<p>Les valeurs initiales pour <code>align-self</code> et <code>justify-self</code> sont <code>stretch</code>. Aussi, l'objet sera étiré sur toute la zone de grille qui lui est dédié. Une exception est apportée à cette règle lorsque l'élément possède des proportions intrinsèques (une image par exemple) ; dans ce cas, l'élément est aligné avec <code>start</code>sur les deux axes et l'élément n'est pas déformé.</p>
+
+<h2 id="Alignement_du_contenu">Alignement du contenu</h2>
+
+<ul>
+ <li>{{cssxref("justify-content")}}</li>
+ <li>{{cssxref("align-content")}}</li>
+ <li>{{cssxref("place-content")}}</li>
+</ul>
+
+<p>Ces propriétés indiquent comment aligner les pistes de la grille lorsqu'il reste de l'espace à répartir. Ce scénario se produit uniquement si la somme des tailles des pistes est inférieure à la taille du conteneur de grille.</p>
+
+<h2 id="Gouttières_et_versions_préfixées_des_propriétés">Gouttières et versions préfixées des propriétés</h2>
+
+<ul>
+ <li>{{cssxref("row-gap")}}</li>
+ <li>{{cssxref("column-gap")}}</li>
+ <li>{{cssxref("gap")}}</li>
+ <li>{{cssxref("grid-row-gap")}}</li>
+ <li>{{cssxref("grid-column-gap")}}</li>
+ <li>{{cssxref("grid-gap")}}</li>
+</ul>
+
+<p>La spécification sur les grilles contenaient initialement les définitions des propriétés {{cssxref("grid-row-gap")}}, {{cssxref("grid-column-gap")}} et {{cssxref("grid-gap")}}. Les définitions de ces propriétés ont depuis été déplacées dans le module de spécification <em>Box Alignment</em> et ont respectivement été renommées en {{cssxref("row-gap")}}, {{cssxref("column-gap")}} et {{cssxref("gap")}}. Ainsi, elles peuvent être utilisées pour d'autres méthodes de disposition où les gouttières sont pertinentes.</p>
+
+<p>À l'heure actuelle (juin 2018), seul Microsoft Edge prend en charge les versions non-préfixées pour ces propriétés. Il vaut donc mieux utiliser les deux versions (avec puis sans préfixe <code>grid-</code>) afin d'assurer une meilleure compatibilité.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés_CSS">Propriétés CSS</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("justify-content")}}</li>
+ <li>{{cssxref("align-content")}}</li>
+ <li>{{cssxref("place-content")}}t</li>
+ <li>{{cssxref("justify-items")}}</li>
+ <li>{{cssxref("align-items")}}</li>
+ <li>{{cssxref("place-items")}}</li>
+ <li>{{cssxref("justify-self")}}</li>
+ <li>{{cssxref("align-self")}}</li>
+ <li>{{cssxref("place-self")}}</li>
+ <li>{{cssxref("row-gap")}}</li>
+ <li>{{cssxref("column-gap")}}</li>
+ <li>{{cssxref("gap")}}</li>
+</ul>
+</div>
+
+<h3 id="Termes_du_glossaire">Termes du glossaire</h3>
+
+<div class="index">
+<ul>
+ <li><a href="/fr/docs/Glossaire/Axe_transversal">Axe secondaire</a></li>
+ <li><a href="/fr/docs/Glossaire/Axe_principal">Axe principal</a></li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">Aligner les boîtes dans une disposition en grille</a></li>
+</ul>
+
+<h2 id="Ressources_externes">Ressources externes</h2>
+
+<ul>
+ <li><a href="https://rachelandrew.co.uk/css/cheatsheets/box-alignment">Anti-sèche pour l'alignement des boîtes (en anglais)</a></li>
+ <li><a href="https://www.smashingmagazine.com/2016/11/css-grids-flexbox-box-alignment-new-layout-standard/">Alignement pour les grilles, les boîtes flexibles et les boîtes (en anglais)</a></li>
+ <li><a href="https://blogs.igalia.com/jfernandez/2017/05/03/can-i-use-css-box-alignment/">Quelques pensées sur les implémentations partielles de <em>Box Alignment</em> (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/css_box_alignment/index.html b/files/fr/web/css/css_box_alignment/index.html
new file mode 100644
index 0000000000..e0787aca03
--- /dev/null
+++ b/files/fr/web/css/css_box_alignment/index.html
@@ -0,0 +1,249 @@
+---
+title: CSS Box Alignment
+slug: Web/CSS/CSS_Box_Alignment
+tags:
+  - Alignement
+  - CSS
+  - Guide
+translation_of: Web/CSS/CSS_Box_Alignment
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Le module de spécification <em>CSS Box Alignment</em> (alignement des boîtes en CSS) décrit les fonctionnalités relatives à l'alignement des boîtes pour les différents modes de disposition CSS : disposition en bloc, en tableau, disposition flexible et disposition en grille. L'objectif de ce module est d'obtenir des méthodes d'alignement cohérentes pour tout CSS. Dans ce guide, nous verrons les différents concepts utilisés par cette spécification.</p>
+
+<div class="note">
+<p><strong>Note : </strong>La documentation relative à chaque méthode de disposition explicitera comment le module d'alignement est appliqué pour cette méthode.</p>
+</div>
+
+<h2 id="Anciennes_méthodes_d'alignement">Anciennes méthodes d'alignement</h2>
+
+<p>Par le passé, CSS disposait de peu d'outils pour l'alignement. Le texte pouvait être aligné grâce à {{cssxref("text-align")}}, les blocs pouvaient être centrés avec des marges ({{cssxref("margin")}}) automatique et les tableaux ou éléments en affichage <em>inline-block</em> pouvaient tirer parti de {{cssxref("vertical-align")}}. Désormais, l'alignement du texte est couvert par les modules <a href="https://www.w3.org/TR/css-inline-3/">Inline Layout</a> et <a href="https://www.w3.org/TR/css-text-3/">CSS Text</a> et, pour la première fois, avec le module <em>Box Alignment</em>, on dispose d'outils complets pour l'alignement vertical et horizontal.</p>
+
+<p>Si vous connaissez déjà <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS">les boîtes flexibles (<em>flexbox</em>)</a>, vous reconnaitrez certaines propriétés faisant partie de la spécification de niveau 1 pour Flexbox. Toutefois, la spécification indique que la spécification <em>Box Alignment</em> est prioritaire car elle peut décrire certaines fonctionnalités supplémentaires.</p>
+
+<h2 id="Exemples_simples">Exemples simples</h2>
+
+<p>Dans les exemples suivants, nous allons voir comment certaines des propriétés d'alignement peuvent être appliquées sur des dispositions <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">en grille</a> ou utilisant <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS">les boîtes flexibles</a>.</p>
+
+<h3 id="Alignement_pour_une_disposition_en_grille">Alignement pour une disposition en grille</h3>
+
+<p>Dans cet exemple avec une grille, on dispose d'un espace restant dans le conteneur après avoir placé les pistes de largeur fixe le long de l'axe en ligne (l'axe principal). L'espace est réparti grâce à la propriété {{cssxref("justify-content")}}. Sur l'axe de bloc (l'axe secondaire), l'alignement des éléments sur la grille est dicté par {{cssxref("align-items")}}. Le premier objet surcharge la règle fournie par <code>align-items</code> en utilisant {{cssxref("align-self")}} avec la valeur <code>center</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-align-items.html", '100%', 500)}}</p>
+
+<h3 id="Alignement_pour_une_disposition_flexible_(flexbox)">Alignement pour une disposition flexible (<em>flexbox</em>)</h3>
+
+<p>Dans cet exemple, trois objets flexibles sont alignés le long de l'axe principal avec <code>justify-content</code> et selon l'axe secondaire avec <code>align-items</code>. Le premier objet surcharge la règle indiquée avec <code>align-items</code> grâce à la propriété <code>align-self</code> qui vaut ici <code>center</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/box-alignment/overview/flex-align-items.html", '100%', 500)}}</p>
+
+<h2 id="Concepts_majeurs_et_terminologie">Concepts majeurs et terminologie</h2>
+
+<p>Ce module de spécification définit des termes relatifs à l'alignement afin de pouvoir se référer à ces concepts sans qu'ils soient particulièrement liés à l'implémentation particulière d'un mode de disposition. Ces concepts sont communs à l'ensemble des méthodes de disposition.</p>
+
+<h3 id="Liens_avec_les_modes_d'écriture">Liens avec les modes d'écriture</h3>
+
+<p>L'alignement est lié aux modes d'écriture et, lorsqu'on aligne un élément, on ne l'aligne pas selon des axes « physiques » (haut, droit, bas, gauche) mais selon le début ou la fin des dimensions utilisées par ce mode d'écriture. Cela permet de s'assurer que l'alignement fonctionne de la même façon, quel que soit le mode d'écriture utilisé par le document.</p>
+
+<h3 id="Deux_dimensions_pour_l'alignement">Deux dimensions pour l'alignement</h3>
+
+<p>Lorsqu'on utilise les propriétés d'alignement, on aligne le contenu selon deux axes : l'axe en ligne (<em>inline axis</em>) et l'axe de bloc (<em>block axis</em>). L'axe en ligne correspond à l'axe selon lequel les mots sont écrits pour ce mode d'écriture. En français, par exemple, l'axe en ligne est un axe horizontal dirigé de la gauche vers la droite. L'axe de bloc est orthogonal à l'axe en ligne et suit la direction selon laquelle les blocs de texte sont disposés les uns à la suite des autres.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15952/two-axes.png"></p>
+
+<p>Lorsqu'on aligne des objets le long de l'axe en ligne, on utilisera les propriétés qui commencent par <code>justify-</code>:</p>
+
+<ul>
+ <li>{{cssxref("justify-items")}}</li>
+ <li>{{cssxref("justify-self")}}</li>
+ <li>{{cssxref("justify-content")}}</li>
+</ul>
+
+<p>Lorsqu'on aligne des objets le long de l'axe de bloc, on utilisera les propriétés qui commencent par <code>align-</code>:</p>
+
+<ul>
+ <li>{{cssxref("align-items")}}</li>
+ <li>{{cssxref("align-self")}}</li>
+ <li>{{cssxref("align-content")}}</li>
+</ul>
+
+<p>Flexbox ajoute un niveau de complexité car si {{cssxref("flex-direction")}} vaut <code>row</code>, ces règles sont vraies mais si <code>flex-direction</code> vaut <code>column</code>, elles sont inversées. Toutefois, lorsqu'on travaille avec les boîtes flexibles, il est préférable de penser en termes d'axe principal et d'axe secondaire plutôt qu'en termes d'axe en ligne et d'axe de bloc. Les propriétés <code>justify-</code> permettent toujours d'aligner selon l'axe principal et les propriétés <code>align-</code> d'aligner selon l'axe secondaire.</p>
+
+<h3 id="Le_sujet_de_l'alignement_(alignment_subject)">Le sujet de l'alignement (<em>alignment subject</em>)</h3>
+
+<p>Le <strong>sujet de l'alignement</strong> est l'objet qu'on aligne. Pour <code>justify-self</code> ou <code>align-self</code>, ou lorsqu'on paramètre ces valeurs pour un group avec <code>justify-items</code> ou <code>align-items</code>, cela correspondra à la boîte de marge de l'élément sur lequel la propriété est appliqué. Les propriétés <code>justify-content</code> et <code>align-content</code> varient selon la méthode de disposition utilisée.</p>
+
+<h3 id="Le_conteneur_d'alignement_(alignment_container)">Le conteneur d'alignement (<em>alignment container</em>)</h3>
+
+<p>Le <strong>conteneur d'alignement</strong> est la boîte au sein de laquelle le sujet est aligné. Il s'agit généralement du bloc englobant du sujet de l'alignement. Un conteneur d'alignement peut contenir un ou plusieurs sujets.</p>
+
+<p>Dans l'image qui suit, on voit un conteneur d'alignement qui contient deux sujets.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15953/align-container-subjects.png" style="height: 170px; width: 248px;"></p>
+
+<h3 id="L'alignement_de_recours_(fallback)">L'alignement de recours (<em>fallback</em>)</h3>
+
+<p>Si l'alignement défini ne peut pas être respecté, on utilisera un alignement de recours (<em>fallback alignment</em>) qui déterminera comment gérer l'espace disponible. L'alignement de recours est défini spécifiquement pour chaque méthode de disposition.</p>
+
+<h2 id="Types_d'alignement">Types d'alignement</h2>
+
+<p>Il existe trois types d'alignement définis par la spécification et qui fonctionnent avec des mots-clés.</p>
+
+<ul>
+ <li><strong>Alignement en position </strong>: la position du sujet est définie relativement à celle du conteneur.</li>
+ <li><strong>Alignement selon la ligne de base </strong>: ces mots-clés définissent l'alignement comme une relation entre les lignes de base des sujets au sein d'un contexte d'alignement.</li>
+ <li><strong>Alignement distribué </strong>: ces mots-clés définissent l'alignement comme une distribution de l'espace entre les sujets.</li>
+</ul>
+
+<h3 id="Alignement_en_position_avec_des_mots-clés">Alignement en position avec des mots-clés</h3>
+
+<p>Les valeurs suivantes permettent de réaliser un alignement en position et peuvent être utilisées comme valeurs pour <code>justify-content</code>, <code>align-content</code> ainsi que pour <code>justify-self</code> et <code>align-self</code>.</p>
+
+<ul>
+ <li><code>center</code></li>
+ <li><code>start</code></li>
+ <li><code>end</code></li>
+ <li><code>self-start</code></li>
+ <li><code>self-end</code></li>
+ <li><code>flex-start</code> (uniquement pour les boîtes flexibles)</li>
+ <li><code>flex-end</code> (uniquement pour les boîtes flexibles)</li>
+ <li><code>left</code></li>
+ <li><code>right</code></li>
+</ul>
+
+<p>En dehors des valeurs <em>physiques</em> <code>left</code> et <code>right</code> qui sont relatives à la disposition physique de l'écran, les autres valeurs sont des valeurs <em>logiques</em> qui font référence au mode d'écriture du contenu.</p>
+
+<p>Si on prendre l'exemple d'une disposition en grille : en français, utiliser <code>justify-content</code> avec <code>start</code> déplacera les éléments sur l'axe en ligne au début, ce qui correspondra, dans ce cas, à la gauche. Si on utilise cette même règle avec un document écrit en arabe, qui s'écrit de droite à gauche, la valeur <code>start</code> regroupera les éléments sur le côté droit de la page.</p>
+
+<p>On voit ici que ces deux exemples utilisent <code>justify-content: start</code> mais que l'emplacement des sujets varie selon le mode d'écriture.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15956/writing-mode-start.png" style="height: 101px; width: 478px;"></p>
+
+<h3 id="Alignement_selon_la_ligne_de_base">Alignement selon la ligne de base</h3>
+
+<p>Les mots-clés pour l'alignement sur les lignes de bases permettent d'aligner les lignes de bases des boîtes parmi un groupe de sujets. Ces valeurs peuvent être utilisées avec <code>justify-content</code>, <code>align-content</code> ou avec <code>justify-self</code> et <code>align-self</code>.</p>
+
+<ul>
+ <li><code>baseline</code></li>
+ <li><code>first baseline</code></li>
+ <li><code>last baseline</code></li>
+</ul>
+
+<p>L'alignement du contenu selon la ligne de base (c'est-à-dire avec <code>justify-content</code> ou <code>align-content</code>) fonctionne pour les méthodes de disposition qui organisent les objets en lignes. Les sujets sont alignés sur une ligne de base commune en ajoutant du remplissage (<em>padding</em>) à l'intérieur de chaque boîte si nécessaire.</p>
+
+<p>L'alignement des éléments (<em>self alignment</em>) (c'est-à-dire avec <code>justify-self</code> ou <code>align-self</code> pour des sujets distincts ou avec <code>justify-items</code> et <code>align-items</code> pour des groupes) décale les boîtes afin de les aligner sur une ligne de base en ajoutant une marge à l'extérieur des boîtes.</p>
+
+<h3 id="Alignement_distribué">Alignement distribué</h3>
+
+<p>Les mots-clés permettant de décrire un <strong>alignement distribué</strong> sont utilisés avec les propriétés <code>align-content</code> et <code>justify-content</code>. Ces mots-clés définissent ce qui se produit lorsqu'il reste de l'espace après que les sujets aient été affichés. Les valeurs correspondantes sont :</p>
+
+<ul>
+ <li><code>stretch</code></li>
+ <li><code>space-between</code></li>
+ <li><code>space-around</code></li>
+ <li><code>space-evenly</code></li>
+</ul>
+
+<p>Ainsi, si des objets flexibles sont alignés avec <code>flex-start</code> et qu'on travaille dans un mode d'écriture horizontal de gauche à droite et de haut en bas (comme le français) avec <code>flex-direction</code> qui vaut <code>row</code>, les sujets commenceront à gauche et l'espace disponible sera affiché à droite après que les sujets aient été placés.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15954/justify-content-start.png" style="height: 100px; width: 559px;"></p>
+
+<p>Si on utilise <code>justify-content: space-between</code> sur le conteneur flexible, l'espace disponible sera alors réparti entre les objets.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15955/justify-content-space-between.png" style="height: 100px; width: 559px;"></p>
+
+<p>Pour que ces mots-clés aient un effet, il est nécessaire qu'il reste de l'espace supplémentaire. S'il n'y a plus d'espace, aucune distribution ne pourra être effectuée.</p>
+
+<h2 id="Gestion_du_dépassement">Gestion du dépassement</h2>
+
+<p>Les mots-clés <code>safe</code> et <code>unsafe</code> permettent de définir le comportement obtenu lorsque le sujet d'alignement est plus grand que le conteneur. Le mot-clé <code>safe</code> alignera selon <code>start</code> si l'alignement indiqué provoque un dépassement, afin de réduire la « perte de données » visible en dehors du conteneur et sur laquelle l'utilisateur ne pourra pas avoir accès.</p>
+
+<p>La valeur <code>unsafe</code> permet de respecter l'alignement indiqué, même si celui-ci provoque un dépassement entraînant une telle perte de données.</p>
+
+<h2 id="Espaces_entre_les_boîtes">Espaces entre les boîtes</h2>
+
+<p>La spécification pour l'alignement des boîtes inclut également les propriétés <code>gap</code>, <code>row-gap</code> et <code>column-gap</code>. Ces propriétés permettent d'obtenir un espacement cohérents entre les objets d'une ligne ou d'une colonne pour tout mode de disposition organisant les objets de cette façon.</p>
+
+<p>La propriété <code>gap</code> est une propriété raccourcie pour <code>row-gap</code> et <code>column-gap</code> et qui permet de définir ces deux propriétés en une seule règle.</p>
+
+<ul>
+ <li>{{cssxref("row-gap")}}</li>
+ <li>{{cssxref("column-gap")}}</li>
+ <li>{{cssxref("gap")}}</li>
+</ul>
+
+<p>Dans l'exemple suivant, on a une disposition en grille et on utilise la propriété raccourcie <code>gap</code> afin de définir un espace de <code>10px</code> entre chaque piste de ligne et un espace de <code>2em</code> entre chaque piste de colonne.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-gap.html", '100%', 500)}}</p>
+
+<p>Dans cet exemple, on utilise la propriété {{cssxref("grid-gap")}} en plus de la propriété {{cssxref("gap")}}. Les propriétés d'espacement, initialement définies pour la disposition en grille, étaient préfixées par <code>grid-</code> et certains navigateurs ne prennent encore en charge que ces versions préfixées :</p>
+
+<ul>
+ <li>{{cssxref("grid-row-gap")}}</li>
+ <li>{{cssxref("grid-column-gap")}}</li>
+ <li>{{cssxref("grid-gap")}}</li>
+</ul>
+
+<p>Ces versions préfixées seront maintenues comme des alias des propriétés non-préfixées. Toutefois, il est toujours possible de les dédoubler comme on le fait avec les propriétés préfixées des différents éditeurs : déclarer la propriété <code>grid-gap</code> puis <code>gap</code> avec la même valeur.</p>
+
+<p>Attention, d'autres éléments peuvent rentrer en jeu et ajouter de l'espace (les mots-clés de distribution ou les marges sur les éléments par exemple).</p>
+
+<h2 id="Pages_associées_à_chaque_propriété_d'alignement">Pages associées à chaque propriété d'alignement</h2>
+
+<p>Les propriétés d'alignement des boîtes CSS sont implémentées différemment selon le mode de disposition utilisé. Vous pouvez vous référer aux pages suivantes afin de connaître les détails de ces différences :</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox">L'alignement des boîtes avec Flexbox</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout">L'alignement des boîtes avec les grilles CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Multi-column_Layout">L'alignement des boîtes avec une disposition en colonne</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables">L'alignement des boîtes pour les dispositions en bloc, les dispositions absolues et en tableau</a></li>
+</ul>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés_CSS">Propriétés CSS</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("justify-content")}}</li>
+ <li>{{cssxref("align-content")}}</li>
+ <li>{{cssxref("place-content")}}</li>
+ <li>{{cssxref("justify-items")}}</li>
+ <li>{{cssxref("align-items")}}</li>
+ <li>{{cssxref("place-items")}}</li>
+ <li>{{cssxref("justify-self")}}</li>
+ <li>{{cssxref("align-self")}}</li>
+ <li>{{cssxref("place-self")}}</li>
+ <li>{{cssxref("row-gap")}}</li>
+ <li>{{cssxref("column-gap")}}</li>
+ <li>{{cssxref("gap")}}</li>
+</ul>
+</div>
+
+<h3 id="Termes_du_glossaire">Termes du glossaire</h3>
+
+<div class="index">
+<ul>
+ <li><a href="/fr/docs/Glossaire/Axe_transversal">Axe secondaire</a></li>
+ <li><a href="/fr/docs/Glossaire/Axe_principal">Axe principal</a></li>
+ <li><a href="/fr/docs/Glossary/Alignment_Container">Conteneur d'alignement</a></li>
+ <li><a href="/fr/docs/Glossary/Alignment_Subject">Sujet d'alignement</a></li>
+ <li><a href="/fr/docs/Glossary/Fallback_Alignment">Alignement de recours</a></li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<ul>
+ <li>Guide CSS sur Flexbox : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de base de Flexbox</a></em></li>
+ <li>Guide CSS sur Flexbox : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible">Aligner les éléments d'un conteneur flexible</a></em></li>
+ <li>Guide CSS sur les grilles : <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">Aligner les boîtes dans une disposition en grille</a></em></li>
+</ul>
+
+<h2 id="Ressources_externes">Ressources externes</h2>
+
+<ul>
+ <li><a href="https://rachelandrew.co.uk/css/cheatsheets/box-alignment">Anti-sèche pour l'alignement des boîtes (en anglais)</a></li>
+ <li><a href="https://www.smashingmagazine.com/2016/11/css-grids-flexbox-box-alignment-new-layout-standard/">Alignement pour les grilles, les boîtes flexibles et les boîtes (en anglais)</a></li>
+ <li><a href="https://blogs.igalia.com/jfernandez/2017/05/03/can-i-use-css-box-alignment/">Quelques pensées sur les implémentations partielles de <em>Box Alignment</em> (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/css_color/index.html b/files/fr/web/css/css_color/index.html
new file mode 100644
index 0000000000..1ac8eca152
--- /dev/null
+++ b/files/fr/web/css/css_color/index.html
@@ -0,0 +1,121 @@
+---
+title: CSS Color
+slug: Web/CSS/CSS_Color
+tags:
+  - Aperçu
+  - CSS
+  - CSS Colors
+  - Couleurs
+  - Overview
+  - Reference
+translation_of: Web/CSS/CSS_Color
+---
+<div>{{CSSRef}}</div>
+
+<p><em><strong>CSS Color</strong></em> est un module des spécifications CSS qui décrit la gestion des couleurs, les types de donnée associés, la fusion des couleurs et la gestion de l'opacitié. Ce module ne contient pas l'ensemble des propriétés CSS qui prennent une valeur de type {{cssxref("&lt;color&gt;")}}, toutefois, ces propriétés dépendent des notions et règles définies dans cette spécification.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("color")}}</li>
+ <li>{{cssxref("opacity")}}</li>
+ <li>{{cssxref("color-adjust")}}</li>
+</ul>
+</div>
+
+<h3 id="Types_de_données">Types de données</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("&lt;color&gt;")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/HTML/Appliquer_des_couleurs">Appliquer des couleurs à des éléments HTML grâce à CSS</a></dt>
+ <dd>Un guide décrivant comment utiliser CSS pour colorer différents types de contenu. Cet article couvre l'ensemble des propriétés CSS ayant trait aux couleurs.</dd>
+</dl>
+
+<h2 id="Outils">Outils</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/Couleurs_CSS/Sélecteur_de_couleurs">Sélecteur de couleurs</a></dt>
+ <dd>Cet outil permet de créer, ajuster et tester des couleurs sur mesure.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Colors')}}</td>
+   <td>{{Spec2('CSS4 Colors')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Colors')}}</td>
+   <td>{{Spec2('CSS3 Colors')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<h3 id="color_property"><code>color</code> property</h3>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.color")}}</p>
+
+<h3 id="color-adjust_property"><code>color-adjust</code> property</h3>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.color-adjust")}}</p>
+
+<h3 id="opacity_property"><code>opacity</code> property</h3>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.opacity")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Des propriétés liées aux couleurs mais qui font partie d'autres spécifications :
+  <ul>
+   <li>{{cssxref("background-color")}},</li>
+   <li>{{cssxref("border-color")}},</li>
+   <li>{{cssxref("outline-color")}},</li>
+   <li>{{cssxref("text-decoration-color")}},</li>
+   <li>{{cssxref("text-emphasis-color")}},</li>
+   <li>{{cssxref("text-shadow")}},</li>
+   <li>{{cssxref("caret-color")}},</li>
+   <li>{{cssxref("column-rule-color")}}</li>
+  </ul>
+ </li>
+ <li>En CSS, les dégradés ne sont pas des couleurs mais des <a href="/fr/docs/Web/CSS/CSS_Images">images</a>.</li>
+</ul>
diff --git a/files/fr/web/css/css_columns/concepts_base_multi-colonnes/index.html b/files/fr/web/css/css_columns/concepts_base_multi-colonnes/index.html
new file mode 100644
index 0000000000..2032e1c2c6
--- /dev/null
+++ b/files/fr/web/css/css_columns/concepts_base_multi-colonnes/index.html
@@ -0,0 +1,92 @@
+---
+title: Concepts de base pour la disposition multi-colonnes
+slug: Web/CSS/CSS_Columns/Concepts_base_multi-colonnes
+tags:
+  - CSS
+  - Guide
+translation_of: Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">La disposition sur plusieurs colonnes (« <em>Multiple-column Layout</em> » ou « <em>multicol</em> » en anglais) est un module de spécification pour organiser du contenu sur un ensemble de colonnes, à la façon des colonnes dans un journal imprimé. Dans ce guide, nous verrons comment fonctionne cette spécification et quelques cas d'exemples.</p>
+
+<h2 id="Concepts_et_terminologie">Concepts et terminologie</h2>
+
+<p>La disposition multi-colonnes se distinguent des autres dispositions CSS car elle fragmente le contenu, y compris les éléments descendants, en colonnes. Cela se produira de façon analogue en fragmentant sur des pages avec le module de spécification <a href="/fr/docs/Web/CSS/CSS_Pages">CSS Paged Media</a>.</p>
+
+<p>Les propriétés définies dans cette spécification sont :</p>
+
+<ul>
+ <li>{{cssxref("column-width")}}</li>
+ <li>{{cssxref("column-count")}}</li>
+ <li>{{cssxref("columns")}}</li>
+ <li>{{cssxref("column-rule-color")}}</li>
+ <li>{{cssxref("column-rule-style")}}</li>
+ <li>{{cssxref("column-rule-width")}}</li>
+ <li>{{cssxref("column-rule")}}</li>
+ <li>{{cssxref("column-span")}}</li>
+ <li>{{cssxref("column-fill")}}</li>
+ <li>{{cssxref("column-gap")}}</li>
+</ul>
+
+<p>En ajoutant <code>column-count</code> ou <code>column-width</code> à un élément, on le transforme en conteneur multi-colonnes. Les colonnes sont des boîtes anonymes et sont décrites comme des « boîtes de colonne » dans la spécification.</p>
+
+<h2 id="Definir_des_colonnes">Definir des colonnes</h2>
+
+<p>Afin de créer un conteneur multi-colonnes, il est nécessaire d'utiliser au moins une propriété <code>column-*</code> (<code>column-count</code> ou <code>column-width</code>).</p>
+
+<h3 id="La_propriété_column-count">La propriété <code>column-count</code></h3>
+
+<p>La propriété <code>column-count</code> définit le nombre de colonnes sur lesquelles on veut afficher le contenu. Le navigateur affectera l'espace nécessaire à chaque boîte de colonne afin d'en créer le nombre indiqué.</p>
+
+<p>Dans l'exemple qui suit, on utilise la propriété <code>column-count</code> afin de créer trois colonnes au sein de l'élément <code>.container</code>. Le contenu, y compris l'élément fils de <code>.container</code> est alors divisé en trois colonnes.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/basics/column-count.html", '100%', 550)}}</p>
+
+<p>Dans l'exemple qui précède, le contenu est intégré dans des paragraphes avec une mise en forme par défaut. Aussi, il y a une marge au dessus de chaque paragraphe. On peut voir comment cette marge décale la première ligne de texte vers le bas. Cela se produit car un conteneur multi-colonnes crée un nouveau contexte de formatage de bloc, ce qui signifie que les marges des éléments fils ne <a href="/fr/docs/Web/CSS/Modèle_de_boîte_CSS/Fusion_des_marges">fusionnent</a> pas avec les marges du conteneur.</p>
+
+<h3 id="La_propriété_column-width">La propriété <code>column-width</code></h3>
+
+<p>La propriété <code>column-width</code> est utilisé afin de définir la largeur optimale pour chaque boîte de colonne. Si on déclare une valeur pour <code>column-width</code>, le navigateur calculera combien de colonnes de cette taille peuvent être intégrées puis répartira l'espace supplémentaire équitablement entre les colonnes. Aussi mieux vaut-il voir <code>column-width</code> comme une largeur minimale plutôt que comme une largeur exacte, l'espace restant étant rajouté ensuite.</p>
+
+<p>Il existe un seul cas où la boîte de colonne peut être plus petite que <code>column-width</code> : lorsqu'il n'y a qu'une seule colonne et que l'espace disponible est inférieur à <code>column-width</code>.</p>
+
+<p>Dans l'exemple qui suit, on utilise la propriété <code>column-width</code> avec une valeur de 200px et on obtient donc autant de colonnes de 200 pixels que possible avec l'espace restant partagé équitablement entre les différentes colonnes.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/basics/column-width.html", '100%', 550)}}</p>
+
+<h3 id="Utiliser_column-count_et_column-width">Utiliser <code>column-count</code> et <code>column-width</code></h3>
+
+<p>Si on définit les deux propriétés pour un conteneur multi-colonnes, <code>column-count</code> agira comme un maximum pour le nombre de colonnes. Le comportement décrit avant pour <code>column-width</code> aura bien lieu, jusqu'à ce que le nombre de colonnes décrit par <code>column-count</code> soit atteint. Ensuite, aucune autre colonne ne sera ajoutée et l'espace restant sera réparti entre les colonnes existantes (et ce même si l'espace restant permettrait de rajouter une ou plusieurs colonnes de largeur <code>column-width</code>).</p>
+
+<p>Lorsqu'on utilise les deux propriétés ensemble, on peut obtenir un nombre de colonnes réel inférieur à la valeur fournie avec <code>column-count</code>.</p>
+
+<p>Dans l'exemple suivant, on utilise <code>column-width</code> avec une valeur de 200px et <code>column-count</code> avec une valeur de 2. S'il y a de l'espace pour plus de deux colonnes, on aura uniquement deux colonnes. S'il n'y a pas assez d'espace pour deux colonnes de 200 pixels, il n'y en aura qu'une.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/basics/column-count-width.html", '100%', 550)}}</p>
+
+<h3 id="La_propriété_raccourcie_columns">La propriété raccourcie <code>columns</code></h3>
+
+<p>La <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">propriété raccourcie</a> <code>columns</code> peut être utilisée afin de définir à la fois <code>column-count</code> et <code>column-width</code>. Si on utilise une unité de longueur, la valeur sera utilisée pour <code>column-width</code>, si on utilise un entier, la valeur sera utilisée pour <code>column-count</code>. Les deux peuvent être définies simultanément en étant séparées d'un espace.</p>
+
+<p>Ce fragment de code CSS donnera donc le même résultat que pour le premier exemple où <code>column-count</code> vaut 3.</p>
+
+<pre>.container {
+  columns: 3;
+}</pre>
+
+<p>Ce fragment de code CSS donnera le même résultat que pour le deuxième exemple où <code>column-width</code> vaut <code>200px</code>.</p>
+
+<pre>.container {
+  columns: 200px;
+}</pre>
+
+<p>Enfin, ce fragment de code CSS donnera le même résultat que le troisième exemple où les deux propriétés <code>column-count</code> et <code>column-width</code> sont définies.</p>
+
+<pre>.container {
+  columns: 2 200px;
+}</pre>
+
+<h2 id="Prochaines_étapes">Prochaines étapes</h2>
+
+<p>Dans ce guide, nous avons vu des cas d'utilisation simples avec une disposition multi-colonnes. Dans le prochain article, nous verrons <a href="/fr/docs/Web/CSS/CSS_Columns/Styling_Columns">comment mettre en forme chacune des colonnes</a>.</p>
diff --git a/files/fr/web/css/css_columns/gestion_dépassement_multi-colonnes/index.html b/files/fr/web/css/css_columns/gestion_dépassement_multi-colonnes/index.html
new file mode 100644
index 0000000000..7dc6078442
--- /dev/null
+++ b/files/fr/web/css/css_columns/gestion_dépassement_multi-colonnes/index.html
@@ -0,0 +1,49 @@
+---
+title: Gestion du dépassement en multi-colonnes
+slug: Web/CSS/CSS_Columns/Gestion_dépassement_multi-colonnes
+tags:
+  - CSS
+  - Guide
+translation_of: Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Dans ce guide, nous verrons comment gérer le dépassement avec une disposition multi-colonnes. Le dépassement peut avoir lieu pour chaque boîte de colonne ou lorsqu'il y a plus de contenu que de place dans le conteneur.</p>
+
+<h2 id="Le_dépassement_dans_les_boîtes_des_colonnes">Le dépassement dans les boîtes des colonnes</h2>
+
+<p>On peut avoir un dépassement lorsqu'un objet est plus grand que la taille de la boîte de la colonne. Cela peut notamment se produire lorsqu'on a une image dans une colonne et que la largeur de cette image est supérieure à la valeur de <code>column-width</code> ou à la largeur des colonnes selon le nombre indiqué avec <code>column-count</code>.</p>
+
+<p>Dans cette situation, le contenu dépasse sur la prochaine colonne et n'est pas rogné à la boîte de la colonne. Voici un exemple qui suit et une illustration du résultat attendu (les navigateurs actuels pouvant afficher un résultat différent).</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/overflow/image.html", '100%', 800)}}</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16095/image-overflow-multicol.png" style="height: 328px; width: 800px;"></p>
+
+<p>Si on veut une image qui se réduise à la boîte de la colonne, on pourra utiliser les solutions pour les images adaptatives et <code>max-width: 100%</code> pour y parvenir.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/overflow/image-max-width.html", '100%', 800)}}</p>
+
+<h2 id="Plus_de_colonnes_que_d'espace_disponible">Plus de colonnes que d'espace disponible</h2>
+
+<p>La façon dont les colonnes dépassent dépend du contexte dans lequel le document est affiché : est-ce un média fragmenté (pour l'impression par exemple) ou un média continu (une page web par exemple) ?</p>
+
+<p>Pour un média fragmenté, une fois qu'un fragment (ex. une page) est rempli de colonnes, les colonnes suivantes seront ajoutées sur le fragment suivant (ex. une nouvelle page) et ainsi de suite. Pour les médias continus, les colonnes dépasseront selon l'axe en ligne. Pour le Web, cela signifie qu'on aura une barre de défilement horizontal.</p>
+
+<p>Dans l'exemple qui suit, on peut observer un tel dépassement. Le conteneur multi-colonnes possède une hauteur fixée et il y a plus de texte que d'espace nécessaire pour créer des colonnes. On a alors des colonnes créées en dehors du conteneur.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/overflow/overflow-inline.html", '100%', 800)}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> On peut souhaiter qu'une future version de la spécification permette de préciser la direction selon laquelle les colonnes qui dépassent sont affichées et ainsi pouvoir dépasser dans la direction de bloc (et non uniquement selon l'axe en ligne).</p>
+</div>
+
+<h2 id="Utiliser_les_requêtes_média_verticales">Utiliser les requêtes média verticales</h2>
+
+<p>Lorsque les colonnes sont plus hautes que la zone d'affichage (<em>viewport</em>), par défaut, le lecteur devra faire défiler le contenu verticalement pour tout voir, dégradant ainsi l'ergonomie. Pour éviter ce problème, on peut n'appliquer les colonnes que lorsque la hauteur est suffisante.</p>
+
+<p>Dans l'exemple qui suit, on utilise par exemple une requête média avec <code>min-height</code> pour vérifier la hauteur avant d'appliquer les propriétés relatives aux colonnes.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/overflow/min-height.html", '100%', 800)}}</p>
+
+<p>Dans le dernier guide de cette série, nous verrons <a href="/fr/docs/Web/CSS/CSS_Columns/Handling_content_breaks_in_multicol">comment la disposition multi-colonnes interagit avec le module de spécification Fragmentation</a> et nous permet de contrôler la façon dont le contenu est coupé entre les colonnes.</p>
diff --git a/files/fr/web/css/css_columns/gérer_rupture_contenu_entre_colonnes/index.html b/files/fr/web/css/css_columns/gérer_rupture_contenu_entre_colonnes/index.html
new file mode 100644
index 0000000000..909c9bd2a5
--- /dev/null
+++ b/files/fr/web/css/css_columns/gérer_rupture_contenu_entre_colonnes/index.html
@@ -0,0 +1,72 @@
+---
+title: Gérer la rupture du contenu entre les colonnes
+slug: Web/CSS/CSS_Columns/Gérer_rupture_contenu_entre_colonnes
+tags:
+  - CSS
+  - Guide
+translation_of: Web/CSS/CSS_Columns/Handling_content_breaks_in_multicol
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Le contenu est coupé entre les colonnes d'une disposition multi-colonnes de la même façon qu'il est coupé entre chaque page d'un média paginé. Dans ces deux contextes, la façon dont on contrôle l'emplacement et la coupure se paramètre grâce aux propriétés décrites dans le module de spécification <em>CSS Fragmentation</em>. Dans ce guide, nous verrons comment fonctionne la fragmentation en multi-colonnes.</p>
+
+<h2 id="Quelques_notions_de_bases_sur_la_fragmentation">Quelques notions de bases sur la fragmentation</h2>
+
+<p><a href="https://www.w3.org/TR/css-break-3/">Le module de spécification CSS Fragmentation </a>détaille la façon dont le contenu peut être coupé entre les conteneur de fragmentation. Pour une disposition multi-colonnes, le conteneur de fragmentation correspond à la boîte de colonne.</p>
+
+<p>Le contenu d'une boîte de colonne peut être varié et une coupure peut être malvenue à certains endroits. On préfèrerait par exemple qu'une légende ne soit pas séparée de l'image entre une colonne et la suivante. Les propriétés relatives à la fragmentation permettent de contrôler certains aspects de ces coupures.</p>
+
+<p>Voici plusieurs emplacements où on peut souhaiter contrôler les ruptures :</p>
+
+<ul>
+ <li>Les ruptures à l'intérieur des boîtes, par exemple à l'intérieur d'un élément <code>&lt;figure&gt;</code></li>
+ <li>Les ruptures avant et après les boîtes</li>
+ <li>Les ruptures entre les lignes</li>
+</ul>
+
+<h2 id="Les_ruptures_à_l'intérieur_des_boîtes">Les ruptures à l'intérieur des boîtes</h2>
+
+<p>Pour contrôler la façon dont le contenu est coupé à l'intérieur d'une boîte, on pourra utiliser la propriété {{cssxref("break-inside")}}. Cette propriété peut prendre les valeurs suivantes :</p>
+
+<ul>
+ <li><code>auto</code></li>
+ <li><code>avoid</code></li>
+ <li><code>avoid-page</code></li>
+ <li><code>avoid-column</code></li>
+ <li><code>avoid-region</code></li>
+</ul>
+
+<p>Dans l'exemple qui suit, on a appliqué <code>break-inside</code> sur l'élément <code>figure</code> afin d'éviter que la légende soit séparée de l'image.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/fragmentation/break-inside.html", '100%', 800)}}</p>
+
+<h2 id="Les_ruptures_avant_et_après_les_boîtes">Les ruptures avant et après les boîtes</h2>
+
+<p>Les propriétés {{cssxref("break-before")}} et {{cssxref("break-after")}} contrôlent respectivement les ruptures avant et après les éléments. Dans une disposition multi-colonnes, ces propriétés peuvent être utilisées avec les valeurs suivantes :</p>
+
+<ul>
+ <li><code>auto</code></li>
+ <li><code>avoid</code></li>
+ <li><code>avoid-column</code></li>
+ <li><code>column</code></li>
+</ul>
+
+<p>Avec l'exemple suivant, on force une rupture avant chaque élément de titre <code>h2</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/fragmentation/break-before.html", '100%', 800)}}</p>
+
+<h2 id="Les_ruptures_entre_les_lignes">Les ruptures entre les lignes</h2>
+
+<p>On peut aussi utiliser les propriétés {{cssxref("orphans")}} et {{cssxref("widows")}}. La propriété  <code>orphans</code> contrôle le nombre de lignes qui restent à la fin d'un fragment et la propriété <code>widows</code> contrôle le nombre de lignes qui restent au début d'un fragment.</p>
+
+<p>Les propriétés <code>orphans</code> et <code>widows</code> prennent un entier comme valeur et qui indique le nombre de lignes à avoir à la fin ou au début d'un fragment. On notera que ces propriétés ne fonctionnent qu'à l'intérieur d'un conteneur de bloc (un paragraphe par exemple). Si le bloc contient un nombre de lignes inférieur au nombre précisé pour la propriété, toutes les lignes resteront groupées ensemble.</p>
+
+<p>Dans l'exemple ci-après, on utilise la propriété <code>orphans</code> pour contrôler le nombre de lignes conservées à la fin d'une colonne. Vous pouvez modifier la valeur afin de voir l'impact sur la rupture du contenu.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/fragmentation/orphans.html", '100%', 800)}}</p>
+
+<h2 id="Résultat_non_garanti">Résultat non garanti</h2>
+
+<p>Si on souhaite prévenir la rupture à de nombreux endroits, le navigateur sera quand même obligé de couper le contenu entre les colonnes. D'une certaine façon, ces propriétés agissent plutôt comme des suggestions envers le moteur que comme des ordres.</p>
+
+<p>De plus, la prise en charge de ces propriétés n'est pas la plus homogène possible entre les navigateurs. Vous pouvez vous référer aux tableaux de compatibilité des pages de chaque propriété pour en savoir plus. Dans la plupart des cas, mieux vaudra encore laisser gérer le système plutôt que d'avoir trop de ruptures aux endroits indésirables.</p>
diff --git a/files/fr/web/css/css_columns/index.html b/files/fr/web/css/css_columns/index.html
new file mode 100644
index 0000000000..b66e0686ea
--- /dev/null
+++ b/files/fr/web/css/css_columns/index.html
@@ -0,0 +1,97 @@
+---
+title: Colonnes CSS
+slug: Web/CSS/CSS_Columns
+tags:
+  - Aperçu
+  - CSS
+  - CSS Multi-column Layout
+  - Reference
+translation_of: Web/CSS/CSS_Columns
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>Les colonnes CSS</strong> (<em>CSS Multi-column Layout</em> en anglais) forment un module CSS qui définit le comportement d'une disposition en colonnes, qui permet de décrire comment le contenu doit être réparti entre les colonnes et qui détaille comment sont gérées les espaces et les règles entre les colonnes.</p>
+
+<h2 id="Exemple_simple">Exemple simple</h2>
+
+<p>Dans l'exemple qui suit, on applique la propriété {{cssxref("column-count")}}  sur l'élément qui possède la classe <code>container</code>. La valeur de la propriété <code>column-count</code> est <code>3</code>, et le contenu est donc arrangé entre trois colonnes de tailles égales.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/basics/column-count.html", '100%', 550)}}</p>
+
+<h2 id="Liens_avec_le_module_de_spécification_CSS_Fragmentation">Liens avec le module de spécification CSS Fragmentation</h2>
+
+<p>La disposition en colonnes est fortement liée aux <a href="/fr/docs/Web/CSS/CSS_Pages">média paginés</a> pour lesquels chaque colonne devient un fragment (de la même façon qu'une page imprimée devient un fragment d'un document). Aussi, les propriétés désormais définies dans le module de spécification <a href="/fr/docs/Web/CSS/CSS_Fragmentation">CSS Fragmentation</a> sont nécessaires afin de contrôler la façon dont le contenu est scindé entre les colonnes.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés_relatives_à_la_disposition_en_colonnes">Propriétés relatives à la disposition en colonnes</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("column-count")}}</li>
+ <li>{{cssxref("column-fill")}}</li>
+ <li>{{cssxref("column-gap")}}</li>
+ <li>{{cssxref("column-rule")}}</li>
+ <li>{{cssxref("column-rule-color")}}</li>
+ <li>{{cssxref("column-rule-style")}}</li>
+ <li>{{cssxref("column-rule-width")}}</li>
+ <li>{{cssxref("column-span")}}</li>
+ <li>{{cssxref("column-width")}}</li>
+ <li>{{cssxref("columns")}}</li>
+</ul>
+</div>
+
+<h3 id="Propriétés_relatives_à_la_fragmentation">Propriétés relatives à la fragmentation</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("break-after")}}</li>
+ <li>{{cssxref("break-before")}}</li>
+ <li>{{cssxref("break-inside")}}</li>
+ <li>{{cssxref("orphans")}}</li>
+ <li>{{cssxref("widows")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/CSS_Columns/Concepts_base_multi-colonnes">Concepts de base relatifs à la disposition en colonnes</a></dt>
+ <dd>Un aperçu du module de spécification CSS pour la disposition avec plusieurs colonnes.</dd>
+ <dt><a href="/fr/docs/Web/CSS/CSS_Columns/Mettre_en_forme_les_colonnes">Mettre en forme les colonnes</a></dt>
+ <dd>Comment utiliser les règles liées aux colonnes et gérer l'espace entre les colonnes.</dd>
+ <dt><a href="/fr/docs/Web/CSS/CSS_Columns/Répartir_entre_les_colonnes">Équilibrer le remplissement des colonnes</a></dt>
+ <dd>Comment répartir un élément sur plusieurs colonnes et comment contrôler la façon dont les colonnes sont remplies.</dd>
+ <dt><a href="/fr/docs/Web/CSS/CSS_Columns/Gestion_dépassement_multi-colonnes">Gérer le dépassement</a></dt>
+ <dd>Comprendre ce qui se produit quand un élément dépasse de la colonne à laquelle il appartient et ce qui se produit lorsqu'il y a trop de contenu pour un conteneur en colonnes.</dd>
+ <dt><a href="/fr/docs/Web/CSS/CSS_Columns/Gérer_rupture_contenu_entre_colonnes">Gérer la fragmentation du contenu en multi-colonnes</a></dt>
+ <dd>Une introduction au module de spécification CSS Fragmentation et à la façon dont le contenu est coupé entre les colonnes.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Multicol')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>Les autres modules liées aux dispositions possibles en CSS :</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS">Les boîtes flexibles (<em>flexbox</em>)</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">Les grilles CSS (<em>CSS Grid</em>)</a></li>
+</ul>
diff --git a/files/fr/web/css/css_columns/mettre_en_forme_les_colonnes/index.html b/files/fr/web/css/css_columns/mettre_en_forme_les_colonnes/index.html
new file mode 100644
index 0000000000..0689060daf
--- /dev/null
+++ b/files/fr/web/css/css_columns/mettre_en_forme_les_colonnes/index.html
@@ -0,0 +1,48 @@
+---
+title: Mettre en forme les colonnes
+slug: Web/CSS/CSS_Columns/Mettre_en_forme_les_colonnes
+tags:
+  - CSS
+  - CSS Multi-column Layout
+  - Guide
+translation_of: Web/CSS/CSS_Columns/Styling_Columns
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Les boîtes de colonne créées au sein des conteneurs multi-colonnes sont des boîtes anonymes et leur mise en forme est donc limitée. Elle n'est toutefois pas inexistante. Dans ce guide nous verrons comment modifier l'espace entre les colonnes et comment mettre en forme une ligne entre les colonnes.</p>
+
+<h2 id="Peut-on_mettre_en_forme_les_boîtes_des_colonnes">Peut-on mettre en forme les boîtes des colonnes ?</h2>
+
+<p>Malheureusement, ce n'est pas possible actuellement. Il est impossible de cibler les boîtes anonymes des colonnes de quelque façon que ce soit. On ne peut donc pas changer la couleur d'arrière-plan d'une colonne donnée ou agrandir une colonne plus qu'une autre. De futures versions du module de spécification permettront peut-être de réaliser cela un jour mais nous devons pour le moment nous cantonner à paramétrer l'espacement entre les colonnes et à mettre en forme les lignes séparatrices entre les colonnes.</p>
+
+<h2 id="L'espaceement_la_propriété_column-gap">L'espaceement : la propriété <code>column-gap</code></h2>
+
+<p>L'espacement entre les colonnes est contrôlé par la propriété <code>column-gap</code>. Cette propriété était initialement définie dans le module de spécification <em>Multi-column Layout</em> mais est désormais définie dans le module de spécification <em><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></em> (dont le but est d'unifier la gestion des espacements entre les boîtes, que ce soit pour les colonnes ou pour d'autres types de disposition telles que <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">les grilles CSS</a>).</p>
+
+<p>Dans une disposition multi-colonne, la valeur initiale de la propriété <code>column-gap</code> est <code>1em</code>. Cela signifie que les colonnes ne se touchent pas les unes les autres. Pour les autres méthodes de disposition, la valeur initiale de <code>column-gap</code> est 0. Le mot-clé <code>normal</code> est une valeur qui permet d'obtenir un écart de 1em.</p>
+
+<p>Il est possible de modifier l'espacement en utilisant n'importe quelle unité de longueur pour <code>column-gap</code>. Dans l'exemple qui suit, on a ainsi paramétré <code>column-gap</code> avec la valeur 40px.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/styling/column-gap.html", '100%', 750)}}</p>
+
+<p>Les valeurs autorisées pour <code>column-gap</code> sont de type <code>&lt;length-percentage&gt;</code>, cela signifie que les pourcentages sont également autorisés. Lorsque de telles valeurs sont utilisées, elles sont calculées relativement à la largeur du conteneur multi-colonnes.</p>
+
+<h2 id="Créer_un_délimiteur_entre_les_colonnes_column-rule">Créer un délimiteur entre les colonnes : <code>column-rule</code></h2>
+
+<p>La spécification définit les propriétés <code>column-rule-width</code>, <code>column-rule-style</code> and <code>column-rule-color</code> et fournit une propriété raccourcie <code>column-rule</code>. Ces propriétés fonctionnent de la même façon que les propriétés relatives à la bordure. Toute valeur valide pour <code>border-style</code> pourra être utilisée pour <code>column-rule-style</code>.</p>
+
+<p>Ces propriétés sont appliquées à l'élément qui est le conteneur multi-colonnes. Aussi, toutes les colonnes disposeront du même délimiteur. Les lignes sont uniquement dessinées entre les colonnes et pas sur les bords extérieurs. Les lignes sont également uniquement dessinées entre les colonnes qui ont du contenu.</p>
+
+<p>Dans le prochain exemple, on a ajouté une ligne en pointillée, épaisse de 5 pixels et dont la couleur est <code>rebeccapurple</code>, sans utiliser la propriété raccourcie.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/styling/column-rule.html", '100%', 550)}}</p>
+
+<p>On notera que la ligne n'occupe pas d'espace supplémentaire. Autrement dit, une ligne plus épaisse ne « repoussera » pas les colonnes de part et d'autre. La ligne est superposée sur l'espace occupé par l'espacement entre les colonnes.</p>
+
+<p>Dans le prochain exemple, on utilise une ligne très large de 40 pixels et un espacement qui mesure uniquement 10 pixels. On peut alors voir que la ligne est dessinée sous le contenu des colonnes. Pour avoir un espace de chaque côté de la ligne, il faut avoir un espacement supérieur à 40 pixels.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/styling/column-rule-wide.html", '100%', 550)}}</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Voici comment mettre en forme les colonnes avec les contraintes actuelles. Dans le prochain guide, nous verrons comment <a href="/fr/docs/Web/CSS/CSS_Columns/Spanning_Columns">propager les éléments du conteneur sur l'ensemble des colonnes</a>.</p>
diff --git a/files/fr/web/css/css_columns/répartir_entre_les_colonnes/index.html b/files/fr/web/css/css_columns/répartir_entre_les_colonnes/index.html
new file mode 100644
index 0000000000..d1116ebd7d
--- /dev/null
+++ b/files/fr/web/css/css_columns/répartir_entre_les_colonnes/index.html
@@ -0,0 +1,63 @@
+---
+title: Répartir et équilibrer le contenu entre les colonnes
+slug: Web/CSS/CSS_Columns/Répartir_entre_les_colonnes
+tags:
+  - CSS
+  - Guide
+translation_of: Web/CSS/CSS_Columns/Spanning_Columns
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Dans ce guide, nous verrons comment répartir les éléments sur plusieurs colonnes et comment contrôler le remplissage des colonnes.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Les fonctionnalités décrites dans cet article ne sont pas aussi bien prises en charge que celles décrites dans les deux articles précédents. Pour plus d'informations, nous vous invitons à vous référer aux tableaux de compatibilité à la fin des pages décrivant chacune des propriétés.</p>
+</div>
+
+<h2 id="Étendre_sur_plusieurs_colonnes">Étendre sur plusieurs colonnes</h2>
+
+<p>Afin qu'un élément s'étende sur plusieurs colonnes, on peut utiliser la propriété {{cssxref("column-span")}} avec la valeur <code>all</code>. Ainsi, l'élément concerné s'étendra sur l'ensemble des colonnes.</p>
+
+<p>N'importe quel élément descendant du conteneur multi-colonnes peut être étendu de cette façon, que ce soit un titre qui est un élément fils direct ou un titre contenu dans une section contenue dans le conteneur.</p>
+
+<p>Dans l'exemple qui suit, on a <code>column-span: all</code> appliqué sur l'élément <code>h2</code> qui s'étend ainsi sur toutes les colonnes.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/spanning/h2-span.html", '100%', 800)}}</p>
+
+<p>Dans ce deuxième exemple, le titre est à l'intérieur de l'élément {{HTMLElement("article")}} mais le contenu est bien réparti comme voulu.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/spanning/nested-h2-span.html", '100%', 800)}}</p>
+
+<p>Lorsqu'un élément est étendu, il brise le flux des colonnes et un nouvel ensemble de boîtes de colonnes sont créées. Ce n'est pas le contenu qui « reprend » sous l'élément étendu.</p>
+
+<h3 id="Les_limites_de_column-span">Les limites de <code>column-span</code></h3>
+
+<p>Avec la spécification de niveau 1, seules deux valeurs sont autorisées pour <code>column-span</code> : <code>none</code> qui est la valeur initiale et qui indique que l'élément ne s'étendra pas (il restera sur une colonne) et <code>all</code> qui indiquera que l'élément s'étendra sur l'ensemble des colonnes. Ainsi, on ne pourra pas étendre spécifiquement un élément sur deux ou trois colonnes.</p>
+
+<h3 id="Quelques_points_d'attention">Quelques points d'attention</h3>
+
+<p>Si l'élément qui s'étend est à l'intérieur d'un élément qui possède des marges, du remplissage et une bordure ou une couleur d'arrière-plan, on pourra avoir l'élément qui s'étend et qui recouvre le reste. Aussi, attention à bien gérer ce cas lorsqu'on étend un élément sur plusieurs colonnes.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/spanning/mpb-span.html", '100%', 800)}}</p>
+
+<p>De plus, si un élément qui s'étend sur les colonnes se retrouve plus loin dans le contenu, on peut avoir un comportement hasardeux s'il n'y a pas assez de contenu après l'élément étendu pour créer d'autres colonnes. Aussi, mieux vaudra utiliser <code>column-span</code> avec précaution pour éviter ces effets indésirables.</p>
+
+<h2 id="Équilibrer_et_remplir_les_colonnes">Équilibrer et remplir les colonnes</h2>
+
+<p>Lorsque toutes les colonnes possèdent environ la même quantité de contenu, on parle d'un ensemble équilibré. On pourra jouer sur le remplissage et l'équilibrage des colonnes lorsque la quantité de contenu est inférieure à la quantité d'espace fournie, notamment lorsque le conteneur a une hauteur donnée.</p>
+
+<p>La valeur initiale de la propriété {{cssxref("column-fill")}}, dans une disposition multi-colonnes, est <code>balance</code>. Cette valeur signifie que les colonnes doivent être aussi équilibrées que possible. Pour les contextes fragmentés tels que <a href="/fr/docs/Web/CSS/CSS_Pages">les médias paginés</a>, seul le dernier fragment est équilibré. Cela signifie que c'est sur la dernière page du document que l'ensemble des colonnes sera équilibré.</p>
+
+<p>La valeur <code>balance-all</code> permet quant à elle d'avoir des colonnes équilibrées sur l'ensemble des fragments (et pas uniquement sur le dernier).</p>
+
+<p>Dans cet exemple, on a des colonnes qui contiennent une image et du texte qui sont équilibrées. L'image ne peut pas être divisée et est placée dans la première colonne puis les colonnes suivantes contiennent du texte sur la même hauteur que l'image.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/balancing/balance.html", '100%', 550)}}</p>
+
+<p><code>auto</code> est une autre valeur qui peut être utilisée avec <code>column-fill</code>. Avec cette valeur, plutôt que d'équilibrer les colonnes, celles-ci sont remplies les unes après les autres. Dans ce dernier exemple, on a modifié <code>column-fill</code> pour utiliser <code>auto</code> et les colonnes sont désormais remplies dans l'ordre en suivant la hauteur du conteneur multi-colonnes. On a ainsi quelques colonnes vides à la fin.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/balancing/auto.html", '100%', 550)}}</p>
+
+<p>On notera que l'équilibrage des colonnes n'est pas pris en charge de façon homogène par les navigateurs. Aussi, si vous l'utilisez, vérifiez vos résultats dans les différents navigateurs pour contrôler l'effet obtenu. Vous pouvez aussi consulter les tableaux de compatibilité des navigateurs à la fin des pages de chacune des propriétés.</p>
+
+<p>Dans le prochain guide, nous verrons <a href="/en-US/docs/Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol">comment gérer le dépassement au sein d'un conteneur multi-colonnes</a>, à l'intérieur des colonnes et lorsqu'il y a plus de contenu que le conteneur peut en avoir.</p>
diff --git a/files/fr/web/css/css_columns/utiliser_une_disposition_multi-colonnes/index.html b/files/fr/web/css/css_columns/utiliser_une_disposition_multi-colonnes/index.html
new file mode 100644
index 0000000000..897ac5c989
--- /dev/null
+++ b/files/fr/web/css/css_columns/utiliser_une_disposition_multi-colonnes/index.html
@@ -0,0 +1,201 @@
+---
+title: Utiliser une disposition multi-colonnes
+slug: Web/CSS/CSS_Columns/Utiliser_une_disposition_multi-colonnes
+tags:
+  - Avancé
+  - CSS
+  - Guide
+translation_of: Web/CSS/CSS_Columns/Using_multi-column_layouts
+---
+<div>{{CSSRef}}</div>
+
+<p>La <strong>disposition multi-colonnes</strong> étend <em>le mode de disposition en bloc</em> et permet de définir simplement plusieurs colonnes de texte. Lorsqu'on lit un texte, si les lignes sont trop longues, il faudra trop de temps aux yeux pour revenir au début de la ligne et passer à la ligne suivante : on perdra alors la ligne sur laquelle on était. Ainsi, pour utiliser efficacement l'espace fourni par un grand écran, on préfèrera utiliser des colonnes de largeur fixe, disposée côte à côte, à la façon d'un journal.</p>
+
+<h2 id="Utiliser_les_colonnes_CSS">Utiliser les colonnes CSS</h2>
+
+<h3 id="Le_nombre_de_colonnes_et_leur_largeur">Le nombre de colonnes et leur largeur</h3>
+
+<p>Deux propriétés CSS permettent de définir quand et comment les colonnes apparaissent : {{cssxref("column-count")}} et {{cssxref("column-width")}}.</p>
+
+<p>On utilisera la propriété <code>column-count</code> pour définir le nombre de colonnes qu'on souhaite avoir.</p>
+
+<h4 id="Utilisation_de_column-count">Utilisation de <code>column-count</code></h4>
+
+<h5 id="CSS">CSS</h5>
+
+<pre class="brush: css">#col {
+  column-count: 2;
+}
+</pre>
+
+<h5 id="HTML">HTML</h5>
+
+<div id="column_count">
+<pre class="brush: html">&lt;div id="col"&gt;
+  &lt;p&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+    sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua.
+  &lt;/p&gt;
+  &lt;p&gt;
+    Ut enim ad minim veniam, quis nostrud exercitation ullamco
+    laboris nisi ut aliquip ex ea commodo consequat.
+  &lt;/p&gt;
+  &lt;p&gt;
+    Duis aute irure dolor in reprehenderit in voluptate velit
+    esse cillum dolore eu fugiat nulla pariatur.
+  &lt;/p&gt;
+  &lt;p&gt;
+    Excepteur sint occaecat cupidatat non proident, sunt in
+    culpa qui officia deserunt mollit anim id est laborum.
+  &lt;/p&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<h5 id="Résultat">Résultat</h5>
+
+<p>{{EmbedLiveSample('Utilisation_de_column-count','100%')}}</p>
+
+<p>Si on utilise un navigateur qui permet d'utiliser ce module CSS, on aura un contenu affiché sur 2 colonnes.</p>
+
+<p>La propriété <code>column-width</code> permet quant à elle de définir la largeur minimale d'une colonne. Si la propriété <code>column-count</code> n'est pas utilisée, le navigateur créera automatiquement autant de colonnes que le permet la largeur disponible.</p>
+
+<h4 id="Utilisation_de_column-width">Utilisation de <code>column-width</code></h4>
+
+<h5 id="CSS_2">CSS</h5>
+
+<div id="column_width">
+<pre class="brush: css">#wid {
+  column-width: 100px;
+}
+</pre>
+</div>
+
+<h5 id="HTML_2">HTML</h5>
+
+<div id="column_count">
+<pre class="brush: html">&lt;div id="wid"&gt;
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+  sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+  ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  Duis aute irure dolor in reprehenderit in voluptate velit
+  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+  occaecat cupidatat non proident, sunt in culpa qui officia
+  deserunt mollit anim id est laborum
+&lt;/div&gt;
+</pre>
+</div>
+
+<h5 id="Résultat_2">Résultat</h5>
+
+<p>{{EmbedLiveSample('Utilisation_de_column-width','100%')}}</p>
+
+<p>En utilisant une disposition multi-colonnes, le contenu est automatiquement réparti entre les colonnes.</p>
+
+<h4 id="La_propriété_raccourcie_columns">La propriété raccourcie <code>columns</code></h4>
+
+<p>La plupart du temps, on souhaitera utiliser l'une de ces deux propriétés ({{cssxref("column-count")}} ou {{cssxref("column-width")}}). Comme les valeurs de ces deux propriétés ne se « chevauchent » pas, on pourra utiliser la propriété raccourcie {{cssxref("columns")}} qui synthétisent ces deux propriétés.</p>
+
+<p>Ainsi, la déclaration <code>column-width:12em</code> pourra être remplacée de la façon suivante :</p>
+
+<h5 id="CSS_3">CSS</h5>
+
+<div id="column_short">
+<pre class="brush: css">#col_short {
+  columns: 12em;
+}
+</pre>
+</div>
+
+<h5 id="HTML_3">HTML</h5>
+
+<div id="column_count">
+<pre class="brush: html">&lt;div id="col_short"&gt;
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+  sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+  ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  Duis aute irure dolor in reprehenderit in voluptate velit
+  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+  occaecat cupidatat non proident, sunt in culpa qui officia
+  deserunt mollit anim id est laborum
+&lt;/div&gt;
+</pre>
+</div>
+
+<h5 id="Résultat_3">Résultat</h5>
+
+<p>{{EmbedLiveSample('La_propriété_raccourcie_columns','100%')}}</p>
+
+<p>De même, on pourra remplacer la déclaration <code>column-count: 4</code> avec ce bloc :</p>
+
+<div id="4_columns">
+<pre class="brush: css">#columns_4{
+  columns: 4;
+}
+</pre>
+</div>
+
+<p>Enfin, pour synthétiser les instructions <code>column-width:8em</code> et <code>column-count:12</code>, on pourra utiliser les instructions suivantes :</p>
+
+<div id="12_columns">
+<pre class="brush: css">#columns_12 {
+  columns: 12 8em;
+}
+</pre>
+</div>
+
+<h3 id="Équilibrage_de_la_hauteur">Équilibrage de la hauteur</h3>
+
+<p>La spécification CSS pour ce module indique que la hauteur des colonnes doit être équilibrée. Autrement dit, le navigateur doit définir la hauteur des différentes colonnes afin que la hauteur du contenu dans chaque colonne soit environ égale.</p>
+
+<p>Toutefois, dans certaines situations, on veut pouvoir définir la hauteur maximale des colonnes de façon explicite. Ainsi, lorsque la hauteur est contrainte, on peut utiliser les propriétés {{cssxref("height")}} ou {{cssxref("max-height")}} afin que chaque colonne mesure au plus la taille indiquée avant qu'une nouvelle colonne soit créée.</p>
+
+<h3 id="L'espacement_entre_les_colonnes">L'espacement entre les colonnes</h3>
+
+<p>Entre chaque colonne, on aura un espace horizontal. La valeur recommandée (et souvent utilisée par défaut) est <code>1em</code>. Cette taille peut être ajustée si nécessaire en utilisant la propriété {{cssxref("column-gap")}} sur le bloc découpé en colonnes.</p>
+
+<h4 id="Utilisation_de_column-gap">Utilisation de <code>column-gap</code></h4>
+
+<h5 id="CSS_4">CSS</h5>
+
+<pre class="brush: css">#column_gap {
+  column-count: 5;
+  column-gap: 2em;
+}</pre>
+
+<h5 id="HTML_4">HTML</h5>
+
+<div id="col_gap">
+<pre class="brush: html">&lt;div id="column_gap"&gt;
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+  sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+  ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  Duis aute irure dolor in reprehenderit in voluptate velit
+  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+  occaecat cupidatat non proident, sunt in culpa qui officia
+  deserunt mollit anim id est laborum
+&lt;/div&gt;
+</pre>
+</div>
+
+<h5 id="Résultat_4">Résultat</h5>
+
+<p>{{EmbedLiveSample('Utilisation_de_column-gap','100%')}}</p>
+
+<h2 id="Amélioration_progressive">Amélioration progressive</h2>
+
+<p>Les propriétés liées à la disposition multi-colonnes seront simplement ignorées par les navigateurs qui ne prennent pas en charge cette fonctionnalité. On peut donc simplement créer une disposition qui n'utilisera qu'une colonne pour les anciens navigateurs et qui tirera parti de cette fonctionnalité dans les navigateurs plus récents.</p>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>Les colonnes CSS permettent aux développeurs web de mieux utiliser l'espace disponible à l'écran. Avec un peu d'imagination et en connaissant cette fonctionnalité d'équilibrage vertical automatique, on peut trouver de nombreux usages pour cette fonctionnalité.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="external" href="https://weblogs.mozillazine.org/roc/archives/2005/03/gecko_18_for_we.html" rel="freelink">https://weblogs.mozillazine.org/roc/a...18_for_we.html</a></li>
+</ul>
diff --git a/files/fr/web/css/css_conditional_rules/index.html b/files/fr/web/css/css_conditional_rules/index.html
new file mode 100644
index 0000000000..2c42f2f816
--- /dev/null
+++ b/files/fr/web/css/css_conditional_rules/index.html
@@ -0,0 +1,71 @@
+---
+title: CSS Conditional Rules
+slug: Web/CSS/CSS_Conditional_Rules
+tags:
+  - Aperçu
+  - CSS
+  - CSS Conditional Rules
+  - Reference
+translation_of: Web/CSS/CSS_Conditional_Rules
+---
+<div>{{CSSRef}}</div>
+
+<p><em><strong>CSS Conditional Rules</strong></em> (ou règles conditionnelles CSS) est un module CSS qui permet de définir un ensemble de règles qui ne s'appliqueront qu'en fonction des capacités du processeur ou du document auquel la feuille de styles est appliquée.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Règles">Règles @</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("@document")}}</li>
+ <li>{{cssxref("@media")}}</li>
+ <li>{{cssxref("@supports")}}</li>
+ <li>{{cssxref("@import")}}</li>
+</ul>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Conditional')}}</td>
+   <td>{{Spec2('CSS3 Conditional')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<h3 id="document"><code>@document</code></h3>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.document")}}</p>
+
+<h3 id="import"><code>@import</code></h3>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.import")}}</p>
+
+<h3 id="media"><code>@media</code></h3>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media")}}</p>
+
+<h3 id="supports"><code>@supports</code></h3>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.supports")}}</p>
diff --git a/files/fr/web/css/css_conditional_rules/utiliser_requêtes_fonctionnalité_(feature_queries)/index.html b/files/fr/web/css/css_conditional_rules/utiliser_requêtes_fonctionnalité_(feature_queries)/index.html
new file mode 100644
index 0000000000..811f5c4b22
--- /dev/null
+++ b/files/fr/web/css/css_conditional_rules/utiliser_requêtes_fonctionnalité_(feature_queries)/index.html
@@ -0,0 +1,112 @@
+---
+title: Utiliser les requêtes de fonctionnalité (feature queries)
+slug: >-
+  Web/CSS/CSS_Conditional_Rules/Utiliser_requêtes_fonctionnalité_(feature_queries)
+tags:
+  - Amélioration progressive
+  - CSS
+  - Guide
+translation_of: Web/CSS/CSS_Conditional_Rules/Using_Feature_Queries
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>Les requêtes de fonctionnalité (ou <em>feature queries</em>)</strong> sont créées à l'aide de la règle <code><a href="/fr/docs/Web/CSS/@supports">@supports</a></code> et permettent aux développeurs web de tester la prise en charge d'une fonctionnalité donnée par le navigateur puis de fournir le code CSS qui sera appliqué selon le résultat de ce test. Dans ce guide, nous verrons comment gérer l'amélioration progressive grâce à l'aide des requêtes de fonctionnalité.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Les requêtes de fonctionnalité CSS s'inscrivent dans <a href="https://drafts.csswg.org/css-conditional-3/">le module de spécification CSS Conditional Rules</a> qui décrit également le fonctionnement de la règle <code><a href="/fr/docs/Web/CSS/@media">@media</a></code>. Vous pourrez ici voir que les requêtes de fonctionnalité fonctionnent de façon semblable aux requêtes de média. Pour les requêtes de média, on teste une caractéristique de l'environnement dans lequel la page web est affichée/exécutée tandis que pour les requêtes de fonctionnalité, on teste la prise en charge d'une fonctionnalité CSS dans le navigateur.</p>
+
+<p>Une requête de fonctionnalité commence par une règle <code>@supports</code>, suivi du nom de la propriété et de la valeur qu'on souhaite tester. Il n'est pas possible de tester une propriété seule (ex. <code>display</code>) mais uniquement un couple nom/valeur :</p>
+
+<pre class="brush: css">@supports (<em>propriété</em>: <em>valeur</em>) {
+  <em>Règles CSS à appliquer</em>
+}</pre>
+
+<p>Si, par exemple, on souhaite vérifier qu'un navigateur prend en charge la propriété <code>row-gap</code>, on écrira la requête suivant. Dans la plupart des cas, peu importe la valeur utilisée avec cette propriété, on souhaite simplement la prise en charge de cette propriété et on peut donc utiliser n'importe quelle valeur valide pour ça.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/feature-queries/simple.html", '100%', 600)}}</p>
+
+<p>La partie dédiée à la valeur de la propriété permet de tester les cas où une nouvelle valeur est spécifiée pour une propriété donnée. Le cas de <code>display</code> est particulièrement intéressant. Tous les navigateurs prennent en charge <code>display</code> (<code>display: block</code> faisait partie de CSS1) mais les valeurs <code>display: flex</code> et <code>display: grid</code> ont été ajoutées plus récemment. Les propriétés CSS peuvent parfois se voir doter de nouvelles valeurs et on peut alors tester leur prise en charge avec <code>@supports</code>.</p>
+
+<h2 id="Tester_labsence_de_prise_en_charge_dune_fonctionnalité">Tester l'absence de prise en charge d'une fonctionnalité</h2>
+
+<p>Il est aussi possible de tester l'absence de prise en charge d'une fonctionnalité en ajoutant le mot-clé <code>not</code> :</p>
+
+<pre class="brush: css">@supports not (<em>propriété</em>: <em>valeur</em>) {
+  <em>Règles CSS à appliquer</em>
+}</pre>
+
+<p>Les règles CSS contenues dans la requête suivante seront uniquement appliquées lorsque le navigateur ne prend pas en charge <code>row-gap</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/feature-queries/not.html", '100%', 600)}}</p>
+
+<h2 id="Tester_la_prise_en_charge_de_plusieurs_fonctionnalités">Tester la prise en charge de plusieurs fonctionnalités</h2>
+
+<p>Si on souhaite tester la prise en charge de plusieurs fonctionnalités en même temps, on pourra les combiner avec le mot-clé <code>and</code> :</p>
+
+<pre class="brush: css">@supports (<em>property1</em>: <em>value</em>) and (<em>property</em>2: <em>value</em>) {
+<em>  CSS rules to apply</em>
+}</pre>
+
+<p>On peut, par exemple, vérifier que le navigateur prend en charge les formes (<em>shapes</em>) et grilles CSS grâce à une règle qui teste cette conjonction. La règle suivante renverra <code>true</code> uniquement si <code>shape-outside: circle()</code> et <code>display: grid</code> sont pris en charge par le navigateur.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/feature-queries/and.html", '100%', 600)}}</p>
+
+<p>De la même façon, on peut utiliser le mot-clé <code>or</code> si on souhaite tester la prise en charge d'au moins une fonctionnalité :</p>
+
+<pre class="brush: css">@supports (<em>property1</em>: <em>value</em>) or (<em>property</em>2: <em>value</em>) {<em>
+  CSS rules to apply</em>
+}</pre>
+
+<p>Cela peut s'avérer particulièrement utile lorsqu'un préfixe est présent dans le nom d'une propriété (on peut alors tester la prise en charge de la propriété standard et des versions préfixées).</p>
+
+<p>{{EmbedGHLiveSample("css-examples/feature-queries/or.html", '100%', 600)}}</p>
+
+<h2 id="Limites_des_requêtes_de_fonctionnalité">Limites des requêtes de fonctionnalité</h2>
+
+<p>Une règle <code>@supports</code> ne permet de vérifier qu'un navigateur peut interpréter une ou plusieurs paires de propriétés/valeurs. Si cette paire est comprise par le navigateur, celui-ci renverra une réponse positive. Une telle requête ne permet pas d'indiquer que la fonctionnalité est complètement prise en charge, sans bug…</p>
+
+<p>De plus, de telles requêtes ne permettent pas de tester une <em>implémentation partielle</em>. Prenons l'exemple de la propriété <code>gap</code>, à l'heure actuelle (novembre 2019) : tous les navigateurs prennent en charge <code>gap</code> avec les grilles CSS et seul Firefox prend en charge <code>gap</code> avec les boîtes flexibles (<em>flexbox</em>). Si on teste la propriété <code>gap</code> car on souhaite l'utiliser avec les boîtes flexibles, on recevra une réponse positive bien que ce ne soit pas implémenté.</p>
+
+<h2 id="Comment_utiliser_supports_pour_lamélioration_progressive">Comment utiliser <code>@supports</code> pour l'amélioration progressive ?</h2>
+
+<p>Les requêtes de fonctionnalité sont un outil précieux pour améliorer un site de façon progressive. Elles permettent de fournir une solution fonctionnelle pour tous les navigateurs et d'améliorer le résultat pour les navigateurs qui prennent en charge de nouvelles fonctionnalités.</p>
+
+<p>Toutefois, il existe des navigateurs pour lesquels même les requêtes de fonctionnalité/<code>@supports</code> ne sont pas pris en charge. Ainsi, si on souhaite utiliser les grilles CSS (qui ne sont pas prises en charge par IE11), on ne peut pas tester leur prise en charge dans IE11 car ce dernier ne permet pas d'utiliser <code>@supports</code>. En pratique, cela ne devrait pas poser de problème : le code CSS principal est destiné aux navigateurs les plus anciens et on ajoute le CSS plus récent dans les requêtes de fonctionnalité.</p>
+
+<p>Prenons un exemple plus construit.</p>
+
+<p>Imaginons qu'on veuille créer une disposition avec trois boîtes qui se suivent sur une ligne. Idéalement, on voudrait utiliser <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">les grilles CSS</a>. Toutefois, on voudrait aussi une disposition qui fonctionne pour les navigateurs plus anciens avec des éléments flottants. Pour commencer, on crée la disposition flottante avec le code suivante (on a alors trois colonnes).</p>
+
+<p>{{EmbedGHLiveSample("css-examples/feature-queries/step1.html", '100%', 900)}}</p>
+
+<p>Lorsque les navigateurs ne comprennent pas une propriété ou une valeur CSS, ils l'ignorent. On peut donc améliorer progressivement notre disposition avec les grilles CSS. Les navigateurs qui ne prennent pas en charge les grilles ignoreront la valeur <code>grid</code> pour la propriété <code>display</code>. Une fois qu'un objet flottant devient un élément de grille, son caractère flottant est retiré (voir <a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Prendre en charge les navigateurs plus anciens</a>) et la grille écrase alors la version flottante.</p>
+
+<p>Un problème persiste cependant. La propriété <code>width</code>, utilisée par les objets flottants pour afficher trois colonnes, est désormais interprétée par la grille comme étant la largeur de la piste pour la colonne (et pas la largeur du conteneur comme c'était le cas pour la disposition flottante).</p>
+
+<p>{{EmbedGHLiveSample("css-examples/feature-queries/step2.html", '100%', 900)}}</p>
+
+<p>Il faut une façon de retirer la largeur si <code>display: grid</code> est pris en charge. C'est là que les requêtes de fonctionnalité montrent leur force. On peut réinitialiser <code>width</code> avec la valeur <code>auto</code> si les grilles sont prises en charge.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/feature-queries/step3.html", '100%', 900)}}</p>
+
+<p>Dans le scénario précédent, peu importe que IE11 ne prenne pas en charge les requêtes de fonctionnalité ou les grilles CSS : c'est la version flottante qui sera utilisée dans tous les cas où le navigateur ne prend pas en charge les grilles.</p>
+
+<p>Une autre façon d'écrire cette solution consiste à grouper le code utilisant la grille dans une même requête de fonctionnalité.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/feature-queries/step4.html", '100%', 900)}}</p>
+
+<p>De cette façon, on a un peu plus de code mais on peut alors tester le fonctionnement par défaut en changeant simplement le nom de la valeur. Dans l'exemple qui suit, vous pouvez ainsi alterner entre les deux solutions en changeant <code>display: grid</code> en <code>display: grip</code> (une valeur invalide et donc non prise en charge).</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Les requêtes de fonctionnalité permettent d'utiliser des fonctionnalités récentes dans l'amélioration progressive de sites fonctionnels avec les anciens navigateurs. En destinant le code CSS aux navigateurs qui le prennent en charge, on ne risque pas d'interférences avec la disposition de base (comme nous avons pu le voir avec l'exemple précédent sur les grilles CSS).</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La règle <a href="/fr/docs/Web/CSS/@supports">@supports</a></li>
+ <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Apprendre les dispositions en CSS et la prise en charge des anciens navigateurs</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive">Les grilles CSS et l'amélioration progressive</a></li>
+ <li><a href="https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/">Utiliser les requêtes de fonctionnalités en CSS (billet du blog Hacks en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/css_counter_styles/index.html b/files/fr/web/css/css_counter_styles/index.html
new file mode 100644
index 0000000000..b8e1d2eca2
--- /dev/null
+++ b/files/fr/web/css/css_counter_styles/index.html
@@ -0,0 +1,91 @@
+---
+title: CSS Counter Styles
+slug: Web/CSS/CSS_Counter_Styles
+tags:
+  - Aperçu
+  - CSS
+  - CSS Counter Styles
+  - Reference
+translation_of: Web/CSS/CSS_Counter_Styles
+---
+<div>{{cssref}}</div>
+
+<p><em><strong>CSS Counter Styles</strong></em> est un module CSS qui permet de définir ses propres styles pour les compteurs utilisés dans les listes numérotées.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("counter-increment")}}</li>
+ <li>{{cssxref("counter-reset")}}</li>
+</ul>
+</div>
+
+<h3 id="Règles">Règles @</h3>
+
+<dl>
+ <dt>{{cssxref("@counter-style")}}</dt>
+ <dd>
+ <div class="index">
+ <ul>
+  <li>{{cssxref("@counter-style/system","system")}}</li>
+  <li>{{cssxref("@counter-style/additive-symbols", "additive-symbols")}}</li>
+  <li>{{cssxref("@counter-style/negative", "negative")}}</li>
+  <li>{{cssxref("@counter-style/prefix", "prefix")}}</li>
+  <li>{{cssxref("@counter-style/suffix", "suffix")}}</li>
+  <li>{{cssxref("@counter-style/range", "range")}}</li>
+  <li>{{cssxref("@counter-style/pad", "pad")}}</li>
+  <li>{{cssxref("@counter-style/speak-as", "speak-as")}}</li>
+  <li>{{cssxref("@counter-style/fallback", "fallback")}}</li>
+ </ul>
+ </div>
+ </dd>
+</dl>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/Compteurs_CSS">Manipuler les compteurs CSS</a></dt>
+ <dd>Cet article décrit comment utiliser les compteurs CSS afin de numéroter des éléments HTML et de réaliser des comptages complexes.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Counter Styles')}}</td>
+   <td>{{Spec2('CSS3 Counter Styles')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<h3 id="counter-style"><code>@counter-style</code></h3>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.counter-style")}}</p>
+
+<h3 id="counter-increment"><code>counter-increment</code></h3>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.counter-increment")}}</p>
+
+<h3 id="counter-reset"><code>counter-reset</code></h3>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.counter-reset")}}</p>
diff --git a/files/fr/web/css/css_device_adaptation/index.html b/files/fr/web/css/css_device_adaptation/index.html
new file mode 100644
index 0000000000..6cc6189902
--- /dev/null
+++ b/files/fr/web/css/css_device_adaptation/index.html
@@ -0,0 +1,48 @@
+---
+title: CSS Device Adaptation
+slug: Web/CSS/CSS_Device_Adaptation
+tags:
+  - CSS
+  - Reference
+translation_of: Web/CSS/CSS_Device_Adaptation
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Device Adapation</strong> est un module CSS qui permet de définir les dimensions, le facteur d'agrandissement et l'orientation de la zone d'affichage (<em>viewport</em>).</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Règles">Règles @</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("@viewport")}}</li>
+</ul>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Device")}}</td>
+   <td>{{Spec2("CSS3 Device")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<h3 id="viewport"><code>@viewport</code></h3>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.viewport")}}</p>
diff --git a/files/fr/web/css/css_display/index.html b/files/fr/web/css/css_display/index.html
new file mode 100644
index 0000000000..b8f91c262b
--- /dev/null
+++ b/files/fr/web/css/css_display/index.html
@@ -0,0 +1,115 @@
+---
+title: CSS Display
+slug: Web/CSS/CSS_Display
+tags:
+  - Aperçu
+  - CSS
+  - CSS Display
+  - Reference
+translation_of: Web/CSS/CSS_Display
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>L'affichage CSS</strong> (<em>CSS Display) </em>est un module CSS qui définit la façon dont l'arbre des boîtes pour la mise en forme est généré à partir de l'arbre des éléments du document et qui définit les propriétés qui le contrôlent.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés_CSS">Propriétés CSS</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("display")}}</li>
+</ul>
+</div>
+
+<h3 id="Types_de_donnée_CSS">Types de donnée CSS</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("&lt;display-outside&gt;")}}</li>
+ <li>{{CSSxRef("&lt;display-inside&gt;")}}</li>
+ <li>{{CSSxRef("&lt;display-listitem&gt;")}}</li>
+ <li>{{CSSxRef("&lt;display-box&gt;")}}</li>
+ <li>{{CSSxRef("&lt;display-internal&gt;")}}</li>
+ <li>{{CSSxRef("&lt;display-legacy&gt;")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<h3 id="Disposition_en_flux_(display_block_display_inline)">Disposition en flux (<code>display: block</code>, <code>display: inline</code>)</h3>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Les dispositions de bloc et en ligne dans le flux normal</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow">La disposition en flux et les dépassements</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes">La disposition en flux et les modes d'écriture</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained">Explications sur les contextes de formatage</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow">Être ou non dans le flux</a></li>
+</ul>
+
+<h3 id="Les_boîtes_flexibles_(display_flex)">Les boîtes flexibles (<code>display: flex</code>)</h3>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Concepts_de_base_flexbox">Concepts de base des boîtes flexibles</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligner_des_éléments_dans_un_conteneur_flexible">Aligner des objets dans un conteneur flexible</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal">Contrôler les proportions des objets flexibles le long de l'axe principal</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Mixins"><em>Mixins</em> Flexbox pour les différents navigateurs</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Maîtriser_passage_à_la_ligne_des_éléments_flexibles">Maîtriser le passage à la ligne des objets flexibles</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordonner_éléments_flexibles">Ordonner les objets flexibles</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Liens_entre_flexbox_et_les_autres_dispositions">Les relations entre les boîtes flexibles et les autres méthodes de disposition</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Rétrocompatibilite_de_flexbox">La rétrocompatiblité des boîtes flexibles</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Cas_utilisation_flexbox">Les cas d'usage type pour les boîtes flexibles</a></li>
+</ul>
+
+<h3 id="Les_grilles_CSS_(display_grid)">Les grilles CSS (<code>display: grid</code>)</h3>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base">Concepts de base des grilles</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition">Les relations entre les grilles et les autres méthodes de disposition</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS">Le placement sur les lignes</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille">Les modèles de zone de grilles</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille">Les dispositions utilisant les lignes nommées</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS">Le placement automatique dans les grilles</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">L'alignement des boîtes dans les grilles</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture">Les grilles, les valeurs logiques et les modes d'écriture</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité">Les grilles et l'accessibilité</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive">Les grilles et l'amélioration progressive</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Construire_des_dispositions_courantes_avec_des_grilles_CSS">Réaliser des dispositions courantes à l'aide de grilles</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Display', '#the-display-properties', 'display')}}</td>
+   <td>{{Spec2('CSS3 Display')}}</td>
+   <td>Ajout des valeurs <code>run-in</code>, <code>flow</code>, <code>flow-root</code>, <code>contents</code> et de la syntaxe avec plusieurs mots-clés.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#display-prop', 'display')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Ajout des valeurs pour les tableaux et ajout de <code>inline-block</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#display', 'display')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Spécification initiale. Valeurs de base : <code>none</code>, <code>block</code>, <code>inline</code> et <code>list-item</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>En plus du module de spécification <em>CSS Display</em> de niveau 3, d'autres modules de spécifications définissent le comportement à avoir selon les différentes valeurs de <code>display</code>.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.display", 10)}}</p>
diff --git a/files/fr/web/css/css_flexible_box_layout/aligner_des_éléments_dans_un_conteneur_flexible/index.html b/files/fr/web/css/css_flexible_box_layout/aligner_des_éléments_dans_un_conteneur_flexible/index.html
new file mode 100644
index 0000000000..2321587479
--- /dev/null
+++ b/files/fr/web/css/css_flexible_box_layout/aligner_des_éléments_dans_un_conteneur_flexible/index.html
@@ -0,0 +1,218 @@
+---
+title: Aligner des éléments dans un conteneur flexible
+slug: >-
+  Web/CSS/CSS_Flexible_Box_Layout/Aligner_des_éléments_dans_un_conteneur_flexible
+tags:
+  - CSS
+  - Flex
+  - Guide
+  - Web
+  - flexbox
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
+---
+<p>{{CSSRef}}</p>
+
+<p class="summary">Une des raisons qui ont poussé à l'adoption des boîtes flexibles est la présence d'outils d'alignement enfin corrects pour le Web. On pouvait ainsi enfin centrer une boîte sur un axe vertical. Dans ce guide, nous verrons dans le détail comment fonctionnent les propriétés d'alignement et de justification relatives aux boîtes flexibles.</p>
+
+<p>Afin de centrer notre boîte, nous allons utiliser la propriété <code>align-items</code> afin d'aligner l'objet sur l'axe secondaire (<em>cross axis</em> en anglais). Dans notre exemple, cet axe est l'axe de bloc et est orienté verticalement. La propriété <code>justify-content</code> est quant à elle utilisée pour aligner l'objet sur l'axe principal (<em>main axis</em> en anglais) (ici l'axe principal est l'axe en ligne qui s'étend horizontalement).</p>
+
+<p><img alt="Un élément contenant une autre boîte centrée à l'intérieur" src="https://mdn.mozillademos.org/files/15627/align1.png" style="display: block; height: 357px; margin: 0px auto; width: 616px;"></p>
+
+<p> </p>
+
+<p>Vous pouvez étudier le code de l'exemple suivant et modifier la taille du conteneur ou d'un élément imbriqué : l'élément imbriqué sera toujours centré.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}</p>
+
+<h2 id="Les_propriétés_responsables_de_l'alignement">Les propriétés responsables de l'alignement</h2>
+
+<p>Voici les propriétés que nous étudierons dans ce guide :</p>
+
+<ul>
+ <li>{{cssxref("justify-content")}} — contrôle l'alignement de tous les objets sur l'axe principal.</li>
+ <li>{{cssxref("align-items")}} — contrôle l'alignement de tous les objets sur l'axe secondaire.</li>
+ <li>{{cssxref("align-self")}} — contrôle l'alignement d'un objet flexible donné le long de l'axe secondaire.</li>
+ <li>{{cssxref("align-content")}} — contrôle l'espace entre les lignes flexibles sur l'axe secondaire.</li>
+</ul>
+
+<p>Nous verrons également comment les marges automatiques peuvent être utilisées dans l'alignement des boîtes flexibles.</p>
+
+<div class="note">
+<p><strong>Note</strong> : Les propriétés d'alignement du module de spécification CSS Flexbox ont été placés dans leur propre spécification : <a href="https://www.w3.org/TR/css-align-3/">CSS Box Alignment Level 3</a>. Cette dernière remplacera à terme les propriétés définies dans le module Flexbox de niveau 1.</p>
+</div>
+
+<h2 id="L'axe_secondaire_(cross_axis)">L'axe secondaire (<em>cross axis</em>)</h2>
+
+<p>Les propriétés <code>align-items</code> et <code>align-self</code> permettent de gérer l'alignement des éléments flexibles sur l'axe secondaire.</p>
+
+<p>Prenons un exemple simple : nous ajoutons <code>display: flex</code> à un conteneur qui contient trois objets. Tous s'étirent afin d'être aussi grands que le plus grand des éléments car celui-ci définit la taille du conteneur sur l'axe secondaire. Si le conteneur flexible possède une hauteur définie, les objets qu'il contient s'étireront pour atteindre cette taille, quel que soit le contenu dont ils disposent.</p>
+
+<p><img alt="Trois objets dont un avec un texte plus long qui le rend plus grand que les autres" src="https://mdn.mozillademos.org/files/15628/align2.png" style="display: block; height: 131px; margin: 0px auto; width: 509px;"></p>
+
+<p><img alt="Trois objets étirés pour mesurer 200 pixels de haut" src="https://mdn.mozillademos.org/files/15629/align3.png" style="display: block; height: 207px; margin: 0px auto; width: 637px;"></p>
+
+<p>Les éléments obtiennent la même hauteur à cause de la valeur initiale de <code>align-items</code> qui contrôle l'alignement sur l'axe secondaire. Cette valeur initiale est <code>stretch</code> (qui indique que les objets du conteneur doivent être étirés sur l'axe).</p>
+
+<p>Voici les valeurs disponibles pour aligner les objets :</p>
+
+<ul>
+ <li><code>align-items: flex-start</code></li>
+ <li><code>align-items: flex-end</code></li>
+ <li><code>align-items: center</code></li>
+ <li><code>align-items: stretch</code></li>
+ <li><code>align-items: baseline</code></li>
+</ul>
+
+<p>Dans l'exemple qui suit, la valeur d'<code>align-items</code> est <code>stretch</code>. Vous pouvez essayer les autres valeurs afin de voir comment les objets s'alignent dans le conteneur.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-items.html", '100%', 520)}} </p>
+
+<h3 id="Aligner_un_objet_avec_align-self">Aligner un objet avec <code>align-self</code></h3>
+
+<p>La propriété <code>align-items</code> définit la valeur de la propriété <code>align-self</code> pour l'ensemble des objets flexibles. Cela signifie qu'on peut utiliser la propriété <code>align-self</code> de façon explicite, sur un élément donné, afin de préciser son alignement. La propriété <code>align-self</code> prend en charge les mêmes valeurs que <code>align-items</code> ainsi qu'un mot-clé <code>auto</code> qui reprendra la valeur définie sur le conteneur flexible.</p>
+
+<p>Dans le prochain exemple, le conteneur flexible a <code>align-items: flex-start</code>, ce qui signifie que les éléments sont tous alignés au début de l'axe secondaire. On utilise le sélecteur <code>first-child</code> afin de cibler le premier élément fils pour lequel on indique <code>align-self: stretch</code> ; un autre élément a été sélectionné via la classe <code>selected</code> et est paramétré avec <code>align-self: </code><code>center</code>. Vous pouvez modifier la valeur de <code>align-items</code> ou changer les valeurs d'<code>align-self</code> sur les éléments afin d'observer le fonctionnement.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self.html", '100%', 650)}} </p>
+
+<h3 id="Changer_d'axe_principal">Changer d'axe principal</h3>
+
+<p>Jusqu'à présent, les exemples fonctionnaient avec <code>flex-direction</code> valant <code>row</code> et avec un langage dont les lignes progressent du haut vers le bas. Cela signifie que l'axe principal est une ligne horizontale et que l'axe secondaire est une ligne verticale dirigée vers le bas.</p>
+
+<p><img alt="Trois objets, le premier aligné avec flex-start, le deuxième avec center et le troisième avec flex-end. Alignement sur l'axe vertical.." src="https://mdn.mozillademos.org/files/15630/align4.png" style="display: block; height: 204px; margin: 0px auto; width: 671px;"></p>
+
+<p>Si on passe <code>flex-direction</code> à <code>column</code>, <code>align-items</code> et <code>align-self</code> aligneront les éléments à gauche et à droite.</p>
+
+<p><img alt="Trois éléments, le premier aligné avec flex-start, le deuxième avec center et le troisième avec flex-end. Alignement sur l'axe horizontal." src="https://mdn.mozillademos.org/files/15631/align5.png" style="display: block; height: 239px; margin: 0px auto; width: 687px;"></p>
+
+<p>Vous pouvez manipuler cet exemple qui reprend le même code que l'exemple précédent avec la seule exception que <code>flex-direction</code> vaut ici <code>column</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self-column.html", '100%', 730)}}</p>
+
+<h2 id="Aligner_le_contenu_sur_l'axe_secondaire_align-content">Aligner le contenu sur l'axe secondaire : <code>align-content</code></h2>
+
+<p>Jusqu'à présent, nous avons aligné les éléments ou un élément donné dans la zone définie par le conteneur flexible. Si on a un conteneur qui s'étend / se divise sur plusieurs lignes, on pourra utiliser la propriété <code>align-content</code> afin de contrôler la distribution de l'espace entre les lignes. La spécification décrit cela comme <a href="https://drafts.csswg.org/css-flexbox/#align-content-property">le groupement des lignes flexibles</a>.</p>
+
+<p>Afin qu'<code>align-content</code> puisse fonctionner, il faut un conteneur dont la hauteur est supérieure à celle qui est nécessaire à l'affichage des éléments. Le moteur applique alors les règles sur l'ensemble des éléments et régit l'utilisation de l'espace restant et l'alignement de l'ensemble dans cet espace.</p>
+
+<p>La propriété <code>align-content</code> prend les valeurs suivantes :</p>
+
+<ul>
+ <li><code>align-content: flex-start</code></li>
+ <li><code>align-content: flex-end</code></li>
+ <li><code>align-content: center</code></li>
+ <li><code>align-content: space-between</code></li>
+ <li><code>align-content: space-around</code></li>
+ <li><code>align-content: stretch</code></li>
+ <li><code>align-content: space-evenly</code> (cette valeur n'est pas définie dans le module de spécification Flexbox)</li>
+</ul>
+
+<p>Dans l'exemple suivant, le conteneur flexible a une hauteur de 400 pixels, ce qui est supérieur à ce qui est nécessaire pour afficher le contenu. <code>align-content</code> vaut <code>space-between</code> ce qui signifie que l'espace disponible sera réparti <em>entre</em> les lignes flexibles dont la première commence en étant adjacente à la ligne de début et dont la dernière est adjacente à la ligne de fin de l'axe secondaire.</p>
+
+<p>Vous pouvez modifier la valeur de <code>align-content</code> afin d'observer comment cette propriété fonctionne.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content.html", '100%', 850)}} </p>
+
+<p>Là encore, on peut passer avec <code>flex-direction: column</code> afin de voir comment les propriétés se comportent sur les colonnes. Là aussi, il faut suffisamment d'espace le long de l'axe secondaire afin qu'il y ait de l'espace libre à répartir.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content-column.html", '100%', 860)}} </p>
+
+<div class="note">
+<p><strong>Note</strong> : La valeur <code>space-evenly</code> n'est pas définie dans la spécification relative aux boîtes flexibles et a été dernièrement ajoutée à la spécification sur l'alignement des boîtes. Cette valeur est donc moins prise en charge par les navigateurs que les autres mots-clés.</p>
+</div>
+
+<p>Vous pouvez consulter la documentation sur {{cssxref("align-content")}} pour en savoir plus, notamment sur la compatibilité des navigateurs.</p>
+
+<h2 id="Aligner_le_contenu_sur_l'axe_principal">Aligner le contenu sur l'axe principal</h2>
+
+<p>Nous avons pu voir comment fonctionne l'alignement sur l'axe secondaire. Concentrons-nous désormais sur l'alignement relatif à l'axe principal. Ici, une seule propriété est disponible : <code>justify-content</code>. En effet, sur cet axe, les éléments sont gérés comme un seul groupe. Avec, <code>justify-content</code> on contrôle comment l'espace disponible est réparti s'il y a plus d'espace que nécessaire pour afficher les objets.</p>
+
+<p>Dans l'exemple initial avec <code>display: flex</code> appliqué au conteneur, les éléments formaient une ligne qui commençait au début du conteneur. Cela provient de la valeur initiale de <code>justify-content</code> qui est <code>flex-start</code>. Avec cette valeur, tout l'espace disponible est placé à la fin, après les éléments.</p>
+
+<p><img alt="Trois éléments, chacun mesurant 100 pixels de large dans un conteneur de 500 pixels de large. L'espace disponible restant se situe après les éléments." src="https://mdn.mozillademos.org/files/15632/align6.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p>
+
+<p>La propriété <code>justify-content</code> prend en charge les mêmes valeurs que <code>align-content</code>.</p>
+
+<ul>
+ <li><code>justify-content: flex-start</code></li>
+ <li><code>justify-content: flex-end</code></li>
+ <li><code>justify-content: center</code></li>
+ <li><code>justify-content: space-between</code></li>
+ <li><code>justify-content: space-around</code></li>
+ <li><code>justify-content: stretch</code></li>
+ <li><code>justify-content: space-evenly</code> (ce mot-clé n'est pas défini dans la spécification CSS sur les boîtes flexibles)</li>
+</ul>
+
+<p>Dans le prochain exemple, <code>justify-content</code> vaut <code>space-between</code>. L'espace disponible après l'affichage des éléments est alors distribué entre les éléments et le premier élément est adjacent à la ligne de début et le dernier est adjacent à la ligne de fin.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content.html", '100%', 480)}} </p>
+
+<p>Si l'axe principal suit la direction de bloc (orthogonale au sens d'écriture) car <code>flex-direction</code> est paramétré avec la valeur <code>column</code>, <code>justify-content</code> distribuera l'espace selon cet axe tant que l'espace du conteneur flexible est suffisant.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-column.html", '100%', 880)}}</p>
+
+<h3 id="L'alignement_et_les_modes_d'écriture">L'alignement et les modes d'écriture</h3>
+
+<p>Rappelons ici qu'avec ces méthodes d'alignement, <code>flex-start</code> et <code>flex-end</code> respectent le mode d'écriture utilisé. Si on utilise <code>justify-content</code> avec la valeur <code>start</code> pour un contenu écrit en anglais (un mode d'écriture de la gauche vers la droite), les éléments commenceront à gauche du conteneur.</p>
+
+<p><img alt="Trois éléments alignés sur la gauche" src="https://mdn.mozillademos.org/files/15638/Basics5.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p>
+
+<p>Mais si le contenu est écrit en arabe (un mode d'écriture de la droite vers la gauche), les éléments démarreront à la droite du conteneur.</p>
+
+<p><img alt="Trois éléments alignés sur la droite" src="https://mdn.mozillademos.org/files/15639/Basics6.png" style="display: block; height: 152px; margin: 0px auto; width: 634px;"></p>
+
+<p>Dans l'exemple qui suit, on indique explicitement la valeur <code>rtl</code> pour la propriété <code>display</code> afin de forcer un mode d'écriture de droite à gauche. Vous pouvez retirer cette déclaration ou modifier la valeur de <code>justify-content</code> afin de voir comment les boîtes flexibles s'organisent lorsque le début de la ligne est à droite.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-writing-mode.html", '100%', 440)}} </p>
+
+<h2 id="L'alignement_et_la_propriété_flex-direction">L'alignement et la propriété <code>flex-direction</code></h2>
+
+<p>La ligne de début sera également modifiée si on change la valeur de la propriété <code>flex-direction</code>, par exemple en utilisant <code>row-reverse</code> à la place de <code>row</code>.</p>
+
+<p>Dans le prochain exemple, on utilise <code>flex-direction: row-reverse</code> et <code>justify-content: flex-end</code>. Pour une langue écrite de gauche à droite, les éléments seront regroupés à gauche. Si vous modifiez les valeurs et passez de <code>flex-direction: row-reverse</code> à <code>flex-direction: row</code>. Vous verrez que les éléments sont désormais groupés à droite.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-reverse.html", '100%', 440)}} </p>
+
+<p>Si cela peut paraître déroutant, la règle principale à mémoriser est que, par défaut, si on ne change rien, les éléments flexibles sont organisés dans la direction naturelle de la langue dans laquelle le document est écrit. <code>flex-start</code> correspondra donc à la ligne de début depuis laquelle une phrase démarrerait.</p>
+
+<p><img alt="Un diagramme illustrant la ligne de début à gauche et la ligne de fin à droite" src="https://mdn.mozillademos.org/files/15634/align8.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p>
+
+<p>On peut changer l'axe avec <code>flex-direction: column</code>. Dans ce cas, <code>flex-start</code> correspondra à l'emplacement du début du premier paragraphe d'un texte.</p>
+
+<p><img alt="Un diagramme illustrant la ligne de début en haut et la ligne de fin en bas" src="https://mdn.mozillademos.org/files/15636/align10.png" style="display: block; height: 273px; margin: 0px auto; width: 709px;"></p>
+
+<p>Si on utilise <code>flex-direction</code> avec une des valeurs inversée, les éléments seront organisés dans l'ordre inverse (à l'opposé de la disposition naturelle de la langue utilisée pour le document). <code>flex-start</code> correspondra alors à la « fin » usuelle d'une ligne de texte sur une disposition en ligne et au dernier paragraphe sur une disposition organisée sur un axe principal vertical.</p>
+
+<p><img alt="Un diagramme illustrant la ligne de début à droite et celle de fin à gauche" src="https://mdn.mozillademos.org/files/15635/align9.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p>
+
+<p><img alt="Un diagramme illustrant la ligne de début en bas et celle de fin en haut" src="https://mdn.mozillademos.org/files/15637/align11.png" style="display: block; height: 273px; margin: 0px auto; width: 709px;"></p>
+
+<h2 id="Utiliser_les_marges_automatiques_pour_aligner_sur_l'axe_principal">Utiliser les marges automatiques pour aligner sur l'axe principal</h2>
+
+<p>Il n'existe pas de propriété <code>justify-items</code> ou <code>justify-self</code> qui permettent d'aligner un élément donné parmi le groupe d'éléments flexibles organisés sur l'axe principal. Toutefois, on peut obtenir un alignement individuel pour séparer un élément ou un groupe d'éléments grâce aux marges automatiques et aux boîtes flexibles.</p>
+
+<p>Un motif fréquent est l'organisation d'une barre de navigation où certains éléments clés sont situés à droite alors qu'un groupe principal est présent à gauche. On pourrait alors penser qu'il s'agit d'un cas d'utilisation pour une propriété comme <code>justify-self</code>… Cependant, si on regarde l'image qui suit et qu'on était capable de modifier <code>justify-self</code> sur l'élément <em>d</em>, cela changerait également l'alignement de l'élément <em>e</em> qui suit, ce qui pourrait ou non être voulu.</p>
+
+<p><img alt="Cinq objets répartis en deux groupes. Trois sont situés à gauche et deux sont situés à droite." src="https://mdn.mozillademos.org/files/15633/align7.png" style="display: block; height: 84px; margin: 0px auto; width: 645px;"></p>
+
+<p>Plutôt que cela, on peut cibler le quatrième élément et le séparer des trois premiers en utilisant <code>margin-left: auto</code>. Une marge automatique consommera tout l'espace disponible sur l'axe correspondant.</p>
+
+<p>Dans l'exemple qui suit, on a plusieurs éléments flexibles organisés sur une ligne avec les valeurs de base pour les propriétés liées aux boîtes flexibles. La classe <code>push</code> possède la déclaration <code>margin-left: auto</code>. Vous pouvez observer l'effet obtenu en retirant cette classe ou en l'appliquant à un autre élément.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/auto-margins.html", '100%', 470)}} </p>
+
+<h2 id="Les_prochaines_fonctionnalités_pour_l'alignement_et_les_boîtes_flexibles">Les prochaines fonctionnalités pour l'alignement et les boîtes flexibles</h2>
+
+<p>Au début de cet article, nous avons vu que les propriétés d'alignement actuellement définies dans le module de spécification CSS de niveau 1 pour les boîtes flexibles étaient également définies dans le module de spécification de niveau 3 pour l'alignement des boîtes. Ce module pourrait voir l'apparition de nouvelles valeurs pour ces propriétés comme le montre d'ailleurs l'introduction de la valeur <code>space-evenly</code> pour les propriétés <code>align-content</code> et <code>justify-content</code>.</p>
+
+<p>Le module de spécification sur l'alignement des boîtes inclut également d'autres méthodes pour créer des espaces entre les objets telles que les propriétés <code>column-gap</code> et <code>row-gap</code> décrites dans <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">le module de grille CSS (<em>CSS Grid</em>)</a>. L'inclusion de ces propriétés dans le module d'alignement des boîtes signifie que nous pourrons plus tard les utiliser dans les dispositions avec les boîtes flexibles. Cela signifie qu'il ne sera plus nécessaire d'utiliser des marges afin d'espacer des éléments flexibles. Firefox 63 devrait implémenter les propriétés <code>gap</code> pour les dispositions flexibles.</p>
+
+<p>Lorsque vous explorez les différentes méthodes d'alignement relatives aux boîtes flexibles, n'hésitez pas à étudier ce qui est disponible avec une disposition en grille (<em>CSS Grid Layout</em>). En effet, ces deux spécifications utilisent les propriétés d'alignement qui sont désormais détaillées dans la spécification sur l'alignement des boîtes. Vous pouvez en savoir plus sur le fonctionnement de ces propriétés sur une grille <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">grâce à cet article</a>. Une page récapitulative (en anglais) est également disponible pour comparer le fonctionnement de l'alignement par rapport à ces différentes spécifications : <em><a href="https://rachelandrew.co.uk/css/cheatsheets/box-alignment">Box Alignment Cheatsheet</a></em>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Le module<em>CSS Box Alignment</em></a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_Flexbox">L'alignement des boîtes avec Flexbox</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_grille">L'alignement des boîtes avec une grille CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/css_flexible_box_layout/boîtes_flexibles_pour_applications_web/index.html b/files/fr/web/css/css_flexible_box_layout/boîtes_flexibles_pour_applications_web/index.html
new file mode 100644
index 0000000000..f6baae1432
--- /dev/null
+++ b/files/fr/web/css/css_flexible_box_layout/boîtes_flexibles_pour_applications_web/index.html
@@ -0,0 +1,187 @@
+---
+title: Utiliser les boîtes flexibles pour les applications web
+slug: Web/CSS/CSS_Flexible_Box_Layout/Boîtes_flexibles_pour_applications_web
+tags:
+  - Avancé
+  - CSS
+  - Guide
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox
+---
+<div>{{CSSRef}}</div>
+
+<p>Les boîtes flexibles permettent de concevoir des dispositions qui s'appliquent mieux à des environnements mobiles et de bureau et qui peuvent servir aux applications web. Fini d'utiliser des éléments {{HTMLElement("div")}} flottants, <a href="/fr/docs/Web/CSS/position#Positionnement_absolu">le positionnement absolu</a> et des bidouilles JavaScript. Quelques lignes CSS permettent de construire des dispositions verticales et horizontales, flexibles. Voici quelques exemples de cas d'utilisation :</p>
+
+<ul>
+ <li>Centrer un élément au milieu d'une page</li>
+ <li>Définir des conteneurs qui s'organisent verticalement, l'un après l'autre</li>
+ <li>Créer une ligne de boutons ou d'autres éléments qui se condensent verticalement sur les écrans de petite taille.</li>
+</ul>
+
+<p>Cet article ne couvre que l'utilisation des propriétés relatives aux boîtes flexibles non préfixées et standard. Pour plus d'informations sur les préfixes et les anciens navigateurs, se référer <a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS/Utilisation_des_flexbox_en_CSS">au guide plus générique sur la manipulation des boîtes flexibles en CSS</a>.</p>
+
+<h2 id="Les_bases">Les bases</h2>
+
+<p>Pour qu'un élément flotte dans une boîte flexible, on peut utiliser la propriété {{cssxref("display")}} avec la valeur <code>flex</code> puis définir {{cssxref("flex-flow")}} avec la valeur <code>row</code> (si on souhaite que les éléments s'organisent horizontalement) ou avec la valeur <code>column</code> (si on souhaite que les éléments s'empilent verticalement). Si on veut avoir une boîte flexible horizontale et que les éléments « passent à la ligne » verticalement, on pourra définir la propriété <code>wrap</code>.</p>
+
+<p>Ensuite, pour chaque élément qui s'inscrit dans le conteneur flexible, on pourra définir la propriété {{cssxref("flex")}}. Généralement, on utilisera les valeurs suivantes :</p>
+
+<ul>
+ <li>Si on veut qu'un élément n'occupe que la place qui lui est allouée (ex. un bouton), on pourra utiliser <code>flex: none</code> that expands to <code>0 0 auto</code>.</li>
+ <li>Si on veut définir la taille explicite d'un élément, on pourra utiliser <code>flex: 0 0 <em>taille</em></code>. Par exemple : <code>flex 0 0 60px</code>.</li>
+ <li>Si on veut qu'un élément occupe tout l'espace disponible de façon équitable avec ses voisins, on pourra utiliser <code>flex: auto</code>. It expands to <code>1 1 auto</code>.</li>
+</ul>
+
+<p>Il existe bien entendu d'autres possibilités en dehors de cas d'usage simples. Voici quelques exemples d'application.</p>
+
+<h2 id="Centrer_un_élément">Centrer un élément</h2>
+
+<p>Pour ce cas, le plus simple consiste à créer deux boîtes flexibles, l'une dans l'autre. Chaque boîte flexible aura trois élément, deux autour de l'élément centré ainsi que l'élément en question.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css;">.vertical-box {
+  display: flex;
+  height: 400px;
+  width: 400px;
+  flex-flow: column;
+}
+.horizontal-box {
+  display: flex;
+  flex-flow: row;
+}
+.spacer {
+  flex: auto;
+  background-color: black;
+}
+.centered-element {
+  flex: none;
+  background-color: white;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html;">&lt;div class="vertical-box"&gt;
+  &lt;div class="spacer"&gt;&lt;/div&gt;
+  &lt;div class="centered-element horizontal-box"&gt;
+    &lt;div class="spacer"&gt;&lt;/div&gt;
+    &lt;div class="centered-element"&gt;Centered content&lt;/div&gt;
+     &lt;div class="spacer"&gt;&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="spacer"&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Resultat">Resultat</h3>
+
+<p>{{EmbedLiveSample('Centrer_un_élément', 500, 500)}}</p>
+
+<h2 id="Répartir_des_conteneurs_verticalement">Répartir des conteneurs verticalement</h2>
+
+<p>Prenons une page qui se compose d'un en-tête, d'une zone de contenu et d'un pied de page. On souhaite que l'en-tête et le pied de page aient la même taille mais que le contenu s'adapte selon l'espace disponible. Pour cela, on peut utiliser la propriété {{cssxref("flex")}} avec la valeur <code>auto</code> pour le contenu et la valeur <code>none</code> pour l'en-tête et le pied de page.</p>
+
+<h3 id="CSS_2">CSS</h3>
+
+<pre class="brush: css;">.vertical-box {
+  display: flex;
+  height: 400px;
+  width: 400px;
+  flex-flow: column;
+}
+.fixed-size {
+  flex: none;
+  height: 30px;
+  background-color: black;
+  text-align: center;
+}
+.flexible-size {
+  flex: auto;
+  background-color: white;
+}
+</pre>
+
+<h3 id="HTML_2">HTML</h3>
+
+<pre class="brush: html;">&lt;div id="document" class="vertical-box"&gt;
+  &lt;div class="fixed-size"&gt;&lt;button id="increase-size"&gt;Augmenter la taille du conteneur&lt;/button&gt;&lt;/div&gt;
+  &lt;div id="flexible-content" class="flexible-size"&gt;&lt;/div&gt;
+  &lt;div class="fixed-size"&gt;&lt;button id="decrease-size"&gt;Réduire la taille du conteneur&lt;/button&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js;">var height = 400;
+document.getElementById('increase-size').onclick=function() {
+  height += 10;
+  if (height &gt; 500) height = 500;
+  document.getElementById('document').style.height = (height + "px");
+}
+
+document.getElementById('decrease-size').onclick=function() {
+  height -= 10;
+  if (height &lt; 300) height = 300;
+  document.getElementById('document').style.height = (height + "px");
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Répartir_des_conteneurs_verticalement', 500, 500)}}</p>
+
+<h2 id="Créer_un_conteneur_horizontal_qui_se_replie">Créer un conteneur horizontal qui se replie</h2>
+
+<p>Dans certains cas, on veut pouvoir afficher des informations horizontalement lorsque l'écran le permet et les replier en vertical lorsque la taille est trop réduire. On peut obtenir cet effet simplement avec les boîtes flexibles en utilisant la valeur <code>wrap</code> sur la propriété {{cssxref("flex-flow")}}.</p>
+
+<h3 id="CSS_3">CSS</h3>
+
+<pre class="brush: css;">.horizontal-container {
+  display: flex;
+  width: 300px;
+  flex-flow: row wrap;
+}
+.fixed-size {
+  flex: none;
+  width: 100px;
+  background-color: black;
+  color: white;
+  text-align: center;
+}
+</pre>
+
+<h3 id="HTML_3">HTML</h3>
+
+<pre class="brush: html;">&lt;div id="container" class="horizontal-container"&gt;
+  &lt;div class="fixed-size"&gt;Élément 1&lt;/div&gt;
+  &lt;div class="fixed-size"&gt;Élément 2&lt;/div&gt;
+  &lt;div class="fixed-size"&gt;Élément 3&lt;/div&gt;
+&lt;/div&gt;
+&lt;button id="increase-size"&gt;Augmenter la taille du conteneur&lt;/button&gt;
+&lt;button id="decrease-size"&gt;Réduire la taille du conteneur&lt;/button&gt;
+</pre>
+
+<h3 id="JavaScript_2">JavaScript</h3>
+
+<pre class="brush: js;">var width = 300;
+
+document.getElementById('increase-size').onclick=function() {
+  width += 100;
+  if (width &gt; 300) width = 300;
+  document.getElementById('container').style.width = (width + "px");
+}
+
+document.getElementById('decrease-size').onclick=function() {
+  width -= 100;
+  if (width &lt; 100) width = 100;
+  document.getElementById('container').style.width = (width + "px");
+}
+</pre>
+
+<h3 id="Résultat_2">Résultat</h3>
+
+<p>{{EmbedLiveSample('Créer_un_conteneur_horizontal_qui_se_replie', 500, 200)}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS/Utilisation_des_flexbox_en_CSS">Manipuler les boîtes flexibles</a></li>
+</ul>
diff --git a/files/fr/web/css/css_flexible_box_layout/cas_utilisation_flexbox/index.html b/files/fr/web/css/css_flexible_box_layout/cas_utilisation_flexbox/index.html
new file mode 100644
index 0000000000..26a4738980
--- /dev/null
+++ b/files/fr/web/css/css_flexible_box_layout/cas_utilisation_flexbox/index.html
@@ -0,0 +1,140 @@
+---
+title: Cas d'utilisation classiques de flexbox
+slug: Web/CSS/CSS_Flexible_Box_Layout/Cas_utilisation_flexbox
+tags:
+  - CSS
+  - Guide
+  - Intermediate
+  - flexbox
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox
+---
+<p>{{CSSRef}}</p>
+
+<p class="summary">Dans ce guide, nous verrons quels sont les cas d'utilisation classiques pour les boîtes flexibles et lorsque cette méthode est plus pertinente qu'une autre méthode de disposition.</p>
+
+<h2 id="Pourquoi_choisir_les_boîtes_flexibles">Pourquoi choisir les boîtes flexibles ?</h2>
+
+<p>Dans un monde où la compatibilité entre navigateurs serait un lointain souvenir, on pourrait choisir d'utiliser les boîtes flexibles lorsqu'on souhaite organiser un ensemble d'élément dans une direction ou dans une autre. Lorsqu'on place les éléments, on souhaite contrôler les dimensions de ces éléments dans cette direction ou contrôler l'espacement ainsi créé entre les éléments. C'est ce pourquoi les boîtes flexibles ont été conçues. Vous pouvez approfondir les différences entre les boîtes flexibles et la disposition en grille CSS avec <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Liens_entre_flexbox_et_les_autres_dispositions">l'article sur les relations entre <em>flexbox</em> et les autres méthodes de disposition</a> où nous voyons comment s'inscrivent les boîtes flexibles dans le paysage de CSS.</p>
+
+<p>Dans la réalité, on utilise souvent les boîtes flexibles pour créer des organisations qu'il serait plus pertinent de construire avec une disposition en grille et pour lesquelles les boîtes flexibles sont une méthode de recours et offrent une certaine capacité d'alignement. Sur ce deuxième aspect, cela pourra évoluer lorsque l'alignement des boîtes sera implémenté dans la disposition en bloc. Dans ce guide, nous verrons quels sont les cas classiques où on utilise les boîtes flexibles aujourd'hui.</p>
+
+<h2 id="La_navigation">La navigation</h2>
+
+<p>Un motif souvent utilisé pour la navigation consiste à avoir une liste d'objets qui forment une barre horizontale. Ce motif, bien que simple, était plutôt compliqué à obtenir avant l'apparition des boîtes flexibles. C'est l'exemple le plus simple pour les boîtes flexibles et cela constitue un cas d'utilisation idéal.</p>
+
+<p>Lorsqu'on a un ensemble d'objets qu'on souhaite organiser horizontalement, on peut avoir plus d'espace que nécessaire. Il faut décider comment utiliser cet espace : on peut afficher cet espace entre les éléments afin de les espacer ou bien agrandir les objets. Dans ce dernier cas, il nous faut une méthode pour permettre aux objets de grandir et d'occuper cet espace.</p>
+
+<h3 id="L'espace_distribué_en_dehors_des_éléments">L'espace distribué en dehors des éléments</h3>
+
+<p>Pour répartir l'espace entre les éléments ou autour d'eux, on pourra utiliser les propriétés d'alignement des boîtes flexibles et la propriété {{cssxref("justify-content")}}. Vous pouvez approfondir cette propriété avec le guide <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible">Aligner des objets dans un conteneur flexible</a>, qui décrit comment aligner des objets sur l'axe principal.</p>
+
+<p>Dans l'exemple qui suit, on affiche les éléments en utilisant leur taille naturelle et on écrit <code>justify-content: space-between</code> afin de répartir l'espace équitablement entre chaque élément. Cette répartition de l'espace peut être modifiée en utilisant la valeur <code>space-around</code> ou, lorsqu'elle est prise en charge, la valeur <code>space-evenly</code>. On peut également utiliser <code>flex-start</code> afin de placer l'espace après les éléments ou encore <code>flex-end</code> pour placer l'espace avant les éléments voire <code>center</code> afin de centrer les éléments.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation.html", '100%', 550)}}</p>
+
+<h3 id="L'espace_distribué_au_sein_des_éléments">L'espace distribué au sein des éléments</h3>
+
+<p>On pourrait aussi répartir cet espace disponible afin d'agrandir les éléments plutôt que de les espacer. Dans ce cas, on utilisera les propriétés  {{cssxref("flex")}} afin de permettre aux éléments de grandir/rétrécir proportionnellement les uns aux autres, comme nous avons pu le détailler dans <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal">Contrôler les proportions des éléments flexibles le long de l'axe principal</a>.</p>
+
+<p>Si on souhaite que tous les éléments de la barre aient la même largeur, on utilisera <code>flex: auto</code> qui correspond à la notation raccourcie de <code>flex: 1 1 auto</code> — tous les objets grandissent et rétrécissent de la même façon à partir d'une taille de base automatique. Cela signifie que le plus grand élément occupera plus d'espace.</p>
+
+<p>Dans l'exemple qui suit, vous pouvez modifier <code>flex: auto</code> pour utiliser <code>flex: 1</code> qui correspond à la notation raccourcie de <code>flex: 1 1 0</code> et qui permet d'avoir la même largeur pour chaque élément, car la base (<code>flex-basis</code>) vaut 0 et permet de répartir l'intégralité de l'espace de façon équitable.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation-flex.html", '100%', 550)}}</p>
+
+<h2 id="La_navigation_séparée">La navigation séparée</h2>
+
+<p>Une autre façon d'aligner les éléments le long de l'axe principal consiste à utiliser des marges automatiques. Cela permet d'obtenir une barre où une partie des éléments sont alignés à gauche alors qu'un second groupe est aligné à droite.</p>
+
+<p>Dans l'exemple qui suit, on utilise la technique des marges automatiques détaillée dans <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible#Utiliser_les_marges_automatiques_pour_aligner_sur_l'axe_principal">Utiliser les marges automatiques pour l'alignement sur l'axe principal</a>. Les éléments sont alignés le long de l'axe principal avec <code>flex-start</code>, ce qui correspond au comportement initial (par défaut) des boîtes flexibles, et on affecte une marge automatique à gauche pour les éléments qu'on souhaite aligner à droite. Dans le code de l'exemple, vous pouvez déplacer la classe pour l'appliquer sur un autre élément afin de voir comment la césure se déplace.</p>
+
+<p>Dans cet exemple, on utilise également des marges sur les éléments flexibles afin de créer des gouttières entre les éléments ainsi qu'une marge négative sur le conteneur afin que les éléments aux extrémités soient bien alignés sur les bords gauche et droit. Tant que les propriétés <code>gap</code> de la spécification sur l'alignement des boîtes (<em>Box Alignment</em>) ne sont pas implémentées pour les boîtes flexibles, il nous faut utiliser les marges de cette façon si on souhaite créer une gouttière entre les éléments.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/split-navigation.html", '100%', 550)}}</p>
+
+<h2 id="Centrer_des_éléments">Centrer des éléments</h2>
+
+<p>Avant l'apparition des boîtes flexibles, une blague récurrente consistait à dire qu'un des défis majeur sur le Web était le centrage vertical des éléments. Disposant désormais des propriétés d'alignement pour les boîtes flexibles, surmonter ce défi est beaucoup plus accessible. Nous allons le voir dans l'exemple suivant.</p>
+
+<p>Vous pouvez manipuler les propriétés d'alignement pour aligner les objets au début avec <code>flex-start</code> ou à la fin avec <code>flex-end</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/center.html", '100%', 700)}}</p>
+
+<p>À l'avenir, il ne sera peut-être plus nécessaire d'utiliser un conteneur flexible afin de centrer un seul élément, car les propriétés d'alignement des boîtes auront également été implémentées pour la disposition en bloc. Mais aujourd'hui, si on souhaite correctement centrer un objet dans un centre, il faut utiliser les boîtes flexibles. On procède comme dans l'exemple ci-avant : on modifie le conteneur afin que ce soit un conteneur flexible puis on utilise la propriété <code>align-items</code> sur l'élément parent ou bien on cible l'élément voulu avec <code>align-self</code>.</p>
+
+<h2 id="Une_disposition_en_cartes_avec_un_pied_ajustable">Une disposition en cartes avec un pied ajustable</h2>
+
+<p>Qu'on utilise les boîtes flexibles ou les grilles CSS afin d'organiser une liste de cartes, ces méthodes fonctionnent uniquement sur les éléments fils directs du conteneur flexible ou du conteneur de grille. Cela signifie que si on dispose d'une quantité de contenu variable, la carte s'étirera sur toute la hauteur de la grille ou sur toute la hauteur du conteneur flexible. Tout le contenu à l'intérieur utilise une disposition en bloc classique qui signifie que le pied de page d'une carte avec moins de contenu sera plus haut que celui d'une carte disposant de plus de contenu pour lequel le pied est bien aligné en bas de la carte.</p>
+
+<p><img alt="Deux composants &quot;carte&quot; montrant que l'élément contenant le texte ne s'étire pas." src="https://mdn.mozillademos.org/files/15669/flex-cards.png" style="height: 626px; width: 964px;"></p>
+
+<p>On peut résoudre ce problème avec les boîtes flexibles. Pour commencer, on transforme la carte en conteneur flexible avec {{cssxref("flex-direction")}}<code>: column</code>. Ensuite, on affecte un coefficient <code>flex: 1</code> à la zone du contenu (ce qui correspond à la notation raccourcie <code>flex: 1 1 0</code>) : l'élément pourra s'étirer ou se rétrécir avec une base <code>0</code>. Comme c'est le seul élément de la carte qui peut grandir, il occupera tout l'espace encore disponible dans le conteneur flexible et poussera le pied en bas de carte. Dans l'exemple qui suit, si on retire la propriété <code>flex</code>, on peut voir le pied remonter pour être inscrit directement après le contenu.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/cards.html", '100%', 800)}}</p>
+
+<h2 id="Les_objets_média">Les objets média</h2>
+
+<p>Un objet média est un motif classique en <em>design</em> web. Dans ce motif, on a une image ou un autre média d'un côté et le texte associé à droite. Idéalement, on souhaite pouvoir inverser les deux composants et déplacer l'image à droite.</p>
+
+<p>On peut voir ce motif utilisé avec les commentaires, les endroits où on affiche des images et leur description. Avec les boîtes flexibles, on peut dimensionner l'objet média en fonction des dimensions de l'image et occuper le reste de l'espace avec le contenu textuel.</p>
+
+<p>Dans l'exemple suivant, on utilise les propriétés d'alignement des objets sur l'axe secondaire avec <code>flex-start</code> puis on définit <code>.content</code> avec <code>flex: 1</code>. Comme vu dans l'exemple précédent, <code>flex: 1</code> signifie que cette partie de la carte peut grandir.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media.html", '100%', 600)}}</p>
+
+<p>Vous pouvez ici essayer d'appliquer les différentes contraintes relatives à votre conception.</p>
+
+<p>Pour empêcher l'image de devenir trop large, on pourra ajouter la propriété {{cssxref("max-width")}} à l'image. Cette dimension de l'objet utilisant les valeurs initiales des propriétés flexibles, elle pourra rétrécir mais pas grandir et elle utilisera <code>auto</code> comme valeur pour <code>flex-basis</code>. Toute largeur {{cssxref("width")}} ou <code>max-width</code> appliquée à l'image sera utilisée comme mesure pour <code>flex-basis</code>.</p>
+
+<pre class="brush: css">.image img {
+  max-width: 100px;
+}
+</pre>
+
+<p>On peut également permettre aux deux côtés de grandir/rétrécir proportionnellement. Si on paramètre les deux côtés avec <code>flex: 1</code>, ils grandiront/rétréciront à partir d'une base {{cssxref("flex-basis")}} égale à 0 et on obtiendra alors deux colonnes de même taille. Si on souhaite plutôt utiliser la taille du contenu comme base, on pourra utiliser <code>flex: auto</code> et les deux côtés grandiront/rétréciront à partir de la taille de leur contenu ou de toute taille qui leur serait explicitement appliquée en CSS (par exemple une largeur sur l'image).</p>
+
+<pre class="brush: css">.media .content {
+  flex: 1;
+  padding: 10px;
+}
+
+.image {
+  flex: 1;
+}</pre>
+
+<p>On pourrait aussi utiliser différents coefficients {{cssxref("flex-grow")}} pour chaque côté. Utiliser <code>flex: 1</code> pour le côté avec l'image et <code>flex: 3</code> pour le côté avec la description signifierait qu'ils partiraient tous les deux avec une base <code>flex-basis</code>  <code>0</code> et que l'espace serait distribué dans des proportions différentes correspondantes aux valeurs de <code>flex-grow</code>. Les propriétés flexibles que nous utilisons ici sont décrites en détail dans le guide <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal">Contrôler les proportions des éléments flexibles le long de l'axe principal</a>.</p>
+
+<pre class="brush: css">.media .content {
+  flex: 3;
+  padding: 10px;
+}
+
+.image {
+  flex: 1;
+}</pre>
+
+<h3 id="Inverser_la_position_de_l'objet_média">Inverser la position de l'objet média</h3>
+
+<p>Si on souhaite échanger la position de l'image dans l'objet média pour l'afficher à droite avec le contenu textuel à gauche, on pourra utiliser la propriété <code>flex-direction</code> avec la valeur <code>row-reverse</code>. L'objet média est désormais affiché dans l'autre sens. Dans l'exemple, cela s'obtient grâce à l'ajout de la classe <code>flipped</code> (en plus de la classe existante <code>.media</code>). Vous pouvez donc annuler cet effet en retirant la classe dans le code HTML.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media-flipped.html", '100%', 650)}}</p>
+
+<h2 id="Les_contrôles_de_formulaire">Les contrôles de formulaire</h2>
+
+<p>Les boîtes flexibles s'avèrent particulièrement utiles losqu'on met en forme des contrôles de formulaires. Les formulaires sont généralement constitués de nombreux éléments qu'on souhaite aligner les uns avec les autres. Un motif fréquent se compose d'un élément {{htmlelement("input")}} associé à un élément  {{htmlelement("button")}} (par exemple un formulaire de recherche ou un champ où on souhaite qu'un visiteur saisisse une adresse électronique).</p>
+
+<p>Les boîtes flexibles facilitent la construction de tels motifs. Dans l'exemple suivant, on enveloppe l'élément <code>&lt;button&gt;</code> et l'élément <code>&lt;input&gt;</code> dans un conteneur auquel on ajoute une bordure et pour lequel on a <code>display: flex</code>. On utilise ensuite les propriétés flexibles afin de permettre à l'élément <code>&lt;input&gt;</code> de grandir et de conserver la même taille pour le bouton. On a donc une paire d'éléments pour laquelle la zone de saisie s'ajuste en fonction de l'espace disponible.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/input-button.html", '100%', 550)}}</p>
+
+<p>On pourrait ajouter un libellé ou une icône à gauche aussi facilement qu'on a ajouté un bouton à droite. Dans la version suivante, on ajoute un libellé et d'autres règles de mise en forme pour l'arrière-plan. Il n'est pas nécessaire de modifier le reste de la disposition. Le champ de saisie adaptable possède désormais moins d'espace mais continue à consommer l'espace disponible après le placement des deux autres objets.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/label-input-button.html", '100%', 550)}}</p>
+
+<p>De tels motifs facilitent la création d'une bibliothèque d'éléments de formulaires pour les différents documents d'un projet. On tire parti de la flexibilité des boîtes flexibles en mélangeant les éléments qui peuvent s'étendre et ceux qui restent à une taille constante.</p>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>En explorant les motifs de ce guide, nous avons vu certaines des meilleures façons d'utiliser les boîtes flexibles pour obtenir le résultat souhaité. La plupart du temps, plusieurs choix s'offrent à nous. Mélanger des éléments qui peuvent s'étirer avec d'autres qui ne le peuvent pas, utiliser la taille du contenu comme point de départ ou encore permettre aux boîtes flexibles de gérer tout l'espace.</p>
+
+<p>Pensez à la meilleure façon de présenter le contenu dont vous disposez puis voyez comment les boîtes flexibles ou les autres méthodes de disposition peuvent vous aider à obtenir cette présentation.</p>
diff --git a/files/fr/web/css/css_flexible_box_layout/concepts_de_base_flexbox/index.html b/files/fr/web/css/css_flexible_box_layout/concepts_de_base_flexbox/index.html
new file mode 100644
index 0000000000..dadea30a48
--- /dev/null
+++ b/files/fr/web/css/css_flexible_box_layout/concepts_de_base_flexbox/index.html
@@ -0,0 +1,235 @@
+---
+title: Les concepts de base pour flexbox
+slug: Web/CSS/CSS_Flexible_Box_Layout/Concepts_de_base_flexbox
+tags:
+  - Beginner
+  - CSS
+  - Débutant
+  - Guide
+  - flexbox
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Le module des boîtes flexibles, aussi appelé « <em>flexbox</em> », a été conçu comme un modèle de disposition unidimensionnel et comme une méthode permettant de distribuer l'espace entre des objets d'une interface ainsi que de les aligner. Dans cet article, nous verrons les fonctionnalités principales des <em>flexbox</em> que nous approfondirons ensuite dans d'autres articles.</p>
+
+<p>Lorsqu'on décrit les boîtes flexibles comme une méthode de disposition unidimensionnelle, on indique en fait que les <em>flexbox</em> gèrent une seule dimension à la fois : une ligne ou une colonne. Ce modèle est à comparer au modèle bidimensionnel de <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">la disposition en grille (CSS Grid)</a> qui contrôle à la fois les colonnes et les lignes.</p>
+
+<h2 id="Les_deux_axes_des_boîtes_flexibles">Les deux axes des boîtes flexibles</h2>
+
+<p>Lorsqu'on travaille avec les boîtes flexibles, deux axes interviennent : l'axe principal (<em>main axis</em> en anglais) et l'axe secondaire (<em>cross axis</em> en anglais). L'axe principal est défini par la propriété {{cssxref("flex-direction")}} et l'axe secondaire est l'axe qui lui est perpendiculaire. Tout ce que nous manipulons avec les boîtes flexibles fera référence à ces axes.</p>
+
+<h3 id="L'axe_principal">L'axe principal</h3>
+
+<p>L'axe principal est défini par la propriété <code>flex-direction</code> qui peut prendre quatre valeurs :</p>
+
+<ul>
+ <li><code>row</code></li>
+ <li><code>row-reverse</code></li>
+ <li><code>column</code></li>
+ <li><code>column-reverse</code></li>
+</ul>
+
+<p>Si on choisit la valeur <code>row</code> ou <code>row-reverse</code>, l'axe principal sera aligné avec la direction « en ligne » (<em>inline</em> direction) (c'est la direction logique qui suit le sens d'écriture du document).</p>
+
+<p><img alt="If flex-direction is set to row the main axis runs along the row in the inline direction." src="https://mdn.mozillademos.org/files/15614/Basics1.png" style="display: block; height: 152px; margin: 0px auto; width: 522px;"></p>
+
+<p>Si on choisit la valeur <code>column</code> ou <code>column-reverse</code>, l'axe principal suivra la direction de bloc (<em>block direction</em>) et progressera le long de l'axe perpendiculaire au sens d'écriture.</p>
+
+<p><img alt="If flex-direction is set to column the main axis runs in the block direction." src="https://mdn.mozillademos.org/files/15615/Basics2.png" style="display: block; height: 227px; margin: 0px auto; width: 709px;"></p>
+
+<h3 id="L'axe_secondaire_(cross_axis)">L'axe secondaire (<em>cross axis</em>)</h3>
+
+<p>L'axe secondaire est perpendiculaire à l'axe principal. Ainsi, si <code>flex-direction</code> vaut <code>row</code> ou <code>row-reverse</code>, l'axe secondaire suivra l'axe des colonnes.</p>
+
+<p><img alt="If flex-direction is set to row then the cross axis runs in the block direction." src="https://mdn.mozillademos.org/files/15616/Basics3.png" style="display: block; height: 125px; margin: 0px auto; width: 666px;"></p>
+
+<p>Si l'axe principale est <code>column</code> ou <code>column-reverse</code>, l'axe secondaire suivra celui des lignes (horizontales).</p>
+
+<p><img alt="If flex-direction is set to column then the cross axis runs in the inline direction." src="https://mdn.mozillademos.org/files/15617/Basics4.png" style="display: block; height: 244px; margin: 0px auto; width: 523px;"></p>
+
+<p>Comprendre les liens entre les différents axes est crucial lorsqu'on commence à aligner/justifier des éléments flexibles sur un axe ou l'autre grâce aux fonctionnalités et propriétés des boîtes flexibles.</p>
+
+<h2 id="Les_lignes_de_début_et_de_fin">Les lignes de début et de fin</h2>
+
+<p>Une autre notion fondamentale est l'absence d'hypothèse sur le mode d'écriture du document. Pour les modèles de disposition précédents, CSS était fortement orienté vers les modes d'écritures de droite à gauche et de gauche à droite. Les modèles de disposition modernes permettent de gérer naturellement les différents modes d'écriture et ne reposent plus sur l'idée qu'une ligne de texte commencera en haut à gauche d'un document puis progressera vers la droite et que chaque nouvelle ligne apparaîtra sous la précédente.</p>
+
+<p>Nous verrons plus tard les détails des relations entre les spécifications des boîtes flexibles et celles des modes d'écriture. Toutefois, décrivons ici pourquoi on ne parlera plus de gauche ou de droite et de bas ou de haut lorsque nous évoquerons la direction dans laquelle s'organisent les éléments flexibles.</p>
+
+<p>Si <code>flex-direction</code> vaut <code>row</code> et que nous travaillons sur un document écrit en français, la ligne de début de l'axe principal sera située à gauche et la ligne de fin sera située à droite.</p>
+
+<p><img alt="Working in English the start edge is on the left." src="https://mdn.mozillademos.org/files/15618/Basics5.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p>
+
+<p>Si on travaille sur un document écrit dans une langue arabe, la ligne de début de l'axe principal sera à droite et la ligne de fin à gauche.</p>
+
+<p><img alt="The start edge in a RTL language is on the right." src="https://mdn.mozillademos.org/files/15619/Basics6.png" style="display: block; height: 152px; margin: 0px auto; width: 634px;"></p>
+
+<p>Dans les deux cas, la ligne de début de l'axe secondaire est située en haut et la ligne de fin de cet axe est située en bas car ces deux langues sont écrites horizontalement.</p>
+
+<p>Nous verrons qu'au fur et à mesure, il devient naturel de parler de début et de fin plutôt que de gauche et de droite. De plus, ce niveau d'abstraction sera utile pour comprendre d'autres méthodes de disposition comme les grilles CSS car il y est également utilisé.</p>
+
+<h2 id="Le_conteneur_flexible">Le conteneur flexible</h2>
+
+<p>La zone d'un document sujette au modèle de disposition <em>flexbox</em> est appelée un <strong>conteneur flexible</strong>. Pour créer un conteneur flexible, il faut que la valeur de la propriété {{cssxref("display")}} de cet élément soit <code>flex</code> ou <code>inline-flex</code>. Dès que c'est le cas, les éléments « enfants » directs deviennent des <strong>éléments flexibles (<em>flex items</em>)</strong>. Comme pour les autres propriétés CSS, certaines valeurs initiales sont définies, aussi, lorsqu'on crée un conteneur flexible, tous les éléments flexibles se comporteront de la façon suivante :</p>
+
+<ul>
+ <li>Les éléments s'afficheront en lignes horizontales (la valeur par défaut de la propriété <code>flex-direction</code> est <code>row</code>).</li>
+ <li>Les éléments seront placés à partir de la ligne de début de l'axe principal.</li>
+ <li>Les éléments ne s'étireront pas le long de l'axe principal mais pourront se rétrécir si nécessaire.</li>
+ <li>Les éléments seront étirés le long de l'axe secondaire afin d'occuper l'espace sur cet axe.</li>
+ <li>La propriété {{cssxref("flex-basis")}} vaut <code>auto</code>.</li>
+ <li>La propriété {{cssxref("flex-wrap")}} vaut <code>nowrap</code>.</li>
+</ul>
+
+<p>Autrement dit, tous les éléments formeront une ligne en utilisant la taille de leur contenu. S'il y a plus d'éléments que le conteneur peut en contenir, ils ne formeront pas une nouvelle ligne mais dépasseront du conteneur. Si certains éléments sont plus grands (selon l'axe secondaire) que d'autres, tous les éléments s'étireront sur l'axe secondaire afin d'avoir la plus grande taille.</p>
+
+<p>Vous pouvez étudier l'exemple qui suit pour voir le résultat obtenu. N'hésitez pa à éditer les éléments ou à en ajouter d'autres pour tester ce comportement initial.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 510)}} </p>
+
+<h3 id="Modifier_flex-direction">Modifier <code>flex-direction</code></h3>
+
+<p>En ajoutant la propriété {{cssxref("flex-direction")}} au conteneur flexible, on peut modifier la direction dans laquelle les éléments flexibles seront affichés. En utilisant <code>flex-direction: row-reverse</code>, les éléments seront affichés le long d'une ligne horizontale mais les lignes de début et de fin seront inversées.</p>
+
+<p>Si on utilise <code>column</code> comme valeur de <code>flex-direction</code>, l'axe principal est modifié et les éléments sont affichés sur une colonne. Si on utilise <code>column-reverse</code>, les lignes de début et de fin seront également inversées.</p>
+
+<p>Dans l'exemple suivant, on utilise <code>flex-direction</code> avec la valeur <code>row-reverse</code>. Vous pouvez utiliser d'autres valeurs — <code>row</code>, <code>column</code> et <code>column-reverse</code> — afin de voir le résultat produit.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}</p>
+
+<h2 id="Créer_un_conteneur_flexible_sur_plusieurs_lignes_avec_flex-wrap">Créer un conteneur flexible sur plusieurs lignes avec <code>flex-wrap</code></h2>
+
+<p>Bien que le modèle des boîtes flexibles soit organisé sur une dimension, il est possible d'organiser les éléments flexibles afin que ceux-ci s'étendent sur plusieurs lignes ou colonnes (plutôt que de dépasser). Lorsque c'est le cas, chaque nouvelle ligne ou colonne agit comme un nouveau conteneur flexible. La distribution de l'espace sur cette ligne/colonne ne tiendra pas compte des autres lignes/colonnes.</p>
+
+<p>Pour obtenir ce « passage à la ligne », on ajoute la propriété {{cssxref("flex-wrap")}} avec la valeur <code>wrap</code>. Désormais, si les éléments sont trop grands pour tenir sur une seule ligne, ils passeront sur une autre ligne. L'exemple suivant illustre le résultat obtenu lorsque la somme des tailles des éléments dépasse celle du conteneur. Avec <code>flex-wrap</code> qui vaut <code>wrap</code>, les éléments passent à la ligne. Si on modifie la valeur avec <code>nowrap</code> (qui correspond à la valeur initiale), les éléments seront rétrécis pour tenir sur une ligne (car les valeurs initiales des boîtes flexibles permettent aux éléments d'être ainsi redimensionnés). Si on utilise <code>nowrap</code> et que les éléments ne peuvent pas être redimensionnés (ou pas suffisamment), cela causera un dépassement.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}}</p>
+
+<p>Pour approfondir ces notions, vous pouvez consulter l'article <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Ma%C3%AEtriser_passage_%C3%A0_la_ligne_des_%C3%A9l%C3%A9ments_flexibles">Maîtriser le passage à la ligne des éléments flexibles</a>.</p>
+
+<h2 id="La_propriété_raccourcie_flex-flow">La propriété raccourcie <code>flex-flow</code></h2>
+
+<p>Il est possible de synthétiser les propriétés <code>flex-direction</code> et <code>flex-wrap</code> avec la propriété raccourcie {{cssxref("flex-flow")}}. La première valeur de cette propriété sera utilisée pour <code>flex-direction</code> et la seconde pour <code>flex-wrap</code>.</p>
+
+<p>Dans l'exemple qui suit, vous pouvez changer les valeurs de <code>flex-direction</code> en utilisant <code>row</code>, <code>row-reverse</code>, <code>column</code> ou <code>column-reverse</code> pour la première et <code>wrap</code> ou <code>nowrap</code> pour la seconde.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}</p>
+
+<h2 id="Les_propriétés_appliquées_aux_éléments_flexibles">Les propriétés appliquées aux éléments flexibles</h2>
+
+<p>Pour mieux contrôler les éléments flexibles, on peut les cibler directement avec trois propriétés :</p>
+
+<ul>
+ <li>{{cssxref("flex-grow")}}</li>
+ <li>{{cssxref("flex-shrink")}}</li>
+ <li>{{cssxref("flex-basis")}}</li>
+</ul>
+
+<p>Nous verrons ici un rapide aperçu de ces propriétés que nous approfondirons dans l'article <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Contr%C3%B4ler_les_proportions_des_bo%C3%AEtes_flexibles_le_long_de_l_axe_principal">Contrôler les proportions des éléments flexibles le long de l'axe principal</a>.</p>
+
+<p>Avant de revenir à ces propriétés, il nous faut définir le concept d'<strong>espace disponible</strong>. Lorsque nous modifierons l'une de ces propriétés, cela modifiera la façon dont l'espace disponible est distribué parmi les éléments. Ce concept est également important lorsqu'on aligne les éléments.</p>
+
+<p>Prenons un conteneur de 500 pixels de large et qui contient trois éléments de 100 pixels de large. Il faut donc 300 pixels pour disposer ces éléments et il reste ainsi 200 pixels d'espace disponible. Si on ne modifie pas les valeurs initiales, l'espace disponible sera placé après le dernier élément.</p>
+
+<p><img alt="This flex container has available space after laying out the items." src="https://mdn.mozillademos.org/files/15620/Basics7.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p>
+
+<p>Si on préfère que les éléments s'étirent pour occuper l'espace restant, il nous faut une méthode pour distribuer cet espace parmi les éléments. C'est le rôle des propriétés <code>flex-</code> qui s'appliquent aux éléments.</p>
+
+<h3 id="La_propriété_flex-basis">La propriété <code>flex-basis</code></h3>
+
+<p>La propriété <code>flex-basis</code> définit la taille de l'élément en termes d'espace occupé. La valeur initiale de cette propriété est <code>auto</code> — dans ce cas, le navigateur analyse si les éléments ont une taille. Dans l'exemple précédent, les éléments mesurent 100 pixels de large et c'est donc cette mesure qui est utilisée pour <code>flex-basis</code>.</p>
+
+<p>Si les éléments n'ont pas de taille définie, c'est la taille du contenu qui est utilisée comme base. C'est pour ça que nous avons simplement déclaré <code>display: flex</code> sur l'élément parent afin de créer des éléments flexibles (qui prennent alors tout l'espace nécessaire à leur contenu).</p>
+
+<h3 id="La_propriété_flex-grow">La propriété <code>flex-grow</code></h3>
+
+<p>La propriété <code>flex-grow</code> est un entier positif qui, lorsqu'elle est définie, permet aux éléments flexibles de s'étendre à partir de la mesure de <code>flex-basis</code>. Ainsi, l'élément sera étiré et occupera l'espace disponible sur cet axe ou une part de cet espace si les autres éléments peuvent s'étendre également.</p>
+
+<p>Si on utilise<code>flex-grow: 1</code> pour les différents éléments de l'exemple précédent, l'espace disponible sera alors partagé de façon égale entre les éléments qui seront alors étirés pour occuper l'ensemble du conteneur le long de l'axe principal.</p>
+
+<p>La propriété <code>flex-grow</code> permet de répartir l'espace disponible en « parts ». Si, pour le premier élément, on indique <code>flex-grow</code> avec une valeur de 2 et, pour les autres éléments, <code>flex-grow</code> avec une valeur de 1, deux « parts » de l'espace disponible seront données au premier élément (il recevra donc 100 pixels parmi les 200 pixels restants) et une part sera fournie à chacun des autres éléments (soit 50 pixels chacun parmi les 200 pixels restants).</p>
+
+<h3 id="La_propriété_flex-shrink">La propriété <code>flex-shrink</code></h3>
+
+<p>La propriété <code>flex-grow</code> permet de gérer la façon dont l'espace est ajouté sur l'axe principal. La propriété <code>flex-shrink</code> permet quant à elle de contrôler la façon dont l'espace est réduit. S'il n'y a pas suffisamment d'espace dans le conteneur pour disposer les éléments et que <code>flex-shrink</code> est un entier positif, l'élément peut alors devenir plus petit que la taille définie par <code>flex-basis</code>. De façon analogue à <code>flex-grow</code>, il est possible d'affecter différents coefficients aux différents éléments afin que ceux-ci rétrécissent plus fortement que d'autres. Plus la valeur de <code>flex-shrink</code> sera élevée, plus l'élément ciblé rétrécira (si les éléments voisins ont une valeur de <code>flex-shrink</code> plus faibles).</p>
+
+<p>La taille minimale de l'élément sera prise en compte lors du rétrécissement. Cela signifie que <code>flex-shrink</code> peut être moins cohérent que <code>flex-grow</code> selon les cas aux limites. Nous verrons plus en détails comment cet algorithme fonctionne dans l'article Contrôler les proportions des éléments le long de l'axe principal.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Les valeurs de <code>flex-grow</code> et <code>flex-shrink</code> sont des proportions. Autrement dit, si tous les éléments ont <code>flex: 1 1 200px</code> et qu'on souhaite qu'un d'eux grandissent deux fois plus, on utiliserait <code>flex: 2 1 200px</code> pour cet élément. Mais avoir <code>flex: 10 1 200px</code> d'une part et <code>flex: 20 1 200px</code> d'autre part fonctionnerait exactement de la même façon.</p>
+</div>
+
+<h3 id="La_propriété_raccourcie_flex_et_les_valeurs_synthétiques">La propriété raccourcie <code>flex</code> et les valeurs synthétiques</h3>
+
+<p>On voit rarement <code>flex-grow</code>, <code>flex-shrink</code> et <code>flex-basis</code> utilisées individuellement mais plutôt combinées avec la propriété raccourcie {{cssxref("flex")}}. La propriété raccourcie <code>flex</code> permet de définir les valeurs de cette propriété dans cet ordre : <code>flex-grow</code>, <code>flex-shrink</code>, <code>flex-basis</code>.</p>
+
+<p>L'exemple suit vous permet de tester différentes valeurs pour <code>flex</code>. La première valeur est <code>flex-grow</code> et un coefficient positif permettra à l'élément de grandir, la deuxième valeur est <code>flex-shrink</code> et un coefficient positif permettra de rétrécir l'élément s'il dépasse du conteneur sur l'axe principal. Enfin, la troisième valeur sert à <code>flex-basis</code> qui indique la taille de base à partir de laquelle l'élément sera étendu ou rétréci.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 400)}}</p>
+
+<p>Cette propriété permet également d'utiliser des valeurs synthétiques qui couvrent la majorité des scénarios. Vous verrez souvent ces valeurs utilisées dans les tutoriels et, dans de nombreux cas, celles-ci suffiront :</p>
+
+<ul>
+ <li><code>flex: initial</code></li>
+ <li><code>flex: auto</code></li>
+ <li><code>flex: none</code></li>
+ <li><code>flex: &lt;nombre-positif&gt;</code></li>
+</ul>
+
+<p>Avec <code>flex: initial</code>, les éléments récupèrent les valeurs initiales pour les différentes propriétés du modèle de boîte flexible. Cette valeur permettra d'obtenir le même comportement que <code>flex: 0 1 auto</code>. Ici, <code>flex-grow</code> vaut 0 et les éléments ne s'agrandiront pas au-delà de la taille <code>flex-basis</code>. <code>flex-shrink</code> vaut 1 et les éléments pourront rétrécir si besoin plutôt que de dépasser du conteneur. <code>flex-basis</code> vaut <code>auto</code> et les éléments utiliseront donc la taille qui leur a été définie sur l'axe principale ou la taille déterminée à partir du contenu.</p>
+
+<p>Avec <code>flex: auto</code>, on obtient le même comportement que <code>flex: 1 1 auto</code>, la seule différence avec <code>flex:initial</code> est que les éléments peuvent s'étirer si besoin.</p>
+
+<p>Avec <code>flex: none</code>, les éléments ne seront pas flexibles. Cette valeur est synonyme de <code>flex: 0 0 auto</code>. Les éléments ne peuvent ni s'agrandir, ni se rétrécir mais seront disposés avec <code>flex-basis: auto</code>.</p>
+
+<p>On voit aussi souvent des valeurs comme <code>flex: 1</code> ou <code>flex: 2</code>, etc. Cela correspond à <code>flex: 1 1 0</code>. Les éléments peuvent s'agrandir ou bien rétrécir à partir d'une taille de base égale à 0.</p>
+
+<p>Vous pouvez utiliser ces valeurs synthétiques dans l'exemple suivant :</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 510)}}</p>
+
+<h2 id="Alignement_justification_et_distribution_de_l'espace_disponible_entre_les_éléments">Alignement, justification et distribution de l'espace disponible entre les éléments</h2>
+
+<p>Une fonctionnalité majeure des boîtes flexibles est de permettre l'alignement et la justification des éléments le long des axes principal et secondaire tout en distribuant l'espace entre les éléments flexibles.</p>
+
+<h3 id="align-items"><code>align-items</code></h3>
+
+<p>La propriété {{cssxref("align-items")}} permet d'aligner les éléments le long de l'axe secondaire.</p>
+
+<p>La valeur initiale de cette propriété est <code>stretch</code>, ce qui explique pourquoi, par défaut, les éléments flexibles sont étirés sur l'axe perpendiculaire afin d'avoir la même taille que l'élément le plus grand dans cet axe (qui définit la taille du conteneur sur cet axe).</p>
+
+<p>On peut également utiliser la valeur <code>flex-start</code> afin que les éléments soient alignés sur la ligne de début de l'axe secondaire, la valeur <code>flex-end</code> afin que les éléments soient alignés sur la ligne de fin de l'axe secondaire ou bien <code>center</code> pour les aligner au centre. Vous pouvez utiliser les valeurs suivantes dans l'exemple (on a donné un hauteur fixe au conteneur afin de pouvoir observer la façon dont les éléments se déplacent à l'intérieur) :</p>
+
+<ul>
+ <li><code>stretch</code></li>
+ <li><code>flex-start</code></li>
+ <li><code>flex-end</code></li>
+ <li><code>center</code></li>
+</ul>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}}</p>
+
+<h3 id="justify-content"><code>justify-content</code></h3>
+
+<p>La propriété {{cssxref("justify-content")}} est utilisée afin d'aligner les éléments le long de l'axe principal dans la direction définie par <code>flex-direction</code>. La valeur initiale est <code>flex-start</code> qui place les éléments à partir de la ligne de début du conteneur sur l'axe principal. La valeur <code>flex-end</code> permet de les placer vers la fin et la valeur <code>center</code> permet de les centrer le long de l'axe principal.</p>
+
+<p>On peut également utiliser la valeur <code>space-between</code> afin de répartir l'espace disponible de façon égale entre chaque élément. Si on souhaite que l'espace soit également réparti autour des éléments, y compris au début et à la fin, on pourra utiliser la valeur <code>space-around</code> (il y aura alors un demi espace à la fin et au début). Si on souhaite que l'espace soit également réparti et qu'il y ait un espace entier au début et à la fin, on utilisera la valeur <code>space-evenly</code>.</p>
+
+<p>Vous pouvez essayer les valeurs suivantes dans l'exemple suivant :</p>
+
+<ul>
+ <li><code>flex-start</code></li>
+ <li><code>flex-end</code></li>
+ <li><code>center</code></li>
+ <li><code>space-around</code></li>
+ <li><code>space-between</code></li>
+ <li><code>space-evenly</code></li>
+</ul>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}}</p>
+
+<p>Dans l'article <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_%C3%A9l%C3%A9ments_dans_un_conteneur_flexible">Aligner des éléments dans un conteneur flexible</a>, nous verrons plus en détails comment ces propriétés fonctionnent. Ces premiers exemples permettent toutefois de comprendre comment utiliser ces propriétés sur une majorité de cas.</p>
+
+<h2 id="Prochaines_étapes">Prochaines étapes</h2>
+
+<p>Avec cet article, vous devriez comprendre les différentes fonctionnalités et concepts relatifs aux <em>flexbox</em>. Dans le prochain article, nous verrons <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Liens_entre_flexbox_et_les_autres_dispositions">comment cette spécification s'articule avec les autres modules CSS</a>.</p>
diff --git a/files/fr/web/css/css_flexible_box_layout/contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal/index.html b/files/fr/web/css/css_flexible_box_layout/contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal/index.html
new file mode 100644
index 0000000000..a05bdb1ca2
--- /dev/null
+++ b/files/fr/web/css/css_flexible_box_layout/contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal/index.html
@@ -0,0 +1,200 @@
+---
+title: Contrôler les proportions des boîtes flexibles le long de l'axe principal
+slug: >-
+  Web/CSS/CSS_Flexible_Box_Layout/Contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal
+tags:
+  - Boîtes flexibles
+  - CSS
+  - Flex
+  - Guide
+  - Intermediate
+  - flexbox
+translation_of: >-
+  Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Dans ce guide, nous verrons les trois propriétés appliquées aux éléments flexibles qui permettent de contrôler leurs tailles et flexibilités le long de l'axe principal : {{cssxref("flex-grow")}}, {{cssxref("flex-shrink")}} et {{cssxref("flex-basis")}}. Comprendre le fonctionnement de ces propriétés est primordial pour maîtriser les boîtes flexibles.</p>
+
+<h2 id="Un_premier_aperçu">Un premier aperçu</h2>
+
+<p>Ces trois propriétés contrôlent différents aspects relatifs à la flexibilité des éléments :</p>
+
+<ul>
+ <li><code>flex-grow</code> : quelle proportion de l'espace libre peut-on allouer en supplément à cet élément ?</li>
+ <li><code>flex-shrink</code> : quelle proportion de l'espace peut être retirée à cet élément ?</li>
+ <li><code>flex-basis</code> : quelle est la taille de l'élément avant tout agrandissement/réduction ?</li>
+</ul>
+
+<p>Ces propriétés sont généralement définies via la propriété raccourcie {{cssxref("flex")}}. Le code suivant définira <code>flex-grow</code> avec la valeur <code>2</code>, <code>flex-shrink</code> avec la valeur <code>1</code> et <code>flex-basis</code> avec la valeur <code>auto</code>.</p>
+
+<pre class="brush: css no-line-numbers">.item {
+  flex: 2 1 auto;
+}
+</pre>
+
+<p>Dans l'article sur <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">les concepts de base relatifs aux boîtes flexibles</a>, nous avons pu introduire ces propriétés. Ici, nous les étudierons en profondeur afin de comprendre comment le navigateur les interprète.</p>
+
+<h2 id="Les_concepts_majeurs_relatifs_à_l'axe_principal">Les concepts majeurs relatifs à l'axe principal</h2>
+
+<p>Avant de rentrer dans le détail des propriétés, définissons certains concepts clés qui interviennent lorsqu'on travaille sur les proportions le long de l'axe principal. Ces concepts se basent sur la taille <em>naturelle</em> des éléments flexibles (avant tout redimensionnement) et sur la notion d'espace libre.</p>
+
+<h3 id="Le_dimensionnement_des_objets_flexibles">Le dimensionnement des objets flexibles</h3>
+
+<p>Afin de connaître l'espace disponible pour l'organisation des éléments flexibles, le navigateur doit connaître la taille de l'élément. Comment faire lorsque les éléments ne sont pas dimensionnés avec une largeur ou une hauteur exprimée dans une unité de longueur absolue ?</p>
+
+<p>CSS permet d'utiliser les valeurs {{cssxref('width','min-content','#min-content')}} et  {{cssxref('width','max-content','#max-content')}} — ces mots-clés sont définis <a href="https://drafts.csswg.org/css-sizing-3/#width-height-keywords">dans la spécification CSS pour le dimensionnement intrinsèque et extrinsèque</a> et ces valeurs peuvent être utilisées comme <a href="/fr/docs/Web/CSS/length">unité de longueurs</a>.</p>
+
+<p>Dans l'exemple qui suit, on a deux paragraphes qui contiennent chacun une chaîne de caractères. La largeur du premier paragraphe est <code>min-content</code>. Si le navigateur utilisé prend en charge ce mot-clé, on peut voir que le texte passe à la ligne dès que c'est possible, sans dépasser de la boîte. Autrement dit, la longueur <code>min-content</code> correspond à la taille du plus grand mot du paragraphe.</p>
+
+<p>Dans le second paragraphe, on utilise la valeur <code>max-content</code> et on voit le résultat opposé. Le texte prend autant de place que possible et aucun saut à la ligne supplémentaire n'est introduit. Le texte dépasserait de la boîte si le conteneur était trop étroit.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/min-max-content.html", '100%', 750)}}</p>
+
+<p>Si votre navigateur ne prend pas en charge ces mots-clés, les paragraphes seront affichés normalement. La capture d'écran qui suit illustre le résultat obtenu avec un navigateur compatible :</p>
+
+<p><img alt="Le premier paragraphe est aussi large que le plus long mot qu'il contient alors que le second est étendu sur une seule ligne et dépasse." src="https://mdn.mozillademos.org/files/15658/ratios-size.png" style="display: block; height: 558px; margin: 0px auto; width: 1520px;"></p>
+
+<p>Pour la suite de cet article, gardez à l'esprit l'impact de <code>min-content</code> et <code>max-content</code> lorsque nous verrons les propriétés <code>flex-grow</code> et <code>flex-shrink</code>.</p>
+
+<h3 id="Espace_libre_positif_et_négatif">Espace libre positif et négatif</h3>
+
+<p>Pour étudier ces propriétés, nous devons définir le concept d'<strong>espace libre positif et négatif</strong>. Lorsqu'un conteneur flexible possède un espace libre positif, il dispose de plus d'espace qu'il n'est nécessaire pour afficher les éléments flexibles qu'il contient. Si on a, par exemple, un conteneur dont la largeur mesure 500 pixels, la propriété {{cssxref("flex-direction")}} qui vaut <code>row</code> et trois éléments qui mesurent chacun 100 pixels, il reste alors 200 pixels d'espace libre positif qui pourrait être réparti entre les éléments si on le souhaitait.</p>
+
+<p><img alt="Une image illustrant l'espace restant après que les éléments aient été affichés." src="https://mdn.mozillademos.org/files/15654/Basics7.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p>
+
+<p>L'espace libre négatif est l'espace supplémentaire qui aurait été nécessaire pour contenir tous les éléments à l'intérieur du conteneur flexible. Si on dispose d'un conteneur dont la largeur mesure 500 pixels et trois éléments flexibles dont chacun mesure 200, l'espace total occupé mesure 600 pixels et on a donc 100 pixels d'espace libre négatif. Cet espace pourrait être retiré des éléments afin qu'ils soient contenus dans le conteneur.</p>
+
+<p><img alt="Les objets dépassent du conteneur." src="https://mdn.mozillademos.org/files/15655/ratios1.png" style="display: block; height: 198px; margin: 0px auto; width: 634px;"></p>
+
+<p>C'est cette distribution de l'espace libre qu'il est nécessaire de comprendre afin d'étudier les différentes propriétés relatives aux propriétés flexibles.</p>
+
+<p>Les exemples étudiés par la suite utilisent la propriété {{cssxref("flex-direction")}} avec la valeur <code>row</code>, ce sera donc leur largeur qui sera leur dimension principale. Vous pouvez modifier les exemples afin d'utiliser <code>flex-direction: column</code> (dans ce cas, l'axe principal sera celui des colonnes et la dimension principale sera la hauteur).</p>
+
+<h2 id="La_propriété_flex-basis">La propriété <code>flex-basis</code></h2>
+
+<p>La propriété {{cssxref("flex-basis")}} définit la taille initiale de l'élément flexible avant la répartition de l'espace. La valeur initiale de cette propriété est <code>auto</code>. Si  <code>flex-basis</code> vaut <code>auto</code>, le navigateur vérifie si la taille de l'élément est définie de façon absolue et utilise cette valeur pour <code>flex-basis</code> (par exemple si on indique dans la feuille de style que l'élément mesure 200 pixels, c'est cette mesure qui sera utilisée comme valeur pour <code>flex-basis</code> pour cet élément).</p>
+
+<p>Si la taille initiale de l'élément n'est pas définie de façon absolue, <code>auto</code> correspondra à la taille déterminée automatique. C'est là qu'on comprend mieux l'utilité de <code>min-</code> et <code>max-content</code>, car la boîte flexible utilisera <code>max-content</code> comme valeur pour <code>flex-basis</code>. Dans l'exemple suivant, nous verrons comment en tirer parti.</p>
+
+<p>Dans cet exemple, on crée un ensemble de boîtes inflexibles avec la valeur <code>0</code> pour <code>flex-grow</code> et <code>flex-shrink</code>. On peut voir comment le premier objet, ayant une largeur explicite de 150 pixels, occupe une <code>flex-basis</code> de <code>150px</code> tandis que les deux autres objets qui n'ont pas de largeur sont dimensionnés en fonction de la largeur de leur contenu.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-basis.html", '100%', 500)}}</p>
+
+<p>En plus du mot-clé <code>auto</code>, on peut également utiliser le mot-clé <code>content</code> comme valeur pour <code>flex-basis</code>. Ainsi, <code>flex-basis</code> sera calculée en fonction de la taille du contenu, même s'il y a une largeur explicitement définie sur l'objet. Ce mot-clé est plus récent et est moins largement pris en charge. Toutefois, on peut obtenir le même effet en utilisant le mot-clé <code>auto</code> et en s'assurant que l'objet n'a pas de largeur définie, ainsi, le dimensionnement automatique sera effectué en fonction du contenu.</p>
+
+<p>Si on souhaite que la boîte flexible ignore complètement la taille du contenu lors de la répartition de l'espace, on pourra utiliser <code>flex-basis</code> avec la valeur <code>0</code>. En résumé, cela revient à indiquer que tout l'espace est disponible et peut être réparti proportionnellement. Nous verrons des exemples utilisant cette valeur lorsque nous étudierons <code>flex-grow</code>.</p>
+
+<h2 id="La_propriété_flex-grow">La propriété <code>flex-grow</code></h2>
+
+<p>La propriété {{cssxref("flex-grow")}} définit <strong>le coefficient d'agrandissement flexible</strong>, qui détermine la façon dont l'objet flexible grandira par rapport aux autres objets flexibles du même conteneur lorsque l'espace libre sera distribué.</p>
+
+<p>Si tous les objets possèdent la même valeur pour le coefficient <code>flex-grow</code>, l'espace sera réparti également entre chacun. Dans ce cas, on utilisera généralement la valeur <code>1</code>. Ceci étant dit, on pourrait tout aussi bien utiliser la valeur <code>88</code>, <code>100</code> ou <code>1.2</code> — ce coefficient est un simple ratio. Si le coefficient est le même pour tous les objets et qu'il reste de l'espace libre dans le conteneur, cet espace sera réparti équitablement.</p>
+
+<h3 id="Combiner_flex-grow_et_flex-basis">Combiner <code>flex-grow</code> et <code>flex-basis</code></h3>
+
+<p>Les choses se compliquent lorsque <code>flex-grow</code> et <code>flex-basis</code> interagissent. Prenons un exemple où trois objets flexibles ont chacun des contenus de longueurs différentes et auxquels on applique la règle suivante :</p>
+
+<p><code>flex: 1 1 auto;</code></p>
+
+<p>Dans ce cas, <code>flex-basis</code> vaut <code>auto</code> et les objets n'ont pas de largeur explicite définie : ils sont donc dimensionnés automatiquement. Cela signifie que la boîte flexible utilisera la taille <code>max-content</code> des éléments. Après avoir disposé les objets, il reste de l'espace libre dans le conteneur flexible (ce qui correspond à la zone hachurée de la figure suivante) :</p>
+
+<p><img alt="Une image illustrant l'espace libre positif avec une zone hachurée." src="https://mdn.mozillademos.org/files/15656/ratios2.png" style="display: block; height: 100px; margin: 0px auto; width: 634px;"></p>
+
+<p>On utilise ici une valeur <code>flex-basis</code> égale à la taille du contenu, l'espace disponible qui peut être distribué est donc égal à la taille du conteneur (ici sa largeur) moins la taille des éléments. Cet espace est partagé équitablement entre les différents objets. Ainsi, l'objet le plus grand finira avec une taille plus grande, car sa taille de départ est plus importante bien que la même quantité d'espace restant ait été affectée aux autres objets :</p>
+
+<p><img alt="L'espace positif est réparti entre les éléments." src="https://mdn.mozillademos.org/files/15657/ratios3.png" style="display: block; height: 100px; margin: 0px auto; width: 634px;"></p>
+
+<p>Si on souhaite obtenir trois objets de la même taille alors qu'ils ont des tailles initiales différentes, on pourra utiliser :</p>
+
+<p><code>flex: 1 1 0;</code></p>
+
+<p>Ici, on indique que, lors de la phase de répartition de l'espace, la taille des objets vaut <code>0</code> — tout l'espace peut être utilisé. Or, les trois objets ayant tous le même coefficient <code>flex-grow</code>, ils récupèrent chacun la même quantité d'espace. On obtient donc trois objets flexibles de même largeur.</p>
+
+<p>Vous pouvez modifier le coefficient <code>flex-grow</code> pour le passer de 1 à 0 dans l'exemple qui suit pour observer la façon dont les objets se comportent :</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-grow.html", '100%', 520)}}</p>
+
+<h3 id="Affecter_différents_coefficients_flex-grow_aux_éléments">Affecter différents coefficients <code>flex-grow</code> aux éléments</h3>
+
+<p>Notre compréhension du fonctionnement de <code>flex-grow</code> avec <code>flex-basis</code> nous permet de mieux contrôler chacun des éléments en leur affectant différents coefficients <code>flex-grow</code>. Si on conserve la valeur <code>0</code> pour <code>flex-basis</code> afin que tout l'espace soit distribué, on pourra affecter différentes valeurs de <code>flex-grow</code> afin qu'ils grandissent différemment. Dans l'exemple qui suit, on utilise les valeurs suivantes :</p>
+
+<ul>
+ <li><code>1</code> pour le premier élément</li>
+ <li><code>1</code> pour le deuxième élément</li>
+ <li><code>2</code> pour le troisième</li>
+</ul>
+
+<p>On utilise <code>flex-basis</code> avec la valeur <code>0</code> ce qui signifie que l'espace disponible est réparti de la façon suivante. On additionne les différents facteurs <code>flex-grow</code> puis on divise l'espace libre du conteneur par cette somme (dans notre exemple, elle vaut 4). Ensuite, on répartit l'espace en fonction des différents coefficients individuels : le premier objet récupère une part d'espace, le deuxième en récupère également une et le dernier récupère deux parts. Autrement dit, le troisième objet sera deux fois plus grand que le premier et le deuxième objet.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-grow-ratios.html", '100%', 520)}}</p>
+
+<p>Rappelons qu'on peut utiliser n'importe quelle valeur positive pour ces facteurs. C'est le rapport entre ces différents facteurs qui importe. Vous pouvez aussi bien utiliser des nombres entiers ou des nombres décimaux. Pour tester cela, vous pouvez changer les coefficients précédents afin de plutôt utiliser respectivement <code>.25</code>, <code>.25</code> et <code>.50</code> — vous obtiendrez alors le même résultat.</p>
+
+<h2 id="La_propriété_flex-shrink">La propriété <code>flex-shrink</code></h2>
+
+<p>La propriété {{cssxref("flex-shrink")}} définit <strong>le coefficient de rétrécissement flexible</strong> qui détermine la façon dont l'objet flexible se réduit relatviement aux autres objets du conteneur flexible lorsque l'espace négatif est distribué.</p>
+
+<p>Cette propriété est utilisée lorsque le navigateur calcule les valeurs <code>flex-basis</code> des différents objets flexibles et obtient des valeurs qui dépassent la taille du conteneur flexible. Tant que <code>flex-shrink</code> possède une valeur positive, les éléments pourront rétrécir afin de ne pas dépasser du conteneur.</p>
+
+<p>Ainsi, si <code>flex-grow</code> gère la façon dont on peut ajouter de l'espace disponible, <code>flex-shrink</code> gère la façon dont on retire de l'espace aux boîtes des objets afin qu'ils ne dépassent pas de leur conteneur.</p>
+
+<p>Dans le prochain exemple, on dispose de trois éléments dans le conteneur flexible. Chacun mesure 200 pixels de large dans un conteneur qui mesure 500 pixels de large. Si <code>flex-shrink</code> vaut <code>0</code>, les éléments ne sont pas autorisés à rétrécir et ils dépassent donc de la boîte.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink.html", '100%', 500)}}</p>
+
+<p>En passant la valeur de <code>flex-shrink</code> à <code>1</code>, on peut voir que la taille de chaque élément diminue de la même façon afin que l'ensemble des objets tiennent dans la boîte. Les éléments ont désormais une taille inférieure à leur taille initiale.</p>
+
+<h3 id="Combiner_flex-shrink_et_flex-basis">Combiner <code>flex-shrink</code> et <code>flex-basis</code></h3>
+
+<p>On pourrait dire et penser que <code>flex-shrink</code> fonctionne de la même façon que <code>flex-grow</code>. Toutefois, deux arguments viennent contrecarrer cette analogie.</p>
+
+<p>Le premier, expliqué de façon subtile dans la spécification est la différence de comportement entre <code>flex-shrink</code> et l'espace libre négatif et celui de <code>flex-grow</code> avec l'espace libre positif :</p>
+
+<blockquote>
+<p>“Note : Le coefficient <code>flex-shrink</code> est multiplié par la taille de base (<code>flex-basis</code>) lors de la distribution de l'espace négatif. Ainsi, l'espace négatif est distribué proportionnellement au rétrécissement possible de l'élément. Autrement dit, un petit élément ne sera pas réduit à une taille nulle avant qu'un plus grand élément n'ait été réduit de façon notable.”</p>
+</blockquote>
+
+<p>Le second argument s'explique par l'impossibilité de réduire les petits éléments à une taille nulle lors de la suppression de l'espace libre négatif. Les éléments seront au maximum rétrécis jusqu'à obtenir leur taille  <code>min-content</code> — c'est-à-dire la taille qu'ils obtiennent s'ils utilisent tous les emplacements de rupture de ligne possibles.</p>
+
+<p>On peut observer ce seuil avec <code>min-content</code> dans l'exemple qui suit où <code>flex-basis</code> est résolu avec la taille du contenu. Si on change la largeur du conteneur flexible (en l'augmentant à 700 pixels par exemple) puis en réduisant la largeur de l'élément flexible, on peut voir que les deux premiers objets passent à la ligne. Toutefois, ils ne deviennent pas plus petits que <code>min-content</code>. Lorsque la boîte se réduit, l'espace est simplement retiré du troisième élément.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink-min-content.html", '100%', 500)}}</p>
+
+<p>En pratique, cette méthode de rétrécissement fournit des résultats prévisibles, car on ne souhaite pas que le contenu disparaisse entièrement ou que les boîtes soient plus petites que leur contenu minimal. Les règles présentées ci-avant sont donc pertinentes lorsqu'on souhaite rétrécir des objets afin qu'ils rentrent dans un conteneur.</p>
+
+<h3 id="Utiliser_différents_coefficients_flex-shrink_pour_différents_éléments">Utiliser différents coefficients <code>flex-shrink</code> pour différents éléments</h3>
+
+<p>Comme avec <code>flex-grow</code>, on peut utiliser différents coefficients <code>flex-shrink</code>. Cela permet de modifier le comportement par défaut et on peut ainsi avoir un élément qui se réduit plus ou moins rapidement que ses voisins (voire qui ne se réduit pas du tout).</p>
+
+<p>Dans l'exemple suivant, le premier objet possède un coefficient <code>flex-shrink</code> égal à 1, le deuxième a un coefficient égal à <code>0</code> (il ne rétrécira pas du tout) et le troisième est paramétré avec <code>4</code>. Ainsi, le troisième élément rétrécit plus vite que le premier. N'hésitez pas à utiliser différentes valeurs pour observer le résultat obtenu. De la même façon qu'avec <code>flex-grow</code>, on peut utiliser nombres entiers ou des nombres décimaux, utilisez ce qui vous paraît le plus pertinent.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink-ratios.html", '100%', 570)}}</p>
+
+<h2 id="Maîtriser_le_dimensionnement_des_objets_flexibles">Maîtriser le dimensionnement des objets flexibles</h2>
+
+<p>Comprendre le dimensionnement des objets flexibles revient avant tout à comprendre les différentes étapes qui sont déroulées et notamment celles-ci que nous avons pu étudier dans ces guides :</p>
+
+<h3 id="Quelle_est_la_taille_de_base_de_l'objet">Quelle est la taille de base de l'objet ?</h3>
+
+<ol>
+ <li>Si  <code>flex-basis</code> vaut <code>auto</code> et que l'objet possède une dimension explicitement définie, c'est cette dimension qui sera utilisée.</li>
+ <li>Si  <code>flex-basis</code> vaut <code>auto</code> ou <code>content</code> (pour les navigateurs qui prennent en charge cette valeur), c'est la taille du contenu qui déterminera la taille de base de l'élément</li>
+ <li>Si <code>flex-basis</code> est exprimée avec une valeur de longueur non nulle, c'est cette valeur qui sera la taille de base de l'élément.</li>
+ <li>Si  <code>flex-basis</code> vaut <code>0</code>, la taille de l'élément n'est pas pris en compte lors de la répartition de l'espace.</li>
+</ol>
+
+<h3 id="De_l'espace_est-il_disponible">De l'espace est-il disponible ?</h3>
+
+<p>Les objets ne s'étendent pas s'il n'y a pas d'espace libre positif et ne se réduisent pas s'il n'y a pas d'espace libre négatif.</p>
+
+<ol>
+ <li>Si on prend tous les objets et qu'on somme leur dimension principale (la largeur si on travaille en ligne ou la hauteur si on travaille en colonne) et qu'on obtient une quantité inférieure à la dimension principale du conteneur, on aura alors un espace libre positif et c'est la propriété <code>flex-grow</code> qui entrera en jeu.</li>
+ <li>Si cette somme dépasse la taille du conteneur flexible, on aura alors un espace libre négatif et c'est la propriété <code>flex-shrink</code> qui sera utilisée.</li>
+</ol>
+
+<h3 id="Les_autres_façons_de_distribuer_l'espace">Les autres façons de distribuer l'espace</h3>
+
+<p>Si on ne souhaite pas ajouter d'espace aux objets, on pourra tout aussi bien répartir cet espace libre entre les objets ou autour grâce aux propriétés d'alignement vu dans <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible">le guide sur l'alignement</a>. La propriété {{cssxref("justify-content")}} permettra de répartir cet espace entre les objets ou autour d'eux. Les marges automatiques peuvent être utilisées sur les objets flexibles afin d'absorber l'espace et de créer des gouttières entre ces objets.</p>
+
+<p>Tout ces outils relatifs aux boîtes flexibles vous permettent d'accomplir la plupart des dispositions et n'auront plus de secret au fur et à mesure de vos essais et expérimentations.</p>
diff --git a/files/fr/web/css/css_flexible_box_layout/index.html b/files/fr/web/css/css_flexible_box_layout/index.html
new file mode 100644
index 0000000000..46576643ce
--- /dev/null
+++ b/files/fr/web/css/css_flexible_box_layout/index.html
@@ -0,0 +1,114 @@
+---
+title: Disposition des boîtes flexibles CSS
+slug: Web/CSS/CSS_Flexible_Box_Layout
+tags:
+  - Aperçu
+  - CSS
+  - CSS Flexible Box Layout
+  - CSS Flexible Boxes
+  - Reference
+translation_of: Web/CSS/CSS_Flexible_Box_Layout
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>Le module de disposition des boîtes flexibles CSS</strong> (<em>CSS Flexible Box Layout</em>) est un module de CSS qui définit un modèle de boîtes optimisé pour la conception des interfaces utilisateurs. En utilisant le modèle des boîtes flexibles, les éléments d'une conteneur flexible peuvent être disposés dans n'importe quelle direction et étendre leurs dimensions (pour remplir un espace vide) ou se réduire pour éviter de dépasser en dehors de l'élément parent. On peut facilement manipuler les alignements horizontal et vertical des éléments fils. On peut aussi imbriquer plusieurs niveaux de boîtes flexibles afin de construire des dispositions en deux dimensions..</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans l'exemple qui suit, on utilise <code>display: flex</code> pour un conteneur. Cela signifie que les trois éléments fils deviennent des éléments flexibles. La propriété <code>justify-content</code> a été paramétrée avec la valeur <code>space-between</code> afin d'espacer les éléments de façon égale le long de l'axe principal. Ainsi, on a le même espace à droite et à gauche de chaque élément et, aux extrêmités du conteneur, les bords des éléments fils qui sont alignés avec les bords du conteneur. On peut également voir que les éléments sont étirés le long de l'axe orthogonal (<em>cross axis</em>) car la valeur par défaut de la propriété <code>align-items </code>est <code>stretch</code>. Ainsi, les éléments flexibles s'étirent pour occuper toute la hauteur du conteneur flexible, ils sont donc aussi grands que le plus grand des éléments.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/simple-example.html", '100%', 500)}}</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés_CSS">Propriétés CSS</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("flex")}}</li>
+ <li>{{cssxref("flex-basis")}}</li>
+ <li>{{cssxref("flex-direction")}}</li>
+ <li>{{cssxref("flex-flow")}}</li>
+ <li>{{cssxref("flex-grow")}}</li>
+ <li>{{cssxref("flex-shrink")}}</li>
+ <li>{{cssxref("flex-wrap")}}</li>
+ <li>{{cssxref("order")}}</li>
+</ul>
+</div>
+
+<h3 id="Propriétés_relatives_à_l'alignement">Propriétés relatives à l'alignement</h3>
+
+<p>Les propriétés <code>align-content</code>, <code>align-self</code>, <code>align-items</code> et <code>justify-content</code> étaient initialement définies dans la spécification Flexbox mais sont désormais définies dans la spécification sur l'alignement des boîtes et la spécification Flexbox fait référence à cette nouvelle spécification pour les définitions à jour. Des propriétés d'alignement additionnelles ont également été définies dans le module de spécification <em>Box Alignment</em>.</p>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("align-content")}}</li>
+ <li>{{cssxref("align-items")}}</li>
+ <li>{{cssxref("align-self")}}</li>
+ <li>{{cssxref("justify-content")}}</li>
+ <li>{{cssxref("place-items")}}</li>
+ <li>{{cssxref("place-content")}}</li>
+ <li>{{cssxref("row-gap")}}</li>
+ <li>{{cssxref("column-gap")}}</li>
+ <li>{{cssxref("gap")}}</li>
+</ul>
+</div>
+
+<h3 id="Termes_du_glossaire">Termes du glossaire</h3>
+
+<div class="index">
+<ul>
+ <li><a href="/fr/docs/Glossary/Flexbox">Flexbox / boîte flexible</a></li>
+ <li><a href="/fr/docs/Glossary/Flex_Container">Conteneur flexible</a></li>
+ <li><a href="/fr/docs/Glossary/Flex_Item">Objet flexible</a></li>
+ <li><a href="/fr/docs/Glossary/Main_Axis">Axe principal</a></li>
+ <li><a href="/fr/docs/Glossary/Cross_Axis">Axe secondaire</a></li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de base des boîtes flexibles</a></dt>
+ <dd>Un aperçu des différentes fonctionnalités offertes par les boîtes flexibles.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Liens_entre_flexbox_et_les_autres_dispositions">Les liens entre <em>flexbox</em> et les autres méthodes de disposition</a></dt>
+ <dd>Comment <em>flexbox</em> s'articule avec les autres méthodes de disposition et les différents modules de spécification CSS.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible">L'alignement des éléments au sein d'un conteneur flexible</a></dt>
+ <dd>Le fonctionnement des propriétés d'alignement des boîtes dans le contexte des boîtes flexibles.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Ordonner_éléments_flexibles">Ordonner les éléments flexibles</a></dt>
+ <dd>Ce guide explique les différentes méthodes qui permettent de modifier l'ordre et la direction des éléments dans le conteneur flexible et aborde également les problèmes que cela peut causer.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal">Contrôler les proportions des éléments flexibles le long de l'axe principal</a></dt>
+ <dd>Cet article explique le fonctionnement des propriétés <code>flex-grow</code>, <code>flex-shrink</code> et <code>flex-basis</code>.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Ma%C3%AEtriser_passage_%C3%A0_la_ligne_des_%C3%A9l%C3%A9ments_flexibles">Maîtriser le passage à la ligne des éléments flexibles</a></dt>
+ <dd>Comment créer des conteneur flexibles qui s'étendent sur plusieurs lignes et contrôler l'affichage des éléments sur ces lignes.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Cas_utilisation_flexbox">Les cas d'utilisation classiques des boîtes flexibles</a></dt>
+ <dd>Des <em>design patterns</em> pouvant être résolus avec les boîtes flexibles.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/R%C3%A9trocompatibilite_de_flexbox">La rétrocompatibilité de <em>flexbox</em></a></dt>
+ <dd>L'état de la compatibilité des navigateurs pour les boîtes flexibles, les différents problème d'interopérabilité, la gestion des anciens navigateurs et l'évolution de la spécification.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox')}}</td>
+   <td>{{ Spec2('CSS3 Flexbox') }}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://github.com/philipwalton/flexbugs">Flexbugs : une liste, maintenue par la communauté, des différents bugs des navigateurs relatifs aux boîtes flexibles et les éventuelles méthodes de contournements associées</a></li>
+ <li><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Mixins">Mixins multi-navigateurs pour flexbox</a> : cet article fournit un ensemble de mixins pour obtenir l'effet des flexbox de façon homogène sur les différents navigateurs qui ne supportent pas la syntaxe moderne pour les boîtes flexibles</li>
+</ul>
diff --git a/files/fr/web/css/css_flexible_box_layout/liens_entre_flexbox_et_les_autres_dispositions/index.html b/files/fr/web/css/css_flexible_box_layout/liens_entre_flexbox_et_les_autres_dispositions/index.html
new file mode 100644
index 0000000000..c6e9691ae5
--- /dev/null
+++ b/files/fr/web/css/css_flexible_box_layout/liens_entre_flexbox_et_les_autres_dispositions/index.html
@@ -0,0 +1,125 @@
+---
+title: Les liens entre flexbox et les autres méthodes de disposition
+slug: Web/CSS/CSS_Flexible_Box_Layout/Liens_entre_flexbox_et_les_autres_dispositions
+tags:
+  - CSS
+  - Guide
+  - display
+  - flexbox
+  - grid
+translation_of: >-
+  Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Dans cet article, nous verrons comment les boîtes flexibles interagissent avec les autres modules CSS. Nous verrons quelles sont les spécifications qui décrivent les boîtes flexibles et pourquoi les boîtes flexibles sont différentes des autres modules.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Dans les versions 1 et 2 de CSS, la spécification était « monolithique » et décrite dans un seul document. Évoluant vers un langage riche possédant de nombreuses fonctionnalité, la maintenance de cette spécification unique est devenue problématiques, certaines parties évoluant à différentes vitesses. La spécification CSS a donc été modularisée et ce sont ces différents modules qui constituent CSS aujourd'hui. Ces modules sont liés les uns aux autres et sont chacun à différents stades de développement.</p>
+</div>
+
+<h2 id="Le_module_d'alignement_des_boîtes_(Box_Alignment)">Le module d'alignement des boîtes (<em>Box Alignment</em>)</h2>
+
+<p>La plupart des personnes s'intéressent aux boîtes flexibles car elles permettent d'aligner efficacement des éléments flexibles au sein d'un conteneur. Les boîtes flexibles permettent d'utiliser des propriétés pour aligner les éléments sur l'axe secondaire et de les justifier sur l'axe principal.</p>
+
+<p>Ces propriétés sont apparues dans la spécification dédiée aux boîtes flexibles mais font désormais également partie de <a href="https://www.w3.org/TR/css-align-3/">la spécification sur l'alignement des boîtes (<em>Box Alignment</em>)</a>. Cette spécification détaille la façon dont l'alignement fonctionne pour l'ensemble des dispositions (et pas uniquement pour les boîtes flexibles). L'alignement des boîtes permet de gérer l'alignement et la justification, ainsi que la distribution de l'espace le long d'un axe.</p>
+
+<p>Ces propriétés d'alignement sont actuellement détaillées dans les spécifications de <em>flexbox</em> et d'alignement des boîtes afin d'être sûr que la spécification des boîtes flexibles n'est pas bloquée par l'état de la spécification sur l'alignement des boîtes. Dans la spécification <em>flexbox</em>, une note indique que lorsque la spécification sur l'alignement des boîtes sera terminée, ces définitions remplaceront celles de la spécification sur les boîtes flexibles :</p>
+
+<blockquote>
+<p>« Note : Bien que les propriétés d'alignement soient définies dans le module CSS <em>Box Alignment</em> <a href="https://www.w3.org/TR/css-align-3/">CSS-ALIGN-3</a>, le module <em>Flexible Box Layout</em> reproduit les définitions des propriétés qui sont ici pertinentes afin de ne pas créer de dépendance normative qui ralentirait l'avancement de la spécification. Ces propriétés s'appliquent uniquement à la disposition flexible jusqu'à ce que <em>CSS Box Alignment Level 3</em> soit terminé et définisse leurs effets pour les autres modes de disposition. De plus, toute nouvelle valeur qui apparaîtra dans le module <em>Box Alignment</em> s'appliquera également à la disposition en boîtes flexibles. Autrement dit, le module <em>Box Alignment</em>, lorsqu'il sera complet, remplacera les définitions énoncées ici. »</p>
+</blockquote>
+
+<p>Dans un prochain article de ce guide (<a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_%C3%A9l%C3%A9ments_dans_un_conteneur_flexible">Aligner les éléments d'un conteneur flexibles</a>), nous verrons dans le détail comment les propriétés du module d'alignement des boîtes s'appliquent aux éléments flexibles.</p>
+
+<h3 id="Les_propriétés_d'espacement_(gap)">Les propriétés d'espacement (<em>gap</em>)</h3>
+
+<p>Récemment, les propriétés {{cssxref("row-gap")}} et {{cssxref("column-gap")}}, ainsi que la propriété raccourcie {{cssxref("gap")}} ont été ajoutées au module d'alignement des boîtes. Ces propriétés furent initialement définies dans la spécification de la grille CSS et étaient nommées <code>grid-row-gap</code>, <code>grid-column-gap</code> et <code>grid-gap</code>. Elles ont été renommées et déplacées dans le module d'alignement des boîtes afin de pouvoir être utilisées dans d'autres modes de disposition et, à terme, avec les boîtes flexibles. Avant la prise en charge des propriétés <code>gap</code>, c'était les propriétés {{cssxref("margin")}} qui étaient utilisées afin de créer des espaces entre les éléments.</p>
+
+<h2 id="Les_modes_d'écritures_(Writing_Modes)">Les modes d'écritures (<em>Writing Modes</em>)</h2>
+
+<p>Dans l'article sur <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">les concepts de bases relatifs aux <em>flexbox</em></a>, nous avons vu que les boîtes flexibles prenaient en compte le mode d'écriture (la direction du texte). Les différents modes d'écritures sont décrits dans la spécification CSS <a href="https://www.w3.org/TR/css-writing-modes-3/">Writing Modes</a> qui détaille comment CSS prend en charge les différents modes d'écritures qui existent dans le monde. Cette spécification permet notamment de comprendre les directions <strong>de bloc</strong> et <strong>en ligne</strong> qui sont fondamentales pour les axes principal et secondaires des boîtes flexibles.</p>
+
+<p>On notera qu'il est possible de modifier le mode d'écriture d'un document pour d'autres raisons que des raisons linguistiques. Vous pouvez <a href="https://24ways.org/2016/css-writing-modes/">consulter cet article</a> pour en savoir plus sur les différentes façons d'utiliser les modes d'écriture, que ce soit en fonction de la langue du contenu ou pour des raisons créatives.</p>
+
+<h3 id="Les_différents_modes_d'écritures">Les différents modes d'écritures</h3>
+
+<p>La spécification sur les modes d'écriture définit les différentes valeurs qui peuvent être utilisées avec la propriété {{cssxref("writing-mode")}}. Cette propriété permet de modifier la direction de la disposition des blocs sur la page pour correspondre à l'orientation d'un mode d'écriture donné. Vous pouvez manipuler l'exemple qui suit en utilisant les valeurs suivantes pour voir l'impact que cela a sur la disposition flexible :</p>
+
+<ul>
+ <li><code>horizontal-tb</code></li>
+ <li><code>vertical-rl</code></li>
+ <li><code>vertical-lr</code></li>
+ <li><code>sideways-rl</code></li>
+ <li><code>sideways-lr</code></li>
+</ul>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/relationship/writing-modes.html", '100%', 360)}} </p>
+
+<p>Actuellement, seul Firefox prend en charge <code>sideways-rl</code> et <code>sideways-lr</code>. Il existe également certains problèmes relatifs à <code>writing-mode</code> et aux boîtes flexibles. Pour plus d'informations, vous pouvez consulter <a href="/fr/docs/Web/CSS/writing-mode#Compatibilité_des_navigateurs">les informations de compatibilité pour la propriété <code>writing-mode</code></a>. Toutefois, si vous souhaitez utiliser les modes d'écritures pour votre site/application, il est fortement conseillé de tester les résultats obtenus, ne serait-ce que parce que cela peut fortement nuire à la lisibilité !</p>
+
+<p>On notera que la propriété <code>writing-mode</code> CSS ne doit pas être utilisée pour modifier le mode d'écriture d'un document entier. Cela doit être fait avec HTML en ajoutant un attribut <code>dir</code> et <code>lang</code> sur l'élément <code>html</code> afin d'indiquer la direction du texte par défaut et la langue du document. Ainsi, le document serait correctement affiché, même si le CSS n'était pas chargé.</p>
+
+<h2 id="Les_boîtes_flexibles_et_les_autres_méthodes_de_disposition">Les boîtes flexibles et les autres méthodes de disposition</h2>
+
+<p>La spécification sur les boîtes flexibles contient <a href="https://www.w3.org/TR/css-flexbox-1/#flex-containers">une définition</a> de ce qui se produit lorsqu'un élément utilisant une autre méthode de disposition devient un élément flexible (par exemple : un élément est positionné de façon flottante et son élément parent devient un conteneur flexible). Elle décrit également comment un conteneur flexible s'inscrit dans une disposition.</p>
+
+<p>Un élément avec <code>display: flex</code> se comportera majoritairement comme un conteneur de bloc qui établit un bloc englobant. Les éléments flottants ne rentreront pas dans ce conteneur et <a href="/fr/docs/Web/CSS/Modèle_de_boîte_CSS/Fusion_des_marges">les marges des conteneurs ne fusionneront pas</a>.</p>
+
+<p>Pour un élément flexible, si celui-ci était avant un élément flottant ou dégagé (<em>cleared</em>) et qu'il devient flexible car son élément parent reçoit <code>display: flex</code>, le flottement et le dégagement ne s'appliquent plus. L'élément ne sera pas retiré du flux normal (ce qui aurait lieu avec un flottement). Si on a utilisé la propriété {{cssxref("vertical-align")}} avec <code>inline-block</code> ou si on a utilisé une disposition tabulaire, cela n'aura plus d'effet et on pourra utiliser les propriétés d'alignement des boîtes flexibles à la place.</p>
+
+<p>Dans le prochain exemple, on applique un flottement sur les éléments fils puis leur conteneur reçoit <code>display: flex</code>. Si vous retirez <code>display: flex</code>, vous pouvez voir que l'élément <code>.box</code> s'écrase car aucun dégagement n'est appliqué. Cela permet de voir que le flottement s'applique. En remettant <code>display: flex</code>, l'élément ne s'écrase plus car les éléments fils sont devenus des éléments flexibles.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/relationship/floats.html", '100%', 430)}}</p>
+
+<h2 id="Les_boîtes_flexibles_et_la_disposition_en_grille">Les boîtes flexibles et la disposition en grille</h2>
+
+<p><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">La disposition en grille (<em>CSS Grid</em>)</a> et les boîtes flexibles agissent de la même façon lorsqu'elles surchargent les autres méthodes de disposition. Les boîtes flexibles pourront être utilisées comme solution de repli si les grilles CSS ne sont pas prises en charge. En effet, les boîtes flexibles bénéficient d'une meilleure prise en charge pour les navigateurs moins récents. Cette approche fonctionne sans problème car, si un élément flexible devient un élément d'une grille, les propriétés <code>flex</code> qui auraient pu être affectées aux éléments enfants seront ignorées.</p>
+
+<p>Les propriétés du module d'alignement des boîtes peuvent être utilisées pour ces deux modes de dispositions.</p>
+
+<h3 id="Flexbox_grille_quelle_différence"><em>Flexbox</em> / grille : quelle différence ?</h3>
+
+<p>On demande souvent quelle est la différence entre la disposition avec les boîtes flexibles et la disposition avec la grille CSS. Pourquoi avoir deux spécifications quand celles-ci semblent avoir le même effet ?</p>
+
+<p>La réponse la plus directe se trouve dans ces deux spécifications. Les boîtes flexibles sont une méthode de disposition unidimensionnelle alors que la grille CSS est une méthode de disposition bidimensionnelle. Dans l'exemple ci-après, on utilise une disposition avec les boîtes flexibles. Comme nous avons vu dans l'article sur les concepts de base, les éléments flexibles peuvent « passer à la ligne » mais chaque ligne forme alors un conteneur flexible indépendant. On voit ici que l'espace est distribué sans prendre en compte le placement des éléments sur les autres lignes/colonnes, il n'y a pas d'alignement.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/relationship/flex-layout.html", '100%', 750)}}</p>
+
+<p>Si on crée une disposition semblable avec une grille, on peut à la fois contrôler la disposition des lignes et des colonnes.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/relationship/grid-layout.html", '100%', 700)}}</p>
+
+<p>Ces exemples illustrent une autre différence majeure entre ces méthodes. Avec la disposition en grille, la majeure partie du dimensionnement s'applique au conteneur (on y définit les pistes et on place les éléments sur ces pistes). Avec la disposition utilisant les boîtes flexibles, on crée un conteneur flexible et on indique sa direction, tout le reste est géré au niveau des éléments.</p>
+
+<p>Dans certains cas, les deux méthodes peuvent fonctionner sans problème. En les utilisant plus fréquemment, vous pourrez voir qu'elles répondent à des besoins différents et vous utiliserez sans doute ces deux méthodes dans votre CSS. Comme souvent, il n'y a pas de solution miracle et de « bonne » ou de « mauvaise » réponse.</p>
+
+<p>De façon générale, si vous ajoutez des marges autour d'éléments flexibles afin que ceux-ci soient alignés, vous devriez utiliser une méthode de disposition bidimensionnelle comme la grille CSS qui vous permettra de mieux organiser votre contenu. La taille du composant à mettre en forme n'a pas d'importance, on n'utilisera pas plus les boîtes flexibles pour un « petit » composant et la grille pour un « grand ». Essayez les différentes méthodes, profitez de la liberté de choix qui existe désormais avec ces outils.</p>
+
+<p>Pour approfondir cette comparaison entre la grille et les boîtes flexibles, vous pouvez consulter <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition">cet article à propos des relations entre la grille CSS et les autres méthodes de disposition</a>. Cet article détaille les nombreuses différences entre la grille CSS et les boîtes flexibles ; il illustre aussi les fonctionnalités supplémentaires provenant de la grille. Cet article pourra vous aider à choisir la méthode de disposition à privilégier.</p>
+
+<h2 id="Les_boîtes_flexibles_et_display_contents">Les boîtes flexibles et <code>display: contents</code></h2>
+
+<p>La valeur <code>contents</code> de la propriété {{cssxref("display")}} est une nouvelle valeur, décrite ainsi dans la spécification :</p>
+
+<blockquote>
+<p>« L'élément ne génère aucune boîte de lui-même mais ses éléments fils et ses pseudo-éléments continuent de générer des boîtes normalement. En termes de génération de boîtes et de disposition, l'élément doit être traité comme s'il avait été remplacé par ses éléments fils et ses pseudo-éléments dans l'arbre du document. »</p>
+</blockquote>
+
+<p>La valeur de la propriété <code>display</code> contrôle la façon dont les boîtes sont générées et si un élément doit générer une boîte qui puisse être mise en forme et vue sur la page ou si la boîte normalement créée devrait être retirée afin que ses éléments fils soient « remontés » dans l'arbre et participent à la disposition dont l'élément (parent) aurait dû faire partie. Un exemple étant beaucoup plus efficace qu'un long discours, passons à la suite.</p>
+
+<p>Dans l'exemple suivant on dispose d'un conteneur flexible avec trois éléments fils. L'un de ces éléments flexibles possède deux éléments à l'intérieur. Normalement, ces deux éléments ne participent pas à la disposition en boîtes flexibles, car cette disposition s'applique uniquement aux éléments fils <strong>directs</strong> du conteneur flexible.</p>
+
+<p>En ajoutant <code>display: contents</code> à l'élément flexible qui contient deux éléments fils, on peut voir que l'élément disparaît de la disposition et permet à ses deux éléments fils d'agir comme des éléments flexibles. Vous pouvez essayer de retirer la ligne avec <code>display: contents</code> afin que l'élément parent « revienne ».</p>
+
+<p>On notera que cela ne retire que la boîte de la disposition. Les éléments fils au deuxième niveau ne deviennent pas des éléments fils directs pour d'autres notions. On peut voir dans l'exemple qu'on utilise un sélecteur sur les éléments fils directs pour gérer l'arrière-plan et les bordures : ces styles n'ont pas été appliqués aux éléments fils de deuxième rang. Ces éléments ont été disposés comme des éléments flexibles, mais ils ne récupèrent pas la mise en forme des éléments fils directs.</p>
+
+<div class="warning">
+<p><strong>Attention !</strong> Utiliser <code>display: contents</code> entraînera la suppression de l'élément dans l'arbre d'accessibilité et les lecteurs d'écran ne pourront pas en voir le contenu (comme si on avait utilisé <code>display: none</code>). La valeur <code>contents</code> doit uniquement être utilisée pour les éléments de présentation (et pas de contenu).</p>
+</div>
+
+<p>En retirant la boîte de l'élément parent, on ne peut pas utiliser cette boîte pour, par exemple, ajouter une couleur d'arrière-plan commune aux éléments fils imbriqués. Si on retire <code>display: contents</code> dans l'exemple, on peut voir que l'arrière-plan orange rattaché à l'élément disparaît avec la boîte.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/relationship/display-contents.html", '100%', 650)}}</p>
+
+<p>La prise en charge de <code>display:contents</code> est actuellement limitée parmi les différents navigateurs et cette fonctionnalité est nécessaire au bon fonctionnement de cette démonstration. Firefox prend en charge <code>display: contents</code> et la gestion de cette valeur est en cours d'implémentation dans Chrome. Lorsque cette fonctionnalité sera plus largement disponible, elle sera très utile lorsqu'on souhaitera utiliser une structure à des fins sémantiques mais sans, pour autant, afficher les boîtes générées par défaut.</p>
diff --git a/files/fr/web/css/css_flexible_box_layout/maîtriser_passage_à_la_ligne_des_éléments_flexibles/index.html b/files/fr/web/css/css_flexible_box_layout/maîtriser_passage_à_la_ligne_des_éléments_flexibles/index.html
new file mode 100644
index 0000000000..6b78cba48f
--- /dev/null
+++ b/files/fr/web/css/css_flexible_box_layout/maîtriser_passage_à_la_ligne_des_éléments_flexibles/index.html
@@ -0,0 +1,101 @@
+---
+title: Maîtriser le passage à la ligne des éléments flexibles
+slug: >-
+  Web/CSS/CSS_Flexible_Box_Layout/Maîtriser_passage_à_la_ligne_des_éléments_flexibles
+tags:
+  - CSS
+  - Grille
+  - Guide
+  - Intermediate
+  - flexbox
+  - grid
+  - wrapping
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items
+---
+<p>{{CSSRef}}</p>
+
+<p class="summary">Les boîtes flexibles ont été conçues comme une méthode de disposition unidimensionnelle. Autrement dit, elles permettent de disposer des éléments en lignes ou en colonnes mais pas en lignes et en colonnes en même temps. Il existe toutefois la possibilité de passer des éléments flexibles à la ligne pour créer de nouvelles lignes horizontales si {{cssxref("flex-direction")}} vaut <code>row</code> ou de nouvelles colonnes si <code>flex-direction</code> vaut <code>column</code>. Dans ce guide, nous verrons comment cela fonctionne, les cas pour lesquels cela a été prévu et les situations qui nécessitent plutôt d'utiliser <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">une disposition en grille (<em>CSS Grid</em>)</a>.</p>
+
+<h2 id="Créer_des_passages_à_la_ligne">Créer des passages à la ligne</h2>
+
+<p>La valeur initiale de la propriété {{cssxref("flex-wrap")}} est <code>nowrap</code>. Cela signifie que si on a un ensemble d'éléments flexibles trop larges pour tenir dans le conteneur, ces éléments dépasseront. Si on souhaite que ces éléments créent une nouvelle ligne lorsque la largeur du conteneur est dépassée, on peut ajouter la propriété <code>flex-wrap</code> avec la valeur <code>wrap</code>, ou utiliser la propriété raccourcie {{cssxref("flex-flow")}} avec les valeurs <code>row wrap</code> ou <code>column wrap</code>.</p>
+
+<p>Les éléments passeront alors à la ligne dans le conteneur. Dans l'exemple qui suit, on dispose de 10 éléments pour lesquels <code>flex-basis</code> vaut <code>160px</code> et qui peuvent grandir/rétrécir. Une fois que la première ligne est composée de suffisamment d'éléments et qu'il n'y a plus d'espace suffisant pour placer un autre objet de 160 pixels, une nouvelle ligne flexible est créée dans laquelle on place les éléments suivants et ainsi de suite. Les éléments pouvant grandir, ils s'étireront sur plus de 160 pixels afin de remplir chaque ligne complètement. S'il n'y a qu'un seul élément sur la dernière ligne, cet élément s'étirera pour remplir toute la ligne.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/row-wrap.html", '100%', 650)}}</p>
+
+<p>On peut avoir le même effet en colonnes. Ici le conteneur devra avoir une hauteur afin que les éléments créent de nouvelles colonnes et s'étirent en hauteur pour remplir chaque colonne.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/column-wrap.html", '100%', 810)}}</p>
+
+<h2 id="Le_retour_à_la_ligne_et_flex-direction">Le retour à la ligne et <code>flex-direction</code></h2>
+
+<p>Le retour à la ligne fonctionne comme on pourrait s'y attendre lorsqu'on manipule <code>flex-direction</code>. Si <code>flex-direction</code> vaut <code>row-reverse</code>, les éléments commenceront à créer une nouvelle ligne à partir de la ligne de fin du conteneur et rempliront les lignes dans l'ordre inverse.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/row-reverse-wrap.html", '100%', 750)}}</p>
+
+<p>On notera que l'inversion a uniquement lieu dans le sens de la ligne. On démarre à droite puis on passe à la deuxième ligne pour laquelle on démarre également à droite. On n'inverse pas les deux directions et on ne commence donc pas à partir du bas du conteneur pour le remplir vers le haut.</p>
+
+<h2 id="Des_explications_sur_cette_disposition_unidimensionnelle">Des explications sur cette disposition unidimensionnelle</h2>
+
+<p>Comme nous avons pu le voir dans les exemples précédents, si les éléments peuvent grandir et rétrécir, lorsqu'il y a moins d'éléments dans la dernière ligne ou colonne, ces éléments grandissent pour occuper tout l'espace disponible.</p>
+
+<p>Il n'existe pas de méthode, avec les boîtes flexibles, qui permettent d'aligner les éléments d'une ligne avec ceux de la ligne du dessus : chaque ligne flexible agit comme un nouveau conteneur, décorrélé du précédent et gère la distribution de l'espace sur l'axe principal pour cette ligne uniquement. S'il n'y a qu'un seul élément et que celui-ci peut grandir, il remplira alors tout l'espace, comme si on a avait eu un conteneur flexible avec un seul élément flexible.</p>
+
+<p>Si on souhaite organiser du contenu sur deux dimensions, mieux vaut utiliser les grilles CSS. On peut comparer notre exemple précédent avec la version utilisant une disposition en grille pour observer les différences. Dans l'exemple qui suit, on utilise une grille CSS composée d'autant de colonnes de 160 pixels de large que possible et on distribue l'espace restant entre chaque colonne. Toutefois, les éléments restent ici sur la grille et ne s'étirent pas s'il y en a moins sur la dernière ligne.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/grid-example.html", '100%', 700)}}</p>
+
+<p>C'est la différence entre une disposition unidimensionnelle et une disposition bidimensionnelle. Avec une méthode unidimensionnelle comme les boîtes flexibles, on ne contrôle que la ligne ou la colonne. Avec une méthode bidimensionnelle, on contrôle les deux axes simultanément. Aussi, si vous souhaitez organiser l'espace ligne par ligne ou colonne par colonne, vous pouvez utiliser les boîtes flexibles mais sinon, utilisez les grilles CSS.</p>
+
+<h2 id="Comment_fonctionnent_les_systèmes_de_grilles_basés_sur_les_boîtes_flexibles">Comment fonctionnent les systèmes de grilles basés sur les boîtes flexibles ?</h2>
+
+<p>La plupart du temps, les systèmes de grilles basés sur les boîtes flexibles fonctionnent en combinant les boîtes flexibles et les dispositions avec les flottements (<em>floats</em>). Si on affecte des largeurs en pourcentage aux éléments flexibles (via <code>flex-basis</code> ou avec une largeur sur l'élément et avec <code>flex-basis</code> en <code>auto</code>) on peut obtenir l'impression d'une disposition organisée sur deux dimensions, comme on peut voir dans l'exemple ci-après.</p>
+
+<p>Dans cet exemple, on a <code>flex-grow</code> et <code>flex-shrink</code> qui valent <code>0</code> afin que les éléments ne soient pas flexibles et que leur flexibilité puisse être maîtrisée avec des pourcentages, comme on pouvait le faire avec des dispositions flottantes.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/flex-grid.html", '100%', 650)}}</p>
+
+<p>Si on souhaite que les éléments flexibles s'alignent le long de l'axe secondaire, on pourra ajuster les largeurs avec ces pourcentages. Dans la plupart des cas, cet ajout de largeur aux éléments flexibles témoigne plutôt d'un scénario où les grilles CSS seraient plus pertinentes.</p>
+
+<h2 id="Créer_des_gouttières_entre_les_éléments">Créer des gouttières entre les éléments</h2>
+
+<p>Lorsque les éléments flexibles passent à la ligne, il faudra sans doute les espacer. À l'heure actuelle, il n'existe pas d'implémentation des propriétés de gouttières pour <a href="https://www.w3.org/TR/css-align-3/">le module d'alignement des boîtes</a> et pour Flexbox. À l'avenir, nous pourrons utiliser <code>row-gap</code> et <code>column-gap</code> pour les boîtes flexibles, comme nous pouvons le faire avec les grilles CSS. En attendant, il faut utiliser les marges pour obtenir l'effet escompté.</p>
+
+<p>On peut voir dans l'exemple suivant que créer des gouttières entre les éléments sans créer d'espace sur les bords des conteneurs nécessite l'utilisation de marges négatives sur le conteneur flexible. Toutes les bordures du conteneur flexibles sont déplacées vers un deuxième conteneur afin que la marge négative puisse absorber les éléments le long du conteneur.</p>
+
+<p>Cette contrainte sera levée lorsque les propriétés de gouttières seront implémentées. De telles gouttières s'appliqueront uniquement sur les bords des éléments situés à l'intérieur du conteneur.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/gaps.html", '100%', 830)}}</p>
+
+<h2 id="L'impact_de_visibility_collapse">L'impact de <code>visibility: collapse</code></h2>
+
+<p>La spécification sur les boîtes flexibles détaille la façon dont un élément flexible est replié lorsqu'on lui applique <code>visibility: collapse</code> (voir la documentation de {{cssxref("visibility")}}). La spécification décrit le comportement standard comme suit :</p>
+
+<blockquote>
+<p>“Indiquer <code>visibility:collapse</code> sur un élément flexible le transforme en un élément flexible replié et produit un effet similaire à l'application de <code>visibility:collapse</code> sur une ligne ou colonne de tableau. L'élément flexible replié est intégralement retiré du rendu mais laisse une toise qui permet de conserver la taille de la ligne flexible selon l'axe  secondaire. Ainsi, si un conteneur flexible ne possède qu'une ligne flexible, replier ou déplier des éléments flexibles pourra modifier la dimension principale du conteneur mais n'aura aucun effet sur l'axe secondaire et empêchera ainsi le reste de la page d'osciller. Le passage à la ligne est réappliqué après le repliage des éléments et il se peut donc que la dimension secondaire d'un conteneur flexible sur plusieurs lignes puisse évoluer.” - <a href="https://www.w3.org/TR/css-flexbox-1/#visibility-collapse">Éléments repliés</a></p>
+</blockquote>
+
+<p>Ce comportement s'avère utile lorsqu'on souhaite cibler certains éléments flexibles avec JavaScript afin d'afficher/masquer leur contenu. Un des exemples de la spécification illustre un tel scénario.</p>
+
+<p>Dans l'exemple qui suit, on a un conteneur flexible sans passage à la ligne. Le troisième élément possède plus de contenu que les autres mais est paramétré avec <code>visibility: collapse</code> et le conteneur flexible conserve donc une toise pour la hauteur nécessaire à l'affichage de cet élément. Si on retire <code>visibility: collapse</code> ou qu'on modifie la valeur de <code>visible</code>, on pourra voir l'élément disparaître et l'espace être redistribué entre les éléments qui ne sont pas repliés. La hauteur du conteneur flexible ne devrait pas changer.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Il est nécessaire d'utiliser Firefox pour les deux exemples présentés ensuite car Chrome et Safari considèrent <code>collapse</code> comme équivalent à <code>hidden</code>.</p>
+</div>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/visibility-collapse.html", '100%', 650)}}</p>
+
+<p>Lorsqu'on manipule des conteneurs flexibles qui sont composés de plusieurs lignes flexibles, il faut être conscient que le passage à la ligne est réappliqué après le repliage des éléments. Ainsi, le navigateur doit réappliquer les mécanismes de passage à la ligne afin de tenir compte de l'espace libéré par l'élément plié dans la direction principale.</p>
+
+<p>Cela signifie qu'un ou plusieurs éléments pourraient être déplacés sur une autre ligne que leur ligne initiale.</p>
+
+<p>Vous pouvez observer ce comportement dans l'exemple qui suit. On peut voir comment la composition des lignes varie en fonction de l'élément qui est replié. Si vous ajoutez plus de contenu au deuxième élément, il changera de ligne s'il est suffisamment grand. La ligne du haut sera alors aussi haute qu'une seule ligne de texte.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/wrapped-visibility-collapse.html", '100%', 750)}}</p>
+
+<p>Si cela pose problème dans votre structure, il peut être nécessaire de revoir son organisation et, par exemple, de placer chaque ligne de contenu dans un conteneur flexible séparé afin que le contenu ne puisse pas changer de ligne.</p>
+
+<h3 id="La_différence_entre_visibility_collapse_et_display_none">La différence entre <code>visibility: collapse</code> et <code>display: none</code></h3>
+
+<p>Lorsqu'on utilise <code>display: none</code> sur un élément afin de le cacher, cet élément est complètement retiré de la structure de la page. En pratique, cela signifie que les compteurs ignoreront cet élément et que les opérations telles que les transitions ne lui seront pas appliquées. <code>visibility: hidden</code> permet quant à elle de conserver la boîte dans la structure et peut être pratique si on souhaite que l'élément contribue à la disposition sans que l'utilisateur puisse le voir.</p>
diff --git a/files/fr/web/css/css_flexible_box_layout/mixins/index.html b/files/fr/web/css/css_flexible_box_layout/mixins/index.html
new file mode 100644
index 0000000000..652541e0c1
--- /dev/null
+++ b/files/fr/web/css/css_flexible_box_layout/mixins/index.html
@@ -0,0 +1,369 @@
+---
+title: Mises en page avancées avec les boîtes flexibles
+slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins
+tags:
+  - CSS
+  - Reference
+  - flexbox
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mixins
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Voici un ensemble de <em>mixins</em> pour vous permettre de bidouiller avec les boîtes flexibles grâce au support natif des navigateurs actuels.</p>
+
+<p>Dans ces <em>mixins</em>, on utilisera :</p>
+
+<ul>
+ <li>Des <em>fallbacks</em> avec l'ancienne syntaxe 'box' (Firefox et les anciens WebKit) et les syntaxes préfixées (IE10, les navigateurs WebKit sans ajout de <code>flex</code>)</li>
+ <li>La syntaxe finale standard (Firefox, Safari, Chrome, IE11, Opera)</li>
+</ul>
+
+<p>Ces <em>mixins</em> ont été inspirés par : <a href="https://dev.opera.com/articles/advanced-cross-browser-flexbox/">https://dev.opera.com/articles/view/advanced-cross-browser-flexbox/</a></p>
+
+<p>Et les articles suivants ont été d'une aide précieuse :</p>
+
+<ul>
+ <li><a href="https://w3.org/tr/css3-flexbox/">https://w3.org/tr/css3-flexbox/</a></li>
+ <li><a href="https://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx">https://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx</a></li>
+ <li><a href="https://css-tricks.com/using-flexbox/">https://css-tricks.com/using-flexbox/</a></li>
+ <li><a href="https://dev.opera.com/articles/view/advanced-cross-browser-flexbox/">https://dev.opera.com/articles/view/advanced-cross-browser-flexbox/</a></li>
+ <li><a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">Un guide complet sur Flexbox | CSS-Tricks</a></li>
+ <li><a href="https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/">Un guide visuel pour les flexbox CSS3 : Flexbox Playground</a></li>
+</ul>
+
+<div class="note">
+<p><strong>Note :</strong> Actuellement, les mixins ne sont pas pris en charge nativement par les navigateurs. Il faut utiliser un pré-processeur CSS afin de tirer parti des techniques suivantes. Cependant, les pré-processeurs ne font que générer du code CSS valide et on pourra donc appliquer les techniques précédentes en utilisant du « pur » CSS si on le souhaite.</p>
+</div>
+
+<h3 id="Les_conteneurs_flexibles">Les conteneurs flexibles</h3>
+
+<p>En utilisant la valeur <code>flex</code> pour la propriété {{cssxref("display")}}, on génère une boîte pour un conteneur flexible de bloc. La valeur <code>inline-flex</code> permet quant à elle de générer un conteneur flexible en ligne (<em>inline</em>).</p>
+
+<ul>
+ <li>Valeurs : <code>flex</code> | <code>inline-flex</code></li>
+ <li><a href="https://drafts.csswg.org/css-flexbox/#flex-containers">Spécifications</a></li>
+</ul>
+
+<div class="highlight">
+<pre class="brush: css">@mixin flexbox {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+// Exemple d'utilisation
+%flexbox { @include flexbox; }</pre>
+</div>
+
+<div class="highlight">
+<pre class="brush: css">@mixin inline-flex {
+  display: -webkit-inline-box;
+  display: -moz-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+%inline-flex { @include inline-flex; }</pre>
+</div>
+
+<h3 id="Direction_des_boîtes_flexibles">Direction des boîtes flexibles</h3>
+
+<p>La propriété {{cssxref("flex-direction")}} indique la façon dont les objets flexibles sont organisés dans le conteneur flexible en définissant la direction principale du conteneur. Autrement dit, elle détermine la direction selon laquelle les éléments flexibles sont disposés.</p>
+
+<ul>
+ <li>Valeurs possibles : <code>row</code> (la valeur par défaut)| <code>row-reverse</code> | <code>column</code> | <code>column-reverse</code></li>
+ <li><a href="https://drafts.csswg.org/css-flexbox/#flex-direction-property">Spécification</a></li>
+</ul>
+
+<div class="highlight">
+<pre class="brush: css">@mixin flex-direction($value: row) {
+  @if $value == row-reverse {
+    -webkit-box-direction: reverse;
+    -webkit-box-orient: horizontal;
+    -moz-box-direction: reverse;
+    -moz-box-orient: horizontal;
+  } @else if $value == column {
+    -webkit-box-direction: normal;
+    -webkit-box-orient: vertical;
+    -moz-box-direction: normal;
+    -moz-box-orient: vertical;
+  } @else if $value == column-reverse {
+    -webkit-box-direction: reverse;
+    -webkit-box-orient: vertical;
+    -moz-box-direction: reverse;
+    -moz-box-orient: vertical;
+  } @else {
+    -webkit-box-direction: normal;
+    -webkit-box-orient: horizontal;
+    -moz-box-direction: normal;
+    -moz-box-orient: horizontal;
+  }
+  -webkit-flex-direction: $value;
+  -ms-flex-direction: $value;
+  flex-direction: $value;
+}
+
+// Version plus courte :
+@mixin flex-dir($args...) { @include flex-direction($args...); }</pre>
+</div>
+
+<h3 id="flex-wrap"><code>flex-wrap</code></h3>
+
+<p>La propriété {{cssxref("flex-wrap")}} permet de contrôler si le conteneur flexible s'étend sur une ou sur un plusieurs lignes ainsi que la direction de l'axe secondaire (qui définit la direction dans laquelle les lignes sont « empilées »).</p>
+
+<ul>
+ <li>Valeurs possibles : <code>nowrap</code> (la valeur par défaut)| <code>wrap</code> | <code>wrap-reverse</code></li>
+ <li><a href="https://drafts.csswg.org/css-flexbox/#flex-wrap-property">Spécification</a></li>
+</ul>
+
+<div class="highlight">
+<pre class="brush: css">@mixin flex-wrap($value: nowrap) {
+  // No Webkit/FF Box fallback.
+  -webkit-flex-wrap: $value;
+  @if $value == nowrap {
+    -ms-flex-wrap: none;
+  } @else {
+    -ms-flex-wrap: $value;
+  }
+  flex-wrap: $value;
+}</pre>
+</div>
+
+<h3 id="flex-flow"><code>flex-flow</code></h3>
+
+<p>La propriété {{cssxref("flex-flow")}} est <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">une propriété raccourcie</a> pour définir <code>flex-direction</code> et <code>flex-wrap</code> qui permettent respectivement de définir l'axe principal et l'axe secondaire.</p>
+
+<ul>
+ <li>Valeur par défaut : <code>row</code> (la valeur par défaut)| <code>nowrap</code></li>
+ <li><a href="https://drafts.csswg.org/css-flexbox/#flex-flow-property">Spécification</a></li>
+</ul>
+
+<div class="highlight">
+<pre class="brush: css">@mixin flex-flow($values: (row nowrap)) {
+  // No Webkit/FF Box fallback.
+  -webkit-flex-flow: $values;
+  -ms-flex-flow: $values;
+  flex-flow: $values;
+}</pre>
+</div>
+
+<h3 id="order"><code>order</code></h3>
+
+<p>La propriété {{cssxref("order")}}  contrôle l'ordre dans lequel les éléments apparaissent dans le conteneur flexible en les affectant à des groupes ordinaux.</p>
+
+<ul>
+ <li>Valeur : un entier ({{cssxref("&lt;integer&gt;")}} (0 est la valeur par défaut)</li>
+ <li><a href="https://drafts.csswg.org/css-flexbox/#order-property">Spécification</a></li>
+</ul>
+
+<div class="highlight">
+<pre class="brush: css">@mixin order($int: 0) {
+  -webkit-box-ordinal-group: $int + 1;
+  -moz-box-ordinal-group: $int + 1;
+  -webkit-order: $int;
+  -ms-flex-order: $int;
+  order: $int;
+}</pre>
+</div>
+
+<h3 id="flex-grow"><code>flex-grow</code></h3>
+
+<p>La propriété {{cssxref("flex-grow")}} définit le facteur d'expansion flexible. Les nombres négatifs ne sont pas autorisés.</p>
+
+<ul>
+ <li>Valeur : un entier ({{cssxref("&lt;integer&gt;")}} (1 est la valeur par défaut)</li>
+ <li><a href="https://drafts.csswg.org/css-flexbox/#flex-grow-property">Spécification</a></li>
+</ul>
+
+<div class="highlight">
+<pre class="brush: css">@mixin flex-grow($int: 1) {
+  -webkit-box-flex: $int;
+  -moz-box-flex: $int;
+  -webkit-flex-grow: $int;
+  -ms-flex: $int;
+  flex-grow: $int;
+}</pre>
+</div>
+
+<h3 id="flex-shrink"><code>flex-shrink</code></h3>
+
+<p>La propriété {{cssxref("flex-shrink")}} permet de définir le facteur de réduction des éléments flexibles. Les nombres négatifs ne sont pas autorisés.</p>
+
+<ul>
+ <li>Valeur : un entier ({{cssxref("&lt;integer&gt;")}} (1 est la valeur par défaut)</li>
+ <li><a href="https://drafts.csswg.org/css-flexbox/#flex-shrink-property">Spécification</a></li>
+</ul>
+
+<div class="highlight">
+<pre class="brush: css">@mixin flex-shrink($int: 0) {
+  -webkit-flex-shrink: $int;
+  -moz-flex-shrink: $int;
+  -ms-flex: $int;
+  flex-shrink: $int;
+}</pre>
+</div>
+
+<h3 id="flex-basis"><code>flex-basis</code></h3>
+
+<p>La propriété {{cssxref("flex-basis")}} permet de définir la longueur de base à partir de laquelle s'étendre ou se réduire. Les longueurs négatives ne sont pas autorisées.</p>
+
+<ul>
+ <li>Valeurs : voir la page {{cssxref("flex-basis")}}, la valeur par défaut est <code>auto</code>.</li>
+ <li><a href="https://drafts.csswg.org/css-flexbox/#flex-basis-property">Spécification</a></li>
+</ul>
+
+<div class="highlight">
+<pre class="brush: css">@mixin flex-basis($value: auto) {
+  -webkit-flex-basis: $value;
+  flex-basis: $value;
+}</pre>
+</div>
+
+<h3 id="flex"><code>flex</code></h3>
+
+<p>La <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">propriété raccourcie</a> {{cssxref("flex")}} permet de définir les composants d'une longueur flexible : le facteur d'expansion (<code>flex-grow</code>), le facteur de réduction (<code>flex-shrink</code>) et la longueur de base (<code>flex-basis</code>). Lorsqu'un élément est un élément flexible, c'est <code>flex</code> qui sera utilisée (plutôt que <code>width</code> ou <code>height</code>) afin de déterminer la taille de l'élément. Si l'élément n'est pas un objet flexible, <code>flex</code> n'aura aucun effet.</p>
+
+<ul>
+ <li>Valeur : voir la page {{cssxref("flex")}} pour les valeurs possibles et la valeur par défaut</li>
+ <li><a href="https://drafts.csswg.org/css-flexbox/#flex-property">Spécification</a></li>
+</ul>
+
+<div class="highlight">
+<pre class="brush: css">@mixin flex($fg: 1, $fs: 0, $fb: auto) {
+
+  // Définir une variable pour l'utiliser
+  // avec les propriétés box-flex
+  $fg-boxflex: $fg;
+
+  // Box-Flex ne prend qu'une valeur, on prend donc
+  // la première valeur de la liste et on la renvoie.
+  @if type-of($fg) == 'list' {
+    $fg-boxflex: nth($fg, 1);
+  }
+
+  -webkit-box: $fg-boxflex;
+  -moz-box: $fg-boxflex;
+  -webkit-flex: $fg $fs $fb;
+  -ms-flex: $fg $fs $fb;
+  flex: $fg $fs $fb;
+}</pre>
+</div>
+
+<h3 id="justify-content"><code>justify-content</code></h3>
+
+<p>La propriété {{cssxref("justify-content")}} permet d'aligner les éléments flexibles le long de l'axe principal pour la ligne en cours dans le conteneur flexible. Cet alignement s'effectue après que les longueurs flexibles et les marges automatiques aient été résolues. Généralement, cela permet de distribuer l'espace restant entre les éléments d'une ligne qui ne sont pas flexibles ou qui ont atteint leur taille maximale. Cela contrôle également le comportement des éléments lorsqu'ils dépassent de la ligne.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Les valeurs de la forme <code>space-*</code> ne sont pas prises en charge avec les anciennes syntaxes.</p>
+</div>
+
+<ul>
+ <li>Valeurs : <code>flex-start</code> (la valeur par défaut)| <code>flex-end</code> | <code>center</code> | <code>space-between</code> | <code>space-around</code></li>
+ <li><a href="https://drafts.csswg.org/css-flexbox/#justify-content-property">Spécification</a></li>
+</ul>
+
+<div class="highlight">
+<pre class="brush: css">@mixin justify-content($value: flex-start) {
+  @if $value == flex-start {
+    -webkit-box-pack: start;
+    -moz-box-pack: start;
+    -ms-flex-pack: start;
+  } @else if $value == flex-end {
+    -webkit-box-pack: end;
+    -moz-box-pack: end;
+    -ms-flex-pack: end;
+  } @else if $value == space-between {
+    -webkit-box-pack: justify;
+    -moz-box-pack: justify;
+    -ms-flex-pack: justify;
+  } @else if $value == space-around {
+    -ms-flex-pack: distribute;
+  } @else {
+    -webkit-box-pack: $value;
+    -moz-box-pack: $value;
+    -ms-flex-pack: $value;
+  }
+  -webkit-justify-content: $value;
+  justify-content: $value;
+}
+  // Version plus courte :
+  @mixin flex-just($args...) { @include justify-content($args...); }</pre>
+</div>
+
+<h3 id="align-items"><code>align-items</code></h3>
+
+<p>Les objets flexibles peuvent être alignés le long de l'axe secondaire (comme pour <code>justify-content</code> mais dans l'axe perpendiculaire). {{cssxref("align-items")}} définit l'alignement par défaut de tous les objets du conteneur flexible. <code>align-self</code> permet aux objets flexibles de surcharger cette valeur (pour les objets anonymes, <code>align-self</code> correspondra toujours à <code>align-items</code>).</p>
+
+<ul>
+ <li>Valeurs : <code>flex-start</code> | <code>flex-end</code> | <code>center</code> | <code>baseline</code> | <code>stretch</code> (la valeur par défaut)</li>
+ <li><a href="https://drafts.csswg.org/css-flexbox/#align-items-property">Spécification</a></li>
+</ul>
+
+<div class="highlight">
+<pre class="brush: css">@mixin align-items($value: stretch) {
+  @if $value == flex-start {
+    -webkit-box-align: start;
+    -moz-box-align: start;
+    -ms-flex-align: start;
+  } @else if $value == flex-end {
+    -webkit-box-align: end;
+    -moz-box-align: end;
+    -ms-flex-align: end;
+  } @else {
+    -webkit-box-align: $value;
+    -moz-box-align: $value;
+    -ms-flex-align: $value;
+  }
+  -webkit-align-items: $value;
+  align-items: $value;
+}</pre>
+</div>
+
+<h3 id="align-self"><code>align-self</code></h3>
+
+<ul>
+ <li>Valeurs : <code>auto</code> (la valeur par défaut)| <code>flex-start</code> | <code>flex-end</code> | <code>center</code> | <code>baseline</code> | <code>stretch</code></li>
+ <li><a href="https://drafts.csswg.org/css-flexbox/#align-items-property">Spécification</a></li>
+</ul>
+
+<div class="highlight">
+<pre class="brush: css">@mixin align-self($value: auto) {
+  // No Webkit Box Fallback.
+  -webkit-align-self: $value;
+  @if $value == flex-start {
+    -ms-flex-item-align: start;
+  } @else if $value == flex-end {
+    -ms-flex-item-align: end;
+  } @else {
+    -ms-flex-item-align: $value;
+  }
+  align-self: $value;
+}</pre>
+</div>
+
+<h3 id="align-content"><code>align-content</code></h3>
+
+<p>La propriété {{cssxref("align-content")}} permet d'aligner les lignes créées dans le conteneur flexible lorsqu'il reste de l'espace le long de l'axe secondaire. Cette propriété n'a aucun effet lorsqu'il n'y a qu'une seule ligne.</p>
+
+<ul>
+ <li>Valeurs : <code>flex-start</code> | <code>flex-end</code> | <code>center</code> | <code>space-between</code> | <code>space-around</code> | <code>stretch</code> (la valeur par défaut)</li>
+ <li><a href="https://drafts.csswg.org/css-flexbox/#align-content-property">Spécification</a></li>
+</ul>
+
+<div class="highlight">
+<pre class="brush: css">@mixin align-content($value: stretch) {
+  // No Webkit Box Fallback.
+  -webkit-align-content: $value;
+  @if $value == flex-start {
+    -ms-flex-line-pack: start;
+  } @else if $value == flex-end {
+    -ms-flex-line-pack: end;
+  } @else {
+    -ms-flex-line-pack: $value;
+  }
+  align-content: $value;
+}</pre>
+</div>
diff --git a/files/fr/web/css/css_flexible_box_layout/ordonner_éléments_flexibles/index.html b/files/fr/web/css/css_flexible_box_layout/ordonner_éléments_flexibles/index.html
new file mode 100644
index 0000000000..acd32e0de0
--- /dev/null
+++ b/files/fr/web/css/css_flexible_box_layout/ordonner_éléments_flexibles/index.html
@@ -0,0 +1,139 @@
+---
+title: Ordonner les éléments flexibles
+slug: Web/CSS/CSS_Flexible_Box_Layout/Ordonner_éléments_flexibles
+tags:
+  - Accessibilité
+  - Boîtes flexibles
+  - CSS
+  - Guide
+  - Intermediate
+  - a11y
+  - flexbox
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items
+---
+<p>{{CSSRef}}</p>
+
+<p class="summary">Les nouvelles méthodes de disposition telles que les boîtes flexibles (<em>flexbox</em>) et la grille CSS (<em>CSS Grid</em>) apportent la possibilité de contrôler l'ordre du contenu. Dans cet article, nous verrons comment changer l'ordre visuel du contenu grâce aux boîtes flexibles. Nous examinerons également les conséquences de cette réorganisation du point de vue de l'accessibilité.</p>
+
+<h2 id="Inverser_l'affichage_des_éléments">Inverser l'affichage des éléments</h2>
+
+<p>La propriété {{cssxref("flex-direction")}} peut être utilisée avec quatre valeurs :</p>
+
+<ul>
+ <li><code>row</code></li>
+ <li><code>column</code></li>
+ <li><code>row-reverse</code></li>
+ <li><code>column-reverse</code></li>
+</ul>
+
+<p>Les deux premières valeurs permettent de conserver l'ordre des éléments tels qu'ils apparaissent dans le document source et de les afficher les uns à la suite des autres à partir de la ligne du début.</p>
+
+<p><img alt="Les objets sont affichés sur une ligne horizontale qui commence à gauche." src="https://mdn.mozillademos.org/files/15649/Basics1.png" style="display: flex; height: 152px; margin: 0px auto; width: 522px;"></p>
+
+<p><img alt="Les objets sont affichés sur une colonne qui commence en haut." src="https://mdn.mozillademos.org/files/15650/align10.png" style="display: flex; height: 273px; margin: 0px auto; width: 709px;"></p>
+
+<p>Les deux valeurs suivantes inversent l'ordre des éléments en échangeant les lignes de début et de fin.</p>
+
+<p><img alt="Les éléments sont affichés dans l'ordre inverse et commencent à droite." src="https://mdn.mozillademos.org/files/15651/align9.png" style="display: flex; height: 152px; margin: 0px auto; width: 631px;"></p>
+
+<p><img alt="Les éléments sont affichés en colonne et dans l'ordre inverse, ils commencent par le bas." src="https://mdn.mozillademos.org/files/15652/align11.png" style="display: flex; height: 273px; margin: 0px auto; width: 709px;"></p>
+
+<p>Rappelons ici que les lignes de début et de fin sont liées aux modes d'écritures. Les exemples en lignes ci-avant illustrent comment <code>row</code> et <code>row-reverse</code> fonctionnent dans une langue qui s'écrit de gauche à droite (le français par exemple). Si on travaille avec une langue écrite de droite à gauche (l'arabe par exemple), <code>row</code> correspondrait au côté droit et  <code>row-reverse</code> au côté gauche.</p>
+
+<p><img alt="Des conteneurs flexibles avec des lettres arabes illustrant comment le contenu commence à droite normalement et commence à gauche lorsqu'on utilise row-reverse." src="https://mdn.mozillademos.org/files/15647/order-rtl.png" style="display: flex; height: 302px; margin: 0px auto; width: 528px;"></p>
+
+<p>Cette méthode peut donc sembler efficace pour afficher des éléments dans un ordre inversé. Toutefois, il faut garder à l'esprit que seul l'<em>affichage</em> est inversé. Sur ce sujet, la spécification explique :</p>
+
+<blockquote>
+<p>“Note : les possibilités de réorganisation de la disposition flexible modifient uniquement et intentionnellement le rendu visuel. L'ordre de lecture et l'ordre de navigation restent basés sur l'ordre des éléments dans le document source. Cela permet aux auteurs de manipuler la présentation visuelle toute en conservant intact l'ordre de la source pour les agents utilisateurs qui n'utilisent pas CSS et pour les modèles de navigation linéaires comme la navigation vocale ou séquentielle.” - <a href="https://www.w3.org/TR/css-flexbox-1/#flow-order">Ordre et Orientation</a></p>
+</blockquote>
+
+<p>Si les éléments présentés étaient des liens ou d'autres éléments sur lequel un utilisateur pourrait naviguer grâce aux tabulations, l'ordre de la navigation au clavier serait celui des éléments dans le document source et ne correspondrait alors pas à l'ordre visuel.</p>
+
+<p>Si vous utilisez une valeur qui inverse cet affichage ou une méthode qui réordonne vos éléments, demandez-vous s'il ne faut pas modifier l'ordre logique des éléments dans le document source. Par la suite, la spécification émet un avertissement : ces valeurs de réorganisation ne doivent pas être utilisées comme palliatifs à un problème dans l'ordre du document source :</p>
+
+<blockquote>
+<p>“Les auteurs ne doivent pas utiliser <code>order</code> ou les valeurs <em>-reverse</em> de <code>flex-flow</code>/<code>flex-direction</code> comme remplacement d'un ordre correct dans le document source car cela peut nuire à l'accessibilité du document.<em>” </em></p>
+</blockquote>
+
+<div class="note">
+<p><strong>Note </strong>: Pendant plusieurs années, Firefox possédait un bug avec lequel il essayait de suivre l'ordre visuel plutôt que l'ordre de la source, à la différence des autres navigateurs. Ce bug a été corrigé. Il faut toujours considérer l'ordre des éléments dans le document source comme étant l'ordre logique, tous les agents utilisateurs modernes respectent la spécification à cet égard.</p>
+</div>
+
+<p>Dans l'exemple qui suit, nous avons ajouté une mise en forme sur le focus afin que vous puissiez voir quel lien est actif lorsque vous naviguez au clavier. Si vous modifier la valeur de <code>flex-direction</code>, vous pouvez voir que la navigation au clavier continue de suivre l'ordre dans lequel les éléments sont écrits dans le document source.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/order/order.html", '100%', 500)}}</p>
+
+<p>De la même façon, changer la valeur de <code>flex-direction</code> ne modifie pas l'ordre avec lequel on navigue parmi les éléments. Cela ne modifie pas non plus l'ordre dans lequel les éléments sont rendus à l'écran. Il s'agit uniquement d'une inversion visuelle.</p>
+
+<h2 id="La_propriété_order">La propriété <code>order</code></h2>
+
+<p>En plus de cette inversion, il est également possible de cibler des éléments en particulier et de modifier leur ordre visuel grâce à la propriété {{cssxref("order")}}.</p>
+
+<p>La propriété <code>order</code> permet de disposer les éléments au sein de <em>groupes ordinaux</em>. Cela signifie que chaque élément reçoit un entier qui représente le numéro d'un groupe. Les éléments sont ensuite placés visuellement dans l'ordre qui correspond à cet entier, les éléments avec les numéros les plus petits étant placés en premiers. Si plusieurs éléments possèdent le même coefficient, les éléments de ce groupe sont alors ordonnés en suivant l'ordre du document source entre eux.</p>
+
+<p>Dans l'exemple qui suit, on dispose de 5 objets flexibles et on affecte les valeurs <code>order</code> comme suit :</p>
+
+<ul>
+ <li>Premier élément selon la source : <code>order: 2</code></li>
+ <li>Deuxième élément selon la source : <code>order: 3</code></li>
+ <li>Troisième élément selon la source : <code>order: 1</code></li>
+ <li>Quatrième élément selon la source :<code>order: 3</code></li>
+ <li>Cinquième élément selon la source :<code>order: 1</code></li>
+</ul>
+
+<p>Les éléments seront affichés sur la page dans l'ordre suivant :</p>
+
+<ul>
+ <li>Troisième élément selon la source : <code>order: 1</code></li>
+ <li>Cinquième élément selon la source : <code>order: 1</code></li>
+ <li>Premier élément selon la source : <code>order: 2</code></li>
+ <li>Deuxième élément selon la source : <code>order: 3</code></li>
+ <li>Quatrième élément selon la source : <code>order: 3</code></li>
+</ul>
+
+<p><img alt="Les éléments contiennent un nombre qui illustre leur ordre selon la source et on peut voir que leur ordre visuel a été réarrangé." src="https://mdn.mozillademos.org/files/15653/order-property.png" style="display: flex; height: 100px; margin: 0px auto; width: 634px;"></p>
+
+<p>Vous pouvez manipuler les valeurs dans l'exemple qui suit afin de voir comment l'ordre est modifié. Essayez également de modifier la valeur de <code>flex-direction</code> pour utiliser <code>row-reverse</code> — la ligne de début est inversée et l'ordre des éléments commence à partir du côté opposé.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/order/flex-direction.html", '100%', 440)}}</p>
+
+<p>Par défaut, la valeur de la propriété <code>order</code> est <code>0</code> pour les éléments flexibles. Aussi, si on utilise un coefficient supérieur à 0, les éléments concernés seront affichés après les éléments pour lesquels aucune valeur explicite n'a été fournie pour <code>order</code>.</p>
+
+<p>On peut également utiliser des valeurs négatives. Cela est plutôt pratique si on souhaite afficher un élément en premier sans avoir à indiquer de valeurs pour les autres éléments : il suffira d'affecter l'ordre <code>-1</code> au premier élément. Cette valeur étant inférieure à 0, l'élément sera toujours affiché en premier.</p>
+
+<p>Dans l'exemple qui suit, les éléments sont disposés avec les boîtes flexibles. En modifiant l'élément qui possède la classe <code>active</code> dans le code HTML, vous pouvez modifier l'élément qui apparaît en premier et qui prend alors toute la largeur en haut, les autres éléments étant affichés en dessous.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/order/negative-order.html", '100%', 520)}}</p>
+
+<p>Les éléments sont affichés dans ce que la spécification intitule <em>un ordre modifié à partir de l'ordre du document (en anglais "order-modified document order"</em>). La valeur de la propriété <code>order</code> est prise en compte avant que les éléments soient affichés.</p>
+
+<p>L'ordre modifie également l'ordre de rendu des éléments à l'écran. Les éléments pour lesquels <code>order</code> est plus petit seront affichés en premier et ceux avec un coefficient d'ordre plus élevé seront affichés ensuite.</p>
+
+<h2 id="La_propriété_order_et_l'accessibilité">La propriété <code>order</code> et l'accessibilité</h2>
+
+<p>La propriété <code>order</code> aura exactement les mêmes conséquences qu'une modification de <code>flex-direction</code> sur l'accessibilité. Utiliser <code>order</code> modifie l'ordre dans lequel les éléments sont affichés à l'écran et l'ordre dans lequel ils sont présentés visuellement. Cela ne modifie pas l'ordre de navigation. Aussi, si un utilisateur navigue grâce aux tabulations entre les éléments, cette disposition peut prêter à confusion.</p>
+
+<p>En utilisant la tabulation pour naviguer au sein des exemples de cette page, vous pouvez voir comment l'ordre peut créer une expérience pour le moins étrange de navigation si on n'utilise pas de pointeur (souris, stylet, interface tactile). Pour approfondir cette notion et les problèmes qu'un déphasage entre l'ordre visuel et logique peut causer, vous pouvez consulter les ressources suivantes :</p>
+
+<ul>
+ <li><a href="https://tink.uk/flexbox-the-keyboard-navigation-disconnect/">Une déconnexion entre les boîtes flexibles et la navigation au clavier (en anglais)</a></li>
+ <li><a href="http://adrianroselli.com/2015/10/html-source-order-vs-css-display-order.html">L'ordre de la source HTML vs l'ordre d'affichage CSS (en anglais)</a></li>
+ <li><a href="https://alastairc.ac/2017/06/the-responsive-order-conflict">Le conflit entre l'ordre <em>responsive</em> et le focus clavier (en anglais)</a></li>
+</ul>
+
+<h2 id="Cas_d'utilisation_pour_order">Cas d'utilisation pour <code>order</code></h2>
+
+<p>Il existe certains cas où l'ordre logique (correspondant à l'ordre de lecture) est distinct de l'ordre visuel. Dans ces cas, utiliser la propriété <code>order</code> à bon escient permet d'implémenter certains motifs récurrents.</p>
+
+<p>Prenons comme exemple une disposition avec des cartes dont chacune contient une nouvelle. Le titre de la nouvelle est l'élément qui doit être mis en avant et celui sur lequel l'utilisateur doit arriver s'il navigue au clavier à la recherche d'un contenu à lire. Chaque carte possède également une date de façon à obtenir un <em>design</em> comme celui-ci.</p>
+
+<p><img alt="Un composant avec une date, un titre puis un contenu." src="https://mdn.mozillademos.org/files/15648/order-card.png" style="height: 400px; width: 618px;"></p>
+
+<p>Visuellement, la date apparaît au-dessus du titre. Toutefois, si la carte était lue par un lecteur d'écran, on préfèrerait que le titre soit annoncé en premier puis que soit ensuite lue la date de publication. Pour ce faire, on peut utiliser la propriété <code>order</code>.</p>
+
+<p>Dans cet exemple, la carte sera le conteneur flexible et <code>flex-direction</code> aura la valeur <code>column</code>. Pour la date, on affectera un ordre avec la propriété <code>order</code> qui vaut <code>-1</code> qui permettra de la placer au-dessus du titre.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/order/usecase-order.html", '100%', 730)}}</p>
+
+<p>Ces légères adaptations sont caractéristiques des cas où la propriété <code>order</code> se révèle pertinente. L'ordre logique doit suivre l'ordre de lecture et de navigation au clavier dans le document. Il doit maintenir la structure de la façon la plus accessible. <code>order</code> peut alors être ensuite utilisé pour opérer des ajustements visuels. Lorsque vous réordonnez des éléments, assurez-vous que cela n'a pas d'impact sur les éléments parmi lesquels on peut naviguer au clavier. De façon générale, lorsque vous utilisez de nouvelles méthodes de disposition, assurez-vous que la phase de test via le navigateur inclut également des tests de navigation au clavier (sans souris ni écran tactile). Vous pourrez alors rapidement constater si vos choix de développement rendent certains contenus difficiles d'accès.</p>
diff --git a/files/fr/web/css/css_flexible_box_layout/rétrocompatibilite_de_flexbox/index.html b/files/fr/web/css/css_flexible_box_layout/rétrocompatibilite_de_flexbox/index.html
new file mode 100644
index 0000000000..b36e1eb0f4
--- /dev/null
+++ b/files/fr/web/css/css_flexible_box_layout/rétrocompatibilite_de_flexbox/index.html
@@ -0,0 +1,121 @@
+---
+title: Rétrocompatibilité de flexbox
+slug: Web/CSS/CSS_Flexible_Box_Layout/Rétrocompatibilite_de_flexbox
+tags:
+  - '@supports'
+  - Boîtes flexibles
+  - CSS
+  - Guide
+  - Intermediate
+  - flexbox
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Les boîtes flexibles (<em>flexbox</em>) sont largement prises en charge parmi les navigateurs modernes. Toutefois, quelques problèmes peuvent survenir. Dans ce guide, nous verrons précisément quelle est la prise en charge des boîtes flexibles dans les navigateurs. Nous verrons les problèmes éventuels ainsi que les ressources et méthodes afin de créer des méthodes de contournement ou des alternatives.</p>
+
+<h2 id="Il_était_une_fois_flexbox…">Il était une fois <em>flexbox</em>…</h2>
+
+<p>Comme toute spécification CSS, la spécification Flexbox a vu de nombreuses modifications avant d'atteindre le statut de <em>Candidate Recommendation</em> dont elle dispose aujourd'hui. Dans cet état actuel, il ne devrait pas y avoir de modification majeur dans la spécification, mais cette stabilité n'a pas toujours existé par le passé.</p>
+
+<p>Les boîtes flexibles ont été implémentées de façon expérimentale dans plusieurs navigateurs. À cette époque, créer une implémentation expérimentale consistait à utiliser un préfixe spécifique. Ces préfixes devaient permettre aux implémentations de la spécification d'être testées et manipulées par les développeurs des navigateurs et par les développeurs web, sans qu'il y ait de conflit avec les autres implémentations. On ne devait pas utiliser d'implémentation expérimentale pour du code de production. Toutefois, les préfixes ont fini par être utilisés en production et les modifications apportées à la spécification expérimentale nécessitaient une réactivité des développeurs web pour maintenir leurs sites.</p>
+
+<p><a href="https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">En 2009</a>, la spécification était plutôt différente. Pour créer un conteneur flexible, il fallait utiliser <code>display: box</code> et on disposait ensuite de différentes propriétés <code>box-*</code> qui permettaient d'obtenir des résultats semblables à ceux qu'offrent les boîtes flexibles actuelles.</p>
+
+<p>Vint ensuite <a href="https://www.w3.org/TR/2012/WD-css3-flexbox-20120322/">une mise à jour de la spécification</a> pour mettre à jour la syntaxe : <code>display: flexbox</code> — là encore, ces valeurs étaient préfixées.</p>
+
+<p>Enfin, la spécification a été mise à jour pour définir <code>display: flex</code> comme façon de créer un conteneur flexible. La prise en charge des navigateurs sur la version à jour de la spécification est excellent à partir de ce moment.</p>
+
+<p>Quelques anciens articles font référence à d'anciennes versions de la spécification. Ceux-ci sont facilement identifiables en raison des modifications concernant la création d'un conteneur flexible. Si vous lisez des règles telles que <code>display: box</code> ou <code>display: flexbox</code>, vous pouvez en déduire qu'il s'agit d'informations obsolètes.</p>
+
+<h2 id="État_de_la_compatibilité_des_navigateurs">État de la compatibilité des navigateurs</h2>
+
+<p>La prise en charge des navigateurs pour les boîtes flexibles est excellente et la grande partie des navigateurs n'ont pas besoin de préfixe. Safari a été le dernier des principaux navigateurs à retirer les préfixes avec la sortie de Safari 9 en 2015. Les deux navigateurs pour lesquels il est nécessaire de faire attention à la compatibilité sont :</p>
+
+<ul>
+ <li>Internet Explorer 10 qui implémentait la version <code>display: flexbox</code> avec le préfixe <code>-ms-</code>.</li>
+ <li>UC Browser qui prend en charge la version de 2009 avec <code>display: box</code> et avec le préfixe <code>-webkit-</code>.</li>
+</ul>
+
+<p>On notera qu'Internet Explorer 11 prend bien en charge la spécification actuelle avec <code>display: flex</code> mais que de nombreux bugs sont présents dans cette implémentation.</p>
+
+<h2 id="Problèmes_fréquents">Problèmes fréquents</h2>
+
+<p>La plupart des problèmes relatifs aux boîtes flexibles sont liés aux modifications de la spécification lors de son développement et au fait que de nombreux développeurs ont essayé d'utiliser des implémentations expérimentales en production. Si vous souhaitez garantir une rétrocompatibilité avec certaines anciennes versions de navigateurs et notamment IE10 et IE11, le site <a href="https://github.com/philipwalton/flexbugs">Flexbugs</a> représente une ressource précieuse. Vous pourrez voir que de nombreux bugs sont présents pour d'anciennes versions des navigateurs et sont désormais corrigés pour les versions actuelles. Chacun de ces bugs possède une méthode de contournement associée, ce qui peut faire gagner un temps précieux.</p>
+
+<p>Si vous souhaitez inclure de très anciens navigateurs prenant en charge les boîtes flexibles, il vous faudra inclure les préfixes éditeurs dans votre feuille CSS, en plus de la version non-préfixée. Cela devient de moins en moins nécessaire vue l'étendue de la compatibilité actuelle.</p>
+
+<pre class="brush: css">.wrapper {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}</pre>
+
+<p><a href="https://autoprefixer.github.io/">Autoprefixer Online</a> est un outil utile pour déterminer quels préfixes sont recommandés selon les versions des navigateurs qu'on souhaite prendre en charge. Vous pouvez également consulter <a href="https://caniuse.com/#feat=flexbox">Can I Use</a> ou les tableaux de compatibilité en bas des pages de référence MDN pour savoir quand les préfixes ont été retirés des navigateurs.</p>
+
+<h2 id="Techniques_de_recours">Techniques de recours</h2>
+
+<p>La mise en place des boîtes flexibles dans un document est effectuée grâce à la propriété {{cssxref("display")}}. Lorsqu'on souhaite prendre en charge de très anciens navigateurs qui ne prennent pas du tout en charge les boîtes flexibles, des méthodes alternatives peuvent être construites en surchargeant une méthode de disposition par une autre. La spécification définit ce qui se produit si on utilise une autre méthode de disposition sur un élément qui devient ensuite un élément flexible.</p>
+
+<h3 id="Éléments_flottants">Éléments flottants</h3>
+
+<blockquote>
+<p>“<code>float</code> et <code>clear</code> ne créent pas de flottement ou de dégagement pour les éléments flexibles et ne les retirent pas du flux.” - <a href="https://www.w3.org/TR/css-flexbox-1/#flex-containers">3. Conteneurs flexibles</a></p>
+</blockquote>
+
+<p>Dans l'exemple qui suit, on a deux blocs flottants et on applique ensuite <code>display: flex</code> sur le conteneur. Les éléments sont alors des éléments flexibles ce qui signifie qu'ils sont étirés sur des hauteurs égales. Tout comportement associé au flottement n'aura pas lieu.</p>
+
+<p>Pour tester le comportement alternatif, vous pouvez retirer <code>display: flex</code> du conteneur englobant.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/float.html", '100%', 550)}}</p>
+
+<h3 id="display_inline-block"><code>display: inline-block</code></h3>
+
+<p>Lorsqu'un élément disposé avec <code>inline-block</code> devient un élément flexible, cet élément devient analogue à un bloc et le comportement de <code>display: inline-block</code> qui permet de conserver les espaces blancs entre les éléments ne s'applique plus.</p>
+
+<p>Vous pouvez retirer la règle avec <code>display: flex</code> dans l'exemple qui suit pour voir le comportement alternatif. Vous verrez de l'espace ajouté entre les éléments car c'est ce que préfère <code>display: inline-block</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/inline-block.html", '100%', 550)}}</p>
+
+<h3 id="display_table-"><code>display: table-</code><em> </em></h3>
+
+<p>Les propriétés CSS relatives aux dispositions en tableaux s'avèrent potentiellement très utiles comme méthode de recours car elles permettent d'obtenir des organisations de contenu analogues avec des colonnes sur toute la hauteur, du centrage vertical et car elles fonctionnent jusqu'à Internet Explorer 8.</p>
+
+<p>Si vous utilisez <code>display: table-cell</code> sur un élément HTML, cet élément récupèrera la mise en forme d'une cellule de tableau HTML. Pour celles-ci, CSS crée des boîtes anonymes qui représentent ces éléments et il n'est pas nécessaire d'envelopper chaque élément dans un conteneur pour représenter une ligne puis dans un second qui représente le tableau. Il n'est pas possible de mettre en forme ces boîtes anonymes, celles-ci servent uniquement à corriger la structure.</p>
+
+<p>Si vous déclarez ensuite <code>display: flex</code> sur l'élément parent, ces boîtes anonymes ne sont pas créées et l'élément redevient un enfant direct qui peut devenir un élément flexible, perdant tout aspect relatif au tableau.</p>
+
+<blockquote>
+<p>“Note : certaines valeurs de <code>display</code> déclenchent normalement la création de boîtes anonymes autour de la boîte originale. Si une telle boîte est un élément flexible, cet élément devient un bloc puis la création des boîtes anonymes n'a pas lieu. Ainsi, deux éléments flexibles adjacents avec <code>display: table-cell</code> deviendront deux éléments flexibles distincts avec <code>display: block</code> plutôt que d'être enveloppés au sein d'un même tableau anonyme.” - <a href="https://www.w3.org/TR/css-flexbox-1/#flex-items">4. Éléments flexibles</a></p>
+</blockquote>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/table-cell.html", '100%', 550)}}</p>
+
+<h3 id="La_propriété_vertical-align">La propriété <code>vertical-align</code></h3>
+
+<p>L'exemple qui suit illustre l'utilisation de la propriété {{cssxref("vertical-align")}} associée au mode <code>display: inline-block</code>. Les deux modes <code>display: table-cell</code> et <code>display: inline-block</code> permettent d'utiliser cette propriété. La propriété <code>vertical-align</code> permet d'opérer un alignement vertical avant l'application des boîtes flexibles. Cette propriété est ignorée avec les boîtes flexibles et elle peut donc être utilisée avec <code>display: table-cell</code> ou <code>display: inline-block</code> comme méthode d'alignement alternative aux propriétés d'alignement des boîtes flexibles.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/vertical-align.html", '100%', 550)}}</p>
+
+<h2 id="Requêtes_de_fonctionnalités_et_flexbox">Requêtes de fonctionnalités et <em>flexbox</em></h2>
+
+<p>Il est possible d'utiliser <a href="/fr/docs/Web/CSS/%40supports">les requêtes de fonctionnalité (<em>feature queries</em>)</a> afin de détecter la prise en charge des boîtes flexibles :</p>
+
+<pre class="brush: css">@supports (display: flex) {
+  // code utilisé pour les navigateurs qui
+  // prennent en charge cette fonctionnalité
+}</pre>
+
+<p>On notera qu'Internet Explorer 11 ne prend pas en charge les requêtes de fonctionnalité mais prend bien en charge les boîtes flexibles. Si vous choisissez de considérer l'implémentation d'IE11 comme étant trop erronée et que vous souhaitez que ce navigateur utilise votre code de recours, vous pouvez alors utiliser les requêtes de fonctionnalité pour ne servir le code <em>flexbox</em> qu'aux navigateurs qui disposent d'une prise en charge suffisante. Pour rappel, si on souhaite inclure les versions des navigateurs qui utilisaient des préfixes spécifiques, on devra inclure la version préfixée dans la requête de fonctionnalité. La requête suivant inclura par exemple UC Browser qui prend en charge les requêtes de fonctionnalités et une ancienne syntaxe, préfixée, pour les boîtes flexibles :</p>
+
+<pre class="brush: css">@supports (display: flex) or (display: -webkit-box) {
+  // code pour les navigateurs qui
+  // prennent en charge cette fonctionnalité
+}</pre>
+
+<p>Pour plus d'informations sur les requêtes de fonctionnalités, vous pouvez lire <em><a href="https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/">Using Feature Queries in CSS</a></em><a href="https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/"> (en anglais)</a> sur le blog Hacks de Mozilla.</p>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>Bien que nous ayons vu ici certains problèmes potentiels et méthodes alternatives, les boîtes flexibles peuvent tout à fait être utilisées en production et de façon généralisée. Ce guide vous sera utile si vous rencontrez un problème particulier ou qu'il vous faut prendre en charge de plus vieux navigateurs.</p>
diff --git a/files/fr/web/css/css_flow_layout/dans_le_flux_ou_en_dehors/index.html b/files/fr/web/css/css_flow_layout/dans_le_flux_ou_en_dehors/index.html
new file mode 100644
index 0000000000..663f0a9c8a
--- /dev/null
+++ b/files/fr/web/css/css_flow_layout/dans_le_flux_ou_en_dehors/index.html
@@ -0,0 +1,68 @@
+---
+title: Être ou ne pas être dans le flux
+slug: Web/CSS/CSS_Flow_Layout/Dans_le_flux_ou_en_dehors
+tags:
+  - CSS
+  - Guide
+  - Intermédiaire
+translation_of: Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Dans <a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Disposition_de_bloc_en_ligne_avec_flux_normal">le précédent guide</a>, nous avons vu le fonctionnement de la disposition en ligne et en bloc dans le flux normal. Tous les éléments qui sont « dans » le flux seront disposés grâce à cette méthode.</p>
+
+<p>Dans l'exemple qui suit, on a un titre, un paragraphe, une liste puis un paragraphe final qui contient un élément <code>strong</code>. Le titre et les paragraphes sont des éléments de blocs et l'élément <code>strong</code> est un élément en ligne. La liste est affichée en utilisant les boîtes flexibles afin d'avoir les éléments de la liste sur une même ligne mais cette liste contribue bien à la disposition en ligne et en bloc car le conteneur a un type <code>display</code> externe qui vaut <code>block</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/in-flow/in-flow.html", '100%', 800)}}</p>
+
+<p>Dans ce cas, on peut dire que tous les éléments sont « dans le flux » et ils apparaissent sur la page selon le même ordre que le document source.</p>
+
+<h2 id="Retirer_un_élément_du_flux">Retirer un élément du flux</h2>
+
+<p>Tous les éléments d'un document sont dans le flux à l'exception :</p>
+
+<ul>
+ <li>des éléments flottants</li>
+ <li>des éléments avec <code>position: absolute</code> ou avec <code>position: fixed</code></li>
+ <li>de l'élément racine (<code>html</code>)</li>
+</ul>
+
+<p>Les éléments qui ne sont pas dans le flux créent un nouveau contexte de formatage de bloc (ou <em>Block Formatting Context</em> (BFC) en anglais) et tout ce qui est dans ce contexte peut être vu comme une disposition imbriquée, séparée et indépendante du reste de la page. L'élément racine est ainsi en dehors du flux car c'est le conteneur qui contient l'intégralité du document et qui fournit le contexte de formatage de bloc pour l'ensemble du document.</p>
+
+<h3 id="Les_éléments_flottants">Les éléments flottants</h3>
+
+<p>Dans cet exemple, on a un élément <code>div</code> puis deux paragraphes. On a ajouté une couleur d'arrière-plan sur les paragraphes puis on a appliqué un flottement à gauche pour l'élément <code>div</code>. L'élément <code>div</code> est désormais en dehors du flux.</p>
+
+<p>Un élément flottant est d'abord disposé à l'endroit où il aurait été dans le flux normal puis il est retiré du flux et déplacé. Ici, il est déplacé le plus à gauche possible.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/in-flow/float.html", '100%', 800)}}</p>
+
+<p>On peut voir que la couleur du paragraphe suivant s'étend en dessous. Seules les boîtes de ligne du paragraphe ont été raccourcies et causent le passage à la ligne du contenu autour de l'élément flottant. La boîte du paragraphe s'affiche toujours selon les règles du flux normal. C'est pour cela qu''il faut ajouter une marge autour de l'élément flottant si on veut créer un espace autour. Avec une marge, on repoussera les boîtes de lignes adjacentes. Il n'est pas possible d'appliquer quoi que ce soit au contenu dans le flux pour obtenir le même effet.</p>
+
+<h3 id="Le_positionnement_absolu">Le positionnement absolu</h3>
+
+<p>En utilisant <code>position: absolute</code> ou <code>position: fixed</code> sur un élément, celui-ci est retiré du flux et tout l'espace qu'il aurait occupé est retiré. Dans l'exemple ci-après, on a trois paragraphes et le deuxième est ciblé avec <code>position</code> <code>absolute</code> et décalé avec les valeurs <code>top: 30px</code> et <code>right: 30px</code>. Cet élément est retiré du flux du document.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/in-flow/abspos.html", '100%', 700)}}</p>
+
+<p>Utiliser <code>position: fixed</code> retire également un objet de flux. Dans ce cas, les décalages seront calculés relativement à la zone d'affichage (<em>viewport</em>) plutôt que par rapport au bloc englobant.</p>
+
+<p>Lorsqu'on retire un élément du flux grâce au positionnement, il faut également gérer les cas où le contenu peut se superposer. Lorsqu'un élément est en dehors du flux, les autres éléments ne « sauront » plus qu'il est là et ne seront pas déplacés pour lui laisser la place.</p>
+
+<h3 id="Le_positionnement_relatif_et_le_flux">Le positionnement relatif et le flux</h3>
+
+<p>Si on fournit un positionnement relatif en appliquant <code>position: relative</code> à un élément, celui-ci reste dans le flux mais on peut alors utiliser des décalages pour le déplacer. Toutefois, l'espace initialement occupé par l'élément est toujours réservé, comme on peut le voir dans l'exemple qui suit.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/in-flow/relative.html", '100%', 800)}}</p>
+
+<p>Dès qu'on retire ou qu'on décale un élément de son emplacement dans le flux normal, il faut s'attendre à devoir gérer le contenu environnant pour éviter les chevauchements. On pourra par exemple utiliser les flottements ou s'assurer que l'élément utilisant <code>position: absolute</code> n'est pas sur un autre contenu. C'est pour ces raisons que les méthodes qui retirent les éléments du flux doivent être utilisées avec circonspection.</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Dans ce guide, nous avons vu les différentes façons qui permettent de retirer un élément du flux afin d'obtenir certains positionnements spécifiques. Dans le prochain guide, nous verrons un concept similaire, celui de <a href="/fr/docs/Web/CSS/Block_formatting_context">contexte de formatage de bloc</a> dans <a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Explications_contextes_formatage">Explications relatives aux contextes de formatage</a>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Le_positionnement">En apprendre plus sur le positionnement</a></li>
+</ul>
diff --git a/files/fr/web/css/css_flow_layout/disposition_de_bloc_en_ligne_avec_flux_normal/index.html b/files/fr/web/css/css_flow_layout/disposition_de_bloc_en_ligne_avec_flux_normal/index.html
new file mode 100644
index 0000000000..8566b8accd
--- /dev/null
+++ b/files/fr/web/css/css_flow_layout/disposition_de_bloc_en_ligne_avec_flux_normal/index.html
@@ -0,0 +1,128 @@
+---
+title: Disposition de bloc et en ligne avec le flux normal
+slug: Web/CSS/CSS_Flow_Layout/Disposition_de_bloc_en_ligne_avec_flux_normal
+tags:
+  - CSS
+  - Guide
+  - Intermédiaire
+translation_of: Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Dans ce guide, nous verrons le comportement des éléments de bloc et des éléments en ligne lorsqu'ils sont placés dans le flux normal.</p>
+
+<p>Le flux normal est défini par <a href="https://www.w3.org/TR/CSS2/visuren.html#normal-flow">la spécification CSS 2.1</a> qui explique comment les boîtes du flux normal s'inscrivent dans le contexte de formatage. Les boîtes peuvent être de bloc (<em>block</em>) ou en ligne (<em>inline</em>) mais pas les deux à la fois. Les boîtes de bloc contribuent au contexte de formatage des blocs et les boîtes en ligne contribuent au contexte de formatage en ligne.</p>
+
+<p>Le comportement des éléments qui ont un contexte de formatage de bloc ou en ligne est également défini dans cette spécification. Pour les éléments avec un contexte de formatage de bloc, voici ce qui est indiqué dans la spécification :</p>
+
+<blockquote>
+<p>« Dans un contexte de formatage de bloc, les boîtes sont disposées l'une après l'autre, verticalement, en démarrant en haut du bloc englobant. La distance verticale entre deux boîtes voisines est déterminée par les propriétés relatives aux marges. Les marges verticales fusionnent pour deux boîtes de bloc voisines au sein d'un contexte de formatage de bloc.<br>
+ <br>
+ Dans un contexte de formatage de bloc, chaque bord gauche de chaque boîte touche le bord gauche du bloc englobant (pour les documents écrits de droite à gauche, ce sont les bords droits qui coïncident). » - 9.4.1</p>
+</blockquote>
+
+<p>Quant aux éléments du contexte de formatage en ligne :</p>
+
+<blockquote>
+<p>« Dans un contexte de formatage en ligne, les boîtes sont disposées horizontalement les unes après les autres, en démarrant en haut du bloc englobant. Les marges, bordures, espaces de remplissage (<em>padding</em>) entre ces boîtes sont respectées. L'alignement vertical des boîtes peut varier (alignement du bas et du haut ou alignement des lignes de base du texte). La zone rectangulaire contenant les boîtes qui forment une ligne est appelée une "boîte de ligne". » - 9.4.2</p>
+</blockquote>
+
+<p>On notera que la spécification CSS 2.1 décrit des documents dont le mode d'écriture est horizontal, allant de haut en bas. C'est notamment le cas avec la description de la distance verticale entre les boîtes de bloc. Le comportement des éléments de bloc et en ligne est donc le même lorsqu'on a un mode d'écriture vertical. Nous verrons cela dans un article suivant.</p>
+
+<h2 id="Les_éléments_qui_participent_à_un_contexte_de_formatage_de_bloc">Les éléments qui participent à un contexte de formatage de bloc</h2>
+
+<p>Les éléments de bloc organisés avec un mode d'écriture horizontal (un document en français par exemple) sont disposés verticalement les uns au dessus des autres.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16125/mdn-horizontal.png" style="height: 382px; width: 521px;"></p>
+
+<p>Avec un mode d'écriture vertical, les boîtes seraient organisées horizontalement.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16126/mdn-vertical.png" style="height: 382px; width: 418px;"></p>
+
+<p>Dans la suite de ce guide, nous prendrons l'hypothèse d'un mode d'écriture horizontal. Toutefois, tout ce qui est décrit fonctionne de la même façon pour un mode d'écriture vertical.</p>
+
+<p>Comme indiqué dans la spécification, les marges entre deux boîtes de bloc permettent de créer une séparation entre les éléments. On peut voir ceci dans un exemple simple avec deux paragraphes auxquels on ajoute une bordure. La feuille de style par défaut du navigateur ajoute un espace entre les paragraphes en ajoutant une marge en haut et en bas.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow.html", '100%', 700)}}</p>
+
+<p>Si on définit explicitement des marges nulles sur les paragraphes, les bordures se toucheront.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-margin-zero.html", '100%', 700)}}</p>
+
+<p>Par défaut, les éléments de bloc consomment tout l'espace disponible sur l'axe en ligne. Ainsi, les paragraphes « s'étalent » horizontalement autant qu'ils le peuvent au sein du bloc englobant. Si on fixait leur longueur afin que deux paragraphes puissent tenir horizontalement, ils seraient tout de même l'un au dessus de l'autre. Chaque boîte de bloc commencera au début de l'axe de bloc du bloc englobant.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-width.html", '100%', 700)}}</p>
+
+<h3 id="La_fusion_des_marges">La fusion des marges</h3>
+
+<p>La spécification indique que les marges verticales entre chaque éléments de bloc <em>fusionnent</em>. Cela signifie que si un élément avec une marge en haut suit directement un élément avec une marge en bas, plutôt que la marge résultante soit la somme des deux marges, on aura une fusion des marges et ce sera uniquement la plus grande des marges qui sera appliquée.</p>
+
+<p>Dans l'exemple suivant, les paragraphes ont une marge en haut qui mesure 20 pixels et une marge en bas qui mesure 40 pixels. La taille de la marge entre les deux paragraphes est donc de <code>40px</code> car la plus petite est « fusionnée » avec la plus grande.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-collapsing.html", '100%', 500)}}</p>
+
+<p>Pour en savoir plus à propos de la fusion des marges, vous pouvez lire <a href="/fr/docs/Web/CSS/Modèle_de_boîte_CSS/Fusion_des_marges">l'article dédié à la fusion des marges</a>.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Si vous n'êtes pas certain⋅e que la fusion des marges a lieu, vous pouvez utiliser les outils de développement de votre navigateur afin de voir la valeur réellement utilisée pour les marges.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16124/box-model.png" style="height: 848px; width: 828px;"></p>
+</div>
+
+<h2 id="Les_éléments_qui_participent_à_un_contexte_de_formatage_en_ligne">Les éléments qui participent à un contexte de formatage en ligne</h2>
+
+<p>Les éléments en ligne sont affichés les uns à la suite des autres selon la direction avec laquelle les phrases sont écrites pour ce mode d'écriture. Ces boîtes en ligne se suivent les unes après les autres. S'il n'y a pas suffisamment d'espace dans la boîte englobante, une boîte en ligne pourra être scindée pour passer à la ligne. Les lignes ainsi créées sont appelées des boîtes de ligne. Comme la plupart des objets en CSS, les éléments en ligne disposent bien d'une boîte (qu'on oublie parfois).</p>
+
+<p>Dans l'exemple suivant on a trois boîtes en ligne créées par un paragraphe avec un élément {{HTMLElement("strong")}} à l'intérieur.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/inline.html", '100%', 500)}}</p>
+
+<p>Les boîtes autour des mots, avant et après l'élément {{HTMLElement("&lt;strong&gt;")}} sont qualifiées de boîtes <em>anonymes</em>. Ce sont des boîtes qui permettent que tout soit contenu dans une boîte mais on ne peut pas cibler ces boîtes spécifiquement.</p>
+
+<p>La taille de la boîte de la ligne sur l'axe orthogonal à l'axe de lecture est définie avec la taille de la plus grande boîte qu'elle contient. Dans l'exemple suivant, on a un élément {{HTMLElement("&lt;strong&gt;")}} qui a une taille de 300% et c'est donc son contenu qui détermine la hauteur de la boîte de ligne pour cette ligne.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/line-box.html", '100%', 500)}}</p>
+
+<p>Pour en savoir plus sur le comportement des boîtes en ligne et des boîtes de bloc, vous pouvez consulter <a href="/fr/docs/Web/CSS/Modèle_de_mise_en_forme_visuelle">le guide sur le modèle de formatage visuel</a>.</p>
+
+<h2 id="La_propriété_display_et_la_disposition_de_flux">La propriété <code>display</code> et la disposition de flux</h2>
+
+<p>En plus des règles existantes en CSS 2.1, les spécifications CSS ultérieures décrivent plus en détail le comportement des boîtes en ligne et des boîtes en bloc. La propriété <code>display</code> définit la façon dont une boîte, et celles qu'elle contient, se comporte. Avec la spécification <em>CSS Display Model Level 3</em>, on en apprend plus sur la façon dont la propriété <code>display</code> modifie comportement des boîtes et des boîtes qu'elles génèrent.</p>
+
+<p>Le type d'affichage d'un élément définit deux choses :</p>
+
+<ul>
+ <li>le type d'affichage extérieur, qui décrit comment la boîte s'affiche au sein des éléments du même contexte de formatage</li>
+ <li>le type d'affichage intérieur comment les boîtes situées à l'intérieur de cet élément doivent se comporter</li>
+</ul>
+
+<p>Dans l'exemple suivant, on a un élément {{HTMLElement("div")}} sur lequel on a appliqué <code>display: flex</code>. Le conteneur flexible se comporte comme un élément de bloc : il s'affiche sur une nouvelle ligne et occupe tout l'espace du bloc englobant dans l'axe en ligne. Aussi, le type d'affichage extérieur vaut <code>block</code>.</p>
+
+<p>Les objets flexibles, à l'intérieur, contribuent à un contexte de formatage flexible car leur élément parent a <code>display: flex</code>. Aussi, le type d'affichage intérieur vaut <code>flex</code> et un nouveau contexte de formatage flexible est mis en place pour les éléments enfants.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/flex.html", '100%', 500)}}</p>
+
+<p>On peut envisager chaque boîte CSS sous cet angle. La boîte possède un type d'affichage extérieur et sait ainsi comment se comporter avec les boîtes qui l'entourent. Ensuite, la boîte possède un type d'affichage intérieur qui permet d'organiser les éléments qu'elle contient. Ces éléments, à leur tour, disposent d'un type d'affichage extérieur et d'un type d'affichage intérieur. Dans l'exemple précédent, les objets flexibles ont des boîtes flexibles. Le type d'affichage extérieur est dicté par le contexte de formatage flexible. En revanche, leur type d'affichage intérieur est <code>flow</code> et leurs éléments enfants participeront à un flux normal. Les éléments enfants s'organiseront comme des éléments en ligne ou de bloc sauf si leur type d'affichage est explicitement modifié.</p>
+
+<p>Le concept de type d'affichage extérieur et intérieur est important car il nous indique qu'un conteneur utilisant Flexbox (<code>display: flex</code>) ou les grilles CSS (<code>display: grid</code>) continue de participer à une disposition bloc/en ligne du fait du type d'affichage extérieur qui est <code>block</code>.</p>
+
+<h3 id="Modifier_le_contexte_de_formatage_auquel_un_élément_participe">Modifier le contexte de formatage auquel un élément participe</h3>
+
+<p>Les navigateurs affichent les éléments en bloc ou ligne selon ce qui est pertinent pour chaque élément. Ainsi, l'élément {{HTMLElement("strong")}}, utilisé pour mettre en avant un mot (souvent alors affiché en gras), ne crée pas de nouvelle ligne pour afficher son contenu : ce n'est pas un élément de bloc mais un élément en ligne.</p>
+
+<p>Si on souhaitait afficher tous les éléments {{HTMLElement("strong")}} comme des éléments de bloc, il suffirait d'ajouter la règle <code>display: block</code> en ciblant les éléments <code>&lt;strong&gt;</code>. Cela signifie qu'on peut toujours écrire un code HTML qui soit le plus sémantique possible pour le contenu puis modifier la façon dont le document est affiché grâce à CSS.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/change-formatting.html", '100%', 500)}}</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Dans ce guide, nous avons vu comment les éléments étaient affichés dans le flux normal, comme éléments de bloc ou comme éléments en ligne. Les éléments HTML s'afficheront par défaut de façon lisible sans CSS. En comprenant comment fonctionne le flux normal, vous comprendrez comment apporter les modifications nécessaires pour parvenir à la disposition désirée.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Modèle_de_boîte_CSS">Le module de spécification <em>CSS Basic Box Model</em> qui définit les propriétés de base pour le modèle de boîte</a></li>
+ <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Normal_Flow">Apprendre - le fonctionnement du flux normal</a></li>
+ <li><a href="/fr/docs/Web/HTML/Éléments_en_ligne">Les éléments HTML en ligne</a></li>
+ <li><a href="/fr/docs/Web/HTML/Éléments_en_bloc">Les éléments HTML de bloc</a></li>
+</ul>
diff --git a/files/fr/web/css/css_flow_layout/disposition_flux_et_dépassement/index.html b/files/fr/web/css/css_flow_layout/disposition_flux_et_dépassement/index.html
new file mode 100644
index 0000000000..703af33bee
--- /dev/null
+++ b/files/fr/web/css/css_flow_layout/disposition_flux_et_dépassement/index.html
@@ -0,0 +1,70 @@
+---
+title: La disposition en flux et le dépassement
+slug: Web/CSS/CSS_Flow_Layout/Disposition_flux_et_dépassement
+tags:
+  - CSS
+  - Guide
+  - Intermédiaire
+translation_of: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow
+---
+<div>{{QuickLinksWithSubpages("/fr/docs/Web/CSS/CSS_Flow_Layout/")}}</div>
+
+<p class="summary">Lorsque le conteneur est trop petit pour son contenu, on obtient une situation de dépassement. Le comportement du dépassement est importante dès qu'on manipule des objets CSS dont la taille est contrainte. Dans ce guide, nous verrons le fonctionnement du dépassement avec le flux normal.</p>
+
+<h2 id="Qu'est-ce_que_le_dépassement">Qu'est-ce que le dépassement ?</h2>
+
+<p>Pour créer un exemple de dépassement, prenons un élément avec une hauteur et une largeur fixés puis ajoutons un contenu trop important dans la boîte :</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/overflow/overflow.html", '100%', 700)}}</p>
+
+<p>Le contenu « arrive » dans la boîte puis remplit celle-ci et ensuite, il dépasse en affichant du contenu en dehors de la boîte éventuellement en dessous du contenu environnant. Pour contrôler le comportement du dépassement, on pourra utiliser la propriété <code><a href="/fr/docs/Web/CSS/overflow">overflow</a></code>. La valeur initiale de cette propriété est <code>visible</code> et c'est pour cela qu'on voit le contenu dépasser.</p>
+
+<h2 id="Contrôler_le_dépassement">Contrôler le dépassement</h2>
+
+<p>La propriété <code>overflow</code> possède d'autres valeurs qui permettent de contrôler le dépassement. Afin de masquer le contenu qui dépasse, on peut utiliser la valeur <code>hidden</code>. Avec cette valeur, une partie du contenu peut ne pas être visible.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/overflow/hidden.html", '100%', 700)}}</p>
+
+<p>Avec la valeur <code>scroll</code>, le contenu est dans la boîte et des barres de défilement sont ajoutées à la boîte afin de pouvoir défiler et voir le contenu. Les barres de défilement seront ajoutées, même si le contenu « tient » dans la boîte.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/overflow/scroll.html", '100%', 700)}}</p>
+
+<p>Avec la valeur <code>auto</code>, le contenu sera affiché sans barre de défilement s'il tient dans la boîte. S'il dépasse, des barres de défilement sont ajoutées. En comparant l'exemple précédent avec celui qui suit, on peut voir que <code>overflow: scroll</code> ajoute des barres de défilement verticales et horizontales (même s'il y a uniquement besoin du défilement vertical). Avec la valeur <code>auto</code>, seules les barres de défilement nécessaires sont ajoutées.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/overflow/auto.html", '100%', 700)}}</p>
+
+<p>Comme nous l'avons vu plus tôt, toute valeur qui est différente de <code>visible</code> créera un nouveau contexte de formatage de bloc.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Dans <a href="https://www.w3.org/TR/css-overflow-3/">le brouillon du module de spécification <em>Overflow</em> de niveau 3</a>, une valeur est ajoutée : <code>overflow: clip</code>. Cette valeur agira comme <code>overflow: hidden</code> mais ne permettra de faire défiler le contenu à l'aide de code. La boîte ne pourra pas défiler. De plus, cette valeur ne crée pas de contexte de formatage de bloc.</p>
+</div>
+
+<p>Pour être tout à fait précis, la propriété <code>overflow</code> est une <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">propriété raccourcie</a> pour les propriétés <code><a href="/fr/docs/Web/CSS/overflow-x">overflow-x</a></code> et <code><a href="/fr/docs/Web/CSS/overflow-y">overflow-y</a></code>. Si on fournit une valeur, celle-ci sera utilisée pour les deux axes. On peut aussi fournir deux valeurs, auquel cas la première sera utilisée pour <code>overflow-x</code> et la seconde pour <code>overflow-y</code>. Dans l'exemple qui suit, seule <code>overflow-y: scroll</code> est utilisée et la barre de défilement horizontale superflue n'est pas ajoutée.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/overflow/overflow-y.html", '100%', 700)}}</p>
+
+<h2 id="Les_propriétés_relatives">Les propriétés relatives</h2>
+
+<p>Dans le guide sur <a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes">les modes d'écriture et la disposition en flux</a>, nous avons étudié des propriétés plus récentes <code>block-size</code> et <code>inline-size</code> qui permettent de raisonner avec les modes d'écriture plutôt qu'avec les dimensions physiques de l'écran. La spécification de niveau 3 Overflow inclut également les propriétés correspondantes pour le dépassement : <code><a href="/fr/docs/Web/CSS/@media/overflow-block">overflow-block</a></code> et <code><a href="/fr/docs/Web/CSS/@media/overflow-inline">overflow-inline</a></code>. Ces propriétés « logiques » correspondent aux propriétés « physiques » <code>overflow-x</code> et <code>overflow-y</code> où la correspondance varie en fonction du mode d'écriture du document.</p>
+
+<p>À l'heure où nous écrivons ces lignes, ces deux propriétés ne sont pas implémentées par les navigateurs et il faut donc s'en tenir aux propriétés physiques et ajuster selon le mode d'écriture.</p>
+
+<h2 id="Gérer_le_dépassement">Gérer le dépassement</h2>
+
+<p>Dans la spécification de niveau 3 sur le dépassement, certaines propriétés aident à améliorer l'apparence du contenu lors d'un dépassement.</p>
+
+<h3 id="Dépassement_sur_l'axe_en_ligne">Dépassement sur l'axe en ligne</h3>
+
+<p>La propriété <code><a href="/fr/docs/Web/CSS/text-overflow">text-overflow</a></code> indique comment afficher le texte qui dépasse sur l'axe en ligne. La valeur <code>clip</code> qui coupe le contenu qui dépasse, c'est la valeur initiale et le comportement par défaut. La valeur <code>ellipsis</code> permet d'afficher une ellipse qui peut être adaptée en fonction de la langue ou du mode d'écriture utilisé.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/overflow/text-overflow.html", '100%', 500)}}</p>
+
+<h3 id="Dépassement_sur_l'axe_de_bloc">Dépassement sur l'axe de bloc</h3>
+
+<p>Il existe également une proposition pour une propriété <code>block-overflow</code>. Toutefois, celle-ci (ainsi que son nom) est toujours en discussion. La proposition consisterait à pouvoir afficher une ellipse lorsque le contenu dépasse sur l'axe de bloc.</p>
+
+<p>Cette propriété serait par exemple utile lorsqu'on a une liste d'article avec une boîte pour chaque article dont la hauteur est fixée. Si le texte qui dépasse est masqué, ce n'est pas nécessairement évident qu'il y a du contenu supplémentaire et qu'il faut cliquer pour le lire. Ajouter une ellipse rendrait ce dépassement plus perceptible.</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Qu'on manipule un média « continu » sur le Web ou un format paginé (impression ou EPUB), il est utile de comprendre la façon dont le dépassement agit, quelle que soit la méthode de dépassement. En comprenant comment le dépassement fonctionne avec le flux normal, ce devrait être plus simple de comprendre le fonctionnement du dépassement pour les autres méthodes comme les grilles ou les boîtes flexibles.</p>
diff --git a/files/fr/web/css/css_flow_layout/disposition_flux_et_modes_écriture/index.html b/files/fr/web/css/css_flow_layout/disposition_flux_et_modes_écriture/index.html
new file mode 100644
index 0000000000..2ecf299ce2
--- /dev/null
+++ b/files/fr/web/css/css_flow_layout/disposition_flux_et_modes_écriture/index.html
@@ -0,0 +1,90 @@
+---
+title: Disposition de flux et modes d'écriture
+slug: Web/CSS/CSS_Flow_Layout/Disposition_flux_et_modes_écriture
+tags:
+  - CSS
+  - Guide
+  - Mode d'écriture
+translation_of: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes
+---
+<p class="summary">La spécification CSS 2.1, qui décrit le comportement classique du flux normal, prend l'hypothèse d'un mode d'écriture horizontal. <a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Disposition_de_bloc_en_ligne_avec_flux_normal">Les propriétés liées à la disposition</a> devraient fonctionner de façon identique pour les modes d'écritures verticaux. Dans ce guide, nous verrons comment le flux normal se comporte selon les différents modes d'écriture.</p>
+
+<p>Ce guide n'est pas un guide exhaustif sur l'utilisation des modes d'écriture en CSS. Son objectif est de documenter les interactions, éventuellement inattendues, entre le flux et les modes d'écriture. Pour plus de ressources à ce sujet, vous pouvez vour référer aux <a href="#Ressources_externes">ressources externes</a> ainsi qu'à la section <a href="#Voir_aussi">Voir aussi</a> en fin de page.</p>
+
+<h2 id="La_spécification_des_modes_d'écriture">La spécification des modes d'écriture</h2>
+
+<p>Le module de spécification <em>CSS Writing Modes</em> de niveau 3 définit l'impact du mode d'écriture sur le flux. Voici l'introduction <a href="https://drafts.csswg.org/css-writing-modes-3/#text-flow">de la spécification </a>quant aux modes d'écriture :</p>
+
+<blockquote>
+<p>« En CSS, un mode d'écriture est défini par les propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. Ce mode est principalement défini selon sa direction en ligne (<em>inline</em>) et selon sa direction de bloc. »</p>
+</blockquote>
+
+<p>La spécification définit la direction en ligne comme la direction selon laquelle le contenu est ordonné sur une ligne. Cela définit le début et la fin de la direction en ligne. Le début correspond à l'emplacement du début d'une phrase sur la ligne et la fin correspond à l'emplacement où la ligne de texte se coupe pour passer sur une nouvelle ligne.</p>
+
+<p>La direction de bloc correspond à la direction selon laquelle les boîtes (ex. les paragraphes) s'empilent pour ce mode d'écriture. La propriété <code>writing-mode</code> contrôle la direction de bloc. Si on souhaite changer la page ou une partie de la page afin d'utiliser la direction <code>vertical-lr</code>, on pourra utiliser <code>writing-mode: vertical-lr</code> sur un élément. Cela aura pour effet de modifier la direction de bloc et, par conséquent, de modifier la direction en ligne.</p>
+
+<p>Les modes d'écritures peuvent être utilisés pour respecter la façon d'écrire de certaines langues. Ils peuvent également être utilisés à des fins stylistiques (pour avoir un titre vertical par exemple).</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/creative-use.html", '100%', 720)}}</p>
+
+<h2 id="La_propriété_writing-mode_et_le_flux_de_bloc">La propriété <code>writing-mode</code> et le flux de bloc</h2>
+
+<p>La propriété {{cssxref("writing-mode")}} s'utilise avec les valeurs <code>horizontal-tb</code>, <code>vertical-rl</code> et <code>vertical-lr</code>. Ces valeurs contrôlent la direction selon laquelle les blocs se suivent sur la page. La valeur initiale de cette propriété est <code>horizontal-tb</code> ce qui signifie que l'axe de bloc est dirigé de haut en bas (<code>tb</code> pour <em>top to bottom</em> qui signifie de haut en bas) et que l'axe en ligne est horizontal. Les langues qui s'écrivent de gauche à droite telles que le français ou les langues qui s'écrivent de droite à gauche telles que l'arabe utilisent toutes <code>horizontal-tb</code>.</p>
+
+<p>Voici un exemple avec <code>horizontal-tb</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/horizontal-tb.html", '100%', 720)}}</p>
+
+<p>La valeur <code>vertical-rl</code> permet d'avoir une direction de bloc de droite à gauche et une direction en ligne verticale, comme on peut le voir dans l'exemple qui suit.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/vertical-rl.html", '100%', 720)}}</p>
+
+<p>Dans cet autre exemple, on voit comment se comporte la troisième valeur possible pour <code>writing-mode</code> : <code>vertical-lr</code>. On a une direction de bloc horizontal de la gauche vers la droite et une direction en ligne verticale.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/vertical-lr.html", '100%', 720)}}</p>
+
+<h2 id="Les_boîtes_utilisant_un_mode_d'écriture_différent_de_leur_parent">Les boîtes utilisant un mode d'écriture différent de leur parent</h2>
+
+<p>Lorsqu'une boîte imbriquée se voit affecter un mode d'écriture différent de son parent, une boîte en ligne s'affichera comme si elle avait <code>display: inline-block</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/inline-change-mode.html", '100%', 720)}}</p>
+
+<p>Une boîte de bloc créera un nouveau contexte de formatage. Ainsi, si son type d'affichage intérieur vaut <code>flow</code>, le type d'affichage calculé sera <code>flow-root</code>. On peut voir ce comportement dans l'exemple qui suit où la boîte affichée avec <code>horizontal-tb</code> contient un élément flottant contenu car son élément parent crée un nouveau contexte de formatage.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/block-change-mode.html", '100%', 720)}}</p>
+
+<h2 id="Les_éléments_remplacés">Les éléments remplacés</h2>
+
+<p>Les éléments remplacés tels que les images ne changeront pas d'oritentation selon la valeur de la propriété <code>writing-mode</code>. Toutefois, les éléments remplacés tels que les éléments de formulaires qui incluent du texte devraient utiliser le mode d'écriture courant.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/replaced.html", '100%', 720)}}</p>
+
+<h2 id="Les_propriétés_et_valeurs_logiques">Les propriétés et valeurs logiques</h2>
+
+<p>Lorsqu'on travaille avec des modes d'écriture autres que <code>horizontal-tb</code>, la plupart des propriétés et des valeurs correspondant aux dimensions physiques de l'écran semblent étranges. Ainsi, si on a une boîte qui fait 100 pixels de large, avec <code>horizontal-tb</code> cette largeur sera selon la direction en ligne. Mais avec le mode <code>vertical-lr</code> cela contrôlera la direction de bloc car elle ne tourne pas avec le texte.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/width.html", '100%', 720)}}</p>
+
+<p>C'est pour cela que des propriétés <em>logiques</em> ont fait leur apparition comme {{cssxref("block-size")}} et {{cssxref("inline-size")}}. Si on fournit <code>inline-size: 100px</code> sur un bloc, peu importe qu'on ait un mode d'écriture horizontal ou vertical, <code>inline-size</code> correspondra à la direction en ligne quoi qu'il arrive.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/inline-size.html", '100%', 720)}}</p>
+
+<p>Le module de spécification <a href="/en-US/docs/Web/CSS/CSS_Logical_Properties">CSS sur les propriétés et valeurs logiques</a> contient des versions logiques des propriétés contrôlant les marges, le remplissage (<em>padding</em>) et les bordures et d'autres correspondances pour les concepts qu'on manipulait habituellement avec des directions <em>physiques</em>.</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Dans la plupart des cas, la disposition de flux fonctionne comme on s'y attend lorsqu'on change le mode d'écriture du document ou d'une de ses parties. Les modes d'écritures peuvent être utilisés pour écrire correctement une langue ou pour des aspects créatifs. CSS facilite cette utilisation en introduisant des propriétés et des valeurs logiques qui fonctionnent de façon homogène quel que soit le mode d'écriture. On peut alors créer des composants qui fonctionneront avec différents modes d'écriture.</p>
+
+<h2 id="Voir_aussi_2"><a id="Voir_aussi" name="Voir_aussi">Voir aussi</a></h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Writing_Modes">Les modes d'écritures</a></li>
+</ul>
+
+<h2 id="Ressources_externes_2"><a id="Ressources_externes" name="Ressources_externes">Ressources externes</a></h2>
+
+<ul>
+ <li><em><a href="https://24ways.org/2016/css-writing-modes/">CSS Writing Modes (en anglais)</a></em> par Jen Simmons sur <em>24 Ways</em></li>
+</ul>
+
+<div>{{QuickLinksWithSubpages("/fr/docs/Web/CSS/CSS_Flow_Layout/")}}</div>
diff --git a/files/fr/web/css/css_flow_layout/explications_contextes_formatage/index.html b/files/fr/web/css/css_flow_layout/explications_contextes_formatage/index.html
new file mode 100644
index 0000000000..88ed84ff16
--- /dev/null
+++ b/files/fr/web/css/css_flow_layout/explications_contextes_formatage/index.html
@@ -0,0 +1,89 @@
+---
+title: Explications quant aux contextes de formatage
+slug: Web/CSS/CSS_Flow_Layout/Explications_contextes_formatage
+tags:
+  - CSS
+  - Guide
+  - Intermédiaire
+translation_of: Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Dans cet article, nous aborderons le concept des contextes de formatage. Ceux-ci peuvent être de dfiférents types : contextes de formatage de bloc, contextes de formatage en ligne, contextes de formatage flexibles. Nous verrons les bases de leur comportement et comment les utiliser.</p>
+
+<p>Sur une page web, tout s'inscrit dans un <strong>contexte de formatage</strong>, une zone qui a été définie pour être organisée d'une certaine façon. Un <strong>contexte de formatage en bloc</strong> (ou <em>block formatting context</em> (<abbr title="Block Formatting Context">BFC</abbr>)) organisera ses éléments fils selon une disposition en bloc, un <strong>contexte de formatage flexible</strong> organisera ses éléments fils comme des objets flexibles, etc. Chaque contexte de formatage possède des règles spécifiques qui décrivent le comportement de la disposition pour ce contexte.</p>
+
+<h2 id="Le_contexte_de_formatage_de_bloc">Le contexte de formatage de bloc</h2>
+
+<p>L'élément <code>html</code> définit le contexte de formatage de bloc initial pour la page. Cela signifie que tous les éléments contenus dans <code>&lt;html&gt;&lt;/html&gt;</code> s'organisent selon le flux normal en suivant les règles de la disposition de bloc et en ligne. Les élméents qui participent à un contexte de formatage de bloc (<em>Block formatting context</em> ou BFC en anglais) utilisent les règles décrites par le modèle de boîte CSS qui définit la façon dont les marges, bordures et zones de remplissage (<em>padding</em>) d'un élément interagissent avec les autres blocs du même contexte.</p>
+
+<h3 id="Créer_un_nouveau_contexte_de_formatage_de_bloc">Créer un nouveau contexte de formatage de bloc</h3>
+
+<p>L'élément {{HTMLElement("html")}} n'est pas le seul élément capable de créer un nouveau contexte de formatage de bloc. Des propriétés CSS peuvent également être utilisées afin de créer un contexte de formatage de bloc. Cela peut s'avérer utile car un nouveau contexte se comportera comme notre document : on aura une mini-disposition contenu dans la disposition principale. Un contexte de formatage de bloc contient tout ses éléments fils et ses descendants. Le flottement ({{cssxref("float")}}) ou le dégagement ({{cssxref("clear")}}) ne s'appliqueront qu'aux éléments d'un même contexte de formatage. Les marges ne <a href="/fr/docs/Web/CSS/Modèle_de_boîte_CSS/Fusion_des_marges">fusionneront</a> que pour des éléments d'un même contexte formatage.</p>
+
+<p>Au delà de l'élément racine du document (ici l'élément <code>html</code>), un nouveau contexte de formatage de bloc est créé dans les situations suivantes :</p>
+
+<ul>
+ <li>Pour les éléments flottants ({{cssxref("float")}})</li>
+ <li>Pour les éléments positionnés de façon absolue (y compris avec {{cssxref("position", "position: fixed", "#fixed")}} ou {{cssxref("position", "position: sticky", "#sticky")}})</li>
+ <li>Pour les éléments avec {{cssxref("display", "display: inline-block", "#inline-block")}}</li>
+ <li>Pour les cellules de tableau ou pour les éléments avec <code>display: table-cell</code>, y compris pour les cellules de tableau anonymes créées avec les propriétés <code>display: table-*</code></li>
+ <li>Les légendes de tableau ou les éléments avec <code>display: table-caption</code></li>
+ <li>Les éléments de blocs pour lesquels <code>overflow</code> a une valeur différente de <code>visible</code></li>
+ <li><code>display: flow-root</code></li>
+ <li>Les éléments avec {{cssxref("contain", "contain: layout", "#layout")}}, <code>content</code> ou <code>strict</code></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Concepts_de_base_flexbox">Les élément flexibles</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base">Les éléments de grille</a></li>
+ <li><a href="fr/docs/Web/CSS/CSS_Columns/Concepts_base_multi-colonnes">Les conteneurs multi-colonnes</a></li>
+ <li>Les éléments avec {{cssxref("column-span")}}:<code>all</code></li>
+</ul>
+
+<p>Prenons quelques exemples afin de voir les conséquences de la création d'un nouveau contexte de formatage de bloc.</p>
+
+<p>Dans le prochain exemple, on a un élément flottant à l'intérieur d'un élément <code>&lt;div&gt;</code> où une bordure est appliquée. Le contenu de cet élément <code>div</code> flotte avec l'élément flottant. Le contenu de l'élément flottant étant plus grand que le contenu environnant, la bordure du <code>div</code> passe sur le contenu flottant. Comme expliqué dans <a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow">le guide sur les éléments appartenant ou non au flux</a>, l'élément flottant a été retiré du flux afin que l'arrière-plan et la bordure du <code>div</code> ne contienne que le contenu et pas l'élément flottant.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/float.html", '100%', 720)}}</p>
+
+<p>En créant un nouveau contexte, l'élément flottant serait contenu dans ce contexte. Par le passé, une méthode classique consistait à appliquer <code>overflow: auto</code> ou à utiliser d'autres valeurs que <code>overflow: visible</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/bfc-overflow.html", '100%', 720)}}</p>
+
+<p>En utilisant <code>overflow: auto</code>, on crée un nouveau contexte de formatage de bloc qui contient l'élément flottant. Notre élément <code>div</code> devient en quelque sorte responsable de sa disposition interne et chaque élément enfant sera intégré dans cette disposition.</p>
+
+<p>Toutefois, utiliser <code>overflow</code> pour créer un nouveau contexte de formatage peut poser problème car la propriété <code>overflow</code> est avant tout conçue pour indiquer au navigateur comment on souhaite gérer le contenu qui dépasse. On peut obtenir des situations où on obtient des barres de défilement indésirables ou des ombres rognées lorsqu'on utilise principalement cette propriété pour créer un nouveau contexte. De plus, cette méthode peut ne pas être évidente et lisible pour un autre développeur et complexifier la maintenance du code associé. Si vous devez utiliser cette méthode, mieux vaudra commenter le code pour l'expliquer.</p>
+
+<h3 id="Créer_un_contexte_de_formatage_de_bloc_explicite_utiliser_display_flow-root">Créer un contexte de formatage de bloc explicite : utiliser <code>display: flow-root</code></h3>
+
+<p>Une valeur plus récente de <code>display</code> permet de créer un nouveau contexte de formatage de bloc sans autre effet de bord indésirable. En utilisant <code>display: flow-root</code> sur le bloc englobant, on créera un nouveau contexte de formatage de bloc.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/bfc-flow-root.html", '100%', 720)}}</p>
+
+<p>Ainsi, en utilisant <code>display: flow-root;</code> sur l'élément {{HTMLElement("div")}} tout son contenu contribue au contexte de formatage de bloc et l'élément flottant n'est plus éjecté en bas de l'élément.</p>
+
+<p>Le nom de cette valeur, <code>flow-root</code>, prend son sens lorsqu'on voit que l'élément agit comme une racine (<code>root</code>) pour le nouveau contexte qui est créé.</p>
+
+<h2 id="Un_contexte_de_formatage_en_ligne">Un contexte de formatage en ligne</h2>
+
+<p>Les contextes de formatage en ligne existent au sein des autres contextes de formatage et peuvent être vus comme le contexte d'un paragraphe. Un paragraphe crée un contexte de formatage en ligne au sein duquel les éléments {{HTMLElement("strong")}}, {{HTMLElement("a")}} ou {{HTMLElement("span")}} entre autres, sont utilisés sur du texte.</p>
+
+<p>Le modèle de boîte ne s'applique pas complètement aux objets qui s'inscrivent dans un contexte de formatage en ligne. Pour une ligne écrite avec un mode d'écriture horizontal, les remplissages (<em>padding</em>), bordures et marges seront appliqués à l'élément et écarteront le texte environnant à droite et ou à gauche. Le remplissage et bordures verticaux seront appliqués mais peuvent chevaucher le contenu au dessus et en dessous. Pour un contexte de formatage en ligne, les boîtes de ligne ne seront pas décalées par les bordures ou par le remplissage.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/inline.html", '100%', 720)}}</p>
+
+<h2 id="Les_autres_contexte_de_formatage">Les autres contexte de formatage</h2>
+
+<p>Ce guide porte sur la disposition de flux et n'aborde pas tous les contextes de formatage possibles en dehors de ce type de disposition. Il est important de comprendre que n'importe quel contexte de formatage modifiera la façon dont ses éléments et son contenu sont organisés. Le comportement des autres contextes de formatage est décrit dans les modules de spécification respectifs et sur MDN.</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Dans ce guide, nous avons approfondi les notions relatives aux contextes de formatage en ligne et de bloc. Dans le prochain guide, nous verrons <a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Disposition_flux_et_modes_écriture">les interactions entre le flux normal et les différents modes d'écriture</a>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Block_formatting_context">Contexte de formatage de bloc (ou <em>Block Formatting Context</em> (BFC) en anglais)</a></li>
+ <li><a href="/fr/docs/Web/CSS/Modèle_de_mise_en_forme_visuelle">Modèle de formatage visuel</a></li>
+ <li><a href="/fr/docs/Web/CSS/Modèle_de_boîte_CSS">Modèle de boîte CSS</a></li>
+</ul>
+
+<div>{{QuickLinksWithSubpages("/fr/docs/Web/CSS/CSS_Flow_Layout/")}}</div>
diff --git a/files/fr/web/css/css_flow_layout/index.html b/files/fr/web/css/css_flow_layout/index.html
new file mode 100644
index 0000000000..236f7b9341
--- /dev/null
+++ b/files/fr/web/css/css_flow_layout/index.html
@@ -0,0 +1,42 @@
+---
+title: CSS Flow Layout
+slug: Web/CSS/CSS_Flow_Layout
+tags:
+  - CSS
+  - CSS Flow Layout
+  - Reference
+translation_of: Web/CSS/CSS_Flow_Layout
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Le <em>flux normal</em> ou « disposition en flux » (<em>Flow Layout</em>) correspond à la façon dont les éléments de bloc et les éléments en ligne sont disposés avant tout changement apporté à leur disposition. Lorsqu'un élément est retiré du <em>flux</em>, il est traité indépendamment.</p>
+
+<p>Avec un flux normal, les <strong>éléments en ligne (<em>inline elements</em>)</strong> sont affichés dans la direction « en incise », c'est-à-dire dans le sens dans lequel les mots sont écrits selon <a href="/fr/docs/Web/CSS/CSS_Writing_Modes">le mode d'écriture</a> du document. Les <strong>éléments de bloc (<em>block elements</em>)</strong> sont affichés les uns après les autres, à la façon des paragraphes selon le mode d'écriture du document.</p>
+
+<p>Par exemple, pour un document français, les éléments en ligne sont affichés les uns à la suite des autres de gauche à droite et les éléments de bloc sont affichés les uns en dessous des autres.</p>
+
+<h2 id="Exemple_simple">Exemple simple</h2>
+
+<p>Dans l'exemple suivant, on peut voir des boîtes de bloc et des boîtes en ligne. Les deux éléments correspondants aux paragraphes avec des bordures vertes sont des éléments de bloc. Ces deux éléments s'affichent l'un en dessous de l'autre.</p>
+
+<p>La première phrase contient également un élément {{HTMLElement("span")}} avec un arrière-plan bleu. C'est un élément en ligne qui s'affiche donc en incise de la phrase.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/layout/normal-flow.html", '100%', 720)}}</p>
+
+<h2 id="Guides">Guides</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Disposition_de_bloc_en_ligne_avec_flux_normal">Les dispositions de bloc et en ligne dans le flux normal</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Disposition_flux_et_dépassement">La disposition en flux et les dépassements</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Disposition_flux_et_modes_écriture">La disposition en flux et les modes d'écriture</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Explications_contextes_formatage">Explications sur les contextes de formatage</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Dans_le_flux_ou_en_dehors">Être ou non dans le flux</a></li>
+</ul>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Termes_du_glossaire">Termes du glossaire</h3>
+
+<ul>
+ <li><a href="/fr/docs/Glossary/Block/Block_(CSS)">Bloc (CSS)</a></li>
+</ul>
diff --git a/files/fr/web/css/css_fonts/guide_caractéristiques_police_opentype/index.html b/files/fr/web/css/css_fonts/guide_caractéristiques_police_opentype/index.html
new file mode 100644
index 0000000000..6980ff4d78
--- /dev/null
+++ b/files/fr/web/css/css_fonts/guide_caractéristiques_police_opentype/index.html
@@ -0,0 +1,229 @@
+---
+title: Guide des caractéristiques de police OpenType
+slug: Web/CSS/CSS_Fonts/Guide_caractéristiques_police_OpenType
+tags:
+  - CSS
+  - Fonts
+  - Guide
+  - Polices
+translation_of: Web/CSS/CSS_Fonts/OpenType_fonts_guide
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Les caractéristiques de police ou variantes font référence à différents glyphes ou styles de caractère contenus dans une police OpenType. Cela inclut notamment les ligatures (des caractères spéciaux qui permettent de combiner des caractères entre eux comme œ qui est la ligature entre o et e), le crénage (<em>kerning</em> en anglais) qui définit l'espacement entre certaines lettres, les fractions et styles numériques, etc. Toutes ces caractéristiques sont des caractéristiques OpenType Features et peuvent être utilisées sur le Web grâce à certaines propriétés spécifiques qui permettent un contrôle de bas niveau comme {{cssxref("font-feature-settings")}}. Dans cet article, nous verrons tout ce qu'il faut savoir pour manipuler les caractéristiques OpenType avec  CSS.</p>
+
+<p>Pour certaines polices, une ou plusieurs caractéristiques sont activées par défaut (le crénage et les ligatures classiques sont souvent activées par exemple). D'autres caractéristiques sont inactives et peuvent être activées par choix dans certaines situations.</p>
+
+<p>En plus des caractéristiques communément utilisées telles que les ligatures ou <a href="https://fr.wikipedia.org/wiki/Chiffres_elz%C3%A9viriens">les chiffres elzéviriens</a>, il existe d'autres caractéristiques spécifiques telles que les ensembles stylistiques, les ensembles alternatifs voire des ensembles avec des altérations spécifiques pour une langue donnée. Pour ce dernier cas, ces altérations sont nécessaires à l'expression correcte du langage et il s'agit donc d'une caractéristique qui dépasse largement l'aspect purement stylistique d'autres caractéristiques.</p>
+
+<div class="warning">
+<p><strong>Attention !</strong> Il existe de nombreuses propriétés CSS qui permettent de manipuler les caractéristiques de police. Cependant, la plupart ne sont pas encore complètement implémentées ni prises en charge de façon homogène. Nous les verrons dans cet article mais il faudra la plupart du temps utiliser {{cssxref("font-feature-settings")}} pour les définir à un plus bas niveau. Il est possible d'écrire du CSS qui gère ces deux cas mais c'est plus laborieux. Mais lorsqu'on utilise <code>font-feature-settings</code> pour chaque caractéristique, il est nécessaire de réécrire la chaîne entière même si on ne souhaite changer qu'une caractéristique.</p>
+</div>
+
+<h2 id="Découvrir_la_disponibilité_des_caractéristiques_pour_certaines_polices">Découvrir la disponibilité des caractéristiques pour certaines polices</h2>
+
+<p>Il est parfois délicat de savoir quelles caractéristiques sont disponibles pour une police donnée si celle-ci n'est pas accompagnée d'une documentation (la plupart des fonderies proposeront une page d'exemple et du CSS). Certains sites permettent de contourner ce problème : vous pouvez visiter <a href="https://wakamaifondue.com">wakamaifondue.com</a>, y uploader le fichier de la police et recevoir un rapport complet peu de temps après ; le site <a href="https://axis-praxis.org">Axis-praxis.org</a> fournit des fonctionnalités analogues et permet de cliquer pour activer/désactiver une ou plusieurs caractéristiques sur un bloc de texte donné.</p>
+
+<h2 id="Pourquoi_utiliser_les_caractéristiques_d'une_police">Pourquoi utiliser les caractéristiques d'une police ?</h2>
+
+<p>Étant donné que ces caractéristiques peuvent être difficilement accessibles, on peut légitiement se demander pourquoi il faudrait les utiliser. Pour répondre à cette question, il faut voir comment ces caractéristiques peuvent aider à rendre un site plus lisible, accessible, élégant :</p>
+
+<ul>
+ <li><strong>Les ligatures</strong> telles que œ ou celles qui existent entre 'ff' répartissent plus également l'espace entre les lettres et permettent un lecture plus douce.</li>
+ <li><strong>Les fractions</strong> permettent d'améliorer la compréhension et la lecture de certains textes (des recettes par exemple).</li>
+ <li><strong>L'écriture des nombres</strong> au sein de paragraphes qui suivent la ligne de base du texte ou au contraire dont les jambages passent sous la ligne de base.</li>
+</ul>
+
+<p>Bien qu'aucune de ces caractéristiques ne soit critique pour l'utilisabilité d'un site, chacune d'elle peut rendre un site plus lisible voire raffiné</p>
+
+<blockquote>
+<p>Les caractéristiques OpenType ressemblent à des compartiments secrets : en les déverouillant, une police peut évoluer de façon subtile ou complète. Toutes les caractéristiques OpenType ne doivent pas être utilisées tout le temps mais certaines d'entre elles sont majeures pour obtenir une typographie de premier rang. <cite><em>Tim Brown, Directeur de la typographie chez Adobe</em>.</cite></p>
+</blockquote>
+
+<h3 id="Au-delà_du_style_le_contenu_même">Au-delà du style : le contenu même</h3>
+
+<p>Il existe certains cas (notamment avec {{cssxref("font-variant-east-asian")}}) où les caractéristiques OpenType sont directement liées à l'utilisation de formes différentes pour certains glyphes. Ces caractéristiques auront un impact sur la lisibilité mais aussi et surtout sur la signification du texte. Dans ces cas, les caractéristiques de police ne sont pas un outil de style mais font partie intégrante du contenu.</p>
+
+<h2 id="Les_caractéristiques">Les caractéristiques</h2>
+
+<p>Il existe une variété de caractéristiques. Nous les avons ici regroupées selon leurs attributs principaux et les options développées dans les spécifications du W3C.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Les exemples qui suivent illustrent certaines propriétés et des combinaisons d'exemple et sont accompagnés des équivalents utilisant la syntaxe de plus bas niveau. Il est possible que ces deux versions d'exemple ne correspondent pas exactement selon l'implémentation des navigateurs. Les polices utilisées ici sont Playfair Display, Source Serif Pro, IBM Plex Serif, Dancing Script et Kokoro (qui sont libres d'utilisation et disponibles via différents services tels que Google Fonts).</p>
+</div>
+
+<h3 id="Le_crénage_(kerning)_(cssxref(font-kerning))">Le crénage (<em>kerning</em>) ({{cssxref("font-kerning")}})</h3>
+
+<p>Le crénage correspond à l'espace entre les caractères pour certaines combinaisons de caractères. Cette caractéristique, comme recommandé par la spécification OpenType, est généralement activée par défaut. On notera également que la propriété {{cssxref("letter-spacing")}} permet d'imposer un crénage supplémentaire au texte.</p>
+
+<div>{{EmbedGHLiveSample("css-examples/font-features/font-kerning.html", '100%', 520)}}</div>
+
+<h3 id="Les_formes_alternatives_(cssxref(font-variant-alternates))">Les formes alternatives ({{cssxref("font-variant-alternates")}})</h3>
+
+<p>Les polices peuvent fournir différentes formes pour différents glyphes. Cette propriété permet d'activer un ensemble de formes alternatives ou une forme alternative spécifique selon la valeur utilisée. Dans l'exemple qui suit, on voit différentes formes d'utilisation des caractères alternatifs. Les polices qui possèdent des glyphes alternatifs peuvent les rendre disponibles sur la grille de caractères ou dans des ensembles stylistiques séparés voire pour des caractères individuels. Dans cet exemple, on utilise deux polices et la règle-@ {{cssxref("@font-feature-values")}}. Cette méthode permet de définir des raccourcis ou des options nommées qui peuvent ensuite être utilisée sur un ensemble de polices. Ainsi, on peut avoir une option appliquée à une police ou appliquée plus généralement.</p>
+
+<div>{{EmbedGHLiveSample("css-examples/font-features/font-variant-alternates.html", '100%', 800)}}</div>
+
+<div> </div>
+
+<div>Dans ce cas, <code>@stylistic(alternates)</code> affichera tous les caractères alternatifs pour chacune des polices. En appliquant uniquement ces règles au mot 'My', seul l'affichage de la lettre 'M' est modifié. Si on applique  <code>@styleset(alt-a)</code>, seule l'apparence de la lettre a minuscule changera.</div>
+
+<p>Vous pouvez modifier :</p>
+
+<pre class="brush: css">font-variant-alternates: styleset(alt-a);</pre>
+
+<p>en :</p>
+
+<pre class="brush: css">font-variant-alternates: styleset(alt-g);
+</pre>
+
+<p>et voir comment la lettre a retrouve sa forme normale et comment la lettre g est modifiée.</p>
+
+<h4 id="En_savoir_plus_sur_les_formes_alternatives">En savoir plus sur les formes alternatives</h4>
+
+<ul>
+ <li><a href="https://www.w3.org/TR/css-fonts-4/#propdef-font-variant-alternates">Lien vers la spécification de la propriété <code>font-variant-alternates</code></a></li>
+ <li>{{cssxref("font-variante-alternates")}}</li>
+</ul>
+
+<h3 id="Les_ligatures_(cssxref(font-variant-ligatures))">Les ligatures ({{cssxref("font-variant-ligatures")}})</h3>
+
+<p>Les ligatures sont des glyphes qui remplacent deux ou plusieurs glyphes afin de les représenter de façon plus harmonieuse (pour l'espacement et l'esthétique notamment). Certaines de ces ligatures sont fréquemment utilisées (œ) et d'autres sont plus spécialisées et moins usitées (on parle de « ligatures discrétionaires », de « ligatures historiques » ou encore d' « alternatifs contextuels »).</p>
+
+<p>Bien qu'elles soient plus fréquemment utilisées avec les polices d'écriture, dans l'exemple qui suit, on les utilise afin de créer des flèches :</p>
+
+<div>{{EmbedGHLiveSample("css-examples/font-features/font-variant-ligatures.html", '100%', 540)}}</div>
+
+<h3 id="Les_positions_(cssxref(font-variant-position))">Les positions ({{cssxref("font-variant-position")}})</h3>
+
+<p>Les variantes de positions permettent d'activer le support typographique des glyphes pour les exposants et les indices. Celles-ci sont utilisées dans le texte sans modifier la ligne de base ou l'interlignage (c'est un des avantages par rapport à l'utilisation des éléments HTML {{htmlelement("sub")}} et {{cssxref("sup")}}).</p>
+
+<div>{{EmbedGHLiveSample("css-examples/font-features/font-variant-position.html", '100%', 550)}}</div>
+
+<h3 id="Les_capitales_(cssxref(font-variant-caps))">Les capitales ({{cssxref("font-variant-caps")}})</h3>
+
+<p>Une utilisation fréquente des caractéristiques OpenType est l'activation de « vraies » <a href="https://fr.wikipedia.org/wiki/Petite_capitale">petites capitales</a> qui sont généralement utilisées pour les acronymes et les abréviations.</p>
+
+<div>{{EmbedGHLiveSample("css-examples/font-features/font-variant-caps.html", '100%', 620)}}</div>
+
+<h3 id="Les_chiffres_(cssxref(font-variant-numeric))">Les chiffres ({{cssxref("font-variant-numeric")}})</h3>
+
+<p>Il existe généralement différents types de chiffre dans les polices :</p>
+
+<ul>
+ <li>Les chiffres classiques (ou chiffres Didot) qui sont alignées sur la ligne de base du texte et qui ont la même hauteur que les majuscules</li>
+ <li><a href="https://fr.wikipedia.org/wiki/Chiffres_elz%C3%A9viriens">Les chiffres elzéviriens</a> qui ont des jambages et des hampes à la façon des autres lettres minuscules. Ces chiffres sont conçus pour être utilisés en incise et se « fondre » au sein des glyphes alentours, à la manières des petites capitales.</li>
+</ul>
+
+<p>On y retrouve également la notion d'espacement. L'espacement proportionnel est le réglage par défaut et l'espacement tabulaire permet d'avoir un espace identique entre chaque chiffre, quelle que soit la largeur du caractère. Ce dernier mode est notamment utile pour l'affichage de nombre dans des tableaux (où on peut souhaiter comparer des montants d'une ligne à l'autre).</p>
+
+<p>Deux types de fractions peuvent être prises en charge avec cette propriété :</p>
+
+<ul>
+ <li>Les fractions avec barre diagonale.</li>
+ <li>Les fractions empilées verticalement.</li>
+</ul>
+
+<p>Les nombres ordinaux peuvent également être pris en charge (« 1er », « 2e ») s'ils sont présents dans la police. De même on peut utiliser un zéro barré si celui-ci est disponible.</p>
+
+<h4 id="Chiffres_classiques_et_chiffres_elzéviriens">Chiffres classiques et chiffres elzéviriens</h4>
+
+<div>{{EmbedGHLiveSample("css-examples/font-features/font-variant-numeric.html", '100%', 560)}}</div>
+
+<h4 id="Fractions_nombres_ordinaux_et_zéro_barré">Fractions, nombres ordinaux et zéro barré</h4>
+
+<div>{{EmbedGHLiveSample("css-examples/font-features/font-variant-numeric-frac.html", '100%', 600)}}</div>
+
+<h3 id="Caractères_d'Asie_orientale_(cssxref(font-variant-east-asian))">Caractères d'Asie orientale ({{cssxref("font-variant-east-asian")}})</h3>
+
+<p>Cette caractéristique permet d'accéder à différentes formes alternatives de glyphes dans une police. L'exemple qui suit illustre une chaîne de glyphes où seul l'ensemble OpenType 'jis78' est activé. Vous pouvez décocher la case et voir alors d'autres caractères s'afficher.</p>
+
+<div>{{EmbedGHLiveSample("css-examples/font-features/font-variant-east-asian.html", '100%', 750)}}</div>
+
+<div class="note">
+<p><strong>Note :</strong> Ces glyphes ont été copiés à partir d'un exemple et le texte qu'ils constituent n'ont aucun sens particulier.</p>
+</div>
+
+<h3 id="Propriété_raccourcie_(Cssxref(font-variant))">Propriété raccourcie ({{Cssxref("font-variant")}})</h3>
+
+<p>La propriété raccourcie <code>font-variant</code> permet de définir l'ensemble des caractéristiques précédentes. Lorsqu'on utilise la valeur <code>normal</code>, toutes les caractéristiques sont réinitialisées et retrouvent leurs valeurs par défaut. En utilisant <code>none</code>,  <code>font-variant-ligatures</code> vaudra <code>none</code> et toutes les autres propriétés récupèreront leurs valeurs initiales (cela signifie entre autres que si le crénage est activé par défaut, il sera toujours activé, même lorsque <code>none</code> est fourni).</p>
+
+<div>{{EmbedGHLiveSample("css-examples/font-features/font-variant.html", '100%', 600)}}</div>
+
+<h2 id="Utiliser_font-feature-settings">Utiliser <code>font-feature-settings</code></h2>
+
+<p>La propriété {{cssxref("font-feature-settings")}} permet d'utiliser une syntaxe « bas niveau » qui permet un accès explicite à chaque caractéristique OpenType disponible. On dispose ainsi d'un contrôle accru mais on perd l'héritage et il faut tout redéclarer à chaque fois qu'on souhaite modifier une caractéristique (sauf à utiliser <a href="/en-US/docs/Web/CSS/Using_CSS_variables">des propriétés CSS personnalisées</a> afin de définir les valeurs). Aussi, mieux vaut utiliser les propriétés standards lorsque c'est possible.</p>
+
+<p>Il existe une myriade de caractéristiques possibles. Vous pouvez en voir quelques exemples ici et il existe plusieurs ressources pour en exploiter d'autres.</p>
+
+<p>La syntaxe générale suivra cette structure :</p>
+
+<pre class="brush: css">.small-caps {
+  font-feature-settings: "smcp", "c2sc";
+}
+</pre>
+
+<p>Selon la spécification, on peut fournir le code à quatre caractères de la caractéristique ou fournir le code suivi d'un 1 pour activer la fonctionnalité ou suivi d'un 0 pour la désactiver. Ainsi, si on dispose de caractéristiques liées à la ligatures et qui sont activées par défaut, on peut les désactiver de la façon suivante :</p>
+
+<pre class="brush: css">.no-ligatures {
+  font-feature-settings: "liga" 0, "dlig" 0;
+}</pre>
+
+<h4 class="brush: css" id="En_savoir_plus_sur_les_codes_des_caractéristiques_font-feature-settings">En savoir plus sur les codes des caractéristiques <code>font-feature-settings</code></h4>
+
+<ul>
+ <li class="brush: css"><a href="https://sparanoid.com/lab/opentype-features/">Une démonstration des caractéristiques OpenType</a></li>
+ <li><a href="https://en.wikipedia.org/wiki/List_of_typographic_features">La liste des caractéristiques OpenType sur Wikipédia</a></li>
+</ul>
+
+<h2 id="Utiliser_la_détection_de_fonctionnalités_CSS">Utiliser la détection de fonctionnalités CSS</h2>
+
+<p>Étant donné que toutes les propriétés ne sont pas implémentées de façon homogène, il est préférable d'utiliser la règle @ {{cssxref("@supports")}} pour vérifier quelles propriétés peuvent être utilisées correctement et s'en remettre à {{cssxref("font-feature-settings")}} si nécessaire.</p>
+
+<p>Ainsi, les petites capitales peuvent être activées de différentes façons mais si on veut s'assurer que la mise en forme fonctionne quelle que soit la capitalisation, il faudra 2 paramètres avec <code>font-feature-settings</code> et une seule valeur pour {{cssxref("font-variant-caps")}}.</p>
+
+<pre class="brush: css">.small-caps {
+   font-feature-settings: "smcp", "c2sc";
+}
+
+@supports (font-variant-caps: all-small-caps) {
+   .small-caps {
+       font-feature-settings: normal;
+       font-variant-caps: all-small-caps;
+   }
+}
+</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<h3 id="Démonstrations_de_caractéristiques_OpenType_en_CSS">Démonstrations de caractéristiques OpenType en CSS</h3>
+
+<ul>
+ <li><a href="https://sparanoid.com/lab/opentype-features/">Démonstration CSS complète des caractéristiques OpenType (en anglais)</a>
+
+  <ul>
+   <li>Note : la complétude invoquée dans le titre n'est pas garantie…</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Outils_web_d'analyse_de_polices">Outils web d'analyse de polices</h3>
+
+<ul>
+ <li><a href="https://wakamaifondue.com">Wakamai Fondue (en anglais)</a></li>
+ <li><a href="https://axis-praxis.org">Axis Praxis (en anglais)</a></li>
+</ul>
+
+<h3 id="Spécifications_W3C">Spécifications W3C</h3>
+
+<ul>
+ <li><a href="https://drafts.csswg.org/css-fonts-3/#font-rend-props">Les propriétés relatives aux caractéristiques de police dans le module CSS Fonts de niveau 3 (en anglais)</a></li>
+ <li><a href="https://www.w3.org/TR/css-fonts-4/#propdef-font-variant-alternates"><code>font-variant-alternatives</code>, spécifiée dans le module CSS Fonts de niveau 4 (en anglais)</a></li>
+</ul>
+
+<h3 id="Autres_ressources">Autres ressources</h3>
+
+<ul>
+ <li><a href="https://helpx.adobe.com/fonts/using/use-open-type-features.html">Utiliser les caractéristiques OpenType (en anglais)</a>, écrit par Tim Brown</li>
+ <li><a href="https://helpx.adobe.com/fonts/using/open-type-syntax.html">La syntaxe Adobe pour les caractéristiques OpenType en CSS (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/css_fonts/guide_polices_variables/index.html b/files/fr/web/css/css_fonts/guide_polices_variables/index.html
new file mode 100644
index 0000000000..043902094e
--- /dev/null
+++ b/files/fr/web/css/css_fonts/guide_polices_variables/index.html
@@ -0,0 +1,265 @@
+---
+title: Guide des polices variables
+slug: Web/CSS/CSS_Fonts/Guide_polices_variables
+tags:
+  - CSS
+  - Fonts
+  - Guide
+  - Polices
+translation_of: Web/CSS/CSS_Fonts/Variable_Fonts_Guide
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><strong>Les polices variables</strong> sont une évolution de la spécification OpenType et qui permet d'activer différentes variations d'une police dans un seul fichier plutôt que d'avoir différents fichiers pour chaque taille, graisse ou style. En CSS, on peut accéder à l'ensemble des variations en utilisant une seule référence {{cssxref("@font-face")}}. Dans cet article, nous verrons tout ce qu'il faut savoir pour commencer à utiliser les polices variables.</p>
+
+<div class="warning">
+<p><strong>Attention !  </strong>Afin d'utiliser les polices variables, il faut s'assurer que son système d'exploitation est à jour. Pour les systèmes basés sur GNU/Linux, il faut la version la plus récente de Linux Freetype. Pour macOS, les versions antérieures à 10.13 ne prennent pas en charge les polices variables. Si votre système d'exploitation n'est pas à jour ou ne prend pas en charge les polices variables, vous ne pourrez pas en bénéficier sur le Web ou dans les outils de développement Firefox par exemple.</p>
+</div>
+
+<h2 id="Qu'est-ce_qu'une_police_variable">Qu'est-ce qu'une police variable ?</h2>
+
+<p>Pour mieux comprendre le fonctionnement des polices variables, revenons sur les polices « statiques » et comparons les deux systèmes.</p>
+
+<h3 id="Les_polices_standard_ou_polices_statiques">Les polices standard ou polices statiques</h3>
+
+<p>Auparavant, une police de caractères était représentées par différents fichiers pour les différentes fontes. Aussi, on avait par exemple différents fichiers pour 'Roboto Regular', 'Roboto Bold' et 'Roboto Bold Italic' et on pouvait avoir 20 à 30 fichiers distincts pour représenter l'intégralité d'une police.</p>
+
+<p>Avec un tel scénario et pour utiliser une police de façon classique sur un site, il fallait au moins quatre fichier pour les différents styles : normal, italique, gras et gras-italique. Si on souhaitait ajouter un autre niveau de graisse (par exemple une fonte plus légère pour les légendes), il fallait rajouter un fichier. Sur le réseau, cela se traduisait par d'autres requêtes HTTP et plus de données téléchargées (environ 20Ko pour chaque fichier).</p>
+
+<h3 id="Les_polices_variables">Les polices variables</h3>
+
+<p>Avec une police variable, toutes ces combinaisons de style et de graisse sont contenues dans un seul fichier. On a donc un fichier plus gros qu'un fichier de police classique mais dont la taille est inférieure ou proche de celle des 4 fichiers qu'on chargerait pour la police principale d'un site. L'avantage d'une police variable est qu'on peut accéder à l'intégralité des corps, graisses et italiques sans être plus contraint par ceux du ou des fichiers chargés séparément.</p>
+
+<p>Cela permet d'utiliser des techniques typographiques classiques pour avoir des niveaux de titre avec différents corps, d'utiliser une fonte plus étroite lorsqu'il y a plus de données à afficher, etc. Dans un magazine, par exemple, il n'est pas rare d'avoir un système typographique qui utilise 10 à 15 fontes qui sont autant de combinaisons de corps et de graisse.</p>
+
+<h4 id="Quelques_notes_à_propos_des_familles_de_polices_des_corps_et_des_variantes">Quelques notes à propos des familles de polices, des corps et des variantes</h4>
+
+<p>On a mentionné avant qu'on avait différents fichiers pour chaque graisse et italique et qu'on ne demandait pas au navigateur de synthétiser ces aspects. En effet, la plupart des polices ont des dessins spécifiques pour chaque graisse et chaque niveau d'italique (le a et le g minuscule sont souvent assez différents en italique par exemple). Afin de respecter ces spécificités et d'éviter les différences entre les implémentations des navigateurs, on préfèrera charger les fichiers correspondant à chaque graisse / italique lorsqu'on n'utilise pas de police variable.</p>
+
+<p>Vous pourrez aussi remarquer que certaines polices viennent avec deux fichiers : un contenant les caractères sans italique et leurs variations et un autre contenant les variations italiques. Cette méthode est parfois choisie afin de réduire la taille du fichier lorsqu'on n'a pas besoin des italiques. Dans tous les cas, il est toujours possible de les lier avec un nom {{cssxref("font-family")}} et d'appeler chaque style avec la valeur pertinente pour {{cssxref("font-style")}}.</p>
+
+<h2 id="L'axe_de_variation">L'axe de variation</h2>
+
+<p>Le concept clé des polices variables est celui d'<strong>axe de variation</strong> qui décrit l'intervalle autorisé pour faire varier un aspect donné d'une police. Ainsi, l'axe de la graisse décrit l'étendue entre les caractères les plus fins et les plus gras qui puissent être ; l'axe de la largeur parcourt l'étroitesse ou la largeur de la police ; l'axe italique décrit si des formes italiques sont présentes, etc. Un axe peut être un intervalle ou un choix binaire. Ainsi, la graisse pourra varier entre 1 et 999 tandis que l'italique pourrait être uniquement activable ou désactivable (1 ou 0 respectivement).</p>
+
+<p>Comme indiqué dans la spécification, deux types d'axe existent : <strong>les axes enregistrés</strong> et <strong>les axes spécifiques</strong> (<em>custom axes</em>) :</p>
+
+<ul>
+ <li>
+  <p>Les axes enregistrés sont ceux que l'on rencontre le plus souvent et qui ont donc été standardisés dans la spécification. À l'heure actuelle, il existe 5 axes enregistrés : le corps, la largeur, la pente, l'italique et la taille optique. Chacun de ces axes possède un attribut CSS correspondant.</p>
+ </li>
+ <li>
+  <p>Les axes spécifiques peuvent être n'importe quel axe défini par le concepteur de la police. Chaque axe doit simplement être défini par une étiquette avec quatre lettres qui permettront de l'identifier. Ces étiquettes pourront être utilisées dans le code CSS pour indiquer quel niveau de variation utiliser (cf. exemples ci-après).</p>
+ </li>
+</ul>
+
+<h3 id="Les_axes_enregistrés_et_les_attributs_CSS_existants">Les axes enregistrés et les attributs CSS existants</h3>
+
+<p>Dans cette section, nous verrons en détails les cinq axes enregistrés ainsi que des exemples CSS associés. Dans les cas où c'est possible, nous inclurons la syntaxe standard et la syntaxe de plus bas niveau qui utilise ({{cssxref("font-variation-settings")}}).</p>
+
+<p>Cette propriété fut le premier mécanisme implémenté pour tester les premières implémentations des polices variables et elle reste nécessaire pour utiliser de nouveaux axes ou des axes spécifiques au-delà des cinq axes enregistrés. Toutefois, lorsque c'est possible, cette syntaxe ne doit pas être utilisée si une propriété de plus haut niveau est disponible. Autrement dit, <code>font-variation-settings</code> doit uniquement être utilisée afin de définir des valeurs pour des axes qui ne seraient pas accessibles autrement.</p>
+
+<h4 id="Notes">Notes</h4>
+
+<ol>
+ <li>
+  <p>Les noms d'axes utilisés avec <code>font-variation-settings</code> sont sensibles à la casse. Les noms des axes enregistrés doivent être écrits en minuscules et les noms des axes spécifiques doivent être écrits en majuscules. Ainsi, dans ce cas :</p>
+
+  <pre class="brush: css">font-variation-settings: 'wght' 375, 'GRAD' 88;</pre>
+
+  <p><code>wght</code> correspondra à l'axe enregistré du même nom et <code>GRAD</code> à un axe spécifique.</p>
+ </li>
+ <li>
+  <p>Si on a défini des valeurs avec <code>font-variation-settings</code> et qu'on souhaite changer une de ces valeurs, il sera nécessaire de redéclarer l'ensemble des valeurs (de la même façon qu'on doit redéclarer l'ensemble des caractéristiques OpenType avec {{cssxref("font-feature-settings")}}). Il est possible de contourner cet écueil en utilisant <a href="/fr/docs/Web/CSS/Les_variables_CSS">des propriétés CSS personnalisées</a> pour les valeurs individuelles et en modifiant uniquement la valeur d'une des propriétés personnalisée (cf. l'exemple en fin d'article).</p>
+ </li>
+</ol>
+
+<h3 id="La_graisse_(weight)">La graisse (<em>weight</em>)</h3>
+
+<p>La graisse (représenté par l'étiquette <code>wght</code>) définit l'épaisseur des traits formants les caractères. En CSS, le descripteur {{cssxref("font-weight")}} a depuis longtemps permis d'utiliser différentes graisses avec des valeurs numériques comprises entre 100 et 900 (avec des incréments de 100) ou des mots-clés tels que <code>normal</code> ou <code>bold</code> qui étaient des alias pour une valeur numérique correspondante (400 et 700 ici). Ces valeurs sont toujours utilisables pour les polices statiques mais il est désormais possible d'utiliser n'importe quel entier entre 1 et 1000 dans le cas de polices variables.</p>
+
+<p>On notera qu'il n'est pas possible d'utiliser la déclaration <code>@font-face</code> afin qu'un point donné sur cet axe corresponde au mot-clé <code>bold</code> (ou tout autre mot-clé). Cela pourra généralement être résolu simplement mais nécessitera d'écrire plus de CSS :</p>
+
+<pre class="brush: css">font-weight: 375;
+
+font-variation-settings: 'wght' 375;</pre>
+
+<p>Vous pouvez éditer l'exemple CSS suivant pour voir l'effet sur la graisse de la police.</p>
+
+<div>{{EmbedGHLiveSample("css-examples/variable-fonts/weight.html", '100%', 520)}}</div>
+
+<h3 id="La_largeur_(width)">La largeur (<em>width</em>)</h3>
+
+<p>La largeur (indiquée par l'étiquette <code>wdth</code>) correspond à l'axe selon lequel les caractères sont plus ou moins étroits ou larges. En CSS, c'est le descripteur {{cssxref("font-stretch")}} qui peut être utilisé avec un pourcentage inférieur ou supérieur à 100% (la largeur « normale ») ou avec n'importe quel nombre positif. Si une valeur numérique est fournie et se situe en dehors de l'intervalle couvert par la police variable, le navigateur devra choisir la valeur la plus proche possible.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Lorsqu'on utilise la notation « bas niveau » avec <code>font-variation-settings</code>, on n'écrit pas le caractère %.</p>
+</div>
+
+<pre class="brush: css">font-stretch: 115%;
+
+font-variation-settings: 'wdth' 115;
+</pre>
+
+<p>L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.</p>
+
+<div>{{EmbedGHLiveSample("css-examples/variable-fonts/width.html", '100%', 520)}}</div>
+
+<h3 id="L'italique">L'italique</h3>
+
+<p>L'axe italique (<code>ital</code>) fonctionne différemment car il ne s'agit pas d'un intervalle mais d'une option activée ou désactivée : il n'y a pas de valeurs intermédiaires. Les caractères en italique sont la plupart du temps très différents de leur équivalent sans italique et passer d'un mode à l'autre entraîne généralement l'utilisation de glyphes différents. Attention à ne pas confondre l'italique et l'oblique (cf. l'axe de pente ci-après) : une police aura une forme italique ou une variabilité sur l'axe de pente mais rarement les deux.</p>
+
+<p>En CSS, l'italique est appliqué grâce à la propriété {{cssxref("font-style")}} (qui permet aussi d'appliquer l'oblique). On notera l'apparition de la propriété <code>font-synthesis: none;</code> qui empêche les navigateurs de synthétiser l'italique en penchant les caractères (on pourra aussi utiliser cette valeur de façon équivalente pour éviter de synthétiser la graisse).</p>
+
+<pre class="brush: css">font-style: italic;
+
+font-variation-settings: 'ital' 1;
+
+font-synthesis: none;</pre>
+
+<p>L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.</p>
+
+<div>{{EmbedGHLiveSample("css-examples/variable-fonts/italic.html", '100%', 520)}}</div>
+
+<h3 id="La_pente_(slant)">La pente (<em>slant</em>)</h3>
+
+<p>La pente (indiquée par l'étiquette <code>slnt</code>), également appelée « oblique », diffère de l'italique car elle applique une pente sur les caractères mais ne change aucun des glyphes. Cet axe est un intervalle numérique allant généralement de 0 (droit) à 20 degrés. Toutefois, les valeurs allant de -90 et à 90 (degrés) sont autorisées. C'est également le descripteur <code>font-style</code> qui peut être utilisé pour cet axe.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Le mot-clé <code>deg</code> ne doit pas être utilisé comme unité pour la notation avec <code>font-variation-settings</code>.</p>
+</div>
+
+<pre class="brush: css">font-style: oblique 14deg;
+
+font-variation-settings: 'slnt' 14;</pre>
+
+<p>L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.</p>
+
+<div>{{EmbedGHLiveSample("css-examples/variable-fonts/slant.html", '100%', 520)}}</div>
+
+<h3 id="La_taille_optique">La taille optique</h3>
+
+
+
+
+
+<p>La taille optique, indiquée par l'étiquette <code>opsz</code>, correspond à la variation de l'épaisseur des traits formants le caractère afin de s'assurer que celui-ci puisse être lu avec un petit corps et ainsi de garantir une bonne impression ou un bon affichage à l'écran.</p>
+
+<p>Ainsi, pour les petits corps, on pourra avoir des traits plus épais et pour des grands corps, on pourra avoir une variation d'épaisseur plus importante entre les différents traits du caractères pour développer correctement le dessin de la police.</p>
+
+<p>La plupart du temps, les valeurs liées à la taille optique sont appliquées automatiquement avec les valeurs correspondantes de <code>font-size</code> mais on peut tout à fait les manipuler avec la syntaxe de bas niveau <code>font-variation-settings</code>.</p>
+
+<p>Une nouvelle propriété CSS a été créée afin de prendre en charge cet axe avec une syntaxe haut niveau pour les polices variables : {{cssxref("font-optical-sizing")}}. Le descripteur <code>font-optical-sizing</code> permet uniquement d'utiliser les valeurs <code>auto</code> ou <code>none</code> et ainsi uniquement d'activer ou de désactiver le dimensionnement optique. Toutefois, avec <code>font-variation-settings: 'opsz' &lt;num&gt;</code>, on peut fournir une valeur numérique. Dans la plupart des cas, on utilisera la même valeur pour <code>font-size</code> et pour <code>opsz</code>. Il est ici permis d'utiliser une autre valeur spécifique afin d'améliorer la lisibilité ou d'obtenir un effet esthétique.</p>
+
+<pre class="brush: css">font-optical-sizing: auto;
+
+font-variation-settings: 'opsz' 36;</pre>
+
+<p>L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.</p>
+
+<div>{{EmbedGHLiveSample("css-examples/variable-fonts/optical-sizing.html", '100%', 1020)}}</div>
+
+<h3 id="Les_axes_spécifiques">Les axes spécifiques</h3>
+
+<p>Les axes spécifiques sont introduits spécifiquement par les concepteurs de polices et peuvent correspondre à n'importe quelle variation. Il est possible que certains axes spécifiques deviennent fréquemment utilisés voire finissent par être intégrés aux axes enregistrés mais seul l'avenir le dira avec certitude.</p>
+
+<h3 id="Le_grade">Le grade</h3>
+
+<p>Le grade est une variation qui consiste à épaissir certains des traits des glyphes sans agrandir la largeur totale du glyphe. En augmentant le grade, on a ainsi un caractère plus « dense ». Il ne faut pas confondre le corps et le grade : le premier augmente la taille générale, largeur incluse, des glyphes tandis que le second ne modifie pas l'espace physique occupé par le caractère. Le grade est un axe spécifique plutôt populaire car il permet de faire varier la densité apparente du texte sans modifier sa largeur et ainsi il évite de générer un décalage du texte.</p>
+
+<pre class="brush: css">font-variation-settings: 'GRAD' 88;</pre>
+
+<p>L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.</p>
+
+<div>{{EmbedGHLiveSample("css-examples/variable-fonts/grade.html", '100%', 520)}}</div>
+
+<h3 id="Utiliser_une_police_variable_les_changements_pour_font-face">Utiliser une police variable : les changements pour <code>@font-face</code></h3>
+
+<p>Pour charger une police variable, la syntaxe est proche de celle utilisée pour les polices statiques. Les quelques différences notables sont apportées par des ajouts à la syntaxe {{cssxref("@font-face")}} disponible dans la plupart des navigateurs modernes.</p>
+
+<p>La syntaxe de base est la même mais on peut indiquer la technologie utilisée pour la police ainsi que les intervalles autorisés pour les descripteurs <code>font-weight</code> et <code>font-stretch</code>.</p>
+
+<h4 id="Exemple_d'une_police_standard_réale_droite">Exemple d'une police standard réale droite :</h4>
+
+<pre class="brush: css">@font-face {
+ font-family: 'MyVariableFontName';
+ src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations');
+ font-weight: 125 950;
+ font-stretch: 75% 125%;
+ font-style: normal;
+}
+</pre>
+
+<h4 id="Exemple_d'une_police_avec_une_forme_droite_et_une_forme_italique">Exemple d'une police avec une forme droite et une forme italique :</h4>
+
+<pre class="brush: css">@font-face {
+ font-family: 'MyVariableFontName';
+ src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations');
+ font-weight: 125 950;
+ font-stretch: 75% 125%;
+ font-style: oblique 0deg 20deg;
+}</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Il n'existe pas de valeur spécifique pour la mesure du degré supérieur. Les valeurs fournies à <code>font-style</code> indiquent simplement qu'un axe est présent afin que le navigateur puisse afficher correctement les caractères droits ou en italique.</p>
+</div>
+
+<h4 id="Exemple_d'une_police_qui_ne_contient_que_des_italiques_et_aucun_caractère_droit">Exemple d'une police qui ne contient que des italiques et aucun caractère droit :</h4>
+
+<pre class="brush: css">@font-face {
+ font-family: 'MyVariableFontName';
+ src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations');
+ font-weight: 125 950;
+ font-stretch: 75% 125%;
+ font-style: italic;
+}</pre>
+
+<h4 id="Exemple_d'une_police_avec_un_axe_de_pente">Exemple d'une police avec un axe de pente :</h4>
+
+<pre class="brush: css">@font-face {
+ font-family: 'MyVariableFontName';
+ src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations');
+ font-weight: 125 950;
+ font-stretch: 75% 125%;
+ font-style: oblique 0deg 12deg;
+}</pre>
+
+<div class="note">
+<p><strong>Note :</strong> La syntaxe complète n'est pas implémentée par l'ensemble des navigateurs et il faudra donc tester avec précaution. Tous les navigateurs qui prennent en charge les polices variables sauront les afficher même si seul le format de fichier est indiqué (plutôt que le format complet : par exemple <code>woff2</code> à la place de <code>woff2-variations</code>), mais mieux vaut utiliser la syntaxe la plus précise si possible.</p>
+</div>
+
+<div class="note">
+<p><strong>Note :</strong> Fournir des valeurs d'intervalle pour <code>font-weight</code>, <code>font-stretch</code> et <code>font-style</code> empêchera le navigateur d'afficher des polices en dehors de ces intervalles en utilisant les attributs <code>font-weight</code> ou <code>font-stretch</code>. En revanche, cela ne bloquera pas la syntaxe de plus bas niveau avec <code>font-variation-settings</code> !</p>
+</div>
+
+<h2 id="Amélioration_progressive_et_anciens_navigateurs">Amélioration progressive et anciens navigateurs</h2>
+
+<p>La prise en charge des polices variables peut être vérifié grâce à {{cssxref("@supports")}}. Il est donc possible d'utiliser des polices variables en production et de limiter la portée des polices variables à l'intérieur d'une requête de prise en charge.</p>
+
+<pre class="brush: css">h1 {
+ font-family: some-non-variable-font-family;
+}
+
+@supports (font-variation-settings: 'wdth' 115) {
+ h1 {
+    font-family: some-variable-font-family;
+ }
+}</pre>
+
+<h2 id="Pages_d'exemples">Pages d'exemples</h2>
+
+<p>Les pages d'exemples suivantes illustrent deux façons pour structurer le CSS. La première utilise les attributs standards où c'est possible et la seconde utilise les propriétés personnalisées afin de définir les valeur pour la chaîne de caractères fournie à <code>font-variation-settings</code> et montre comment mettre à jour une valeur plutôt que de redéfinir l'intégralité de la chaîne de caractères. On notera aussi l'effet au survol (<em>hover</em>) sur l'élément <code>h2</code> qui ne joue que sur l'axe de grade.</p>
+
+<div>{{EmbedGHLiveSample("css-examples/variable-fonts/sample-page.html", '100%', 1220)}}</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://drafts.csswg.org/css-fonts-4">Module de spécification CSS Fonts de niveau 4 (au stade de brouillon) (en anglais)</a></li>
+ <li><a href="https://docs.microsoft.com/en-us/typography/opentype/spec/otvaroverview">Introduction Microsoft aux variations Open Type (en anglais)</a></li>
+ <li><a href="https://docs.microsoft.com/en-us/typography/opentype/spec/dvaraxisreg">Registre des étiquettes d'axe de variation - Microsoft OpenType Design (en anglais)</a></li>
+ <li><a href="https://wakamaifondue.com">Wakamai Fondue (en anglais)</a> (un site qui permet d'explorer les axes et caractéristiques d'une police)</li>
+ <li><a href="https://www.axis-praxis.org">Axis Praxis (en anglais)</a> (une site qui permet de manipuler les axes de polices variables)</li>
+ <li><a href="https://v-fonts.com">V-Fonts.com (en anglais)</a> (un catalogue de polices variables)</li>
+ <li><a href="https://play.typedetail.com">Font Playground (en anglais)</a> (un autre site de manipulation des polices variables)</li>
+</ul>
diff --git a/files/fr/web/css/css_fonts/index.html b/files/fr/web/css/css_fonts/index.html
new file mode 100644
index 0000000000..ac5fb425fd
--- /dev/null
+++ b/files/fr/web/css/css_fonts/index.html
@@ -0,0 +1,142 @@
+---
+title: CSS Fonts
+slug: Web/CSS/CSS_Fonts
+tags:
+  - Aperçu
+  - CSS
+  - CSS Fonts
+  - Reference
+translation_of: Web/CSS/CSS_Fonts
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Fonts</strong> est un module CSS qui définit des propriétés relatives aux polices de caractères et la façon dont les ressources des polices sont chargées. Il permet de définir le style d'une police, comme sa famille, sa taille ou sa graisse ainsi que la variante du glyphe à utiliser dans le cas des polices disposant de plusieurs glyphes par caractère. Il permet également de définir la hauteur d'une ligne.</p>
+
+<h2 id="Exemple_simple">Exemple simple</h2>
+
+<p>L'exemple qui suit illustre l'utilisation simple de propriétés relatives aux polices afin de mettre en forme le texte d'un paragraphe.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">p {
+  width: 600px;
+  margin: 0 auto;
+  font-family: "Helvetica Neue", "Arial",  sans-serif;
+  font-style: italic;
+  font-weight: 100;
+  font-variant-ligatures: normal;
+  font-size: 2rem;
+  letter-spacing: 1px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;
+   Alice ne fut pas très-étonnée, tant elle commençait à s’habituer aux
+   événements extraordinaires. Tandis qu’elle regardait encore l’endroit
+   que le Chat venait de quitter, il reparut tout à coup.
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemple_simple', '100%', '200')}}</p>
+
+<h2 id="Exemples_utilisant_les_polices_variables">Exemples utilisant les polices variables</h2>
+
+<p>Vous pouvez trouver plusieurs exemples utilisant les polices variables sur <a href="https://v-fonts.com/">v-fonts.com</a> et <a href="https://www.axis-praxis.org/">axis-praxis.org</a>. Notre <a href="/fr/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">guide sur les polices variables</a> contient des informations et des exemples d'utilisation.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("font")}}</li>
+ <li>{{cssxref("font-family")}}</li>
+ <li>{{cssxref("font-feature-settings")}}</li>
+ <li>{{cssxref("font-kerning")}}</li>
+ <li>{{cssxref("font-language-override")}}</li>
+ <li>{{cssxref("font-optical-sizing")}}</li>
+ <li>{{cssxref("font-size")}}</li>
+ <li>{{cssxref("font-size-adjust")}}</li>
+ <li>{{cssxref("font-stretch")}}</li>
+ <li>{{cssxref("font-style")}}</li>
+ <li>{{cssxref("font-synthesis")}}</li>
+ <li>{{cssxref("font-variant")}}</li>
+ <li>{{cssxref("font-variant-alternates")}}</li>
+ <li>{{cssxref("font-variant-caps")}}</li>
+ <li>{{cssxref("font-variant-east-asian")}}</li>
+ <li>{{cssxref("font-variant-ligatures")}}</li>
+ <li>{{cssxref("font-variant-numeric")}}</li>
+ <li>{{cssxref("font-variant-position")}}</li>
+ <li>{{cssxref("font-variation-settings")}}</li>
+ <li>{{cssxref("font-weight")}}</li>
+ <li>{{cssxref("line-height")}}</li>
+</ul>
+</div>
+
+<h3 id="Règles">Règles @</h3>
+
+<dl>
+ <dt>{{cssxref("@font-face")}}</dt>
+ <dd>
+ <div class="index">
+ <ul>
+  <li>{{cssxref("@font-face/font-family", "font-family")}}</li>
+  <li>{{cssxref("@font-face/font-feature-settings", "font-feature-settings")}}</li>
+  <li>{{cssxref("@font-face/font-style", "font-style")}}</li>
+  <li>{{cssxref("@font-face/font-variant", "font-variant")}}</li>
+  <li>{{cssxref("@font-face/font-weight", "font-weight")}}</li>
+  <li>{{cssxref("@font-face/font-stretch", "font-stretch")}}</li>
+  <li>{{cssxref("@font-face/src", "src")}}</li>
+  <li>{{cssxref("@font-face/unicode-range", "unicode-range")}}</li>
+ </ul>
+ </div>
+ </dd>
+ <dt>{{cssxref("@font-feature-values")}}</dt>
+</dl>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte">Mise en forme du texte et utilisation des polices</a></dt>
+ <dd>Dans cet article, destiné aux débutants, nous abordons en détail les fonctionnalités pour la mise en forme du texte et la modification de la police.</dd>
+ <dt><a href="/fr/docs/Web/CSS/CSS_Fonts/Guide_caractéristiques_police_OpenType">Guide sur les caractéristiques de police OpenType</a></dt>
+ <dd>Les caractéristiques de police ou variantes font référence à différents glyphes ou styles de caractère contenus dans une police OpenType. Cela inclut notamment les ligatures (des caractères spéciaux qui permettent de combiner des caractères entre eux comme œ qui est la ligature entre o et e), le crénage, etc. Toutes ces caractéristiques sont des caractéristiques OpenType Features et peuvent être utilisées sur le Web grâce à certaines propriétés spécifiques qui permettent un contrôle de bas niveau comme {{cssxref("font-feature-settings")}}. Dans cet article, nous verrons tout ce qu'il faut savoir pour manipuler les caractéristiques OpenType avec CSS.</dd>
+ <dt><a href="/fr/docs/Web/CSS/CSS_Fonts/Guide_polices_variables">Guide sur les polices variables</a></dt>
+ <dd>Les polices variables sont une évolution de la spécification OpenType qui permet de faire varier différents axes d'une police (provenant d'un seul fichier) plutôt que d'avoir plusieurs polices d'une même fonte. Cet article fournit l'ensemble des informations nécessaires à l'exploration des polices variables.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Fonts')}}</td>
+   <td>{{Spec2('CSS4 Fonts')}}</td>
+   <td>Ajout de <code>font-variation-settings</code> (ainsi que des propriétés de haut niveau associées) et de <code>font-optical-sizing</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Ajout de <code>font-feature-settings</code> (ainsi que des propriétés de haut niveau associées)</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'fonts.html#font-shorthand', '')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#font', '')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/css/css_fragmentation/index.html b/files/fr/web/css/css_fragmentation/index.html
new file mode 100644
index 0000000000..e6e860fb54
--- /dev/null
+++ b/files/fr/web/css/css_fragmentation/index.html
@@ -0,0 +1,48 @@
+---
+title: CSS Fragmentation
+slug: Web/CSS/CSS_Fragmentation
+tags:
+  - Aperçu
+  - CSS
+  - CSS Fragmentation
+  - NeedsContent
+  - Reference
+translation_of: Web/CSS/CSS_Fragmentation
+---
+<div>{{cssref}}</div>
+
+<p><em><strong>CSS Fragmentation</strong></em> est un module CSS qui décrit la façon dont le contenu est divisé (fragmenté) entre plusieurs <a href="/en-US/docs/Web/CSS/Paged_Media">pages</a>, régions ou <a href="/en-US/docs/Web/CSS/CSS_Columns">colonnes</a>.</p>
+
+<p>La fragmentation se produit lorsqu'une boîte en ligne se retrouve sur plusieurs lignes ou lorsqu'un bloc s'étend sur plus d'une colonne au sein d'un conteneur de colonne ou sur un saut de page lorsque le document est imprimé. Chaque morceau de l'élément ainsi divisé est appelé un <em>fragment</em>.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("box-decoration-break")}}</li>
+ <li>{{cssxref("break-after")}}</li>
+ <li>{{cssxref("break-before")}}</li>
+ <li>{{cssxref("break-inside")}}</li>
+ <li>{{cssxref("orphans")}}</li>
+ <li>{{cssxref("widows")}}</li>
+</ul>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fragmentation')}}</td>
+   <td>{{Spec2('CSS3 Fragmentation')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/css/css_generated_content/index.html b/files/fr/web/css/css_generated_content/index.html
new file mode 100644
index 0000000000..09d0a27ed9
--- /dev/null
+++ b/files/fr/web/css/css_generated_content/index.html
@@ -0,0 +1,48 @@
+---
+title: CSS Generated Content
+slug: Web/CSS/CSS_Generated_Content
+tags:
+  - Aperçu
+  - CSS
+  - CSS Generated Content
+  - Reference
+translation_of: Web/CSS/CSS_Generated_Content
+---
+<div>{{CSSRef}}</div>
+
+<p><em><strong>CSS Generated Content</strong></em> est un module CSS qui définit comment ajouter du contenu à un élément.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("content")}}</li>
+ <li>{{cssxref("quotes")}}</li>
+</ul>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Content")}}</td>
+   <td>{{Spec2("CSS3 Content")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/css/css_grid_layout/alignement_des_boîtes_avec_les_grilles_css/index.html b/files/fr/web/css/css_grid_layout/alignement_des_boîtes_avec_les_grilles_css/index.html
new file mode 100644
index 0000000000..8353f2c29e
--- /dev/null
+++ b/files/fr/web/css/css_grid_layout/alignement_des_boîtes_avec_les_grilles_css/index.html
@@ -0,0 +1,661 @@
+---
+title: L'alignement des boîtes avec les grilles CSS
+slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS
+tags:
+  - CSS
+  - CSS Grid
+  - Grille CSS
+  - Guides
+  - Intermédiaire
+translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout
+---
+<div>{{CSSRef}}</div>
+
+<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture","Web/CSS/CSS_Grid_Layout")}}</p>
+
+<p>Si vous connaissez <a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS">les boîtes flexibles (flexbox)</a> vous savez déjà comment aligner les éléments flexibles à l'intérieur d'un conteneur flexible. Ces propriétés d'alignement, initialement spécifiée dans la spécification des boîtes flexibles, sont désormais spécifiées dans une nouvelle spécification <a href="https://drafts.csswg.org/css-align/">Box Alignment Level 3</a>. Cette spécification détaille le fonctionnement de l'alignement pour les différentes méthodes de disposition.</p>
+
+<p>Chaque méthode de disposition qui implémente cette nouvelle spécification se comportera légèrement différemment selon les différences de contraintes et de fonctionnalités (et aussi selon le comportement historique). On ne pourra donc pas avoir un alignement exactement homogène. La spécification pour l'alignement des boîtes détaille le fonctionnement de chaque méthode mais malheureusement, à l'heure actuelle, aucun navigateur ne prend en charge cette spécification. À l'heure actuelle, les navigateurs respectent les règles de cette spécification pour l'alignement et la répartition de l'espace lorsqu'on utilise une disposition en grille. Dans cet article, nous verrons comment celles-ci fonctionnent. On retrouvera de nombreux points communs avec les boîtes flexibles pour le fonctionnement de ces propriétés et valeurs. Toutefois, les grilles fonctionnant sur deux axes et les boîtes flexibles sur un seul, il faudra faire attention à quelques différences. Commençons par analyser les deux axes utilisés lorsqu'il s'agit d'aligner des objets sur une grille.</p>
+
+<h2 id="Les_deux_axes_dune_grille">Les deux axes d'une grille</h2>
+
+<p>Lorsqu'on manipule une grille, on dispose  de deux axes sur lesquels aligner les objets. L'axe de bloc et l'axe en ligne. L'axe de bloc est l'axe selon lequel les blocs sont disposés quand on a une disposition en bloc (<em>block layout</em>). Par exemple, si on a deux paragraphes sur une page, par défaut, ils s'affichent l'un en dessous de l'autre.</p>
+
+<p><img src="https://mdn.mozillademos.org/files/14725/7_Block_Axis.png" style="height: 306px; width: 940px;"></p>
+
+<p><strong>L'axe en ligne est orthogonal à l'axe de bloc. C'est la direction selon laquelle progresse le texte.</strong></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14773/7_Inline_Axis.png" style="height: 306px; width: 940px;"></p>
+
+<p>Grâce aux propriétés et à leurs valeurs, nous serons en mesure d'aligner le contenu de la grillle par rapport à ces deux axes.</p>
+
+<h2 id="Aligner_des_objets_sur_laxe_de_bloc_block_axis">Aligner des objets sur l'axe de bloc (<em>block axis</em>)</h2>
+
+<p>Les propriétés {{cssxref("align-self")}} et {{cssxref("align-items")}} permettent de contrôler l'alignement selon l'axe de bloc. Lorsqu'on utilise ces propriétés, on modifie l'alignement de l'objet au sein de la zone de grille sur laquelle il est placé.</p>
+
+<p>Dans l'exemple suivant, on a quatre zones sur la grille. On peut utiliser la propriété {{cssxref("align-items")}} sur le conteneur de la grille afin d'aligner les objets avec l'une des valeurs suivantes :</p>
+
+<ul>
+ <li><code>auto</code></li>
+ <li><code>normal</code></li>
+ <li><code>start</code></li>
+ <li><code>end</code></li>
+ <li><code>center</code></li>
+ <li><code>stretch</code></li>
+ <li><code>baseline</code></li>
+ <li><code>first baseline</code></li>
+ <li><code>last baseline</code></li>
+</ul>
+
+<div id="alignment_1">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 100px;
+  grid-template-areas:
+    "a a a a b b b b"
+    "a a a a b b b b"
+    "c c c c d d d d"
+    "c c c c d d d d";
+  align-items: start;
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Objet 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Objet 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Objet 3&lt;/div&gt;
+  &lt;div class="item4"&gt;Objet 4&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('alignment_1', '500', '450')}}</p>
+</div>
+
+<p>Lorsqu'on utilise <code>align-self: start</code>, la hauteur de chaque <code>&lt;div&gt;</code> sera déterminée par le contenu du <code>&lt;div&gt;</code>. En revanche, si on n'utilise pas {{cssxref("align-self")}}, chaque <code>&lt;div&gt;</code> sera étiré afin de remplir la zone de la grille.</p>
+
+<p>La propriété {{cssxref("align-items")}} définit en fait la valeur de la propriété {{cssxref("align-self")}} pour tous les éléments fils de la grille. Cela signifie qu'on peut avoir un réglage plus fin sur chacun des objets de la grille en utilisant <code>align-self</code> pour les objets.</p>
+
+<p>Dans le prochain exemple, on utilise la propriété <code>align-self</code> afin d'illustrer les différentes valeurs pour l'alignement. La première zone illustre le comportement par défaut pour <code>align-self</code> : l'objet est étiré. Le deuxième objet utilise la valeur <code>start</code>, le troisième utilise <code>end</code> et le quatrième utilise <code>center</code>.</p>
+
+<div id="alignment_2">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 100px;
+  grid-template-areas:
+    "a a a a b b b b"
+    "a a a a b b b b"
+    "c c c c d d d d"
+    "c c c c d d d d";
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+  align-self: start;
+}
+.item3 {
+  grid-area: c;
+  align-self: end;
+}
+.item4 {
+  grid-area: d;
+  align-self: center;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Objet 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Objet 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Objet 3&lt;/div&gt;
+  &lt;div class="item4"&gt;Objet 4&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('alignment_2', '500', '450')}}</p>
+</div>
+
+<h3 id="Gestion_des_objets_avec_un_ratio_intrinsèque">Gestion des objets avec un ratio intrinsèque</h3>
+
+<p>La spécification indique que le comportement par défaut pour {{cssxref("align-self")}} est d'étirer l'objet sauf si celui-ci possède un ratio intrinsèque. Dans ce cas, le comportement par défaut correspond à la valeur <code>start</code>. En effet, si le comportement par défaut était le même pour les éléments avec un ratio intrinsèque (une image matricielle par exemple), l'étirement distordrait l'objet.</p>
+
+<p>Bien que ce comportement ait récemment été clarifié dans la spécification, il n'est pas encore implémenté dans les différents navigateurs. Pour le moment, il faut donc s'assurer d'utiliser {{cssxref("align-self")}} et {{cssxref("justify-self")}} avec les valeurs <code>start</code> pour les éléments concernés comme les images. Cela correspondra au comportement par défaut lorsqu'il aura été implémenté.</p>
+
+<h2 id="Justifier_les_objets_sur_laxe_en_ligne_inline_axis">Justifier les objets sur l'axe en ligne (<em>inline axis</em>)</h2>
+
+<p>{{cssxref("align-items")}} et {{cssxref("align-self")}} gèrent l'alignement des objets sur l'axe de bloc. {{cssxref("justify-items")}} et {{cssxref("justify-self")}} permettent quant à eux de gérer l'alignement sur l'axe en ligne. Les valeurs disponibles sont les mêmes que pour <code>align-self</code> :</p>
+
+<ul>
+ <li><code>auto</code></li>
+ <li><code>normal</code></li>
+ <li><code>start</code></li>
+ <li><code>end</code></li>
+ <li><code>center</code></li>
+ <li><code>stretch</code></li>
+ <li><code>baseline</code></li>
+ <li><code>first baseline</code></li>
+ <li><code>last baseline</code></li>
+</ul>
+
+<p>Juste après, on voit le même exemple qu'avec {{cssxref("align-items")}} où on a utilisé la propriété {{cssxref("justify-self")}}.</p>
+
+<p>Là encore, la valeur par défaut <code>stretch</code> pour les objets qui n'ont pas de ratio intrinsèque. Cela signifie que, par défaut, les objets de la grille couvriront l'ensemble de la zone de grille sur laquelle ils sont placés. Dans l'exemple qui suit, le premier objet illustre cet alignement par défaut.</p>
+
+<div id="alignment_3">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 100px;
+  grid-template-areas:
+    "a a a a b b b b"
+    "a a a a b b b b"
+    "c c c c d d d d"
+    "c c c c d d d d";
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+  justify-self: start;
+}
+.item3 {
+  grid-area: c;
+  justify-self: end;
+}
+.item4 {
+  grid-area: d;
+  justify-self: center;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Objet 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Objet 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Objet 3&lt;/div&gt;
+  &lt;div class="item4"&gt;Objet 4&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('alignment_3', '500', '450')}}</p>
+</div>
+
+<p>Comme pour {{cssxref("align-self")}} et {{cssxref("align-items")}}, on peut utiliser la propriété {{cssxref("justify-items")}} sur le conteneur de la grille afin de régler la valeur de {{cssxref("justify-self")}} pour l'ensemble des objets de la grille.</p>
+
+<p>Les propriétés {{cssxref("justify-self")}} et {{cssxref("justify-items")}} ne sont pas disponibles lorsqu'on utilise les boîtes flexibles car celles-ci s'étendent uniquement sur une dimension. Pour aligner les éléments sur l'axe principale d'une boîte flexible, on utilisera la propriété {{cssxref("justify-content")}}.</p>
+
+<h3 id="Propriétés_raccourcies">Propriétés raccourcies</h3>
+
+<p>La propriété {{CSSxRef("place-items")}} est une propriété raccourcie qui synthétise {{CSSxRef("align-items")}} et {{CSSxRef("justify-items")}}. {{CSSxRef("place-self")}} est une propriété raccourcie qui synthétise {{CSSxRef("align-self")}} et {{CSSxRef("justify-self")}}.</p>
+
+<h2 id="Centrer_un_objet_sur_une_zone">Centrer un objet sur une zone</h2>
+
+<p>En combinant les propriétés <code>align-</code><code>*</code> et <code>justify-*</code>, on peut facilement centrer un objet sur sa zone de grille.</p>
+
+<div id="alignment_4">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 200px;
+  grid-template-areas:
+    ". a a ."
+    ". a a .";
+}
+.item1 {
+  grid-area: a;
+  align-self: center;
+  justify-self: center;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+ &lt;div class="item1"&gt;Objet 1&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('alignment_4', '500', '480')}}</p>
+</div>
+
+<h2 id="Aligner_les_pistes_dune_grille_sur_laxe_de_bloc">Aligner les pistes d'une grille sur l'axe de bloc</h2>
+
+<p>Si on a des pistes qui n'occupent pas tout l'espace du conteneur, on pourra aligner les pistes au sein du conteneur. Là aussi, on peut obtenir cet alignement sur l'axe des colonnes et l'axe des lignes : {{cssxref("align-content")}} permet d'aligner les pistes selon l'axe des colonnes et {{cssxref("justify-content")}} permettant d'aligner sur l'axe en ligne.</p>
+
+<p>La propriété {{cssxref("place-content")}} est une propriété raccourcie pour {{cssxref("align-content")}} et {{cssxref("justify-content")}}.</p>
+
+<p>Les valeurs disponibles pour {{cssxref("align-content")}}, {{cssxref("justify-content")}} et {{cssxref("place-content")}} sont :</p>
+
+<ul>
+ <li><code>normal</code></li>
+ <li><code>start</code></li>
+ <li><code>end</code></li>
+ <li><code>center</code></li>
+ <li><code>stretch</code></li>
+ <li><code>space-around</code></li>
+ <li><code>space-between</code></li>
+ <li><code>space-evenly</code></li>
+ <li><code>baseline</code></li>
+ <li><code>first baseline</code></li>
+ <li><code>last baseline</code></li>
+</ul>
+
+<p>Dans l'exemple qui suit, on a un conteneur qui mesure 500 pixels de haut sur 500 pixels de large. On définit trois pistes de ligne et trois pistes de colonnes qui mesurent chacune 100 pixels et avec une gouttière de 10 pixels. On a donc un espace disponible dans le conteneur dans chaque direction.</p>
+
+<p>La propriété <code>align-content</code> s'applique sur le conteneur de la grille car elle porte sur l'ensemble de la grille. Pour une disposition en grille, la valeur par défaut est <code>start</code> : cela indique que les pistes commencent à partir du coin en haut à gauche de la grille.</p>
+
+<div id="alignment_5">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Objet 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Objet 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Objet 3&lt;/div&gt;
+  &lt;div class="item4"&gt;Objet 4&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('alignment_5', '500', '520')}}</p>
+</div>
+
+<p>Si on ajoute <code>align-content</code> avec la valeur <code>end</code> sur le conteneur, les pistes seront déplacées à la fin du conteneur selon l'axe des colonnes.</p>
+
+<div id="alignment_6">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+  align-content: end;
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Objet 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Objet 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Objet 3&lt;/div&gt;
+  &lt;div class="item4"&gt;Objet 4&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('alignment_6', '500', '520')}}</p>
+</div>
+
+<p>Pour cette propriété, on peut également utiliser des valeurs qu'on manipule avec les boîtes flexibles : <code>space-between</code>, <code>space-around</code> et <code>space-evenly</code> qui permettent de répartir l'espace. Si on utilise {{cssxref("align-content")}} avec <code>space-between</code> pour notre exemple, on voit alors que les éléments sont espacés de façon équitable.</p>
+
+<div id="alignment_7">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+  align-content: space-between;
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Objet 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Objet 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Objet 3&lt;/div&gt;
+  &lt;div class="item4"&gt;Objet 4&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('alignment_7', '500', '1570')}}</p>
+</div>
+
+<p>On notera qu'en utilisant ces valeurs pour répartir l'espace, cela peut agrandir les objets de la grille. Si un objet s'étale sur plusieurs pistes, un espace sera ajouté entre chaque piste afin que l'objet qui doit être agrandi puisse absorber cet espace. Aussi, si vous choisissez d'utiliser ces valeurs, assurez-vous que le contenu des pistes puisse absorber cet espace supplémentaire ou que les propriétés d'alignement les renvoient au début de la piste plutôt que de les étirer.</p>
+
+<p>Dans l'image qui suit, on a a placé une grille en utilisant <code>align-content: start</code> et une autre grille qui utilise <code>align-content: space-between</code>. On peut voir la façon dont les objets 1 et 2 (qui s'étalent sur deux lignes) ont gagné en hauteur pour combler l'espace entre les pistes.</p>
+
+<p><img src="https://mdn.mozillademos.org/files/14729/7_space-between.png" style="height: 534px; width: 1030px;"></p>
+
+<h2 id="Justifier_les_pistes_sur_laxe_des_lignes">Justifier les pistes sur l'axe des lignes</h2>
+
+<p>Sur l'axe des lignes, on peut utiliser {{cssxref("justify-content")}} de la même façon qu'on utilisait {{cssxref("align-content")}} pour l'axe des colonnes.</p>
+
+<p>Avec le même exemple, on utilise {{cssxref("justify-content")}} avec la valeur <code>space-around</code>. Là encore, les pistes qui s'étalent sur plus d'une colonne gagnent en largeur.</p>
+
+<div id="alignment_8">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+  align-content: space-between;
+  justify-content: space-around;
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Objet 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Objet 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Objet 3&lt;/div&gt;
+  &lt;div class="item4"&gt;Objet 4&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('alignment_8', '500', '500')}}</p>
+</div>
+
+<h2 id="Alignement_et_marges_automatiques">Alignement et marges automatiques</h2>
+
+<p>Pour aligner les objets dans une zone, on peut également utiliser des marges automatiques. Si vous avez déjà utiliser <code>auto</code> pour les marges droite et gauche d'un conteneur de bloc, vous savez qu'une telle marge absorbe l'espace disponible. En utilisant <code>auto</code> pour les deux côtés, le bloc est contraint au milieu car les deux marges occupent le plus d'espace possible.</p>
+
+<p>Dans l'exemple qui suit, pour l'objet 1, on utilise une marge à gauche avec <code>auto</code>. On peut alors voir le contenu poussé à droite de la zone (la marge à gauche occupant le plus d'espace possible).</p>
+
+<div id="alignment_9">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+}
+.item1 {
+  grid-area: a;
+  margin-left: auto;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Objet 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Objet 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Objet 3&lt;/div&gt;
+  &lt;div class="item4"&gt;Objet 4&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('alignment_9', '500', '500')}}</p>
+</div>
+
+<p>On peut voir comment l'objet est aligné grâce à <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">l'outil de mise en évidence des grilles dans Firefox</a>.</p>
+
+<p><img src="https://mdn.mozillademos.org/files/14731/7_auto_margins.png" style="height: 1000px; width: 1000px;"></p>
+
+<h2 id="Lalignement_et_les_modes_décriture">L'alignement et les modes d'écriture</h2>
+
+<p>Dans tout ces exemples, nous avons travaillé en français ou en anglais, des langues qui s'écrivent de gauche à droite. Cela signifie que les lignes de début de notre grille étaient situées en haut et à gauche lorsqu'on raisonnait avec des directions <em>physiques</em>.</p>
+
+<p>Les spécifications pour les grilles CSS et les boîtes flexibles sont conçues pour fonctionner avec les différents modes d'écriture. Cela signifie que si on travaille avec une langue qui s'écrit de droite à gauche (comme l'arabe), le début de la grille serait en haut à droite. Cela signifie également que la valeur par défaut <code>justify-content: start</code> placerait les pistes du côté droit de la grille. En revanche, si on utilise les marges automatiques avec <code>margin-right</code> ou <code>margin-left</code> ou si on utilise le positionnement absolu avec les valeurs <code>top</code>, <code>right</code>, <code>bottom</code> et <code>left</code>, on ne tiendra pas compte des modes d'écritures. Dans le guide suivant, nous verrons plus en détails comment les grilles et l'alignement interagissent avec les modes d'écriture. Cet aspect est fondamental si vous souhaitez développer des sites qui puissent être affichés dans plusieurs langues ou si vous souhaitez mélanger certaines langues ou modes d'écriture pour une application.</p>
+
+<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture","Web/CSS/CSS_Grid_Layout")}}</p>
diff --git a/files/fr/web/css/css_grid_layout/construire_des_dispositions_courantes_avec_des_grilles_css/index.html b/files/fr/web/css/css_grid_layout/construire_des_dispositions_courantes_avec_des_grilles_css/index.html
new file mode 100644
index 0000000000..44e85dda1f
--- /dev/null
+++ b/files/fr/web/css/css_grid_layout/construire_des_dispositions_courantes_avec_des_grilles_css/index.html
@@ -0,0 +1,560 @@
+---
+title: Construire des dispositions courantes avec des grilles CSS
+slug: >-
+  Web/CSS/CSS_Grid_Layout/Construire_des_dispositions_courantes_avec_des_grilles_CSS
+tags:
+  - CSS
+  - CSS Grids
+  - Grilles CSS
+  - Guide
+  - Intermédiaire
+translation_of: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout
+---
+<div>{{CSSRef}}</div>
+
+<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition","","Web/CSS/CSS_Grid_Layout")}}</p>
+
+<p>Pour clôturer ces différents guides, nous allons maintenant voir différentes dispositions sur lesquelles nous appliquerons des techniques avec les grilles CSS. Nous prendrons un exemple qui utilise <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille">les zones nommées d'une grille</a>, un système de grille flexible avec 12 colonnes et aussi une liste de produits avec un placement automatique. Comme nous le verrons, il existe plusieurs méthodes pour accéder à chaque résultat. À vous de choisir la méthode qui vous paraît la plus pertinente et utile pour les problèmes que vous avez à résoudre et les dispositions que vous devez implémenter.</p>
+
+<h2 id="Une_disposition_adaptative_avec_une_à_trois_colonnes_en_utilisant_grid-template-areas">Une disposition adaptative avec une à trois colonnes en utilisant <code>grid-template-areas</code></h2>
+
+<p>De nombreux sites web sont construits comme une variation autour de cette disposition avec du contenu, une ou plusieurs barres latérale, un en-tête et un pied de page. Pour que le site soit <em>responsive</em>, on peut souhaiter avoir une seule colonne pour certaines tailles d'affichage, ajouter une barre latérale lorsqu'on a plus d'espace et enfin, avoir trois colonnes pour les écrans les plus larges.</p>
+
+<p><img alt="Image of the three different layouts created by redefining our grid at two breakpoints." src="https://mdn.mozillademos.org/files/14749/11-responsive-areas.png"></p>
+
+<p>Ici, on crée une disposition avec des zones nommées comme on a pu le voir <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille">dans l'article correspondant</a></em>.</p>
+
+<p>Dans le document on a un conteneur qui contient un en-tête, un pied de page, du contenu principal, une barre de navigation, une barre latérale et un bloc dans lequel on souhaite placer de la publicité.</p>
+
+<div id="layout_1">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  max-width: 1024px;
+  margin: 0 auto;
+  font: 1.2em Helvetica, arial, sans-serif;
+}
+
+.wrapper &gt; * {
+  border: 2px solid #f08c00;
+  background-color: #ffec99;
+  border-radius: 5px;
+  padding: 10px;
+}
+
+nav ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;header class="main-head"&gt;L'en-tête&lt;/header&gt;
+  &lt;nav class="main-nav"&gt;
+    &lt;ul&gt;
+      &lt;li&gt;&lt;a href=""&gt;Nav 1&lt;/a&gt;&lt;/li&gt;
+      &lt;li&gt;&lt;a href=""&gt;Nav 2&lt;/a&gt;&lt;/li&gt;
+      &lt;li&gt;&lt;a href=""&gt;Nav 3&lt;/a&gt;&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/nav&gt;
+  &lt;article class="content"&gt;
+    &lt;h1&gt;L'article principal&lt;/h1&gt;
+    &lt;p&gt;
+       Dans cette disposition, on affiche les zones dans le même
+       ordre que dans le document pour les écrans dont la largeur
+       est inférieure à 500 pixels. On passe à une disposition sur
+       deux colonnes ou trois colonnes en redéfinissant la grille
+       et le placement des objets sur la grille.
+    &lt;/p&gt;
+  &lt;/article&gt;
+  &lt;aside class="side"&gt;Barre latérale&lt;/aside&gt;
+  &lt;div class="ad"&gt;Publicité&lt;/div&gt;
+  &lt;footer class="main-footer"&gt;Le pied de page&lt;/footer&gt;
+&lt;/div&gt;
+</pre>
+
+<p>On utilise {{cssxref("grid-template-areas")}} afin de créer la disposition. On nomme les zones en dehors des différentes <em>media queries</em>. Les propriétés sont nommées grâce à la propriété {{cssxref("grid-area")}}.</p>
+
+<pre class="brush: css">.main-head {
+  grid-area: header;
+}
+.content {
+  grid-area: content;
+}
+.main-nav {
+  grid-area: nav;
+}
+.side {
+  grid-area: sidebar;
+}
+.ad {
+  grid-area: ad;
+}
+.main-footer {
+  grid-area: footer;
+}
+</pre>
+
+<p>Avec ces différentes règles, on n'a pas encore de disposition, uniquement des noms qu'on pourra utiliser. Ensuite, on définit la disposition qu'on aura par défaut et qui sera utilisée pour les mobiles. Dans cette règle, on garde le même ordre que celui utilisé dans le document (cf. <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">le guide sur les grilles CSS et l'accessibilité</a></em>). On ne définit aucune piste (colonne ou ligne) mais cela suffit pour décrire une disposition sur une seule colonne, les lignes seront créées implicitement lorsqu'elles seront nécessaires.</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-gap: 20px;
+  grid-template-areas:
+    "header"
+    "nav"
+    "content"
+    "sidebar"
+    "ad"
+    "footer";
+}
+</pre>
+
+<p>Après cette disposition par défaut pour les appareils mobiles, on peut ajouter une <a href="/fr/docs/Web/CSS/Requêtes_média">requête média (<em>media query</em>)</a> et redéfinir la disposition lorsqu'on a plus d'espace et qu'on peut afficher deux colonnes :</p>
+
+<pre class="brush: css">@media (min-width: 500px) {
+  .wrapper {
+    grid-template-columns: 1fr 3fr;
+    grid-template-areas:
+      "header  header"
+      "nav     nav"
+      "sidebar content"
+      "ad      footer";
+  }
+  nav ul {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+</pre>
+
+<p>On peut voir la disposition organisée dans la valeur pour la propriété {{cssxref("grid-template-areas")}}. L'en-tête <code>header</code> s'étale sur deux colonnes et le bloc <code>nav</code> également. Sur la troisième ligne, on a la barre latérale (<code>sidebar</code>) à côté du contenu (<code>content</code>). Sur la quatrième ligne, on a le bloc pour la publicité (<code>ad</code>) qui apparaît sous la barre latérale et enfin le pied de page qui apparaît sous le contenu. On utilise une boîte flexible pour la barre de navigation afin de l'étaler sur une ligne homogène.</p>
+
+<p>Enfin, on ajoute une autre requête de média pour la disposition avec trois colonnes :</p>
+
+<pre class="brush: css">@media (min-width: 700px) {
+  .wrapper {
+    grid-template-columns: 1fr 4fr 1fr;
+    grid-template-areas:
+      "header header  header"
+      "nav    content sidebar"
+      "nav    content ad"
+      "footer footer  footer"
+   }
+   nav ul {
+     flex-direction: column;
+   }
+}
+</pre>
+
+<p>Cette disposition en trois colonnes possède une première colonne qui s'étend sur <code>1fr</code>, une colonne centrale qui s'étend sur <code>4fr</code> et une dernière colonne qui mesure également <code>1fr</code>. Cela signifie que l'espace disponible dans le conteneur est découpé en 6 et que chacun de ces morceaux est affecté à une de ces pistes.</p>
+
+<p>Dans cette disposition, la barre de navigation est affichée dans la colonne à gauche, à côté du contenu. Sur la colonne à droite, on a la barre latérale au-dessus de la publicité. Le pied de page, quant à lui, s'étale sur tout le bas du conteneur. Ici aussi, on utilise une boîte flexible en colonne pour la barre de navigation.</p>
+
+<p>{{EmbedLiveSample('layout_1', '800', '430')}}</p>
+</div>
+
+<p>Cet exemple est assez simple mais permet d'illustrer comme utiliser une grille afin de réorganiser le contenu pour différentes tailles d'écran. On voit par exemple comment on déplace le bloc <code>ad</code> dans les différentes organisations. L'utilisation des noms pour les zones permet de prototyper rapidement de nouvelles dispositions. Vous pouvez toujours utiliser la grille pour agencer votre prototype même si ce n'est pas la technologie que vous utiliserez pour votre site ou votre application en production.</p>
+
+<h2 id="Une_disposition_flexible_avec_12_colonnes">Une disposition flexible avec 12 colonnes</h2>
+
+<p>Si vous travaillez avec un <em>framework</em> ou avec un système de grille, vous êtes peut-être habitué-e à travailler sur une grille avec 12 ou 16 colonnes. On peut recréer ce genre de système avec une grille CSS. Pour commencer, on crée une grille avec 12 colonnes dont chaque piste mesure <code>1fr</code>-unit et commence par une ligne intitulée <code>col-start</code>. Autrement dit, on aura 12 colonnes intitulées <code>col-start</code>.</p>
+
+<div id="layout_2">
+<div class="hidden">
+<pre class="brush: css">.wrapper {
+  max-width: 1024px;
+  margin: 0 auto;
+  font: 1.2em Helvetica, arial, sans-serif;
+}
+.wrapper &gt; * {
+  border: 2px solid #f08c00;
+  background-color: #ffec99;
+  border-radius: 5px;
+  padding: 10px;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(12, [col-start] 1fr);
+  grid-gap: 20px;
+}
+</pre>
+
+<p>Pour voir comment ce système fonctionne, on place quatre éléments dans le conteneur :</p>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Début à la première colonne, s'étend sur 3 colonnes.&lt;/div&gt;
+  &lt;div class="item2"&gt;Début à la colonne 6, s'étend sur 4 colonnes et deux lignes.&lt;/div&gt;
+  &lt;div class="item3"&gt;Début à la colonne 2 de la ligne 2, s'étend sur 2 colonnes.&lt;/div&gt;
+  &lt;div class="item4"&gt;Début à la colonne 3, s'étend jusqu'à la fin de la grille.&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Et on place ces éléments sur la grille en utilisant les noms utilisés précédemment, avec le mot-clé <code>span</code> :</p>
+
+<pre class="brush: css">.item1 {
+  grid-column: col-start / span 3;
+}
+.item2 {
+  grid-column: col-start 6 / span 4 ;
+  grid-row: 1 / 3;
+}
+.item3 {
+  grid-column: col-start 2 / span 2;
+  grid-row: 2;
+}
+.item4 {
+  grid-column: col-start 3 / -1;
+  grid-row: 3;
+}
+</pre>
+
+<p>{{EmbedLiveSample('layout_2', '800', '330')}}</p>
+</div>
+
+<p>Comme nous l'avons vu dans <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nomméees_sur_une_grille">le guide sur le nommage des lignes</a>, on utilise les noms des colonnes pour placer nos éléments. On a ici 12 colonnes avec le même nom, on utilise donc ce nom et l'indice qui indique le numéro. On pourrait tout aussi bien utiliser seulement le numéro si on voulait se passer des noms pour les lignes.</p>
+
+<p>Plutôt que d'indiquer le numéro de la dernière colonne pour chaque élément, on a ici utilisé le mot-clé <code>span</code> pour indiquer la taille de chaque élément. Cette approche permet de revoir plus clairement la taille de chaque élément lorsqu'on ajoute une nouvelle disposition pour une nouvelle taille d'écran. Dans la capture qui suit, on peut voir comment les blocs sont positionnés sur la grilles. Pour cela, on a utilisé <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">l'inspecteur de grille de Firefox</a> qui indique de façon claire comment les objets sont placés.</p>
+
+<p><img alt="Showing the items placed on the grid with grid tracks highlighted." src="https://mdn.mozillademos.org/files/14753/11-grid-inspector-12col.png"></p>
+
+<p>Il y a certainement certaines différences fondamentales avec les systèmes que vous auriez pu utiliser précédemment. On voit par exemple qu'il n'est pas nécessaire d'ajouter de règles supplémentaires pour créer une ligne. Généralement, il faut ajouter des contrôles pour éviter que les éléments remontent sur les lignes au-dessus. Avec une grille CSS, ce n'est pas un problème, les lignes supérieures sont laissées vides. La disposition étant <em>stricte</em>, on peut très bien laisser des espaces dans notre plan. Il n'est pas non plus nécessaire de définir des classes spécifiques afin d'indenter les différents objets, il suffit ici d'indiquer la colonne de début et la colonne de fin.</p>
+
+<h3 id="Construire_une_disposition_avec_ce_système_à_12_colonnes">Construire une disposition avec ce système à 12 colonnes</h3>
+
+<p>Pour voir comment cette méthode fonctionne en pratique, nous allons créé le même plan que celui que nous avons vu avec les zones nommées et {{cssxref("grid-template-areas")}} mais en utilisant désormais ce système à 12 colonnes. Commençons avec la même structure que celle utilisée plus haut avec les zones nommées :</p>
+
+<div id="layout_3">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  max-width: 1024px;
+  margin: 0 auto;
+  font: 1.2em Helvetica, arial, sans-serif;
+}
+
+.wrapper &gt; * {
+  border: 2px solid #f08c00;
+  background-color: #ffec99;
+  border-radius: 5px;
+  padding: 10px;
+}
+
+nav ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;header class="main-head"&gt;L'en-tête&lt;/header&gt;
+  &lt;nav class="main-nav"&gt;
+    &lt;ul&gt;
+      &lt;li&gt;&lt;a href=""&gt;Nav 1&lt;/a&gt;&lt;/li&gt;
+      &lt;li&gt;&lt;a href=""&gt;Nav 2&lt;/a&gt;&lt;/li&gt;
+      &lt;li&gt;&lt;a href=""&gt;Nav 3&lt;/a&gt;&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/nav&gt;
+  &lt;article class="content"&gt;
+    &lt;h1&gt;L'article principal&lt;/h1&gt;
+    &lt;p&gt;
+       Dans cette disposition, on affiche les zones dans le même
+       ordre que dans le document pour les écrans dont la largeur
+       est inférieure à 500 pixels. On passe à une disposition sur
+       deux colonnes ou trois colonnes en redéfinissant la grille
+       et le placement des objets sur la grille.
+    &lt;/p&gt;
+  &lt;/article&gt;
+  &lt;aside class="side"&gt;Barre latérale&lt;/aside&gt;
+  &lt;div class="ad"&gt;Publicité&lt;/div&gt;
+  &lt;footer class="main-footer"&gt;Le pied de page&lt;/footer&gt;
+&lt;/div&gt;
+</pre>
+
+<p>On initialise la grille avec nos 12 colonnes :</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(12, [col-start] 1fr);
+  grid-gap: 20px;
+}
+</pre>
+
+<p>Là encore, nous allons adapter la disposition en fonction de la taille de la zone d'affichage mais ici, nous utiliserons les colonnes nommées. Pour chaque type d'affichage, nous allons utiliser 12 colonnes et faire varier le nombre de pistes sur lequel s'étalent les objets à afficher.</p>
+
+<p>Commençons par le mobile : on souhaite gérer les écrans les plus étroits par défaut. Ici aussi, on respecte l'ordre des éléments indiqués par le code source du document et tous les objets s'étalent tout au long de la grille.</p>
+
+<pre class="brush: css">.wrapper &gt; * {
+  grid-column: col-start / span 12;
+}
+</pre>
+
+<p>Pour la prochaine taille, on veut obtenir une disposition sur deux colonnes. Ici, l'en-tête et la barre de navigation occuperont toute une ligne horizontale, il n'est donc pas nécessaire d'indiquer de positionnement pour eux. La barre latérale commence sur la première colonne intitulée <code>col-start</code> et s'étend sur 3 colonnes et commence à partir de la troisième ligne (les deux premières étant occupées par l'en-tête et la barre de navigation).</p>
+
+<p>Le panneau dédié à la publicité est affiché sous la barre latérale et commence à partir de la quatrième ligne. On a ensuite le contenu et le pied de page qui commencent à partir de la quatrième colonne et s'étendent sur 9 pistes pour occuper le reste de la grille.</p>
+
+<pre class="brush: css">@media (min-width: 500px) {
+  .side {
+    grid-column: col-start / span 3;
+    grid-row: 3;
+  }
+  .ad {
+    grid-column: col-start / span 3;
+    grid-row: 4;
+  }
+  .content, .main-footer {
+    grid-column: col-start 4 / span 9;
+  }
+  nav ul {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+</pre>
+
+<p>Voyons alors la disposition sur trois colonnes. Pour ce plan, l'en-tête s'étale aussi sur toute la largeur de la grille, la barre de navigation devient verticale, à côté on a le contenu puis la barre latérale. Le pied de page s'étale, lui aussi, sur toute la largeur du conteneur.</p>
+
+<pre class="brush: css">@media (min-width: 700px) {
+  .main-nav {
+    grid-column: col-start / span 2;
+    grid-row: 2 / 4;
+  }
+  .content {
+    grid-column: col-start 3 / span 8;
+    grid-row: 2 / 4;
+  }
+  .side {
+    grid-column: col-start 11 / span 2;
+    grid-row: 2;
+  }
+  .ad {
+    grid-column: col-start 11 / span 2;
+    grid-row: 3;
+  }
+  .main-footer {
+    grid-column: col-start / span 12;
+  }
+  nav ul {
+    flex-direction: column;
+  }
+}
+</pre>
+
+<p>{{EmbedLiveSample('layout_3', '800', '430')}}</p>
+</div>
+
+<p>On peut à nouveau profiter de <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">l'inspecteur de grille</a> pour voir comment se compose effectivement notre disposition :</p>
+
+<p><img alt="Showing the layout with grid tracks highlighted by the grid inspector." src="https://mdn.mozillademos.org/files/14755/11-grid-inspector-12col-layout.png" style="height: 614px; width: 2050px;"></p>
+
+<p>On notera qu'il n'a pas été nécessaire de redéfinir explicitement la position de chaque élément pour chaque résolution. On a pu hériter des emplacements des résolutions précédentes. On gagne donc à travailler en considérant les résolutions mobiles en premier lieu. On tire également parti du placement automatique géré par la grille avec l'ordre, logique, des éléments du documents. Dans le dernier exemple, nous allons voir comment le placement automatique sur la grille peut aider à positionner des objets..</p>
+
+<h2 id="Une_liste_produit_utilisant_le_placement_automatique">Une liste produit utilisant le placement automatique</h2>
+
+<p>De nombreuses dispositions sont essentiellement composée de <em>cartes</em> ou <em>tuiles</em> : des listes produit, des galeries d'image, etc. Avec une grille, on peut facilement créer ce genre de liste de façon adaptative, sans avoir à ajouter de <a href="/fr/docs/Web/CSS/Requêtes_média">requêtes de média</a>. Dans l'exemple qui suit, nous allons combiner les grilles CSS et les boîtes flexibles afin d'obtenir une liste de produits.</p>
+
+<p>Le document utilisé contient une liste d'objets non ordonnée. Pour chaque produit, on a un titre, un texte dont la taille n'est pas fixe et un lien pour effectuer une action.</p>
+
+<div id="layout_4">
+<pre class="brush: html">&lt;ul class="listing"&gt;
+  &lt;li&gt;
+    &lt;h2&gt;Produit n°1&lt;/h2&gt;
+    &lt;div class="body"&gt;&lt;p&gt;Le descriptif du produit sera écrit ici.&lt;/p&gt;&lt;/div&gt;
+    &lt;div class="cta"&gt;&lt;a href=""&gt;Faire quelque chose !&lt;/a&gt;&lt;/div&gt;
+  &lt;/li&gt;
+   &lt;li&gt;
+     &lt;h2&gt;Produit n°2&lt;/h2&gt;
+     &lt;div class="body"&gt;&lt;p&gt;Le descriptif du produit sera écrit ici.&lt;/p&gt;&lt;/div&gt;
+     &lt;div class="cta"&gt;&lt;a href=""&gt;Faire quelque chose !&lt;/a&gt;&lt;/div&gt;
+   &lt;/li&gt;
+   &lt;li class="wide"&gt;
+     &lt;h2&gt;Produit n°3&lt;/h2&gt;
+     &lt;div class="body"&gt;&lt;p&gt;Le descriptif du produit sera écrit ici.&lt;/p&gt;
+     &lt;p&gt;Ce produit possède un descriptif beaucoup plus long.&lt;/p&gt;
+     &lt;p&gt;Vraiment plus long&lt;/p&gt;
+     &lt;p&gt;Peut-être faudrait-il le gérer différemment ?&lt;/p&gt;&lt;/div&gt;
+     &lt;div class="cta"&gt;&lt;a href=""&gt;Faire quelque chose !&lt;/a&gt;&lt;/div&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+     &lt;h2&gt;Produit n°4&lt;/h2&gt;
+     &lt;div class="body"&gt;&lt;p&gt;Le descriptif du produit sera écrit ici.&lt;/p&gt;&lt;/div&gt;
+     &lt;div class="cta"&gt;&lt;a href=""&gt;Faire quelque chose !&lt;/a&gt;&lt;/div&gt;
+    &lt;/li&gt;
+     &lt;li&gt;
+     &lt;h2&gt;Produit n°5&lt;/h2&gt;
+     &lt;div class="body"&gt;&lt;p&gt;Le descriptif du produit sera écrit ici.&lt;/p&gt;&lt;/div&gt;
+      &lt;div class="cta"&gt;&lt;a href=""&gt;Faire quelque chose !&lt;/a&gt;&lt;/div&gt;
+    &lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+img {max-width: 100%; display: block;}
+body {
+  font: 1.2em Helvetica, arial, sans-serif;
+}
+
+a:link, a:visited {
+  text-decoration: none;
+  color: #f08c00;
+}
+
+h2 {
+  background-color: #f08c00;
+  color: #fff;
+  text-align: center;
+  margin: 0;
+  padding: 20px;
+}
+</pre>
+</div>
+
+<p>Nous allons créer une grille avec un nombre de colonnes adaptable et chacune des colonnes sera flexible. On indique qu'une colonne doit avoir une largeur minimale de 200 pixels et que l'espace restant doit être réparti équitablement (toutes les colonnes auront donc la même largeur). Pour obtenir ce résultat, on utilise la fonction <code>minmax()</code> avec la notation <code>repeat</code> pour la propriété <code>grid-template-columns</code> qui permet de dimensionner les pistes.</p>
+
+<pre class="brush: css">.listing {
+  list-style: none;
+  margin: 2em;
+  display: grid;
+  grid-gap: 20px;
+  grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));
+}
+</pre>
+
+<p>Dès qu'on ajoute cette règle, les objets s'organisent sur la grille. Si on chance la taille de la fenêtre, le nombre de colonne s'adaptera, sans qu'il soit nécessaire d'ajouter des requêtes de média ou de définir la grille.</p>
+
+<p>On peut ensuite améliorer chacune des boîtes en utilisant les boîtes flexibles. Pour les éléments de la liste ({{HTMLElement("li")}}), on utilise <code>display: flex</code> et <code>flex-direction</code> avec la valeur <code>column</code>. On ajoute une marge automatique pour la classe <code>.cta</code> afin que cette barre soit placée en bas de la boîte.</p>
+
+<pre class="brush: css">.listing li {
+  border: 1px solid #ffe066;
+  border-radius: 5px;
+  display: flex;
+  flex-direction: column;
+}
+.listing .cta {
+  margin-top: auto;
+  border-top: 1px solid #ffe066;
+  padding: 10px;
+  text-align: center;
+}
+.listing .body {
+  padding: 10px;
+}
+</pre>
+
+<p>Voici un exemple où, d'après moi, l'utilisation des boîtes flexibles est pertinente par rapport à une autre grille : on ne fait qu'aligner ou organiser des objets sur un seul axe, ce qui est très bien géré avec une boîte flexible.</p>
+
+<p>{{EmbedLiveSample('layout_4', '800', '900')}}</p>
+</div>
+
+<p>Le résultat est plutôt abouti mais on a parfois des cartes qui ont beaucoup plus de contenu. Si on veut que celles-ci soient plus large (pour éviter qu'elles soient trop hautes), on peut les étaler sur deux pistes. Pour cela, on a utilisé la classe <code>wide</code> sur l'objet avec plus de contenu et on ajoute une règle {{cssxref("grid-column-end")}} avec la valeur <code>span 2</code>. Désormais, lorsque la grille devra placer un élément de ce type, elle lui affectera deux colonnes. Cela signifie aussi que pour certaines tailles d'affichage, on aura un espace dans la grille lorsqu'il n'y aura pas suffisamment d'espace pour placer un objet sur deux colonnes :</p>
+
+<p><img alt="The layout has gaps as there is not space to layout a two track item." src="https://mdn.mozillademos.org/files/14751/11-grid-auto-flow-sparse.png" style="height: 1664px; width: 1640px;"></p>
+
+<p>Si on veut éviter ces trous, on peut utiliser la règle {{cssxref("grid-auto-flow")}}<code>: dense </code>sur le conteneur de la grille. Attention à utiliser cette valeur car l'ordre logique n'est plus respecté. Aussi, il ne faut utiliser cette valeur uniquement lorsqu'il n'y a pas d'ordre pour les objets. Avec cette valeur, la navigation au clavier (<em>tab order</em>) continue de suivre l'ordre des éléments du document et pas l'ordre d'affichage des objets sur la grille.</p>
+
+<div id="layout_5">
+<div class="hidden">
+<pre class="brush: html">&lt;ul class="listing"&gt;
+  &lt;li&gt;
+    &lt;h2&gt;Item One&lt;/h2&gt;
+    &lt;div class="body"&gt;&lt;p&gt;The content of this listing item goes here.&lt;/p&gt;&lt;/div&gt;
+    &lt;div class="cta"&gt;&lt;a href=""&gt;Call to action!&lt;/a&gt;&lt;/div&gt;
+  &lt;/li&gt;
+   &lt;li&gt;
+     &lt;h2&gt;Item Two&lt;/h2&gt;
+     &lt;div class="body"&gt;&lt;p&gt;The content of this listing item goes here.&lt;/p&gt;&lt;/div&gt;
+     &lt;div class="cta"&gt;&lt;a href=""&gt;Call to action!&lt;/a&gt;&lt;/div&gt;
+   &lt;/li&gt;
+   &lt;li class="wide"&gt;
+     &lt;h2&gt;Item Three&lt;/h2&gt;
+     &lt;div class="body"&gt;&lt;p&gt;The content of this listing item goes here.&lt;/p&gt;
+     &lt;p&gt;This one has more text than the other items.&lt;/p&gt;
+     &lt;p&gt;Quite a lot more&lt;/p&gt;
+     &lt;p&gt;Perhaps we could do something different with it?&lt;/p&gt;&lt;/div&gt;
+     &lt;div class="cta"&gt;&lt;a href=""&gt;Call to action!&lt;/a&gt;&lt;/div&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+     &lt;h2&gt;Item Four&lt;/h2&gt;
+     &lt;div class="body"&gt;&lt;p&gt;The content of this listing item goes here.&lt;/p&gt;&lt;/div&gt;
+     &lt;div class="cta"&gt;&lt;a href=""&gt;Call to action!&lt;/a&gt;&lt;/div&gt;
+    &lt;/li&gt;
+     &lt;li&gt;
+     &lt;h2&gt;Item Five&lt;/h2&gt;
+     &lt;div class="body"&gt;&lt;p&gt;The content of this listing item goes here.&lt;/p&gt;&lt;/div&gt;
+      &lt;div class="cta"&gt;&lt;a href=""&gt;Call to action!&lt;/a&gt;&lt;/div&gt;
+    &lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<pre class="brush: css">* {box-sizing: border-box;}
+img {max-width: 100%; display: block;}
+body {
+  font: 1.2em Helvetica, arial, sans-serif;
+}
+a:link, a:visited {
+  text-decoration: none;
+  color: #f08c00;
+}
+h2 {
+  background-color: #f08c00;
+  color: #fff;
+  text-align: center;
+  margin: 0;
+  padding: 20px;
+}
+.listing li {
+  border: 1px solid #ffe066;
+  border-radius: 5px;
+  display: flex;
+  flex-direction: column;
+}
+.listing .cta {
+  margin-top: auto;
+  border-top: 1px solid #ffe066;
+  padding: 10px;
+  text-align: center;
+}
+.listing .body {
+  padding: 10px;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.listing {
+  list-style: none;
+  margin: 2em;
+  display: grid;
+  grid-gap: 20px;
+  grid-auto-flow: dense;
+  grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));
+}
+.listing .wide {
+  grid-column-end: span 2;
+}
+</pre>
+
+<p>{{EmbedLiveSample('layout_5', '800', '900')}}</p>
+
+<p>Cette technique de placement automatiquement peut s'avérer extrêmement utile si vous devez gérer du contenu produit par un CMS pour un ensemble d'objets qui se ressemblent et auxquels vous ajoutez une classe lors de la génération en HTML.</p>
+</div>
+
+<h2 id="Aller_plus_loin">Aller plus loin</h2>
+
+<p>La meilleure façon d'apprendre à utiliser les grilles CSS est de continuer à construire des exemples comme ceux que nous avons vus ici. Prenez un cas d'utilisation que vous auriez construit avec un <em>framework</em> ou avec un autre mode de disposition et voyez si vous pouvez le construire à l'aide d'une grille. N'oubliez pas de trouver des exemples de disposition encore impossibles à construire avec les méthodes actuelles : prenez différentes sources d'inspiration comme les magazines et affiches. Le modèle de grille offre un nouvel éventail de possibilités et il serait dommage de rester sur nos acquis.</p>
+
+<ul>
+ <li>Vous pouvez consulter le <a href="https://labs.jensimmons.com/"><em>Layout Labs</em> de Jen Simmons (en anglais)</a>, elle a créé différentes disposition en se basant sur une variété d'exemples.</li>
+ <li>Pour d'autres exemples, vous pouvez vous référer à <em><a href="https://gridbyexample.com">Grid by Example</a></em> qui contient des exemples pour des grilles plus petites, des fragments d'interface utilisateur ou des dispositions pour des pages entières.</li>
+</ul>
+
+<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition","","Web/CSS/CSS_Grid_Layout")}}</p>
diff --git a/files/fr/web/css/css_grid_layout/définir_des_zones_sur_une_grille/index.html b/files/fr/web/css/css_grid_layout/définir_des_zones_sur_une_grille/index.html
new file mode 100644
index 0000000000..be9c0122a7
--- /dev/null
+++ b/files/fr/web/css/css_grid_layout/définir_des_zones_sur_une_grille/index.html
@@ -0,0 +1,482 @@
+---
+title: Définir des zones sur une grille
+slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
+tags:
+  - CSS
+  - CSS Grids
+  - Grilles CSS
+  - Guide
+translation_of: Web/CSS/CSS_Grid_Layout/Grid_Template_Areas
+---
+<div>{{CSSRef}}</div>
+
+<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS", "Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille","Web/CSS/CSS_Grid_Layout")}}</p>
+
+<p>Dans <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS">le guide précédent</a>, on a étudié les lignes formées par une grille et comment positionner des objets sur ces lignes. Lorsqu'on utilise une grille CSS, on a toujours ces lignes et celles-ci permettent d'avoir une disposition simple. Toutefois, il existe une autre méthode de disposition avec les grilles, qu'on peut utiliser seule ou combinée avec les lignes. Avec cette méthode, on place les éléments sur des <em>zones</em> de la grille. Nous allons voir dans ce guide comment cela fonctionne voire comment on peut faire de l'ASCII-art en CSS avec les grilles !</p>
+
+<h2 id="Donner_un_nom_à_une_zone_de_grille">Donner un nom à une zone de grille</h2>
+
+<p>On a déjà utilisé la propriété {{cssxref("grid-area")}} précédemment. C'est cette propriété qui utilise les numéros des lignes comme valeur pour positionner une zone de grille :</p>
+
+<pre class="brush: css">.box1 {
+   grid-area: 1 / 1 / 4 / 2;
+}
+</pre>
+
+<p>Ici, on définit les quatre lignes qui entourent la zone en question :</p>
+
+<p><img alt="The Grid Area defined by lines" src="https://mdn.mozillademos.org/files/14667/4_Area.png" style="height: 354px; width: 951px;"></p>
+
+<p>On peut également définir une zone en lui donnant un nom puis en définissant l'emplacement de cette zone grâce à la propriété {{cssxref("grid-template-areas")}}. Vous pouvez choisir les noms de vos zones, on peut par exemple créer une disposition avec quatre zones :</p>
+
+<ul>
+ <li>Un en-tête (<em>header</em>)</li>
+ <li>Un pied de page (<em>footer</em>)</li>
+ <li>Une barre latérale (<em>sidebar</em>)</li>
+ <li>Le contenu principale (<em>content</em>)</li>
+</ul>
+
+<p><img alt="An image showing a simple two column layout with header and footer" src="https://mdn.mozillademos.org/files/14669/4_Layout.png" style="height: 397px; width: 900px;"></p>
+
+<p>Avec {{cssxref("grid-area")}}, on affecte un nom à chacune de ces zones. Pour le moment, aucune disposition n'a été créée mais on a des noms qu'on pourra utiliser dans notre disposition :</p>
+
+<div id="Grid_Area_1">
+<pre class="brush: css">.header {
+  grid-area: hd;
+}
+.footer {
+  grid-area: ft;
+}
+.content {
+  grid-area: main;
+}
+.sidebar {
+  grid-area: sd;
+}
+</pre>
+
+<p>Grâce à ces noms, on peut créer l'organisation. Cette fois, plutôt que de placer les objets grâce aux numéros de ligne, on définit la disposition dans le conteneur de la grille :</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(9, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+  grid-template-areas:
+    "hd hd hd hd   hd   hd   hd   hd   hd"
+    "sd sd sd main main main main main main"
+    "ft ft ft ft   ft   ft   ft   ft   ft";
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+  max-width: 940px;
+  margin: 0 auto;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="header"&gt;En-tête&lt;/div&gt;
+  &lt;div class="sidebar"&gt;Barre latérale&lt;/div&gt;
+  &lt;div class="content"&gt;Contenu&lt;/div&gt;
+  &lt;div class="footer"&gt;Pied de page&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>{{EmbedLiveSample('Grid_Area_1', '300', '330')}}</p>
+</div>
+
+<p>Grâce à cette méthode, il n'est pas nécessaire de gérer chacun des éléments individuellement. Tout est organisé au travers du conteneur. La disposition est décrite grâce à la propriété {{cssxref("grid-template-areas")}}.</p>
+
+<h2 id="Laisser_une_cellule_vide">Laisser une cellule vide</h2>
+
+<p>Dans l'exemple précédent, toute la grille est occupée… On peut également utiliser cette méthode pour laisser des cellules vides. Pour cela, il faut utiliser un point à la place d'un nom de zone. Aussi, si on veut que le pied de page soit uniquement affiché sous le contenu, il faudra avoir trois cellules vides sous la barre latérale.</p>
+
+<pre class="brush: css">.header {
+  grid-area: hd;
+}
+.footer {
+  grid-area: ft;
+}
+.content {
+  grid-area: main;
+}
+.sidebar {
+  grid-area: sd;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+  max-width: 940px;
+  margin: 0 auto;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(9, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+  grid-template-areas:
+      "hd hd hd hd   hd   hd   hd   hd   hd"
+      "sd sd sd main main main main main main"
+      ".  .  .  ft   ft   ft   ft   ft   ft";
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="header"&gt;En-tête&lt;/div&gt;
+  &lt;div class="sidebar"&gt;Barre latérale&lt;/div&gt;
+  &lt;div class="content"&gt;Contenu&lt;/div&gt;
+  &lt;div class="footer"&gt;Pied de page&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>{{EmbedLiveSample('Laisser_une_cellule_vide', '300', '330')}}</p>
+
+<p>Si on veut que la disposition soit bien représentée, on peut utiliser plusieurs points. Tant que ceux-ci ne sont pas séparés par un espace, ils compteront pour une seule cellule. Dans le cas d'une disposition complexe, cela permet d'avoir des lignes et colonnes clairement alignées, y compris dans la règle CSS.</p>
+
+<h2 id="Occuper_plusieurs_cellules">Occuper plusieurs cellules</h2>
+
+<p>Dans notre exemple, chacune des zones occupe plusieurs cellules car on a répété le nom de la zone avec des espaces entre (on peut ajouter plus d'espaces si besoin, afin d'avoir une disposition lisible, c'est ce qu'on a fait précédemment pour que <code>hd</code> et <code>ft</code> soient alignés avec <code>main</code>).</p>
+
+<p>La zone qu'on crée avec les noms doit être rectangulaires. Actuellement, il n'existe pas de méthode pour créer une zone avec une forme de L (bien que la spécification indique qu'une prochaine version pourrait couvrir cette fonctionnalité). On peut toutefois agrandir des lignes horizontales aussi simplement que des colonnes. Par exemple, on pourrait avoir la barre latérale qui descend jusqu'en bas en remplaçant les points par <code>sd</code>.</p>
+
+<pre class="brush: css">.header {
+  grid-area: hd;
+}
+.footer {
+  grid-area: ft;
+}
+.content {
+  grid-area: main;
+}
+.sidebar {
+  grid-area: sd;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+  max-width: 940px;
+  margin: 0 auto;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(9, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+  grid-template-areas:
+    "hd hd hd hd   hd   hd   hd   hd   hd"
+    "sd sd sd main main main main main main"
+    "sd sd sd  ft  ft   ft   ft   ft   ft";
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="header"&gt;En-tête&lt;/div&gt;
+  &lt;div class="sidebar"&gt;Barre latérale&lt;/div&gt;
+  &lt;div class="content"&gt;Contenu&lt;/div&gt;
+  &lt;div class="footer"&gt;Pied de page&lt;/div&gt;
+&lt;/div&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample('Occuper_plusieurs_cellules', '300', '330')}}</p>
+
+<p>La valeur utilisée pour {{cssxref("grid-template-areas")}} doit obligatoirement décrire une grille complète, sinon elle est considérée invalide et la propriété est ignorée. Cela signifie qu'il faut le même nombre de cellules pour chaque ligne (si une cellule est vide, on l'indiquera avec un point). Si des zones ne sont pas rectangulaires, cela sera également considéré comme invalide.</p>
+
+<h2 id="Redéfinir_une_grille_à_avec_des_media_queries">Redéfinir une grille à avec des <em>media queries</em></h2>
+
+<p>Notre disposition fait désormais partie de notre feuille de style CSS. On peut donc l'adapter très facilement pour différentes résolutions. On peut redéfinir la position des objets sur la grille ou la grille elle-même, ou les deux simultanément.</p>
+
+<p>Pour ce faire, on définit les noms des zones en dehors de toute <em>media query</em> afin de pouvoir y accéder quel que soit l'endroit où la zone sera placée.</p>
+
+<p>Pour la disposition vue précédemment, on définit ici une disposition par défaut sur une seule colonne pour les affichages étroits. On a donc une seule piste sur laquelle s'empilent les objets :</p>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+  max-width: 940px;
+  margin: 0 auto;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.header {
+  grid-area: hd;
+}
+.footer {
+  grid-area: ft;
+}
+.content {
+  grid-area: main;
+}
+.sidebar {
+  grid-area: sd;
+}
+
+.wrapper {
+  display: grid;
+  grid-auto-rows: minmax(100px, auto);
+  grid-template-columns: 1fr;
+  grid-template-areas:
+    "hd"
+    "main"
+    "sd"
+    "ft";
+}
+</pre>
+
+<p>On peut ensuite redéfinir la disposition à l'intérieur des différentes <em>media queries</em> utilisées pour avoir une disposition sur deux colonnes, voire trois lorsque l'espace le permet. On notera que pour la disposition la plus large, on a une grille organisée sur 9 colonnes/pistes et on redéfinit l'emplacement des objets avec <code>grid-template-areas</code>.</p>
+
+<pre class="brush: css">@media (min-width: 500px) {
+  .wrapper {
+    grid-template-columns: repeat(9, 1fr);
+    grid-template-areas:
+      "hd hd hd hd   hd   hd   hd   hd   hd"
+      "sd sd sd main main main main main main"
+      "sd sd sd  ft  ft   ft   ft   ft   ft";
+  }
+}
+@media (min-width: 700px) {
+  .wrapper {
+    grid-template-areas:
+      "hd hd hd   hd   hd   hd   hd   hd hd"
+      "sd sd main main main main main ft ft";
+  }
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="header"&gt;En-tête&lt;/div&gt;
+  &lt;div class="sidebar"&gt;Barre latérale&lt;/div&gt;
+  &lt;div class="content"&gt;Contenu&lt;/div&gt;
+  &lt;div class="footer"&gt;Pied de page&lt;/div&gt;
+&lt;/div&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("Redéfinir_une_grille_avec_des_media_queries", '550', '330')}}</p>
+
+<h2 id="Utiliser_grid-template-areas_pour_des_éléments_d'interface_utilisateur">Utiliser <code>grid-template-areas</code> pour des éléments d'interface utilisateur</h2>
+
+<p>La plupart des exemples illustrent une utilisation de la grille pour la disposition principale de la page. Toutefois, une grille peut également être utile pour les petits éléments. {{cssxref("grid-template-areas")}} est assez pratique car elle permet de voir facilement à quoi ressemblera l'élément.</p>
+
+<p>Dans l'exemple qui suit, on crée un objet « media » qui servira de composant pour afficher un media (une image par exemple) d'un côté et un texte de l'autre. On pourra ainsi voir l'effet obtenu en changeant la disposition avec l'image à droite ou à gauche.</p>
+
+<p><img alt="Images showing an example media object design" src="https://mdn.mozillademos.org/files/14671/4_Media_objects.png" style="height: 432px; width: 800px;"></p>
+
+<p>Ici, la grille se compose de deux pistes en colonnes. La colonne pour l'image est dimensionnée avec <code>1fr</code> et celle pour le texte reçoit <code>3fr</code>. Si on souhaitait utiliser une largeur fixe pour l'image, on aurait pu utiliser des pixels pour définir la taille de la colonne et utiliser <code>1fr</code> pour la zone du texte. Cette colonne de <code>1fr</code> aurait alors occupé le reste de l'espace.</p>
+
+<p>Pour la zone dédiée à l'image, on crée une zone de grille intitulée <code>img</code> et pour le texte, on crée une seconde zone intitulée <code>content</code>. Ensuite, on utilise ces noms pour créer l'organisation via la propriété <code>grid-template-areas</code>.</p>
+
+<div id="Media_1">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.media {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+  max-width: 400px;
+}
+.media {
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+  grid-template-areas: "img content";
+  margin-bottom: 1em;
+}
+
+.media .image {
+  grid-area: img;
+  background-color: #ffd8a8;
+}
+
+.media .text {
+  grid-area: content;
+  padding: 10px;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="media"&gt;
+  &lt;div class="image"&gt;&lt;/div&gt;
+  &lt;div class="text"&gt;
+    Dans cet exemple, on peut utiliser
+    grid-template-areas pour échanger les
+    places du texte et du media.
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>{{EmbedLiveSample('Media_1', '300', '200')}}</p>
+</div>
+
+<h3 id="Afficher_l'image_de_l'autre_côté">Afficher l'image de l'autre côté</h3>
+
+<p>Si on a besoin d'afficher l'image d l'autre côté, il suffit de redéfinir une grille pour laquelle la piste qui mesure <code>1fr</code> est en dernier et d'échanger les valeurs dans {{cssxref("grid-template-areas")}}.</p>
+
+<div id="Media_2">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.media {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+  max-width: 400px;
+}
+.media {
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+  grid-template-areas: "img content";
+  margin-bottom: 1em;
+}
+
+.media.flipped {
+  grid-template-columns: 3fr 1fr;
+  grid-template-areas: "content img";
+}
+
+.media .image {
+  grid-area: img;
+  background-color: #ffd8a8;
+}
+
+.media .text {
+  grid-area: content;
+  padding: 10px;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="media flipped"&gt;
+  &lt;div class="image"&gt;&lt;/div&gt;
+  &lt;div class="text"&gt;
+    Dans cet exemple, on peut utiliser
+    grid-template-areas pour échanger les
+    places du texte et du media.
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>{{EmbedLiveSample('Media_2', '300', '200') }}</p>
+</div>
+
+<h2 id="Les_propriétés_raccourcies_pour_les_grilles_CSS">Les propriétés raccourcies pour les grilles CSS</h2>
+
+<p>Nous avons vu différentes façons de placer des objets sur une grille et plusieurs des propriétés utilisées pour définir une grille. Voyons maintenant les propriétés raccourcies qui sont disponibles pour les grilles CSS et qui permettent de rendre le code un peu plus concis.</p>
+
+<p>Attention, ces propriétés peuvent parfois devenir complexes à lire, que ce soit pour les autres développeurs qui liraient votre code voire pour vous-même d'ici quelques semaines. Cependant, elles font partie de la spécification et vous pourrez les rencontrer dans des exemples ou dans d'autres bases de code.</p>
+
+<p>Avant d'utiliser une propriété raccourcie, il est préférable de se rappeler qu'une propriété raccourcie permet d'en définir plusieurs grâce à une seule règle <strong>mais aussi</strong> qu'une propriété raccourcie réinitialise les propriétés avec leurs valeurs initiales lorsqu'elles ne sont pas déclarées via la propriété raccourcie. Aussi, si vous utilisez une propriété raccourcie, sachez qu'elle peut réinitialiser une propriété que vous auriez utilisé autre part.</p>
+
+<p>Les deux propriétés raccourcies pour les grilles sont <code>grid-template</code> et <code>grid</code>.</p>
+
+<h3 id="grid-template"><code>grid-template</code></h3>
+
+<p>La propriété {{cssxref("grid-template")}} permet de définir les propriétés suivantes :</p>
+
+<ul>
+ <li>{{cssxref("grid-template-rows")}}</li>
+ <li>{{cssxref("grid-template-columns")}}</li>
+ <li>{{cssxref("grid-template-areas")}}</li>
+</ul>
+
+<p>Cette propriété est appelée propriété raccourcie « explicite » car elle permet de paramétrer les aspects d'une grille définie explicitement. Elle n'a pas d'impact sur les propriétés qui créeraient des lignes ou colonnes implicites.</p>
+
+<p>Le fragment de code suivant crée une disposition identique à celle que nous avons vu plus haut dans cet article.</p>
+
+<pre class="brush: css">.wrapper {
+    display: grid;
+    grid-template:
+      "hd hd hd hd   hd   hd   hd   hd   hd" minmax(100px, auto)
+      "sd sd sd main main main main main main" minmax(100px, auto)
+      "ft ft ft ft   ft   ft   ft   ft   ft" minmax(100px, auto)
+             / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;
+}
+</pre>
+
+<p>La première valeur correspond à celle de <code>grid-template-areas</code> mais on déclare également les tailles de chaque ligne à la fin de chaque ligne (avec <code>minmax(100px, auto)</code>).</p>
+
+<p>Après la valeur de <code>grid-template-areas</code>, on a un barre oblique (/) puis une liste de pistes qui définit les colonnes explicitement.</p>
+
+<h3 id="grid"><code>grid</code></h3>
+
+<p>La propriété {{cssxref("grid")}} va un cran plus loin et définit également les propriétés utilisées par la grille implicite. Elle permet de paramétrer :</p>
+
+<ul>
+ <li>{{cssxref("grid-template-rows")}}</li>
+ <li>{{cssxref("grid-template-columns")}}</li>
+ <li>{{cssxref("grid-template-areas")}}</li>
+ <li>{{cssxref("grid-auto-rows")}}</li>
+ <li>{{cssxref("grid-auto-columns")}}</li>
+ <li>{{cssxref("grid-auto-flow")}}</li>
+</ul>
+
+<p>Cette propriété réinitialise également la propriété {{cssxref("grid-gap")}} avec la valeur <code>0</code> mais, en revanche, elle ne permet pas de définir des espaces.</p>
+
+<p>On peut utiliser la même syntaxe qu'avec {{cssxref("grid-template")}} mais attention, cela réinitialisera les valeurs des autres propriétés :</p>
+
+<pre class="brush: css">.wrapper {
+    display: grid;
+    grid: "hd hd hd hd   hd   hd   hd   hd   hd" minmax(100px, auto)
+    "sd sd sd main main main main main main" minmax(100px, auto)
+    "ft ft ft ft   ft   ft   ft   ft   ft" minmax(100px, auto)
+    / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;
+}
+</pre>
+
+<p>Dans les articles suivants, nous verrons les fonctionnalités offertes par cette propriété raccourcie, notamment pour le placement automatique et pour la propriété <code>grid-auto-flow</code>.</p>
+
+<p>Après ces quelques guides, vous devriez désormais être en mesure de créer des grilles et de placer les éléments sur des lignes ou grâce à des zones nommées. Prenez le temps de construire certains motifs « classiques » à l'aide de grille pour mieux apprendre en manipulant. Au fur et à mesure, vous aurez des questions et arriverez sur des scénarios que nous n'avons pas encore évoqués. Dans la suite de ces articles, nous nous intéresserons plus en détails aux autres éléments de la spécification afin de pouvoir créer des dispositions plus complexes.</p>
+
+<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS", "Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille","Web/CSS/CSS_Grid_Layout")}}</p>
diff --git a/files/fr/web/css/css_grid_layout/index.html b/files/fr/web/css/css_grid_layout/index.html
new file mode 100644
index 0000000000..b097f662db
--- /dev/null
+++ b/files/fr/web/css/css_grid_layout/index.html
@@ -0,0 +1,193 @@
+---
+title: Grilles CSS (CSS Grid)
+slug: Web/CSS/CSS_Grid_Layout
+tags:
+  - CSS
+  - CSS Grids
+  - Grilles CSS
+  - Reference
+translation_of: Web/CSS/CSS_Grid_Layout
+---
+<div>{{CSSRef}}</div>
+
+<p>Le module <em><strong>CSS Grid layout</strong></em> (modèle de disposition en grille) est un module de la spécification CSS qui permet de créer des mises en page en divisant l'espace d'affichage en régions utilisables par une application ou en définissant des relations de taille, position et d'empilement entre les éléments HTML.</p>
+
+<p>Comme les tableaux, la grille permet d'aligner des éléments sous forme de colonnes et de lignes mais à la différence des tableaux, la grille n'a pas de structure de contenu. Ainsi, on peut créer de nombreuses mises en page qui n'auraient pas été possibles avec les tableaux. Ainsi, les éléments fils d'un conteneur en grille peuvent être positionnés afin qu'ils se chevauchent ou qu'ils se comportent comme des éléments positionnés.</p>
+
+<h2 id="Un_exemple_simple">Un exemple simple</h2>
+
+<p>Dans l'exemple qui suit, on montre comment utiliser une grille avec trois pistes en colonnes pour laquelle les nouvelles lignes créées mesureront au moins 100 pixels et auront au plus la taille automatique (définie par leur contenu). Les éléments sont placés sur la grille grâce aux numéros des lignes horizontales et verticales.</p>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+.wrapper {
+  max-width: 940px;
+  margin: 0 auto;
+}
+
+.wrapper &gt; div {
+  border: 2px solid rgb(233,171,88);
+  border-radius: 5px;
+  background-color: rgba(233,171,88,.5);
+  padding: 1em;
+  color: #d9480f;
+}</pre>
+</div>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="one"&gt;Un&lt;/div&gt;
+  &lt;div class="two"&gt;Deux&lt;/div&gt;
+  &lt;div class="three"&gt;Trois&lt;/div&gt;
+  &lt;div class="four"&gt;Quatre&lt;/div&gt;
+  &lt;div class="five"&gt;Cinq&lt;/div&gt;
+  &lt;div class="six"&gt;Six&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: minmax(100px, auto);
+}
+.one {
+  grid-column: 1 / 3;
+  grid-row: 1;
+}
+.two {
+  grid-column: 2 / 4;
+  grid-row: 1 / 3;
+}
+.three {
+  grid-column: 1;
+  grid-row: 2 / 5;
+}
+.four {
+  grid-column: 3;
+  grid-row: 3;
+}
+.five {
+  grid-column: 2;
+  grid-row: 4;
+}
+.six {
+  grid-column: 3;
+  grid-row: 4;
+}
+</pre>
+
+<p>{{EmbedLiveSample("Un_exemple_simple", "100%", "440")}}</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés_CSS">Propriétés CSS</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("grid-template-columns")}}</li>
+ <li>{{cssxref("grid-template-rows")}}</li>
+ <li>{{cssxref("grid-template-areas")}}</li>
+ <li>{{cssxref("grid-template")}}</li>
+ <li>{{cssxref("grid-auto-columns")}}</li>
+ <li>{{cssxref("grid-auto-rows")}}</li>
+ <li>{{cssxref("grid-auto-flow")}}</li>
+ <li>{{cssxref("grid")}}</li>
+ <li>{{cssxref("grid-row-start")}}</li>
+ <li>{{cssxref("grid-column-start")}}</li>
+ <li>{{cssxref("grid-row-end")}}</li>
+ <li>{{cssxref("grid-column-end")}}</li>
+ <li>{{cssxref("grid-row")}}</li>
+ <li>{{cssxref("grid-column")}}</li>
+ <li>{{cssxref("grid-area")}}</li>
+ <li>{{cssxref("row-gap")}}</li>
+ <li>{{cssxref("column-gap")}}</li>
+ <li>{{cssxref("gap")}}</li>
+</ul>
+</div>
+
+<h3 id="Fonctions_CSS">Fonctions CSS</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("repeat", "repeat()")}}</li>
+ <li>{{cssxref("minmax", "minmax()")}}</li>
+ <li>{{cssxref("fit-content", "fit-content()")}}</li>
+</ul>
+</div>
+
+<h3 id="Types_de_donnée_CSS">Types de donnée CSS</h3>
+
+<p>{{cssxref("&lt;flex&gt;")}}</p>
+
+<h3 id="Termes_définis_dans_le_glossaire">Termes définis dans le glossaire</h3>
+
+<div class="index">
+<ul>
+ <li><a href="/fr/docs/Glossaire/Grid">Grille</a></li>
+ <li><a href="/fr/docs/Glossaire/Grid_Lines">Lignes</a></li>
+ <li><a href="/fr/docs/Glossaire/Grid_Tracks">Pistes</a></li>
+ <li><a href="/fr/docs/Glossaire/Grid_Cell">Cellules</a></li>
+ <li><a href="/fr/docs/Glossaire/Grid_Areas">Zones</a></li>
+ <li><a href="/fr/docs/Glossaire/Gutters">Gouttières</a></li>
+ <li><a href="/fr/docs/Glossaire/Grid_Axis">Axe</a></li>
+ <li><a href="/fr/docs/Glossaire/Grid_Rows">Ligne horizontale </a></li>
+ <li><a href="/fr/docs/Glossaire/Grid_Column">Colonnes</a></li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<div class="index">
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base">Les concepts de base</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS">Placer les éléments sur les lignes d'une grille CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition">Le modèle de grille et les autres modèles de disposition</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille">Utiliser des lignes nommées sur une grille</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille">Définir des zones sur une grille</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS">Le placement automatique sur une grille</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">L'alignement des boîtes avec les grilles CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture">Les grilles CSS, les valeurs logiques et les modes d'écriture</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité">Les grilles CSS et l'accessibilité</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive">Les grilles CSS et l'amélioration progressive</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Construire_des_dispositions_courantes_avec_des_grilles_CSS">Construire des dispositions courantes avec des grilles CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Subgrid">Les sous-grilles (<em>subgrid</em>)</a></li>
+</ul>
+</div>
+
+<h2 id="Ressources_externes">Ressources externes</h2>
+
+<ul>
+ <li><a href="http://labs.jensimmons.com/">Des exemples créés par Jen Simmons (en anglais)</a></li>
+ <li><a href="http://gridbyexample.com/">Les grilles CSS par l'exemple - un ensemble d'exemples et de tutoriels (en anglais)</a></li>
+ <li><a href="https://tympanus.net/codrops/css_reference/grid/">La référence Codrops sur les grilles CSS (en anglais)</a></li>
+ <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">L'inspecteur de grille dans les outils de développement Firefox</a></li>
+ <li><a href="https://mozilladevelopers.github.io/playground/">Le bac à sable CSS Grid (en anglais)</a></li>
+ <li><a href="http://tomrothe.de/posts/css_grid_and_ie11.html">Les grilles CSS et Internet Explorer 11</a> (<a href="https://github.com/motine/css_grid_annotator">prothèse - <em>polyfill</em></a>)</li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Grid 2')}}</td>
+   <td>{{Spec2("CSS Grid 2")}}</td>
+   <td>Ajout des <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base#Sous-grille">« sous-grilles » (<em>subgrids</em>)</a>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Grid')}}</td>
+   <td>{{Spec2('CSS3 Grid')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/css/css_grid_layout/les_concepts_de_base/index.html b/files/fr/web/css/css_grid_layout/les_concepts_de_base/index.html
new file mode 100644
index 0000000000..c6395dbee9
--- /dev/null
+++ b/files/fr/web/css/css_grid_layout/les_concepts_de_base/index.html
@@ -0,0 +1,625 @@
+---
+title: Les concepts de base des grilles CSS
+slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base
+tags:
+  - CSS
+  - CSS Grids
+  - Grilles CSS
+  - Guide
+  - Intermédiaire
+translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
+---
+<div>{{CSSRef}}</div>
+
+<p>{{PreviousMenuNext("", "Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS","Web/CSS/CSS_Grid_Layout")}}</p>
+
+<p>Le module <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a> ajoute à CSS une grille à deux dimensions. Les grilles peuvent être utilisées pour agencer des pages entières ou de petits éléments d'interface. Cet article introduit CSS Grid Layout, et la terminologie de la spécification CSS Grid Layout Level 1. Les fonctionnalités évoquées seront expliquées plus en détail dans le reste du guide.</p>
+
+<h2 id="Qu'est-ce_qu'une_grille">Qu'est-ce qu'une grille ?</h2>
+
+<p>Une grille est un ensemble de lignes horizontales et verticales qui se croisent – les premières définissant les rangées, et les secondes les colonnes. Les éléments sont placés sur la grille en fonction de ces rangées et colonnes. Les fonctionnalités sont les suivantes :</p>
+
+<h3 id="Pistes_à_taille_fixe_ou_variable">Pistes à taille fixe ou variable</h3>
+
+<p>On peut créer une grille avec des pistes à taille fixes en utilisant une unité comme le pixel. Pour les pistes à taille variable on peut utiliser le pourcentage ou la nouvelle unité <code>fr</code> créée à cet effet.</p>
+
+<h3 id="Placement_des_éléments">Placement des éléments</h3>
+
+<p>Pour placer les éléments sur la grille, on peut utiliser le numéro ou le nom d'une ligne, ou cibler une zone particulière. La grille contient aussi un algorithme pour placer les éléments qui n'ont pas été placés explicitement.</p>
+
+<h3 id="Création_de_pistes_supplémentaires_pour_du_contenu">Création de pistes supplémentaires pour du contenu</h3>
+
+<p>Lorsqu'une grille explicite n'est pas définie, la spécification prend en charge le contenu défini en dehors d'une grille en ajoutant des colonnes et des rangées. Cela comprend des fonctionnalités telles qu'« ajouter autant de colonnes que possible dans le conteneur ».</p>
+
+<h3 id="Contrôle_de_l'alignement">Contrôle de l'alignement</h3>
+
+<p>On peut contrôler l'alignement des éléments dans une zone de la grille, ainsi que celui de l'ensemble de la grille.</p>
+
+<h3 id="Contrôle_des_contenus_qui_se_chevauchent">Contrôle des contenus qui se chevauchent</h3>
+
+<p>Il peut arriver que l'on place plusieurs éléments dans une même cellule, ou que des zones se chevauchent. La superposition peut être contrôlée à l'aide de la propriété {{cssxref("z-index")}}.</p>
+
+<p>La grille est une spécification puissante qui peut être combinée avec d'autres modules CSS tels que <a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS">flexbox</a>. Le point de départ est le <strong>conteneur</strong>.</p>
+
+<h2 id="Le_conteneur">Le conteneur</h2>
+
+<p>À partir du moment où on crée un <em>conteneur</em> en déclarant la propriété <code>display: grid</code> ou <code>display: inline-grid</code> sur un élément, tous les <em>enfants directs </em>de cet élément deviennet des <em>éléments de grille</em>.</p>
+
+<p>Cet exemple montre une div avec une classe <code>.wrapper</code>, avec cinq éléments enfants.</p>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div&gt;Un&lt;/div&gt;
+  &lt;div&gt;Deux&lt;/div&gt;
+  &lt;div&gt;Trois&lt;/div&gt;
+  &lt;div&gt;Quatre&lt;/div&gt;
+  &lt;div&gt;Cinq&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>On transforme <code>.wrapper</code> en conteneur.</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Le_conteneur', '200', '330') }}</p>
+
+<p>Tous les enfants directs sont maintenant des éléments de grille. On ne voit pas la différence dans un navigateur, car la grille n'a qu'une seule colonne. Vous trouverez sans doute utile de travailler avec Firefox, qui propose un <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">inspecteur de grille</a> dans les outils de développement. En inspectant la grille dans Firefox, vous pouvez voir une petite icône à côté de la valeur <code>grid</code>. Un clic dessus permet d'afficher la grille correspondante dans le navigateur.</p>
+
+<p><img alt="Using the Grid Highlighter in DevTools to view a grid" src="https://mdn.mozillademos.org/files/14791/Screen%20Shot%202017-03-17%20at%2014.47.48.png" style="height: 551px; width: 846px;"></p>
+
+<p>Cet outil vous permettra de mieux comprendre le fonctionnement de CSS Grid Layout.</p>
+
+<p>Pour que notre exemple ressemble vraiment à une grille nous devons ajouter des colonnes.</p>
+
+<h2 id="Les_pistes">Les pistes</h2>
+
+<p>Les propriétés {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-rows")}} permettent de définir des colonnes et des rangées. Celles-ci définissent les pistes. Une <em>piste</em> est l'espace entre deux lignes d'une grille. L'image ci-dessous colore une piste de la grille – correspondant à la première rangée de la grille.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14637/1_Grid_Track.png" style="height: 400px; width: 600px;"></p>
+
+<p>On peut ajouter la propriété <code>grid-template-columns</code> à notre exemple précédent, pour définir la taille des colonnes.</p>
+
+<p>Nous avons créé une grille avec trois pistes de 200 pixels de large. Chaque élément sera disposé dans l'une des cellules de la grille.</p>
+
+<div id="grid_first">
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div&gt;Un&lt;/div&gt;
+  &lt;div&gt;Deux&lt;/div&gt;
+  &lt;div&gt;Trois&lt;/div&gt;
+  &lt;div&gt;Quatre&lt;/div&gt;
+  &lt;div&gt;Cinq&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: 200px 200px 200px;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('grid_first', '610', '140') }}</p>
+</div>
+
+<h3 id="L'unité_fr">L'unité fr</h3>
+
+<p>Les pistes peuvent être définies à l'aide de n'importe quelle unité de mesure. Les grilles proposent aussi une nouvelle unité de mesure pour aider à la création de pistes flexibles. Cette unité, <code>fr</code>, représente une fraction de l'espace disponible dans le conteneur de la grille. Le code suivant crée trois colonnes égales qui se redimensionnent en fonction de l'espace disponible.</p>
+
+<div id="fr_unit_ls">
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div&gt;Un&lt;/div&gt;
+  &lt;div&gt;Deux&lt;/div&gt;
+  &lt;div&gt;Trois&lt;/div&gt;
+  &lt;div&gt;Quatre&lt;/div&gt;
+  &lt;div&gt;Cinq&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('fr_unit_ls', '220', '140') }}</p>
+</div>
+
+<p>L'exemple suivant crée une grille avec une colonne de <code>2fr</code>, et deux colonnes de <code>1fr</code>. L'espace disponible est divisé en quatre. Les deux premières fractions sont allouées à la première colonne, et chacune des colonnes suivante dispose d'une fraction.</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+}
+</pre>
+
+<p>Dans ce dernier exemple nous utilisons à la fois des dimensions absolues et des relatives. La première colonne faisant 500px, cette valeur est soustraite de l'espace disponible. L'espace restant est divisé en trois et alloué proportionnellement aux deux colonnes spécifiées avec l'unité relative <code>fr</code>.</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: 500px 1fr 2fr;
+}
+</pre>
+
+<h3 id="Utiliser_la_notation_repeat()_pour_définir_les_pistes">Utiliser la notation <code>repeat()</code> pour définir les pistes</h3>
+
+<p>Pour les grilles comprenant de nombreuses pistes on peut utiliser la notation <code>repeat()</code> pour répéter toute ou une partie des pistes définies. Par exemple la définition de grille :</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+</pre>
+
+<p>peut également s'écrire :</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+</pre>
+
+<p>Dans l'exemple suivant on crée une grille avec une première colonne de 20px de large, puis une section répétant 6 fois une piste de 1fr, et enfin on termine par une colonne de 20px de large.</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: 20px repeat(6, 1fr) 20px;
+}
+</pre>
+
+<p>Cette notation accepte une liste de pistes, on peut donc l'utiliser pour répéter un motif. Dans l'exemple qui suit la grille aura 10 colonnes : une colonne de 1fr suivie d'une colonne de 2fr, ceci répété 5 fois.</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr 2fr);
+}
+</pre>
+
+<h3 id="Grille_implicite_et_grille_explicite">Grille implicite et grille explicite</h3>
+
+<p>Dans ces exemples nous avons défini nos colonnes à l'aide de la propriété {{cssxref("grid-template-columns")}}, et nous avons laissé la grille créer les rangées. Ces rangées font partie de la grille implicite.La grille explicite est constituée des pistes définies par les propriétés {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-rows")}}. Si un élément est placé en dehors de la grille ainsi définie, ou que la quantité de contenu nécessite d'étendre la grille, alors la grille ajoute implicitement des colonnes et rangées. Les dimensions de ces pistes auront par défaut la valeur auto, c'est-à dire qu'elles s'ajusteront à leur contenu.</p>
+
+<p>On peut définir une taille pour les pistes de la grille implicite grâce aux propriéts {{cssxref("grid-auto-rows")}} et {{cssxref("grid-auto-columns")}}.</p>
+
+<p>Dans l'exemple ci-après nous utilisons <code>grid-auto-rows</code> pour que les rangées de la grille implicite fassent 200 pixels de haut.</p>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div&gt;Un&lt;/div&gt;
+  &lt;div&gt;Deux&lt;/div&gt;
+  &lt;div&gt;Trois&lt;/div&gt;
+  &lt;div&gt;Quatre&lt;/div&gt;
+  &lt;div&gt;Cinq&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 200px;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Grille_implicite_et_grille_explicite', '230', '420') }}</p>
+
+<h3 id="Dimensionner_une_piste_avec_minmax">Dimensionner une piste avec <code>minmax</code></h3>
+
+<p>Que l'on crée une grille explicite, ou que l'on définisse la taille des pistes créées implicitement, il peut être utile d'assigner une taille minimum, qui s'agrandit pour s'adapter au contenu. Par exemple on peut souhaiter que les rangées ne soient jamais moins hautes que 100 pixels, mais qu'elles aillent jusqu'à 300 pixels de haut si le contenu le nécessite.</p>
+
+<p>La fonction {{cssxref("minmax", "minmax()")}} permet ce comportement. Dans l'exemple suivant nous utilisons <code>minmax()</code> comme valeur de la propriété {{cssxref("grid-auto-rows")}}. Les rangées créées automatiquement feront un minimum de 100 pixels, et un maximum de <code>auto</code>, ce qui signifie que la taille s'adaptera à la hauteur du contenu.</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div&gt;Un&lt;/div&gt;
+   &lt;div&gt;Deux
+     &lt;p&gt;Davantage de contenu.&lt;/p&gt;
+     &lt;p&gt;On dépasse les 100 pixels.&lt;/p&gt;
+   &lt;/div&gt;
+   &lt;div&gt;Trois&lt;/div&gt;
+   &lt;div&gt;Quatre&lt;/div&gt;
+   &lt;div&gt;Cinq&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Dimensionner_une_piste_avec_minmax', '240', '470') }}</p>
+
+<h2 id="Lignes_de_grille">Lignes de grille</h2>
+
+<p>Il faut noter que l'on définit les pistes d'une grille, et pas les lignes qui en résultent. La grille génère des lignes numérotées que l'on utilise pour positionner les éléments. Dans notre grille de trois colonnes et deux rangées, nous avons quatre lignes de colonnes.</p>
+
+<p><img alt="Grid Lines" src="https://mdn.mozillademos.org/files/14793/GRID2.jpg" style="height: 456px; width: 764px;"></p>
+
+<p>Les lignes sont numérotées selon le sens de lecture du document. Dans un langage qui se lit de gauche à droite, la ligne 1 est située à gauche, dans un langage qui se lit de droite à gauche elle est située à droite. Les lignes peuvent aussi être nommées, comme nous le verrons plus loin dans ces pages.</p>
+
+<h3 id="Positionnement_des_éléments_sur_les_lignes">Positionnement des éléments sur les lignes</h3>
+
+<p>Nous explorerons le placement sur les lignes plus en détail dans un prochain article, l'exemple qui suit montre comment l'utiliser de façon simple.</p>
+
+<p>Lorsque nous plaçons un élément nous ciblons une ligne plutôt qu'une piste. Nous plaçons ici les deux premiers éléments en utilisant les propriétés {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row-start")}} et {{cssxref("grid-row-end")}}. En allant de gauche à droite, le premier élément est placé sur la ligne de colonne 1, et va jusqu'à la ligne de colonne 4, qui dans ce cas est la dernière. Il est placé sur la ligne de rangée 1, et va jusqu'à la ligne 3, s'étendant ainsi sur deux rangées.</p>
+
+<p>Le second élément commence sur la ligne de colonne 1 et s'étend sur une seule piste. C'est la largeur par défaut, donc il n'est pas nécessaire de spécifier la ligne de fin. Il s'étend aussi sur deux rangées de la ligne 3 à la ligne 5. Les autres éléments se placeront dans les espaces vides de la grille.</p>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;Un&lt;/div&gt;
+  &lt;div class="box2"&gt;Deux&lt;/div&gt;
+  &lt;div class="box3"&gt;Trois&lt;/div&gt;
+  &lt;div class="box4"&gt;Quatre&lt;/div&gt;
+  &lt;div class="box5"&gt;Cinq&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 3;
+  grid-row-end: 5;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Positionnement_des_éléments_sur_les_lignes', '230', '420') }}</p>
+
+<p>Pensez à utiliser l'<a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Inspecteur de grille</a> dans les outils de développement pour voir comment les éléments se placent sur les lignes d'une grille items.</p>
+
+<h2 id="Les_cellules">Les cellules</h2>
+
+<p>Une <em>cellule</em> est la plus petite unité sur une grille, conceptuellement similaire à une cellule de tableau. Comme nous l'avons vu lorsqu'une grille est définie sur un élément ses enfants viennent se positionner chacun dans l'une des cellules de la grille. Dans l'image ci-dessous la première cellule est colorée.</p>
+
+<p><img alt="The first cell of the grid highlighted" src="https://mdn.mozillademos.org/files/14643/1_Grid_Cell.png" style="height: 400px; width: 600px;"></p>
+
+<h2 id="Les_zones">Les zones</h2>
+
+<p>Un élément peut s'étendre sur plusieurs cellules d'une rangée ou d'une colonne, et cela crée une <em>zone</em>. Les zones doivent être rectangulaires - on ne peut pas créer de forme en L par exemple. La zone colorée ci-dessous s'étend sur deux rangées et deux colonnes.</p>
+
+<p><img alt="A grid area" src="https://mdn.mozillademos.org/files/14645/1_Grid_Area.png" style="height: 400px; width: 600px;"></p>
+
+<h2 id="Les_gouttières">Les gouttières</h2>
+
+<p>Les <em>gouttière</em><em>s</em> entre les cellules sont définies à l'aide des propriétés {{cssxref("grid-column-gap")}} et {{cssxref("grid-row-gap")}}, ou de la propriété raccourcie {{cssxref("grid-gap")}}. Dans l'exemple ci-dessous nous créons une gouttière de dix pixels de large entre les colonnes, et une gouttière de 1em de hauteur entre les rangées.</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-column-gap: 10px;
+  grid-row-gap: 1em;
+}
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Les anciens navigateurs utilisent {{cssxref("column-gap")}}, {{cssxref("row-gap")}}, {{cssxref("gap")}} avec le préfixe <code>grid-</code> soit : {{cssxref("grid-column-gap")}}, {{cssxref("grid-row-gap")}} et {{cssxref("grid-gap")}}.</p>
+
+<p>Les navigateurs actuels retirent progressivement ce préfixe (la version préfixée sera maintenue sous forme d'alias). À l'heure actuelle, certains navigateurs ne prennent pas encore la version sans préfixe et c'est pourquoi certains exemples de ce guide continuent d'utiliser les versions préfixées avec <code>grid-</code>.</p>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div&gt;Un&lt;/div&gt;
+  &lt;div&gt;Deux&lt;/div&gt;
+  &lt;div&gt;Trois&lt;/div&gt;
+  &lt;div&gt;Quatre&lt;/div&gt;
+  &lt;div&gt;Cinq&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Les_gouttières') }}</p>
+
+<p>L'espace utilisé par les gouttières sera pris en compte avant l'assignation de la place restante aux pistes définies avec l'unité <code>fr</code>. La taille des gouttières est calculée comme celle des pistes, mais on ne peut pas placer d'élément dans une gouttière. Au niveau du positionnement des éléments sur les lignes, la gouttière se comporte comme une ligne épaisse.</p>
+
+<h2 id="Grilles_imbriquées">Grilles imbriquées</h2>
+
+<p>Un élément placé dans une grille peut aussi être le conteneur d'une autre grille. Dans l'exemple suivant nous retrouvons la grille de trois colonnes créée plus haut, avec deux éléments explicitement positionnés. Le premier élément contient lui-même des éléments. Comme ils ne sont pas des enfants directs de la grille principale, ils se positionnent normalement dans le flux.</p>
+
+<div id="nesting">
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box box1"&gt;
+    &lt;div class="nested"&gt;a&lt;/div&gt;
+    &lt;div class="nested"&gt;b&lt;/div&gt;
+    &lt;div class="nested"&gt;c&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="box box2"&gt;Deux&lt;/div&gt;
+  &lt;div class="box box3"&gt;Trois&lt;/div&gt;
+  &lt;div class="box box4"&gt;Quatre&lt;/div&gt;
+  &lt;div class="box box5"&gt;Cinq&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p><img alt="Nested grid in flow" src="https://mdn.mozillademos.org/files/14795/grid3.jpg" style="height: 512px; width: 900px;"></p>
+
+<p>En définissant la propriété <code>display:grid</code> sur l'élément <code>box1</code>, il devient lui-même une grille et ses enfants se positionnent sur cette grille.</p>
+
+<pre class="brush: css">.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+.box {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+.nested {
+    border: 2px solid #ffec99;
+    border-radius: 5px;
+    background-color: #fff9db;
+    padding: 1em;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('nesting', '600', '340') }}</p>
+
+<p>Dans ce cas la grille imbriquée n'est pas liée à la grille qui la contient. Elle n'hérite pas des {{cssxref("grid-gap")}}, et ses lignes ne s'alignent pas avec celles de la grille parent.</p>
+
+<h3 id="Sous-grille">Sous-grille</h3>
+
+<p>Dans le brouillon de travaille pour la spécification de niveau 2 pour CSS Grid, il existe une fonctionnalité nommée <em>sous-grille</em> qui permet de créer des grilles imbriquées qui utilisent la définition de la grille parent. <em>Ceci n'est implémenté dans aucun navigateur pour le moment, et la spécification peut encore changer.</em> Pour l'utiliser telle qu'elle est définie actuellement il faudrait modifier l'exemple suivant et remplacer <code>display: grid</code> par <code>display: subgrid, </code>et supprimer la définition des pistes. La piste imbriquée utiliserait les pistes de la grille parent pour positionner ses éléments.</p>
+
+<p>Selon la version actuelle de la spécifiction, il faudrait éditer l'exemple de grille imbriquée précédent et remplacer <code>grid-template-columns: repeat(3, 1fr)</code> en <code>grid-template-columns: subgrid</code>. La grille imbriquée utilisera alors la grille parente pour inscrire ses éléments dans le document.</p>
+
+<pre class="brush: css">.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  display: grid;
+  grid-template-columns: subgrid;
+}
+</pre>
+
+<h2 id="Superposer_les_éléments_avec_z-index">Superposer les éléments avec <code>z-index</code></h2>
+
+<p>Plusieurs éléments peuvent être placés dans la même cellule. Si nous retournons à notre exemple avec les items positionnés par numéros de ligne, nous pouvons modifier cela pour que deux items se chevauchent.</p>
+
+<div id="l_ex">
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box box1"&gt;Un&lt;/div&gt;
+  &lt;div class="box box2"&gt;Deux&lt;/div&gt;
+  &lt;div class="box box3"&gt;Trois&lt;/div&gt;
+  &lt;div class="box box4"&gt;Quatre&lt;/div&gt;
+  &lt;div class="box box5"&gt;Cinq&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 2;
+  grid-row-end: 4;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+.box {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('l_ex', '230', '420') }}</p>
+
+<p>L'élément <code>box2</code> est maintenant superposé avec <code>box1</code>, et comme il arrive après dans le code source il s'affiche par-dessus.</p>
+
+<h3 id="Contrôler_l’ordre_de_superposition">Contrôler l’ordre de superposition</h3>
+
+<p>On peut contrôler l'ordre dans lequel les éléments s'empilent en utilisant la propriété <code>z-index</code>. Si nous donnons à <code>box2</code> un <code>z-index</code> inférieur à celui de <code>box1</code>, l'élément <code>box2</code> s'affichera sous <code>box1</code> dans la pile.</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  z-index: 2;
+}
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 2;
+  grid-row-end: 4;
+  z-index: 1;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+    &lt;div class="box box1"&gt;Un&lt;/div&gt;
+    &lt;div class="box box2"&gt;Deux&lt;/div&gt;
+   &lt;div class="box box3"&gt;Trois&lt;/div&gt;
+   &lt;div class="box box4"&gt;Quatre&lt;/div&gt;
+   &lt;div class="box box5"&gt;Cinq&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">* {box-sizing: border-box;}
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+.box {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample("Contrôler_l’ordre_de_superposition", '230', '420') }}</p>
+
+<h2 id="La_suite">La suite</h2>
+
+<p>Dans cet article nous avons parcouru rapidement la spécification CSS Grid Layout. Essayez de jouer avec les exemples, avant de passer aux parties suivantes de ce guide pour commencer à vraiment plonger dans le détail de la CSS Grid Layout.</p>
+
+<p>{{PreviousMenuNext("", "Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS","Web/CSS/CSS_Grid_Layout")}}</p>
diff --git a/files/fr/web/css/css_grid_layout/les_grilles_css_et_l_accessibilité/index.html b/files/fr/web/css/css_grid_layout/les_grilles_css_et_l_accessibilité/index.html
new file mode 100644
index 0000000000..6e2751382d
--- /dev/null
+++ b/files/fr/web/css/css_grid_layout/les_grilles_css_et_l_accessibilité/index.html
@@ -0,0 +1,124 @@
+---
+title: Les grilles CSS et l'accessibilité
+slug: Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité
+tags:
+  - Accessibilité
+  - CSS
+  - CSS Grids
+  - Grilles CSS
+  - Guide
+  - Intermédiaire
+translation_of: Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility
+---
+<div>{{CSSRef}}</div>
+
+<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive","Web/CSS/CSS_Grid_Layout")}}</p>
+
+<p>Pour celles et ceux qui étaient présents aux premières lueurs du Web, les grilles CSS peuvent rappeler l'âge sombre où les tableaux HTML étaient utilisés pour la mise en forme des pages et où les cellules étaient utilisées pour diviser le contenu. Cette approche avait quelques avantages par rapport au positionnement CSS apparu après : on pouvait tirer parti de l'alignement et des colonnes créées dans un tableau. Il y a toutefois un inconvénient majeur : la mise en forme est fortement couplée à la structure du document, entraînant certains problèmes d'accessibilité. On pouvait par exemple découper le contenu dans le tableau afin d'obtenir la mise en forme souhaitée mais la structure de la page n'avait plus aucun sens lorsqu'elle était lue par un lecteur d'écran.</p>
+
+<p>Aux débuts de CSS, on évoquait souvent CSS comme un outil pour séparer distinctement la mise en forme d'une part et le contenu du document d'autre part. L'objectif ultime était alors de pouvoir créer un document sémantique et structuré correctement puis appliquer une feuille de style CSS afin de créer la disposition voulue. Des sites tels que <a href="https://www.csszengarden.com/">CSS Zen Garden</a> montrent comment obtenir différents styles grâce à CSS à partir d'un même document HTML.</p>
+
+<p><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">Les grilles CSS</a> n'ont pas les mêmes problèmes que les tableaux : la structure de la grille est bien définie dans la feuille de style et pas dans le document. Si nécessaire, on peut ajouter un élément sans rôle sémantique. En théorie, une grille CSS nous aide à obtenir cette séparation conceptuelle entre la forme (le code CSS) et le sens (le document HTML) mais est-il possible d'aller trop loin avec cette idée ? Est-ce que les grilles CSS peuvent causer des problèmes d'accessibilité ?</p>
+
+<h2 id="Réordonner_le_contenu_dans_une_grille_CSS">Réordonner le contenu dans une grille CSS</h2>
+
+<p>Au fur et à mesure de ces articles, nous avons vu que les grilles CSS nous permettent de réordonner le contenu d'une page de différentes façons. On peut utiliser la propriété {{cssxref("order")}} afin de modifier la façon dont les éléments sont placés automatiquement sur la grille. On peut aussi utiliser <code>grid-auto-flow: dense</code> pour que les éléments ne suivent pas l'ordre du DOM afin de réduire les espaces laissés. On peut aussi positionner les éléments sur des lignes ou sur des zones définies, quel que soit leur emplacement dans la structure du document source.</p>
+
+<p><a href="https://drafts.csswg.org/css-grid/#order-accessibility">La spécification</a> contient une section qui aborde ce ré-ordonnancement et l'accessibilité. En introduction, on peut lire ce qui est attendu de la part des navigateurs lorsque le contenu est réordonné visuellement avec une grille CSS.</p>
+
+<blockquote>
+<p>La disposition en grille fournit une grande flexibilité aux auteurs pour replacer le contenu du document. Toutefois, cette flexibilité ne doit pas être utilisée pour pallier à un ordre incorrect du document source. Les propriétés des grilles relatives à l'ordre et au placement n'ont pas d'effet quant aux médias non-visuels (tels que la parole). De la même façon, le ré-ordonnancement visuel des éléments sur la grille n'a pas d'effet sur l'ordre de parcours séquentiel par défaut du document (notamment utilisé pour la navigation au clavier ou le parcours des liens, cf. <code><a href="/fr/docs/Web/HTML/Attributs_universels/tabindex">tabindex</a></code>).</p>
+</blockquote>
+
+<p>Si vous réordonnez les éléments du document grâce à une disposition sur une grille, cela ne changera pas l'ordre du contenu lu par un lecteur d'écran ou manipulé par un autre agent utilisateur. Cela ne modifiera pas non plus l'ordre des éléments lorsque ceux-ci sont parcourus au clavier. Une personne utilisant le clavier pourrait ainsi passer d'un coup de la partie haute de la grille à la partie basse si les liens ont été réordonnés.</p>
+
+<p>La spécification prévient les auteurs (c'est-à-dire les développeurs web) et leur indique de ne pas appliquer ce ré-ordonnancement.</p>
+
+<blockquote>
+<p>Les auteurs doivent utiliser les propriétés d'ordre et de placement uniquement pour des raisons visuelles et non pour réordonner logiquement le contenu. Les feuilles de style qui utilisent ces fonctionnalités afin de réordonner les éléments sur le plan logique ne sont pas considérées comme des feuilles de style conformes.</p>
+</blockquote>
+
+<p>Quelles sont les implications pratiques lorsqu'on conçoit une disposition avec une grille ?</p>
+
+<h3 id="Un_ré-ordonnancement_visuel_et_non_logique">Un ré-ordonnancement visuel et non logique</h3>
+
+<p>La modification d'ordre appliquée par la grille (ou les boîtes flexibles) est uniquement <em>visuelle</em>. C'est toujours le document sous-jacent qui contrôle l'ordre utilisé par les agents utilisateur non-visuels. Voyons comment cela s'applique pour un exemple simple.</p>
+
+<p>Dans cet exemple, on utilise une grille pour organiser un ensemble de boîtes qui contiennent des liens. On utilise les propriétés pour placer les éléments sur des lignes : la première boîte est placée sur la deuxième ligne. Visuellement, cette boîte apparaît désormais comme le quatrième élément de la liste. Mais si on utilise la touche tabulation pour naviguer au clavier parmi les liens, c'est toujours ce lien qui est en premier.</p>
+
+<div id="accessibility_1">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+
+.box1 {
+  grid-column: 1;
+  grid-row: 2;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box box1"&gt;&lt;a href=""&gt;Un&lt;/a&gt;&lt;/div&gt;
+  &lt;div class="box box2"&gt;&lt;a href=""&gt;Deux&lt;/a&gt;&lt;/div&gt;
+  &lt;div class="box box3"&gt;&lt;a href=""&gt;Trois&lt;/a&gt;&lt;/div&gt;
+  &lt;div class="box box4"&gt;&lt;a href=""&gt;Quatre&lt;/a&gt;&lt;/div&gt;
+  &lt;div class="box box5"&gt;&lt;a href=""&gt;Cinq&lt;/a&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('accessibility_1', '500', '330')}}</p>
+</div>
+
+<p>Pour ce scénario, la spécification indique que, si la boîte 1 doit logiquement être placée ici, il faut alors modifier le document source plutôt que de réordonner les éléments grâce à la grille.</p>
+
+<h2 id="Comment_prendre_en_compte_l'accessibilité_avec_une_disposition_en_grille">Comment prendre en compte l'accessibilité avec une disposition en grille ?</h2>
+
+<p>On voit à partir de la spécification qu'il faut maintenir l'ordre logique du contenu. Quelle approche choisir pendant le développement afin de s'assurer de respecter l'accessibilité pour les utilisateurs et que ceux-ci puissent interagir correctement avec la page, quels que soient les outils utilisés ?</p>
+
+<dl>
+ <dt>Démarrer avec un document structuré et accessible</dt>
+ <dd>Une disposition en grille ne doit pas nécessiter de changement dans la structure du document pour obtenir la disposition souhaitée. Aussi, pour commencer, le document qui forme la page doit être bien structuré et accessible. Comme indiqué dans la spécification, cette structure de base doit également fournir une bonne structure pour les petits écrans. Si un utilisateur fait défiler le site sur un appareil mobile, les éléments qu'il doit voir en premier sont généralement ceux qui sont au début du document dans la source.</dd>
+ <dt>Créer une grille adaptative correcte</dt>
+ <dd>Grâce à cette structure de base claire, on peut complexifier la disposition. Il est probable qu'on veuille ajouter des <a href="/fr/docs/Web/CSS/Requêtes_média">requêtes de média</a> afin de créer des colonnes supplémentaires et gérer différentes tailles d'écran et différents appareils. Une grille peut s'avérer très utile pour déplacer les éléments qui étaient moins prioritaires sur mobile afin de construire la disposition d'un écran plus large. Une bonne stratégie consiste à tester chaque disposition, simplement en utilisant la navigation avec la touche tabulation : est-ce que cet ordre est pertinent ? est-ce qu'on ne passe pas d'un coup du haut en bas de la page ?</dd>
+ <dt>Revenir à la source</dt>
+ <dd>Si, pendant cette phase de conception, vous avez besoin de replacer un élément avec la grille, analysez s'il est nécessaire de replacer cet élément dans l'ordre logique du document. Les grilles CSS ont cela de pratique qu'elles permettent de déplacer un élément dans le document source sans qu'il soit nécessaire de modifier profondément les règles de style. C'est un atout considérable par rapport aux dispositions construites avec {{cssxref("float")}} où la structure et l'ordre du document jouaient un rôle fondamental. Cela demande toutefois de garder à l'esprit qu'il faut revenir à la source pour mettre à jour et maintenir l'ordre logique.</dd>
+</dl>
+
+<h2 id="Les_grilles_et_le_risque_d'aplatir_le_document_à_outrance">Les grilles et le risque d'aplatir le document à outrance</h2>
+
+<p>On peut rencontrer un autre problème avec les grilles CSS (et, dans une moindre mesure, avec les boîtes flexibles) : vouloir aplatir la structure du document. Comme nous avons pu le voir, pour qu'un objet appartienne à la grille, il faut que ce soit un fils direct du conteneur de la grille. Ainsi, si on place un élément {{HTMLElement("ul")}} dans une grille, c'est <em>cet</em> <code>ul</code> qui devient un objet de la grille, les éléments {{HTMLElement("li")}} qui en dépendent n'en sont pas.</p>
+
+<p>Si la valeur <code>subgrid</code> est implémentée pour la propriété {{cssxref("display")}}, on pourra alors indiquer que ces fils participent à la grille en tant que <em>sous-grille</em>. Actuellement, la seule solution à notre disposition est d'utiliser <code>display: contents</code> afin que la boîte générée par l'élément <code>ul</code> disparaisse de la structure graphique. Pour plus d'informations à ce sujet, vous pouvez consulter <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition">l'article sur les liens entre les grilles et les autres méthodes de disposition</a> et notamment la section sur <code><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition#Utiliser_une_grille_et_display_contents">display: contents</a></code>.</p>
+
+<p>Étant donné que la prise en charge de <code>display: contents</code> pour les différents navigateurs est actuellement limitée et que les sous-grilles n'existent pas encore, on peut être tenté d'aplatir la structure du document lorsqu'on utilise les grilles CSS pour créer la disposition d'un document. Par exemple, pour une liste, identifiée sémantiquement comme telle avec <code>ul</code>, on pourrait plutôt utiliser des éléments {{HTMLElement("div")}} qui seraient des éléments directement situés sous le conteneur qui a <code>display: grid</code>. Mieux vaut donc être conscient de cette tentation et construire un document sans détricoter la structure. En commençant par créer un document structuré, on se rend plus facilement compte de la sémantique perdue si on retire des éléments pour une simple question visuelle.</p>
+
+<h2 id="Approfondir_la_question">Approfondir la question</h2>
+
+<p>Il n'existe pas encore beaucoup de contenu relatif à l'accessibilité et au modèle de grille CSS. La plupart des problèmes rencontrés s'approchent de ceux qu'on rencontre avec les boîtes flexibles (qui permettent également de réordonner le contenu avec des propriétés comme {{cssxref("flex-direction")}} et {{cssxref("order")}}).</p>
+
+<p>Le concept selon lequel l'ordre d'affichage des éléments doit suivre l'ordre des éléments dans le document est décrit dans <em>WCAG Techniques for Success Criteria – <a href="https://www.w3.org/TR/WCAG20-TECHS/C27.html">Technique C27</a></em> (en anglais).</p>
+
+<p>Pour construire votre réflexion sur ce sujet, je vous invite à lire <em><a href="https://tink.uk/flexbox-the-keyboard-navigation-disconnect/">Flexbox &amp; the Keyboard Navigation Disconnect</a></em> écrit par Léonie Watson. <a href="https://www.youtube.com/watch?v=spxT2CmHoPk">La vidéo de la présentation de Léonie à ffconf</a> est aussi utile pour mieux comprendre comment les lecteurs d'écran utilisent la représentation visuelle des objets en CSS. Adrian Roselli a également publié <a href="https://adrianroselli.com/2015/10/html-source-order-vs-css-display-order.html">un article sur l'ordre de la navigation au clavier dans les différents navigateurs</a> bien que cet article ait été rédigé avant l'implémentation des grilles CSS dans Firefox.</p>
+
+<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive","Web/CSS/CSS_Grid_Layout")}}</p>
diff --git a/files/fr/web/css/css_grid_layout/les_grilles_css_et_l_amélioration_progressive/index.html b/files/fr/web/css/css_grid_layout/les_grilles_css_et_l_amélioration_progressive/index.html
new file mode 100644
index 0000000000..8a5122de2f
--- /dev/null
+++ b/files/fr/web/css/css_grid_layout/les_grilles_css_et_l_amélioration_progressive/index.html
@@ -0,0 +1,420 @@
+---
+title: Les grilles CSS et l'amélioration progressive
+slug: Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive
+tags:
+  - CSS
+  - CSS Grids
+  - Grilles CSS
+  - Guide
+  - Intermédiaire
+translation_of: Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement
+---
+<div>{{CSSRef}}</div>
+
+<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité", "Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition","Web/CSS/CSS_Grid_Layout")}}</p>
+
+<p>Au printemps 2017, on voit pour la première fois une spécification majeure être disponible presque simultanément dans différents navigateurs : les grilles CSS (<em>CSS Grid</em>). Les grilles CSS sont disponibles dans les versions récentes de Firefox, Chrome, Opera, Safari et Edge. Malgré cela, si ces navigateurs récents permettront à la plupart d'entre nous de profiter de ces nouvelles fonctionnalités, il existe d'anciens navigateurs ou d'autres navigateurs qui ne prennent pas en charge ces fonctionnalité. Dans ce guide, nous allons parcourir différentes stratégies pour gérer cette prise en charge.</p>
+
+<h2 id="Les_navigateurs_qui_prennent_en_charge_les_grilles_CSS">Les navigateurs qui prennent en charge les grilles CSS</h2>
+
+<p>En dehors d'Internet Explorer, les propriétés et valeurs relatives aux grilles CSS ne sont pas préfixées dans Safari, Chrome, Opera, Edge et dans Firefox. Toutes les propriétés et valeurs que nous avons vues dans ce guide fonctionnent de façon interopérable entre ces navigateurs. Cela signifie que si vous écrivez des règles CSS pour paramétrer une grille, le document doit avoir le même rendu dans Firefox, Opera et dans Chrome. Les grilles CSS ne sont plus une spécification expérimentale, elles peuvent donc être utilisées en production.</p>
+
+<h2 id="La_situation_pour_Internet_Explorer_et_Edge">La situation pour Internet Explorer et Edge</h2>
+
+<p>La première implémentation des grilles CSS a eu lieu avec Internet Explorer 10. La première version de la spécification ne contenait alors pas toutes les propriétés et valeurs décrites dans la spécification actuelle. Il existe également des différences importantes entre ce qui est disponible dans IE10 et la spécification actuelle, même si les propriétés et les valeurs se ressemblent à première vue. Cette implémentation initiale est également celle qui est en place dans Edge jusqu'à la version 15.</p>
+
+<p>La version implémentée pour IE/Edge (≤15) est préfixée avec <code>-ms</code> et les propriétés ont les noms suivants :</p>
+
+<ul>
+ <li>{{cssxref("grid-template-columns")}} est appelée <code>-ms-grid-columns</code></li>
+ <li>{{cssxref("grid-template-rows")}} est appelée <code>-ms-grid-rows</code></li>
+ <li>{{cssxref("grid-row-start")}} est appelée <code>-ms-grid-row</code></li>
+ <li>{{cssxref("grid-column-start")}} est appelée <code>-ms-grid-column</code></li>
+ <li>{{cssxref("align-self")}} est appelée <code>-ms-grid-row-align</code></li>
+ <li>{{cssxref("justify-self")}} est appelée <code>-ms-grid-column-align</code></li>
+</ul>
+
+<p>La version implémentée dans Internet Explorer dispose de propriétés supplémentaires qui ne font pas partie de la nouvelle spécification : <code>-ms-grid-column-span</code> et <code>-ms-grid-row-span</code>. La version implémentée dans IE ne profite pas du placement automatique ou des zones nommées. On peut implémenter certaines grilles simples pour IE10 et jusqu'à Edge 15, grâce à ces propriétés préfixées par <code>-ms</code>. Ces propriétés étant préfixées, elles ne seront pas reconnues (et n'auront aucun effet) pour les navigateurs qui implémentent la spécification actuelle.</p>
+
+<h3 id="L'utilisation_d'autoprefixer_pour_la_prise_en_charge_de_la_grille">L'utilisation d'autoprefixer pour la prise en charge de la grille</h3>
+
+<p>L'outil <em><a href="https://github.com/postcss/autoprefixer">autoprefixer</a></em> a été mis à jour afin de prendre en charge les versions préfixées par <code>-ms-</code> lorsqu'on utilise les nouvelles propriétés. Par défaut, les préfixes liés à la grille sont désactivés mais vous pouvez les activer avec l'option <code>grid: autoplace</code>.</p>
+
+<pre class="brush: js">autoprefixer({ grid: 'autoplace' })</pre>
+
+<p>Les préfixes relatifs aux grilles sont désactivés par défaut car certaines propriétés ne peuvent pas être préfixées</p>
+
+<h2 id="Puis-je_utiliser_les_grilles_CSS_sans_danger">Puis-je utiliser les grilles CSS sans danger ?</h2>
+
+<p>Comme pour les autres technologies <em>front-end</em>, la décision d'utiliser les grilles CSS se résume souvent au parc de navigateurs utilisés par le public de votre site ou votre application. S'ils ont tendance à utiliser des version à jour de Firefox, Chrome, Opera et Safari, il serait logique de commencer à utiliser les grilles CSS dès que la nouvelle version des navigateurs sera disponible. En revanche, si le marché visé repose sur d'anciens navigateurs, ce n'est peut-être pas le bon choix. Toutefois, je suggèrerai de ne pas prendre les mêmes hypothèses que pour la diffusion des autres spécifications par le passé : le travail d'implémentation et d'homogénéisation réalisés par les différents distributeurs de navigateur pour les fonctionnalités des grilles CSS est sans précédent.</p>
+
+<h2 id="Commencer_à_utiliser_les_grilles_CSS_en_production">Commencer à utiliser les grilles CSS en production</h2>
+
+<p>On notera qu'il n'est pas nécessaire d'avoir une rupture brutale pour utiliser les grilles CSS. On peut commencer par améliorer quelques éléments avec une grille et conserver l'ancienne méthode d'affichage pour les navigateurs historiques. Surcharger ces méthodes historiques avec les grilles fonctionne très bien étant donné la façon dont les grilles interagissent avec ces autres méthodes.</p>
+
+<h3 id="Effectuer_la_transition_depuis_une_disposition_flottante">Effectuer la transition depuis une disposition flottante</h3>
+
+<p>Jusqu'à présent, pour créer une disposition sur plusieurs colonnes, on a utilisé <a href="/fr/docs/Learn/CSS/CSS_layout/Floats">des dispositions flottantes</a>. Si vous avez un objet qui flotte et que celui-ci est également un objet d'une grille CSS : dans un navigateur qui prend en charge les grilles CSS, le flottement ne sera plus appliqué sur l'objet. En fait, la grille prend le pas sur le flottement. Dans l'exemple qui suit, on a simplement un objet média. Pour un navigateur historique, on utilise {{cssxref("float")}}, cependant, on a également défini un conteneur de grille dans lequel on pourra utiliser les propriétés d'alignement disponibles pour les navigateurs qui implémentent les grilles CSS.</p>
+
+<p>Le mode {{cssxref("float")}} ne s'applique plus sur l'objet et on peut utiliser la propriété {{cssxref("align-self")}} afin d'aligner le contenu vers la fin du conteneur.</p>
+
+<div id="enhancement_1">
+<pre class="brush: css">* {box-sizing: border-box;}
+img {
+  max-width: 100%;
+  display: block;
+}
+.media {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+  max-width: 400px;
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  grid-template-areas: "img content";
+  margin-bottom: 1em;
+}
+.media::after {
+  content: "";
+  display: block;
+  clear: both;
+}
+.media .image {
+  float: left;
+  width: 150px;
+  margin-right: 20px;
+}
+.media .text {
+  padding: 10px;
+  align-self: end;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="media"&gt;
+  &lt;div class="image"&gt;
+    &lt;img src="http://placehold.it/150x150" alt="placeholder"&gt;
+  &lt;/div&gt;
+  &lt;div class="text"&gt;
+    Voici un exemple avec un média. On utilise le flottement
+    pour les anciens navigateurs et une grille pour les
+    nouveaux.
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('enhancement_1', '500', '180')}}</p>
+</div>
+
+<p>Dans l'image qui suit, on voit à gauche ce qu'on obtient dans un navigateur qui ne prend pas en charge les grilles CSS et à droite le résultat obtenu pour un navigateur qui permet de les utiliser.</p>
+
+<p><img alt="A simple example of overriding a floated layout using grid." src="https://mdn.mozillademos.org/files/14743/10-float-simple-override.png" style="height: 308px; width: 1620px;"></p>
+
+<h3 id="Utiliser_les_requêtes_de_fonctionnalité_(feature_queries)">Utiliser les requêtes de fonctionnalité (<em>feature queries</em>)</h3>
+
+<p>L'exemple que nous venons de voir est très simple et on peut résoudre le problème sans avoir à écrire de code qui gênerait les navigateurs historiques, le code historique ne pose pas non plus de problème pour les navigateurs qui prennent en charge les grilles CSS. Dans la réalité, on fait parfois face à des cas plus complexes.</p>
+
+<p>Dans le prochain exemple, nous aurons un ensemble de cartes disposées avec du flottement. On a défini une largeur ({{cssxref("width")}}) sur ces cartes afin de pouvoir appliquer le flottement {{cssxref("float")}}. Pour créer des espaces entre les cartes, on utilise une marge ({{cssxref("margin")}}) sur les objets puis une marge négative sur le conteneur.</p>
+
+<div id="enhancement_2">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+  max-width: 600px;
+  margin: 0 auto;
+}
+.wrapper li {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper ul {
+  overflow: hidden;
+  margin: 0 -10px;
+  padding: 0;
+  list-style: none;
+}
+.wrapper li {
+  float: left;
+  width: calc(33.333333% - 20px);
+  margin: 0 10px 20px 10px;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;ul&gt;
+    &lt;li class="card"&gt;
+      &lt;h2&gt;Un&lt;/h2&gt;
+      &lt;p&gt;On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.&lt;/p&gt;
+    &lt;/li&gt;
+    &lt;li class="card"&gt;
+      &lt;h2&gt;Deux&lt;/h2&gt;
+      &lt;p&gt;On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.&lt;/p&gt;
+    &lt;/li&gt;
+    &lt;li class="card"&gt;
+      &lt;h2&gt;Trois&lt;/h2&gt;
+      &lt;p&gt;On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.&lt;/p&gt;
+    &lt;/li&gt;
+    &lt;li class="card"&gt;
+       &lt;h2&gt;Quatre&lt;/h2&gt;
+       &lt;p&gt;On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.&lt;/p&gt;
+    &lt;/li&gt;
+    &lt;li class="card"&gt;
+       &lt;h2&gt;Cinq&lt;/h2&gt;
+       &lt;p&gt;On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.&lt;/p&gt;
+    &lt;/li&gt;
+    &lt;li class="card"&gt;
+      &lt;h2&gt;Six&lt;/h2&gt;
+      &lt;p&gt;On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.&lt;/p&gt;
+    &lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('enhancement_2', '550', '400')}}</p>
+</div>
+
+<p>Dans la capture qui suit, on voit un problème classique qui est causé par les dispositions flottantes : si on ajoute du contenu à l'une des cartes, la disposition est chamboulée.</p>
+
+<p><img alt="A floated cards layout demonstrating the problem caused by uneven content height." src="https://mdn.mozillademos.org/files/14745/10-floated-cards.png" style="height: 536px; width: 550px;"></p>
+
+<p>Pour gérer les anciens navigateurs dans une certaine mesure, on peut indiquer une hauteur minimale pour les boîtes avec {{cssxref("min-height")}} et espérer que les éditeurs n'ajouteront pas trop de contenu dans chaque boîte…</p>
+
+<p>Voyons comment améliorer cette disposition avec une grille : on transforme l'élément {{HTMLElement("ul")}} en un conteneur de grille avec trois pistes en colonne. Malheureusement, la largeur qu'on avait affectée aux éléments de la liste s'applique toujours et désormais, chaque élément de la liste occupe uniquement un tiers de la piste correspondante.</p>
+
+<p><img alt="After applying grid to our container, the width of the items is now incorrect as they display at one third of the item width." src="https://mdn.mozillademos.org/files/14747/10-float-width-problem.png" style="height: 721px; width: 550px;"></p>
+
+<p>Si on réinitialise la largeur avec <code>auto</code>, on n'aura plus le résultat souhaité dans les anciens navigateurs. Il faut donc trouver un moyen de définir la largeur pour les anciens navigateurs et de supprimer la largeur quand le navigateur prend en charge les grilles CSS. Grâce <a href="/fr/docs/Web/CSS/@supports">aux requêtes de fonctionnalité CSS</a>, on peut le faire directement en CSS.</p>
+
+<p>Les requêtes de fonctionnalité ressemblent beaucoup aux <a href="/fr/docs/Web/CSS/Requêtes_média">requêtes de média</a> qu'on utilise pour créer des dispositions adaptatives. Ici, plutôt que de vérifier la largeur de la zone d'affichage ou telle caractéristique du navigateur ou de l'appareil, on vérifie la prise en charge d'une propriété CSS avec une certaine valeur grâce à une règle {{cssxref("@supports")}}. À l'intérieur de cette requête, on peut écrire le CSS nécessaire pour obtenir la nouvelle disposition et retiré tout ce qui est nécessaire pour l'ancienne mise en forme.</p>
+
+<pre class="brush: css">@supports (display: grid) {
+  .wrapper {
+    // ajouter les règles qu'on souhaite
+    // pour les navigateurs qui prennent
+    // en charge les grilles
+  }
+}
+</pre>
+
+<p>La prise en charge des requêtes de fonctionnalité par les différents navigateurs est excellente. Tous les navigateurs qui prennent en charge la nouvelle spécification pour les grilles CSS supportent aussi les requêtes de fonctionnalité. On peut donc les utiliser pour résoudre le problème précédent pour améliorer la disposition flottante.</p>
+
+<p>On utilise donc <code>@supports</code> pour vérifier la prise en charge de <code>display: grid</code>;, ensuite on indique que {{HTMLElement("ul")}} est le conteneur de la grille, on définit la largeur et {{cssxref("min-height")}} avec <code>auto</code> pour les éléments {{HTMLElement("li")}}. On retire également les marges, les marges négatives et on remplace l'espacement avec la propriété {{cssxref("grid-gap")}}. Cela signifie qu'il n'y aura pas de marge finale sur la dernière ligne de boîtes. La disposition fonctionne également  désormais lorsqu'une carte possède plus de contenu qu'une autre.</p>
+
+<div id="enhancement_3">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+  max-width: 600px;
+  margin: 0 auto;
+}
+.wrapper li {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper ul {
+    overflow: hidden;
+    margin: 0 -10px;
+    padding: 0;
+    list-style: none;
+}
+.wrapper li {
+    float: left;
+    width: calc(33.333333% - 20px);
+    margin: 0 10px 20px 10px;
+}
+@supports (display: grid) {
+  .wrapper ul {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 20px;
+    margin: 0;
+  }
+  .wrapper li {
+    width: auto;
+    min-height: auto;
+    margin: 0;
+  }
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;ul&gt;
+    &lt;li class="card"&gt;
+      &lt;h2&gt;Un&lt;/h2&gt;
+      &lt;p&gt;On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.&lt;/p&gt;
+    &lt;/li&gt;
+    &lt;li class="card"&gt;
+      &lt;h2&gt;Deux&lt;/h2&gt;
+      &lt;p&gt;On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.&lt;/p&gt;
+    &lt;/li&gt;
+    &lt;li class="card"&gt;
+      &lt;h2&gt;Trois&lt;/h2&gt;
+      &lt;p&gt;On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.&lt;/p&gt;
+    &lt;/li&gt;
+    &lt;li class="card"&gt;
+       &lt;h2&gt;Quatre&lt;/h2&gt;
+       &lt;p&gt;On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.&lt;/p&gt;
+    &lt;/li&gt;
+    &lt;li class="card"&gt;
+       &lt;h2&gt;Cinq&lt;/h2&gt;
+       &lt;p&gt;On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.&lt;/p&gt;
+    &lt;/li&gt;
+    &lt;li class="card"&gt;
+      &lt;h2&gt;Six&lt;/h2&gt;
+      &lt;p&gt;On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.&lt;/p&gt;
+    &lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('enhancement_3', '550', '480')}}</p>
+</div>
+
+<h2 id="Surcharger_les_autres_valeurs_pour_display">Surcharger les autres valeurs pour <code>display</code></h2>
+
+<p>Étant donné ces problèmes pour créer des grilles d'objets avec du flottement, il est probable que nous aurions choisi un autre méthode initialement, par exemple <code>display: inline-block</code>.</p>
+
+<p>Là encore, on peut utiliser les requêtes de fonctionnalité pour surcharger <code>display: inline-block</code>. Ici aussi, il n'est pas nécessaire de tout surcharger. Pour les éléments concernés par <code>inline-block</code>, ils deviendront des objets de la grille et <code>inline-block</code> ne s'appliquera plus. Dans l'exemple qui suit, on utilise la propriété <code>vertical-align</code> sur les éléments lorsqu'on utilise le mode <code>inline-block</code>, cette propriété n'étant pas appliquée aux éléments d'une grille, elle est ignorée lorsque l'élément devient un objet de la grille.</p>
+
+<div id="enhancement_4">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.wrapper li {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper ul {
+  margin: 0 -10px;
+  padding: 0;
+  list-style: none;
+}
+
+.wrapper li {
+  display: inline-block;
+  vertical-align: top;
+  width: calc(33.333333% - 20px);
+  margin: 0 10px 20px 10px;
+}
+@supports (display: grid) {
+  .wrapper ul {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 20px;
+    margin: 0;
+  }
+  .wrapper li {
+    width: auto;
+    margin: 0;
+  }
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;ul&gt;
+    &lt;li class="card"&gt;
+      &lt;h2&gt;Un&lt;/h2&gt;
+      &lt;p&gt;On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.&lt;/p&gt;
+    &lt;/li&gt;
+    &lt;li class="card"&gt;
+      &lt;h2&gt;Deux&lt;/h2&gt;
+      &lt;p&gt;On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.&lt;/p&gt;
+    &lt;/li&gt;
+    &lt;li class="card"&gt;
+      &lt;h2&gt;Trois&lt;/h2&gt;
+      &lt;p&gt;On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.&lt;/p&gt;
+    &lt;/li&gt;
+    &lt;li class="card"&gt;
+       &lt;h2&gt;Quatre&lt;/h2&gt;
+       &lt;p&gt;On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.&lt;/p&gt;
+    &lt;/li&gt;
+    &lt;li class="card"&gt;
+       &lt;h2&gt;Cinq&lt;/h2&gt;
+       &lt;p&gt;On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.&lt;/p&gt;
+    &lt;/li&gt;
+    &lt;li class="card"&gt;
+      &lt;h2&gt;Six&lt;/h2&gt;
+      &lt;p&gt;On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.&lt;/p&gt;
+    &lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('enhancement_4', '500', '480')}}</p>
+</div>
+
+<p>Ici aussi, il faut reparamétrer la largeur de l'élément puis améliorer les autres propriétés. Dans cet exemple également on a utilisé <code>grid-gap</code> plutôt que des marges et des marges négatives pour créer les « gouttières ».</p>
+
+<h2 id="Comment_la_spécification_gère-t-elle_cette_surcharge">Comment la spécification gère-t-elle cette surcharge ?</h2>
+
+<p>La spécification sur les grilles CSS détaille comment on peu surcharger le comportement de certaines propriétés lorsqu'un élément devient un objet d'une grille. Les sections principales sur ce sujet sont :</p>
+
+<ul>
+ <li><a href="https://drafts.csswg.org/css-grid/#grid-containers">La création de conteneurs de grille (<em>Establishing Grid Containers</em>)</a></li>
+ <li><a href="https://drafts.csswg.org/css-grid/#grid-items">Les objets de la grille (<em>Grid Items</em>)</a></li>
+ <li><a href="https://drafts.csswg.org/css-grid/#grid-item-display">L'affichage d'un objet de la grille (<em>Grid Item Display</em>)</a></li>
+</ul>
+
+<p>Ce comportement est détaillé dans la spécification et on peut donc l'utiliser pour surcharger les règles utilisées pour les navigateurs qui ne prennent pas en charge les grilles CSS. Ce que nous avons appliqué n'est pas une bidouille, on tire simplement parti de l'interaction entre les différents modes de disposition, tel que décrit dans la spécification.</p>
+
+<h3 id="Les_autres_valeurs_de_display">Les autres valeurs de <code> display</code></h3>
+
+<p>Lorsqu'un élément possède un parent pour lequel <code>display: grid</code>, cet élément devient un bloc (cf. <a href="https://drafts.csswg.org/css-display-3/#blockify">la specification</a>). C'est pour cela que, pour l'élément qui utilisait <code>inline-block</code>, <code>display: inline-block</code> ne s'appliquait plus.</p>
+
+<p>Si la disposition historique utilise <code>display: table</code>, un élément avec <code>display: table-cell</code> génèrera des boîtes anonymes. Aussi, si on utilise <code>display: table-cell</code> sans élément parent avec <code>display-table</code>, un tableau implicite sera créé autour des cellules adjacentes (comme si on a avait enveloppé le tout dans un <code>div</code> ou autre pour lequel on aurait défini <code>display: table</code>). Si on a un objet pour lequel <code>display: table-cell</code> et que, dans une requête de fonctionnalité, on utilise <code>display: grid</code> pour l'élément parent, il n'y aura plus de création de boîtes anonymes. Cela signifie qu'on peut surcharger <code>display: table</code> sans avoir ces boîtes anonymes supplémentaires.</p>
+
+<h3 id="Les_éléments_flottants">Les éléments flottants</h3>
+
+<p>Comme nous l'avons déjà vu, {{cssxref("float")}}, ainsi que {{cssxref("clear")}} n'ont aucun effet sur un objet de grille. Il n'est donc pas nécessaire d'utiliser explicitement <code>float: none</code> sur les éléments.</p>
+
+<h3 id="L'alignement_vertical">L'alignement vertical</h3>
+
+<p>La propriété d'alignement {{cssxref("vertical-align")}} n'a aucun effet sur un objet d'une grille. Pour les dispositions qui utilisent <code>display: inline-block</code> ou <code>display: table</code>, la propriété <code>vertical-align</code> était utilisée pour réaliser des alignements basiques. Avec une disposition en grille, on peut utiliser les propriétés d'alignement des boîtes sur la grille, plus puissantes.</p>
+
+<h3 id="La_disposition_sur_plusieurs_colonnes">La disposition sur plusieurs colonnes</h3>
+
+<p>Il est aussi possible de partir d'une disposition sur plusieurs colonnes car les propriétés <code>column-*</code> ne s'appliquent pas sur un conteneur de grille.</p>
+
+<h2 id="Approfondir_la_question">Approfondir la question</h2>
+
+<ul>
+ <li>Pour mieux comprendre comment utiliser les requêtes média en CSS, vous pouvez lire <a href="https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/">cet excellent article de Hacks</a>.</li>
+ <li>Un récapitulatif des différences d'implémentation entre celle utilisée par IE/Edge ≤15 et celle qui décrit la version moderne de la spécification. Cet article évoque également la prise en charge d'<em>autoprefixer</em> : <em><a href="https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/">Should I try to use the IE implementation of CSS Grid Layout?</a></em></li>
+ <li><a href="https://github.com/postcss/autoprefixer#grid-autoplacement-support-in-ie">Autoprefixer et le placement automatique des grilles pour IE</a></li>
+ <li><a href="https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixer">Les grilles CSS et la nouvelle version d'Autoprefixer</a></li>
+</ul>
+
+<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité", "Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition","Web/CSS/CSS_Grid_Layout")}}</p>
diff --git a/files/fr/web/css/css_grid_layout/les_grilles_css_les_valeurs_logiques_les_modes_d_écriture/index.html b/files/fr/web/css/css_grid_layout/les_grilles_css_les_valeurs_logiques_les_modes_d_écriture/index.html
new file mode 100644
index 0000000000..cbc0501498
--- /dev/null
+++ b/files/fr/web/css/css_grid_layout/les_grilles_css_les_valeurs_logiques_les_modes_d_écriture/index.html
@@ -0,0 +1,452 @@
+---
+title: 'Les grilles CSS, les valeurs logiques et les modes d''écriture'
+slug: >-
+  Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture
+tags:
+  - CSS
+  - CSS Grids
+  - Grilles CSS
+  - Guides
+  - Intermédiaire
+translation_of: 'Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes'
+---
+<div>{{CSSRef}}</div>
+
+<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité","Web/CSS/CSS_Grid_Layout")}}</p>
+
+<p>Dans les articles précédents, nous avons évoqué un aspect important de la disposition en grille : la prise en charge des différents modes d'écriture. Dans ce guide, nous nous intéresserons plus particulièrement à cette fonctionnalité ainsi qu'aux autres méthodes modernes de disposition. Cela sera également l'occasion d'en apprendre plus sur les modes d'écritures et la notion de propriété logique/physique.</p>
+
+<h2 id="Les_propriétés_logiques_les_propriétés_physiques_et_les_valeurs">Les propriétés logiques, les propriétés physiques et les valeurs</h2>
+
+<p>CSS possède de nombreux mots-clés qui permettent de positionner <strong>physiquement</strong> les éléments : <code>left</code>, <code>right</code>, <code>top</code>, <code>bottom</code>… Si on positionne un élément de façon absolue, on utilisera ces mots-clés physiques comme valeurs pour indiquer le décalage de l'élément. Dans le fragment de code suivant, l'élément est décalé de 20 pixels depuis le haut du conteneur et de 30 pixels depuis le bord gauche du conteneur.</p>
+
+<pre class="brush:css">.container {
+  position: relative;
+}
+.item {
+  position: absolute;
+  top: 20px;
+  left: 30px;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+  &lt;div class="item"&gt;Item&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>On rencontre également ces mots-clés physiques avec <code>text-align: right</code> afin d'aligner le texte à droite. Il existe aussi des propriétés <strong>physiques</strong> en CSS. On ajoute des marges, du remplissage, des bordures grâces à cs propriétés physiques comme {{cssxref("margin-left")}}, {{cssxref("padding-left")}}, etc.</p>
+
+<p>On qualifie ces propriétés de physiques car elles concernent l'écran qu'on regarde : la gauche sera toujours la gauche, quelle que soit la direction du texte.</p>
+
+<p>Cela peut devenir un problème lorsqu'on développe un site qui doit fonctionner avec plusieurs langues dont certaines sont écrites de droite à gauche et non de gauche à droite. Les navigateurs savent plutôt bien gérer les différentes directions d'écriture. Dans l'exemple qui suit, on a deux paragraphes. Pour le deuxième, aucune propriété {{cssxref("text-align")}} n'est utilisée, alors que pour le second, on utilise <code>text-align</code> avec <code>left</code> et on ajoute <code>dir="rtl"</code> sur l'élément HTML ce qui a pour effet de changer la direction d'écriture. On peut voir que, dans le second paragraphe, la direction change et le texte est écrit de droite à gauche. Dans le premier cependant, avec <code>text-align value: left</code>, l'alignement reste à gauche.</p>
+
+<p><img alt="A simple example of text direction." src="https://mdn.mozillademos.org/files/14733/8_direction_simple_example.png" style="height: 354px; width: 1136px;"></p>
+
+<p>Cela illustre un problème fréquent avec les propriétés et valeurs physiques en CSS : elles empêchent le navigateur de passer correctement d'un mode d'écriture à l'autre.</p>
+
+<h3 id="Les_propriétés_et_valeurs_logiques">Les propriétés et valeurs logiques</h3>
+
+<p>Les propriétés et les valeurs logiques n'émettent pas d'hypothèse quant à la direction du texte. C'est pour cette raison, qu'avec les grilles CSS, on utilise le mot-clé <code>start</code> lorsqu'on souhaite aligner quelque chose au début du conteneur. Quand on travaille en français ou en anglais, <code>start</code> correspondra à la gauche mais ce n'est pas nécessairement toujours le cas, <code>start</code> ne correspond pas à une position physique.</p>
+
+<h2 id="L'axe_de_bloc_et_l'axe_en_ligne">L'axe de bloc et l'axe en ligne</h2>
+
+<p>Lorsqu'on commence à travailler avec les propriétés logiques plutôt qu'avec les propriétés physiques, on cesse de voir le monde comme un espace qui va de gauche à droite et de haut en bas. Il faut de nouveaux axes de références : l'axe de bloc (<em>block axis</em> en anglais) et l'axe en ligne (<em>inline axis</em>). Le premier est l'axe orthogonal au sens d'écriture et le second est l'axe dans lequel on écrit. Ces axes <em>logiques</em> sont très utiles et on comprend mieux leurs rôles sur la grille.</p>
+
+<p><img alt="An image showing the default direction of the Block and Inline Axes." src="https://mdn.mozillademos.org/files/14735/8-horizontal-tb.png" style="height: 256px; width: 500px;"></p>
+
+<h2 id="Les_modes_d'écriture_CSS">Les modes d'écriture CSS</h2>
+
+<p>Nous allons ici aborder une autre spécification que nous allons utiliser dans nos exemples : la spécification CSS sur les modes d'écriture (<em>CSS Writing Modes</em>). Cette spécification régit comment les différents modes d'écriture peuvent être utilisés en CSS, pas seulement pour prendre en charge différentes langues mais aussi pour créer des effets artistiques. Nous allons utiliser la propriété {{cssxref("writing-mode")}} afin de modifier le mode d'écriture appliqué à la grille pour observer comment fonctionnent les valeurs logiques. Si vous souhaitez approfondir ces notions autour des modes d'écriture, vous pouvez consulter l'article <a href="https://24ways.org/2016/css-writing-modes/"><em>CSS Writing Modes</em> (en anglais)</a> écrit par Jen Simmons.</p>
+
+<h3 id="writing-mode"><code>writing-mode</code></h3>
+
+<p>Les modes d'écriture ne se limitent pas à l'écriture de droite à gauche ou de gauche à droite, la propriété <code>writing-mode</code> nous permet d'afficher du texte dans plusieurs directions. La propriété {{cssxref("writing-mode")}} peut prendre les valeurs suivantes :</p>
+
+<ul>
+ <li><code>horizontal-tb</code></li>
+ <li><code>vertical-rl</code></li>
+ <li><code>vertical-lr</code></li>
+ <li><code>sideways-rl</code></li>
+ <li><code>sideways-lr</code></li>
+</ul>
+
+<p>Sur le Web, c'est la valeur <code>horizontal-tb</code> qui est la valeur par défaut pour le texte. C'est dans cette direction que vous lisez cet article. Les autres valeurs changeront la façon dont le texte est écrit sur le document et correspondent aux modes d'écriture utilisés dans d'autres langues. Dans l'exemple qui suit, on a deux paragraphes, le premier utilise la valeur par défaut <code>horizontal-tb</code> et le second utilise la valeur <code>vertical-rl</code>. Dans ce deuxième mode, le texte est toujours écrit de gauche à droite mais la direction du texte est verticale. Dans ce deuxième paragraphe, l'axe en ligne (<em>inline</em>) est donc l'axe vertical.</p>
+
+<div id="writing_1">
+<div class="hidden">
+<pre class="brush: css">.wrapper &gt; p {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  margin: 1em;
+  color: #d9480f;
+  max-width: 300px;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;p style="writing-mode: horizontal-tb"&gt;Mon mode d'écriture est celui par défaut &lt;code&gt;horizontal-tb&lt;/code&gt;&lt;/p&gt;
+  &lt;p style="writing-mode: vertical-rl"&gt;Moi je suis écrit avec &lt;code&gt;vertical-rl&lt;/code&gt;&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('writing_1', '500', '420')}}</p>
+</div>
+
+<h2 id="La_gestion_des_modes_d'écriture_avec_une_grille">La gestion des modes d'écriture avec une grille</h2>
+
+<p>Si on reprend l'exemple avec la grille, on comprend mieux l'effet du changement du mode d'écriture qui change les axes logiques.</p>
+
+<p>Dans le prochain exemple, la grille possède trois colonnes et deux lignes. Cela signifie qu'il y a trois pistes qui traversent l'axe de bloc. Avec le mode d'écriture par défaut, la grille commence par placer les objets en haut à gauche  en remplissant les trois cellules sur la première ligne avant de passer à la suivante, en formant une nouvelle ligne, etc.</p>
+
+<div id="writing_2">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(2, 100px);
+  grid-gap: 10px;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Objet 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Objet 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Objet 3&lt;/div&gt;
+  &lt;div class="item4"&gt;Objet 4&lt;/div&gt;
+  &lt;div class="item5"&gt;Objet 5&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('writing_2', '500', '330')}}</p>
+</div>
+
+<p>Si on ajoute <code>writing-mode: vertical-lr</code> au conteneur de la grille, on peut voir que les axes logiques s'appliquent désormais dans une autre direction. L'axe de bloc (aussi appelé l'axe des colonnes pour la grille) s'étend maintenant de gauche à droite et l'axe en ligne court verticalement.</p>
+
+<div id="writing_3">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  writing-mode: vertical-lr;
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(2, 100px);
+  grid-gap: 10px;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Objet 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Objet 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Objet 3&lt;/div&gt;
+  &lt;div class="item4"&gt;Objet 4&lt;/div&gt;
+  &lt;div class="item5"&gt;Objet 5&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('writing_3', '500', '330')}}</p>
+</div>
+
+<p><img alt="A image showing the direction of Block and Inline when writing-mode is vertical-lr" src="https://mdn.mozillademos.org/files/14737/8-vertical-lr.png" style="height: 360px; width: 257px;"></p>
+
+<h2 id="L'utilisation_de_valeurs_logiques_pour_l'alignement">L'utilisation de valeurs logiques pour l'alignement</h2>
+
+<p>Dans les exemples précédents, on a vu comment les axes de bloc et en ligne pouvaient changer de direction, nous allons voir maintenant comment tirer partir des valeurs logiques des propriétés d'alignement.</p>
+
+<p>Dans le prochain exemple, on aligne des objets dans une grille pour laquelle <code>writing-mode: vertical-lr</code>. Les valeurs <code>start</code> et <code>end</code> fonctionnent de la même façon qu'avec le mode d'écriture par défaut mais, parce qu'elles sont logiques, on voit que la grille est bien renversée.</p>
+
+<div id="writing_4">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  writing-mode: vertical-lr;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 100px);
+  grid-gap: 10px;
+}
+
+.item1 {
+  grid-column: 1 / 4;
+  align-self: start;
+}
+
+.item2 {
+  grid-column: 1 / 3;
+  grid-row: 2 / 4;
+  align-self: start;
+}
+
+.item3 {
+  grid-column: 3;
+  grid-row: 2 / 4;
+  align-self: end;
+  justify-self: end;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Objet 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Objet 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Objet 3&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('writing_4', '500', '330')}}</p>
+</div>
+
+<p>Si vous souhaitez voir l'effet obtenu avec une écriture verticale de haut en bas et de droite à gauche, il suffit de passer de <code>vertical-lr</code> à <code>vertical-rl</code> pour changer de mode d'écriture.</p>
+
+<h2 id="Le_placement_automatique_et_les_modes_d'écriture">Le placement automatique et les modes d'écriture</h2>
+
+<p>On a vu dans l'exemple précédent que lorsqu'on changeait de mode d'écriture, cela changeait également la direction selon laquelle les éléments étaient placés sur la grille. Par défaut, les éléments sont placés en progressant sur l'axe en ligne, jusqu'à la fin de la ligne, une nouvelle ligne est ensuite créée si besoin mais cette ligne ne progresse pas nécessairement de gauche à droite.</p>
+
+<h2 id="Le_placement_sur_les_lignes_et_les_modes_d'écriture">Le placement sur les lignes et les modes d'écriture</h2>
+
+<p>Il faut garder à l'esprit que lorsqu'on place des objets sur les lignes, la ligne 1 sera toujours la ligne de départ, quel que soit le mode d'écriture et la ligne -1 sera toujours la ligne de fin.</p>
+
+<p>Dans l'exemple suivant, on a une grille avec la direction <code>ltr</code> et on positionne trois objets en utilisant le placement sur les lignes.</p>
+
+<ul>
+ <li>L'objet 1 commence à la colonne 1 et occupe une piste</li>
+ <li>L'objet 2 commence à la colonne -1 et occupe -3 pistes</li>
+ <li>L'objet 3 commence à la colonne 1 et s'étend jusqu'à la troisième colonne.</li>
+</ul>
+
+<div id="writing_5">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(2, 100px);
+  grid-gap: 10px;
+}
+.item1 {
+  grid-column: 1 ;
+}
+.item2 {
+  grid-column: -1 / -3;
+}
+.item3 {
+  grid-column: 1 / 3;
+  grid-row: 2;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Objet 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Objet 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Objet 3&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('writing_5', '500', '330')}}</p>
+</div>
+
+<p>Si on ajoute alors la propriété {{cssxref("direction")}} avec la valeur <code>rtl</code> pour le conteneur de la grille, la colonne 1 sera la plus à droite et la colonne 1 sera à gauche.</p>
+
+<div id="writing_6">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  direction: rtl;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(2, 100px);
+  grid-gap: 10px;
+}
+.item1 {
+  grid-column: 1 ;
+}
+.item2 {
+  grid-column: -1 / -3;
+}
+.item3 {
+  grid-column: 1 / 3;
+  grid-row: 2;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Objet 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Objet 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Objet 3&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('writing_6', '500', '330')}}</p>
+</div>
+
+<p>On voit ici que si on change la direction du texte pour la page ou pour une partie de la page : la disposition change selon lees numéros de lignes. Si on ne veut pas que les lignes bougent, on pourra utiliser des lignes nommées pour éviter cet effet.</p>
+
+<h3 id="L'étrange_ordre_des_valeurs_pour_grid-area">L'étrange ordre des valeurs pour <code>grid-area</code></h3>
+
+<p>La propriété {{cssxref("grid-area")}} permet d'indiquer les quatre lignes qui définissent une zone. Lorsqu'on apprend à utiliser cette propriété, on se surprend à voir que les quatre valeurs ne suivent pas le même ordre que celui utilisé par les propriétés raccourcies pour les marges (pour celles-ci, les valeurs suivent le sens horaire : haut, droit, bas, gauche).</p>
+
+<p>Pour les valeurs de <code>grid-area</code>, l'ordre est le suivant :</p>
+
+<ul>
+ <li><code>grid-row-start</code></li>
+ <li><code>grid-column-start</code></li>
+ <li><code>grid-row-end</code></li>
+ <li><code>grid-column-end</code></li>
+</ul>
+
+<p>Si on transpose ces valeurs à un système d'écriture de gauche à droite, cela correspond aux valeurs physiques suivantes :</p>
+
+<ul>
+ <li><code>top</code></li>
+ <li><code>left</code></li>
+ <li><code>bottom</code></li>
+ <li><code>right</code></li>
+</ul>
+
+<p>Ce qui correspond… au sens anti-horaire ! L'ordre est l'inverse de celui utilisé pour les marges et le remplissage. Pour comprendre, mieux vaut voir la propriété <code>grid-area</code> comme une propriété logique qui fonctionne selon les axes de bloc et en ligne : on commence donc avec les deux lignes de départ puis les deux lignes d'arrivée. Cet ordre est plus « logique » !</p>
+
+<h2 id="Utiliser_des_modes_d'écriture_hybrides_et_les_grilles_CSS">Utiliser des modes d'écriture hybrides et les grilles CSS</h2>
+
+<p>Les modes d'écritures permettent d'afficher les documents en respectant les règles d'affichage de la langue utilisé. On peut également les utiliser afin de créer des effets stylistiques. Dans l'exemple ci-après, on a une grille avec du texte et des liens qui seront affichés verticalement, à côté du texte.</p>
+
+<div id="writing_7">
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-gap: 20px;
+  grid-template-columns: 1fr auto;
+  font: 1em Helvetica, Arial, sans-serif;
+}
+.wrapper nav {
+  writing-mode: vertical-lr;
+}
+.wrapper ul {
+  list-style: none;
+  margin: 0;
+  padding: 1em;
+  display: flex;
+  justify-content: space-between;
+}
+.wrapper a {
+  text-decoration: none;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="content"&gt;
+    &lt;p&gt;Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.&lt;/p&gt;
+    &lt;p&gt;Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify.&lt;/p&gt;
+  &lt;/div&gt;
+  &lt;nav&gt;
+    &lt;ul&gt;
+      &lt;li&gt;&lt;a href=""&gt;Lien 1&lt;/a&gt;&lt;/li&gt;
+      &lt;li&gt;&lt;a href=""&gt;Lien 2&lt;/a&gt;&lt;/li&gt;
+      &lt;li&gt;&lt;a href=""&gt;Lien 3&lt;/a&gt;&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/nav&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('writing_7', '500', '330')}}</p>
+</div>
+
+<h2 id="Les_valeurs_physiques_et_les_grilles_CSS">Les valeurs physiques et les grilles CSS</h2>
+
+<p>On rencontre souvent les propriétés physiques lorsqu'on construit un site web et, bien que la grille et les propriétés logiques permettent de respecter les modes d'écriture, il existe certains effets qui ne peuvent être obtenus qu'avec des propriétés et des valeurs physiques. Dans le guide sur <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">l'alignement des boîtes et les grilles</a>, nous avons vu comment utiliser les marges automatiques sur les zones d'une grille. Utiliser les marges automatiques pour contraindre le placement d'un élément est une astuce qu'on rencontre aussi avec les boîtes flexibles mais cela couple la disposition avec l'espace physique.</p>
+
+<p>Si on utilise le positionnement absolu dans une zone d'une grille, là encore, on utilisera des décalages physiques pour décaler l'élément au sein de la zone. Dans ces cas, il faut être conscient du couplage qu'on ajoute avec l'espace physique et comprendre qu'il faudra adapter la feuille de style si on veut par exemple passer d'un mode <code>ltr</code> à un mode <code>rtl</code>.</p>
+
+<h3 id="Utiliser_les_propriétés_logiques_partout">Utiliser les propriétés logiques partout</h3>
+
+<p>Les nouvelles méthodes de disposition, comme les grilles, permettent d'employer les valeurs logiques afin de placer les éléments. Cependant, dès qu'on combine ces valeurs avec des propriétés physiques, il faut maintenir ces dernières lorsque le mode d'écriture change.</p>
+
+<p>La <a href="https://drafts.csswg.org/css-logical-props/">spécification sur les propriétés logiques en CSS</a> vise à résoudre ce problème. Nous pourrons peut-être utiliser demain des <a href="/fr/docs/Web/CSS/CSS_Logical_Properties">équivalents logiques</a> pour chacune des propriétés physiques telles que {{cssxref("margin-left")}} et {{cssxref("margin-right")}}. Firefox a déjà implémenté ces propriétés logiques et vous pouvez les y tester. En utilisant les grilles et en manipulant l'axe de bloc et l'axe de ligne, vous saurez également comment fonctionnent ces propriétés logiques à venir.</p>
+
+<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité","Web/CSS/CSS_Grid_Layout")}}</p>
diff --git a/files/fr/web/css/css_grid_layout/modèle_de_grille_et_autres_modèles_de_disposition/index.html b/files/fr/web/css/css_grid_layout/modèle_de_grille_et_autres_modèles_de_disposition/index.html
new file mode 100644
index 0000000000..9f31864e55
--- /dev/null
+++ b/files/fr/web/css/css_grid_layout/modèle_de_grille_et_autres_modèles_de_disposition/index.html
@@ -0,0 +1,588 @@
+---
+title: Le modèle de grille et les autres modèles de disposition
+slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition
+tags:
+  - CSS
+  - CSS Grids
+  - Guide
+  - Intermédiaire
+translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
+---
+<div>{{CSSRef}}</div>
+
+<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive", "Web/CSS/CSS_Grid_Layout/Construire_des_dispositions_courantes_avec_des_grilles_CSS","Web/CSS/CSS_Grid_Layout")}}</p>
+
+<p>Le mode de disposition en grille a été conçu afin de pouvoir fonctionner avec les autres composantes de CSS pour construire un système complet de disposition. Dans ce guide, nous expliquerons comment intégrer une grille CSS parmi d'autres techniques que vous pourriez déjà utiliser.</p>
+
+<h2 id="Les_grilles_et_les_boîtes_flexibles_flexbox">Les grilles et les boîtes flexibles (<em>flexbox</em>)</h2>
+
+<p>La différence fondamentale, entre les grilles et <a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS">les boîtes flexibles CSS</a>, est que les boîtes flexibles permettent d'organiser du contenu sur une dimension (sur une ligne ou sur une colonne). Les grilles ont été conçues pour une organisation bi-dimensionnelle. Les deux spécifications partagent cependant quelques points communs et si vous savez utiliser les boîtes flexibles, vous retrouverez quelques concepts qui vous aideront à appréhender les grilles CSS.</p>
+
+<h3 id="Disposition_sur_une_dimension_ou_sur_deux_dimensions">Disposition sur une dimension ou sur deux dimensions</h3>
+
+<p>Voyons un exemple simple pour illustrer la différence entre une disposition sur un seul axe et une disposition sur deux axes.</p>
+
+<p>Dans le premier exemple, on utilise un boîte flexible pour organiser un ensemble de boîte. Le conteneur contient 5 objets fils et on utilise des propriétés afin qu'ils puissent être agrandis/rétrécis avec une base (<code>flex-basis</code>) de 150 pixels.</p>
+
+<p>On utilise aussi la propriété {{cssxref("flex-wrap")}} avec la valeur <code>wrap</code>, afin de créer une nouvelle ligne si le conteneur devient trop étroit pour conserver <code>flex-basis</code>.</p>
+
+<div id="onedtwod">
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div&gt;Un&lt;/div&gt;
+  &lt;div&gt;Deux&lt;/div&gt;
+  &lt;div&gt;Trois&lt;/div&gt;
+  &lt;div&gt;Quatre&lt;/div&gt;
+  &lt;div&gt;Cinq&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.wrapper {
+  width: 500px;
+  display: flex;
+  flex-wrap: wrap;
+}
+.wrapper &gt; div {
+  flex: 1 1 150px;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('onedtwod', '500', '230')}}</p>
+
+<p>On peut voir ici que deux objets sont passés sur une nouvelle ligne. Ces objets partagent l'espace disponible sur cette nouvelle ligne et ne s'alignent pas par rapport aux objets de la ligne au-dessus. En effet, lorsque des éléments flexibles passent sur une nouvelle ligne (ou colonne), celle-ci forme un nouveau conteneur et l'espace de ce conteneur est distribué entre les objets.</p>
+
+<p>On se demande alors comment faire pour aligner ces éléments… C'est là qu'intervient la disposition en deux dimensions, pour contrôler l'alignement des lignes et des colonnes : voici la grille.</p>
+
+<h3 id="La_même_disposition_avec_une_grille_CSS">La même disposition avec une grille CSS</h3>
+
+<p>Dans cet exemple, on crée la même disposition en utilisant la grille CSS. Ici, on a trois pistes <code>1fr</code>. Il n'est pas nécessaire de paramétrer quoi que ce soit sur les objets, ils se disposeront eux-mêmes dans chaque cellule formée par la grille. On peut alors voir que les objets restent dans une grille stricte, avec les lignes et les colonnes qui sont alignées. Avec cinq éléments, on a donc un espace restant à la fin de la deuxième ligne.</p>
+
+<div class="Two_Dimensional_With_Grid">
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div&gt;Un&lt;/div&gt;
+  &lt;div&gt;Deux&lt;/div&gt;
+  &lt;div&gt;Trois&lt;/div&gt;
+  &lt;div&gt;Quatre&lt;/div&gt;
+  &lt;div&gt;Cinq&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+</pre>
+
+<p>{{EmbedLiveSample('Two_Dimensional_With_Grid', '300', '170')}}</p>
+</div>
+
+<p>Lorsqu'il s'agit de choisir entre les grilles ou les boîtes flexibles, vous pouvez vous poser les questions suivantes :</p>
+
+<ul>
+ <li>Ai-je uniquement besoin de contrôler la disposition selon des colonnes <strong>ou</strong> selon des lignes ? Si oui, mieux vaudra utiliser des boîtes flexibles.</li>
+ <li>Ai-je besoin de contrôler la disposition selon des colonnes <strong>et</strong> selon des lignes ? Si oui, mieux vaudra utiliser une grille CSS.</li>
+</ul>
+
+<h3 id="Organiser_lespace_ou_organiser_le_contenu">Organiser l'espace ou organiser le contenu ?</h3>
+
+<p>En plus de la distinction sur le nombre de dimensions, on peut prendre un autre angle de vue pour choisir entre les boîtes flexibles et les grilles. Les boîtes flexibles permettent de répartir l'espace de façon équitable autour des éléments d'un conteneur. C'est la taille du contenu qui détermine l'espace occupé par chacun des éléments. Si les objets passent sur une nouvelle ligne, leur espacement sera calculé en fonction de leurs tailles et de l'espace disponible sur cette ligne.</p>
+
+<p>En revanche, les grilles organisent le contenu dans l'espace. Lorsqu'on utilise les grilles CSS, on crée un « plan » et on place les éléments sur ce plan (ou on indique un placement automatique, strict, sur cette grille). Il est possible de créer des pistes (<em>tracks</em>) qui réagissent à la taille du contenu mais cela modifierait alors l'ensemble de la piste.</p>
+
+<p>Si vous utilisez les boîtes flexibles et souhaitez bloquer certains des aspects autour de la flexibilité, vous aurez probablement besoin d'une grille CSS. Par exemple, si vous définissez un objet flexible avec un pourcentage en largeur pour aligner l'objet avec les éléments du dessus, une grille pourrait être plus adaptée.</p>
+
+<h3 id="Lalignement_des_boîtes">L'alignement des boîtes</h3>
+
+<p>Une des fonctionnalités les plus attendues pour les boîtes flexibles était celle qui permettait enfin de contrôler l'alignement correctement. On pouvait simplement centrer une boîte sur une page. Les éléments flexibles pouvaient être étirés en hauteur dans leurs conteneurs et on pouvait donc obtenir des colonnes avec des hauteurs égales. Il était désormais possible d'éviter des contournements pour obtenir ce résultat.</p>
+
+<p>Les propriétés d'alignement ont été ajoutées à la spécification pour les boîtes flexibles dans une nouvelle spécification intitulée <em><a href="https://drafts.csswg.org/css-align/">Box Alignment Level 3</a></em>. Cela signifie qu'elles peuvent être utilisées dans d'autres modules, y compris dans les grilles CSS. À l'avenir, elles pourront éventuellement s'appliquer aux autres méthodes de disposition.</p>
+
+<p>Dans un autre article de cette série, nous verrons comment utiliser l'alignement des boîtes dans une disposition en grille. Pour le moment, voici un exemple simple qui permet de comparer les boîtes flexibles et les grilles.</p>
+
+<p>Dans le premier exemple, on utilise les boîtes flexibles avec un conteneur qui dispose de trois objets. La propriété {{cssxref("min-height")}} est définie et paramètre la hauteur du conteneur flexible. {{cssxref("align-items")}} vaut <code>flex-end</code> pour le conteneur flexible et les objets s'empileront donc jusqu'à l'extrémité du conteneur flexible. On utilise également la propriété {{cssxref("align-self")}} sur <code>box1</code> afin de surcharger la valeur par défaut et d'étirer jusqu'à la hauteur du conteneur et jusqu'à <code>box2</code> afin que <code>box1</code> soit alignée avec le début du conteneur flexible.</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;Un&lt;/div&gt;
+  &lt;div class="box2"&gt;Deux&lt;/div&gt;
+  &lt;div class="box3"&gt;Trois&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: flex;
+  align-items: flex-end;
+  min-height: 200px;
+}
+.box1 {
+  align-self: stretch;
+}
+.box2 {
+  align-self: flex-start;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Box_alignment', '300', '230')}}</p>
+
+<h3 id="Lalignement_sur_les_grilles_CSS">L'alignement sur les grilles CSS</h3>
+
+<p>Dans cet exemple, on utilise une grille pour créer la même disposition. Cette fois on utilise les propriétés d'alignement des boîtes. On aligne donc par rapport à <code>start</code> et <code>end</code> plutôt que par rapport à <code>flex-start</code> et <code>flex-end</code>. Dans le cas d'une disposition en grille, on aligne les éléments à l'intérieur de leur zone de grille. Dans ce cas, il s'agit d'une seule cellule mais on pourrait très bien construire une zone composée de plusieurs cellules.</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;Un&lt;/div&gt;
+  &lt;div class="box2"&gt;Deux&lt;/div&gt;
+  &lt;div class="box3"&gt;Trois&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3,1fr);
+  align-items: end;
+  grid-auto-rows: 200px;
+}.box1 {
+  align-self: stretch;
+}
+.box2 {
+  align-self: start;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Alignment_in_CSS_Grids', '200', '310')}}</p>
+
+<h3 id="Lunité_fr_et_flex-basis">L'unité <code>fr</code> et <code>flex-basis</code></h3>
+
+<p>On a vu avant l'unité <code>fr</code> qui permet d'affecter aux pistes de la grille une portion de l'espace disponible dans le conteneur. L'unité <code>fr</code>, lorsqu'elle est combinée avec la fonction {{cssxref("minmax()", "minmax()")}} permet d'obtenir un comportement proche des propriétés <code>flex</code> utilisées pour les boîtes flexibles, tout en permettant de créer une disposition sur deux dimensions.</p>
+
+<p>Si on revient sur l'exemple illustrant la différence entre une disposition à une dimension et une disposition à deux dimensions. On voit qu'il y a une différence sur la façon dont les deux dispositions fonctionnent en mode <em>responsive</em> (lorsque les dimensions de la zone d'affichage varient). Avec la disposition flexible, si on redimensionne la disposition ajustera le nombre d'éléments sur chaque ligne en fonction de l'espace disponible. S'il y a beaucoup d'espace, les cinq éléments pourront tenir sur une seule ligne et si l'espace est réduit, on pourra avoir jusqu'à un seul élément par ligne.</p>
+
+<p>En revanche, avec la grille, on a toujours trois pistes qui forment trois colonnes. Les pistes s'élargiront ou se rétrécieront mais il y en aura toujours trois car c'est le nombre de pistes déclaré à la définition de la grille.</p>
+
+<h4 id="Des_pistes_qui_se_remplissent_automatiquement">Des pistes qui se remplissent automatiquement</h4>
+
+<p>On peut créer un effet semblable aux boîtes flexibles tout en gardant l'arrangement en lignes et colonnes grâce à la notation <code>repeat</code> et aux propriétés <code>auto-fill</code> et <code>auto-fit</code>.</p>
+
+<p>Dans l'exemple qui suit, on utilise le mot-clé <code>auto-fill</code> à la place d'un entier dans la fonction <code>repeat</code> et on définit la taille d'une piste à 200 pixels. Cela signifie que la grille créera autant de pistes de 200 pixels en colonnes qu'il est possible d'en placer dans le conteneur.</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div&gt;Un&lt;/div&gt;
+  &lt;div&gt;Deux&lt;/div&gt;
+  &lt;div&gt;Trois&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 200px);
+}
+</pre>
+
+<p>{{EmbedLiveSample('Auto-filling_grid_tracks', '500', '170')}}</p>
+
+<h3 id="Avoir_un_nombre_de_pistes_flexible">Avoir un nombre de pistes flexible</h3>
+
+<p>L'exemple précédent ne se comporte pas comme celui avec les boîtes flexibles. Dans l'exemple avec les boîtes flexibles, les objets qui sont plus larges que la base de 200 pixels avant de passer à la ligne. On peut obtenir le même effet sur une grille en combinant le mot-clé <code>auto-fill</code> et la fonction {{cssxref("minmax()", "minmax()")}}.</p>
+
+<p>Dans l'exemple qui suit, on crée des pistes qui sont remplies automatiquement avec <code>minmax</code>. On souhaite que les pistes mesurent au moins 200 pixels, avec un maximum de <code>1fr</code>. Lorsque le navigateur a calculé la quantité de colonnes qui tiendraient dans le conteneur (en tenant compte des espaces), il utilisera le maximum <code>1fr</code> afin de répartir l'espace restant entre les objets.</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div&gt;Un&lt;/div&gt;
+  &lt;div&gt;Deux&lt;/div&gt;
+  &lt;div&gt;Trois&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+}
+</pre>
+
+<p>{{EmbedLiveSample('A_flexible_number_of_tracks', '500', '170')}}</p>
+
+<p>On peut désormais créer une grille qui dispose d'un nombre flexible de pistes, elles-mêmes flexibles tout en ayant des éléments qui sont disposés sur la grille par rapport à des lignes et à des colonnes.</p>
+
+<h2 id="Les_grilles_et_les_éléments_positionnés_de_façon_absolue">Les grilles et les éléments positionnés de façon absolue</h2>
+
+<p>La grille peut interagir avec les éléments positionnés de façon absolue. Cela peut s'avérer utile si on souhaite positionner un élément dans une grille ou dans une zone donnée de la grille. La spécification définit le comportement lorsqu'une grille est un bloc englobant et que la grille est le parent d'un élément positionné de façon absolue.</p>
+
+<h3 id="Avoir_une_grille_comme_bloc_englobant">Avoir une grille comme bloc englobant</h3>
+
+<p>Pour qu'une grille soit un bloc englobant, il faut utiliser la propriété <code>position</code> avec la valeur <code>relative</code> (comme on ferait pour un bloc classique). Une fois que c'est fait, si on utilise <code>position:</code> <code>absolute</code> sur un objet de la grille, son bloc englobant sera la grille. Si l'élément a une position donnée sur la grille, le conteneur sera la zone de la grille sur laquelle il est placé.</p>
+
+<p>Dans l'exemple ci-après, on a un conteneur avec quatre enfants. Le troisième élément est positionné en absolu et est placé sur la grille. La grille, le conteneur, a <code>position:</code> <code>relative</code> et devient donc le contexte de positionnement pour cet objet.</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;Un&lt;/div&gt;
+  &lt;div class="box2"&gt;Deux&lt;/div&gt;
+  &lt;div class="box3"&gt;
+    Ce bloc est positionné de façon absolue. Dans cet exemple
+    la grille est le bloc englobant et les valeurs de décalage
+    pour la position sont calculées depuis les bords extérieurs
+    de la zone dans laquelle a été placé l'élément.
+  &lt;/div&gt;
+  &lt;div class="box4"&gt;Quatre&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4,1fr);
+  grid-auto-rows: 200px;
+  grid-gap: 20px;
+  position: relative;
+}
+.box3 {
+  grid-column-start: 2;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  position: absolute;
+  top: 40px;
+  left: 40px;
+}
+</pre>
+
+<p>{{EmbedLiveSample('A_grid_container_as_containing_block', '500', '330')}}</p>
+
+<p>On peut voir que l'élément prend la zone de la grille entre les lignes 2 et 4, après la ligne 1. Ensuite, il est décalé dans cette zone grâce aux propriétés <code>top</code> et <code>left</code>. Toutefois, il a été retiré du flux, comme d'habitude pour les éléments positionnés en absolu et les règles de placement automatique placent des objets dans la même zone. L'objet n'entraîne pas non plus la création d'une ligne supplémentaire sur la ligne 3.</p>
+
+<p>Si on retire <code>position:</code> <code>absolute</code> des règles sur <code>.box3</code>, on peut voir le résultat qu'on aurait obtenu sans ce positionnement absolu.</p>
+
+<h3 id="Utiliser_une_grille_comme_parent">Utiliser une grille comme parent</h3>
+
+<p>Si l'élément positionné de façon absolue est contenue dans une grille mais que celle-ci ne crée pas de nouveau contexte de positionnement, l'élément sera retiré du flux comme dans l'exemple précédent. Les contextes de positionnement sont créés comme avec les autres méthodes de disposition. Dans l'exemple, si on retire <code>position:</code> <code>relative</code> dans le code précédent, le contexte de positionnement est fourni par la zone d'affichage (le <em>viewport</em>) :</p>
+
+<p><img alt="Image of grid container as parent" src="https://mdn.mozillademos.org/files/14661/2_abspos_example.png" style="height: 408px; width: 1702px;"></p>
+
+<p>Là encore, l'élément ne participe plus à la disposition de la grille pour le dimensionnement ou pour le placement des autres éléments.</p>
+
+<h3 id="Utiliser_une_zone_de_grille_comme_parent">Utiliser une zone de grille comme parent</h3>
+
+<p>Si l'élément positionné de façon absolu est imbriqué dans une zone de la grille, on peut créer un contexte de positionnement pour cette zone. Dans l'exemple qui suit, on utilise la même grille qu'avant sauf que l'élément est imbriqué dans la zone <code>.box3</code> de la grille.</p>
+
+<p>On indique que <code>.box3</code> a une position relative puis on positionne l'élément avec des propriétés de décalage. Dans ce cas, le contexte de positionnement est la zone de la grille.</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;Un&lt;/div&gt;
+  &lt;div class="box2"&gt;Deux&lt;/div&gt;
+  &lt;div class="box3"&gt;Trois
+    &lt;div class="abspos"&gt;
+      Ce bloc est positionné de façon absolue. Dans cet exemple
+      la zone de la grille est le bloc englobant et le positionnement
+      est calculé à partir des bords de la zone de la grille.
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="box4"&gt;Quatre&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4,1fr);
+  grid-auto-rows: 200px;
+  grid-gap: 20px;
+}
+.box3 {
+  grid-column-start: 2;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  position: relative;
+}
+.abspos {
+  position: absolute;
+  top: 40px;
+  left: 40px;
+  background-color: rgba(255,255,255,.5);
+  border: 1px solid rgba(0,0,0,0.5);
+  color: #000;
+  padding: 10px;
+}
+</pre>
+
+<p>{{EmbedLiveSample('With_a_grid_area_as_the_parent', '500', '420')}}</p>
+
+<h2 id="Utiliser_une_grille_et_display_contents">Utiliser une grille et <code>display:</code> <code>contents</code></h2>
+
+<p>Une autre combinaison notable, en termes de disposition, peut être l'utilisation de <code>display:</code> <code>contents</code> avec les grilles CSS. La valeur <code>contents</code> de la propriété {{cssxref("display")}} est une nouvelle valeur, décrite comme suit dans la <a href="https://drafts.csswg.org/css-display/#box-generation">spécification Display</a> :</p>
+
+<blockquote>
+<p>L'élément même ne génère aucune boîte mais ses éléments fils, ainsi que les pseudo-éléments, génèrent des boîtes normales. Afin de générer les boîtes et la disposition, l'élément doit être traité comme s'il avait été remplacé par ses éléments fils et ses pseudo-éléments dans l'arbre du document.</p>
+</blockquote>
+
+<p>Si on utilise <code>display:</code> <code>contents</code> sur un élément, la boîte qu'il aurait normalement créé disparaîtra et les boîtes des éléments qui sont ses enfants apparaîtront comme si elles avaient grimpé d'un niveau. Cela signifie que les éléments fils d'un élément d'une grille peuvent, à leur tour, devenir des éléments de cette grille. Un peu perdu-e ? Voici un exemple. Dans le code qui suit, on a une grille dont le premier élément s'étend sur les trois pistes. Cet élément contient trois éléments imbriqués. Ces derniers n'étant pas des enfants directs de la grille, ils ne s'inscrivent pas dans la disposition en grille et sont affichés avec la disposition classique.</p>
+
+<div id="Display_Contents_Before">
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.box {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+.nested {
+  border: 2px solid #ffec99;
+  border-radius: 5px;
+  background-color: #fff9db;
+  padding: 1em;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="box box1"&gt;
+    &lt;div class="nested"&gt;a&lt;/div&gt;
+    &lt;div class="nested"&gt;b&lt;/div&gt;
+    &lt;div class="nested"&gt;c&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="box box2"&gt;Deux&lt;/div&gt;
+  &lt;div class="box box3"&gt;Trois&lt;/div&gt;
+  &lt;div class="box box4"&gt;Quatre&lt;/div&gt;
+  &lt;div class="box box5"&gt;Cinq&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+}
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+}
+
+</pre>
+
+<p>{{EmbedLiveSample('Display_Contents_Before', '400', '420')}}</p>
+</div>
+
+<p>Si on ajoute <code>display:</code> <code>contents</code> aux règles qui ciblent <code>box1</code>, la boîte de cet élément disparaîtra et ses sous-éléments deviendront alors des éléments de la grille qui se placeront selon les règles de placement automatiques pour la grille.</p>
+
+<div id="Display_Contents_After">
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.box {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+.nested {
+  border: 2px solid #ffec99;
+  border-radius: 5px;
+  background-color: #fff9db;
+  padding: 1em;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="box box1"&gt;
+    &lt;div class="nested"&gt;a&lt;/div&gt;
+    &lt;div class="nested"&gt;b&lt;/div&gt;
+    &lt;div class="nested"&gt;c&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="box box2"&gt;Deux&lt;/div&gt;
+  &lt;div class="box box3"&gt;Trois&lt;/div&gt;
+  &lt;div class="box box4"&gt;Quatre&lt;/div&gt;
+  &lt;div class="box box5"&gt;Cinq&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+}
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  display: contents;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Display_Contents_After', '400', '330')}}</p>
+</div>
+
+<p>Cela permet que des éléments imbriqués agissent comme s'ils faisaient partie de la grille. C'est également une méthode de contournement pour certains problèmes qui seront résolus par les « sous-grilles » (<em>subgrids</em>) lorsqu'elles seront implémentées. Vous pouvez également utiliser <code>display:</code> <code>contents</code> de façon similaire avec les boîtes flexibles afin que les éléments imbriqués deviennent des éléments flexibles.</p>
+
+<p>Comme on a pu le voir dans cet article, la disposition avec les grilles CSS n'est qu'un outil parmi d'autres. Il ne faut pas hésiter à combiner différentes méthodes de disposition afin d'obtenir les résultats souhaités.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Guides sur <em>Flexbox</em></a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Columns">Guides sur la disposition multi-colonnes</a></li>
+</ul>
+
+<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive", "Web/CSS/CSS_Grid_Layout/Construire_des_dispositions_courantes_avec_des_grilles_CSS","Web/CSS/CSS_Grid_Layout")}}</p>
diff --git a/files/fr/web/css/css_grid_layout/placement_automatique_sur_une_grille_css/index.html b/files/fr/web/css/css_grid_layout/placement_automatique_sur_une_grille_css/index.html
new file mode 100644
index 0000000000..980b03ea62
--- /dev/null
+++ b/files/fr/web/css/css_grid_layout/placement_automatique_sur_une_grille_css/index.html
@@ -0,0 +1,569 @@
+---
+title: Le placement automatique sur une grille CSS
+slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS
+tags:
+  - CSS
+  - CSS Grids
+  - Grilles CSS
+  - Guide
+  - Intermédiaire
+translation_of: Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout
+---
+<div>{{CSSRef}}</div>
+
+<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille", "Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS","Web/CSS/CSS_Grid_Layout")}}</p>
+
+<p>En plus de pouvoir placer des objets de façon précise sur une grille, la spécification pour les grilles CSS définit le comportement obtenu lorsque certains des objets ne sont pas placés sur la grille (voire aucun). Pour voir comment fonctionne le placement automatique, il suffit de créer une grille avec un ensemble d'objets. Sans fournir aucune information de placement, ces objets se placeront chacun sur une cellule de la grille.</p>
+
+<div id="placement_1">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div&gt;Un&lt;/div&gt;
+  &lt;div&gt;Deux&lt;/div&gt;
+  &lt;div&gt;Trois&lt;/div&gt;
+  &lt;div&gt;Quatre&lt;/div&gt;
+  &lt;div&gt;Cinq&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('placement_1', '500', '230')}}</p>
+</div>
+
+<h2 id="Définir_des_règles_pour_le_placement_automatique">Définir des règles pour le placement automatique</h2>
+
+<p>Comme on peut le voir dans l'exemple précédent, si on crée une grille sans définir de placement, tous les objets occuperont chacun une cellule de la grille. Par défaut, les objets sont placés au fur et à mesure sur les lignes horizontales de la grille. Si on a créé des lignes supplémentaires avec <code>grid-template-rows</code>, les objets suivants seront placés sur ces lignes. En revanche, si la grille ne possède pas suffisamment de lignes sur la grille explicite, de nouvelles lignes, implicites, seront créées.</p>
+
+<h3 id="Dimensionner_les_lignes_de_la_grille_implicite">Dimensionner les lignes de la grille implicite</h3>
+
+<p>Par défaut, les lignes implicites créées automatiquement ont une taille automatique. Autrement dit, elles seront dimensionnées pour contenir les éléments qu'elles doivent placer sans que ceux-ci dépassent.</p>
+
+<p>Il est toutefois possible de contrôler la taille de ces lignes grâce à la propriété <code>grid-auto-rows</code>. Ainsi, si on veut que les lignes créées automatiquement mesurent 100 pixels de haut, on utilisera :</p>
+
+<div id="placement_2">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div&gt;Un&lt;/div&gt;
+  &lt;div&gt;Deux&lt;/div&gt;
+  &lt;div&gt;Trois&lt;/div&gt;
+  &lt;div&gt;Quatre&lt;/div&gt;
+  &lt;div&gt;Cinq&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 100px;
+}
+</pre>
+
+<p>{{EmbedLiveSample('placement_2', '500', '330')}}</p>
+</div>
+
+<p>On peut utiliser la fonction {{cssxref("minmax","minmax()")}} pour la valeur de {{cssxref("grid-auto-rows")}} afin de créer des lignes avec une taille minimale mais qui puissent être plus grandes si le contenu est plus grand que cette taille minimale.</p>
+
+<div id="placement_3">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div&gt;Un&lt;/div&gt;
+  &lt;div&gt;Deux&lt;/div&gt;
+  &lt;div&gt;Trois&lt;/div&gt;
+  &lt;div&gt;Quatre
+    &lt;br&gt;Cette cellule
+    &lt;br&gt;a du contenu
+    &lt;br&gt;supplémentaire
+    &lt;br&gt;et max vaut auto
+    &lt;br&gt;afin que la ligne
+    &lt;br&gt;se développe.
+  &lt;/div&gt;
+  &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: minmax(100px, auto);
+}
+</pre>
+
+<p>{{EmbedLiveSample('placement_3', '500', '330')}}</p>
+</div>
+
+<p>On peut aussi passer en argument une liste de pistes qui se répèteront. Dans l'exemple ci-après, on crée une piste implicite pour une ligne de 100 pixels et une seconde de <code>200px</code>. Ce motif sera utilisé tant que du contenu sera ajouté à la grille implicite.</p>
+
+<div id="placement_4">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+   border: 2px solid #f76707;
+   border-radius: 5px;
+   background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+   border: 2px solid #ffa94d;
+   border-radius: 5px;
+   background-color: #ffd8a8;
+   padding: 1em;
+   color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div&gt;Un&lt;/div&gt;
+   &lt;div&gt;Deux&lt;/div&gt;
+   &lt;div&gt;Trois&lt;/div&gt;
+   &lt;div&gt;Quatre&lt;/div&gt;
+   &lt;div&gt;Cinq&lt;/div&gt;
+   &lt;div&gt;Six&lt;/div&gt;
+   &lt;div&gt;Sept&lt;/div&gt;
+   &lt;div&gt;Huit&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 100px 200px;
+}
+</pre>
+
+<p>{{EmbedLiveSample('placement_4', '500', '330')}}</p>
+</div>
+
+<h3 id="Utiliser_le_placement_automatique_pour_les_colonnes">Utiliser le placement automatique pour les colonnes</h3>
+
+<p>On peut également paramétrer la grille pour que les objets soient placés automatiquement en suivant les colonnes de la grille. Pour obtenir ce résultat, on utilisera la propriété {{cssxref("grid-auto-flow")}} avec la valeur <code>column</code>. Dans ce cas, la grille ajoutera les objets dans les lignes verticales définies avec {{cssxref("grid-template-rows")}}. Lorsqu'une colonne sera pleine, les prochains objets seront placés dans la colonne explicite suivante ou dans une colonne implicite créée automatiquement s'il n'y a plus assez de colonnes explicites. La taille des pistes pour les colonnes implicites peut être définie avec {{cssxref("grid-auto-columns")}}, cette dernière fonctionne de façon analogue à {{cssxref("grid-auto-rows")}}.</p>
+
+<p>Dans le prochain exemple, on crée une grille avec trois lignes qui mesurent chacune 200 pixels de haut. On utilise le placement automatique en colonne. La première colonne qui sera créée mesurera 300 pixels de large, ensuite on aura une colonne de 100 pixels de large et ainsi de suite jusqu'à ce que tous les éléments puissent être placés.</p>
+
+<div id="placement_5">
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-rows: repeat(3, 200px);
+  grid-gap: 10px;
+  grid-auto-flow: column;
+  grid-auto-columns: 300px 100px;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div&gt;Un&lt;/div&gt;
+  &lt;div&gt;Deux&lt;/div&gt;
+  &lt;div&gt;Trois&lt;/div&gt;
+  &lt;div&gt;Quatre&lt;/div&gt;
+  &lt;div&gt;Cinq&lt;/div&gt;
+  &lt;div&gt;Six&lt;/div&gt;
+  &lt;div&gt;Sept&lt;/div&gt;
+  &lt;div&gt;Huit&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('placement_5', '500', '640')}}</p>
+</div>
+
+<h2 id="Lordre_des_éléments_placés_automatiquement">L'ordre des éléments placés automatiquement</h2>
+
+<p>Une grille peut contenir un mélange d'éléments. Certains éléments peuvent avoir une position définie et d'autres être placés automatiquement. Ce placement automatique peut s'avérer utile lorsque l'ordre des éléments dans le document est celui qu'on veut utiliser pour organiser la grille : il n'y a alors pas besoin d'écrire de règles CSS pour positionner les éléments un par un. La spécification détaille exhaustivement <a href="https://drafts.csswg.org/css-grid/#auto-placement-algo">l'algorithme de placement des objets sur la grille</a>, mais voyons ici les quelques règles simples qu'il faut principalement retenir.</p>
+
+<h3 id="Modification_de_lordre_du_document">Modification de l'ordre du document</h3>
+
+<p>Le placement des éléments qui n'ont pas eu d'ordre défini sont placés selon l'algorithme décrit dans la section  <em>“order modified document order”</em>. Cela signifie que si on utilise uniquement la propriété <code>order</code>, les éléments seront placés selon cet ordre plutôt que selon l'ordre indiqué par le DOM. Sinon, l'ordre des éléments sera celui décrit par le document source.</p>
+
+<h3 id="Les_éléments_avec_des_propriétés_de_placement">Les éléments avec des propriétés de placement</h3>
+
+<p>La grille commencera par placer les éléments pour lesquels on a défini une position. Dans l'exemple qui suit, on a une grille avec 12 éléments, l'élément 2 et l'élément 5 sont placés en utilisant les lignes. On put voir comment ces deux éléments sont placés et comment les autres sont placés automatiquement dans les espaces restants. Les objets placés automatiquement seront placés avant les éléments qui sont placés, dans l'ordre du DOM.</p>
+
+<div id="placement_6">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div&gt;Un&lt;/div&gt;
+  &lt;div&gt;Deux&lt;/div&gt;
+  &lt;div&gt;Trois&lt;/div&gt;
+  &lt;div&gt;Quatre&lt;/div&gt;
+  &lt;div&gt;Cinq&lt;/div&gt;
+  &lt;div&gt;Six&lt;/div&gt;
+  &lt;div&gt;Sept&lt;/div&gt;
+  &lt;div&gt;Huit&lt;/div&gt;
+  &lt;div&gt;Neuf&lt;/div&gt;
+  &lt;div&gt;Dix&lt;/div&gt;
+  &lt;div&gt;Onze&lt;/div&gt;
+  &lt;div&gt;Douze&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-auto-rows: 100px;
+  grid-gap: 10px;
+}
+.wrapper div:nth-child(2) {
+  grid-column: 3;
+  grid-row: 2 / 4;
+}
+.wrapper div:nth-child(5) {
+  grid-column: 1 / 3;
+  grid-row: 1 / 3;
+}
+</pre>
+
+<p>{{EmbedLiveSample('placement_6', '500', '450')}}</p>
+</div>
+
+<h3 id="Gérer_les_éléments_qui_sétalent_sur_plusieurs_pistes">Gérer les éléments qui s'étalent sur plusieurs pistes</h3>
+
+<p>On peut utiliser les propriétés de placement tout en tirant parti du placement automatique. Dans le prochain exemple, on complète la disposition en indiquant que les éléments 1, 4 et 9 (4n+1) doivent occuper deux pistes, pour les colonnes et pour les lignes. Pour obtenir ce résultat, on utilise les propriétés {{cssxref("grid-column-end")}} et {{cssxref("grid-row-end")}} avec la valeur <code>span 2</code>. La ligne de début sera déterminée automatiquement et la ligne de fin sera deux pistes plus loin.</p>
+
+<p>On peut voir coment cela laisse des espaces dans la grille car lorsqu'un élément placé automatiquement n'a pas suffisamment de place sur une piste, une nouvelle ligne sera créée jusqu'à ce que l'élément ait la place.</p>
+
+<div id="placement_7">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div&gt;Un&lt;/div&gt;
+  &lt;div&gt;Deux&lt;/div&gt;
+  &lt;div&gt;Trois&lt;/div&gt;
+  &lt;div&gt;Quatre&lt;/div&gt;
+  &lt;div&gt;Cinq&lt;/div&gt;
+  &lt;div&gt;Six&lt;/div&gt;
+  &lt;div&gt;Sept&lt;/div&gt;
+  &lt;div&gt;Huit&lt;/div&gt;
+  &lt;div&gt;Neuf&lt;/div&gt;
+  &lt;div&gt;Dix&lt;/div&gt;
+  &lt;div&gt;Onze&lt;/div&gt;
+  &lt;div&gt;Douze&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-auto-rows: 100px;
+  grid-gap: 10px;
+}
+.wrapper div:nth-child(4n+1) {
+  grid-column-end: span 2;
+  grid-row-end: span 2;
+  background-color: #ffa94d;
+}
+.wrapper div:nth-child(2) {
+  grid-column: 3;
+  grid-row: 2 / 4;
+}
+.wrapper div:nth-child(5) {
+  grid-column: 1 / 3;
+  grid-row: 1 / 3;
+}
+</pre>
+
+<p>{{EmbedLiveSample('placement_7', '500', '770')}}</p>
+</div>
+
+<h3 id="Combler_les_espaces">Combler les espaces</h3>
+
+<p>En dehors des éléments placés explicitement, la grille place les éléments automatiques en respectant l'ordre du DOM. C'est généralement le résultat qu'on souhaite lorsqu'on met en forme un document comme un formulaire. Toutefois on veut parfois obtenir une disposition plus dense, sans vide entre les différents éléments.</p>
+
+<p>Pour cela, sur le conteneur, on ajoute la propriété {{cssxref("grid-auto-flow")}} avec la valeur <code>dense</code>. C'est la même propriété qu'on utilise pour modifier l'ordre du flux avec <code>column</code>. On peut aussi obtenir une disposition dense, rangée par colonne en utilisant les deux valeurs pour la propriété : <code>grid-auto-flow: column dense</code>.</p>
+
+<p>Avec cette valeur, la grille cherchera donc à combler les espaces qu'elle a laissés quitte à ne pas respecter l'ordre du DOM. En revanche, l'ordre de la navigation au clavier (<em>tab order</em>) suivra toujours l'ordre du document. Nous étudierons cet aspect plus en détails dans <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilit%C3%A9">un article sur l'accessibilité</a>.</p>
+
+<div id="placement_8">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div&gt;Un&lt;/div&gt;
+  &lt;div&gt;Deux&lt;/div&gt;
+  &lt;div&gt;Trois&lt;/div&gt;
+  &lt;div&gt;Quatre&lt;/div&gt;
+  &lt;div&gt;Cinq&lt;/div&gt;
+  &lt;div&gt;Six&lt;/div&gt;
+  &lt;div&gt;Sept&lt;/div&gt;
+  &lt;div&gt;Huit&lt;/div&gt;
+  &lt;div&gt;Neuf&lt;/div&gt;
+  &lt;div&gt;Dix&lt;/div&gt;
+  &lt;div&gt;Onze&lt;/div&gt;
+  &lt;div&gt;Douze&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper div:nth-child(4n+1) {
+  grid-column-end: span 2;
+  grid-row-end: span 2;
+  background-color: #ffa94d;
+}
+.wrapper div:nth-child(2) {
+  grid-column: 3;
+  grid-row: 2 / 4;
+}
+.wrapper div:nth-child(5) {
+  grid-column: 1 / 3;
+  grid-row: 1 / 3;
+}
+.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-auto-rows: 100px;
+  grid-gap: 10px;
+  grid-auto-flow: dense;
+}
+</pre>
+
+<p>{{EmbedLiveSample('placement_8', '500', '730')}}</p>
+</div>
+
+<h3 id="Les_éléments_anonymes_de_la_grille">Les éléments anonymes de la grille</h3>
+
+<p>Dans la spécification, on utilise le concept d'élément anonyme. Ces éléments sont ceux qui sont créés lorsqu'on a une chaîne de caractères dans le conteneur de la grille et que celle-ci n'est pas contenue dans un autre élément. Dans l'exemple ci-après, on a trois éléments sur la grille : le premier est un élément anonyme car il n'est placé dans aucun élément, il sera alors placé automatiquement. Les deux éléments suivants sont placés dans des <code>div</code> et peuvent être placés automatiquement ou grâce à une autre méthode de positionnement.</p>
+
+<pre class="brush: css">&lt;div class="grid"&gt;
+  Je suis une chaîne de caractères et je serai placé
+  automatiquement.
+  &lt;div&gt;Un élément de la grille&lt;/div&gt;
+  &lt;div&gt;Un élément de la grille&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Les éléments anonymes sont toujours placés automatiquement car on ne peut pas les cibler autrement. Aussi, si on a du texte sans balise dans la grille, il faut se rappeler que celui-ci peut être placé à un endroit imprévu du fait des règles de placement automatique.</p>
+
+<h3 id="Les_cas_dutilisation_pour_le_placement_automatique">Les cas d'utilisation pour le placement automatique</h3>
+
+<p>Le placement automatique peut être utile lorsqu'on a un ensemble d'objets qui se ressemblent. Ce peut être des éléments qui n'ont pas d'ordre logique particulier : une galerie de photos, une liste de produits. Dans ces cas de figure, on peut choisir d'utiliser une disposition dense afin de combler les trous de la grille. Dans l'exemple qui représente la galerie d'images, on a certaines images en paysage et d'autres en portrait (lorsqu'on utilise la classe <code>landscape</code> l'élément s'étend sur deux colonnes). On utilise ensuite <code>grid-auto-flow: dense</code> afin de créer une grille dense.</p>
+
+<div id="placement_9">
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  grid-gap: 10px;
+  grid-auto-flow: dense;
+  list-style: none;
+  margin: 1em auto;
+  padding: 0;
+  max-width: 800px;
+}
+.wrapper li {
+  border: 1px solid #ccc;
+}
+.wrapper li.landscape {
+  grid-column-end: span 2;
+}
+.wrapper li img {
+  display: block;
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+</pre>
+
+<pre class="brush: html">&lt;ul class="wrapper"&gt;
+  &lt;li&gt;&lt;img src="http://placehold.it/200x300" alt="placeholder"&gt;&lt;/li&gt;
+  &lt;li class="landscape"&gt;&lt;img src="http://placehold.it/350x200" alt="placeholder"&gt;&lt;/li&gt;
+  &lt;li class="landscape"&gt;&lt;img src="http://placehold.it/350x200" alt="placeholder"&gt;&lt;/li&gt;
+  &lt;li class="landscape"&gt;&lt;img src="http://placehold.it/350x200" alt="placeholder"&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;img src="http://placehold.it/200x300" alt="placeholder"&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;img src="http://placehold.it/200x300" alt="placeholder"&gt;&lt;/li&gt;
+  &lt;li class="landscape"&gt;&lt;img src="http://placehold.it/350x200" alt="placeholder"&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;img src="http://placehold.it/200x300" alt="placeholder"&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;img src="http://placehold.it/200x300" alt="placeholder"&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;img src="http://placehold.it/200x300" alt="placeholder"&gt;&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<p>{{EmbedLiveSample('placement_9', '500', '1300')}}</p>
+</div>
+
+<p>Le placement automatique peut également aider à disposer des éléments d'interface utilisateur qui ont un ordre logique. Dans l'exemple suivant, on voit comment manipuler les listes de définition. Les listes de définition sont intéressantes car il n'y a pas de niveau de regroupement pour regrouper un terme et ses définitions. Dans cet exemple, on autorise le placement automatique mais on a une classe pour qu'un élément <code>dt</code> démarre sur la première ligne et que l'élément  <code>dd</code> sur la  ligne 2. On s'assure ainsi que les termes sont bien en face de chaque définition, peu importe le nombre de définitions qu'on a pour un terme.</p>
+
+<div id="placement_10">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;dl&gt;
+    &lt;dt&gt;Mammals&lt;/dt&gt;
+    &lt;dd&gt;Cat&lt;/dd&gt;
+    &lt;dd&gt;Dog&lt;/dd&gt;
+    &lt;dd&gt;Mouse&lt;/dd&gt;
+    &lt;dt&gt;Fish&lt;/dt&gt;
+    &lt;dd&gt;Guppy&lt;/dd&gt;
+    &lt;dt&gt;Birds&lt;/dt&gt;
+    &lt;dd&gt;Pied Wagtail&lt;/dd&gt;
+    &lt;dd&gt;Owl&lt;/dd&gt;
+  &lt;dl&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">dl {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  max-width: 300px;
+  margin: 1em;
+  line-height: 1.4;
+}
+dt {
+  grid-column: 1;
+  font-weight: bold;
+}
+dd {
+  grid-column: 2;
+}
+</pre>
+
+<p>{{EmbedLiveSample('placement_10', '500', '230')}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> Voir <a href="https://www.sitepoint.com/understanding-masonry-layout/">cet article de SitePoint</a> à propos de la disposition en briques pour d'autres cas d'utilisation.</p>
+</div>
+</div>
+
+<h2 id="Quest-ce_que_le_placement_automatique_ne_permet_pas_de_réaliser_actuellement">Qu'est-ce que le placement automatique ne permet pas de réaliser (actuellement) ?</h2>
+
+<p>Certaines questions se posent encore. Actuellement on ne peut pas cibler toutes les autres cellules de la grille. On ne peut pas non plus définir une règle pour « placer tous les éléments automatiquement après la prochaine ligne intitulée <code>n</code> » (pour que certaines lignes soient sautées). Cette question <a href="https://github.com/w3c/csswg-drafts/issues/796">est décrite sur le dépôt GitHub du CSSWG</a>, n'hésitez pas à ajouter vos exemples de scénarios.</p>
+
+<p>Si vous rencontrez des cas d'utilisation problématiques avec le placement automatique et les grilles, vous pouvez consulter les <em>issues</em> existantes et les compléter ou ajouter les vôtres. Cela permettra que les prochaines versions de la spécification soient meilleures.</p>
+
+<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille", "Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS","Web/CSS/CSS_Grid_Layout")}}</p>
diff --git a/files/fr/web/css/css_grid_layout/placer_les_éléments_sur_les_lignes_d_une_grille_css/index.html b/files/fr/web/css/css_grid_layout/placer_les_éléments_sur_les_lignes_d_une_grille_css/index.html
new file mode 100644
index 0000000000..5984342f18
--- /dev/null
+++ b/files/fr/web/css/css_grid_layout/placer_les_éléments_sur_les_lignes_d_une_grille_css/index.html
@@ -0,0 +1,605 @@
+---
+title: Placer les éléments sur les lignes d'une grille CSS
+slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS
+tags:
+  - CSS
+  - CSS Grids
+  - Grilles CSS
+  - Guides
+  - Intermédiaire
+translation_of: Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid
+---
+<div>{{CSSRef}}</div>
+
+<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_concepts_de_base", "Web/CSS/CSS_Grid_Layout/D%C3%A9finir_des_zones_sur_une_grille","Web/CSS/CSS_Grid_Layout")}}</p>
+
+<p>Dans <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">l'article sur les concepts de base</a>, nous avons vu comment positionner des éléments en utilisant des numéros de lignes. Nous allons désormais étudier cette fonctionnalité de positionnement plus en détail.</p>
+
+<p>Commencer par utiliser les lignes numérotées est plutôt logique car toutes les grilles possèdent des lignes numérotées. Ces lignes forment les colonnes et les lignes horizontales de la grille, elles sont numérotées à partir de 1. On notera aussi que la numérotation des lignes varie selon le mode d'écriture du document. Dans un document écrit de gauche à droite comme le français, la ligne numéro 1 est située à l'extrêmité gauche de la grille. Si l'écriture va de droite à gauche, la ligne numéro 1 sera celle qui est située le plus à droite. Nous explorerons ces notions sur les modes d'écriture dans <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture">un prochain guide</a>.</p>
+
+<h2 id="Un_exemple_simple">Un exemple simple</h2>
+
+<p>Dans cet exemple simple, on a une grille avec trois pistes pour les colonnes et trois pistes pour les lignes, on a donc 4 lignes pour chaque dimension.</p>
+
+<p>Dans le conteneur, on a quatre éléments fils. Si aucune autre règle de placement n'est indiquée, ces éléments seront placés automatiquement et la grille remplira les quatre premières cellules. Si vous utilisez <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">l'outil de mise en évidence des grilles de Firefox</a>, vous pouvez voir les colonnes et les lignes horizontales formées par la grille.</p>
+
+<p><img alt="Our Grid highlighted in DevTools" src="https://mdn.mozillademos.org/files/14663/3_hilighted_grid.png" style="height: 296px; width: 900px;"></p>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 100px);
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;Un&lt;/div&gt;
+  &lt;div class="box2"&gt;Deux&lt;/div&gt;
+  &lt;div class="box3"&gt;Trois&lt;/div&gt;
+  &lt;div class="box4"&gt;Quatre&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('Un_exemple_simple', '300', '330')}}</p>
+
+<h2 id="Positionner_les_éléments_d'une_grille_grâce_au_numéro_de_ligne">Positionner les éléments d'une grille grâce au numéro de ligne</h2>
+
+<p>On peut placer les éléments d'une grille en utilisant les numéros de lignes qui définissent la zone allouée à l'élément. Si on souhaite que le premier élément commence tout à gauche et occupe une colonne, qu'il commence sur la première ligne et s'étale sur quatre lignes, on pourra utiliser les règles suivantes :</p>
+
+<div id="Line_Number">
+<pre class="brush: css">.box1 {
+   grid-column-start: 1;
+   grid-column-end: 2;
+   grid-row-start: 1;
+   grid-row-end: 4;
+}
+</pre>
+
+<p>Lorsqu'on positionne des objets sur la grille, les autres continueront d'être placés selon les règles de placement automatique. Nous verrons ces règles dans <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS">un prochain guide</a> mais grâce à cet exemple, on peut voir que les cellules vides sont remplies au fur et à mesure par les objets qui ne sont pas placés explicitement.</p>
+
+<p>On peut placer chacun des éléments individuellement et on peut également choisir de laisser certaines cellules vides. Un des avantages de la grille CSS est qu'on peut créer des espaces sans avoir à utiliser des marges ou d'autres méthodes de contournement.</p>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 100px);
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div class="box1"&gt;Un&lt;/div&gt;
+   &lt;div class="box2"&gt;Deux&lt;/div&gt;
+   &lt;div class="box3"&gt;Trois&lt;/div&gt;
+   &lt;div class="box4"&gt;Quatre&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.box2 {
+  grid-column-start: 3;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+.box3 {
+  grid-column-start: 2;
+  grid-column-end: 3;
+  grid-row-start: 1;
+  grid-row-end: 2;
+}
+.box4 {
+  grid-column-start: 2;
+  grid-column-end: 4;
+  grid-row-start: 3;
+  grid-row-end: 4;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Line_Number', '300', '330')}}</p>
+</div>
+
+<div id="Grid_Shorthands">
+<h2 id="Les_propriétés_raccourcies_grid-column_et_grid-row">Les propriétés raccourcies <code>grid-column</code> et <code>grid-row</code></h2>
+
+<p>On a écrit beaucoup de règles pour positionner chaque élément. Heureusement, il existe des propriétés raccourcies qui permettent d'avoir une syntaxe plus concise. Les propriétés {{cssxref("grid-column-start")}} et {{cssxref("grid-column-end")}} peuvent être combinées pour former la propriété raccourcie {{cssxref("grid-column")}} et de la même façon, {{cssxref("grid-row-start")}} et  {{cssxref("grid-row-end")}} peuvent être synthétisées avec {{cssxref("grid-row")}}.</p>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 100px);
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;Un&lt;/div&gt;
+  &lt;div class="box2"&gt;Deux&lt;/div&gt;
+  &lt;div class="box3"&gt;Trois&lt;/div&gt;
+  &lt;div class="box4"&gt;Quatre&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.box1 {
+  grid-column: 1 / 2;
+  grid-row: 1 / 4;
+}
+.box2 {
+  grid-column: 3 / 4;
+  grid-row: 1 / 3;
+}
+.box3 {
+  grid-column: 2 / 3;
+  grid-row: 1 /  2;
+}
+.box4 {
+  grid-column: 2 / 4;
+  grid-row: 3 / 4;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Grid_Shorthands', '300', '330')}}</p>
+</div>
+
+<h3 id="La_taille_par_défaut">La taille par défaut</h3>
+
+<p>Dans les exemples précédents, on a défini chaque ligne et colonne de fin pour chaque élément. Mais si en pratique, on souhaite qu'un élément n'occupe qu'une seule piste, on peut omettre <code>grid-column-end</code> ou <code>grid-row-end</code>. Par défaut, les éléments occupent une seule piste. Notre exemple initial, avec les propriétés détaillées peut donc être réécrit de cette façon :</p>
+
+<div id="End_Lines">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 100px);
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;Un&lt;/div&gt;
+  &lt;div class="box2"&gt;Deux&lt;/div&gt;
+  &lt;div class="box3"&gt;Trois&lt;/div&gt;
+  &lt;div class="box4"&gt;Quatre&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.box1 {
+  grid-column-start: 1;
+  grid-row-start: 1;
+  grid-row-end: 4;
+}
+.box2 {
+  grid-column-start: 3;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+.box3 {
+  grid-column-start: 2;
+  grid-row-start: 1;
+}
+.box4 {
+  grid-column-start: 2;
+  grid-column-end: 4;
+  grid-row-start: 3;
+}
+</pre>
+
+<p>{{EmbedLiveSample('End_Lines', '300', '330')}}</p>
+</div>
+
+<p>Avec les propriétés raccourcies, on obtient le code suivant (sans aucune barre oblique ni seconde valeur pour les éléments qui n'occupent qu'une seule piste).</p>
+
+<div id="New_Shorthand">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 100px);
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;Un&lt;/div&gt;
+  &lt;div class="box2"&gt;Deux&lt;/div&gt;
+  &lt;div class="box3"&gt;Trois&lt;/div&gt;
+  &lt;div class="box4"&gt;Quatre&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.box1 {
+  grid-column: 1 ;
+  grid-row: 1 / 4;
+}
+.box2 {
+  grid-column: 3 ;
+  grid-row: 1 / 3;
+}
+.box3 {
+  grid-column: 2 ;
+  grid-row: 1 ;
+}
+.box4 {
+  grid-column: 2 / 4;
+  grid-row: 3 ;
+}
+</pre>
+
+<p>{{EmbedLiveSample('New_Shorthand', '300', '330')}}</p>
+</div>
+
+<h2 id="La_propriété_grid-area">La propriété <code>grid-area</code></h2>
+
+<p>On peut aller plus loin et définir une zone pour chaque élément grâce à une seule propriété : {{cssxref("grid-area")}}. Cette propriété raccourcie permet d'utiliser les valeurs des propriétés suivantes (dans cet ordre) :</p>
+
+<ul>
+ <li><code>grid-row-start</code></li>
+ <li><code>grid-column-start</code></li>
+ <li><code>grid-row-end</code></li>
+ <li><code>grid-column-end</code></li>
+</ul>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 100px);
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;Un&lt;/div&gt;
+  &lt;div class="box2"&gt;Deux&lt;/div&gt;
+  &lt;div class="box3"&gt;Trois&lt;/div&gt;
+  &lt;div class="box4"&gt;Quatre&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.box1 {
+  grid-area: 1 / 1 / 4 / 2;
+}
+.box2 {
+  grid-area: 1 / 3 / 3 / 4;
+}
+.box3 {
+  grid-area: 1 / 2 / 2 / 3;
+}
+.box4 {
+  grid-area: 3 / 2 / 4 / 4;
+}
+</pre>
+
+<p>{{EmbedLiveSample('La_propriété_grid-area', '300', '330')}}</p>
+
+<p>L'ordre des valeurs utilisé pour <code>grid-area</code> peut sembler un peu étrange quand on connaît celui utilisé par les propriétés raccourcies pour les marges (<em>margin</em>) et le remplissage (<em>padding</em>). Cet ordre s'explique car les grilles CSS fonctionnent avec les différents modes d'écriture et on utilise des propriétés et des valeurs <em>logiques</em> plutôt que des propriétés et des valeurs <em>physiques</em>. Nous aborderons ce point dans <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture">un prochain article</a> mais il faut retenir ici que l'ordre des valeurs correspond aux directions logiques suivantes :</p>
+
+<ul>
+ <li><code>block-start</code></li>
+ <li><code>block-end</code></li>
+ <li><code>inline-start</code></li>
+ <li><code>inline-end</code></li>
+</ul>
+
+<p>On travaille ici en anglais ou en français, une langue qui s'écrit de gauche à droite. La ligne physique correspondant à la ligne logique <code>block-start</code> est donc la ligne en haut du conteneur, <code>block-end</code> correspond à la ligne en bas du conteneur, <code>inline-start</code> correspond à la colonne la plus à gauche (le point de départ de l'écriture pour une ligne) et <code>inline-end</code> correspond à la dernière colonne, celle qui est située à l'extrémité droite de la grille.</p>
+
+<p>Lorsqu'on définit une zone d'une grille grâce à la propriété <code>grid-area</code>, on commence par définir les lignes de « début » : <code>block-start</code> et <code>inline-start</code> puis les lignes de « fin » avec <code>block-end</code> et <code>inline-end</code>. Cela peut paraître étrange quand on est habitué à manipuler des propriétés physiques qui progressent dans le sens horaire : haut, droit, bas, gauche mais cet ordre paraît plus pertinent quand on considère que les sites web peuvent être multi-directionnels selon le mode d'écriture.</p>
+
+<h2 id="Compter_à_rebours">Compter à rebours</h2>
+
+<p>On peut également compter à l'envers, à partir des lignes de fin. Pour un document écrit en français, cela correspond à la colonne la plus à droite et à la ligne la plus basse. Pour faire référence à la dernière ligne, on peut utiliser la valeur <code>-1</code> et on peut compter à rebours au fur et à mesure de cette façon (ainsi, <code>-2</code> fait référence à l'avant-dernière ligne). Attention, ici, la dernière ligne correspond à la dernière ligne <em>explicite</em> de la grille, telle qu'elle est définie par <code>grid-template-columns</code> et <code>grid-template-rows</code>. Ce comptage ne prend pas en compte les lignes ou les colonnes qui sont ajoutées implicitement dans la grille.</p>
+
+<p>Dans le prochain exemple, on renverse la disposition de la grille en travaillant à partir du bas et de la droite.</p>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 100px);
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div class="box1"&gt;Un&lt;/div&gt;
+   &lt;div class="box2"&gt;Deux&lt;/div&gt;
+   &lt;div class="box3"&gt;Trois&lt;/div&gt;
+   &lt;div class="box4"&gt;Quatre&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.box1 {
+  grid-column-start: -1;
+  grid-column-end: -2;
+  grid-row-start: -1;
+  grid-row-end: -4;
+}
+.box2 {
+  grid-column-start: -3;
+  grid-column-end: -4;
+  grid-row-start: -1;
+  grid-row-end: -3;
+}
+.box3 {
+  grid-column-start: -2;
+  grid-column-end: -3;
+  grid-row-start: -1;
+  grid-row-end: -2;
+}
+.box4 {
+  grid-column-start: -2;
+  grid-column-end: -4;
+  grid-row-start: -3;
+  grid-row-end: -4;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Compter_à_rebours', '300', '330')}}</p>
+
+<h3 id="Étirer_un_élément_sur_la_grille">Étirer un élément sur la grille</h3>
+
+<p>Étant donné qu'on peut utiliser les numéros de lignes pour la première et la dernière, on peut facilement étirer un élément pour que celui-ci occupe toute la largeur et/ou toute la hauteur de la grille avec :</p>
+
+<pre class="brush: css">.item {
+  grid-column: 1 / -1;
+}
+</pre>
+
+<h2 id="Les_gouttières">Les gouttières</h2>
+
+<p>La spécification pour les grilles CSS permet également d'ajouter des espaces (« gouttières ») entre les colonnes et entre les lignes grâce aux propriétés {{cssxref("grid-column-gap")}} et {{cssxref("grid-row-gap")}}. Celles-ci permettent de définir un espace, de la même façon que la propriété {{cssxref("column-gap")}} permet d'obtenir un espace pour un mode de disposition avec plusieurs colonnes.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Les anciens navigateurs utilisent {{cssxref("column-gap")}}, {{cssxref("row-gap")}}, {{cssxref("gap")}} avec le préfixe <code>grid-</code> soit : {{cssxref("grid-column-gap")}}, {{cssxref("grid-row-gap")}} et {{cssxref("grid-gap")}}.</p>
+
+<p>Les navigateurs actuels retirent progressivement ce préfixe (la version préfixée sera maintenue sous forme d'alias). À l'heure actuelle, certains navigateurs ne prennent pas encore la version sans préfixe et c'est pourquoi certains exemples de ce guide continuent d'utiliser les versions préfixées avec <code>grid-</code>.</p>
+</div>
+
+<p>Les gouttières apparaissent uniquement entre les pistes de la grille, elles n'ajoutent pas d'espace en haut, en bas, à gauche ou à droite du conteneur. Voyons comment ajouter des espaces sur l'exemple précédent grâce à ces propriétés :</p>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 100px);
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;Un&lt;/div&gt;
+  &lt;div class="box2"&gt;Deux&lt;/div&gt;
+  &lt;div class="box3"&gt;Trois&lt;/div&gt;
+  &lt;div class="box4"&gt;Quatre&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.box1 {
+  grid-column: 1 ;
+  grid-row: 1 / 4;
+}
+.box2 {
+  grid-column: 3 ;
+  grid-row: 1 / 3;
+}
+.box3 {
+  grid-column: 2 ;
+  grid-row: 1 ;
+}
+.box4 {
+  grid-column: 2 / 4;
+  grid-row: 3 ;
+}
+.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 100px);
+  grid-column-gap: 20px;
+  grid-row-gap: 1em;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Les_gouttières', '300', '350') }}</p>
+
+<h3 id="Les_propriétés_raccourcies_pour_les_gouttières">Les propriétés raccourcies pour les gouttières</h3>
+
+<p>Les deux propriétés que nous venons de voir peuvent être synthétisées grâce à la propriété raccourcie {{cssxref("grid-gap")}}. Si on fournit une seule valeur, celle-ci s'appliquera pour les espaces entre les colonnes et entre les lignes. Avec deux valeurs, la première sera utilisée pour <code>grid-row-gap</code> et la seconde pour <code>grid-column-gap</code>.</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 100px);
+  grid-gap: 1em 20px;
+}
+</pre>
+
+<p>Par rapport au positionnement sur les lignes, les gouttières agissent comme si la ligne avait gagné en largeur ou en hauteur. Tout ce qui commence sur une ligne commencera après cet espace et on ne peut placer aucun élément dans cette gouttière. Aussi, si on veut qu'une gouttière agisse comme une piste classique dans laquelle on peut placer des objets, il suffira de définir une nouvelle piste plutôt qu'une gouttière.</p>
+
+<h2 id="Utiliser_le_mot-clé_span">Utiliser le mot-clé <code>span</code></h2>
+
+<p>On a vu comment indiquer la ligne de début et la ligne de fin avec des numéros. Il est aussi possible de définir la taille d'un élément en indiquant le numéro de la ligne de départ et le nombre de pistes sur lequel s'étale l'élément.</p>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 100px);
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;Un&lt;/div&gt;
+  &lt;div class="box2"&gt;Deux&lt;/div&gt;
+  &lt;div class="box3"&gt;Trois&lt;/div&gt;
+  &lt;div class="box4"&gt;Quatre&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.box1 {
+  grid-column: 1;
+  grid-row: 1 / span 3;
+}
+.box2 {
+  grid-column: 3;
+  grid-row: 1 / span 2;
+}
+.box3 {
+  grid-column: 2;
+  grid-row: 1;
+}
+.box4 {
+  grid-column: 2 / span 2;
+  grid-row: 3;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Utiliser_le_mot-clé_span', '300', '330')}}</p>
+
+<p>Le mot-clé <code>span</code> peut également être utilisé dans les valeurs des propriétés <code>grid-row-start</code>/<code>grid-row-end</code> et <code>grid-column-start</code>/<code>grid-column-end</code>. Les deux fragments de code qui suivent créeront la même zone. Dans le premier, on indique la ligne de début puis la ligne de fin en indiquant que l'élément occupe trois lignes. La zone commencera donc sur la première ligne et occupera 3 lignes, jusqu'à la ligne 4.</p>
+
+<pre class="brush: css">.box1 {
+  grid-column-start: 1;
+  grid-row-start: 1;
+  grid-row-end: span 3;
+}
+</pre>
+
+<p>Dans le deuxième exemple, on indique la ligne de fin et le nombre de lignes occupées par l'élément avec <code>span 3</code>. Cela signifie que l'élément partira de la ligne 4 et occupera 3 lignes jusqu'à la ligne 1.</p>
+
+<pre class="brush: css">.box1 {
+  grid-column-start: 1;
+  grid-row-start: span 3;
+  grid-row-end: 4;
+}
+</pre>
+
+<p>Pour vous familiariser avec le positionnement des éléments d'une grille en utilisant les lignes, vous pouvez essayer de construire certaines dispositions fréquemment utilisées en plaçant des éléments sur des grilles avec plus ou moins de pistes. Il faut garder à l'esprit que, lorsqu'on ne place pas explicitement tous les éléments, les éléments restants seront positionnés automatiquement. Cela peut tout à fait être l'objectif recherché mais si ce n'est pas le cas et que vous voyez un élément à un endroit inapproprié, vérifiez que vous lui avez affecté une position au sein de la grille.</p>
+
+<p>Il faut aussi se rappeler que lorsqu'on place les éléments explicitement sur la grille, ceux-ci peuvent se chevaucher. Cela permet d'obtenir certains effets mais attention aux erreurs lorsque c'est la mauvaise ligne de début ou de fin qui est indiquée. Pour régler ce problème, on peut utiliser <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">l'outil de mise en évidence de la grille CSS dans Firefox</a> pour analyser une grille compliquée.</p>
+
+<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_concepts_de_base", "Web/CSS/CSS_Grid_Layout/D%C3%A9finir_des_zones_sur_une_grille","Web/CSS/CSS_Grid_Layout")}}</p>
diff --git a/files/fr/web/css/css_grid_layout/subgrid/index.html b/files/fr/web/css/css_grid_layout/subgrid/index.html
new file mode 100644
index 0000000000..10eee83ae2
--- /dev/null
+++ b/files/fr/web/css/css_grid_layout/subgrid/index.html
@@ -0,0 +1,118 @@
+---
+title: Subgrid
+slug: Web/CSS/CSS_Grid_Layout/Subgrid
+tags:
+  - CSS
+  - Guide
+  - grid
+  - subgrid
+translation_of: Web/CSS/CSS_Grid_Layout/Subgrid
+---
+<p>{{CSSRef}}</p>
+
+<p>La valeur <code><strong>subgrid</strong></code> a été ajoutée par le module de spécification <em>CSS Grid Layout</em> de niveau 2 pour les propriétés {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-rows")}}. Dans ce guide, nous verrons comment utiliser cette valeur ainsi que les cas d'utilisation ou patrons de conception qui peuvent en bénéficier.</p>
+
+<div class="blockIndicator warning">
+<p><strong>Attention !</strong> Cette fonctionnalité est uniquement disponible dans Firefox Nightly à des fins de tests. Vous pouvez télécharger <a href="https://www.mozilla.org/firefox/channel/desktop/#nightly">Firefox Nightly</a> afin de tester les exemples ci-après.</p>
+</div>
+
+<h2 id="Une_introduction_à_subgrid">Une introduction à <code>subgrid</code></h2>
+
+<p>Lorsqu'on ajoute <code>display: grid</code> à un conteneur, seuls les descendants directs deviennent des éléments de grille et peuvent être placés sur la grille ainsi créée. Les enfants de ces descendants seront disposés selon le flux habituel.</p>
+
+<p>On peut imbriquer des grilles en utilisant <code>display: grid</code> sur un descendant direct du conteneur de grille mais les grilles créées seront indépendantes. On ne pourra pas récupérer le dimensionnement des pistes de la grille parente pour l'utiliser dans la grille fille. Il est donc difficile d'aligner des objets de la grille fille sur la grille parente.</p>
+
+<p>Si on utilise la valeur <code>subgrid</code> pour <code>grid-template-columns</code> et/ou <code>grid-template-rows</code>, on pourra utiliser les pistes de la grille parente à l'intérieur plutôt que de créer des pistes indépendantes.</p>
+
+<p>Ainsi, si on utilise <code>grid-template-columns: subgrid</code> et que la grille imbriquée s'inscrit dans trois colonnes du parent, la grille imbriquée possèdera trois pistes, dimensionnées comme celles du parent. Les gouttières (<em>gaps</em>) sont également héritées mais il est possible de les surcharger avec une valeur {{cssxref("gap")}} différente. Les noms des lignes peuvent être passés du parent à la grille fille et la grille fille peut aussi déclarer ses propres noms de ligne.</p>
+
+<h2 id="Les_sous-grilles_pour_les_colonnes">Les sous-grilles pour les colonnes</h2>
+
+<p>Dans l'exemple qui suit, on a une grille décomposée en neufs colonnes de <code>1fr</code> chacune et avec quatre lignes qui mesurent au moins <code>100px</code>.</p>
+
+<p>On place un objet <code>.item</code> entre les colonnes 2 et 7 et entre les lignes 2 à 4. On indique que cet objet est lui-même une grille et on définit les pistes de colonnes comme sous-grille et on utilise des lignes normales. L'objet ainsi paramétré s'étalant sur 5 colonnes de la grille parente, cela signifie que la sous-grille possède cinq pistes pour les colonnes. On place alors un objet <code>.subitem</code> sur cette deuxième grille.</p>
+
+<p>Les lignes horizontales de cet exemple ne sont pas une sous-grille et se comportent comme pour une grille imbriquée « classique ». La zone de la grille parente s'étend donc afin de pouvoir stocker le contenu de cette grille imbriquée.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/columns.html", '100%', 1200)}}</p>
+
+<p>On notera que la numérotation recommence à l'intérieur de la grille imbriquée. La colonne n°1 de la sous-grille correspond donc ici à la colonne n°2 de la grille parente. Autrement dit, les numéros des colonnes et des lignes de la grille parente ne sont pas héritées via la sous-grille. Cela permet une disposition modulaire et indépendante de la position quant à la grille parente.</p>
+
+<h2 id="Les_sous-grilles_pour_les_lignes">Les sous-grilles pour les lignes</h2>
+
+<p>Dans l'exemple ci-après, on a la même disposition mais on utilise cette fois <code>subgrid</code> pour la propriété <code>grid-template-rows</code> et on définit explicitement des pistes pour les colonnes. Les colonnes se comportent donc comme pour une grille imbriquée mais les lignes de la sous-grille sont liées à celles de la grille parente.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/rows.html", '100%', 1200)}}</p>
+
+<h2 id="Les_sous-grilles_sur_deux_dimensions">Les sous-grilles sur deux dimensions</h2>
+
+<p>Bien entendu, on peut définir une sous-grille pour les lignes et pour les colonnes en même temps. Cela signifie que la sous-grille sera couplée à la grille parente pour les deux axes.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/both.html", '100%', 1200)}}</p>
+
+<h3 id="Absence_de_grille_implicite_pour_une_sous-grille">Absence de grille implicite pour une sous-grille</h3>
+
+<p>S'il vous faut placer automatiquement des objets et que vous ne connaissez pas leur quantité, faites attention à l'utilisation des sous-grilles : celles-ci empêcheront la création de lignes supplémentaires pour afficher le contenu.</p>
+
+<p>Pour mieux illustrer ce point, voyons le prochain exemple (on utilise le même parent et la même sous-grille qu'avant) où on essaie d'afficher 12 éléments automatiquement dans une grille qui contient uniquement 10 cellules. La sous-grille étant couplée sur les deux axes (lignes et colonnes), il n'y a aucune place restante pour les deux éléments restants et ils sont donc placés sur la dernière piste de la grille, comme indiqué dans la spécification.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/no-implicit.html", '100%', 1200)}}</p>
+
+<p>Si on retire la valeur sur <code>grid-template-rows</code>, on permet alors la création de pistes implicites. Ainsi, même si on n'aura pas l'alignement avec les pistes de la grille parente, on pourra avoir autant de lignes que nécessaire pour afficher l'ensemble du contenu.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/implicit.html", '100%', 1200)}}</p>
+
+<h2 id="Utilisation_des_gouttières_et_des_sous-grilles">Utilisation des gouttières et des sous-grilles</h2>
+
+<p>Si vous utilisez {{cssxref("gap")}}, {{cssxref("column-gap")}} ou {{cssxref("row-gap")}} sur la grille parente, celles-ci seront héritées par la sous-grille et vous aurez donc le même espacement entre les pistes dans la sous-grille et dans la grille parente. Dans certains cas, on peut cependant vouloir d'avoir des espacements différents ou aucun espacement. Pourcela, on pourra utiliser les propriétés <code>gap-*</code> sur le conteneur de grille de la sous-grille.</p>
+
+<p>Dans l'exempel qui suit, la grille parente définit des gouttières de 20 pixels pour les lignes et les colonnes et pour la sous-grille, on fixe la propriété <code>row-gap</code> à <code>0</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/gap.html", '100%', 1200)}}</p>
+
+<p>Si on inspecte le résultat avec l'inspecteur de grille de Firefox, on pourra voir que l'espace auparavant occupé par la gouttière est partagé entre les cellules et permet d'agrandir la zone pour le contenu.</p>
+
+<p><img alt="The smaller item displays in the gap as row-gap is set to 0 on the subgrid." src="https://mdn.mozillademos.org/files/16628/gap.png" style="height: 928px; width: 1312px;"></p>
+
+<h2 id="Les_lignes_nommées">Les lignes nommées</h2>
+
+<p>Lorsqu'on utilise les grilles CSS, on peut fournir des noms aux lignes et positionner des objets sur la grille par rapport à ces noms plutôt qu'en utilisant les numéros de lignes. Les noms des lignes de la grille parente sont passés à la sous-grille et on peut donc placer des objets relativement à ces noms. Dans l'exempel qui suit, on a des lignes intitulées <code>col-start</code> et <code>col-end</code> sur la grille parente et on utilise ces noms pour placer un objet à l'intérieur de la sous-grille.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/line-names.html", '100%', 1200)}}</p>
+
+<p>Il est aussi possible d'utiliser de nouveaux noms dans la sous-grille. Pour cela, on ajoutera une liste de noms entre crochets après le mot-clé <code>subgrid</code>. Si on disposait de 4 lignes sur la sous-grille, on pourrait alors écrire <code>grid-template-columns: subgrid [line1] [line2] [line3] [line4]</code>.</p>
+
+<p>Les noms indiquées sur la sous-grille sont ajoutés à ceux déjà portés par la grille parente et on peut donc utiliser les uns ou les autres. Dans l'exemple suivant, on illustre ce point en positionnant un objet en utilisant deux noms : l'un provenant de la grille parente et l'autre provenant de la grille fille.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/adding-line-names.html", '100%', 1200)}}</p>
+
+<h2 id="Utilisation_des_sous-grilles">Utilisation des sous-grilles</h2>
+
+<p>Exception faite qu'il faille veiller au contenu qui ne pourrait pas être affiché dans une sous-grille, cette dernière se comporte généralement comme une grille imbriquée. La différence principale réside dans le dimensionnement des pistes qui peut provenir de la grille parente. Toutefois (et comme avec une simple grille imbriquée), la taille du contenu placé sur la sous-grille peut modifier le dimensionnement des pistes (lorsqu'on utilise un dimensionnement qui s'adapte au contenu). Ainsi, les pistes dimensionnées automatiquement s'agrandiront pour contenir les objets de la grille parente et aussi ceux de la sous-grille.</p>
+
+<p>Une telle ressemblance entre <code>subgrid</code> et les grilles imbriquées peut faciliter le passage d'une méthode à l'autre. Ainsi, si on réalise qu'il faut une grille implicite sur les lignes, il suffit de retirer <code>subgrid</code> pour la propriété <code>grid-template-rows</code> (et éventuellement fournir une valeur à <code>grid-auto-rows</code> afin de contrôler le dimensionnement implicite).</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Grid 2")}}</td>
+   <td>{{Spec2("CSS Grid 2")}}</td>
+   <td>Définition initiale des <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base#Sous-grille">sous-grilles (<em>subgrids</em>)</a>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base#Sous-grille">Les concepts de bases des grilles CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/css_grid_layout/utiliser_des_lignes_nommées_sur_une_grille/index.html b/files/fr/web/css/css_grid_layout/utiliser_des_lignes_nommées_sur_une_grille/index.html
new file mode 100644
index 0000000000..d8d7e5cf83
--- /dev/null
+++ b/files/fr/web/css/css_grid_layout/utiliser_des_lignes_nommées_sur_une_grille/index.html
@@ -0,0 +1,431 @@
+---
+title: Utiliser des lignes nommées sur une grille
+slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille
+tags:
+  - CSS
+  - CSS Grids
+  - Grilles CSS
+  - Guide
+translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines
+---
+<div>{{CSSRef}}</div>
+
+<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille", "Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS","Web/CSS/CSS_Grid_Layout")}}</p>
+
+<p>Dans les articles précédents, on a vu comment placer des objets sur les lignes définies par les pistes de la grilles. On a également vu comment placer des objets sur des zones nommées. Dans ce guide, nous allons combiner ces deux concepts et apprendre à placer les objets sur des lignes avec des noms. Le nommage des lignes peut s'avérer très utile mais un aspect encore plus intéressant consiste à combiner les noms et les tailles de pistes. Cela sera plus clair lorsque nous aurons vu les différents exemples.</p>
+
+<h2 id="Nommer_des_lignes_lorsqu'on_définit_une_grille">Nommer des lignes lorsqu'on définit une grille</h2>
+
+<p>Lorsqu'on définit une grille avec <code>grid-template-rows</code> et <code>grid-template-columns</code>, on peut donner des noms aux lignes (toutes ou seulement quelques unes). Pour illustrer ce point, nous allons reprendre la disposition utilisée dans l'article sur le placement sur les lignes. Cette fois, nous allons utiliser des lignes avec des noms.</p>
+
+<div id="example_named_lines">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<p>Lorsqu'on définit la grille, on nomme les lignes entre crochets. Ces noms peuvent être n'importe quelle valeur. Ici, on définit un nom pour le début et la fin du conteneur, pour les lignes et pour les colonnes. On définit les blocs du centres (ici <code>content-start</code> et <code>content-end</code>), à la fois pour les lignes et pour les colonnes. Il n'est pas nécessaire de nommer toutes les lignes de la grille, on peut très bien uniquement nommer celles qui sont importantes.</p>
+
+<pre class="brush: css">.wrapper {
+ display: grid;
+ grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
+  grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end];
+}
+</pre>
+
+<p>Une fois que les lignes sont nommées, on peut utiliser ce nom plutôt que le numéro de ligne afin de placer les éléments.</p>
+
+<pre class="brush: css">.box1 {
+  grid-column-start: main-start;
+  grid-row-start: main-start;
+  grid-row-end: main-end;
+}
+.box2 {
+  grid-column-start: content-end;
+  grid-row-start: main-start;
+  grid-row-end: content-end;
+}
+.box3 {
+  grid-column-start: content-start;
+  grid-row-start: main-start;
+}
+.box4 {
+  grid-column-start: content-start;
+  grid-column-end: main-end;
+  grid-row-start: content-end;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;Un&lt;/div&gt;
+  &lt;div class="box2"&gt;Deux&lt;/div&gt;
+  &lt;div class="box3"&gt;Trois&lt;/div&gt;
+  &lt;div class="box4"&gt;Quatre&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('example_named_lines', '500', '330')}}</p>
+</div>
+
+<p>Tout le reste continue de fonctionner de la même façon. Vous pouvez aussi utiliser des noms et des numéros. Le nommage des lignes est utile lorsqu'on souhaite créer une disposition <em>responsive</em> où on redéfinit la grille plutôt que d'avoir à redéfinir la position du contenu en changeant les numéros de lignes dans les <em>media queries</em>.</p>
+
+<h3 id="Donner_plusieurs_noms_à_une_ligne">Donner plusieurs noms à une ligne</h3>
+
+<p>On peut donner plusieurs noms à une ligne (par exemple une ligne qui décrirait la fin de la barre latérale et le début du contenu principal). Pour cela, à l'intérieur des crochets, on déclare les différents noms, séparés par un espace : <code>[sidebar-end main-start]</code>. On peut ensuite désigner la ligne par l'un de ces noms.</p>
+
+<h2 id="Définir_des_zones_de_grilles_implicites_à_l'aide_de_lignes_nommées">Définir des zones de grilles implicites à l'aide de lignes nommées</h2>
+
+<p>Plus haut, nous avons vu qu'il était possible de donner n'importe quel nom à une ligne. D'un point de vue technique, ce nom est un <a href="https://drafts.csswg.org/css-values-4/#custom-idents">identifiant personnalisé (ou <em>custom ident</em>)</a>, c'est-à-dire un nom défini par l'auteur de la feuille de style. Pour être plus précis, ce nom ne doit pas reprendre les mots-clés qui apparaissent dans la spécification et ne doit pas être source de confusion (on évitera ainsi d'utiliser <code>span</code>). Les identifiants ne sont pas mis entre quotes.</p>
+
+<p>Bien qu'on puisse choisir n'importe quel nom (avec les contraintes qu'on vient d'énoncer), si on utilise les suffixes <code>-start</code> et <code>-end</code> pour désigner les lignes qui entourent une zone (comme dans l'exemple ci-avant), la grille créera automatiquement une zone nommée avec le nom utilisé devant ces suffixes. Si on reprend l'exemple précédent où on utilise <code>content-start</code> et <code>content-end</code> pour les lignes et pour les colonnes, cela signifie qu'on a, implicitement, une zone de grille intitulée <code>content</code> qu'on peut également manipuler</p>
+
+<div id="implicit_areas_from_lines">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<p>On utilise les mêmes définitions qu'avant mais cette fois, nous allons placer un objet dans la zone intitulée <code>content</code>.</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
+  grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end];
+}
+.thing {
+  grid-area: content;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="thing"&gt;
+    Je suis dans une zone nommée content.
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('implicit_areas_from_lines', '500', '330')}}</p>
+</div>
+
+<p>Il n'est pas nécessaire de définir l'emplacement de cette zone avec <code>grid-template-areas</code> car les lignes suffisent à créer la zone et à la placer.</p>
+
+<h2 id="Définir_des_lignes_implicites_à_l'aide_de_zones_nommées">Définir des lignes implicites à l'aide de zones nommées</h2>
+
+<p>Nous avons vu comment des lignes nommées permettaient de créer des zones nommées. Cela fonctionne également dans l'autre sens. Les zones nommées créent aussi des lignes nommées qui peuvent ensuite être utilisées pour placer les objets. Si on reprend l'exemple utilisé dans le guide sur les zones nommées, on peut utiliser les lignes créées implicitement pour voir comment cela fonctionne.</p>
+
+<p>Dans cet exemple, on ajoute un élément <code>div</code> supplémentaire et on lui ajoute la classe <code>overlay</code>. On déclare des zones nommées à l'aide de <code>grid-area</code> puis on indique la disposition via la propriété <code>grid-template-areas</code>. Les noms utilisés pour les zones sont :</p>
+
+<ul>
+ <li><code>hd</code></li>
+ <li><code>ft</code></li>
+ <li><code>main</code></li>
+ <li><code>sd</code></li>
+</ul>
+
+<p>Cela crée implicitement les lignes et colonnes suivantes :</p>
+
+<ul>
+ <li><code>hd-start</code></li>
+ <li><code>hd-end</code></li>
+ <li><code>sd-start</code></li>
+ <li><code>sd-end</code></li>
+ <li><code>main-start</code></li>
+ <li><code>main-end</code></li>
+ <li><code>ft-start</code></li>
+ <li><code>ft-end</code></li>
+</ul>
+
+<p>Dans l'image qui suit, on peut voir l'emplacement de ces lignes. Certaines lignes peuvent avoir deux noms (par exemple, <code>sd-end</code> et <code>main-start</code> font référence à la même ligne verticale).</p>
+
+<p><img alt="An image showing the implicit line names created by our grid areas." src="https://mdn.mozillademos.org/files/14699/5_multiple_lines_from_areas.png" style="height: 396px; width: 1140px;"></p>
+
+<p>On peut positionner <code>overlay</code> grâce à ces lignes implicites, de la même façon qu'on aurait positionner un objet avec des lignes créées explicitement :</p>
+
+<div id="implicit_lines_from_area">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(9, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+  grid-template-areas:
+    "hd hd hd hd   hd   hd   hd   hd   hd"
+    "sd sd sd main main main main main main"
+    "ft ft ft ft   ft   ft   ft   ft   ft";
+}
+.header {
+  grid-area: hd;
+}
+.footer {
+  grid-area: ft;
+}
+.content {
+  grid-area: main;
+}
+.sidebar {
+  grid-area: sd;
+}
+.wrapper &gt; div.overlay {
+  z-index: 10;
+  grid-column: main-start / main-end;
+  grid-row: hd-start / ft-end;
+  border: 4px solid rgb(92,148,13);
+  background-color: rgba(92,148,13,.4);
+  color: rgb(92,148,13);
+  font-size: 150%;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="header"&gt;En-tête&lt;/div&gt;
+  &lt;div class="sidebar"&gt;Barre latérale&lt;/div&gt;
+  &lt;div class="content"&gt;Contenu&lt;/div&gt;
+  &lt;div class="footer"&gt;Pied de page&lt;/div&gt;
+  &lt;div class="overlay"&gt;Masque&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('implicit_lines_from_area', '500', '330')}}</p>
+</div>
+
+<p>Grâce à tout ça, on voit qu'on peut créer des lignes à partir de zones nommées et créer des zones à partir de lignes nommées. Aussi, mieux vaut prendre le temps de réfléchir aux noms utilisés lorsqu'on définit un grille. En effet, plus les noms utilisés seront clairs, plus la maintenance et le travail d'équipe seront simplifiés.</p>
+
+<h2 id="Utiliser_plusieurs_lignes_avec_le_même_nom_repeat()">Utiliser plusieurs lignes avec le même nom : <code>repeat()</code></h2>
+
+<p>Si vous souhaitez que chaque ligne ait un nom différent, il faudra alors définir la piste de façon détaillée et non utiliser la syntaxe avec <code>repeat()</code> car il faut préciser le nom de la ligne entre crochets lorsqu'on définit les pistes. Si vous utilisez la syntaxe avec <code>repeat()</code>, vous obtiendrez plusieurs lignes avec le même nom… ce qui peut également être utile.</p>
+
+<p>Dans l'exemple qui suit, nous allons créer une grille avec douze colonnes de même largeur. Avant de définir la taille d'une piste pour la colonne (<code>1fr</code>), on définit un nom : <code>[col-start]</code>. Cela signifie qu'on aura une grille avec 12 colonnes, toutes intitulées <code>col-start</code> et qui mesureront chacune <code>1fr</code> de large.</p>
+
+<div id="multiple_lines_same_name">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(12, [col-start] 1fr);
+}</pre>
+
+<p>Une fois la grille créée, on peut y placer les objets. On a alors plusieurs lignes avec le nom <code>col-start</code> et si on place un objet après la ligne <code>col-start</code>, la grille utilisera la première ligne intitulée <code>col-start</code> (dans notre cas, c'est la ligne la plus à gauche). Pour indiquer une autre ligne, on utilisera le nom, suivi du numéro de cette ligne. Ainsi, pour placer un objet à partir de la première ligne jusqu'à la cinquième, on pourra utiliser :</p>
+
+<pre class="brush: css">.item1 {
+  grid-column: col-start / col-start 5
+}
+</pre>
+
+<p>On peut également utiliser le mot-clé <code>span</code>. Avec la règle suivante, le deuxième objet sera placé à partir de la septième ligne et occupera 3 lignes :</p>
+
+<pre class="brush: css">.item2 {
+  grid-column: col-start 7 / span 3;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Je vais de col-start 1 à col-start 5&lt;/div&gt;
+  &lt;div class="item2"&gt;Je vais de col-start 7 et je m'étends sur 3 lignes&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>{{EmbedLiveSample('multiple_lines_same_name', '500', '330')}}</p>
+</div>
+
+<p>Si vous observez cette disposition grâce à l'outil de mise en évidence des grilles dans Firefox, vous verrez les différentes lignes et le placement des éléments sur ces lignes :</p>
+
+<p><img alt="The 12 column grid with items placed. The Grid Highlighter shows the position of the lines." src="https://mdn.mozillademos.org/files/14695/5_named_lines1.png" style="height: 156px; width: 1958px;"></p>
+
+<p>La syntaxe <code>repeat()</code> permet également d'utiliser une liste de plusieurs pistes et pas uniquement une seule piste. Dans la règle qui suit, on crée une grille composée de huit pistes qui commence par une colonne plus étroite (<code>1fr</code>), intitulée <code>col1-start</code>, et qui est suivie par une colonne plus large (<code>3fr</code>), intitulée <code>col2-start</code>.</p>
+
+<pre class="brush: css">.wrapper {
+  grid-template-columns: repeat(4, [col1-start] 1fr [col2-start] 3fr);
+}
+</pre>
+
+<p>Si on utilise <code>repeat()</code> et qu'on place deux lignes l'une à la suite de l'autre, ces lignes seront fusionnées et on aura le même résultat que si on avait donné plusieurs noms à un même ligne. La règle suivante permet de créer quatre pistes dont la largeur est <code>1fr</code>, chacune avec un début et une fin.</p>
+
+<pre class="brush: css">.wrapper {
+  grid-template-columns: repeat(4, [col-start] 1fr [col-end] );
+}
+</pre>
+
+<p>Si on écrivait la même définition sans utiliser <code>repeat()</code>, on aurait la forme suivante :</p>
+
+<pre class="brush: css">.wrapper {
+  grid-template-columns: [col-start] 1fr [col-end col-start] 1fr [col-end col-start] 1fr  [col-end col-start] 1fr [col-end];
+}
+</pre>
+
+<p>Si vous utilisez une liste de pistes, vous pouvez utiliser le mot-clé <code>span</code> pour indiquer le nombre de lignes à occuper mais aussi pour indiquer le nombre de lignes à occuper qui ont un nom donné.</p>
+
+<div id="span_line_number">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(6, [col1-start] 1fr [col2-start] 3fr);
+}
+.item1 {
+  grid-column: col1-start / col2-start 2
+}
+.item2 {
+  grid-row: 2;
+  grid-column: col1-start 2 / span 2 col1-start;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Je suis placé à partir de la première col1-start et jusqu'à la deuxième col2-start.&lt;/div&gt;
+  &lt;div class="item2"&gt;Je suis placé à partir de la deuxième col1-start et je m'étend sur deux lignes nommées col1-start&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('span_line_number', '500', '330')}}</p>
+</div>
+
+<p>Avec ces trois derniers articles, nous avons vu de nombreuses façons qui permettaient de placer des objets sur une grille. Cela peut sembler un peu trop inutilement compliqué mais il faut garder à l'esprit que toutes ne sont pas obligatoirement nécessaires. Dans la pratique, utiliser des zones nommés pour des dispositions simples permet d'avoir une représentation visuelle simple et de déplacer les différents objets facilement sur la grille.</p>
+
+<p>Si on travaille avec une disposition sur plusieurs colonnes (comme celles utilisées dans ces derniers exemples), les lignes nommées feront parfaitement l'affaire. Si vous prenez par exemple des <em>frameworks</em> tels que Foundation ou Bootstrap, ceux-ci fonctionnent sur une grille avec 12 colonnes. Le <em>framework</em> importe ensuite le code nécessaire aux différents calculs afin de s'assurer que l'ensemble des colonnes fasse 100%. En utilisant une grille CSS, le seule code nécessaire pour obtenir un tel <em>framework</em> se résume à :</p>
+
+<div class="three_column">
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-gap: 10px;
+  grid-template-columns: repeat(12, [col-start] 1fr);
+}
+</pre>
+
+<p>On peut alors utiliser ce modèle pour mettre en forme notre page. Par exemple, on peut créer une disposition avec trois colonnes, un en-tête et un pied de page avec les règles suivantes :</p>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; * {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;header class="main-header"&gt;Je suis l'en-tête&lt;/header&gt;
+   &lt;aside class="side1"&gt;Je suis la barre latérale 1&lt;/aside&gt;
+   &lt;article class="content"&gt;Je suis l'article&lt;/article&gt;
+   &lt;aside class="side2"&gt;Je suis la barre latérale 2&lt;/aside&gt;
+   &lt;footer class="main-footer"&gt;Je suis le pied de page&lt;/footer&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Pour placer ces éléments, on utilise la grille de la façon suivante :</p>
+
+<pre class="brush: css">.main-header,
+.main-footer  {
+  grid-column: col-start / span 12;
+}
+.side1 {
+  grid-column: col-start / span 3;
+  grid-row: 2;
+}
+.content {
+  grid-column: col-start 4 / span 6;
+  grid-row: 2;
+}
+.side2 {
+  grid-column: col-start 10 / span 3;
+  grid-row: 2;
+}
+</pre>
+
+<p>{{EmbedLiveSample('three_column', '500', '330')}}</p>
+
+<p>Là encore, l'outil de mise en évidence de la grille permet de voir comment le placement fonctionne :</p>
+
+<p><img alt="The layout with the grid highlighted." src="https://mdn.mozillademos.org/files/14697/5_named_lines2.png" style="height: 378px; width: 1958px;"></p>
+</div>
+
+<p>Et voilà tout ce dont on a besoin. Aucun calcul compliqué, la grille a automatiquement retiré la gouttière de 10 pixels avant d'affecter l'espace aux pistes qui mesurent <code>1fr</code>. Lorsque vous construirez vos propres disposition, vous serez plus à l'aise avec la syntaxe et utiliserez les techniques qui sont les plus pertinentes pour vos projets. Essayez de construire cetaines dispositions classiques avec des différentes méthodes, vous deviendrez plus efficaces pour manipuler les grilles CSS. Dans le prochain guide, nous verrons comment la grille peut placer des objets automatiquement, sans même avoir besoin d'utiliser les propriétés de placement !</p>
+
+<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille", "Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS","Web/CSS/CSS_Grid_Layout")}}</p>
diff --git a/files/fr/web/css/css_images/index.html b/files/fr/web/css/css_images/index.html
new file mode 100644
index 0000000000..1bc5acf7c8
--- /dev/null
+++ b/files/fr/web/css/css_images/index.html
@@ -0,0 +1,106 @@
+---
+title: CSS Images
+slug: Web/CSS/CSS_Images
+tags:
+  - Aperçu
+  - CSS
+  - CSS Images
+  - Reference
+translation_of: Web/CSS/CSS_Images
+---
+<div>{{CSSRef}}</div>
+
+<p><em><strong>CSS Images</strong></em> est un module CSS qui définit les types d'images qui peuvent être utilisés (le type {{cssxref("&lt;image&gt;")}}, les URLs qu'elles contiennent, les dégradés et autres types d'images), comment les redimensionner et comment elles, ainsi que le contenu remplacé, interagissent avec les différents modèles de mise en page.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("image-orientation")}}</li>
+ <li>{{CSSxRef("image-rendering")}}</li>
+ <li>{{CSSxRef("image-resolution")}}</li>
+ <li>{{CSSxRef("object-fit")}}</li>
+ <li>{{CSSxRef("object-position")}}</li>
+</ul>
+</div>
+
+<h3 id="Fonctions">Fonctions</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("linear-gradient", "linear-gradient()")}}</li>
+ <li>{{CSSxRef("radial-gradient", "radial-gradient()")}}</li>
+ <li>{{CSSxRef("repeating-linear-gradient", "repeating-linear-gradient()")}}</li>
+ <li>{{CSSxRef("repeating-radial-gradient", "repeating-radial-gradient()")}}</li>
+ <li>{{CSSxRef("conic-gradient")}}</li>
+ <li>{{CSSxRef("repeating-conic-gradient", "repeating-conic-gradient()")}}</li>
+ <li>{{CSSxRef("url", "url()")}}</li>
+ <li>{{CSSxRef("element", "element()")}}</li>
+ <li>{{CSSxRef("_image", "image()")}}</li>
+ <li>{{CSSxRef("cross-fade", "cross-fade()")}}</li>
+</ul>
+</div>
+
+<h3 id="Types_de_données">Types de données</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("&lt;image&gt;")}}</li>
+ <li>{{cssxref("&lt;gradient&gt;")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">Utilisation de dégradés CSS</a></dt>
+ <dd>Présente un type spécifique d'images CSS, les <em>dégradés</em>, et comment les créer et les utiliser.</dd>
+ <dt><a href="/fr/docs/Web/CSS/CSS_Images/Sprites_CSS">Les <em>sprites</em> CSS</a></dt>
+ <dd>Décrit la technique classique consistant à regrouper plusieurs images en un seul document pour économiser des requêtes de téléchargement et rendre une page disponible plus rapidement.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Images")}}</td>
+   <td>{{Spec2("CSS4 Images")}}</td>
+   <td>Ajout de {{CSSxRef("image-resolution")}},{{CSSxRef("conic-gradient")}} et {{CSSxRef("_image", "image()")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Images")}}</td>
+   <td>{{Spec2("CSS3 Images")}}</td>
+   <td>Ajout de {{CSSxRef("image-orientation")}}, {{CSSxRef("image-rendering")}}, {{CSSxRef("object-fit")}} et {{CSSxRef("object-position")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Compat", "#css-%3Cimage%3E-type", "CSS Gradients")}}</td>
+   <td>{{Spec2("Compat")}}</td>
+   <td>Standardisation de la version préfixée avec <code>-webkit</code> pour les valeurs de fonctions de dégradé</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Values", "#urls", "&lt;url&gt;")}}</td>
+   <td>{{Spec2("CSS3 Values")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{Specname("CSS2.1", "syndata.html#uri", "&lt;uri&gt;")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1", "#url", "&lt;url&gt;")}}</td>
+   <td>{{Spec2("CSS1")}}</td>
+   <td>Définition intiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/css/css_images/sprites_css/index.html b/files/fr/web/css/css_images/sprites_css/index.html
new file mode 100644
index 0000000000..a141a8a11e
--- /dev/null
+++ b/files/fr/web/css/css_images/sprites_css/index.html
@@ -0,0 +1,51 @@
+---
+title: Les sprites CSS
+slug: Web/CSS/CSS_Images/Sprites_CSS
+tags:
+  - Avancé
+  - CSS
+  - Guide
+translation_of: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS
+---
+<div>{{CSSRef}}</div>
+
+<p>Les <em>sprites</em> sont utilisées dans de nombreuses applications web où de multiples images sont utilisées. Au lieu d'avoir une image par fichier, on économise de la bande passante et de la mémoire en les envoyant toute dans le même fichier, ainsi, le nombre de requêtes HTTP diminue. On utilise alors <code>background-position</code> pour choisir l'image qu'on souhaite utiliser.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Avec HTTP/2, il peut être plus judicieux d'utiliser de nombreuses « petites » requêtes.</p>
+</div>
+
+<h2 id="Implémentation">Implémentation</h2>
+
+<p>Supposons qu'une image est affichée pour chaque élement de la classe <code>toolbtn</code> :</p>
+
+<pre class="brush:css">.toolbtn {
+  background: url('myfile.png');
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+}</pre>
+
+<p>Une position peut être ajoutée avec les valeurs x et y après {{cssxref("url()")}} pour décaler l'image de fond ({{cssxref("background")}}). Cela fonctionne aussi avec {{cssxref("background-position")}}. Par exemple :</p>
+
+<pre class="brush:css">#btn1 {
+  background-position: -20px 0px;
+}
+
+#btn2 {
+  background-position: -40px 0px;
+}</pre>
+
+<p>L'élément avec l'ID « btn1 » bouge vers la gauche de 20 pixels et l'élément avec l'ID « btn2 » vers la gauche de 40 pixels (en présumant que ces deux éléments aient aussi la classe <code>toolbtn</code>).</p>
+
+<p>De la même manière, vous pouvez faire un effet de transition au survol :</p>
+
+<pre class="brush:css">#btn:hover {
+  background-position: <var>&lt;pixels shifted right&gt;</var>px <var>&lt;pixels shifted down&gt;</var>px;
+}</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/">Une démonstration sur CSS Tricks</a></li>
+</ul>
diff --git a/files/fr/web/css/css_lists/compteurs_css/index.html b/files/fr/web/css/css_lists/compteurs_css/index.html
new file mode 100644
index 0000000000..7ca83181c4
--- /dev/null
+++ b/files/fr/web/css/css_lists/compteurs_css/index.html
@@ -0,0 +1,148 @@
+---
+title: Compteurs CSS
+slug: Web/CSS/CSS_Lists/Compteurs_CSS
+tags:
+  - Avancé
+  - CSS
+  - Guide
+translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters
+---
+<div>{{CSSRef}}</div>
+
+<p>Les <strong>compteurs CSS</strong> sont des variables dont les valeurs sont incrémentées par les règles CSS et qui permettent de savoir combien de fois elles sont utilisées. Cela permet par exemple d'adapter la mise en forme du contenu en fonction de son emplacement dans le document.</p>
+
+<p>La valeur d'un compteur peut être manipulée grâce aux propriétés {{cssxref("counter-reset")}}. {{cssxref("counter-increment")}} et on peut les afficher sur la page grâce aux fonctions <code>counter()</code> et <code>counters()</code> dans la propriété {{cssxref("content")}}.</p>
+
+<h2 id="Utiliser_les_compteurs">Utiliser les compteurs</h2>
+
+<h3 id="Manipuler_la_valeur_d'un_compteur">Manipuler la valeur d'un compteur</h3>
+
+<p>Pour utiliser un compteur CSS, il faut d'abord réinitialiser sa valeur (0 par défaut) à l'aide de {{cssxref("counter-reset")}}. Pour incrémenter un compteur initialisé, on peut utiliser {{cssxref("counter-increment")}}. Attention le nom du compteur ne peut pas être <code>none</code>, <code>inherit</code> ou <code>initial</code>.</p>
+
+<h3 id="Afficher_un_compteur">Afficher un compteur</h3>
+
+<p>Pour ajouter un compteur au contenu d'un élément, il faut utiliser la fonction {{cssxref("counter")}} ou {{cssxref("counters")}} dans une propriété {{cssxref("content")}}.</p>
+
+<p>La fonction <code>counter()</code> prend deux formes : <code>counter(nom)</code> ou <code>counter(nom, style)</code>. Le texte ainsi généré est celui du compteur le plus proche avec ce nom. Le contenu est mis en forme avec le style indiqué (par défaut, c'est <code>decimal</code>).</p>
+
+<p>La fonction <code>counters()</code> prend également deux formes : <code>counters(nom, chaine)</code> ou <code>counters(nom, chaine style)</code>. Le texte généré aura la valeur de l'ensemble des compteurs présents dans la portée du pseudo-élément (du plus loin au plus proche), séparés par la chaîne de caractères passée en argument. Les compteurs sont mis en forme avec le style indiqué (par défaut, c'est <code>decimal</code>).</p>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<p>Dans l'exemple qui suit, la feuille de style CSS préfixe chaque titre de niveau 3 avec « Section &lt;la valeur du compteur&gt; : ».</p>
+
+<div class="note">
+<p><strong>Note :</strong> La fonction {{cssxref("counter()")}} et la fonction {{cssxref("counters()")}} peuvent toutes les deux prendre un dernier argument qui correspond au style de liste utilisé (par défaut, c'est <code>decimal</code>).</p>
+</div>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">body {
+  counter-reset: section;                    /* On initialise le compteur à 0 */
+}
+
+h3::before {
+  counter-increment: section;                /* On incrémente le compteur section */
+  content: "Section " counter(section) " : "; /* On affiche le compteur */
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;h3&gt;Introduction&lt;/h3&gt;
+&lt;h3&gt;Corps&lt;/h3&gt;
+&lt;h3&gt;Conclusion&lt;/h3&gt;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Utiliser_les_compteurs", 300, 150)}}</p>
+
+<h2 id="Imbriquer_des_compteurs">Imbriquer des compteurs</h2>
+
+<p>Un compteur CSS est particulièrement utile lorsqu'il s'agit de gérer les listes générées dynamiquement. En utilisant la fonction {{cssxref("counters","counters()")}}, on peut insérer une chaîne de caractères entre les différents niveaux des compteurs imbriqués.</p>
+
+<h3 id="CSS_2">CSS</h3>
+
+<pre class="brush: css">ol {
+  counter-reset: section;                /* On crée une nouvelle instance du
+                                            compteur section avec chaque ol */
+  list-style-type: none;
+}
+
+li::before {
+  counter-increment: section;            /* On incrémente uniquement cette
+                                            instance du compteur */
+  content: counters(section,".") " ";    /* On ajoute la valeur de toutes les
+                                            instances séparées par ".". */
+                                         /* Si on doit supporter &lt; IE8 il faudra
+                                            faire attention à ce qu'il n'y ait
+                                            aucun blanc après ',' */
+}
+</pre>
+
+<h3 id="HTML_2">HTML</h3>
+
+<pre class="brush: html">&lt;ol&gt;
+  &lt;li&gt;item&lt;/li&gt;          &lt;!-- 1     --&gt;
+  &lt;li&gt;item               &lt;!-- 2     --&gt;
+    &lt;ol&gt;
+      &lt;li&gt;item&lt;/li&gt;      &lt;!-- 2.1   --&gt;
+      &lt;li&gt;item&lt;/li&gt;      &lt;!-- 2.2   --&gt;
+      &lt;li&gt;item           &lt;!-- 2.3   --&gt;
+        &lt;ol&gt;
+          &lt;li&gt;item&lt;/li&gt;  &lt;!-- 2.3.1 --&gt;
+          &lt;li&gt;item&lt;/li&gt;  &lt;!-- 2.3.2 --&gt;
+        &lt;/ol&gt;
+        &lt;ol&gt;
+          &lt;li&gt;item&lt;/li&gt;  &lt;!-- 2.3.1 --&gt;
+          &lt;li&gt;item&lt;/li&gt;  &lt;!-- 2.3.2 --&gt;
+          &lt;li&gt;item&lt;/li&gt;  &lt;!-- 2.3.3 --&gt;
+        &lt;/ol&gt;
+      &lt;/li&gt;
+      &lt;li&gt;item&lt;/li&gt;      &lt;!-- 2.4   --&gt;
+    &lt;/ol&gt;
+  &lt;/li&gt;
+  &lt;li&gt;item&lt;/li&gt;          &lt;!-- 3     --&gt;
+  &lt;li&gt;item&lt;/li&gt;          &lt;!-- 4     --&gt;
+&lt;/ol&gt;
+&lt;ol&gt;
+  &lt;li&gt;item&lt;/li&gt;          &lt;!-- 1     --&gt;
+  &lt;li&gt;item&lt;/li&gt;          &lt;!-- 2     --&gt;
+&lt;/ol&gt;</pre>
+
+<h3 id="Résultat_2">Résultat</h3>
+
+<p>{{EmbedLiveSample("Imbriquer_des_compteurs", 250, 350)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Lists", "#auto-numbering", "CSS Counters")}}</td>
+   <td>{{Spec2("CSS3 Lists")}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "generate.html#counters", "CSS Counters")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("counter-reset")}}</li>
+ <li>{{cssxref("counter-set")}}</li>
+ <li>{{cssxref("counter-increment")}}</li>
+ <li>{{cssxref("@counter-style")}}</li>
+</ul>
diff --git a/files/fr/web/css/css_lists/indentation_homogène_des_listes/index.html b/files/fr/web/css/css_lists/indentation_homogène_des_listes/index.html
new file mode 100644
index 0000000000..52a1cfbc33
--- /dev/null
+++ b/files/fr/web/css/css_lists/indentation_homogène_des_listes/index.html
@@ -0,0 +1,105 @@
+---
+title: Indentation homogène des listes
+slug: Web/CSS/CSS_Lists/Indentation_homogène_des_listes
+tags:
+  - CSS
+  - Guide
+  - Intermédiaire
+translation_of: Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation
+---
+<div>{{CSSRef}}</div>
+
+<p>La modification la plus fréquemment apportée sur une liste concerne la distance d'indentation (autrement dit, la distance de laquelle les éléments sont décalés vers la droite). Ce point peut être source de frustration car les navigateurs se comportent différemment à ce sujet. Ainsi, si on déclare une liste sans marge à gauche, elles sont déplacées Internet Explorer mais restent obstinément à la même place dans les navigateurs Gecko.</p>
+
+<p>Pour comprendre pourquoi cela se produit ainsi, et surtout afin d'éviter ces problèmes, nous allons devoir examiner en détail la construction des listes.</p>
+
+<h2 id="Construire_une_liste">Construire une liste</h2>
+
+<p>Commençons par une simple liste minimale. L'élément de la liste ne possède aucune puce (le marqueur devant l'élément). Pour le moment, il ne fait pas partie d'une liste.</p>
+
+<p><img alt="" src="/@api/deki/files/619/=Consistent-list-indentation-figure1.gif"></p>
+
+<p>La bordure pointillée rouge représente la limite extérieure de la zone de contenu de l'élément de la liste. Pour le moment, cet élément ne possède ni remplissage (<em>padding</em>) ni bordure. Si on ajoute deux autres éléments à la liste, on obtient alors ce résultat :</p>
+
+<p><img alt="" src="/@api/deki/files/620/=Consistent-list-indentation-figure2.gif" style="height: 100px; width: 200px;"></p>
+
+<p>À présent, nous allons placer ces éléments dans un élément parent. Pour cet exemple, nous utiliserons une liste non-ordonnée avec {{HTMLElement("ul")}}. Selon <a href="/fr/docs/Apprendre/CSS/Les_bases/Le_mod%C3%A8le_de_bo%C3%AEte">le modèle de boîtes CSS</a>, les boîtes des éléments de la liste s'inscrivent dans la boîte de contenu de l'élément parent. Cette dernière n'a, pour l'instant, aucune marge ni aucun remplissage (<em>padding</em>). On obtient donc ce résultat :</p>
+
+<p><img alt="" src="/@api/deki/files/621/=Consistent-list-indentation-figure3.gif"></p>
+
+<p>Ici, la bordure pointillée bleue révèle les limites de la zone de contenu de l'élément <code>ul</code>. Puisqu'il n'a pas de remplissage (<em>padding</em>), cette limite épouse étroitement celles des trois éléments de la liste.</p>
+
+<p>On ajoute maintenant les puces aux éléments de la liste. Puisqu'il s'agit d'une liste non ordonnée, nous ajoutons les traditionnelles puces en forme de disques pleins, comme ceci :</p>
+
+<p><img alt="" src="/@api/deki/files/622/=Consistent-list-indentation-figure4.gif"></p>
+
+<p>Visuellement, ces marqueurs apparaissent en dehors de la zone de contenu de l'élément <code>ul</code>, mais ce n'est pas ce qui est le plus important ici. Ce qui compte, c'est que ces marqueurs prennent place en dehors de la « boîte principale » des éléments <code>li</code>. Ils apparaissent comme des sortes d'appendices aux items de liste, qui se tiennent en dehors de la zone de contenu de chaque item, tout en étant attaché à chaque <code>li</code>.</p>
+
+<p>C'est pourquoi, dans tous les navigateurs sauf Internet Explorer Windows, les marqueurs sont placés à l'extérieur des bordures de l'élément <code>li</code>, dès lors que la propriété {{cssxref("list-style-position")}} vaut <code>outside</code>. Si cette valeur est changée en <code>inside</code>, les marqueurs seront alors déplacés à l'intérieur du contenu des éléments <code>li</code>, comme s'il s'agissait d'une boîte en ligne placée au tout début de ceux-ci.</p>
+
+<h3 id="Obtenir_une_double_indentation">Obtenir une double indentation</h3>
+
+<p>Comment cela va-t-il être rendu dans un document ? Pour le moment, nous avons un résultat équivalent à ces styles :</p>
+
+<pre class="brush: css">ul, li {
+  margin-left: 0;
+  padding-left: 0;
+}</pre>
+
+<p>Si nous plaçons cette liste en l'état dans un document, elle n'aura aucune indentation apparente, et nos marqueurs courront le risque d'être rejetés au-delà de la limite gauche de la fenêtre du navigateur.</p>
+
+<p>Afin d'éviter ça et d'imposer une indentation, le navigateur pourra implémenter l'une des trois approches suivantes :</p>
+
+<ol>
+ <li>Doter chaque élément <code>li</code> d'une marge gauche ;</li>
+ <li>Doter chaque élément <code>ul</code> d'une marge gauche ;</li>
+ <li>Doter chaque élément <code>ul</code> d'un padding gauche quelconque.</li>
+</ol>
+
+<p>Telles que les choses se sont faites, aucun navigateur ne semble avoir choisi la première solution. Internet Explorer pour Windows et Macintosh, ainsi qu'Opera, ont adopté la seconde solution. La troisième a été choisie par Gecko et donc par tous les navigateurs embarquant celui-ci.</p>
+
+<p>Observons de plus près ces deux dernières approches. Dans Internet Explorer et Opera, les listes sont indentées en fixant une marge gauche de 40 pixels pour l'élément <code>ul</code>. Si nous appliquons une couleur d'arrière-plan, à celui-ci en conservant les bordures des éléments de la liste et de cet élément <code>ul</code>, nous obtenons le résultat qui suit :</p>
+
+<p><img alt="" src="/@api/deki/files/623/=Consistent-list-indentation-figure5.gif"></p>
+
+<p>De son côté, Gecko applique un <em>padding</em> gauche de 40 pixels à cet élément <code>ul</code>. Avec les mêmes styles que dans le cas précédent, notre exemple s'affichera dans un navigateur basé sur Gecko de la façon suivante :</p>
+
+<p><br>
+ <img alt="" src="/@api/deki/files/624/=Consistent-list-indentation-figure6.gif" style="height: 102px; width: 242px;"></p>
+
+<p>Comme nous pouvons le voir, les marqueurs restent attachés aux éléments <code>li</code>, où qu'ils soient. La différence réside uniquement dans la manière dont l'élément <code>ul</code> est mis en forme. Nous ne pouvons voir cette différence que si nous essayons de donner un arrière-plan ou des bordures à cet élément <code>ul</code></p>
+
+<h2 id="Obtenir_un_rendu_homogène">Obtenir un rendu homogène</h2>
+
+<p>Après ces observations, nous obtenons la conclusion suivante : si on souhaite obtenir un rendu de liste homogène entre Gecko, Internet Explorer et Opera, il est nécessaire de spécifier <em>à la fois</em> la marge gauche et le <em>padding</em> gauche de l'élément <code>ul</code>. L'élément <code>li</code> peut être ignoré ici. Si vous voulez reproduire le rendu par défaut de Netscape 6.x, vous écrirez :</p>
+
+<pre class="brush: css">ul {
+  margin-left: 0;
+  padding-left: 40px;
+}</pre>
+
+<p>Si vous préférez suivre le modèle Internet Explorer/Opera, vous écrirez alors :</p>
+
+<pre class="brush: css">ul {
+  margin-left: 40px;
+  padding-left: 0;
+}</pre>
+
+<p>Naturellement, vous pouvez utiliser les valeurs de votre choix. Les fixer toutes deux à <code>1.25em</code> si vous en avez envie - il n'y a aucune raison de s'en tenir uniquement à des valeurs en pixels. Et si vous voulez obtenir des listes sans indentation, vous devrez alors, là encore, spécifier à la fois un <em>padding</em> et une marge nuls :</p>
+
+<pre class="brush: css">ul {
+  margin-left: 0;
+  padding-left: 0;
+}</pre>
+
+<p>Souvenez-vous, cependant, qu'en faisant ainsi, vos puces se tiendront en dehors de votre liste et de son élément parent. Si ce parent est l'élément <code>body</code>, il y a de fortes chances qu'elles se retrouvent complètement en dehors de la fenêtre d'affichage du navigateur et qu'elles ne soient donc invisibles.</p>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>Au bout du compte, on voit qu'aucun des navigateurs mentionnés dans cet article n'a tort ou raison sur ce point. Ces navigateurs utilisent différents styles par défaut et c'est là que réside le seul problème. En veillant à mettre en forme à la fois la marge gauche et le <em>padding</em> gauche des listes, on peut obtenir un rendu bien plus homogène de l'indentation sur les différents navigateurs.</p>
+
+<h2 id="Recommandations">Recommandations</h2>
+
+<ul>
+ <li>Lorsque vous modifiez l'indentation des listes, veillez à indiquer à la fois le <em>padding</em> et la marge.</li>
+</ul>
diff --git a/files/fr/web/css/css_lists/index.html b/files/fr/web/css/css_lists/index.html
new file mode 100644
index 0000000000..781d7cb961
--- /dev/null
+++ b/files/fr/web/css/css_lists/index.html
@@ -0,0 +1,57 @@
+---
+title: CSS Lists
+slug: Web/CSS/CSS_Lists
+tags:
+  - CSS
+  - Reference
+translation_of: Web/CSS/CSS_Lists_and_Counters
+---
+<div>{{CSSRef}}</div>
+
+<p><em><strong>CSS Lists </strong></em>(listes CSS) est un module CSS qui définit la façon dont les listes sont mises en forme, comment des styles peuvent être appliqués aux marqueurs.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("list-style-image")}}</li>
+ <li>{{cssxref("list-style-type")}}</li>
+ <li>{{cssxref("list-style-position")}}</li>
+ <li>{{cssxref("list-style")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Indentation_homogène_des_listes">Indentation homogène des listes</a></dt>
+ <dd>Explique comment obtenir une indentation homogène dans les différents navigateurs.</dd>
+ <dt><a href="/fr/docs/Web/CSS/CSS_Lists/Compteurs_CSS">Utiliser les compteurs CSS</a></dt>
+ <dd>Explique comment utiliser les propriétés CSS relatives aux compteurs pour numéroter les listes.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Lists')}}</td>
+   <td>{{Spec2('CSS3 Lists')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'generate.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/css/css_logical_properties/concepts_de_base/index.html b/files/fr/web/css/css_logical_properties/concepts_de_base/index.html
new file mode 100644
index 0000000000..4129c926c7
--- /dev/null
+++ b/files/fr/web/css/css_logical_properties/concepts_de_base/index.html
@@ -0,0 +1,75 @@
+---
+title: Concepts de base des propriétés et valeurs logiques
+slug: Web/CSS/CSS_Logical_Properties/Concepts_de_base
+tags:
+  - CSS
+  - Guide
+  - Propriété logique
+translation_of: Web/CSS/CSS_Logical_Properties/Basic_concepts
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">La spécification relative aux propriétés et valeurs logiques introduit une correspondance relative au flux pour de nombreuses propriétés et valeurs CSS. Dans cet article, nous verrons une introduction de cette spécification et expliquerons les propriétés et valeurs relatives au flux.</p>
+
+<h2 id="Quel_intérêt_pour_les_propriétés_logiques">Quel intérêt pour les propriétés logiques ?</h2>
+
+<p>Historiquement, CSS permettait de dimensionner des objets selon les dimensions physiques de l'écran. On pouvait alors décrire des boîtes avec une certaine largeur ({{CSSxRef("width")}}) et une certaine hauteur ({{CSSxRef("height")}}), positionner les éléments à partir du haut (<code>top</code>) et de la gauche (<code>left</code>), faire flotter les objets, créer des bordures, des marges, du remplissage (<em>padding</em>) en haut, à droite, en bas et à gauche (resp. <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>, etc.). La spécification <a href="https://drafts.csswg.org/css-logical/">sur les propriétés et valeurs logiques</a> définit des correspondances entres ces valeurs physiques et des valeurs logiques, relatives au flux : <code>start</code> et <code>end</code> plutôt que <code>left</code> et <code>right</code> ou <code>top</code> et <code>bottom</code>.</p>
+
+<p>Prenons un exemple pour comprendre la nécessité de telles propriétés et valeurs logiques. On dispose d'une grille CSS et le conteneur de la grille possède une certaine largeur. On y utilise {{CSSxRef("align-self")}} et {{CSSxRef("justify-self")}} afin d'aligner les éléments à l'intérieur de la grille. Ces propriétés sont relatives au flux : <code>justify-self: start</code> aligne l'élément au début de l'axe en ligne et <code>align-self: start</code> aligne l'élément au début de l'axe de bloc.</p>
+
+<p><img alt="A grid in a horizontal writing mode" src="https://mdn.mozillademos.org/files/16338/grid-horizontal-width-sm.png" style="display: block; margin: 0 auto; width: 350px;"></p>
+
+<p>Si on change le mode d'écriture de ce composant grâce à la propriété {{CSSxRef("writing-mode")}} et avec la valeur <code>vertical-rl</code>, l'alignement continue de fonctionner de la même façon : l'axe en ligne est désormais l'axe vertical et l'axe de bloc court horizontalement. La grille n'a cependant pas la même allure car la largeur est nécessairement définie pour l'axe horizontal : de façon physique et pas relativement au flux de texte.</p>
+
+<p><img alt="A grid in vertical writing mode." src="https://mdn.mozillademos.org/files/16339/grid-vertical-width-sm.png" style="display: block; margin: 0 auto; width: 350px;"></p>
+
+<p>Si on avait utilisé la propriété logique {{CSSxRef("inline-size")}} plutôt que <code>width</code>, le composant aurait gardé les mêmes proportions, quel que soit le mode d'écriture utilisé.</p>
+
+<p><img alt="A grid layout in vertical writing mode" src="https://mdn.mozillademos.org/files/16337/grid-vertical-inline-size-small.png" style="display: block; height: 382px; margin: 0 auto; width: 200px;"></p>
+
+<p>Vous pouvez essayer ces différentes valeurs dans l'exemple qui suit et notamment modifier la propriété <code>writing-mode</code> pour la passer de <code>vertical-rl</code> à <code>horizontal-tb</code> sur le sélecteur <code>.box</code> afin d'observer la façon dont les différentes propriétés modifient la disposition.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/intro-grid-example.html", '100%', 700)}}</p>
+
+<p><span style="letter-spacing: -0.00278rem;">Lorsqu'on travaille sur un site où on utilise un mode d'écriture qui n'est pas horizontal et progressant du haut vers le bas ou qu'on travaille sur un concept créatif, pouvoir utiliser des concepts relatifs au flux plutôt que des valeurs géométriques absolues.</span></p>
+
+<h2 id="Axe_de_bloc_et_axe_en_ligne">Axe de bloc et axe en ligne</h2>
+
+<p>Lorsqu'on travaille avec les propriétés et les valeurs logiques, il y a deux concepts majeurs : l'axe de bloc et l'axe en ligne qui sont les deux dimensions de l'espace. Comme nous l'avons vu avant, les nouvelles méthodes de disposition CSS (comme les boîtes flexibles et les grilles CSS) utilisent les concepts de <code>block</code> et <code>inline</code> plutôt que <code>right</code> et <code>left</code>/<code>top</code> et <code>bottom</code> pour l'alignement des objets.</p>
+
+<p>La dimension en ligne (<em>inline</em>) correspond à l'axe selon lequel les lignes de texte sont écrites pour ce mode d'écriture. Ainsi, pour un document français, le texte sera écrit horizontalement de gauche à droite et pour un document arabe écrit de droite à gauche, la dimension en ligne est l'axe horizontal. Si on utilise un mode d'écriture vertical (le japonais par exempl), la dimension en ligne sera verticale car les lignes de texte de ce mode sont écrites verticalement.</p>
+
+<p>La dimension de bloc correspond à l'axe orthogonal et généralement à la direction selon laquelle les blocs de texte (les paragraphes) sont agencés. En français ou en arabe, cet axe est vertical, pour les modes d'écritures écrits verticalement, cet axe est horizontal.</p>
+
+<p>Le diagramme ci-après illustre l'organisation des axes en ligne et des axes de bloc pour un mode d'écriture horizontal :</p>
+
+<p><img alt="diagram showing the inline axis running horizontally, block axis vertically." src="https://mdn.mozillademos.org/files/16340/mdn-horizontal.png" style="display: block; height: 382px; margin: 0 auto; width: 521px;"></p>
+
+<p>Le diagramme suivant illustre l'axe en ligne et l'axe de bloc pour un mode d'écriture vertical :</p>
+
+<p><img alt="Diagram showing the block axis running horizontally the inline axis vertically." src="https://mdn.mozillademos.org/files/16341/mdn-vertical.png" style="display: block; height: 382px; margin: 0 auto; width: 418px;"></p>
+
+<h2 id="Prise_en_charge_des_navigateurs">Prise en charge des navigateurs</h2>
+
+<p>Les propriétés et valeurs logiques peuvent être catégorisées selon différents groupes, notamment pour la compatibilité des navigateurs. Certaines des propriétés logiques sont essentiellement des correspondances de propriétés physiques équivalentes ({{CSSxRef("inline-size")}} sera la propriété logique pouvant correspondre à la propriété physique {{CSSxRef("width")}} et {{CSSxRef("margin-inline-start")}} la propriété physique correspondant à {{CSSxRef("margin-left")}}). La prise en charge de ces propriétés logiques correspondant à des propriétés physiques est plutôt correcte pour les navigateurs récents, vous pouvez consulter les pages <a href="/en-US/docs/Web/CSS/CSS_Logical_Properties#Reference">de référence pour ces propriétés sur MDN</a>, seul Edge ne prend pas en charge ces propriétés à date (décembre 2018).</p>
+
+<p>On a également un groupe de propriétés qui ne possèdent pas de correspondances directes avec les propriétés physiques. Ces propriétés sont des propriétés raccourcies qui font référence aux deux extrêmités d'un axe. Ainsi {{CSSxRef("margin-block")}} sera une propriété raccourcie pour {{CSSxRef("margin-block-start")}} et {{CSSxRef("margin-block-end")}}. Ce deuxième groupe n'est actuellement pas pris en charge par les navigateurs.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note : </strong>Le groupe de travail CSS est actuellement en réflexion pour les propriétés raccourcies avec quatre valeurs pour les propriétés logiques. Autrement dit, comment définir les marges logiques de la façon dont on utilise la propriété {{CSSxRef("margin")}}. Il faudrait en effet une sorte de modificateur si on continue d'utiliser le nom <code>margin</code> pour les propriétés relatives au flux. Pour en savoir plus sur les suggestions et commentaires, vous pouvez consulter l'<em>issue</em> GitHub <a href="https://github.com/w3c/csswg-drafts/issues/1282">n°1282</a>.</p>
+</div>
+
+<h3 id="Tester_la_compatibilité_des_navigateurs">Tester la compatibilité des navigateurs</h3>
+
+<p>Il est possible de tester la prise en charge des propriétés et valeurs logiques en utilisant une requête de fonctionnalité (<code>@supports</code>). Ainsi, on pourrait définit une propriété {{CSSxRef("width")}}, tester si {{CSSxRef("inline-size")}} est prise en charge et, le cas échéant, définir <code>width</code> avec <code>auto</code> et <code>inline-size</code> avec la valeur initialement utilisée pour <code>width</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/intro-feature-queries.html", "100%", 700)}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">L'alignement des boîtes pour une disposition en grille</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_Flexbox">L'alignement des boîtes pour une disposition flexible</a></li>
+ <li><a href="https://www.smashingmagazine.com/2018/03/understanding-logical-properties-values/">Comprendre les propriétés et les valeurs logiques</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Disposition_flux_et_modes_écriture">Les modes d'écriture</a></li>
+</ul>
diff --git a/files/fr/web/css/css_logical_properties/dimensionnement/index.html b/files/fr/web/css/css_logical_properties/dimensionnement/index.html
new file mode 100644
index 0000000000..f6ffe024e6
--- /dev/null
+++ b/files/fr/web/css/css_logical_properties/dimensionnement/index.html
@@ -0,0 +1,89 @@
+---
+title: Propriétés logiques pour le dimensionnement
+slug: Web/CSS/CSS_Logical_Properties/Dimensionnement
+tags:
+  - CSS
+  - Guide
+  - Propriété logique
+translation_of: Web/CSS/CSS_Logical_Properties/Sizing
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Dans ce guide, nous verrons les correspondances entre les propriétés physiques et les propriétés logiques qui peuvent être utilisées afin de dimensionner des éléments au sein d'un document.</p>
+
+<p>Lorsqu'on définit la taille d'un objet, <a href="https://drafts.csswg.org/css-logical/">la spécification sur les propriétés et les valeurs logiques</a> permet de définir le dimensionnement en fonction du flux du texte (le mode d'écriture et son orientation) plutôt que relativement aux dimensions physiques du support (haut / bas / gauche / droite). Bien que ce premier fonctionnement, utilisant des propriétés et des valeurs <em>logiques</em>, puisse devenir la méthode par défaut à l'avenir, on peut tout à fait avoir besoin d'utiliser des propriétés et des valeurs <em>physiques</em> en combinaison avec ces propriétés et ces valeurs logiques.</p>
+
+<h2 id="Correspondances_pour_les_dimensions">Correspondances pour les dimensions</h2>
+
+<p>Le tableau qui suit fournit les correspondances entre les propriétés logiques et les propriétés physiques lorsqu'on utilise un mode d'écriture horizontal progressant de haut en bas (<code>horizontal-tb</code>) comme c'est le cas avec le français ou l'arabe. Dans ce cas, la propriété physique {{CSSxRef("width")}} serait équivalente à la propriété logique {{CSSxRef("inline-size")}}.</p>
+
+<p>Si on utilisait un mode d'écriture vertical, {{CSSxRef("inline-size")}} aurait correspondu à {{CSSxRef("height")}}.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Propriété logique</th>
+   <th scope="col">Propriété physique</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{CSSxRef("inline-size")}}</td>
+   <td>{{CSSxRef("width")}}</td>
+  </tr>
+  <tr>
+   <td>{{CSSxRef("block-size")}}</td>
+   <td>{{CSSxRef("height")}}</td>
+  </tr>
+  <tr>
+   <td>{{CSSxRef("min-inline-size")}}</td>
+   <td>{{CSSxRef("min-width")}}</td>
+  </tr>
+  <tr>
+   <td>{{CSSxRef("min-block-size")}}</td>
+   <td>{{CSSxRef("min-height")}}</td>
+  </tr>
+  <tr>
+   <td>{{CSSxRef("max-inline-size")}}</td>
+   <td>{{CSSxRef("max-width")}}</td>
+  </tr>
+  <tr>
+   <td>{{CSSxRef("max-block-size")}}</td>
+   <td>{{CSSxRef("max-height")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple_pour_width_et_height">Exemple pour <code>width</code> et <code>height</code></h2>
+
+<p>Les propriétés logiques correspondant à {{CSSxRef("width")}} et {{CSSxRef("height")}} sont : {{CSSxRef("inline-size")}} pour la taille sur la dimension en ligne et {{CSSxRef("block-size")}}, pour la taille selon la dimension de bloc. Si on travaille sur un document en français, on pourra remplacer <code>width</code> par <code>inline-size</code> et <code>height</code> par <code>block-size</code> et on obtiendra le même résultat.</p>
+
+<p>Dans l'exemple interactif suivant, le mode d'écriture est explicitement définit avec <code>horizontal-tb</code>. En modifiant cette valeur pour la passer à <code>vertical-rl</code>, on verra que le premier exemple, qui utilise <code>width</code> et <code>height</code>, conserve le même dimensionnement, même si le texte s'affiche verticalement. Pour le second exemple qui utilise <code>inline-size</code> et <code>block-size</code>, on voit que le texte et le dimensionnement suivent l'orientation du flux et que le bloc est ainsi tourné dans son intégralité.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/size-inline-block.html", '100%', 500)}}</p>
+
+<h2 id="Exemple_pour_min-width_et_min-height">Exemple pour <code>min-width</code> et <code>min-height</code></h2>
+
+<p>Il existe également des propriétés logiques correspondantes pour {{CSSxRef("min-width")}} et {{CSSxRef("min-height")}} : {{CSSxRef("min-inline-size")}} et {{CSSxRef("min-block-size")}}. Celles-ci fonctionnent de la même façon que <code>inline-size</code> et <code>block-size</code> mais paramètrent une taille minimale plutôt qu'une taille fixe.</p>
+
+<p>Dans l'exemple suivant, vous pouvez passer le mode d'écriture en <code>vertical-rl</code> et observer l'effet obtenu. Là encore, on utilise la propriété physique (<code>min-height</code>) sur le premier exemple et la propriété logique (<code>min-block-size</code>) sur le second.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/size-min.html", "100%", 500)}}</p>
+
+<h2 id="Exemple_pour_max-width_et_max-height">Exemple pour <code>max-width</code> et <code>max-height</code></h2>
+
+<p>Enfin, on peut utiliser {{CSSxRef("max-inline-size")}} et {{CSSxRef("max-block-size")}} afin de remplacer les propriétés physiques {{CSSxRef("max-width")}} et {{CSSxRef("max-height")}}. Là encore, vous pouvez modifier l'exemple qui suit pour observer les conséquences de ce changement.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/size-max.html", "100%", 500)}}</p>
+
+<h2 id="Mots-clés_logiques_pour_resize">Mots-clés logiques pour <code>resize</code></h2>
+
+<p>La propriété {{CSSxRef("resize")}} définit si un objet peut être redimensionné. Cette propriété s'utilise avec les valeurs physiques <code>horizontal</code> et <code>vertical</code>. La propriété <code>resize</code> peut désormais s'utiliser également avec des valeurs logiques : <code>resize: inline</code> permettra de redimensionner un objet sur l'axe en ligne et <code>resize: block</code> permettra de le redimensionner sur l'axe en bloc.</p>
+
+<p>La valeur <code>both</code> peut être utilisée dans un contexte physique ou dans un contexte logique : elle permet le redimensionnement sur les deux axes. Vous pouvez manipuler cette propriété et ces valeurs dans l'exemple interactif suivant.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/size-resize.html", "100%", 700)}}</p>
+
+<div class="blockIndicator warning">
+<p><strong>Attention !</strong> À l'heure actuelle (décembre 2018), seul Firefox prend en charge les valeurs logiques pour <code>resize</code>.</p>
+</div>
diff --git a/files/fr/web/css/css_logical_properties/index.html b/files/fr/web/css/css_logical_properties/index.html
new file mode 100644
index 0000000000..bf77e064c1
--- /dev/null
+++ b/files/fr/web/css/css_logical_properties/index.html
@@ -0,0 +1,174 @@
+---
+title: CSS Logical Properties
+slug: Web/CSS/CSS_Logical_Properties
+tags:
+  - Aperçu
+  - CSS
+  - CSS Logical Properties
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/CSS_Logical_Properties
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><em><strong>CSS Logical Properties</strong></em> (les propriétés logiques CSS) est un module CSS qui définit une correspondance logique vers les propriétés physiques de contrôle de la mise en page selon le sens de lecture et l'orientation du texte. On aura deux directions logiques : <em>block</em> et <em>inline</em>, perpendiculaires, qui dépendent du sens de l'orientation du document.</p>
+
+<p>Ce module définit également les propriétés logiques et les valeurs pour les propriétés précédemment définies avec <abbr title="Cascading Stylesheets">CSS</abbr> 2.1. Les propriétés logiques sont des propriétés dont l'orientation est relative au mode d'écriture du document et possèdent des propriétés physiques équivalentes.</p>
+
+<h3 id="Dimension_de_bloc_ou_de_ligne">Dimension de bloc ou de ligne</h3>
+
+<p>Les propriétés et valeurs logiques utilisent les termes abstraits <em>bloc</em> (<em>block</em>) ou ligne (<em>inline</em>) afin de décrire leur direction. La signification physique de ces termes dépend du <a href="/fr/docs/Web/CSS/CSS_Writing_Modes">mode d'écriture</a>.</p>
+
+<dl>
+ <dt><a id="block-dimension" name="block-dimension">Dimension de bloc</a></dt>
+ <dd>C'est la dimension perpendiculaire au flux du texte sur une ligne. Autrement dit, il s'agit de la dimension verticale lorsque le texte est écrit dans un mode horizontal et de la dimension horizontale lorsque le texte est écrit verticalement (pour le français, cette dimension correspond donc à l'axe vertical).</dd>
+ <dt><a name="inline-dimension">Dimension en ligne</a></dt>
+ <dd>C'est la dimension parallèle au flux du texte sur une ligne. Autrement dit, il s'agit de la dimension horizontale lorsque le texte est écrit dans un mode horizontal et de la dimension verticale lorsque le texte est écrit verticalement (pour le français, cette dimension correspond donc à l'axe horizontal).</dd>
+</dl>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés_relatives_au_dimensionnement">Propriétés relatives au dimensionnement</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("block-size")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("inline-size")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("max-block-size")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("max-inline-size")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("min-block-size")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("min-inline-size")}} {{Experimental_Inline}}</li>
+</ul>
+</div>
+
+<h3 id="Propriétés_relatives_aux_marges_bordures_et_remplissages">Propriétés relatives aux marges, bordures et remplissages</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("border-block")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-block-color")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-block-end")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-block-end-color")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-block-end-style")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-block-end-width")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-block-start")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-block-start-color")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-block-start-style")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-block-start-width")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-block-style")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-block-width")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-color")}} <span style="white-space: nowrap;">(mot-clé <code>logical</code> {{Experimental_Inline}})</span></li>
+ <li>{{CSSxRef("border-inline")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-inline-color")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-inline-end")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-inline-end-color")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-inline-end-style")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-inline-end-width")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-inline-start")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-inline-start-color")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-inline-start-style")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-inline-start-width")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-inline-style")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-inline-width")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-start-start-radius")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-start-end-radius")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-end-start-radius")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-end-end-radius")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-style")}} <span style="white-space: nowrap;">(mot-clé <code>logical</code> {{Experimental_Inline}})</span></li>
+ <li>{{CSSxRef("border-width")}} <span style="white-space: nowrap;">(mot-clé <code>logical</code> {{Experimental_Inline}})</span></li>
+ <li>{{CSSxRef("margin")}} <span style="white-space: nowrap;">(mot-clé <code>logical</code> {{Experimental_Inline}})</span></li>
+ <li>{{CSSxRef("margin-block")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("margin-block-end")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("margin-block-start")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("margin-inline")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("margin-inline-end")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("margin-inline-start")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("padding")}} <span style="white-space: nowrap;">(mot-clé <code>logical</code> {{Experimental_Inline}})</span></li>
+ <li>{{CSSxRef("padding-block")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("padding-block-end")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("padding-block-start")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("padding-inline")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("padding-inline-end")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("padding-inline-start")}} {{Experimental_Inline}}</li>
+</ul>
+</div>
+
+<h3 id="Propriétés_relatives_aux_flottements_et_au_positionnement">Propriétés relatives aux flottements et au positionnement</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("clear")}} (mots-clés <code style="white-space: nowrap;">inline-end</code> {{Experimental_Inline}} et <span style="white-space: nowrap;"><code>inline-start</code> {{Experimental_Inline}})</span></li>
+ <li>{{CSSxRef("float")}} (mots-clés <code style="white-space: nowrap;">inline-end</code> {{Experimental_Inline}} et <span style="white-space: nowrap;"><code>inline-start</code> {{Experimental_Inline}})</span></li>
+ <li>{{CSSxRef("inset")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("inset-block")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("inset-block-end")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("inset-block-start")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("inset-inline")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("inset-inline-end")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("inset-inline-start")}} {{Experimental_Inline}}</li>
+</ul>
+</div>
+
+<h3 id="Autres_propriétés">Autres propriétés</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("caption-side")}} (mots-clés <code style="white-space: nowrap;">inline-end</code> {{Experimental_Inline}} et <span style="white-space: nowrap;"><code>inline-start</code> {{Experimental_Inline}})</span></li>
+ <li>{{CSSxRef("overflow-block")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("overflow-inline")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("resize")}} {{Experimental_Inline}} (mots-clés <code>block</code> {{Experimental_Inline}} et <span style="white-space: nowrap;"><code>inline</code> {{Experimental_Inline}})</span></li>
+ <li>{{CSSxRef("text-align")}} (mots-clés <code>end</code> {{Experimental_Inline}} et <span style="white-space: nowrap;"><code>start</code> {{Experimental_Inline}})</span></li>
+</ul>
+</div>
+
+<h3 id="Propriétés_dépréciées">Propriétés dépréciées</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("offset-block-end")}} {{Non-standard_Inline}} {{Deprecated_Inline}} <span style="white-space: nowrap;">(désormais {{CSSxRef("inset-block-end")}} {{Experimental_Inline}})</span></li>
+ <li>{{CSSxRef("offset-block-start")}} {{Non-standard_Inline}} {{Deprecated_Inline}} <span style="white-space: nowrap;">(désormais {{CSSxRef("inset-block-start")}} {{Experimental_Inline}})</span></li>
+ <li>{{CSSxRef("offset-inline-end")}} {{Non-standard_Inline}} {{Deprecated_Inline}} <span style="white-space: nowrap;">(désormais {{CSSxRef("inset-inline-end")}} {{Experimental_Inline}})</span></li>
+ <li>{{CSSxRef("offset-inline-start")}} {{Non-standard_Inline}} {{Deprecated_Inline}} <span style="white-space: nowrap;">(désormais {{CSSxRef("inset-inline-start")}} {{Experimental_Inline}})</span></li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Logical_Properties/Concepts_de_base">Concepts de base pour les propriétés logiques et les valeurs logiques</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Logical_Properties/Dimensionnement">Les propriétés logiques utiles au dimensionnement</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Logical_Properties/Propriétés_logiques_marges_bordures_remplissages">Les propriétés logiques utiles aux marges, bordures et remplissage (<em>padding</em>)</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Logical_Properties/Propriétés_logiques_flottements_positionnement">Les propriétés logiques utiles aux flottements et au positionnement</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_générale">Compatibilité générale</h2>
+
+<p>De façon générale :</p>
+
+<ul>
+ <li>Firefox prend en charge les propriétés logiques lorsqu'il existe une correspondance directe avec les propriétés physiques.</li>
+ <li>Idem pour Chrome à partir de la version 69.</li>
+ <li>Edge ne prend actuellement (décembre 2018) pas en charge ces propriétés.</li>
+ <li>Firefox 66 introduit la prise en charge de deux valeurs raccourcies qui sont également derrière un <em>flag</em> pour Chrome.</li>
+</ul>
+
+<p>Pour des informations précises sur chaque propriété, se référer au tableau de compatibilité des pages des propriétés.</p>
diff --git a/files/fr/web/css/css_logical_properties/propriétés_logiques_flottements_positionnement/index.html b/files/fr/web/css/css_logical_properties/propriétés_logiques_flottements_positionnement/index.html
new file mode 100644
index 0000000000..3a99d5bbad
--- /dev/null
+++ b/files/fr/web/css/css_logical_properties/propriétés_logiques_flottements_positionnement/index.html
@@ -0,0 +1,143 @@
+---
+title: Propriétés logiques pour les flottements et le positionnement
+slug: Web/CSS/CSS_Logical_Properties/Propriétés_logiques_flottements_positionnement
+tags:
+  - CSS
+  - Guide
+  - Propriété logique
+translation_of: Web/CSS/CSS_Logical_Properties/Floating_and_positioning
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><a href="https://drafts.csswg.org/css-logical/">La spécification sur les propriétés et valeurs logiques</a> définit des valeurs logiques qui correspondent aux valeurs physiques utilisées pour {{cssxref("float")}} et {{cssxref("clear")}}. Elle définit aussi des propriétés logiques pour le positionnement lorsqu'on utilise une <a href="/fr/docs/Web/CSS/CSS_Positioning">disposition positionnée</a>. Dans ce guide, nous verrons comment utiliser ces valeurs et ces propriétés logiques.</p>
+
+<h2 id="Correspondance_entre_les_propriétés_et_les_valeurs">Correspondance entre les propriétés et les valeurs</h2>
+
+<p>Le tableau ci-après définit les propriétés et les valeurs que nous verrons dans ce guide et la correspondance avec les propriétés et valeurs physiques si on utilisait un mode d'écriture horizontal allant de gauche à droite.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Propriété ou valeur logique</th>
+   <th scope="col">Propriété ou valeur physique</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{cssxref("float")}}<code>: inline-start</code></td>
+   <td>{{cssxref("float")}}<code>: left</code></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("float")}}<code>: inline-end</code></td>
+   <td>{{cssxref("float")}}<code>: right</code></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("clear")}}<code>: inline-start</code></td>
+   <td>{{cssxref("clear")}}<code>: left</code></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("clear")}}<code>: inline-end</code></td>
+   <td>{{cssxref("clear")}}<code>: right</code></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("inset-inline-start")}}</td>
+   <td>{{cssxref("left")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("inset-inline-end")}}</td>
+   <td>{{cssxref("right")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("inset-block-start")}}</td>
+   <td>{{cssxref("top")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("inset-block-end")}}</td>
+   <td>{{cssxref("bottom")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("text-align")}}<code>: start</code></td>
+   <td>{{cssxref("text-align")}}<code>: left</code></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("text-align")}}<code>: end</code></td>
+   <td>{{cssxref("text-align")}}<code>: right</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>En plus de ces correspondances, certaines propriétés logiques raccourcies ont été ajoutées. Pour celles-ci, qui ciblent les extrêmités des axes en ligne ou de bloc, il n'y a pas de correspondance avec des propriétés physiques existantes à l'exception de {{cssxref("inset")}}.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Propriété logique</th>
+   <th scope="col">Objectif</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{cssxref("inset-inline")}}</td>
+   <td>Cette propriété définit simultanément les décalages pour les deux côtés situés sur l'axe en ligne.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("inset-block")}}</td>
+   <td>Cette propriété définit simultanément les décalages pour les deux côtés situés sur l'axe de bloc.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("inset")}}</td>
+   <td>Cette propriété définit les valeurs des quatre décalages.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple_d'un_flottement_et_d'un_dégagement">Exemple d'un flottement et d'un dégagement</h2>
+
+<p>Les valeurs physiques utilisées avec les propriétés {{cssxref("float")}} et {{cssxref("clear")}} sont <code>left</code>, <code>right</code> et <code>both</code>. Les valeurs logiques définies par la spécification sont <code>inline-start</code> et <code>inline-end</code> et qui peuvent correspondre à <code>left</code> et <code>right</code> selon le mode d'écriture.</p>
+
+<p>Dans l'exemple ci-après, on a deux boîtes : la première flotte avec <code>float: left</code> et la deuxième avec <code>float: inline-start</code>. Si on modifie la propriété <code>writing-mode</code> pour la passer en <code>vertical-rl</code> ou si on modifie <code>direction</code> en <code>rtl</code>, on pourra voir que la première boîte flotte toujours à gauche tandis que la boîte ciblée avec <code>inline-start</code> suit la direction et le mode d'écriture.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/float.html", '100%', 700)}}</p>
+
+<h2 id="Exemple_des_propriétés_inset_pour_les_dispositions_positionnées">Exemple des propriétés <code>inset</code> pour les dispositions positionnées</h2>
+
+<p>Le positionnement permet généralement de position un élément de façon relative à son bloc englobant. La plupart du temps, on décale l'objet relativement à la position qu'il aurait occupé sur le flux normal. Par le passé, on utilisait les propriétés physiques {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} et {{cssxref("left")}}.</p>
+
+<p>Ces propriétés s'utilisent avec une longueur ou avec une pourcentage relatif aux dimensions de l'écran de l'utilisateur.</p>
+
+<p>De nouvelles propriétés ont été définies dans la spécifications des propriétés logiques et permettent de positionner un élément relativement au flux du texte, quel que soit le mode d'écriture. Ces propriétés logiques sont :</p>
+
+<ul>
+ <li>{{cssxref("inset-block-start")}}</li>
+ <li>{{cssxref("inset-block-end")}}</li>
+ <li>{{cssxref("inset-inline-start")}}</li>
+ <li>{{cssxref("inset-inline-end")}}.</li>
+</ul>
+
+<p>Dans l'exemple qui suit, on utilise les propriétés <code>inset-block-start</code> et <code>inset-inline-end</code> afin de positionner la boîte bleue de façon absolue dans la zone définie par la bordure grise pointillée et qui a <code>position: relative</code>. En modifiant la propriété <code>writing-mode</code> afin d'utiliser la valeur <code>vertical-rl</code> ou en ajoutant <code>direction: rtl</code>, on pourra voir comment la boîte relative reste dans la direction du texte.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/positioning-inset.html", '100%', 700)}}</p>
+
+<h2 id="Nouvelles_propriétés_raccourcies">Nouvelles propriétés raccourcies</h2>
+
+<p>Cette spécification définit également de nouvelles propriétés logiques qui permettent de définir deux voire quatre valeurs avec une seule déclaration. Pour ces propriétés raccourcies, il n'existe pas d'équivalence avec des propriétés physiques.</p>
+
+<ul>
+ <li>{{cssxref("inset")}} — elle permet de définir les quatre décalages avec une correspondance physique.</li>
+ <li>{{cssxref("inset-inline")}} — elle permet de définir les décalages sur l'axe en ligne</li>
+ <li>{{cssxref("inset-block")}} — elle permet de définir les décalage sur l'axe de bloc</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Les navigateurs n'ont, pour l'instant, pas implémenté ces nouvelles propriétés (décembre 2018). Pour plus d'informations sur la compatibilité des navigateurs, vous pouvez vous référer aux tableaux de compatibilité présents à la fin des pages de référence pour ces propriétés.</p>
+</div>
+
+<h2 id="Exemple_de_valeurs_logiques_pour_text-align">Exemple de valeurs logiques pour <code>text-align</code></h2>
+
+<p>La propriété {{cssxref("text-align")}} peut s'utiliser avec quatre valeurs logiques qui sont relatives à la direction du texte. Plutôt que d'utiliser <code>left</code> et <code>right</code>, on pourra utiliser <code>start</code> et <code>end</code>. Dans l'exemple suivant, on définit <code>text-align: right</code> pour le premier bloc et <code>text-align: end</code> pour le second.</p>
+
+<p>Si on modifie la valeur de <code>direction</code> pour la passer à <code>rtl</code>, on verra que le premier bloc restera aligné à droite tandis que le texte du second s'alignera sur la fin logique.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/text-align.html", '100%', 700)}}</p>
+
+<p>Le comportement d'ensemble est plus cohérent lorsqu'on utilise des alignements de boîtes logiques (<code>start</code> et <code>end</code>) plutôt que des alignements basés sur les directions physiques.</p>
diff --git a/files/fr/web/css/css_logical_properties/propriétés_logiques_marges_bordures_remplissages/index.html b/files/fr/web/css/css_logical_properties/propriétés_logiques_marges_bordures_remplissages/index.html
new file mode 100644
index 0000000000..8b4da0bce6
--- /dev/null
+++ b/files/fr/web/css/css_logical_properties/propriétés_logiques_marges_bordures_remplissages/index.html
@@ -0,0 +1,297 @@
+---
+title: 'Propriétés logiques pour les marges, les bordures et les remplissages'
+slug: >-
+  Web/CSS/CSS_Logical_Properties/Propriétés_logiques_marges_bordures_remplissages
+tags:
+  - CSS
+  - Guide
+  - Propriété logique
+translation_of: Web/CSS/CSS_Logical_Properties/Margins_borders_padding
+---
+<p>{{CSSRef}}</p>
+
+<p class="summary">La spécification <a href="https://drafts.csswg.org/css-logical/">sur les propriétés et valeurs logiques</a> définit des correspondances pour les propriétés servant à définir les marges, les bordures et les remplissages (<em>padding</em>) et les propriétés raccourcies associées. Dans ce guide, nous verrons comment utiliser ces propriétés logiques.</p>
+
+<p>Si vous avez consulté la page principale sur <a href="/en-US/docs/Web/CSS/CSS_Logical_Properties">les propriétés et valeurs logiques</a>, vous avez pu voir une grande quantité de propriétés. Cela est principalement du au fait que pour chaque marge, bordure et remplissage, il y a quatre propriétés détaillées et une propriété raccourcie.</p>
+
+<h2 id="Correspondances_pour_les_marges_les_bordures_et_les_remplissages_(padding)">Correspondances pour les marges, les bordures et les remplissages (<em>padding</em>)</h2>
+
+<p>La spécification détaille les correspondances entre les valeurs logiques et les valeurs physiques. Dans le tableau qui suit,on liste les correspondances lorsque le mode d'écriture utilisé est <code>horizontal-tb</code> et où la direction du texte va de gauche à droite. L'axe en ligne est donc horizontal, dirigé de gauche à droite et {{cssxref("margin-inline-start")}} est équivalent à {{cssxref("margin-left")}}.</p>
+
+<p>Si on avait utilisé un mode d'écriture <code>horizontal-tb</code> orienté de droite à gauche, {{cssxref("margin-inline-start")}} aurait correspondu à {{cssxref("margin-right")}}. Pour un mode d'écriture vertical, elle aurait correspondu à {{cssxref("margin-top")}}.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Propriété logique</th>
+   <th scope="col">Propriété physique</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{cssxref("border-block-end")}}</td>
+   <td>{{cssxref("border-bottom")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-block-end-color")}}</td>
+   <td>{{cssxref("border-bottom-color")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-block-end-style")}}</td>
+   <td>{{cssxref("border-bottom-style")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-block-end-width")}}</td>
+   <td>{{cssxref("border-bottom-width")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-block-start")}}</td>
+   <td>{{cssxref("border-top")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-block-start-color")}}</td>
+   <td>{{cssxref("border-top-color")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-block-start-style")}}</td>
+   <td>{{cssxref("border-top-style")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-block-start-width")}}</td>
+   <td>{{cssxref("border-top-width")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-inline-end")}}</td>
+   <td>{{cssxref("border-right")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-inline-end-color")}}</td>
+   <td>{{cssxref("border-right-color")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-inline-end-style")}}</td>
+   <td>{{cssxref("border-right-style")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-inline-end-width")}}</td>
+   <td>{{cssxref("border-right-width")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-inline-start")}}</td>
+   <td>{{cssxref("border-left")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-inline-start-color")}}</td>
+   <td>{{cssxref("border-left-color")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-inline-start-style")}}</td>
+   <td>{{cssxref("border-left-style")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-inline-start-width")}}</td>
+   <td>{{cssxref("border-left-width")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-start-start-radius")}}</td>
+   <td>{{cssxref("border-top-left-radius")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-start-end-radius")}}</td>
+   <td>{{cssxref("border-bottom-left-radius")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-end-start-radius")}}</td>
+   <td>{{cssxref("border-top-right-radius")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-end-end-radius")}}</td>
+   <td>{{cssxref("border-bottom-right-radius")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("margin-block-end")}}</td>
+   <td>{{cssxref("margin-bottom")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("margin-block-start")}}</td>
+   <td>{{cssxref("margin-top")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("margin-inline-end")}}</td>
+   <td>{{cssxref("margin-right")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("margin-inline-start")}}</td>
+   <td>{{cssxref("margin-left")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("padding-block-end")}}</td>
+   <td>{{cssxref("padding-bottom")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("padding-block-start")}}</td>
+   <td>{{cssxref("padding-top")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("padding-inline-end")}}</td>
+   <td>{{cssxref("padding-right")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("padding-inline-start")}}</td>
+   <td>{{cssxref("padding-left")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>De nouvelles propriétés raccourcies sont également apparues et permettent de manipuler les deux extrêmités d'un même axe. Ces propriétés raccourcies n'ont pas de propriété physique équivalente.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Propriété</th>
+   <th scope="col">Objectif</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{cssxref("border-block")}}</td>
+   <td>Définit {{cssxref("border-color")}}, {{cssxref("border-style")}} et {{cssxref("border-width")}} pour les deux bordures sur l'axe de bloc.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-block-color")}}</td>
+   <td>Définit <code>border-color</code> pour les deux bordures sur l'axe de bloc.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-block-style")}}</td>
+   <td>Définit <code>border-style</code> pour les deux bordures sur l'axe de bloc.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-block-width")}}</td>
+   <td>Définit <code>border-width</code> pour les deux bordures sur l'axe de bloc.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-inline")}}</td>
+   <td>Définit <code>border-color</code>, <code>-style</code> et <code>-width</code> pour les deux bordures sur l'axe en ligne.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-inline-color")}}</td>
+   <td>Définit <code>border-color</code> pour les deux bordures sur l'axe en ligne.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-inline-style")}}</td>
+   <td>Définit <code>border-style</code> pour les deux bordures sur l'axe en ligne.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-inline-width")}}</td>
+   <td>Définit <code>border-width</code> pour les deux bordures sur l'axe en ligne.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("margin-block")}}</td>
+   <td>Défnit les deux marges sur l'axe de bloc.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("margin-inline")}}</td>
+   <td>Défnit les deux marges sur l'axe en ligne.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("padding-block")}}</td>
+   <td>Définit le remplissage (<em>padding</em>) sur l'axe de bloc.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("padding-inline")}}</td>
+   <td>Définit le remplissage (<em>padding</em>) sur l'axe en ligne.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples_de_marges">Exemples de marges</h2>
+
+<p>Les quatre propriétés logiques {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}}, {{cssxref("margin-block-start")}} et {{cssxref("margin-inline-end")}} peuvent être utilisées à la place des propriétés physiques habituelles afin de définir une marge.</p>
+
+<p>Dans l'exemple qui suit, on a créé deux boîtes et définit une marge différente pour chaque côté. On a aussi ajouté un conteneur supplémentaire avec une bordure afin de mieux visualiser la bordure.</p>
+
+<p>Une boîte utilise les propriétés physiques et la seconde les propriétés logiques. Vous pouvez modifier la valeur de la propriété {{cssxref("direction")}} (la changer en <code>rtl</code> par exemple) : la première boîte conservera les mêmes marges tandis que la seconde verra ses marges en ligne échangées.</p>
+
+<p>Vous pouvez également modifier la propriété <code>writing-mode</code> pour la passer de <code>horizontal-tb</code> à <code>vertical-rl</code>. Là aussi, vous pourrez voir les marges rester les mêmes pour la première boîte et passer d'un côté à l'autre pour la seconde.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/margin-longhands.html", '100%', 700)}}</p>
+
+<h3 id="Propriétés_raccourcies_pour_les_marges">Propriétés raccourcies pour les marges</h3>
+
+<p>Avec les propriétés logiques, on peut définir les deux côtés en ligne et les deux côtés en bloc à l'aide d'une propriété et on a donc de nouvelles propriétés raccourcies : {{cssxref("margin-inline")}} et {{cssxref("margin-block")}}. Ces deux propriétés s'utilisent avec deux valeurs : la première sera appliquée au côté du début pour l'axe et la deuxième au côté de fin. Si une seule valeur est utilisée, elle sera appliquée aux deux côtés.</p>
+
+<p>Avec un mode d'écriture horizontal, cette déclaration CSS appliquerait une marge de 5 pixels sur le côté haut de la boîte et une marge de 10 pixels sur le bas de la boîte.</p>
+
+<pre class="brush: css">.box {
+  margin-block: 5px 10px;
+}</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Ces propriétés raccourcies, <code>margin-inline</code> et <code>margin-block</code>, ont été implémentées avec Firefox 66. Elles restent relativement nouvelles et mieux vaut donc vérifier la compatibilité navigateur avant de les utiliser.</p>
+</div>
+
+<h2 id="Exemples_pour_le_remplissage">Exemples pour le remplissage</h2>
+
+<p>Pour le remplissage, ce sont les propriétés logiques {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}}, {{cssxref("padding-block-start")}} et {{cssxref("padding-inline-end")}} qui ont été ajoutées et qui peuvent être utilisées en lieu et place de leur équivalent physique.</p>
+
+<p>Dans l'exemple suivant, on dispose de deux boîtes, la première possède des remplissages définis avec des propriétés physiques et la seconde avec des propriétés logiques. En utilisant un mode d'écriture <code>horizontal-tb</code>, les deux boîtes auront la même apparence.</p>
+
+<p>En modifiant la propriété <code>direction</code> avec la valeur <code>rtl</code>, les boîtes seront affichées de droite à gauche. Le remplissage de la première boîte restera à la même place et celui de la deuxième boîte changera de côté.</p>
+
+<p>Vous pouvez aussi modifier la valeur de la propriété <code>writing-mode</code> pour la passer de <code>horizontal-tb</code> à <code>vertical-rl</code>. Là encore, rien ne change pour la première boîte mais pour la seconde, les remplissages se trouvent échangés.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/padding-longhands.html", '100%', 700)}}</p>
+
+<h3 id="Propriétés_raccourcies_pour_le_remplissage">Propriétés raccourcies pour le remplissage</h3>
+
+<p>À l'instar des marges, deux propriétés raccourcies ont été ajoutées {{cssxref("padding-inline")}} et {{cssxref("padding-block")}}. Elles permettent, respectivement, de définir le remplissage pour les deux côtés sur l'axe en ligne et sur l'axe en bloc.</p>
+
+<p>Avec un mode d'écriture horizontal, cette déclaration CSS appliquera un remplissage de <code>5px</code> sur le haut de la boîte et un remplissage de 10 pixels en bas de la boîte :</p>
+
+<pre class="brush: css">.box {
+  padding-block: 5px 10px;
+}</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Ces propriétés raccourcies, <code>padding-inline</code> et <code>padding-block</code>, ont été implémentées avec Firefox 66. Elles restent relativement nouvelles et mieux vaut donc vérifier la compatibilité navigateur avant de les utiliser.</p>
+</div>
+
+<h2 id="Exemples_pour_les_bordures">Exemples pour les bordures</h2>
+
+<p>Les propriétés relatives aux bordures fournissent une grande quantité de propriétés tant logiques que physiques (pour la couleur, la largeur, le style, pour chaque côté, pour les propriétés raccourcies). De la même façon qu'on a des équivalences avec les propriétés physiques pour les marges et les remplissages, on a également des propriétés logiques pour les bordures.</p>
+
+<p>L'exemple ci-après utilise certaines propriétés détaillées et propriétés raccourcies. Comme précédemment, vous pouvez modifier les valeurs des propriétés <code>direction</code> et <code>writing-mode</code> pour observer les impacts.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/border-longhands.html", '100%', 700)}}</p>
+
+<h3 id="Propriétés_raccourcies_pour_les_bordures">Propriétés raccourcies pour les bordures</h3>
+
+<p>Il y a des propriétés raccourcies avec deux valeurs pour paramétrer la largeur, le style et la couleur de la bordure pour les côtés sur l'axe en ligne ou pour les côtés sur l'axe de bloc. Le fragment de code qui suit, si on l'utilise avec un mode d'écriture horizontal, fournira une bordure verte de 2 pixels sur un trait plein en haut et en bas de la boîte et une bordure pointillée violette de 4 pixels sur les côtés gauche et droit.</p>
+
+<pre class="brush: css">.box {
+  border-block: 2px solid green;
+  border-inline-width: 4px;
+  border-inline-style: dotted;
+  border-inline-color: rebeccapurple;
+}</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Ces propriétés raccourcies, <code>border-inline</code> et <code>border-block</code>, ont été implémentées avec Firefox 66. Elles restent relativement nouvelles et mieux vaut donc vérifier la compatibilité navigateur avant de les utiliser.</p>
+</div>
+
+<h3 id="Propriétés_pour_les_courbures_des_bordures_relatives_au_flux">Propriétés pour les courbures des bordures relatives au flux</h3>
+
+<p>La spécification a également ajouté des propriétés relatives au flux pour les propriétés détaillées associées à {{cssxref("border-radius")}}. Ces propriétés n'ont pas encore (décembre 2018) été implémentées par les différents navigateurs. L'exemple qui suit, avec un mode d'écriture horizontal, fournira une bordure en haut à droite avec un rayon de courbure de 1em, une bordure en bas à droite sans rayon de courbure, une bordure en bas à gauche avec un rayon de courbure de 20 pixels et une bordure courbée avec un rayon de 40 pixels pour le coin supérieur gauche.</p>
+
+<pre class="brush: css">.box {
+  border-end-start-radius: 1em;
+  border-end-end-radius: 0;
+  border-start-end-radius: 20px;
+  border-start-start-radius: 40px;
+}</pre>
+
+<h2 id="Utiliser_les_valeurs_logiques_avec_les_propriétés_raccourcies_classiques">Utiliser les valeurs logiques avec les propriétés raccourcies classiques</h2>
+
+<p>La spécification définit une suggestion qui pourrait être utilisée afin de manipuler les propriétés raccourcies (<code>margin</code> par exemple) avec des valeurs logiques. Toutefois, le consensus n'a pas encore été atteint sur la résolution de ce point et est discuté au travers de <a href="https://github.com/w3c/csswg-drafts/issues/1282">cette <em>issue</em></a>.</p>
+
+<p>À l'heure actuelle (décembre 2018), les propriétés raccourcies <code>margin</code>, <code>padding</code> et <code>border</code> ne fonctionent qu'avec les valeurs physiques. Aussi, si respecter le flux du document est primordial et que vous devez utiliser les valeurs logiques, vous devrez recourir aux propriétés détaillées afin d'utiliser les valeurs logiques.</p>
diff --git a/files/fr/web/css/css_masks/index.html b/files/fr/web/css/css_masks/index.html
new file mode 100644
index 0000000000..ea2a9afeb5
--- /dev/null
+++ b/files/fr/web/css/css_masks/index.html
@@ -0,0 +1,66 @@
+---
+title: CSS Masks
+slug: Web/CSS/CSS_Masks
+tags:
+  - Aperçu
+  - CSS
+  - CSS Masking
+  - Reference
+translation_of: Web/CSS/CSS_Masking
+---
+<div>{{CSSRef}}</div>
+
+<p><em><strong>CSS Masking</strong></em> (ou « masques CSS ») est un module CSS qui définit les moyens, dont les masques et le <em>clipping</em>, pour dissimuler des parties d'éléments visuels, partiellement ou en totalité.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("clip")}} {{deprecated_inline}}</li>
+ <li>{{cssxref("clip-path")}}</li>
+ <li>{{cssxref("clip-rule")}}</li>
+ <li>{{cssxref("mask")}}</li>
+ <li>{{cssxref("mask-border")}}</li>
+ <li>{{cssxref("mask-border-mode")}}</li>
+ <li>{{cssxref("mask-border-outset")}}</li>
+ <li>{{cssxref("mask-border-repeat")}}</li>
+ <li>{{cssxref("mask-border-slice")}}</li>
+ <li>{{cssxref("mask-border-source")}}</li>
+ <li>{{cssxref("mask-border-width")}}</li>
+ <li>{{cssxref("mask-clip")}}</li>
+ <li>{{cssxref("mask-composite")}}</li>
+ <li>{{cssxref("mask-image")}}</li>
+ <li>{{cssxref("mask-mode")}}</li>
+ <li>{{cssxref("mask-origin")}}</li>
+ <li>{{cssxref("mask-position")}}</li>
+ <li>{{cssxref("mask-repeat")}}</li>
+ <li>{{cssxref("mask-size")}}</li>
+ <li>{{cssxref("mask-type")}}</li>
+</ul>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Masks")}}</td>
+   <td>{{Spec2("CSS Masks")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/css/css_miscellaneous/index.html b/files/fr/web/css/css_miscellaneous/index.html
new file mode 100644
index 0000000000..45e4685f89
--- /dev/null
+++ b/files/fr/web/css/css_miscellaneous/index.html
@@ -0,0 +1,31 @@
+---
+title: CSS Miscellaneous
+slug: Web/CSS/CSS_Miscellaneous
+tags:
+  - Aperçu
+  - CSS
+  - Reference
+translation_of: Web/CSS/CSS_Miscellaneous
+---
+<div>{{CSSRef}}</div>
+
+<p>Cette page regroupe des propriétés CSS qui sont hautement expérimentales ou qui ne rentrent dans aucune autre catégorie.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("all")}}</li>
+ <li>{{cssxref("text-rendering")}}</li>
+</ul>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p><em>Ces propriétés n'ont pour la plupart pas de lien entre elles, consultez leur pages respectives pour connaître leurs spécifications.</em></p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p><em>Ces propriétés n'ont pour la plupart pas de lien entre elles, consultez leurs pages respectives pour connaître leur disponibilité dans les navigateurs.</em></p>
diff --git a/files/fr/web/css/css_namespaces/index.html b/files/fr/web/css/css_namespaces/index.html
new file mode 100644
index 0000000000..84e14d0937
--- /dev/null
+++ b/files/fr/web/css/css_namespaces/index.html
@@ -0,0 +1,50 @@
+---
+title: CSS Namespaces
+slug: Web/CSS/CSS_Namespaces
+tags:
+  - Aperçu
+  - CSS
+  - CSS Namespaces
+  - Reference
+translation_of: Web/CSS/CSS_Namespaces
+---
+<div>{{CSSRef}}</div>
+
+<p><em><strong>CSS Namespaces</strong></em> (ou « espaces de noms CSS ») est un module CSS qui permet aux auteurs de spécifier des <a href="/en-US/docs/Namespaces">espaces de noms XML</a> en CSS.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Règles">Règles @</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("@namespace")}}</li>
+</ul>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Namespaces")}}</td>
+   <td>{{Spec2("CSS3 Namespaces")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<h3 id="namespace"><code>@namespace</code></h3>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.namespace")}}</p>
diff --git a/files/fr/web/css/css_overflow/index.html b/files/fr/web/css/css_overflow/index.html
new file mode 100644
index 0000000000..9f5697820a
--- /dev/null
+++ b/files/fr/web/css/css_overflow/index.html
@@ -0,0 +1,82 @@
+---
+title: CSS Overflow
+slug: Web/CSS/CSS_Overflow
+tags:
+  - CSS
+  - CSS Overflow
+  - Reference
+translation_of: Web/CSS/CSS_Overflow
+---
+<p>{{CSSRef}}<br>
+ Le module de spécification <em><strong>CSS Overflow</strong></em> décrit les fonctionnalités CSS relatives au dépassement et au défilement du contenu pour les médias visuels. En CSS, le dépassement se produit lorsque le contenu d'une boîte s'étend au-delà des bords de la boîte.</p>
+
+<h2 id="Dépassement_au_dessin_ink_overflow_et_dépassement_défilable_scrollable_overflow">Dépassement au dessin (<em>ink overflow</em>) et dépassement défilable (<em>scrollable overflow</em>)</h2>
+
+<p>Il existe deux types de dépassement en CSS. Le premier, intitulé en anglais <em><strong>ink overflow</strong></em> (qu'on pourrait traduire par « dépassement pour le dessin ») indique le dépassement des effets visuels qui ne modifient pas la disposition ou le dimensionnement (ex. les ombres des boîtes, les bordures des images, les décorations du texte, les caractères avec un jambage qui dépasse, etc.).</p>
+
+<p>Le second type de dépassement, <em><strong>scrollable overflow</strong></em> (ou dépassement défilable) se produit lorsque du contenu se situe hors de la boîte et qu'il est nécessaire de fournir un mécanisme pour faire défiler le contenu afin de pouvoir le consulter. Les propriétés de ce module de spécification décrivent ce qui se passe lorsque le contenu dépasse d'une boîte. </p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'exempel interactif suivant illustre comment la modification de la valeur de la propriété <code>overflow</code> change la façon dont est géré le dépassement pour une boîte avec une hauteur fixe.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/overflow.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés_CSS">Propriétés CSS</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("overflow")}}</li>
+ <li>{{CSSxRef("overflow-block")}}</li>
+ <li>{{CSSxRef("overflow-inline")}}</li>
+ <li>{{CSSxRef("overflow-x")}}</li>
+ <li>{{CSSxRef("overflow-y")}}</li>
+ <li>{{CSSxRef("text-overflow")}}</li>
+ <li>{{CSSxRef("block-overflow")}} {{experimental_inline}}</li>
+ <li>{{CSSxRef("line-clamp")}} {{experimental_inline}}</li>
+ <li>{{CSSxRef("max-lines")}} {{experimental_inline}}</li>
+ <li>{{CSSxRef("continue")}} {{experimental_inline}}</li>
+</ul>
+</div>
+
+<h3 id="Propriétés_spécifiques">Propriétés spécifiques</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("-webkit-line-clamp")}} {{non-standard_inline}}</li>
+</ul>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Overflow', '#propdef-overflow', 'overflow')}}</td>
+   <td>{{Spec2('CSS3 Overflow')}}</td>
+   <td>Modification de la syntaxe afin de permettre d'utilise un ou deux mots-clés (plutôt qu'un seul auparavant).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visufx.html#overflow', 'overflow')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés qui permettent de mettre en forme les barres de défilement/ascenceurs : {{CSSxRef("scrollbar-width")}} et {{CSSxRef("scrollbar-color")}}</li>
+</ul>
diff --git a/files/fr/web/css/css_pages/index.html b/files/fr/web/css/css_pages/index.html
new file mode 100644
index 0000000000..1d191006f2
--- /dev/null
+++ b/files/fr/web/css/css_pages/index.html
@@ -0,0 +1,73 @@
+---
+title: CSS Pages
+slug: Web/CSS/CSS_Pages
+tags:
+  - Aperçu
+  - CSS
+  - CSS Paged Media
+  - Reference
+translation_of: Web/CSS/CSS_Pages
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>Les média paginés CSS</strong> (ou <em>CSS Paged Media</em> en anglais) est un module CSS qui définit la façon dont sont gérés les sauts de page ainsi que les veuves et orphelines.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("page-break-after")}}</li>
+ <li>{{cssxref("page-break-before")}}</li>
+ <li>{{cssxref("page-break-inside")}}</li>
+</ul>
+</div>
+
+<h3 id="Règles">Règles @</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref('@page')}}</li>
+</ul>
+</div>
+
+<h3 id="Pseudo-classes">Pseudo-classes</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref(':blank')}}</li>
+ <li>{{cssxref(':first')}}</li>
+ <li>{{cssxref(':left')}}</li>
+ <li>{{cssxref(':right')}}</li>
+</ul>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Paged Media')}}</td>
+   <td>{{Spec2('CSS3 Paged Media')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Fragmentation')}}</td>
+   <td>{{Spec2('CSS3 Fragmentation')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/css/css_positioning/index.html b/files/fr/web/css/css_positioning/index.html
new file mode 100644
index 0000000000..518a4abaeb
--- /dev/null
+++ b/files/fr/web/css/css_positioning/index.html
@@ -0,0 +1,61 @@
+---
+title: CSS Positioned Layout
+slug: Web/CSS/CSS_Positioning
+tags:
+  - Aperçu
+  - CSS
+  - CSS Positioned Layout
+  - Reference
+translation_of: Web/CSS/CSS_Positioning
+---
+<div>{{CSSRef}}</div>
+
+<p><em><strong>CSS Positioned Layout</strong></em> (ou module CSS de disposition positionnée) est un module CSS qui définit comment positionner des éléments sur une page.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("bottom")}}</li>
+ <li>{{cssxref("clear")}}</li>
+ <li>{{cssxref("float")}}</li>
+ <li>{{cssxref("left")}}</li>
+ <li>{{cssxref("position")}}</li>
+ <li>{{cssxref("right")}}</li>
+ <li>{{cssxref("top")}}</li>
+ <li>{{cssxref("z-index")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/Comprendre_z-index">Comprendre <code>z-index</code> en CSS</a></dt>
+ <dd>Présente la notion de contexte d'empilement et explique comment fonctionne le tri sur z avec plusieurs exemples.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Positioning')}}</td>
+   <td>{{Spec2('CSS3 Positioning') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/css/css_properties_reference/index.html b/files/fr/web/css/css_properties_reference/index.html
new file mode 100644
index 0000000000..7c0812f001
--- /dev/null
+++ b/files/fr/web/css/css_properties_reference/index.html
@@ -0,0 +1,315 @@
+---
+title: Référence des propriétés CSS
+slug: Web/CSS/CSS_Properties_Reference
+tags:
+  - CSS
+translation_of: Web/CSS/CSS_Properties_Reference
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Référence_des_propriétés_CSS_usuelles">Référence des propriétés CSS usuelles</h2>
+
+<p>Voici ci-dessous une liste simple des propriétés CSS les plus fréquemment utilisées avec leur équivalent en notation DOM,  habituellement utilisée avec JavaScript :</p>
+
+<div class="note"><strong>Note :</strong>  Cette liste n'est pas exhaustive. Pour davantage de propriétés CSS, voir <a href="/fr/docs/Web/CSS/Reference">la référence CSS</a> et <a href="/fr/docs/Web/CSS/Extensions_Mozilla">les extensions CSS spécifiques à Mozilla</a>.</div>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col"><strong>CSS</strong></th>
+   <th scope="col"><strong>JavaScript</strong></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>background</code></td>
+   <td><code>background</code></td>
+  </tr>
+  <tr>
+   <td><code>background-attachment</code></td>
+   <td><code>backgroundAttachment</code></td>
+  </tr>
+  <tr>
+   <td><code>background-color</code></td>
+   <td><code>backgroundColor</code></td>
+  </tr>
+  <tr>
+   <td><code>background-image</code></td>
+   <td><code>backgroundImage</code></td>
+  </tr>
+  <tr>
+   <td><code>background-position</code></td>
+   <td><code>backgroundPosition</code></td>
+  </tr>
+  <tr>
+   <td><code>background-repeat</code></td>
+   <td><code>backgroundRepeat</code></td>
+  </tr>
+  <tr>
+   <td><code>border</code></td>
+   <td><code>border</code></td>
+  </tr>
+  <tr>
+   <td><code>border-bottom</code></td>
+   <td><code>borderBottom</code></td>
+  </tr>
+  <tr>
+   <td><code>border-bottom-color</code></td>
+   <td><code>borderBottomColor</code></td>
+  </tr>
+  <tr>
+   <td><code>border-bottom-style</code></td>
+   <td><code>borderBottomStyle</code></td>
+  </tr>
+  <tr>
+   <td><code>border-bottom-width</code></td>
+   <td><code>borderBottomWidth</code></td>
+  </tr>
+  <tr>
+   <td><code>border-color</code></td>
+   <td><code>borderColor</code></td>
+  </tr>
+  <tr>
+   <td><code>border-left</code></td>
+   <td><code>borderLeft</code></td>
+  </tr>
+  <tr>
+   <td><code>border-left-color</code></td>
+   <td><code>borderLeftColor</code></td>
+  </tr>
+  <tr>
+   <td><code>border-left-style</code></td>
+   <td><code>borderLeftStyle</code></td>
+  </tr>
+  <tr>
+   <td><code>border-left-width</code></td>
+   <td><code>borderLeftWidth</code></td>
+  </tr>
+  <tr>
+   <td><code>border-right</code></td>
+   <td><code>borderRight</code></td>
+  </tr>
+  <tr>
+   <td><code>border-right-color</code></td>
+   <td><code>borderRightColor</code></td>
+  </tr>
+  <tr>
+   <td><code>border-right-style</code></td>
+   <td><code>borderRightStyle</code></td>
+  </tr>
+  <tr>
+   <td><code>border-right-width</code></td>
+   <td><code>borderRightWidth</code></td>
+  </tr>
+  <tr>
+   <td><code>border-style</code></td>
+   <td><code>borderStyle</code></td>
+  </tr>
+  <tr>
+   <td><code>border-top</code></td>
+   <td><code>borderTop</code></td>
+  </tr>
+  <tr>
+   <td><code>border-top-color</code></td>
+   <td><code>borderTopColor</code></td>
+  </tr>
+  <tr>
+   <td><code>border-top-style</code></td>
+   <td><code>borderTopStyle</code></td>
+  </tr>
+  <tr>
+   <td><code>border-top-width</code></td>
+   <td><code>borderTopWidth</code></td>
+  </tr>
+  <tr>
+   <td><code>border-width</code></td>
+   <td><code>borderWidth</code></td>
+  </tr>
+  <tr>
+   <td><code>clear</code></td>
+   <td><code>clear</code></td>
+  </tr>
+  <tr>
+   <td><code>clip</code></td>
+   <td><code>clip</code></td>
+  </tr>
+  <tr>
+   <td><code>color</code></td>
+   <td><code>color</code></td>
+  </tr>
+  <tr>
+   <td><code>cursor</code></td>
+   <td><code>cursor</code></td>
+  </tr>
+  <tr>
+   <td><code>display</code></td>
+   <td><code>display</code></td>
+  </tr>
+  <tr>
+   <td><code>filter</code></td>
+   <td><code>filter</code></td>
+  </tr>
+  <tr>
+   <td><code>float</code></td>
+   <td><code>cssFloat</code></td>
+  </tr>
+  <tr>
+   <td><code>font</code></td>
+   <td><code>font</code></td>
+  </tr>
+  <tr>
+   <td><code>font-family</code></td>
+   <td><code>fontFamily</code></td>
+  </tr>
+  <tr>
+   <td><code>font-size</code></td>
+   <td><code>fontSize</code></td>
+  </tr>
+  <tr>
+   <td><code>font-variant</code></td>
+   <td><code>fontVariant</code></td>
+  </tr>
+  <tr>
+   <td><code>font-weight</code></td>
+   <td><code>fontWeight</code></td>
+  </tr>
+  <tr>
+   <td><code>height</code></td>
+   <td><code>height</code></td>
+  </tr>
+  <tr>
+   <td><code>left</code></td>
+   <td><code>left</code></td>
+  </tr>
+  <tr>
+   <td><code>letter-spacing</code></td>
+   <td><code>letterSpacing</code></td>
+  </tr>
+  <tr>
+   <td><code>line-height</code></td>
+   <td><code>lineHeight</code></td>
+  </tr>
+  <tr>
+   <td><code>list-style</code></td>
+   <td><code>listStyle</code></td>
+  </tr>
+  <tr>
+   <td><code>list-style-image</code></td>
+   <td><code>listStyleImage</code></td>
+  </tr>
+  <tr>
+   <td><code>list-style-position</code></td>
+   <td><code>listStylePosition</code></td>
+  </tr>
+  <tr>
+   <td><code>list-style-type</code></td>
+   <td><code>listStyleType</code></td>
+  </tr>
+  <tr>
+   <td><code>margin</code></td>
+   <td><code>margin</code></td>
+  </tr>
+  <tr>
+   <td><code>margin-bottom</code></td>
+   <td><code>marginBottom</code></td>
+  </tr>
+  <tr>
+   <td><code>margin-left</code></td>
+   <td><code>marginLeft</code></td>
+  </tr>
+  <tr>
+   <td><code>margin-right</code></td>
+   <td><code>marginRight</code></td>
+  </tr>
+  <tr>
+   <td><code>margin-top</code></td>
+   <td><code>marginTop</code></td>
+  </tr>
+  <tr>
+   <td><code>overflow</code></td>
+   <td><code>overflow</code></td>
+  </tr>
+  <tr>
+   <td><code>padding</code></td>
+   <td><code>padding</code></td>
+  </tr>
+  <tr>
+   <td><code>padding-bottom</code></td>
+   <td><code>paddingBottom</code></td>
+  </tr>
+  <tr>
+   <td><code>padding-left</code></td>
+   <td><code>paddingLeft</code></td>
+  </tr>
+  <tr>
+   <td><code>padding-right</code></td>
+   <td><code>paddingRight</code></td>
+  </tr>
+  <tr>
+   <td><code>padding-top</code></td>
+   <td><code>paddingTop</code></td>
+  </tr>
+  <tr>
+   <td><code>page-break-after</code></td>
+   <td><code>pageBreakAfter</code></td>
+  </tr>
+  <tr>
+   <td><code>page-break-before</code></td>
+   <td><code>pageBreakBefore</code></td>
+  </tr>
+  <tr>
+   <td><code>position</code></td>
+   <td><code>position</code></td>
+  </tr>
+  <tr>
+   <td><code>stroke-dasharray</code></td>
+   <td><code>strokeDasharray</code></td>
+  </tr>
+  <tr>
+   <td><code>stroke-dashoffset</code></td>
+   <td><code>strokeDashoffset</code></td>
+  </tr>
+  <tr>
+   <td><code>stroke-width</code></td>
+   <td><code>strokeWidth</code></td>
+  </tr>
+  <tr>
+   <td><code>text-align</code></td>
+   <td><code>textAlign</code></td>
+  </tr>
+  <tr>
+   <td><code>text-decoration</code></td>
+   <td><code>textDecoration</code></td>
+  </tr>
+  <tr>
+   <td><code>text-indent</code></td>
+   <td><code>textIndent</code></td>
+  </tr>
+  <tr>
+   <td><code>text-transform</code></td>
+   <td><code>textTransform</code></td>
+  </tr>
+  <tr>
+   <td><code>top</code></td>
+   <td><code>top</code></td>
+  </tr>
+  <tr>
+   <td><code>vertical-align</code></td>
+   <td><code>verticalAlign</code></td>
+  </tr>
+  <tr>
+   <td><code>visibility</code></td>
+   <td><code>visibility</code></td>
+  </tr>
+  <tr>
+   <td><code>width</code></td>
+   <td><code>width</code></td>
+  </tr>
+  <tr>
+   <td><code>z-index</code></td>
+   <td><code>zIndex</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
diff --git a/files/fr/web/css/css_questions_frequentes/index.html b/files/fr/web/css/css_questions_frequentes/index.html
new file mode 100644
index 0000000000..0d62552798
--- /dev/null
+++ b/files/fr/web/css/css_questions_frequentes/index.html
@@ -0,0 +1,246 @@
+---
+title: Questions fréquentes en CSS
+slug: Web/CSS/CSS_questions_frequentes
+tags:
+  - CSS
+  - Débutant
+  - Exemple
+  - Guide
+translation_of: Learn/CSS/Howto/CSS_FAQ
+---
+<h2 id="Pourquoi_mon_CSS_pourtant_valide_ne_fournit_pas_un_rendu_correct">Pourquoi mon CSS, pourtant valide, ne fournit pas un rendu correct ?</h2>
+
+<p>Pour afficher un document, les navigateurs utilisent le <code>DOCTYPE</code> - contraction de l'anglais <em>document type</em>, littéralement « type de document ». Ils utilisent un mode qui est compatible avec les standards du Web et avec les bugs des vieux navigateurs. Utiliser un <code>DOCTYPE</code> correct et moderne dès le début de votre code HTML améliorera la conformité aux standards du navigateur.</p>
+
+<p>Les navigateurs modernes ont deux modes de rendu :</p>
+
+<ul>
+ <li><em>Mode Quirk:</em> aussi appelé mode de rétro-compatibilité. Il permet aux pages existantes d'être affichées telles que leurs auteurs l'ont voulu, en suivant les règles de rendu non-standards utilisées par les navigateurs anciens. Les documents avec un <code>DOCTYPE</code> incomplet, incorrect ou manquant, ou avec une déclaration <code>DOCTYPE</code> en utilisation avant 2001 seront affichées en mode Quirks.</li>
+ <li><em>Mode Standard: </em>le navigateur tente de suivre strictement les standards du W3C. Idéalement, les nouvelles pages HTML doivent être conçues pour des navigateurs conformes aux normes. Par conséquent, les pages avec un <code>DOCTYPE</code> moderne seront affichées en mode Standard.</li>
+</ul>
+
+<p>Les navigateurs basés sur Gecko ont un troisième mode <a href="/fr/docs/Mode_presque_standard_de_Gecko">Presque Standard</a> qui comporte quelques <em>quirks</em> mineurs.</p>
+
+<p>Voici une liste des <code>DOCTYPE</code> les plus couramment utilisés, qui déclencheront les modes Standard et Presque Standard des navigateurs :</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt; /* Ceci est le doctype HTML5. Étant donné que chaque
+                   navigateur moderne utilise un parseur HTML5, c'est le
+                   doctype recommandé. */
+
+&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
+"https://www.w3.org/TR/html4/loose.dtd"&gt;
+
+&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"https://www.w3.org/TR/html4/strict.dtd"&gt;
+
+&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
+
+&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;</pre>
+
+<h2 id="Pourquoi_mon_CSS_qui_est_valide_n'est_pas_affiché_du_tout">Pourquoi mon CSS, qui est valide, n'est pas affiché du tout ?</h2>
+
+<p>Pour être appliqué, une feuille CSS doit être définie avec un type MIME <code>text/css</code>. Si le serveur Web ne l'affiche pas avec ce type, la feuille CSS ne sera pas appliquée.</p>
+
+<h2 id="Quelle_est_la_différence_entre_id_et_class">Quelle est la différence entre <code>id</code> et <code>class</code> ?</h2>
+
+<p>Les éléments HTML peuvent posséder un attribut de type <code>id</code> et / ou <code>class</code>. L'attribut <code>id</code> assigne un nom à l'élément sur lequel il s'applique. Pour un balisage correct, il ne peut y avoir qu'un et un seul élément avec ce nom. L'attribut <code>class</code> assigne une nom de classe à un élément. Ce nom peut être utilisé sur plusieurs éléments dans la même page. CSS vous permet d'appliquer des styles à des balises avec des noms définis en <code>id</code> et / ou en <code>class</code>.</p>
+
+<p>Quand vous voulez appliquer un style à un bloc ou un élément spécifique, utilisez un attribut <code>id</code>. Ces caractéristiques de style ne seront appliquées que sur cet <code>id</code> particulier.</p>
+
+<p>Quand vous voulez appliquer un style à plusieurs blocs ou éléments dans la même page, utilisez un attribut <code>class</code>.</p>
+
+<p>Les feuilles de style avec le moins de règles sont les plus performantes. Par conséquent, il est recommandé d'utiliser le plus possible les classes et de réserver les id à des usages spécifiques - comme connecter des éléments de type <code>label</code> et <code>form</code> ou pour décorer des éléments qui doivent être sémantiquement uniques.</p>
+
+<p>Voire <a href="/fr/docs/CSS/Premiers_pas/Les_sélecteurs" title="Les sélecteurs CSS">Les sélecteurs CSS</a>.</p>
+
+<h2 id="Comment_revenir_à_la_valeur_par_défaut_d'un_propriété">Comment revenir à la valeur par défaut d'un propriété ?</h2>
+
+<p>Jadis, il n'y avait pas de valeur nommée "default", par exemple. Le seul moyen de retrouver la valeur par défaut d'une propriété était de déclarer à nouveau cette propriété avec sa valeur par défaut.</p>
+
+<p>Ce comportement est différent depuis CSS2. Une propriété CSS peut maintenant prendre la valeur <code><a href="/fr/docs/Web/CSS/initial">initial</a></code>. C'est la valeur par défaut de cette propriété, valeur définie dans les spécifications de la propriété.</p>
+
+<h2 id="Comment_créer_un_style_dérivant_d'un_autre">Comment créer un style dérivant d'un autre ?</h2>
+
+<p>CSS ne permet de faire dériver un style d'un autre. Voire <a href="http://archivist.incutio.com/viewlist/css-discuss/2685">l'article d'Eric Meyer à propos de la position du groupe de travail</a>. Par contre, assigner plusieurs classes à un seul élément peut produire le même effet.</p>
+
+<h2 id="Comment_assigner_de_multiples_classes_à_un_élément">Comment  assigner de multiples classes à un élément?</h2>
+
+<p>Il est possible d'assigner aux éléments HTML de multiples classes en les listant dans l'attribut <code>class</code> en séparant chaque classe d'un espace.</p>
+
+<pre class="brush: html">&lt;style type="text/css"&gt;
+.news { background: black; color: white; }
+.today { font-weight: bold; }
+&lt;/style&gt;
+
+&lt;div class="news today"&gt;
+... content of today's news ...
+&lt;/div&gt;
+</pre>
+
+<p>Si la même propriété est déclarée dans les deux règles, le conflit est résolu de la manière suivante : premièrement selon la règle de spécificité, ensuite selon l'ordre de déclaration du CSS. L'ordre des classes dans l'attribut <code>class</code> n'est pas pris en compte.</p>
+
+<h2 id="Pourquoi_mes_règles_ne_fonctionnent-elles_pas_correctement">Pourquoi mes règles ne fonctionnent-elles pas correctement ?</h2>
+
+<p>Les règles de style qui sont syntaxiquement correctes peuvent ne pas s'appliquer dans certaines situations. Vous pouvez utiliser la partie <em>Règles de style CSS</em> de l'inspecteur DOM pour déboguer les problèmes de ce genre, mais la plupart des cas de règles de style non utilisées sont listées ci-dessous.</p>
+
+<h3 id="Hiérarchie_des_éléments_HTML">Hiérarchie des éléments HTML</h3>
+
+<p>La manière dont les styles CSS sont appliqués aux éléments HTML dépend aussi de la hiérarchie des-dits éléments. Il est important de se souvenir qu'une règle appliquée à un élément surcharge la règle appliquée pour l'élément parent, quelle que soit la spécificité ou la priorité de la règle CSS.</p>
+
+<pre class="brush: css">.news {
+  color: black;
+}
+
+.corpName {
+  font-weight: bold;
+  color: red;
+}
+</pre>
+
+<pre class="brush: html">&lt;!-- Le texte de l'annonce est en noir
+     mais le nom de l'entreprise est
+     en rouge gras --&gt;
+&lt;div class="news"&gt; (Reuters)
+   &lt;span class="corpName"&gt;General Electric&lt;/span&gt;
+  (GE.NYS) announced on Thursday...
+&lt;/div&gt;
+</pre>
+
+<p>Dans le cas où vous utilisez une hiérarchie HTML complexe et si une règle semble être ignorée, vérifiez que l'élément n'est pas contenu dans un autre élément avec une mise en forme différente.</p>
+
+<h3 id="L'ordre_et_la_redéfinition_des_règles">L'ordre et la redéfinition des règles</h3>
+
+<p>Pour les feuilles de style CSS, <strong>l'ordre est important</strong>. Si vous définissez une règle une première fois puis que vous la définissez à nouveau par la suite, c'est cette dernière définition qui sera prise en compte et utilisée.</p>
+
+<pre class="brush: css">#stockTicker {
+  font-weight: bold;
+}
+.stockSymbol {
+  color: red;
+}
+/*  D'autres règles             */
+/*  D'autres règles             */
+/*  D'autres règles             */
+.stockSymbol {
+  font-weight: normal;
+}
+</pre>
+
+<p> </p>
+
+<pre class="brush: html">&lt;!-- La plupart du texte est en gras sauf "GE",
+     qui est en rouge et sans graisse --&gt;
+&lt;div id="stockTicker"&gt; NYS: &lt;span class="stockSymbol"&gt;GE&lt;/span&gt; +1.0 ... &lt;/div&gt;
+
+</pre>
+
+<p>Pour éviter ce type d'erreur, le mieux consiste à ne définir les règles qu'une seule fois pour un sélecteur donné et à grouper toutes les règles appartenant à ce sélecteur.</p>
+
+<h3 id="Utiliser_les_propriétés_raccourcies">Utiliser les propriétés raccourcies</h3>
+
+<p>Les propriétés raccourcies sont un bon outil pour définir les règles CSS car elles permettent d'obtenir une syntaxe concise. On peut utiliser les propriétés raccourcies avec uniquement quelques unes des valeurs associées, c'est possible et c'est correct ; toutefois, il faut se rappeler que tous les attributs qui ne sont pas déclarés verront leurs valeurs par défaut (aussi appelées valeurs initiales) utilisées. Cela signifie que si une règle précédente indiquait la valeur pour une propriété détaillée, elle sera surchargée de façon implicite.</p>
+
+<pre class="brush: css">#stockTicker {
+  font-size: 12px;
+  font-family: Verdana;
+  font-weight: bold;
+}
+
+.stockSymbol {
+  font: 14px Arial;
+  color: red;
+}
+</pre>
+
+<pre class="brush: html">&lt;div id="stockTicker"&gt;
+  NYS:
+  &lt;span class="stockSymbol"&gt;
+    GE
+  &lt;/span&gt;
+  +1.0 ...
+&lt;/div&gt;</pre>
+
+<p>Dans l'exemple précédent, le problème apparaît avec des règles destinées à des éléments différents mais il peut également se produire pour un seul élément car <strong>l'ordre des règles est important</strong>.</p>
+
+<pre class="brush: css">#stockTicker {
+  font-weight: bold;
+  font: 12px Verdana;
+  /* font-weight vaut maintenant normal */
+}
+</pre>
+
+<h3 id="Utiliser_le_sélecteur_*">Utiliser le sélecteur <code>*</code></h3>
+
+<p>Le sélecteur <code>*</code> fait référence à n'importe quel élément et doit donc être utilisé avec soin.</p>
+
+<pre class="brush: css">body * {
+  font-weight: normal;
+}
+
+#stockTicker {
+  font: 12px Verdana;
+}
+
+.corpName {
+  font-weight: bold;
+}
+
+.stockUp {
+  color: red;
+}
+</pre>
+
+<pre class="brush: html">&lt;div id="section"&gt;
+  NYS:
+  &lt;span class="corpName"&gt;
+    &lt;span class="stockUp"&gt;
+      GE
+    &lt;/span&gt;
+  &lt;/span&gt;
+  +1.0 ...
+&lt;/div&gt;</pre>
+
+<p>Dans cet exemple, le sélecteur <code>body *</code> cible tous les éléments à l'intérieur de <code>body</code>, quel que soit le niveau hiérarchique à l'intérieur du document, y compris pour la classe <code>.stockUp</code>. Ainsi, la règle <code>font-weight: bold;</code> appliquée sur la classe <code>.corpName</code> est surchargée par la règle <code>font-weight: normal;</code> qui est appliquée à tous les éléments contenus dans <code>body</code>.</p>
+
+<p>Le sélecteur <code>*</code> doit être utilisé aussi peu que possible car il s'agit d'un sélecteur lent, notamment lorsqu'il n'est pas utilisé comme le premier composant d'un sélecteur.</p>
+
+<h3 id="La_spécificité_en_CSS">La spécificité en CSS</h3>
+
+<p>Lorsque plusieurs règles s'applique à un même élément. La règle choisie dépend de la <a href="/fr/Apprendre/CSS/Les_bases/La_cascade_et_l_héritage">spécificité</a>. Les styles <em>inline</em> (ceux déclarés via l'attribut HTML <code>style</code>) sont pris en compte en priorité, suivis par ceux manipulés avec les sélecteurs d'identifiant, suivis ceux associés aux sélecteurs de classe et éventuellement par ceux associés aux sélecteurs de nom.</p>
+
+<pre class="brush: css">div {
+  color: black;
+}
+
+#orange {
+  color: orange;
+}
+
+.green {
+  color: green;
+}
+</pre>
+
+<pre class="brush: html">&lt;div id="orange" class="green" style="color: red;"&gt;
+  Voici quelque chose qui sera rouge.
+&lt;/div&gt;</pre>
+
+<p>Les règles exactes sont plus complexes lorsque le sélecteur contient plusieurs composants. Pour plus de détails sur la façon dont la spécificité d'un sélecteur est calculé, on pourra lire <a href="https://www.w3.org/TR/CSS21/cascade.html#specificity">le chapitre de la spécification CSS 2.1</a> ou <a href="/fr/Apprendre/CSS/Les_bases/La_cascade_et_l_héritage">le chapitre correspondant de la section Apprendre</a>.</p>
+
+<h2 id="Quid_des_propriétés_-moz-*_-ms-*_-webkit-*_-o-*_et_-khtml-*">Quid des propriétés <code>-moz-*</code>, <code>-ms-*</code>, <code>-webkit-*</code>, <code>-o-*</code> et <code>-khtml-*</code> ?</h2>
+
+<p>Ces propriétés, appelées <em>propriétés préfixées</em>, sont des extensions au standard CSS. Elles sont utilisées pour les fonctionnalités expérimentales et non-standards afin d'éviter de polluer l'espace de noms usuel pour éviter des incompatibilités lorsque le standard est augmenté.</p>
+
+<p>Il n'est pas recommandé d'utilier ces propriétés pour des sites web en production. Si cela reste nécessaire, il est conseillé de prévoir une stratégie au cas où ces propriétés préfixées soient retirées. En effet, elles peuvent être modifiées voire supprimées lorsque le standard évolue.</p>
+
+<p>Pour plus d'informations <a href="/fr/docs/Web/CSS/Extensions_Mozilla">sur les extensions CSS de Mozilla, vous pouvez consulter la page associée</a>.</p>
+
+<h2 id="Quel_est_l'impact_de_z-index_sur_le_positionnement_des_éléments">Quel est l'impact de <code>z-index</code> sur le positionnement des éléments ?</h2>
+
+<p>La propriété {{cssxref("z-index")}} définit l'ordre d'empilement des élément.</p>
+
+<p>Un élément pour lequel <code>z-index</code> est plus grand qu'un autre sera toujours empilé « devant ».</p>
+
+<p>La propriété <code>z-index</code> ne fonctionne que pour les éléments dont la position est définie (c'est-à-dire les éléments pour lesquels la propriété {{cssxref("position")}} vaut <code>absolute</code>, <code>relative</code> ou <code>fixed</code>).</p>
diff --git a/files/fr/web/css/css_ruby/index.html b/files/fr/web/css/css_ruby/index.html
new file mode 100644
index 0000000000..cc9c44a3bb
--- /dev/null
+++ b/files/fr/web/css/css_ruby/index.html
@@ -0,0 +1,44 @@
+---
+title: CSS Ruby
+slug: Web/CSS/CSS_Ruby
+tags:
+  - Aperçu
+  - CSS
+  - CSS Ruby
+  - Reference
+  - Ruby
+translation_of: Web/CSS/CSS_Ruby
+---
+<div>{{CSSRef}}</div>
+
+<p><em><strong>CSS Ruby Layout</strong></em> est un module CSS qui fournit des propriétés de contrôle pour le rendu et la mise en forme <a href="https://fr.wikipedia.org/wiki/Ruby_(linguistique)">des annotations Ruby</a> utilisées dans les documents d'Asie orientale afin d'indiquer la prononciation ou d'annoter le texte de base.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("ruby-align")}}</li>
+ <li>{{cssxref("ruby-position")}}</li>
+</ul>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Ruby')}}</td>
+   <td>{{Spec2('CSS3 Ruby')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/css/css_scroll_snap/compatibilité_navigateurs/index.html b/files/fr/web/css/css_scroll_snap/compatibilité_navigateurs/index.html
new file mode 100644
index 0000000000..f5d6f97ca4
--- /dev/null
+++ b/files/fr/web/css/css_scroll_snap/compatibilité_navigateurs/index.html
@@ -0,0 +1,46 @@
+---
+title: Compatibilité des navigateurs et CSS Scroll Snap
+slug: Web/CSS/CSS_Scroll_Snap/Compatibilité_navigateurs
+tags:
+  - CSS
+  - CSS Scroll Snap
+  - Compatibilité
+  - Guide
+translation_of: Web/CSS/CSS_Scroll_Snap/Browser_compat
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Firefox implémentait initialement une première version de la spécification <em>Scroll Snap</em> appelée alors <em>Scroll Snap Points</em>. Avec Firefox 68, c'est la nouvelle version de la spécification qui est implémentée et les anciennes propriétés sont retirées.</p>
+
+<h2 class="summary" id="Que_faire_si_mon_style_utilisait_l'ancienne_implémentation_(Firefox_&lt;_68)">Que faire si mon style utilisait l'ancienne implémentation (Firefox &lt; 68) ?</h2>
+
+<p>Si vous avez uniquement ciblé l'ancienne implémentation de Firefox avec les propriétés définies par <em>Scroll Snap Points</em>, vous devriez mettre à jour votre code afin d'utiliser la nouvelle spécification. Ainsi, votre code fonctionnera dans l'ensemble des navigateurs qui implémente la spécification à jour, y compris Firefox. Si vous n'effectuez pas ces changements, les accroches de défilement ne fonctionneront plus à partir de Firefox 68.</p>
+
+<p>Voici les principaux points d'attention :</p>
+
+<ul>
+ <li>Les propriétés {{CSSxRef("scroll-snap-type-x")}} et {{CSSxRef("scroll-snap-type-y")}} ont été abandonnées</li>
+ <li>La propriété {{CSSxRef("scroll-snap-type")}} n'est plus une propriété raccourcie et l'ancienne syntaxe courte (ex. <code>scroll-snap-type: mandatory</code>) cessera de fonctionner</li>
+</ul>
+
+<h2 id="Comment_utiliser_l'ancienne_implémentation_comme_méthode_de_recours">Comment utiliser l'ancienne implémentation comme méthode de recours ?</h2>
+
+<p class="summary">Si vous utilisez déjà l'ancienne implémentation pour cibler les navigateurs plus anciens, vous pouvez continuer à l'utiliser de la façon décrite ci-après.</p>
+
+<p>Dans ce premier exemple, on utilise l'ancienne version de la spécification et la nouvelle afin de pouvoir utiliser les positions d'accroche quel que soit le navigateur tant que celui-ci prend en charge les accroches au défilement.</p>
+
+<p>L'exemple contient les propriétés {{CSSxRef("scroll-snap-points-y")}} et {{CSSxRef("scroll-snap-destination")}}, dépréciées, afin que les accroches fonctionnent dans Firefox. On ajoute également la propriété {{CSSxRef("scroll-snap-type")}} à deux reprises, une fois avec la valeur <code>y</code> (nouvelle version de la spécification) et une seconde fois pour Firefox qui prend en charge cette propriété mais pas la valeur <code>y</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-y-old-spec.html", '100%', 700)}}</p>
+
+<p>Si vous testez cet exemple attentivement, vous pourrez voir qu'il fonctionne dans plus de navigateurs, y compris ceux qui couvrent cette période intermédiaire. Les anciennes propriétés de la spécification sont documentées sur MDN sous la section <em><a href="/fr/docs/Web/CSS/CSS_Scroll_Snap_Points">Scroll Snap Points</a></em>.</p>
+
+<h2 id="Faut-il_utiliser_les_deux_spécifications">Faut-il utiliser les deux spécifications ?</h2>
+
+<p>Les points d'accroche au défilement font partie de ces fonctionnalités CSS sympathiques où l'absence de prise en charge signifie uniquement qu'on ne récupère la fonctionnalité avancée mais que le reste du site ou de l'application continue de fonctionner. Aussi, vous pouvez tout à fait choisir de traiter Firefox comme un navigateur qui ne prend pas en charge cette fonctionnalité et éviter la complexité associée à la gestion des deux configurations. Une fois que la nouvelle spécification sera implémentée, les utilisateurs en bénificieront au fur et à mesure.</p>
+
+<p>Si vous souhaitez tester la prise en charge grâce <a href="/en-US/docs/Web/CSS/@supports">aux requêtes de fonctionnalité</a>, nous vous recommandons de tester {{CSSxRef("scroll-snap-align")}} car cette propriété n'existait pas dans la première spécification. Toutefois, ces propriétés ne devraient causer aucun problème aux navigateurs qui ne les prennent pas en charge car ils les ignoreront simplement.</p>
+
+<h2 id="Pourquoi_existent_deux_versions">Pourquoi existent deux versions ?</h2>
+
+<p>Enfin, on peut se demander pourquoi une telle situation existe aujourd'hui. Ce n'est que la réalité du développement de CSS : les nouvelles fonctionnalités ne peuvent pas exister en pure théorie et en absence d'implémentation de la part des navigateurs. Lors de la phase d'implémentation, les navigateurs peuvent découvrir des problèmes qui n'apparaissent que dans des situations bien concrètes. Dans de tels cas, il faut alors mettre à jour la spécification et on peut alors avoir différentes versions de la spécification et différents navigateurs qui se mettent à jour au fur et à mesure.</p>
diff --git a/files/fr/web/css/css_scroll_snap/concepts_de_base/index.html b/files/fr/web/css/css_scroll_snap/concepts_de_base/index.html
new file mode 100644
index 0000000000..3ec397cfde
--- /dev/null
+++ b/files/fr/web/css/css_scroll_snap/concepts_de_base/index.html
@@ -0,0 +1,70 @@
+---
+title: Concepts de bases pour CSS Scroll Snap
+slug: Web/CSS/CSS_Scroll_Snap/Concepts_de_base
+tags:
+  - CSS
+  - CSS Scroll Snap
+  - Guide
+translation_of: Web/CSS/CSS_Scroll_Snap/Basic_concepts
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><a href="https://drafts.csswg.org/css-scroll-snap-1/">Le module de spécification CSS <em>Scroll Snap</em></a> fournit des outils pour « accrocher » sur certains points lors du défilement dans un document. Un tel comportement peut s'avérer utile pour obtenir un résultat analogue à certaines applications (qu'elles soient mobiles ou non).</p>
+
+<h2 id="Principes_fondamentaux">Principes fondamentaux</h2>
+
+<p>Les propriétés principales définies par la spécification <em>Scroll Snap</em> sont {{CSSxRef("scroll-snap-type")}} et {{CSSxRef("scroll-snap-align")}}. La propriété <code>scroll-snap-type</code> s'utilise sur <a href="/fr/docs/Glossary/Scroll_container">le conteneur de défilement (<em>scroll container</em>)</a> et établit le type et la direction du défilement.</p>
+
+<p>La propriété <code>scroll-snap-align</code> doit être utilisée sur les éléments fils afin de définir la position de défilement sur laquelle ils s'accrocheront. L'exemple qui suit illustre des positions d'accroche sur l'axe vertical et <code>scroll-snap-align</code> est utilisée sur l'élément {{HTMLElement("section")}} afin de définir le point où devrait s'arrêter le défilement.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-y.html", '100%', 700)}}</p>
+
+<h2 id="Utiliser_scroll-snap-type">Utiliser <code>scroll-snap-type</code></h2>
+
+<p>La propriété {{CSSxRef("scroll-snap-type")}} doit connaître la direction selon laquelle s'effectue le défilement et l'accroche. Cette direction peut s'exprimer avec des valeurs physiques : <code>x</code> ou <code>y</code> ou avec des valeurs logiques : <code>block</code> ou <code>inline</code>. On peut également utiliser le mot-clé <code>both</code> afin d'avoir un défilement et des accroches selon les deux axes.</p>
+
+<p>Cette propriété s'utilise également avec les mots-clés <code>mandatory</code> ou <code>proximity</code>. Le mot-clé <code>mandatory</code> indique au navigateur que le contenu <em>doit</em> s'accrocher à un point donné, quelle que soit la position du défilement. Le mot-clé <code>proximity</code> indique que le contenu <em>peut</em> s'accrocher sur un point mais que ce n'est pas obligatoire.</p>
+
+<p>La valeur <code>mandatory</code> permettra d'obtenir une expérience cohérente au sens où l'utilisateur saura que le navigateur accrochera le contenu à chaque point. Cela signifie qu'on peut être certain que quelque chose sera en haut de l'écran à la fin du défilement. Toutefois, cela peut entraîner des problèmes lorsqu'un portion du contenu est trop grande et qu'on obtient un scénario où il est impossible de défiler afin de voir une portion donnée du contenu. Ainsi, on utilisera <code>mandatory</code> dans des situations maîtrisées où la taille du contenu sur un écran est connue.</p>
+
+<p>La valeur <code>proximity</code> déclenchera une accroche lorsque la position du défilement est proche du point d'accroche. C'est le navigateur qui décidera de la distance seuil exacte pour laquelle déclencher l'accroche ou non. Dans l'exemple qui suit, vous pouvez passer de <code>mandatory</code> à <code>proximity</code> afin d'observer l'effet obtenu.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-proximity.html", '100%', 700)}}</p>
+
+<h2 id="Utiliser_scroll-snap-align">Utiliser <code>scroll-snap-align</code></h2>
+
+<p>La propriété {{CSSxRef("scroll-snap-align")}} peut être utilisée avec les valeurs <code>start</code>, <code>end</code> ou <code>center</code>. Ces valeurs indiquent l'emplacement où le contenu doit s'accrocher sur le conteneur de défilement. Vous pouvez modifier la valeur <code>scroll-snap-align</code> dans l'exemple interactif qui suit pour voir le résultat obtenu.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/scroll-snap/align.html", '100%', 700)}}</p>
+
+<h2 id="Ajuster_la_position_de_défilement_avec_un_remplissage">Ajuster la position de défilement avec un remplissage</h2>
+
+<p>Si on ne souhaite pas que le contenu s'accroche exactement sur le bord du conteneur de défilement, on pourra utiliser la propriété {{CSSxRef("scroll-padding")}} (ou les propriétés détaillées équivalentes) afin de définir un remplissage (<em>padding</em>) pour décaler la position du contenu.</p>
+
+<p>Dans l'exemple qui suit, on paramètre <code>scroll-padding</code> à 40 pixels. Lorsqu'on accroche au début de la deuxième et de la troisième section, le défilement s'arrête à 40 pixels du début de la section. Vous pouvez adapter la valeur de <code>scroll-padding</code> afin de voir l'impact sur le décalage obtenu.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-padding.html", '100%', 700)}}</p>
+
+<p>Cette propriété s'avère particulièrement utile lorsqu'on a un élément fixe (une barre de navigation par exemple) qui pourrait être chevauchée par du contenu qui défile. En utilisant <code>scroll-padding</code>, on peut réserver un espace pour cet élément fixe. Dans l'exemple suivant, on peut voir le titre <code>&lt;h1&gt;</code> qui reste à l'écran et le contenu qui défile en dessous de ce titre. Sans le remplissage, le titre aurait été chevauché par une partie du contenu lors de l'accroche.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-padding-sticky.html", '100%', 700)}}</p>
+
+<h2 id="Ajouter_des_marges_sur_les_éléments_fils_du_défilement">Ajouter des marges sur les éléments fils du défilement</h2>
+
+<p>Une autre méthode permettant d'obtenir un espace entre le bord du conteneur et les éléments fils est d'utiliser la propriété {{CSSxRef("scroll-margin")}} sur l'élément fils. <code>scroll-margin</code> définit principalement le décalage par rapport à la boîte définie. Vous pouvez manipuler cette propriété dans l'exemple interactif suivant :</p>
+
+<p>{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-margin.html", '100%', 700)}}</p>
+
+<h2 id="La_propriété_scroll-snap-stop">La propriété <code>scroll-snap-stop</code></h2>
+
+<p>La propriété {{CSSxRef("scroll-snap-stop")}} indique au navigateur qu'il devrait arrêter le défilement pour chaque point d'accroche. Pour nos exemples précédents, cela signifie qu'on s'arrêtera nécessairement au début de chaque section. Cette propriété dispose de moins d'implémentations dans les navigateurs.</p>
+
+<p>Cela peut être utile pour s'assurer que les utilisateurs consultent chaque section sans louper du contenu par inadvertence. En revanche, cela peut rendre le défilement plus lent et ralentir considérablement un utilisateur qui chercherait une section donnée.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> La propriété <code>scroll-snap-stop</code> est actuellement mise en question dans la version <em>Candidate Recommendation</em> de la spécification et pourrait être retirée.</p>
+</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Les pages de chaque propriété détaillent la compatibilité des différents navigateurs. On notera qu'avant Firefox 68, une ancienne version de la spécification était implémentée. Vous pouvez <a href="/fr/docs/Web/CSS/CSS_Scroll_Snap/Browser_compat">poursuivre avec le guide suivant</a> pour en savoir plus sur l'écriture de code compatible entre les différents navigateurs qui implémentent différentes versions de la spécification.</p>
diff --git a/files/fr/web/css/css_scroll_snap/index.html b/files/fr/web/css/css_scroll_snap/index.html
new file mode 100644
index 0000000000..6e79f674df
--- /dev/null
+++ b/files/fr/web/css/css_scroll_snap/index.html
@@ -0,0 +1,84 @@
+---
+title: CSS Scroll Snap
+slug: Web/CSS/CSS_Scroll_Snap
+tags:
+  - CSS
+  - CSS Scroll Snap
+  - Reference
+  - Vue d'ensemble
+translation_of: Web/CSS/CSS_Scroll_Snap
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><em><strong>CSS Scroll Snap</strong></em> est un module de spécification CSS qui introduit les positions d'accroche lors du défilement. Cela permet de garantir la position sur laquelle on arrive après avoir fait défiler du contenu.</p>
+
+<div class="note">
+<p><strong>Note :</strong> La version précédente ce module, <em>Scroll Snap Points</em>, est dépréciée et est désormais remplacée par <em>CSS Scroll Snap</em>.</p>
+</div>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés_CSS_applicables_aux_conteneurs">Propriétés CSS applicables aux conteneurs</h3>
+
+<ul>
+ <li>{{cssxref("scroll-snap-type")}}</li>
+ <li>{{cssxref("scroll-snap-stop")}}</li>
+ <li>{{cssxref("scroll-padding")}}</li>
+ <li>{{cssxref("scroll-padding-top")}}</li>
+ <li>{{cssxref("scroll-padding-right")}}</li>
+ <li>{{cssxref("scroll-padding-bottom")}}</li>
+ <li>{{cssxref("scroll-padding-left")}}</li>
+ <li>{{cssxref("scroll-padding-inline")}}</li>
+ <li>{{cssxref("scroll-padding-inline-start")}}</li>
+ <li>{{cssxref("scroll-padding-inline-end")}}</li>
+ <li>{{cssxref("scroll-padding-block")}}</li>
+ <li>{{cssxref("scroll-padding-block-start")}}</li>
+ <li>{{cssxref("scroll-padding-block-end")}}</li>
+</ul>
+
+<h3 id="Propriétés_CSS_applicables_aux_éléments_enfants">Propriétés CSS applicables aux éléments enfants</h3>
+
+<ul>
+ <li>{{cssxref("scroll-snap-align")}}</li>
+ <li>{{cssxref("scroll-margin")}}</li>
+ <li>{{cssxref("scroll-margin-top")}}</li>
+ <li>{{cssxref("scroll-margin-right")}}</li>
+ <li>{{cssxref("scroll-margin-bottom")}}</li>
+ <li>{{cssxref("scroll-margin-left")}}</li>
+ <li>{{cssxref("scroll-margin-inline")}}</li>
+ <li>{{cssxref("scroll-margin-inline-start")}}</li>
+ <li>{{cssxref("scroll-margin-inline-end")}}</li>
+ <li>{{cssxref("scroll-margin-block")}}</li>
+ <li>{{cssxref("scroll-margin-block-start")}}</li>
+ <li>{{cssxref("scroll-margin-block-end")}}</li>
+</ul>
+
+<h2 id="Guides">Guides</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Scroll_Snap/Concepts_de_base">Concepts de bases pour <em>CSS Scroll Snap</em></a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Scroll_Snap/Compatibilit%C3%A9_navigateurs">Compatiblité des navigateurs et <em>CSS Scroll Snap</em></a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scroll Snap Points")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Les informations de compatibilité sont présentes sur chacune des pages des propriétés. <a href="/fr/docs/Web/CSS/CSS_Scroll_Snap/Compatibilit%C3%A9_navigateurs">Voir le guide sur la compatibilité des navigateurs</a> afin de comprendre comment les différentes versions de la spécification sont implémentées.</p>
diff --git a/files/fr/web/css/css_scroll_snap_points/index.html b/files/fr/web/css/css_scroll_snap_points/index.html
new file mode 100644
index 0000000000..8d728f0b0c
--- /dev/null
+++ b/files/fr/web/css/css_scroll_snap_points/index.html
@@ -0,0 +1,51 @@
+---
+title: CSS Scroll Snap Points
+slug: Web/CSS/CSS_Scroll_Snap_Points
+tags:
+  - Aperçu
+  - CSS
+  - CSS Scroll Snap Points
+  - Déprécié
+  - Reference
+translation_of: Web/CSS/CSS_Scroll_Snap_Points
+---
+<div>{{CSSRef}}{{deprecated_header}}</div>
+
+<p><em><strong>CSS Scroll Snap Points</strong></em> (ou <strong>points d'accroche CSS</strong>) est un module CSS qui introduit les positions d'accroche. Il définit les propriétés qui gèrent les « points d'accroche » utilisés lors du défilement des éléments.</p>
+
+<div class="note">
+<p><strong>Note :</strong> C'est désormais le module de spécification <a href="/fr/docs/Web/CSS/CSS_Scroll_Snap">CSS Scroll Snap</a> qui définit ces fonctionnalités.</p>
+</div>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("scroll-snap-coordinate")}}</li>
+ <li>{{cssxref("scroll-snap-destination")}}</li>
+ <li>{{cssxref("scroll-snap-points-x")}}</li>
+ <li>{{cssxref("scroll-snap-points-y")}}</li>
+ <li>{{cssxref("scroll-snap-type")}}</li>
+</ul>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-points-y", "scroll-snap-points-y")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/css/css_scrollbars/index.html b/files/fr/web/css/css_scrollbars/index.html
new file mode 100644
index 0000000000..ea3116d1e6
--- /dev/null
+++ b/files/fr/web/css/css_scrollbars/index.html
@@ -0,0 +1,93 @@
+---
+title: CSS Scrollbars
+slug: Web/CSS/CSS_Scrollbars
+tags:
+  - Aperçu
+  - CSS
+  - css scrollbars
+translation_of: Web/CSS/CSS_Scrollbars
+---
+<div>{{CSSRef}} {{SeeCompatTable}}</div>
+
+<p class="summary">Le module de spécification <em>CSS Scrollbars</em> standardise la mise en forme des barres de défilement (<em>scrollbar</em>) notamment introduite en 2000 avec Windows IE 5.5.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on crée une barre de défilement fine avec une piste verte et un curseur violet.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<div id="Example">
+<pre class="brush:css">.scroller {
+  width: 300px;
+  height: 100px;
+  overflow-y: scroll;
+  scrollbar-color: rebeccapurple green;
+  scrollbar-width: thin;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="scroller"&gt;Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+</div>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("scrollbar-width")}}</li>
+ <li>{{cssxref("scrollbar-color")}}</li>
+</ul>
+</div>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Lors du paramétrage des barres de défilement, on s'assurera que le contraste avec les éléments alentour est suffisant et que la surface d'interaction est suffisamment grande pour les personnes qui utilisent une interface tactile.</p>
+
+<ul>
+ <li><a href="http://adrianroselli.com/2019/01/baseline-rules-for-scrollbar-usability.html">Règles de base pour l'utilisabilité des barres de défilement, par Adrian Roselli (en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Scrollbars')}}</td>
+   <td>{{Spec2('CSS Scrollbars')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<h3 id="scrollbar-width">scrollbar-width</h3>
+
+<div>{{Compat("css.properties.scrollbar-width")}}</div>
+
+<h3 id="scrollbar-color">scrollbar-color</h3>
+
+<div>{{Compat("css.properties.scrollbar-color")}}</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{CSSxRef("::-webkit-scrollbar")}}</li>
+ <li>{{CSSxRef("-ms-overflow-style")}}</li>
+</ul>
diff --git a/files/fr/web/css/css_shapes/aperçu_formes_css/index.html b/files/fr/web/css/css_shapes/aperçu_formes_css/index.html
new file mode 100644
index 0000000000..bf8d674cf3
--- /dev/null
+++ b/files/fr/web/css/css_shapes/aperçu_formes_css/index.html
@@ -0,0 +1,125 @@
+---
+title: Aperçu des formes CSS
+slug: Web/CSS/CSS_Shapes/Aperçu_formes_CSS
+tags:
+  - Aperçu
+  - CSS
+  - CSS Shapes
+  - Formes CSS
+translation_of: Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">La spécification <a href="https://www.w3.org/TR/css-shapes/">CSS Shapes Level 1</a> définit les formes géométriques en CSS. Pour ce module de niveau 1, ces formes s'appliquent aux éléments qui utilisent une disposition flottante. Dans cet article, nous verrons un aperçu de ce qu'il est possible de faire avec les formes en CSS.</p>
+
+<p>Si on fait flotter un élément à gauche d'un texte, on verra le texte écrit autour de cet élément en suivant un contour rectangulaire. Si on applique une forme circulaire à cet élément, le texte suivra alors le contour du cercle.</p>
+
+<p>Il existe différentes façons de créer des formes CSS et nous verrons, dans ces guides, leur fonctionnement et les cas d'utilisation.</p>
+
+<h2 id="Que_définit_la_spécification">Que définit la spécification ?</h2>
+
+<p>La spécification définit trois nouvelles propriétés :</p>
+
+<ul>
+ <li>{{cssxref("shape-outside")}} qui permet de définir des formes simples</li>
+ <li>{{cssxref("shape-image-threshold")}} qui permet d'indiquer un seuil d'opacité. Si une image est utilisée afin de définir une forme, seuls les fragments de l'image qui sont d'une opacité supérieure ou égale à ce seuil seront utilisés afin de créer la forme. Les autres fragments de l'image sont ignorés.</li>
+ <li>{{cssxref("shape-margin")}} définit une marge autour d'une forme</li>
+</ul>
+
+<h2 id="Définir_des_formes_simples">Définir des formes simples</h2>
+
+<p>La propriété <code>shape-outside</code> permet de définir une forme. Cette propriété peut prendre différentes valeurs dont chacune définit une forme différente. Ces valeurs sont définies par le type de donnée {{cssxref("&lt;basic-shape&gt;")}}. Prenons un exemple simple pour commencer.</p>
+
+<p>Dans l'exemple qui suit, on a une image qui flotte à gauche. Ensuite, on lui applique <code>shape-outside</code> avec la valeur <code>circle(50%)</code>. Grâce à cette règle, le contenu épouse alors une forme circulaire plutôt que le rectangle qui était formé par la boîte de l'image.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/overview/circle.html", '100%', 720)}}</p>
+
+<p>À l'heure actuelle, la spécification indique qu'un élément doit flotter si on veut lui appliquer <code>&lt;basic-shape&gt;</code>. De cette façon, l'amélioration progressive est rapidement obtenue car si le navigateur ne prend pas en charge les formes CSS, l'utilisateur verra le contenu épouser une forme rectangulaire (comme auparavant). Si le navigateur prend en charge les formes, la disposition visuelle sera améliorée.</p>
+
+<h3 id="Formes_simples_(Basic_Shapes)">Formes simples (<em>Basic Shapes</em>)</h3>
+
+<p>La valeur <code>circle(50%)</code> est une exemple de forme simple. La spécification fournit quatre valeur de types <code>&lt;basic-shape&gt;</code> :</p>
+
+<ul>
+ <li><code>inset()</code></li>
+ <li><code>circle()</code></li>
+ <li><code>ellipse()</code></li>
+ <li><code>polygon()</code></li>
+</ul>
+
+<p>Avec la valeur <code>inset()</code>, le texte environnant continue d'épouser une forme rectangulaire mais on peut décaler ce rectangle afin de rapprocher le texte de l'objet flottant par exemple.</p>
+
+<p>Nous avons vu le fonctionnement de <code>circle()</code> dans l'exemple précédent : cette notation fonctionnelle permet de créer une forme circulaire. <code>ellipse()</code> est assez proche et permet de créer une ellipse (qu'on peut voir comme un cercle aplati). Si aucune de ces formes ne vous convient, vous pouvez utiliser <code>polygon()</code> afin de créer un polygone correspondant à une forme complexe.</p>
+
+<p>Dans <a href="/fr/docs/Web/CSS/CSS_Shapes/Formes_simples">le guide sur les formes simples</a>, nous verrons comment créer et exploiter ces formes.</p>
+
+<h3 id="Boîtes_de_référence">Boîtes de référence</h3>
+
+<p>Les formes sont créées sur une boîte donnée. Aussi, on peut créer une boîte par rapport à chacune des boîtes du <a href="/fr/docs/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte">modèle de boîte</a> et utiliser les valeurs :</p>
+
+<ul>
+ <li><code>border-box</code></li>
+ <li><code>padding-box</code></li>
+ <li><code>content-box</code></li>
+ <li><code>margin-box</code></li>
+</ul>
+
+<p>Dans l'exemple qui suit, vous pouvez modifier la valeur <code>border-box</code> afin d'utiliser une autre valeur et observer comment se déplace la forme par rapport à la boîte.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/overview/box.html", '100%', 810)}}</p>
+
+<p>Pour en savoir plus, voir <a href="/fr/docs/Web/CSS/CSS_Shapes/Shapes_From_Box_Values">le guide sur les formes et les boîtes</a>.</p>
+
+<h3 id="Générer_une_forme_à_partir_d'une_image">Générer une forme à partir d'une image</h3>
+
+<p>Une autre méthode qui peut s'avérer utile consiste à générer une forme à partir d'une image et de son canal alpha :  le texte épousera alors la forme non-transparente de l'image. On peut alors avoir un texte qui « s'écoule » dans une image ou autour. Cette méthode permet aussi d'avoir une forme plus complexe sans avoir à recourir à un polygone (il n'est pas nécessaire que  l'image  soit visible).</p>
+
+<p>Attention, les images utilisées ainsi doivent être <a href="/en-US/docs/Web/HTTP/CORS">compatibles avec les règles CORS</a>. Se n'est pass le cas, <code>shape-outside</code> se comportera comme si elle avait reçu la valeur <code>none</code> et il n'y aura alors aucune forme.</p>
+
+<p>Dans l'exemple qui suit, on utilise une image avec une zone complètement transparente et on utilise une image comme valeur d'URL pour <code>shape-outside</code>. La forme ainsi créée utilise la zone opaque de l'image : la forme de la montgolfière.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/overview/image.html", '100%', 800)}}</p>
+
+<h4 id="shape-image-threshold"><code>shape-image-threshold</code></h4>
+
+<p>La propriété <code>shape-image-threshold</code> permet d'ajuster le seuil de transparence utilisé pour créer une forme à partir d'une image. Si la valeur de <code>shape-image-threshold</code> est <code>0.0</code> (la valeur initiale), ce seront les parties totalement transparentes de l'image qui créeront la forme. Si la valeur <code>1.0</code>, toutes les zones de l'image (y compris celles totalement opaques) seront utilisées pour la forme. Les valeurs intermédiaires permettent d'utiliser des zones partiellement transparentes pour définir la forme.</p>
+
+<p>Dans l'exemple suivant, on utilise une image qui est un dégradé et qui permet de définir la forme. Vous pouvez modifier la valeur du seuil afin de faire évoluer la forme.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/overview/threshold.html", '100%', 820)}}</p>
+
+<p>Dans l'article <a href="/fr/docs/Web/CSS/CSS_Shapes/Shapes_From_Images">Créer des formes à partir d'images</a>, nous verrons plus en détails le fonctionnement de ces propriétés.</p>
+
+<h2 id="La_propriété_shape-margin">La propriété <code>shape-margin</code></h2>
+
+<p>La propriété {{cssxref("shape-margin")}} ajoute une marge à <code>shape-outside</code>. Cela permet d'écarter le contenu de la forme.</p>
+
+<p>Dans l'exemple qui suit, on a une forme simple sur laquelle on ajoute <code>shape-margin</code>. Vous pouvez modifier la valeur de cette propriété afin de rapprocher ou d'éloigner le texte de la forme.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/overview/shape-margin.html", '100%', 800)}}</p>
+
+<h2 id="Utiliser_du_contenu_généré_comme_objet_flottant">Utiliser du contenu généré comme objet flottant</h2>
+
+<p>Dans les exemples qui précèdent, nous avons utilisé des images ou des éléments visibles afin de définir la forme. Autrement dit, la forme est visible sur la page. Il se peut également qu'on veuille que le texte suive une ligne invisible qui ne soit pas droite. On pourrait le faire avec une image ensuite rendue invisible mais on aurait alors des éléments redondants dans le document. Aussi, autant utiliser du contenu généré afin de strictement conserver la mise en forme dans la feuille CSS.</p>
+
+<p>Dans l'exemple qui suit, on utilise du contenu généré afin d'inséer un élément avec une hauteur et une largeur de 150 pixels. On peut alors ensuite utiliser les formes simples, les boîtes de référence ou le canal alpha d'une image afin de créer une forme qu'épouserait le texte.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/overview/generated-content.html", '100%', 850)}}</p>
+
+<h2 id="Relations_avec_clip-path">Relations avec <code>clip-path</code></h2>
+
+<p>Les valeurs utilisées pour les formes simples et pour les boîtes de référence sont les mêmes que celles utilisées pour la propriété {{cssxref("clip-path")}}. Ainsi, si on souhaite créer une forme à partir d'une image et rogner une partie de cette image, on pourra utiliser les mêmes valeurs.</p>
+
+<p>Ci-après, on a une image carrée avec un arrière-plan bleu. On a défini la forme avec  <code>shape-outside: ellipse(40% 50%);</code> puis utilisé <code>clip-path: ellipse(40% 50%);</code> afin de rogner l'image pour suivre la forme.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/overview/clip-path.html", '100%', 800)}}</p>
+
+<h2 id="Outils_de_développement_pour_les_formes_CSS">Outils de développement pour les formes CSS</h2>
+
+<p>Avec la prise en charge des formes CSS, Firefox sort également une nouvelle fonctionnalités dans les outils de développement : <a href="/fr/docs/Outils/Inspecteur/Comment/Edit_CSS_shapes">l'éditeur de chemin pour les formes (<em>Shape Path Editor</em>)</a>. Cet outil permet d'inspecter les formes présentes sur la page et de modifier leurs valeurs à la volée. Si votre polygone n'a pas l'aspect escompté, vous pouvez le modifier via l'éditeur puis recopier la nouvelle valeur dans votre fichier CSS.</p>
+
+<p>L'éditeur de chemin pour les formes sera activé par défaut avec Firefox 60 pour les formes générées grâce à <code>clip-path</code>. Vous pouvez également l'utiliser afin d'éditer les formes générées grâce à <code>shape-outside</code> à condition d'avoir activé la préférence <code>layout.css.shape-outside.enabled</code>.</p>
+
+<h2 id="Les_futures_fonctionnalités">Les futures fonctionnalités</h2>
+
+<p>Dans sa version initiale, le module de spécification pour les formes contenait une propriété <code>shape-inside</code> afin de créer des formes à l'intérieur d'un élément. Cette propriété, ainsi que la possibilité de créer des formes sur des éléments non-flottants, a été repoussée à la spécification de <a href="https://drafts.csswg.org/css-shapes-2/">niveau 2</a>. La propriété <code>shape-inside</code> était initialement décrite dans la spécification de niveau 1 et vous pouvez donc trouver certains tutoriels qui détaillent ces deux propriétés.</p>
diff --git a/files/fr/web/css/css_shapes/créer_formes_boîtes/index.html b/files/fr/web/css/css_shapes/créer_formes_boîtes/index.html
new file mode 100644
index 0000000000..5ed5b06bfa
--- /dev/null
+++ b/files/fr/web/css/css_shapes/créer_formes_boîtes/index.html
@@ -0,0 +1,75 @@
+---
+title: Créer des formes à partir des boîtes
+slug: Web/CSS/CSS_Shapes/Créer_formes_boîtes
+tags:
+  - Boîtes
+  - CSS
+  - CSS Shapes
+  - Formes CSS
+  - Guide
+translation_of: Web/CSS/CSS_Shapes/From_box_values
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Une méthode permettant de créer des formes consiste à utiliser les valeurs provenant du modèle de boîte CSS. Dans cet article, nous verrons comment les utiliser.</p>
+
+<p>Les <a href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">valeurs de boîte</a> qui sont autorisées pour les formes sont :</p>
+
+<ul>
+ <li><code>content-box</code></li>
+ <li><code>padding-box</code></li>
+ <li><code>border-box</code></li>
+ <li><code>margin-box</code></li>
+</ul>
+
+<p>Les valeurs <code>border-radius</code> sont également prises en charge et on peut donc avoir une forme qui possède une bordure arrondie.</p>
+
+<h2 id="Le_modèle_de_boîte_CSS">Le modèle de boîte CSS</h2>
+
+<p>Les valeurs énumérées ci-avant correspondent aux différentes boîtes du modèle de boîte CSS. En CSS, une boîte possède un contenu (<em>content</em>), du remplissage (<em>padding</em>), une bordure (<em>border</em>) ainsi qu'une marge (<em>margin</em>).</p>
+
+<p><img alt="The Box Model consists of the margin, border, padding and content boxes." src="https://mdn.mozillademos.org/files/15845/box-model.png" style="height: 267px; width: 447px;"></p>
+
+<p>En utilisant une de ces valeurs, il est possible de suivre le contour d'une de ces zones. Dans les exemples qui suivent, on utilise un élément qui possède du remplissage, une bordure et une marge afin d'observer l'impact de ces différentes valeurs pour la définition d'une forme et le comportement du contenu alentour.</p>
+
+<h3 id="margin-box"><code>margin-box</code></h3>
+
+<p>La valeur <code>margin-box</code> correspond à la forme de la boîte de marge et suit le bord extérieur de la marge en prenant en compte les coins arrondis de la forme si {{cssxref("border-radius")}} a été utilisé sur l'élément.</p>
+
+<p>Dans l'exemple suivant, on a un élément circulaire mauve qui est un élément {{htmlelement("div")}} avec une hauteur, une largeur et une couleur d'arrière-plan. La propriété <code>border-radius</code> a été utilisée afin de créer le cercle avec <code>border-radius: 50%</code>. L'élément ayant une marge, on peut voir le contenu évoluer autour de cette forme circulaire en prenant la marge en compte.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/box/margin-box.html", '100%', 800)}}</p>
+
+<h3 id="border-box"><code>border-box</code></h3>
+
+<p>La valeur <code>border-box</code> correspond à la forme définie par le bord extérieur de la bordure. La forme épouse la bordure et les éventuels arrondis qui lui sont appliqués. Un élément possède toujours une bordure même si {{cssxref("border")}} n'a pas explicitement été utilisé. Si c'est le cas, <code>border-box</code> sera équivalent à <code>padding-box</code> et la forme suivra le bord extérieur de la boîte de remplissage.</p>
+
+<p>Avec l'exemple qui suit, on peut voir que le texte suit désormais les lignes créées par la bordure. Vous pouvez modifier la taille de cette bordure pour voir le déplacement du contenu autour.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/box/border-box.html", '100%', 800)}}</p>
+
+<h3 id="padding-box"><code>padding-box</code></h3>
+
+<p>La valeur <code>padding-box</code> correspond à la forme définie par le bord extérieur de la boîte de remplissage (<em>padding</em>). La forme suit les règles d'arrondies appliquées à la bordure. Si aucun remplissage n'est appliqué, <code>padding-box</code> sera équivalent à <code>content-box</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/box/padding-box.html", '100%', 800)}}</p>
+
+<h3 id="content-box"><code>content-box</code></h3>
+
+<p>La valeur <code>content-box</code> correspond à la forme définie par le bord extérieur de la boîte de contenu. Chaque coin possède un rayon de courbure qui est le maximum entre <code>0</code> et <code>border-radius − border-width − padding</code>. Cela signifie qu'il est impossible d'avoir une valeur négative pour cette boîte.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/box/content-box.html", '100%', 800)}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> Pour en savoir plus sur le modèle de boîte CSS, voir <a href="/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte">cet article</a>.</p>
+</div>
+
+<h2 id="Quand_utiliser_les_valeurs_de_boîte">Quand utiliser les valeurs de boîte</h2>
+
+<p>Les valeurs correspondant aux boîtes permettent de créer des formes simplement. Toutefois, cela ne fonctionne que pour des formes simples, définies en partie avec la propriété <code>border-radius</code>. Les exemples ci-avant montrent un tel cas d'utilisation (on crée une forme circulaire grâce à cette propriété).</p>
+
+<p>Malgré cela, il est possible de créer des effets intéressants en n'utilisant que cette technique. Pour ce dernier exemple, on a deux éléments qui flottent à droite et à gauche et on leur affecte une valeur <code>border-radius</code> de 100% dans la direction la plus proche du texte.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/box/bottom-margin-box.html", '100%', 800)}}</p>
+
+<p>Pour obtenir des formes plus complexes, il faudra utiliser les valeurs de <a href="/fr/docs/Web/CSS/CSS_Shapes/Formes_simples">type <code>&lt;basic-shape&gt;</code> (les formes simples)</a> ou <a href="/fr/docs/Web/CSS/CSS_Shapes/Générer_formes_images">définir une forme à partir d'une image</a>, tel que nous le verrons dans les autres guides de cette section.</p>
diff --git a/files/fr/web/css/css_shapes/formes_simples/index.html b/files/fr/web/css/css_shapes/formes_simples/index.html
new file mode 100644
index 0000000000..e1c594bce0
--- /dev/null
+++ b/files/fr/web/css/css_shapes/formes_simples/index.html
@@ -0,0 +1,149 @@
+---
+title: Formes simples
+slug: Web/CSS/CSS_Shapes/Formes_simples
+tags:
+  - CSS
+  - CSS Shapes
+  - Guide
+translation_of: Web/CSS/CSS_Shapes/Basic_Shapes
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Les formes CSS peuvent être définies grâce au type {{cssxref("&lt;basic-shape&gt;")}}. Dans ce guide, nous verrons les différentes valeurs utilisables avec ce type et leur fonctionnement. Ces formes peuvent par exemple décrire des cercles simples voire des polygones complexes.</p>
+
+<p>Avant d'étudier ces formes dans le détail, attardons nous sur deux notions qui permettent de construire les formes :</p>
+
+<ul>
+ <li>Le type de donnée <code>&lt;basic-shape&gt;</code></li>
+ <li>La boîte de référence</li>
+</ul>
+
+<h2 id="Le_type_&lt;basic-shape>">Le type <code>&lt;basic-shape&gt;</code></h2>
+
+<p>Le type de donnée <code>&lt;basic-shape&gt;</code> fournit les valeurs que nous utiliserons ici pour toutes les formes simples. Ce type utilise une notation fonctionnelle : le type de forme souhaité est suivi de parenthèses au sein desquelles on ajoute différentes valeurs pour décrire la forme finale.</p>
+
+<p>Les arguments de ces fonctions varient selon la forme qu'on veut créer et nous allons voir ces arguments dans les exemples ci-après.</p>
+
+<h2 id="La_boîte_de_référence">La boîte de référence</h2>
+
+<p>La boîte de référence définit le système de coordonnées de chaque forme. Nous avons déjà abordé cette boîte <a href="/en-US/docs/Web/CSS/CSS_Shapes/Shapes_From_Box_Values">dans le guide sur la création de formes à partir des boîtes</a> où nous avons directement utilisé la boîte de référence afin de créer une forme.</p>
+
+<p>L'inspecteur des formes CSS de Firefox affiche la boîte de référence lorsqu'on inspecte une forme. Dans la capture d'écran suivante, on a créé un cercle avec <code>shape-outside: circle(50%)</code>, l'élément flottant possède 20 pixels de remplissage avec la bordure et la marge. On voit que l'inspecteur affiche ces boîtes de référence. Lorsqu'on utilise une forme basique, la boîte de référence utilisée par défaut est la boîte des marges. Dans la capture d'écran, on voit que la forme est définie relativement aux boîtes du <a href="/fr/docs/Web/CSS/Mod%C3%A8le_de_bo%C3%AEte_CSS">modèle de boîtes</a>.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15904/shapes-reference-box.png" style="height: 840px; width: 1536px;"></p>
+
+<p>La boîte de référence qu'on veut utiliser peut être ajoutée après la définition de la forme simple. Autrement dit, le comportement obtenu par défaut est équivalent à l'écriture de .</p>
+
+<pre class="brush: css">.shape {
+  shape-outside: circle(50%) margin-box;
+}
+</pre>
+
+<p>On peut changer ce paramètre si la forme utilise une autre boîte du modèle de boîte. Par exemple, si on souhaite utilise la boîte de bordure, on pourra écrire :</p>
+
+<pre class="brush: css">.shape {
+  shape-outside: circle(50%) border-box;
+}
+</pre>
+
+<p>On notera que la boîte <code>margin-box</code> pourra rogner la forme et que les formes créées relativement aux autres formes et qui dépassent la boîte de marge seront rognées pour être inscrites dans la boîte de marge. Nous verrons ce comportement dans les exemples suivants.</p>
+
+<p>Pour une description des boîtes et de leurs relations avec les formes CSS, voir <a href="http://razvancaliman.com/writing/css-shapes-reference-boxes/">Comprendre les liens entre les boîtes de référence et les formes CSS</a>.</p>
+
+<h2 id="inset()"><code>inset()</code></h2>
+
+<p>Le type <code>inset()</code> définit un rectangle. Cela peut sembler peu utile car c'est déjà la forme d'une boîte normale. Toutefois, avec <code>inset()</code>, on peut inclure des décalages et déplacer la forme autour de la boîte de référence.</p>
+
+<p><code>inset()</code> prend comme arguments quatre valeurs pour les quatres côtés : haut, droit, bas, gauche puis une dernière pour <code>border-radius</code>. Le fragment de code CSS suivant permet de créér une forme rectangulaire décalée depuis la boîte de référence (20 pixels du haut et du bas, 10 pixels de la gauche et de la droite) et pour laquelle <code>border-radius</code> vaut 10 pixels.</p>
+
+<pre class="brush: css">.shape {
+  float: left;
+  shape-outside: inset(20px 10px 20px 10px round 10px);
+}
+</pre>
+
+<p>Utilisant les mêmes règles vues pour la version raccourcie de la marge (cf. {{cssxref("margin")}}), on peut indiquer plusieurs décalages de façon synthétique :</p>
+
+<ul>
+ <li>Lorsqu'une seule valeur est fournie, elle est utilisée pour tous les côtés.</li>
+ <li>Lorsque deux valeurs sont fournies, la première correspond aux décalages haut et bas et la deuxième correspond aux décalages gauche et droit</li>
+ <li>Lorsque trois valeurs sont fournies, la première correspond au décalage haut, la deuxième aux décalages droit et gauche et la dernière au décalage bas.</li>
+ <li>Avec quatre valeurs, les décalages suivent l'ordre trigonométrique : haut, droit, bas, gauche.</li>
+</ul>
+
+<p>Ainsi, la règle écrite ci-avant peut-être formulée :</p>
+
+<pre class="brush: css">.shape {
+  float: left;
+  shape-outside: inset(20px 10px round 10px);
+}</pre>
+
+<p>Dans l'exemple qui suit, on a une forme <code>inset()</code> qu'on décale au-delà de l'élément flottant. Vous pouvez éditer l'exemple afin d'observer l'effet des différentes valeurs de décalages.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/basic-shape/inset.html", '100%', 800)}}</p>
+
+<p>Vous pouvez également ajouter une valeur pour la boîte de référence. Dans l'exemple suivant, vous pouvez modifier <code>margin-box</code> afin d'utiliser <code>border-box</code>, <code>padding-box</code> ou <code>content-box</code> pour observer la façon dont la boîte de référence modifie l'origine des coordonnées utilisées pour les décalages.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/basic-shape/inset-box.html", '100%', 800)}}</p>
+
+<h2 id="circle()"><code>circle()</code></h2>
+
+<p>La valeur <code>circle()</code> peut être utilisée pour <code>shape-outside</code> et prend jusqu'à deux argument. Le premier de ces arguments correspond à <code>shape-radius</code>.</p>
+
+<p>La fonction <code>circle()</code> et la fonction <code>ellipse()</code>, pour <code>shape-outside</code>, peuvent utiliser cet argument <code>&lt;shape-radius&gt;</code>. Ce dernier peut être une longueur ou un pourcentage mais également l'un des mots-clés <code>closest-side</code> ou <code>farthest-side</code>.</p>
+
+<p>Le mot-clé <code><strong>closest-side</strong></code> utilise la longueur depuis le centre de la forme jusqu'au côté le plus proche de la boîte de référence. Pour les cercles, c'est le côté le plus proche dans n'importe quelle dimension. Pour les ellipses, c'est le côté le plus proche selon l'axe du rayon de l'ellipse.</p>
+
+<p>Le mot-clé <code><strong>farthest-side</strong></code> utilise la longueur depuis le centre de la forme jusqu'au côté le plus éloigné de la boîte de référence. Pour les cercles, c'est le côté le plus éloigné, quelle que soit la dimension. Pour les ellipses, c'est le côté le plus éloigné selon l'axe du rayon.</p>
+
+<p>Le deuxième argument est une <code>position</code> dont la valeur par défaut est <code>center</code>. Toutefois, n'importe quelle position valide peut être utilisée afin d'indiquer le centre du cercle.</p>
+
+<p>Pour résumer, le cercle accepte un rayon qui peut être une longueur, un pourcentage ou le mot-clé <code>closest-side</code> ou <code>farthest-side</code>, optionnellement suivi par le mot-clé <code>at</code> suivi par une position.</p>
+
+<p>Dans l'exemple qui suit, on crée un cercle sur un objet de 100 pixels de large avec une marge de 20 pixels. On a donc une largeur totale de la boîte de référence de 140 pixels. On indique une valeur de 50% pour <code>shape-radius</code>, ce qui crée donc un cercle de 70 pixels de rayon avec une position fixée à 30%.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/basic-shape/circle.html", '100%', 800)}}</p>
+
+<p>Dans cet exemple, vous pouvez augmenter ou réduire le rayon pour adapter la taille du cercle ou déplacer le cercle via la position. Vous pouvez aussi modifier la boîte de référence.</p>
+
+<p>Ajoutons un autre exemple, en utilisant les mots-clés <code>top left</code> pour indiquer la position, on peut créer une forme en quart de cercle pour le coin supérieur gauche de la page. L'exemple qui suit illustre comment créer un quart de cercle avec du texte qui est écrit autour.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/basic-shape/circle-generated.html", '100%', 700)}}</p>
+
+<h3 id="Limitation_à_la_boîte_de_marge">Limitation à la boîte de marge</h3>
+
+<p>Lorsqu'on a décrit les boîtes de référence ci-avant, on a vu que la boîte de marge pourra rogner la forme. Pour observer cet effet, on peut déplacer le centre du cercle vers le contenu en utilisant la valeur 60% pour la position. Le centre du cercle est alors plus près du contenu et la forme du cercle pourrait dépasser la boîte de marge. La forme est donc rognée et on voit alors un aplat.</p>
+
+<pre class="brush: css"><code>img {
+  float: left;
+  shape-outside: circle(50% at 60%);
+}
+</code></pre>
+
+<p><img alt="The circle shape is clipped by the margin box" src="https://mdn.mozillademos.org/files/15903/shapes-circle-clipped.png" style="height: 602px; width: 1536px;"></p>
+
+<h2 id="ellipse()"><code>ellipse()</code></h2>
+
+<p>Une ellipse peut être vue comme un cercle aplati. De ce point de vu <code>ellipse()</code> fonctionne de façon analogue à <code>circle()</code> mais il est nécessaire d'indiquer deux rayons : un rayon horizontal <code>x</code> et un rayon vertical <code>y</code> (dans cet ordre).</p>
+
+<p>Ces rayons peuvent être suivis par une position qui permet, comme avec <code>circle()</code>, de déplacer le centre de l'ellipse. Dans l'exemple qui suit, on dessine une ellipse avec un rayon horizontal de 40%, un rayon vertical de 50% et une position à gauche. Cela signifie que le centre de l'ellipse sera situé sur le bord gauche et on aura donc une demi-ellipse autour de laquelle s'écoulera le texte. N'hésitez pas à modifier ces valeurs pour voir l'impact sur l'exemple.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/basic-shape/ellipse.html", '100%', 800)}}</p>
+
+<p>Les mots-clés <code>closest-side</code> et <code>farthest-side</code> permettent de créer rapidmeent une ellipse en fonction de la taille de la boîte de référence de l'élément flottant.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/basic-shape/ellipse-keywords.html", '100%', 800)}}</p>
+
+<h2 id="polygon()"><code>polygon()</code></h2>
+
+<p>La forme simple qui permet de créer une grande variété de formes est <code>polygon()</code>. Cette forme prend comme arguments trois ou plusieurs paires de valeurs qui correspondent aux coordonnées dessinées dans la boîte de référence. Attention, les coordonnées doivent au moins former un triangle.</p>
+
+<p>Dans l'exemple qui suit, on crée une forme avec <code>polygon()</code> pour que le texte s'écoule autour. N'hésitez pas à modifier les valeurs pour visualiser les impacts.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/basic-shape/polygon.html", '100%', 800)}}</p>
+
+<p>L'inspecteur de formes Firefox s'avère très utile pour créer une forme de polygone. La capture d'écran qui suit illustre la forme dessinée dans l'outil.</p>
+
+<p><img alt="The polygon basic shape, highlighted with the Shapes Inspector." src="https://mdn.mozillademos.org/files/15902/shapes-polygon.png" style="height: 540px; width: 1524px;"></p>
+
+<p>Une autre ressource qui peut s'avérer utile sur ces sujets est <a href="http://bennettfeely.com/clippy/">Clippy</a> : cet outil permet de créer des formes pour <code>clip-path</code>. Or, les formes utilisées pour <code>clip-path</code> sont les mêmes que pour les formes simples.</p>
diff --git a/files/fr/web/css/css_shapes/générer_formes_images/index.html b/files/fr/web/css/css_shapes/générer_formes_images/index.html
new file mode 100644
index 0000000000..e85db873c1
--- /dev/null
+++ b/files/fr/web/css/css_shapes/générer_formes_images/index.html
@@ -0,0 +1,64 @@
+---
+title: Générer des formes avec des images
+slug: Web/CSS/CSS_Shapes/Générer_formes_images
+tags:
+  - CSS
+  - Formes CSS
+  - Guide
+translation_of: Web/CSS/CSS_Shapes/Shapes_From_Images
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Dans ce guide, nous allons voir comment créer une forme à partir d'une image, que ce soit un fichier avec un canal alpha ou un dégradé CSS. Grâce aux images, on peut suivre une forme complexe sans avoir à dessiner de polygone. On peut créer la forme à partir d'un éditeur graphique et utiliser le contour de cette image formé par la ligne des pixels moins opaques qu'un seuil donné.</p>
+
+<h2 id="Générer_une_forme_simple_avec_une_image">Générer une forme simple avec une image</h2>
+
+<p>Pour utiliser une image afin de créer une forme, il est nécessaire que cette image dispose d'un canal alpha, c'est-à-dire une zone qui n'est pas complètement opaque. La propriété {{cssxref("shape-image-threshold")}} est utilisée afin de fournir un seuil d'opacité. Les pixels qui sont plus opaques que cette valeur seront alors utilisés pour calculer la zone de la forme.</p>
+
+<p>Dans l'exemple suivant, on utilise un image avec une étoile rouge complètement opaque entourée d'une zone complètement transparente. On fournit le chemin de l'image à {{cssxref("shape-outside")}} et le contenu environnant épouse alors la forme de l'image.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/image/simple-example.html", '100%', 800)}}</p>
+
+<p>On peut utiliser {{cssxref("shape-margin")}} afin d'écarter le texte de la forme avec une certaine marge.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/image/margin.html", '100%', 800)}}</p>
+
+<h2 id="Origines_et_compatibilité_CORS">Origines et compatibilité CORS</h2>
+
+<p>Attention, les images utilisées pour créer les formes doivent <a href="/fr/docs/Web/HTTP/CORS">être compatibles pour le CORS</a>. Une image hébergée sur le même domaine que le site devrait fonctionner. En revanche, si les images sont hébergées sur un domaine différent (celui d'un CDN par exemple), il faudra s'assurer que les bons en-têtes HTTP sont fournis afin de construire des images. À cause de ce prérequis, si vous testez un site en local avec vos fichiers, les formes CSS à partir d'images ne fonctionneront pas si vous ne mettez pas en place de serveur web local.</p>
+
+<h3 id="Ai-je_à_faire_à_un_problème_de_CORS">Ai-je à faire à un problème de CORS ?</h3>
+
+<p>Les outils de développement aident à déterminer si le problème vient du CORS. Dans Chrome, les problèmes CORS seront écrits dans la console. Dans Firefox, si vous inspectez la propriété en question, vous verrez une alerte indiquant que l'image ne peut pas être chargée. Dans ce cas, il est probable que l'image ne puisse être utilisée comme forme à cause du CORS.</p>
+
+<h2 id="Utiliser_un_seuil">Utiliser un seuil</h2>
+
+<p>La propriété {{cssxref("shape-image-threshold")}} permet de créer des formes à partir d'une image en utilisant des zones qui ne sont pas totalement transparentes. Si <code>shape-image-threshold</code> vaut <code>0.0</code> (qui correspond à la valeur initiale), ce ne sont que les zones totalement transparentes qui seront utilisées pour fabriquer la forme. Si la valeur <code>1.0</code> est utilisée, le seuil correspondra aux zones totalement opaques et toute l'image seront alors utilisée. Les valeurs intermédiaires permettent d'utiliser des zones partiellement transparentes afin de construire la forme.</p>
+
+<p>Dans l'exemple qui suit, on utilise une image semblable à celle du premier exemple. Toutefois, pour cette image, l'arrière-plan de l'étoile n'est pas totalement transparent : il a une opacité de 20% (créée avec un éditeur graphique). Si on utilise <code>shape-image-threshold</code> avec la valeur <code>0.3</code>, on aura donc la forme de l'étoile mais si on utilise une valeur inférieure à <code>0.2</code>, on aura une forme rectangulaire.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/image/threshold.html", '100%', 800)}}</p>
+
+<h2 id="Utiliser_des_images_avec_du_contenu_généré">Utiliser des images avec du contenu généré</h2>
+
+<p>Dans l'exemple ci-avant, on utilise une image pour {{cssxref("shape-outside")}} et on utilise également cette image dans le document. La plupart des exemples et démos utilisent ce procéder car cela aide à illustrer la forme suivie par le texte environnant. Cependant, il faut comprendre que la propriété <code>shape-outside</code> ne repose pas sur l'image utilisée dans le document et qu'il n'est pas nécessaire d'afficher une image dans le document afin de construire une forme à partir d'une image.</p>
+
+<p>Il est nécessaire d'avoir un contenu flottant pour créer une forme mais ce contenu peut tout à fait être généré grâce à la feuille de style. Dans l'exemple qui suit, on utilise un contenu généré qui est placé dans une disposition flottante, avec une image d'étoile pour créer la forme mais cette image n'est pas affichée sur la page.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/image/generated-content.html", '100%', 800)}}</p>
+
+<h2 id="Créer_des_formes_avec_un_dégradé">Créer des formes avec un dégradé</h2>
+
+<p>En CSS, <a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">un dégradé</a> est une image. On peut donc utiliser un dégradé afin de générer une forme.</p>
+
+<p>Dans le prochain exemple, on utilise un contenu généré flottant dont l'image d'arrière-plan est un dégradé linéaire. On utilise la même valeur pour {{cssxref("shape-outside")}}. Le dégradé linéaire évolue du mauve vers le transparent. En modifiant la valeur de {{cssxref("shape-image-threshold")}}, on peut donc sélectionner le niveau de transparence nécessaire à la création de la forme. N'hésitez pas à modifier la valeur du seuil dans l'exemple suivant afin de voir le déplacement du contour en fonction du niveau de dégradé.</p>
+
+<p>Vous pouvez également essayer de complètement retirer l'image d'arrière-plan afin d'utiliser uniquement le dégradé afin de créer la forme et ne pas l'afficher sur l'image.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/image/gradient.html", '100%', 800)}}</p>
+
+<p>Dans l'exemple qui suit, on utilise un dégradé radial avec une ellipse et on utilise les zones transparentes du dégradé afin de créer la forme.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/image/radial-gradient.html", '100%', 800)}}</p>
+
+<p>Vous pouvez éditer ces exemples interactifs afin de voir l'évolution de la forme en fonction des modifications.</p>
diff --git a/files/fr/web/css/css_shapes/index.html b/files/fr/web/css/css_shapes/index.html
new file mode 100644
index 0000000000..485385aa10
--- /dev/null
+++ b/files/fr/web/css/css_shapes/index.html
@@ -0,0 +1,80 @@
+---
+title: CSS Shapes
+slug: Web/CSS/CSS_Shapes
+tags:
+  - Aperçu
+  - CSS
+  - CSS Shapes
+  - Reference
+translation_of: Web/CSS/CSS_Shapes
+---
+<div>{{CSSRef}}</div>
+
+<p><em><strong>CSS Shapes</strong></em> est un module de spécification CSS qui décrit les formes géométriques. <a href="https://drafts.csswg.org/css-shapes/">Selon le niveau 1 de cette spécification</a>, les formes CSS peuvent être appliquées aux éléments flottants. Cette spécification définit différentes façon permettant de définir la forme d'un élément flottant afin que les lignes « coulent » autour de la forme plutôt qu'autour du rectangle formé par la boîte de l'élément.</p>
+
+<h2 id="Basic_Example" name="Basic_Example">Exemple simple</h2>
+
+<p>Dans l'exemple qui suit, on a une image qui flotte à gauche et la propriété <code>shape-outside</code> qui lui est appliquée vaut <code>circle(50%)</code>. Ceci crée une forme circulaire autour de laquelle le contenu peut s'inscrire. Les boîtes des lignes pour le texte qui entourent l'image sont donc modifiées.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/overview/circle.html", '100%', 720)}}</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("shape-image-threshold")}}</li>
+ <li>{{cssxref("shape-margin")}}</li>
+ <li>{{cssxref("shape-outside")}}</li>
+</ul>
+</div>
+
+<h3 id="Types_de_donnée">Types de donnée</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("&lt;basic-shape&gt;")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes">Un aperçu des formes CSS (<em>CSS Shapes</em>)</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Shapes/Shapes_From_Box_Values">Les formes appliquées aux différentes boîtes</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Shapes/Basic_Shapes">Des formes simples</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Shapes/Shapes_From_Images">Des formes à partir d'images</a></li>
+ <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Éditer les contours d'une forme en CSS dans Firefox </a></li>
+</ul>
+
+<h2 id="Ressources_externes">Ressources externes</h2>
+
+<ul>
+ <li><a href="https://codepen.io/KristopherVanSant/post/css-shapes-resources">Une liste de ressources sur les formes CSS (en anglais)</a></li>
+ <li><a href="https://alistapart.com/article/css-shapes-101"><em>CSS Shapes 101</em> (en anglais)</a></li>
+ <li><a href="https://www.sarasoueidan.com/blog/css-shapes/">Creating non-rectangular layouts with CSS Shapes (en anglais)</a></li>
+ <li><a href="https://webdesign.tutsplus.com/tutorials/how-to-use-css-shapes-in-your-web-design--cms-27498"><em>How To Use CSS Shapes In Your Web Design</em> (en anglais)</a></li>
+ <li><a href="https://www.webdesignerdepot.com/2015/03/how-to-get-started-with-css-shapes/"><em>How To Get Started With CSS Shapes</em> (en anglais)</a></li>
+ <li><a href="https://medium.com/@MHarreither/what-i-learned-in-one-weekend-with-css-shapes-66ae9be69cc5"><em>What I Learned In One Weekend With CSS Shapes</em> (en anglais)</a></li>
+ <li><a href="https://theblog.adobe.com/css-vs-svg-shapes-and-arbitrarily-shaped-ui-components/"><em>CSS vs. SVG: Shapes and Arbitrarily-Shaped UI Components</em> (en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Shapes")}}</td>
+   <td>{{Spec2("CSS Shapes")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/css/css_table/index.html b/files/fr/web/css/css_table/index.html
new file mode 100644
index 0000000000..928231d528
--- /dev/null
+++ b/files/fr/web/css/css_table/index.html
@@ -0,0 +1,46 @@
+---
+title: CSS Table
+slug: Web/CSS/CSS_Table
+tags:
+  - Aperçu
+  - CSS
+  - Reference
+translation_of: Web/CSS/CSS_Table
+---
+<div>{{CSSRef}}</div>
+
+<p><em><strong>CSS Table</strong></em> (ou module des tableaux CSS) est un module CSS qui définit comment disposer les données de tableaux.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("border-collapse")}}</li>
+ <li>{{cssxref("border-spacing")}}</li>
+ <li>{{cssxref("caption-side")}}</li>
+ <li>{{cssxref("empty-cells")}}</li>
+ <li>{{cssxref("table-layout")}}</li>
+ <li>{{cssxref("vertical-align")}}</li>
+</ul>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS2.1", "tables.html")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/css/css_text/index.html b/files/fr/web/css/css_text/index.html
new file mode 100644
index 0000000000..91ca768d97
--- /dev/null
+++ b/files/fr/web/css/css_text/index.html
@@ -0,0 +1,71 @@
+---
+title: CSS Text
+slug: Web/CSS/CSS_Text
+tags:
+  - Aperçu
+  - CSS
+  - CSS Text
+  - Reference
+translation_of: Web/CSS/CSS_Text
+---
+<div>{{CSSRef}}</div>
+
+<p><em><strong>CSS Text</strong></em> (ou module texte de CSS) est un module CSS qui définit comment effectuer des manipulations de texte, comme les coupures de mots, la justification et l'alignement, la gestion des espaces et les transformations de texte.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("hanging-punctuation")}}</li>
+ <li>{{cssxref("hyphens")}}</li>
+ <li>{{cssxref("letter-spacing")}}</li>
+ <li>{{cssxref("line-break")}}</li>
+ <li>{{cssxref("overflow-wrap")}}</li>
+ <li>{{cssxref("tab-size")}}</li>
+ <li>{{cssxref("text-align")}}</li>
+ <li>{{cssxref("text-align-last")}}</li>
+ <li>{{cssxref("text-indent")}}</li>
+ <li>{{cssxref("text-justify")}}</li>
+ <li>{{cssxref("text-size-adjust")}}</li>
+ <li>{{cssxref("text-transform")}}</li>
+ <li>{{cssxref("white-space")}}</li>
+ <li>{{cssxref("word-break")}}</li>
+ <li>{{cssxref("word-spacing")}}</li>
+</ul>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Logical Properties')}}</td>
+   <td>{{Spec2('CSS Logical Properties')}}</td>
+   <td>Actualise certaines propriétés pour être indépendant de la direction du texte.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Text')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/css/css_text_decoration/index.html b/files/fr/web/css/css_text_decoration/index.html
new file mode 100644
index 0000000000..885c8cdd54
--- /dev/null
+++ b/files/fr/web/css/css_text_decoration/index.html
@@ -0,0 +1,66 @@
+---
+title: CSS Text Decoration
+slug: Web/CSS/CSS_Text_Decoration
+tags:
+  - Aperçu
+  - CSS
+  - Reference
+translation_of: Web/CSS/CSS_Text_Decoration
+---
+<div>{{CSSRef}}</div>
+
+<p><em><strong>CSS Text Decoration</strong></em> (ou module des décorations textuelles CSS) est un module CSS qui définit les caractéristiques relatives à la décoration du texte, comme le soulignage, les ombres et les marques d'emphase.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("letter-spacing")}}</li>
+ <li>{{cssxref("text-align")}}</li>
+ <li>{{cssxref("text-decoration")}}</li>
+ <li>{{cssxref("text-decoration-color")}}</li>
+ <li>{{cssxref("text-decoration-line")}}</li>
+ <li>{{cssxref("text-decoration-style")}}</li>
+ <li>{{cssxref("text-emphasis")}}</li>
+ <li>{{cssxref("text-emphasis-color")}}</li>
+ <li>{{cssxref("text-emphasis-position")}}</li>
+ <li>{{cssxref("text-emphasis-style")}}</li>
+ <li>{{cssxref("text-indent")}}</li>
+ <li>{{cssxref("text-rendering")}}</li>
+ <li>{{cssxref("text-shadow")}}</li>
+ <li>{{cssxref("text-transform")}}</li>
+ <li>{{cssxref("white-space")}}</li>
+ <li>{{cssxref("word-spacing")}}</li>
+</ul>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text Decoration')}}</td>
+   <td>{{Spec2('CSS3 Text Decoration')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/css/css_transforms/index.html b/files/fr/web/css/css_transforms/index.html
new file mode 100644
index 0000000000..66190eedac
--- /dev/null
+++ b/files/fr/web/css/css_transforms/index.html
@@ -0,0 +1,62 @@
+---
+title: CSS Transforms
+slug: Web/CSS/CSS_Transforms
+tags:
+  - Aperçu
+  - CSS
+  - CSS Transforms
+  - Reference
+translation_of: Web/CSS/CSS_Transforms
+---
+<div>{{CSSRef}}</div>
+
+<p>Le module <em><strong>CSS Transforms</strong></em> (ou module des transformations CSS) est un module de la spécification CSS qui définit comment les éléments mis en forme avec CSS peuvent être transformés dans un espace à deux ou à trois dimensions.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("backface-visibility")}}</li>
+ <li>{{cssxref("perspective")}}</li>
+ <li>{{cssxref("perspective-origin")}}</li>
+ <li>{{cssxref("rotate")}}</li>
+ <li>{{cssxref("scale")}}</li>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("transform-box")}}</li>
+ <li>{{cssxref("transform-origin")}}</li>
+ <li>{{cssxref("transform-style")}}</li>
+ <li>{{cssxref("translate")}}</li>
+</ul>
+</div>
+
+<h3 id="Types_de_donnée">Types de donnée</h3>
+
+<p>{{cssxref("&lt;transform-function&gt;")}}</p>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS">Utiliser les transformations CSS</a></dt>
+ <dd>Un tutoriel pas-à-pas pour manipuler des transformations sur des éléments mis en forme avec CSS.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transforms')}}</td>
+   <td>{{Spec2('CSS3 Transforms')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/css/css_transforms/utilisation_des_transformations_css/index.html b/files/fr/web/css/css_transforms/utilisation_des_transformations_css/index.html
new file mode 100644
index 0000000000..c33a7e3ac9
--- /dev/null
+++ b/files/fr/web/css/css_transforms/utilisation_des_transformations_css/index.html
@@ -0,0 +1,83 @@
+---
+title: Utilisation des transformations CSS
+slug: Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS
+tags:
+  - 3D
+  - Avancé
+  - CSS
+  - Guide
+  - Mise à l'échelle
+  - Scale
+  - Transformations CSS
+  - perspective
+  - rotation
+translation_of: Web/CSS/CSS_Transforms/Using_CSS_transforms
+---
+<div>{{CSSRef}}</div>
+
+<p>En modifiant l'espace des coordonnées, les <strong>transformations CSS</strong> permettent de changer la position d'un contenu affecté sans perturber le flux normal. Elles sont implémentées en utilisant un ensemble de propriétés CSS qui vous permettre d'appliquer des transformations affines aux éléments HTML. Ces transformations incluent la rotation, l'inclinaison et la translation à la fois dans le plan ou dans un espace 3D.</p>
+
+<div class="warning">
+<p><strong>Attention !</strong> Seuls les éléments positionnés selon <a href="/fr/docs/Web/CSS/Modèle_de_boîte_CSS">le modèle de boîtes</a> peuvent être transformés. Pour simplifier, on peut se souvenir que tout élément avec <code>display: block</code> est positionné selon le modèle de boîtes.</p>
+</div>
+
+<h2 id="Propriétés_des_transformations_CSS">Propriétés des transformations CSS</h2>
+
+<p>Deux propriétés majeures sont utilisées pour définir les transformations CSS : {{cssxref("transform")}} et {{cssxref("transform-origin")}}.</p>
+
+<dl>
+ <dt>{{cssxref("transform-origin")}}</dt>
+ <dd>Spécifie la position de l'origine. Par défaut, celle-ci est au centre de l'élément et peut être déplacée. Elle est utilisée par de nombreuses transformations, comme les rotations, les homothéties ou l'inclinaison, qui nécessitent un point spécifique pour paramètre.</dd>
+ <dt>{{cssxref("transform")}}</dt>
+ <dd>Spécifie la transformation à appliquer à l'élément. C'est une liste de transformations séparée par des espaces, qui sont appliquées les unes après les autres, comme requis par l'opération de composition. Les transformations qui sont composées entre elles sont appliquées dans l'ordre, de droite à gauche.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Voici une version originale du logo MDN :</p>
+
+<p><img alt="MDN Logo" src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png" style="height: 106px; width: 110px;"></p>
+
+<h3 id="Rotation">Rotation</h3>
+
+<p>Ici, on le tourne de 90 degrés depuis le coin inférieur gauche :</p>
+
+<pre class="brush: html">&lt;img style="transform: rotate(90deg);
+            transform-origin: bottom left;"
+     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png"&gt;
+</pre>
+
+<p>{{EmbedLiveSample('Rotation','auto',240)}}</p>
+
+<h3 id="Distorsion_et_translation">Distorsion et translation</h3>
+
+<p>Ici, on applique une distorsion de 10 degrés et on translate l'image de 150 pixels sur l'axe des abscisses :</p>
+
+<pre class="brush: html">&lt;img style="transform: skewx(10deg) translatex(150px);
+            transform-origin: bottom left;"
+     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png"&gt;
+</pre>
+
+<p>{{EmbedLiveSample('Distorsion_et_translation')}}</p>
+
+<h2 id="Propriétés_CSS_spécifiques_à_la_3D">Propriétés CSS spécifiques à la 3D</h2>
+
+<p>Réaliser des transformations CSS dans l'espace est un petit peu plus complexe. Il faut d'abord définir l'espace 3D en lui donnant une perspective, puis il faut configurer le comportement des éléments 2D dans cet espace.</p>
+
+<h3 id="Définir_une_perspective">Définir une perspective</h3>
+
+<p>Le premier élément à définir est la <em>perspective.</em> La perspective est ce qui donne l'impression de troisième dimension. Plus les éléments sont loin de l'observateur, plus ils seront petits.</p>
+
+<p>{{page("/fr/docs/Web/CSS/perspective", "Trois cubes", 0, 0, 3)}}</p>
+
+<p>Le deuxième élément à définir est la position de l'observateur grâce à la propriété {{ cssxref("perspective-origin") }}. Par défaut, la perspective est centrée sur l'observateur.</p>
+
+<p>{{page("/fr/docs/Web/CSS/perspective-origin", "Cubes avec des valeurs communes pour perspective-origin", 0, 0, 3)}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/Guide/Events/Using_device_orientation_with_3D_transforms" title="Using Deviceorientation with 3D Transforms">Utiliser <code>deviceorientation</code> avec les transformations 3D</a></li>
+ <li><a href="https://desandro.github.com/3dtransforms/" title="http://desandro.github.com/3dtransforms/">Une introduction aux transformations CSS, un billet de David DeSandro (en anglais)</a></li>
+ <li><a href="https://css-transform.moro.es/">CSS Transform playground (outil en ligne qui permet de visualiser des transformations CSS)</a></li>
+</ul>
diff --git a/files/fr/web/css/css_transitions/index.html b/files/fr/web/css/css_transitions/index.html
new file mode 100644
index 0000000000..5135e7a632
--- /dev/null
+++ b/files/fr/web/css/css_transitions/index.html
@@ -0,0 +1,59 @@
+---
+title: Transitions CSS
+slug: Web/CSS/CSS_Transitions
+tags:
+  - Aperçu
+  - CSS
+  - CSS Transitions
+  - Reference
+translation_of: Web/CSS/CSS_Transitions
+---
+<div>{{CSSRef}}</div>
+
+<p>Les <strong>transitions CSS</strong> permettent de créer des transitions harmonieuses entre les valeurs des propriétés CSS concernées. Elles permettent aussi de définir leur évolution (accélération/décélération), via les fonctions de minutage.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("transition")}}</li>
+ <li>{{cssxref("transition-delay")}}</li>
+ <li>{{cssxref("transition-duration")}}</li>
+ <li>{{cssxref("transition-property")}}</li>
+ <li>{{cssxref("transition-timing-function")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS">Utiliser les transitions CSS</a></dt>
+ <dd>Cet article est un tutoriel expliquant, étape par étape, comment créer une transition CSS. Il décrit chaque propriété CSS utilisée dans le cadre de ces transitions et comment elles interagissent.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Apparentées aux transitions CSS, les <a href="/fr/docs/Web/CSS/Animations_CSS">animations CSS</a> peuvent déclencher des animations indépendamment du changement des valeurs spécifiées.</li>
+</ul>
diff --git a/files/fr/web/css/css_transitions/utiliser_transitions_css/index.html b/files/fr/web/css/css_transitions/utiliser_transitions_css/index.html
new file mode 100644
index 0000000000..bbcdcb51e2
--- /dev/null
+++ b/files/fr/web/css/css_transitions/utiliser_transitions_css/index.html
@@ -0,0 +1,1094 @@
+---
+title: Utiliser les transitions CSS
+slug: Web/CSS/CSS_Transitions/Utiliser_transitions_CSS
+tags:
+  - Avancé
+  - CSS
+  - Guide
+  - Transitions
+translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions
+---
+<div>{{CSSref}}</div>
+
+<p>Les <strong>transitions CSS</strong> permettent de contrôler la vitesse d'animation lorsque les propriétés CSS sont modifiées. Plutôt que le changement soit immédiat, on peut l'étaler sur une certaine période. Ainsi, si on souhaite passer un élément de blanc à noir, on pourra utiliser les transitions CSS afin que cette modification soit effectuée progressivement, selon une courbe d'accélération donnée.</p>
+
+<p>Les animations qui utilisent des transitions entre deux états sont souvent appelées <em>transitions implicites</em> car l'état initial et l'état final sont définis implicitement par le navigateur.</p>
+
+<p><img alt="A CSS transition tells the browser to draw the intermediate states between the initial and final states, showing the user a smooth transitions." src="/files/4529/TransitionsPrinciple.png" style="display: block; height: 196px; margin: auto; width: 680px;"></p>
+
+<p>Les transitions CSS vous permettent de choisir :</p>
+
+<ul>
+ <li>les propriétés à animer en les listant explicitement</li>
+ <li>le début de l'animation</li>
+ <li>la durée de l'animation</li>
+ <li>la façon dont la transition s'exécutera</li>
+</ul>
+
+<h2 id="Quelles_sont_les_propriétés_CSS_qui_peuvent_être_animées">Quelles sont les propriétés CSS qui peuvent être animées ?</h2>
+
+<p>On peut définir les propriétés qu'on souhaite animer et la façon dont on souhaite les animer. Cela permet de créer des transitions complexes. Toutefois, toutes les propriétés ne peuvent pas être animées et <a href="/fr/docs/Web/CSS/Liste_propriétés_CSS_animées">la liste des propriétés concernées est limitée</a>.</p>
+
+<p class="note"><strong>Note :</strong> La gestion de la valeur <code>auto</code> représente un cas complexe. La spécification requiert de ne pas animer une telle valeur. Certains navigateurs dont ceux basés sur Gecko respectent cette règle mais d'autres comme WebKit sont moins stricts. Attention donc lors de l'utilisation des animations avec <code>auto</code>.</p>
+
+<p class="note"><strong>Note :</strong> Attention lorsqu'on manipule des transitions directement après avoir ajouté un élément via <code>.appendChild()</code> ou en modiant <code>display: none;</code>. Cela sera compris comme si l'état initial n'avait jamais eu lieu et que l'élément avait toujours été dans son état final. Pour contourner ce problème, on peut appliquer <code>window.setTimeout()</code> pendant quelques millisecondes avant de modifier la propriété CSS sur laquelle on souhaite appliquer une transition.</p>
+
+<h2 id="Les_propriétés_CSS_relatives_aux_transitions">Les propriétés CSS relatives aux transitions</h2>
+
+<p>Les transitions CSS sont généralement contrôlées grâce à la propriété raccourcie {{cssxref("transition")}}. Les différents composants d'une transition CSS peuvent être décrits dans le détail grâce aux propriétés détaillées suivantes :</p>
+
+<div class="note">
+<p><strong>Note : </strong>Dans les exemples ci-après, l'effet de répétition est uniquement utilisé à des fins de visualisation. Si vous souhaitez obtenir des effets visuels qui se répètent, il faudra utiliser la propriété {{cssxref("animation")}}.</p>
+</div>
+
+<dl>
+ <dt>{{cssxref("transition-property")}}</dt>
+ <dd>Cette propriété définit le nom des propriétés CSS pour lesquelles on veut appliquer des transitions. Seules les propriétés listées ici seront sujettes aux transitions. Les modifications appliquées aux autres propriétés seront instantanées.</dd>
+ <dt>{{cssxref("transition-duration")}}</dt>
+ <dd>Cette propriété définit la durée de la transition. On peut définir une durée pour toutes les transitions ou une durée pour chacuune des propriétés.
+ <div>
+ <div id="duration_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+ <p><code>transition-duration: 0.5s</code></p>
+
+ <div style="display: none;">
+ <pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush:css">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 0.5s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 0.5s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 0.5s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transformv color;
+    transition-duration: 0.5s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+ <pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("duration_0_5s", 275, 150)}}</div>
+ </div>
+
+ <div id="duration_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+ <p><code>transition-duration: 1s</code></p>
+
+ <div style="display: none;">
+ <pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush: css">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top -webkit-transform color;
+    -webkit-transition-duration: 1s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform color;
+    transition-duration: 1s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top -webkit-transform transform color;
+    -webkit-transition-duration: 1s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 1s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+ <pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("duration_1s",275,150)}}</div>
+ </div>
+
+ <div id="duration_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+ <p><code>transition-duration: 2s</code></p>
+
+ <div style="display: none;">
+ <pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush: css">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 2s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 2s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+ <pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("duration_2s",275,150)}}</div>
+ </div>
+
+ <div id="duration_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+ <p><code>transition-duration: 4s</code></p>
+
+ <div style="display: none;">
+ <pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush: css">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 4s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 4s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+ <pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("duration_4s",275,150)}}</div>
+ </div>
+ </div>
+ </dd>
+ <dt>{{cssxref("transition-timing-function")}}</dt>
+ <dd><img alt="" src="/files/3434/TF_with_output_gt_than_1.png" style="float: left; height: 173px; margin-right: 5px; width: 130px;">Cette propriété définit une fonction qui décrit la façon dont les valeurs intermédiaires sont calculées. On utilise pour cela des <a href="/fr/docs/Web/CSS/timing-function">fonctions de temporisation</a>.
+ <div class="cleared">
+ <div id="ttf_ease" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+ <p><code>transition-timing-function: ease</code></p>
+
+ <div style="display: none;">
+ <pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush: css">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: ease;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: ease;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: ease;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: ease;
+}
+</pre>
+
+ <pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("ttf_ease",275,150)}}</div>
+ </div>
+
+ <div id="ttf_linear" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+ <p><code>transition-timing-function: linear</code></p>
+
+ <div style="display: none;">
+ <pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush: css">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: linear;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: linear;
+}
+</pre>
+
+ <pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("ttf_linear",275,150)}}</div>
+ </div>
+
+ <div id="ttf_stepend" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+ <p><code>transition-timing-function: step-end</code></p>
+
+ <div style="display: none;">
+ <pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush: css">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: step-end;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: step-end;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: step-end;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: step-end;
+}
+</pre>
+
+ <pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("ttf_stepend",275,150)}}</div>
+ </div>
+
+ <div id="ttf_step4end" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+ <p><code>transition-timing-function: steps(4, end)</code></p>
+
+ <div style="display: none;">
+ <pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush: css">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: steps(4, end);
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: steps(4, end);
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: steps(4, end);
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: steps(4, end);
+}
+</pre>
+
+ <pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("ttf_step4end",275,150)}}</div>
+ </div>
+ </div>
+ </dd>
+ <dt>{{cssxref("transition-delay")}}</dt>
+ <dd>Cette propriété indique le temps à attendre entre le moment où la propriété est modifiée et le début de la transition.
+ <div>
+ <div id="delay_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+ <p><code>transition-delay: 0.5s</code></p>
+
+ <div style="display: none;">
+ <pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush: css">.parent {
+    width: 250px;
+    height: 125px;
+}
+
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 0.5s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 0.5s;
+    transition-timing-function: linear;
+}
+
+.box1 {
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position: absolute;
+     -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 0.5s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 0.5s;
+    transition-timing-function: linear;
+}
+</pre>
+
+ <pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("delay_0_5s",275,150)}}</div>
+ </div>
+
+ <div id="delay_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+ <p><code>transition-delay: 1s</code></p>
+
+ <div style="display: none;">
+ <pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush: css">.parent {
+    width: 250px;
+    height: 125px;
+}
+
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+     -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 1s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 1s;
+    transition-timing-function: linear;
+}
+
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 1s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 1s;
+    transition-timing-function: linear;
+}
+</pre>
+
+ <pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("delay_1s",275,150)}}</div>
+ </div>
+
+ <div id="delay_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+ <p><code>transition-delay: 2s</code></p>
+
+ <div style="display: none;">
+ <pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush: css">.parent {
+    width: 250px;
+    height: 125px;
+}
+
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 2s;
+    transition-timing-function: linear;
+}
+
+.box1 {
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 2s;
+    transition-timing-function: linear;
+}
+</pre>
+
+ <pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("delay_2s",275,150)}}</div>
+ </div>
+
+ <div id="delay_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+ <p><code>transition-delay: 4s</code></p>
+
+ <div style="display: none;">
+ <pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush: css">.parent {
+    width: 250px;
+    height: 125px;
+}
+
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 4s;
+    transition-timing-function: ease-in-out;
+}
+
+.box1 {
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 4s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+ <pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("delay_4s",275,150)}}</div>
+ </div>
+ </div>
+ </dd>
+</dl>
+
+<p>La syntaxe de la propriété raccourcie {{cssxref("transition")}} est :</p>
+
+<pre class="brush: css">div {
+  transition: &lt;property&gt; &lt;duration&gt; &lt;timing-function&gt; &lt;delay&gt;;
+}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Un_exemple_simple">Un exemple simple</h3>
+
+<p>Avec cette feuille de style, on opère une transition CSS sur la taille de police de quatre secondes après deux secondes écoulées lorsque l'utilisateur passe la souris sur l'élément :</p>
+
+<pre class="brush: css">#delay {
+  font-size: 14px;
+  transition-property: font-size;
+  transition-duration: 4s;
+  transition-delay: 2s;
+}
+
+#delay:hover {
+  font-size: 36px;
+}</pre>
+
+<h3 id="Appliquer_une_transition_sur_plusieurs_propriétés">Appliquer une transition sur plusieurs propriétés</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css; highlight:[8,9]">.box {
+  border-style: solid;
+  border-width: 1px;
+  display: block;
+  width: 100px;
+  height: 100px;
+  background-color: #0000FF;
+  transition: width 2s, height 2s, background-color 2s, transform 2s;
+}
+
+.box:hover {
+  background-color: #FFCCCC;
+  width: 200px;
+  height: 200px;
+  transform: rotate(180deg);
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html; highlight:[3]">&lt;p&gt;Cette boîte utilisera des transitions pour width, height, background-color, transform.
+   Survolez cette boîte pour voir l'effet.&lt;/p&gt;
+&lt;div class="box"&gt;&lt;/div&gt;
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Appliquer_une_transition_sur_plusieurs_propriétés', 600, 300)}}</p>
+
+<h3 id="Le_rôle_de_la_taille_des_listes_de_valeurs">Le rôle de la taille des listes de valeurs</h3>
+
+<p>Si la liste des valeurs pour une propriété est plus courte qu'une autre, les valeurs de la liste la plus courte seront répétées pour que la longueur réelle corresponde. Ainsi :</p>
+
+<pre class="brush: css">div {
+  transition-property: opacity, left, top, height;
+  transition-duration: 3s, 5s;
+}
+</pre>
+
+<p>Sera équivalent à :</p>
+
+<pre class="brush: css">div {
+  transition-property: opacity, left, top, height;
+  transition-duration: 3s, 5s, 3s, 5s;
+}</pre>
+
+<p>De même, si la liste est trop longue par rapport à {{cssxref("transition-property")}}, elle sera tronquée. Ainsi,</p>
+
+<pre class="brush: css">div {
+ transition-property: opacity, left;
+ transition-duration: 3s, 5s, 2s, 1s;
+}</pre>
+
+<p>Sera équivalent à :</p>
+
+<pre class="brush: css">div {
+  transition-property: opacity, left;
+  transition-duration: 3s, 5s;
+}</pre>
+
+<h3 id="Utiliser_les_transitions_pour_accentuer_les_éléments_pour_un_menu">Utiliser les transitions pour accentuer les éléments pour un menu</h3>
+
+<p>On utilise parfois CSS pour mettre en avant les éléments d'un menu lorsque l'utilisateur les survole avec sa souris. On peut facilement utiliser les transitions CSS pour améliorer l'effet obtenu.</p>
+
+<p>Tout d'abord, on définit le menu en HTML :</p>
+
+<pre class="brush: html">&lt;nav&gt;
+  &lt;a href="#"&gt;Accueil&lt;/a&gt;
+  &lt;a href="#"&gt;À propos&lt;/a&gt;
+  &lt;a href="#"&gt;Contact&lt;/a&gt;
+  &lt;a href="#"&gt;Liens&lt;/a&gt;
+&lt;/nav&gt;
+</pre>
+
+<p>On construit le CSS pour définir l'apparence du menu :</p>
+
+<pre class="brush: css">a {
+  color: #fff;
+  background-color: #333;
+  transition: all 1s ease-out;
+}
+
+a:hover,
+a:focus {
+  color: #333;
+  background-color: #fff;
+}</pre>
+
+<pre class="brush: css hidden">html,
+body {
+  margin: 0;
+  padding: 0;
+}
+
+nav {
+  display: flex;
+  padding: 12px;
+  background-color: #333;
+}
+
+a {
+  width: 100px;
+  border: 1px solid #fff;
+  border-radius: 18px;
+  outline: 0;
+  padding: 8px 12px;
+  text-align: center;
+  text-decoration: none;
+  font: bold 12px Verdana;
+}
+
+a:not(:last-child) {
+  margin-right: 12px;
+}
+</pre>
+
+<p>Ainsi, lorsque la souris survole l'élément, la couleur du texte et de l'arrière-plan change.</p>
+
+<p>{{EmbedLiveSample("Utiliser_les_transitions_pour_accentuer_les_éléments_pour_un_menu","300","300")}}</p>
+
+<h2 id="Exemples_avec_JavaScript">Exemples avec JavaScript</h2>
+
+<h3 id="Utiliser_les_transitions_CSS_pour_lisser_les_transformations_avec_JavaScript">Utiliser les transitions CSS pour lisser les transformations avec JavaScript</h3>
+
+<p>Les transitions permettent de lisser les opérations effectuées avec JavaScript. Par exemple :</p>
+
+<pre class="brush: html">&lt;p&gt;Click anywhere to move the ball&lt;/p&gt;
+&lt;div id="foo"&gt;&lt;/div&gt;
+</pre>
+
+<p>Avec JavaScript on peut ajouter un effet de mouvement sur la balle :</p>
+
+<pre class="brush: js">var f = document.getElementById('foo');
+document.addEventListener('click', function(ev){
+    f.style.transform = 'translateY('+(ev.clientY-25)+'px)';
+    f.style.transform += 'translateX('+(ev.clientX-25)+'px)';
+},false);
+</pre>
+
+<p>Avec CSS, il suffit d'ajouter une transition à l'élément et chaque modification sera appliquée de façon régulière :</p>
+
+<pre class="brush: css">p {
+  padding-left: 60px;
+}
+
+#foo {
+  border-radius: 50px;
+  width: 50px;
+  height: 50px;
+  background: #c00;
+  position: absolute;
+  top: 0;
+  left: 0;
+  transition: transform 1s;
+}
+</pre>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/9h261pzo/291/")}}</p>
+
+<h3 id="Détecter_le_début_et_la_fin_d'une_transition">Détecter le début et la fin d'une transition</h3>
+
+<p>L'évènement {{event("transitionend")}} est déclenché lorsqu'une transition est terminée. C'est un objet {{domxref("TransitionEvent")}} qui possède deux propriétés supplémentaires qu'un {{domxref("Event")}} :</p>
+
+<dl>
+ <dt><code>propertyName</code></dt>
+ <dd>Une chaîne de caractères qui indique le nom de la propriété CSS pour laquelle la transition est terminée.</dd>
+ <dt><code>elapsedTime</code></dt>
+ <dd>Un nombre flottant qui indique le nombre de secondes durant lesquelles la transition s'est déroulée. Cette valeur n'est pas modifiée par la valeur de {{cssxref("transition-delay")}}.</dd>
+</dl>
+
+<p>Comme pour les différents évènements, on pourra utiliser {{domxref("eventtarget.addEventListener()")}}) pour « écouter » cet événement :</p>
+
+<pre class="brush: js">el.addEventListener("transitionend", updateTransition, true);
+</pre>
+
+<p>Pour détecter le début d'une transition, on pourra utiliser l'évènement {{event("transitionrun")}} qui est déclenché avant tout retardement et l'évènement {{event("transitionstart")}} qui est déclenché après tout retardement :</p>
+
+<pre class="brush: js">el.addEventListener("transitionrun", signalStart, true);
+el.addEventListener("transitionstart", signalStart, true);</pre>
+
+<div class="note"><strong>Note :</strong> L'événement <code>transitionend</code> n'est pas déclenché si la transition est interrompue avant la fin de la transition si {{cssxref("display")}}<code>: none</code> ou si la valeur de la propriété est modifiée.</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '', '')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("TransitionEvent")}} et l'événement {{event("transitionend")}}</li>
+ <li><a href="/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS">Utiliser les animations CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/css_variables/index.html b/files/fr/web/css/css_variables/index.html
new file mode 100644
index 0000000000..7d439c68e8
--- /dev/null
+++ b/files/fr/web/css/css_variables/index.html
@@ -0,0 +1,42 @@
+---
+title: CSS Custom Properties for Cascading Variables
+slug: Web/CSS/CSS_Variables
+tags:
+  - Aperçu
+  - CSS
+  - CSS Variables
+  - Reference
+translation_of: Web/CSS/CSS_Variables
+---
+<div>{{CSSRef}}</div>
+
+<p><em><strong>CSS Custom Properties for Cascading Variables</strong></em> ou « module des propriétés personnalisées pour les variables CSS » est un module de la spécification CSS qui permet de créer des propriétés personnalisées afin de les utiliser à plusieurs endroits, sans avoir à répéter de valeurs.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("--*")}}</li>
+</ul>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Variables")}}</td>
+   <td>{{Spec2("CSS3 Variables")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/css/css_writing_modes/index.html b/files/fr/web/css/css_writing_modes/index.html
new file mode 100644
index 0000000000..7671959e67
--- /dev/null
+++ b/files/fr/web/css/css_writing_modes/index.html
@@ -0,0 +1,57 @@
+---
+title: CSS Writing Modes
+slug: Web/CSS/CSS_Writing_Modes
+tags:
+  - Aperçu
+  - CSS
+  - CSS Writing Modes
+  - Reference
+translation_of: Web/CSS/CSS_Writing_Modes
+---
+<div>{{CSSRef}}</div>
+
+<p><em><strong>CSS Writing Modes</strong></em> (ou modes d'écriture CSS) est un module qui définit différents modes d'écriture internationaux comme l'écriture de gauche à droite (e.g. utilisée par les langues latines et indiennes), de droite à gauche (e.g. utilisée par l'hébreu ou l'arabe), bidirectionnelle (utilisée quand il y a à la fois des écritures de gauche à droite et de droite à gauche sont ) et verticale (e.g. utilisée par certains écrits asiatiques).</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("direction")}}</li>
+ <li>{{cssxref("glyph-orientation-horizontal")}}</li>
+ <li>{{cssxref("text-combine-upright")}}</li>
+ <li>{{cssxref("text-orientation")}}</li>
+ <li>{{cssxref("unicode-bidi")}}</li>
+ <li>{{cssxref("writing-mode")}}</li>
+</ul>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Writing Modes')}}</td>
+   <td>{{Spec2('CSS3 Writing Modes')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/css/cssom_view/index.html b/files/fr/web/css/cssom_view/index.html
new file mode 100644
index 0000000000..933d8f1245
--- /dev/null
+++ b/files/fr/web/css/cssom_view/index.html
@@ -0,0 +1,56 @@
+---
+title: CSSOM View
+slug: Web/CSS/CSSOM_View
+tags:
+  - Aperçu
+  - CSS
+  - CSSOM
+  - CSSOM View
+  - Reference
+translation_of: Web/CSS/CSSOM_View
+---
+<div>{{CSSRef}}</div>
+
+<p><em><strong>CSSOM View</strong></em> (ou <strong>Vue CSSOM</strong>) est un module de la spécification CSS qui définit comment manipuler la vue d'un document et notamment le comportement lors du défilement (<em>scrolling</em>).</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("scroll-behavior")}}</li>
+</ul>
+</div>
+
+<h2 id="Guide">Guide</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/CSSOM_View/Systèmes_de_coordonnées">Les systèmes de coordonnées</a></dt>
+ <dd>Un guide à propos des différents systèmes de coordonnées permettant de définir une position dans un contexte d'affichage : que ce soit un écran, une zone d'affichage, un appareil mobile ou bien une position sur une feuille de papier lors de l'impression.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM View')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.scroll-behavior")}}</p>
diff --git a/files/fr/web/css/cssom_view/systèmes_de_coordonnées/index.html b/files/fr/web/css/cssom_view/systèmes_de_coordonnées/index.html
new file mode 100644
index 0000000000..543167b1b6
--- /dev/null
+++ b/files/fr/web/css/cssom_view/systèmes_de_coordonnées/index.html
@@ -0,0 +1,183 @@
+---
+title: Systèmes de coordonnées
+slug: Web/CSS/CSSOM_View/Systèmes_de_coordonnées
+tags:
+  - CSS
+  - CSSOM
+  - Coordonnées
+  - Guide
+translation_of: Web/CSS/CSSOM_View/Coordinate_systems
+---
+<div>{{cssref}}</div>
+
+<p>Lorsqu'on définit l'emplacement d'un pixel dans un contexte graphique, on indique les coordonnées de ce point par rapport à un point fixe du contexte qu'on appelle l'origine. La position du pixel est donc indiquée comme le décalage de ce pixel par rapport à l'origine, sur les deux axes du plan.</p>
+
+<p>Ce guide décrit les systèmes de coordonnées standard utilisés par le modèle objet de CSS. Les différences entre ces systèmes résident principalement dans l'emplacement de l'origine.</p>
+
+<h2 id="Dimensions">Dimensions</h2>
+
+<p>Pour les systèmes de coordonnées utilisés sur le Web, on prend comme convention qu'un décalage horizontal est appelé coordonnée en X (une valeur négative indique une position à gauche de l'origine et une valeur positive indique une position à droite de l'origine) et qu'un décalage vertical est appelé coordonnée en Y (une valeur négative indique une position au dessus de l'origine et une valeur positive indique une position en dessous de l'origine).</p>
+
+<p>L'origine par défaut, dans les contextes relatifs au Web, est située dans le coin supérieur gauche avec les valeurs verticales positives se situant sous l'origine. Ceci est donc différent des représentations mathématiques généralement utilisées où l'origine se situe en bas à gauche et où les valeurs positives en Y sont situées au dessus de l'origine.</p>
+
+<p>Lorsqu'on dessine des graphiques en trois dimensions ou lorsqu'on utilise une troisième dimension pour empiler des objets de l'avant vers l'arrière, on utilise la coordonnée en Z. Celle-ci correspond à la distance entre le spectateur et l'objet. Elle est positive si l'objet est plus éloigné du spectateur que l'origine et négative s'il est plus proche.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Il est en fait possible de modifier les définitions et les orientations de ces systèmes de coordonnées grâce à des propriétés CSS telles que {{cssxref("transform")}}. Toutefois, nous évoquerons uniquement le système de coordonnées standard.</p>
+</div>
+
+<h2 id="Les_systèmes_de_coordonnées_CSSOM_standard">Les systèmes de coordonnées CSSOM standard</h2>
+
+<p>Il existe quatre systèmes de coordonnées standard utilisé par le modèle objet de CSS.</p>
+
+<h3 id="Offset"><em>Offset</em></h3>
+
+<p>Les coordonnées indiquées selon ce modèle se situent relativement au coin supérieur gauche de l'élément qu'on examine ou qui a déclenché un évènement.</p>
+
+<p>Ainsi, lorsqu'un {{domxref("MouseEvent", "évènement de souris", "", 1)}} se produit, la position de la souris telle qu'indiquée par les {{domxref("MouseEvent.offsetX", "offsetX")}} et {{domxref("MouseEvent.offsetY", "offsetY")}} est relative au coin supérieur gauche de l'élément sur lequel l'évènement a été produit. L'origine de ce système est décalée vers l'intérieure de la boîte de l'élément selon les distances fournies pour {{cssxref("padding-left")}} et {{cssxref("padding-top")}}.</p>
+
+<h3 id="Client">Client</h3>
+
+<p>Ce système de coordonnées utilise le coin supérieur gauche de la zone d'affichage (<em>viewport</em>) ou du contexte de navigation comme origine.</p>
+
+<p>Sur un ordinateur de bureau, par exemple, les propriétés {{domxref("MouseEvent.clientX")}} et {{domxref("MouseEvent.clientY")}} indiquent la position du curseur de la souris au moment où l'évènement se produit et relativement au coin supérieur gauche de la fenêtre du navigateur. Le coin supérieur gauche de la zone d'affichage fournie par la fenêtre est toujours situé en (0, 0), quel que soit le contenu du document et peu importe le défilement ayant eu lieu. Autrement dit, le défilement du document modifiera les coordonnées d'un élément donné du document.</p>
+
+<h3 id="Page">Page</h3>
+
+<p>Ce système de coordonnées fournit la position d'un pixel par rapport au coin supérieur gauche de tout le {{domxref("Document")}} sur lequel le pixel est situé. Cela signifie qu'un point donné sur un élément conservera les mêmes coordonnées sur la page (sauf si l'élément est déplacé avec un changement de position ou à cause de l'ajout d'autres éléments sur la page ou à cause d'un redimensionnement d'un autre élément par exemple).</p>
+
+<p>Les propriétés pour les évènements de la souris {{domxref("MouseEvent.pageX", "pageX")}} et {{domxref("MouseEvent.pageY", "pageY")}} fournissent la position de la souris au moment de l'évènement, relativement au coin supérieur gauche du document.</p>
+
+<h3 id="Écran">Écran</h3>
+
+<p>Pour le système de coordonnées lié à l'écran, l'origine est situé dans le coin supérieur gauche de l'écran. Cela signifie que la position d'un point donné évoluera si l'utilisateur déplace la fenêtre du navigateur ou s'il change de résolution (voire s'il ajoute des écrans).</p>
+
+<p>Les propriétés {{domxref("MouseEvent.screenX")}} et {{domxref("MouseEvent.screenY")}} fournissent les coordonnées de la souris lors de l'évènement, relativement à l'origine de l'écran.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple simple, nous allons créé un ensemble de boîtes imbriquées. Lorsque la souris entrera sur la surface de ces boîtes, se déplacera ou quittera la surface correspondante, l'évènement déclenché est géré afin de mettre à jour les messages informatifs au sein de la boîte pour afficher les différentes coordonnées du pointeur selon les quatre systèmes de coordonnées.</p>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>Décomposons ce script en deux parties. Dans la première, le code permet d'afficher les coordonnées à l'écran. Ce code sera appelé par le gestionnaire d'évènements pour les différents évènements liés à la souris et qui nous intéressent ici.</p>
+
+<h4 id="Afficher_les_coordonnées">Afficher les coordonnées</h4>
+
+<p>Comme nous le verrons après avec le code HTML, la boîte interne (celle sur laquelle on écoute les évènements) contient plusieurs paragraphes : un pour chacun des systèmes de coordonnées.</p>
+
+<pre class="brush: js">let inner = document.querySelector(".inner");
+let log = document.querySelector(".log");
+
+function setCoords(e, type) {
+  let idX = type + "X";
+  let idY = type + "Y";
+
+  document.getElementById(idX).innerText = e[idX];
+  document.getElementById(idY).innerText = e[idY];
+}
+</pre>
+
+<p>Dans <code>inner</code> On récupère une référence à l'élément {{HTMLElement("div")}} situé dans la boîte intérieure et qui contient les paragraphes qui serviront à afficher les informations liées aux coordonnées.</p>
+
+<p>La fonction <code>setCoords()</code> prend en charge deux arguments : l'évènement {{domxref("MouseEvent")}} ainsi que le nom de l'origine utilisée pour obtenir les coordonnées. Les variables <code>idX</code> et <code>idY</code> sont des chaînes de caractères correspondant aux noms des propriétés à utiliser dans le système de coordonnées. Par exemple, si <code>type</code> vaut <code>"page"</code>, alors <code>idX</code> vaudra <code>"pageX"</code> et <code>idY</code> vaudra <code>"pageY"</code>.</p>
+
+<h4 id="Gérer_les_évènements_liés_à_la_souris">Gérer les évènements liés à la souris</h4>
+
+<p><code>setCoords()</code> est appelé par le gestionnaire d'évènements <code>update()</code> qui est lui même utilisé sur les différents évènements :</p>
+
+<pre class="brush: js">function update(e) {
+  setCoords(e, "offset");
+  setCoords(e, "client");
+  setCoords(e, "page");
+  setCoords(e, "screen");
+}
+
+inner.addEventListener("mouseenter", update, false);
+inner.addEventListener("mousemove", update, false);
+inner.addEventListener("mouseleave", update, false);</pre>
+
+<p>Le gestionnaire d'évènement <code>update()</code> appelle <code>setCoords()</code> pour chacun des systèmes de coordonnées et lui repasse en argument l'évènement qui s'est produit.</p>
+
+<p>Les trois dernières lignes correspondent à l'enregistrement du gestionnaire d'évènements sur la boîte intérieure grâce aux appels de {{domxref("EventTarget.addEventListener", "addEventListener()")}} pour chaque type d'évènement : {{event("mouseenter")}}, {{event("mousemove")}} et {{event("mouseleave")}}.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>Voici le code HTML utilisé pour l'exemple. On notera qu'à l'intérieur de l'élément <code>&lt;div&gt;</code> avec l'identifiant <code>"log"</code>, on dispose d'un paragraphe pour chaque système de coordonnées. Un élément {{domxref("span")}} est utilisé pour chaque paragraphe afin de recevoir et d'afficher les coordonnées dans le système concerné.</p>
+
+<pre class="brush: html">&lt;div class="outer"&gt;
+  &lt;div class="inner"&gt;
+    &lt;div class="log"&gt;
+      &lt;p&gt;
+        Système de coordonnées Offset : &lt;span id="offsetX"&gt;0&lt;/span&gt;,
+        &lt;span id="offsetY"&gt;0&lt;/span&gt;
+      &lt;/p&gt;
+      &lt;p&gt;
+        Système de coordonnées Client : &lt;span id="clientX"&gt;0&lt;/span&gt;,
+        &lt;span id="clientY"&gt;0&lt;/span&gt;
+      &lt;/p&gt;
+      &lt;p&gt;
+        Système de coordonnées Page : &lt;span id="pageX"&gt;0&lt;/span&gt;,
+        &lt;span id="pageY"&gt;0&lt;/span&gt;
+      &lt;/p&gt;
+      &lt;p&gt;
+        Système de coordonnées Écran : &lt;span id="screenX"&gt;0&lt;/span&gt;,
+        &lt;span id="screenY"&gt;0&lt;/span&gt;
+      &lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<details open><summary>
+<h3 id="CSS">CSS</h3>
+</summary>
+
+<p>Le code CSS est uniquement utilisé à des fins stylistiques. La classe <code>"outer"</code> est utilisée pour la boîte englobante qu'on rend volontairement trop large pour la fenêtre de MDN afin de pouvoir <em>scroller</em> horizontalement. La boîte <code>"inner"</code> est celle sur laquelle on suit les évènements.</p>
+
+<pre class="brush: css">.outer {
+  width: 1000px;
+  height: 200px;
+  background-color: red;
+}
+
+.inner {
+  position: relative;
+  width: 500px;
+  height: 150px;
+  top: 25px;
+  left: 100px;
+  background-color: blue;
+  color: white;
+  cursor: crosshair;
+  user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+}
+
+.log {
+  position: relative;
+  width: 100%;
+  text-align: center;
+}</pre>
+</details>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>Voici ci-après le résultat obtenu avec ces éléments. Vous pouvez voir comment les coordonnées en X et en Y évoluent lorsque vous déplacez la souris à l'intérieur ou en dehors de la boîte bleue selon les différents systèmes de coordonnées. On peut également voir que le défilement horizontal n'a pas d'impact sur la valeur <code>pageX</code>.</p>
+
+<p>{{EmbedLiveSample("Exemples", 600, 250)}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS">Utiliser les transformations CSS</a> : comment modifier un système de coordonnées</li>
+ <li>Les coordonnées relatives aux évènements de la souris :
+  <ul>
+   <li>{{domxref("MouseEvent.offsetX")}} et {{domxref("MouseEvent.offsetY")}}</li>
+   <li>{{domxref("MouseEvent.clientX")}} et {{domxref("MouseEvent.clientY")}}</li>
+   <li>{{domxref("MouseEvent.pageX")}} et {{domxref("MouseEvent.pageY")}}</li>
+   <li>{{domxref("MouseEvent.screenX")}} et {{domxref("MouseEvent.screenY")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/cursor/index.html b/files/fr/web/css/cursor/index.html
new file mode 100644
index 0000000000..0d83725ddc
--- /dev/null
+++ b/files/fr/web/css/cursor/index.html
@@ -0,0 +1,334 @@
+---
+title: cursor
+slug: Web/CSS/cursor
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/cursor
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>cursor</code></strong> définit la forme du curseur (s'il y en a un) lorsque le pointeur est au-dessus de l'élément.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/cursor.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+cursor: pointer;
+cursor: auto;
+
+/* Une valeur d'URL avec un mot-clé par défaut */
+cursor: url(hand.cur), pointer;
+
+/* Une valeur d'URL avec des coordonnées et un mot-clé par défaut */
+cursor: url(cursor1.png) 4 12, auto;
+cursor: url(cursor2.png) 2 2, pointer;
+
+/* Valeurs globales */
+cursor: inherit;
+cursor: initial;
+cursor: unset;
+</pre>
+
+<p>La propriété <code>cursor</code> peut être définie grâce à zéro ou plusieurs valeurs <code><a href="#uri">&lt;uri&gt;</a></code> séparées par des virgules et suivi par un unique <a href="#mot-clé">mot-clé obligatoire</a>. Chaque <code>&lt;uri&gt;</code> doit pointer vers un fichier image. Le navigateur essaiera de télécharger la première image indiquée et passera à la suivante s'il ne peut pas. Si aucune image ne fonctionne, il utilisera le mot-clé final.</p>
+
+<p>Chaque <code>&lt;uri&gt;</code> peut éventuellement être suivi par un couple de nombres séparés par un espace qui représente les coordonnées (abscisse puis ordonnée) <code><a href="#xy">&lt;x&gt;&lt;y&gt;</a></code> Ces coordonnées permettent de paramétrer le point d'action (<em>hotspot</em>) du curseur par rapport au coin en haut à gauche de l'image.</p>
+
+<p>Par exemple, on peut indiquer deux images grâce à deux valeurs <code>&lt;uri&gt;</code> et fournir des coordonnées <code>&lt;x&gt;&lt;y&gt;</code> pour la deuxième. Si aucune des images n'a pu être chargée, on recourt au mot-clé <code>progress</code> :</p>
+
+<pre class="brush: css">cursor: url(one.svg), url(two.svg) 5 5, progress;</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><a id="uri"><code>&lt;uri&gt;</code></a></dt>
+ <dd>Une <code>url(…)</code> ou une liste séparées de telles valeurs qui pointent vers un fichier image. On peut utiliser différentes {{cssxref("&lt;uri&gt;")}} en cas de recours si certains types d'images ne sont pas pris en charge. Il est obligatoire qu'une valeur non-URL soit présente à la fin de cette liste.</dd>
+ <dt><a id="xy"><code>&lt;x&gt;</code> <code>&lt;y&gt;</code></a> {{experimental_inline}}</dt>
+ <dd>Des coordonnées en abscisses et en ordonnées sans unité, inférieures à 32.</dd>
+ <dt><a id="mot-clé">Valeurs utilisant un mot-clé</a></dt>
+ <dd>
+ <p><strong>Vous pouvez déplacer votre souris au-dessus de chaque ligne pour tester.</strong></p>
+
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <th>Catégorie</th>
+    <th>Valeur CSS</th>
+    <th>Rendu</th>
+    <th>Description</th>
+   </tr>
+   <tr style="cursor: auto;">
+    <td rowspan="3">Général</td>
+    <td><code>auto</code></td>
+    <td></td>
+    <td>Le navigateur détermine le curseur à afficher en fonction du contexte (par exemple, l'effet sera équivalent à <code>text</code> lors du survol du texte).</td>
+   </tr>
+   <tr style="cursor: default;">
+    <td><code>default</code></td>
+    <td><img alt="default.gif" src="/@api/deki/files/3438/=default.gif" style="height: 26px; width: 26px;"></td>
+    <td>Le curseur par défaut de la plateforme (qui est généralement une flèche).</td>
+   </tr>
+   <tr style="cursor: none;">
+    <td><code>none</code></td>
+    <td></td>
+    <td>Aucun curseur n'est affiché.</td>
+   </tr>
+   <tr style="cursor: context-menu;">
+    <td rowspan="5" style="cursor: auto;">Liens &amp; états</td>
+    <td><code>context-menu</code></td>
+    <td><img alt="context-menu.png" src="/@api/deki/files/3461/=context-menu.png" style="height: 26px; width: 26px;"></td>
+    <td>Un menu contextuel est disponible sous le curseur. Seul<br>
+     IE 10 et les versions supérieures ont implémenté cette valeur sur Windows : {{Bug("258960")}}.</td>
+   </tr>
+   <tr style="cursor: help;">
+    <td><code>help</code></td>
+    <td><img alt="help.gif" src="/@api/deki/files/3442/=help.gif" style="height: 26px; width: 26px;"></td>
+    <td>Le pointeur indique qu'une aide est disponible.</td>
+   </tr>
+   <tr style="cursor: pointer;">
+    <td><code>pointer</code></td>
+    <td><img alt="pointer.gif" src="/@api/deki/files/3449/=pointer.gif" style="height: 26px; width: 26px;"></td>
+    <td>Le curseur est un pointeur qui indique un lien ; généralement c'est une main.</td>
+   </tr>
+   <tr style="cursor: progress;">
+    <td><code>progress</code></td>
+    <td><img alt="progress.gif" src="/@api/deki/files/3450/=progress.gif" style="height: 26px; width: 26px;"></td>
+    <td>Le programme est occupé en arrière-plan mais l'utilisateur peut toujours interagir avec l'interface (à la différence de <code>wait</code>).</td>
+   </tr>
+   <tr style="cursor: wait;">
+    <td><code>wait</code></td>
+    <td><img alt="wait.gif" src="/@api/deki/files/3457/=wait.gif" style="height: 26px; width: 26px;"></td>
+    <td>Le programme est occupé, empêchant toute interaction.</td>
+   </tr>
+   <tr style="cursor: cell;">
+    <td rowspan="4" style="cursor: auto;">Sélection</td>
+    <td><code>cell</code></td>
+    <td><img alt="cell.gif" src="/@api/deki/files/3434/=cell.gif" style="height: 26px; width: 26px;"></td>
+    <td>Le pointeur indique que la  ou les cellules du tableau peuvent être sélectionnées.</td>
+   </tr>
+   <tr style="cursor: crosshair;">
+    <td><code>crosshair</code></td>
+    <td><img alt="crosshair.gif" src="/@api/deki/files/3437/=crosshair.gif" style="height: 26px; width: 26px;"></td>
+    <td>Un curseur en forme de croix, généralement utilisé pour indiquer une sélection sur une image.</td>
+   </tr>
+   <tr style="cursor: text;">
+    <td><code>text</code></td>
+    <td><img alt="text.gif" class="default" src="/files/3809/text.gif" style="height: 26px; width: 26px;"></td>
+    <td>Le pointeur indique que le texte peut être sélectionné.</td>
+   </tr>
+   <tr style="cursor: vertical-text;">
+    <td><code>vertical-text</code></td>
+    <td><img alt="vertical-text.gif" src="/@api/deki/files/3456/=vertical-text.gif" style="height: 26px; width: 26px;"></td>
+    <td>Le pointeur indique que du texte vertical peut être sélectionné.</td>
+   </tr>
+   <tr style="cursor: alias;">
+    <td rowspan="7" style="cursor: auto;">Glisser/déposer</td>
+    <td><code>alias</code></td>
+    <td><img alt="alias.gif" src="/@api/deki/files/3432/=alias.gif" style="height: 26px; width: 26px;"></td>
+    <td>Le pointeur indique qu'un alias ou qu'un raccourci sera créé.</td>
+   </tr>
+   <tr style="cursor: copy;">
+    <td><code>copy</code></td>
+    <td><img alt="copy.gif" class="default" src="/@api/deki/files/3436/=copy.gif" style="height: 26px; width: 26px;"></td>
+    <td>Le pointeur indique que quelque chose devra être copié.</td>
+   </tr>
+   <tr style="cursor: move;">
+    <td><code>move</code></td>
+    <td><img alt="move.gif" src="/@api/deki/files/3443/=move.gif" style="height: 26px; width: 26px;"></td>
+    <td>L'objet survolé devra être déplacé.</td>
+   </tr>
+   <tr style="cursor: no-drop;">
+    <td><code>no-drop</code></td>
+    <td><img alt="no-drop.gif" class="lwrap" src="/@api/deki/files/3445/=no-drop.gif" style="float: left; height: 26px; width: 33px;"></td>
+    <td>Le curseur indique qu'on ne peut pas déposer d'élément à cet endroit.<br>
+     {{bug("275173")}} pour Windows et Mac OS X, « <code>no-drop</code> a le même effet que <code>not-allowed</code> ».</td>
+   </tr>
+   <tr id="grab" style="cursor: -moz-grab; cursor: -webkit-grab; cursor: grab;">
+    <td><code>grab</code></td>
+    <td><img alt="grab.gif" class="default" src="/@api/deki/files/3440/=grab.gif"></td>
+    <td rowspan="2" style="cursor: auto;">
+     <p>Le pointeur indique que le contenu peut être accroché/attrapé ou est accroché/attrapé pour être glissé et déposé quelque part.</p>
+    </td>
+   </tr>
+   <tr style="cursor: -moz-grabbing; cursor: -webkit-grabbing; cursor: grabbing;">
+    <td><code>grabbing</code></td>
+    <td><img alt="grabbing.gif" class="default" src="/@api/deki/files/3441/=grabbing.gif"></td>
+   </tr>
+   <tr style="cursor: not-allowed;">
+    <td><code>not-allowed</code></td>
+    <td><img alt="not-allowed.gif" src="/@api/deki/files/3446/=not-allowed.gif" style="height: 26px; width: 26px;"></td>
+    <td>Le curseur indique que quelque chose ne peut pas être fait.</td>
+   </tr>
+   <tr style="cursor: all-scroll;">
+    <td rowspan="15" style="cursor: auto;">Redimensionnement &amp; défilement</td>
+    <td><code>all-scroll</code></td>
+    <td><img alt="all-scroll.gif" src="/@api/deki/files/3433/=all-scroll.gif" style="height: 26px; width: 26px;"></td>
+    <td>Le curseur indique qu'on peut faire défiler le contenu dans n'importe quelle direction.<br>
+     {{bug("275174")}} pour Windows, « <code>all-scroll</code> a le même effet que <code>move</code>".</td>
+   </tr>
+   <tr style="cursor: col-resize;">
+    <td><code>col-resize</code></td>
+    <td><img alt="col-resize.gif" src="/@api/deki/files/3435/=col-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td>L'élément ou la colonne peut être redimensionné horizontalement.</td>
+   </tr>
+   <tr style="cursor: row-resize;">
+    <td><code>row-resize</code></td>
+    <td><img alt="row-resize.gif" src="/@api/deki/files/3451/=row-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td>L'élément ou la ligne peut être redimensionné verticalement.</td>
+   </tr>
+   <tr style="cursor: n-resize;">
+    <td><code>n-resize</code></td>
+    <td><img alt="Example of a resize towards the top cursor" src="/files/4083/n-resize.gif" style="border-style: solid; border-width: 0px; height: 26px; width: 26px;"></td>
+    <td rowspan="8" style="cursor: auto;">
+     <p>Un bord peut être déplacé. Par exemple, le curseur <code>se-resize</code> peut être utilisé lorsqu'on redimensionne une boîte à partir de son coin sud-est.</p>
+
+     <p>Dans certains environnements, un curseur bidirectionnel équivalent est affiché (ex. <code>n-resize</code> et <code>s-resize</code> sont synonymes de <code>ns-resize</code>).</p>
+    </td>
+   </tr>
+   <tr style="cursor: e-resize;">
+    <td><code>e-resize</code></td>
+    <td><img alt="Example of a resize towards the right cursor" src="/files/4085/e-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: s-resize;">
+    <td><code>s-resize</code></td>
+    <td><img alt="Example of a resize towards the bottom cursor " src="/files/4087/s-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: w-resize;">
+    <td><code>w-resize</code></td>
+    <td><img alt="Example of a resize towards the left cursor" src="/files/4089/w-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: ne-resize;">
+    <td><code>ne-resize</code></td>
+    <td><img alt="Example of a resize towards the top-right corner cursor" src="/files/4091/ne-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: nw-resize;">
+    <td><code>nw-resize</code></td>
+    <td><img alt="Example of a resize towards the top-left corner cursor" src="/files/4093/nw-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: se-resize;">
+    <td><code>se-resize</code></td>
+    <td><img alt="Example of a resize towards the bottom-right corner cursor" src="/files/4097/se-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: sw-resize;">
+    <td><code>sw-resize</code></td>
+    <td><img alt="Example of a resize towards the bottom-left corner cursor" src="/files/4095/sw-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: ew-resize;">
+    <td><code>ew-resize</code></td>
+    <td><img alt="3-resize.gif" class="default" src="/files/3806/3-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td rowspan="4" style="cursor: auto;">Le pointeur indique un redimensionnement bidirectionnel.</td>
+   </tr>
+   <tr style="cursor: ns-resize;">
+    <td><code>ns-resize</code></td>
+    <td><img alt="6-resize.gif" class="default" src="/files/3808/6-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: nesw-resize;">
+    <td><code>nesw-resize</code></td>
+    <td><img alt="1-resize.gif" class="default" src="/files/3805/1-resize.gif"></td>
+   </tr>
+   <tr style="cursor: nwse-resize;">
+    <td><code>nwse-resize</code></td>
+    <td><img alt="4-resize.gif" class="default" src="/files/3807/4-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: -webkit-zoom-in; cursor: zoom-in;">
+    <td rowspan="2">Zoom</td>
+    <td><code>zoom-in</code></td>
+    <td><img alt="zoom-in.gif" class="default" src="/@api/deki/files/3459/=zoom-in.gif"></td>
+    <td rowspan="2" style="cursor: auto;">
+     <p>Le pointeur indique qu'on peut zoomer/dézoomer sur le contenu.</p>
+    </td>
+   </tr>
+   <tr style="cursor: -webkit-zoom-out; cursor: zoom-out;">
+    <td><code>zoom-out</code></td>
+    <td><img alt="zoom-out.gif" class="default" src="/@api/deki/files/3460/=zoom-out.gif"></td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+
+<p>Bien que la spécification ne définisse aucune limite de taille pour les curseurs, chaque navigateur/agent utilisateur pourra imposer la sienne. Les images de curseur utilisées qui dépassent les limites prises en charge seront généralement ignorées.</p>
+
+<p>Pour plus d'informations, voir le tableau de compatibilité ci-après.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">.toto {
+  cursor: crosshair;
+}
+
+/* On utilise la valeur préfixée   */
+/* si "zoom-in" n'est pas prise en */
+/* charge */
+.truc {
+  cursor: -webkit-zoom-in;
+  cursor: zoom-in;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="toto"&gt;
+  On dirait qu'on pourrait sélectionner une zone.
+&lt;/p&gt;
+
+&lt;p class="truc"&gt;
+  Et là on peut zoomer.
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#cursor', 'cursor')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Ajout de plusieurs mots-clés et de la syntaxe de positionnement pour <code>url()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'ui.html#cursor-props', 'cursor')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.cursor")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Basic_User_Interface/Utilisation_d_URL_pour_la_propriété_cursor">Utiliser des valeurs URL pour <code>cursor</code></a></li>
+ <li>{{cssxref("pointer-events")}}</li>
+ <li>La fonction CSS {{cssxref("url()", "url()")}}</li>
+</ul>
diff --git a/files/fr/web/css/custom-ident/index.html b/files/fr/web/css/custom-ident/index.html
new file mode 100644
index 0000000000..64c288514d
--- /dev/null
+++ b/files/fr/web/css/custom-ident/index.html
@@ -0,0 +1,128 @@
+---
+title: <custom-ident>
+slug: Web/CSS/custom-ident
+tags:
+  - CSS
+  - Reference
+  - Type
+translation_of: Web/CSS/custom-ident
+---
+<div>{{CSSRef}}</div>
+
+<p>Le type de données CSS <strong><code>&lt;custom-ident&gt;</code></strong> permet de représenter des chaînes de caractères arbitraires définies par l'utilisateur et qui sont utilisées comme identifiants. Ce type de données est sensible à la casse et pour chaque contexte d'utilisation, plusieurs valeurs sont exclues afin d'éviter des ambiguïtés et des erreurs.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La syntaxe est proche de celle utilisée pour les identifiants CSS. Une valeur <code>&lt;custom-ident&gt;</code> est sensible à la casse et est une séquence de caractères dont les caractères peuvent être :</p>
+
+<ul>
+ <li>n'importe quel caractère alphanumérique (<code>A</code> à <code>Z</code> ou <code>a</code> à <code>z</code>),</li>
+ <li>n'importe quel chiffre (<code>0</code> à <code>9</code>),</li>
+ <li>un tiret (<code>-</code>)</li>
+ <li>un tiret bas (<em>underscore</em>) (<code>_</code>),</li>
+ <li>un caractère échappé via une barre oblique inversée (<code>\</code>),</li>
+ <li>un caractère <a class="external" href="http://en.wikipedia.org/wiki/Unicode">Unicode</a> (une barre oblique inversée suivie d'un à six chiffres hexadécimaux représentant le point de code Unicode).</li>
+</ul>
+
+<p>Le premier caractère de l'identifiant ne doit pas être un chiffre, un tiret suivi d'un chiffre ou un tiret suivi d'un autre tiret. Une valeur <code>&lt;custom-ident&gt;</code> ne doit pas être encadrée entre quotes ou entre doubles quotes car ce serait alors une valeur {{cssxref("&lt;string&gt;")}}.</p>
+
+<p>On notera que <code>id1</code>, <code>Id1</code>, <code>iD1</code> et <code>ID1</code> sont des identifiants différents car leurs casses sont différentes. En revanche, il existe plusieurs façons d'échapper un même caractère et <code>toto\?</code> et <code>toto\3F</code> représentent donc le même identifiant.</p>
+
+<h3 id="Liste_des_valeurs_interdites">Liste des valeurs interdites</h3>
+
+<p>Afin d'éviter des ambiguïtés dangereuses, chaque propriété qui utilise <code>&lt;custom-ident&gt;</code> définit également une liste de valeurs interdites :</p>
+
+<dl>
+ <dt>{{cssxref("animation-name")}}</dt>
+ <dd>Interdit d'utiliser les valeurs CSS globales <code>unset</code>, <code>initial</code> et <code>inherit</code> ainsi que la valeur <code>none</code>.</dd>
+ <dt>{{cssxref("counter-reset")}}</dt>
+ <dt>{{cssxref("counter-increment")}}</dt>
+ <dd>Interdit d'utiliser les valeurs CSS globales <code>unset</code>, <code>initial</code> et <code>inherit</code> ainsi que la valeur <code>none</code>.</dd>
+ <dt>{{cssxref("@counter-style")}}</dt>
+ <dt>{{cssxref("list-style-type")}}</dt>
+ <dd>Interdit d'utiliser les valeurs CSS globales <code>unset</code>, <code>initial</code> et <code>inherit</code> ainsi que les valeurs <code>none</code>, <code>inline</code>, <code>outside</code> et d'autres valeurs prédéfinies, implémentées par les différents navigateurs : <code>disc</code>, <code>circle</code>, <code>square</code>, <code>decimal</code>, <code>cjk-decimal</code>, <code>decimal-leading-zero</code>, <code>lower-roman</code>, <code>upper-roman</code>, <code>lower-greek</code>, <code>lower-alpha</code>, <code>lower-latin</code>, <code>upper-alpha</code>, <code>upper-latin</code>, <code>arabic-indic</code>, <code>armenian</code>, <code>bengali</code>, <code>cambodian</code>, <code>cjk-earthly-branch</code>, <code>cjk-heavenly-stem</code>, <code>cjk-ideographic</code>, <code>devanagari</code>, <code>ethiopic-numeric</code>, <code>georgian</code>, <code>gujarati</code>, <code>gurmukhi</code>, <code>hebrew</code>, <code>hiragana</code>, <code>hiragana-iroha</code>, <code>japanese-formal</code>, <code>japanese-informal</code>, <code>kannada</code>, <code>katakana</code>, <code>katakana-iroha</code>, <code>khmer</code>, <code>korean-hangul-formal</code>, <code>korean-hanja-formal</code>, <code>korean-hanja-informal</code>, <code>lao</code>, <code>lower-armenian</code>, <code>malayalam</code>, <code>mongolian</code>, <code>myanmar</code>, <code>oriya</code>, <code>persian</code>, <code>simp-chinese-formal</code>, <code>simp-chinese-informal</code>, <code>tamil</code>, <code>telugu</code>, <code>thai</code>, <code>tibetan</code>, <code>trad-chinese-formal</code>, <code>trad-chinese-informal</code>, <code>upper-armenian</code>, <code>disclosure-open</code> et <code>disclosure-close</code>.</dd>
+ <dt>{{cssxref("grid-row-start")}}<br>
+ {{cssxref("grid-row-end")}}<br>
+ {{cssxref("grid-column-start")}}<br>
+ {{cssxref("grid-column-end")}}</dt>
+ <dd>Interdisent la valeur <code>span</code>.</dd>
+ <dt>{{cssxref("will-change")}}</dt>
+ <dd>Interdit d'utiliser les valeurs CSS globales <code>unset</code>, <code>initial</code> et <code>inherit</code> ainsi que les valeurs <code>will-change</code>, <code>auto</code>, <code>scroll-position</code> et <code>contents</code>.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Voici des identifiants valides</p>
+
+<pre class="eval">nono79            Un mélange de caractères alphanumériques.
+ground-level      Un mélange de caractères alphanumériques avec un tiret.
+-test             Un tiret suivi d'un mélange de caractères alphanumériques.
+_internal         Un tiret bas suivi d'un mélange de caractères alphanumériques.
+\22 toto          Un caractère Unicode suivi par une série de caractères alphanumériques.
+bili\.bob         Le point est bien échappé.
+</pre>
+
+<p>Voici des identifiants invalides :</p>
+
+<pre class="eval">34rem             Il ne doit pas démarrer par un chiffre.
+-12rad            Il ne doit pas démarrer par un tiret suivi d'un chiffre.
+bili.bob          Il ne doit contenir que des caractères alphanumériques. _ et - n'ont pas besoin d'être échappés.
+--toto            Il ne doit pas démarrer avec deux tirets.
+'bilibob'         Ce n'est pas une valeur &lt;user-ident&gt; mais une {{cssxref("&lt;string&gt;")}}.
+"bilibob"         Ce n'est pas une valeur &lt;user-ident&gt; mais une {{cssxref("&lt;string&gt;")}}.
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Will Change', '#valdef-will-change-custom-ident', '<code>&lt;custom-ident&gt;</code> for <code>will-change</code>')}}</td>
+   <td>{{Spec2('CSS Will Change')}}</td>
+   <td>Définition des valeurs exclues pour {{cssxref("will-change")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Counter Styles', '#typedef-counter-style-name', '<code>&lt;custom-ident&gt;</code> for <code>list-style-type</code>')}}</td>
+   <td>{{Spec2('CSS3 Counter Styles')}}</td>
+   <td>Utilisation de <code>&lt;custom-ident&gt;</code> à la place d'une liste finie de mots-clés. Définition des valeurs exclues pour {{cssxref("list-style-type")}} et {{cssxref("@counter-style")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Lists', '#counter-properties', '<code>&lt;custom-ident&gt;</code> for <code>counter-*</code>')}}</td>
+   <td>{{Spec2('CSS3 Lists')}}</td>
+   <td><code>&lt;identifier&gt;</code> est renommé en <code>&lt;custom-ident&gt;</code>. Son utilisation est ajoutée pour la propriété <code>counter-set</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Animations', '#typedef-single-animation-name', '<code>&lt;custom-ident&gt;</code> for <code>animation-name</code>')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Définition des valeurs exclues pour {{cssxref("animation-name")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#identifier-value', '<code>&lt;custom-ident&gt;</code>')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td><code>&lt;identifier&gt;</code> est renommé en <code>&lt;custom-ident&gt;</code>. Devient un pseudo-type et est lié aux différents cas d'utilisation pour la définition des valeurs exclues.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'syndata.html#value-def-identifier', '<code>&lt;identifier&gt;</code>')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p><em>Ce type de données n'est pas un type de données « réel » mais un type artificiel permettant de simplifier la description des valeurs permises. Il n'y a donc pas de données de compatibilité stricto sensu.</em></p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{CSSxRef("&lt;ident&gt;")}}</li>
+ <li><a href="/fr/docs/tag/Type">Les différents types de données CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/dimension/index.html b/files/fr/web/css/dimension/index.html
new file mode 100644
index 0000000000..8c6f397e97
--- /dev/null
+++ b/files/fr/web/css/dimension/index.html
@@ -0,0 +1,76 @@
+---
+title: <dimension>
+slug: Web/CSS/dimension
+tags:
+  - CSS
+  - Reference
+  - Type
+translation_of: Web/CSS/dimension
+---
+<div>{{CSSRef}}</div>
+
+<p>Le type de donnée <strong><code>&lt;dimension&gt;</code></strong> représente une valeur de type {{CSSxRef("&lt;number&gt;")}} directement suivie d'une unité : par exemple <code>10px</code>.</p>
+
+<p>CSS utilise des dimensions pour définir des distances (type {{CSSxRef("&lt;length&gt;")}}), des durées (type {{CSSxRef("&lt;time&gt;")}}), des fréquences (type {{CSSxRef("&lt;frequency&gt;")}}), des résolutions (type {{CSSxRef("&lt;resolution&gt;")}}) ainsi que d'autres quantités.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La syntaxe d'une valeur de type <code>&lt;dimension&gt;</code> est un nombre (valeur de type {{CSSxRef("&lt;number&gt;")}}) immédiatement suivi d'une unité représentée par son identifiant. Les identifiants utilisés pour les unités sont insensibles à la casse.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Dimensions_valides">Dimensions valides</h3>
+
+<pre class="syntaxbox example-good">12px      12 pixels
+1rem      1 rem
+1.2pt     1.2 points
+2200ms    2200 millisecondes
+200hz     200 Hertz
+200Hz     200 Hertz (les unités sont insensibles à la casse)
+</pre>
+
+<h3 id="Dimensions_invalides">Dimensions invalides</h3>
+
+<pre class="syntaxbox example-bad">12 px       L'unité doit immédiatement être indiquée après le nombre
+12"px"      Les unités sont des identifiants et ne doivent pas être entourées de quotes
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Values", "#dimensions", "&lt;dimension&gt;")}}</td>
+   <td>{{Spec2("CSS4 Values")}}</td>
+   <td>Adds <code>cap</code>, <code>ic</code>, <code>lh</code>, <code>rlh</code>, <code>vi</code>, <code>vb</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Values", "#dimensions", "&lt;dimension&gt;")}}</td>
+   <td>{{Spec2("CSS3 Values")}}</td>
+   <td>Adds <code>ch</code>, <code>rem</code>, <code>vw</code>, <code>vw</code>, <code>vmin</code>,<code> vmax</code>, <code>Q</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "syndata.html#numbers", "&lt;dimension&gt;")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Defined under Numbers and Length</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1", "", "&lt;dimension&gt;")}}</td>
+   <td>{{Spec2("CSS1")}}</td>
+   <td>Initial definition under "length units"</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.types.dimension")}}</p>
diff --git a/files/fr/web/css/direction/index.html b/files/fr/web/css/direction/index.html
new file mode 100644
index 0000000000..dd91c43510
--- /dev/null
+++ b/files/fr/web/css/direction/index.html
@@ -0,0 +1,108 @@
+---
+title: direction
+slug: Web/CSS/direction
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/direction
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>direction</code></strong> doit être paramétrée afin de correspondre à la direction du texte: <code>rtl</code> (<em>Right To Left</em> pour droite à gauche) pour les textes en hébreu ou en arabe et <code>ltr</code> (<em>Left To Right</em> pour gauche à droite) pour les autres. Cela doit normalement être fait dans le document (par exemple, en utilisant <a href="/fr/docs/Web/HTML/Attributs_universels/dir">l'attribut <code>dir</code> en HTML</a>) plutôt qu'avec une feuille de style CSS.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/direction.html")}}</div>
+
+
+
+<p>La propriété définit la direction principale du texte des éléments de type bloc et celle des éléments incorporés créés par la propriété {{cssxref("unicode-bidi")}}. Elle définit également l'alignement par défaut du texte et des éléments de type bloc, ainsi que le sens de progression des cellules dans une ligne de tableau.</p>
+
+<p>Contrairement à l'attribut HTML <code>dir</code>, la propriété <code>direction</code> n'est pas héritée pour les cellules depuis les colonnes d'un tableau car l'héritage CSS suit l'arborescence du document et les cellules sont à l'intérieur des lignes et non à l'intérieur des colonnes.</p>
+
+<p>Les propriétés <code>direction</code> et {{cssxref("unicode-bidi")}} sont les deux seuls propriétés qui ne sont pas affectés par la propriété raccourcie {{cssxref("all")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">direction: ltr;
+direction: rtl;
+
+/* Valeurs globales */
+direction: inherit;
+direction: initial;
+direction: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>ltr</code></dt>
+ <dd>La valeur par défaut qui correspond à une disposition de la gauche vers la droite pour le texte et les autres éléments.</dd>
+ <dt><code>rtl</code></dt>
+ <dd>Le texte et les autres éléments vont de la droite vers la gauche.</dd>
+</dl>
+
+<p>Afin que la propriété <code>direction</code> ait un effet sur les éléments en ligne, il faut que la valeur de la propriété {{cssxref("unicode-bidi")}} soit <code>embed</code> ou <code>override</code>.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">blockquote {
+  direction: rtl;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;blockquote&gt;
+  Du reste, depuis son bain dans la mare aux larmes,
+  tout était changé : la salle, la table de verre, et
+  la petite porte avaient complétement disparu.
+&lt;/blockquote&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Writing Modes', '#direction', 'direction')}}</td>
+   <td>{{Spec2('CSS3 Writing Modes')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#direction', 'direction')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.direction")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("unicode-bidi")}}</li>
+ <li>{{cssxref("writing-mode")}}</li>
+</ul>
diff --git a/files/fr/web/css/display-box/index.html b/files/fr/web/css/display-box/index.html
new file mode 100644
index 0000000000..532fa82e11
--- /dev/null
+++ b/files/fr/web/css/display-box/index.html
@@ -0,0 +1,108 @@
+---
+title: <display-box>
+slug: Web/CSS/display-box
+tags:
+  - CSS
+  - Reference
+  - Type de donnée
+translation_of: Web/CSS/display-box
+---
+<div>{{CSSRef}}</div>
+
+<p>Ces mots-clés définissent si un élément génère des boîtes d'affichage ou aucune.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<dl>
+ <dt><code>contents</code> {{Experimental_Inline}}</dt>
+ <dd>L'élément ne produit pas de boîte qui lui soit spécifique. Il est remplacé par sa pseudo-boîte et les boîtes de ses enfants. On notera que le module de spécification CSS Display de niveau 3 définit la façon dont la valeur <code>contents</code> affecte les éléments « inhabituels » tels que les éléments remplacés. Voir <a href="https://drafts.csswg.org/css-display/#unbox">Appendix B: Effects of display: contents on Unusual Elements</a> pour plus de détails.<br>
+ <br>
+ À l'heure actuelle, en raison d'un bug, les éléments ciblés par une règle avec <code>display: contents</code> sont retirés de l'arbre d'accessibilité et ne sont donc pas parcourus par les lecteurs d'écran<em>.</em></dd>
+ <dt><code>none</code></dt>
+ <dd>Désactive l'affichage d'un élément afin que celui-ci n'ait aucun effet sur la disposition du document (le document est affiché comme si l'élément n'existait pas). Tous les éléments descendants voient également leur affichage désactivé.<br>
+ Si on souhaite que l'élément ne soit pas affiché mais occupe néanmoins un espace, il faudra utiliser la propriété {{CSSxRef("visibility")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="display_none"><code>display: none</code></h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">p.secret {
+  display: none;
+}</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;Texte visible&lt;/p&gt;
+&lt;p class="secret"&gt;Texte invisible&lt;/p&gt;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("display_none", "100%", 60)}}</p>
+
+<h3 id="display_contents"><code>display: contents</code></h3>
+
+<p>Dans cet exemple, l'élément {{htmlelement("div")}} externe a une bordure rouge sur 2 pixels et mesure 300 pixels de large. Toutefois, cet élément est ciblé avec <code>display: contents</code> et l'élément <code>&lt;div&gt;</code> ne sera pas affiché tel quel : la bordure et la largeur ne s'appliqueront pas et l'élément fils sera affiché comme si le parent n'avait pas existé.</p>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">.outer {
+  border: 2px solid red;
+  width: 300px;
+  display: contents;
+}
+
+.outer &gt; div {
+  border: 1px solid green;
+}
+</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;div class="outer"&gt;
+  &lt;div&gt;Inner div.&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Display_contents", 300, 60)}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Via leur implémentation, la plupart des navigation retireront un élément de <a href="/fr/docs/Apprendre/a11y/What_is_accessibility">l'arbre d'accessibilité</a> si celui-ci reçoit <code>display: contents</code>. Cet élément (ainsi que ses descendants pour certains navigateurs) ne sera plus annoncé par les outils de lecture d'écran. Ce comportement est incorrect selon <a href="https://drafts.csswg.org/css-display/#the-display-properties">la spécification CSSWG</a>.</p>
+
+<ul>
+ <li><a href="https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents">Améliorer l'accessibilité du contenu avec <code>display: contents</code>, par Hidde de Vries (en anglais)</a></li>
+ <li><a href="http://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html"><code>display: contents</code> n'est pas un outil de réinitialisation CSS, par Adrian Roselli (en anglais)</a></li>
+</ul>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<h3 id="Prise_en_charge_contents">Prise en charge <code>contents</code></h3>
+
+<p>{{Compat("css.properties.display.contents", 10)}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{CSSxRef("display")}}
+  <ul>
+   <li>{{CSSxRef("&lt;display-outside&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-inside&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-listitem&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-internal&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-legacy&gt;")}}</li>
+  </ul>
+ </li>
+ <li><a href="http://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html"><code>display: contents</code> n'est pas un outil de réinitialisation CSS (en anglais)</a></li>
+ <li><a href="https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents">Un balisage plus accessible avec <code>display: contents</code> (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/display-inside/index.html b/files/fr/web/css/display-inside/index.html
new file mode 100644
index 0000000000..2091265318
--- /dev/null
+++ b/files/fr/web/css/display-inside/index.html
@@ -0,0 +1,120 @@
+---
+title: display-inside
+slug: Web/CSS/display-inside
+tags:
+  - CSS
+  - Reference
+  - Type
+translation_of: Web/CSS/display-inside
+---
+<div>{{CSSRef}}</div>
+
+<p>Ces mots-clés définissent le type d'affichage ({{CSSxRef("display")}}) pour l'intérieur de l'élément. Ce type servira à la disposition du contenu de l'élément (si ce contenu n'est pas un élément remplacé). Ces mots-clés sont des valeurs de la propriété <code>display</code> et peuvent, historiquement être utilisé seul, ou plus récemment (cf. la spécification de niveau 3), être utilisé en combinaison avec un mot-clé {{CSSxRef("&lt;display-outside&gt;")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Une valeur <code>&lt;display-inside&gt;</code> est définie avec l'un des mots-clés suivants :</p>
+
+<dl>
+ <dt><code>flow</code> {{Experimental_Inline}}</dt>
+ <dd>L'élément organise son contenu en utilisant la disposition en flux (disposition bloc/en ligne ou « <em>block and inline layout</em> » en anglais).
+ <p>Si le type d'affichage extérieur est <code>inline</code> ou <code>run-in</code> et que l'élément participe à un contexte de formatage bloc ou en ligne, il génèrera une boîte en ligne. Sinon, il génèrera un conteneur de bloc.</p>
+
+ <p>Selon la valeur d'autres propriétés (telles que {{CSSxRef("position")}}, {{CSSxRef("float")}}, ou {{CSSxRef("overflow")}}) et selon que l'élément partcipe à un contexte de mise en forme de bloc ou en ligne, l'élément crée un nouveau <a href="/fr/docs/Web/CSS/Block_formatting_context">contexte de formatage de bloc</a> (BFC) pour son contenu ou intègre son contenu dans le contexte parent.</p>
+ </dd>
+ <dt><code>flow-root</code> {{Experimental_Inline}}</dt>
+ <dd>L'élément génère un bloc qui établit un nouveau <a href="/fr/docs/Web/CSS/Block_formatting_context">contexte de formatage de bloc</a>, définissant ainsi une nouvelle racine pour le formatage.</dd>
+ <dt><code>table</code></dt>
+ <dd>L'élément se comporte comme un élément HTML {{HTMLElement("table")}}. Il définit une boîte de bloc.</dd>
+ <dt><code>flex</code></dt>
+ <dd>L'élément se comporte comme un élément de bloc et dispose son contenu selon <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS">le modèle des boîtes flexibles</a>.</dd>
+ <dt><code>grid</code></dt>
+ <dd>L'élément se comporte comme un élément de bloc et dispose son contenu selon <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base">le modèle des grilles</a>.</dd>
+ <dt><code>ruby</code> {{Experimental_Inline}}</dt>
+ <dd>L'élément se comporte comme un élément en ligne et dispose son contenu selon le modèle de formatage ruby. Il se comporte comme un élément HTML {{HTMLElement("ruby")}}.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note : </strong>Les navigateurs qui prennent en charge la syntaxe avec deux valeurs peuvent n'utiliser que <code>&lt;display-inside&gt;</code> lorsque c'est cohérent. Ainsi, avec <code>display: flex</code> ou <code>display: grid</code>, la valeur utilisée de <code>&lt;display-outside&gt;</code> sera nécessairement <code>block</code>. On a ainsi le résultat attendu car on doit avoir <code>display: grid</code> avec un conteneur qui soit un bloc.</p>
+</div>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, la boîte parente est ciblée avec <code>display: flow-root</code> et crée donc un nouveau contexte de formatage de bloc qui contient l'élément flottant.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.box {
+  background-color: rgb(224, 206, 247);
+  border: 5px solid rebeccapurple;
+  display: flow-root;
+}
+
+.float {
+  float: left;
+  width: 200px;
+  height: 150px;
+  background-color: white;
+  border:1px solid black;
+  padding: 10px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="box"&gt;
+  &lt;div class="float"&gt;I am a floated box!&lt;/div&gt;
+  &lt;p&gt;I am content inside the container.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "100%", 180)}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<h3 id="Prise_en_charge_des_valeurs_multiples">Prise en charge des valeurs multiples</h3>
+
+<p>{{Compat("css.properties.display.multi-keyword_values", 10)}}</p>
+
+<h3 id="Prise_en_charge_de_flow-root">Prise en charge de <code>flow-root</code></h3>
+
+<p>{{Compat("css.properties.display.flow-root", 10)}}</p>
+
+<h3 id="Prise_en_charge_des_tableaux">Prise en charge des tableaux</h3>
+
+<p>{{Compat("css.properties.display.table_values", 10)}}</p>
+
+<h3 id="Prise_en_charge_des_grilles">Prise en charge des grilles</h3>
+
+<p>{{Compat("css.properties.display.grid", 10)}}</p>
+
+<h3 id="Prise_en_charge_des_boîtes_flexibles">Prise en charge des boîtes flexibles</h3>
+
+<p>{{Compat("css.properties.display.flex", 10)}}</p>
+
+<h3 id="Prise_en_charge_des_annotations_ruby">Prise en charge des annotations ruby</h3>
+
+<p>{{Compat("css.properties.display.ruby_values", 10)}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{CSSxRef("display")}}
+  <ul>
+   <li>{{CSSxRef("&lt;display-outside&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-listitem&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-internal&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-box&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-legacy&gt;")}}</li>
+  </ul>
+ </li>
+ <li><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Concepts de base des boîtes flexibles (<em>flexbox</em>)</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base">Concepts de base des grilles CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/display-internal/index.html b/files/fr/web/css/display-internal/index.html
new file mode 100644
index 0000000000..ba42feb612
--- /dev/null
+++ b/files/fr/web/css/display-internal/index.html
@@ -0,0 +1,73 @@
+---
+title: <display-internal>
+slug: Web/CSS/display-internal
+tags:
+  - CSS
+  - Reference
+  - Type de donnée
+translation_of: Web/CSS/display-internal
+---
+<div>{{CSSRef}}</div>
+
+<p>Certains modes de disposition tels que <code>table</code> et <code>ruby</code> possèdent une structure interne complexe avec différents roles pour les éléments enfants et descendants. Cette page décrit ces valeurs « internes » pour <code>display</code> et qui s'appliquent dans un mode donné.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Sauf mention contraire, le type d'affichage intérieur et extérieur sont définis simultanément par le mot-clé indiqué.</p>
+
+<dl>
+ <dt><code>table-row-group</code></dt>
+ <dd>Ces éléments se comportent comme des éléments HTML {{HTMLElement("tbody")}}.</dd>
+ <dt><code>table-header-group</code></dt>
+ <dd>Ces éléments se comportent comme des éléments HTML {{HTMLElement("thead")}}.</dd>
+ <dt><code>table-footer-group</code></dt>
+ <dd>Ces éléments se comportent comme des éléments HTML {{HTMLElement("tfoot")}}.</dd>
+ <dt><code>table-row</code></dt>
+ <dd>Ces éléments se comportent comme des éléments HTML {{HTMLElement("tr")}}.</dd>
+ <dt><code>table-cell</code></dt>
+ <dd>Ces éléments se comportent comme des éléments HTML {{HTMLElement("td")}}.</dd>
+ <dt><code>table-column-group</code></dt>
+ <dd>Ces éléments se comportent comme des éléments HTML {{HTMLElement("colgroup")}}.</dd>
+ <dt><code>table-column</code></dt>
+ <dd>Ces éléments se comportent comme des éléments HTML {{HTMLElement("col")}}.</dd>
+ <dt><code>table-caption</code></dt>
+ <dd>Ces éléments se comportent comme des éléments HTML {{HTMLElement("caption")}}.</dd>
+ <dt><code>ruby-base</code> {{Experimental_Inline}}</dt>
+ <dd>Ces éléments se comportent comme des éléments HTML {{HTMLElement("rb")}}.</dd>
+ <dt><code>ruby-text</code> {{Experimental_Inline}}</dt>
+ <dd>Ces éléments se comportent comme des éléments HTML {{HTMLElement("rt")}}.</dd>
+ <dt><code>ruby-base-container</code> {{Experimental_Inline}}</dt>
+ <dd>Ces éléments se comportent comme des éléments HTML {{HTMLElement("rbc")}} générés comme des boîtes anonymes.</dd>
+ <dt><code>ruby-text-container</code> {{Experimental_Inline}}</dt>
+ <dd>Ces éléments se comportent comme des éléments HTML {{HTMLElement("rtc")}}.</dd>
+</dl>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<h3 id="Prise_en_charge_pour_les_valeurs_liées_à_table">Prise en charge pour les valeurs liées à <code>table</code></h3>
+
+<p><code>table</code>, <code>table-cell</code>, <code>table-column</code>, <code>table-column-group</code>, <code>table-footer-group</code>, <code>table-header-group</code>, <code>table-row</code> et <code>table-row-group</code></p>
+
+<p>{{Compat("css.properties.display.table_values", 10)}}</p>
+
+<h3 id="Prise_en_charge_pour_les_valeurs_ruby">Prise en charge pour les valeurs <code>ruby</code></h3>
+
+<p><code>ruby</code>, <code>ruby-base</code>, <code>ruby-base-container</code>, <code>ruby-text</code> et <code>ruby-text-container</code></p>
+
+<p>{{Compat("css.properties.display.ruby_values", 10)}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{CSSxRef("display")}}
+  <ul>
+   <li>{{CSSxRef("&lt;display-outside&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-inside&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-listitem&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-box&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-legacy&gt;")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/display-legacy/index.html b/files/fr/web/css/display-legacy/index.html
new file mode 100644
index 0000000000..1bd84ba254
--- /dev/null
+++ b/files/fr/web/css/display-legacy/index.html
@@ -0,0 +1,104 @@
+---
+title: <display-legacy>
+slug: Web/CSS/display-legacy
+tags:
+  - CSS
+  - Reference
+  - Type de donnée
+translation_of: Web/CSS/display-legacy
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS 2 utilisant une syntaxe avec un seul mot-clé comme valeur pour la propriété <code>display</code>, il fallait plusieurs mots-clés pour les différentes variantes bloc/en ligne d'un même mode. Cette page décrit ces valeurs.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<dl>
+ <dt><code>inline-block</code></dt>
+ <dd>L'élément s'inscrit dans le contenu environnant comme une boîte en ligne et organise son propre contenu en bloc.<br>
+ <br>
+ Ce mot-clé est équivalent à la combinaison <code>inline flow-root</code>.</dd>
+ <dt><code>inline-table</code></dt>
+ <dd>La valeur <code>inline-table</code> n'a pas de correspondance directe en HTML. Un tel élément se comporte comme un élément HTML {{HTMLElement("table")}} avec une boîte en ligne et pas de bloc. À l'intérieur de la boîte de tableau, on aura un contexte de bloc.<br>
+ <br>
+ Ce mot-clé est équivalent à la combinaison <code>inline table</code>.</dd>
+ <dt><code>inline-flex</code></dt>
+ <dd>L'élément se comporte comme un élément en ligne et organise son propre contenu selon le modèle des boîtes flexibles.<br>
+ <br>
+ Ce mot-clé est équivalent à la combinaison <code>inline flex</code>.</dd>
+ <dt><code>inline-grid</code></dt>
+ <dd>L'élément se comporte comme un élément en ligne et organise son propre contenu selon le modèle des grilles CSS.<br>
+ <br>
+ Ce mot-clé est équivalent à la combinaison <code>inline grid</code>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on définit un conteneur flexible en ligne en utilisant le mot-clé historique <code>inline-flex</code>.</p>
+
+<div id="Example">
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.container {
+  display: inline-flex;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+  &lt;div&gt;Élément flexible&lt;/div&gt;
+  &lt;div&gt;Élément flexible&lt;/div&gt;
+&lt;/div&gt;
+
+Pas d'élément flexible
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemple", 300, 150)}}</p>
+</div>
+
+<p>Avec la nouvelle syntaxe, on peut décrire le conteneur avec deux valeurs : la première pour le mode d'affichage extérieure (<code>inline</code>) et la seconde pour le mode d'affichage intérieur (<code>flex</code>).</p>
+
+<pre class="brush: css">.container {
+  display: inline flex;
+}</pre>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<h3 id="Prise_en_charge_de_inline-block">Prise en charge de <code>inline-block</code></h3>
+
+<p>{{Compat("css.properties.display.inline-block", 10)}}</p>
+
+<h3 id="Prise_en_charge_de_inline-table">Prise en charge de <code>inline-table</code></h3>
+
+<p>{{Compat("css.properties.display.inline-table", 10)}}</p>
+
+<h3 id="Prise_en_charge_de_inline-flex">Prise en charge de <code>inline-flex</code></h3>
+
+<p>{{Compat("css.properties.display.inline-flex", 10)}}</p>
+
+<h3 id="Prise_en_charge_de_inline-grid">Prise en charge de <code>inline-grid</code></h3>
+
+<p>{{Compat("css.properties.display.inline-grid", 10)}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{CSSxRef("display")}}
+  <ul>
+   <li>{{CSSxRef("&lt;display-outside&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-inside&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-listitem&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-internal&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-box&gt;")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/display-listitem/index.html b/files/fr/web/css/display-listitem/index.html
new file mode 100644
index 0000000000..d5fcffc88f
--- /dev/null
+++ b/files/fr/web/css/display-listitem/index.html
@@ -0,0 +1,64 @@
+---
+title: <display-listitem>
+slug: Web/CSS/display-listitem
+tags:
+  - CSS
+  - Reference
+  - Type de donnée
+translation_of: Web/CSS/display-listitem
+---
+<div>{{CSSRef}}</div>
+
+<p>Le mot-clé <code>list-item</code> permet à un élément de générer un pseudo-élément <code>::marker</code>  dont le contenu  est défini par les propriétés {{cssxref("list-style")}} (pour afficher une puce par exemple) avec une boîte principale du type indiquée pour organiser le contenu de l'élément.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Une valeur <code>list-item</code> indiquera à l'élément de se comporter comme un élément d'une liste. Cette valeur peut être utilisée avec les propriétés {{CSSxRef("list-style-type")}} et {{CSSxRef("list-style-position")}}.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Pour les navigateurs qui prennent en charge la syntaxe avec deux valeurs, si aucune valeur pour le mode intérieur n'est indiquée, sa valeur par défaut sera <code>flow</code>. Si aucune valeur n'est fournie pour le mode extérieur, la boîte principale aura un mode extérieur <code>block</code>.</p>
+</div>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.fausse-liste {
+  display: list-item;
+  list-style-position: inside;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="fausse-liste"&gt;Je vais m'afficher comme un élément de liste&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "100%", 150)}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<h3 id="Prise_en_charge_de_list-item">Prise en charge de <code>list-item</code></h3>
+
+<p>{{Compat("css.properties.display.list-item", 10)}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{CSSxRef("display")}}
+  <ul>
+   <li>{{CSSxRef("&lt;display-outside&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-inside&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-internal&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-box&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-legacy&gt;")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/display-outside/index.html b/files/fr/web/css/display-outside/index.html
new file mode 100644
index 0000000000..b646dfdd70
--- /dev/null
+++ b/files/fr/web/css/display-outside/index.html
@@ -0,0 +1,88 @@
+---
+title: display-outside
+slug: Web/CSS/display-outside
+tags:
+  - CSS
+  - Reference
+  - Type de donnée
+translation_of: Web/CSS/display-outside
+---
+<div>{{CSSRef}}</div>
+
+<p>Les mots-clés de type <code>&lt;display-outside&gt;</code> définissent le mode de disposition extérieure de l'élément. Autrement dit, ces mots-clés précisent le rôle de l'élément dans le flux. Ces valeurs peuvent être utilisées pour la propriété <code>display</code>. La syntaxe historique (avant CSS 3) prendra une seule valeur et la nouvelle syntaxe combinera cette valeur avec une valeur {{CSSxRef("&lt;display-inside&gt;")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Une valeur <code>&lt;display-outside&gt;</code> peut être l'un des mots-clés suivants.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>block</code></dt>
+ <dd>L'élément génère une boîte de bloc ce qui ajoute des passages à la ligne avant et après l'élément dans le flux normal.</dd>
+ <dt><code>inline</code></dt>
+ <dd>L'élément génère une ou plusieurs boîtes en lignes qui n'ajoutent pas de passages à la ligne avant ou après. Dans un flux normal, le prochain élément sera sur la même ligne si l'espace le permet.</dd>
+ <dt><code>run-in</code> {{Experimental_Inline}}</dt>
+ <dd>L'élément génère une boîte « <em>run-in</em> ». Si le voisin adjacent à l'élément est une boîte de bloc, la boîte <code>run-in</code> devient la première boîte en ligne qui suit cette boîte de bloc.<br>
+ <br>
+ Les éléments <em>run-in</em> se comportent comme des éléments de bloc ou en ligne selon les éléments environnants. Autrement dit, si la boîte <em>run-in</em> contient une boîte de bloc, l'élément se comportera comme un bloc. Si la boîte de bloc suit une boîte <em>run-in</em>, la boîte <em>run-in</em> deviendra la première boîte en ligne de la boîte de bloc. Si une boîte en ligne succède à l'élément, la boîte <em>run-in</em> deviendra une boîte de bloc.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note : </strong>Browsers that support the two value syntax, on finding the outer value only, such as when <code>display: block</code> or <code>display: inline</code> is specified, will set the inner value to <code>flow</code>. This will result in expected behavior; for example if you specify an element to be block, you would expect that the children of that element would participate in block and inline normal flow layout.</p>
+
+<p><strong>Note : </strong>Les navigateurs qui prennent en charge la syntaxe avec deux valeurs utiliseront la valeur par défaut <code>flow</code> pour le mode intérieur si <code>display: block</code> ou <code>display: inline</code>.  On a ainsi le résultat attendu (si on souhaite qu'un élément se comporte comme un bloc, on s'attend à ce que les éléments fils de cet élément contribuent à la disposition normale en bloc et en ligne).</p>
+</div>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, les éléments {{HTMLElement("span")}}, normalement affichés comme des éléments en ligne, sont paramétrés avec <code>display: block</code> et passent à la ligne en étendant leur conteneur selon l'axe en ligne.</p>
+
+<p> </p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">span {
+  display: block;
+  border: 1px solid rebeccapurple;
+}</pre>
+
+<p> </p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;span&gt;span 1&lt;/span&gt;
+&lt;span&gt;span 2&lt;/span&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 300, 60)}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<h3 id="Prise_en_charge_run-in">Prise en charge <code>run-in</code></h3>
+
+<p>{{Compat("css.properties.display.run-in", 10)}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{CSSxRef("display")}}
+  <ul>
+   <li>{{CSSxRef("&lt;display-inside&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-listitem&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-internal&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-box&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-legacy&gt;")}}</li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Block and Inline layout in Normal Flow</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained">Formatting Contexts explained</a></li>
+</ul>
diff --git a/files/fr/web/css/display/index.html b/files/fr/web/css/display/index.html
new file mode 100644
index 0000000000..bf24d05e9a
--- /dev/null
+++ b/files/fr/web/css/display/index.html
@@ -0,0 +1,237 @@
+---
+title: display
+slug: Web/CSS/display
+tags:
+  - CSS
+  - Propriété
+  - Reference
+  - display
+translation_of: Web/CSS/display
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>display</code></strong> définit le type d'affichage utilisée pour le rendu d'un élément (<a href="/fr/docs/Web/CSS/CSS_Flow_Layout">de bloc ou en ligne</a>) et la disposition utilisée pour ses éléments fils : <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">grille</a> ou <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">boîtes flexibles</a>.</p>
+
+<p>Le type d'affichage donné par <code>display</code> possède deux composantes : le type d'affichage extérieur qui définit comment la boîte participe au <a href="/fr/docs/Web/CSS/CSS_Flow_Layout">flux</a> et le type d'affichage intérieur qui définit l'organisation des éléments enfants.</p>
+
+<p>Certaines valeurs de <code>display</code> sont définies dans des spécifications séparées. Pour plus d'informations, voir la section Spécifications ci-après.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* Valeurs de type &lt;display-outside&gt; */
+display: block;
+display: inline;
+display: run-in;
+
+/* Valeurs de type &lt;display-inside&gt; */
+display: flow;
+display: flow-root;
+display: table;
+display: flex;
+display: grid;
+display: ruby;
+
+/* Combinaison de valeurs */
+/* &lt;display-outside&gt; et &lt;display-inside&gt; */
+display: block flow;
+display: inline table;
+display: flex run-in;
+
+/* Valeurs de type &lt;display-listitem&gt; */
+display: list-item;
+display: list-item block;
+display: list-item inline;
+display: list-item flow;
+display: list-item flow-root;
+display: list-item block flow;
+display: list-item block flow-root;
+display: flow list-item block;
+
+/* Valeurs de type &lt;display-internal&gt; */
+display: table-row-group;
+display: table-header-group;
+display: table-footer-group;
+display: table-row;
+display: table-cell;
+display: table-column-group;
+display: table-column;
+display: table-caption;
+display: ruby-base;
+display: ruby-text;
+display: ruby-base-container;
+display: ruby-text-container;
+
+/* Valeurs de type &lt;display-box&gt; */
+display: contents;
+display: none;
+
+/* Valeurs de type &lt;display-legacy&gt; */
+display: inline-block;
+display: inline-table;
+display: inline-flex;
+display: inline-grid;
+
+/* Valeurs globales */
+display: inherit;
+display: initial;
+display: unset;
+</pre>
+
+<p>La propriété <code>display</code> est définie à l'aide de mots-clés. Ces valeurs sont rangées selon six catégories.</p>
+
+<dl>
+ <dt>{{CSSxRef("&lt;display-outside&gt;")}}</dt>
+ <dd>Ces mots-clés définissent le type d'affichage extérieur de l'élément. Autrement dit, ils définissent comment l'élément participe au flux.</dd>
+ <dt>{{CSSxRef("&lt;display-inside&gt;")}}</dt>
+ <dd>Ces mots-clés définissent le type d'affichage intérieur de l'élément qui définit le contexte de formatage qui organisera le contenu de l'élément (si celui-ci n'est pas un élément remplacé).</dd>
+ <dt>{{CSSxRef("&lt;display-listitem&gt;")}}</dt>
+ <dd>L'élément génère une boîte de bloc pour le contenu et une boîte en ligne séparée pour l'élément de liste.</dd>
+ <dt>{{CSSxRef("&lt;display-internal&gt;")}}</dt>
+ <dd>Certains modes de dispositions, tels que <code><span class="css">table</span></code> et <code>ruby</code> possèdent une structure interne complexe avec différents rôles possibles pour les éléments descendants. Cette section définit ces rôles internes qui s'appliquent uniquement pour un mode de disposition donné.</dd>
+ <dt>{{CSSxRef("&lt;display-box&gt;")}}</dt>
+ <dd>Ces valeurs définissent si un élément génère une boîte ou non.</dd>
+ <dt>{{CSSxRef("&lt;display-legacy&gt;")}}</dt>
+ <dd>CSS 2 utilise une syntaxe avec un seul mot-clé pour la propriété <code>display</code> et il faut donc des mots-clés distincts pour les variantes bloc/en ligne d'un même mode de disposition.</dd>
+</dl>
+
+<h3 id="Valeurs_historiques_de_display">Valeurs historiques de <code>display</code></h3>
+
+<p>La spécification de niveau 3 permet d'utiliser deux valeurs pour définir la propriété <code>display</code> afin de définir explicitement le type d'affichage intérieur et le type d'affichage extérieur. Toutefois, cette syntaxe sur deux valeurs n'est pas encore prise en charge de façon homogène par les navigateurs.</p>
+
+<p>Les méthodes d'affichage historiques permettent d'obtenir les mêmes résultats avec un seul mot-clé. Ces valeurs devraient être privilégiées tant que la prise en charge de la syntaxe sur deux valeurs n'est pas mieux prise en charge. Ainsi, il est possible d'utiliseur deux valeur afin de définir un conteneur flexible en ligne :</p>
+
+<pre class="brush: css notranslate">.container {
+  display: inline flex;
+}</pre>
+
+<p>On pourra obtenir un comportement équivalent en écrivant cela avec une seule valeur.</p>
+
+<pre class="brush: css notranslate">.container {
+  display: inline-flex;
+}
+</pre>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>En plus de l'exemple qui suit, vous pouvez voir d'autres exemples sur les sections dédiées aux différents modes de disposition :</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">Grilles CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">Boîtes flexibles (<em>flexbox</em>) CSS</a></li>
+ <li><a href="/fr/docs/Apprendre/CSS/CSS_layout">Apprendre la disposition en CSS</a></li>
+</ul>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;
+  Texte visible
+&lt;/p&gt;
+&lt;p class="secret"&gt;
+  Texte invisible
+&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">p.secret {
+  display: none;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 300, 60)}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<h3 id="display_none"><code>display: none;</code></h3>
+
+<p>Utiliser la propriété <code>display</code> avec la valeur <code>none</code> sur un élément entraînera son retrait de l'<a href="/fr/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">arbre d'accessibilité</a>. Cet élément ainsi que ses descendants ne seront plus annoncés par les lecteurs d'écrans.</p>
+
+<p>Si vous souhaitez masquer un élément visuellement, une alternative plus accessible consiste à utiliser <a href="https://gomakethings.com/hidden-content-for-better-a11y/#hiding-the-link">une combinaison de propriétés</a> afin de le retirer de l'écran mais de le conserver lisible pour les technologies d'assistance.</p>
+
+<h3 id="display_contents"><code>display: contents;</code></h3>
+
+<p>Tout élément ciblé avec <code>display: contents</code> sera retiré de l'arbre d'accessibilité par la plupart des navigateurs. Ainsi, l'élément et ses descendants ne seront plus annoncés par les outils d'assistance tels que les lecteurs d'écran. Ce comportement est incorrect selon <a href="https://drafts.csswg.org/css-display/#the-display-properties">la spécification CSSWG</a>.</p>
+
+<ul>
+ <li><a href="https://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html"><code>display: contents</code> n'est pas un outil de réinitialisation CSS, par Adrian Roselli, en anglais</a></li>
+ <li><a href="https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents">Obtenir un balisage plus accessible grâce à <code>display: contents</code>, en anglais, par Hidde de Vries</a></li>
+</ul>
+
+<h3 id="Les_tableaux">Les tableaux</h3>
+
+<p>Modifier la valeur de <code>display</code> pour un élément de <a href="/en-US/docs/Web/HTML/Element/table">tableau</a> afin d'utiliser la valeur <code>block</code>, <code>grid</code> ou <code>flex</code> modifiera sa représentation au sein de l'<a href="/fr/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">arbre d'accessibilité</a>. Aussi, le tableau ne sera plus correctement annoncé par les technologies d'assistance.</p>
+
+<ul>
+ <li><a href="https://developer.paciellogroup.com/blog/2018/03/short-note-on-what-css-display-properties-do-to-table-semantics/">Une rapide note sur l'impact de la propriété CSS <code>display</code> sur la sémantique des tableaux — The Paciello Group (en anglais)</a></li>
+ <li><a href="https://gomakethings.com/hidden-content-for-better-a11y/">Du contenu masqué avec une meilleure accessibilité - Go Make Things (en anglais)</a></li>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">Comprendre les règles WCAG 1.3</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html"><em>Understanding Success Criterion 1.3.1, W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Display', '#the-display-properties', 'display')}}</td>
+   <td>{{Spec2('CSS3 Display')}}</td>
+   <td>Ajout des valeurs <code>run-in</code>, <code>contents</code>, <code>flow</code>, <code>flow-root</code> et des valeurs avec plusieurs mots-clés.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Ruby', '#ruby-display', 'display')}}</td>
+   <td>{{Spec2('CSS3 Ruby')}}</td>
+   <td>Ajout des valeurs <code>ruby</code>, <code>ruby-base</code>, <code>ruby-text</code>, <code>ruby-base-container</code> et <code>ruby-text-container</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Grid', '#grid-containers', 'display')}}</td>
+   <td>{{Spec2('CSS3 Grid')}}</td>
+   <td>Ajout des valeurs pour le modèle de boîtes en grille.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#flex-containers', 'display')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Ajout des valeurs pour le modèle de boîtes flexibles.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#display-prop', 'display')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Ajout des valeurs pour le modèle de boîte pour les tableaux et de la valeur <code>inline-block<em>.</em></code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#display', 'display')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale. Définitions des valeurs basiques : <code>none</code>, <code>block</code>, <code>inline</code>, et <code>list-item</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.display",10)}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("visibility")}}</li>
+ <li>{{cssxref("float")}}</li>
+ <li>{{cssxref("position")}}</li>
+ <li>{{cssxref("flex")}}</li>
+ <li>{{cssxref("grid")}}</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Explications_contextes_formatage">Explications sur les contextes de formatage</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Disposition_de_bloc_en_ligne_avec_flux_normal">Les dispositions de bloc et en ligne dans un flux normal</a></li>
+</ul>
diff --git a/files/fr/web/css/element()/index.html b/files/fr/web/css/element()/index.html
new file mode 100644
index 0000000000..d4d6391db2
--- /dev/null
+++ b/files/fr/web/css/element()/index.html
@@ -0,0 +1,149 @@
+---
+title: element
+slug: Web/CSS/element()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+translation_of: Web/CSS/element()
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La fonction <strong><code>element()</code></strong> définit une valeur {{cssxref("&lt;image&gt;")}} générée à partir d'un élément HTML arbitraire. L'image est calculée dynamiquement : si l'élément HTML change, les propriétés CSS utilisant la valeur seront automatiquement mis à jour.</p>
+
+<p>Un scénario pour lequel cette fonction est particulièrement utile : on génère une image dans un élément HTML {{HTMLElement("canvas")}} et on l'utilise comme arrière-plan.</p>
+
+<p>Pour les navigateurs basés sur Gecko, on peut utiliser la méthode {{domxref("document.mozSetImageElement()")}} pour modifier l'élément utilisé comme arrière-plan pour un <code>background</code> CSS donné.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">element(<var>id</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><strong><code>id</code></strong></dt>
+ <dd>L'identifiant (correspondant à l'attribut {{htmlattrxref("id")}}) de l'élément HTML visé.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Un_premier_exemple_réaliste">Un premier exemple réaliste</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">.exemple {
+  width: 400px;
+  height: 400px;
+  background: -moz-element(#monArrierePlan) no-repeat;
+
+}
+
+.paragraphe {
+  transform-origin: 0 0;
+  transform: rotate(45deg);
+  color: white;
+}
+
+#monArrierePlan{
+  width: 1024px;
+  height: 1024px;
+  background-image: linear-gradient(to right, red, orange, yellow, white);
+}
+.cache {
+  overflow: hidden;
+  height: 0;
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="exemple"&gt;
+  &lt;p&gt;
+    Cet élément utilise l'élément
+    #monArrierePlan comme image
+    de fond !
+  &lt;/p&gt;
+&lt;/div&gt;
+
+&lt;div class="cache"&gt;
+  &lt;div id="monArrierePlan"&gt;
+    &lt;p class="paragraphe"&gt;
+      Et voici un texte inscrit sur
+      l'arrière-plan.
+    &lt;/p&gt;
+  &lt;div&gt;
+&lt;div&gt;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>Pour les navigateurs qui prennent en charge <code>element</code>, on peut ici voir un arrière-plan généré avec un paragraphe HTML.</p>
+
+<p>{{EmbedLiveSample("Un_premier_exemple_réaliste","400","400")}}</p>
+
+<h3 id="Un_second_exemple_plus_méchant">Un second exemple plus méchant</h3>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">.exemple {
+  width: 400px;
+  height: 100px;
+  background: -moz-element(#monArrierePlan);
+}
+
+.cache {
+  overflow: hidden;
+  height: 0;
+} </pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="exemple"&gt;&lt;/div&gt;
+
+&lt;div class="cache"&gt;
+  &lt;button id="monArrierePlan" type="button"&gt;
+    Méchant bouton
+  &lt;/button&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Un_second_exemple_plus_méchant","400","400")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Spécification</th>
+   <th>État</th>
+   <th>Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Images', '#element-notation', 'Using Elements as Images: the element() notation')}}</td>
+   <td>{{Spec2('CSS4 Images')}}</td>
+   <td>Reporté pour CSS4</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.types.image.element")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("document.mozSetImageElement()")}}</li>
+ <li>{{cssxref("_image", "image()")}}</li>
+ <li>{{cssxref("image-set", "image-set()")}}</li>
+ <li>{{cssxref("&lt;image&gt;")}}</li>
+ <li>{{cssxref("&lt;gradient&gt;")}}</li>
+ <li>{{cssxref("element()")}}</li>
+ <li>{{cssxref("cross-fade")}}</li>
+ <li>{{domxref("document.mozSetImageElement()")}}</li>
+</ul>
diff --git a/files/fr/web/css/empty-cells/index.html b/files/fr/web/css/empty-cells/index.html
new file mode 100644
index 0000000000..96841dab17
--- /dev/null
+++ b/files/fr/web/css/empty-cells/index.html
@@ -0,0 +1,118 @@
+---
+title: empty-cells
+slug: Web/CSS/empty-cells
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/empty-cells
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>empty-cells</code></strong> définit la façon dont l'agent utilisateur doit afficher les bordures et l'arrière-plan des cellules d'un tableau ({{HTMLElement("table")}}) qui n'ont aucun contenu visible.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/empty-cells.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cette propriété est uniquement appliquée lorsque <code>border-collapse</code> vaut <code>separate</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec mot-clé */
+empty-cells: show;
+empty-cells: hide;
+
+/* Valeurs globales */
+empty-cells: inherit;
+empty-cells: initial;
+empty-cells: unset;
+</pre>
+
+<p>Cette propriété se définit avec l'un des mots-clés suivants.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>show</code></dt>
+ <dd>Un mot-clé indiquant que les bordures et l'arrière-plan doivent être dessinés comme pour les cellules normales.</dd>
+ <dt><code>hide</code></dt>
+ <dd>Un mot-clé indiquant qu'aucune bordure ou arrière-plan ne doit être dessiné.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;table class="table_1"&gt;
+    &lt;tr&gt;
+        &lt;td&gt;Jean&lt;/td&gt;
+        &lt;td&gt;Biche&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+        &lt;td&gt;Alice&lt;/td&gt;
+        &lt;td&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+&lt;/table&gt;
+&lt;table class="table_2"&gt;
+    &lt;tr&gt;
+        &lt;td&gt;Jean&lt;/td&gt;
+        &lt;td&gt;Biche&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+        &lt;td&gt;Alice&lt;/td&gt;
+        &lt;td&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+&lt;/table&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.table_1 {
+  empty-cells: show;
+}
+.table_2 {
+  empty-cells: hide;
+}
+
+td, th {
+  border: 1px solid #999;
+  padding: 0.5rem;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '100%', '200')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'tables.html#empty-cells', 'empty-cells')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.empty-cells")}}</p>
diff --git a/files/fr/web/css/env()/index.html b/files/fr/web/css/env()/index.html
new file mode 100644
index 0000000000..aaf9a7792d
--- /dev/null
+++ b/files/fr/web/css/env()/index.html
@@ -0,0 +1,150 @@
+---
+title: env()
+slug: Web/CSS/env()
+tags:
+  - CSS
+  - CSS Function
+  - CSS Variables
+  - Fonction
+  - Reference
+  - env()
+translation_of: Web/CSS/env()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction CSS <strong><code>env()</code></strong> peut être utilisée afin d'insérer la valeur d'une variable d'environnement dans une règle. Les variables d'environnement sont globales pour un document donné, à la différence des <a href="/fr/docs/Web/CSS/--*">propriétés personnalisées</a>. Les variables d'environnement sont définies au niveau de l'agent utilisateur et non par l'utilisateur/le concepteur.</p>
+
+<p><code>env()</code> peut être utilisée aux endroits où on souhaite remplacer la valeur, à la façon de la fonction <code><a href="/fr/docs/Web/CSS/var()">var()</a></code>.</p>
+
+<pre class="brush: css notranslate">body {
+  padding:
+    env(safe-area-inset-top, 20px)
+    env(safe-area-inset-right, 20px)
+    env(safe-area-inset-bottom, 20px)
+    env(safe-area-inset-left, 20px);
+}</pre>
+
+<p>La fonction <code>env()</code> peut être utilisée à n'importe quel endroit où une valeur peut être associée à une propriété, à n'importe quel endroit où une valeur peut être utilisée dans un descripteur d'une règle @ (ex. dans une <a href="/fr/docs/Web/CSS/@media">requête média</a>) et, de façon générale, à n'importe quel endroit où les valeurs CSS sont autorisées. Selon les évolutions de la spécification, cette fonction pourrait également être utilisées à d'autres endroits comme les sélecteurs.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Les variables d'environnement furent initialement fournies par le navigateur iOS afin de permettre aux développeurs de placer le contenu sur une zone sûre de la zone d'affichage (<em>viewport</em>) et d'éviter le décrochement formé en haut de l'écran sur certains des appareils.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css notranslate">/* Utilisation des quatre zones sûres */
+env(safe-area-inset-top)
+env(safe-area-inset-right)
+env(safe-area-inset-bottom)
+env(safe-area-inset-left)
+
+/* Utilisation du deuxième paramètre pour une valeur de recours */
+env(safe-area-inset-top, 20px);
+env(safe-area-inset-right, 1em);
+env(safe-area-inset-bottom, 0.5vh);
+env(safe-area-inset-left, 1.4rem);
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code id="safe-area-inset-top" style="white-space: nowrap;">safe-area-inset-top</code>, <code id="safe-area-inset-right" style="white-space: nowrap;">safe-area-inset-right</code>, <code id="safe-area-inset-bottom" style="white-space: nowrap;">safe-area-inset-bottom</code>, <code id="safe-area-inset-left" style="white-space: nowrap;">safe-area-inset-left</code></dt>
+ <dd>Ces mots-clés sont des variables d'environnement qui définissent un rectangle avec les décalages par rapport à chacun des côtés de la zone d'affichage (<em>viewport</em>) dans lequel on pourra placer du contenu sans que ce dernier puisse être rogné du fait de la forme non rectangulaire de l'affichage.</dd>
+</dl>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> À la différence des autres propriétés CSS, les identifiants provenant de l'agent utilisateur sont sensibles à la casse.</p>
+</div>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<p>Dans l'exemple qui suit, on utilise le deuxième paramètre de la notation fonctionnelle <code>env()</code> afin de fournir une valeur de recours lorsque la variable d'environnement n'est pas disponible.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;
+  Si la fonction &lt;code&gt;env()&lt;/code&gt; est prise en charge dans votre
+  navigateur, le texte de ce paragraphe aura 50 pixels de padding avec
+  la bordure gauche mais pas la droite / basse et haute.
+  En effet, le code CSS associé est équivalent à &lt;code&gt;padding: 0 0 0 50px&lt;/code&gt;
+  car les noms des propriétés CSS associées aux agents utilisateurs sont
+  sensibles à la casse (contrairement aux autres propriétés).
+&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">p {
+  width: 300px;
+  border: 2px solid red;
+  padding:
+    env(safe-area-inset-top, 50px)
+    env(safe-area-inset-right, 50px)
+    env(safe-area-inset-bottom, 50px)
+    env(SAFE-AREA-INSET-LEFT, 50px);
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h3 id="Exemples_de_valeurs">Exemples de valeurs</h3>
+
+<pre class="brush: css notranslate">/* zéro pour les agents utilisateurs rectangulaires */
+padding: env(safe-area-inset-bottom, 50px);
+
+/* 50px car les propriétés de l'agent sont sensibles à la casse */
+padding: env(Safe-area-inset-bottom, 50px);
+
+/* correspond à padding: 50px 20px car x n'est pas une variable
+   d'environnement valide */
+padding: env(x, 50px 20px);
+
+/* ignorée car '50px, 20px' n'est pas une valeur de padding correcte
+   et que x n'est pas une variable d'environnement */
+padding: env(x, 50px, 20px);
+</pre>
+
+<p>Pour la deuxième valeur, il est possible d'utiliser des virgules afin de fournir un ensemble composite de valeurs à la propriété. Toutefois, si la propriété en question ne permet pas de gérer plusieurs valeurs, la déclaration sera invalide.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Les propriétés relatives à l'agent utilisateur ne sont pas réinitialisées avec la propriété {{cssxref("all")}}.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Environment Variables", "#env-function", "env()")}}</td>
+   <td>{{Spec2("CSS3 Environment Variables")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.custom-property.env")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{CSSxRef("var", "var(…)")}}</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Variables">Les propriétés personnalisées et la cascade</a></li>
+ <li><a href="/fr/docs/Web/CSS/--*">Les propriétés personnalisées (--*)</a></li>
+ <li><a href="/fr/docs/Web/CSS/Les_variables_CSS">Utiliser les propriétés CSS personnalisées</a></li>
+ <li>{{CSSxRef("@viewport/viewport-fit", "viewport-fit (@viewport)")}}</li>
+</ul>
diff --git a/files/fr/web/css/extensions_css_microsoft/index.html b/files/fr/web/css/extensions_css_microsoft/index.html
new file mode 100644
index 0000000000..017958249c
--- /dev/null
+++ b/files/fr/web/css/extensions_css_microsoft/index.html
@@ -0,0 +1,118 @@
+---
+title: Extensions CSS de Microsoft
+slug: Web/CSS/Extensions_CSS_Microsoft
+tags:
+  - CSS
+  - Non-standard
+  - Reference
+translation_of: Web/CSS/Microsoft_Extensions
+---
+<div>{{CSSRef}}</div>
+
+<p>Les applications Microsoft, telles que Edge ou Internet Explorer, prennent en charge différentes extensions à <strong><a href="/fr/docs/Web/CSS">CSS</a></strong>. Ces extensions sont préfixées par <code>-ms</code>.</p>
+
+<h2 id="Propriétés_spécifiques_à_Microsoft_(ne_pas_utiliser_sur_le_Web)">Propriétés spécifiques à Microsoft (ne pas utiliser sur le Web)</h2>
+
+<div class="note">
+<p><strong>Note :</strong> Ces propriétés et pseudo-classes ne fonctionneront que pour les applications Microsoft et ne sont pas en voie de standardisation.</p>
+</div>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("-ms-accelerator")}}</li>
+ <li>{{CSSxRef("-ms-block-progression")}}</li>
+ <li>{{CSSxRef("-ms-content-zoom-chaining")}}</li>
+ <li>{{CSSxRef("-ms-content-zooming")}}</li>
+ <li>{{CSSxRef("-ms-content-zoom-limit")}}</li>
+ <li>{{CSSxRef("-ms-content-zoom-limit-max")}}</li>
+ <li>{{CSSxRef("-ms-content-zoom-limit-min")}}</li>
+ <li>{{CSSxRef("-ms-content-zoom-snap")}}</li>
+ <li>{{CSSxRef("-ms-content-zoom-snap-points")}}</li>
+ <li>{{CSSxRef("-ms-content-zoom-snap-type")}}</li>
+ <li>{{CSSxRef("-ms-filter")}} {{Obsolete_Inline}}</li>
+ <li>{{CSSxRef("-ms-flow-from")}}</li>
+ <li>{{CSSxRef("-ms-flow-into")}}</li>
+ <li>{{CSSxRef("-ms-high-contrast-adjust")}}</li>
+ <li>{{CSSxRef("-ms-hyphenate-limit-chars")}}</li>
+ <li>{{CSSxRef("-ms-hyphenate-limit-lines")}}</li>
+ <li>{{CSSxRef("-ms-hyphenate-limit-zone")}}</li>
+ <li>{{CSSxRef("-ms-ime-align")}}</li>
+ <li>{{CSSxRef("-ms-overflow-style")}}</li>
+ <li>{{CSSxRef("-ms-scrollbar-3dlight-color")}} {{Obsolete_Inline}}</li>
+ <li>{{CSSxRef("-ms-scrollbar-arrow-color")}} {{Obsolete_Inline}}</li>
+ <li>{{CSSxRef("-ms-scrollbar-base-color")}} {{Obsolete_Inline}}</li>
+ <li>{{CSSxRef("-ms-scrollbar-darkshadow-color")}} {{Obsolete_Inline}}</li>
+ <li>{{CSSxRef("-ms-scrollbar-face-color")}} {{Obsolete_Inline}}</li>
+ <li>{{CSSxRef("-ms-scrollbar-highlight-color")}} {{Obsolete_Inline}}</li>
+ <li>{{CSSxRef("-ms-scrollbar-shadow-color")}} {{Obsolete_Inline}}</li>
+ <li>{{CSSxRef("-ms-scrollbar-track-color")}} {{Obsolete_Inline}}</li>
+ <li>{{CSSxRef("-ms-scroll-chaining")}}</li>
+ <li>{{CSSxRef("-ms-scroll-limit")}}</li>
+ <li>{{CSSxRef("-ms-scroll-limit-x-max")}}</li>
+ <li>{{CSSxRef("-ms-scroll-limit-x-min")}}</li>
+ <li>{{CSSxRef("-ms-scroll-limit-y-max")}}</li>
+ <li>{{CSSxRef("-ms-scroll-limit-y-min")}}</li>
+ <li>{{CSSxRef("-ms-scroll-rails")}}</li>
+ <li>{{CSSxRef("-ms-scroll-snap-points-x")}}</li>
+ <li>{{CSSxRef("-ms-scroll-snap-points-y")}}</li>
+ <li>{{CSSxRef("-ms-scroll-snap-x")}}</li>
+ <li>{{CSSxRef("-ms-scroll-snap-y")}}</li>
+ <li>{{CSSxRef("-ms-scroll-translation")}}</li>
+ <li>{{CSSxRef("-ms-text-autospace")}}</li>
+ <li>{{CSSxRef("-ms-touch-select")}}</li>
+ <li>{{CSSxRef("-ms-wrap-flow")}}</li>
+ <li>{{CSSxRef("-ms-wrap-margin")}}</li>
+ <li>{{CSSxRef("-ms-wrap-through")}}</li>
+ <li>{{CSSxRef("zoom")}}</li>
+</ul>
+</div>
+
+<h2 id="Pseudo-éléments">Pseudo-éléments</h2>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("::-ms-browse")}}</li>
+ <li>{{CSSxRef("::-ms-check")}}</li>
+ <li>{{CSSxRef("::-ms-clear")}}</li>
+ <li>{{CSSxRef("::-ms-expand")}}</li>
+ <li>{{CSSxRef("::-ms-fill")}}</li>
+ <li>{{CSSxRef("::-ms-fill-lower")}}</li>
+ <li>{{CSSxRef("::-ms-fill-upper")}}</li>
+ <li>{{CSSxRef("::-ms-reveal")}}</li>
+ <li>{{CSSxRef("::-ms-thumb")}}</li>
+ <li>{{CSSxRef("::-ms-ticks-after")}}</li>
+ <li>{{CSSxRef("::-ms-ticks-before")}}</li>
+ <li>{{CSSxRef("::-ms-tooltip")}}</li>
+ <li>{{CSSxRef("::-ms-track")}}</li>
+ <li>{{CSSxRef("::-ms-value")}}</li>
+</ul>
+</div>
+
+<h2 id="Caractéristiques_média">Caractéristiques média</h2>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("@media/-ms-high-contrast","-ms-high-contrast")}}</li>
+</ul>
+</div>
+
+<h2 id="API_DOM_relatives_à_CSS">API DOM relatives à CSS</h2>
+
+<div class="index">
+<ul>
+ <li>{{DOMxRef("msContentZoomFactor")}}</li>
+ <li>{{DOMxRef("msGetPropertyEnabled")}}</li>
+ <li>{{DOMxRef("msGetRegionContent")}}</li>
+ <li>{{DOMxRef("MSRangeCollection")}}</li>
+ <li>{{DOMxRef("msRegionOverflow")}}</li>
+</ul>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Extensions_Mozilla">Les extensions de Mozilla à CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/Reference/Extensions_WebKit">Les extensions de WebKit à CSS</a></li>
+ <li><a href="/fr/docs/Web/API/Microsoft_API_extensions">Les extensions de Microsoft aux API</a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Microsoft_JavaScript_extensions">Les extensions de Microsoft à JavaScript</a></li>
+</ul>
diff --git a/files/fr/web/css/extensions_mozilla/index.html b/files/fr/web/css/extensions_mozilla/index.html
new file mode 100644
index 0000000000..3d9acbff04
--- /dev/null
+++ b/files/fr/web/css/extensions_mozilla/index.html
@@ -0,0 +1,678 @@
+---
+title: Extensions CSS de Mozilla
+slug: Web/CSS/Extensions_Mozilla
+tags:
+  - CSS
+  - Mozilla
+  - Non-standard
+  - Reference
+translation_of: Web/CSS/Mozilla_Extensions
+---
+<div>{{CSSRef}}</div>
+
+<p>Les applications Mozilla, telles que Firefox, prennent en charge un certain nombre d'extensions spécifiques à <a href="/fr/docs/Web/CSS">CSS</a> : des propriétés, des valeurs, des pseudo-éléments, des pseudo-classes, des règles @ et des requêtes média. Ces extensions utilisent le préfixe <code>-moz</code>.</p>
+
+<h2 id="Propriétés_et_pseudo-classes_spécifiques_à_Mozilla_(ne_pas_utiliser_sur_le_Web)">Propriétés et pseudo-classes spécifiques à Mozilla (ne pas utiliser sur le Web)</h2>
+
+<div class="note">
+<p><strong>Note :</strong> Ces propriétés et pseudo-classes ne fonctionneront que pour les applications Mozilla (Firefox par exemple) et ne sont pas en voie de standardisation. Certaines ne s'applique qu'aux éléments <a href="/fr/docs/Mozilla/Tech/XUL">XUL</a>.</p>
+</div>
+
+<div class="index">
+<h3 id="B">B</h3>
+
+<ul>
+ <li>{{CSSxRef("-moz-binding")}} {{Deprecated_Inline}}</li>
+ <li>{{CSSxRef("-moz-border-bottom-colors")}} {{Obsolete_Inline}}</li>
+ <li>{{CSSxRef("-moz-border-left-colors")}} {{Obsolete_Inline}}</li>
+ <li>{{CSSxRef("-moz-border-right-colors")}} {{Obsolete_Inline}}</li>
+ <li>{{CSSxRef("-moz-border-top-colors")}} {{Obsolete_Inline}}</li>
+ <li>{{CSSxRef("-moz-box-align")}}</li>
+ <li>{{CSSxRef("-moz-box-direction")}}</li>
+ <li>{{CSSxRef("-moz-box-flex")}}</li>
+ <li>{{CSSxRef("-moz-box-ordinal-group")}}</li>
+ <li>{{CSSxRef("-moz-box-orient")}}</li>
+ <li>{{CSSxRef("-moz-box-pack")}}</li>
+</ul>
+
+<h3 id="C_–_I">C – I</h3>
+
+<ul>
+ <li>{{CSSxRef("-moz-context-properties")}}</li>
+ <li>{{CSSxRef("-moz-float-edge")}}</li>
+ <li>{{CSSxRef("-moz-force-broken-image-icon")}}</li>
+ <li>{{CSSxRef("-moz-image-region")}}</li>
+</ul>
+
+<h3 id="O">O</h3>
+
+<ul>
+ <li>{{CSSxRef("-moz-orient")}}</li>
+ <li>{{CSSxRef("-moz-osx-font-smoothing")}}</li>
+ <li>{{CSSxRef("-moz-outline-radius")}}</li>
+ <li>{{CSSxRef("-moz-outline-radius-bottomleft")}}</li>
+ <li>{{CSSxRef("-moz-outline-radius-bottomright")}}</li>
+ <li>{{CSSxRef("-moz-outline-radius-topleft")}}</li>
+ <li>{{CSSxRef("-moz-outline-radius-topright")}}</li>
+ <li>{{CSSxRef("overflow-clip-box")}}</li>
+ <li>{{CSSxRef("overflow-clip-box-block")}}</li>
+ <li>{{CSSxRef("overflow-clip-box-inline")}}</li>
+</ul>
+
+<h3 id="S_–_Z">S – Z</h3>
+
+<ul>
+ <li>{{CSSxRef("-moz-stack-sizing")}}</li>
+ <li>{{CSSxRef(":-moz-system-metric(images-in-menus)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}</li>
+ <li>{{CSSxRef(":-moz-system-metric(mac-graphite-theme)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9.1")}}</li>
+ <li>{{CSSxRef(":-moz-system-metric(scrollbar-end-backward)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}</li>
+ <li>{{CSSxRef(":-moz-system-metric(scrollbar-end-forward)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}</li>
+ <li>{{CSSxRef(":-moz-system-metric(scrollbar-start-backward)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}</li>
+ <li>{{CSSxRef(":-moz-system-metric(scrollbar-start-forward)")}} {{Obsolete_Inline}}{{Fx_minversion_inline(3)}}</li>
+ <li>{{CSSxRef(":-moz-system-metric(scrollbar-thumb-proportional)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}</li>
+ <li>{{CSSxRef(":-moz-system-metric(touch-enabled)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef(":-moz-system-metric(windows-default-theme)")}} {{Obsolete_Inline}}{{Fx_minversion_inline(3)}}</li>
+ <li>{{CSSxRef("-moz-user-focus")}}</li>
+ <li>{{CSSxRef("-moz-user-input")}}</li>
+ <li>{{CSSxRef("-moz-user-modify")}}</li>
+ <li>{{CSSxRef("-moz-window-dragging")}}</li>
+ <li>{{CSSxRef("-moz-window-shadow")}}</li>
+</ul>
+</div>
+
+<h2 id="Anciennes_propriétés_spécifiques_désormais_standardisées"><span class="highlight-span">Anciennes propriétés spécifiques, désormais standardisées</span></h2>
+
+<div class="note">
+<p><strong>Note :</strong> Afin d'obtenir la meilleure compatibilité possible, vous devriez utiliser les versions standards, non-préfixées, de ces propriétés plutôt que les versions spécifiques. Généralement, lorsqu'une propriété est standardisée et implémentée, la version préfixée est généralement abandonnée ensuite.</p>
+</div>
+
+<div class="index">
+<ul>
+ <li>
+  <h3 id="A">A</h3>
+ </li>
+ <li>{{CSSxRef("animation", "-moz-animation")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("animation-delay", "-moz-animation-delay")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("animation-direction", "-moz-animation-direction")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("animation-duration", "-moz-animation-duration")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("animation-fill-mode", "-moz-animation-fill-mode")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("animation-iteration-count", "-moz-animation-iteration-count")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("animation-name", "-moz-animation-name")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("animation-play-state", "-moz-animation-play-state")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("animation-timing-function","-moz-animation-timing-function")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("appearance","-moz-appearance")}} {{Experimental_Inline}}</li>
+ <li>
+  <h3 id="B_2">B</h3>
+ </li>
+ <li>{{CSSxRef("backface-visibility", "-moz-backface-visibility")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("background-clip", "-moz-background-clip")}}{{Obsolete_Inline(2)}}</li>
+ <li>{{CSSxRef("background-origin", "-moz-background-origin")}}{{Obsolete_Inline(2)}}</li>
+ <li>{{CSSxRef("-moz-background-inline-policy")}}{{Obsolete_Inline(32)}} [Remplacée par la version standard {{CSSxRef("box-decoration-break")}}]</li>
+ <li>{{CSSxRef("background-size", "-moz-background-size")}}{{Obsolete_Inline(2)}}</li>
+ <li>{{CSSxRef("border-inline-end","-moz-border-end")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-end")}}]</li>
+ <li>{{CSSxRef("border-inline-color","-moz-border-end-color")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-end-color")}}]</li>
+ <li>{{CSSxRef("border-inline-style","-moz-border-end-style")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-end-style")}}]</li>
+ <li>{{CSSxRef("border-inline-width","-moz-border-end-width")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-end-width")}}]</li>
+ <li>{{CSSxRef("border-image","-moz-border-image")}} {{Deprecated_Inline}}</li>
+ <li>{{CSSxRef("border-inline-start","-moz-border-start")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-start")}}]</li>
+ <li>{{CSSxRef("border-inline-start-color","-moz-border-start-color")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-start-color")}}]</li>
+ <li>{{CSSxRef("border-inline-start-style","-moz-border-start-style")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-start-style")}}]</li>
+ <li>{{CSSxRef("border-inline-start-width","-moz-border-start-width")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-start-width")}}]</li>
+ <li>{{CSSxRef("box-sizing", "-moz-box-sizing")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>
+  <h3 id="C">C</h3>
+ </li>
+ <li>{{CSSxRef("clip-path")}} {{Experimental_Inline}} [Applying to more than SVG]</li>
+ <li>{{CSSxRef("column-count","-moz-column-count")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("column-fill","-moz-column-fill")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("column-gap","-moz-column-gap")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("column-width","-moz-column-width")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("column-rule","-moz-column-rule")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("column-rule-width","-moz-column-rule-width")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("column-rule-style","-moz-column-rule-style")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("column-rule-color","-moz-column-rule-color")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("-moz-context-properties")}} {{Experimental_Inline}}</li>
+ <li>
+  <h3 id="F_–_M">F – M</h3>
+ </li>
+ <li>{{CSSxRef("filter")}} {{Experimental_Inline}} [Applying to more than SVG]</li>
+ <li>{{CSSxRef("font-feature-settings","-moz-font-feature-settings")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("font-language-override","-moz-font-language-override")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("hyphens","-moz-hyphens")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("margin-inline-end","-moz-margin-end")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("margin-inline-end")}}]</li>
+ <li>{{CSSxRef("margin-inline-start","-moz-margin-start")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("margin-inline-start")}}]</li>
+ <li>{{CSSxRef("mask")}} {{Experimental_Inline}} [Applying to more than SVG]</li>
+ <li>
+  <h3 id="O_2">O</h3>
+ </li>
+ <li>{{CSSxRef("opacity","-moz-opacity")}}{{Obsolete_Inline("1.9.1")}}</li>
+ <li>{{CSSxRef("outline","-moz-outline")}}{{Obsolete_Inline("1.9.2")}}</li>
+ <li>{{CSSxRef("outline-color","-moz-outline-color")}}{{Obsolete_Inline("1.9.2")}}</li>
+ <li>{{CSSxRef("outline-offset","-moz-outline-offset")}}{{Obsolete_Inline("1.9.2")}}</li>
+ <li>{{CSSxRef("outline-style","-moz-outline-style")}}{{Obsolete_Inline("1.9.2")}}</li>
+ <li>{{CSSxRef("outline-width","-moz-outline-width")}}{{Obsolete_Inline("1.9.2")}}</li>
+ <li>
+  <h3 id="P">P</h3>
+ </li>
+ <li>{{CSSxRef("padding-inline-end","-moz-padding-end")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("padding-inline-start")}}]</li>
+ <li>{{CSSxRef("padding-inline-start","-moz-padding-start")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("padding-inline-end")}}]</li>
+ <li>{{CSSxRef("perspective", "-moz-perspective")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("perspective-origin","-moz-perspective-origin")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("pointer-events")}} {{Experimental_Inline}} [Applying to more than SVG]</li>
+ <li>
+  <h3 id="T_–_U">T – U</h3>
+ </li>
+ <li>{{CSSxRef("tab-size","-moz-tab-size")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("text-align-last","-moz-text-align-last")}}{{Obsolete_Inline("53")}}</li>
+ <li>{{CSSxRef("text-decoration-color","-moz-text-decoration-color")}}{{Obsolete_Inline("39")}}</li>
+ <li>{{CSSxRef("text-decoration-line","-moz-text-decoration-line")}}{{Obsolete_Inline("39")}}</li>
+ <li>{{CSSxRef("text-decoration-style","-moz-text-decoration-style")}}{{Obsolete_Inline("39")}}</li>
+ <li>{{CSSxRef("text-size-adjust","-moz-text-size-adjust")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("transform", "-moz-transform")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("transform-origin", "-moz-transform-origin")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("transform-style", "-moz-transform-style")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("transition", "-moz-transition")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("transition-delay", "-moz-transition-delay")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("transition-duration", "-moz-transition-duration")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("transition-property", "-moz-transition-property")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("transition-timing-function", "-moz-transition-timing-function")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("user-select","-moz-user-select")}} {{Experimental_Inline}}</li>
+</ul>
+</div>
+
+<h2 id="Valeurs">Valeurs</h2>
+
+<h3 id="Valeurs_globales">Valeurs globales</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("initial","-moz-initial")}}</li>
+</ul>
+</div>
+
+<h3 id="Cssxref(-moz-appearance)">{{Cssxref("-moz-appearance")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>button</code></li>
+ <li><code>button-arrow-down</code></li>
+ <li><code>button-arrow-next</code></li>
+ <li><code>button-arrow-previous</code></li>
+ <li><code>button-arrow-up</code></li>
+ <li><code>button-bevel</code></li>
+ <li><code>checkbox</code></li>
+ <li><code>checkbox-container</code></li>
+ <li><code>checkbox-label</code></li>
+ <li><code>checkmenuitem</code></li>
+ <li><code>dialog</code></li>
+ <li><code>groupbox</code></li>
+ <li><code>listbox</code></li>
+ <li><code>menuarrow</code></li>
+ <li><code>menucheckbox</code></li>
+ <li><code>menuimage</code></li>
+ <li><code>menuitem</code></li>
+ <li><code>menuitemtext</code></li>
+ <li><code>menulist</code></li>
+ <li><code>menulist-button</code></li>
+ <li><code>menulist-text</code></li>
+ <li><code>menulist-textfield</code></li>
+ <li><code>menupopup</code></li>
+ <li><code>menuradio</code></li>
+ <li><code>menuseparator</code></li>
+ <li><code>-moz-mac-unified-toolbar</code>{{Fx_minversion_inline(3.5)}}</li>
+ <li><code>-moz-win-borderless-glass</code></li>
+ <li><code>-moz-win-browsertabbar-toolbox</code>{{Fx_minversion_inline(3)}}</li>
+ <li><code>-moz-win-communications-toolbox</code>{{Fx_minversion_inline(3)}}</li>
+ <li><code>-moz-win-glass</code></li>
+ <li><code>-moz-win-media-toolbox</code>{{Fx_minversion_inline(3)}}</li>
+ <li><code>-moz-window-button-box</code></li>
+ <li><code>-moz-window-button-box-maximized</code></li>
+ <li><code>-moz-window-button-close</code></li>
+ <li><code>-moz-window-button-maximize</code></li>
+ <li><code>-moz-window-button-minimize</code></li>
+ <li><code>-moz-window-button-restore</code></li>
+ <li><code>-moz-window-titlebar</code></li>
+ <li><code>-moz-window-titlebar-maximized</code></li>
+ <li><code>progressbar</code></li>
+ <li><code>progresschunk</code></li>
+ <li><code>radio</code></li>
+ <li><code>radio-container</code></li>
+ <li><code>radio-label</code></li>
+ <li><code>radiomenuitem</code></li>
+ <li><code>resizer</code></li>
+ <li><code>resizerpanel</code></li>
+ <li><code>scale-horizontal</code></li>
+ <li><code>scalethumb-horizontal</code></li>
+ <li><code>scalethumb-vertical</code></li>
+ <li><code>scale-vertical</code></li>
+ <li><code>scrollbarbutton-down</code></li>
+ <li><code>scrollbarbutton-left</code></li>
+ <li><code>scrollbarbutton-right</code></li>
+ <li><code>scrollbarbutton-up</code></li>
+ <li><code>scrollbar-small</code></li>
+ <li><code>scrollbarthumb-horizontal</code></li>
+ <li><code>scrollbarthumb-vertical</code></li>
+ <li><code>scrollbartrack-horizontal</code></li>
+ <li><code>scrollbartrack-vertical</code></li>
+ <li><code>separator</code></li>
+ <li><code>spinner</code></li>
+ <li><code>spinner-downbutton</code></li>
+ <li><code>spinner-textfield</code></li>
+ <li><code>spinner-upbutton</code></li>
+ <li><code>statusbar</code></li>
+ <li><code>statusbarpanel</code></li>
+ <li><code>tab</code></li>
+ <li><code>tabpanels</code></li>
+ <li><code>tab-scroll-arrow-back</code></li>
+ <li><code>tab-scroll-arrow-forward</code></li>
+ <li><code>textfield</code></li>
+ <li><code>textfield-multiline</code></li>
+ <li><code>toolbar</code></li>
+ <li><code>toolbarbutton-dropdown</code></li>
+ <li><code>toolbox</code></li>
+ <li><code>tooltip</code></li>
+ <li><code>treeheadercell</code></li>
+ <li><code>treeheadersortarrow</code></li>
+ <li><code>treeitem</code></li>
+ <li><code>treetwisty</code></li>
+ <li><code>treetwistyopen</code></li>
+ <li><code>treeview</code></li>
+ <li><code>window</code></li>
+</ul>
+</div>
+
+<h3 id="cssxref(background-image)">{{cssxref("background-image")}}</h3>
+
+<div class="index">
+<ul>
+ <li>
+  <h4 id="Dégradés_Gecko_minversion_inline(1.9.2)">Dégradés {{Gecko_minversion_inline("1.9.2")}}</h4>
+
+  <ul>
+   <li>{{CSSxRef("linear-gradient","-moz-linear-gradient")}} {{Deprecated_Inline}}</li>
+   <li>{{CSSxRef("radial-gradient","-moz-radial-gradient")}} {{Deprecated_Inline}}</li>
+  </ul>
+ </li>
+ <li>
+  <h4 id="Éléments_gecko_minversion_inline(2.0)">Éléments {{gecko_minversion_inline("2.0")}}</h4>
+
+  <ul>
+   <li>{{cssxref("-moz-element")}}</li>
+  </ul>
+ </li>
+ <li>
+  <h4 id="Sub-images_gecko_minversion_inline(2.0)">Sub-images {{gecko_minversion_inline("2.0")}}</h4>
+
+  <ul>
+   <li>{{cssxref("-moz-image-rect")}}</li>
+  </ul>
+ </li>
+</ul>
+</div>
+
+<h3 id="Cssxref(border-color)">{{Cssxref("border-color")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>-moz-use-text-color</code> {{obsolete_inline}} retiré de Gecko (cf. {{bug(1306214)}}) ; <a href="/fr/docs/Web/CSS/color_value#currentColor_keyword">currentcolor</a> doit être utilisée à la place.</li>
+</ul>
+</div>
+
+<h3 id="Cssxref(border-style)_et_Cssxref(outline-style)">{{Cssxref("border-style")}} et {{Cssxref("outline-style")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>-moz-bg-inset</code>{{Obsolete_Inline(1.9)}}</li>
+ <li><code>-moz-bg-outset</code>{{Obsolete_Inline(1.9)}}</li>
+ <li><code>-moz-bg-solid</code>{{Obsolete_Inline(1.9)}}</li>
+</ul>
+</div>
+
+<h3 id="Mots-clés_pour_cssxref(&lt;color>)">Mots-clés pour {{cssxref("&lt;color&gt;")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>-moz-activehyperlinktext</code></li>
+ <li><code>-moz-hyperlinktext</code></li>
+ <li><code>-moz-visitedhyperlinktext</code></li>
+ <li><code>-moz-buttondefault</code></li>
+ <li><code>-moz-buttonhoverface</code></li>
+ <li><code>-moz-buttonhovertext</code></li>
+ <li><code>-moz-default-background-color</code>{{Gecko_minversion_inline("5.0")}}</li>
+ <li><code>-moz-default-color</code>{{Gecko_minversion_inline("5.0")}}</li>
+ <li><code>-moz-cellhighlight</code></li>
+ <li><code>-moz-cellhighlighttext</code></li>
+ <li><code>-moz-field</code></li>
+ <li><code>-moz-fieldtext</code></li>
+ <li><code>-moz-dialog</code></li>
+ <li><code>-moz-dialogtext</code></li>
+ <li><code>-moz-dragtargetzone</code></li>
+ <li><code>-moz-mac-accentdarkestshadow</code></li>
+ <li><code>-moz-mac-accentdarkshadow</code></li>
+ <li><code>-moz-mac-accentface</code></li>
+ <li><code>-moz-mac-accentlightesthighlight</code></li>
+ <li><code>-moz-mac-accentlightshadow</code></li>
+ <li><code>-moz-mac-accentregularhighlight</code></li>
+ <li><code>-moz-mac-accentregularshadow</code></li>
+ <li><code>-moz-mac-chrome-active</code>{{Gecko_minversion_inline("1.9.1")}}</li>
+ <li><code>-moz-mac-chrome-inactive</code>{{Gecko_minversion_inline("1.9.1")}}</li>
+ <li><code>-moz-mac-focusring</code></li>
+ <li><code>-moz-mac-menuselect</code></li>
+ <li><code>-moz-mac-menushadow</code></li>
+ <li><code>-moz-mac-menutextselect</code></li>
+ <li><code>-moz-menuhover</code></li>
+ <li><code>-moz-menuhovertext</code></li>
+ <li><code>-moz-win-communicationstext</code>{{Fx_minversion_inline(3)}}</li>
+ <li><code>-moz-win-mediatext</code>{{gecko_minversion_inline(1.9)}}</li>
+ <li><code>-moz-nativehyperlinktext</code>{{Gecko_minversion_inline("1.9.1")}}</li>
+</ul>
+</div>
+
+<h3 id="Cssxref(display)">{{Cssxref("display")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>-moz-box</code> {{Deprecated_Inline}}</li>
+ <li><code>-moz-inline-block</code> {{Obsolete_Inline}}</li>
+ <li><code>-moz-inline-box</code> {{Deprecated_Inline}}</li>
+ <li><code>-moz-inline-grid</code>{{Obsolete_Inline(62)}}</li>
+ <li><code>-moz-inline-stack</code>{{Obsolete_Inline(62)}}</li>
+ <li><code>-moz-inline-table</code> {{Obsolete_Inline}}</li>
+ <li><code>-moz-grid</code>{{Obsolete_Inline(62)}}</li>
+ <li><code>-moz-grid-group</code>{{Obsolete_Inline(62)}}</li>
+ <li><code>-moz-grid-line</code>{{Obsolete_Inline(62)}}</li>
+ <li><code>-moz-groupbox</code>{{Obsolete_Inline}}</li>
+ <li><code>-moz-deck</code>{{Obsolete_Inline(62)}}</li>
+ <li><code>-moz-popup</code>{{Obsolete_Inline(62)}}</li>
+ <li><code>-moz-stack</code>{{Obsolete_Inline(62)}}</li>
+ <li><code>-moz-marker</code>{{Obsolete_Inline(62)}}</li>
+</ul>
+</div>
+
+<h3 id="cssxref(empty-cells)">{{cssxref("empty-cells")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>-moz-show-background</code> (valeur par défaut en <em>quirks mode</em>)</li>
+</ul>
+</div>
+
+<h3 id="Cssxref(font)">{{Cssxref("font")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>-moz-button</code></li>
+ <li><code>-moz-info</code></li>
+ <li><code>-moz-desktop</code></li>
+ <li><code>-moz-dialog</code> (également une couleur)</li>
+ <li><code>-moz-document</code></li>
+ <li><code>-moz-workspace</code></li>
+ <li><code>-moz-window</code></li>
+ <li><code>-moz-list</code></li>
+ <li><code>-moz-pull-down-menu</code></li>
+ <li><code>-moz-field</code> (également une couleur)</li>
+</ul>
+</div>
+
+<h3 id="Cssxref(font-family)">{{Cssxref("font-family")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>-moz-fixed</code></li>
+</ul>
+</div>
+
+<h3 id="Cssxref(image-rendering)">{{Cssxref("image-rendering")}}</h3>
+
+<div class="index">
+<ul>
+ <li>{{Cssxref("image-rendering","-moz-crisp-edges")}} {{Gecko_minversion_inline("1.9.2")}}</li>
+</ul>
+</div>
+
+<h3 id="cssxref(&lt;length>)">{{cssxref("&lt;length&gt;")}}</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("-moz-calc")}} {{gecko_minversion_inline("2.0")}}</li>
+</ul>
+</div>
+
+<h3 id="Cssxref(list-style-type)">{{Cssxref("list-style-type")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>-moz-arabic-indic</code></li>
+ <li><code>-moz-bengali</code></li>
+ <li><code>-moz-cjk-earthly-branch</code></li>
+ <li><code>-moz-cjk-heavenly-stem</code></li>
+ <li><code>-moz-devanagari</code></li>
+ <li><code>-moz-ethiopic-halehame</code></li>
+ <li><code>-moz-ethiopic-halehame-am</code></li>
+ <li><code>-moz-ethiopic-halehame-ti-er</code></li>
+ <li><code>-moz-ethiopic-halehame-ti-et</code></li>
+ <li><code>-moz-ethiopic-numeric</code></li>
+ <li><code>-moz-gujarati</code></li>
+ <li><code>-moz-gurmukhi</code></li>
+ <li><code>-moz-hangul</code></li>
+ <li><code>-moz-hangul-consonant</code></li>
+ <li><code>-moz-japanese-formal</code></li>
+ <li><code>-moz-japanese-informal</code></li>
+ <li><code>-moz-kannada</code></li>
+ <li><code>-moz-khmer</code></li>
+ <li><code>-moz-lao</code></li>
+ <li><code>-moz-malayalam</code></li>
+ <li><code>-moz-myanmar</code></li>
+ <li><code>-moz-oriya</code></li>
+ <li><code>-moz-persian</code></li>
+ <li><code>-moz-simp-chinese-formal</code></li>
+ <li><code>-moz-simp-chinese-informal</code></li>
+ <li><code>-moz-tamil</code></li>
+ <li><code>-moz-telugu</code></li>
+ <li><code>-moz-thai</code></li>
+ <li><code>-moz-trad-chinese-formal</code></li>
+ <li><code>-moz-trad-chinese-informal</code></li>
+ <li><code>-moz-urdu</code></li>
+</ul>
+</div>
+
+<h3 id="Cssxref(overflow)">{{Cssxref("overflow")}}</h3>
+
+<div class="index">
+<ul>
+ <li>{{Cssxref("-moz-scrollbars-none")}} {{obsolete_inline}}</li>
+ <li>{{Cssxref("-moz-scrollbars-horizontal")}} {{Deprecated_inline}}</li>
+ <li>{{Cssxref("-moz-scrollbars-vertical")}} {{Deprecated_inline}}</li>
+ <li>{{Cssxref("-moz-hidden-unscrollable")}}</li>
+</ul>
+</div>
+
+<h3 id="Cssxref(text-align)">{{Cssxref("text-align")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>-moz-center</code></li>
+ <li><code>-moz-left</code></li>
+ <li><code>-moz-right</code></li>
+</ul>
+</div>
+
+<h3 id="Cssxref(text-decoration)">{{Cssxref("text-decoration")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>-moz-anchor-decoration</code></li>
+</ul>
+</div>
+
+<h3 id="Cssxref(-moz-user-select)">{{Cssxref("-moz-user-select")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>-moz-all</code></li>
+ <li><code>-moz-none</code></li>
+</ul>
+</div>
+
+<h3 id="Cssxref(width)_Cssxref(min-width)_and_Cssxref(max-width)">{{Cssxref("width")}}, {{Cssxref("min-width")}}, and {{Cssxref("max-width")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>-moz-min-content</code> {{Fx_minversion_inline(3)}}</li>
+ <li><code>-moz-fit-content</code> {{Fx_minversion_inline(3)}}</li>
+ <li><code>-moz-max-content</code> {{Fx_minversion_inline(3)}}</li>
+ <li><code>-moz-available</code> {{Fx_minversion_inline(3)}}</li>
+</ul>
+</div>
+
+<h2 id="Pseudo-éléments_et_pseudo-classes">Pseudo-éléments et pseudo-classes</h2>
+
+<div class="index">
+<ul>
+ <li>
+  <h3 id="A_–_D">A – D</h3>
+ </li>
+ <li>{{CSSxRef("::-moz-anonymous-block")}} <span class="comment">eg@:- bug 331432</span></li>
+ <li>{{CSSxRef("::-moz-anonymous-positioned-block")}}</li>
+ <li>{{CSSxRef(":-moz-any")}}{{gecko_minversion_inline("2.0")}}</li>
+ <li>{{CSSxRef(":-moz-any-link")}} [Matches <code>:link</code> and <code>:visited</code>]</li>
+ <li>{{CSSxRef(":-moz-broken")}}{{gecko_minversion_inline("1.9")}}</li>
+ <li>{{CSSxRef("::-moz-canvas")}}</li>
+ <li>{{CSSxRef("::-moz-color-swatch")}}</li>
+ <li>{{CSSxRef("::-moz-cell-content")}}</li>
+ <li>{{CSSxRef(":-moz-drag-over")}}</li>
+ <li>
+  <h3 id="F_–_I">F – I</h3>
+ </li>
+ <li>{{CSSxRef(":-moz-first-node")}}</li>
+ <li>{{CSSxRef("::-moz-focus-inner")}}</li>
+ <li>{{CSSxRef("::-moz-focus-outer")}}</li>
+ <li>{{CSSxRef(":-moz-focusring")}}{{gecko_minversion_inline("2.0")}}</li>
+ <li>{{CSSxRef(":-moz-full-screen")}}{{gecko_minversion_inline("9.0")}}</li>
+ <li>{{CSSxRef(":-moz-full-screen-ancestor")}}{{gecko_minversion_inline("10.0")}}</li>
+ <li>{{CSSxRef(":-moz-handler-blocked")}}{{gecko_minversion_inline("1.9.1")}}</li>
+ <li>{{CSSxRef(":-moz-handler-crashed")}}{{gecko_minversion_inline("2.0")}}</li>
+ <li>{{CSSxRef(":-moz-handler-disabled")}}{{gecko_minversion_inline("1.9.1")}}</li>
+ <li>{{CSSxRef("::-moz-inline-table")}}</li>
+ <li>
+  <h3 id="L">L</h3>
+ </li>
+ <li>{{CSSxRef(":-moz-last-node")}}</li>
+ <li>{{CSSxRef(":-moz-list-bullet")}}</li>
+ <li>{{CSSxRef(":-moz-list-number")}}</li>
+ <li>{{CSSxRef(":-moz-loading")}}{{gecko_minversion_inline("1.9")}}</li>
+ <li>{{CSSxRef(":-moz-locale-dir(ltr)")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef(":-moz-locale-dir(rtl)")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef(":-moz-lwtheme")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef(":-moz-lwtheme-brighttext")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef(":-moz-lwtheme-darktext")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>
+  <h3 id="N_–_R">N – R</h3>
+ </li>
+ <li>{{CSSxRef(":-moz-native-anonymous")}}{{gecko_minversion_inline("36")}}</li>
+ <li>{{CSSxRef(":-moz-only-whitespace")}}</li>
+ <li>{{CSSxRef("::-moz-page")}}</li>
+ <li>{{CSSxRef("::-moz-page-sequence")}}</li>
+ <li>{{CSSxRef("::-moz-pagebreak")}}</li>
+ <li>{{CSSxRef("::-moz-pagecontent")}}</li>
+ <li>{{CSSxRef(":-moz-placeholder")}}{{gecko_minversion_inline("1.9")}}{{Obsolete_Inline("51")}}</li>
+ <li>{{CSSxRef("::-moz-placeholder")}}{{gecko_minversion_inline("19")}}{{Deprecated_Inline("51")}}</li>
+ <li>{{CSSxRef("::-moz-progress-bar")}}</li>
+ <li>{{CSSxRef("::-moz-range-progress")}}</li>
+ <li>{{CSSxRef("::-moz-range-thumb")}}</li>
+ <li>{{CSSxRef("::-moz-range-track")}}</li>
+ <li>{{CSSxRef(":-moz-read-only")}}</li>
+ <li>{{CSSxRef(":-moz-read-write")}}</li>
+ <li>
+  <h3 id="S">S</h3>
+ </li>
+ <li>{{CSSxRef("::-moz-scrolled-canvas")}}</li>
+ <li>{{CSSxRef("::-moz-scrolled-content")}}</li>
+ <li>{{CSSxRef("::-moz-scrolled-page-sequence")}}</li>
+ <li>{{CSSxRef("::selection","::-moz-selection")}}{{Deprecated_Inline(62)}}</li>
+ <li>{{CSSxRef(":-moz-submit-invalid")}}{{gecko_minversion_inline("2.0")}}</li>
+ <li>{{CSSxRef(":-moz-suppressed")}}{{gecko_minversion_inline("1.9")}}</li>
+ <li>{{CSSxRef("::-moz-svg-foreign-content")}}</li>
+ <li>
+  <h3 id="T">T</h3>
+ </li>
+ <li>{{CSSxRef("::-moz-table")}}</li>
+ <li>{{CSSxRef("::-moz-table-cell")}}</li>
+ <li>{{CSSxRef("::-moz-table-column")}}</li>
+ <li>{{CSSxRef("::-moz-table-column-group")}}</li>
+ <li>{{CSSxRef("::-moz-table-outer")}}</li>
+ <li>{{CSSxRef("::-moz-table-row")}}</li>
+ <li>{{CSSxRef("::-moz-table-row-group")}}</li>
+ <li>{{CSSxRef(":-moz-tree-cell")}}</li>
+ <li>{{CSSxRef(":-moz-tree-cell-text")}}</li>
+ <li>{{CSSxRef(":-moz-tree-cell-text(hover)")}}{{gecko_minversion_inline("1.9")}}</li>
+ <li>{{CSSxRef(":-moz-tree-checkbox")}}</li>
+ <li>{{CSSxRef(":-moz-tree-column")}}</li>
+ <li>{{CSSxRef(":-moz-tree-drop-feedback")}}</li>
+ <li>{{CSSxRef(":-moz-tree-image")}}</li>
+ <li>{{CSSxRef(":-moz-tree-indentation")}}</li>
+ <li>{{CSSxRef(":-moz-tree-line")}}</li>
+ <li>{{CSSxRef(":-moz-tree-progressmeter")}}</li>
+ <li>{{CSSxRef(":-moz-tree-row")}}</li>
+ <li>{{CSSxRef(":-moz-tree-row(hover)")}}{{gecko_minversion_inline("1.9")}}</li>
+ <li>{{CSSxRef(":-moz-tree-separator")}}</li>
+ <li>{{CSSxRef(":-moz-tree-twisty")}}</li>
+ <li>
+  <h3 id="U_–_X">U – X</h3>
+ </li>
+ <li>{{CSSxRef(":-moz-ui-invalid")}}{{gecko_minversion_inline("2.0")}}</li>
+ <li>{{CSSxRef(":-moz-ui-valid")}}{{gecko_minversion_inline("2.0")}}</li>
+ <li>{{CSSxRef(":-moz-user-disabled")}}{{gecko_minversion_inline("1.9")}}</li>
+ <li>{{CSSxRef("::-moz-viewport")}}</li>
+ <li>{{CSSxRef("::-moz-viewport-scroll")}}</li>
+ <li>{{CSSxRef(":-moz-window-inactive")}}{{gecko_minversion_inline("2.0")}}</li>
+ <li>{{CSSxRef("::-moz-xul-anonymous-block")}}</li>
+</ul>
+</div>
+
+<h2 id="Règles">Règles @</h2>
+
+<div class="index">
+<ul>
+ <li>{{Cssxref("@-moz-document")}}</li>
+</ul>
+</div>
+
+<h2 id="Caractéristiques">Caractéristiques</h2>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("@media/-moz-mac-graphite-theme", "-moz-mac-graphite-theme")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef("@media/-moz-maemo-classic", "-moz-maemo-classic")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef("@media/-moz-device-pixel-ratio", "-moz-device-pixel-ratio")}}{{gecko_minversion_inline("2.0")}}</li>
+ <li>{{CSSxRef("@media/-moz-os-version", "-moz-os-version")}}</li>
+ <li>{{CSSxRef("@media/-moz-scrollbar-end-backward", "-moz-scrollbar-end-backward")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef("@media/-moz-scrollbar-end-forward", "-moz-scrollbar-end-forward")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef("@media/-moz-scrollbar-start-backward", "-moz-scrollbar-start-backward")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef("@media/-moz-scrollbar-start-forward", "-moz-scrollbar-start-forward")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef("@media/-moz-scrollbar-thumb-proportional", "-moz-scrollbar-thumb-proportional")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef("@media/-moz-touch-enabled", "-moz-touch-enabled")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef("@media/-moz-windows-accent-color-in-titlebar", "-moz-windows-accent-color-in-titlebar")}}</li>
+ <li>{{CSSxRef("@media/-moz-windows-classic", "-moz-windows-classic")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef("@media/-moz-windows-compositor", "-moz-windows-compositor")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef("@media/-moz-windows-default-theme", "-moz-windows-default-theme")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef("@media/-moz-windows-glass", "-moz-windows-glass")}}</li>
+ <li>{{CSSxRef("@media/-moz-windows-theme", "-moz-windows-theme")}}{{gecko_minversion_inline("2.0")}}</li>
+</ul>
+</div>
+
+<h2 id="Autres">Autres</h2>
+
+<div class="index">
+<ul>
+ <li>{{Cssxref("-moz-alt-content")}} {{Bug("11011")}}</li>
+</ul>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Mozilla/Gecko/Chrome/CSS">CSS Mozilla uniquement destiné au chrome (l'interface du navigateur)</a></li>
+ <li><a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">Extensions CSS spécifiques à Microsoft</a></li>
+ <li><a href="/fr/docs/Web/CSS/Reference/Extensions_WebKit">Extensions CSS spécifiques à WebKit</a></li>
+</ul>
diff --git a/files/fr/web/css/feuilles_de_style_alternatives/index.html b/files/fr/web/css/feuilles_de_style_alternatives/index.html
new file mode 100644
index 0000000000..cc96a123e1
--- /dev/null
+++ b/files/fr/web/css/feuilles_de_style_alternatives/index.html
@@ -0,0 +1,77 @@
+---
+title: Feuilles de style alternatives
+slug: Web/CSS/Feuilles_de_style_alternatives
+tags:
+  - CSS
+  - NeedsCompatTable
+  - Reference
+translation_of: Web/CSS/Alternative_style_sheets
+---
+<div>{{CSSRef}}</div>
+
+<p>En proposant <strong>des feuilles de style alternatives</strong>, une page web permet à ses utilisateurs de pouvoir choisir parmi différentes version d'une page selon leurs besoins ou leurs préférences.</p>
+
+<p>Firefox permet à l'utilisateur de sélectionner le style de la page en utilisant le menu « Affichage &gt; Style de la page », Internet Explorer possède également cette fonctionnalité (depuis IE8), accesssible via « Affichage &gt; Style de la page ». Pour Chrome, il est nécessaire d'utiliser une extension afin de pouvoir utiliser cette fonctionnalité. La page web peut également fournir un élément d'interface utilisateur afin de permettre à l'utilisateur de passer d'un style à un autre.</p>
+
+<h2 id="Exemple_d'application_définir_des_feuilles_de_style_alternatives">Exemple d'application : définir des feuilles de style alternatives</h2>
+
+<p>Pour indiquer des feuilles de style alternatives, on utilisera un élément {{HTMLElement("link")}} avec les attributs <code>rel="stylesheet alternate"</code> et <code>title="..."</code>. Ainsi :</p>
+
+<pre class="brush: html">&lt;link href="reset.css" rel="stylesheet" type="text/css"&gt;
+
+&lt;link href="default.css" rel="stylesheet" type="text/css" title="Style par défaut"&gt;
+&lt;link href="joli.css" rel="alternate stylesheet" type="text/css" title="Joli"&gt;
+&lt;link href="basique.css" rel="alternate stylesheet" type="text/css" title="Basique"&gt;
+</pre>
+
+<p>Dans cet exemple, les styles « Style par défaut », « Joli » et « Basique » seront listés dans le menu « Style de la page ». C'est le style par défaut (il n'y a pas de composante <code>alternate</code> pour l'attribut <code>rel</code>) qui sera sélectionné. Lorsque l'utilisateur choisit un autre style, la page est alors immédiatement affichée avec cette feuille de style.</p>
+
+<p>Quel que soit la mise en forme choisie, les règles provenant de la feuille <code>reset.css</code> seront toujours appliquées.</p>
+
+<h2 id="Détails">Détails</h2>
+
+<p>Une feuille de style fera partie d'une de ces trois catégories :</p>
+
+<ul>
+ <li><strong>Persistante</strong> (aucun <code>rel="alternate"</code>, aucun <code>title=""</code>) : la feuille de style s'applique au document quoi qu'il arrive</li>
+ <li><strong>Préférée</strong> (aucun <code>rel="alternate"</code>, un attribut <code>title="..."</code> défini) : la feuille de style est appliquée par défaut mais est désactivée si une autre feuille de style est sélectionnée. <strong>Il ne peut y avoir qu'une seule feuille de style préférée</strong>. Si plusieurs feuilles de style sont fournies avec différentes valeurs pour l'attribut <code>title</code>, certaines seront ignorées.</li>
+ <li><strong>Alternative</strong> (<code>rel="stylesheet alternate"</code>, un attribut <code>title="..."</code> défini) : la feuille de style est désactivée par défaut mais peut être sélectionnée.</li>
+</ul>
+
+<p>Lorsqu'une feuille de style contient un attribut <code>title</code> sur l'élément {{HTMLElement("link", "&lt;link rel=\"stylesheet\"&gt;")}} ou sur l'élément {{HTMLElement("style")}}, ce titre est l'une des options proposées à l'utilisateur. Les feuilles de style qui contiennent le même titre (<code>title</code> a la même valeur) s'appliqueront toutes pour ce choix. Enfin, les feuilles de style qui n'ont aucun attribut <code>title</code> seront toujours appliquées.</p>
+
+<p>On utilisera <code>rel="stylesheet"</code> pour pointer vers la feuille de style par défaut et <code>rel="alternate stylesheet"</code> pour pointer vers les feuilles de style alternatives. Cela permet à l'agent utilisateur de savoir quelle feuille doit être appliquée par défaut ; c'est aussi cette valeur qui sera utilisée pour les navigateurs qui ne prennent pas en charge cette fonctionnalité.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM', '#css-style-sheet-collections', 'CSS Style Sheet Collections')}}</td>
+   <td>{{Spec2('CSSOM')}}</td>
+   <td>La spécification CSS OM définit les concepts de <strong>nom d'ensemble de feuilles de style</strong>, le <strong>marqueur « désactivé »</strong> et le <strong>nom d'ensemble de feuilles de style CSS préférées</strong>.<br>
+    Cette spécification définit comment ces concepts sont déterminés, elle laisse à la spécification HTML le soin de définir les comportements spécifiques à HTML qui doit notamment définir <strong><dfn>quand est créée une feuille de style CSS</dfn></strong>.</td>
+  </tr>
+  <tr>
+   <td>
+    <p>{{SpecName('HTML WHATWG', 'semantics.html#link-type-stylesheet', 'Link type "stylesheet"')}}<br>
+     {{SpecName('HTML WHATWG', 'semantics.html#attr-style-title', 'The style element')}}<br>
+     {{SpecName('HTML WHATWG', 'semantics.html#attr-meta-http-equiv-default-style', 'Default style state (http-equiv="default-style")')}}</p>
+   </td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>La spécification HTML définit quand et comment <strong><dfn>créer un algorithme déterminant la feuille de style CSS</dfn></strong><dfn> et qui gère les éléments <code>&lt;link&gt;</code> et <code>&lt;style&gt;</code>. Elle définit également le comportement de <code>&lt;meta </code></dfn><code>http-equiv="default-style"&gt;</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML4.01", "present/styles.html#h-14.3", "Alternative style sheets")}}</td>
+   <td>{{Spec2("HTML4.01")}}</td>
+   <td>La spécification HTML définit le concept de feuilles de style préférées et alternatives.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/css/filter-function/blur()/index.html b/files/fr/web/css/filter-function/blur()/index.html
new file mode 100644
index 0000000000..ae64a917d5
--- /dev/null
+++ b/files/fr/web/css/filter-function/blur()/index.html
@@ -0,0 +1,40 @@
+---
+title: blur()
+slug: Web/CSS/filter-function/blur()
+tags:
+  - CSS
+  - Filtre
+  - Fonction
+  - Reference
+translation_of: Web/CSS/filter-function/blur()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction CSS <strong><code>blur()</code></strong> permet d'appliquer <a href="https://en.wikipedia.org/wiki/Gaussian_blur">une flou gaussien</a> sur l'image d'entrée. Le résultat de cette fonction est une valeur {{cssxref("&lt;filter-function&gt;")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-blur.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">blur(<em>rayon</em>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>rayon</code></dt>
+ <dd>Le rayon d'application du flou, défini par une longueur CSS ({{cssxref("&lt;length&gt;")}}). Cela définit l'écart-type de la fonction gaussienne appliquée (c'est-à-dire le nombre de pixels qui se mélangeront). Ainsi, plus la valeur est grande, plus le flou sera prononcé. Si on utilise la longueur nulle <code>0</code>, l'image ne sera pas modifiée. La valeur utilisée par défaut lors d'une interpolation est <code>0</code>.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css notranslate">blur(0);        /* Aucun effet */
+blur(8px);      /* Un flou avec un rayon de 8px */
+blur(1.17rem);  /* Un flou avec un rayon de 1.17rem */</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("&lt;filter-function&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/filter-function/brightness()/index.html b/files/fr/web/css/filter-function/brightness()/index.html
new file mode 100644
index 0000000000..d06071ac24
--- /dev/null
+++ b/files/fr/web/css/filter-function/brightness()/index.html
@@ -0,0 +1,41 @@
+---
+title: brightness()
+slug: Web/CSS/filter-function/brightness()
+tags:
+  - CSS
+  - Filtre
+  - Fonction
+  - Reference
+translation_of: Web/CSS/filter-function/brightness()
+---
+<div>{{cssref}}</div>
+
+<p>La fonction CSS <strong><code>brightness()</code></strong> applique un multiplicateur linéaire sur une image afin de la rendre plus claire ou plus sombre. Le résultat obtenu est une valeur de type {{cssxref("&lt;filter-function&gt;")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-brightness.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">brightness(<em>multiplicateur</em>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>multiplicateur</code></dt>
+ <dd>L'amplification de la clarté de l'image, indiquée sous la forme d'un nombre ({{cssxref("&lt;number&gt;")}}) ou d'un pourcentage ({{cssxref("&lt;percentage&gt;")}}). Une valeur inférieure à <code>100%</code> assombrira l'image alors qu'une valeur supérieure à <code>100%</code> la rendra plus claire. Une valeur de <code>0%</code> permettra d'obtenir une image complètement noire et une valeur de <code>100%</code> laissera l'image inchangée. La valeur par défaut utilisée lors de l'interpolation est <code>1</code>.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css notranslate">brightness(0%)   /* Complètement noir */
+brightness(0.4)  /* 40% de la clarté */
+brightness(1)    /* Aucun effet */
+brightness(200%) /* Double la clarté */</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("&lt;filter-function&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/filter-function/contrast()/index.html b/files/fr/web/css/filter-function/contrast()/index.html
new file mode 100644
index 0000000000..714787a110
--- /dev/null
+++ b/files/fr/web/css/filter-function/contrast()/index.html
@@ -0,0 +1,41 @@
+---
+title: contrast()
+slug: Web/CSS/filter-function/contrast()
+tags:
+  - CSS
+  - Filtre
+  - Fonction
+  - Reference
+translation_of: Web/CSS/filter-function/contrast()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction CSS <code><strong>contrast()</strong></code> permet d'ajuster le contraste d'une image. Le résultat de cette fonction est une valeur de type {{cssxref("&lt;filter-function&gt;")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-contrast.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">contrast(<em>multiplicateur</em>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>multiplicateur</code></dt>
+ <dd>La modification de contraste à appliquer à l'image, exprimée sous la forme d'un nombre ({{cssxref("&lt;number&gt;")}}) ou d'un pourcentage ({{cssxref("&lt;percentage&gt;")}}). Une valeur inférieure à <code>100%</code> réduira le contraste et une valeur supérieure à <code>100%</code> accentuera le contraste. Une valeur de <code>0%</code> permettra d'obtenir une image complètement grise et une valeur de <code>100%</code> laissera l'image inchangée. La valeur par défaut utilisée pour les interpolations est <code>1</code>.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css notranslate">contrast(0);     /* Completely gray */
+contrast(65%);   /* 65% contrast */
+contrast(1);     /* No effect */
+contrast(200%);  /* Double contrast */</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("&lt;filter-function&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/filter-function/drop-shadow()/index.html b/files/fr/web/css/filter-function/drop-shadow()/index.html
new file mode 100644
index 0000000000..51b2288aac
--- /dev/null
+++ b/files/fr/web/css/filter-function/drop-shadow()/index.html
@@ -0,0 +1,62 @@
+---
+title: drop-shadow()
+slug: Web/CSS/filter-function/drop-shadow()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Type
+translation_of: Web/CSS/filter-function/drop-shadow()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction CSS <strong><code>drop-shadow()</code></strong> permet d'appliquer une ombre portée sur une image. Le résultat obtenu par cette fonction est une valeur {{cssxref("&lt;filter-function&gt;")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-drop-shadow.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>En pratique, une ombre portée correspond à une version floutée et décalée du masque alpha de l'image, dessiné dans une couleur donnée et fusionné sous l'image.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Cette fonction s'apparente à la propriété {{cssxref("box-shadow")}}. La propriété <code>box-shadow</code> permet de créer une ombre rectangulaire sous <strong>la boîte entière</strong> d'un élément. En revanche, la fonction <code>drop-shadow()</code> permet de créer un ombre qui épouse la forme (le canal alpha) de <strong>l'image même</strong>.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">drop-shadow(<em>décalage-x</em>, <em>décalage-y</em>, <em>rayon-flou</em>, <em>rayon-étalement</em>, <em>couleur</em>)</pre>
+
+<p>La fonction <code>drop-shadow()</code> accepte un paramètre de type <code>&lt;shadow&gt;</code> (défini avec la propriété {{cssxref("box-shadow")}}), mais où le mot-clé <code>inset</code> n'est pas autorisé.</p>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>décalage-x</code> <code>décalage-y</code></dt>
+ <dd>Deux longueurs ({{cssxref("&lt;length&gt;")}}) qui déterminent le décalage de l'ombre sous l'image. <code>décalage-x</code> indique la distance horizontale (les valeurs négatives décalent l'ombre vers la gauche et les valeurs positives la décalent vers la droite). <code>décalage-y</code> indique la distance verticale (les valeurs négatives décalent l'ombre vers le haut et les valeurs positives vers le bas). Si les deux valeurs sont égales à <code>0</code>, l'ombre est directement placée sous l'image.</dd>
+ <dt><code>rayon-flou</code> {{optional_inline}}</dt>
+ <dd>Une longueur ({{cssxref("&lt;length&gt;")}}) qui représente le rayon du flou. Plus la valeur est élevée, plus l'ombre sera grande et floue. La valeur par défaut est <code>0</code> ce qui correspond à un contour net, sans flou. Il n'est pas possible d'utiliser des valeurs négatives</dd>
+ <dt><code>rayon-étalement</code>{{optional_inline}}</dt>
+ <dd>Le rayon d'étalement de l'ombre, défini sous la forme d'une longueur ({{cssxref("&lt;length&gt;")}}). Les valeurs positives permettent d'avoir une ombre plus grande et plus étendue et les valeurs négatives permettent de réduire la zone d'ombre. La valeur par défaut est <code>0</code> : l'ombre a alors la même taille que l'image.</dd>
+ <dd>
+ <div class="warning"><strong>Attention !</strong> Chrome et Safari (basés sur WebKit) ne prennent pas en charge ce paramètre. S'il est utilisé, l'effet ne sera pas applique du tout.</div>
+ </dd>
+ <dt><code>couleur</code>{{optional_inline}}</dt>
+ <dd>La couleur de l'ombre, indiquée sous la forme d'une valeur {{cssxref("&lt;color&gt;")}}. La valeur par défaut dépend du navigateur. Pour Firefox et Internet Explorer, c'est la valeur de la propriété {{cssxref("color")}} qui sera utilisée alors que les navigateurs basés sur WebKit utiliseront une ombre transparente par défaut.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css notranslate">/* Une ombre noire avec un flou de 10px de rayon. */
+drop-shadow(16px 16px 10px black)
+
+/* Une ombre rouge avec un flou de 1rem de rayon et de .3rem d'étalement */
+/* Attention, à l'heure actuelle, ce type d'ombre n'est pas pris en charge */
+/* par l'ensemble des navigateurs */
+drop-shadow(.5rem .5rem 1rem .3rem #e23)</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("&lt;filter-function&gt;")}}</li>
+ <li>La propriété CSS {{cssxref("box-shadow")}}</li>
+</ul>
diff --git a/files/fr/web/css/filter-function/grayscale()/index.html b/files/fr/web/css/filter-function/grayscale()/index.html
new file mode 100644
index 0000000000..f469d4e70d
--- /dev/null
+++ b/files/fr/web/css/filter-function/grayscale()/index.html
@@ -0,0 +1,40 @@
+---
+title: grayscale()
+slug: Web/CSS/filter-function/grayscale()
+tags:
+  - CSS
+  - Filtre
+  - Fonction
+  - Reference
+translation_of: Web/CSS/filter-function/grayscale()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction CSS <code><strong>grayscale()</strong></code> convertit une image en niveaux de gris. Le résultat de cette fonction est une valeur {{cssxref("&lt;filter-function&gt;")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-grayscale.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">grayscale(<em>multiplicateur</em>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>multiplicateur</code></dt>
+ <dd>L'intensité de la conversion, indiquée sous la forme d'un nombre ({{cssxref("&lt;number&gt;")}}) ou d'un pourcentage ({{cssxref("&lt;percentage&gt;")}}). Avec une valeur égale à <code>100%</code>, l'image obtenue sera complètement en niveaux de gris. Avec une valeur égale à <code>0%</code>, l'image source restera inchangée. Les valeurs comprises entre <code>0%</code> et <code>100%</code> auront un effet intermédiaire (progression linéaire). Dans le cas d'une interpolation, la valeur par défaut utilisée est <code>0</code>.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css notranslate">grayscale(0)     /* Aucun effet */
+grayscale(.7)    /* Converti à 70% en niveaux de gris */
+grayscale(100%)  /* Uniquement en niveaux de gris */</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("&lt;filter-function&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/filter-function/hue-rotate()/index.html b/files/fr/web/css/filter-function/hue-rotate()/index.html
new file mode 100644
index 0000000000..051c35b96b
--- /dev/null
+++ b/files/fr/web/css/filter-function/hue-rotate()/index.html
@@ -0,0 +1,43 @@
+---
+title: hue-rotate()
+slug: Web/CSS/filter-function/hue-rotate()
+tags:
+  - CSS
+  - Filtre
+  - Fonction
+  - Reference
+translation_of: Web/CSS/filter-function/hue-rotate()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction CSS <strong><code>hue-rotate()</code></strong> permet d'appliquer une rotation de teinte sur une image. Le résultat de cette fonction est une valeur {{cssxref("&lt;filter-function&gt;")}}.</p>
+
+<div>{ {EmbedInteractiveExample("pages/css/function-hue-rotate.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">hue-rotate(<em>angle</em>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>angle</code></dt>
+ <dd>L'angle de rotation sur le cercle des couleurs, exprimé avec une valeur de type {{cssxref("&lt;angle&gt;")}}. Une valeur de <code>0deg</code> laissera l'image inchangée. La valeur utilisée par défaut pour une interpolation sera <code>0</code>. Bien qu'il n'y ait pas de valeur maximale, la valeur de l'angle est toujours ramenée entre <code>360deg</code> et <code>0deg</code>.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css notranslate">hue-rotate(-90deg);  /* Correspond à une rotation de 270deg */
+hue-rotate(0deg);    /* Sans effet */
+hue-rotate(90deg);   /* Rotation de 90deg */
+hue-rotate(.5turn);  /* Rotation de 180deg */
+hue-rotate(405deg);  /* Correspond à une rotation de 45deg */
+</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("&lt;filter-function&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/filter-function/index.html b/files/fr/web/css/filter-function/index.html
new file mode 100644
index 0000000000..23761cc504
--- /dev/null
+++ b/files/fr/web/css/filter-function/index.html
@@ -0,0 +1,69 @@
+---
+title: <filter-function>
+slug: Web/CSS/filter-function
+tags:
+  - CSS
+  - Reference
+  - Type
+translation_of: Web/CSS/filter-function
+---
+<div>{{CSSRef}}</div>
+
+<p>Le type de donnée <code><strong>&lt;filter-function&gt;</strong></code> représente un effet graphique qui peut modifier l'apparence d'une image. Il est notamment utilisé avec les propriétés {{cssxref("filter")}} et {{cssxref("backdrop-filter")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Une valeur de type <code>&lt;filter-function&gt;</code> se construit avec l'une des fonctions listées ci-après. Chaque fonction utilise un argument et si celui-ci est invalide, aucun filtre n'est appliqué.</p>
+
+<dl>
+ <dt>{{cssxref("filter-function/blur", "blur()")}}</dt>
+ <dd>Ajoute un flou sur l'image.</dd>
+ <dt>{{cssxref("filter-function/brightness", "brightness()")}}</dt>
+ <dd>Rend l'image plus claire ou plus sombre.</dd>
+ <dt>{{cssxref("filter-function/contrast", "contrast()")}}</dt>
+ <dd>Augmente ou diminue le contraste de l'image.</dd>
+ <dt>{{cssxref("filter-function/drop-shadow", "drop-shadow()")}}</dt>
+ <dd>Applique une ombre portée derrière l'image.</dd>
+ <dt>{{cssxref("filter-function/grayscale", "grayscale()")}}</dt>
+ <dd>Convertit l'image en niveaux de gris.</dd>
+ <dt>{{cssxref("filter-function/hue-rotate", "hue-rotate()")}}​​​​​​​​​​​​​​</dt>
+ <dd>Modifie la teinte globale de l'image.</dd>
+ <dt>{{cssxref("filter-function/invert", "invert()")}}</dt>
+ <dd>Inverse les couleurs de l'image.</dd>
+ <dt>{{cssxref("filter-function/opacity", "opacity()")}}</dt>
+ <dd>Rend l'image transparente.</dd>
+ <dt>{{cssxref("filter-function/saturate", "saturate()")}}</dt>
+ <dd>Sursature ou désature l'image.</dd>
+ <dt>{{cssxref("filter-function/sepia", "sepia()")}}</dt>
+ <dd>Convertit l'image en sépia.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Filters 1.0', '#typedef-filter-function', '&lt;filter-function&gt;')}}</td>
+   <td>{{Spec2('Filters 1.0')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés qui utilisent ce type de donnée :
+  <ul>
+   <li>{{cssxref("filter")}}</li>
+   <li>{{cssxref("backdrop-filter")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/filter-function/invert()/index.html b/files/fr/web/css/filter-function/invert()/index.html
new file mode 100644
index 0000000000..25a034fdd1
--- /dev/null
+++ b/files/fr/web/css/filter-function/invert()/index.html
@@ -0,0 +1,40 @@
+---
+title: invert()
+slug: Web/CSS/filter-function/invert()
+tags:
+  - CSS
+  - Filtre
+  - Fonction
+  - Reference
+translation_of: Web/CSS/filter-function/invert()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction CSS <strong><code>invert()</code></strong> permet d'inverser les couleurs de l'image. La valeur obtenue par cette fonction est de type {{cssxref("&lt;filter-function&gt;")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-invert.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">invert(<em>multiplicateur</em>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>multiplicateur</code></dt>
+ <dd>L'intensité de la conversion, indiquée sous la forme d'un nombre ({{cssxref("&lt;number&gt;")}}) ou d'un pourcentage ({{cssxref("&lt;percentage&gt;")}}). Avec <code>100%</code>, les couleurs seront entièrement inversées (ce sera un négatif de l'image originale). Une valeur de <code>0%</code> ne modifiera pas l'image. Les valeurs intermédiaires auront un effet proportionnel. Lors d'une interpolation, la valeur utilisée par défaut est <code>0</code>.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css notranslate">invert(0);     /* Aucun effet */
+invert(.6);    /* Inversion à 60% */
+invert(100%);  /* Négatif de l'image originale */</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("&lt;filter-function&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/filter-function/opacity()/index.html b/files/fr/web/css/filter-function/opacity()/index.html
new file mode 100644
index 0000000000..6518f7b998
--- /dev/null
+++ b/files/fr/web/css/filter-function/opacity()/index.html
@@ -0,0 +1,45 @@
+---
+title: opacity()
+slug: Web/CSS/filter-function/opacity()
+tags:
+  - CSS
+  - Filtre
+  - Fonction
+  - Reference
+translation_of: Web/CSS/filter-function/opacity()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction CSS <strong><code>opacity()</code></strong> permet de modifier la transparence de l'image. Le résultat obtenu par cette fonction est une valeur {{cssxref("&lt;filter-function&gt;")}}.</p>
+
+<div>{ {EmbedInteractiveExample("pages/css/function-opacity.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note">
+<p><strong>Note :</strong> Cette fonction est proche de la propriété {{cssxref("opacity")}} mais, selon le navigateur, les filtres CSS peuvent bénéficier de l'accélération matérielle pour de meilleures performances.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">opacity(<em>multiplicateur</em>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>multiplicateur</code></dt>
+ <dd>L'intensité de l'opacité, indiquée comme un nombre ({{cssxref("&lt;number&gt;")}}) ou comme un pourcentage ({{cssxref("&lt;percentage&gt;")}}). Une  valeur de <code>0%</code> entraînera une image complètement transparente. Une valeur de <code>100%</code> laissera l'image inchangée. Les valeurs intermédiaires auront un effet proportionnel. Lors d'une interpolation, la valeur par défaut utilisée sera <code>1</code>.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">opacity(0%);   /* Complètement transparente */
+opacity(50%);  /* 50% transparent */
+opacity(1);    /* Aucun effet */</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("&lt;filter-function&gt;")}}</li>
+ <li>La propriété CSS {{cssxref("opacity")}}</li>
+</ul>
diff --git a/files/fr/web/css/filter-function/saturate()/index.html b/files/fr/web/css/filter-function/saturate()/index.html
new file mode 100644
index 0000000000..4d5e6ac851
--- /dev/null
+++ b/files/fr/web/css/filter-function/saturate()/index.html
@@ -0,0 +1,41 @@
+---
+title: saturate()
+slug: Web/CSS/filter-function/saturate()
+tags:
+  - CSS
+  - Filtre
+  - Fonction
+  - Reference
+translation_of: Web/CSS/filter-function/saturate()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction CSS <strong><code>saturate()</code></strong> permet d'accentuer ou de réduire la saturation d'une image. La valeur obtenue par cette fonction est une valeur de type {{cssxref("&lt;filter-function&gt;")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-saturate.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">saturate(<em>multiplicateur</em>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>multiplicateur</code></dt>
+ <dd>L'intensité de la modification sous la forme d'un nombre ({{cssxref("&lt;number&gt;")}}) ou d'un pourcentage ({{cssxref("&lt;percentage&gt;")}}). Une valeur inférieure à <code>100%</code> réduira la saturation et une valeur supérieure accentuera la saturation. Une valeur de <code>0%</code> désaturera complètement l'image alors qu'une valeur de <code>100%</code> laissera l'image inchangée. Lors d'une interpolation, la valeur par défaut est <code>1</code>.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css notranslate">saturate(0);     /* Complètement sous-saturée */
+saturate(.4);    /* Sous-saturée à 40% */
+saturate(100%);  /* Aucun effet */
+saturate(200%);  /* Saturation doublée */</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("&lt;filter-function&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/filter-function/sepia()/index.html b/files/fr/web/css/filter-function/sepia()/index.html
new file mode 100644
index 0000000000..b6e0b21e8d
--- /dev/null
+++ b/files/fr/web/css/filter-function/sepia()/index.html
@@ -0,0 +1,40 @@
+---
+title: sepia()
+slug: Web/CSS/filter-function/sepia()
+tags:
+  - CSS
+  - Filtre
+  - Fonction
+  - Reference
+translation_of: Web/CSS/filter-function/sepia()
+---
+<div>{{cssref}}</div>
+
+<p>La fonction CSS <strong><code>sepia()</code></strong> convertit une image en sépia, lui donnant un aspect plus jaune/marron, voire vielli. Le résultat obtenu est une valeur de type {{cssxref("&lt;filter-function&gt;")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-sepia.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">sepia(<em>multiplicateur</em>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>multiplicateur</code></dt>
+ <dd>L'intensité de la conversion indiquée sous la forme d'un nombre ({{cssxref("&lt;number&gt;")}}) ou d'un pourcentage ({{cssxref("&lt;percentage&gt;")}}). Une valeur de <code>100%</code> permttra d'obtenir une image complètement sépia tandis qu'une valeur de <code>0%</code> laissera l'image inchangée. Les valeurs entre <code>0%</code> et <code>100%</code> représenteront des conversions proportionnelles. Lors d'une interpolation, la valeur par défaut sera <code>0</code>.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css notranslate">sepia(0);     /* Aucun effet */
+sepia(.65);   /* 65% de sépia */
+sepia(100%);  /* Complètement sépia */</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("&lt;filter-function&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/filter-function/url/index.html b/files/fr/web/css/filter-function/url/index.html
new file mode 100644
index 0000000000..958e94fff7
--- /dev/null
+++ b/files/fr/web/css/filter-function/url/index.html
@@ -0,0 +1,33 @@
+---
+title: url()
+slug: Web/CSS/filter-function/url
+tags:
+  - CSS
+  - Junk
+  - Reference
+translation_of: Web/CSS/url()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>url()</code></strong> permet d'utiliser un <a href="/fr/docs/Web/SVG/Element/filter">filtre SVG</a> afin de modifier l'apparence d'une image.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">url(<em>emplacement</em>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>emplacement</code></dt>
+ <dd>L'URL ({{cssxref("&lt;url&gt;")}}) d'un fichier {{glossary("XML")}} qui définit un filtre SVG. On peut ajouter une ancre sur cette URL afin d'indiquer un filtre spécifique.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: css">url(ressources.svg#c1)</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("&lt;filter-function&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/filter/index.html b/files/fr/web/css/filter/index.html
new file mode 100644
index 0000000000..2e10b2f60c
--- /dev/null
+++ b/files/fr/web/css/filter/index.html
@@ -0,0 +1,1165 @@
+---
+title: filter
+slug: Web/CSS/filter
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/filter
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>filter</code></strong> permet d'appliquer des filtres et d'obtenir des effets graphiques de flou, de saturation, etc. Les filtres sont généralement utilisés pour ajuster le rendu d'une image, d'un arrière-plan ou des bordures.</p>
+
+<p>Plusieurs fonctions sont inclues dans le standard CSS et permettent d'obtenir des effets prédéfinis. Il est également possible d'utiliser un filtre SVG via une URL référençant <a href="/fr/docs/Web/SVG/Element/filter">un élément SVG <code>filter</code></a>.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/filter.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css">/* URL vers un filtre SVG */
+filter: url("filters.svg#filter-id");
+
+/* Fonctions de filtre */
+filter: blur(5px);
+filter: brightness(0.4);
+filter: contrast(200%);
+filter: drop-shadow(16px 16px 20px blue);
+filter: grayscale(50%);
+filter: hue-rotate(90deg);
+filter: invert(75%);
+filter: opacity(25%);
+filter: saturate(30%);
+filter: sepia(60%);
+
+/* On applique plusieurs filtres */
+filter: contrast(175%) brightness(3%);
+
+/* On utilise aucun filtre */
+filter: none;
+
+/* Valeurs globales */
+filter: inherit;
+filter: initial;
+filter: unset;
+</pre>
+
+<p>Avec une fonction, on utilisera la forme suivante :</p>
+
+<pre class="syntaxbox">filter: &lt;filter-function&gt; [&lt;filter-function&gt;]* | none
+</pre>
+
+<p>En utilisant un élément SVG {{SVGElement("filter")}}, on utilisera la forme suivante :</p>
+
+<pre class="syntaxbox">filter: url(file.svg#filter-element-id)
+</pre>
+
+<h3 id="Interpolation">Interpolation</h3>
+
+<p>Si les deux filtres possèdent chacun une liste de même longueur (sans {{cssxref("&lt;url&gt;")}}, chacune des fonctions est interpolée selon ses propres règles. Si les deux listes ont des longueurs différentes, les derniers filtres de la liste la plus longue sont utilisés avec leurs valeurs par défaut afin de compléter la liste la plus courte, ensuite chaque fonction est interpolée selon ses propres règles. Si un filtre vaut <code>none</code>, il est remplacé avec la fonction de filtre (avec ses valeurs par défaut) de l'autre liste puis l'ensemble des fonctions est interpolé selon les règles de chacune. Dans les autres cas, on utilise un interpolation discrète.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Voici un rapide exemple de filtre fonctionnel. Chaque fonction est illustrée en détail par la suite.</p>
+
+<pre class="brush: css">.mydiv { filter: grayscale(50%) }
+
+/* on applique un niveau de gris à 50% */
+/* et un flou dont le rayon vaut 10px  */
+img {
+  filter: grayscale(0.5) blur(10px);
+}</pre>
+
+<p>Voici un rapide exemple de filtre utilisant une ressource SVG :</p>
+
+<pre class="brush: css">.target { filter: url(#c1); }
+
+.mydiv { filter: url(commonfilters.xml#large-blur) }
+</pre>
+
+<h2 id="Fonctions_prédéfinies">Fonctions prédéfinies</h2>
+
+<p>Pour utiliser la propriété CSS <code>filter</code>, on utilisera <code>none</code> ou une ou plusieurs des fonctions listées ci-après avec, pour chacune, un argument. Si la valeur est invalide, la fonction renverra <code>none</code>. Sauf mention contraire, les fonctions qui acceptent des valeurs exprimées en pourcentages (34%) acceptent également des valeurs décimales (0.34).</p>
+
+<h3 id="url"><code>url()</code></h3>
+
+<p>La fonction <code>url()</code> prend comme argument l'emplacement d'un fichier XML qui définit le filtre SVG à appliquer. L'URL peut faire référence à une ancre d'un élément spécifique.</p>
+
+<pre class="brush: css">filter: url(resources.svg#c1)
+</pre>
+
+<h3 id="blur"><code>blur()</code></h3>
+
+<p>Cette fonction applique un flou gaussien à l'image d'entrée. La valeur du paramètre correspond au rayon de flou (l'écart-type de la gaussienne) utilisé. Plus la valeur est importante, plus le flou sera prononcé. La valeur par défaut du paramètre est 0. Selon la spécification, le paramètre est une valeur de type {{cssxref("&lt;length&gt;")}} mais la fonction n'accepte pas de valeurs exprimées en pourcentages.</p>
+
+<pre class="brush: css">filter: blur(5px)
+</pre>
+
+<div id="blur_example" style="display: none;">
+<pre class="brush: html">  &lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form.jpg" id="img1" src="/files/3710/Test_Form_2.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form.jpg" id="img2" src="/files/3710/Test_Form_2.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg id="img3" viewbox="0 0 233 176"&gt;
+  &lt;filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%" &gt;
+    &lt;feGaussianBlur in="SourceGraphic" stdDeviation="5" /&gt;
+  &lt;/filter&gt;
+  &lt;image xlink:href="/files/3710/Test_Form_2.jpeg" filter="url(#svgBlur)" x="5%" y="5%" width="212px" height="161px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_s.jpg" id="img4" src="/files/3711/Test_Form_2_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida, Arial, Helvetica, sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -webkit-filter:blur(5px);
+  -ms-filter:blur(5px);
+  filter:blur(5px); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0;
+  margin: 0 0 1.286em;
+  height: 100%;
+  width: 85%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<pre class="brush: html line-numbers  language-html">&lt;svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%"&gt;
+    &lt;feGaussianBlur in="SourceGraphic" stdDeviation="5"/&gt;
+  &lt;/filter&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('blur_example','100%','236px','')}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Voir {{cssxref("filter-function/blur", "blur()")}} pour plus d'informations.</p>
+</div>
+
+<h3 id="brightness"><code>brightness()</code></h3>
+
+<p>La fonction permet de modifier la luminosité d'une image grâce à un facteur linéaire. Un argument égal <code>0%</code> créera une image totalement noire et une valeur de <code>100%</code> conservera l'image d'entrée telle quelle. Il est possible d'utiliser des valeurs supérieures à <code>100%</code> afin d'obtenir des images saturées en luminosité. La valeur par défaut pour l'argument est <code>1</code>.</p>
+
+<pre class="brush: css">filter: brightness(0.5)</pre>
+
+<pre class="brush: html line-numbers  language-html">&lt;svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"&gt;
+ &lt;filter id="brightness"&gt;
+    &lt;feComponentTransfer&gt;
+        &lt;feFuncR type="linear" slope="[amount]"/&gt;
+        &lt;feFuncG type="linear" slope="[amount]"/&gt;
+        &lt;feFuncB type="linear" slope="[amount]"/&gt;
+    &lt;/feComponentTransfer&gt;
+  &lt;/filter&gt;
+&lt;/svg&gt;</pre>
+
+<div id="brightness_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form.jpg" id="img1" src="/files/3708/Test_Form.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form.jpg" id="img2" src="/files/3708/Test_Form.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 286 217"&gt;
+ &lt;filter id="brightness"&gt;
+    &lt;feComponentTransfer&gt;
+        &lt;feFuncR type="linear" slope="2"/&gt;
+        &lt;feFuncG type="linear" slope="2"/&gt;
+        &lt;feFuncB type="linear" slope="2"/&gt;
+    &lt;/feComponentTransfer&gt;
+  &lt;/filter&gt;
+  &lt;image xlink:href="/files/3708/Test_Form.jpg" filter="url(#brightness)" width="286px" height="217px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_s.jpg" id="img4" src="/files/3709/Test_Form_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter:brightness(2);
+  -webkit-filter:brightness(2);
+  -o-filter:brightness(2);
+  -ms-filter:brightness(2);
+  filter:brightness(2); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  height:100%;
+  width: 85%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('brightness_example','100%','231px','')}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Voir {{cssxref("filter-function/brightness", "brightness()")}} pour plus d'informations.</p>
+</div>
+
+<h3 id="contrast"><code>contrast()</code></h3>
+
+<p>Cette fonction permet d'ajuster le contraste de l'image d'entrée. Une valeur de <code>0%</code> créera une image entièrement grise. Une valeur de <code>100%</code> conservera l'image d'entrée telle quelle. Il est possible d'utiliser des valeurs supérieures à 100% pour augmenter le contraste. La valeur par défaut de l'argument est <code>1</code>.</p>
+
+<pre class="brush: css">filter: contrast(200%)
+</pre>
+
+<pre class="brush: html line-numbers  language-html">&lt;svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;filter id="contrast"&gt;
+    &lt;feComponentTransfer&gt;
+      &lt;feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/&gt;
+      &lt;feFuncG type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/&gt;
+      &lt;feFuncB type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/&gt;
+    &lt;/feComponentTransfer&gt;
+  &lt;/filter&gt;
+&lt;/svg&gt;</pre>
+
+<div id="contrast_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_3.jpeg" id="img1" src="/files/3712/Test_Form_3.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_3.jpg" id="img2" src="/files/3712/Test_Form_3.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 240 151"&gt;
+ &lt;filter id="contrast"&gt;
+    &lt;feComponentTransfer&gt;
+      &lt;feFuncR type="linear" slope="2" intercept="-0.5"/&gt;
+      &lt;feFuncG type="linear" slope="2" intercept="-0.5"/&gt;
+      &lt;feFuncB type="linear" slope="2" intercept="-0.5"/&gt;
+    &lt;/feComponentTransfer&gt;
+  &lt;/filter&gt;
+  &lt;image xlink:href="/files/3712/Test_Form_3.jpeg" filter="url(#contrast)" width="240px" height="151px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_s.jpg" id="img4" src="/files/3713/Test_Form_3_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter:contrast(200%);
+  -webkit-filter:contrast(200%);
+  -o-filter:contrast(200%);
+  -ms-filter:contrast(200%);
+  filter:contrast(200%); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('contrast_example','100%','203px','')}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Voir {{cssxref("filter-function/contrast", "contrast()")}} pour plus d'informations.</p>
+</div>
+
+<h3 id="drop-shadow"><code>drop-shadow()</code></h3>
+
+<p>Cette fonction permet d'appliquer une ombre portée à l'image d'entrée. Une ombre portée est une version décalée, dans une couleur donnée, du canal alpha de l'image qui est affiché sous celle-ci. La fonction peut accepter une valeur de type {{cssxref("&lt;shadow&gt;")}} (définie dans la spécification CSS3 sur les arrière-plans), une exception : le mot-clé <code>inset</code> n'est pas autorisée. Cette fonction est semblable à la propriété {{cssxref("box-shadow")}} plus répandue ; seule différence : les navigateurs utilisent parfois l'accélération matérielle pour les filtres ce qui peut permettre d'obtenir de meilleurs performances. Les paramètres de l'argument <code>&lt;shadow&gt;</code> sont les suivants :</p>
+
+<dl>
+ <dt><code>&lt;offset-x&gt;</code> <code>&lt;offset-y&gt;</code> <small>(nécessaire)</small></dt>
+ <dd>Deux valeurs {{cssxref("&lt;length&gt;")}} qui indiquent le décalage de l'ombre portée. <code>&lt;offset-x&gt;</code> définit la distance horizontale : des valeurs négatives décaleront l'ombre à gauche de l'élément. <code>&lt;offset-y&gt;</code> définit la distance verticale : des valeurs négatives décaleront l'ombre au-dessus de l'élément. Se référer à la page {{cssxref("&lt;length&gt;")}} pour les différentes unités utilisables.<br>
+ Si les deux valeurs sont nulles, l'ombre sera exactement placée sous l'élément (et pourra servir à générer un effet de flou si <code>&lt;blur-radius&gt;</code> et/ou <code>&lt;spread-radius&gt;</code> sont utilisés).</dd>
+ <dt><code>&lt;blur-radius&gt;</code> <small>(optionnel)</small></dt>
+ <dd>Une troisième valeur de type {{cssxref("&lt;length&gt;")}}. Plus la valeur sera grande, plus le flou sera important (l'ombre sera plus grande et moins prononcée). Les valeurs négatives ne sont pas autorisée. La valeur par défaut est <code>0</code>, le bord de l'ombre sera droit.</dd>
+ <dt><code>&lt;spread-radius&gt;</code> <small>(optionnel)</small></dt>
+ <dd>Un quatrième valeur de type {{cssxref("&lt;length&gt;")}}. Des valeurs positives agrandiront l'ombre et les valeurs négatives réduiront l'ombre. La valeur par défaut est <code>0</code> (l'ombre aura la même taille que l'élément). </dd>
+ <dd>Note: Webkit, and maybe other browsers, do not support this 4th length; it will not render if added.</dd>
+ <dt><code>&lt;color&gt;</code> <small>(optionnel)</small></dt>
+ <dd>Voir {{cssxref("&lt;color&gt;")}} pour les mots-clés et notations possibles. Si ce paramètre n'est pas défini, la couleur choisie dépendra du navigateur. Pour Gecko (Firefox), Presto (Opera) et Trident (Internet Explorer), la valeur de la propriété {{cssxref("color")}} est utilisée. Pour WebKit, si la couleur est absente, l'ombre sera transparente (donc inutile).</dd>
+</dl>
+
+<pre class="brush: css">filter: drop-shadow(16px 16px 10px black)</pre>
+
+<pre class="brush: html line-numbers  language-html">&lt;svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg"&gt;
+ &lt;filter id="drop-shadow"&gt;
+    &lt;feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/&gt;
+    &lt;feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/&gt;
+    &lt;feFlood flood-color="[color]"/&gt;
+    &lt;feComposite in2="offsetblur" operator="in"/&gt;
+    &lt;feMerge&gt;
+      &lt;feMergeNode/&gt;
+      &lt;feMergeNode in="SourceGraphic"/&gt;
+    &lt;/feMerge&gt;
+  &lt;/filter&gt;
+&lt;/svg&gt;</pre>
+
+<div id="shadow_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_4.jpeg" id="img1" src="/files/3714/Test_Form_4.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_4.jpg" id="img2" src="/files/3714/Test_Form_4.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 239 187"&gt;
+ &lt;filter id="drop-shadow"&gt;
+    &lt;feGaussianBlur in="SourceAlpha" stdDeviation="5"/&gt;
+    &lt;feOffset dx="16" dy="16"/&gt;
+    &lt;feMerge&gt;
+      &lt;feMergeNode/&gt;
+      &lt;feMergeNode in="SourceGraphic"/&gt;
+    &lt;/feMerge&gt;
+ &lt;/filter&gt;
+ &lt;image xlink:href="/files/3714/Test_Form_4.jpeg" filter="url(#drop-shadow)" width="213px" height="161px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_4_s.jpg" id="img4" src="/files/3715/Test_Form_4_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_4 distorded border - Original image" id="img11" src="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_4 distorded border - Live example" id="img12" src="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;
+        &lt;div class="svg-container"&gt;
+          &lt;svg xmlns="http://www.w3.org/2000/svg" id="img13" viewbox="0 0 239 187"&gt;
+            &lt;filter id="drop-shadow2"&gt;
+              &lt;feGaussianBlur in="SourceAlpha" stdDeviation="4"/&gt;
+              &lt;feOffset dx="8" dy="10"/&gt;
+              &lt;feMerge&gt;
+                &lt;feMergeNode/&gt;
+                &lt;feMergeNode in="SourceGraphic"/&gt;
+              &lt;/feMerge&gt;
+            &lt;/filter&gt;
+            &lt;image xlink:href="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png" filter="url(#drop-shadow2)" width="213px" height="161px" /&gt;
+          &lt;/svg&gt;
+        &lt;div&gt;
+      &lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_4 distorded border drop shadow - Static example" id="img14" src="/files/8469/Test_Form_4_irregular-shape_opacity-gradient_drop-shadow.png" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter: drop-shadow(16px 16px 10px black);
+  -webkit-filter: drop-shadow(16px 16px 10px black);
+  -o-filter: drop-shadow(16px 16px 10px black);
+  -ms-filter: drop-shadow(16px 16px 10px black);
+  filter: drop-shadow(16px 16px 10px black);
+}
+#img12 {
+  width:100%;
+  height:auto;
+  -moz-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8));
+  -webkit-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8));
+  -o-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8));
+  -ms-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8));
+  filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8));
+}
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+#irregular-shape {
+  width: 64%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3, #img13 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('shadow_example','100%','300px','')}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Voir {{cssxref("filter-function/drop-shadow", "drop-shadow()")}} pour plus d'informations.</p>
+</div>
+
+<h3 id="grayscale"><code>grayscale()</code></h3>
+
+<p>L'image d'entrée est convertie en niveau de gris. La valeur de l'argument définit la force de cette conversion. En utilisant une valeur de <code>100%</code> sera complètement en niveaux de gris. <code>0%</code> conservera l'image telle quelle. La valeur par défaut du paramètre est <code>0</code>.</p>
+
+<pre class="brush: css">filter: grayscale(100%)</pre>
+
+<div id="grayscale_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_5.jpeg" id="img1" src="/files/3716/Test_Form_5.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_5.jpg" id="img2" src="/files/3716/Test_Form_5.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 184"&gt;
+ &lt;filter id="grayscale"&gt;
+    &lt;feColorMatrix type="matrix"
+               values="0.2126 0.7152 0.0722 0 0
+                       0.2126 0.7152 0.0722 0 0
+                       0.2126 0.7152 0.0722 0 0
+                       0 0 0 1 0"/&gt;
+  &lt;/filter&gt;
+  &lt;image xlink:href="/files/3716/Test_Form_5.jpeg" filter="url(#grayscale)" width="276px" height="184px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_5_s.jpg" id="img4" src="/files/3717/Test_Form_5_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter:grayscale(100%);
+  -webkit-filter:grayscale(100%);
+  -o-filter:grayscale(100%);
+  -ms-filter:grayscale(100%);
+  filter:grayscale(100%); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('grayscale_example','100%','209px','')}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Voir {{cssxref("filter-function/grayscale", "grayscale()")}} pour plus d'informations.</p>
+</div>
+
+<h3 id="hue-rotate"><code>hue-rotate()</code></h3>
+
+<p>Cette fonction applique une rotation de teinte à l'image d'entrée. La valeur de l'angle passé en argument définit le nombre de degrés parcouru sur le cercle des couleurs. Une valeur de <code>0deg</code> conservera l'image telle quelle. La valeur par défaut du paramètre est <code>0deg</code>. Il n'y a pas de valeur maximale pour l'argument, si une valeur supérieure à <code>360deg</code> est utilisée, ce sera la mesure de l'angle correspondante qui sera utilisée.</p>
+
+<pre class="brush: css">filter: hue-rotate(90deg)</pre>
+
+<div id="huerotate_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_6.jpeg" id="img1" src="/files/3718/Test_Form_6.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_6.jpg" id="img2" src="/files/3718/Test_Form_6.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 266 190"&gt;
+ &lt;filter id="hue-rotate"&gt;
+    &lt;feColorMatrix type="hueRotate"
+               values="90"/&gt;
+  &lt;/filter&gt;
+  &lt;image xlink:href="/files/3718/Test_Form_6.jpeg" filter="url(#hue-rotate)" width="266px" height="190px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_6_s.jpg" id="img4" src="/files/3719/Test_Form_6_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter:hue-rotate(90deg);
+  -webkit-filter:hue-rotate(90deg);
+  -o-filter:hue-rotate(90deg);
+  -ms-filter:hue-rotate(90deg);
+  filter:hue-rotate(90deg); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;filter id="svgHueRotate" &gt;
+    &lt;feColorMatrix type="hueRotate" values="[angle]" /&gt;
+  &lt;filter /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('huerotate_example','100%','221px','')}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Voir {{cssxref("filter-function/hue-rotate", "hue-rotate()")}} pour plus d'informations.</p>
+</div>
+
+<h3 id="invert"><code>invert()</code></h3>
+
+<p>Cette fonction permet d'inverser les couleurs de l'image d'entrée. La valeur de l'argument définit la force de cette inversion. Une valeur de <code>100%</code> inversera complètement les couleurs (tel un négatif) et une valeur <code>0%</code> conservera l'image d'entrée telle quelle. La valeur par défaut de l'argument est <code>0</code>.</p>
+
+<pre class="brush: css">filter: invert(100%)</pre>
+
+<div id="invert_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_7.jpeg" id="img1" src="/files/3720/Test_Form_7.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_7.jpg" id="img2" src="/files/3720/Test_Form_7.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 183 276"&gt;
+ &lt;filter id="invert"&gt;
+    &lt;feComponentTransfer&gt;
+        &lt;feFuncR type="table" tableValues="1 0"/&gt;
+        &lt;feFuncG type="table" tableValues="1 0"/&gt;
+        &lt;feFuncB type="table" tableValues="1 0"/&gt;
+    &lt;/feComponentTransfer&gt;
+ &lt;/filter&gt;
+ &lt;image xlink:href="/files/3720/Test_Form_7.jpeg" filter="url(#invert)" width="183px" height="276px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_7_s.jpg" id="img4" src="/files/3721/Test_Form_7_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter: invert(100%);
+  -webkit-filter: invert(100%);
+  -o-filter: invert(100%);
+  -ms-filter: invert(100%);
+  filter: invert(100%); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('invert_example','100%','407px','')}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Voir {{cssxref("filter-function/invert", "invert()")}} pour plus d'informations.</p>
+</div>
+
+<h3 id="opacity"><code>opacity()</code></h3>
+
+<p>Cette fonction permet de régler l'opacité de l'image d'entrée. La valeur de l'argument indique la force de l'opacité. Ainsi, une valeur de <code>0%</code> rendra l'image complètement transparente et une valeur de <code>100%</code> conservera l'image telle quelle. Les valeurs intermédiaires appliqueront des effets proportionnels. La valeur par défaut de l'argument est <code>1</code>. Cette fonction est proche de la propriété {{cssxref("opacity")}}, toutefois, avec les filtres, certains navigateurs utilisent l'accélération matérielle, ce qui permet d'obtenir de meilleures performances.</p>
+
+<pre class="brush: css">filter: opacity(50%)</pre>
+
+<div id="opacity_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_14.jpeg" id="img1" src="/files/3725/Test_Form_14.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_14.jpg" id="img2" src="/files/3725/Test_Form_14.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 183"&gt;
+ &lt;filter id="opacity"&gt;
+    &lt;feComponentTransfer&gt;
+        &lt;feFuncA type="table" tableValues="0 0.5"&gt;
+    &lt;/feComponentTransfer&gt;
+ &lt;/filter&gt;
+ &lt;image xlink:href="/files/3725/Test_Form_14.jpeg" filter="url(#opacity)" width="276px" height="183px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_14_s.jpg" id="img4" src="/files/3726/Test_Form_14_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter: opacity(50%);
+  -webkit-filter: opacity(50%);
+  -o-filter: opacity(50%);
+  -ms-filter: opacity(50%);
+  filter: opacity(50%); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('opacity_example','100%','210px','')}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Voir {{cssxref("filter-function/opacity", "opacity()")}} pour plus d'informations.</p>
+</div>
+
+<h3 id="saturate"><code>saturate()</code></h3>
+
+<p>L'image d'entrée est saturée. La valeur de l'argument indique la force de la saturation. Une valeur de <code>0%</code> fera que l'image sera totalement désaturée et une valeur de <code>100%</code> conservera l'image d'entrée telle quelle. Les valeurs intermédiaires auront un effet linéaire. Il est possible d'utiliser des valeurs supérieures à <code>100%</code> pour obtenir un effet de sursaturation. La valeur par défaut de l'argument est <code>1</code>.</p>
+
+<pre class="brush: css">filter: saturate(200%)</pre>
+
+<div id="saturate_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_9.jpeg" id="img1" src="/files/3722/Test_Form_9.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_9.jpg" id="img2" src="/files/3722/Test_Form_9.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 201 239"&gt;
+ &lt;filter id="saturate"&gt;
+    &lt;feColorMatrix type="saturate"
+               values="2"/&gt;
+ &lt;/filter&gt;
+ &lt;image xlink:href="/files/3722/Test_Form_9.jpeg" filter="url(#saturate)" width="201px" height="239px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_9_s.jpg" id="img4" src="/files/3724/Test_Form_9_s.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter: saturate(200%);
+  -webkit-filter: saturate(200%);
+  -o-filter: saturate(200%);
+  -ms-filter: saturate(200%);
+  filter: saturate(200%); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('saturate_example','100%','332px','')}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Voir {{cssxref("filter-function/saturate", "saturate()")}} pour plus d'informations.</p>
+</div>
+
+<h3 id="sepia"><code>sepia()</code></h3>
+
+<p>L'image d'entrée est convertie en sépia. La valeur de l'argument définit la proportion de la conversion. Ainsi, si on utilise un argument égal à 100%, le résultat sera entièrement sépia et si on utilise une valeur de <code>0%</code>, l'image d'entrée sera inchangée. Les valeurs comprises entre <code>0%</code> et <code>100%</code> appliquent l'effet de façon linéaire. La valeur par défaut de l'argument est <code>0</code>.</p>
+
+<pre class="brush: css">filter: sepia(100%)</pre>
+
+<div id="sepia_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_12.jpeg" id="img1" src="/files/3727/Test_Form_12.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_12.jpg" id="img2" src="/files/3727/Test_Form_12.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 259 194"&gt;
+ &lt;filter id="sepia"&gt;
+    &lt;feColorMatrix type="matrix"
+               values="0.393 0.769 0.189 0 0
+                       0.349 0.686 0.168 0 0
+                       0.272 0.534 0.131 0 0
+                       0 0 0 1 0"/&gt;
+ &lt;/filter&gt;
+ &lt;image xlink:href="/files/3727/Test_Form_12.jpeg" filter="url(#sepia)" width="259px" height="194px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_12_s.jpg" id="img4" src="/files/3728/Test_Form_12_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter: sepia(100%);
+  -webkit-filter: sepia(100%);
+  -o-filter: sepia(100%);
+  -ms-filter: sepia(100%);
+  filter: sepia(100%); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('sepia_example','100%','229px','')}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Voir {{cssxref("filter-function/sepia", "sepia()")}} pour plus d'informations.</p>
+</div>
+
+<h2 id="Enchaîner_les_fonctions">Enchaîner les fonctions</h2>
+
+<p>On peut appliquer autant de fonction que nécessaire pour manipuler le rendu obtenu. Dans l'exemple suivant, on augmente le contraste et la luminosité de l'image :</p>
+
+<pre class="brush: css">filter: contrast(175%) brightness(103%)</pre>
+
+<div id="combination()" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_8.jpeg" id="img1" src="/files/3729/Test_Form_8.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_8.jpg" id="img2" src="/files/3729/Test_Form_8.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_8_s.jpg" id="img4" src="/files/3730/Test_Form_8_s.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter: contrast(175%) brightness(103%);
+  -webkit-filter: contrast(175%) brightness(103%);
+  -o-filter: contrast(175%) brightness(103%);
+  -ms-filter: contrast(175%) brightness(103%);
+  filter: contrast(175%) brightness(103%);
+}
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('Enchaîner_les_fonctions','100%','209px','')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Filters 1.0', '#FilterProperty', 'filter')}}</td>
+   <td>{{Spec2('Filters 1.0')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.filter")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Applying_SVG_effects_to_HTML_content">Appliquer des effets SVG sur du contenu HTML</a></li>
+ <li>La propriété {{cssxref("mask")}}</li>
+ <li><a href="/fr/docs/Web/SVG">SVG</a></li>
+ <li><a href="https://www.html5rocks.com/en/tutorials/filters/understanding-css/">Un article de HTML5 Rocks : <em>Understanding CSS filters </em>(en anglais)</a></li>
+ <li><a href="https://cssgenerator.org/filter-css-generator.html">Générateur de filtres CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/filter_effects/index.html b/files/fr/web/css/filter_effects/index.html
new file mode 100644
index 0000000000..6c00f5d67d
--- /dev/null
+++ b/files/fr/web/css/filter_effects/index.html
@@ -0,0 +1,65 @@
+---
+title: Filter Effects
+slug: Web/CSS/Filter_Effects
+tags:
+  - Aperçu
+  - CSS
+  - Filter Effects
+  - Reference
+translation_of: Web/CSS/Filter_Effects
+---
+<div>{{CSSRef}}</div>
+
+<p><em><strong>Filter Effects</strong></em> ou « module des effets de filtre » (ou plus communément « filtres CSS ») est un module de la spécification CSS qui définit une façon de traiter le rendu d'un élément avant que celui-ci soit affiché dans le document.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("backdrop-filter")}}</li>
+ <li>{{cssxref("filter")}}</li>
+</ul>
+</div>
+
+<h3 id="Types_de_données">Types de données</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("&lt;filter-function&gt;")}}</li>
+</ul>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Filters 1.0', '#FilterProperty', 'filter')}}</td>
+   <td>{{ Spec2('Filters 1.0') }}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<h3 id="backdrop-filter"><code>backdrop-filter</code></h3>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.backdrop-filter")}}</p>
+
+<h3 id="filter"><code>filter</code></h3>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.filter")}}</p>
diff --git a/files/fr/web/css/filters_effects/index.html b/files/fr/web/css/filters_effects/index.html
new file mode 100644
index 0000000000..a557f7e400
--- /dev/null
+++ b/files/fr/web/css/filters_effects/index.html
@@ -0,0 +1,114 @@
+---
+title: Filters Effects
+slug: Web/CSS/Filters_Effects
+tags:
+  - CSS
+  - Reference
+translation_of: Web/CSS/Filter_Effects
+---
+<div>{{CSSRef}}</div>
+
+<p><em><strong>Filter Effects</strong></em> (ou module des effets de filtre) est un module CSS qui définit une manière de traiter le rendu des éléments avant qu'ils ne soient affichés dans le document.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés_CSS">Propriétés CSS</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("filter")}}</li>
+</ul>
+</div>
+
+<h3 id="Fonctions_CSS">Fonctions CSS</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("filter", "blur()", "#blur()")}}</li>
+ <li>{{cssxref("filter", "brightness()", "#brightness()")}}</li>
+ <li>{{cssxref("filter", "contrast()", "#contrast()")}}</li>
+ <li>{{cssxref("filter", "drop-shadow()", "#drop-shadow()")}}</li>
+ <li>{{cssxref("filter", "grayscale()", "#grayscale()")}}</li>
+ <li>{{cssxref("filter", "hue-rotate()", "#hue-rotate()")}}</li>
+ <li>{{cssxref("filter", "invert()", "#invert()")}}</li>
+ <li>{{cssxref("filter", "opacity()", "#opacity()")}}</li>
+ <li>{{cssxref("filter", "saturate()", "#saturate()")}}</li>
+ <li>{{cssxref("filter", "sepia()", "#sepia()")}}</li>
+ <li>{{cssxref("filter", "url()", "#url()")}}</li>
+</ul>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Filters 1.0', '#FilterProperty', 'filter')}}</td>
+   <td>{{Spec2('Filters 1.0')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatChrome("18.0")}}{{property_prefix("-webkit")}}</td>
+   <td>{{CompatGeckoDesktop(35)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera("15.0")}}{{property_prefix("-webkit")}}</td>
+   <td>{{CompatSafari("6.0")}}{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Edge</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simle</td>
+   <td>{{CompatAndroid("4.4")}}{{property_prefix("-webkit")}}</td>
+   <td>{{CompatGeckoDesktop(35)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>22.0 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
+   <td>
+    <p>6.0 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/css/fit-content/index.html b/files/fr/web/css/fit-content/index.html
new file mode 100644
index 0000000000..25eeb21a10
--- /dev/null
+++ b/files/fr/web/css/fit-content/index.html
@@ -0,0 +1,110 @@
+---
+title: fit-content()
+slug: Web/CSS/fit-content
+tags:
+  - CSS
+  - Experimental
+  - Fonction
+  - Reference
+  - Web
+translation_of: Web/CSS/fit-content
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La fonction CSS <strong><code>fit-content()</code></strong> permet d'obtenir une dimension restreinte à un intervalle donnée (en utilisant la formule  <code>min(<var>taille maximale</var>, max(<var>taille minimale</var>, <var>argument</var>))</code>.</p>
+
+<pre class="brush: css no-line-numbers">/* Valeurs de type &lt;length&gt; */
+fit-content(200px)
+fit-content(5cm)
+fit-content(30vw)
+fit-content(100ch)
+
+/* Valeurs de type &lt;percentage&gt; */
+fit-content(40%)
+</pre>
+
+<p>Cette fonction peut être utilisée pour définir la taille d'une piste via les propriétés relatives aux grilles CSS où la taille maximale est définie par <code><a href="/fr/docs/Web/CSS/grid-template-columns#max-content">max-content</a></code> et où la taille minimale est définie par <code><a href="/fr/docs/Web/CSS/grid-template-columns#auto">auto</a></code> et qui est calculée de façon similaire à <code>auto</code> (i.e. <code><a href="/fr/docs/Web/CSS/minmax">minmax(auto, max-content)</a></code>), sauf que la taille de la piste est ramenée à <var>argument</var> si celui-ci est supérieur à <code>auto</code>.</p>
+
+<p>Elle peut également être utilisée pour définir la taille d'une boîte avec {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}} et {{cssxref("max-height")}} où la taille maximale fait référence à la taille maximale du contenu et où la taille minimale fait référence à la taille minimale du contenu.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une longueur (valeur de type {{cssxref("&lt;length&gt;")}}) exprimée de façon absolue.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Un pourcentage (valeur de type {{cssxref("&lt;percentage&gt;")}}) relatif à l'espace disponible sur l'axe indiqué (la hauteur ou la largeur).</dd>
+ <dd>Pour les propriétés qui concernent les grilles, le pourcentage est relative à la dimension en ligne du conteneur de la grille pour les pistes qui sont disposées en colonnes et à la dimension en block pour les pistes qui sont disposées en lignes. Sinon, le pourcentage est relatif à la dimension en ligne ou en bloc selon le mode d'écriture utilisé.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[3]">#container {
+  display: grid;
+  grid-template-columns: fit-content(300px) fit-content(300px) 1fr;
+  grid-gap: 5px;
+  box-sizing: border-box;
+  height: 200px;
+  width: 100%;
+  background-color: #8cffa0;
+  padding: 10px;
+}
+
+#container &gt; div {
+  background-color: #8ca0ff;
+  padding: 5px;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="container"&gt;
+  &lt;div&gt;Item as wide as the content.&lt;/div&gt;
+  &lt;div&gt;
+    Item with more text in it. Because the contents of it are
+    wider than the maximum width, it is clamped at 300 pixels.
+  &lt;/div&gt;
+  &lt;div&gt;Flexible item&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "100%", 200)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Spécification</th>
+   <th>État</th>
+   <th>Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Sizing", "#valdef-width-fit-content-length-percentage", "fit-content()")}}</td>
+   <td>{{Spec2("CSS3 Sizing")}}</td>
+   <td>Définition de la fonction pour les dimensions de boîte avec les propriétés  {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}} et {{cssxref("max-height")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS Grid", "#valdef-grid-template-columns-fit-content", "fit-content()")}}</td>
+   <td>{{Spec2("CSS Grid")}}</td>
+   <td>Définition initiale, la fonction peut être utilisée pour définir la taille d'une piste au sein d'une grille CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.grid-template-columns.fit-content")}}</p>
diff --git a/files/fr/web/css/flex-basis/index.html b/files/fr/web/css/flex-basis/index.html
new file mode 100644
index 0000000000..9e12dbdf85
--- /dev/null
+++ b/files/fr/web/css/flex-basis/index.html
@@ -0,0 +1,209 @@
+---
+title: flex-basis
+slug: Web/CSS/flex-basis
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/flex-basis
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>flex-basis</code></strong> détermine la base de flexibilité utilisée comme taille initiale principale pour un élément flexible. Cette propriété détermine la taille de la boîte de contenu sauf si une autre boîte est visée par {{cssxref("box-sizing")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/flex-basis.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note">
+<p><strong>Note :</strong> Dans le cas où <code>flex-basis</code> (avec une valeur différente de <code>auto</code>) et <code>width</code> (ou <code>height</code> si <code>flex-direction: column</code>) sont définis pour un élément, c'est <code>flex-basis</code> qui a la priorité.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css  no-line-numbers">/* On définit une largeur */
+flex-basis: 10em;
+flex-basis: 3px;
+flex-basis: auto;
+
+/* On utilise les dimensions       */
+/* intrinsèques avec des mots-clés */
+flex-basis: fill;
+flex-basis: max-content;
+flex-basis: min-content;
+flex-basis: fit-content;
+
+/* La taille se calcule automatiquement */
+/* en fonction du contenu de l'élément  */
+flex-basis: content;
+
+/* Valeurs globales */
+flex-basis: inherit;
+flex-basis: initial;
+flex-basis: unset;
+</pre>
+
+<p>La propriété <code>flex-basis</code> est définie grâce au mot-clé <code><a href="#content">content</a></code> ou grâce à une valeur de type <code><a href="#width">&lt;'width'&gt;</a></code>.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><a id="width" name="width"><code>&lt;'width'&gt;</code></a></dt>
+ <dd>Un longueur absolue (type {{cssxref("&lt;length&gt;")}} ou un pourcentage (type {{cssxref("&lt;percentage&gt;")}})relatif à la taille principale du conteneur flexible ou encore le mot-clé <code>auto</code>. Les valeurs négatives ne sont pas autorisées. La valeur par défaut est <code>auto</code>.</dd>
+ <dt><a id="content" name="content"><code>content</code></a></dt>
+ <dd>Le dimensionnement se fera de façon automatique selon le contenu de l'élément flexible.</dd>
+ <dd>
+ <div class="note"><strong>Note : </strong>Cette valeur n'était pas définie par la première version de la spécification sur les boîtes flexibles. Aussi, certaines anciennes implémentations se basant sur cette version de la spécification ne prendront pas cette valeur en charge. Un effet équivalent peut être obtenu en réglant la taille principale ({{cssxref("width")}} ou {{cssxref("height")}}) avec <code>auto</code>.</div>
+
+ <div class="note"><strong>Note :</strong> Voici un rapide historique pour cette propriété :
+
+ <ul>
+  <li>Au début, <code>flex-basis:auto</code> signifiait « se référer à ma propriété <code>width</code> ou <code>height</code> »</li>
+  <li>Ensuite, <code>flex-basis:auto</code> a été modifiée pour indiquer un dimensionnement automatique et le mot-clé <code>main-size</code> fut introduit pour faire référence à la propriété <code>width</code> ou <code>height</code>. L'implémentation dans Gecko a été suivie avec le bug {{bug("1032922")}}.</li>
+  <li>Cette modification a été annulée avec le bug {{bug("1093316")}} afin qu'<code>auto</code> fasse à nouveau référence à la propriété <code>height</code> ou <code>width</code>. Le mot-clé <code>content</code> a été introduit pour déclencher un dimensionnement automatique (c'est le bug {{bug("1105111")}} qui couvre cette implémentation).</li>
+ </ul>
+ </div>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul class="container"&gt;
+  &lt;li class="flex flex1"&gt;1: flex-basis test&lt;/li&gt;
+  &lt;li class="flex flex2"&gt;2: flex-basis test&lt;/li&gt;
+  &lt;li class="flex flex3"&gt;3: flex-basis test&lt;/li&gt;
+  &lt;li class="flex flex4"&gt;4: flex-basis test&lt;/li&gt;
+  &lt;li class="flex flex5"&gt;5: flex-basis test&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;ul class="container"&gt;
+  &lt;li class="flex flex6"&gt;6: flex-basis test&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.container {
+  font-family: arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.flex {
+  background: #6AB6D8;
+  padding: 10px;
+  margin-bottom: 50px;
+  border: 3px solid #2E86BB;
+  color: white;
+  font-size: 20px;
+  text-align: center;
+  position: relative;
+}
+
+.flex:after {
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  top: 100%;
+  margin-top: 10px;
+  width: 100%;
+  color: #333;
+  font-size: 18px;
+}
+
+.flex1 {
+  flex-basis: auto;
+}
+
+.flex1:after {
+  content: 'auto';
+}
+
+.flex2 {
+  flex-basis: max-content;
+}
+
+.flex2:after {
+  content: 'max-content';
+}
+
+.flex3 {
+  flex-basis: min-content;
+}
+
+.flex3:after {
+  content: 'min-content';
+}
+
+.flex4 {
+  flex-basis: fit-content;
+}
+
+.flex4:after {
+  content: 'fit-content';
+}
+
+.flex5 {
+   flex-basis: content;
+}
+
+.flex5:after {
+  content: 'content';
+}
+
+.flex6 {
+  flex-basis: fill;
+}
+
+.flex6:after {
+  content: 'fill';
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '860', '360')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Spécification</th>
+   <th>État</th>
+   <th>Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#propdef-flex-basis', 'flex-basis')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.flex-basis")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("width")}}</li>
+ <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de bases</a></em></li>
+ <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal">Contrôler les proportions des boîtes flexibles le long de l'axe principal</a></em></li>
+</ul>
diff --git a/files/fr/web/css/flex-direction/index.html b/files/fr/web/css/flex-direction/index.html
new file mode 100644
index 0000000000..7c21fc1d64
--- /dev/null
+++ b/files/fr/web/css/flex-direction/index.html
@@ -0,0 +1,150 @@
+---
+title: flex-direction
+slug: Web/CSS/flex-direction
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/flex-direction
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>flex-direction</code></strong> définit la façon dont les éléments flexibles sont placés dans un conteneur flexible : elle définit l'axe principal et la direction des éléments (normale ou inversée).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/flex-direction.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>On notera que les valeurs <code>row</code> et <code>row-reverse</code> sont impactées par la direction du conteneur. Si {{htmlattrxref("dir")}} vaut <code>ltr</code>, <code>row</code> représente l'axe horizontal allant de la gauche vers la droite et <code>row-reverse</code> représente le même axe allant de la droite vers la gauche. Si <code>dir</code> vaut <code>rtl</code>, <code>row</code> correspondra à l'axe horizontal orienté de la droite vers la gauche et <code>row-reverse</code> de la gauche vers la droite.</p>
+
+<p>Pour plus d'informations, voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Utiliser les boîtes flexibles (<em>flexbox</em>) CSS</a>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* La direction suit une ligne */
+flex-direction: row;
+
+/* Semblable à &lt;row&gt; mais dans */
+/* la direction opposée        */
+flex-direction: row-reverse;
+
+/* Les lignes de texte sont */
+/* empilées                 */
+flex-direction: column;
+
+/* Semblable à &lt;column&gt; mais dans */
+/* la direction opposée           */
+flex-direction: column-reverse;
+
+/* Valeurs globales */
+flex-direction: inherit;
+flex-direction: initial;
+flex-direction: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>row</code></dt>
+ <dd>L'axe principal du conteneur flexible suit la direction du texte. Les points <strong>main-start</strong> et <strong>main-end</strong> vont dans la même direction que le contenu.</dd>
+ <dt><code>row-reverse</code></dt>
+ <dd>L'axe principal du conteneur flexible suit la direction du texte. Les points <strong>main-start</strong> et <strong>main-end</strong> vont dans la direction opposée au contenu.</dd>
+ <dt><code>column</code></dt>
+ <dd>L'axe principal du conteneur flexible suit l'axe de bloc (perpendiculaire à la direction du texte). Les points <strong>main-start</strong> et <strong>main-end</strong> correspondent aux points <strong>before</strong> et <strong>after</strong> de {{cssxref("writing-mode")}}.</dd>
+ <dt><code>column-reverse</code></dt>
+ <dd>Se comporte comme <code>column</code> mais <strong>main-start</strong> et <strong>main-end</strong> sont échangés.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;h4&gt;Un exemple avec column-reverse&lt;/h4&gt;
+&lt;div id="content"&gt;
+    &lt;div class="box" style="background-color:red;"&gt;A&lt;/div&gt;
+    &lt;div class="box" style="background-color:lightblue;"&gt;B&lt;/div&gt;
+    &lt;div class="box" style="background-color:yellow;"&gt;C&lt;/div&gt;
+&lt;/div&gt;
+&lt;h4&gt;Un exemple avec row-reverse&lt;/h4&gt;
+&lt;div id="content1"&gt;
+    &lt;div class="box" style="background-color:red;"&gt;A&lt;/div&gt;
+    &lt;div class="box" style="background-color:lightblue;"&gt;B&lt;/div&gt;
+    &lt;div class="box" style="background-color:yellow;"&gt;C&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#content {
+  width: 200px;
+  height: 200px;
+  border: 1px solid #c3c3c3;
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+#content1 {
+  width: 200px;
+  height: 200px;
+  border: 1px solid #c3c3c3;
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.box {
+  width: 50px;
+  height: 50px;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '', '300')}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Lorsqu'on utilise <code>flex-direction</code> avec les valeurs <code>row-reverse</code> ou <code>column-reverse</code>, on crée une déconnexion entre la présentation visuelle du contenu et l'ordre du DOM. Cela aura un impact négatif pour les utilisateurs qui naviguent à l'aide d'outils d'assistance tels que les les lecteurs d'écran. Si l'ordre visuel est important, les utilisateurs de lecteurs d'écran n'auront pas accès à l'ordre correct pour la lecture.</p>
+
+<ul>
+ <li><a href="https://tink.uk/flexbox-the-keyboard-navigation-disconnect/">Les boîtes flexibles et la déconnexion par rapport à la navigation au clavier, Tink (en anglais)</a></li>
+ <li><a href="http://adrianroselli.com/2015/09/source-order-matters.html">L'importance de l'ordre de la source, Adrian Roselli (en anglais)</a></li>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">Comprendre les règles 1.3 du WCAG</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-sequence.html">Comprendre les critères de réussite 1.3.2 WCAG 2.0, W3C (en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Spécification</th>
+   <th>État</th>
+   <th>Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#flex-direction', 'flex-direction')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.flex-direction")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Guide CSS sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Concepts de base</a></em></li>
+ <li>Guide CSS sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Ordering_Flex_Items">Ordonner les éléments flexibles</a></em></li>
+</ul>
diff --git a/files/fr/web/css/flex-flow/index.html b/files/fr/web/css/flex-flow/index.html
new file mode 100644
index 0000000000..f83f7d8f3c
--- /dev/null
+++ b/files/fr/web/css/flex-flow/index.html
@@ -0,0 +1,98 @@
+---
+title: flex-flow
+slug: Web/CSS/flex-flow
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/flex-flow
+---
+<div>{{ CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>flex-flow</code></strong> est une <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">propriété raccourcie</a> pour les propriétés {{cssxref("flex-direction")}} et {{cssxref("flex-wrap")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/flex-flow.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Pour plus d'informations, voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Utiliser les boîtes flexibles (<em>flexbox</em>) CSS</a>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* flex-flow: &lt;'flex-direction'&gt; */
+flex-flow: row;
+flex-flow: row-reverse;
+flex-flow: column;
+flex-flow: column-reverse;
+
+/* flex-flow: &lt;'flex-wrap'&gt; */
+flex-flow: nowrap;
+flex-flow: wrap;
+flex-flow: wrap-reverse;
+
+/* flex-flow: &lt;'flex-direction'&gt; et &lt;'flex-wrap'&gt; */
+flex-flow: row nowrap;
+flex-flow: column wrap;
+flex-flow: column-reverse wrap-reverse;
+
+/* Valeurs globales */
+flex-flow: inherit;
+flex-flow: initial;
+flex-flow: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>Voir {{cssxref("flex-direction")}} et {{cssxref("flex-wrap")}} pour plus d'informations sur les valeurs que peuvent prendre ces deux propriétés.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:css;highlight:3">element {
+
+  /* L'axe principal sera la direction de bloc  */
+  /* et on commencera par le bas (main-start et */
+  /* main-end inversés. Les éléments flexibles  */
+  /* passent sur une nouvelle ligne si besoin   */
+
+  flex-flow: column-reverse wrap;
+
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox','#flex-flow-property','flex-flow')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.flex-flow")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de bases</a></em></li>
+ <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Ordering_Flex_Items">Ordonner les éléments flexibles</a></em></li>
+</ul>
diff --git a/files/fr/web/css/flex-grow/index.html b/files/fr/web/css/flex-grow/index.html
new file mode 100644
index 0000000000..852dc66dfa
--- /dev/null
+++ b/files/fr/web/css/flex-grow/index.html
@@ -0,0 +1,125 @@
+---
+title: flex-grow
+slug: Web/CSS/flex-grow
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/flex-grow
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>flex-grow</code></strong> définit le facteur d'expansion d'un élément flexible selon sa dimension principale. Elle indique la quantité d'espace restant que l'élément devrait consommer dans un conteneur flexible relativement à la taille des autres éléments du même conteneur.</p>
+
+<p>La dimension principale correspond à la hauteur ou à la largeur de l'élément selon la valeur de {{cssxref("flex-direction")}}.</p>
+
+<p>L'espace restant qui est réparti correspond à la taille du conteneur flexible moins la somme des tailles des éléments flexibles. Si tous les éléments voisins possèdent le même facteur d'expansion, ils recevront tous la même part d'espace.</p>
+
+<p>La plupart du temps <code>flex-grow</code> est utilisé avec les autres propriétés flexibles {{cssxref("flex-shrink")}} et {{cssxref("flex-basis")}}. On pourra utiliser la propriété raccourcie {{cssxref("flex")}} afin de s'assurer que toutes les valeurs des propriétés flexibles auront été définies.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/flex-grow.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Pour plus d'informations, voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Utiliser les boîtes flexibles (<em>flexbox</em>) CSS</a>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">flex-grow: 2;
+flex-grow: 0.6;
+
+/* Valeurs globales */
+flex-shrink: inherit;
+flex-shrink: initial;
+flex-shrink: unset;
+</pre>
+
+<p>La propriété <code>flex-grow</code> se définit avec une valeur de type <code><a href="#number">&lt;number&gt;</a></code>.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><a id="number" name="number"><code>&lt;number&gt;</code></a></dt>
+ <dd>Un nombre (type {{cssxref("&lt;number&gt;")}} qui correspond au facteur de grossissement utilisé. Plus la valeur est élevée, plus l'élément sera étendu si nécessaire. Les valeurs négatives sont invalides. La valeur par défaut est 0.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<div id="Live_Sample">
+<pre class="brush: html">&lt;h4&gt;A,B,C et F ont flex-shrink:1 . D et E ont flex-grow:1 .&lt;/h4&gt;
+&lt;div id="content"&gt;
+  &lt;div class="box" style="background-color:red;"&gt;A&lt;/div&gt;
+  &lt;div class="box" style="background-color:lightblue;"&gt;B&lt;/div&gt;
+  &lt;div class="box" style="background-color:yellow;"&gt;C&lt;/div&gt;
+  &lt;div class="box1" style="background-color:brown;"&gt;D&lt;/div&gt;
+  &lt;div class="box1" style="background-color:lightgreen;"&gt;E&lt;/div&gt;
+  &lt;div class="box" style="background-color:brown;"&gt;F&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#content {
+  display: flex;
+
+  justify-content: space-around;
+  flex-flow: row wrap;
+  align-items: stretch;
+}
+
+.box {
+  flex-shrink: 1;
+  border: 3px solid rgba(0,0,0,.2);
+}
+
+.box1 {
+  flex-grow: 1;
+  border: 3px solid rgba(0,0,0,.2);
+}
+</pre>
+</div>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '700px', '300px')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Spécification</th>
+   <th>État</th>
+   <th>Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox','#flex-grow-property','flex-grow')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.flex-grow")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://css-tricks.com/flex-grow-is-weird/"><code>flex-grow</code> est étrange ?</a> un article (en anglais) écrit par Manuel Matuzovic sur CSS-Tricks et qui illustre le fonctionnement de <code>flex-grow</code></li>
+ <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de bases</a></em></li>
+ <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal">Contrôler les proportions des boîtes flexibles le long de l'axe principal</a></em></li>
+</ul>
diff --git a/files/fr/web/css/flex-shrink/index.html b/files/fr/web/css/flex-shrink/index.html
new file mode 100644
index 0000000000..7d726652f0
--- /dev/null
+++ b/files/fr/web/css/flex-shrink/index.html
@@ -0,0 +1,121 @@
+---
+title: flex-shrink
+slug: Web/CSS/flex-shrink
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/flex-shrink
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>flex-shrink</code></strong> définit le facteur de rétrécissement d'un élément flexible. Si la taille de l'ensemble des éléments flexibles est supérieure à la taille du conteneur, les éléments seront comprimés selon leur facteur <code>flex-shrink</code>.</p>
+
+<p><code>flex-shrink</code> est généralement utilisé avec les propriétés {{cssxref("flex-grow")}} et {{cssxref("flex-basis")}}. Elle est souvent définie grâce à la propriété raccourcie {{cssxref("flex")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/flex-shrink.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Pour plus d'informations, voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Utiliser les boîtes flexibles (<em>flexbox</em>) CSS</a>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs numériques */
+/* Type &lt;number&gt;      */
+flex-shrink: 2;
+flex-shrink: 0.6;
+
+/* Valeurs globales */
+flex-shrink: inherit;
+flex-shrink: initial;
+flex-shrink: unset;
+</pre>
+
+<p>La propriété <code>flex-shrink</code> est définie grâce à une valeur de type <code><a href="#number">&lt;number&gt;</a></code>.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><a id="number" name="number"><code>&lt;number&gt;</code></a></dt>
+ <dd>Un nombre (type {{cssxref("&lt;number&gt;")}}) qui correspond au facteur de rétrécissement utilisé. Plus la valeur est élevée, plus l'élément sera compressé si nécessaire. Les valeurs négatives sont invalides. La valeur par défaut est <code>1</code>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<div id="Live_Sample">
+<pre class="brush: html">&lt;p&gt;A,B,C ont flex-shrink: 1. D et E ont flex-shrink: 2.&lt;/p&gt;
+&lt;div id="content"&gt;
+  &lt;div class="box" style="background-color:red;"&gt;A&lt;/div&gt;
+  &lt;div class="box" style="background-color:lightblue;"&gt;B&lt;/div&gt;
+  &lt;div class="box" style="background-color:yellow;"&gt;C&lt;/div&gt;
+  &lt;div class="box1" style="background-color:brown;"&gt;D&lt;/div&gt;
+  &lt;div class="box1" style="background-color:lightgreen;"&gt;E&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#content {
+  display: flex;
+  width: 500px;
+}
+
+#content div {
+  flex-basis: 120px;
+  border: 3px solid rgba(0,0,0.2);
+}
+
+.box {
+  flex-shrink: 1;
+}
+
+.box1 {
+  flex-shrink: 2;
+}
+</pre>
+</div>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', 500, 300)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#flex-shrink', 'flex-shrink')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.flex-shrink")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de bases</a></em></li>
+ <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal">Contrôler les proportions des boîtes flexibles le long de l'axe principal</a></em></li>
+</ul>
diff --git a/files/fr/web/css/flex-wrap/index.html b/files/fr/web/css/flex-wrap/index.html
new file mode 100644
index 0000000000..306131015b
--- /dev/null
+++ b/files/fr/web/css/flex-wrap/index.html
@@ -0,0 +1,158 @@
+---
+title: flex-wrap
+slug: Web/CSS/flex-wrap
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/flex-wrap
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>flex-wrap</code></strong> indique si les éléments flexibles sont contraints à être disposés sur une seule ligne ou s'ils peuvent être affichés sur plusieurs lignes avec un retour automatique. Si le retour à la ligne est autorisé, la propriété permet également de contrôler la direction dans laquelle les lignes sont empilées.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/flex-wrap.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Pour plus d'informations, voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Utiliser les boîtes flexibles (<em>flexbox</em>) CSS</a>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+flex-wrap: nowrap; /* Valeur par défaut */
+flex-wrap: wrap;
+flex-wrap: wrap-reverse;
+
+/* Valeurs globales */
+flex-wrap: inherit;
+flex-wrap: initial;
+flex-wrap: unset;
+</pre>
+
+<p>La propriété <code>flex-wrap</code> peut être défini grâce à l'un des mots-clés suivants.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>nowrap</code></dt>
+ <dd>Les éléments flexibles sont disposés sur une seule ligne. Cela peut entraîner un dépassement du conteneur. La ligne <strong>cross-start</strong> est équivalente à <strong>start</strong> ou à <strong>before</strong> selon la valeur de {{cssxref("flex-direction")}}. Cette valeur est la valeur par défaut.</dd>
+ <dt><code>wrap</code></dt>
+ <dd>Les éléments flexibles sont disposé sur plusieurs lignes. La ligne <strong>cross-start</strong> est équivalente à  <strong>start</strong> ou <strong>before</strong> en fonction de la valeur de <code>flex-direction</code> et la ligne <strong>cross-end</strong> est à l'opposée <strong>cross-start</strong>.</dd>
+ <dt><code>wrap-reverse</code></dt>
+ <dd>Se comporte comme <code>wrap</code> mais <strong>cross-start</strong> et <strong>cross-end</strong> sont permutées.</dd>
+ <dt>
+ <h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+ </dt>
+</dl>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<div id="Live_Sample">
+<pre class="brush: html">&lt;h4&gt;Un exemple de flex-wrap:wrap &lt;/h4&gt;
+&lt;div class="contenu"&gt;
+  &lt;div class="rouge"&gt;1&lt;/div&gt;
+  &lt;div class="vert"&gt;2&lt;/div&gt;
+  &lt;div class="bleu"&gt;3&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;h4&gt;Un exemple de flex-wrap:nowrap &lt;/h4&gt;
+&lt;div class="contenu1"&gt;
+  &lt;div class="rouge"&gt;1&lt;/div&gt;
+  &lt;div class="vert"&gt;2&lt;/div&gt;
+  &lt;div class="bleu"&gt;3&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;h4&gt;Un exemple de flex-wrap:wrap-reverse &lt;/h4&gt;
+&lt;div class="contenu2"&gt;
+  &lt;div class="rouge"&gt;1&lt;/div&gt;
+  &lt;div class="vert"&gt;2&lt;/div&gt;
+  &lt;div class="bleu"&gt;3&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.contenu,
+.contenu1,
+.contenu2 {
+    color: #fff;
+    font: 100 24px/100px sans-serif;
+    height: 150px;
+    text-align: center;
+}
+
+.contenu div,
+.contenu1 div,
+.contenu2 div {
+    height: 50%;
+    width: 300px;
+}
+.rouge {
+    background: orangered;
+}
+.vert {
+    background: yellowgreen;
+}
+.bleu {
+    background: steelblue;
+}
+
+/* Styles pour les boîtes flexibles*/
+.contenu {
+    display: flex;
+    flex-wrap: wrap;
+}
+.contenu1 {
+    display: flex;
+    flex-wrap: nowrap;
+}
+.contenu2 {
+    display: flex;
+    flex-wrap: wrap-reverse;
+}
+
+</pre>
+</div>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Examples', '700px', '700px', '', 'Web/CSS/flex-wrap')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Spécification</th>
+   <th>État</th>
+   <th>Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#flex-wrap-property', 'flex-wrap')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.flex-wrap")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de bases</a></em></li>
+ <li>Guide sur les boîtes flexibles : <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Maîtriser le retour à la ligne des éléments flexibles</a></em></li>
+</ul>
diff --git a/files/fr/web/css/flex/index.html b/files/fr/web/css/flex/index.html
new file mode 100644
index 0000000000..c88b0da7b0
--- /dev/null
+++ b/files/fr/web/css/flex/index.html
@@ -0,0 +1,299 @@
+---
+title: flex
+slug: Web/CSS/flex
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/flex
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>flex</code></strong> est une propriété raccourcie qui définit la capacité d'un élément flexible à modifier ses dimensions afin de remplir l'espace disponible de son conteneur.</p>
+
+<p>Les propriétés détaillées correspondantes à cette propriété raccourcie sont {{cssxref("flex-grow")}}, {{cssxref("flex-shrink")}} et {{cssxref("flex-basis")}}.</p>
+
+<p>Les éléments flexibles peuvent être étirés ou réduits pour utiliser un espace proportionnel à leur coefficient de grossissement ou de rétrécissement afin de ne pas dépasser d'un conteneur.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/flex.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Pour la plupart des cas, on utilisera une des valeurs suivantes : <code>auto</code>, <code>initial</code>, <code>none</code> ou un nombre positif sans unité. Pour voir l'effet de ces valeurs, essayez de redimensionner les conteneurs flexibles ci-après :</p>
+
+<div id="flex">
+<pre class="hidden brush: html notranslate">&lt;div class="flex-container"&gt;
+
+   &lt;div class="item auto"&gt;auto&lt;/div&gt;
+   &lt;div class="item auto"&gt;auto&lt;/div&gt;
+   &lt;div class="item auto"&gt;auto&lt;/div&gt;
+
+&lt;/div&gt;
+
+&lt;div class="flex-container"&gt;
+
+   &lt;div class="item auto"&gt;auto&lt;/div&gt;
+   &lt;div class="item initial"&gt;initial&lt;/div&gt;
+   &lt;div class="item initial"&gt;initial&lt;/div&gt;
+
+&lt;/div&gt;
+
+&lt;div class="flex-container"&gt;
+
+   &lt;div class="item auto"&gt;auto&lt;/div&gt;
+   &lt;div class="item auto"&gt;auto&lt;/div&gt;
+   &lt;div class="item none"&gt;none&lt;/div&gt;
+
+&lt;/div&gt;
+
+&lt;div class="flex-container"&gt;
+
+   &lt;div class="item initial"&gt;initial&lt;/div&gt;
+   &lt;div class="item none"&gt;none&lt;/div&gt;
+   &lt;div class="item none"&gt;none&lt;/div&gt;
+
+&lt;/div&gt;
+
+&lt;div class="flex-container"&gt;
+
+   &lt;div class="item four"&gt;4&lt;/div&gt;
+   &lt;div class="item two"&gt;2&lt;/div&gt;
+   &lt;div class="item one"&gt;1&lt;/div&gt;
+
+&lt;/div&gt;
+</pre>
+
+<pre class="hidden brush: css notranslate">* {
+  box-sizing: border-box;
+}
+
+.flex-container {
+   background-color: #F4F7F8;
+   resize: horizontal;
+   overflow: hidden;
+   display: flex;
+   margin: 1em;
+}
+
+.item {
+  margin: 1em;
+  padding: 0.5em;
+  width: 110px;
+  min-width: 0;
+  background-color: #1B5385;
+  color: white;
+  font-family: monospace;
+}
+
+.initial {
+  flex: initial;
+}
+
+.auto {
+  flex: auto;
+}
+
+.none {
+  flex: none;
+}
+
+.four {
+  flex: 4;
+}
+
+.two {
+  flex: 2;
+}
+
+.one {
+  flex: 1;
+}
+</pre>
+
+<p>{{EmbedLiveSample("flex", "100%","370")}}</p>
+
+<div id="flex">
+<p>Par défaut, les éléments flexibles ne se rétrécissent pas en dessous de la taille minimale du contenu. Pour modifier ce comportement, il faudra paramétrer {{cssxref("min-width")}} ou {{cssxref("min-height")}}.</p>
+</div>
+
+<p>Voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS" title="CSS/Using_CSS_flexible_boxes">Utiliser les boîtes flexibles (<em>flexbox</em>) CSS</a> pour plus d'informations.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* Valeurs de base */
+flex: auto;
+flex: initial;
+flex: none;
+
+/* Une valeur sans unité pour flex-grow */
+/* flex-basis vaut alors 0 */
+flex: 2;
+
+/* Une valeur, largeur/hauteur: flex-basis */
+flex: 10em;
+flex: 30px;
+flex: content;
+
+/* Deux valeurs : flex-grow | flex-basis */
+flex: 1 30px;
+
+/* Deux valeurs : flex-grow | flex-shrink */
+/* flex-basis vaut alors 0 */
+flex: 2 2;
+
+/* Trois valeurs : flex-grow | flex-shrink | flex-basis */
+flex: 2 2 10%;
+
+/* Valeurs globales */
+flex: inherit;
+flex: initial;
+flex: unset;
+</pre>
+
+<p>La propriété <code>flex</code> peut être définie avec une, deux ou trois valeurs.</p>
+
+<ul>
+ <li><strong>Avec une valeur</strong>, la syntaxe doit être :
+
+  <ul>
+   <li>un nombre sans unité ({{cssxref("&lt;number&gt;")}}) : celui-ci est alors interprété comme la valeur de <code><a href="#grow">&lt;flex-grow&gt;</a></code></li>
+   <li>ou une valeur de largeur valide ({{cssxref("width")}}) : celle-ci est alors interprétée comme la valeur de <code><a href="#basis">&lt;flex-basis&gt;</a></code></li>
+   <li>ou le mot-clé <code><a href="#none">none</a></code>.</li>
+  </ul>
+ </li>
+ <li><strong>Avec deux valeurs</strong>
+  <ul>
+   <li>la première doit être un nombre sans unité ({{cssxref("&lt;number&gt;")}}) qui correspond à la valeur de <code><a href="#grow">&lt;flex-grow&gt;</a></code>.</li>
+   <li>la seconde valeur doit être :
+    <ul>
+     <li>un nombre sans unité ({{cssxref("&lt;number&gt;")}}) : celui-ci est alors interprété comme la valeur de <code><a href="#shrink">&lt;flex-shrink&gt;</a></code></li>
+     <li>ou une valeur de largeur valide ({{cssxref("width")}}) : celle-ci est alors interprétée comme la valeur de <code><a href="#basis">&lt;flex-basis&gt;</a></code></li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+ <li><strong>Avec trois valeurs</strong>
+  <ul>
+   <li>la première valeur doit être un nombre sans unité ({{cssxref("&lt;number&gt;")}}) : celui-ci est alors interprété comme la valeur de <code><a href="#grow">&lt;flex-grow&gt;</a></code></li>
+   <li>la deuxième valeur doit être un nombre sans unité ({{cssxref("&lt;number&gt;")}}) : celui-ci est alors interprété comme la valeur de <code><a href="#shrink">&lt;flex-shrink&gt;</a></code></li>
+   <li>la troisième valeur doit être une valeur de largeur valide ({{cssxref("width")}}) : celle-ci est alors interprétée comme la valeur de <code><a href="#basis">&lt;flex-basis&gt;</a></code></li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<div id="flex">
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>L'élément est dimensionné selon ses propriétés <code>width</code> et <code>height</code> mais peut grandir pour absorber l'espace libre disponible dans le conteneur flexible ou rétrécir à sa taille minimale pour rentrer dans le conteneur. Cette valeur est équivalente à "<code>flex: 1 1 auto</code>".</dd>
+ <dt><code>initial</code></dt>
+ <dd>L'élément est dimensionné selon ses propriétés <code>width</code> et <code>height</code>. Ce comportement est équivalent à la valeur par défaut (<code>0 1 auto</code>). Si besoin, l'élément rétrécit à sa taille minimale pour rentrer dans le conteneur mais il ne grandira pas s'il y a de l'espace disponible dans ce conteneur. Ce mot-clé est équivalent à "<code>flex: 0 1 auto</code>".</dd>
+ <dt><code>none</code></dt>
+ <dd>L'élément est dimensionné par rapport à ses propriétés <code>width</code> et <code>height</code>. Il n'est pas flexible : il ne peut ni rétrécir ni grandir selon l'espace du conteneur flexible. Ce mot-clé est équivalent à "<code>flex: 0 0 auto</code>".</dd>
+</dl>
+</div>
+
+<dl>
+ <dt><a id="grow" name="grow"><code>&lt;'flex-grow'&gt;</code></a></dt>
+ <dd>Voir {{cssxref("flex-grow")}}. Les valeurs négatives sont interdites et la valeur par défaut est <code>1</code>.</dd>
+ <dt><a id="shrink" name="shrink"><code>&lt;'flex-shrink'&gt;</code></a></dt>
+ <dd>Voir {{cssxref("flex-shrink")}}. Les valeurs négatives sont interdites et la valeur par défaut est <code>1</code>.</dd>
+ <dt><a id="basis" name="basis"><code>&lt;'flex-basis'&gt;</code></a></dt>
+ <dd>Voir {{cssxref("flex-basis")}}. Une valeur valide pour {{cssxref("width")}} et {{cssxref("height")}}. La valeur par défaut est <code>0</code>.</dd>
+</dl>
+
+<div class="note"><strong>Note :</strong> Lorsqu'on utilise une ou deux valeurs sans unité dans la règle, <code>flex-basis</code> vaudra 0. Pour plus d'informations, voir <a href="https://drafts.csswg.org/css-flexbox/#flex-common">le brouillon de spécification du module des boîtes flexibles</a>.</div>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">#flex-container {
+	display: flex;
+	flex-direction: row;
+}
+
+#flex-container &gt; .flex-item {
+	flex: auto;
+}
+
+#flex-container &gt; .raw-item {
+	width: 5rem;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div id="flex-container"&gt;
+    &lt;div class="flex-item" id="flex"&gt;Boîte flexible (cliquer pour passer à la boîte « normale »)&lt;/div&gt;
+    &lt;div class="raw-item" id="raw"&gt;Boîte « normale » &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">var flex = document.getElementById("flex");
+var raw = document.getElementById("raw");
+flex.addEventListener("click", function() {
+	raw.style.display = raw.style.display == "none" ? "block" : "none";
+});
+</pre>
+
+<pre class="brush: css notranslate">#flex-container {
+	width: 100%;
+	font-family: Consolas, Arial, sans-serif;
+}
+
+#flex-container &gt; div {
+	border: 1px solid #f00;
+	padding: 1rem;
+}
+
+#flex-container &gt; .raw-item {
+	border: 1px solid #000;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples','100%','60')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Spécification</th>
+   <th>État</th>
+   <th>Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#flex-property', 'flex')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.flex")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de bases</a></em></li>
+ <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal">Contrôler les proportions des boîtes flexibles le long de l'axe principal</a></em></li>
+</ul>
diff --git a/files/fr/web/css/flex_value/index.html b/files/fr/web/css/flex_value/index.html
new file mode 100644
index 0000000000..736e3a9279
--- /dev/null
+++ b/files/fr/web/css/flex_value/index.html
@@ -0,0 +1,55 @@
+---
+title: <flex>
+slug: Web/CSS/flex_value
+tags:
+  - CSS
+  - Disposition
+  - Reference
+  - Type de donnée CSS
+  - Web
+translation_of: Web/CSS/flex_value
+---
+<div>{{CSSRef}}</div>
+
+<p>Le type de donnée <a href="/fr/docs/Web/CSS">CSS</a> <strong><code>&lt;flex&gt;</code></strong> permet de représenter une longueur flexible à l'intérieur d'un conteneur en grille, qui est déclarée comme une dimension d'unité <code>fr</code>. Il est notamment utilisé pour les propriétés {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-rows")}} ainsi que d'autres.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Le type de donnée <code>&lt;flex&gt;</code> est défini par un nombre ({{cssxref("&lt;number&gt;")}} suivi de l'unité <code>fr</code>. L'unité <code>fr</code> représente une <strong>fr</strong>action de l'espace restant dans le conteneur en grille. Comme pour les autres dimensions, il n'y a pas d'espace entre la valeur et l'unité.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">1fr    /* Utilisation d'une valeur entière */
+2.5fr  /* Utilisation d'une valeur flottante */
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Grid", "#typedef-flex", "&lt;flex&gt;")}}</td>
+   <td>{{Spec2("CSS Grid")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.types.flex")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">Le mode de disposition en grille (CSS Grid)</a></li>
+</ul>
diff --git a/files/fr/web/css/float/index.html b/files/fr/web/css/float/index.html
new file mode 100644
index 0000000000..b52d245e44
--- /dev/null
+++ b/files/fr/web/css/float/index.html
@@ -0,0 +1,225 @@
+---
+title: float
+slug: Web/CSS/float
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/float
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>float</code></strong> indique qu'un élément doit être retiré du flux normal et doit être placé sur le côté droit ou sur le côté gauche de son conteneur. Le texte et les autres éléments en ligne (<em>inline</em>) entoureront alors l'élément flottant. L'élément est retiré du flux normal de la page mais s'inscrit toujours dans le flux (contrairement au <a href="/fr/docs/Web/CSS/position#Positionnement_absolu">positionnement absolu</a>).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/float.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Un <strong>élément flottant</strong> est un élément pour lequel <a href="/fr/docs/Web/CSS/Valeur_calculée">la valeur calculée</a> de <code>float</code> est différente de <code>none</code>.</p>
+
+<div id="float">
+<p><code>float</code> implique l'utilisation d'une disposition en bloc, cette propriété modifie donc la valeur de {{cssxref("display")}} dans certains cas :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><a href="/fr/docs/Web/CSS/Valeur_spécifiée">Valeur spécifiée</a></th>
+   <th scope="col"><a href="/fr/docs/Web/CSS/Valeur_calculée">Valeur calculée</a></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>inline</code></td>
+   <td><code>block</code></td>
+  </tr>
+  <tr>
+   <td><code>inline-block</code></td>
+   <td><code>block</code></td>
+  </tr>
+  <tr>
+   <td><code>inline-table</code></td>
+   <td><code>table</code></td>
+  </tr>
+  <tr>
+   <td><code>table-row</code></td>
+   <td><code>block</code></td>
+  </tr>
+  <tr>
+   <td><code>table-row-group</code></td>
+   <td><code>block</code></td>
+  </tr>
+  <tr>
+   <td><code>table-column</code></td>
+   <td><code>block</code></td>
+  </tr>
+  <tr>
+   <td><code>table-column-group</code></td>
+   <td><code>block</code></td>
+  </tr>
+  <tr>
+   <td><code>table-cell</code></td>
+   <td><code>block</code></td>
+  </tr>
+  <tr>
+   <td><code>table-caption</code></td>
+   <td><code>block</code></td>
+  </tr>
+  <tr>
+   <td><code>table-header-group</code></td>
+   <td><code>block</code></td>
+  </tr>
+  <tr>
+   <td><code>table-footer-group</code></td>
+   <td><code>block</code></td>
+  </tr>
+  <tr>
+   <td><code>inline-flex</code></td>
+   <td><code>flex</code></td>
+  </tr>
+  <tr>
+   <td><code>inline-grid</code></td>
+   <td><code>grid</code></td>
+  </tr>
+  <tr>
+   <td><em>autre</em></td>
+   <td><em>inchangée</em></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note"><strong>Note : </strong>Si vous utilisez cette propriété via JavaScript, comme propriété de l'objet {{domxref("HTMLElement.style")}}, la plupart des navigateurs récents permettra d'utiliser <code>float</code> mais il faudra utiliser <code>cssFloat</code> (attention à la casse) pour les navigateurs plus anciens. Pour Internet Explorer 8 et les versions antérieures, elle était appelée <code>styleFloat</code>. Le terme <code>float</code> étant réservé en JavaScript, ce cas de figure était une exception à la règle qui définit que le nom de la propriété DOM est une version <a href="https://fr.wikipedia.org/wiki/CamelCase">CamelCase</a> de la propriété CSS construite avec des tirets. De même, <code>class</code> sera échappée en <code>className</code> et le <code>for</code> des éléments &lt;label&gt; sera converti en <code>htmlFor</code>).</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css">float: left;
+float: right;
+float: none;
+float: inline-start;
+float: inline-end;
+
+/* Valeurs globales */
+float: inherit;
+float: initial;
+float: unset;</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>left</code></dt>
+ <dd>Un mot-clé indiquant que l'élément doit flotter du côté gauche du bloc qui le contient.</dd>
+ <dt><code>right</code></dt>
+ <dd>Un mot-clé indiquant que l'élément doit flotter du côté droit du bloc qui le contient.</dd>
+ <dt><code>none</code></dt>
+ <dd>Un mot-clé indiquant que l'élément ne doit pas flotter</dd>
+ <dt><code>inline-start</code></dt>
+ <dd>Un mot-clé indiquant que l'élément doit flotter du côté du début du bloc qui le contient. Pour les scripts LTR (les langues qui s'écrivent de la gauche vers la droite), c'est le bord gauche ; pour les scripts RTL, c'est le bord droit.</dd>
+ <dt><code>inline-end</code></dt>
+ <dd>Un mot-clé indiquant que l'élément doit flotter du côté de la fin du bloc qui le contient. Pour les scripts LTR (les langues qui s'écrivent de la gauche vers la droite), c'est le bord droit ; pour les scripts RTL, c'est le bord gauche.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  border: solid red;
+  max-width: 70ex;
+}
+
+h4 {
+  float: left;
+  margin: 0;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;h4&gt;Coucou !&lt;/h4&gt;
+  Voici du texte. Voici du texte. Voici du texte.
+  Voici du texte. Voici du texte. Voici du texte.
+  Voici du texte. Voici du texte. Voici du texte.
+  Voici du texte. Voici du texte. Voici du texte.
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Le_positionnement_des_éléments_flottants">Le positionnement des éléments flottants</h2>
+
+<p>Comme évoqué ci-avant, lorsqu'un élément flotte, il est retiré du flux normal du document et il est décalé vers la droite ou vers la gauche jusqu'à ce qu'il touche le bord de son conteneur <em>ou un autre élément flottant</em>.</p>
+
+<p>Dans l'image suivante, on voit trois carrés rouges. Deux flottent à gauche et un flotte à droite. On voit que le deuxième carré à gauche est placé à droite du premier. Si on ajoutait d'autres carrés, ils s'empileraient sur la gauche jusqu'à remplir le conteneur, ensuite, on passerait sur une autre ligne.</p>
+
+<p><img src="/@api/deki/files/4927/=floats.png" style="height: 248px; width: 729px;"></p>
+
+<h2 id="Dégager_des_éléments_du_flottement">Dégager des éléments du flottement</h2>
+
+<p>Dans l'illustration précédente, les éléments flottants sont verticalement plus courts que le texte sur lequel ils flottent. Cependant, si le texte n'était pas aussi long et ne dépassait pas des blocs, on pourrait avoir des effets indésirables. Par exemple, si le paragraphe ne contenait que « Lorem ipsum dolor sit amet » et était suivi d'un autre titre (semblable à « Floats Example »), le deuxième titre apparaîtrait entre les boîtes rouges. Or, la plupart du temps, on veut que le titre soit aligné tout à gauche. Pour cela, il faut dégager (<em>clear</em>) l'élément.</p>
+
+<p>Pour cela, on pourra utiliser la propriété {{cssxref("clear")}} sur ce deuxième titre afin de s'assurer qu'il est aligné à gauche :</p>
+
+<pre class="brush:css">h2.deuxiemeTitre { clear: both; }
+</pre>
+
+<p>Cela dit, cette méthode fonctionne uniquement s'il n'y a pas d'autres éléments dans le même <a href="/fr/docs/Web/CSS/Block_formatting_context" rel="internal">contexte de formatage de bloc</a> pour lesquels on voudrait que l'élément apparaisse à droite. Par exemple, si l'élément <code>H2</code> est entourée de barres latérales à gauche et à droite et qu'on utilise <code>clear</code>, le titre apparaîtra alors en bas, sous les barres, plutôt qu'entre elles.</p>
+
+<p>Aussi, si on ne peut pas dégager un élément, on peut limiter le formatage en bloc au conteneur des éléments flottants. Pour reprendre l'exemple précédent, on voit que toutes les boîtes rouges sont dans un élément {{HTMLElement("p")}}. On peut alors utiliser {{cssxref("overflow")}} avec <code>hidden</code> ou <code>auto</code> afin que l'élément s'agrandisse pour les contenir, sans les faire tomber en bas :</p>
+
+<pre class="brush:css">p.avecBoitesRouges { overflow: hidden; height: auto; }
+</pre>
+
+<div class="note"><strong>Note :</strong> En utilisant <code>overflow</code>: <code>scroll</code> on contiendra également les éléments fils flottants mais cela affichera des barres de défilement quelle que soit la hauteur du contenu. Ici, nous utilisons <code>auto</code> pour <code>height</code> afin d'indiquer que le conteneur doit s'agrandir si nécessaire.</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}}</td>
+   <td>{{Spec2('CSS Logical Properties')}}</td>
+   <td>Les valeurs <code>inline-start</code> et <code>inline-end</code> sont ajoutées.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Box', '#float', 'float')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>Introduction de nouvelles valeurs, pas encore clairement définies.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#float-position', 'float')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#float', 'float')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.float")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Block_formatting_context">Le contexte de formatage des blocs</a></li>
+</ul>
+</div>
diff --git a/files/fr/web/css/font-family/index.html b/files/fr/web/css/font-family/index.html
new file mode 100644
index 0000000000..4b5d523a2f
--- /dev/null
+++ b/files/fr/web/css/font-family/index.html
@@ -0,0 +1,232 @@
+---
+title: font-family
+slug: Web/CSS/font-family
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/font-family
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>font-family</code></strong> permet de définir une liste, ordonnée par priorité, de polices à utiliser pour mettre en forme le texte de l'élément ciblé.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/font-family.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Les valeurs sont séparées par des virgules, indiquant chacune une police alternative. Le moteur choisira la première valeur pour laquelle la police correspondante est installée sur l'ordinateur ou qui peut être téléchargée via la règle @ {{cssxref("@font-face")}} définie.</p>
+
+<p>Pour fixer <code>font-family</code> et d'autres propriétés liées aux polices de caractères, on pourra utiliser la propriété raccourcie {{cssxref("font")}}.</p>
+
+<p>Les auteurs doivent toujours inclure une famille de police générique dans cette liste car il n'y a aucune certitude qu'une police donnée aura été installée sur l'ordinateur ni qu'elle pourra être téléchargée grâce à {{cssxref("@font-face")}}. L'utilisation d'une famille de police générique permet au navigateur d'utiliser une police acceptable en recours si besoin.</p>
+
+<div class="note"><strong>Note :</strong> La propriété <code>font-family</code> définit une liste de police, ordonnée par priorité, de la plus haute à la plus basse. La sélection de la police ne se fait pas pour l'ensemble du texte mais<strong> caractère par caractère</strong>. Ainsi si une police ne dispose pas du caractère à représenter, ce sera la police suivante qui sera utilisée pour représenter le caractère. Pour Internet Explorer, cela ne fonctionne pas avec la version 6 et les version antérieures.<br>
+<br>
+Les propriétés {{cssxref("font-style")}}, {{cssxref("font-variant")}} et {{cssxref("font-size")}} permettront d'influencer le choix en fonction du style, de la variante ou de la taille disponible parmi les polices de la liste.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Un nom de police suivi d'un nom de famille générique */
+font-family: "Gill Sans Extrabold", sans-serif;
+font-family: "Goudy Bookletter 1911", sans-serif;
+
+/* Un nom de famille de polices générique */
+font-family: serif;
+font-family: sans-serif;
+font-family: monospace;
+font-family: cursive;
+font-family: fantasy;
+font-family: system-ui;
+font-family: emoji;
+font-family: math;
+font-family: fangsong;
+
+/* Valeurs globales */
+font-family: inherit;
+font-family: initial;
+font-family: unset;
+</pre>
+
+<p>La propriété <code>font-family</code> permet de lister différentes familles de police, séparées par des virgules. Chaque nom de famille est une valeur <code><a href="#family-name">&lt;family-name&gt;</a></code> ou <code><a href="#generic-name">&lt;generic-name&gt;</a></code>.</p>
+
+<p>Dans l'exemple suivant, on liste deux familles de police, la première utilise une valeur <code>&lt;family-name&gt;</code> et la seconde utilise une valeur <code>&lt;generic-name&gt;</code> :</p>
+
+<pre class="brush: css;">font-family: Gill Sans Extrabold, sans-serif;</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><a id="family-name" name="family-name"><code>&lt;family-name&gt;</code></a></dt>
+ <dd>Le nom d'une famille de polices ; par exemple « Times » ou « Helvetica » sont des noms de famille de polices. Les noms de familles qui comportent des blancs doivent être encadrées par des doubles quotes (").</dd>
+ <dt><a id="generic-name" name="generic-name"><code>&lt;generic-name&gt;</code></a></dt>
+ <dd>
+ <p>Les noms de famille génériques sont utilisés comme mécanisme de secours pour conserver l'intention de mise en forme de l'auteur lorsqu'aucune des polices indiquées n'est disponible. Les noms de famille génériques sont des mots-clés et ne doivent pas être encadrés par des doubles quotes. Un nom de famille générique devrait être utilisé comme dernier élément de la liste des noms. Les mots-clés suivants sont définis :</p>
+
+ <dl>
+  <dt><code>serif</code></dt>
+  <dd>Les caractères possèdent des <a href="https://fr.wikipedia.org/wiki/Empattement_(typographie)">empattements</a>.<br>
+  Voici des exemples de polices avec empattement : Lucida Bright, Lucida Fax, Palatino, "Palatino Linotype", Palladio, "URW Palladio", serif.</dd>
+  <dt><code>sans-serif</code></dt>
+  <dd>Les caractères n'ont pas d'empattement, leurs extrémités sont anguleuses.<br>
+  Voici des exemples de polices correspondantes : "Open Sans", "Fira Sans", "Lucida Sans", "Lucida Sans Unicode", "Trebuchet MS", "Liberation Sans", "Nimbus Sans L", sans-serif.</dd>
+  <dt><code>monospace</code></dt>
+  <dd>Tous les caractères mesurent la même largeur, on dit que la police est à <a href="https://fr.wikipedia.org/wiki/Chasse_(typographie)">chasse</a> fixe.<br>
+  Les polices "Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace sont à chasse fixe.</dd>
+  <dt><code>cursive</code></dt>
+  <dd>Les caractères des polices cursives possèdent des extrémités permettant de les joindre les uns aux autres, partiellement ou complètement. Cela donne un résultat semblable à l'écriture manuelle au crayon plutôt qu'à des caractères d'imprimerie.<br>
+  Voici quelques exemples de polices cursives : "Brush Script MT", "Brush Script Std", "Lucida Calligraphy", "Lucida Handwriting", "Apple Chancery", cursive.</dd>
+  <dt><code>fantasy</code></dt>
+  <dd>Les polices fantaisie sont des polices décoratives pour lesquelles les caractères sont représentées de façon légère.<br>
+  Les polices suivantes sont des exemples de cette famille : Papyrus, Herculanum, Party LET, Curlz MT, Harrington, fantasy.</dd>
+  <dt><code>system-ui</code></dt>
+  <dd>Les glyphes utilisés sont ceux de l'interface utilisateur par défaut pour le système d'exploitation de la plateforme. Les variantes typographiques différant grandement d'une région à l'autre, cette famille générique est utilisée pour les polices qui ne correspondent pas aux autres familles génériques.</dd>
+  <dt><code>math</code></dt>
+  <dd>Une police utilisée pour les mise en forme relatives aux mathématiques comme les indices, les exposants, les accolades sur plusieurs lignes, etc.</dd>
+  <dt><code>emoji</code></dt>
+  <dd>Une police conçue spécifiquement pour l'affichage des emoji.</dd>
+  <dt><code>fangsong</code></dt>
+  <dd>Un style de caractères chinois particulier se situant entre le style serif Song et la forme cursive Kai. Ce style est généralement utilisé pour les documents officiels du gouvernement.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="Validité_des_noms_de_famille">Validité des noms de famille</h3>
+
+<p>Les noms de famille de polices doivent être encadrés par des doubles ou doivent former une série d'un ou plusieurs identifiants valides. Cela signifie que les signes de ponctuation et les chiffres débutant chaque fragment doivent être échappés pour les noms de famille qui ne sont pas encadrés par des quotes.</p>
+
+<p>Les déclarations suivantes sont valides :</p>
+
+<pre class="brush:css">font-family: "Gill Sans Extrabold", sans-serif;
+font-family: "Goudy Bookletter 1911", sans-serif;</pre>
+
+<p>Et ces déclarations sont <strong>invalides </strong>:</p>
+
+<pre class="brush:css example-bad">font-family: Goudy Bookletter 1911, sans-serif;
+font-family: Red/Black, sans-serif;
+font-family: "Lucida" Grande, sans-serif;
+font-family: Ahem!, sans-serif;
+font-family: test@foo, sans-serif;
+font-family: #POUND, sans-serif;
+font-family: Hawaii 5-0, sans-serif;</pre>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css;">.exempleserif {
+  font-family: Times, "Times New Roman", Georgia, serif;
+}
+
+.exemplesansserif {
+  font-family: Verdana, Arial, Helvetica, sans-serif;
+}
+
+.exemplemonospace {
+  font-family: "Lucida Console", Courier, monospace;
+}
+
+.exemplecursive {
+  font-family: cursive;
+}
+
+.exemplefantasy {
+  font-family: fantasy;
+}
+
+.exempleemoji {
+  font-family: emoji;
+}
+
+.exemplemath {
+  font-family: math;
+}
+
+.exemplefangsong {
+  font-family: fangsong;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="exempleserif"&gt;
+Voici un exemple de police avec empattement (serif).
+&lt;/div&gt;
+
+&lt;div class="exemplesansserif"&gt;
+Voici un exemple de police sans empattement (sans-serif).
+&lt;/div&gt;
+
+&lt;div class="exemplemonospace"&gt;
+Voici un exemple de police à chasse fixe (monospace).
+&lt;/div&gt;
+
+&lt;div class="exemplecursive"&gt;
+Voici un exemple de police cursive.
+&lt;/div&gt;
+
+&lt;div class="exemplefantasy"&gt;
+Voici un exemple de police fantaisie.
+&lt;/div&gt;
+
+&lt;div class="exemplemath"&gt;
+Voici un exemple de police mathématique.
+&lt;/div&gt;
+
+&lt;div class="exempleemoji"&gt;
+Voici un exemple de police emoji.
+&lt;/div&gt;
+
+&lt;div class="exemplefangsong"&gt;
+Voici un exemple de police fangsong.
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples',600,120)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Fonts', '#generic-font-families', 'generic font families')}}</td>
+   <td>{{Spec2('CSS4 Fonts')}}</td>
+   <td>Ajout de nouvelles familles génériques dont : <code>system-ui</code>, <code>emoji</code>, <code>math</code> et <code>fangsong</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#font-family-prop', 'font-family')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Aucune modification significative.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-family', 'font-family')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Aucune modification significative.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#font-family', 'font-family')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.font-family")}}</p>
diff --git a/files/fr/web/css/font-feature-settings/index.html b/files/fr/web/css/font-feature-settings/index.html
new file mode 100644
index 0000000000..d9f28d7379
--- /dev/null
+++ b/files/fr/web/css/font-feature-settings/index.html
@@ -0,0 +1,120 @@
+---
+title: font-feature-settings
+slug: Web/CSS/font-feature-settings
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/font-feature-settings
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>font-feature-settings</code></strong> permet de contrôler les fonctionnalités typographiques des polices OpenType.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/font-feature-settings.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note"><strong>Note :</strong> Lorsque c'est possible, les auteurs devraient utiliser la propriété raccourcie {{cssxref("font-variant")}} ou l'une des propriétés détaillées correspondantes parmi {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-numeric")}} ou {{cssxref("font-variant-position")}}.<br>
+<br>
+Cette propriété est une fonctionnalité bas-niveau permettant de gérer des cas particuliers où il n'y a aucun moyen d'accéder à une fonctionnalité OpenType donnée. Cette propriété CSS ne devrait notamment pas être utilisée pour activer les petites majuscules.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* On utilise le réglage par défaut */
+font-feature-settings: normal;
+
+/* On définit la valeur des étiquettes OpenType */
+font-feature-settings: "smcp";
+font-feature-settings: "smcp" on;
+font-feature-settings: "swsh" 2;
+font-feature-settings: "smcp", "swsh" 2;
+
+/* Valeurs globales */
+font-feature-settings: inherit;
+font-feature-settings: initial;
+font-feature-settings: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Le texte est disposé en utilisant les réglages par défaut.</dd>
+ <dt><code>&lt;feature-tag-value&gt;</code></dt>
+ <dd>Lors du rendu du texte, l'étiquette de fonctionnalité OpenType est passée au moteur afin d'activer ou de désactiver certaines fonctionnalités de la police. L'étiquette est toujours une chaîne (type {{cssxref("&lt;string&gt;")}}) de 4 caractères ASCII. Si la chaîne contient plus ou moins de 4 caractères ou contient des caractères en dehors de l'intervalle U+20 - U+7E, la déclaration sera considérée comme invalide.<br>
+ La valeur associée à l'étiquette est un entier positif. Les deux mots-clés <code>on</code> et <code>off</code> sont des synonymes respectifs des valeurs <code>1</code> et <code>0</code>. Si aucune valeur n'est donnée pour une étiquette, la valeur par défaut sera <code>1</code>. Pour les fonctionnalités OpenType qui ne sont pas booléennees, la valeur implique qu'un glyphe donné soit sélectionné.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:css">/* on utilise les glyphes alternatifs en small-cap */
+.smallcaps { font-feature-settings: "smcp" on; }
+
+/* on convertit les majuscules et minuscules en petites
+   capitales */
+.allsmallcaps { font-feature-settings: "c2sc", "smcp"; }
+
+/* on utilise les zéros barrés d'une barre oblique afin de
+   les différencier de "O" */
+.nicezero { font-feature-settings: "zero"; }
+
+/* on active les formes historiques */
+.hist { font-feature-settings: "hist"; }
+
+/* on désactive les ligatures communément utilisées */
+.noligs { font-feature-settings: "liga" 0; }
+
+/* on active les chiffres tabulaires (chasse fixe) */
+td.tabular { font-feature-settings: "tnum"; }
+
+/* on active les fractions automatiques */
+.fractions { font-feature-settings: "frac"; }
+
+/* on utilise le deuxième caractère de « swash » */
+.swash { font-feature-settings: "swsh" 2; }
+
+/* On active l'ensemble stylistique 7 */
+.fancystyle {
+  font-family: Gabriola; /* Windows 7 et Mac OS */
+  font-feature-settings: "ss07";
+}
+</pre>
+
+<h2 id="Spécificat​ions">Spécificat​ions</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#propdef-font-feature-settings', 'font-feature-settings')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.font-feature-settings")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://www.microsoft.com/typography/otspec/featurelist.htm" title="http://www.microsoft.com/typography/otspec/featurelist.htm">La liste des fonctionnalités OpenType</a></li>
+ <li><a href="http://blogs.msdn.com/b/ie/archive/2012/01/09/css-corner-using-the-whole-font.aspx"><em>Using the whole font</em>, un article MSDN en anglais</a></li>
+</ul>
diff --git a/files/fr/web/css/font-kerning/index.html b/files/fr/web/css/font-kerning/index.html
new file mode 100644
index 0000000000..8f3de1baa0
--- /dev/null
+++ b/files/fr/web/css/font-kerning/index.html
@@ -0,0 +1,116 @@
+---
+title: font-kerning
+slug: Web/CSS/font-kerning
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/font-kerning
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>font-kerning</code></strong> contrôle le crénage de la police ; c'est-à-dire l'espace créé entre les lettres. L'information de crénage est stockée dans la police et si la police est <em>bien crénée</em>, cette caractéristique permet aux caractères, quels qu'ils soient, d'être espacés de manière semblable.<img alt="Exemple pour font-kerning" src="https://mdn.mozillademos.org/files/8455/font-kerning.png" style="display: block; height: 84px; margin: auto; width: 180px;"></p>
+
+<pre class="brush:css  no-line-numbers">font-kerning: auto;
+font-kerning: normal;
+font-kerning: none;
+
+/* Valeurs globales */
+font-kerning: inherit;
+font-kerning: initial;
+font-kerning: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Ce mot-clé laisse au navigateur le choix d'utiliser ou non le crénage. Quand la taille de la police est petite, le crénage de la police peut avoir l'air étrange et les navigateurs le désactiveront. C'est la valeur par défaut.</dd>
+ <dt><code>normal</code></dt>
+ <dd>Ce mot-clé force l'application du crénage.</dd>
+ <dt><code>none</code></dt>
+ <dd>Ce mot-clé empêche le navigateur d'utiliser l'information de crénage stockée dans la police.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#nokern, #kern {
+  font-size: 2rem;
+  font-family: serif;
+}
+#nokern {
+  font-kerning: none;
+}
+#kern {
+  font-kerning: normal;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="kern"&gt;&lt;/div&gt;
+&lt;div id="nokern"&gt;&lt;/div&gt;
+&lt;textarea id="input"&gt;AV T. ij&lt;/textarea&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var input  = document.getElementById('input'),
+    kern   = document.getElementById('kern'),
+    nokern = document.getElementById('nokern');
+input.addEventListener('keyup', function() {
+  kern.textContent = input.value; /* On met à jour le contenu */
+  nokern.textContent = input.value;
+});
+kern.textContent = input.value; /* On initialise le contenu */
+nokern.textContent = input.value;
+</pre>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#propdef-font-kerning', 'font-kerning')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.font-kerning")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("font-variant")}}</li>
+ <li>{{cssxref("font-variant-position")}}</li>
+ <li>{{cssxref("font-variant-east-asian")}}</li>
+ <li>{{cssxref("font-variant-caps")}}</li>
+ <li>{{cssxref("font-variant-ligatures")}}</li>
+ <li>{{cssxref("font-variant-numeric")}}</li>
+ <li>{{cssxref("font-variant-alternates")}}</li>
+ <li>{{cssxref("font-synthesis")}}</li>
+ <li>{{cssxref("letter-spacing")}}.</li>
+</ul>
diff --git a/files/fr/web/css/font-language-override/index.html b/files/fr/web/css/font-language-override/index.html
new file mode 100644
index 0000000000..510a83a222
--- /dev/null
+++ b/files/fr/web/css/font-language-override/index.html
@@ -0,0 +1,111 @@
+---
+title: font-language-override
+slug: Web/CSS/font-language-override
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/font-language-override
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>font-language-override</code></strong> permet de contrôler l'utilisation des glyphes spécifiques à une langue pour une police.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeur avec un mot-clé */
+font-language-override: normal;
+
+/* &lt;string&gt; values */
+font-language-override: "ENG";  /* Use English glyphs */
+font-language-override: "TRK";  /* Use Turkish glyphs */
+/* Valeurs globales */
+font-language-override: initial;
+font-language-override: inherit;
+font-language-override: unset;
+</pre>
+
+<p>Par défaut, les navigateurs utilisent l'attribut global {{htmlattrxref("lang")}} pour déterminer la langue du texte d'un élément. Grâce à cette information, certains glyphes spéciaux, conçus pour cette langue, peuvent être utilisés. Ainsi, de nombreuses polices possèdent un caractère spécial pour la ligature <code>fi</code> afin que le point du <code>i</code> fusionne avec le caractère précédent. Cette ligature ne devrait pas être utilisée en turc, car il existe deux formes pour le i, avec et sans point : <code>i</code> et <code>ı</code>.</p>
+
+<p>Quelques fois, l'auteur d'un document peut vouloir surcharger la langue. Ainsi, si la fonte ne sait pas que la langue azérie possède un i sans point, comme le turc, on pourra utiliser <code>font-language-override</code> pour forcer l'utilisation des glyphes turcs qui seront plus adaptés que les glyphes par défaut.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Cette propriété est définie avec le mot-clé <code>normal</code> ou avec une chaîne de caractères (<code>&lt;string&gt;</code>).</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Ce mot-clé force l'utilisation des glyphes de la langue définie pour cette police.</dd>
+ <dt><code>&lt;string&gt;</code></dt>
+ <dd>Cette chaîne de caractère force le navigateur à utiliser les glyphes de la langue correspondante. Les valeurs qui peuvent être utilisées sont <a href="https://www.microsoft.com/typography/otspec/languagetags.htm">les valeurs du système de langue OpenType</a>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p.para1 {
+  font-language-override: normal;
+}
+
+p.para2 {
+  font-language-override: "DAN";
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="para1"&gt;Réglage par défaut.&lt;/p&gt;
+&lt;p class="para2"&gt;
+  Un paragraphe pour lequel  &lt;code&gt;font-language-override&lt;/code&gt;
+  cible le danois
+&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '600')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#propdef-font-language-override', 'font-language-override')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.font-language-override")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("font-variant")}}</li>
+ <li>{{cssxref("font-variant-position")}}</li>
+ <li>{{cssxref("font-variant-east-asian")}}</li>
+ <li>{{cssxref("font-variant-caps")}}</li>
+ <li>{{cssxref("font-variant-ligatures")}}</li>
+ <li>{{cssxref("font-variant-numeric")}}</li>
+ <li>{{cssxref("font-variant-alternates")}}</li>
+ <li>{{cssxref("font-synthesis")}}</li>
+ <li>{{cssxref("font-kerning")}}</li>
+</ul>
diff --git a/files/fr/web/css/font-optical-sizing/index.html b/files/fr/web/css/font-optical-sizing/index.html
new file mode 100644
index 0000000000..9619a3bdf1
--- /dev/null
+++ b/files/fr/web/css/font-optical-sizing/index.html
@@ -0,0 +1,102 @@
+---
+title: font-optical-sizing
+slug: Web/CSS/font-optical-sizing
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/font-optical-sizing
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>font-optical-sizing</code></strong> permet de contrôler la façon dont l'agent utilisateur rend le texte avec (ou non) différentes représentations visuelles en fonction de la taille.  Cette propriété ne fonctionne qu'avec les polices qui disposent d'un axe de variation pour la taille optique.</p>
+
+<p>Par exemple, les textes de petites tailles sont généralement affichés avec des traits plus épais et des empattements (<em>serifs</em>) plus grands. En revanche, les textes plus grands sont souvent plus fins et utilisent plus de contrastes entre les traits fins et épais.</p>
+
+<div class="note">
+<p><strong>Note</strong> : L'axe de variation pour la taille optique est représenté par <code>opsz</code> dans {{cssxref("font-variation-settings")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+font-optical-sizing: none;
+font-optical-sizing: auto; /* valeur initiale */
+
+/* Valeurs globales */
+font-optical-sizing: inherit;
+font-optical-sizing: initial;
+font-optical-sizing: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>L'agent utilisateur ne modifiera pas la forme des glyphes pour une vue optimale.</dd>
+ <dt><code>auto</code></dt>
+ <dd>L'agent utilisateur modifiera la forme des glyphes pour une vue optimale.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@font-face {
+    src: url('AmstelvarAlpha-VF.ttf');
+    font-family:'Amstelvar';
+    font-style: normal;
+}
+
+p {
+  font-size: 36px;
+  font-family: Amstelvar;
+}
+
+.no-optical-sizing {
+  font-optical-sizing: none;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="optical-sizing"&gt;Ce paragraphe est dimensionné pour une meilleure
+ lecture. C'est le comportement par défaut.&lt;/p&gt;
+
+&lt;p class="no-optical-sizing"&gt;Ce paragraphe n'est pas adapté pour une
+ meilleure lecture. Vous devriez voir une différence avec les navigateurs
+ qui prennent en charge cette fonctionnalité.&lt;/p&gt;</pre>
+
+<div class="note">
+<p><strong>Note</strong> : La police utilisée dans cet exemple possède un dimensionnement optique et est disponible sous licence libre <a href="https://github.com/TypeNetwork/Amstelvar/releases">en téléchargement sur GitHub</a>.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Fonts', '#font-optical-sizing-def', 'font-optical-sizing')}}</td>
+   <td>{{Spec2('CSS4 Fonts')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.font-optical-sizing")}}</p>
diff --git a/files/fr/web/css/font-size-adjust/index.html b/files/fr/web/css/font-size-adjust/index.html
new file mode 100644
index 0000000000..387d535277
--- /dev/null
+++ b/files/fr/web/css/font-size-adjust/index.html
@@ -0,0 +1,140 @@
+---
+title: font-size-adjust
+slug: Web/CSS/font-size-adjust
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/font-size-adjust
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>font-size-adjust</code></strong> permet de choisir une taille de police selon la taille des caractères en minuscules plutôt que selon la taille des majuscules.</p>
+
+<pre class="brush:css  no-line-numbers">/* On utilise la taille de fonte définie */
+font-size-adjust: none;
+
+/* On utilise une fonte pour laquelle
+   les minuscules font la moitié de la
+   taille définie */
+/* Type &lt;number&gt; */
+font-size-adjust: 0.5;
+
+/* Valeurs globales */
+font-size-adjust: inherit;
+font-size-adjust: initial;
+font-size-adjust: unset;
+</pre>
+
+<p>Cela est particulièrement utile lorsque la lisibilité des fontes, notamment celles de petite taille, est déterminée par la taille des minuscules plutôt que par celle des majuscules.</p>
+
+<p>La lisibilité peut devenir un problème lorsque la première police indiquée par {{cssxref("font-family")}} n'est pas disponible et que la police de remplacement possède un facteur de forme très différent (ce facteur correspond au ratio de la taille des minuscules sur la taille de la fonte).</p>
+
+<p>Pour utiliser cette propriété d'une façon compatible avec les navigateurs qui ne prennent pas en charge <code>font-size-adjust</code>, on définira le facteur par lequel on multiplie la valeur de la propriété {{Cssxref("font-size")}}. Cela signifie généralement que la propriété doit correspondre au facteur de forme de la première fonte. Ainsi, lorsqu'une feuille de style définit :</p>
+
+<pre class="brush: css">font-size: 14px;
+font-size-adjust: 0.5;
+</pre>
+
+<p>On indique en fait que les minuscules de la fonte utilisée doivent mesurer <code>7px</code> de haut (0.5 × 14px).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>La taille de la fonte est uniquement choisie grâce à la propriété {{cssxref("font-size")}}.</dd>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>
+ <p>La taille de la fonte est choisie afin que les minuscules (selon la taille horizontale de la fonte) mesurent X fois {{cssxref("font-size")}}.</p>
+
+ <p>Le nombre indiqué (cf. le type {{cssxref("&lt;number&gt;")}}) devrait la plupart du temps correspondre au facteur de forme de la première fonte listée avec {{cssxref("font-family")}}. Cela permet d'obtenir le même résultat dans les différents navigateurs, qu'ils supportent <code>font-size-adjust</code> ou non.</p>
+
+ <p><code>0</code> entraînera une haute nulle pour le texte (qui sera donc caché). Pour d'anciens navigateurs, comme Firefox avant la version 40, <code>0</code> était géré comme <code>none</code>.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Exemples pour &lt;code&gt;font-size-adjust&lt;/code&gt;&lt;/p&gt;
+
+&lt;p class="times"&gt;
+  Voici la fonte Times sur 10 px,
+  difficile à lire en petit.
+&lt;/p&gt;
+
+&lt;p class="verdana"&gt;
+  Voici la fonte Verdana sur 10px,
+  plus lisible car sans empattement
+  (serif).
+&lt;/p&gt;
+
+&lt;p class="adjtimes"&gt;
+  et voilà le texte ajusté pour
+  avoir le même facteur de forme
+  qu'avec Verdana.
+&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.times {
+  font-family: Times, serif;
+  font-size: 10 px;
+}
+
+.verdana {
+  font-family: Verdana, sans-serif;
+  font-size: 10 px;
+}
+
+.adjtimes {
+  font-family: Times, serif;
+  font-size-adjust: 0.58;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '500', '300')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#propdef-font-size-adjust', 'font-size-adjust')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>La propriété CSS <code>font-size-adjust</code> fut initialement définie avec CSS 2 mais a été abandonnée dans CSS 2.1. Elle a de nouveau été définie avec CSS 3.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.font-size-adjust")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144885" title="Link to Bugzilla bug 1144885">Un billet de David Baron sur <code>font-size-adjust</code> (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/font-size/index.html b/files/fr/web/css/font-size/index.html
new file mode 100644
index 0000000000..8b9a61693f
--- /dev/null
+++ b/files/fr/web/css/font-size/index.html
@@ -0,0 +1,242 @@
+---
+title: font-size
+slug: Web/CSS/font-size
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/font-size
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>font-size</code></strong> définit la taille de fonte utilisée pour le texte. La modification de cette taille peut entraîner la modification de la taille d'autres éléments car elle est utilisée pour calculer les valeurs des longueurs relatives (type {{cssxref("&lt;length&gt;")}}) (par exemple exprimées avec les unités <code>em</code> ou <code>ex</code>).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/font-size.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* Valeurs dont la taille est absolue */
+font-size: xx-small;
+font-size: x-small;
+font-size: small;
+font-size: medium;
+font-size: large;
+font-size: x-large;
+font-size: xx-large;
+
+/* Valeurs relatives */
+font-size: larger;
+font-size: smaller;
+
+/* Valeurs de longueurs */
+/* Type &lt;length&gt;        */
+font-size: 12px;
+font-size: 0.8em;
+
+/* Valeurs proportionnelles */
+/* Type &lt;percentage&gt;        */
+font-size: 80%;
+
+/* Valeurs globales */
+font-size: inherit;
+font-size: initial;
+font-size: unset;
+</pre>
+
+<p>La propriété <code>font-size</code> peut être définie de deux façons :</p>
+
+<ul>
+ <li>Comme un mot-clé désignant <a href="#absolue">une taille absolue</a> ou <a href="#relative">une taille relative</a></li>
+ <li>Comme une valeur de type <code>&lt;length&gt;</code> ou de <code>&lt;percentage&gt;</code></li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><a id="absolue" name="absolue"><code>xx-small, x-small, small, medium, large, x-large, xx-large</code></a></dt>
+ <dd>Un ensemble de mots-clés désignant des valeurs absolues basées sur la taille par défaut de l'utilisateur (qui vaut <code>medium</code>). Le comportement est analogue à ce qu'on obtient en utilisant le code HTML <code>&lt;font size="1"&gt;</code> à <code>&lt;font size="7"&gt;</code> lorsque la taille par défaut de l'utilisateur vaut <code>&lt;font size="4"&gt;</code>.</dd>
+ <dt><a id="relative" name="relative"><code>larger, smaller</code></a></dt>
+ <dd>La taille de la fonte est plus grande (<code>larger</code>) ou plus petite (<code>smaller</code>) que celle de l'élément parent. Le ratio d'agrandissement/réduction est le même que celui qui sépare les mots-clés présentés avant.</dd>
+ <dt><a id="lp" name="lp"><code>&lt;length&gt;</code></a></dt>
+ <dd>Une longueur positive (type {{cssxref("&lt;length&gt;")}} ou un pourcentage (type {{cssxref("&lt;percentage&gt;")}}). Lorsque les valeurs sont exprimées avec les unités <code>em</code> ou <code>ex</code>, la taille est alors relative à la taille de la fonte de l'élément parent. Ainsi, une valeur de <code>0.5em</code> indiquera que la taille de fonte pour l'élément courant est la moitié de celle utilisée pour l'élément parent. Lorsque l'unité utilisée est <code>rem</code>, la taille est alors relative à la taille de la fonte utilisée pour l'élément racine <code>html</code>.</dd>
+ <dt><a id="lp" name="lp"><code>&lt;percentage&gt;</code></a></dt>
+ <dd>Les valeurs exprimées en pourcentages (type {{cssxref("&lt;percentage&gt;")}}) sont proportionnelles à la taille de fonte de l'élément parent.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> Il est généralement préférable d'utiliser des valeurs relatives à la taille par défaut choisie par l'utilisateur.</p>
+</div>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Les_différentes_approches">Les différentes approches</h2>
+
+<p>Plusieurs méthodes existent pour définir la taille de fonte utilisée : des mots-clés ou des valeurs numériques exprimées en pixels ou en ems. Selon les besoins, on utilisera une méthode différente.</p>
+
+<h3 id="Les_mots-clés">Les mots-clés</h3>
+
+<p>Les mots-clés sont une méthode simple et efficace pour déterminer la taille de fonte à utiliser. En utilisant un mot-clé sur l'élément {{HTMLElement("body")}}, on peut définir des tailles relatives sur toute la page et réduire ou augmenter la taille de la fonte en conséquence.</p>
+
+<h3 id="Les_pixels">Les pixels</h3>
+
+<p>L'utilisation des pixels (<code>px</code>) permet d'obtenir un résultat statique, absolu et indépendant du système d'exploitation et du navigateur. Cependant, cette méthode est déconseillée car elle n'est pas accessible. Ainsi, les utilisateurs ne peuvent pas adapter la taille du texte avec leurs réglages si besoin.</p>
+
+<h3 id="Les_ems">Les ems</h3>
+
+<p>On peut également définir la taille de la fonte en <code>em</code>. La taille d'une valeur exprimée en <code>em</code> est dynamique. Lorsqu'on définit la propriété <code>font-size</code>, un <code>em</code> est équivalent à la taille de fonte appliquée à l'élément parent de l'élément courant. Si cette taille n'a pas été définie pour l'élément parent, elle correspondra à la taille par défaut du navigateur (généralement 16px). Ainsi, si on définit <code>font-size</code> avec une valeur de <code>20px</code> sur l'élément <code>body</code>, <code>1em</code> correspondra à <code>20px</code> et <code>2em</code> à <code>40px</code>. Ici, la valeur 2 est un facteur multiplicateur de la taille.</p>
+
+<p>Pour calculer une équivalence entre <code>em</code> et un résultat exprimé en pixels, on peut utiliser cette formule :</p>
+
+<pre class="brush: css notranslate">em = taille visée en px / font-size du parent en pixels</pre>
+
+<p>Ainsi, si la taille <code>font-size</code> de <code>body</code> vaut <code>1em</code> et que l'échelle par défaut du navigateur indique <code>1em</code> = <code>16px</code> et qu'on souhaite obtenir une <code>font-size</code> équivalente à <code>12px</code>, on pourra utiliser la valeur <code>0.75em</code> (car 12/16 = 0.75). De même, si on veut une taille analogue à <code>10px</code>, on utilisera <code>0.625em</code> (10/16 = 0.625).</p>
+
+<p>L'unité <code>em</code> est très utile car elle s'adapte automatiquement à la taille de fonte choisie par l'utilisateur.</p>
+
+<p>Un autre aspect important est la <strong>composition</strong> des valeurs exprimées avec cette unité. Si on prend le fragment HTML suivant :</p>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+  &lt;span&gt;
+    Extérieur
+      &lt;span&gt;Intérieur&lt;/span&gt;
+    Extérieur
+  &lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Et qu'on applique la feuille de style suivante :</p>
+
+<pre class="brush: css notranslate">body {
+  font-size: 62.5%;
+}
+span {
+  font-size: 1.6em;
+}</pre>
+
+<p>On obtiendra le résultat suivant :</p>
+
+<p>{{EmbedLiveSample("Les_ems", 400, 40)}}</p>
+
+<p>Si la taille par défaut du navigateur est 16px, le mot « Extérieur » sera affiché avec 16 pixels et le mot « Intérieur » sera affiché avec 25.6 pixes. En effet, la taille de <code>font-size</code> pour le bloc <code>span</code> vaut <code>1.6em</code> et cette valeur est relative à la valeur de <code>font-size</code> pour son élément parent, elle-même relative à la valeur de <code>font-size</code> pour son élément parent. C'est ce qu'on appelle <strong>la composition</strong>.</p>
+
+<h3 id="Les_rems">Les rems</h3>
+
+<p>L'unité <code>rem</code> a été conçue pour régler les problèmes engendrés par la composition. Les valeurs exprimées en <code>rem</code> sont relatives à l'élément {{HTMLElement("html")}} et pas à l'élément parent. Autrement dit, cette unité permet d'exprimer une taille relative sans être impacté par la taille de l'élément parent, court-circuitant ainsi la composition.</p>
+
+<p>La feuille de style qui suit ressemble fortement à celle utilisée dans l'exemple précédent, on a simplement remplacé l'unité par <code>rem</code>.</p>
+
+<pre class="brush: css notranslate">html {
+  font-size: 62.5%;
+}
+span {
+  font-size: 1.6rem;
+}
+</pre>
+
+<p>On utilisera le même fragment de HTML :</p>
+
+<pre class="brush: html notranslate">&lt;span&gt;
+  Extérieur
+    &lt;span&gt;Intérieur&lt;/span&gt;
+  Extérieur
+&lt;/span&gt;</pre>
+
+<p>{{EmbedLiveSample("Les_rems", 400, 40)}}</p>
+
+<p>Dans cet exemple, si la taille par défaut du navigateur vaut <code>16px</code>, tous les mots seront affichés avec une hauteur de <code>16px</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Premiers_exemples">Premiers exemples</h3>
+
+<pre class="brush: css notranslate">/* Le paragraphe sera écrit avec une grande */
+/* fonte.                                   */
+p { font-size: xx-large }
+
+/* La taille du texte des h1 sera 2.5 fois plus */
+/* grande que le texte autour.                  */
+h1 { font-size: 250% }
+
+/* Le texte contenu dans des éléments span */
+/* mesurera 16px                           */
+span { font-size: 16px; }
+</pre>
+
+<h3 id="Démonstration">Démonstration</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">.small {
+  font-size: xx-small;
+}
+.larger {
+  font-size: larger;
+}
+.point {
+  font-size: 24pt;
+}
+.percent {
+  font-size: 200%;
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;h1 class="small"&gt;Petit H1&lt;/h1&gt;
+&lt;h1 class="larger"&gt;H1 plus grand&lt;/h1&gt;
+&lt;h1 class="point"&gt;H1 de 24 points&lt;/h1&gt;
+&lt;h1 class="percent"&gt;H1 à 200%&lt;/h1&gt;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Démonstration','600','200')}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Les unités <code>em</code> et <code>ex</code> pour la propriété {{Cssxref("font-size")}} sont relatives à la taille de la fonte de l'élément parent. Pour les autres propriétés, en utilisant ces unités, on aura une valeur relative à la taille de fonte de l'élément courant. Cela signifie que les valeurs exprimées en <code>em</code> ou en pourcents ont le même comportement pour {{cssxref("font-size")}}.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#font-size-prop', 'font-size')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'font-size')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>font-size</code> peut désormais être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-size', 'font-size')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#font-size', 'font-size')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.font-size")}}</p>
diff --git a/files/fr/web/css/font-smooth/index.html b/files/fr/web/css/font-smooth/index.html
new file mode 100644
index 0000000000..92571bb8b7
--- /dev/null
+++ b/files/fr/web/css/font-smooth/index.html
@@ -0,0 +1,73 @@
+---
+title: font-smooth
+slug: Web/CSS/font-smooth
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/font-smooth
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété <strong><code>font-smooth</code></strong> permet de contrôler l'application d'algorithmes anti-crénelage (<em>anti-aliasing</em>) sur le rendu des fontes de caractères.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css">/* Valeurs avec mot-clé */
+font-smooth: auto;
+font-smooth: never;
+font-smooth: always;
+
+/* Valeurs de type &lt;length&gt; */
+font-smooth: 2em;
+</pre>
+
+<div class="note">
+<p><strong>Webkit</strong> implémente <strong><code>-webkit-font-smoothing</code></strong> avec d'autres valeurs, <strong>là aussi c'est une propriété non-standard qui ne devrait pas être utilisée</strong>.</p>
+
+<ul>
+ <li><code>auto</code> : c'est le navigateur qui décide la meilleure approche</li>
+ <li><code>none</code> - l'anti-crénelage est désactivé.</li>
+ <li><code>antialiased </code> - lisse les caractères au niveau du pixel (et non par sous-échantillonnage). Pour des textes clairs sur fonds sombres, cette méthode fait paraître le texte plus clair.</li>
+ <li><code>subpixel-antialiased</code> - sur la plupart des affichages non-Retina, cela donnera le texte le plus lisse.</li>
+</ul>
+</div>
+
+<div class="note">
+<p><strong>Firefox</strong> implémente <strong><code>-moz-osx-font-smoothing</code></strong> avec d'autres valeurs, <strong>là aussi c'est une propriété non-standard qui ne devrait pas être utilisée</strong>.</p>
+
+<ul>
+ <li><code>auto</code> - le choix est laissé au navigateur. Cela correspond généralement à <code>grayscale</code>.</li>
+ <li><code>grayscale</code> - On applique un anti-crénelage par niveau de gris (et non par sous-échantillonnage). Pour des textes clairs sur fonds sombres, cette méthode fait paraître le texte plus clair.</li>
+</ul>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Bien que mentionnée dans les premiers brouillons pour <a href="http://www.w3.org/TR/WD-font/#font-smooth" title="http://www.w3.org/TR/WD-font/#font-smooth">CSS3 Fonts</a>, <code>font-smooth</code> a été retirée de cette spécification et ne fait plus partie du standard.</p>
+
+<p> </p>
+
+<ul>
+ <li>Valeur initiale : <code>auto</code></li>
+ <li>S'applique à tous les éléments et au contenu généré</li>
+ <li>Héritée : oui</li>
+ <li>Valeurs relatives : par rapport à la taille de police utilisée sur l'élément parent</li>
+ <li>Type de média : Visuel</li>
+ <li>Valeur calculée : comme la valeur définie</li>
+</ul>
+
+<p> </p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.font-smooth")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/">Il faut arrêter de vouloir « réparer » le lissage des fontes – UsabilityPost (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/font-stretch/index.html b/files/fr/web/css/font-stretch/index.html
new file mode 100644
index 0000000000..10ade6d4e5
--- /dev/null
+++ b/files/fr/web/css/font-stretch/index.html
@@ -0,0 +1,286 @@
+---
+title: font-stretch
+slug: Web/CSS/font-stretch
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/font-stretch
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>font-stretch</code></strong> permet de choisir entre la forme normale, condensée ou étendue d'une police.</p>
+
+<pre class="brush:css no-line-numbers notranslate">/* Valeurs avec un mot-clé */
+font-stretch: ultra-condensed;
+font-stretch: extra-condensed;
+font-stretch: condensed;
+font-stretch: semi-condensed;
+font-stretch: normal;
+font-stretch: semi-expanded;
+font-stretch: expanded;
+font-stretch: extra-expanded;
+font-stretch: ultra-expanded;
+
+/* Valeurs en pourcentage */
+font-stretch: 50%;
+font-stretch: 100%;
+font-stretch: 200%;
+
+/* Valeurs globales */
+font-stretch: inherit;
+font-stretch: initial;
+font-stretch: unset;
+</pre>
+
+<p>Certaines polices possèdent différentes fontes pour lesquelles les caractères sont plus étroits (fontes <em>condensées</em>) et d'autres pour lesquelles les caractères sont plus amples (fontes <em>étendues</em>).</p>
+
+<p><code>font-stretch</code> permet de choisir entre les versions condensées ou étendues d'une police. Si la police utilisée ne possède pas de fonte utilisant cet axe de variation, elle n'aura aucun effet.</p>
+
+<p>Voir la section ci-après qui illustre l'effet de cette propriété sur certaines polices.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Cette propriété peut être définie avec un mot-clé ou avec une valeur exprimée en pourcentages (cf. {{cssxref("&lt;percentage&gt;")}}).</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Permet de choisir une fonte normale.</dd>
+ <dt><code>semi-condensed</code>, <code>condensed</code>, <code>extra-condensed</code>, <code>ultra-condensed</code></dt>
+ <dd>Permet de choisir une fonte plus resserrée que la normale, <code>ultra-condensed</code> correspond à la forme la plus condensée.</dd>
+ <dt><code>semi-expanded</code>, <code>expanded</code>, <code>extra-expanded</code>, <code>ultra-expanded</code></dt>
+ <dd>Permet de choisir une fonte plus étendue que la normale, <code>ultra-expanded</code> correspond à la forme la plus étirée.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;percentage&gt;")}} entre 50% et 200% qui permet de définir la largeur de la police. Les valeurs négatives ne sont pas autorisées pour cette  propriété.</dd>
+</dl>
+
+<p>Dans les anciennes versions de la spécification de <code>font-stretch</code>, seuls les mots-clés étaient acceptés comme valeurs. Avec la spécification <em>CSS Fonts</em> de niveau 4, cette propriété peut également être définie avec un pourcentage. Cela permet d'obtenir un contrôle plus fin sur la largeur. Attention toutefois à la compatibilité car certains navigateurs ne prennent pas encore en charge cette fonctionnalité (cf. la section en fin d'article).</p>
+
+
+
+<h3 id="Correspondance_entre_les_mots-clés_et_les_valeurs_numériques">Correspondance entre les mots-clés et les valeurs numériques</h3>
+
+<p>Le tableau suivant indique les correspondances entre les valeurs sous la forme de mots-clés et celles exprimées en pourcentages :</p>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Mot-clé</th>
+   <th scope="col">Pourcentage</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>ultra-condensed</code></td>
+   <td>50%</td>
+  </tr>
+  <tr>
+   <td><code>extra-condensed</code></td>
+   <td>62.5%</td>
+  </tr>
+  <tr>
+   <td><code>condensed</code></td>
+   <td>75%</td>
+  </tr>
+  <tr>
+   <td><code>semi-condensed</code></td>
+   <td>87.5%</td>
+  </tr>
+  <tr>
+   <td><code>normal</code></td>
+   <td>100%</td>
+  </tr>
+  <tr>
+   <td><code>semi-expanded</code></td>
+   <td>112.5%</td>
+  </tr>
+  <tr>
+   <td><code>expanded</code></td>
+   <td>125%</td>
+  </tr>
+  <tr>
+   <td><code>extra-expanded</code></td>
+   <td>150%</td>
+  </tr>
+  <tr>
+   <td><code>ultra-expanded</code></td>
+   <td>200%</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Sélection_de_la_fonte">Sélection de la fonte</h3>
+
+<p>La fonte sélectionnée pour une valeur <code>font-stretch</code> dépend des fontes prises en charge par la police. Si la police ne fournit pas de fonte qui corresponde à la valeur exacte, le navigateur utilisera une fonte condensée si la valeur est inférieure à 100% et une fonte étendue si la valeur est supérieure à 100%.</p>
+
+<p>Le tableau qui suit illustre l'effet des différents pourcentage avec deux polices possédant différentes fontes :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row"></th>
+   <th scope="col">50%</th>
+   <th scope="col">62.5%</th>
+   <th scope="col">75%</th>
+   <th scope="col">87.5%</th>
+   <th scope="col">100%</th>
+   <th scope="col">112.5%</th>
+   <th scope="col">125%</th>
+   <th scope="col">150%</th>
+   <th scope="col">200%</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Helvetica Neue</th>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16039/Screenshot_2018-06-06_example_page.png" style="height: 59px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16039/Screenshot_2018-06-06_example_page.png" style="height: 59px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16039/Screenshot_2018-06-06_example_page.png" style="height: 59px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16039/Screenshot_2018-06-06_example_page.png" style="height: 59px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16040/Screenshot_2018-06-06_example_page1.png" style="height: 58px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16040/Screenshot_2018-06-06_example_page1.png" style="height: 58px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16040/Screenshot_2018-06-06_example_page1.png" style="height: 58px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16040/Screenshot_2018-06-06_example_page1.png" style="height: 58px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16040/Screenshot_2018-06-06_example_page1.png" style="height: 58px; width: 45px;"></td>
+  </tr>
+  <tr>
+   <th scope="row">League Mono Variable</th>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16030/Screenshot_2018-06-06_example_page.png" style="height: 58px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16031/Screenshot_2018-06-06_example_page1.png" style="height: 58px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16032/Screenshot_2018-06-06_example_page2.png" style="height: 58px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16033/Screenshot_2018-06-06_example_page3.png" style="height: 58px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16034/l-100.png" style="height: 58px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16035/l-112.5.png" style="height: 58px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16036/l-125.png" style="height: 58px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16037/l-150.png" style="height: 58px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16038/l-200.png" style="height: 58px; width: 45px;"></td>
+  </tr>
+ </tbody>
+</table>
+
+<ul>
+ <li>Helvetica Neue est installée par défaut sur macOS et possède une seule fonte condensée en plus de la fonte normale. On voit dans ce tableau que les valeurs de <code>font-stretch</code> inférieures à 100% utilisent une fonte condensée alors que les autres valeurs utilisent la fonte normale.</li>
+ <li><a href="http://tylerfinck.com/leaguemonovariable/">League Mono Variable</a> est une police variable qui offre plusieurs variantes de fontes sur cet axe et on peut alors observer les variations de <code>font-stretch</code> selon les pourcentages choisis.</li>
+</ul>
+
+<p>Pour les polices variables TrueType ou OpenType, c'est l'axe de variation <code>wdth</code> qui implémente ces largeurs variables.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Avec_un_mot-clé">Avec un mot-clé</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p class="stretch"&gt;Le texte est plus étiré.&lt;/p&gt;
+&lt;p class="condensed"&gt;Le texte est plus resserré.&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">.stretch {
+  font-stretch: extra-expanded;
+}
+
+.condensed {
+  font-stretch: condensed;
+}</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Avec_un_mot-clé', '500')}}</p>
+
+<h3 id="Avec_un_pourcentage">Avec un pourcentage</h3>
+
+<p>Note : cet exemple ne fonctionnera uniquement avec les navigateurs qui prennent en charge les valeurs <code>&lt;percentage&gt;</code>.</p>
+
+<div id="variable-font-demo">
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="container"&gt;
+  &lt;p class="condensed"&gt;an elephantine lizard&lt;/p&gt;
+  &lt;p class="normal"&gt;an elephantine lizard&lt;/p&gt;
+  &lt;p class="expanded"&gt;an elephantine lizard&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">/*
+Cet exemple utilise la police League Mono Variable, développée par
+Tyler Finck (https://www.tylerfinck.com/) et utilisée ici selon
+la licence SIL Open Font, Version 1.1 :
+http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web
+*/
+
+@font-face {
+  src: url('https://mdn.mozillademos.org/files/16014/LeagueMonoVariable.ttf');
+  font-family:'LeagueMonoVariable';
+  font-style: normal;
+  font-stretch: 1% 500%; /* Nécessaire pour Chrome */
+}
+
+.container {
+  border: 10px solid #f5f9fa;
+  padding: 0 1rem;
+  font: 1.5rem 'LeagueMonoVariable', sans-serif;
+}
+
+.condensed {
+  font-stretch: 50%;
+}
+
+.normal {
+  font-stretch: 100%;
+}
+
+.expanded {
+  font-stretch: 200%;
+}
+
+</pre>
+</div>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("variable-font-demo", 1200, 250, "", "", "example-outcome-frame")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Fonts', '#propdef-font-stretch', 'font-stretch')}}</td>
+   <td>{{Spec2('CSS4 Fonts')}}</td>
+   <td>Ajout des valeurs <code>&lt;percentage&gt;</code> pour les polices variables.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#propdef-font-stretch', 'font-stretch')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note :</strong> La propriété CSS <code>font-stretch</code> fut d'abord définie par CSS 2, mais elle a été abandonnée avec CSS 2.1 par manque d'implémentation. Elle fut redéfinie avec CSS 3.</p>
+</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.font-stretch")}}</p>
diff --git a/files/fr/web/css/font-style/index.html b/files/fr/web/css/font-style/index.html
new file mode 100644
index 0000000000..d1807d4ff1
--- /dev/null
+++ b/files/fr/web/css/font-style/index.html
@@ -0,0 +1,235 @@
+---
+title: font-style
+slug: Web/CSS/font-style
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/font-style
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété<strong> <code>font-style</code></strong> permet de sélectionner une fonte italique (<code>italic</code>) ou (<code>oblique</code>) parmi celles listées par {{cssxref("font-family")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/font-style.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La forme <strong>italique</strong> est généralement une forme cursive qui utilise moins d'espace horizontal que les autres formes classiques. La forme <strong>oblique</strong> quant à elle est simplement une version penchée de la forme normale. Les formes italique et oblique peuvent être synthétisées par le navigateur si elles sont absente (le moteur penche alors les glyphes de la forme normale), pour plus d'informations sur l'activation de cette synthèse, voir la propriété {{cssxref("font-synthesis")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <code>font-style</code> peut être définie avec l'un des mots-clés suivants.</p>
+
+<pre class="brush:css no-line-numbers">font-style: normal;
+font-style: italic;
+font-style: oblique;
+font-style: oblique 10deg;
+
+/* Valeurs globales */
+font-style: inherit;
+font-style: initial;
+font-style: unset;
+</pre>
+
+<p>La propriété <code>font-style</code> s'utilise avec un mot-clé parmi ceux qui suivent. Si ce mot-clé est <code>oblique</code>, il peut également être suivi de l' angle.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Sélectionne une police qualifiée de <code>normal</code> parmi celles de {{cssxref("font-family")}}.</dd>
+ <dt><code>italic</code></dt>
+ <dd>Sélectionne une police qualifiée d'<code>italic</code>, s'il n'y a pas de version italique, une version <code>oblique</code> sera sélectionnée à la place.</dd>
+ <dt><code>oblique</code></dt>
+ <dd>Sélectionne une police qualifiée d'<code>oblique</code>, s'il n'y a pas de version oblique, une version <code>italic</code> sera sélectionnée à la place.</dd>
+ <dt><code>oblique</code> <code>&lt;angle&gt;</code></dt>
+ <dd>Sélectionne une police qualifiée d'<code>oblique</code> et indique l'angle à utiliser pour la pente du texte. Si plusieurs fontes sont disponible pour la police, c'est la fonte avec la pente la plus proche qui est utilisée. Si aucune police oblique n'est disponible, le navigateur <em>synthétisera</em> une police penchée en tournant les caractères d'une fonte normale.<br>
+ L'angle indiqué (cf. {{cssxref("&lt;angle&gt;")}}) doit être compris entre <code>-90deg</code> et <code>90deg</code>. Si aucun angle n'est indiqué, la valeur par défaut utilisée sera <code>14deg</code>. Les valeurs positives correspondent à une pente où le haut des caractères penche vers la fin de la ligne et les valeurs négatives permettent d'obtenir une pente orientée vers le début de la ligne.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h3 id="Variable_fonts">Variable fonts</h3>
+
+<p>Les polices variables permettent d'obtenir un contrôle fin sur la pente appliqué à la fonte. Pour cela, on pourra utiliser une police variable et <code>font-style</code> avec le mot-clé <code>oblique</code> suivi d'une valeur d'angle.</p>
+
+<p>Pour les polices variables TrueType ou OpenType, c'est l'axe de variation <code>"slnt"</code> qui est utilisé afin d'implémenter les variations de pente. C'est l'axe <code>"ital"</code> qui est utilisé avec une valeur de 1 pour implémenter les fontes italiques. Voir {{cssxref("font-variation-settings")}}.</p>
+
+<p>Afin que l'exemple suivant fonctionne, votre navigateur doit prendre en charge la syntaxe <em>CSS Fonts Level 4</em> qui permet d'utiliser <code>font-style: oblique</code> suivi d'un angle.</p>
+
+<div style="border: 10px solid #f5f9fa; padding: 1rem;">{{EmbedLiveSample("variable-font-example", 1200, 180, "", "", "example-outcome-frame")}}</div>
+
+<h4 id="HTML">HTML</h4>
+
+<div id="variable-font-example">
+<pre class="brush: html">&lt;header&gt;
+    &lt;input type="range" id="slant" name="slant" min="-90" max="90" /&gt;
+    &lt;label for="slant"&gt;Slant&lt;/label&gt;
+&lt;/header&gt;
+&lt;div class="container"&gt;
+    &lt;p class="sample"&gt;...it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">/*
+AmstelvarAlpha-VF is created by <span class="col-11 mr-2 text-gray-dark">David Berlow</span> (https://github.com/TypeNetwork/Amstelvar)
+and is used here under the terms of its license:
+https://github.com/TypeNetwork/Amstelvar/blob/master/OFL.txt
+*/
+
+@font-face {
+  src: url('https://mdn.mozillademos.org/files/16044/AmstelvarAlpha-VF.ttf');
+  font-family:'AmstelvarAlpha';
+  font-style: normal;
+}
+
+label {
+  font: 1rem monospace;
+}
+
+.container {
+  max-height: 150px;
+  overflow: scroll;
+}
+
+.sample {
+  font: 2rem 'AmstelvarAlpha', sans-serif;
+}
+
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">html, body {
+  max-height: 100vh;
+  max-width: 100vw;
+  overflow: hidden;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+}
+
+header {
+  margin-bottom: 1.5rem;
+}
+
+.container {
+  flex-grow: 1;
+}
+
+.container &gt; p {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+</pre>
+</div>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">let slantLabel = document.querySelector('label[for="slant"]');
+let slantInput = document.querySelector('#slant');
+let sampleText = document.querySelector('.sample');
+
+function update() {
+  let slant = `oblique ${slantInput.value}deg`;
+  slantLabel.textContent = `font-style: ${slant};`;
+  sampleText.style.fontStyle = slant;
+}
+
+slantInput.addEventListener('input', update);
+
+update();
+</pre>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS_2">CSS</h3>
+
+<pre class="brush: css">.normal {
+  font-style: normal;
+}
+
+.italic {
+  font-style: italic;
+}
+
+.oblique {
+  font-style: oblique;
+}</pre>
+
+<h3 id="HTML_2">HTML</h3>
+
+<pre class="brush: html">&lt;p class="normal"&gt;Un paragraphe normale.&lt;/p&gt;
+&lt;p class="italic"&gt;Un paragraphe italique.&lt;/p&gt;
+&lt;p class="oblique"&gt;Un paragraphe oblique.&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> Toutes les polices ne disposent pas nécessairement de formes pour <code>oblique</code> et <code>italic</code>, si ces formes sont absentes, le moteur simulera la forme absente à partir de celle qui est disponible. Voici un exemple du rendu d'une police qui dispose des différentes formes :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12049/Screen%20Shot%202015-12-05%20at%2008.41.03.png" style="height: 135px; width: 466px;"></p>
+</div>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>L'utilisation de grandes portions de textes avec <code>font-style: italic</code> peut rendre la lecture difficile pour les personnes dyslexiques ou ayant des troubles cognitifs.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li>
+ <li><a href="https://www.w3.org/TR/WCAG21/#visual-presentation"><em>Understanding Success Criterion 1.4.8  | W3C Understanding WCAG 2.0 </em>(en anglais)</a></li>
+</ul>
+
+<h2 id="Spécific​ations">Spécific​ations</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Fonts', '#font-style-prop', 'font-style')}}</td>
+   <td>{{Spec2('CSS4 Fonts')}}</td>
+   <td>Permet d'indiquer un angle après le mot-clé <code>oblique</code></td>
+  </tr>
+  <tr>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#font-style-prop', 'font-style')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-style', 'font-style')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#font-style', 'font-style')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.font-style")}}</p>
diff --git a/files/fr/web/css/font-synthesis/index.html b/files/fr/web/css/font-synthesis/index.html
new file mode 100644
index 0000000000..3eba97d377
--- /dev/null
+++ b/files/fr/web/css/font-synthesis/index.html
@@ -0,0 +1,95 @@
+---
+title: font-synthesis
+slug: Web/CSS/font-synthesis
+tags:
+  - CSS
+  - CSS Fonts
+  - Fontes CSS
+  - Propriété
+  - Reference
+  - 'recipe: css-property'
+translation_of: Web/CSS/font-synthesis
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>font-synthesis</code></strong> indique au navigateur s'il peut synthétiser la graisse ou la mise en italique des polices utilisées si ces variantes sont absentes.</p>
+
+<pre class="brush:css notranslate">font-synthesis: none;
+font-synthesis: weight;
+font-synthesis: style;
+font-synthesis: weight style;
+
+/* Valeurs globales */
+font-synthesis: initial;
+font-synthesis: inherit;
+font-synthesis: unset;
+</pre>
+
+<p>La plupart des polices occidentales incluent les variantes de graisse et d'italique mais certaines polices récentes ou utilisées pour le chinois, le japonais, le coréen ou d'autres scripts ont tendance à ne pas inclure ces éléments. La synthèse automatique du gras ou de l'italique par le navigateur peut réduire la lisibilité du texte et il est alors préférable de désactiver l'émulation du gras et de l'italique du navigateur.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Cette propriété peut prendre l'une des formes suivantes :</p>
+
+<ul>
+ <li>le mot-clé <code>none</code></li>
+ <li>le mot-clé <code>weight</code> ou le mot-clé <code>style</code></li>
+ <li>la valeur <code>weight style</code></li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Ce mot-clé indique que la graisse ou l'italique ne doivent pas être synthétisés.</dd>
+ <dt><code>weight</code></dt>
+ <dd>Ce mot-clé indique qu'une fonte grasse peut être synthétisée si besoin.</dd>
+ <dt><code>style</code></dt>
+ <dd>Ce mot-clé indique qu'une fonte italique peut être synthétisée si besoin.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div class="syn"&gt;Ne me synthétisez pas !&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">.syn {font-synthesis: none;}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#propdef-font-synthesis', 'font-synthesis')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.font-synthesis")}}</p>
diff --git a/files/fr/web/css/font-variant-alternates/index.html b/files/fr/web/css/font-variant-alternates/index.html
new file mode 100644
index 0000000000..ba6cd8ac54
--- /dev/null
+++ b/files/fr/web/css/font-variant-alternates/index.html
@@ -0,0 +1,125 @@
+---
+title: font-variant-alternates
+slug: Web/CSS/font-variant-alternates
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/font-variant-alternates
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>font-variant-alternates</code></strong> contrôle l'utilisation de glyphes alternatifs. Ces glyphes peuvent être référencé par les noms définis avec la règle @ {{cssxref("@font-feature-values")}}.</p>
+
+<pre class="brush:css">/* Valeurs avec un mot-clé */
+font-variant-alternates: normal;
+font-variant-alternates: historical-forms;
+
+/* Valeurs avec une notation fonctionnelle */
+font-variant-alternates: stylistic(identifiant-utilisateur);
+font-variant-alternates: styleset(identifiant-utilisateur);
+font-variant-alternates: character-variant(identifiant-utilisateur);
+font-variant-alternates: swash(identifiant-utilisateur);
+font-variant-alternates: ornaments(identifiant-utilisateur);
+font-variant-alternates: annotation(identifiant-utilisateur);
+font-variant-alternates: swash(ident1) annotation(ident2);
+
+/* Valeurs globales */
+font-variant-alternates: initial;
+font-variant-alternates: inherit;
+font-variant-alternates: unset;
+</pre>
+
+<p>Ces règles @ définissent les noms associés aux valeurs OpenType pour les différents types de glyphes alternatifs (<code>stylistic</code>, <code>styleset</code>, <code>character-variant</code>, <code>swash</code>, <code>ornament</code> ou <code>annotation</code>). Ces propriétés permettent d'utiliser des noms adaptés (définis avec {{cssxref("@font-feature-values")}}) dans la feuille de style.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Cette propriété peut être définie selon deux formes :</p>
+
+<ul>
+ <li>la première avec le mot-clé <code>normal</code></li>
+ <li>la seconde avec un ou plusieurs mots-clés parmi ceux listés ci-aprés. S'il y a plusieurs mots-clés, ils sont séparés par des espaces. Les mots-clés peuvent être dans n'importe quel ordre.</li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Ce mot-clé désactive l'utilisation de tels glyphes alternatifs.</dd>
+ <dt><code>historical-forms</code></dt>
+ <dd>Ce mot-clé active l'affichage de formes historiques, c'est-à-dire des glyphes communs par le passé qui ne sont plus utilisés aujourd'hui. Cette valeur correspond à la valeur OpenType <code>hist</code>.</dd>
+ <dt><code><a name="stylistic()"></a>stylistic()</code></dt>
+ <dd>Cette fonction active l'affichage de formes stylistiques alternatives. Le paramètre passé à la fonction est un nom spécifique à la fonte associé à un nombre. Elle correspond à la valeur OpenType <code>salt</code>, par exemple <code>salt 2</code>.</dd>
+ <dt><code><a name="styleset()"></a>styleset()</code></dt>
+ <dd>Cette fonction active l'utilisation d'un ensemble de caractères d'un style alternatif. Le paramètre est un nom spécifique à la fonte, associé à un nombre. Elle correspond à la valeur OpenType <code>ssXY</code> (par exemple <code>ss02</code>).</dd>
+ <dt><code><a name="character-variant()"></a>character-variant()</code></dt>
+ <dd>Cette fonction active l'utilisation d'un ensemble de caractères stylistiques alternatifs. Elle est semblable à <code>styleset()</code> mais n'implique pas de cohérence entre les différents caractères. Avec cette valeur, les différents caractères peuvent avoir un style indépendant qui peut ne pas être cohérent. Le paramètre passé à la fonction est un nom lié à la fonte auquel est associé un nombre. Elle correspond à la valeur OpenType <code>cvXY</code> (par exemple <code>cv02</code>).</dd>
+ <dt><code><a name="swash()"></a>swash()</code></dt>
+ <dd>Cette fonction active l'affichage des glypes <a href="https://fr.wikipedia.org/wiki/Lettre_orn%C3%A9e">pour les lettres ornées</a>. Le paramètre passé à la fonction est un nom lié à la fonte auquel est associé un nombre. Elle correspond aux valeurs OpenType <code>swsh</code> et <code>cswh</code> (par exemple <code>swsh 2</code> ou <code>cswh 2</code>).</dd>
+ <dt><code><a name="ornaments()"></a>ornaments()</code></dt>
+ <dd>Cette fonction active l'affichage des ornements tels que les <a href="https://fr.wikipedia.org/wiki/Fleuron_(typographie)">fleurons</a> et autres casseaux. Le paramètre passé à la fonction est un nom lié à la fonte auquel est associé un nombre. Cette valeur correspond à la valeur OpenType <code>ornm</code> (par exemple <code>ornm 2</code>).
+ <div class="note"><strong>Note : </strong>afin de préserver la sémantique de la fonte, les fondeurs sont invités à ne pas créer de casseaux qui correspondent aux caractères Unicode déjà définis comme variantes d'ornement pour la puce  (U+2022). De nombreuses fontes passent outre cette règle et perdent ainsi en qualité.</div>
+ </dd>
+ <dt><code><a name="annotation()"></a>annotation()</code></dt>
+ <dd>Cette fonction active l'affichage des annotations (telles que les chiffres entourés ou les caractères inversés). Le paramètre est un nom lié à la fonte auquel est associé un nombre. Cette valeur correspond à la valeur OpenType <code>nalt</code> (par exemple <code>nalt 2</code>).</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;MDN c'est là !&lt;/p&gt;
+&lt;p class="variant"&gt;MDN c'est là !&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@font-feature-values "Leitura Display Swashes" {
+  @swash { fancy: 1 }
+}
+
+p {
+  font-size: 1.5rem;
+}
+
+.variant {
+  font-family: Leitura Display Swashes;
+  font-variant-alternates: swash(fancy);
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>Pour que cet exemple fonctionne, il faut avoir installé la fonte Open Type Leitura Display Swashes. Une version de test est disponible sur <a href="https://fontsgeek.com">fontsgeek.com</a>.</p>
+
+<p>{{EmbedLiveSample('Exemples', '', '', '', 'Web/CSS/font-variant-alternates')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#propdef-font-variant-alternates', 'font-variant-alternates')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.font-variant-alternates")}}</p>
diff --git a/files/fr/web/css/font-variant-caps/index.html b/files/fr/web/css/font-variant-caps/index.html
new file mode 100644
index 0000000000..7c198010cb
--- /dev/null
+++ b/files/fr/web/css/font-variant-caps/index.html
@@ -0,0 +1,132 @@
+---
+title: font-variant-caps
+slug: Web/CSS/font-variant-caps
+tags:
+  - CSS
+  - CSS Fonts
+  - Propriété
+  - Reference
+translation_of: Web/CSS/font-variant-caps
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>font-variant-caps</code></strong> permet de contrôler les glyphes utilisés pour représenter les lettres en capitales. Les scripts peuvent avoir différents glyphes de différentes tailles pour les différentes représentations des capitales et cette propriété permet de choisir une de ces formes.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/font-variant-caps.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Quand une fonte inclut des glyphes de lettres capitales avec différents corps (taille), cette propriété sélectionne la plus appropriée. Si les très petites capitales ne sont pas toutes présentes pour cette fonte, ce seront les petites capitales qui seront utilisées. Si celles-ci ne sont pas présentes, le moteur les synthétisera à partir des glyphes des capitales.</p>
+
+<p>Certains caractères sans casse (comme les caractères de ponctuation) peuvent être représentés avec différents glyphes afin de mieux les représenter avec les caractères environnants. Les caractères sans casse ne sont pas synthétisés par le navigateur s'il n'y a pas de petite capitales.</p>
+
+<h3 id="Règles_spécifiques_aux_langues">Règles spécifiques aux langues</h3>
+
+<p>Les règles liées à chaque langue/locale sont prises en compte avec les valeurs. Par exemple :</p>
+
+<ul>
+ <li>Pour les langues turques comme le turc (tr), l'azerbaidjanais (az), le tatare de Crimée (crh), le tatare de Volga et le Bashkir (ba), il y a deux types de i : avec ou sans le point et deux majuscules correspondantes <code>i</code>/<code>İ</code> et <code>ı</code>/<code>I</code>.</li>
+ <li>En allemand (de), le caractère <code>ß</code> devient <code>ẞ</code> (U+1E9E) en majuscule.</li>
+ <li>En grec (el), les voyelles perdent leur accent en majuscule lorsque tout le mot est en majuscule (<code>ά</code>/<code>Α</code>), sauf pour le êta disjonctif (<code>ή</code>/<code>Ή</code>). Les diphthongues avec un accent sur la première voyellle perdent l'accent et ajoutent une diacritique sur la deuxième voyelle (<code>άι</code>/<code>ΑΪ</code>).</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css notranslate">/* Valeurs avec un mot-clé */
+font-variant-caps: normal;
+font-variant-caps: small-caps;
+font-variant-caps: all-small-caps;
+font-variant-caps: petite-caps;
+font-variant-caps: all-petite-caps;
+font-variant-caps: unicase;
+font-variant-caps: titling-caps;
+
+/* Valeurs globales */
+font-variant-caps: inherit;
+font-variant-caps: initial;
+font-variant-caps: unset;
+</pre>
+
+<p>La valeur de cette propriété peut être l'un des mots-clés définis ci-après.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Ce mot-clé désactive l'utilisation des glyphes alternatifs.</dd>
+ <dt><code>small-caps</code></dt>
+ <dd>Ce mot-clé active l'utilisation de petites capitales pour les minuscules. Il correspond à la valeur OpenType <code>smcp</code> ; si la fonte ne supporte pas cette option, le moteur synthétisera les glyphes.</dd>
+ <dt><code>all-small-caps</code></dt>
+ <dd>Ce mot-clé active l'utilisation de petites capitales pour les minuscules. Il correspond aux valeurs OpenType <code>smcp</code> et <code>c2sc</code> ; si la fonte ne supporte pas cette option, le moteur synthétisera les glyphes.</dd>
+ <dt><code>petite-caps</code></dt>
+ <dd>Ce mot-clé active l'utilisation de toutes petites capitales pour les minuscules. Il correspond à la valeur OpenType <code>pcap</code> ; si la fonte ne supporte pas cette option, le moteur utilisera les petites capitales.</dd>
+ <dt><code>all-petite-caps</code></dt>
+ <dd>Ce mot-clé active l'utilisation de toutes petites capitales pour les minuscules. Il correspond aux valeurs OpenType <code>pcap </code>et <code>c2pc</code> ; si la fonte ne supporte pas cette option, le moteur utilisera les petites capitales.</dd>
+ <dt><code>unicase</code></dt>
+ <dd>Ce mot-clé active l'utilisation de petites capitales pour les majuscules. Il correspond à la valeur OpenType <code>unic</code>.</dd>
+ <dt><code>titling-caps</code></dt>
+ <dd>Ce mot-clé active l'utilisation de capitales spéciales pour les titres (à la fois pour les minuscules et majuscules). Généralement, les glyphes majuscules sont conçus pour utiliser les glyphes minuscules et ils apparaissent trop gras quand il y a un long fragment de texte utilisant de tels glyphes. L'objectif de ces glyphes spéciaux est d'éviter un tel effet. Ce mot-clé correspond à la valeur OpenType <code>titl</code> ; si la fonte ne supporte pas ce cas, le mot-clé n'aura pas d'action visible.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css notranslate">.exemple {
+  font-variant-caps: small-caps;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;
+  La Reine devint pourpre de colère et
+  après l’avoir considérée un moment avec
+  des yeux flamboyants comme ceux d’une
+  bête fauve, elle se mit à crier :
+  « &lt;span class="exemple"&gt;Qu’on lui coupe la tête !&lt;/span&gt; »
+&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>L'utilisation de grandes portions de textes avec <code>font-style: all-small-caps</code> ou <code>font-style: all-petite-caps</code> peut rendre la lecture difficile pour les personnes dyslexiques ou ayant des troubles cognitifs.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li>
+ <li><a href="https://www.w3.org/TR/WCAG21/#visual-presentation"><em>W3C Understanding WCAG 2.1 </em>(en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#propdef-font-variant-caps', 'font-variant-caps')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.font-variant-caps")}}</p>
diff --git a/files/fr/web/css/font-variant-east-asian/index.html b/files/fr/web/css/font-variant-east-asian/index.html
new file mode 100644
index 0000000000..22d44dfb1a
--- /dev/null
+++ b/files/fr/web/css/font-variant-east-asian/index.html
@@ -0,0 +1,139 @@
+---
+title: font-variant-east-asian
+slug: Web/CSS/font-variant-east-asian
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/font-variant-east-asian
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>font-variant-east-asian</code></strong> contrôle l'utilisation des glyphes alternatifs pour les scripts japonais, chinois et d'Asie orientale.</p>
+
+<pre class="brush:css no-line-numbers">font-variant-east-asian: normal;
+font-variant-east-asian: ruby;
+font-variant-east-asian: jis78;              /* &lt;east-asian-variant-values&gt; */
+font-variant-east-asian: jis83;              /* &lt;east-asian-variant-values&gt; */
+font-variant-east-asian: jis90;              /* &lt;east-asian-variant-values&gt; */
+font-variant-east-asian: jis04;              /* &lt;east-asian-variant-values&gt; */
+font-variant-east-asian: simplified;         /* &lt;east-asian-variant-values&gt; */
+font-variant-east-asian: traditional;        /* &lt;east-asian-variant-values&gt; */
+font-variant-east-asian: full-width;         /* &lt;east-asian-width-values&gt; */
+font-variant-east-asian: proportional-width; /* &lt;east-asian-width-values&gt; */
+font-variant-east-asian: ruby full-width jis83;
+
+/* Valeurs globales */
+font-variant-east-asian: inherit;
+font-variant-east-asian: initial;
+font-variant-east-asian: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Ce mot-clé désactive les glyphes alternatifs.</dd>
+ <dt><code>ruby</code></dt>
+ <dd>Ce mot-clé force l'utilisation de glyphes spécifiques pour les caractères ruby. Généralement, ceux-ci sont plus petits et légèrement plus gras pour améliorer le contraste. Ce mot-clé correspond aux valeurs OpenType <code>ruby</code>.</dd>
+ <dt><code>&lt;east-asian-variant-values&gt;</code></dt>
+ <dd>Ces valeurs définissent un ensemble de variantes de glypes logographiques à utiliser pour l'affichage. Les valeurs possibles sont :
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <th>Mot-clé</th>
+    <th>Standard dans lequel sont définis les glyphs</th>
+    <th>Équivalent OpenType</th>
+   </tr>
+   <tr>
+    <td><code>jis78</code></td>
+    <td><a href="https://en.wikipedia.org/wiki/JIS_X_0208#First_standard">JIS X 0208:1978</a></td>
+    <td><code>jp78</code></td>
+   </tr>
+   <tr>
+    <td><code>jis83</code></td>
+    <td><a href="https://en.wikipedia.org/wiki/JIS_X_0208#Second_standard">JIS X 0208:1983</a></td>
+    <td><code>jp83</code></td>
+   </tr>
+   <tr>
+    <td><code>jis90</code></td>
+    <td><a href="https://en.wikipedia.org/wiki/JIS_X_0208#Third_standard">JIS X 0208:1990</a></td>
+    <td><code>jp90</code></td>
+   </tr>
+   <tr>
+    <td><code>jis04</code></td>
+    <td><a href="https://en.wikipedia.org/wiki/JIS_X_0213">JIS X 0213:2004</a></td>
+    <td><code>jp04</code></td>
+   </tr>
+   <tr>
+    <td><code>simplified</code></td>
+    <td>Aucun, ce sont les glyphes chinois simplifiés qui sont utilisés.</td>
+    <td><code>smpl</code></td>
+   </tr>
+   <tr>
+    <td><code>traditional</code></td>
+    <td>Aucun, ce sont les glyphes chinois traditionnels qui sont utilisés.</td>
+    <td><code>trad</code></td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt><em>&lt;<em>east-asian-width-values</em></em>&gt;</dt>
+ <dd>Ces valeurs permettent de contrôler le dimensionnement des symboles pour les caractères des langues d'Asie orientale. Deux valeurs sont possibles :
+ <ul>
+  <li><code>proportional-width</code> qui active l'ensemble de caractères d'Asie orientale qui n'ont pas tous la même largeur. Elle correspond aux valeurs OpenType <code>pwid</code>.</li>
+  <li><code>full-width</code> qui active l'ensemble de caractères d'Asie orientale où les caractères ont tous la même taille et forme carrée. Elle correspond aux valeurs OpenType <code>fwid</code>.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">exemple {
+  font-variant-east-asian: ruby;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="exemple"&gt;!&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<p>{{LiveSampleLink("Exemples","Lien vers l'exemple")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#propdef-font-variant-east-asian', 'font-variant-east-asian')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.font-variant-east-asian")}}</p>
diff --git a/files/fr/web/css/font-variant-ligatures/index.html b/files/fr/web/css/font-variant-ligatures/index.html
new file mode 100644
index 0000000000..1d5a545e78
--- /dev/null
+++ b/files/fr/web/css/font-variant-ligatures/index.html
@@ -0,0 +1,212 @@
+---
+title: font-variant-ligatures
+slug: Web/CSS/font-variant-ligatures
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/font-variant-ligatures
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>font-variant-ligatures</code></strong> contrôle quelles {{Glossary("ligatures")}} et {{Glossary("formes contextuelles")}} sont utilisées dans les éléments textuels auxquels elle s'applique. Ceci vise à harmoniser l'affichage du texte.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/font-variant-ligatures.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">font-variant-ligatures: normal;
+font-variant-ligatures: none;
+font-variant-ligatures: common-ligatures;           /* &lt;common-lig-values&gt; */
+font-variant-ligatures: no-common-ligatures;        /* &lt;common-lig-values&gt; */
+font-variant-ligatures: discretionary-ligatures;    /* &lt;discretionary-lig-values&gt; */
+font-variant-ligatures: no-discretionary-ligatures; /* &lt;discretionary-lig-values&gt; */
+font-variant-ligatures: historical-ligatures;       /* &lt;historical-lig-values&gt; */
+font-variant-ligatures: no-historical-ligatures;    /* &lt;historical-lig-values&gt; */
+font-variant-ligatures: contextual;                 /* &lt;contextual-alt-values&gt; */
+font-variant-ligatures: no-contextual;              /* &lt;contextual-alt-values&gt; */
+font-variant-ligatures: contextual;                 /* &lt;no-historical-ligatures&gt; &lt;common-ligatures&gt; */
+
+/* Valeurs globales */
+font-variant-ligatures: inherit;
+font-variant-ligatures: initial;
+font-variant-ligatures: unset;
+</pre>
+
+<p>La valeur de cette propriété peut être l'un des mots-clés définis ci-après.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Cette valeur active les ligatures et les formes contextuelles courantes pour un rendu correct. Les ligatures et formes activées dépendent de la police utilisée, de la langue et de certains scripts. C'est la valeur par défaut.</dd>
+ <dt><code>none</code></dt>
+ <dd>Cette valeur désactive toutes les ligatures et formes contextuelles, y compris celles couramment utilisées.</dd>
+ <dt>&lt;common-lig-values&gt;</dt>
+ <dd>Ces valeurs contrôlent les ligatures les plus courantes, comme <code>fi</code>, <code>ffi</code>, <code>th</code> et autres. Elles correspondent aux valeurs OpenType <code>liga</code> and <code>clig</code>. Deux valeurs sont possibles:
+ <ul>
+  <li><code>common-ligatures</code> active ces ligatures. Notez que la valeur <code>normal</code> active ces ligatures.</li>
+  <li><code>no-common-ligatures</code> désactive ces ligatures.</li>
+ </ul>
+ </dd>
+ <dt><em>&lt;discretionary-lig-values&gt;</em></dt>
+ <dd>Ces valeurs contrôlent les ligatures spécifiques, spécifiques à la police et définies par le fondeur. Elles correspondent à la valeur OpenType <code>dlig</code>. Deux valeurs sont possibles:
+ <ul>
+  <li><code>discretionary-ligatures</code> active ces ligatures.</li>
+  <li><code>no-discretionary-ligatures</code> désactive ces ligatures. Notez que la valeur <code>normal</code> désactive ces ligatures.</li>
+ </ul>
+ </dd>
+ <dt><em>&lt;historical-lig-values&gt;</em></dt>
+ <dd>Ces valeurs contrôlent les ligatures historiques, utilisées dans les livres anciens, comme l'allemand tz qui devient ß. Elles correspondent à la valeur OpenType <code>hlig</code>. Deux valeurs sont possibles:
+ <ul>
+  <li><code>historical-ligatures</code> active ces ligatures.</li>
+  <li><code>no-historical-ligatures</code> désactive ces ligatures. Notez que la valeur <code>normal</code> désactive ces ligatures.</li>
+ </ul>
+ </dd>
+ <dt><em>&lt;contextual-alt-values&gt;</em></dt>
+ <dd>Ces valeurs contrôlent la manière dont les lettres s'adaptent à leur contexte, c'est-à-dire aux lettres qui les entourent. Elles correspondent à la valeur OpenType <code>calt</code>. Deux valeurs sont possibles:
+ <ul>
+  <li><code>contextual</code> précise que des alternatives contextuelles peuvent être utilisées. Notez que la valeur <code>normal</code> active ces ligatures.</li>
+  <li><code>no-contextual</code> interdit leur utilisation.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">p {
+  font-size: 2rem;
+  font-family: Lora, serif;
+}
+.normal {
+  font-variant-ligatures: normal;
+}
+
+.none {
+  font-variant-ligatures: none;
+}
+
+.common-ligatures {
+  font-variant-ligatures: common-ligatures;
+}
+
+.no-common-ligatures {
+  font-variant-ligatures: no-common-ligatures;
+}
+
+.discretionary-ligatures {
+  font-variant-ligatures: discretionary-ligatures;
+}
+
+.no-discretionary-ligatures {
+  font-variant-ligatures: no-discretionary-ligatures;
+}
+
+.historical-ligatures {
+  font-variant-ligatures: historical-ligatures;
+}
+
+.no-historical-ligatures {
+  font-variant-ligatures: no-historical-ligatures;
+}
+
+.contextual {
+  font-variant-ligatures: contextual;
+}
+
+.no-contextual {
+  font-variant-ligatures: no-contextual;
+}
+
+.contextual {
+  font-variant-ligatures: contextual;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;link href="//fonts.googleapis.com/css?family=Lora" rel="stylesheet"&gt;
+&lt;p class="normal"&gt;
+  normal&lt;br&gt;
+  if fi ff tf ft jf fj
+&lt;/p&gt;
+&lt;p class="none"&gt;
+  none&lt;br&gt;
+  if fi ff tf ft jf fj
+&lt;/p&gt;
+&lt;p class="common-ligatures"&gt;
+  common-ligatures&lt;br&gt;
+  if fi ff tf ft jf fj
+&lt;/p&gt;
+&lt;p class="no-common-ligatures"&gt;
+  no-common-ligatures&lt;br&gt;
+  if fi ff tf ft jf fj
+&lt;/p&gt;
+&lt;p class="discretionary-ligatures"&gt;
+  discretionary-ligatures&lt;br&gt;
+  if fi ff tf ft jf fj
+&lt;/p&gt;
+&lt;p class="no-discretionary-ligatures"&gt;
+  no-discretionary-ligatures&lt;br&gt;
+  if fi ff tf ft jf fj
+&lt;/p&gt;
+&lt;p class="historical-ligatures"&gt;
+  historical-ligatures&lt;br&gt;
+  if fi ff tf ft jf fj
+&lt;/p&gt;
+&lt;p class="no-historical-ligatures"&gt;
+  no-historical-ligatures&lt;br&gt;
+  if fi ff tf ft jf fj
+&lt;/p&gt;
+&lt;p class="contextual"&gt;
+  contextual&lt;br&gt;
+  if fi ff tf ft jf fj
+&lt;/p&gt;
+&lt;p class="no-contextual"&gt;
+  no-contextual&lt;br&gt;
+  if fi ff tf ft jf fj
+&lt;/p&gt;
+&lt;p class="contextual"&gt;
+  contextual&lt;br&gt;
+  if fi ff tf ft jf fj
+&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '', '', '', 'Web/CSS/font-variant-ligatures')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#propdef-font-variant-ligatures', 'font-variant-ligatures')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.font-variant-ligatures")}}</p>
diff --git a/files/fr/web/css/font-variant-numeric/index.html b/files/fr/web/css/font-variant-numeric/index.html
new file mode 100644
index 0000000000..382a387f47
--- /dev/null
+++ b/files/fr/web/css/font-variant-numeric/index.html
@@ -0,0 +1,136 @@
+---
+title: font-variant-numeric
+slug: Web/CSS/font-variant-numeric
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/font-variant-numeric
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>font-variant-numeric</code></strong> permet de contrôler l'utilisation de glyphes alternatifs pour les nombres, fractions et les marqueurs ordinaux.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/font-variant-numeric.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">font-variant-numeric: normal;
+font-variant-numeric: ordinal;
+font-variant-numeric: slashed-zero;
+font-variant-numeric: lining-nums;         /* &lt;numeric-figure-values&gt; */
+font-variant-numeric: oldstyle-nums;       /* &lt;numeric-figure-values&gt; */
+font-variant-numeric: proportional-nums;   /* &lt;numeric-spacing-values&gt; */
+font-variant-numeric: tabular-nums;        /* &lt;numeric-spacing-values&gt; */
+font-variant-numeric: diagonal-fractions;  /* &lt;numeric-fraction-values&gt; */
+font-variant-numeric: stacked-fractions;   /* &lt;numeric-fraction-values&gt; */
+font-variant-numeric: oldstyle-nums stacked-fractions;
+
+/* Valeurs globales */
+font-variant-numeric: inherit;
+font-variant-numeric: initial;
+font-variant-numeric: unset;
+</pre>
+
+<p>La valeur de cette propriété peut être définie selon deux formes :</p>
+
+<ul>
+ <li>la première avec le mot-clé <code>normal</code></li>
+ <li>la seconde avec une ou plusieurs valeurs parmi celles définies ci-après, séparées par des espaces et dans n'importe quel ordre.</li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Ce mot-clé désactive l'utilisation des glyphes alternatifs.</dd>
+ <dt><code>ordinal</code></dt>
+ <dd>Ce mot-clé permet de forcer l'utilisation de glyphes spéciaux pour les marqueurs ordinaux utilisés par exemple pour 1<sup>er</sup>, 2<sup>e</sup>, 3<sup>e</sup>, etc. Il correspond aux valeurs OpenType values <code>ordn</code>.</dd>
+ <dt><code>slashed-zero</code></dt>
+ <dd>Ce mot-clé permet de forcer l'application d'une barre oblique après un 0. Cela peut être utile quand on cherche à distinguer un O majuscule d'un 0. Il correspond aux valeurs  OpenType <code>zero</code>.</dd>
+ <dt><em>&lt;numeric-figure-values</em>&gt;</dt>
+ <dd>Ces valeurs contrôlent les chiffres utilisés pour les nombres. Deux valeurs peuvent être utilisées :
+ <ul>
+  <li><code>lining-nums</code> permet d'activer l'ensemble de chiffres pour lequel tous les nombres sont apposés sur la ligne de base. Elle correspond aux valeurs OpenType <code>lnum</code>.</li>
+  <li><code>oldstyle-nums</code> permet d'activer l'ensemble de chiffres pour lequel certains nombres, comme 3, 4, 7, 9, ont un jambage. Elle correspond aux valleurs OpenType <code>onum</code>.</li>
+ </ul>
+ </dd>
+ <dt><em>&lt;numeric-spacing-values</em>&gt;</dt>
+ <dd>Ces valeurs permettent de contrôler la taille des chiffres utilisés pour les nombres. On peut utiliser deux valelurs :
+ <ul>
+  <li><code>proportional-nums</code> permet d'activer l'ensemble où les chiffres ne sont pas tous de la même taille. Elle correspond aux valeurs OpenType <code>pnum</code>.</li>
+  <li><code>tabular-nums</code> permet d'activer l'ensemble où les chiffres ont la même taille (ce qui leur permet d'être facilement alignés dans des tableaux). Elle correspond aux valeurs OpenType <code>tnum</code>.</li>
+ </ul>
+ </dd>
+ <dt><em>&lt;numeric-fraction-values</em>&gt;</dt>
+ <dd>Ces valeurs permettent de contrôler les glyphes utilisés pour afficher les fractions :
+ <ul>
+  <li><code>diagonal-fractions</code> permet d'utiliser l'ensemble où le numérateur et le dénominateur sont plus petits et séparés par une barre oblique. Elle correspond aux valeurs OpenType <code>frac</code>.</li>
+  <li><code>stacked-fractions</code> permet d'utiliser l'ensemble où les chiffres du numérateur et du dénominateur sont plus petits et séparés par une ligne horizontale. Elle correspond aux valeurs OpenType <code>afrc</code>.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/*
+Cet exemple utilise la police Source Sans Pro OpenType développée par Adobe
+et utilisée ici sous les termes de la licence SIL Open Font en Version 1.1 :
+http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web
+*/
+
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 400;
+  src: url("https://mdn.mozillademos.org/files/15757/SourceSansPro-Regular.otf") format("opentype");
+}
+
+.ordinal {
+  font-variant-numeric: ordinal;
+  font-family: "Source Sans Pro";
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="ordinal"&gt;Premier, deuxième, troisième, quatrième, cinquième&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#propdef-font-variant-numeric', 'font-variant-numeric')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.font-variant-numeric")}}</p>
diff --git a/files/fr/web/css/font-variant-position/index.html b/files/fr/web/css/font-variant-position/index.html
new file mode 100644
index 0000000000..b506bedb2b
--- /dev/null
+++ b/files/fr/web/css/font-variant-position/index.html
@@ -0,0 +1,95 @@
+---
+title: font-variant-position
+slug: Web/CSS/font-variant-position
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/font-variant-position
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>font-variant-position</code></strong> permet d'utiliser des glyphes de plus petite taille positionnés en exposant ou en indice par rapport à la ligne de base utilisée (qui reste la même).</p>
+
+<p>Généralement, les glyphes utilisés sont ceux utilisés pour les éléments HTML {{HTMLElement("sub")}} et {{HTMLElement("sup")}}.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+font-variant-position: normal;
+font-variant-position: sub;
+font-variant-position: super;
+
+/* Valeurs globales */
+font-variant-position: inherit;
+font-variant-position: initial;
+font-variant-position: unset;
+</pre>
+
+<p>Lorsque ces glyphes alternatifs sont activés, si un caractère de l'ensemble concerné ne possède pas de glyphe correspondant, l'ensemble des caractères est affiché avec une méthode de secours qui synthétise ces glyphes.</p>
+
+<p>Ces glyphes alternatifs possèdent la même boîte em et la même ligne de base que le reste du texte. La modification est purement graphique et il n'y a pas d'impact sur la hauteur de ligne ou sur les autres caractéristiques liées aux boîtes.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La valeur de cette propriété est définie grâce à l'un des mots-clés définis ci-après.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Les glyphes alternatifs sont désactivés.</dd>
+ <dt><code>sub</code></dt>
+ <dd>Ce mot-clé permet d'utiliser les glyphes utilisés en indice.</dd>
+ <dt><code>super</code></dt>
+ <dd>Ce mot-clé permet d'utiliser les glyphes utilisés en exposant.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">.exemple {
+  font-variant-position: super;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt; Alice &lt;span class="exemple"&gt;ne s’était pas fait le moindre mal.&lt;/span&gt;
+    Vite elle se remet sur ses pieds et regarde en l’air ; mais tout
+    est noir là-haut. Elle voit devant elle un long passage et le Lapin
+    Blanc qui court à toutes jambes.
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#propdef-font-variant-position', 'font-variant-position')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.font-variant-position")}}</p>
diff --git a/files/fr/web/css/font-variant/index.html b/files/fr/web/css/font-variant/index.html
new file mode 100644
index 0000000000..d6fc3654e0
--- /dev/null
+++ b/files/fr/web/css/font-variant/index.html
@@ -0,0 +1,117 @@
+---
+title: font-variant
+slug: Web/CSS/font-variant
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/font-variant
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>font-variant</code></strong> est une propriété raccourcie représentant les propriétés : {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-ligatures")}} et {{cssxref("font-variant-east-asian")}}. On peut aussi utiliser les valeurs de la propriété <code>font-variant</code> définies avec CSS Level 2 (<code>normal</code> ou <code>small-caps</code>), en utilisant la propriété raccourcie {{cssxref("font")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/font-variant.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">font-variant: small-caps;
+font-variant: common-ligatures small-caps;
+
+/* Valeurs globales */
+font-variant: inherit;
+font-variant: initial;
+font-variant: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Définit une police normale ; chacune des propriétés individuelles a une valeur initiale de <code>normal</code>. Ces propriétés sont {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-ligatures")}}, et {{cssxref("font-variant-east-asian")}}.</dd>
+ <dt><code>none</code></dt>
+ <dd>Définit la valeur de {{cssxref("font-variant-ligatures")}} comme étant <code>none</code> et les valeurs des autres propriétés à <code>normal</code>, leur valeur initiale.</dd>
+ <dt>&lt;common-lig-values&gt;, &lt;discretionary-lig-values&gt;, &lt;historical-lig-values&gt;, &lt;contextual-alt-values&gt;</dt>
+ <dd>Définit la valeur de la propriété {{cssxref("font-variant-ligatures")}}. Les valeurs possibles sont: <code>common-ligatures</code>,<code>no-common-ligatures</code>, <code>discretionary-ligatures</code>, <code>no-discretionary-ligatures</code>, <code>historical-ligatures</code>, <code>no-historical-ligatures</code>,<code>contextual</code>, et <code>no-contextual</code>.</dd>
+ <dt><code>stylistic()</code>, <code>historical-forms</code>, <code>styleset()</code>, <code>character-variant()</code>, <code>swash()</code>, <code>ornaments()</code>, <code>annotation()</code></dt>
+ <dd>Définit les mots-clés et fonctions relatives à la propriété {{cssxref("font-variant-alternates")}}.</dd>
+ <dt><code>small-caps</code>, <code>all-small-caps</code>, <code>petite-caps</code>, <code>all-petite-caps</code>, <code>unicase</code>, <code>titling-caps</code></dt>
+ <dd>Définit le mot-clé relatif à la propriété {{cssxref("font-variant-caps")}}.</dd>
+ <dt><code>&lt;numeric-figure-values&gt;</code>, <code>&lt;numeric-spacing-values&gt;</code>, <code>&lt;numeric-fraction-values&gt;</code>, <code>ordinal</code>, <code>slashed-zero</code></dt>
+ <dd>Définit la valeur de la propriété {{cssxref("font-variant-numeric")}}. Les valeurs possibles sont <code>lining-nums</code>,<code> oldstyle-nums</code>, <code>proportional-nums</code>, <code>tabular-nums</code>, <code>diagonal-fractions</code>, <code>stacked-fractions</code>, <code>ordinal</code>, et <code>slashed-zero.</code></dd>
+ <dt><code>&lt;east-asian-variant-values&gt;</code>, <code>&lt;east-asian-width-values&gt;</code>, <code>ruby</code></dt>
+ <dd>Définit la valeur de la propriété {{cssxref("font-variant-east-asian")}}. Les valeurs possibles sont: <code>jis78</code>, <code>jis83</code>,<code>jis90</code>, <code>jis04</code>, <code>simplified</code>, <code>traditional</code>, <code>full-width</code>, <code>proportional-width</code>, <code>ruby</code>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="normal"&gt;Firefox normal&lt;/p&gt;
+&lt;p class="small"&gt;Firefox petit&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p.normal {
+    font-variant: normal;
+}
+p.small {
+    font-variant: small-caps;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '', '', '', 'Web/CSS/font-variant')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#propdef-font-variant', 'font-variant')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>La propriété est désormais une propriété raccourcie pour les nouvelles propriétés  <code>font-variant-*</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-variant', 'font-variant')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Aucun changement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#font-variant', 'font-variant')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.font-variant")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("text-transform")}}</li>
+ <li>{{cssxref("text-combine-upright")}}</li>
+ <li>{{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/font-variation-settings/index.html b/files/fr/web/css/font-variation-settings/index.html
new file mode 100644
index 0000000000..fc5df8a335
--- /dev/null
+++ b/files/fr/web/css/font-variation-settings/index.html
@@ -0,0 +1,166 @@
+---
+title: font-variation-settings
+slug: Web/CSS/font-variation-settings
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/font-variation-settings
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>font-variation-settings</code></strong> permet de contrôler les caractéristiques typographiques de bas niveau OpenType ou TrueType en utilisant les quatres lettres représentant les axes des caractéristiques qu'on souhaite faire varier, ainsi que les valeurs pour les variations associées.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/font-variation-settings.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cette propriété fonctionne à un niveau plus bas que {{cssxref("font-feature-settings")}} qui permet de définir les valeurs et les étiquettes (<em>tags</em>) pour les caractéristiques des polices.</p>
+
+<div class="note"><strong>Note : </strong>Si possible, les auteurs web devraient utiliser d'autres méthodes pour contrôler l'affichage des polices de caractères et notamment la propriété raccourcie {{cssxref("font-variant")}} ou une des propriétés détaillée associée. Cette propriété est une fonctionnalité de bas niveau destinée à gérer les cas spécifiques pour lesquels il est autrement impossible d'activer ou de paramétrer une caractéristique OpenType existante.</div>
+
+<div class="note"><strong>Note :</strong> Les caractéristiques définies avec <code>font-variation-settings</code> l'emporteront sur celles définies par les autres propriétés relatives aux polices (ex. <code>font-weight</code>), où qu'elles soient dans la cascade. Pour certains navigateurs, cela se vérifie uniquement lorsque la déclaration <code>@font-face</code> inclut un intervalle <code>font-weight</code>.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeur pour les réglages par défaut */
+font-variation-settings: normal;
+
+/* Utilisation des valeurs */
+/* pour les axes OpenType  */
+font-variation-settings: "XHGT" 0.7;
+
+/* Valeurs globales */
+font-variation-settings: inherit;
+font-variation-settings: initial;
+font-variation-settings: unset;
+</pre>
+
+<p>La valeur de cette propriété peut être définie selon deux formes :</p>
+
+<ul>
+ <li>Avec le mot-clé <code>normal</code></li>
+ <li>Ou avec une chaîne de caractères (<code>&lt;string&gt;</code>) suivi d'un nombre (<code>&lt;number&gt;</code>). Ce motif peut être répété tant qu'une virgule sépare chacun des tuples.</li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Le texte est disposé avec les caractéristiques par défaut.</dd>
+ <dt><code>&lt;string&gt; &lt;number&gt;</code></dt>
+ <dd>Lors de l'affichage du texte, les axes OpenType sont passés au moteur graphique afin d'activer ou de désactiver certaines fonctionnalités de la police. Chaque valeur est une chaîne de caractères (type {{cssxref("&lt;string&gt;")}}) avec quatre caractères ASCII, suivie par un nombre (type {{cssxref("number")}}) qui indique la valeur pour l'axe correspondant. Si la chaîne de caractères <code>&lt;string&gt;</code> a plus ou moins de 4 caractères et contient des caractères en dehors de l'intervalle U+20 - U+7E, la propriété sera considérée comme invalide. La valeur numérique <code>&lt;number&gt;</code> n'est pas nécessairement entière et positive, ce peut être un nombre décimal ou un nombre négatif.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Axes_enregistrés_et_axes_spécifiques">Axes enregistrés et axes spécifiques</h2>
+
+<p>Les axes des polices variables sont rangés selon deux catégories : les axes <strong>enregistrés</strong> et les axes <strong>spécifiques</strong>.</p>
+
+<p>Les axes enregistrés représentent les variations les plus fréquemment utilisées. Si ces axes sont suffisamment fréquents pour avoir été standardisés, cela ne signifie pas qu'un créateur de police doive tous les gérer pour créer une police.</p>
+
+<p>Voici la liste des axes enregistrés et les propriétés CSS correspondantes, qui permettent de jouer sur ces axes :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Étiquette pour l'axe</th>
+   <th scope="col">Propriété</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>"wght"</td>
+   <td>{{cssxref("font-weight")}}</td>
+  </tr>
+  <tr>
+   <td>"wdth"</td>
+   <td>{{cssxref("font-stretch")}}</td>
+  </tr>
+  <tr>
+   <td>"slnt" (slant)</td>
+   <td>{{cssxref("font-style")}}: <code>oblique + angle</code></td>
+  </tr>
+  <tr>
+   <td>"ital"</td>
+   <td>{{cssxref("font-style")}}: <code>italic</code></td>
+  </tr>
+  <tr>
+   <td>"opsz"</td>
+   <td>
+    <p>{{cssxref("font-optical-sizing")}}</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Les axes spécifiques peuvent correspondre à n'importe quel axe que le concepteur de la police souhaite faire varier (ce peut par exemple être la hauteur des hampes et des jambages, la taille des empattements ou tout autre chose). N'importe quel axe peut être utilisé tant qu'il a une étiquette unique sur quatre caractères. Il est possible que, si des axes spécifiques deviennent majoritairement présents, ils soient intégrés parmi les axes enregistrés.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Les étiquettes des axes enregistrés sont écrits en minuscules et les axes spécifiques doivent être écrits en majuscules. On notera que rien n'oblige à suivre cette règle et qu'il est tout à fait possible que des concepteurs de polices donnent des étiquettes en minuscules à des axes spécifiques. Quoiqu'il en soit, on retiendra que les étiquettes des axes sont sensibles à la casse.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<div class="warning">
+<p><strong>Attention !</strong> Afin de pouvoir utiliser les polices variables, votre système d'exploitation doit être à jour et votre navigateur doit prendre en charge ces fonctionnalités. Ainsi, les systèmes basés sur Linux requièrent la dernière version de Linux Freetype et les systèmes macOS antérieurs à 10.13 ne prennent pas en charge les polices variables.</p>
+</div>
+
+<h3 id="Graisse_(wght)">Graisse (<code>wght</code>)</h3>
+
+<p>L'exemple suivant peut être édité afin de voir l'effet de la modification des valeurs pour la graisse du texte.</p>
+
+<div>{{EmbedGHLiveSample("css-examples/variable-fonts/weight.html", '100%', 520)}}</div>
+
+<h3 id="Pente_(slnt)">Pente (<code>slnt</code>)</h3>
+
+<p>L'exemple suivant peut être édite afin de voir l'effet de la modification des valeurs pour la pente (à ne pas confondre avec l'italique) du texte.</p>
+
+<div>{{EmbedGHLiveSample("css-examples/variable-fonts/slant.html", '100%', 520)}}</div>
+
+<h3 id="Autres_exemples">Autres exemples</h3>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Fonts/Guide_polices_variables">Guide sur les polices variables</a></li>
+ <li><a href="https://v-fonts.com">v-fonts.com</a></li>
+ <li><a href="https://axis-praxis.org">axis-praxis.org</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Fonts', '#low-level-font-variation-settings-control-the-font-variation-settings-property', 'font-variation-settings')}}</td>
+   <td>{{Spec2('CSS4 Fonts')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une <em>pull request</em> sur ce dépôt: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("css.properties.font-variation-settings")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Fonts/Guide_polices_variables">Guide sur les polices variables</a></li>
+ <li><a href="https://www.microsoft.com/typography/otspec180/otvaroverview.htm">OpenType Font Variations Overview</a></li>
+ <li><a href="https://www.microsoft.com/typography/otspec180/default.htm">OpenType specification</a></li>
+ <li><a href="https://www.microsoft.com/typography/otspec/dvaraxisreg.htm">OpenType Design-Variation Axis Tag Registry</a></li>
+</ul>
diff --git a/files/fr/web/css/font-weight/index.html b/files/fr/web/css/font-weight/index.html
new file mode 100644
index 0000000000..cfe8c8e614
--- /dev/null
+++ b/files/fr/web/css/font-weight/index.html
@@ -0,0 +1,394 @@
+---
+title: font-weight
+slug: Web/CSS/font-weight
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/font-weight
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>font-weight</code></strong> permet de définir la graisse utilisée pour le texte. Les niveaux de graisse disponibles dépendent de la police (cf. {{cssxref("font-family")}}). Certaines fontes n'existent qu'avec les niveaux de graisses <code>normal</code> et <code>bold</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/font-weight.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+font-weight: normal;
+font-weight: bold;
+
+/* Valeurs relatives à l'élément parent */
+font-weight: lighter;
+font-weight: bolder;
+
+/* Valeurs numériques */
+font-weight: 1;
+font-weight: 100;
+font-weight: 100.6;
+font-weight: 123;
+font-weight: 200;
+font-weight: 300;
+font-weight: 321;
+font-weight: 400;
+font-weight: 500;
+font-weight: 600;
+font-weight: 700;
+font-weight: 800;
+font-weight: 900;
+font-weight: 1000;
+
+/* Valeurs globales */
+font-weight: inherit;
+font-weight: initial;
+font-weight: unset;
+</pre>
+
+<p>La propriété <code>font-weight</code> peut être définie grâce à l'une des valeurs suivantes.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Le niveau de graisse normal pour la fonte. Équivalent à la valeur <code>400</code>.</dd>
+ <dt><code>bold</code></dt>
+ <dd>Le texte est en gras. Équivalent à la valeur <code>700</code>.</dd>
+ <dt><code>lighter</code></dt>
+ <dd>On diminue la graisse d'un niveau par rapport à l'élément parent (selon les fontes / graisses disponibles pour la police utilisée). Le texte paraît plus fin.</dd>
+ <dt><code>bolder</code></dt>
+ <dd>On augmente la graisse d'un niveau par rapport à l'élément parent (selon les fontes / graisses disponibles pour la police utilisée). Le texte est plus gras.</dd>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>Une valeur numérique (type {{cssxref("&lt;number&gt;")}}) comprise entre 1 et 1000. Plus la valeur est grande, plus le niveau de graisse est élevé. Ces valeurs permettent de couvrir un éventail de valeurs plus larges qu'avec <code>normal</code> et <code>bold</code>.</dd>
+</dl>
+
+<p>Pour d'anciennes versions de la spécification, <code>font-weight</code> n'acceptait que les mots-clés et les valeurs numériques 100, 200, 300, 400, 500, 600, 700, 800 et 900. Les polices non-variables ne peuvent utiliser que ces valeurs (les valeurs plus fines seront converties cf. ci-après).</p>
+
+<p>Le module de spécification <em>CSS Fonts</em> de niveau 4 a étendu la syntaxe afin de pouvoir utiliser n'importe quel nombre entre 1 et 1000. Cela permet aux polices variables d'avoir une meilleur précision quant aux tailles utilisables. On notera que cette fonctionnalité n'est pas encore prise en charge (à date de juin 2018) par tous les navigateurs.</p>
+
+<h3 id="Conversion_des_valeurs">Conversion des valeurs</h3>
+
+<p>Si une fonte avec la graisse demandée n'est pas disponible, le moteur suit la méthode suivante pour déterminer la fonte qui sera affichée :</p>
+
+<ul>
+ <li>Si un niveau supérieur à <code>500</code> est utilisé, c'est la graisse la plus sombre et la plus proche qui sera utilisée (la plus proche s'il n'y a pas de graisse plus forte)</li>
+ <li>Si un niveau inférieur à <code>400</code> est utilisé, c'est la graisse la plus claire la plus proche qui est utilisée (la plus proche s'il n'y a pas de graisse plus claire)</li>
+ <li>Si un niveau égal à <code>400</code> est utilisé, <code>500</code> sera utilisé. Si <code>500</code> n'est pas disponible, on utilisera la méthode de calcul sur un niveau inférieur à 400.</li>
+ <li>Si un niveau égal à <code>500</code> est utilisé, <code>400</code> sera utilisé. Si <code>400</code> n'est pas disponible, on utilisera la méthode de calcul sur un niveau inférieur à <code>400</code>.</li>
+</ul>
+
+<p>Autrement dit, pour les fontes dont les niveaux de graisse sont uniquement <code>normal</code> et <code>bold</code>, <code>100</code>-<code>500</code> seront considérés équivalents à <code>normal</code> et <code>600</code>-<code>900</code> à <code>bold</code>.</p>
+
+<h3 id="Signification_des_poids_relatifs">Signification des poids relatifs</h3>
+
+<p>Lorsqu'on utilise les valeurs <code>lighter</code> ou <code>bolder</code>, on peut utiliser le tableau suivant pour calculer le poids absolu de l'élément :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Valeur héritée</th>
+   <th><code>bolder</code></th>
+   <th><code>lighter</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th>100</th>
+   <td>400</td>
+   <td>100</td>
+  </tr>
+  <tr>
+   <th>200</th>
+   <td>400</td>
+   <td>100</td>
+  </tr>
+  <tr>
+   <th>300</th>
+   <td>400</td>
+   <td>100</td>
+  </tr>
+  <tr>
+   <th>400</th>
+   <td>700</td>
+   <td>100</td>
+  </tr>
+  <tr>
+   <th>500</th>
+   <td>700</td>
+   <td>100</td>
+  </tr>
+  <tr>
+   <th>600</th>
+   <td>900</td>
+   <td>400</td>
+  </tr>
+  <tr>
+   <th>700</th>
+   <td>900</td>
+   <td>400</td>
+  </tr>
+  <tr>
+   <th>800</th>
+   <td>900</td>
+   <td>700</td>
+  </tr>
+  <tr>
+   <th>900</th>
+   <td>900</td>
+   <td>700</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Correspondance_entre_les_valeurs_numériques_et_les_noms_communément_utilisés"><a id="communs" name="communs">Correspondance entre les valeurs numériques et les noms communément utilisés</a></h3>
+
+<p>Les valeurs allant de 100 à 900 correspondent environ aux noms suivants, communément utilisés pour désigner les variantes de fonte, selon la graisse, d'une même police (<em>NdT : les noms sont laissés en anglais car généralement utilisés tels quels</em>) :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Valeur</th>
+   <th scope="col">Nom communément utilisé</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>100</td>
+   <td><em>Thin (Hairline)</em></td>
+  </tr>
+  <tr>
+   <td>200</td>
+   <td><em>Extra Light (Ultra Light)</em></td>
+  </tr>
+  <tr>
+   <td>300</td>
+   <td><em>Light</em></td>
+  </tr>
+  <tr>
+   <td>400</td>
+   <td><em>Normal</em></td>
+  </tr>
+  <tr>
+   <td>500</td>
+   <td><em>Medium</em></td>
+  </tr>
+  <tr>
+   <td>600</td>
+   <td><em>Semi Bold (Demi Bold)</em></td>
+  </tr>
+  <tr>
+   <td>700</td>
+   <td><em>Bold</em></td>
+  </tr>
+  <tr>
+   <td>800</td>
+   <td><em>Extra Bold (Ultra Bold)</em></td>
+  </tr>
+  <tr>
+   <td>900</td>
+   <td><em>Black (Heavy)</em></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Interpolation">Interpolation</h3>
+
+<p>Une valeur <code>font-weight</code> est interpolée de façon discrète (par multiple de 100). L'interpolation se produit sur des valeurs réelles puis la valeur est convertie au multiple de 100 le plus proche. Les valeurs à égale distance entre deux multiples de 100 sont arrondies à la valeur supérieure.</p>
+
+<h3 id="Polices_variables">Polices variables</h3>
+
+<p>La plupart des polices possèdent des niveaux de graisses qui correspondent aux <a href="#communs">niveaux communément utilisés</a>. Toutefois, certaines polices, appelées « polices variables » prennent en charge un intervalle de niveaux avec plus ou moins de détail, ce qui permet à l'éditeur du document de mieux contrôler la graisse utilisée.</p>
+
+<p>Pour les polices variables TrueType ou OpenType, c'est l'axe de variation <code>wght</code> qui est utilisé afin d'implémenter les variations de largeur.</p>
+
+<p>Pour que l'exemple suivant fonctionne, il est nécessaire d'utiliser un navigateur qui prend en charge la spécification <em>CSS Fonts</em> de niveau 4.</p>
+
+<div>{{EmbedLiveSample("variable-font-example", 1200, 180, "", "", "example-outcome-frame")}}</div>
+
+<h4 id="HTML">HTML</h4>
+
+<div id="variable-font-example">
+<pre class="brush: html">&lt;header&gt;
+    &lt;input type="range" id="weight" name="weight" min="1" max="1000" /&gt;
+    &lt;label for="weight"&gt;Weight&lt;/label&gt;
+&lt;/header&gt;
+&lt;div class="container"&gt;
+    &lt;p class="sample"&gt;...it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">/*
+Mutator Sans is created by LettError (https://github.com/LettError/mutatorSans)
+and is used here under the terms of its license:
+https://github.com/LettError/mutatorSans/blob/master/LICENSE
+*/
+
+@font-face {
+  src: url('https://mdn.mozillademos.org/files/16011/MutatorSans.ttf');
+  font-family:'MutatorSans';
+  font-style: normal;
+}
+
+label {
+  font: 1rem monospace;
+  white-space: nowrap;
+}
+
+.container {
+  max-height: 150px;
+  overflow-y: auto;
+}
+
+.sample {
+  text-transform: uppercase;
+  font: 1.5rem 'MutatorSans', sans-serif;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">html, body {
+  max-height: 100vh;
+  max-width: 100vw;
+  overflow: hidden;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+}
+
+header {
+  margin-bottom: 1.5rem;
+}
+
+.container {
+  flex-grow: 1;
+}
+
+.container &gt; p {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+</pre>
+</div>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">let weightLabel = document.querySelector('label[for="weight"]');
+let weightInput = document.querySelector('#weight');
+let sampleText = document.querySelector('.sample');
+
+function update() {
+  weightLabel.textContent = `font-weight: ${weightInput.value};`;
+  sampleText.style.fontWeight = weightInput.value;
+}
+
+weightInput.addEventListener('input', update);
+
+update();
+</pre>
+</div>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML_2">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  Alice was beginning to get very tired of sitting by her sister on the
+  bank, and of having nothing to do: once or twice she had peeped into the
+  book her sister was reading, but it had no pictures or conversations in
+  it, 'and what is the use of a book,' thought Alice 'without pictures or
+  conversations?'
+&lt;/p&gt;
+
+&lt;div&gt;I'm heavy&lt;br/&gt;
+  &lt;span&gt;I'm lighter&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS_2">CSS</h3>
+
+<pre class="brush:css">/* Le texte du paragraphe est gras. */
+p {
+  font-weight: bold;
+}
+
+/* Le texte du div est deux niveaux plus sombres
+   mais moins gras qu'une graisse normale. */
+div {
+ font-weight: 600;
+}
+
+/* Le texte dans le span est un niveau plus
+   clair que le parent. */
+span {
+  font-weight: lighter;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","400","300")}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Pour les personnes ayant une vision faible, il peut être extrêmement difficile de lire un texte avec <code>font-weight</code> qui vaut <code>100</code> ou <code>200</code>, notamment <a href="/fr/docs/Web/CSS/color#Accessibilité">si le contraste entre le texte et l'arrière-plan est faible</a>.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener"><em>Understanding Success Criterion 1.4.8 - W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Fonts', '#font-weight-prop', 'font-weight')}}</td>
+   <td>{{Spec2('CSS4 Fonts')}}</td>
+   <td>Définition de <code>font-weight</code> qui précise que la propriété peut utiliser des valeurs comprises entre <code>1</code> et <code>1000</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#font-weight-prop', 'font-weight')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Aucun changement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'font-weight')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>font-weight</code> peut désormais être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-weight', 'font-weight')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Aucun changement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#font-weight', 'font-weight')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.font-weight")}}</p>
diff --git a/files/fr/web/css/font/index.html b/files/fr/web/css/font/index.html
new file mode 100644
index 0000000000..7dcfa34eae
--- /dev/null
+++ b/files/fr/web/css/font/index.html
@@ -0,0 +1,236 @@
+---
+title: font
+slug: Web/CSS/font
+tags:
+  - CSS
+  - Polices CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/font
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>font</code></strong> est :</p>
+
+<ul>
+ <li>une propriété raccourcie permettant de définir rapidement {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}},  {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}} et {{cssxref("font-family")}}</li>
+ <li>ou une propriété permettant d'utiliser une police système pour la police de caractères d'un élément grâce à certains mots-clés spécifiques.</li>
+</ul>
+
+<div>{{EmbedInteractiveExample("pages/css/font.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Comme pour les autres propriétés CSS, les valeurs qui ne sont pas définies avec la propriété raccourcie sont définies avec leur valeur initiale, ce qui peut surcharger les valeurs définies précédemment avec les propriétés « détaillées ». Bien qu'elles ne puissent pas directement être paramétrées avec <code>font</code>, les propriétés détaillées, {{cssxref("font-size-adjust")}}, et {{cssxref("font-kerning")}} sont également réinitialisées avec leurs valeurs initiales.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css">/* size | family */
+font: 2em "Open Sans", sans-serif;
+
+/* style | size | family */
+font: italic 2em "Open Sans", sans-serif;
+
+/* style | variant | weight | size/line-height | family */
+font: italic small-caps bolder 16px/3 cursive;
+
+/* style | variant | weight | stretch | size/line-height | family */
+font: italic small-caps bolder condensed 16px/3 cursive;
+
+/* Mots-clés indiquant la police à utiliser */
+/* pour les boîtes de dialogue système      */
+font: message-box;
+font: icon;
+
+/* Valeurs globales */
+font: inherit;
+font: initial;
+font: unset;
+</pre>
+
+<p>La propriété <code>font</code> peut être définie avec un seul mot-clé (qui sélectionnera la police système à utiliser) ou comme propriété raccourcie pour paramétrer les différentes propriétés relatives aux polices.</p>
+
+<p>Si <code>font</code> est définie grâce à un mot-clé, ce mot-clé doit être : <a href="#keyword"><code>caption</code>, <code>icon</code>, <code>menu</code>, <code>message-box</code>, <code>small-caption</code> ou <code>status-bar</code></a>.</p>
+
+<p>Si <code>font</code> est définie comme une propriété raccourcie :</p>
+
+<ul>
+ <li>La déclaration devra inclure des valeurs pour :
+  <ul>
+   <li>{{cssxref("&lt;font-size&gt;")}}</li>
+   <li>{{cssxref("&lt;font-family&gt;")}}</li>
+  </ul>
+ </li>
+ <li>La déclaration pourra éventuellement inclure des valeurs pour :
+  <ul>
+   <li>{{cssxref("&lt;font-style&gt;")}}</li>
+   <li>{{cssxref("&lt;font-variant&gt;")}}</li>
+   <li>{{cssxref("&lt;font-weight&gt;")}}</li>
+   <li>{{cssxref("&lt;font-stretch&gt;")}}</li>
+   <li>{{cssxref("&lt;line-height&gt;")}}</li>
+  </ul>
+ </li>
+ <li>Les valeurs pour <code>font-style</code>, <code>font-variant</code> et <code>font-weight</code> doivent précéder la valeur pour <code>font-size</code></li>
+ <li>La valeur de <code>font-variant</code> ne peut utiliser que les valeurs définies en CSS 2.1 : <code>normal</code> et <code>small-caps</code></li>
+ <li>La valeur de <code>font-stretch</code> ne peut être qu'un mot-clé.</li>
+ <li>La valeur pour <code>line-height</code> doit immédiatement suivre la valeur pour <code>font-size</code>, séparée par une barre oblique (par exemple "<code>16px/3</code>")</li>
+ <li>La valeur pour <code>font-family</code> doit être la dernière fournie.</li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;'font-style'&gt;</code></dt>
+ <dd>Voir la propriété {{cssxref("font-style")}}.</dd>
+ <dt><code>&lt;'font-variant'&gt;</code></dt>
+ <dd>Voir la propriété {{cssxref("font-variant")}}.</dd>
+ <dt><code>&lt;'font-weight'&gt;</code></dt>
+ <dd>Voir la propriété {{cssxref("font-weight")}}.</dd>
+ <dt><code>&lt;'font-stretch'&gt;</code></dt>
+ <dd>Voir la propriété {{cssxref("font-stretch")}}.</dd>
+ <dt><code>&lt;'font-size'&gt;</code></dt>
+ <dd>Voir la propriété {{cssxref("font-size")}}.</dd>
+ <dt><code>&lt;'line-height'&gt;</code></dt>
+ <dd>Voir la propriété {{cssxref("line-height")}}.</dd>
+ <dt><code>&lt;'font-family'&gt;</code></dt>
+ <dd>Voir la propriété {{cssxref("font-family")}}.</dd>
+ <dt><a id="keyword">Polices système :<code>caption</code> <code>icon</code> <code>menu</code> <code>message-box</code> <code>small-caption</code> <code>status-bar</code></a></dt>
+ <dd>Un mot-clé peut être utilisé pour indiquer une police système spécifique :
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td><code>caption</code></td>
+    <td>La police système utilisée pour les libellés des contrôles (par exemples les boutons, listes déroulantes, etc.).</td>
+   </tr>
+   <tr>
+    <td><code>icon</code></td>
+    <td>La police système utilisée pour les textes accompagnant les icônes.</td>
+   </tr>
+   <tr>
+    <td><code>menu</code></td>
+    <td>La police système utilisée pour les menus.</td>
+   </tr>
+   <tr>
+    <td><code>message-box</code></td>
+    <td>La police système utilisée dans les boîtes de dialogue.</td>
+   </tr>
+   <tr>
+    <td><code>small-caption</code></td>
+    <td>La police système utilisée pour les libellés des contrôles de petite taille.</td>
+   </tr>
+   <tr>
+    <td><code>status-bar</code></td>
+    <td>La police système utilisée dans les barres de statut de la fenêtre.</td>
+   </tr>
+  </tbody>
+ </table>
+ La plupart du temps, les navigateurs implémentent d'autres valeurs, préfixées. Par exemple, Gecko implémente <code>-moz-window</code>, <code>-moz-document</code>, <code>-moz-desktop</code>, <code>-moz-info</code>, <code>-moz-dialog</code>, <code>-moz-button</code>, <code>-moz-pull-down-menu</code>, <code>-moz-list</code> and <code>-moz-field</code>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* La corps de la police sera  12px */
+/* La hauteur de ligne 14px et la   */
+/* famille de polices sans-serif    */
+
+.exemple1 {
+  font: 12px/14px sans-serif;
+}
+
+/* La taille de la police mesurera   */
+/* 80% de celle de l'élément parent  */
+/* ou la valeur par défaut et la     */
+/* famille de police sera sans-serif */
+
+.exemple2 {
+  font: 80% sans-serif;
+}
+
+/* La graisse est activée, le style    */
+/* est italique, la taille est grande  */
+/* et la famille est serif.            */
+
+.gras_italique_serif {
+  font: bold italic large serif;
+}
+
+/* On utilise la même police que pour */
+/* la barre de statut de la fenêtre.  */
+.statut {
+  font: status-bar;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="exemple1"&gt;
+  « Toujours aussi mouillée, » dit Alice tristement.
+  « Je ne sèche que d’ennui. »
+&lt;/p&gt;
+
+&lt;p class="exemple2"&gt;
+  « Dans ce cas, » dit le Dodo avec emphase, se
+  dressant sur ses pattes, « je propose l’ajournement,
+  et l’adoption immédiate de mesures énergiques. »
+&lt;/p&gt;
+
+&lt;p class="gras_italique_serif"&gt;
+  « Parlez français, » dit l’Aiglon ; « je ne
+  comprends pas la moitié de ces grands mots, et, qui
+  plus est, je ne crois pas que vous les compreniez
+  vous-même. » L’Aiglon baissa la tête pour cacher
+  un sourire, et quelques-uns des autres oiseaux
+  ricanèrent tout haut.
+&lt;/p&gt;
+
+&lt;p class="statut"&gt;
+  « J’allais proposer, » dit le Dodo d’un ton vexé,
+  « une course cocasse ; c’est ce que nous pouvons
+  faire de mieux pour nous sécher. »
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","300","500")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#font-prop', 'font')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Prise en charge des valeurs de <code>font-stretch</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'fonts.html#font-shorthand', 'font-weight')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Prise en charge des mots-clés.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#font', 'font')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.font")}}</p>
diff --git a/files/fr/web/css/frequency-percentage/index.html b/files/fr/web/css/frequency-percentage/index.html
new file mode 100644
index 0000000000..b2c35567a3
--- /dev/null
+++ b/files/fr/web/css/frequency-percentage/index.html
@@ -0,0 +1,50 @@
+---
+title: <frequency-percentage>
+slug: Web/CSS/frequency-percentage
+tags:
+  - CSS
+  - Reference
+  - Type
+translation_of: Web/CSS/frequency-percentage
+---
+<div>{{CSSRef}}</div>
+
+<p>Le type de donnée <strong><code>&lt;frequency-percentage&gt;</code></strong> représente une valeur qui peut être une valeur de type {{Cssxref("frequency")}} ou une valeur de type {{Cssxref("percentage")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Se référer à la documentation des types {{Cssxref("frequency")}} et {{Cssxref("percentage")}} pour plus de détails sur les syntaxes possibles avec chacun de ces types.</p>
+
+<h2 id="Utilisation_avec_calc()">Utilisation avec <code>calc()</code></h2>
+
+<p>Lorsqu'une valeur de type <code>&lt;frequency-percentage&gt;</code> peut être utilisée dans une déclaration, cela signifie que le pourcentage sera résolu comme une fréquence et qu'il peut alors être utilisé dans une expression <code><a href="/fr/docs/Web/CSS/calc">calc()</a></code>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Values', '#mixed-percentages', '&lt;frequency-percentage&gt;')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#mixed-percentages', '&lt;frequency-percentage&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Définition du type <code>&lt;frequency-percentage&gt;</code>. Ajout de <code>calc()</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.types.frequency-percentage")}}</p>
diff --git a/files/fr/web/css/frequency/index.html b/files/fr/web/css/frequency/index.html
new file mode 100644
index 0000000000..6ebf21cde4
--- /dev/null
+++ b/files/fr/web/css/frequency/index.html
@@ -0,0 +1,70 @@
+---
+title: <frequency>
+slug: Web/CSS/frequency
+tags:
+  - CSS
+  - Reference
+  - Type
+translation_of: Web/CSS/frequency
+---
+<div>{{CSSRef}}</div>
+
+<p>Le type de donnée CSS <strong><code>&lt;frequency&gt;</code></strong> permet de représenter des fréquences (par exemple la hauteur d'une voie). Ce type n'est actuellement utilisé pour aucune propriété CSS.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Une valeur de type <code>&lt;frequency&gt;</code> se compose d'une valeur {{cssxref("&lt;number&gt;")}} suivi immédiatement d'une unité de fréquence. Comme pour les autres dimensions CSS, il n'y a pas d'espace entre le nombre et le littéral de l'unité.</p>
+
+<h3 id="Unités">Unités</h3>
+
+<dl>
+ <dt><code>Hz</code></dt>
+ <dd>Permet de représenter des fréquences exprimées en Hertz (par exemple <code>0Hz</code>, <code>1500Hz</code>, <code>10000Hz</code>)</dd>
+ <dt><code>kHz</code></dt>
+ <dd>Permet de représenter des fréquences exprimées en kilohertz (par exemple <code>0kHz</code>, <code>1.5kHz</code>, <code>10kHz</code>).</dd>
+</dl>
+
+<p>Bien que la valeur nulle puisse être représentée avec le même littéral pour les deux unités, l'unité ne doit pas être absente sinon la valeur sera interprétée comme une valeur de longueur (type {{cssxref("length")}}) et ne représentera ni <code>0Hz</code> ni <code>0kHz</code>. Bien que les unités CSS soient insensibles à la casse, c'est une bonne pratique que d'utiliser un H majuscule pour <code>Hz</code> et <code>kHz</code> car selon le <a href="https://fr.wikipedia.org/wiki/Syst%C3%A8me_international_d%27unit%C3%A9s">système international</a>, <a href="https://fr.wikipedia.org/wiki/Heinrich_Rudolf_Hertz">Hertz</a> est un nom de famille.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Valeurs_valides">Valeurs valides</h3>
+
+<pre class="brush: css example-good">12Hz     Entier positif
+4.3Hz    Flottant
+14KhZ    Unité insensible à la casse
++0Hz     Zero avec un signe + et une unité
+-0kHz    Zero avec un signe - et une unité</pre>
+
+<h3 id="Valeurs_invalides">Valeurs invalides</h3>
+
+<pre class="brush: css example-bad">12.0     Cette valeur est un nombre pas une fréquence (il manque l'unité).
+7 Hz     Aucun espace n'est autorisé entre le nombre et l'unité.
+0        Bien qu'un zéro puisse être utilisé sans unité pour une longueur, ce n'est pas le cas pour une fréquence.</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#frequency', '&lt;frequency&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Ce type de donnés fut initialement introduit avec la spécification <a class="external" href="https://www.w3.org/TR/CSS2/">CSS Niveau 2</a> pour le <a href="/fr/docs/Web/CSS/@media/aural">groupe de média aural</a> qui est désormais obsolète. Ce type de données a donc été déprécié puis réintroduit avec CSS3 bien qu'aucune propriété ne l'utilise à l'heure actuelle.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.types.frequency")}}</p>
diff --git a/files/fr/web/css/gap/index.html b/files/fr/web/css/gap/index.html
new file mode 100644
index 0000000000..8ce73e5e32
--- /dev/null
+++ b/files/fr/web/css/gap/index.html
@@ -0,0 +1,228 @@
+---
+title: gap (grid-gap)
+slug: Web/CSS/gap
+tags:
+  - CSS
+  - Propriété
+  - Propriété raccourcie
+  - Reference
+translation_of: Web/CSS/gap
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>gap</code></strong> est <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">une propriété raccourcie</a> pour {{cssxref("row-gap")}} et {{cssxref("column-gap")}} qui permet de définir les espaces entre les lignes et entre les colonnes d'une grille.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/gap.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note">
+<p><strong>Note :</strong> La propriété {{cssxref("grid-gap")}} a initialement été définie dans le module de spécification <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a>. Cette version préfixée a été remplacée par <code>gap</code>. Toutefois, à des fins de compatibilité envers les navigateurs qui n'implémentent pas encore la version non-préfixée, mieux vaut utiliser les deux versions.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* Une valeur de longueur */
+/* Type &lt;length&gt;          */
+gap: 20px;
+gap: 1em;
+gap: 3vmin;
+gap: 0.5cm;
+
+/* Une valeur proportionnelle */
+/* Type &lt;percentage&gt;          */
+gap: 16%;
+gap: 100%;
+
+/* Deux valeurs de longueur */
+gap: 20px 10px;
+gap: 1em 0.5em;
+gap: 3vmin 2vmax;
+gap: 0.5cm 2mm;
+
+/* Une ou deux valeurs proportionnelles */
+/* Type &lt;percentage&gt;             */
+gap: 16% 100%;
+gap: 21px 82%;
+
+/* Valeurs calc() */
+gap: calc(10% + 20px);
+gap: calc(20px + 10%) calc(10% - 5px);
+
+/* Valeurs globales */
+gap: inherit;
+gap: initial;
+gap: unset;
+</pre>
+
+<p>Cette propriété est définie avec une valeur <code>&lt;'row-gap'&gt;</code>, éventuellement suivi d'une valeur <code>&lt;'column-gap'&gt;</code>. Si <code>&lt;'column-gap'&gt;</code> n'est pas utilisée, la valeur utilisée sera la même que <code>&lt;'row-gap'&gt;</code>.</p>
+
+<p><code>&lt;'row-gap'&gt;</code> et <code>&lt;'column-gap'&gt;</code> sont des valeurs de type <code>&lt;length&gt;</code> ou <code>&lt;percentage&gt;</code>.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>La largeur de l'espace entre les lignes et/ou entre les colonnes (cf. {{cssxref("&lt;length&gt;")}} pour les valeurs utilisables).</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>La largeur de l'espace entre les lignes et/ou entre les colonnes en fonction de la taille de l'élément englobant (cf. {{cssxref("&lt;percentage&gt;")}} pour les valeurs utilisables).</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Disposition_flexible">Disposition flexible</h3>
+
+<p>{{SeeCompatTable}}</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html; notranslate">&lt;div id="flexbox"&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css; highlight[5] notranslate">#flexbox {
+  display: flex;
+  flex-wrap: wrap;
+  width: 300px;
+  gap: 20px 5px;
+}
+
+#flexbox &gt; div {
+  border: 1px solid green;
+  background-color: lime;
+  flex: 1 1 auto;
+  width: 100px;
+  height: 50px;
+
+}
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Disposition_flexible", "auto", "120px")}}</p>
+
+<h3 id="Grilles_CSS">Grilles CSS</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html; notranslate">&lt;div id="grid"&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<div class="hidden">
+<pre class="brush: css notranslate">#grid {
+  grid-gap: 20px 5px;
+}
+</pre>
+</div>
+
+<pre class="brush: css; highlight[5] notranslate">#grid {
+  display: grid;
+  height: 200px;
+  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
+  gap: 20px 5px;
+}
+
+#grid &gt; div {
+  border: 1px solid green;
+  background-color: lime;
+}
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Grilles_CSS", "auto", "120px")}}</p>
+
+<h3 id="Multi-colonnes">Multi-colonnes</h3>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html; notranslate">&lt;p class="content-box"&gt;
+  voici un texte en multi-colonne sur des colonnes avec
+  une gouttière de 40 pixels créée grâce à la propriété
+  CSS &lt;code&gt;gap&lt;/code&gt;. Est-ce que c'est pas trop génial ?
+&lt;/p&gt;
+</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css; highlight[3] notranslate">.content-box {
+  column-count: 3;
+  gap: 40px;
+}
+</pre>
+
+<h4 id="Résultat_3">Résultat</h4>
+
+<p>{{EmbedLiveSample("Multi-column_layout", "auto", "120px")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Box Alignment", "#propdef-gap", "gap")}}</td>
+   <td>{{Spec2("CSS3 Box Alignment")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<h3 id="Prise_en_charge_pour_les_dispositions_flexibles">Prise en charge pour les dispositions flexibles</h3>
+
+<p>{{Compat("css.properties.gap.flex_context")}}</p>
+
+<h3 id="Prise_en_charge_pour_les_grilles_CSS">Prise en charge pour les grilles CSS</h3>
+
+<p>{{Compat("css.properties.gap.grid_context")}}</p>
+
+<h3 id="Prise_en_charge_pour_les_dispositions_multi-colonnes">Prise en charge pour les dispositions multi-colonnes</h3>
+
+<p>{{Compat("css.properties.gap.multicol_context")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les versions standards, sans préfixe, des propriétés associées :
+  <ul>
+   <li>{{cssxref("row-gap")}},</li>
+   <li>{{cssxref("column-gap")}},</li>
+  </ul>
+ </li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base#Les_gouttières">Guide : les concepts de base : les gouttières</a></li>
+</ul>
diff --git a/files/fr/web/css/gradient/index.html b/files/fr/web/css/gradient/index.html
new file mode 100644
index 0000000000..9dcad38554
--- /dev/null
+++ b/files/fr/web/css/gradient/index.html
@@ -0,0 +1,134 @@
+---
+title: <gradient>
+slug: Web/CSS/gradient
+tags:
+  - CSS
+  - Reference
+  - Type
+translation_of: Web/CSS/gradient
+---
+<div>{{CSSRef}}</div>
+
+<p>Le type de donnée CSS <strong><code>&lt;gradient&gt;</code></strong> permet de représenter une {{cssxref("&lt;image&gt;")}} contenant un dégradé entre deux ou plusieurs couleurs. Un dégradé CSS n'est pas une couleur CSS (type {{cssxref("&lt;color&gt;")}}) mais une image <a href="/fr/docs/Web/CSS/image">sans dimension intrinsèque</a> (elle n'a aucune taille naturelle ou ratio), sa taille réelle sera celle de l'élément auquel elle est appliquée.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/type-gradient.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Comme pour l'interpolation des autres couleurs, les dégradés sont calculés dans l'espace de couleurs alpha prémultiplié. Cela permet d'éviter l'apparition de nuances de gris lorsque la couleur et l'opacité varient (on peut constater ce problème avec le mot-clé <code>transparent</code> dans d'anciens navigateurs).</p>
+
+<h2 id="Les_types_de_dégradés">Les types de dégradés</h2>
+
+<h3 id="Les_dégradés_linéaires">Les dégradés linéaires</h3>
+
+<p>Ils sont générés à partir de la fonction {{cssxref("linear-gradient", "linear-gradient()")}} : la couleur évolue suivant un axe imaginaire :</p>
+
+<pre class="brush: html hidden">A rainbow made from a gradient
+</pre>
+
+<pre class="brush: css">body {
+  background: -moz-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
+  background: -webkit-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
+  background: -ms-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
+  background: -o-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
+  background: linear-gradient(to right,red,orange,yellow, green, blue,indigo,violet);
+}</pre>
+
+<p>{{EmbedLiveSample('Les_dégradés_linéaires', 600, 20)}}</p>
+
+<h3 id="Les_dégradés_radiaux">Les dégradés radiaux</h3>
+
+<p>Ils sont générés à partir de la fonction {{cssxref("radial-gradient", "radial-gradient()")}}. Plus on s'éloigne du point d'origine, plus la couleur varie par rapport à la couleur d'origine :</p>
+
+<pre class="brush: html hidden">Radial gradient
+  </pre>
+
+<pre class="brush: css">body {
+  background: -moz-radial-gradient(red, yellow, rgb(30, 144, 255)) repeat scroll 0% 0% transparent;
+  background: radial-gradient(red, yellow, rgb(30, 144, 255));
+}
+</pre>
+
+<p>{{EmbedLiveSample('Les_dégradés_radiaux', 600, 20)}}</p>
+
+<h3 id="Les_dégradés_répétés">Les dégradés répétés</h3>
+
+<p>Ce sont des dégradés linéaires de taille fixe ou des dégradés radiaux qui sont répétés autant que nécessaire pour remplir la boîte visée :</p>
+
+<pre class="brush: html hidden">Repeating gradient
+</pre>
+
+<pre class="brush: css">body {
+  background: -moz-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px);
+  background: repeating-linear-gradient(to top left, red, red 5px, white 5px, white 10px);
+}  </pre>
+
+<p>{{EmbedLiveSample('Les_dégradés_répétés', 600, 20)}}</p>
+
+<h4 id="Dégradé_conique">Dégradé conique</h4>
+
+<p>Les couleurs de transitions s'appliquent progressivement autour d'un cercle. Un tel dégradé est généré avec la fonction {{cssref("conic-gradient","conic-gradient()")}}.</p>
+
+<div id="conic-gradient">
+<div class="hidden">
+<pre class="brush: html">&lt;div class="conic-gradient"&gt;Conic gradient&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 200px;
+  height: 200px;
+}</pre>
+</div>
+
+<pre class="brush: css">.conic-gradient {
+  background: conic-gradient(lightpink, white, powderblue);
+}
+</pre>
+
+<p>{{EmbedLiveSample('conic-gradient', 240, 80)}}</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Images', '#gradients', '&lt;gradient&gt;')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Images', '#gradients', '&lt;gradient&gt;')}}</td>
+   <td>{{Spec2('CSS4 Images')}}</td>
+   <td>Ajout des dégradés coniques.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.types.image.gradient")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">Manipuler les dégradés CSS</a></li>
+ <li>{{cssxref("&lt;gradient&gt;")}}</li>
+ <li>{{cssxref("conic-gradient", "conic-gradient()")}}</li>
+ <li>{{cssxref("linear-gradient", "linear-gradient()")}}</li>
+ <li>{{cssxref("radial-gradient", "radial-gradient()")}}</li>
+ <li>{{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}</li>
+ <li>{{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}</li>
+ <li><a href="/fr/docs/Web/CSS/Types_CSS">Les types de donnée en CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/Valeurs_et_unités_CSS">Les unités et valeurs en CSS</a></li>
+ <li><a href="fr/docs/Apprendre/CSS/Introduction_à_CSS/Values_and_units">Introduction à CSS : les unités et les valeurs</a></li>
+</ul>
diff --git a/files/fr/web/css/grid-area/index.html b/files/fr/web/css/grid-area/index.html
new file mode 100644
index 0000000000..11f8d6af87
--- /dev/null
+++ b/files/fr/web/css/grid-area/index.html
@@ -0,0 +1,156 @@
+---
+title: grid-area
+slug: Web/CSS/grid-area
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/grid-area
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>grid-area</code></strong> est une propriété raccourcie pour {{cssxref("grid-row-start")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-row-end")}} et {{cssxref("grid-column-end")}} qui permet de définir la taille d'un objet de la grille et son emplacement via les bords de sa zone de grille.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/grid-area.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Si quatre valeurs <code>&lt;grid-line&gt;</code> sont fournies, la première sera appliquée à <code>grid-row-start</code>, la deuxième à <code>grid-column-start</code>, la troisième à <code>grid-row-end</code> et la quatrième à <code>grid-column-end</code>.</p>
+
+<p>Lorsqu'il n'y a pas de valeur pour <code>grid-column-end</code>, si <code>grid-column-start</code> est un identifiant de zone ({{cssxref("&lt;custom-ident&gt;")}}, <code>grid-column-end</code> sera défini avec cet identifiant, sinon il sera défini avec <code>auto</code>.</p>
+
+<p>Lorsqu'il n'y a pas de valeur pour <code>grid-row-end</code>, si <code>grid-row-start</code> est un identifiant de zone, <code>grid-row-end</code> sera défini avec cet identifiant, sinon il sera défini avec <code>auto</code>.</p>
+
+<p>Lorsqu'il n'y  a pas de valeur pour <code>grid-column-start</code>, si <code>grid-row-start</code> est un identifiant de zone, les quatres propriétés seront définies avec cette valeur. Sinon, elles vaudront <code>auto</code>.</p>
+
+<p>La propriété <code>grid-area</code> peut également prendre comme valeur un identifiant personnalisé ({{cssxref("&lt;custom-ident&gt;")}}) qui pourra être utilisé comme nom pour une zone de la grille placée grâce à la propriété {{cssxref("grid-template-areas")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+grid-area: auto;
+grid-area: auto / auto;
+grid-area: auto / auto / auto;
+grid-area: auto / auto / auto / auto;
+
+/* Valeurs de type &lt;custom-ident&gt; */
+grid-area: une-zone-de-grille;
+grid-area: une-zone-de-grille / une-autre-zone;
+
+/* Forme : &lt;integer&gt; &amp;&amp; &lt;custom-ident&gt;? */
+grid-area: une-zone-de-grille 4;
+grid-area: une-zone-de-grille 4 / 2 une-autre-zone;
+
+/* Forme span &amp;&amp; [ &lt;integer&gt; || &lt;custom-ident&gt; ] */
+grid-area: span 3;
+grid-area: span 3 / span une-zone-de-grille;
+grid-area: 2 span / une-autre-zone span;
+
+/* Valeurs globales */
+grid-area: inherit;
+grid-area: initial;
+grid-area: unset;</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Un mot-clé qui indique que la propriété ne contribue pas au placement de l'élément sur la grille. Cela indique un placement automatique, une taille de fragment (<em>span</em>) automatique ou une taille par défaut de <code>1</code>.</dd>
+ <dt><code>&lt;custom-ident&gt;</code></dt>
+ <dd>S'il existe une ligne nommée avec '&lt;custom-ident&gt;-start', la première ligne correspondante contribue au placement de l'élément sur la grille.
+ <p class="note"><strong>Note :</strong> Les noms des zones de grille sont générés implicitement. Ainsi, en utilisant <code>grid-area: foo;</code> cela sélectionnera le début de la grille nommée correspondante (sauf si une autre ligne <code>foo-start</code> a été explicitement déclarée).</p>
+
+ <p>Sinon, la valeur est traitée comme si on avait utilisé <code>&lt;custom-ident&gt;</code> et la valeur <code>1</code>.</p>
+ </dd>
+ <dt><code>&lt;integer&gt; &amp;&amp; &lt;custom-ident&gt;?</code></dt>
+ <dd>La n-ième ligne de la grille contribue au placement de l'élément sur la grille. Si un entier négatif est utilisé, le comptage sera fait depuis la fin de la grille explicite.
+ <p>Si un nom est fourni pour &lt;custom-ident&gt;, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existant avec ce nom, toutes les lignes implicites seront comptées afin de trouver la position.</p>
+
+ <p>Si la valeur entière utilisée est <code>0</code>, la règle est invalide.</p>
+ </dd>
+ <dt><code>span &amp;&amp; [ &lt;integer&gt; || &lt;custom-ident&gt; ]</code></dt>
+ <dd>Un fragment de grille est utilisé pour le placement de l'élément sur la grille afin que le début de la ligne pour l'élément de la grille soit placé à n lignes du bord de fin.
+ <p>Si un nom fourni pour &lt;custom-ident&gt;, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existantes avec ce nom, tout les lignes implicites du côté de la grille explicite et qui correspondent à la direction de la recherche seront comptées afin de placer ce fragment.</p>
+
+ <p>Si l'entier n'est pas défini, la valeur par défaut qui sera utilisée sera <code>1</code>. Les entiers négatifs ou nuls sont invalides.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[9]">#grid {
+  display: grid;
+  height: 100px;
+  grid-template: repeat(4, 1fr) / 50px 100px;
+}
+
+#item1 {
+  background-color: lime;
+  grid-area: 2 / 2 / auto / span 3;
+}
+
+#item2 {
+  background-color: yellow;
+}
+
+#item3 {
+  background-color: blue;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="grid"&gt;
+  &lt;div id="item1"&gt;&lt;/div&gt;
+  &lt;div id="item2"&gt;&lt;/div&gt;
+  &lt;div id="item3"&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "100%", "150px")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Grid", "#propdef-grid-area", "grid-area")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.grid-area")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("grid-row")}}</li>
+ <li>{{cssxref("grid-row-start")}}</li>
+ <li>{{cssxref("grid-row-end")}}</li>
+ <li>{{cssxref("grid-column")}}</li>
+ <li>{{cssxref("grid-column-start")}}</li>
+ <li>{{cssxref("grid-column-end")}}</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille">Guide : les zones des grilles CSS</a></li>
+ <li>Tutoriel vidéo : <a href="http://gridbyexample.com/video/grid-template-areas/">les zones des grilles CSS (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/grid-auto-columns/index.html b/files/fr/web/css/grid-auto-columns/index.html
new file mode 100644
index 0000000000..07cac850ff
--- /dev/null
+++ b/files/fr/web/css/grid-auto-columns/index.html
@@ -0,0 +1,160 @@
+---
+title: grid-auto-columns
+slug: Web/CSS/grid-auto-columns
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/grid-auto-columns
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>grid-auto-columns</code></strong> définit la taille d'une colonne de grille créée de façon implicite.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/grid-auto-columns.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Si un élément de la grille est positionné sur une colonne dont la taille n'est pas explicitement définie avec {{cssxref("grid-template-columns")}}, une piste implicite est créée pour contenir l'élément. Cela peut se produire lorsqu'on positionne un élément sur une ligne inexistante ou lorsque l'algorithme de placement automatique ajoute des colonnes supplémentaires.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css  no-line-numbers">/* Valeurs avec un mot-clé */
+grid-auto-columns: min-content;
+grid-auto-columns: max-content;
+grid-auto-columns: auto;
+
+/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+grid-auto-columns: 100px;
+grid-auto-columns: 20cm;
+grid-auto-columns: 50vmax;
+
+/* Valeurs proportionnelles */
+/* Type &lt;percentage&gt;        */
+grid-auto-columns: 10%;
+grid-auto-columns: 33.3%;
+
+/* Valeurs &lt;flex&gt; */
+grid-auto-columns: 0.5fr;
+grid-auto-columns: 3fr;
+
+/* Valeurs minmax() */
+grid-auto-columns: minmax(100px, auto);
+grid-auto-columns: minmax(max-content, 2fr);
+grid-auto-columns: minmax(20%, 80vmax);
+
+/* Valeurs fit-content() */
+grid-auto-columns: fit-content(400px);
+grid-auto-columns: fit-content(5cm);
+grid-auto-columns: fit-content(20%);
+
+/* Gestion de plusieurs pistes */
+grid-auto-columns: min-content max-content auto;
+grid-auto-columns: 100px 150px 390px;
+​​​​​​​grid-auto-columns: 10% 33.3%;
+grid-auto-columns: 0.5fr 3fr 1fr;
+​​​​​​​grid-auto-columns: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax);
+grid-auto-columns: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);
+
+/* Valeurs globales */
+grid-auto-columns: inherit;
+grid-auto-columns: initial;
+grid-auto-columns: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une longueur positive (cf. type {{cssxref("&lt;length&gt;")}}.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Un pourcentage positif indiquant la taille de la ligne relativement à la taille du bloc qui contient la grille. Si la taille de ce bloc n'est pas définie, la valeur exprimée en pourcents est considérée comme <code>auto</code>.</dd>
+ <dt><code>&lt;flex&gt;</code></dt>
+ <dd>Une dimension positive dont l'unité <code>fr</code> indique le facteur de flexibilité de la piste. Chaque piste dimensionnée avec <code>&lt;flex&gt;</code> occupera une partie de l'espace restant en fonction de ce facteur.
+ <p>Lorsque cette valeur apparaît en dehors de la notation <code>minmax()</code>, la valeur minimale <code>auto</code> est implicite (la valeur signifie <code>minmax(auto, &lt;flex&gt;)</code>).</p>
+ </dd>
+ <dt><code>max-content</code></dt>
+ <dd>Un mot-clé qui représente la plus grande des contributions maximales de contenu aux objets de la grilles qui occupe la piste de la grille.</dd>
+ <dt><code>min-content</code></dt>
+ <dd>Un mot-clé qui représente la plus grande des contributions minimales de contenu aux objets de la grilles qui occupe la piste de la grille</dd>
+ <dt><code>minmax(min, max)</code></dt>
+ <dd>Une notation fonctionnelle qui définit un intervalle de taille entre <code>min</code> et <code>max</code>. Si <code>max</code> est inférieur à <code>min</code>, <code>max</code> est ignoré et la fonction est traitée comme un minimum. En tant que maximum, elle joue le rôle d'une valeur <code>&lt;flex&gt;</code> qui définit le facteur de flexibilité de la piste. En tant que minimum, elle est gérée comme zéro (ou comme le contenu minimal si le conteneur de la grille impose une contrainte de contenu minimal).</dd>
+ <dt><code>fit-content(argument)</code></dt>
+ <dd>Cette notation représente la formule <code>min(max-content, max(auto, argument))</code> qui est calculée de façon semblable à <code>auto</code>, sauf qu'ici, la taille de la piste est écrétée à <em>argument</em> s'i elle est plus grande que le minimum <code>auto</code>.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Un mot-clé qui est identique au contenu maximal si c'est un maximum. Si c'est un minimum, il représente la plus grande des plus petites tailles (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}})) des objets de la grilles qui occupe cette piste de la grille.</dd>
+ <dd>
+ <p class="note"><strong>Note :</strong> Les pistes de taille <code>auto</code> (et uniquement celles-ci) peuvent être étirées grâce aux propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[6]">#grid {
+  width: 100px;
+  display: grid;
+  grid-template-areas: "a a";
+  grid-gap: 10px;
+  grid-auto-columns: 200px;
+}
+
+#grid &gt; div {
+  background-color: lime;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="grid"&gt;
+  &lt;div id="item1"&gt;&lt;/div&gt;
+  &lt;div id="item2"&gt;&lt;/div&gt;
+  &lt;div id="item3"&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "410px", "100px")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Grid", "#propdef-grid-auto-columns", "grid-auto-columns")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.grid-auto-columns")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("grid-auto-rows")}}</li>
+ <li>{{cssxref("grid-auto-flow")}}</li>
+ <li>{{cssxref("grid")}}</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS#Dimensionner_les_lignes_de_la_grille_implicite">Guide : le placement automatique sur la grille - dimensionner les lignes de la grille implicite</a></li>
+ <li>Tutoriel vidéo : <a href="http://gridbyexample.com/video/series-auto-placement-order/">Introduction au placement automatique sur la grille et à l'ordre des éléments (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/grid-auto-flow/index.html b/files/fr/web/css/grid-auto-flow/index.html
new file mode 100644
index 0000000000..375fb92ba8
--- /dev/null
+++ b/files/fr/web/css/grid-auto-flow/index.html
@@ -0,0 +1,163 @@
+---
+title: grid-auto-flow
+slug: Web/CSS/grid-auto-flow
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/grid-auto-flow
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>grid-auto-flow</code></strong> permet de contrôler la façon dont fonctionne l'algorithme de placement automatique. Celui-ci définit exactement comme les objets placés automatiquement s'inscrivent dans la grille.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/grid-auto-flow.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+grid-auto-flow: row;
+grid-auto-flow: column;
+grid-auto-flow: dense;
+grid-auto-flow: row dense;
+grid-auto-flow: column dense;
+
+/* Valeurs globales */
+grid-auto-flow: inherit;
+grid-auto-flow: initial;
+grid-auto-flow: unset;
+</pre>
+
+<p>Cette propriété peut prendre deux formes :</p>
+
+<ul>
+ <li>la première avec un seul mot-clé parmi : <code>row</code>, <code>column</code> ou <code>dense</code></li>
+ <li>la seconde avec deux mots-clés : <code>row dense</code> ou <code>column dense</code>.</li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>row</code></dt>
+ <dd>Les éléments sont organisés en remplissant chacune des lignes au fur et à mesure, quitte à en ajouter si besoin. Si aucune valeur entre <code>row</code> ou <code>column</code> n'est fournie, <code>row</code> sera la valeur par défaut.</dd>
+ <dt><code>column</code></dt>
+ <dd>Les éléments sont organisés en remplissant chacune des colonnes au fur et à mesure, quitte à en ajouter si besoin.</dd>
+ <dt><code>dense</code></dt>
+ <dd>L'algorithme de placement automatique utilisera une méthode de « regroupement dense » où il essaie de remplir les trous dans la grille si des éléments plus petits arrivent ensuite. De fait, on peut obtenir une impression de désordre alors qu'il s'agit simplement du comblement des espaces libres.
+ <p>Si cette valeur est absente, le moteur utilisera un algorithme simple qui ne fait que se déplacer vers l'avant, sans revenir vers les espaces vides. De cette façon, les éléments apparaitront nécessairement dans l'ordre mais pourront laisser des trous.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[7]">#grid {
+  height: 200px;
+  width: 200px;
+  display: grid;
+  grid-gap: 10px;
+  grid-template: repeat(4, 1fr) / repeat(2, 1fr);
+  grid-auto-flow: column;  /* ou 'row', 'row dense', 'column dense' */
+}
+
+#item1 {
+  background-color: lime;
+  grid-row-start: 3;
+}
+
+#item2 {
+  background-color: yellow;
+}
+
+#item3 {
+  background-color: blue;
+}
+
+#item4 {
+  grid-column-start: 2;
+  background-color: red;
+}
+
+#item5 {
+  background-color: aqua;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="grid"&gt;
+  &lt;div id="item1"&gt;&lt;/div&gt;
+  &lt;div id="item2"&gt;&lt;/div&gt;
+  &lt;div id="item3"&gt;&lt;/div&gt;
+  &lt;div id="item4"&gt;&lt;/div&gt;
+  &lt;div id="item5"&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;select id="direction" onchange="changeGridAutoFlow()"&gt;
+  &lt;option value="column"&gt;column&lt;/option&gt;
+  &lt;option value="row"&gt;row&lt;/option&gt;
+&lt;/select&gt;
+&lt;input id="dense" type="checkbox" onchange="changeGridAutoFlow()"&gt;
+&lt;label for="dense"&gt;dense&lt;/label&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js;">function changeGridAutoFlow() {
+  var grid = document.getElementById("grid");
+  var direction = document.getElementById("direction");
+  var dense = document.getElementById("dense");
+  var gridAutoFlow = direction.value === "row" ? "row" : "column";
+
+  if (dense.checked) {
+    gridAutoFlow += " dense";
+  }
+
+  grid.style.gridAutoFlow = gridAutoFlow;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "200px", "230px")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Grid", "#propdef-grid-auto-flow", "grid-auto-flow")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("css.properties.grid-auto-flow")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("grid-auto-rows")}}</li>
+ <li>{{cssxref("grid-auto-columns")}}</li>
+ <li>{{cssxref("grid")}}</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS">Guide : le placement automatique sur la grille</a></li>
+ <li>Tutoriel vidéo : <a href="http://gridbyexample.com/video/series-auto-placement-order/">Introduction au placement automatique sur la grille et à l'ordre des éléments (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/grid-auto-rows/index.html b/files/fr/web/css/grid-auto-rows/index.html
new file mode 100644
index 0000000000..cd4d6c6b97
--- /dev/null
+++ b/files/fr/web/css/grid-auto-rows/index.html
@@ -0,0 +1,153 @@
+---
+title: grid-auto-rows
+slug: Web/CSS/grid-auto-rows
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/grid-auto-rows
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>grid-auto-rows</code></strong> définit la taille d'une ligne de grille créée de façon implicite.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/grid-auto-rows.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Si un élément de la grille est positionné sur une ligne dont la taille n'est pas explicitement définie avec {{cssxref("grid-template-rows")}}, une piste implicite est créée pour contenir l'élément. Cela peut se produire lorsqu'on positionne un élément sur une ligne inexistante ou lorsque l'algorithme de placement automatique ajoute des lignes supplémentaires.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+grid-auto-rows: min-content;
+grid-auto-rows: max-content;
+grid-auto-rows: auto;
+
+/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+grid-auto-rows: 100px;
+grid-auto-rows: 20cm;
+grid-auto-rows: 50vmax;
+
+/* Valeurs proportionnelles */
+/* Type &lt;percentage&gt;        */
+grid-auto-rows: 10%;
+grid-auto-rows: 33.3%;
+
+/* Valeurs &lt;flex&gt; */
+grid-auto-rows: 0.5fr;
+grid-auto-rows: 3fr;
+
+/* Valeurs minmax() */
+grid-auto-rows: minmax(100px, auto);
+grid-auto-rows: minmax(max-content, 2fr);
+grid-auto-rows: minmax(20%, 80vmax);
+
+/* Gestion de plusieurs pistes */
+grid-auto-rows: min-content max-content auto;
+grid-auto-rows: 100px 150px 390px;
+​​​​​​​grid-auto-rows: 10% 33.3%;
+grid-auto-rows: 0.5fr 3fr 1fr;
+​​​​​​​grid-auto-rows: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax);
+grid-auto-rows: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);
+
+
+/* Valeurs globales */
+grid-auto-rows: inherit;
+grid-auto-rows: initial;
+grid-auto-rows: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une longueur positive (cf. type {{cssxref("&lt;length&gt;")}}.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Un pourcentage positif indiquant la taille de la ligne relativement à la taille du bloc qui contient la grille. Si la taille de ce bloc n'est pas définie, la valeur exprimée en pourcents est considérée comme <code>auto</code>.</dd>
+ <dt><code>&lt;flex&gt;</code></dt>
+ <dd>Une dimension positive dont l'unité <code>fr</code> indique le facteur de flexibilité de la piste. Chaque piste dimensionnée avec <code>&lt;flex&gt;</code> occupera une partie de l'espace restant en fonction de ce facteur.
+ <p>Lorsque cette valeur apparaît en dehors de la notation <code>minmax()</code>, la valeur minimale <code>auto</code> est implicite (la valeur signifie <code>minmax(auto, &lt;flex&gt;)</code>).</p>
+ </dd>
+ <dt><code>max-content</code></dt>
+ <dd>Un mot-clé qui représente la plus grande des contributions maximales de contenu aux objets de la grilles qui occupe la piste de la grille.</dd>
+ <dt><code>min-content</code></dt>
+ <dd>Un mot-clé qui représente la plus grande des contributions minimales de contenu aux objets de la grilles qui occupe la piste de la grille</dd>
+ <dt><code>minmax(min, max)</code></dt>
+ <dd>Une notation fonctionnelle qui définit un intervalle de taille entre <code>min</code> et <code>max</code>. Si <code>max</code> est inférieur à <code>min</code>, <code>max</code> est ignoré et la fonction est traitée comme un minimum. En tant que maximum, elle joue le rôle d'une valeur <code>&lt;flex&gt;</code> qui définit le facteur de flexibilité de la piste. En tant que minimum, elle est gérée comme zéro (ou comme le contenu minimal si le conteneur de la grille impose une contrainte de contenu minimal).</dd>
+ <dt><code>auto</code></dt>
+ <dd>Un mot-clé qui est identique au contenu maximal si c'est un maximum. Si c'est un minimum, il représente la plus grande des plus petites tailles (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}})) des objets de la grilles qui occupe cette piste de la grille.</dd>
+ <dd>
+ <p class="note"><strong>Note :</strong> Les pistes de taille <code>auto</code> (et uniquement celles-ci) peuvent être étirées grâce aux propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[6]">#grid {
+  width: 200px;
+  display: grid;
+  grid-template-areas: "a a";
+  grid-gap: 10px;
+  grid-auto-rows: 100px;
+}
+
+#grid &gt; div {
+  background-color: lime;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="grid"&gt;
+  &lt;div id="item1"&gt;&lt;/div&gt;
+  &lt;div id="item2"&gt;&lt;/div&gt;
+  &lt;div id="item3"&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "210px", "210px")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Grid", "#propdef-grid-auto-rows", "grid-auto-rows")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.grid-auto-rows")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("grid-auto-columns")}}</li>
+ <li>{{cssxref("grid-auto-flow")}}</li>
+ <li>{{cssxref("grid")}}</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS#Dimensionner_les_lignes_de_la_grille_implicite">Guide : le placement automatique sur la grille - dimensionner les lignes de la grille implicite</a></li>
+ <li>Tutoriel vidéo : <a href="http://gridbyexample.com/video/series-auto-placement-order/">Introduction au placement automatique sur la grille et à l'ordre des éléments (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/grid-column-end/index.html b/files/fr/web/css/grid-column-end/index.html
new file mode 100644
index 0000000000..f47f8896cc
--- /dev/null
+++ b/files/fr/web/css/grid-column-end/index.html
@@ -0,0 +1,166 @@
+---
+title: grid-column-end
+slug: Web/CSS/grid-column-end
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/grid-column-end
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>grid-column-end</code></strong> définit la position de la fin d'un élément de la grille dans une zone donnée ou sur un fragment de colonne donné.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/grid-column-end.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */
+grid-column-end: auto;
+
+/* Valers &lt;custom-ident&gt; */
+grid-column-end: somegridarea;
+
+/* Valeurs &lt;integer&gt; + &lt;custom-ident&gt; */
+grid-column-end: 2;
+grid-column-end: somegridarea 4;
+
+/* Valeurs span + &lt;integer&gt; + &lt;custom-ident&gt; */
+grid-column-end: span 3;
+grid-column-end: span somegridarea;
+grid-column-end: 5 somegridarea span;
+
+/* Valeurs globales */
+grid-column-end: inherit;
+grid-column-end: initial;
+grid-column-end: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Un mot-clé qui indique que la propriété ne contribue pas au placement de l'objet sur la grille. Par défaut, la taille du fragment allouée vaut <code>1</code> s'il n'y a pas d'autres contraintes.</dd>
+ <dt><code>&lt;custom-ident&gt;</code></dt>
+ <dd>S'il existe une ligne nommée '&lt;custom-ident&gt;-end', cela placera l'élément sur la première ligne correspondante..
+ <p class="note"><strong>Note :</strong> Les noms de zones génèrent automatiquement les noms de colonnes sous cette forme. Ainsi, <code>grid-column-end: foo;</code> permettra de désigner l'extrêmité (à la fin) de la zone nommée (sauf si une autre colonne a explicitement été nommée avec <code>foo-end</code>).</p>
+
+ <p>Si aucune zone ne correspond, la valeur est traitée comme la combinaison de l'entier 1 et de <code>&lt;custom-ident&gt;</code> (cf. définition suivante).</p>
+ </dd>
+ <dt><code>&lt;integer&gt; &amp;&amp; &lt;custom-ident&gt;?</code></dt>
+ <dd>Contribue au placement de l'élément sur la n-ième ligne. Si une valeur négative est fournie, les lignes correspondantes sont comptées depuis la dernière. Si un nom est fourni pour &lt;custom-ident&gt;, seules les lignes avec ce nom sont comptées. S'il n'y a pas suffisamment de lignes avec ce nom, on considère que toutes les lignes sont intitulées avec ce nom afin de trouver une position.
+ <p>Un entier nul ne peut pas être utilisé (la règle est invalide).</p>
+ </dd>
+ <dt><code>span &amp;&amp; [ &lt;integer&gt; || &lt;custom-ident&gt; ]</code></dt>
+ <dd>Un fragment de grille est utilisé pour le placement de l'élément sur la grille afin que la fin de la colonne pour l'élément de la grille soit placé à n lignes du bord situé au début.
+ <p>Si un nom fourni pour &lt;custom-ident&gt;, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existantes avec ce nom, tout les lignes implicites du côté de la grille explicite et qui correspondent à la direction de la recherche seront comptées afin de placer ce fragment.</p>
+
+ <p>Si &lt;integer&gt; est absent, la valeur par défaut sera 1. Les entiers négatifs ou nuls ne sont pas autorisés.</p>
+
+ <p><code>&lt;custom-ident&gt;</code> ne peut pas prendre la valeur <code>span</code>.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;One&lt;/div&gt;
+  &lt;div class="box2"&gt;Two&lt;/div&gt;
+  &lt;div class="box3"&gt;Three&lt;/div&gt;
+  &lt;div class="box4"&gt;Four&lt;/div&gt;
+  &lt;div class="box5"&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 3;
+  grid-row-end: 5;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+
+.nested {
+  border: 2px solid #ffec99;
+  border-radius: 5px;
+  background-color: #fff9db;
+  padding: 1em;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('Exemples', '230', '420')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Grid", "#propdef-grid-column-end", "grid-column-end")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.grid-column-end")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("grid-column-start")}}</li>
+ <li>{{cssxref("grid-column")}}</li>
+ <li>{{cssxref("grid-row-start")}}</li>
+ <li>{{cssxref("grid-row-end")}}</li>
+ <li>{{cssxref("grid-row")}}</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS">Guide : le placement sur les lignes d'une grille</a></li>
+ <li>Tutoriel vidéo : <a href="http://gridbyexample.com/video/series-line-based-placement/">le placement sur les lignes (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/grid-column-gap/index.html b/files/fr/web/css/grid-column-gap/index.html
new file mode 100644
index 0000000000..e2f69abe13
--- /dev/null
+++ b/files/fr/web/css/grid-column-gap/index.html
@@ -0,0 +1,127 @@
+---
+title: grid-column-gap
+slug: Web/CSS/grid-column-gap
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/column-gap
+---
+<div>{{CSSRef}}{{Deprecated_Header}}</div>
+
+<div class="note">
+<p><strong>Note :</strong> La propriété <code>grid-column-gap</code> a été fusionnée avec la propriété {{cssxref("column-gap")}} afin d'être remplacée par cette dernière.</p>
+</div>
+
+<p>La propriété <strong><code>grid-column-gap</code></strong> définit l'espacement entre les colonnes d'une grille.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/grid-column-gap.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>En termes de dimensionnement, cet espace est traité comme une piste supplémentaire de la longueur indiquée. Les valeurs négatives ne sont pas autorisées.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs de longueur */
+grid-column-gap: 20px;
+grid-column-gap: 1em;
+grid-column-gap: 3vmin;
+grid-column-gap: 0.5cm;
+
+/* Valeurs relatives à la taille */
+/* de l'élément englobant        */
+/* Type &lt;percentage&gt;             */
+grid-column-gap: 10%;
+
+/* Valeurs globales */
+grid-column-gap: inherit;
+grid-column-gap: initial;
+grid-column-gap: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>La largeur de la « gouttière » placée entre les colonnes de la grille. Pour les valeurs exprimées en pourcentages, elles sont relatives aux dimensions de l'élément englobant.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[6]">#grid {
+  display: grid;
+  height: 100px;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: 100px;
+  grid-column-gap: 20px;
+}
+
+#grid &gt; div {
+  background-color: lime;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="grid"&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "100%", "100px")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Box Alignment", "#propdef-grid-column-gap", "grid-column-gap")}}</td>
+   <td>{{Spec2("CSS3 Box Alignment")}}</td>
+   <td>Dépréciée afin d'être remplacée par {{cssxref("column-gap")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Grid", "#gutters", "grid-column-gap")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.grid-column-gap")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Versions standards non-préfixées :
+  <ul>
+   <li>{{cssxref("row-gap")}},</li>
+   <li>{{cssxref("column-gap")}},</li>
+   <li>{{cssxref("gap")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("grid-row-gap")}}</li>
+ <li>{{cssxref("grid-gap")}}</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base#Les_gouttières">Guide : les concepts de bases : les gouttières</a></li>
+</ul>
diff --git a/files/fr/web/css/grid-column-start/index.html b/files/fr/web/css/grid-column-start/index.html
new file mode 100644
index 0000000000..b49f66fc80
--- /dev/null
+++ b/files/fr/web/css/grid-column-start/index.html
@@ -0,0 +1,178 @@
+---
+title: grid-column-start
+slug: Web/CSS/grid-column-start
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/grid-column-start
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>grid-column-start</code></strong> définit la position du début d'un élément (au sens des propriétés logiques <code>*-block-start</code>) en définissant la ligne ou la taille de fragment occupé sur la grille.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/grid-column-start.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */
+grid-column-start: auto;
+
+/* Valeur &lt;custom-ident&gt; */
+grid-column-start: unezonedegrille;
+
+/* Valeurs &lt;integer&gt; + &lt;custom-ident&gt; */
+grid-column-start: 2;
+grid-column-start: unezonedegrille 4;
+
+/* Valeurs span + &lt;integer&gt; + &lt;custom-ident&gt; */
+grid-column-start: span 3;
+grid-column-start: span unezonedegrille;
+grid-column-start: span unezonedegrille 5;
+
+/* Valeurs globales */
+grid-column-start: inherit;
+grid-column-start: initial;
+grid-column-start: unset;
+</pre>
+
+<p>La valeur de cette propriété prend la forme d'une seule valeur <code>&lt;grid-line&gt;</code>. Une telle valeur peut être définie avec :</p>
+
+<ul>
+ <li>le mot-clé <code>auto</code></li>
+ <li>ou une valeur <code>&lt;custom-ident&gt;</code></li>
+ <li>ou une valeur <code>&lt;integer&gt;</code></li>
+ <li>ou une valeur <code>&lt;custom-ident&gt;</code> et un <code>&lt;integer&gt;</code> séparés par un espace</li>
+ <li>ou le mot-clé <code>span</code> avec une valeur <code>&lt;custom-ident&gt;</code> ou un <code>&lt;integer&gt;</code> ou les deux.</li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Un mot-clé qui indique que la propriété ne contribue pas au placement de l'élément sur la grille. Cela indique un placement automatique, une taille de fragment (<em>span</em>) automatique ou une taille par défaut de <code>1</code>.</dd>
+ <dt><code>&lt;custom-ident&gt;</code></dt>
+ <dd>S'il existe une ligne nommée avec '&lt;custom-ident&gt;-start', la première ligne correspondante contribue au placement de l'élément sur la grille.
+ <p class="note"><strong>Note :</strong> Les noms des zones de grille sont générés implicitement. Ainsi, en utilisant <code>grid-column-start: foo;</code> cela sélectionnera le début de la grille nommée correspondante (sauf si une autre ligne <code>foo-start</code> a été explicitement déclarée).</p>
+
+ <p>Sinon, la valeur est traitée comme si on avait utilisé <code>&lt;custom-ident&gt;</code> et la valeur <code>1</code>.</p>
+ </dd>
+ <dt><code>&lt;integer&gt; &amp;&amp; &lt;custom-ident&gt;?</code></dt>
+ <dd>La n-ième ligne de la grille contribue au placement de l'élément sur la grille. Si un entier négatif est utilisé, le comptage sera fait depuis la fin de la grille explicite.
+ <p>Si un nom est fourni pour &lt;custom-ident&gt;, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existant avec ce nom, toutes les lignes implicites seront comptées afin de trouver la position.</p>
+
+ <p>Si la valeur entière utilisée est <code>0</code>, la règle est invalide.</p>
+ </dd>
+ <dt><code>span &amp;&amp; [ &lt;integer&gt; || &lt;custom-ident&gt; ]</code></dt>
+ <dd>Un fragment de grille est utilisé pour le placement de l'élément sur la grille afin que le début de la ligne pour l'élément de la grille soit placé à n lignes du bord de fin.
+ <p>Si un nom fourni pour &lt;custom-ident&gt;, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existantes avec ce nom, tout les lignes implicites du côté de la grille explicite et qui correspondent à la direction de la recherche seront comptées afin de placer ce fragment.</p>
+
+ <p>Si l'entier n'est pas défini, la valeur par défaut qui sera utilisée sera <code>1</code>. Les entiers négatifs ou nuls sont invalides.</p>
+
+ <p><code>&lt;custom-ident</code><code>&gt;</code> ne peut pas prendre la valeur <code>span</code>.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;One&lt;/div&gt;
+  &lt;div class="box2"&gt;Two&lt;/div&gt;
+  &lt;div class="box3"&gt;Three&lt;/div&gt;
+  &lt;div class="box4"&gt;Four&lt;/div&gt;
+  &lt;div class="box5"&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 3;
+  grid-row-end: 5;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+
+.nested {
+  border: 2px solid #ffec99;
+  border-radius: 5px;
+  background-color: #fff9db;
+  padding: 1em;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('Exemples', '230', '420')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Grid", "#propdef-grid-column-start", "grid-column-start")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.grid-column-start")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("grid-column-end")}}</li>
+ <li>{{cssxref("grid-column")}}</li>
+ <li>{{cssxref("grid-row-start")}}</li>
+ <li>{{cssxref("grid-row-end")}}</li>
+ <li>{{cssxref("grid-row")}}</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS">Guide : le placement sur les lignes d'une grille</a></li>
+ <li>Tutoriel vidéo : <a href="http://gridbyexample.com/video/series-line-based-placement/">le placement sur les lignes (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/grid-column/index.html b/files/fr/web/css/grid-column/index.html
new file mode 100644
index 0000000000..3ad7be06b1
--- /dev/null
+++ b/files/fr/web/css/grid-column/index.html
@@ -0,0 +1,167 @@
+---
+title: grid-column
+slug: Web/CSS/grid-column
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/grid-column
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>grid-column</code></strong> est une <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">propriété raccourcie</a> pour {{cssxref("grid-column-start")}} et {{cssxref("grid-column-end")}}. Elle permet de définir la taille et l'emplacement d'un élément sur la grille en indiquant l'emplacement du début, de la fin et/ou sa taille.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/grid-column.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Si deux valeurs <code><strong>&lt;grid-line&gt;</strong></code> sont utilisées pour la propriété, la valeur de <strong><code>grid-column-start</code></strong> sera définie avec la première valeur avant la barre oblique et la valeur de <strong><code>grid-column-end</code></strong> sera définie avec celle qui est située après la barre oblique.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+grid-column: auto;
+grid-column: auto / auto;
+
+/* Valeurs &lt;custom-ident&gt; */
+grid-column: unezonedegrille;
+grid-column: unezonedegrille / unezonedegrille;
+
+/* Valeurs &lt;integer&gt; + &lt;custom-ident&gt; */
+grid-column: unezonedegrille 4;
+grid-column: 4 unezonedegrille / 6;
+
+/* Valeurs span + &lt;integer&gt; + &lt;custom-ident&gt; */
+grid-column: span 3;
+grid-column: span unezonedegrille;
+grid-column: 5 unezonedegrille span;
+grid-column: span 3 / 6;
+grid-column: span unezonedegrille / span unezonedegrille;
+grid-column: 5 unezonedegrille span / 2 span;
+
+/* Valeurs globales */
+grid-column: inherit;
+grid-column: initial;
+grid-column: unset;
+</pre>
+
+<p>Cette propriété est définie grâce à une ou deux valeurs <code>&lt;grid-line&gt;</code>. Si deux valeurs <code>&lt;grid-line&gt;</code> sont fournies, elles doivent être séparées par une barre oblique (/)</p>
+
+<p>Une valeur <code>&lt;grid-line&gt;</code> peut être définie avec :</p>
+
+<ul>
+ <li>le mot-clé <code>auto</code></li>
+ <li>ou une valeur <code>&lt;custom-ident&gt;</code></li>
+ <li>ou une valeur <code>&lt;integer&gt;</code></li>
+ <li>ou une valeur <code>&lt;custom-ident&gt;</code> et un <code>&lt;integer&gt;</code> séparés par un espace</li>
+ <li>ou le mot-clé <code>span</code> avec une valeur <code>&lt;custom-ident&gt;</code> ou un <code>&lt;integer&gt;</code> ou les deux.</li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Un mot-clé qui indique que la propriété ne contribue pas au placement de l'élément sur la grille. Cela indique un placement automatique, une taille de fragment (<em>span</em>) automatique ou une taille par défaut de <code>1</code>.</dd>
+ <dt><code>&lt;custom-ident&gt;</code></dt>
+ <dd>S'il existe une ligne nommée avec '&lt;custom-ident&gt;-start'/'&lt;custom-ident&gt;-end', la première colonne correspondante contribue au placement de l'élément sur la grille.
+ <p class="note"><strong>Note :</strong> Les noms des zones de grille sont générés implicitement. Ainsi, en utilisant <code>grid-column-start: foo;</code> cela sélectionnera le début de la grille nommée correspondante (sauf si une autre colonne <code>foo-start</code>/<code>foo-end</code> a été explicitement déclarée).</p>
+
+ <p>Sinon, la valeur est traitée comme si on avait utilisé <code>&lt;custom-ident&gt;</code> et la valeur <code>1</code>.</p>
+ </dd>
+ <dt><code>&lt;integer&gt; &amp;&amp; &lt;custom-ident&gt;?</code></dt>
+ <dd>La n-ième ligne de la grille contribue au placement de l'élément sur la grille. Si un entier négatif est utilisé, le comptage sera fait depuis la fin de la grille explicite.
+ <p>Si un nom est fourni pour &lt;custom-ident&gt;, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existant avec ce nom, toutes les lignes implicites seront comptées afin de trouver la position.</p>
+
+ <p>Si la valeur entière utilisée est <code>0</code>, la règle est invalide.</p>
+ </dd>
+ <dt><code>span &amp;&amp; [ &lt;integer&gt; || &lt;custom-ident&gt; ]</code></dt>
+ <dd>Un fragment de grille est utilisé pour le placement de l'élément sur la grille afin que le début de la ligne pour l'élément de la grille soit placé à n lignes du bord de fin.
+ <p>Si un nom fourni pour &lt;custom-ident&gt;, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existantes avec ce nom, tout les lignes implicites du côté de la grille explicite et qui correspondent à la direction de la recherche seront comptées afin de placer ce fragment.</p>
+
+ <p>Si l'entier n'est pas défini, la valeur par défaut qui sera utilisée sera <code>1</code>. Les entiers négatifs ou nuls sont invalides.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[14,19]">#grid {
+  display: grid;
+  height: 100px;
+  grid-template-columns: repeat(6, 1fr);
+  grid-template-rows: 100px;
+}
+
+#item1 {
+  background-color: lime;
+}
+
+#item2 {
+  background-color: yellow;
+  grid-column: 2 / 4;
+}
+
+#item3 {
+  background-color: blue;
+  grid-column: span 2 / 7;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="grid"&gt;
+  &lt;div id="item1"&gt;&lt;/div&gt;
+  &lt;div id="item2"&gt;&lt;/div&gt;
+  &lt;div id="item3"&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "100%", "100px")}}</p>
+
+<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
+
+<p>IE11 ne prend pas en charge le placement automatique des objets sur la grille.Tous les objets finiront sur la première colonne / ligne si ceux-ci ne sont pas marqués avec les propriétés <code>-ms-</code>{{cssxref("grid-column")}} et <code>-ms-</code>{{cssxref("grid-row")}}. Pour effectuer cette annotation automatiquement, on peut utiliser du JavaScript (cf. <a href="https://github.com/motine/css_grid_annotator">ce dépôt</a>).</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Grid", "#propdef-grid-column", "grid-column")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.grid-column")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("grid-row")}}</li>
+ <li>{{cssxref("grid-row-start")}}</li>
+ <li>{{cssxref("grid-row-end")}}</li>
+ <li>{{cssxref("grid-column-start")}}</li>
+ <li>{{cssxref("grid-column-end")}}</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS">Guide : le placement sur les lignes d'une grille CSS</a></li>
+ <li>Tutoriel vidéo : <a href="http://gridbyexample.com/video/series-line-based-placement/">le placement sur les lignes (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/grid-row-end/index.html b/files/fr/web/css/grid-row-end/index.html
new file mode 100644
index 0000000000..93a883beb2
--- /dev/null
+++ b/files/fr/web/css/grid-row-end/index.html
@@ -0,0 +1,166 @@
+---
+title: grid-row-end
+slug: Web/CSS/grid-row-end
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/grid-row-end
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>grid-row-end</code></strong> définit la position de la fin d'un élément de la grille dans une zone donnée ou sur un fragment de ligne donné.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/grid-row-end.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+grid-row-end: auto;
+
+/* Valeurs &lt;custom-ident&gt; */
+grid-row-end: somegridarea;
+
+/* Valeurs &lt;integer&gt; + &lt;custom-ident&gt; */
+grid-row-end: 2;
+grid-row-end: somegridarea 4;
+
+/* Valeurs span + &lt;integer&gt; + &lt;custom-ident&gt; */
+grid-row-end: span 3;
+grid-row-end: span somegridarea;
+grid-row-end: 5 somegridarea span;
+
+/* Valeurs globales */
+grid-row-end: inherit;
+grid-row-end: initial;
+grid-row-end: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Un mot-clé qui indique que la propriété ne contribue pas au placement de l'objet sur la grille. Par défaut, la taille du fragment allouée vaut <code>1</code> s'il n'y a pas d'autres contraintes.</dd>
+ <dt><code>&lt;custom-ident&gt;</code></dt>
+ <dd>S'il existe une ligne nommée '&lt;custom-ident&gt;-end', cela placera l'élément sur la première ligne correspondante..
+ <p class="note"><strong>Note :</strong> Les noms de zones génèrent automatiquement les noms de lignes sous cette forme. Ainsi, <code>grid-row-end: foo;</code> permettra de désigner l'extrêmité (à la fin) de la zone nommée (sauf si une autre ligne a explicitement été nommée avec <code>foo-end</code>).</p>
+
+ <p>Si aucune zone ne correspond, la valeur est traitée comme la combinaison de l'entier 1 et de <code>&lt;custom-ident&gt;</code> (cf. définition suivante).</p>
+
+ <p><code>&lt;custom-ident</code><code>&gt;</code> ne peut pas prendre la valeur <code>span</code>.</p>
+ </dd>
+ <dt><code>&lt;integer&gt; &amp;&amp; &lt;custom-ident&gt;?</code></dt>
+ <dd>Contribue au placement de l'élément sur la n-ième ligne. Si une valeur négative est fournie, les lignes correspondantes sont comptées depuis la dernière. Si un nom est fourni pour &lt;custom-ident&gt;, seules les lignes avec ce nom sont comptées. S'il n'y a pas suffisamment de lignes avec ce nom, on considère que toutes les lignes sont intitulées avec ce nom afin de trouver une position.
+ <p>Un entier nul ne peut pas être utilisé (la règle est invalide).</p>
+ </dd>
+ <dt><code>span &amp;&amp; [ &lt;integer&gt; || &lt;custom-ident&gt; ]</code></dt>
+ <dd>Un fragment de grille est utilisé pour le placement de l'élément sur la grille afin que le début de la ligne pour l'élément de la grille soit placé à n lignes du bord situé au début.
+ <p>Si un nom fourni pour &lt;custom-ident&gt;, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existantes avec ce nom, tout les lignes implicites du côté de la grille explicite et qui correspondent à la direction de la recherche seront comptées afin de placer ce fragment.</p>
+
+ <p>Si &lt;integer&gt; est absent, la valeur par défaut sera 1. Les entiers négatifs ou nuls ne sont pas autorisés.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;One&lt;/div&gt;
+  &lt;div class="box2"&gt;Two&lt;/div&gt;
+  &lt;div class="box3"&gt;Three&lt;/div&gt;
+  &lt;div class="box4"&gt;Four&lt;/div&gt;
+  &lt;div class="box5"&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 3;
+  grid-row-end: 5;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+
+.nested {
+  border: 2px solid #ffec99;
+  border-radius: 5px;
+  background-color: #fff9db;
+  padding: 1em;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('Exemples', '230', '420')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Grid", "#propdef-grid-row-end", "grid-row-end")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.grid-row-end")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("grid-row-start")}}</li>
+ <li>{{cssxref("grid-row")}}</li>
+ <li>{{cssxref("grid-column-start")}}</li>
+ <li>{{cssxref("grid-column-end")}}</li>
+ <li>{{cssxref("grid-column")}}</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS">Guide : Placer les éléments d'une grille sur les lignes</a></li>
+ <li>Tutoriel vidéo : <a href="http://gridbyexample.com/video/series-line-based-placement/">le placement des éléments d'une grille sur les lignes (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/grid-row-start/index.html b/files/fr/web/css/grid-row-start/index.html
new file mode 100644
index 0000000000..8f396d02ec
--- /dev/null
+++ b/files/fr/web/css/grid-row-start/index.html
@@ -0,0 +1,178 @@
+---
+title: grid-row-start
+slug: Web/CSS/grid-row-start
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/grid-row-start
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>grid-row-start</code></strong> définit le début de la position, sur une ligne, d'un élément placé sur la grille qui participe à une ligne, à un fragment de ligne ou rien (automatique). Par conséquent, cela définit également le début de la zone de la grille pour cet élément.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/grid-row-start.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */
+grid-row-start: auto;
+
+/* Valeurs &lt;custom-ident&gt;*/
+grid-row-start: unezonedegrille;
+
+/* Valeurs &lt;integer&gt; + &lt;custom-ident&gt; */
+grid-row-start: 2;
+grid-row-start: unezonedegrille 4;
+
+/* Valeurs span + &lt;integer&gt; + &lt;custom-ident&gt; */
+grid-row-start: span 3;
+grid-row-start: span unezonedegrille;
+grid-row-start: 5 unezonedegrille span;
+
+/* Valeurs globales */
+grid-row-start: inherit;
+grid-row-start: initial;
+grid-row-start: unset;
+</pre>
+
+<p>La valeur de cette propriété prend la forme d'une seule valeur <code>&lt;grid-line&gt;</code>. Une telle valeur peut être définie avec :</p>
+
+<ul>
+ <li>le mot-clé <code>auto</code></li>
+ <li>ou une valeur <code>&lt;custom-ident&gt;</code></li>
+ <li>ou une valeur <code>&lt;integer&gt;</code></li>
+ <li>ou une valeur <code>&lt;custom-ident&gt;</code> et un <code>&lt;integer&gt;</code> séparés par un espace</li>
+ <li>ou le mot-clé <code>span</code> avec une valeur <code>&lt;custom-ident&gt;</code> ou un <code>&lt;integer&gt;</code> ou les deux.</li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Un mot-clé qui indique que la propriété ne contribue pas au placement de l'élément sur la grille. Cela indique un placement automatique, une taille de fragment (<em>span</em>) automatique ou une taille par défaut de <code>1</code>.</dd>
+ <dt><code>&lt;custom-ident&gt;</code></dt>
+ <dd>S'il existe une ligne nommée avec '&lt;custom-ident&gt;-start', la première ligne correspondante contribue au placement de l'élément sur la grille.
+ <p class="note"><strong>Note :</strong> Les noms des zones de grille sont générés implicitement. Ainsi, en utilisant <code>grid-row-start: foo;</code> cela sélectionnera le début de la grille nommée correspondante (sauf si une autre ligne <code>foo-start</code> a été explicitement déclarée).</p>
+
+ <p>Sinon, la valeur est traitée comme si on avait utilisé <code>&lt;custom-ident&gt;</code> et la valeur <code>1</code>.</p>
+ </dd>
+ <dt><code>&lt;integer&gt; &amp;&amp; &lt;custom-ident&gt;?</code></dt>
+ <dd>La n-ième ligne de la grille contribue au placement de l'élément sur la grille. Si un entier négatif est utilisé, le comptage sera fait depuis la fin de la grille explicite.
+ <p>Si un nom est fourni pour &lt;custom-ident&gt;, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existant avec ce nom, toutes les lignes implicites seront comptées afin de trouver la position.</p>
+
+ <p>Si la valeur entière utilisée est <code>0</code>, la règle est invalide.</p>
+ </dd>
+ <dt><code>span &amp;&amp; [ &lt;integer&gt; || &lt;custom-ident&gt; ]</code></dt>
+ <dd>Un fragment de grille est utilisé pour le placement de l'élément sur la grille afin que le début de la ligne pour l'élément de la grille soit placé à n lignes du bord de fin.
+ <p>Si un nom fourni pour &lt;custom-ident&gt;, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existantes avec ce nom, tout les lignes implicites du côté de la grille explicite et qui correspondent à la direction de la recherche seront comptées afin de placer ce fragment.</p>
+
+ <p>Si l'entier n'est pas défini, la valeur par défaut qui sera utilisée sera <code>1</code>. Les entiers négatifs ou nuls sont invalides.</p>
+
+ <p><code>&lt;custom-ident</code><code>&gt;</code> ne peut pas prendre la valeur <code>span</code>.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;One&lt;/div&gt;
+  &lt;div class="box2"&gt;Two&lt;/div&gt;
+  &lt;div class="box3"&gt;Three&lt;/div&gt;
+  &lt;div class="box4"&gt;Four&lt;/div&gt;
+  &lt;div class="box5"&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 3;
+  grid-row-end: 5;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+
+.nested {
+  border: 2px solid #ffec99;
+  border-radius: 5px;
+  background-color: #fff9db;
+  padding: 1em;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Exemples', '230', '420') }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Grid", "#propdef-grid-row-start", "grid-row-start")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.grid-row-start")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("grid-row-end")}}</li>
+ <li>{{cssxref("grid-row")}}</li>
+ <li>{{cssxref("grid-column-start")}}</li>
+ <li>{{cssxref("grid-column-end")}}</li>
+ <li>{{cssxref("grid-column")}}</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS">Guide : Placer les éléments d'une grille sur les lignes</a></li>
+ <li>Tutoriel vidéo : <a href="http://gridbyexample.com/video/series-line-based-placement/">le placement des éléments d'une grille sur les lignes (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/grid-row/index.html b/files/fr/web/css/grid-row/index.html
new file mode 100644
index 0000000000..3970f9ea5f
--- /dev/null
+++ b/files/fr/web/css/grid-row/index.html
@@ -0,0 +1,152 @@
+---
+title: grid-row
+slug: Web/CSS/grid-row
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/grid-row
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>grid-row</code></strong> est une propriété raccourcie pour {{cssxref("grid-row-start")}} et {{cssxref("grid-row-end")}}. Elle permet de définir la taille et l'emplacement d'un élément sur la grille en indiquant l'emplacement du début, de la fin et/ou sa taille.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/grid-row.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Si deux valeurs <strong>&lt;grid-line&gt;</strong> sont utilisées pour la propriété, la valeur de <strong><code>grid-row-start</code></strong> sera définie avec la première valeur avant la barre oblique et la valeur de <strong><code>grid-row-end</code></strong> sera définie avec celle qui est située après la barre oblique.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+grid-row: auto;
+grid-row: auto / auto;
+
+/* Valeurs &lt;custom-ident&gt; */
+grid-row: unezonedegrille;
+grid-row: unezonedegrille / unezonedegrille;
+
+/* Valeurs &lt;integer&gt; + &lt;custom-ident&gt; */
+grid-row: unezonedegrille 4;
+grid-row: 4 unezonedegrille / 6;
+
+/* Valeurs span + &lt;integer&gt; + &lt;custom-ident&gt; */
+grid-row: span 3;
+grid-row: span unezonedegrille;
+grid-row: 5 unezonedegrille span;
+grid-row: span 3 / 6;
+grid-row: span unezonedegrille / span unezonedegrille;
+grid-row: 5 unezonedegrille span / 2 span;
+
+/* Valeurs globales */
+grid-row: inherit;
+grid-row: initial;
+grid-row: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Un mot-clé qui indique que la propriété ne contribue pas au placement de l'élément sur la grille. Cela indique un placement automatique, une taille de fragment (<em>span</em>) automatique ou une taille par défaut de <code>1</code>.</dd>
+ <dt><code>&lt;custom-ident&gt;</code></dt>
+ <dd>S'il existe une ligne nommée avec '&lt;custom-ident&gt;-start'/'&lt;custom-ident&gt;-end', la première ligne correspondante contribue au placement de l'élément sur la grille.
+ <p class="note"><strong>Note :</strong> Les noms des zones de grille sont générés implicitement. Ainsi, en utilisant <code>grid-row-start: foo;</code> cela sélectionnera le début de la grille nommée correspondante (sauf si une autre ligne <code>foo-start</code>/<code>foo-end</code> a été explicitement déclarée).</p>
+
+ <p>Sinon, la valeur est traitée comme si on avait utilisé <code>&lt;custom-ident&gt;</code> et la valeur <code>1</code>.</p>
+ </dd>
+ <dt><code>&lt;integer&gt; &amp;&amp; &lt;custom-ident&gt;?</code></dt>
+ <dd>La n-ième ligne de la grille contribue au placement de l'élément sur la grille. Si un entier négatif est utilisé, le comptage sera fait depuis la fin de la grille explicite.
+ <p>Si un nom est fourni pour &lt;custom-ident&gt;, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existant avec ce nom, toutes les lignes implicites seront comptées afin de trouver la position.</p>
+
+ <p>Si la valeur entière utilisée est <code>0</code>, la règle est invalide.</p>
+ </dd>
+ <dt><code>span &amp;&amp; [ &lt;integer&gt; || &lt;custom-ident&gt; ]</code></dt>
+ <dd>Un fragment de grille est utilisé pour le placement de l'élément sur la grille afin que le début de la ligne pour l'élément de la grille soit placé à n lignes du bord de fin.
+ <p>Si un nom fourni pour &lt;custom-ident&gt;, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existantes avec ce nom, tout les lignes implicites du côté de la grille explicite et qui correspondent à la direction de la recherche seront comptées afin de placer ce fragment.</p>
+
+ <p>Si l'entier n'est pas défini, la valeur par défaut qui sera utilisée sera <code>1</code>. Les entiers négatifs ou nuls sont invalides.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[14,19]">#grid {
+  display: grid;
+  height: 200px;
+  grid-template-columns: 200px;
+  grid-template-rows: repeat(6, 1fr);
+}
+
+#item1 {
+  background-color: lime;
+}
+
+#item2 {
+  background-color: yellow;
+  grid-row: 2 / 4;
+}
+
+#item3 {
+  background-color: blue;
+  grid-row: span 2 / 7;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="grid"&gt;
+  &lt;div id="item1"&gt;&lt;/div&gt;
+  &lt;div id="item2"&gt;&lt;/div&gt;
+  &lt;div id="item3"&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "200px", "200px")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Grid", "#propdef-grid-row", "grid-row")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.grid-row")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("grid-row-start")}}</li>
+ <li>{{cssxref("grid-row-end")}}</li>
+ <li>{{cssxref("grid-column")}}</li>
+ <li>{{cssxref("grid-column-start")}}</li>
+ <li>{{cssxref("grid-column-end")}}</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS">Guide : Placer les éléments d'une grille sur les lignes</a></li>
+ <li>Tutoriel vidéo : <a href="http://gridbyexample.com/video/series-line-based-placement/">le placement des éléments d'une grille sur les lignes (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/grid-template-areas/index.html b/files/fr/web/css/grid-template-areas/index.html
new file mode 100644
index 0000000000..4bb71a1f5a
--- /dev/null
+++ b/files/fr/web/css/grid-template-areas/index.html
@@ -0,0 +1,134 @@
+---
+title: grid-template-areas
+slug: Web/CSS/grid-template-areas
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/grid-template-areas
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>grid-template-areas</code></strong> permet de définir des zones de grille nommées.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/grid-template-areas.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Ces zones ne sont pas associées à un objet de la grille mais peuvent être utilisées avec les propriétés de placement : {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}} et les méthodes de raccourci correspondantes {{cssxref("grid-row")}}, {{cssxref("grid-column")}}, and {{cssxref("grid-area")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */
+grid-template-areas: none;
+
+/* Valeurs de chaînes */
+/* Type &lt;string&gt;      */
+grid-template-areas: "a b";
+grid-template-areas: "a b b"
+                     "a c d";
+
+/* Valeurs globales */
+grid-template-areas: inherit;
+grid-template-areas: initial;
+grid-template-areas: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Le conteneur de grille ne définit aucune zone de grille nommée.</dd>
+ <dt><code>&lt;string&gt;+</code></dt>
+ <dd>Un ligne est créée pour chaque chaîne. Une colonne est créée pour chaque composant de la chaîne de caractères. Si on a un même composant réutilisé sur différentes lignes, cela créera une cellule sur les différentes lignes et colonnes. Il est nécessaire que ces cellules forment un rectangle, sinon, la déclaration est invalide. Voir {{cssxref("&lt;string&gt;")}} pour plus d'informations sur les valeurs de ce type.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;section id="page"&gt;
+  &lt;header&gt;En-tête&lt;/header&gt;
+  &lt;nav&gt;Navigation&lt;/nav&gt;
+  &lt;main&gt;Zone principale&lt;/main&gt;
+  &lt;footer&gt;Pied de page&lt;/footer&gt;
+&lt;/section&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css; highlight[5-7]">#page {
+  display: grid;
+  width: 100%;
+  height: 250px;
+  grid-template-areas: "head head"
+                       "nav  main"
+                       "nav  foot";
+  grid-template-rows: 50px 1fr 30px;
+  grid-template-columns: 150px 1fr;
+}
+
+#page &gt; header {
+  grid-area: head;
+  background-color: #8ca0ff;
+}
+
+#page &gt; nav {
+  grid-area: nav;
+  background-color: #ffa08c;
+}
+
+#page &gt; main {
+  grid-area: main;
+  background-color: #ffff64;
+}
+
+#page &gt; footer {
+  grid-area: foot;
+  background-color: #8cffa0;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemple", "100%", "250px")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Grid", "#propdef-grid-template-areas", "grid-template-areas")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.grid-template-areas")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("grid-template-rows")}}</li>
+ <li>{{cssxref("grid-template-columns")}}</li>
+ <li>{{cssxref("grid-template")}}</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille">Guide : les zones des grilles CSS</a></li>
+ <li>Tutoriel vidéo : <a href="http://gridbyexample.com/video/grid-template-areas/">les zones des grilles CSS (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/grid-template-columns/index.html b/files/fr/web/css/grid-template-columns/index.html
new file mode 100644
index 0000000000..f6d58df3f0
--- /dev/null
+++ b/files/fr/web/css/grid-template-columns/index.html
@@ -0,0 +1,145 @@
+---
+title: grid-template-columns
+slug: Web/CSS/grid-template-columns
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/grid-template-columns
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>grid-template-columns</code></strong> définit les noms des lignes et les fonctions de taille (<em>track sizing</em>) pour les colonnes de la grille.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/grid-template-columns.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */
+grid-template-columns: none;
+
+/* Valeurs &lt;track-list&gt; */
+grid-template-columns: 100px 1fr;
+grid-template-columns: [linename] 100px;
+grid-template-columns: [linename1] 100px [linename2 linename3];
+grid-template-columns: minmax(100px, 1fr);
+grid-template-columns: fit-content(40%);
+grid-template-columns: repeat(3, 200px);
+
+/* Valeurs &lt;auto-track-list&gt; */
+grid-template-columns: 200px repeat(auto-fill, 100px) 300px;
+grid-template-columns: minmax(100px, max-content)
+                       repeat(auto-fill, 200px) 20%;
+grid-template-columns: [linename1] 100px [linename2]
+                       repeat(auto-fit, [linename3 linename4] 300px)
+                       100px;
+grid-template-columns: [linename1 linename2] 100px
+                       repeat(auto-fit, [linename1] 300px) [linename3];
+
+/* Valeurs globales */
+grid-template-columns: inherit;
+grid-template-columns: initial;
+grid-template-columns: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Un mot-clé qui indique qu'il n'y a pas de grille explicite. N'importe quelle colonne sera générée implicitement et sa taille sera déterminée grâce à la propriété {{cssxref("grid-auto-columns")}}.</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Un longueur positive. Voir {{cssxref("&lt;length&gt;")}}.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Un pourcentage positif (type {{cssxref("&lt;percentage&gt;")}}) relatif à la taille du bloc du conteneur de la grille. Si cette taille n'est pas définie, la valeur est traitée comme <code>auto</code>.</dd>
+ <dt><code>&lt;flex&gt;</code></dt>
+ <dd>Une dimension positive dont l'unité <code>fr</code> indique le facteur de flexibilité de la piste. Chaque piste dimensionnée avec <code>&lt;flex&gt;</code> occupera une partie de l'espace restant en fonction de ce facteur.
+ <p>Lorsque cette valeur apparaît en dehors de la notation <code>minmax()</code>, la valeur minimale <code>auto</code> est implicite (la valeur signifie <code>minmax(auto, &lt;flex&gt;)</code>). Voir {{cssxref("&lt;flex&gt;")}}.</p>
+ </dd>
+ <dt id="max-content"><code>max-content</code></dt>
+ <dd>Un mot-clé qui représente la plus grande des contributions maximales de contenu aux objets de la grilles qui occupe la piste de la grille.</dd>
+ <dt><code>min-content</code></dt>
+ <dd>Un mot-clé qui représente la plus grande des contributions minimales de contenu aux objets de la grilles qui occupe la piste de la grille.</dd>
+ <dt>{{cssxref("minmax","minmax(min, max)")}}</dt>
+ <dd>Une notation fonctionnelle qui définit un intervalle de taille entre <code>min</code> et <code>max</code>. Si <code>max</code> est inférieur à <code>min</code>, <code>max</code> est ignoré et la fonction est traitée comme un minimum. En tant que maximum, elle joue le rôle d'une valeur <code>&lt;flex&gt;</code> qui définit le facteur de flexibilité de la piste. Cette valeur est invalide en tant que minimum.</dd>
+ <dt id="auto"><code>auto</code></dt>
+ <dd>Un mot-clé qui est identique au contenu maximal si c'est un maximum. Si c'est un minimum, il représente la plus grande des plus petites tailles (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}})) des objets de la grilles qui occupe cette piste de la grille.</dd>
+ <dd>
+ <p class="note"><strong>Note :</strong> Les pistes de taille <code>auto</code> (et uniquement celles-ci) peuvent être étirées grâce aux propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}.</p>
+ </dd>
+ <dt id="fit-content()">{{cssxref("fit-content", "fit-content( [ &lt;length&gt; | &lt;percentage&gt; ] )")}}</dt>
+ <dd>Cette notation représente la formule <code>min(max-content, max(auto, argument))</code> qui est calculée comme pour <code>auto</code> (i.e. <code>minmax(auto, max-content)</code>) sauf que la taille de la piste est ramenée à <em>argument</em> si elle est plus grande que le minimum fourni par <code>auto</code>.</dd>
+ <dt>{{cssxref("repeat","repeat( [ &lt;positive-integer&gt; | auto-fill | auto-fit ], &lt;track-list&gt; )")}}</dt>
+ <dd>Représente un fragment répété d'une liste de pistes, cela permet de gérer des grilles avec de nombreuses colonnes pour lesquelles on réutilise un motif.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">#grid {
+  display: grid;
+  width: 100%;
+  grid-template-columns: 50px 1fr;
+}
+
+#areaA {
+  background-color: lime;
+}
+
+#areaB {
+  background-color: yellow;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="grid"&gt;
+  &lt;div id="areaA"&gt;A&lt;/div&gt;
+  &lt;div id="areaB"&gt;B&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "100%", "20px")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Grid", "#propdef-grid-template-columns", "grid-template-columns")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.grid-template-columns")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("grid-template-rows")}}</li>
+ <li>{{cssxref("grid-template-areas")}}</li>
+ <li>{{cssxref("grid-template")}}</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base#Les_pistes">Guide : les concepts de base pour les grilles CSS : les pistes</a></li>
+ <li>Tutoriel vidéo : <a href="http://gridbyexample.com/video/series-define-a-grid/">définir une grille (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/grid-template-rows/index.html b/files/fr/web/css/grid-template-rows/index.html
new file mode 100644
index 0000000000..0e31daf6f7
--- /dev/null
+++ b/files/fr/web/css/grid-template-rows/index.html
@@ -0,0 +1,149 @@
+---
+title: grid-template-rows
+slug: Web/CSS/grid-template-rows
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/grid-template-rows
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>grid-template-rows</code></strong> définit les noms des lignes et les fonctions de taille (<em>track sizing</em>) pour les lignes de la grille.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/grid-template-rows.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */
+grid-template-rows: none;
+
+/* Valeurs avec une liste de pistes */
+/* Type &lt;track-list&gt;                */
+grid-template-rows: 100px 1fr;
+grid-template-rows: [linename] 100px;
+grid-template-rows: [linename1] 100px [linename2 linename3];
+grid-template-rows: minmax(100px, 1fr);
+grid-template-rows: fit-content(40%);
+grid-template-rows: repeat(3, 200px);
+
+/* Valeurs &lt;auto-track-list&gt; */
+grid-template-rows: 200px repeat(auto-fill, 100px) 300px;
+grid-template-rows: minmax(100px, max-content)
+                       repeat(auto-fill, 200px) 20%;
+grid-template-rows: [linename1] 100px [linename2]
+                       repeat(auto-fit, [linename3 linename4] 300px)
+                       100px;
+grid-template-rows: [linename1 linename2] 100px
+                       repeat(auto-fit, [linename1] 300px) [linename3];
+
+
+/* Valeurs globales */
+grid-template-rows: inherit;
+grid-template-rows: initial;
+grid-template-rows: unset;
+</pre>
+
+<p>Cette propriété peut être définie avec le mot-clé <code>none</code> ou avec une valeur de type <code>&lt;track-list&gt;</code> ou avec une valeur de type <code>&lt;auto-track-list&gt;</code>.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Un mot-clé qui indique qu'il n'y a pas de grille explicite. N'importe quelle ligne sera générée implicitement et sa taille sera déterminée grâce à la propriété {{cssxref("grid-auto-rows")}}.</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Un longueur positive (type {{cssxref("&lt;length&gt;")}}).</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Un pourcentage positif (type {{cssxref("&lt;percentage&gt;")}}) relatif à la taille du bloc du conteneur de la grille. Si cette taille n'est pas définie, la valeur est traitée comme <code>auto</code>.</dd>
+ <dt><code>&lt;flex&gt;</code></dt>
+ <dd>Une dimension positive dont l'unité <code>fr</code> indique le facteur de flexibilité de la piste. Chaque piste dimensionnée avec <code>&lt;flex&gt;</code> occupera une partie de l'espace restant en fonction de ce facteur.
+ <p>Lorsque cette valeur apparaît en dehors de la notation <code>minmax()</code>, la valeur minimale <code>auto</code> est implicite (la valeur signifie <code>minmax(auto, &lt;flex&gt;)</code>). Voir {{cssxref("&lt;flex_value&gt;")}}.</p>
+ </dd>
+ <dt><code>max-content</code></dt>
+ <dd>Un mot-clé qui représente la plus grande des contributions maximales de contenu aux objets de la grilles qui occupe la piste de la grille.</dd>
+ <dt><code>min-content</code></dt>
+ <dd>Un mot-clé qui représente la plus grande des contributions minimales de contenu aux objets de la grilles qui occupe la piste de la grille.</dd>
+ <dt>{{cssxref("minmax", "minmax(min, max)")}}</dt>
+ <dd>Une notation fonctionnelle qui définit un intervalle de taille entre <code>min</code> et <code>max</code>. Si <code>max</code> est inférieur à <code>min</code>, <code>max</code> est ignoré et la fonction est traitée comme un minimum. En tant que maximum, elle joue le rôle d'une valeur <code>&lt;flex&gt;</code> qui définit le facteur de flexibilité de la piste. Cette notation est invalide en tant que minimum.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Un mot-clé qui est identique au contenu maximal si c'est un maximum. Si c'est un minimum, il représente la plus grande des plus petites tailles (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}})) des objets de la grilles qui occupe cette piste de la grille.</dd>
+ <dd>
+ <p class="note"><strong>Note :</strong> Les pistes de taille <code>auto</code> (et uniquement celles-ci) peuvent être étirées grâce aux propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}.</p>
+ </dd>
+ <dt>{{cssxref("fit-content", "fit-content( [ &lt;length&gt; | &lt;percentage&gt; ] )")}}</dt>
+ <dd>Cette notation représente la formule <code>min(max-content, max(auto, argument))</code> qui est calculée comme pour <code>auto</code> (i.e. <code>minmax(auto, max-content)</code>) sauf que la taille de la piste est ramenée à <em>argument</em> si elle est plus grande que le minimum fourni par <code>auto</code>.</dd>
+ <dt>{{cssxref("repeat","repeat( [ &lt;positive-integer&gt; | auto-fill | auto-fit ], &lt;track-list&gt; )")}}</dt>
+ <dd>Représente un fragment répété d'une liste de pistes, cela permet de gérer des grilles avec de nombreuses lignes pour lesquelles on réutilise un motif.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">#grid {
+  display: grid;
+  height: 100px;
+  grid-template-rows: 30px 1fr;
+}
+
+#areaA {
+  background-color: lime;
+}
+
+#areaB {
+  background-color: yellow;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="grid"&gt;
+  &lt;div id="areaA"&gt;A&lt;/div&gt;
+  &lt;div id="areaB"&gt;B&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "40px", "100px")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Grid", "#propdef-grid-template-rows", "grid-template-rows")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.grid-template-rows")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("grid-template-columns")}}</li>
+ <li>{{cssxref("grid-template-areas")}}</li>
+ <li>{{cssxref("grid-template")}}</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base#Les_pistes">Guide : les concepts de base pour les grilles CSS : les pistes</a></li>
+ <li>Tutoriel vidéo : <a href="http://gridbyexample.com/video/series-define-a-grid/">définir une grille (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/grid-template/index.html b/files/fr/web/css/grid-template/index.html
new file mode 100644
index 0000000000..1311f23f82
--- /dev/null
+++ b/files/fr/web/css/grid-template/index.html
@@ -0,0 +1,148 @@
+---
+title: grid-template
+slug: Web/CSS/grid-template
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/grid-template
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>grid-template</code></strong> est une <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">propriété raccourcie</a> permettant de définir les colonnes, grilles et zones d'une grille.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/grid-template.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Les propriétés détaillées sont {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-areas")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */
+grid-template: none;
+
+/* Valeurs utilisant grid-template-rows / grid-template-columns */
+grid-template: 100px 1fr / 50px 1fr;
+grid-template: auto 1fr / auto 1fr auto;
+grid-template: [linename] 100px / [columnname1] 30% [columnname2] 70%;
+grid-template: fit-content(100px) / fit-content(40%);
+
+/* Valeurs utilisant grid-template-areas grid-template-rows / grid-template-column */
+grid-template: "a a a"
+               "b b b";
+grid-template: "a a a" 20%
+               "b b b" auto;
+grid-template: [header-top] "a a a"     [header-bottom]
+                 [main-top] "b b b" 1fr [main-bottom]
+                            / auto 1fr auto;
+
+/* Valeurs globales */
+grid-template: inherit;
+grid-template: initial;
+grid-template: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Un mot-clé qui applique <code>none</code> sur les trois propriétés détaillées et qui indique qu'il n'y a pas de grille explicite. Il n'y a pas de zone de grille nommée. Les lignes et les colonnes seront générées de façon implicite et leurs tailles seront déterminées par les propriétés {{cssxref("grid-auto-rows")}} et {{cssxref("grid-auto-columns")}}.</dd>
+ <dt><code>&lt;'grid-template-rows'&gt; / &lt;'grid-template-columns'&gt;</code></dt>
+ <dd>Voir {{cssxref("grid-template-rows")}} et {{cssxref("grid-template-columns")}} pour les valeurs définies. {{cssxref("grid-template-areas")}} recevra la valeur <code>none</code>.</dd>
+ <dt><code>[ &lt;line-names&gt;? &lt;string&gt; &lt;track-size&gt;? &lt;line-names&gt;? ]+ [ / &lt;track-list&gt; ]?</code></dt>
+ <dd>{{cssxref("grid-template-areas")}} est définie avec les chaînes listées, {{cssxref("grid-template-rows")}} est définie avec les tailles de piste suivant chaque chaîne (<code>auto</code> sera utilisé pour les tailles manquantes), les lignes seront découpées selon les noms avant et après chaque taille. {{cssxref("grid-template-columns")}} sera définie avec la valeur listée après la barre oblique (ou <code>none</code> sinon).
+ <p class="note"><strong>Note :</strong> La fonction {{cssxref("repeat()")}} n'est pas autorisée parmi les listes de pistes car les pistes sont conçues pour correspondre à la disposition finale (à la façon d'un dessin en ASCII).</p>
+ </dd>
+</dl>
+
+<p class="note"><strong>Note :</strong> La propriété raccourcie {{cssxref("grid")}} accepte la même syntaxe mais réinitialise également les propriétés implicites avec leurs valeurs initiales. On pourra utiliser <code>grid</code> (plutôt que <code>grid-template</code>) pour empêcher les valeurs de suivre la cascade de façon séparée.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css; highlight[5-8]">#page {
+  display: grid;
+  width: 100%;
+  height: 200px;
+  grid-template: [header-left] "head head" 30px [header-right]
+                 [main-left]   "nav  main" 1fr  [main-right]
+                 [footer-left] "nav  foot" 30px [footer-right]
+                 / 120px 1fr;
+}
+
+header {
+  background-color: lime;
+  grid-area: head;
+}
+
+nav {
+  background-color: lightblue;
+  grid-area: nav;
+}
+
+main {
+  background-color: yellow;
+  grid-area: main;
+}
+
+footer {
+  background-color: red;
+  grid-column: foot;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html">&lt;section id="page"&gt;
+  &lt;header&gt;En-tête&lt;/header&gt;
+  &lt;nav&gt;Navigation&lt;/nav&gt;
+  &lt;main&gt;Zone principale&lt;/main&gt;
+  &lt;footer&gt;Bas de page&lt;/footer&gt;
+&lt;/section&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "100%", "200px")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Grid", "#propdef-grid-template", "grid-template")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.grid-template")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("grid-template-rows")}}</li>
+ <li>{{cssxref("grid-template-areas")}}</li>
+ <li>{{cssxref("grid-template-columns")}}</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS">Guide : Placer les éléments d'une grille sur les lignes</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille#Les_propriétés_raccourcies_pour_les_grilles_CSS">Guide : Les zones de grilles et les propriétés raccourcies</a></li>
+ <li>Tutoriel vidéo : <a href="http://gridbyexample.com/video/grid-template-shorthand/">les propriétés raccourcies pour les zones de grille (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/grid/index.html b/files/fr/web/css/grid/index.html
new file mode 100644
index 0000000000..ead926238c
--- /dev/null
+++ b/files/fr/web/css/grid/index.html
@@ -0,0 +1,140 @@
+---
+title: grid
+slug: Web/CSS/grid
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/grid
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <code><strong>grid</strong></code> est une propriété raccourcie qui permet de définir toutes les propriétés liées aux grilles CSS, qu'elles soient explicites ({{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-areas")}}), implicites ({{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-columns")}} et {{cssxref("grid-auto-flow")}}).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/grid.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p class="note"><strong>Note :</strong> Une seule déclaration <code>grid</code> permettra uniquement de définir les propriétés explicites ou implicites. Les propriétés qui ne sont pas définies via la propriété raccourcie prendront leurs valeurs initiales. Les propriétés d'espacement ne sont pas surchargées par cette propriété raccourcie.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs &lt;'grid-template'&gt; */
+grid: none;
+grid: "a" 100px "b" 1fr;
+grid: [linename1] "a" 100px [linename2];
+grid: "a" 200px "b" min-content;
+grid: "a" minmax(100px, max-content) "b" 20%;
+grid: 100px / 200px;
+grid: minmax(400px, min-content) / repeat(auto-fill, 50px);
+
+/* &lt;'grid-template-rows'&gt; /
+   [ auto-flow &amp;&amp; dense? ] &lt;'grid-auto-columns'&gt;? values */
+grid: 200px / auto-flow;
+grid: 30% / auto-flow dense;
+grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;
+grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;
+
+/* [ auto-flow &amp;&amp; dense? ] &lt;'grid-auto-rows'&gt;? /
+   &lt;'grid-template-columns'&gt; values */
+grid: auto-flow / 200px;
+grid: auto-flow dense / 30%;
+grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
+grid: auto-flow dense 40% / [line1] minmax(20em, max-content);
+
+/* Valeurs globales */
+grid: inherit;
+grid: initial;
+grid: unset;</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>Pour plus de détails, voir les pages de chacune des propriétés : {{cssxref("grid-template")}}, {{cssxref("grid-auto-flow")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-columns")}}.</p>
+
+<dl>
+ <dt><code>&lt;'grid-template'&gt;</code></dt>
+ <dd>Définit {{cssxref("grid-template")}}, ce qui inclut {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-rows")}} et {{cssxref("grid-template-areas")}}.</dd>
+ <dt><code>&lt;'grid-auto-flow'&gt;</code></dt>
+ <dd>Définit {{cssxref("grid-auto-flow")}} qui indique le fonctionnement de l'algorithme de placement automatique et qui détaille exactement comment les éléments placés automatiquement « coulent » dans la grille.</dd>
+ <dt><code>&lt;'grid-auto-rows'&gt;</code></dt>
+ <dd>Définit {{cssxref("grid-auto-rows")}} qui indique la taille des pistes créées pour les lignes de façon implicite.</dd>
+ <dt><code>&lt;'grid-auto-columns'&gt;</code></dt>
+ <dd>Définit {{cssxref("grid-auto-columns")}} qui indique la taille des pistes créées pour les colonnes de façon implicite.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#container {
+  display: grid;
+  grid: repeat(2, 60px) / auto-flow 80px;
+}
+
+#container &gt; div {
+  background-color: #8ca0ff;
+  width: 50px;
+  height: 50px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="container"&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "100%", 150)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Grid", "#propdef-grid", "grid")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.grid")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("grid-template")}}</li>
+ <li>{{cssxref("grid-template-rows")}}</li>
+ <li>{{cssxref("grid-template-columns")}}</li>
+ <li>{{cssxref("grid-template-areas")}}</li>
+ <li>{{cssxref("grid-auto-columns")}}</li>
+ <li>{{cssxref("grid-auto-rows")}}</li>
+ <li>{{cssxref("grid-auto-flow")}}</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS">Guide : Placer les éléments d'une grille sur les lignes</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille#Les_propriétés_raccourcies_pour_les_grilles_CSS">Guide : Les zones de grilles et les propriétés raccourcies</a></li>
+</ul>
diff --git a/files/fr/web/css/hanging-punctuation/index.html b/files/fr/web/css/hanging-punctuation/index.html
new file mode 100644
index 0000000000..7380231a60
--- /dev/null
+++ b/files/fr/web/css/hanging-punctuation/index.html
@@ -0,0 +1,129 @@
+---
+title: hanging-punctuation
+slug: Web/CSS/hanging-punctuation
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/hanging-punctuation
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>hanging-punctuation</code></strong> indique si un signe de ponctuation se situant au début ou à la fin d'une ligne de texte doit rester sur cette ligne, quitte à sortir de la boîte qui représente la ligne.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+hanging-punctuation: none;
+hanging-punctuation: first;
+hanging-punctuation: last;
+hanging-punctuation: force-end;
+hanging-punctuation: allow-end;
+
+/* Valeurs avec deux mots-clés */
+hanging-punctuation: first force-end;
+hanging-punctuation: first allow-end;
+hanging-punctuation: first last;
+hanging-punctuation: last force-end;
+hanging-punctuation: last allow-end;
+
+/* Valeurs avec trois mots-clés */
+hanging-punctuation: first force-end last;
+hanging-punctuation: first allow-end last;
+
+/* Valeurs globales */
+hanging-punctuation: inherit;
+hanging-punctuation: initial;
+hanging-punctuation: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Cette propriété peut être définie grâce à une, deux ou trois valeurs :</p>
+
+<ul>
+ <li>Avec une valeur : on utilisera l'un des mots-clés de la liste ci-après</li>
+ <li>Avec deux valeurs :
+  <ul>
+   <li>le mot-clé <code>first</code> avec un des mots-clés parmi : <code>last</code>, <code>allow-end</code> ou <code>force-end</code></li>
+   <li>ou le mot-clé <code>last</code> avec un des mots-clés parmi : <code>last</code>, <code>allow-end</code> ou <code>force-end</code></li>
+  </ul>
+ </li>
+ <li>Avec trois valeurs :
+  <ul>
+   <li><code>first</code>, <code>allow-end</code> et <code>last</code></li>
+   <li>ou <code>first</code>, <code>force-end</code> et <code>last</code></li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Aucun caractère ne reste suspendu sur la ligne.</dd>
+ <dt><code>first</code></dt>
+ <dd>Une parenthèse ou des guillemets ouvrants au début de la première ligne d'un texte restent sur la ligne.</dd>
+ <dt><code>last</code></dt>
+ <dd>Une parenthèse ou des guillemets fermants à la fin de la dernière ligne d'un texte restent sur la ligne.</dd>
+ <dt><code>force-end</code></dt>
+ <dd>Un point ou une virgule en fin de ligne restera sur cette ligne.</dd>
+ <dt><code>allow-end</code></dt>
+ <dd>Un point ou une virgule en fin de ligne restera sur cette ligne si la justification du texte ne laisse pas l'espace nécessaire.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+   Lorem ipsum dolor sit amet, consectetur
+   adipiscing elit. Curabitur dignissim nunc
+   mauris, et sollicitudin est scelerisque
+   sed. Praesent laoreet tortor massa, sit
+   amet vulputate nulla pharetra ut. Proin
+   ornare commodo sodales. Class aptent
+   taciti sociosqu ad litora torquent per
+   conubia nostra, per inceptos himenaeos.
+&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  hanging-punctuation: first;
+  margin: .5rem;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemple')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text', '#hanging-punctuation-property', 'hanging-punctuation')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.hanging-punctuation")}}</p>
diff --git a/files/fr/web/css/height/index.html b/files/fr/web/css/height/index.html
new file mode 100644
index 0000000000..e8fe76af40
--- /dev/null
+++ b/files/fr/web/css/height/index.html
@@ -0,0 +1,179 @@
+---
+title: height
+slug: Web/CSS/height
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/height
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>height</code></strong> définit la hauteur de la boîte de contenu d'un élément. <a href="/fr/docs/CSS/box_model#content">La boîte de contenu</a> est à l'intérieur de la boîte de remplissage (<em>padding</em>) qui est à l'intérieur de la boîte de bordure qui est elle-même à l'intérieur de la boîte de marge de l'élément. Si la propriété {{cssxref("box-sizing")}} vaut <code>border-box</code>, cette propriété détermine la hauteur de <a href="/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte#Les_propriétés_des_boîtes">la boîte de marge</a>.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/height.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Les propriétés {{cssxref("min-height")}} et {{cssxref("max-height")}} surchargent la propriété <code>height</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeur avec un mot-clé */
+height: auto;
+
+/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+height: 120px;
+height: 10em;
+
+/* Valeurs relatives proportionnelles  */
+/* Type &lt;percentage&gt;                   */
+height: 75%;
+
+/* Valeurs globales */
+height: inherit;
+height: initial;
+height: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une valeur de longueur absolue. Voir la page {{cssxref("&lt;length&gt;")}} pour les unités qui peuvent être utilisées.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>La valeur exprimée correspond à un pourcentage (type {{cssxref("&lt;percentage&gt;")}}) de la hauteur du bloc englobant.</dd>
+ <dt><code>border-box </code>{{experimental_inline}}</dt>
+ <dd>Si cette valeur est présente, la valeur de longueur ou le pourcentage indiqués avant s'applique à la boîte de bordure de l'élément.</dd>
+ <dt><code>content-box</code> {{experimental_inline}}</dt>
+ <dd>Si cette valeur est présente, la valeur de longueur ou le pourcentage indiqués avant s'applique à la boîte de contenu de l'élément</dd>
+ <dt><code>auto</code></dt>
+ <dd>Le navigateur calculera une valeur et sélectionnera une hauteur pour l'élément ciblé.</dd>
+ <dt><code>fill</code> {{experimental_inline}}</dt>
+ <dd>Utilise la taille <code>fill-available</code> dans l'axe du sens de lecture ou la taille <code>fill-available</code> dans l'axe perpendiculaire au sens de lecture selon le mode d'écriture.</dd>
+ <dt><code>max-content</code> {{experimental_inline}}</dt>
+ <dd>La hauteur intrinsèque préférrée.</dd>
+ <dt><code>min-content</code> {{experimental_inline}}</dt>
+ <dd>La hauteur intrinsèque minimale.</dd>
+ <dt><code>available</code> {{experimental_inline}}</dt>
+ <dd>La hauteur du bloc englobant à laquelle on a soustrait la marge verticale, la bordure verticale et le remplissage (<em>padding</em>) vertical.</dd>
+ <dt><code>fit-content</code> {{experimental_inline}}</dt>
+ <dd>La plus grande des valeurs entre :
+ <ul>
+  <li>La hauteur minimale intrinsèque.</li>
+  <li>Le minimum entre la hauteur intrinsèque préférrée et la hauteur disponible</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  width: 250px;
+  margin-bottom: 5px;
+  border: 3px solid #999999;
+}
+
+#red {
+  height: 50px;
+}
+
+#green {
+  height: 25px;
+}
+
+#parent {
+  height: 100px;
+}
+
+#child {
+  height: 50%;
+  width: 75%;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="red"&gt;
+  &lt;span&gt;Je mesure 50 pixels de haut.&lt;/span&gt;
+&lt;/div&gt;
+&lt;div id="green"&gt;
+  &lt;span&gt;Et moi je mesure 25 pixels de haut.&lt;/span&gt;
+&lt;/div&gt;
+&lt;div id="parent"&gt;
+  &lt;div id="child"&gt;
+    &lt;span&gt;Je suis moitié moins haut que mon parent.&lt;/span&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemple')}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Veiller à s'assurer que les éléments ciblés avec une règle utilisant <code>height</code> ne sont pas tronqués ou ne masquent pas d'autre contenu sur la page lorsqu'on zoome pour augmenter la taille du texte.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html" rel="noopener"><em>Understanding Success Criterion 1.4.4, W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}}</td>
+   <td>{{Spec2('CSS3 Sizing')}}</td>
+   <td>Ajout des mots-clés <code>max-content</code>, <code>min-content</code>, <code>available</code>, <code>fit-content</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'height')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>height</code> peut désormais être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visudet.html#the-height-property', 'height')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Ajout de la prise en charge des valeurs de type {{cssxref("&lt;length&gt;")}} et précision sur les éléments auxquels la propriété s'applique.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#height', 'height')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("css.properties.height")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">Le modèle de boîtes</a></li>
+ <li>{{cssxref("width")}}</li>
+ <li>{{cssxref("box-sizing")}}</li>
+ <li>{{cssxref("min-height")}}</li>
+ <li>{{cssxref("max-height")}}</li>
+</ul>
diff --git a/files/fr/web/css/hyphens/index.html b/files/fr/web/css/hyphens/index.html
new file mode 100644
index 0000000000..388fcaf226
--- /dev/null
+++ b/files/fr/web/css/hyphens/index.html
@@ -0,0 +1,141 @@
+---
+title: hyphens
+slug: Web/CSS/hyphens
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/hyphens
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>hyphens</code></strong> indique au navigateur comment gérer les traits d'union lors des sauts de ligne. Grâce à elle, on peut empêcher l'utilisation des traits d'union en fin de ligne, contrôler quand ils sont ajoutés ou laisser le navigateur décider.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/hyphens.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Les règles relatives aux traits d'union en fin de ligne dépendent de la langue utilisée. En HTML, la langue est définie grâce à l'attribut <code><a href="/fr/docs/Web/HTML/Attributs_globaux/lang">lang</a></code> et les navigateurs n'appliqueront les règles que si cet attribut est présent et que le dictionnaire correspondant (pour la gestion des traits d'union et des fins de ligne) est disponible. Pour des documents XML, on utilisera l'attribut <code><a href="/fr/docs/Web/SVG/Attribute/xml:lang">xml:lang</a></code>.</p>
+
+<div class="note"><strong>Note :</strong> Les règles exactes qui définissent l'application des traits d'union en fin de ligne ne sont pas explicitement définies par la spécification, aussi, le comportement peut varier entre les navigateurs.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+hyphens: none;
+hyphens: manual;
+hyphens: auto;
+
+/* Valeurs globales */
+hyphens: inherit;
+hyphens: initial;
+hyphens: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Les mots ne sont pas coupés en fin de ligne et ce même si les caractères invitent à une coupe. Les lignes se termineront uniquement sur des blancs.</dd>
+ <dt><code>manual</code></dt>
+ <dd>Les mots sont coupés là où des caractères invitant à un saut de ligne sont présents. Voir la section suivante pour plus de détails.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Le navigateur est libre de couper les mots là où il l'estime approprié selon les règles qu'il choisit. Les emplacements de coupe suggérés par certains caractères devraient être privilégiés par rapport aux coupes automatiques.</dd>
+</dl>
+
+<div class="note"><strong>Note :</strong> Le comportement défini par <code>auto</code> dépend de la langue indiquée par le document. Aussi, il faut indiquer la langue via l'attribut HTML <code>lang</code> pour s'assurer que les fins de ligne et les traits d'union sont bien gérés selon la langue indiquée.</div>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Suggérer_des_emplacements_de_coupe_pour_les_lignes">Suggérer des emplacements de coupe pour les lignes</h2>
+
+<p>Deux caractères Unicode peuvent être utilisés manuellement pour indiquer des emplacement où effectuer des sauts de ligne :</p>
+
+<dl>
+ <dt>U+2010 (HYPHEN)</dt>
+ <dd>Un trait d'union « dur » qui indique un emplacement indiqué pour un saut de ligne. Même si la ligne n'est pas coupée à cet endroit, le trait d'union est affiché.</dd>
+ <dt>U+00AD (SOFT HYPHEN)</dt>
+ <dd>Un trait d'union « doux ». Ce caractère n'est pas affichée de façon visible. Il indique au navigateur un emplacement où effectuer le saut de ligne si nécessaire. En HTML, on peut utiliser l'entité <code>&amp;shy;</code> pour insérer ce caractère.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, on crée trois classes CSS pour illustrer chacune des configurations possibles pour la propriété <code>hyphens</code>.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  width: 55px;
+  border: 1px solid black;
+ }
+p.none {
+  -webkit-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+p.manual {
+  -webkit-hyphens: manual;
+  -ms-hyphens: manual;
+  hyphens: manual;
+}
+p.auto {
+  -webkit-hyphens: auto;
+  -ms-hyphens: auto;
+  hyphens: auto;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;&lt;code&gt;none&lt;/code&gt;: aucun trait d'union, dépassement si nécessaire
+    &lt;p lang="en" class="none"&gt;An extreme&amp;shy;ly long English word&lt;/p&gt;
+  &lt;/li&gt;
+  &lt;li&gt;&lt;code&gt;manual&lt;/code&gt;: un trait d'union uniquement à &amp;amp;hyphen; ou &amp;amp;shy; (si nécessaire)
+    &lt;p lang="en" class="manual"&gt;An extreme&amp;shy;ly long English word&lt;/p&gt;
+  &lt;/li&gt;
+  &lt;li&gt;&lt;code&gt;auto&lt;/code&gt;: un trait d'union où l'algorithme l'estime nécessaire
+    &lt;p lang="en" class="auto"&gt;An extreme&amp;shy;ly long English word&lt;/p&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<figure>
+<p>{{EmbedLiveSample("Exemples", "100%", "490'")}}</p>
+</figure>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Text", "#hyphens-property", "hyphens")}}</td>
+   <td>{{Spec2("CSS3 Text")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.hyphens")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("content")}}</li>
+</ul>
diff --git a/files/fr/web/css/héritage/index.html b/files/fr/web/css/héritage/index.html
new file mode 100644
index 0000000000..c5595da1e4
--- /dev/null
+++ b/files/fr/web/css/héritage/index.html
@@ -0,0 +1,76 @@
+---
+title: Héritage
+slug: Web/CSS/Héritage
+tags:
+  - CSS
+  - Guide
+  - Reference
+translation_of: Web/CSS/inheritance
+---
+<div>{{CSSRef}}</div>
+
+<p>Pour <a href="fr/R%c3%a9f%c3%a9rence_CSS">chaque propriété CSS</a>, la spécification indique si, par défaut, cette propriété est héritée ou non. Cela permet de définir le comportement qu'on observera lorsqu'aucune valeur n'est spécifiée pour une propriété pour un élément donné.</p>
+
+<h2 id="Propriétés_héritées">Propriétés héritées</h2>
+
+<p>Lorsqu'aucune valeur n'est spécifiée pour une<em> propriété héritée</em> sur un élément, l'élément récupère la <a href="/fr/docs/Web/CSS/Valeur_calculée">valeur calculée</a> de cette propriété appliquée à son élément parent. Seul l'élément racine du document possède <a href="/fr/docs/Web/CSS/Valeur_initiale">la valeur initiale</a> donnée via la spécification.</p>
+
+<p>Un exemple caractéristique d'une propriété héritée est la propriété {{cssxref("color")}}. En définissant la règle de style :</p>
+
+<pre class="brush: css"> p { color: green; }
+</pre>
+
+<p>Sur le fragment HTML suivant :</p>
+
+<pre class="brush: html"> &lt;p&gt;Ce paragraphe contient du &lt;em&gt;texte mis en emphase text&lt;/em&gt;.&lt;/p&gt;
+</pre>
+
+<p>On obtient le résultat suivant :</p>
+
+<p>{{EmbedLiveSample("Propriétés_héritées")}}</p>
+
+<p>Les mots « texte mis en emphase » apparaîtront en vert, car l'élément <code>em</code> a hérité de la valeur de la propriété {{cssxref("color")}} de l'élément <code>p</code>. Il n'obtient pas la valeur initiale de la propriété (qui est la couleur utilisée par l'élément racine lorsque la page ne spécifie aucune couleur).</p>
+
+<h2 id="Propriétés_non_héritées">Propriétés non héritées</h2>
+
+<p>Lorsqu'aucune valeur n'est définie pour un élément, pour une<em> propriété non héritée</em>, l'élément prendra <a href="/fr/docs/Web/CSS/Valeur_initiale">la valeur initiale</a> de cette propriété (telle qu'indiquée par la spécification).</p>
+
+<p>Un exemple caractéristique de propriété non héritée est la propriété {{cssxref("border")}}. En définissant la règle de style :</p>
+
+<pre class="brush: css"> p { border: medium solid; }
+</pre>
+
+<p>Sur le fragment de code HTML :</p>
+
+<pre class="brush: html"> &lt;p&gt;Ce paragraphe contient du &lt;em&gt;texte mis en emphase text&lt;/em&gt;.&lt;/p&gt;
+</pre>
+
+<p>On obtient le résultat suivant :</p>
+
+<p>{{EmbedLiveSample("Propriétés_non_héritées")}}</p>
+
+<p>Les mots « texte mis en emphase » n'auront pas de bordure (car la valeur initiale de la propriété {{cssxref("border-style") }} est <code>none</code>).</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Le mot-clé {{cssxref("inherit") }} permet aux auteurs de pages web de définir l'héritage de façon explicite. Il fonctionne aussi bien pour les propriétés héritées que pour celles qui ne sont pas héritées.</p>
+
+<p>Il est possible de contrôler l'héritage de toutes les propriétés grâce à la propriété raccourcie {{cssxref("all")}} afin d'appliquer la valeur indiquée sur toutes les propriétés.</p>
+
+<p>Ainsi :</p>
+
+<pre class="brush: css">font: {
+  all: revert;
+  font-size: 200%;
+  font-weight: bold;
+}</pre>
+
+<p>permettra d'annuler la mise en forme de l'agent utilisateur pour l'ensemble des propriétés sauf si celles-ci sont fournies via une feuille de styles de l'utilisateur (qui sont alors utilisées). Ensuite, la taille du texte est doublée et celui-ci est mis en gras.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("inherit")}}, {{cssxref("initial")}}, {{cssxref("unset")}} et {{cssxref("revert")}}</li>
+ <li><a href="/fr/docs/Web/CSS/Valeur_calculée">La notion de valeur calculée</a></li>
+ <li><a href="/fr/docs/Web/CSS/Valeur_initiale">La notion de valeur initiale</a></li>
+</ul>
diff --git a/files/fr/web/css/image()/index.html b/files/fr/web/css/image()/index.html
new file mode 100644
index 0000000000..0be7c11f52
--- /dev/null
+++ b/files/fr/web/css/image()/index.html
@@ -0,0 +1,176 @@
+---
+title: image()
+slug: Web/CSS/image()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+translation_of: Web/CSS/image()
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La fonction CSS <code><strong>image</strong></code><strong><code>()</code></strong> définit une image (type {{cssxref("&lt;image&gt;")}}) à la façon du type {{cssxref("&lt;url&gt;")}} mais avec des fonctionnalités supplémentaires comme la définition de la directionnalité, la possibilité d'indiquer une image par défaut si l'image initiale n'est pas prise en charge, l'affichage d'une partie de l'image ou le choix de la couleur à utiliser par défaut si aucune des images indiquées ne peut être affichée.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Attention à ne pas confondre cette notation fonctionnelle CSS avec le constructeur {{DOMxRef("HTMLImageElement/Image", "<code>Image()</code> pour <code>HTMLImageElement</code>","",1)}}.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax("image()")}}
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>image-tags</code>{{optional_inline}}</dt>
+ <dd>La directionnalité de l'image, la valeur <code>ltr</code> pourra être utilisée afin d'indiquer que l'image est orientée de gauche à droite et la valeur <code>rtl</code> indiquera de droite à gauche.</dd>
+ <dt><code>image-src</code>{{optional_inline}}</dt>
+ <dd>Zéro, une ou plusieurs URL ({{CSSxRef("&lt;url&gt;")}}) ou chaînes de caractères ({{CSSxRef("&lt;string&gt;")}}) indiquant des sources d'image et qui contiennent éventuellement des identifiants de fragment.</dd>
+ <dt><code>color</code>{{optional_inline}}</dt>
+ <dd>Une couleur par défaut. Cette couleur sera utilisée par défaut si aucune image n'est trouvée ou prise en charge parmi les images fournies via <code>image-src</code>.</dd>
+</dl>
+
+<h3 id="Gestion_de_la_directionnalité">Gestion de la directionnalité</h3>
+
+<p>Le premier paramètre de la fonction <code>image()</code> est optionnel et indique la directionnalité de l'image. Lorsque ce paramètre est utilisé et que l'image est utilisée au sein d'un élément ayant la directionnalité opposée, l'image sera renversée horizontalement pour les modes d'écriture horizontaux. Si ce paramètre n'est pas utilisé, l'image ne sera pas renversée.</p>
+
+<h3 id="Fragments_dimage">Fragments d'image</h3>
+
+<p>Une différence fondamentale entre <code>url()</code> et <code>image()</code> est la possibilité d'ajouter un identifiant de fragment d'image. Un identifiant de fragment est donné par : un point de départ défini par ses coordonnées x et y et par une largeur et une hauteur. Cela permet de ne sélectionner qu'une section de l'image source. La section ainsi définie devient une image à part entière aux yeux du moteur de rendu.</p>
+
+<pre class="brush:css notranslate">background-image: image('monimage.webp#xywh=0,20,40,60');</pre>
+
+<p>Avec l'exemple précédent, l'image d'arrière-plan utilisée sera une section de l'image <em>myImage.webp</em> commençant à la coordonnée (0px,20px), ayant une largeur de 40px et une hauteur de 60px.</p>
+
+<p>La syntaxe pour l'identifiant de fragment <code>#xywh=#,#,#,#</code> prend quatre arguments numériques séparés par des virgules. Les deux premiers arguments représentent les coordonnées X et Y du point de départ pour la section, la troisième valeur correspond à la largeur de la portion et la quatrième correspond à la hauteur. Par défaut, ces coordonnées et ces mesures sont exprimées en pixels. La <a href="https://www.w3.org/TR/media-frags/#naming-space">définition de la dimension spatiale de la spécification des média</a> indique que les pourcentages peuvent également être pris en charge.</p>
+
+<pre class="brush: css notranslate">xywh=160,120,320,240        /* créera une image sur 320x240 à x=160 et y=120 */
+xywh=pixel:160,120,320,240  /* créera une image sur 320x240 à x=160 et y=120 */
+xywh=percent:25,25,50,50    /* créera une image sur 50%x50% à x=25% et y=25% */</pre>
+
+<p>Les fragments d'image peuvent également être utilisés avec la notation <code>url()</code>. La syntaxe <em>#xywh</em>=#,#,#,# est rétrocompatible car elle sera ignorée si elle n'est pas comprise et elle ne rendra pas la source invalide si elle est utilisée avec la notation <code>url()</code>. Si le navigateur ne prend pas en charge les notations pour les fragments de média, il ignorera la définition du fragment et affichera l'image intégralement.</p>
+
+<p>Les navigateurs qui prennent en charge <code>image()</code> prennent également en charge la notation pour les fragments. Ainsi si le fragment fourni est invalide dans la source pour <code>image()</code>, l'image résultante sera considérée invalide.</p>
+
+<h3 id="Couleur_par_défaut">Couleur par défaut</h3>
+
+<p>Si les deux derniers arguments sont utilisés et dans le cas où les images fournies sont invalides, la fonction <code>image()</code> génèrera une image à partir de la couleur indiquée. Cette couleur apparaîtra uniquement dans le cas où l'image source n'est pas utilisable. Ainsi, si on a choisi une image sombre sur laquelle afficher du texte clair, autant prévoir une couleur sombre au cas où afin de garantir un contraste acceptable.</p>
+
+<p>Il est possible de ne pas définir d'image source et de ne passer qu'une couleur comme argument.</p>
+
+<p>À la différence de {{cssxref("background-color")}} dont la couleur sera placée derrière l'ensemble des images d'arrière-plan, on peut utiliser <code>image()</code> afin de placer des couleurs sur d'autres images.</p>
+
+<p>La taille du rectangle de couleur appliqué peut être défini grâce à la propriété {{cssxref("background-size")}}. Ce comportement diffère de <code>background-color</code> qui définit une couleur pour couvrir l'ensemble de l'élément. <code>image(color)</code> et <code>background-color</code> pourront être déplacés grâce aux propriétés {{cssxref("background-clip")}} et {{cssxref("background-origin")}}.</p>
+
+<h2 id="Examples" name="Examples">Exemples</h2>
+
+<h3 id="Utiliser_des_images_prenant_en_compte_la_directionnalité">Utiliser des images prenant en compte la directionnalité</h3>
+
+<pre class="brush: html notranslate">&lt;ul&gt;
+  &lt;li dir="ltr"&gt;La puce est une flèche pointant à droite et située à gauche.&lt;/li&gt;
+  &lt;li dir="rtl"&gt;La puce est la même flèche mais renversée pour pointer à gauche.&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<pre class="brush: css notranslate">ul {
+  list-style-image: image(ltr 'rightarrow.jpg');
+}</pre>
+
+<p>Pour les éléments de la liste allant de gauche à droite (ceux avec <code>dir="ltr"</code> ou qui héritent de cette direction depuis leur ancêtre), l'image pour la puce sera utilisée telle quelle. Les éléments de la liste avec <code>dir="rtl"</code> (que ce soit explicitement défini comme ici ou que cette direction provienne de la direction par défaut du document, par exemple un document en arabe ou en hébreu), l'image sera affichée à droite et sera renversée horizontalement (de la même façon qu'avec <code>transform: scalex(-1)</code>). Le texte sera également affiché de gauche à droite.</p>
+
+<p>{{EmbedLiveSample("Utiliser_des_images_prenant_en_compte_la_directionnalité","100%","200")}}</p>
+
+<div>
+<h3 id="Afficher_une_partie_sprite" name="Afficher_une_partie_sprite">Afficher une partie (<em>sprite</em>)</h3>
+
+<pre class="brush: html notranslate">&lt;div class="box"&gt;Vous pouvez survoler cet élément pour voir un autre curseur.&lt;/div&gt;
+</pre>
+
+<pre class="brush:css notranslate">.box:hover {
+   cursor: image("https://mdn.mozillademos.org/files/16411/sprite.png#xywh=32,64,16,16");
+}</pre>
+
+<p>Lorsque l'utilisateur survole la boîte, le curseur changera pour afficher une section d'un <em>sprite</em> mesurant 16 pixels de large et de haut et commençant à x=32 et y=64 sur l'image totale.</p>
+
+<div>{{EmbedLiveSample("Afficher_une_partie_sprite","100%","100")}}</div>
+</div>
+
+<div>
+<h3 id="Fournir_des_images_alternatives">Fournir des images alternatives</h3>
+
+<pre class="brush:css notranslate">.help::before {
+  content: image("try.webp", "try.svg", "try.gif");
+}</pre>
+
+<p>Dans cet exemple, le navigateur affichera une image comme contenu généré précédent tous les éléments avec la classe <code>help</code>. Si le navigateur prend en charge le format WebP, ce sera <code>try.webp</code> qui sera affichée, sinon si le navigateur prend en charge le format SVG, ce sera <code>try.svg</code> qui sera affichée et sinon, ce sera <code>try.gif</code> qui sera utilisée.</p>
+</div>
+
+<div>
+<h3 id="Placer_une_couleur_sur_une_image_en_arrière-plan">Placer une couleur sur une image en arrière-plan</h3>
+
+<pre class="brush:css notranslate">.quarterlogo {height: 200px; width: 200px; border: 1px solid;}</pre>
+
+<pre class="brush:css notranslate">.quarterlogo {
+  background-image:
+    image(rgba(0, 0, 0, 0.25)),
+    url("https://mdn.mozillademos.org/files/12053/firefox.png");
+  background-size: 25%;
+  background-repeat: no-repeat;
+}</pre>
+
+<pre class="brush: html notranslate">&lt;div class="quarterlogo"&gt;If supported, a quarter of this div has a darkened logo&lt;/div&gt;
+</pre>
+
+<p>Dans l'exempel précédent, on placera un masque noir semi-transparent sur le logo Firefox utilisé comme image d'arrière-plan. Si on avait utilisé la propriété <code>background-color</code> à la place, la couleur aurait été placée sous le logo et non sur lui. De plus, le conteneur entier aurait eu cette couleur en arrière-plan. Avec <code>image()</code> et {{cssxref("background-size")}} (tout en empêchant l'aimge de se répéter grâce à {{cssxref("background-repeat")}}), le voile noir ne couvrira qu'un quart du conteneur.</p>
+
+<div>{{EmbedLiveSample("Placer_une_couleur_sur_une_image_en_arrière-plan","100%","220")}}</div>
+</div>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Les outils d'assistance ne peuvent pas analyser les images d'arrière-plan acr les navigateurs n'extraient pas d'informations du contenu visuel des images. Si l'image contient des informations essentielles à la compréhension du document, il faudra décrire ces informations de façon sémantique dans le document afin, entre autres, que les outils d'assistance puissent transmettre les informations aux utilisateurs.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">Comprendres les règles WCAG 1.1</a></li>
+ <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">Comprendre les critères de succès 1.1.1 - WCAG 2.0</a></li>
+</ul>
+
+<p>Cette fonctionnalité permet d'améliorer l'accessibilité en fournissant une couleur par défaut lorsque l'image n'est pas chargée. Bien qu'il soit conseillé d'avoir une couleur d'arrière-plan ({{cssxref("background-color")}}) pour chaque image d'arrière-plan ({{cssxref("background-image")}}), <code>image()</code> pourra être utile afin de définir une couleur uniquement utilisée lorsqu'une image ne charge pas.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Images", "#image-notation", "image()")}}</td>
+   <td>{{Spec2('CSS4 Images')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.types.image.image")}}</p>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li>{{CSSxRef("&lt;image&gt;")}}</li>
+ <li>{{CSSxRef("element")}}</li>
+ <li>{{CSSxRef("&lt;url&gt;")}}</li>
+ <li>{{CSSxRef("clip-path")}}</li>
+ <li>{{CSSxRef("-moz-image-rect")}}</li>
+ <li>{{CSSxRef("&lt;gradient&gt;")}}</li>
+ <li>{{CSSxRef("image-set")}}</li>
+ <li>{{CSSxRef("cross-fade")}}</li>
+</ul>
diff --git a/files/fr/web/css/image-orientation/index.html b/files/fr/web/css/image-orientation/index.html
new file mode 100644
index 0000000000..a12c6348b3
--- /dev/null
+++ b/files/fr/web/css/image-orientation/index.html
@@ -0,0 +1,142 @@
+---
+title: image-orientation
+slug: Web/CSS/image-orientation
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/image-orientation
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>image-orientation</code></strong> décrit la façon d'obtenir l'orientation correcte d'une image quelle que soit la disposition du document. Cette propriété ne doit pas être utilisée afin de tourner l'image pour d'autres cas, si besoin, on pourra utiliser la propriété {{cssxref("transform")}} avec la fonction <code>rotate</code>.</p>
+
+<div class="warning">
+<p><strong>Attention !</strong> Cette propriété sera vraisemblablement dépréciée prochainement. Les fonctionnalités associées deviendront des propriétés de l'élément {{HTMLElement("img")}} et/ou de l'élément {{HTMLElement("picture")}} (excepté peut-être <code>from-image</code>).</p>
+</div>
+
+<pre class="brush:css no-line-numbers">/* Valeurs d'angle */
+/* Type &lt;angle&gt;    */
+image-orientation: 0deg;
+image-orientation: 6.4deg;     /* Arrondie à 0deg */
+image-orientation: -90deg;     /* Équivalent à 270deg, la
+                                  valeur calculée normalisée */
+
+/* Valeurs avec un mot-clé */
+image-orientation: from-image; /* Utilise les données EXIF
+                                  de l'image */
+image-orientation: flip;       /* Pas de rotation mais un
+                                  retournement horizontal */
+
+/* Valeurs avec deux arguments */
+image-orientation: 90deg flip; /* Rotation de 90deg, puis
+                                  retournement horizontal */
+
+/* Valeurs globales */
+image-orientation: inherit;
+image-orientation: initial;
+image-orientation: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>from-image</code></dt>
+ <dd>Les informations EXIF contenues dans l'image seront utilisées pour tourner l'image de façon appropriée.</dd>
+ <dt><code>&lt;angle&gt;</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;angle&gt;")}} qui indique la rotation à appliquer à l'image. Cette valeur est arrondie au quart de tour le plus proche.</dd>
+ <dt><code>flip</code></dt>
+ <dd>L'image est retournée horizontalement (comme une réflexion) après que la rotation d'angle indiqué par le premier paramètre ait été appliquée. Si aucun argument d'angle n'a été fourni, la valeur <code>0deg</code> sera utilisée.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+
+<p>Cette propriété n'est pas conçue pour appliquer une rotation arbitraire sur une image. Elle permet uniquement de corriger un orientation erronée. C'est pour cette raison que la valeur est arrondie au quart de tour le plus proche.</p>
+
+<p>De la même façon, cette propriété n'est pas conçue pour gérer le passage de paysage en portrait. <code>image-orientation</code> ne modifie que les images, il faudrait apporter les modifications au niveau de la disposition.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#image {
+  /* Peut-être modifiée dans l'exemple */
+  image-orientation: flip;
+}
+</pre>
+
+<div class="hidden">
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;img id="image" src="https://mdn.mozillademos.org/files/12668/MDN.svg"
+    alt="Orientation déterminée à partir de l'image"/&gt;
+&lt;select id="imageOrientation"&gt;
+  &lt;option value="from-image"&gt;from-image&lt;/option&gt;
+  &lt;option value="90deg"&gt;90deg&lt;/option&gt;
+  &lt;option value="flip" selected&gt;flip&lt;/option&gt;
+&lt;/select&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var imageOrientation = document.getElementById("imageOrientation");
+imageOrientation.addEventListener("change", function (evt) {
+  document.getElementById("image").style.imageOrientation = evt.target.value;
+});
+</pre>
+</div>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "100%", 240)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Images', '#image-orientation', 'image-orientation')}}</td>
+   <td>{{Spec2('CSS4 Images')}}</td>
+   <td>Ajout des mots-clés <code>from-image</code> et <code>flip</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Images', '#image-orientation', 'image-orientation')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.image-orientation")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("object-fit")}}</li>
+ <li>{{cssxref("object-position")}}</li>
+ <li>{{cssxref("image-orientation")}}</li>
+ <li>{{cssxref("image-rendering")}}</li>
+ <li>{{cssxref("image-resolution")}}</li>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("rotate")}}</li>
+</ul>
diff --git a/files/fr/web/css/image-rendering/index.html b/files/fr/web/css/image-rendering/index.html
new file mode 100644
index 0000000000..7b28a4c0b4
--- /dev/null
+++ b/files/fr/web/css/image-rendering/index.html
@@ -0,0 +1,127 @@
+---
+title: image-rendering
+slug: Web/CSS/Image-rendering
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/image-rendering
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>image-rendering</code></strong> fournit une indication au navigateur à propos de l'algorithme qui devrait être utilisé pour redimensionner les images. Elle s'applique à l'élément visé, aux images fournies via les autres propriétés CSS et aux éléments fils.</p>
+
+<p>L'agent utilisateur redimensionnera une image si l'auteur de la page indique des dimensions différentes que la taille naturelle de l'image ou si l'utilisateur interagit en zoomant par exemple. Cette propriété n'a aucun effet sur les images qui ne sont pas redimensionnées. Si, par exemple, la taille naturelle de l'image est <code>100px</code> par <code>100px</code> et que l'auteur indique les dimensions <code>200px</code> par <code>200px</code> (ou <code>50px</code> par <code>50px</code>), l'image sera agrandie (ou réduite) aux nouvelles dimensions via l'algorithme indiqué. Le redimensionnement peut aussi avoir lieu suite aux interactions utilisateurs (avec un zoom par exemple).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/*Valeurs avec un mot-clé*/
+image-rendering: auto;
+image-rendering: crisp-edges;
+image-rendering: pixelated;
+
+/* Valeurs globales */
+image-rendering: inherit;
+image-rendering: initial;
+image-rendering: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code><strong>auto</strong></code></dt>
+ <dd>L'image devrait être redimensionnée grâce à un algorithme qui optimise l'apparence de l'image. Les algorithmes de redimensionnement « doux » comme l'interpolation bilinéaire, sont acceptables. Ces algorithmes sont destinés à être utilisés sur des images comme des photos. Depuis la version 1.9 (Firefox 3.0), Gecko utilise un algorithme de rééchantillonnage bilinéaire.</dd>
+ <dt><code><strong>crisp-edges</strong></code></dt>
+ <dd>L'algorithme utilisé doit avant tout préserver le contraste et les bords de l'image, il ne doit pas ajouter de couleur intermédiaire ou de flou. Cette valeur est conçue pour être utilisée sur du <em>pixel art</em>. Les algorithmes éligibles sont par exemple l'interpolation au plus proche voisin, les familles d'algorithmes 2×SaI et <a href="https://en.wikipedia.org/wiki/Hqx">hqx</a>.</dd>
+ <dt><code>high-quality</code>{{Experimental_inline}}</dt>
+ <dd>Cette valeur est proche de <code>smooth</code> mais favorise un redimensionnement avec une qualité élevée. Si les ressources du système sont limitées, ce sont les images ciblées avec <code>high-quality</code> qui devraient être priorisées par rapport aux autres s'il est nécessaire de dégrader la qualité.</dd>
+ <dt><code><strong>pixelated</strong></code></dt>
+ <dd>Lorsque l'image est agrandie c'est l'algorithme « du plus proche voisin » qui doit être utilisé afin que l'image apparaisse comme composée de grands pixels. Lorsque l'image est réduite, le comportement est le même que <code>auto</code>.</dd>
+ <dt><code>smooth</code>{{Experimental_inline}}</dt>
+ <dd>L'algorithme utilisé pour le redimensionnement doit maximiser l'apparence de l'image. Les algorithmes qui adoucissent les couleurs (ex. l'interpolation bilinéaire) sont acceptables. Cette valeur est destinée aux images telles que les photos.</dd>
+</dl>
+
+<div class="note"><strong>Note :</strong> Les valeurs <code>optimizeQuality</code> et <code>optimizeSpeed</code> qui étaient présentes dans un brouillon de la spécification (et qui provenaient de la spécification équivalente pour SVG) sont synonymes respectifs de <code>smooth</code> et <code>pixelated</code>.</div>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.pixels_petits {
+  height: 50px;
+  width: 50px;
+}
+
+.pixels_grands {
+  height: 69px;
+  width: 69px;
+}
+
+.chapeau_petit {
+  height: 89px;
+  width: 89px;
+}
+.defaut {
+  image-rendering: auto;
+}
+
+.contraste {
+  image-rendering: crisp-edges;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Avec &lt;code&gt;auto&lt;/code&gt; :&lt;/p&gt;
+&lt;img class="pixels_petits defaut" alt="damier" src="https://mdn.mozillademos.org/files/2766/squares.gif"/&gt;
+&lt;img class="pixels_grands defaut" alt="damier" src="https://mdn.mozillademos.org/files/2766/squares.gif"/&gt;
+&lt;img class="chapeau_petit defaut" alt="chapeau" src="https://mdn.mozillademos.org/files/2767/hut.jpg"/&gt;
+
+&lt;p&gt;Avec &lt;code&gt;crisp-edges&lt;/code&gt; :&lt;/p&gt;
+&lt;img class="pixels_petits contraste" alt="damier" src="https://mdn.mozillademos.org/files/2766/squares.gif"/&gt;
+&lt;img class="pixels_grands contraste" alt="damier" src="https://mdn.mozillademos.org/files/2766/squares.gif"/&gt;
+&lt;img class="chapeau_petit contraste" alt="chapeau" src="https://mdn.mozillademos.org/files/2767/hut.jpg"/&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","100%")}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> En pratique, les règles <code>pixelated</code> et <code>crisp-edges</code> peuvent être combinées en cas de besoin (l'une pouvant combler les éventuelles manques de l'autre et <em>vice versa</em>). Si besoin, un {{HTMLElement("canvas")}} peut fournir <a href="http://phrogz.net/tmp/canvas_image_zoom.html">une alternative pour les valeurs <code>crisp-edge</code> et <code>optimize-contrast</code></a> via la manipulation manuelle des données de l'image ou avec <code><a href="/fr/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled">imageSmoothingEnabled</a></code>.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Images', '#the-image-rendering', 'image-rendering')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note :</strong> Cette valeur était, initialement, proche de la propriété SVG <code>image-rendering</code>. Cependant, ces valeurs ont « divergé » et sont assez différentes désormais.</p>
+</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.image-rendering")}}</p>
diff --git a/files/fr/web/css/image-set()/index.html b/files/fr/web/css/image-set()/index.html
new file mode 100644
index 0000000000..b54ea600c9
--- /dev/null
+++ b/files/fr/web/css/image-set()/index.html
@@ -0,0 +1,84 @@
+---
+title: image-set()
+slug: Web/CSS/image-set()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+translation_of: Web/CSS/image-set()
+---
+<p>{{CSSRef}}</p>
+
+<p class="summary">La fonction <code>image-set()</code> est une méthode permettant au navigateur de sélectionner l'image la plus appropriée parmi un ensemble d'images. Elle s'avère notamment utile pour les écrans à haute densité de pixels.</p>
+
+<p>La résolution et la bande passante varient selon l'appareil et l'accès au réseau dont on dispose. La fonction <code>image-set()</code> permet au navigateur de sélectionner l'image avec la résolution la mieux adaptée aux conditions de l'utilisateur. Cette fonction reçoit différentes options d'images qui sont chacune une image avec une déclaration de résolution. La résolution sera généralement couplée avec la taille du fichier associé. Ainsi, un agent utilisateur conscient que la bande passante est faible pourra privilégier une image à faible résolution plutôt que d'attendre longtemps le chargement d'une image à plus haute résolution.</p>
+
+<p>Cette fonction permet ainsi à l'auteur du document de fournir différentes options plutôt que de laisser l'utilisateur payer les conséquences.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">image-set() = image-set( &lt;image-set-option&gt;# )
+où &lt;image-set-option&gt; = [ &lt;image&gt; | &lt;string&gt; ] &lt;resolution&gt; et où
+      &lt;string&gt; est une valeur &lt;url&gt;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>La plupart du temps, la source d'une des images de l'ensemble sera indiquée via la fonction {{cssxref("url")}}.</p>
+
+<p>On notera qu'on ne peut pas imbriquer un appel à une fonction <code>image-set()</code> au sein d'un autre appel à <code>image-set()</code>.</p>
+
+<p>La valeur <code><a href="/fr/docs/Web/CSS/resolution">&lt;resolution&gt;</a></code> peut utiliser une unité <code>x</code> ou <code>dppx</code> (points par unité de pixel), <code>dpi</code> (points par pouce) ou <code>dpcm</code> (points par centimètre). Une résolution donnée ne peut être utilisée que pour une seule image au sein d'un appel à <code>image-set()</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css notranslate">background-image: image-set( "chat.png" 1x,
+                             "chat-2x.png" 2x,
+                             "chat-print.png" 600dpi);</pre>
+
+<p>Dans cet exemple, on utilise <code>image-set()</code> afin de fournir deux versions pour une image en arrière-plan. Le navigateur pourra choisir l'image avec la meilleure résolution si l'utilisateur dispose d'un appareil permettant de l'afficher correctement et si sa connexion est suffisamment rapide.</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Les navigateurs ne fournissent pas d'informations particulières aux outils d'assistance quant aux outils d'assistance. Ainsi, les lecteurs d'écran ne pourront pas annoncer d'informations utiles si l'image contient des informations essentielles à la compréhension de la page. Il faudra inclure une description sémantique sur l'image pour que tous les utilisateurs puissent en bénéficier.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">Comprendre les règles WCAG 1.1</a></li>
+ <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">Comprendre les critères de succès 1.1.1 WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Spécification</th>
+   <th>État</th>
+   <th>Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Images', '#image-set-notation', 'The image-set() notation')}}</td>
+   <td>{{Spec2('CSS4 Images')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.types.image.image-set")}}</p>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("image")}}</li>
+ <li>{{cssxref("_image", "image()")}}</li>
+ <li>{{cssxref("element")}}</li>
+ <li>{{cssxref("url")}}</li>
+ <li>{{cssxref("&lt;gradient&gt;")}}</li>
+ <li>{{cssxref("cross-fade")}}</li>
+</ul>
diff --git a/files/fr/web/css/image/index.html b/files/fr/web/css/image/index.html
new file mode 100644
index 0000000000..4da7dfe332
--- /dev/null
+++ b/files/fr/web/css/image/index.html
@@ -0,0 +1,189 @@
+---
+title: <image>
+slug: Web/CSS/image
+tags:
+  - CSS
+  - CSS Images
+  - Reference
+  - Type
+translation_of: Web/CSS/image
+---
+<div>{{CSSRef}}</div>
+
+<p>Le type de donnée CSS <strong><code>&lt;image&gt;</code></strong> représente une image en deux dimensions. Il existe deux types d'images en CSS : les images statiques (souvent utilisées via une URL (cf. {{cssxref("&lt;url&gt;")}})), et les images générées dynamiquement comme les dégradés (cf. {{cssxref("&lt;gradient&gt;")}}) ou les images construites à partir de fragments de l'arbre du DOM ({{CSSxRef("element")}}). D'autres fonctions peuvent être utilisées pour créer des images comme {{CSSxRef("imagefunction", "image()")}}, {{CSSxRef("image-set")}} et {{CSSxRef("cross-fade")}}.</p>
+
+<p>Les images peuvent être utilisées pour de nombreuses propriétés CSS dont, par exemple, {{cssxref("background-image")}}, {{cssxref("border-image")}}, {{cssxref("content")}}, {{cssxref("list-style-image")}} et {{cssxref("cursor")}}.</p>
+
+<h2 id="Les_types_d'images">Les types d'images</h2>
+
+<p>Le CSS permet de manipuler différentes sortes d'images :</p>
+
+<ul>
+ <li>les images avec des <em>dimensions intrinsèques</em>, qui ont une taille propre, comme une image au format JPEG ou PNG (ou dans un autre <a href="https://fr.wikipedia.org/wiki/Image_matricielle">format matriciel</a>) qui possède des dimensions fixes.</li>
+ <li>les images avec <em>plusieurs dimensions intrinsèques</em>, qui existent sous différentes dimensions dans un même fichier, comme certains formats .ico. Dans ce cas, les dimensions intrinsèques seront celles de la plus grande image en surface, et ayant le ratio le plus proche de la boîte englobante.</li>
+ <li>les images sans dimensions intrinsèques avec un <em>ratio intrinsèque</em>, entre la largeur et sa hauteur, comme certaines <a href="https://fr.wikipedia.org/wiki/Image_vectorielle">images vectorielles</a>, au format SVG par exemple.</li>
+ <li>les images n'ayant <em>ni dimensions intrinsèques, ni ratio intrisèque</em>, comme un dégradé CSS par exemple.</li>
+</ul>
+
+<p>Le CSS détermine la <em>taille concrète de l'objet</em> en utilisant ces <em>dimensions intrinsèques</em>, la <em>taille spécifiée</em> définie par les propriétés CSS comme {{cssxref("width")}}, {{cssxref("height")}} ou {{cssxref("background-size")}}, et la <em>taille par défaut de l'objet</em> définie en fonction de la propriété utilisée :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Type d'objet</th>
+   <th scope="col">Taille par défaut de l'objet</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{cssxref("background-image")}}</td>
+   <td>La taille de la zone de positionnement de l'arrière-plan</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("list-style-image")}}</td>
+   <td>La taille d'un caractère de <code>1em</code></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-image-source")}}</td>
+   <td>La taille de la zone de bordure de l'élément</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("cursor")}}</td>
+   <td>La dimension correspondant à la taille d'un curseur sur le système utilisé</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("mask-image")}}</td>
+   <td>?</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("shape-outside")}}</td>
+   <td>?</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("mask-border-source")}}</td>
+   <td>?</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("symbols")}} pour <code>@counter-style</code></td>
+   <td>Une fonctionnalité en cours de discussion. Si elle est prise en charge, la taille utilisée sera celle des curseurs utilisés par le système.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("content")}} avec les pseudo-éléments {{cssxref("::after")}} et {{cssxref("::before")}}</td>
+   <td>Un rectangle de <code>300px</code><code> × 150px</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>La taille concrète de l'objet est calculée selon l'algorithme suivant :</p>
+
+<ul>
+ <li>si la taille spécifié définit à la fois la largeur et la hauteur, ces valeurs sont utilisées comme la taille concrète de l'élément.</li>
+ <li>si la taille spécifiée définit soit la hauteur soit la largeur, la valeur manquante est déterminée grâce au ratio intrinsèque s'il existe ou les dimensions intrisèques si la valeur spécifiée y correspond ou la taille par défaut de l'objet pour la dimension manquante.</li>
+ <li>si la taille spécifiée ne définit ni hauteur ni largeur, la taille concrète de l'objet est calculée de manière à ce que le ratio intrinsèque soit conservé et que la taille par défaut de l'objet ne soit pas dépassée. Si l'image n'a pas de ratio intrinsèque, le ratio intrinsèque de l'objet auquel il s'applique est utilisé ; si l'objet n'en possède pas, la hauteur ou la largeur manquante est prise depuis la taille par défaut de l'objet.</li>
+</ul>
+
+<p>Les images peuvent être utilisées pour de nombreuses propriétés CSS comme {{cssxref("background-image")}}, {{cssxref("border-image")}}, {{cssxref("content")}}, {{cssxref("list-style-image")}} ou {{cssxref("cursor")}}.</p>
+
+<div class="note"><strong>Note :</strong> tous les navigateurs ne supportent pas n'importe quel type d'image sur n'importe quelle propriété. Voir la section <a href="/fr/docs/CSS/image#Compatibilit.C3.A9_des_navigateurs">compatibilité des navigateurs</a> pour une liste explicative.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Un type de donnée CSS <code>&lt;image&gt;</code> peut représenter un type parmi les suivants :</p>
+
+<ul>
+ <li>une image dénotée par le type de donnée CSS {{cssxref("&lt;url&gt;")}} et la fonction <code>url()</code> ;</li>
+ <li>une valeur CSS {{cssxref("&lt;gradient&gt;")}} (représentant un dégradé) ;</li>
+ <li>une partie de la page, définie par la fonction {{cssxref("element")}} ;</li>
+ <li>une image, un fragment d'image ou une couleur définie grâce à la fonction {{cssxref("image()")}} ;</li>
+ <li>une fusion de deux ou plusieurs images avec la fonction {{cssxref("cross-face")}}</li>
+ <li>une image choisie parmi un ensemble d'images (selon leurs résolutions, l'appareil et la connexion utilisés) grâce à la fonction {{cssxref("image-set()")}}.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Voici des exemples valides d'images :</p>
+
+<pre class="brush:css example-good">url(test.jpg)              /* La fonction url() fonctionne tant que test.jpg est bien une image */
+linear-gradient(blue, red) /* Un dégradé (&lt;gradient&gt;) */
+element(#colonne3)         /* Utilisation d'un élément de la page via la fonction element(),
+                              si colonne3 est bien un identifiant CSS existant. */
+image(ltr 'arrow.png#xywh=0,0,16,16', red)
+                           /* Une section de 16x16 pixels de l'image <code>arrow.png</code> et qui démarre au coin
+                              supérieur gauche de l'image et qui sera utilisée si arrow.png est à un
+                              format pris en charge. Sinon, ce sera un fond rouge qui sera utilisé.
+                              Si la langue est écrite de gauche à droite, l'image sera inversée
+                              horizontalement. */
+cross-fade(20% url(vingt.png), url(quatrevingt.png));
+                           /* Deux images superposées où « vingt » est 20%
+                              opaque et « quatrevingt » compose les 80%
+                              restants. */
+image-set('test.jpg' 1x, 'text-2x.jpg' 2x);
+                           /* Un ensemble d'images avec différentes résolutions. */
+</pre>
+
+<p>Voici des exemples invalides :</p>
+
+<pre class="brush:css example-bad">nourl.jpg            /* Le fichier de l'image doit être ciblé via la fonction url(). */
+url(report.pdf)      /* Le fichier référencé par la fonction url() doit être une image. */
+element(#fakeid)     /* Ne fonctionne pas si 'fakeid' n'est pas un identifiant existant. */
+image(z.jpg#xy=0,0)  /* L'indicateur de fragment doit avoir la forme xywh=#,#,#,# */
+image-set('chat.jpg' 1x, 'chien.jpg' 1x) /* Chaque image doit avoir une résolution différente */
+</pre>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Les navigateurs ne fournissent pas d'information aux outils d'assistance pour les images d'arrière-plan. Cela est particulièrement important pour les lecteurs d'écran car ces derniers ne pourront pas annoncer la présence de ces informations aux utilisateurs. Si l'image contient des informations critiques pour la compréhension générale de la page, mieux vaudra décrire ces informations de façon sémantique dans le document.</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">Comprendre la règle 1.1 du WCAG</a></li>
+ <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">Comprendre les critères pour 1.1.1, comprendre WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Images", "#typedef-image", "&lt;image&gt;")}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>Définition initiale. Avant <a href="/fr/docs/Web/CSS/CSS3">CSS3</a>, il n'existait pas de type défini de façon explicite pour les images. Celles-ci pouvaient uniquement être utilisées via la notation fonctionnelle <code>url()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS4 Images", "#typedef-image", "&lt;image&gt;")}}</td>
+   <td>{{Spec2('CSS4 Images')}}</td>
+   <td>Ajout de {{cssxref("element()")}}, {{cssxref("image()")}}, {{cssxref("image-set()")}}, {{cssxref("conic-gradient")}}, {{cssxref("repeating-conic-gradient", "repeating-conic-gradient()")}} et {{cssxref("image-resolution")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.types.image")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("&lt;gradient&gt;")}}
+  <ul>
+   <li><a href="/fr/docs/Web/Guide/CSS/Using_CSS_gradients">Manipuler les dégradés CSS</a></li>
+   <li>{{cssxref("linear-gradient","linear-gradient()")}}</li>
+   <li>{{cssxref("radial-gradient","radial-gradient()")}}</li>
+   <li>{{cssxref("repeating-linear-gradient","repeating-linear-gradient()")}}</li>
+   <li>{{cssxref("repeating-radial-gradient","repeating-radial-gradient()")}}</li>
+   <li>{{cssxref("conic-gradient")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("element")}}</li>
+ <li>{{CSSxRef("imagefunction", "image()")}}</li>
+ <li>{{cssxref("image-set()")}}</li>
+ <li>{{CSSxRef("cross-fade")}}</li>
+</ul>
diff --git a/files/fr/web/css/ime-mode/index.html b/files/fr/web/css/ime-mode/index.html
new file mode 100644
index 0000000000..0bae84381a
--- /dev/null
+++ b/files/fr/web/css/ime-mode/index.html
@@ -0,0 +1,100 @@
+---
+title: ime-mode
+slug: Web/CSS/ime-mode
+tags:
+  - CSS
+  - Obsolete
+  - Propriété
+  - Reference
+translation_of: Web/CSS/ime-mode
+---
+<div>{{CSSRef}}{{obsolete_header}}</div>
+
+<p>La propriété <strong><code>ime-mode</code></strong> contrôle l'état de l'éditeur de méthode d'entrée (IME) pour la saisie des champs textuels.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+ime-mode: auto;
+ime-mode: normal;
+ime-mode: active;
+ime-mode: inactive;
+ime-mode: disabled;
+
+/* Valeurs globales */
+ime-mode: inherit;
+ime-mode: initial;
+ime-mode: unset;
+</pre>
+
+<p>Selon la spécification :</p>
+
+<p>« <code>ime-mode</code> » est en quelques sortes une propriété implémentée par quelques navigateurs, qui pose problème et qui est officiellement rendue obsolète par cette spécification</p>
+
+<p>Aussi, la spécification indique aux agents utilisateurs de ne pas prendre en charge <code>ime-mode</code> et il est déconseillé d'utiliser cette propriété dans des feuilles de styles.</p>
+
+<p>La propriété <code>ime-mode</code> est partiellement implémentée et de façon hétérogène entre les différents navigateurs. Elle est apparue sous la forme d'une extension Microsoft avec Internet Explorer 5 : {{spec("http://msdn.microsoft.com/library/ms530767(VS.85).aspx","-ms-ime-mode Attribute | imeMode Property")}}.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Il n'est, en général, pas pertinent de modifier le mode IME d'un site. Cette propriété ne devrait être utilisée que pour des applications web privées ou pour annuler une modification de cette propriété par du code historique.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La valeur de cette propriété peut être l'un des mots-clés définis ci-après.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Aucun changement n'est apporté à l'état de l'éditeur. C'est la valeur par défaut.</dd>
+ <dt><code>normal</code></dt>
+ <dd>L'état de l'IME devrait être normal. Cette valeur peut être utilisée via une feuille de style utilisateur pour surcharger la valeur indiquée par le document. <em>Cette valeur n'est pas prise en charge par Internet Explorer.</em></dd>
+ <dt><code>active</code></dt>
+ <dd>L'éditeur de méthode d'entrée est actif au début et la saisie utilise l'éditeur sauf si l'utilisateur le ferme. <em>Cette valeur n'est pas prise en charge sur Linux.</em></dd>
+ <dt><code>inactive</code></dt>
+ <dd>L'éditeur de méthode d'entrée est inactif au début et l'utilisateur peut l'activer si besoin.<em> Cette valeur n'est pas prise en charge sur Linux.</em></dd>
+ <dt><code>disabled</code></dt>
+ <dd>L'éditeur de méthode d'entrée est désactivé et ne peut pas être activé par l'utilisateur.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: html">&lt;input type="text" name="name" value="initial value" style="ime-mode: disabled"&gt;</pre>
+
+<p>Cet exemple désactive l'IME pour un champ donné (par exemple pour saisir des données dans une base de données qui ne supporte pas certains jeux de caractères).</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#input-method-editor', 'ime-mode')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Définition initiale. Rend <code>ime-mode</code> obsolète.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.ime-mode")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La propriété Microsoft avec un suffixe propriétaire IE5 {{spec("http://msdn.microsoft.com/library/ms530767(VS.85).aspx","-ms-ime-mode Attribute | imeMode Property")}}</li>
+</ul>
diff --git a/files/fr/web/css/implémentation_des_brouillons_css/index.html b/files/fr/web/css/implémentation_des_brouillons_css/index.html
new file mode 100644
index 0000000000..5a7b19f747
--- /dev/null
+++ b/files/fr/web/css/implémentation_des_brouillons_css/index.html
@@ -0,0 +1,46 @@
+---
+title: Implémentation des fonctionnalités CSS à l'état de brouillon
+slug: Web/CSS/Implémentation_des_Brouillons_CSS
+tags:
+  - CSS
+  - Draft
+  - NeedsContent
+translation_of: Web/CSS/Mozilla_Extensions
+---
+<div>{{CSSRef}}{{Draft}}</div>
+
+<div class="warning">
+<p><strong>Attention !</strong> Cette page est incomplète et n'est pas à jour. Se référer aux pages suivantes pour plus d'informations :</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">Les extensions Microsoft à CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/Extensions_Mozilla">Les extensions Mozilla à CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/Reference/Extensions_WebKit">Les extensions WebKit à CSS</a></li>
+</ul>
+</div>
+
+<p>Mozilla gère un certain nombre d'extensions <a href="/fr/docs/Web/CSS" title="en/CSS">CSS</a> préfixées par<code> -moz-</code>. La liste suivante contient toutes les extensions Mozilla correspondant aux  implémentations de fonctionnalités en cours de standardisation par le W3C. Les fonctionnalités propriétaires ne sont pas présentes dans cette liste.</p>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<p>...</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>...</p>
+
+<h3 id="Pseudo-éléments_et_pseudo-classes">Pseudo-éléments et pseudo-classes</h3>
+
+<p>...</p>
+
+<h3 id="Règles_At">Règles At</h3>
+
+<p>...</p>
+
+<h3 id="Requêtes_de_média">Requêtes de média</h3>
+
+<p>...</p>
+
+<h3 id="Autres">Autres</h3>
+
+<p>...</p>
diff --git a/files/fr/web/css/index.html b/files/fr/web/css/index.html
new file mode 100644
index 0000000000..fedb551fe9
--- /dev/null
+++ b/files/fr/web/css/index.html
@@ -0,0 +1,104 @@
+---
+title: 'CSS : Feuilles de style en cascade'
+slug: Web/CSS
+tags:
+  - CSS
+  - Design
+  - Landing
+  - Reference
+  - Structure
+  - Styles
+translation_of: Web/CSS
+---
+<p>{{CSSRef}}</p>
+
+<div class="twocolumns">
+<div class="hidden">
+<div class="blockIndicator note">
+<p class="summary"><span class="seoSummary"><strong>Cascading Style Sheets</strong> (<strong>CSS</strong>) est un langage de feuille de style utilisé pour décrire la présentation d'un document écrit en <a href="/fr/docs/Web/HTML" title="HyperText Markup Language">HTML</a></span> ou en <a href="/fr/docs/Glossaire/XML">XML</a> (on inclut ici les langages basés sur XML comme <a href="/fr/docs/Web/SVG">SVG</a> ou {{Glossary("XHTML", "",1)}}). CSS décrit la façon dont les éléments doivent être affichés à l'écran, sur du papier, en vocalisation, ou sur d'autres supports.</p>
+</div>
+</div>
+</div>
+
+<p>CSS est l'un des langages principaux du <strong>Web ouvert</strong> et a été standardisé <a class="external" href="https://w3.org/Style/CSS/#specs">par le W3C</a>. Ce standard évolue sous forme de niveaux (<em>levels</em>), CSS1 est désormais considéré comme obsolète, CSS2.1 correspond à la recommandation et <a href="/fr/docs/Web/CSS/CSS3">CSS3</a>, qui est découpé en modules plus petits, est en voie de standardisation.</p>
+
+<section id="sect1">
+<ul class="card-grid">
+ <li><span>Introduction à CSS</span>
+
+  <p>Si vous débutez en développement web, n'hésitez pas à consulter l'article <a href="/fr/Apprendre/Commencer_avec_le_web/Les_bases_CSS">les bases de CSS</a> pour découvrir CSS, ce que c'est et comment l'utiliser.</p>
+ </li>
+ <li><span>Tutoriels CSS</span>
+  <p>Notre section <a href="/fr/Apprendre/CSS">Apprendre le Web - CSS</a> contient de nombreux tutoriels pour vous guider d'un niveau débutant à intermédiaire en CSS. Elle couvre l'ensemble des concepts fondamentaux en CSS.</p>
+ </li>
+ <li><span>La référence CSS</span>
+  <p><a href="/fr/docs/Web/CSS/Reference">Une référence exhaustive</a> destinée aux développeurs web expérimenté et qui décrit chaque propriété et concept de CSS.</p>
+ </li>
+</ul>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Tutoriels">Tutoriels</h2>
+
+<p>La section <a href="/fr/Apprendre/CSS">Apprendre le Web</a> fournit différents modules qui permettent d'apprendre CSS sans connaissance particulière préalable.</p>
+
+<dl>
+ <dt><a href="/fr/Apprendre/Commencer_avec_le_web/Les_bases_CSS">Introduction à CSS</a></dt>
+ <dd>Dans ce module, on commence avec les bases du fonctionnement de CSS : les sélecteurs, les propriétés, écrire des règles CSS, appliquer du CSS à un document HTML, utiliser des longueurs, des couleurs et d'autres unités. On voit également la cascade et l'héritage en CSS, les bases du modèle de boîtes et comment déboguer du code CSS.</dd>
+ <dt><a href="/fr/docs/Learn/CSS/Styling_text">Mettre en forme le texte</a></dt>
+ <dd>Dans ce chapitre, on voit comment mettre en forme du texte : changer la police, mettre en gras, mettre en italique, gérer les espaces entre les lignes et les lettres, ajouter des ombres portées, etc. En fin de chapitre, on voit comment appliquer des polices personnalisées sur une page et comment mettre en forme les listes et les liens.</dd>
+ <dt><a href="/fr/docs/Learn/CSS/Styling_boxes">Mettre en forme les boîtes</a></dt>
+ <dd>Ensuite, on voit comment mettre en forme les boîtes CSS qui sont un composant clé de la mise en page d'une page web. Dans ce module, on revoit le modèle de boîtes, comment régler les propriétés de remplissage, bordures et marges, comment définir des couleurs d'arrière-plan, des images et aussi comment appliquer des ombres et des filtres sur les boîtes.</dd>
+ <dt><a href="/fr/docs/Learn/CSS/CSS_layout">La disposition en CSS</a></dt>
+ <dd>Avant ce chapitre, on a vu les concepts fondamentaux en CSS, comment mettre en forme du texte, comment manipuler des boîtes correctement, etc. On voit ici comment correctement placer les boîtes dans la zone d'affichage (<em>viewport</em>). Grâce aux concepts précédents, on peut désormais étudier les différentes méthodes pour positionner les éléments sur une page : les boîtes flottantes, le positionnement fixe et les nouveaux outils comme les boîtes flexibles (<em>flexbox</em>).</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Tools" id="Références">Références</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/Reference">La référence CSS</a></dt>
+ <dd>Une référence exhaustive, destinée aux développeurs web expérimentés. Elle décrit les différentes propriétés et concepts qui composent CSS.</dd>
+ <dt>Les concepts majeurs de CSS</dt>
+ <dd>Plusieurs articles de cette section présentent les aspects clés du langage. On y décrit notamment :
+ <ul>
+  <li><a href="/fr/docs/Web/CSS/Syntaxe">la syntaxe et les formes du langage</a></li>
+  <li><a href="/fr/docs/Web/CSS/Spécificité">la spécificité</a> et <a href="/fr/docs/Web/CSS/Héritage">l'héritage</a></li>
+  <li><a href="/fr/docs/Web/CSS/Valeurs_et_unit%C3%A9s_CSS">les unités et valeurs CSS</a></li>
+  <li><a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">le modèle de boîtes</a> et <a href="/fr/docs/CSS/margin_collapsing">la fusion des marges</a></li>
+  <li><a href="/fr/docs/Web/CSS/All_About_The_Containing_Block">le bloc conteneur</a></li>
+  <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/L'empilement_de_couches">l'empilement</a> et <a href="/fr/docs/Web/CSS/Block_formatting_context">le contexte de formatage de blocs</a></li>
+  <li>les concepts de <a href="/fr/docs/Web/CSS/Valeur_initiale">valeur initiale</a>, <a href="/fr/docs/Web/CSS/Valeur_calculée">valeur calculée</a>, <a href="/fr/docs/Web/CSS/Valeur_utilisée">valeur utilisée</a> et <a href="/fr/docs/Web/CSS/valeur_reelle">valeur réelle</a></li>
+  <li><a href="/fr/docs/Web/CSS/Propriétés_raccourcies">Les propriétés raccourcies</a></li>
+  <li><a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS">Les boîtes flexibles CSS (<u><em>flexbox</em></u>)</a></li>
+  <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">La grille CSS</a></li>
+  <li><a href="/fr/docs/Web/CSS/Requêtes_média">Les <em>media queries</em> (requêtes media)</a></li>
+  <li><a href="/fr/docs/Web/CSS/animation">Les animations</a></li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 class="Tools" id="Livre_de_recettes">Livre de recettes</h2>
+
+<p><a href="/fr/docs/Web/CSS/Layout_cookbook">Le livre de recettes de disposition CSS</a> contient différentes recettes pour mettre en place différentes dispositions courantes. En plus de fournir du code pouvant servir de point de départ, ces recettes illustrent les différentes façons dont les spécifications CSS liées à la disposition peuvent être utilisées ainsi que les choix à faire en tant que développeur.</p>
+
+<h2 class="Tools" id="Outils_de_développement_pour_CSS">Outils de développement pour CSS</h2>
+
+<ul>
+ <li><a href="https://jigsaw.w3.org/css-validator/">Le service de validation CSS du W3C</a> permet de vérifier si une feuille de style CSS est valide.</li>
+ <li><a href="/fr/docs/Outils">Les outils de développement Firefox</a> permettent de visualiser, d'éditer une feuille de style en direct grâce à <a href="/fr/docs/Outils/Inspecteur">l'inspecteur</a> et à <a href="/fr/docs/Outils/Éditeur_de_style">l'éditeur de styles</a>.</li>
+ <li><a href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/">L'extension Web Developer</a> permet d'éditer le code CSS des sites visités à la volée.</li>
+ <li><a href="/fr/docs/Web/CSS/Tools">D'autres outils</a>, <a href="https://www.cssdebutant.com/">guide pour les débutants</a>.</li>
+</ul>
+</div>
+</div>
+</section>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/Apprendre/CSS">La partie CSS de la section Apprendre le Web.</a></li>
+ <li>Les langages web sur lesquels CSS est souvent utilisé : <a href="/fr/docs/Web/HTML">HTML</a>, <a href="/fr/docs/Web/SVG">SVG</a>, {{Glossary("XHTML", "",1)}} et <a href="/fr/docs/Glossaire/XML">XML</a>.</li>
+ <li>Des technologies Mozilla qui emploient CSS : <a href="/fr/docs/Mozilla/Firefox">Firefox</a>, <a href="/fr/docs/Mozilla/Add-ons/Thèmes">les thèmes</a> et <a href="/fr/docs/Mozilla/Thunderbird">extensions Thunderbird</a>.</li>
+</ul>
diff --git a/files/fr/web/css/index/index.html b/files/fr/web/css/index/index.html
new file mode 100644
index 0000000000..aa0bcd3253
--- /dev/null
+++ b/files/fr/web/css/index/index.html
@@ -0,0 +1,10 @@
+---
+title: Index de la documentation CSS
+slug: Web/CSS/Index
+tags:
+  - CSS
+  - Index
+  - MDN Meta
+translation_of: Web/CSS/Index
+---
+<p>{{Index("/fr/docs/Web/CSS")}}</p>
diff --git a/files/fr/web/css/inherit/index.html b/files/fr/web/css/inherit/index.html
new file mode 100644
index 0000000000..ee133c8016
--- /dev/null
+++ b/files/fr/web/css/inherit/index.html
@@ -0,0 +1,89 @@
+---
+title: inherit
+slug: Web/CSS/inherit
+tags:
+  - CSS
+  - Mot-clé
+  - Reference
+translation_of: Web/CSS/inherit
+---
+<div>{{CSSRef}}</div>
+
+<p>Le mot-clé <strong><code>inherit</code></strong> est une valeur qui peut être utilisée pour qu'une propriété prenne <a href="/fr/docs/Web/CSS/Valeur_calculée">la valeur calculée</a> de la propriété pour l'élément parent. Cette valeur peut être utilisée sur n'importe quelle propriété CSS, y compris sur la propriété raccourcie {{cssxref("all")}}.</p>
+
+<p>Pour <a href="/fr/docs/Web/CSS/Héritage#Propriétés_héritées" title="en/CSS/inheritance">les propriétés héritées</a>, cela accentue le comportement par défaut et ce mot-clé n'est nécessaire que pour surcharger une autre règle.</p>
+
+<p>Pour <a href="/fr/docs/Web/CSS/Héritage#Propriétés_non_héritées" title="en/CSS/inheritance">les propriétés non-héritées</a>, cela permettra d'obtenir le comportement indiqué. Ce comportement a peu d'intérêt dans ces cas et mieux vaudra utiliser {{cssxref("initial")}} ou {{cssxref("unset")}}.</p>
+
+<p>L'héritage provient toujours de l'élément parent par rapport à l'arbre du document, même si cet élément n'est pas le bloc englobant.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  color: green;
+}
+
+.exemple {
+  color: inherit;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Alice remarqua, avec quelque surprise, qu’en
+   tombant sur le plancher les cailloux se changeaient
+   en petits gâteaux, et une brillante idée lui
+   traversa l’esprit.&lt;/p&gt;
+&lt;p class="exemple"&gt;Elle avala un des gâteaux, et s’aperçut avec
+   joie qu’elle diminuait rapidement&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Spécification</th>
+   <th>État</th>
+   <th>Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Cascade', '#inherit', 'inherit')}}</td>
+   <td>{{Spec2('CSS4 Cascade')}}</td>
+   <td>Aucun changement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', "#common-keywords", "inherit")}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Aucun changement {{SpecName('CSS2.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', "cascade.html#value-def-inherit", "inherit")}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.types.global_keywords.inherit")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Héritage">L'héritage</a></li>
+ <li>La propriété {{cssxref("all")}}</li>
+ <li>Les propriétés globales {{cssxref("initial")}}, {{cssxref("unset")}} et {{cssxref("revert")}}.</li>
+ <li>La propriété {{cssxref("all")}} permet de réinitialiser l'ensemble des propriétés avec leurs valeurs initiales, héritées, annulées ou indéfinies.</li>
+</ul>
diff --git a/files/fr/web/css/initial-letter-align/index.html b/files/fr/web/css/initial-letter-align/index.html
new file mode 100644
index 0000000000..cdbe179beb
--- /dev/null
+++ b/files/fr/web/css/initial-letter-align/index.html
@@ -0,0 +1,104 @@
+---
+title: initial-letter-align
+slug: Web/CSS/initial-letter-align
+tags:
+  - Alignement
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/initial-letter-align
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>initial-letter-align</code></strong> définit l'alignement des premières lettres d'un paragraphe lorsque celles-ci sont mises en avant grâce à {{cssxref("initial-letter")}} pour former une lettrine.</p>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+initial-letter-align: auto;
+initial-letter-align: alphabetic;
+initial-letter-align: border-box;
+initial-letter-align: hanging;
+initial-letter-align: hebrew;
+initial-letter-align: ideographic;
+
+/* Valeurs globales */
+initial-letter-align: inherit;
+initial-letter-align: initial;
+initial-letter-align: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La valeur de cette propriété peut être l'un des mots-clés parmi ceux définis ci-après.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>L'agent utilisateur choisit la meilleure valeur par rapport à la langue du texte. Pour les langues occidentales, cela sera <code>alphabetic</code>, pour les langues hébraïques <code>hebrew</code>, pour les langues CJK <code>ideographic</code> et pour certaines langues indo-aryennes, cela correspondra à <code>hanging</code>.</dd>
+ <dt><code>alphabetic</code></dt>
+ <dd>La ligne de majuscule est alignée avec la ligne de majuscule de la première ligne de texte. La ligne de pied de la première lettre s'aligne avec la ligne de pied de la N-ième ligne.</dd>
+ <dt><code>border-box</code></dt>
+ <dd>C'est la boîte formée par la première lettre qui s'aligne avec la ligne de jambage de la première ligne de texte.</dd>
+ <dt><code>hanging</code></dt>
+ <dd>La ligne de jambage de la première lettre est alignée avec la ligne de jambage de la première ligne de texte.</dd>
+ <dt><code>hebrew</code></dt>
+ <dd>La ligne de jambage et la ligne de base alphabétique hébreuses du texte qui suit qui sont utilisées pour aligner la première lettre.</dd>
+ <dt><code>ideographic</code></dt>
+ <dd>La première lettre est centrée par rapport à la N-ième ligne utilisée pour la lettrine.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple {
+  initial-letter: 3 1;
+  initial-letter-align: hanging;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="exemple"&gt;
+  Tombe, tombe, tombe ! « Cette chute n’en finira
+  donc pas ! Je suis curieuse de savoir combien de
+  milles j’ai déjà faits, » dit-elle tout haut. « Je
+  dois être bien près du centre de la terre. Voyons
+  donc, cela serait à quatre mille milles de profondeur,
+  il me semble. » &lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","100%")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Inline', '#aligning-initial-letter', 'initial-letter-align')}}</td>
+   <td>{{Spec2('CSS3 Inline')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.initial-letter-align")}}</p>
diff --git a/files/fr/web/css/initial-letter/index.html b/files/fr/web/css/initial-letter/index.html
new file mode 100644
index 0000000000..016c320d49
--- /dev/null
+++ b/files/fr/web/css/initial-letter/index.html
@@ -0,0 +1,97 @@
+---
+title: initial-letter
+slug: Web/CSS/initial-letter
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/initial-letter
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>initial-letter</code></strong> permet de définir la mise en forme pour les lettrines (qu'elles soient abaissées, surélevées ou autre).</p>
+
+<pre class="brush: css  no-line-numbers">/* Valeurs avec un mot-clé */
+initial-letter: normal;
+
+/* Valeurs numériques            */
+/* Types &lt;number&gt; puis &lt;integer&gt; */
+initial-letter: 1.5;   /* La première lettre occupe 1.5 lignes */
+initial-letter: 3.0;   /* La première lettre occupe 3 lignes   */
+initial-letter: 3.0 2; /* La première lettre occupe 3 lignes et
+                          s'enfonce de deux lignes vers le bas */
+
+/* Valeurs globales */
+initial-letter: inherit;
+initial-letter: initial;
+initial-letter: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La valeur de cette propriété peut être le mot-clé <code>normal</code> ou un nombre (<code>&lt;number&gt;</code>) éventuellement suivi d'un entier (<code>&lt;integer&gt;</code>).</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Le texte se comporte de façon normale et on n'a pas de lettrines.</dd>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>Cet argument définit le facteur de taille appliqué pour calculer la taille de la première lettre par rapport à la taille de la ligne du texte. Les valeurs négatives ne sont pas autorisées.</dd>
+ <dt><code>&lt;integer&gt;</code></dt>
+ <dd>Cet argument définit le nombre de lignes dont s'enfoncera la lettrine vers le bas. La valeur utilisée doit être supérieure à 0. Si cet argument est absent, on dupliquera la valeur du premier argument, arrondi vers le bas à l'entier positif le plus proche.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple {
+  -webkit-initial-letter: 3.0 2;
+  initial-letter: 3.0 2;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="exemple"&gt;
+  Un grand rosier se trouvait à l’entrée du jardin ;
+  les roses qu’il portait étaient blanches, mais trois
+  jardiniers étaient en train de les peindre en rouge.
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Inline', '#sizing-drop-initials', 'initial-letter')}}</td>
+   <td>{{Spec2('CSS3 Inline')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une <em>pull request</em> sur ce dépôt: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("css.properties.initial-letter")}}</p>
diff --git a/files/fr/web/css/initial/index.html b/files/fr/web/css/initial/index.html
new file mode 100644
index 0000000000..f4a7d0e3e6
--- /dev/null
+++ b/files/fr/web/css/initial/index.html
@@ -0,0 +1,90 @@
+---
+title: initial
+slug: Web/CSS/initial
+tags:
+  - CSS
+  - Cascade
+  - Mot-clé
+  - Reference
+translation_of: Web/CSS/initial
+---
+<div>{{CSSRef}}</div>
+
+<p>Le mot-clé <strong><code>initial</code></strong> applique la valeur initiale d'une propriété à un élément. La valeur initiale est fournie par le navigateur et peut être utilisée pour chaque propriété CSS. Cette propriété prendra alors <a href="/fr/docs/Web/CSS/Valeur_initiale">la valeur initiale</a> spécifiée pour cette la propriété.</p>
+
+<p>La propriété {{cssxref("all")}} peut être utilisée avec cette valeur afin de réinitialiser l'ensemble des propriétés CSS.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Pour <a href="/fr/docs/Web/CSS/Héritage#Propriétés_héritées">les propriétés héritées</a>, la valeur initiale peut donner des résultats étranges et mieux vaudra utiliser les mots-clés {{cssxref("inherit")}}, {{cssxref("unset")}} ou {{cssxref("revert")}}. Attention également à ne pas confondre la valeur initiale avec la valeur décrite dans la feuille de style portée par le navigateur.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* On écrit le texte en rouge */
+.exemple {
+  color: red;
+}
+
+/* Et on veut que le texte mis en avant
+   prenne la valeur initiale de
+   color */
+.exemple em {
+  color: initial;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html"> &lt;p class="exemple"&gt;
+    Texte rouge
+       &lt;em&gt;
+          ce texte est avec la couleur initiale (noire)
+       &lt;/em&gt;
+    ce texte est rouge aussi
+ &lt;/p&gt; </pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Cascade', '#initial', 'initial')}}</td>
+   <td>{{Spec2('CSS4 Cascade')}}</td>
+   <td>Aucun changement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Cascade', '#initial', 'initial')}}</td>
+   <td>{{Spec2('CSS3 Cascade')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.types.global_keywords.initial")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Valeur_initiale">La notion de valeur initiale</a></li>
+ <li>{{cssxref("inherit")}}</li>
+ <li>{{cssxref("unset")}}</li>
+ <li>{{cssxref("revert")}}</li>
+ <li>{{cssxref("all")}}</li>
+</ul>
diff --git a/files/fr/web/css/inline-size/index.html b/files/fr/web/css/inline-size/index.html
new file mode 100644
index 0000000000..92610bd499
--- /dev/null
+++ b/files/fr/web/css/inline-size/index.html
@@ -0,0 +1,112 @@
+---
+title: inline-size
+slug: Web/CSS/inline-size
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/inline-size
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>inline-size</code></strong> définit la taille verticale ou horizontale d'un élément de bloc selon son mode d'écriture. Selon la valeur de {{cssxref("writing-mode")}}, cette propriété correspond à {{cssxref("width")}} quand le mode d'écriture n'est pas vertical ou à {{cssxref("height")}} sinon.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/inline-size.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cette propriété est à rapprocher de {{cssxref("block-size")}} qui définit l'autre dimension de l'élément.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+inline-size: 300px;
+inline-size: 25em;
+
+/* Valeurs proportionnelles relatives */
+/* Type &lt;percentage&gt;                  */
+inline-size: 75%;
+
+/* Valeurs avec un mot-clé */
+inline-size: 25em border-box;
+inline-size: 75% content-box;
+inline-size: max-content;
+inline-size: min-content;
+inline-size: available;
+inline-size: fit-content;
+inline-size: auto;
+
+/* Valeurs globales */
+inline-size: inherit;
+inline-size: initial;
+inline-size: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>La propriété <code>inline-size</code> peut prendre les mêmes valeurs que les propriétés {{cssxref("width")}} et {{cssxref("height")}}.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple {
+  writing-mode: vertical-rl;
+  background-color: yellow;
+  inline-size: 110px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#logical-dimension-properties", "inline-size")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.inline-size")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes :
+  <ul>
+   <li>{{cssxref("width")}}</li>
+   <li>{{cssxref("height")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("writing-mode")}}</li>
+</ul>
diff --git a/files/fr/web/css/inset-block/index.html b/files/fr/web/css/inset-block/index.html
new file mode 100644
index 0000000000..7ef04b2736
--- /dev/null
+++ b/files/fr/web/css/inset-block/index.html
@@ -0,0 +1,108 @@
+---
+title: inset-block
+slug: Web/CSS/inset-block
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/inset-block
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>inset-block</code></strong> définit le décalage d'un élément par rapport au début et à la fin de l'axe de bloc de l'élément. Cette propriété logique correspond à une propriété physique donnée selon le mode d'écriture de l'élément, sa direction et l'orientation de son texte. Autrement dit, cette propriété peut correspondre à {{cssxref("top")}} et {{cssxref("bottom")}} ou à {{cssxref("right")}} et {{cssxref("left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+inset-block: 3px 10px;
+inset-block: 2.4em 3em;
+inset-block: 10px; /* La valeur est appliquée des deux côtés */
+
+/* Les valeurs en pourcentage sont relatives à la */
+/* largeur ou à la hauteur du bloc englobant */
+/* Type &lt;percentage&gt; */
+inset-block: 10% 5%;
+
+/* Valeur avec un mot-clé */
+inset-block: auto;
+
+/* Valeurs globales */
+inset-block: inherit;
+inset-block: initial;
+inset-block: unset;
+</pre>
+
+<p>Pour gérer les décalages sur la dimension orthogonale, on pourra utiliser la propriété logique {{cssxref("inset-inline")}} qui est une propriété raccourcie pour {{cssxref("inset-inline-start")}}, and {{cssxref("inset-inline-end")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>La propriété <code>inset-block</code> peut prendre les mêmes valeurs que la propriété {{cssxref("left")}}.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.texteExemple {
+  writing-mode: vertical-lr;
+  position: relative;
+  inset-block: 20px 50px;
+  background-color: #c8c800;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="texteExemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Exemples_2">Exemples</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-inset-block", "inset-block")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.inset-block")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes : {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, and {{cssxref("left")}}</li>
+ <li>Les propriétés influençant les propriétés logiques {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/inset-inline/index.html b/files/fr/web/css/inset-inline/index.html
new file mode 100644
index 0000000000..7a6f06fbf0
--- /dev/null
+++ b/files/fr/web/css/inset-inline/index.html
@@ -0,0 +1,108 @@
+---
+title: inset-inline
+slug: Web/CSS/inset-inline
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/inset-inline
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>inset-inline</code></strong> définit le décalage d'un élément par rapport au début et à la fin de l'axe en ligne de l'élément. Cette propriété logique correspond à une propriété physique donnée selon le mode d'écriture de l'élément, sa direction et l'orientation de son texte. Autrement dit, cette propriété peut correspondre à {{cssxref("top")}} et {{cssxref("bottom")}} ou à {{cssxref("right")}} et {{cssxref("left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+inset-inline: 3px 10px;
+inset-inline: 2.4em 3em;
+inset-inline: 10px; /* La valeur est appliquée des deux côtés */
+
+/* Les valeurs en pourcentage sont relatives à la */
+/* largeur ou à la hauteur du bloc englobant */
+/* Type &lt;percentage&gt; */
+inset-inline: 10% 5%;
+
+/* Valeur avec un mot-clé */
+inset-inline: auto;
+
+/* Valeurs globales */
+inset-inline: inherit;
+inset-inline: initial;
+inset-inline: unset;
+</pre>
+
+<p>Pour gérer les décalages sur la dimension orthogonale, on pourra utiliser la propriété logique {{cssxref("inset-block")}} qui est une propriété raccourcie pour {{cssxref("inset-block-start")}}, and {{cssxref("inset-block-end")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>La propriété <code>inset-inline</code> peut prendre les mêmes valeurs que la propriété {{cssxref("left")}}.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.texteExemple {
+  writing-mode: vertical-lr;
+  position: relative;
+  inset-inline: 20px 50px;
+  background-color: #c8c800;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="texteExemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Exemples_2">Exemples</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-inset-inline", "inset-inline")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.inset-inline")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes : {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, and {{cssxref("left")}}</li>
+ <li>Les propriétés influençant les propriétés logiques {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/inset/index.html b/files/fr/web/css/inset/index.html
new file mode 100644
index 0000000000..bf91e20df5
--- /dev/null
+++ b/files/fr/web/css/inset/index.html
@@ -0,0 +1,115 @@
+---
+title: inset
+slug: Web/CSS/inset
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/inset
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>inset</code></strong> définit les décalages physiques d'un élément. Bien qu'elle fasse partie de la spécification sur les propriétés logiques, sa valeur ne dépend pas du mode d'écriture de l'élément, de sa direction ou de l'orientation du texte. La syntaxe de cette propriété suit la même structure que {{cssxref("margin")}}, <code>inset</code> est une propriété raccourcie permettant de définir les propriétés {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} et/ou {{cssxref("left")}}.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueurs */
+/* Type &lt;length&gt; */
+inset: 10px; /* la valeur est appliquée à l'ensemble des côtés */
+inset: 4px 8px; /* haut/bas gauche/droit */
+inset: 5px 15px 10px; /* haut gauche/droit bas */
+inset: 2.4em 3em 3em 3em; /* haut droit bas gauche */
+
+/* pourcentages de la largeur/hauteur du bloc englobant */
+inset: 10% 5% 5% 5%;
+
+/* Valeur avec un mot-clé */
+inset: auto;
+
+/* Valeurs globales */
+inset: inherit;
+inset: initial;
+inset: unset;
+
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>La propriété <code>inset</code> prend les mêmes valeurs que la propriété {{cssxref("left")}}.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 150px;
+  height: 120px;
+  position: relative;
+}
+
+.texteExemple {
+  writing-mode: vertical-lr;
+  position: absolute;
+  inset: 20px 40px 30px 10px;
+  background-color: #c8c800;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;span class="texteExemple"&gt;Texte d'exemple&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-inset", "inset")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.inset")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La propriété raccourcie physique {{cssxref("margin")}}</li>
+ <li>Les propriétés physiques détaillées :
+  <ul>
+   <li>{{cssxref("top")}},</li>
+   <li>{{cssxref("right")}},</li>
+   <li>{{cssxref("bottom")}},</li>
+   <li>{{cssxref("left")}}</li>
+  </ul>
+ </li>
+ <li>Les propriétés utilisées pour les autres propriétés logiques {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/integer/index.html b/files/fr/web/css/integer/index.html
new file mode 100644
index 0000000000..96501b4ca6
--- /dev/null
+++ b/files/fr/web/css/integer/index.html
@@ -0,0 +1,93 @@
+---
+title: <integer>
+slug: Web/CSS/integer
+tags:
+  - CSS
+  - Reference
+  - Type
+translation_of: Web/CSS/integer
+---
+<div>{{CSSRef}}</div>
+
+<p>Le type de donnée CSS <strong><code>&lt;integer&gt;</code></strong> permet de représenter des nombres entiers positifs ou négatifs. Aucune unité n'est liée à la valeur. Les entiers sont utilisés dans de nombreuses propriétés CSS comme {{cssxref("z-index")}}, {{cssxref("line-height")}}, {{cssxref("counter-increment")}}, {{cssxref("column-count")}}, {{cssxref("grid-row")}}, {{cssxref("repeat")}}. Ce type est un sous-type de {{cssxref("number")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Un entier se compose d'un ou de plusieurs chiffres, de 0 à 9, éventuellement précédés par un seul signe <code>+</code> ou <code>-</code>. Il n'y a pas d'unité pour ce type de donnée.</p>
+
+<p>Toutes les valeurs de type <code>&lt;integer&gt;</code> sont également des valeurs de type {{cssxref("&lt;number&gt;")}}, bien que l'inverse ne soit pas vrai.</p>
+
+<div class="note"><strong>Note : </strong>Il n'y a pas de bornes à l'ensemble des valeurs de type <code>&lt;entier&gt;</code> valides. Opera supporte des valeurs jusqu'à 2<sup>15</sup>-1, IE jusqu'à 2<sup>20</sup>-1 et d'autres navigateurs des valeurs encore plus hautes. Durant le cycle CSS3 Values, il y a eu de nombreuses discussions pour définir une valeur minimale à supporter : la dernière décision, en date d'avril 2012 pendant la phase LC, était [-2<sup>27</sup>-1; 2<sup>27</sup>-1] <a href="https://lists.w3.org/Archives/Public/www-style/2012Apr/0633.html">#</a> mais d'autres valeurs comme 2<sup>24</sup>-1 et 2<sup>30</sup>-1 ont aussi été proposées <a href="https://lists.w3.org/Archives/Public/www-style/2012Apr/0530.html">#</a> <a href="https://lists.w3.org/Archives/Public/www-style/2012Apr/0530.html">#</a>. Le dernier brouillon ne fait plus apparaître de limite.</div>
+
+<h2 id="Interpolation">Interpolation</h2>
+
+<p>Les valeurs du type <code>&lt;entier&gt;</code> peuvent être interpolées de manière à rendre les animations possibles. Dans ce cas l'interpolation se fait par incrémentation discrète. Le calcul est réalisé comme si les valeurs étaient des nombres réels, en virgule flottante et la valeur discrète est obtenue en utilisant la fonction <a class="external" href="https://fr.wikipedia.org/wiki/Partie_enti%C3%A8re_et_partie_fractionnaire#Fonction_partie_enti.C3.A8re">partie entière</a>. La rapidité de l'interpolation est déterminée par la {{cssxref("timing-function","fonction de temporisation")}} associée à l'animation.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Ces valeurs sont des entiers valides :</p>
+
+<pre class="brush: css">12          Entier positif (sans le signe + à l'avant)
++123        Entier positif (avec le signe + à l'avant)
+-456        Entier négatif
+0           Zéro
++0          Zéro, avec un signe + à l'avant
+-0          Zéro, avec un signe - à l'avant (bien qu'étrange, cette valeur est acceptée)
+</pre>
+
+<p>Ces valeurs sont des entiers non valides :</p>
+
+<pre class="brush: css example-bad">12.0        Ceci est un {{cssxref("&lt;number&gt;")}}, pas un &lt;entier&gt;, bien qu'il représente un entier
+12.         Le point ne peut pas faire partie d'un &lt;entier&gt;
++---12      Un seul +/- à l'avant est accepté
+ten         Les lettres ne sont pas acceptées
+_5          Les caractères spéciaux ne sont pas acceptés
+\35         Les caractères Unicode échappés ne sont pas acceptés, même s'ils sont un entier (ici : 5)
+\4E94       Les chiffres non-arabes ne sont pas acceptés, même échappés (ici : le 5 japonais, 五)
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Values', '#integers', '&lt;integer&gt;')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td>Aucune modification significative.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#integers', '&lt;integer&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Aucune modification depuis la spécification CSS de niveau 2 (première révision)</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'syndata.html#numbers', '&lt;integer&gt;')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition implicite.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '', '&lt;integer&gt;')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition implicite.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une <em>pull request</em> sur ce dépôt: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("css.types.integer")}}</p>
+
+<h2 id="Voir_aussi"> Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("&lt;number&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/isolation/index.html b/files/fr/web/css/isolation/index.html
new file mode 100644
index 0000000000..f307209c1d
--- /dev/null
+++ b/files/fr/web/css/isolation/index.html
@@ -0,0 +1,122 @@
+---
+title: isolation
+slug: Web/CSS/isolation
+tags:
+  - CSS
+  - Composition
+  - Propriété
+  - Reference
+translation_of: Web/CSS/isolation
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>isolation</code></strong> indique que l'élément crée un nouveau contexte d'empilement (<em>stacking context</em>).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/isolation.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cette propriété s'avère particulièrement utile avec {{cssxref("mix-blend-mode")}} afin de ne mélanger que l'arrière plan d'un contexte d'empilement particulier.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec mots-clés */
+isolation: auto;
+isolation: isolate;
+
+/* Valeurs globales */
+isolation: inherit;
+isolation: initial;
+isolation: unset;
+</pre>
+
+<p>La propriété <code>isolation</code> est définie avec l'un des mots-clés suivants.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Un mot-clé qui indique qu'un nouveau contexte d'empilement doit être créé uniquement si une propriété appliquée à l'élément le rend nécessaire.</dd>
+ <dt><code>isolate</code></dt>
+ <dd>Un mot-clé qui indique qu'un nouveau contexte d'empilement doit être créé.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.a {
+  background-color: rgb(0,255,0);
+}
+#b {
+  width: 200px;
+  height: 210px;
+}
+.c {
+  width: 100px;
+  height: 100px;
+  border: 1px solid black;
+  padding: 2px;
+  mix-blend-mode: difference;
+}
+#d {
+  isolation: auto;
+}
+#e {
+  isolation: isolate;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="b" class="a"&gt;
+  &lt;div id="d"&gt;
+    &lt;div class="a c"&gt;auto&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div id="e"&gt;
+    &lt;div class="a c"&gt;isolate&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', 230, 230)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Compositing', '#isolation', 'Isolation')}}</td>
+   <td>{{Spec2('Compositing')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.isolation")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("&lt;blend-mode&gt;")}}</li>
+ <li>{{cssxref("mix-blend-mode")}}</li>
+ <li>{{cssxref("background-blend-mode")}}</li>
+</ul>
diff --git a/files/fr/web/css/jeux_de_caractères_css/index.html b/files/fr/web/css/jeux_de_caractères_css/index.html
new file mode 100644
index 0000000000..a7c76a2c4e
--- /dev/null
+++ b/files/fr/web/css/jeux_de_caractères_css/index.html
@@ -0,0 +1,50 @@
+---
+title: Jeux de caractères CSS
+slug: Web/CSS/Jeux_de_caractères_CSS
+tags:
+  - Aperçu
+  - CSS
+  - CSS Charsets
+  - Reference
+translation_of: Web/CSS/CSS_Charsets
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>Les jeux de caractères pour CSS</strong> est un module CSS qui permet de définir le jeu de caractères utilisé dans les feuilles de style.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Règles">Règles @</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("@charset")}}</li>
+</ul>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'syndata.html#x57', '@charset')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<h3 id="Règle-_charset">Règle-@ <code>@charset</code></h3>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.charset")}}</p>
diff --git a/files/fr/web/css/justify-content/index.html b/files/fr/web/css/justify-content/index.html
new file mode 100644
index 0000000000..02d22d44ee
--- /dev/null
+++ b/files/fr/web/css/justify-content/index.html
@@ -0,0 +1,208 @@
+---
+title: justify-content
+slug: Web/CSS/justify-content
+tags:
+  - CSS
+  - Propriété
+  - Reference
+  - flexbox
+translation_of: Web/CSS/justify-content
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>justify-content</code></strong> indique la façon dont l'espace doit être réparti entre et autour des éléments selon <a href="/fr/docs/Web/CSS/CSS_Box_Alignment#Concepts_majeurs_et_terminologie">l'axe principal</a> d'un conteneur flexible ou selon l'axe en ligne lorsque le conteneur est une grille.</p>
+
+<p>L'exemple suivant illustre le fonctionnement des valeurs de cette propriété au sein d'une grille CSS.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/justify-content.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>L'alignement est appliqué après que les longueurs et les marges automatiques ont été appliquées. Dans une disposition utilisant les boîtes flexibles, cela signifie que s'il existe au moins un élément flexible pour lequel {{cssxref("flex-grow")}} est différent de <code>0</code>, <code>justify-content</code> n'aura aucun effet car il n'y aura plus d'espace disponible.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* Alignement « géométrique » */
+justify-content: center;     /* Éléments groupés au centre */
+justify-content: start;      /* Éléments groupés au début */
+justify-content: end;        /* Éléments groupés à la fin */
+justify-content: flex-start; /* Éléments flexibles groupés au début */
+justify-content: flex-end;   /* Éléments flexibles groupés à la fin */
+justify-content: left;       /* Éléments groupés à gauche */
+justify-content: right;      /* Éléments groupés à droite */
+
+/* Alignement par rapport à la ligne de base */
+/* justify-content ne prend pas de valeurs relatives à la ligne de base */
+
+/* Alignement normal */
+justify-content: normal;
+
+/* Alignement distribué */
+justify-content: space-between; /* Les éléments sont répartis équitablement
+                                   Le bord du premier est aligné sur le
+                                   début du conteneur et la fin du dernier
+                                   est alignée sur la fin du conteneur */
+justify-content: space-around;  /* Les éléments sont répartis équitablement
+                                   À chaque extrémité, entre le bord du
+                                   conteneur et le premier/dernier élément
+                                   on a la moitié de l'espace appliqué entre
+                                   chaque élément */
+justify-content: space-evenly;  /* Les éléments sont répartis équitablement
+                                   Tous les éléments sont séparés par le même
+                                   espace */
+justify-content: stretch;       /* Les éléments sont répartis équitablement et
+                                   les éléments dimensionnés avec 'auto' sont
+                                   étirés afin de remplir le conteneur */
+
+/* Alignement pour le dépassement */
+justify-content: safe center;
+justify-content: unsafe center;
+
+/* Valeurs globales */
+justify-content: inherit;
+justify-content: initial;
+justify-content: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>start</code></dt>
+ <dd>Les éléments sont regroupés au début du conteneur selon l'axe principal. Le bord du premier élément est aligné avec le bord du conteneur.</dd>
+ <dt><code>end</code></dt>
+ <dd>Les éléments sont regroupés à la fin du conteneur selon l'axe principal. Le bord du dernier élément est aligné avec le bord du conteneur.</dd>
+ <dt><code>flex-start</code></dt>
+ <dd>Les éléments sont regroupés vers le début du conteneur, selon l'axe principal et le sens du conteneur flexible.<br>
+ Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne sont pas dans un conteneur flexible, cette valeur est synonyme de <code>start</code>.</dd>
+ <dt><code>flex-end</code></dt>
+ <dd>Les éléments sont regroupés vers la fin du conteneur, selon l'axe principal et le sens du conteneur flexible.<br>
+ Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne sont pas dans un conteneur flexible, cette valeur est synonyme de <code>end</code>.</dd>
+ <dt><code>center</code></dt>
+ <dd>Les éléments sont regroupés au centre du conteneur selon l'axe principal.</dd>
+ <dt><code>left</code></dt>
+ <dd>Les éléments sont regroupés vers le bord gauche du conteneur. Si l'axe n'est pas parallèle à l'axe en ligne, cette valeur est synonyme de <code>start</code>.</dd>
+ <dt><code>right</code></dt>
+ <dd>Les éléments sont regroupés vers le bord droit du conteneur. Si l'axe n'est pas parallèle à l'axe en ligne, cette valeur est synonyme de <code>start</code>.</dd>
+ <dt><code>normal</code></dt>
+ <dd>Les éléments sont groupés sur leur position par défaut, comme si <code>justify-content</code> n'avait pas été utilisé. Cette valeur se comporte comme <code>stretch</code> dans les conteneurs de grille et les conteneurs flexibles.</dd>
+ <dt><code>space-between</code></dt>
+ <dd>Les éléments ont espacés équitablement selon l'axe principal. L'espace utilisé entre chaque élément est le même. Le premier élément est aligné sur le bord du conteneur et le dernier élément est aussi aligné sur le bord de l'élément.</dd>
+ <dt><code>space-around</code></dt>
+ <dd>Les éléments ont espacés équitablement selon l'axe principal. L'espace utilisé entre chaque élément est le même. L'espace entre le bord du conteneur et le premier élément et l'espace entre le dernier élément et le bord du conteneur représente la moitié de l'espace entre deux éléments.</dd>
+ <dt><code>space-evenly</code></dt>
+ <dd>Les éléments sont espacés équitablement. L'espace utilisé entre chaque élément, entre le bord du conteneur et le premier élément, et entre le dernier élément et le bord du conteneur est le même.</dd>
+ <dt><code>stretch</code></dt>
+ <dd>Si la somme des tailles des éléments sur l'axe principal est inférieure à la taille du conteneur, tous les éléments dimensionnés avec <code>auto</code> sont agrandis avec le même supplément, tout en respectant les contraintes imposées par {{cssxref("max-height")}}/{{cssxref("max-width")}} (ou par les fonctionnalités analogues). Ainsi, l'ensemble des éléments remplit exactement le conteneur sur l'axe principal.<br>
+ La valeur <code>stretch</code> n'est pas prise en charge pour les boîtes flexibles (<em>flexbox</em>)</dd>
+ <dt><code>safe</code></dt>
+ <dd>Cette valeur doit être utilisée avec un mot-clé pour l'alignement. Si le mot-clé choisi indique que le dépassement de l'objet entraîne la perte de donnée, alors l'élément sera plutôt aligné avec la valeur <code>start</code>.</dd>
+ <dt><code>unsafe</code></dt>
+ <dd>Cette valeur doit être utilisée avec un mot-clé pour l'alignement. Quelle que soit la situation de dépassement ou les contraintes de taille, la valeur utilisée pour l'alignement est respectée.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">#container {
+  display: flex;
+  /* Cette valeur peut être changée dans l'exemple */
+  justify-content: space-between;
+}
+
+#container &gt; div {
+  width: 100px;
+  height: 100px;
+  background: linear-gradient(-45deg, #788cff, #b4c8ff);
+}
+</pre>
+
+<div class="hidden">
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div id="container"&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;select id="justifyContent"&gt;
+  &lt;option value="start"&gt;start&lt;/option&gt;
+  &lt;option value="end"&gt;end&lt;/option&gt;
+  &lt;option value="flex-start"&gt;flex-start&lt;/option&gt;
+  &lt;option value="flex-end"&gt;flex-end&lt;/option&gt;
+  &lt;option value="center"&gt;center&lt;/option&gt;
+  &lt;option value="left"&gt;left&lt;/option&gt;
+  &lt;option value="right"&gt;right&lt;/option&gt;
+  &lt;option value="baseline"&gt;baseline&lt;/option&gt;
+  &lt;option value="first baseline"&gt;first baseline&lt;/option&gt;
+  &lt;option value="last baseline"&gt;last baseline&lt;/option&gt;
+  &lt;option value="space-between" selected&gt;space-between&lt;/option&gt;
+  &lt;option value="space-around"&gt;space-around&lt;/option&gt;
+  &lt;option value="space-evenly"&gt;space-evenly&lt;/option&gt;
+  &lt;option value="stretch"&gt;stretch&lt;/option&gt;
+&lt;/select&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">var justifyContent = document.getElementById("justifyContent");
+justifyContent.addEventListener("change", function (evt) {
+  document.getElementById("container").style.justifyContent =
+      evt.target.value;
+});
+</pre>
+</div>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "100%", 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Spécification</th>
+   <th>État</th>
+   <th>Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#propdef-justify-content', 'justify-content')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Box Alignment', '#propdef-justify-content', 'justify-content')}}</td>
+   <td>{{Spec2('CSS3 Box Alignment')}}</td>
+   <td>Ajout des valeurs <code>space-evenly, [ first | last ]? baseline</code>, <code>start</code>, <code>end</code>, <code>left</code>, <code>right</code>, <code>safe</code> et <code>unsafe</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<h3 id="Prise_en_charge_pour_les_dispositions_flexibles">Prise en charge pour les dispositions flexibles</h3>
+
+<p>{{Compat("css.properties.justify-content.flex_context")}}</p>
+
+<h3 id="Prise_en_charge_pour_les_grilles">Prise en charge pour les grilles</h3>
+
+<p>{{Compat("css.properties.justify-content.grid_context")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de bases</a></em></li>
+ <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible">Aligner des objets dans un conteneur flexible</a></em></li>
+ <li>Guide sur les grilles : <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">Aligner des objets dans une grille</a></em></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Le module de spécification CSS Box Alignment</a></li>
+</ul>
diff --git a/files/fr/web/css/justify-items/index.html b/files/fr/web/css/justify-items/index.html
new file mode 100644
index 0000000000..862d8e697c
--- /dev/null
+++ b/files/fr/web/css/justify-items/index.html
@@ -0,0 +1,242 @@
+---
+title: justify-items
+slug: Web/CSS/justify-items
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/justify-items
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>justify-items</code></strong> définit la valeur par défaut de {{cssxref("justify-self")}} pour tous les éléments d'une boîte et permet ainsi de définir le comportement par défaut pour la justification des éléments d'une boîte le long de l'axe en ligne (c'est-à-dire l'axe correspondant au sens d'écriture).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/justify-items.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>L'effet de cette propriété sera différent selon le type de disposition utilisé :</p>
+
+<ul>
+ <li>Pour les dispositions de bloc : cette propriété aligne l'élément selon l'axe en ligne au sein du bloc englobant.</li>
+ <li>Pour les éléments positionnés de façon absolue : cette propriété aligne l'élément selon l'axe en ligne au sein du bloc englobant en prenant en compte les valeurs de décalage par rapport au haut, à la gauche, au bas et à la droite.</li>
+ <li>Pour les cellules de tableau, cette propriété est ignorée (<a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_bloc_absolue_tableau">en savoir plus</a>).</li>
+ <li>Pour les dispositions flexibles (<em>flexbox</em>), cette propriété est ignorée (<a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_Flexbox">en savoir plus</a>).</li>
+ <li>Pour les grilles, cette propriété aligne l'élément sur la zone de la grille à laquelle il appartient selon l'axe en ligne (<a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_grille">en savoir plus</a>).</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css  no-line-numbers">/* Mots-clés de base */
+justify-items: auto;
+justify-items: normal;
+justify-items: stretch;
+
+/* Alignement par rapport à l'axe */
+justify-items: center;     /* Les éléments sont regroupés au centre */
+justify-items: start;      /* Les éléments sont regroupés au début  */
+justify-items: end;        /* Les éléments sont regroupés à la fin  */
+justify-items: flex-start; /* Les éléments sont regroupés au début de l'axe */
+justify-items: flex-end;   /* Les éléments sont regroupés à la fin de l'axe */
+justify-items: self-start;
+justify-items: self-end;
+justify-items: left;       /* Les éléments sont regroupés à gauche */
+justify-items: right;      /* Les éléments sont regroupés à droite */
+
+/* Alignement par rapport à la ligne de base */
+justify-items: baseline;
+justify-items: first baseline;
+justify-items: last baseline;
+
+/* Gestion du dépassement */
+justify-items: safe center;
+justify-items: unsafe center;
+
+/* Valeurs historiques */
+justify-items: legacy right;
+justify-items: legacy left;
+justify-items: legacy center;
+
+/* Valeurs globales */
+justify-items: inherit;
+justify-items: initial;
+justify-items: unset;
+</pre>
+
+<p>Cette propriété peut être définie selon trois formes différentes :</p>
+
+<ul>
+ <li>Grâce à un mot-clé : <code>normal</code>, <code>auto</code> ou <code>stretch</code>.</li>
+ <li>Relativement à la ligne de base : dans ce cas, on a le mot-clé <code>baseline</code> éventuellement suivi de <code>first</code> ou de <code>last</code></li>
+ <li>Grâce à un positionnement :
+  <ul>
+   <li>Un mot-clé parmi : <code>center</code>, <code>start</code>, <code>end</code>, <code>flex-start</code>, <code>flex-end</code>, <code>self-start</code>, <code>self-end</code>, <code>left</code> ou <code>right</code></li>
+   <li>Puis éventuellement <code>safe</code> ou <code>unsafe</code></li>
+  </ul>
+ </li>
+ <li>Grâce à un alignement tel que précédemment spécifié : le mot-clé<code> legacy</code> suivi de <code>left</code> ou de <code>right</code>.</li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>La valeur utilisée est celle de la propriété <code>justify-items</code> pour la boîte parente. Si la boîte n'a pas de parent ou est positionnée de façon absolue, <code>auto</code> sera synonyme de <code>normal</code>.</dd>
+ <dt><code>normal</code></dt>
+ <dd>Ce mot-clé aura un sens différent selon le mode de disposition utilisé :
+ <ul>
+  <li>Pour une disposition en bloc, <code>normal</code> est synonyme de <code>start</code>.</li>
+  <li>Pour les dispositions avec un positionnment absolu, ce mot-clé se comporte comme <code>start</code> pour les boîtes des éléments remplacés ou comme <code>stretch</code> pour les autres boîtes positionnées de façon absolue.</li>
+  <li>Pour les dispositions des cellules de tableaux, ce mot-clé n'a pas de signification car cette propriété est ignorée.</li>
+  <li>Pour les dispositions qui utilisent les boîtes flexibles, ce mot-clé n'a pas de signification car cette propriété est ignorée<em>.</em></li>
+  <li>Pour les dispositions qui utilisent une grille, ce mot-clé aura un comportement proche de <code>stretch</code>, sauf pour les boîtes qui ont des dimensions intrinsèques, dans ce cas, il est synonyme de <code>start</code>.</li>
+ </ul>
+ </dd>
+ <dt><code>start</code></dt>
+ <dd>Les éléments sont regroupés vers le début du conteneur pour l'axe en ligne.</dd>
+ <dt><code>end</code></dt>
+ <dd>Les éléments sont regroupés vers la fin du conteneur pour l'axe en ligne.</dd>
+ <dt><code>flex-start</code></dt>
+ <dd>Les éléments sont regroupés vers le début du conteneur flexible pour l'axe en ligne.<br>
+ Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne font pas partie d'un conteneur flexible, cette valeur correspond à <code>start</code>.</dd>
+ <dt><code>flex-end</code></dt>
+ <dd>Les éléments sont regroupés vers la fin du conteneur flexible pour l'axe en ligne.<br>
+ Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne font pas partie d'un conteneur flexible, cette valeur correspond à <code>end</code>.</dd>
+ <dt><code>self-start</code></dt>
+ <dd>Les éléments sont alignés sur le bord du conteneur au début de l'axe en ligne.</dd>
+ <dt><code>self-end</code></dt>
+ <dd>Les éléments sont alignés sur le bord du conteneur à la fin de l'axe en ligne.</dd>
+ <dt><code>center</code></dt>
+ <dd>Les éléments sont regroupés au centre du conteneur dans le sens de l'axe en ligne.</dd>
+ <dt><code>left</code></dt>
+ <dd>Les éléments sont alignés vers la gauche du conteneur dans le sens de l'axe en ligne.</dd>
+ <dt><code>right</code></dt>
+ <dd>Les éléments sont alignés vers la droite du conteneur dans le sens de l'axe en ligne.</dd>
+ <dt><code>baseline<br>
+ first baseline</code><br>
+ <code>last baseline</code></dt>
+ <dd>Ces valeurs permettent de définir l'alignement par rapport à la ligne de base pour l'élément du conteneur avec la ligne de base la plus haute ou la plus basse.<br>
+ Si <code>first baseline</code> n'est pas prise en charge, la valeur correspondra à <code>start</code>, si <code>last baseline</code> n'est pas prise en charge, la valeur correspondra à <code>end</code>.</dd>
+ <dt><code>stretch</code></dt>
+ <dd>Si la somme des tailles des éléments est inférieure à la taille du conteneur pour l'axe en ligne, les éléments dimensionnés automatiquement seront élargis de la même longueur tout en respectant les contraintes imposées par {{cssxref("max-height")}}/{{cssxref("max-width")}} (ou par les fonctionnalités équivalentes), afin que l'ensemble des éléments remplisse exactement le conteneur.</dd>
+ <dt><code>safe</code></dt>
+ <dd>Si la taille de l'élément dépasse du conteneur pour la valeur d'alignement indiquée, l'élément est alors aligné comme si la valeur <code>start</code> avait été utilisée.</dd>
+ <dt><code>unsafe</code></dt>
+ <dd>Quelle que soit la taille de l'élément par rapport au conteneur (il peut dépasser), la valeur fournie pour indiquer l'alignement est respectée.</dd>
+ <dt><code>legacy</code></dt>
+ <dd>La valeur est héritée par les éléments descendants de la boîte. Si un élément descendant a <code>justify-self: auto</code>, le mot-clé <code>legacy</code> ne sera pas pris en compte mais uniquement la valeur <code>left</code>, <code>right</code>, ou <code>center</code>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<div id="alignment_8">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+  align-content: space-between;
+  justify-items: start;
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Objet 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Objet 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Objet 3&lt;/div&gt;
+  &lt;div class="item4"&gt;Objet 4&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '500', '500')}}</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Spécification</th>
+   <th>État</th>
+   <th>Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Box Alignment", "#propdef-justify-items", "justify-items")}}</td>
+   <td>{{Spec2("CSS3 Box Alignment")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<h3 id="Prise_en_charge_pour_les_dispositions_flexibles">Prise en charge pour les dispositions flexibles</h3>
+
+<p>{{Compat("css.properties.justify-items.flex_context")}}</p>
+
+<h3 id="Prise_en_charge_pour_les_grilles_CSS">Prise en charge pour les grilles CSS</h3>
+
+<p>{{Compat("css.properties.justify-items.grid_context")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">L'alignement des boîtes avec les grilles CSS</a></li>
+ <li>La propriété {{cssxref("justify-self")}}</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Le module de spécification CSS Box Alignment</a></li>
+ <li>La propriété raccourcie {{CSSxRef("place-items")}}</li>
+ <li>La propriété {{CSSxRef("align-items")}}</li>
+</ul>
diff --git a/files/fr/web/css/justify-self/index.html b/files/fr/web/css/justify-self/index.html
new file mode 100644
index 0000000000..d093566da0
--- /dev/null
+++ b/files/fr/web/css/justify-self/index.html
@@ -0,0 +1,221 @@
+---
+title: justify-self
+slug: Web/CSS/justify-self
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/justify-self
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>justify-self</code></strong> définit la façon dont une boîte est alignée sur l'axe en ligne du conteneur.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/justify-self.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>L'effet de cette propriété varie selon le mode de disposition utilisé :</p>
+
+<ul>
+ <li>Pour les dispositions de bloc : elle permet d'aligner un élément sur l'axe en ligne par rapport à son bloc englobant.</li>
+ <li>Pour les éléments positionnés de façon absolue : elle permet d'aligner un élément dans le bloc englobant par rapport à l'axe en ligne en prenant en compte les valeurs de décalage pour les côtés haut, gauche, bas et droit.</li>
+ <li>Pour les dispositions des cellules de tableau : cette propriété est ignorée (<a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_bloc_absolue_tableau">en savoir plus</a>).</li>
+ <li>Pour les dispositions flexibles : cette propriété est ignorée (<a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_Flexbox">en savoir plus</a>).</li>
+ <li>Pour les dispositions avec les grilles : cette propriété permet d'aligner un objet sur l'axe en ligne sur la zone de grille à laquelle il appartient (<a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_grille">en savoir plus</a>).</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Mots-clés de base */
+justify-self: auto;
+justify-self: normal;
+justify-self: stretch;
+
+/* Alignement par rapport à l'axe */
+justify-self: center;     /* L'élément est aligné au centre */
+justify-self: start;      /* L'élément est aligné au début  */
+justify-self: end;        /* L'élément est aligné à la fin  */
+justify-self: flex-start; /* L'élément est aligné au début de l'axe */
+justify-self: flex-end;   /* L'élément est aligné à la fin de l'axe */
+justify-self: self-start;
+justify-self: self-end;
+justify-self: left;       /* L'élément est aligné à gauche */
+justify-self: right;      /* L'élément est aligné à droite */
+
+/* Alignement par rapport à la ligne de base */
+justify-self: baseline;
+justify-self: first baseline;
+justify-self: last baseline;
+
+/* Gestion du dépassement */
+justify-self: safe center;
+justify-self: unsafe center;
+
+/* Valeurs globales */
+justify-self: inherit;
+justify-self: initial;
+justify-self: unset;
+</pre>
+
+<p>Cette propriété peut être définie selon trois formes différentes :</p>
+
+<ul>
+ <li>Grâce à un mot-clé : <code>normal</code>, <code>auto</code> ou <code>stretch</code>.</li>
+ <li>Relativement à la ligne de base : dans ce cas, on a le mot-clé <code>baseline</code> éventuellement suivi de <code>first</code> ou de <code>last</code></li>
+ <li>Grâce à un positionnement :
+  <ul>
+   <li>Un mot-clé parmi : <code>center</code>, <code>start</code>, <code>end</code>, <code>flex-start</code>, <code>flex-end</code>, <code>self-start</code>, <code>self-end</code>, <code>left</code> ou <code>right</code></li>
+   <li>Puis éventuellement <code>safe</code> ou <code>unsafe</code></li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>La valeur utilisée est celle de la propriété <code>justify-items</code> définie pour la boîte parente. Si la boîte n'a pas de parent ou est positionnée de façon absolue, <code>auto</code> sera synonyme de <code>normal</code>.</dd>
+ <dt><code>normal</code></dt>
+ <dd>Ce mot-clé aura un sens différent selon le mode de disposition utilisé :
+ <ul>
+  <li>Pour une disposition en bloc, <code>normal</code> est synonyme de <code>start</code>.</li>
+  <li>Pour les dispositions avec un positionnment absolu, ce mot-clé se comporte comme <code>start</code> pour les boîtes des éléments remplacés ou comme <code>stretch</code> pour les autres boîtes positionnées de façon absolue.</li>
+  <li>Pour les dispositions des cellules de tableaux, ce mot-clé n'a pas de signification car cette propriété est ignorée.</li>
+  <li>Pour les dispositions qui utilisent les boîtes flexibles, ce mot-clé n'a pas de signification car cette propriété est ignorée<em>.</em></li>
+  <li>Pour les dispositions qui utilisent une grille, ce mot-clé aura un comportement proche de <code>stretch</code>, sauf pour les boîtes qui ont des dimensions intrinsèques, dans ce cas, il est synonyme de <code>start</code>.</li>
+ </ul>
+ </dd>
+ <dt><code>start</code></dt>
+ <dd>L'élément est aligné vers le début du conteneur pour l'axe en ligne.</dd>
+ <dt><code>end</code></dt>
+ <dd>L'élément est aligné vers la fin du conteneur pour l'axe en ligne.</dd>
+ <dt><code>flex-start</code></dt>
+ <dd>L'élément est aligné vers le début du conteneur flexible pour l'axe en ligne.<br>
+ Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne font pas partie d'un conteneur flexible, cette valeur correspond à <code>start</code>.</dd>
+ <dt><code>flex-end</code></dt>
+ <dd>L'élément est aligné vers la fin du conteneur flexible pour l'axe en ligne.<br>
+ Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne font pas partie d'un conteneur flexible, cette valeur correspond à <code>end</code>.</dd>
+ <dt><code>self-start</code></dt>
+ <dd>L'élément est aligné sur le bord du conteneur au début de l'axe en ligne.</dd>
+ <dt><code>self-end</code></dt>
+ <dd>L'élément est aligné sur le bord du conteneur à la fin de l'axe en ligne.</dd>
+ <dt><code>center</code></dt>
+ <dd>L'élément est aligné au centre du conteneur dans le sens de l'axe en ligne.</dd>
+ <dt><code>left</code></dt>
+ <dd>L'élément est aligné vers la gauche du conteneur dans le sens de l'axe en ligne.</dd>
+ <dt><code>right</code></dt>
+ <dd>L'élément est aligné vers la droite du conteneur dans le sens de l'axe en ligne.</dd>
+ <dt><code>baseline<br>
+ first baseline</code><br>
+ <code>last baseline</code></dt>
+ <dd>Ces valeurs permettent de définir l'alignement par rapport à la ligne de base pour l'élément du conteneur avec la ligne de base la plus haute ou la plus basse.<br>
+ Si <code>first baseline</code> n'est pas prise en charge, la valeur correspondra à <code>start</code>, si <code>last baseline</code> n'est pas prise en charge, la valeur correspondra à <code>end</code>.</dd>
+ <dt><code>stretch</code></dt>
+ <dd>Si la somme des tailles des éléments est inférieure à la taille du conteneur pour l'axe en ligne, les éléments dimensionnés automatiquement seront élargis de la même longueur tout en respectant les contraintes imposées par {{cssxref("max-height")}}/{{cssxref("max-width")}} (ou par les fonctionnalités équivalentes), afin que l'ensemble des éléments remplisse exactement le conteneur.</dd>
+ <dt><code>safe</code></dt>
+ <dd>Si la taille de l'élément dépasse du conteneur pour la valeur d'alignement indiquée, l'élément est alors aligné comme si la valeur <code>start</code> avait été utilisée.</dd>
+ <dt><code>unsafe</code></dt>
+ <dd>Quelle que soit la taille de l'élément par rapport au conteneur (il peut dépasser), la valeur fournie pour indiquer l'alignement est respectée.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<div id="alignment_8">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(2, 100px);
+  grid-template-rows: repeat(2,100px);
+  height: 300px;
+  width: 300px;
+  grid-gap: 10px;
+  align-content: space-between;
+}
+.item1 {
+  justify-self: start;
+}
+.item3 {
+  justify-self: end;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Objet 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Objet 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Objet 3&lt;/div&gt;
+  &lt;div class="item4"&gt;Objet 4&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '300', '300')}}</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Spécification</th>
+   <th>État</th>
+   <th>Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Box Alignment', '#propdef-justify-slef', 'justify-self')}}</td>
+   <td>{{Spec2('CSS3 Box Alignment')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<h3 id="Prise_en_charge_pour_les_dispositions_flexiblesflexbox">Prise en charge pour les dispositions flexibles/<em>flexbox</em></h3>
+
+<p>{{Compat("css.properties.justify-self.flex_context")}}</p>
+
+<h3 id="Prise_en_charge_pour_les_grilles_CSS">Prise en charge pour les grilles CSS</h3>
+
+<p>{{Compat("css.properties.justify-self.grid_context")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">L'alignement des boîtes avec les grilles CSS</a></li>
+ <li>La propriété {{cssxref("justify-items")}}</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Le module de spécification CSS Box Alignment</a></li>
+</ul>
diff --git a/files/fr/web/css/layout_cookbook/bas_de_page_adhérant/index.html b/files/fr/web/css/layout_cookbook/bas_de_page_adhérant/index.html
new file mode 100644
index 0000000000..be032d79cd
--- /dev/null
+++ b/files/fr/web/css/layout_cookbook/bas_de_page_adhérant/index.html
@@ -0,0 +1,73 @@
+---
+title: Bas de page adhérant
+slug: Web/CSS/Layout_cookbook/Bas_de_page_adhérant
+tags:
+  - CSS
+  - Guide
+  - Recette
+translation_of: Web/CSS/Layout_cookbook/Sticky_footers
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Un bas de page adhérant est un motif où le bas de page reste en bas de la zone d'affichage (<em>viewport</em>) lorsque le contenu est moins haut que la zone d'affichage. Dans cet article, nous verrons quelques techniques pour parvenir à ce résultat.</p>
+
+<p><img alt="A sticky footer pushed to the bottom of a box" src="https://mdn.mozillademos.org/files/16184/cookbook-footer.png" style="height: 807px; width: 1213px;"></p>
+
+<h2 id="Spécifications_sommaires">Spécifications sommaires</h2>
+
+<p>Voici les spécifications rapides pour décrire le résultat qu'on souhaite obtenir :</p>
+
+<ul>
+ <li>Le pied de page est en bas de la zone d'affichage lorsque le contenu est suffisamment petit</li>
+ <li>Si le contenu est plus grand que la zone d'affichage, le pied de page est situé sous le contenu.</li>
+</ul>
+
+<h2 id="Recette">Recette</h2>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/sticky-footer.html", '100%', 720)}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/sticky-footer--download.html">Télécharger cet example</a></p>
+</div>
+
+<div class="note">
+<p><strong>Note :</strong> Dans cet exemple, ainsi que dans le suivant, on utilise un élément enveloppant avec <code>min-height: 100%</code> afin que l'exemple intégré à la page fonctionne. Pour reproduire cela sur une page complète, on peut utiliser {{cssxref("min-height")}} avec la valeur <code>100vh</code> sur l'élément {{htmlelement("body")}} qu'on utilise comme conteneur de grille.</p>
+</div>
+
+<h2 id="Choix_effectués">Choix effectués</h2>
+
+<p>Dans l'exemple précédent, on utilise une grille CSS pour réaliser ce bas de page adhérant. L'élément <code>.wrapper</code> a une hauteur minimale de <code>100%</code>, ce qui signifie qu'il est aussi grand que le conteneur dans lequel il est placé. On crée ensuite une grille avec une seule colonne et trois lignes, une pour chaque partie de la disposition.</p>
+
+<p>Le placement automatique de la grille placera les objets selon l'ordre du document source. Le titre vient donc se placer sur la première piste (dimensionnée automatiquement), le contenu vient se placer sur la piste <code>1fr</code> et le pied de page se retrouve dans la troisième région (dimensionnée automatiquement). La piste du milieu, dimensionnée avec <code>1fr</code>, occupera tout l'espace disponible et grandira pour remplir l'espace disponible.</p>
+
+<h2 id="Méthodes_alternatives">Méthodes alternatives</h2>
+
+<p>Si vous devez prendre en charge des navigateurs qui ne permettent pas d'utiliser les grilles CSS, vous pouvez utiliser les boîtes flexibles (<em>flexbox</em>) pour avoir une note de bas de page adhérante.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/sticky-footer-flexbox.html", '100%', 720)}}</p>
+
+<p>On commence de la même façon mais on utilise <code>display:flex</code> plutôt que <code>display:grid</code> sur <code>.wrapper</code>. On définit <code>flex-direction</code> avec la valeur <code>column</code> afin d'avoir une organisation verticale. Pour le contenu principal, on utilise <code>flex-grow: 1</code> et pour les deux autres éléments, on utilise <code>flex-shrink: 0</code>. Cela évite de les réduire encore lorsque le contenu remplit la zone principale.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<h4 id="grid-template-rows">grid-template-rows</h4>
+
+<p>{{Compat("css.properties.grid-template-rows")}}</p>
+
+<h4 id="flex-direction">flex-direction</h4>
+
+<p>{{Compat("css.properties.flex-direction")}}</p>
+
+<h4 id="flex-grow">flex-grow</h4>
+
+<p>{{Compat("css.properties.flex-grow")}}</p>
+
+<h4 id="flex-shrink">flex-shrink</h4>
+
+<p>{{Compat("css.properties.flex-shrink")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base">Les concepts de base des grilles CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/layout_cookbook/carte/index.html b/files/fr/web/css/layout_cookbook/carte/index.html
new file mode 100644
index 0000000000..f363a49f0d
--- /dev/null
+++ b/files/fr/web/css/layout_cookbook/carte/index.html
@@ -0,0 +1,81 @@
+---
+title: Carte
+slug: Web/CSS/Layout_cookbook/Carte
+tags:
+  - CSS
+  - CSS Grid
+  - Guide
+  - Recette
+translation_of: Web/CSS/Layout_cookbook/Card
+---
+<p>{{CSSRef}}</p>
+
+<p class="summary">Dans ce guide, nous verrons comment créer des cartes (<em>cards</em> en anglais), disposant éventuellement d'un pied de page, qui peuvent être organisée en listes.</p>
+
+<p><img alt="Three card components in a row" src="https://mdn.mozillademos.org/files/16278/cards.png" style="height: 1172px; width: 1629px;"></p>
+
+<h2 id="Spécifications_sommaires">Spécifications sommaires</h2>
+
+<p>Une carte peut contenir différents éléments tels qu'un titre, une image, un contenu texte et un pied de page.</p>
+
+<p>Chaque carte devrait avoir la même hauteur et les pied de page devrait être placés en bas de la carte.</p>
+
+<p>Lorsqu'on ajoute des cartes à un ensemble de cartes, celles-ci devraient s'organiser sur deux dimensions.</p>
+
+<h2 id="Recette">Recette</h2>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/card.html", '100%', 1720)}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/card--download.html">Télécharger cet exemple</a>.</p>
+</div>
+
+<h2 id="Choix_effectués">Choix effectués</h2>
+
+<p>Chaque carte est organisée en utilisant <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">une grille CSS</a> bien qu'elle ne soit que sur une seule dimension. Cela permet en effet d'utiliser le dimensionnement du contenu pour les pistes de la grille. Pour avoir une grille avec une seule colonne, on utilise ce fragment de CSS :</p>
+
+<pre class="brush: css">.card {
+  display: grid;
+  grid-template-rows: max-content 200px 1fr;
+}</pre>
+
+<p>La piste pour le titre est définie avec {{cssxref("max-content")}} ce qui empêche de l'étirer. On décide ensuite que l'image puisse occuper la piste au maximum sur 200 pixels. On définit ensuite la prochaine piste (où le contenu texte se trouve) avec une dimension de <code>1fr</code>. Autrement dit, la piste dédiée au contenu occupera tout l'espace restant.</p>
+
+<p>Si la carte possède un pied de page, celui-ci sera dimensionné automatiquement car les lignes ajoutées sur la grille implicite sont dimensionnés automatiquement. Aussi, le pied de page sera suffisamment grand pour contenir l'ensemble de son texte.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Les éléments de différentes cartes ne seront pas alignés les uns avec les autres car chaque carte est une grille indépendante. La fonctionnalité de sous-grille (<em>subgrid</em>), proposée pour la version de niveau 2 du module de spécification CSS Grid, pourrait apporter une solution à ce problème.</p>
+</div>
+
+<h2 id="Méthodes_alternatives">Méthodes alternatives</h2>
+
+<p>On pourrait également utiliser <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">les boîtes flexibles</a> pour organiser le contenu d'une carte. Dans cette configuration, il faut laisser la zone dédiée au contenu s'étendre et ne pas rendre les autres éléments flexibles. On pourrait ainsi obtenir simplement cette disposition. Les grilles permettent de dimensionner les pistes au niveau du conteneur, pour les boîtes flexibles, il faut dimensionner chaque élément séparément.</p>
+
+<p>Pour l'organisation de l'ensemble des cartes (et pas des cartes individuelles), on pourrait également utiliser les boîtes flexibles mais on aurait alors la dernière carte qui occuperait tout le reste d'une ligne et qui serait potentiellement plus larges que les autres cartes. Une autre méthode consisterait à utiliser <a href="/fr/docs/Web/CSS/Colonnes_CSS">une disposition multi-colonnes</a> où les cartes s'empileraient sur les différentes colonnes (un point qui peut être souhaitable ou indésirable selon l'effet désiré).</p>
+
+<p>Voir <a href="/fr/docs/Web/CSS/Layout_cookbook/Disposition_en_colonnes">la recette sur les colonnes</a> pour observer ces méthodes en action.</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Selon le contenu des cartes, il est possible voire souhaitable d'appliquer quelques traitements pour améliorer l'accessibilité. Voir l'article <a href="https://inclusive-components.design/cards/"><em>Inclusive Components: Card</em> (en anglais)</a>, écrit par Heydon Pickering, pour des explications détaillées à ce propos.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Les différentes méthodes évoquées plus haut peuvent disposer d'une prise en charge différente selon les navigateurs, se référer à chacun des tableaux suivant pour plus de détails sur la prise en charge de chaque propriété.</p>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<h3 id="grid-template-columns">grid-template-columns</h3>
+
+<p>{{Compat("css.properties.grid-template-columns")}}</p>
+
+<h3 id="grid-template-rows">grid-template-rows</h3>
+
+<p>{{Compat("css.properties.grid-template-rows")}}</p>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li>{{Cssxref("grid-template-columns")}}, {{Cssxref("grid-template-rows")}}, {{Cssxref("grid-gap")}}</li>
+ <li><a href="https://inclusive-components.design/cards/"><em>Inclusive Components: Card</em> (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/layout_cookbook/centrer_un_element/index.html b/files/fr/web/css/layout_cookbook/centrer_un_element/index.html
new file mode 100644
index 0000000000..c4d1fb52c3
--- /dev/null
+++ b/files/fr/web/css/layout_cookbook/centrer_un_element/index.html
@@ -0,0 +1,59 @@
+---
+title: Centrer un élément
+slug: Web/CSS/Layout_cookbook/Centrer_un_element
+tags:
+  - Alignement
+  - CSS
+  - Layout
+  - centrer
+  - flexbox
+  - recettes
+translation_of: Web/CSS/Layout_cookbook/Center_an_element
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Comment centrer une boîte dans une autre boîte ? Centrer à la fois horizontalement et verticalement était difficile avant l'arrivée des boîtes flexibles (<em>flexbox</em>), mais c'est désormais beaucoup plus simple grâce aux propriétés du module de spécification <em>Box Alignment</em>.</p>
+
+<p><img alt="an element centered inside a larger box" src="https://mdn.mozillademos.org/files/16182/cookbook-center.png" style="height: 421px; width: 1219px;"></p>
+
+<h2 id="Spécifications_sommaires">Spécifications sommaires</h2>
+
+<p>Centrer un élément à la fois horizontalement et verticalement dans un autre élément.</p>
+
+<h2 id="Recette">Recette</h2>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/center.html", '100%', 720)}}</p>
+
+<div class="note">
+<p><strong>Note : </strong><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/center--download.html">Télécharger cet exemple</a></p>
+</div>
+
+<h2 id="Choix_effectués">Choix effectués</h2>
+
+<p>Pour centrer une boîte dans une autre, on a donné au contenant une propriété <code>display: flex</code>.</p>
+
+<p>Ensuite, on a paramétré {{cssxref("align-items")}} avec la valeur <code>center</code> pour centrer la boîte verticalement, et {{cssxref("justify-content")}} avec la valeur <code>center</code> pour centrer horizontalement.</p>
+
+<p>À l'avenir, nous pourrons peut-être centrer les éléments sans avoir à transformer le parent en contenant flexible, puisque les propriétés de Box Alignment utilisées ici sont aussi faites pour s'appliquer à une disposition en bloc classique.<br>
+ Cependant, sa prise en charge dans ce cas (disposition en bloc) est actuellement limitée ; l'utilisation de Flexbox pour centrer est donc, pour le moment, la technique la plus robuste.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Les différentes méthodes de layout ont chacune leur compatibilité avec les navigateurs. Les tableaux ci-dessous détaillent le support de base pour chaque propriété.</p>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<h3 id="align-items"><code>align-items</code></h3>
+
+<p>{{Compat("css.properties.align-items")}}</p>
+
+<h3 id="justify-content"><code>justify-content</code></h3>
+
+<p>{{Compat("css.properties.justify-content")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_Flexbox">L'alignement des boîtes avec Flexbox</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">CSS Box alignment guide</a></li>
+</ul>
diff --git a/files/fr/web/css/layout_cookbook/contribuer_à_une_recette/cookbook_template/index.html b/files/fr/web/css/layout_cookbook/contribuer_à_une_recette/cookbook_template/index.html
new file mode 100644
index 0000000000..7223cde7ef
--- /dev/null
+++ b/files/fr/web/css/layout_cookbook/contribuer_à_une_recette/cookbook_template/index.html
@@ -0,0 +1,62 @@
+---
+title: Cookbook template
+slug: Web/CSS/Layout_cookbook/Contribuer_à_une_recette/Cookbook_template
+tags:
+  - CSS
+  - Meta
+translation_of: Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template
+---
+<p>{{CSSRef}}</p>
+
+<div class="note"><strong>Note :</strong> Voici un modèle de contenu pour les pages de « recette » CSS. Vous êtes invité⋅e à utiliser cette page comme modèle lorsque vous créez une nouvelle recette.<br>
+<em>Les commentaires en italiques sont des informations sur l'utilisation de telle ou telle partie du modèle.</em></div>
+
+<p class="summary"><em>Une description du problème qu'on souhaite résoudre ou du motif qu'on illustre avec cette recette.</em></p>
+
+<h2 id="Spécifications_sommaires">Spécifications sommaires</h2>
+
+<p><em>Que cherche-t-on à faire avec cette recette ? Quel problème résout-on ici ? Il faut expliquer de façon concise ce que l'on souhaite faire.</em></p>
+
+<h2 id="Recette">Recette</h2>
+
+<p><em>Il faudra changer le chemin de la macro pour correspondre à celui de votre exemple une fois que celui-ci a été fusionné sur le dépôt principal. Le dernier paramètre correspond à la hauteur qui peut être adaptée si besoin.</em></p>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/center.html", '100%', 720)}}</p>
+
+<p><em>Il faut modifier le lien pour cibler la version téléchargeable de votre exemple.</em></p>
+
+<div class="note">
+<p><strong>Note : </strong><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/center--download.html">Télécharger cet exemple</a>.</p>
+</div>
+
+<h2 id="Choix_effectués">Choix effectués</h2>
+
+<p><em>Expliquez ici les décisions prises pour réaliser cette  recette. Pourquoi avez-vous choisi telle méthode de disposition ? Vous pouvez inclure ici d'autres exemples. Cette section est assez flexible car la complexité d'une recette peut varier grandement.</em></p>
+
+<h2 id="Méthodes_de_recours_ou_alternatives">Méthodes de recours ou alternatives</h2>
+
+<p><em>S'il existe d'autres méthodes ou des méthodes qui permettent une amélioration progressive pour les navigateurs qui ne prennent pas en charge les fonctionnalités récentes utilisées, vous pouvez les décrire ici.</em></p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p><em>Inclure ici les aspects spécifiquement liés à l'accessibilité pour cette recette. Cette section peut être omise si rien de notable ne concerne l'accessiblité pour cette recette.</em></p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Les différentes méthodes évoquées plus haut peuvent disposer d'une prise en charge différente selon les navigateurs, se référer à chacun des tableaux suivant pour plus de détails sur la prise en charge de chaque propriété.</p>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p><em>Inclure ici les données de compatibilité pour les principales propriétés utilisées. Comme exemple, voici comment faire pour inclure les données concernant <code>align-items</code>.</em></p>
+
+<h3 id="align-items">align-items</h3>
+
+<p>{{Compat("css.properties.align-items")}}</p>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li><em>Liste de liens sur les propriétés concernées : {{Cssxref("example-property")}}</em></li>
+ <li><em>Liens vers des articles qui expliquent comment utiliser telles propriétés en contexte</em></li>
+ <li><em>Liens vers des ressources externes. Il ne faut pas hésiter à pointer vers de bonnes ressources externes mais leur contenu ne doit pas se limiter à des points de détail.</em></li>
+</ul>
diff --git a/files/fr/web/css/layout_cookbook/contribuer_à_une_recette/index.html b/files/fr/web/css/layout_cookbook/contribuer_à_une_recette/index.html
new file mode 100644
index 0000000000..b356d20339
--- /dev/null
+++ b/files/fr/web/css/layout_cookbook/contribuer_à_une_recette/index.html
@@ -0,0 +1,104 @@
+---
+title: Contribuer à une recette
+slug: Web/CSS/Layout_cookbook/Contribuer_à_une_recette
+tags:
+  - CSS
+  - Guide
+  - MDN
+  - Meta
+translation_of: Web/CSS/Layout_cookbook/Contribute_a_recipe
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Si vous souhaitez contribuer en ajoutant une recette à celles présentées dans cette section de MDN, nous vous expliquons ici quelles étapes suivre pour que vos exemples soient publiés.</p>
+
+<h2 id="Qu'est-ce_qu'une_«_bonne_»_recette">Qu'est-ce qu'une « bonne » recette ?</h2>
+
+<p><strong>Une bonne recette consiste en la version la plus simple possible d'un motif utile pour concevoir une page web.</strong> Chaque ligne de CSS écrite dans la recette doit servir à illustrer le motif. Tout ce qui est purement décoratif pour l'exemple doit être exclus. L'idée est que la recette puisse servir de base à n'importe qui et de pouvoir appliquer ses propres styles sur l'exemple si besoin.</p>
+
+<div class="note">
+<p><strong>Note quant à la traduction et aux recettes en anglais :</strong> Une recette (l'exemple interactif, la version téléchargeable et la page MDN) doit d'abord être créée en anglais avant de pouvoir être mise à disposition en français. La suite de ce guide explique en français ce qu'il faut réaliser mais la majeure partie du contenu produit devra être en anglais.</p>
+</div>
+
+<h2 id="Les_étapes_pour_la_publication">Les étapes pour la publication</h2>
+
+<p>Une recette se décompose comme suit :</p>
+
+<ol>
+ <li>Un exemple interactif, stocké <a href="https://github.com/mdn/css-examples">sur le dépôt GitHub des exemples CSS</a></li>
+ <li>Une version téléchargeable de cet exemple, également stockée sur le dépôt des exemples CSS.</li>
+ <li>Une page MDN, rattachée à la section <a href="/fr/docs/Web/CSS/Layout_cookbook">Livre de recettes CSS</a> qui contient :
+  <ol>
+   <li>Les spécifications sommaires</li>
+   <li>La recette</li>
+   <li>Les choix effectués</li>
+   <li>Les éventuelles méthodes alternatives (utiles pour l'amélioration progressive)</li>
+   <li>Les points relatifs à l'accessibilité</li>
+   <li>La compatibilité des navigateurs</li>
+   <li>D'éventuelles ressources additionnelles</li>
+  </ol>
+ </li>
+</ol>
+
+<h3 id="1._Construire_le_motif">1. Construire le motif</h3>
+
+<p>Avant de passer de l'exemple à la recette, commencez par écrire votre motif sous la forme d'une simple page HTML. Pensez à ce que vous voulez démontrer/illustrer et visez un résultat aussi simple que possible. Évitez d'utiliser des conventions CSS spécifiques qui ne seraient pas nécessairement connues et qui pourraient complexifier inutilement l'exemple.</p>
+
+<p>Assurez-vous que le code HTML et CSS soit valide et testez le dans différents navigateurs. Vous pouvez tout à fait utiliser des propriétés CSS qui ne sont pas prises en charge par l'ensemble des navigateurs. Vous pourrez inclure les informations de compatibilité dans la page dédiée. Dans certains cas, il pourra être utile de fournir une deuxième version de l'exemple qui illustre des techniques qui permettent de prendre en charge des navigateurs plus anciens.</p>
+
+<h3 id="2._Créer_un_exemple_interactif">2. Créer un exemple interactif</h3>
+
+<p>Les exemples interactifs que vous voyez sur ces recettes et dans d'autres articles MDN permettent aux visiteurs de modifier le code et d'en voir le résultat sans être submergé⋅e de code superflu. Votre recette pourra utiliser un ou plusieurs exemples interactifs.</p>
+
+<p>Créez un <em>fork</em> du <a href="https://github.com/mdn/css-examples">dépôt des exemples CSS</a> puis étudiez le dossier <code>css-cookbook</code>. Ce dernier contient un fichier <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/cookbook-template.html">cookbook-template.html</a> dont vous pouvez repartir pour réaliser votre exemple. Enregistrez le nouveau fichier dans le répertoire <code>css-cookbook</code> avec un nom pertinent. Le modèle de base est commenté afin de vous aider à situer les différentes parties.</p>
+
+<p>Voici les quelques éléments importants.</p>
+
+<p>Il y a une feuille de style pour les panneaux des éditeurs, quelques règles pour la mise en forme de base et un fichier JavaScript qui contient les fonctionnalités de l'éditeur. Ces fichiers doivent être laissés tels quels.</p>
+
+<p>Dans l'en-tête, il y a deux blocs pour le style. Le premier concerne les éléments que le visiteur n'a pas besoin de voir ou de changer pour modifier l'exemple. Le second correspond à ce qui pourra être modifié dans l'exemple. Généralement, on ajoute l'ensemble du CSS provenant de l'exemple dans le premier bloc puis on choisit les règles qu'on souhaite reproduire dans le deuxième bloc. Les règles du deuxième bloc doivent être celles qui illustrent l'essence de l'exemple et qu'un utilisateur pourra modifier afin d'en voir l'effet sur le motif.</p>
+
+<p>Le HTML du composant doit être ajouté deux fois. Pour commencer dans la section avec la classe <code>preview</code> puis dans l'élément <code>textarea</code> <code>playable-html</code>.</p>
+
+<p>Le CSS éditable (celui du second bloc de l'en-tête) doit également être recopié dans la section  <code>playable-css</code>.</p>
+
+<p>Pour voir un exemple existant et comprendre les différentes parties, vous pouvez consulter <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/center.html">center.html</a> qui est utilisé sur la page <a href="/fr/docs/Web/CSS/Layout_cookbook/Centrer_un_element">Comment centrer un élément</a>.</p>
+
+<p>Si vous avez créé un <em>fork</em> du dépôt et que vous avez les fichiers CSS et JavaScript avec votre exemple, vous pouvez ouvrir la page dans un navigateur et l'ensemble devrait fonctionner de la même manière que lorsqu'il sera inclus dans une page.</p>
+
+<h4 id="Quelques_conseils">Quelques conseils</h4>
+
+<ol>
+ <li>N'indentez pas le code CSS et HTML à l'intérieur des <code>textarea</code> par rapport à l'ensemble du document HTML mais reprenez l'indentation depuis la première colonne (voir <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/center.html">center.html</a> par exemple).</li>
+ <li>Si vous avez besoins d'images, placez les dans le dossier avec les exemples. Vous pouvez également utiliser une des images déjà présente.</li>
+ <li>Vous pouvez ajuster la hauteur des <code>textarea</code> en modifiant la hauteur dans les styles <em>inline</em>/en incise.</li>
+</ol>
+
+<h3 id="3._Créer_une_version_téléchargeable">3. Créer une version téléchargeable</h3>
+
+<p>L'exemple intégré à la page contient tout le code mais seule la partie nécessaire est affichée. Faites une copie du fichier en ajoutant <code>--download</code> au nom. Ainsi, <code>center.html</code> possède une version téléchargeable intitulée <code>center--download.html</code>. Ce fichier devra ressembler à l'exemple initial et contenir une version basique du motif, sur une seule page HTML. Il peut être utile d'inclure les règles CSS applliquées à <code>body</code> et qui sont dans la feuille de style intégrée. Vous pouvez consulter <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/cookbook-template--download.html">cookbook-template--download.html</a> comme exemple et point de départ.</p>
+
+<h3 id="4._Réaliser_une_pull_request_avec_votre_exemple">4. Réaliser une <em>pull request</em> avec votre exemple</h3>
+
+<p>Ouvrez une <em>pull request</em> depuis votre <em>fork</em> vers le <a href="https://github.com/mdn/css-examples">dépôt des exemples CSS</a>. Nous pourrons ainsi vous aider à apporter les modifications nécessaires pour la créations de la page. De plus, l'exemple devra être fusionné afin de pouvoir être affiché sur une page. Dans la <em>pull request</em>, veuillez écrire une présentation de cette recette et des concepts que vous illustrez.</p>
+
+<h3 id="5._Créer_la_page_sur_MDN">5. Créer la page sur MDN</h3>
+
+<p>Une fois l'exemple fusionné, vous pouvez créer l'article correspondant sur MDN. Pour cela, vous aurez besoin d'un compte et <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Create_and_edit_pages#Getting_page_creation_permissions">des permissions pour la création de page</a>. Vous pourrez alors créer une page comme sous-page de la section. <a href="/en-US/docs/Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template">Cette page modèle pourra vous servir de point de départ pour votre contenu</a>.</p>
+
+<p>Le modèle explique le contenu de chaque section. Vous pouvez également consulter les recettes existantes comme références. Si vous cliquez sur le bouton d'édition en haut de page, vous pourrez ainsi accéder au contenu « brut » de la page et voir comment les macros sont utilisées afin d'intégrer les données de compatibilité ou les exemples interactifs.</p>
+
+<div class="note">
+<p><strong>Note de traduction :</strong> Si vous souhaitez effectuer la traduction d'une recette existante, vous pouvez consulter <a href="/fr/docs/Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template">la page modèle en français</a>.</p>
+</div>
+
+<p>Si vous avez besoin d'une aide générale sur l'utilisation de MDN, vous pouvez consulter les pages d'aide.</p>
+
+<p>Si vous avez des questions ou que vous souhaitez que quelqu'un vérifie votre page, n'hésitez pas à demander sur <a href="https://discourse.mozilla.org/c/mdn">le forum Discourse de MDN</a> ou à venir <a href="/fr/docs/MDN/Rejoindre_la_communauté/Conversations#Chat_sur_IRC">discuter sur IRC</a> (ces deux canaux sont principalement anglophones).</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template">Page modèle d'une recette</a></li>
+ <li><a href="https://github.com/mdn/css-examples">Dépôt git des exemples CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/layout_cookbook/disposition_en_colonnes/index.html b/files/fr/web/css/layout_cookbook/disposition_en_colonnes/index.html
new file mode 100644
index 0000000000..140cc9a35a
--- /dev/null
+++ b/files/fr/web/css/layout_cookbook/disposition_en_colonnes/index.html
@@ -0,0 +1,129 @@
+---
+title: Disposition en colonnes
+slug: Web/CSS/Layout_cookbook/Disposition_en_colonnes
+tags:
+  - CSS
+  - Guide
+  - Multi-col
+  - flexbox
+  - grid
+translation_of: Web/CSS/Layout_cookbook/Column_layouts
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Vous aurez souvent à créer des dispositions organisées en colonnes. CSS fournit différentes méthodes pour parvenir à de telles dispositions. Les grilles CSS ou les boîtes flexibles ou encore les dispositions multi-colonnes peuvent être utilisées et choisir l'une de ces méthodes dépend de ce que l'on veut obtenir. Dans ce guide, nous verrons ces différentes options.</p>
+
+<p><img alt="three different styles of layouts which have two columns in the container." src="https://mdn.mozillademos.org/files/16183/cookbook-multiple-columns.png" style="height: 406px; width: 1541px;"></p>
+
+<h2 id="Prérequis">Prérequis</h2>
+
+<p>Il existe plusieurs « motifs » qu'on peut vouloir réaliser avec des colonnes :</p>
+
+<ul>
+ <li>Un fil continu qui se divise en colonne, à la façon d'un journal papier.</li>
+ <li>Une seule ligne d'éléments divisée en colonnes qui ont la même hauteur.</li>
+ <li>Plusieurs lignes et colonnes qui sont alignées.</li>
+</ul>
+
+<h2 id="Les_«_recettes_»">Les « recettes »</h2>
+
+<p>Selon le scénario souhaité, on utilisera différentes méthodes de disposition.</p>
+
+<h3 id="Un_fil_continu_de_contenu_-_Disposition_multi-colonnes">Un fil continu de contenu - Disposition multi-colonnes</h3>
+
+<p>En créant des colonnes avec une disposition multi-colonne, le texte pourra former un flux continu qui remplira chacune des colonnes à la suite des autres. Les colonnes auront toutes la même taille et il ne sera pas possible de cibler une colonne en particulier ou le contenu d'une colonne en particulier.</p>
+
+<p>L'espacement entre les colonnes peut être géré avec la propriété {{cssxref("column-gap")}} et il est possible d'ajouter une ligne de délimitation grâce à {{cssxref("column-rule")}}.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/columns-multicol.html", '100%', 720)}}</p>
+
+<div class="note">
+<p><strong>Note : </strong><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-multicol--download.html">Télécharger cet exemple</a></p>
+</div>
+
+<p>On utilisera une disposition multi-colonnes lorsque :</p>
+
+<ul>
+ <li>On souhaite organiser le texte à la façon d'un journal imprimé</li>
+ <li>On a un ensemble de petits éléments qu'on souhaite fragmenter en colonnes</li>
+ <li>Il n'est pas nécessaire de cibler une colonne en particulier pour des raisons de mise en forme.</li>
+</ul>
+
+<h3 id="Une_seule_ligne_fragmentée_en_cellules_de_même_taille_—_Utilisation_des_boîtes_flexibles">Une seule ligne fragmentée en cellules de même taille — Utilisation des boîtes flexibles</h3>
+
+<p>Les boîtes flexibles peuvent être utilisées afin de diviser du contenu en colonnes grâce à la propriété {{cssxref("flex-direction")}} utilisée avec la valeur <code>row</code>. Toutefois, une boîte flexible cible les éléments à l'intérieur du conteneur flexible et placera chaque enfant direct dans une nouvelle colonne. On a donc un comportement différent de celui vu précédemment avec les multi-colonnes.</p>
+
+<p>À l'heure actuelle, il n'existe pas de méthode qui permette de créer une ligne entre les objets flexibles et la prise en charge des navigateurs pour les propriétés {{cssxref("column-gap")}} et {{cssxref("row-gap")}} est limitée. Pour créer un espace entre les éléments, il faudra donc utiliser une marge.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox.html", '100%', 720)}}</p>
+
+<div class="note">
+<p><strong>Note : </strong><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-flexbox--download.html">Télécharger cet exemple</a></p>
+</div>
+
+<p>Les boîtes flexibles peuvent également être utilisées afin de créer des dispositions où les objets flexibles « passent à la ligne » en utilisant la propriété {{cssxref("flex-wrap")}} et la valeur <code>wrap</code> sur le conteneur.  Les nouvelles lignes répartiront l'espace pour cette ligne uniquement, il n'y aura pas d'alignement d'une ligne à l'autre (comme on peut le voir dans l'exemple qui suit). C'est pour cette raison qu'on décrit les boîtes flexibles comme étant une méthode de disposition sur une seul dimension : cette méthode permet de contrôler la disposition en ligne ou en colonne mais pas de gérer les deux à la fois.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox-wrapping.html", '100%', 720)}}</p>
+
+<div class="note">
+<p><strong>Note : </strong><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-flexbox-wrapping--download.html">Télécharger cet exemple</a></p>
+</div>
+
+<p>On utilisera les boîtes flexibles pour :</p>
+
+<ul>
+ <li>Organiser des lignes ou colonnes d'objets indépendantes</li>
+ <li>Aligner les objets sur l'axe orthogonal au sens de lecture</li>
+ <li>Les cas où l'alignement d'une ligne sur l'autre n'est pas important</li>
+</ul>
+
+<h3 id="Aligner_des_objets_en_lignes_et_colonnes_—_Utilisation_d'une_grille">Aligner des objets en lignes et colonnes — Utilisation d'une grille</h3>
+
+<p>Si on souhaite organiser des objets sur des lignes et sur des colonnes, alors on choisira une grille CSS. La disposition à l'aide d'une grille permet d'organiser les éléments fils d'un contener de la même façon que les boîtes flexibles mais on peut également aligner les lignes et les colonnes. Aussi, si les boîtes flexibles sont une méthode unidimensionnelle, les grilles CSS permettent de jouer sur les deux dimensions.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/columns-grid.html", '100%', 720)}}</p>
+
+<div class="note">
+<p><strong>Note : </strong><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-grid--download.html">Télécharger cet exemple</a></p>
+</div>
+
+<p>On utiliser les grilles CSS lorsque :</p>
+
+<ul>
+ <li>On a des éléments/objets à organiser sur plusieurs lignes et colonnes</li>
+ <li>On souhaite pouvoir aligner les éléments sur les deux axes</li>
+</ul>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Les différentes méthodes évoquées plus haut peuvent disposer d'une prise en charge différente selon les navigateurs, se référer à chacun des tableaux suivant pour plus de détails sur la prise en charge de chaque propriété.</p>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<h3 id="column-width">column-width</h3>
+
+<p>{{Compat("css.properties.column-width")}}</p>
+
+<h3 id="column-rule">column-rule</h3>
+
+<p>{{Compat("css.properties.column-rule")}}</p>
+
+<h3 id="flex">flex</h3>
+
+<p>{{Compat("css.properties.flex")}}</p>
+
+<h3 id="flex-wrap">flex-wrap</h3>
+
+<p>{{Compat("css.properties.flex-wrap")}}</p>
+
+<h3 id="grid-template-columns">grid-template-columns</h3>
+
+<p>{{Compat("css.properties.grid-template-columns")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Colonnes_CSS">Guide pour les dispositions multi-colonnes</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">Guide pour les boîtes flexibles (<em>flexbox</em>)</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">Guide pour les grilles CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/layout_cookbook/grid_wrapper/index.html b/files/fr/web/css/layout_cookbook/grid_wrapper/index.html
new file mode 100644
index 0000000000..0e2ed6385f
--- /dev/null
+++ b/files/fr/web/css/layout_cookbook/grid_wrapper/index.html
@@ -0,0 +1,83 @@
+---
+title: Envelopper une grille
+slug: Web/CSS/Layout_cookbook/Grid_wrapper
+tags:
+  - CSS
+  - Guide
+  - Recette
+translation_of: Web/CSS/Layout_cookbook/Grid_wrapper
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Ce motif permet d'aligner le contenu d'une grille au centre grâce à un élément qui l'enveloppe. On peut également choisir quels éléments aligner au centre et lesquels adosser aux côtés.</p>
+
+<h2 id="Spécifications_sommaires">Spécifications sommaires</h2>
+
+<p>Les éléments placés sur la grille devraient pouvoir être alignés au centre et/ou sur les bords.</p>
+
+<h2 id="Recette">Recette</h2>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/grid-wrapper.html", '100%', 720)}}</p>
+
+<div class="note">
+<p><strong>Note : </strong><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/grid-wrapper--download.html">Télécharger cet exemple</a>.</p>
+</div>
+
+<h2 id="Choix_effectués">Choix effectués</h2>
+
+<p dir="ltr" id="docs-internal-guid-30ae4ecd-7fff-36c2-da7d-0fbb6ec4feae">Cette recette utilise la fonction {{cssxref("minmax()")}} afin de définir les tailles des pistes pour la propriété {{cssxref("grid-template-columns")}}.</p>
+
+<p dir="ltr">Les deux colonnes extérieures ont une taille maximale de <code>1fr</code>, ce qui signifie qu'elles occuperont tout l'espace disponible dans le conteneur de grille.</p>
+
+<h2 id="Méthodes_de_recours_ou_alternatives">Méthodes de recours ou alternatives</h2>
+
+<p>Si cette recette est utilisée pour une page entière, il peut s'avérer utile de définir <code>max-width</code> et des marges horzontales avec <code>auto</code> afin que le contenu soit centré horizontalement :</p>
+
+<pre class="brush: css">.grid {
+  max-width: 1200px;
+  margin: 0 auto; // on centre le conteneur en horizontal
+  display: grid;
+  /* Other grid code goes here */
+}
+
+/* On retire max-width et les marges si le navigateur */
+/* prend en charge les grilles */
+@supports (display: grid) {
+  .grid {
+    max-width: none;
+    margin: 0;
+  }
+}</pre>
+
+<p>Pour qu'un élément soit isolé et colle au bord du <em>viewport</em>, on peut utiliser cette astuce de <a href="https://una.im/">Una Kravets</a> :</p>
+
+<pre class="brush: css">.item {
+  width: 100vw;
+  margin-left: 50%;
+  transform: translate3d(-50%, 0, 0);
+}</pre>
+
+<p>On a ainsi une méthode plus compatible mais qui ne permet pas d'aligner les éléments aussi facilement que sur une grille CSS.</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Bien que les grilles CSS nous permettent potentiellement de positionner n'importe où on le souhaite, il est important que l'ordre des éléments dans le document soit le même que l'ordre visuel, utilisé pour la navigation (voir <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">les grilles CSS et l'accessibilité</a> pour plus de détails).</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<h3 id="grid-template-columns"><code>grid-template-columns</code></h3>
+
+<p>{{Compat("css.properties.grid-template-columns")}}</p>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li>{{Cssxref("grid-template-columns")}}</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout" id="docs-internal-guid-ae8eafc9-7fff-65b9-8d8c-bb5f1e3c874c">Les grilles CSS sur MDN</a></li>
+ <li>Article :<a href="https://css-irl.info/more-flexibility-with-minmax/"> Les grilles CSS, plus de flexibilité avec <code>minmax()</code> (en anglais)</a></li>
+ <li>Article : <a href="https://rachelandrew.co.uk/archives/2017/06/01/breaking-out-with-css-grid-explained/">Isoler des éléments sur une grille CSS (en anglais)</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/css/layout_cookbook/index.html b/files/fr/web/css/layout_cookbook/index.html
new file mode 100644
index 0000000000..dc96a66da3
--- /dev/null
+++ b/files/fr/web/css/layout_cookbook/index.html
@@ -0,0 +1,84 @@
+---
+title: CSS Layout cookbook
+slug: Web/CSS/Layout_cookbook
+tags:
+  - CSS
+  - Guide
+  - recettes
+translation_of: Web/CSS/Layout_cookbook
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Le livre de recettes CSS vise à illustrer différents motifs qu'on retrouve fréquemment sur le Web et qu'on pourrait souhaiter implémenter pour son propre site. En plus de fournir du code qui peut servir de point de départ, ces recettes mettent en avant les différents outils et dispositions qui peuvent être utilisées et les choix à effectuer lors du développement.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Si vous débutez en CSS, nous vous conseillons de consulter <a href="/fr/docs/Apprendre/CSS/CSS_layout">notre module sur l'apprentissage de la disposition en CSS</a>. Ce guide vous fournira les informations de base pour comprendre le fonctionnement de chacune de ces recettes.</p>
+</div>
+
+<h2 id="Les_recettes">Les recettes</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Recette</th>
+   <th scope="col">Description</th>
+   <th scope="col">Méthodes de disposition utilisées</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/fr/docs/Web/CSS/Layout_cookbook/Media_objects">Objets avec média</a></td>
+   <td>Une boîte constituée de deux colonnes avec une image d'un côté et un texte descriptif de l'autre (par exemple un tweet ou une publication Facebook intégrée à une page).</td>
+   <td><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">Grilles CSS</a>, {{cssxref("float")}} pour une méthode de recours, dimensionnement avec {{cssxref("fit-content")}}</td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/CSS/Layout_cookbook/Disposition_en_colonnes">Colonnes</a></td>
+   <td>Comment choisir entre une disposition multi-colonnes, les boites flexibles (flexbox) ou les grilles CSS pour organiser des colonnes de contenu.</td>
+   <td><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">Grilles CSS</a>, <a href="/fr/docs/Web/CSS/CSS_Columns">Disposition multi-colonnes</a>, <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/CSS/Layout_cookbook/Centrer_un_element">Centrer un élément</a></td>
+   <td>Comment centrer un élément horizontalement et verticalement.</td>
+   <td><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, <a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Alignement des boîtes</a></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/CSS/Layout_cookbook/Bas_de_page_adhérant">Bas de page adhérant</a></td>
+   <td>Créer un pied de page qui se situe en bas du conteneur ou de la zone d'affichage (<em>viewport</em>) lorsque le contenu est plus petit que la zone ou le conteneur.</td>
+   <td><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">Grilles CSS</a>, <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/CSS/Layout_cookbook/Navigation_segmentée">Navigation segmentée</a></td>
+   <td>Un motif de navigation où certains liens sont séparés des autres.</td>
+   <td><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, {{cssxref("margin")}}</td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/CSS/Layout_cookbook/Navigation_Breadcrumb">Navigation avec un fil d'Ariane (<em>breadcrumb</em>)</a></td>
+   <td>Créer une liste de liens qui permette au visiteur de naviguer selon la hiérarchie des pages.</td>
+   <td><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/CSS/Layout_cookbook/Liste_groupes_avec_indicateurs">Liste de groupes avec indicateurs</a></td>
+   <td>Afficher une liste d'éléments avec chacun un indicateur numérique.</td>
+   <td><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, <a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Alignement des boîtes</a></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/CSS/Layout_cookbook/Pagination">Pagination</a></td>
+   <td>Comment créer des liens pour différentes pages, ordonnées, de contenu (les résultats d'une recherche par exemple).</td>
+   <td><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, <a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Alignement des boîtes</a></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/CSS/Layout_cookbook/Carte">Carte</a></td>
+   <td>Un composant sous forme de carte. L'assemblage de tels composants formera une grille de cartes.</td>
+   <td><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">Grilles CSS</a></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/CSS/Layout_cookbook/Grid_wrapper">Envelopper une grille (<em>grid wrapper</em>)</a></td>
+   <td>Comment aligner certains éléments au centre d'une grille et permettre à d'autres d'être alignés sur les bords.</td>
+   <td><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">Grilles CSS</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Contribuer_en_créant_une_recette">Contribuer en créant une recette</h2>
+
+<p>MDN est un wiki auquel vous pouvez contribuer, y compris en ajoutant une recette à celles-ci ! <a href="/fr/docs/Web/CSS/Layout_cookbook/Contribuer_à_une_recette">Voir cette page</a> pour un modèle ainsi que les règles à suivre pour créer votre propre exemple.</p>
diff --git a/files/fr/web/css/layout_cookbook/liste_groupes_avec_indicateurs/index.html b/files/fr/web/css/layout_cookbook/liste_groupes_avec_indicateurs/index.html
new file mode 100644
index 0000000000..6c3f1d171f
--- /dev/null
+++ b/files/fr/web/css/layout_cookbook/liste_groupes_avec_indicateurs/index.html
@@ -0,0 +1,53 @@
+---
+title: Liste de groupes avec indicateurs
+slug: Web/CSS/Layout_cookbook/Liste_groupes_avec_indicateurs
+tags:
+  - CSS
+  - Guide
+  - Intermédiaire
+translation_of: Web/CSS/Layout_cookbook/List_group_with_badges
+---
+<p>{{CSSRef}}</p>
+
+<p class="summary">Dans cet article, nous verrons comment créer une liste de groupes dont chaque élément possède un compteur sous la forme d'un indicateur (<em>badge</em>).</p>
+
+<p><img alt="A list of items with a badge indicating a count displayed to the right of the text." src="https://mdn.mozillademos.org/files/16255/list-group-badges.png" style="height: 423px; width: 791px;"></p>
+
+<h2 id="Spécifications_sommaires">Spécifications sommaires</h2>
+
+<p>Les éléments de la liste doivent être affichés avec les indicateurs alignés à droite, quel que soit le volume de contenu pour un élément. L'indicateur doit être centré verticalement s'il y a plus d'une ligne de contenu.</p>
+
+<h2 id="Exemple_appliqué">Exemple appliqué</h2>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/list-group-badges.html", '100%', 720)}}</p>
+
+<p class="note"><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/list-group-badges--download.html">Télécharger l'exemple</a>.</p>
+
+<h2 id="Choix_effectués">Choix effectués</h2>
+
+<p>Les boîtes flexibles sont un outil plutôt pratique pour constituer ce motif et permettent d'adapter simplement la disposition.</p>
+
+<p>Pour s'assurer que le texte et l'indicateur soient bien alignés, on utilise la propriété <code>justify-content</code> avec la valeur <code>space-between</code>. Ainsi, l'espace supplémentaire est placé entre les éléments. Vous pouvez retirer cette propriété dans l'exemple ci-avant pour voir le badge se déplacer à la fin du texte.</p>
+
+<p>Pour aligner le contenu horizontalement, on utilise la propriété <code>align-items</code> afin d'aligner le texte et l'indicateur sur l'axe secondaire. Si on veut que l'indicateur soit aligné en haut du contenu, on pourra utiliser <code>align-items: flex-start</code> à la place.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Les différentes méthodes utilisées ici peuvent avoir une prise en charge différentes par les navigateurs. Se référer à chacun des tableaux pour avoir plus de détails.</p>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<h3 id="justify-content">justify-content</h3>
+
+<p>{{Compat("css.properties.justify-content")}}</p>
+
+<h3 id="align-items">align-items</h3>
+
+<p>{{Compat("css.properties.align-items")}}</p>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_Flexbox">Alignement des boîtes avec les boîtes flexibles</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligner_des_éléments_dans_un_conteneur_flexible">Aligner des objets dans un conteneur flexible</a></li>
+</ul>
diff --git a/files/fr/web/css/layout_cookbook/media_objects/index.html b/files/fr/web/css/layout_cookbook/media_objects/index.html
new file mode 100644
index 0000000000..129ba33c40
--- /dev/null
+++ b/files/fr/web/css/layout_cookbook/media_objects/index.html
@@ -0,0 +1,89 @@
+---
+title: Objets avec média
+slug: Web/CSS/Layout_cookbook/Media_objects
+tags:
+  - CSS
+  - Guide
+  - Recette
+translation_of: Web/CSS/Layout_cookbook/Media_objects
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Le motif <em>Media Object</em> (qu'on peut traduire en « objet avec média ») est un motif qu'on rencontre fréquemment sur le Web. <a href="http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/">Intitulé ainsi par Nicole Sullivan</a>, cela fait référence à une boîte organisée en deux colonnes dont l'une contient une image d'un côté et un texte descriptif de l'autre (par exemple l'image de profil de quelqu'un à gauche et un billet à droite).</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16112/media-object.png"></p>
+
+<h2 id="Spécifications_sommaires">Spécifications sommaires</h2>
+
+<p>Voici ce qu'on souhaite obtenir :</p>
+
+<ul>
+ <li>Un empilement des deux zones sur mobile et deux colonnes sur ordinateur</li>
+ <li>L'image peut être à gauche ou à droite</li>
+ <li>L'image peut être petite ou grande</li>
+ <li>Les objets avec média peuvent être imbriqués</li>
+ <li>L'objet avec média devrait dégager l'espace pour le contenu, quel que soit le côté le plus grand.</li>
+</ul>
+
+<h2 id="Recette">Recette</h2>
+
+<p class="codepen">{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects.html", '100%', 1200)}}</p>
+
+<div class="note">
+<p class="codepen"><strong>Note : </strong><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/media-objects--download.html">Télécharger cet exemple</a>.</p>
+</div>
+
+<h2 id="Choix_effectués">Choix effectués</h2>
+
+<p>On a ici choisi d'utiliser <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">une grille</a> pour réaliser cet objet. cela permet de contrôler les deux dimensions lorsqu'on en a besoin. Ainsi, si on a besoin d'un pied de page avec un contenu au dessus, le pied de page peut être poussé sous l'objet.</p>
+
+<p>La grille permet également d'utiliser {{cssxref("fit-content")}} pour la piste contenant l'image. En utilisant <code>fit-content</code> avec une taille maximale de 200 pixels, lorsqu'on a une petite image (une icône), la piste est réduite à la taille de cette image. Si l'image est plus grande, la piste ne sera pas plus large que 200 pixels, de plus, l'image ayant {{cssxref("max-width ")}} avec 100%, elle sera redimensionnée afin de pouvoir tenir dans la colonne.</p>
+
+<p>En utilisant {{cssxref("grid-template-areas")}} pour dessiner la disposition, on peut voir le motif dans la feuille de style CSS. La grille est définie lorsqu'on a <code>max-width</code> qui vaut au moins 500 pixels et on a donc un empilement pour les plus petits écrans.</p>
+
+<p>En ajoutant une classe <code>media-flip</code>, on fournit une disposition alternative qui permet de changer le côté sur lequel l'image est affichée.</p>
+
+<p>Lorsqu'on imbrique un objet dans un autre, il faut le placer dans la deuxième piste en mode normal et sur la première lorsqu'on choisit d'inverser le côté de l'image.</p>
+
+<h2 id="Méthodes_alternatives">Méthodes alternatives</h2>
+
+<p>Il existe différentes méthodes alternatives permettant d'obtenir ce résultat selon les navigateurs que vous souhaitez prendre en charge. Une méthode assez générique consiste à placer l'image en flottante à gauche et d'ajouter un dégagement sur la boîte afin qu'elle contienne bien tous les éléments flottants.</p>
+
+<p class="codepen">{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects-fallback.html", '100%', 1200)}}</p>
+
+<div class="note">
+<p class="codepen"><strong>Note : </strong><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/media-objects-fallback--download.html">Télécharger cet exemple</a>.</p>
+</div>
+
+<p>Une fois que les éléments flottants sont des éléments de grille, les dégagements ne s'appliquent plus et il n'est donc pas nécessaire de retirer quoi que ce soit sur les dégagements.</p>
+
+<p>En revanche, il faudra retirer les marges appliquées aux objets et les largeurs superflues pour la grille (la propriété {{cssxref("gap")}} permet de contrôler l'espace entre et les pistes gèrent le reste du dimensionnement).</p>
+
+<ul>
+</ul>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Les différentes méthodes évoquées plus haut peuvent disposer d'une prise en charge différente selon les navigateurs, se référer à chacun des tableaux suivant pour plus de détails sur la prise en charge de chaque propriété.</p>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<h3 id="grid-template-areas">grid-template-areas</h3>
+
+<p>{{Compat("css.properties.grid-template-areas")}}</p>
+
+<h3 id="float">float</h3>
+
+<p>{{Compat("css.properties.float")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">Les grilles CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive">L'amélioration progressive et les grilles CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille">Utiliser les zones nommées des grilles</a></li>
+ <li><code><a href="/fr/docs/Web/CSS/fit-content">fit-content</a></code></li>
+ <li><code><a href="/fr/docs/Web/CSS/grid-template-areas">grid-template-areas</a></code></li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/css/layout_cookbook/navigation_breadcrumb/index.html b/files/fr/web/css/layout_cookbook/navigation_breadcrumb/index.html
new file mode 100644
index 0000000000..8ba8d1ea7e
--- /dev/null
+++ b/files/fr/web/css/layout_cookbook/navigation_breadcrumb/index.html
@@ -0,0 +1,49 @@
+---
+title: Fil d'Ariane (breadcrumb)
+slug: Web/CSS/Layout_cookbook/Navigation_Breadcrumb
+tags:
+  - CSS
+  - Navigation
+translation_of: Web/CSS/Layout_cookbook/Breadcrumb_Navigation
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">La navigation avec un fil d'Ariane (<em>breadcrumb</em>) permet à un utilisateur de comprendre l'emplacement auquel il se trouve au sein du site web en fournissant un fil d'Ariane qui permette de revenir à la page de départ.</p>
+
+<p><img alt="Links displayed inline with separators" src="https://mdn.mozillademos.org/files/16228/breadcrumb-navigation.png" style="height: 108px; width: 1268px;"></p>
+
+<h2 id="Spécifications_sommaires">Spécifications sommaires</h2>
+
+<p>Les différents éléments formant le chemin sont affichés sur une ligne avec un séparateur qui permet d'identifier la hiérarchie entre les pages.</p>
+
+<h2 id="Exemple_appliqué">Exemple appliqué</h2>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/breadcrumb-navigation.html", '100%', 530)}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/breadcrumb-navigation--download.html">Télécharger cet exemple</a></p>
+</div>
+
+<h2 id="Choix_effectués">Choix effectués</h2>
+
+<p>L'ensemble est organisé dans un conteneur flexible. Les séparateurs sont générés à partir de pseudo-éléments et le séparateur choisi ici peut être modifié à votre convenance.</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>On utilise ici les attributs <code>aria-label</code> et <code>aria-current</code> afin d'aider les utilisateurs à comprendre cette navigation et l'emplacement de la page actuelle dans la structure. Pour plus d'informations, voir les liens ci-après.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<h3 id="Boîtes_flexibles">Boîtes flexibles</h3>
+
+<p>{{Compat("css.properties.flex")}}</p>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Les boîtes flexibles CSS</a></li>
+ <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G65.html">Fournir un fil d'Ariane</a></li>
+ <li><a href="https://tink.uk/using-the-aria-current-attribute/">Utiliser l'attribut <code>aria-current</code></a></li>
+</ul>
diff --git a/files/fr/web/css/layout_cookbook/navigation_segmentée/index.html b/files/fr/web/css/layout_cookbook/navigation_segmentée/index.html
new file mode 100644
index 0000000000..24cc872422
--- /dev/null
+++ b/files/fr/web/css/layout_cookbook/navigation_segmentée/index.html
@@ -0,0 +1,48 @@
+---
+title: Navigation segmentée
+slug: Web/CSS/Layout_cookbook/Navigation_segmentée
+tags:
+  - CSS
+  - Navigation
+  - flexbox
+translation_of: Web/CSS/Layout_cookbook/Split_Navigation
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Une barre de navigation divisée consiste en un ou plusieurs éléments de navigation séparés des autres éléments de navigation.</p>
+
+<p><img alt="Items separated into two groups." src="https://mdn.mozillademos.org/files/16227/split-navigation.png" style="height: 145px; width: 1272px;"></p>
+
+<h2 id="Spécifications_sommaires">Spécifications sommaires</h2>
+
+<p>Une telle barre de navigation consiste généralement à avoir un élément écarté des autres. Pour cela, on va pouvoir utiliser les boîtes flexibles sans avoir besoin de deux conteneurs flexibles.</p>
+
+<h2 id="Exemple_appliqué">Exemple appliqué</h2>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/split-navigation.html", '100%', 520)}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/split-navigation--download.html">Télécharger cet exemple</a>.</p>
+</div>
+
+<h2 id="Choix_effectués">Choix effectués</h2>
+
+<p>Ce composant utilise les marges automatiques et les boîtes flexibles pour séparer l'élément voulu.</p>
+
+<p>Une marge automatique absorbe tout l'espace disponible sur la direction à laquelle elle est appliquée. C'est comme cela qu'on peut centrer un bloc avec des marges automatiques, de chaque côté du bloc, la marge essaye de consommer le plus d'espace possible et <em>pousse</em> le bloc au milieu.</p>
+
+<p>Dans notre exemple, c'est la marge à gauche du dernier élément qui est automatique et qui consomme l'espace, poussant ainsi l'élément sur la droite. Pour déplacer la séparation, on peut appliquer la classe <code>push</code> à n'importe quel élément de la liste.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<h4 id="Boîtes_flexibles">Boîtes flexibles</h4>
+
+<p>{{Compat("css.properties.flex")}}</p>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Le module de spécification <em>CSS Flexible Box Layout</em></a></li>
+</ul>
diff --git a/files/fr/web/css/layout_cookbook/pagination/index.html b/files/fr/web/css/layout_cookbook/pagination/index.html
new file mode 100644
index 0000000000..5ab2bf1d11
--- /dev/null
+++ b/files/fr/web/css/layout_cookbook/pagination/index.html
@@ -0,0 +1,81 @@
+---
+title: Pagination
+slug: Web/CSS/Layout_cookbook/Pagination
+tags:
+  - CSS
+  - Guide
+  - Recette
+  - flexbox
+translation_of: Web/CSS/Layout_cookbook/Pagination
+---
+<p>{{CSSRef}}</p>
+
+<p class="summary">Dans cette recette, nous verrons comment utiliser une méthode de navigation où l'utilisateur peut passer d'une page à une autre pour un ensemble donné via les numéros de ces pages (généralement affichés en bas de page).</p>
+
+<p><img alt="Links to sets of pages in a paged listing" src="https://mdn.mozillademos.org/files/16279/pagination.png" style="height: 192px; width: 950px;"></p>
+
+<h2 id="Spécifications_sommaires">Spécifications sommaires</h2>
+
+<p>Pour cette méthode de navigation, les éléments sont généralement affichés sur une ligne. Afin de s'assurer que la pagination est compréhensible pour les utilisateurs d'outils d'assistance, on balise les éléments dans une liste avec un élément {{htmlelement("nav")}} et on utilise CSS afin d'organiser visuellement l'ensemble sur une ligne.</p>
+
+<p>Généralement, l'outil de navigation sera centré horizontalement et placé sous le contenu.</p>
+
+<h2 id="Recette">Recette</h2>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/pagination.html", '100%', 720)}}</p>
+
+<div class="note">
+<p><strong>Note : </strong><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/pagination--download.html">Télécharger cet exemple</a>.</p>
+</div>
+
+<h2 id="Choix_effectués">Choix effectués</h2>
+
+<p>Pour obtenir ce résultat, on utilise <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">les boîtes flexibles</a> avec une conteneur flexible imbriqué dans un autre. L'élément {{htmlelement("nav")}} est utilisé comme conteneur flexible afin de pouvoir en centrer le contenu grâce à la propriété {{cssxref("justify-content")}}.</p>
+
+<p>La liste est elle-même un conteneur flexible qui permet d'organiser ces éléments sur une lignes. Pour espacer les éléments, on utilise la propriété {{cssxref("margin")}} pour espacer les éléments entre eux.</p>
+
+<h2 id="Méthodes_alternatives">Méthodes alternatives</h2>
+
+<p>Lorsque la propriété {{cssxref("column-gap")}} sera plus largement implémentée par les navigateurs, celle-ci pourra être utilisée à la place des marges pour espacer les éléments flexibles.</p>
+
+<pre class="brush: css">.pagination {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  column-gap: 2px;
+}
+</pre>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Il est nécessaire qu'une personne utilisant un lecteur d'écran comprenne comment la navigation fonctionne et que cliquer sur un lien envoie vers une autre page. Aussi, on ajoute <code>aria-label="pagination"</code> sur l'élément <code>&lt;nav&gt;</code>.</p>
+
+<p>On a également ajouté du contenu qui pourra être lu par le lecteur d'écran mais qui est masqué visuellement et on a ajouter l'attribut <code>aria-hidden</code> sur les flèches de pagination.</p>
+
+<p>Voir la section « Voir aussi » en fin d'article pour divers liens portants sur l'accessibilité.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Les différentes méthodes évoquées plus haut peuvent disposer d'une prise en charge différente selon les navigateurs, se référer à chacun des tableaux suivant pour plus de détails sur la prise en charge de chaque propriété.</p>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<h3 id="justify-content">justify-content</h3>
+
+<p>{{Compat("css.properties.justify-content")}}</p>
+
+<h3 id="column-gap_in_Flex_layout">column-gap in Flex layout</h3>
+
+<p>{{Compat("css.properties.column-gap.flex_context")}}</p>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li>{{Cssxref("justify-content")}}</li>
+ <li>{{Cssxref("column-gap")}}</li>
+ <li><em><a href="https://www.scottohara.me/blog/2018/05/05/hidden-vs-none.html">Know your ARIA: 'Hidden' vs 'None'</a></em><a href="https://www.scottohara.me/blog/2018/05/05/hidden-vs-none.html"> (en anglais)</a></li>
+ <li><a href="https://webaim.org/techniques/css/invisiblecontent/#techniques">Utiliser le contenu invisible pour les lecteurs d'écran (en anglais)</a></li>
+ <li><a href="https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939">Écrire du CSS sans oublier l'accessibilité (en anglais)</a></li>
+ <li><a href="http://a11y-style-guide.com/style-guide/section-navigation.html#kssref-navigation-pagination">Guide stylistique d'accessibilité : la pagination</a></li>
+</ul>
diff --git a/files/fr/web/css/left/index.html b/files/fr/web/css/left/index.html
new file mode 100644
index 0000000000..e616347698
--- /dev/null
+++ b/files/fr/web/css/left/index.html
@@ -0,0 +1,218 @@
+---
+title: left
+slug: Web/CSS/left
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/left
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>left</code></strong> permet de définir une partie de la position des éléments positionnés. Elle n'a aucun effet pour les éléments non-positionnés.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/left.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Pour les éléments positionnés de façon absolue (ceux pour lesquels {{cssxref("position")}}<code>: absolute</code> ou <code>position: fixed</code>), elle définit la distance entre le bord gauche de la marge de l'élément et le bord gauche de son bloc englobant (le bloc englobant étant l'ancêtre par rapport auquel l'élément est positionné de façon relative).</p>
+
+<p>Pour les éléments positionnés grâce à {{cssxref("position")}}<code>: relative</code>, c'est le décalage ajouté à gauche de l'élément (qui est donc déplacé vers la droite de sa position normale).</p>
+
+<p>Pour les éléments positionnés grâce à {{cssxref("position")}}<code>: sticky</code>, cette propriété se comportera comme avec <code>relative</code> lorsque l'élément fait partie de la zone d'affichage (<em>viewport</em>) et comme avec <code>fixed</code> lorsque l'élément est en dehors de la zone d'affichage.</p>
+
+<p>Lorsque {{cssxref("position")}}<code>: static</code>, la propriété <code>left</code> n'a aucun effet.</p>
+
+<p>Si les deux propriétés <code>left</code> et {{cssxref("right")}} sont définies et que l'élément ne peut pas s'étendre afin de satisfaire ces contraintes, la position de l'élément est « sur-définie ». Dans ce cas, la valeur <code>left</code> aura la priorité si le conteneur est orienté de gauche à droite (dans ce cas, la valeur calculée de <code>right</code> vaudra <code>-left</code>) et si le conteneur est orienté de droite à gauche, c'est la valeur <code>right</code> qui aura la priorité (auquel cas, la valeur calculée de <code>left</code> vaudra <code>-right</code>).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+left: 3px;
+left: 2.4em;
+
+/* Valeurs proportionnelles à   */
+/* la largeur du bloc englobant */
+/* Type &lt;percentage&gt;            */
+left: 10%;
+
+/* Valeur avec un mot-clé */
+left: auto;
+
+/* Valeurs globales */
+left: inherit;
+left: initial;
+left: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une valeur de longueur qui peut être positive, nulle ou négative et qui représente :
+ <ul>
+  <li>La distance au bord gauche du bloc englobant <em>pour les éléments positionnés de façon absolue</em></li>
+  <li>Le décalage vers la gauche qui est appliqué à l'élément par rapport à sa position normale dans le flux <em>pour les éléments positionnés de façon relative</em>.</li>
+ </ul>
+
+ <p>Pour plus d'informations sur les valeurs possibles, voir {{cssxref("&lt;length&gt;")}}.</p>
+ </dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Une valeur en pourcentage (type {{cssxref("&lt;percentage&gt;")}} par rapport à la largeur du bloc englobant.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Un mot-clé qui représente :
+ <ul>
+  <li>Pour les éléments positionnés de façon absolue : la position de l'élément selon la valeur de la propriété {{cssxref("right")}}, on considère <code>width: auto</code> comme une largeur basée sur le contenu.</li>
+  <li>Pour les éléments positionnés de façon relative : le décalage à gauche de l'élément par rapport à sa position initiale selon la valeur de la propriété {{cssxref("right")}}. SI <code>right</code> vaut également <code>auto</code>, il n'y a aucun décalage.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#wrap {
+  width: 700px;
+  margin: 0 auto;
+  background: #5C5C5C;
+}
+
+pre {
+  white-space: pre;
+  white-space: pre-wrap;
+  white-space: pre-line;
+  word-wrap: break-word;
+}
+
+#exemple_1 {
+  width: 200px;
+  height: 200px;
+  position: absolute;
+  left: 20px;
+  top: 20px;
+  background-color: #D8F5FF;
+}
+
+#exemple_2 {
+  width: 200px;
+  height: 200px;
+  position: relative;
+  top: 0;
+  right: 0;
+  background-color: #C1FFDB;
+
+}
+#exemple_3 {
+  width: 600px;
+  height: 400px;
+  position: relative;
+  top: 20px;
+  left: 20px;
+  background-color: #FFD7C2;
+}
+
+#exemple_4 {
+  width:200px;
+  height:200px;
+  position:absolute;
+  bottom:10px;
+  right:20px;
+  background-color:#FFC7E4;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="wrap"&gt;
+  &lt;div id="exemple_1"&gt;
+    &lt;pre&gt;
+      position: absolute;
+      left: 20px;
+      top: 20px;
+    &lt;/pre&gt;
+    &lt;p&gt;Le seul élément englobant pour ce div est la fenêtre principale. Elle se positionne par rapport à elle.&lt;/p&gt;
+  &lt;/div&gt;
+
+  &lt;div id="exemple_2"&gt;
+    &lt;pre&gt;
+      position: relative;
+      top: 0;
+      right: 0;
+    &lt;/pre&gt;
+    &lt;p&gt;La position est relative par rapport aux voisins.&lt;/p&gt;
+  &lt;/div&gt;
+
+  &lt;div id="exemple_3"&gt;
+    &lt;pre&gt;
+      float: right;
+      position: relative;
+      top: 20px;
+      left: 20px;
+    &lt;/pre&gt;
+    &lt;p&gt;La position est relative par rapport au div voisin mais on le retire du flux.&lt;/p&gt;
+
+    &lt;div id="exemple_4"&gt;
+      &lt;pre&gt;
+        position: absolute;
+        bottom: 10px;
+        right: 20px;
+      &lt;/pre&gt;
+      &lt;p&gt;La position est absolue à l'intérieur d'un parent positionné de façon relative.&lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples',1200,650)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'left')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>left</code> peut désormais être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Positioning', '#propdef-left', 'left')}}</td>
+   <td>{{Spec2('CSS3 Positioning')}}</td>
+   <td>Décrit le comportement pour le positionnement adhérent (<em>sticky</em>).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#propdef-left', 'left')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.left")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("position")}}</li>
+ <li>{{cssxref("right")}}</li>
+ <li>{{cssxref("bottom")}}</li>
+ <li>{{cssxref("top")}}</li>
+</ul>
diff --git a/files/fr/web/css/length-percentage/index.html b/files/fr/web/css/length-percentage/index.html
new file mode 100644
index 0000000000..9f58f905f2
--- /dev/null
+++ b/files/fr/web/css/length-percentage/index.html
@@ -0,0 +1,55 @@
+---
+title: <length-percentage>
+slug: Web/CSS/length-percentage
+tags:
+  - CSS
+  - Reference
+  - Type
+translation_of: Web/CSS/length-percentage
+---
+<div>{{CSSRef}}</div>
+
+<p>Le type de donnée <strong><code>&lt;length-percentage&gt;</code></strong> représente une valeur qui peut être une valeur de type {{Cssxref("length")}} ou une valeur de type {{Cssxref("percentage")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Se référer à la documentation des types {{Cssxref("length")}} et {{Cssxref("percentage")}} pour plus de détails sur les syntaxes possibles pour chacun de ces types.</p>
+
+<h2 id="Utilisation_avec_calc()">Utilisation avec <code>calc()</code></h2>
+
+<p>Lorsqu'une valeur de type <code>&lt;length-percentage&gt;</code> peut être utilisée dans une déclaration, cela signifie que le pourcentage sera résolu comme une longueur et qu'il peut alors être utilisé au sein d'une expression {{cssxref("calc", "calc()")}}. Ainsi, toutes les valeurs qui suivent sont acceptables pour la propriété {{Cssxref("width")}} :</p>
+
+<pre class="syntaxbox example-good">width: 200px;
+width: 20%;
+width: calc(100% - 200px);
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Values', '#mixed-percentages', '&lt;length-percentage&gt;')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#mixed-percentages', '&lt;length-percentage&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Définition du type <code>&lt;length-percentage&gt;</code>. Ajout de <code>calc()</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.types.length-percentage")}}</p>
diff --git a/files/fr/web/css/length/index.html b/files/fr/web/css/length/index.html
new file mode 100644
index 0000000000..33252fc014
--- /dev/null
+++ b/files/fr/web/css/length/index.html
@@ -0,0 +1,182 @@
+---
+title: <length>
+slug: Web/CSS/length
+tags:
+  - CSS
+  - Reference
+  - Type
+  - Type de donnée
+translation_of: Web/CSS/length
+---
+<div>{{CSSRef}}</div>
+
+<p>Le type de données CSS <strong><code>&lt;length&gt;</code></strong> correspond à une mesure de distance.</p>
+
+<p>De nombreuses propriétés CSS utilisent des valeurs de longueurs. Entre autres, on pourra énumérer {{cssxref("width")}}, {{cssxref("margin")}}, {{cssxref("padding")}}, {{cssxref("font-size")}}, {{cssxref("border-width")}}, {{cssxref("text-shadow")}}, …</p>
+
+<p>Pour certaines propriétés, l'utilisation d'une longueur négative est une erreur de syntaxe, pour d'autres, elles sont autorisées.</p>
+
+<p>On notera que bien que les valeurs {{cssxref("&lt;percentage&gt;")}} soient aussi des dimensions CSS et acceptées par certaines propriétés CSS acceptant les valeurs <code>&lt;length&gt;</code>, ce sont bien deux types distincts. Voir {{cssxref("&lt;length-percentage&gt;")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Une longueur est un nombre (type {{cssxref("&lt;number&gt;")}}) immédiatement suivi d'une unité de longueur (<code>px</code>, <code>em</code>, <code>pc</code>, <code>in</code>, <code>mm</code>…). Comme toutes les dimensions CSS, il n'y aucun espace entre le nombre et l'unité. L'unité est optionnelle pour la valeur nulle.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Certaines propriétés permettent d'utiliser des longueurs négatives alors que d'autres n'acceptent que des valeurs positives.</p>
+</div>
+
+<h3 id="Unités">Unités</h3>
+
+<h4 id="Unités_de_longueur_relatives">Unités de longueur relatives</h4>
+
+<p>Les longueurs relatives permettent d'indiquer une longueur basée sur la taille d'un caractère dans une police donnée, sur la taille de l'élément parent ou sur la taille de la zone d'affichage (<em>viewport</em>). Les unités associées permettent d'indiquer à quelle taille elles se rapportent.</p>
+
+<h5 id="Longueurs_liées_à_la_police">Longueurs liées à la police</h5>
+
+<p>Les unités relatives aux polices de caractères permettent d'obtenir des longueurs basées sur la taille d'un caractère ou la caractéristique de la police utilisée pour l'élément courant ou pour un élément parent.</p>
+
+<dl>
+ <dt><code>cap</code></dt>
+ <dd>Cette unité représente la taille nominale d'une lettre capitale pour la police ({{cssxref("font")}}) de l'élément.</dd>
+ <dt><a name="ch"><code>ch</code></a></dt>
+ <dd>Cette unité représente la largeur du caractère « 0 » (zéro, le caractère Unicode U+0030) dans la police actuelle. Dans les cas où il est impossible ou trop complexe de déterminer la taille du glyphe pour « 0 », on prend l'hypothèse que celui-ci mesure 0.5em de large sur 1em de haut.</dd>
+ <dt><a name="em"><code>em</code></a></dt>
+ <dd>
+ <p>Cette unité représente la {{cssxref("font-size")}} calculée de l'élément. Si utilisée avec la propriété {{cssxref("font-size")}}, elle représente la taille de police <em>héritée</em> de l'élément.</p>
+
+ <div class="note">
+ <p>Cette unité est souvent utilisée pour créer des mises en page s'adaptant à la taille des contenus, qui gardent le <a href="http://24ways.org/2006/compose-to-a-vertical-rhythm/">rythme vertical de la page</a>, même lorsque l'utilisateur change la taille des polices. Les propriétés CSS {{cssxref("line-height")}}, {{cssxref("font-size")}}, {{cssxref("margin-bottom")}} et {{cssxref("margin-top")}} ont souvent des dimensions exprimées en <strong>em</strong>.</p>
+ </div>
+ </dd>
+ <dt><a name="ex"><code>ex</code></a></dt>
+ <dd>Cette unité représente la <a href="https://fr.wikipedia.org/wiki/Hauteur_d%27x">hauteur d'x</a> de la {{cssxref("font")}} de l'élément. Il peut s'agir généralement de la hauteur des lettres bas de casse de la police. <code>1ex ≈ 0.5em</code> dans de nombreuses polices.</dd>
+ <dt><code>ic</code></dt>
+ <dd>Cette unité représente la largeur entre le début du caractère “水” (U+6C34) et le début du caractère suivant selon la police utilisée et après que les transformations qui modifient la taille des caractères aient été appliquées.</dd>
+ <dt><code>lh</code></dt>
+ <dd>Cette unité représente la valeur calculée de la propriété {{cssxref("line-height")}}, convertie en longueur absolue, de l'élément sur lequel elle est utilisée.</dd>
+ <dt><a name="rem"><code>rem</code></a></dt>
+ <dd>
+ <p>Cette unité représente la {{cssxref("font-size")}} de l'élément racine (par exemple la taille de la police de l'élément {{HTMLElement("html")}}). Quand utilisée avec {{cssxref("font-size")}} sur l'élément racine, elle représente sa valeur initiale.</p>
+
+ <div class="note">
+ <p>Cette unité est utile pour la création de mises en page s'adaptant à la taille des contenus. Si elle n'est pas supportée par les navigateurs ciblés, ces mises en pages peuvent être réalisées en utilisant l'unité <strong>em</strong>, mais la réalisation est un petit peu plus complexe.</p>
+ </div>
+ </dd>
+ <dt><code>rlh</code></dt>
+ <dd>Cette unité représente la valeur calculée de la propriété {{cssxref("line-height")}} de l'élément racine, convertie en longueur absolue. Lorsque cette unité est utilisée pour les propriétés {{cssxref("font-size")}} ou {{cssxref("line-height")}} de l'élément racine, l'unité <code>rlh</code> fait référence aux valeurs initiales des propriétés.</dd>
+</dl>
+
+<h5 id="Longueurs_liées_au_viewport">Longueurs liées au <em>viewport</em></h5>
+
+<p>Les longueurs liées au <em>viewport</em> définissent une longueur relative à la taille du <em>viewport</em>, qui correspond à la partie visible du document.</p>
+
+<p>Dans un bloc de déclaration {{cssxref("@page")}}, l'utilisation des longueurs liées au <em>viewport</em> sont invalides et la déclaration sera ignorée.</p>
+
+<dl>
+ <dt><code>vb</code></dt>
+ <dd>1 % de la taille du bloc englobant initial selon la direction de bloc (la direction orthogonale au sens d'écriture) de l'élément racine.</dd>
+ <dt><a name="vh"><code>vh</code></a></dt>
+ <dd>1/100<sup>e</sup> de la hauteur du <em>viewport</em>.</dd>
+ <dt><code>vi</code></dt>
+ <dd>1 % de la taille du bloc englobant initial selon la direction en ligne (la direction du sens d'écriture) de l'élément racine.</dd>
+ <dt><a name="vw"><code>vw</code></a></dt>
+ <dd>1/100<sup>e</sup> de la largeur du <em>viewport</em>.</dd>
+ <dt><a name="vmin"><code>vmin</code></a></dt>
+ <dd>1/100<sup>e</sup> du côté le plus petit du <em>viewport</em>.</dd>
+ <dt><a name="vmax"><code>vmax</code></a></dt>
+ <dd>1/100<sup>e</sup> du côté le plus grand du <em>viewport</em>.</dd>
+</dl>
+
+<h4 id="Unités_de_longueur_absolues">Unités de longueur absolues</h4>
+
+<p>Les unités de longueur absolues représentent une mesure physique. Cela est réalisé en faisant correspondre une des unités à une unité physique et en définissant les autres relativement à elle. La correspondance est différente pour les périphériques basse-résolution, tels que les écrans, et pour les périphériques haute-résolution, comme les imprimantes.</p>
+
+<p>Pour les périphériques ayant un faible nombre de points par pouce, l’unité <strong>px</strong> représente le pixel de <em>référence physique</em> et les autres sont définies de façon relative à lui. Ainsi, <code>1in</code> est définit comme <code>96px</code>, ce qui équivaut à <code>72pt</code>. Sur de tels périphériques, cette définition à pour conséquence que la longueur exprimée en pouces (<code>in</code>), centimètres (<code>cm</code>) et millimètres (<code>mm</code>) ne correspondent pas forcément à la longueur de l’unité physique du même nom.</p>
+
+<p>Pour les périphériques ayant un nombre de points par pouce élevé, les pouces (<code>in</code>), centimètres (<code>cm</code>) et millimètres (<code>mm</code>) sont définis comme leur équivalent physique. Par conséquent, l’unité <strong>px</strong> est définie comme étant relavite à eux (1/96 de pouce).</p>
+
+<div class="note">
+<p><strong>Note :</strong> Les utilisateurs peuvent augmenter la taille des polices pour des raisons d’accessibilité. Pour permettre des mises en page adaptées quelque soit la taille des polices, utilisez uniquement des unités de longueur quand les caractéristiques physiques du média de sortie sont connues, telles que les images matricielles (bitmap) et sinon, privilégiez les unités relatives telles que <code>em</code> et <code>rem</code> (notamment pour {{cssxref("font-size")}}).</p>
+</div>
+
+<dl>
+ <dt><a name="px"><code>px</code></a></dt>
+ <dd>Pour l'affichage sur écran, correspond typiquement à un pixel de l'affichage. Pour les écrans en haute résolution et les imprimantes, un pixel CSS correspond à plusieurs pixels du périphérique, de sorte que le nombre de pixels par pouce (ppi) reste aux alentours de 96.</dd>
+ <dt><a name="mm"><code>mm</code></a></dt>
+ <dd>Un millimètre. Pour l'affichage sur écran, le nombre de pixels par millimètre est déterminé par l'estimation du système (souvent incorrecte) de la résolution de son affichage.</dd>
+ <dt><code>Q</code>{{experimental_inline}}</dt>
+ <dd>Un quart de millimètre (1/40<sup>e</sup> de centimètre).</dd>
+ <dt><a name="cm"><code>cm</code></a></dt>
+ <dd>Un centimètre (ou 10 millimètres). Pour l'affichage sur écran, le nombre de pixels par centimètre est déterminé par l'estimation du système (souvent incorrecte) de la résolution de son affichage.</dd>
+ <dt><a name="in"><code>in</code></a></dt>
+ <dd>Un pouce (soit 2,54 centimètres). Pour l'affichage sur écran, le nombre de pixels par pouce est déterminé par l'estimation du système (souvent incorrecte) de la résolution de son affichage.</dd>
+ <dt><a name="pt"><code>pt</code></a></dt>
+ <dd>Un point pica (soit 1/72<sup>e</sup> de pouce). Pour l'affichage sur écran, le nombre de pixels par point est déterminé par l'estimation du système (souvent incorrecte) de la résolution de son affichage.</dd>
+ <dt><a name="pc"><code>pc</code></a></dt>
+ <dd>Un pica (soit 12 points, soit 1/6<sup>e</sup> de pouce). Pour l'affichage sur écran, le nombre de pixels par pica est déterminé par l'estimation du système (souvent incorrecte) de la résolution de son affichage.</dd>
+ <dt><code><a name="mozmm">mozmm</a></code> {{non-standard_inline}}, retiré avec Firefox 59</dt>
+ <dd>Une unité expérimentale qui tente de représenter exactement un millimètre, quelque soit la taille ou la résolution de l’affichage. C’est rarement ce que nous voulons, mais peut être utile en particulier pour les terminaux mobiles.</dd>
+</dl>
+
+<h2 id="Unités_CSS_et_points_par_pouce">Unités CSS et points par pouce</h2>
+
+<p class="note">L’unité <code>in</code> ne représente pas un pouce physique de l’écran, mais <code>96px</code>. Celà signifie que quelque soit la densité de pixel réelle de l’écran, elle est supposée correspondre à <code>96dpi</code>. Sur les périphériques dotés d’une plus grande densité de pixel, <code>1in</code> fera moins d’1 pouce physique. De la même manière, <code>mm</code>, <code>cm</code>, et <code>pt</code> ne sont pas des longueurs absolues.</p>
+
+<p>Quelques exemples particuliers :</p>
+
+<ul>
+ <li><code>1in</code> est toujours égal à <code>96px,</code></li>
+ <li><code>3pt</code> est toujours égal à <code>4px</code>,</li>
+ <li><code>25.4mm</code> est toujours égal à <code>96px.</code></li>
+</ul>
+
+<h2 id="Interpolation">Interpolation</h2>
+
+<p>Les valeurs du type <code>&lt;length&gt;</code> peuvent être interpolées de manière à rendre les animations possibles. Dans ce cas l'interpolation se fait par des nombres réels à virgule flottante. L'interpolation se fait sur les valeurs calculées. La rapidité de l'interpolation est déterminée par la {{cssxref("timing-function","fonction de temporisation","",1)}} associée à l'animation.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Spécification</th>
+   <th>État</th>
+   <th>Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Values', '#lengths', '&lt;length&gt;')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td>Ajout des unités <code>vi</code>, <code>vb</code>, <code>ic</code>, <code>lh</code> et <code>rlh</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#lengths', '&lt;length&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Ajout des unités <code>ch</code>, <code>rem</code>, <code>vw</code>, <code>vh</code>, <code>vmin</code>, <code>vmax</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'syndata.html#length-units', '&lt;length&gt;')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition explicite des unités <code>em</code>, <code>pt</code>, <code>pc</code>, <code>px</code> (la définition était implicite pour CSS1)</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#length-units', '&lt;length&gt;')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale. Définition implicite des unités <code>em</code>, <code>pt</code>, <code>pc</code> et <code>px</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.types.length")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/Values_and_units">Tutoriel sur les unités et valeurs CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/Valeurs_et_unités_CSS">Référence des unités et valeurs en CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/Modèle_de_boîte_CSS">Modèle de boîtes CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/letter-spacing/index.html b/files/fr/web/css/letter-spacing/index.html
new file mode 100644
index 0000000000..9a2f305952
--- /dev/null
+++ b/files/fr/web/css/letter-spacing/index.html
@@ -0,0 +1,131 @@
+---
+title: letter-spacing
+slug: Web/CSS/letter-spacing
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/letter-spacing
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>letter-spacing</code></strong> définit <a href="https://fr.wikipedia.org/wiki/Interlettre">l'interlettre</a> utilisée pour les caractères qui composent le texte.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/letter-spacing.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+letter-spacing: 0.3em;
+letter-spacing: 3px;
+letter-spacing: .3px;
+
+/* Valeur avec mot-clé */
+letter-spacing: normal;
+
+/* Valeurs globales */
+letter-spacing: inherit;
+letter-spacing: initial;
+letter-spacing: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>L'interlettre est dictée par la police utilisée. À la différence de 0, cette valeur permet à l'agent utilisateur de modifier l'espace entre les caractères afin de le justifier.</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Cette valeur indique l'espace <strong>ajouté</strong> à l'espace par défaut. Les valeurs peuvent être négatives mais les limites imposées dépendent de l'implémentation du moteur. Les agents utilisateurs ne pourront plus augmenter ou réduire l'interlettre afin de justifier le texte. Pour les différentes unités possibles, se référer à la page {{cssxref("&lt;length&gt;")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.premier    { letter-spacing: 0.4em; }
+.deuxieme   { letter-spacing: 1em; }
+.troisieme  { letter-spacing: -0.05em; }
+.quatrieme  { letter-spacing: 6px; }</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="premier"&gt;Et voici l'interlettre&lt;/p&gt;
+&lt;p class="deuxieme"&gt;Et voici l'interlettre&lt;/p&gt;
+&lt;p class="troisieme"&gt;Et voici l'interlettre&lt;/p&gt;
+&lt;p class="quatrieme"&gt;Et voici l'interlettre&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', 440, 185)}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Utiliser une valeur trop grande (positive ou négative) pour <code>letter-spacing</code> rendra les mots illisibles. Si une valeur positive trop importante est utilisée, les lettres seront trop éloignées les unes des autres et on ne pourra pas distinguer les mots. Si une valeur négative trop faible est employée, les lettres se chevaucheront et on ne pourra pas lire le texte.</p>
+
+<p>L'espacement doit être déterminé au cas par cas car chaque famille de polices utilise des caractères de largeurs différentes. Il n'existe pas de valeur unique qui permette de s'assurer que, quelle que soit la police utilisée, le texte soit lisible.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener"><em>Understanding Success Criterion 1.4.8, W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text', '#letter-spacing-property', 'letter-spacing')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'letter-spacing')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>letter-spacing</code> peut désormais être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html#propdef-letter-spacing', 'letter-spacing')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'text.html#LetterSpacingProperty', 'letter-spacing')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Définition initiale pour SVG.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#letter-spacing', 'letter-spacing')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.letter-spacing")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("font-kerning")}}</li>
+</ul>
diff --git a/files/fr/web/css/line-break/index.html b/files/fr/web/css/line-break/index.html
new file mode 100644
index 0000000000..8395c08a3a
--- /dev/null
+++ b/files/fr/web/css/line-break/index.html
@@ -0,0 +1,70 @@
+---
+title: line-break
+slug: Web/CSS/line-break
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/line-break
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>line-break</code></strong> définit la façon dont les sauts de ligne sont gérés. Cette propriété affecte uniquement les textes en chinois, japonais ou coréen (CJK).</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+line-break: auto;
+line-break: loose;
+line-break: normal;
+line-break: strict;
+
+/* Valeurs globales */
+line-break: inherit;
+line-break: initial;
+line-break: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Les sauts de ligne sont gérés avec la règle par défaut.</dd>
+ <dt><code>loose</code></dt>
+ <dd>Les sauts de ligne sont appliqués afin d'obtenir des lignes courtes (comme pour un journal). L'agent utilisateur fixera une règle souple en fonction des conventions liées à la langue utilisée.</dd>
+ <dt><code>normal</code></dt>
+ <dd>L'agent utilisateur utilisera les règles normales liées à la langue utilisée</dd>
+ <dt><code>strict</code></dt>
+ <dd>L'agent utilisateur utilisera des règles strictes et passera à la ligne dès que ce sera nécessaire au vu des caractères du langage utilisé.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text', '#line-break-property', 'line-break')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.line-break")}}</p>
diff --git a/files/fr/web/css/line-height-step/index.html b/files/fr/web/css/line-height-step/index.html
new file mode 100644
index 0000000000..7006bee134
--- /dev/null
+++ b/files/fr/web/css/line-height-step/index.html
@@ -0,0 +1,85 @@
+---
+title: line-height-step
+slug: Web/CSS/line-height-step
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/line-height-step
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété <strong><code>line-height-step</code></strong> définit le pas de hauteur des boîtes de ligne. Quand le pas est positif, les hauteurs des boîtes de ligne sont arrondies au pas le plus proche. Les valeurs négatives sont invalides.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec une longueur */
+line-height-step: 18pt;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <code>line-height-step</code> peut être définie avec une valeur de type <code><a href="#&lt;length>">&lt;length&gt;</a></code>.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code><a id="&lt;length>" name="&lt;length>">&lt;length&gt;</a></code></dt>
+ <dd>La longueur indiquée est utilisée pour calculer le « pas » pour la hauteur de la boîte de chaque ligne. Voir {{cssxref("&lt;length&gt;")}} pour plus d'informations sur ce type de valeur.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p id="sect1">Dans l'exemple suivant, la hauteur de la boîte des lignes pour chaque paragraphe est arrondie à l'unité supérieure. La boîte de la ligne pour l'élément <code>&lt;h1&gt;</code> ne tient pas sur une unité et en occupe donc deux (mais est toujours centrée sur ces deux unités).</p>
+
+<pre class="brush: css">:root {
+  font-size: 12pt;
+  --my-grid: 18pt;
+  line-height-step: var(--my-grid);
+}
+h1 {
+  font-size: 20pt;
+  margin-top: calc(2 * var(--my-grid));
+}</pre>
+
+<p>Voici le résultat obtenu avec une capture d'écran :</p>
+
+<p><img alt="How the line-height-step property affects the appearance of text." src="https://mdn.mozillademos.org/files/15257/line-grid-center.png" style="height: 340px; width: 144px;"></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Rhythmic Sizing', '#line-height-step', 'line-height-step')}}</td>
+   <td>{{Spec2('CSS Rhythmic Sizing')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.line-height-step")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("font")}}</li>
+ <li>{{cssxref("font-size")}}</li>
+ <li>{{cssxref("line-height")}}</li>
+</ul>
diff --git a/files/fr/web/css/line-height/index.html b/files/fr/web/css/line-height/index.html
new file mode 100644
index 0000000000..dc8f2b105c
--- /dev/null
+++ b/files/fr/web/css/line-height/index.html
@@ -0,0 +1,187 @@
+---
+title: line-height
+slug: Web/CSS/line-height
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/line-height
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <code><strong>line-height</strong></code> définit la hauteur de la boîte d'une ligne.</p>
+
+<p>Sur les éléments de bloc, la propriété <strong><code>line-height</code></strong> indique la hauteur minimale des lignes au sein de l'élément. Sur les éléments en ligne qui ne sont pas <a href="/fr/docs/Web/CSS/Élément_remplacé">remplacés</a>, <strong><code>line-height</code></strong> indique la hauteur utilisée pour calculer la hauteur de la boîte d'une ligne.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/line-height.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css">/* Valeur avec un mot-clé */
+line-height: normal;
+
+/* Type &lt;number&gt; */
+/* S'il n'y a pas d'unité, cela
+   représente un facteur multiplicateur
+   de la taille de la police appliquée à
+   l'élément */
+line-height: 3.5;
+
+/* Valeur de longueur */
+/* Type &lt;length&gt;      */
+line-height: 3em;
+
+/* Valeurs proportionnelles */
+/* Type &lt;percentage&gt;        */
+line-height: 34%;
+
+/* Valeurs globales */
+line-height: inherit;
+line-height: initial;
+line-height: unset;
+</pre>
+
+<p>La propriété <code>line-height</code> peut être définie grâce :</p>
+
+<ul>
+ <li>à un nombre (une valeur de type <code><a href="#number">&lt;number&gt;</a></code>)</li>
+ <li>à une longueur (une valeur de type <code><a href="#length">&lt;length&gt;</a></code>)</li>
+ <li>à un pourcentage (une valeur de type <code><a href="#percentage">&lt;percentage&gt;</a></code>)</li>
+ <li>au mot-clé <code><a href="#normal">normal</a></code></li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><a id="normal" name="normal"><code>normal</code></a></dt>
+ <dd>Le comportement dépend de l'agent utilisateur. Pour les navigateurs de bureau, l'agent utilisateur prend généralement une valeur environ égale à 1.2  selon la valeur de <code>font-family</code>.</dd>
+ <dt><a id="number" name="number"><code>&lt;number&gt;</code></a></dt>
+ <dd>La valeur utilisée est <strong>sans unité</strong> (type {{cssxref("&lt;number&gt;")}}) et correspond à un facteur multiplicateur de la taille de fonte utilisée. La valeur calculée est la même que celle définie avec <code>&lt;number&gt;</code>. Dans la plupart des cas, c'est la méthode qu'on privilégiera pour définir <code>line-height</code> et éviter les effets de l'héritage.</dd>
+ <dt><a id="length" name="length"><code>&lt;length&gt;</code></a></dt>
+ <dd>La valeur de longueur (type {{cssxref("&lt;length&gt;")}}) est utilisée pour calculer la hauteur de la boîte de la ligne. Les différentes unités qui peuvent être utilisées sont décrites avec la page {{cssxref("&lt;length&gt;")}}. Les valeurs exprimées en <code>em</code> peuvent produire des résultats inattendus.</dd>
+ <dt><a id="percentage" name="percentage"><code>&lt;percentage&gt;</code></a></dt>
+ <dd>La valeur exprimée est relative à la taille de fonte utilisée pour l'élément. La valeur calculée sera le pourcentage (type {{cssxref("&lt;percentage&gt;")}}) indiqué, multiplié par la taille calculée de la police de l'élément. Voir la section Notes pour plus de précisions sur le comportement de ce type et des valeurs exprimées en <code>em</code>.</dd>
+ <dt><code>-moz-block-height</code> {{non-standard_inline}}</dt>
+ <dd>La hauteur de la ligne correspond à la hauteur du contenu pour le bloc courant.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">/* Toutes les règles qui suivent
+   fourniront un résultat équivalent */
+
+div { line-height: 1.2;   font-size: 10pt }   /* number */
+div { line-height: 1.2em; font-size: 10pt }   /* length */
+div { line-height: 120%;  font-size: 10pt }   /* percentage */
+div { font: 10pt/1.2  Georgia,"Bitstream Charter",serif }</pre>
+
+<h3 id="Notes">Notes</h3>
+
+<ul>
+ <li>Plus souvent, on utilisera la propriété raccourcie {{cssxref("font")}} plutôt que <code>line-height</code>. Pour cette propriété raccourcie, il est cependant nécessaire d'avoir une valeur pour la propriété <code>font-family</code>.</li>
+</ul>
+
+<h3 id="Gestion_de_l'héritage_et_valeurs_sans_unité">Gestion de l'héritage et valeurs sans unité</h3>
+
+<p>Dans cet exemple, on voit qu'il est préférable d'utiliser des valeurs de type {{cssxref("&lt;number&gt;")}} plutôt que des valeurs de longueur (type {{cssxref("&lt;length&gt;")}}.</p>
+
+<p>On utilisera deux éléments {{HTMLElement("div")}}. Le premier aura une bordure verte et une valeur sans unité. Le second aura une bordure rouge et une valeur de longueur</p>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.green {
+  line-height: 1.1;
+  border: solid limegreen;
+}
+.red {
+  line-height: 1.1em;
+  border: solid red;
+}
+h1 {
+  font-size: 30px;
+}
+.box {
+  width: 18em;
+  display: inline-block;
+  vertical-align: top;
+  font-size: 15px;
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="box green"&gt;
+ &lt;h1&gt;Avoid unexpected results by using unitless line-height&lt;/h1&gt;
+  length and percentage line-heights have poor inheritance behavior ...
+&lt;/div&gt;
+
+&lt;div class="box red"&gt;
+ &lt;h1&gt;Avoid unexpected results by using unitless line-height&lt;/h1&gt;
+  length and percentage line-heights have poor inheritance behavior ...
+&lt;/div&gt;
+
+&lt;!-- La première hauteur pour &lt;h1&gt; est calculée à partir de sa propre hauteur  (30px × 1.1) = <strong>33px</strong>  --&gt;
+&lt;!-- La hauteur du deuxième &lt;h1&gt; est basée sur la hauteur du div (15px × 1.1) = <strong>16.5px</strong> ... --&gt;
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Gestion_de_l'héritage_et_valeurs_sans_unité", '100%', '200', '')}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Il est nécessaire d'utiliser une valeur minimale de <code>1.5</code> pour la propriété <code>line-height</code> lorsqu'on l'applique sur le contenu des paragraphes principaux. Cela aidera les personnes ayant du mal à lire et les personnes dyslexiques. Utiliser une valeur sans unité permet de garantir une mise à l'échelle proportionnelle lorsqu'on zoome/dézoome.</p>
+
+<ul>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html"><em>Visual Presentation: Understanding SC 1.4.8, Understanding WCAG 2.0</em> (en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'line-height')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>line-height</code> peut désormais être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visudet.html#propdef-line-height', 'line-height')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Aucun changement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#line-height', 'line-height')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.line-height")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("font")}}</li>
+ <li>{{cssxref("font-size")}}</li>
+</ul>
diff --git a/files/fr/web/css/linear-gradient()/index.html b/files/fr/web/css/linear-gradient()/index.html
new file mode 100644
index 0000000000..155ead9fe4
--- /dev/null
+++ b/files/fr/web/css/linear-gradient()/index.html
@@ -0,0 +1,296 @@
+---
+title: linear-gradient
+slug: Web/CSS/linear-gradient()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+translation_of: Web/CSS/linear-gradient()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>linear-gradient()</code></strong> permet de créer une image (type {{cssxref("&lt;image&gt;")}}) représentant un dégradé de couleur linéaire. Le résultat de la fonction sera un objet CSS {{cssxref("&lt;gradient&gt;")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-linear-gradient.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Comme pour les autres types de dégradés, la valeur obtenue n'est pas une couleur CSS (type {{cssxref("&lt;color&gt;")}} mais une image <a href="fr/docs/Web/CSS/image">sans dimension intrinsèque</a>. Autrement dit, celle-ci ne possède aucune taille « naturelle » ou préférée, sa taille réelle correspondra à la taille de l'élément auquel elle est appliquée.</p>
+
+<p>Les dégradés linéaires sont définis par un axe : la <em>ligne du dégradé</em>. Chaque point de cette ligne aura une couleur différente. Les lignes perpendiculaires à la ligne du dégradé ont chacune une couleur qui est celle du point se situant sur la ligne du dégradé à ce niveau.</p>
+
+<p><img alt="linear-gradient.png" src="/files/3537/linear-gradient.png" style="float: left; height: 383px; width: 309px;"></p>
+
+<p>La ligne du dégradé est définie par le centre de la boîte contenant le dégradé et par un angle. Les couleurs du dégradé sont définies par différents points : le point de départ et le point d'arrivée. Entre ces deux points, on peut avoir différents points d'arrêt définissant la couleur à ce niveau.</p>
+
+<p>Le point de départ utilise la couleur initiale du dégradé. Ce point est défini comme l'intersection de la ligne du dégradé et de la ligne perpendiculaire à cette droite et qui passe par le coin de la boîte situé dans le même quadrant.</p>
+
+<p>De la même façon, le point d'arrivée est le point de la ligne du dégradé où la couleur finale est atteinte. Il peut également être défini comme l'intersection entre la ligne du dégradé et une ligne perpendiculaire, passant par le coin le plus proche.</p>
+
+<p>Ces définitions plutôt complexes ont des conséquence plutôt intéressantes : les coins les plus proches de ces deux points (parfois appelés « coins magiques ») ont les couleurs de départ et de fin.</p>
+
+<p>Il est possible de définir des couleurs intermédiaires grâce à des points d'arrêt de couleurs qui seront situés sur la ligne du dégradé. Cela permet de créer une transition non linéaire ou d'utiliser plusieurs couleurs sur un seul dégradé. </p>
+
+<p>Lorsque la position d'un point d'arrêt est définie de façon implicite, celui-ci sera placé à mi-chemin entre le point précédent et le point suivant. Sa position pourra aussi être définie explicitement grâce à une valeur {{cssxref("&lt;length&gt;")}} ou {{cssxref("&lt;percentage&gt;")}}.</p>
+
+<p>La fonction <code>linear-gradient</code> ne permet pas de répéter le motif du dégradé. Pour cela, on pourra utiliser la propriété {{cssxref("repeating-linear-gradient")}}.</p>
+
+<div class="note"><strong>Note : </strong>Les dégradés sont des valeurs de type <code>&lt;image&gt;</code> et non des couleurs (type {{cssxref("&lt;color&gt;")}}. Aussi, <code>linear-gradient</code> ne pourra pas être utilisée sur {{cssxref("background-color")}} et sur les autres propriétés qui n'acceptent que des valeurs de type <code>&lt;color&gt;</code>.</div>
+
+<h2 id="Paramétrer_des_dégradés">Paramétrer des dégradés</h2>
+
+<p>En ajoutant plus de points d'arrêt de couleurs sur la ligne du dégradé, il est possible de créer des transitions complexes entre plusieurs couleurs. La position d'un point d'arrêt peut être définie de façon explicite en utilisant une longueur (valeur de type {{cssxref("&lt;length&gt;")}}) ou un pourcentage (valeur de type {{cssxref("&lt;percentage&gt;")}}). Si l'emplacement du point d'arrêt n'est pas indiqué, il sera placé à mi-chemin entre les deux points d'arrêt adjacents. Aussi, les deux instructions suivantes sont synonymes :</p>
+
+<pre class="brush: css notranslate">linear-gradient(red, orange, yellow, green, blue);
+linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);
+</pre>
+
+<p>Par défaut, la transition entre les couleurs de deux points d'arrêt se fait de façon linéaire et la couleur intermédiaire se situera à mi-chemin. Toutefois, il est possible de déplacer cette couleur intermédiaire entre les deux points d'arrêt en fournissant une indication sur l'emplacement du milieu de la transition. L'instruction qui suit permet de définir un dégradé qui commence par du rouge allant jusqu'à 10%, passe du rouge au bleu avec la couleur intermédiaire située à 30% de la ligne puis finit en bleu pur sur les 10% de la fin de la longueur.</p>
+
+<pre class="brush: css notranslate">linear-gradient(red 10%, 30%, blue 90%);</pre>
+
+<p>Si deux points d'arrêt de couleur sont situés au même emplacement, il y aura une ligne de rupture brutale entre les deux couleus des deux points d'arrêts.</p>
+
+<p>L'ordre des points d'arrêt est important. Si les points d'arrêt ne sont pas déclarés dans l'ordre, les points d'arrêts de valeur inférieure et situés après surchargeront les points précédents. Autrement dit, si une valeur supérieure est située avant une valeur inférieure, la première n'aura aucun effet. Avec le fragment de code qui suit, on obtient un dégradé qui commence en rouge, passe en jaune à 30% puis à bleu à 65%.</p>
+
+<pre class="brush: css notranslate">linear-gradient(red 40%, yellow 30%, blue 65%);
+</pre>
+
+<p>Il est possible de définir plusieurs positions d'arrêt sur une même couleur pour des points d'arrêt adjacents. Ainsi, les trois dégradés suivants sont équivalents :</p>
+
+<pre class="brush: css notranslate">linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%);
+linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90%);
+linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);
+</pre>
+
+<p>Par défaut, lorsqu'aucune couleur n'est définie pour le point d'arrêt 0%, c'est la couleur du premier point d'arrêt qui est utilisée au début du dégradé. De même, si aucune couleur n'est explicitement déclarée pour la position 100%, c'est la couleur du dernier point d'arrêt qui sera prolongée.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css notranslate">/* Un dégradé suivant une ligne à 45°
+ qui démarre en bleu et finit en rouge */
+linear-gradient(45deg, blue, red);
+
+/* Un dégradé qui démarre en bas à droite,
+   qui démarre en bleu et finit en rouge */
+linear-gradient(to left top, blue, red);
+
+/* Un dégradé qui démarre du bas et va vers le haut
+   qui commence en bleu, passe en vert à 40% et termine
+   en rouge */
+linear-gradient(0deg, blue, green 40%, red);
+
+/* Indication de couleur : un dégradé de gauche à droite
+   qui commmence en rouge et dont la couleur intermédiaire
+   est située à 10% et laisse les 90% pour la seconde
+   moitié de la transition vers le bleu */
+linear-gradient(.25turn, red, 10%, blue);
+
+/* Plusieurs points d'arrêt par couleur : un dégradé
+   orienté de 45° avec une moitié inférieure gauche
+   rouge et une moitié supérieure droite bleue avec
+   une ligne franche au milieu */
+linear-gradient(45deg, red 0 50%, blue 50% 100%);
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;side-or-corner&gt;</code></dt>
+ <dd>Représente la position du point de départ de la ligne du dégradé. Elle consiste en deux mots-clés : le premier indique le côté horizontal : <code>left</code> ou <code>right</code> ; le second indique le côté vertical : <code>top</code> ou <code>bottom</code>. L'ordre n'est pas pertinent et chaque mot-clé est optionnel. Si la valeur est absente, elle vaudra <code>to bottom</code> par défaut. Les valeurs <code>to top</code>, <code>to bottom</code>, <code>to left</code> et <code>to right</code> correspondent respectivement aux angles <code>0deg</code>, <code>180deg</code>, <code>270deg</code>, <code>90deg</code>. Les autres valeurs sont traduites en angles à partir de <code>to top</code> et dans le sens des aiguilles d'une montre. Le point d'arrivé est défini comme le symétrique du point de départ par rapport au centre de la boîte.</dd>
+ <dt><code>&lt;angle&gt;</code></dt>
+ <dd>L'angle de la direction du dégradé. L'angle démarre à partir de <code>to top</code> et progresse dans le sens des aiguilles d'une montre. Pour plus de détails, voir {{cssxref("&lt;angle&gt;")}}.</dd>
+ <dt><code>&lt;linear-color-stop&gt;</code></dt>
+ <dd>Un valeur composée d'une valeur {{cssxref("&lt;color&gt;")}} éventuellement suivie d'une position (un pourcentage ou une longueur {{cssxref("&lt;length&gt;")}}) sur l'axe du dégradé. L'affichage des points d'arrêt de couleur en CSS suit les mêmes règles que les <a href="/fr/docs/Web/SVG/Tutorial/Gradients">dégradés SVG</a>.</dd>
+ <dt><code>&lt;color-hint&gt;</code></dt>
+ <dd>Cette valeur est une indication pour l'emplacement de la couleur moyenne entre les deux couleurs des points d'arrêt adjacents. Si cette valeur n'est pas utilisée, la moitié de la transition se produit à équidistance entre les deux points d'arrêt.</dd>
+</dl>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Le rendu des points d'arrêts de couleur pour les dégradés CSS suit les mêmes règles que celui pour les points d'arrêts de couleur pour les <a href="/fr/docs/Web/SVG/Tutoriel/Gradients">dégradés SVG</a>.</p>
+</div>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">linear-gradient(
+  [ <a href="/fr/CSS/angle">&lt;angle&gt;</a> | to &lt;side-or-corner&gt; ,]? &lt;color-stop-list&gt; )
+  \---------------------------------/ \----------------------------/
+    Définition de la ligne du dégradé   Liste des arrêts de couleur
+
+où &lt;side-or-corner&gt; = [ left | right ] || [ top | bottom ]
+  et &lt;color-stop-list&gt; = [ &lt;linear-color-stop&gt; [, &lt;color-hint&gt;? ]? ]#, &lt;linear-color-stop&gt;
+  et &lt;linear-color-stop&gt; = &lt;color&gt; [ &lt;color-stop-length&gt; ]?
+  et &lt;color-stop-length&gt; = [ &lt;percentage&gt; | &lt;length&gt; ]{1,2}
+  et &lt;color-hint&gt; = [ &lt;percentage&gt; | &lt;length&gt; ]</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Dégradé_à_45_degrés">Dégradé à 45 degrés</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  background: linear-gradient(135deg, red, blue);
+}</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div style="width: 200px; height: 200px;"&gt;&lt;/div&gt;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Dégradé_à_45_degrés")}}</p>
+
+<h3 id="Décalage_du_début">Décalage du début</h3>
+
+<p>Parfois, on veut que le dégradé commence après le début de la ligne. Pour cela, on ajoute un point d'arrêt de la même couleur que la couleur de début.</p>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  background: linear-gradient(135deg, red, red 60%, blue);
+}</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div style="width: 200px; height: 200px;"&gt;&lt;/div&gt;</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Décalage_du_début")}}</p>
+
+<h3 id="Un_dégradé_avec_plusieurs_couleurs">Un dégradé avec plusieurs couleurs</h3>
+
+<p>Si la position du premier point d'arrêt n'est pas définie par une valeur <code>&lt;length&gt;</code> ou <code>&lt;percentage&gt;</code>, sa valeur par défaut sera 0%. Si la position du dernier point d'arrêt n'est pas définie par une valeur <code>&lt;length&gt;</code> ou <code>&lt;percentage&gt;</code>, sa valeur par défaut sera 100%. Si un point d'arrêt n'a aucune indication de position et que ce n'est ni le premier ni le dernier, celui-ci sera situé à mi-chemin entre les deux points d'arrêts qui l'entourent.</p>
+
+<p>Les points d'arrêt doivent être définis dans l'ordre. Une fois les valeurs associées au premier et au dernier point d'arrêt, si la position d'un point d'arrêt intermédiaire est définie « avant » un point d'arrêt déclaré avant, la position réelle du point d'arrêt intermédiaire sera ramenée à la position du point d'arrêt précédent.</p>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
+}
+</pre>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;Un arc-en-ciel dégradé&lt;/div&gt;</pre>
+
+<h4 id="Résultat_3">Résultat</h4>
+
+<p>{{EmbedLiveSample("Un_dégradé_avec_plusieurs_couleurs")}}</p>
+
+<h3 id="Répéter_un_dégradé_linéaire">Répéter un dégradé linéaire</h3>
+
+<p>La fonction <code>linear-gradient</code> ne permet pas de répéter un dégradé (par défaut le dégradé sera étiré pour remplir tout l'élément). Pour obtenir cette répétition, il faudra utiliser la fonction {{cssxref("repeating-linear-gradient")}}.</p>
+
+<h3 id="Utiliser_la_transparence">Utiliser la transparence</h3>
+
+<h4 id="CSS_4">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  background: linear-gradient(to bottom right, red, rgba(0,0,0,0));
+}</pre>
+
+<h4 id="HTML_4">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;Un dégradé linéaire avec de la transparence&lt;/div&gt;</pre>
+
+<h4 id="Résultat_4">Résultat</h4>
+
+<p>{{EmbedLiveSample("Utiliser_la_transparence")}}</p>
+
+<h3 id="Des_dégradés_pour_les_différents_navigateurs">Des dégradés pour les différents navigateurs</h3>
+
+<p>Chaque moteur possède des préfixes différents. Voici un dégradé allant du rose vers le vert et de haut en base, exprimé avec les différents préfixes :</p>
+
+<pre class="brush: css notranslate">.grad {
+  background-color: #F07575; /* fallback color if gradients are not supported */
+  background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
+  background-image:    -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Firefox (3.6 to 15) */
+  background-image:      -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For old Opera (11.1 to 12.0) */
+  background-image:         linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); /* Standard syntax; must be last */
+}
+</pre>
+
+<p>Le préfixe <code>-moz-</code> est utilisé pour une compatibilité avec Firefox 3.6 jusqu'à Firefox 15. L (Fx 3.6 to Fx 15). Le préfixe <code>-webkit-</code> est le seul qui doit toujours être inclus pour Android 4.3-, iOS jusqu'à la version 6.1 et Safari 6. Lorsqu'on utilise une version préfixée, il ne faut pas utiliser <code>to</code>.</p>
+
+<h3 id="Un_dégradé_avec_des_points_d’arrêt_à_plusieurs_couleurs">Un dégradé avec des points d’arrêt à plusieurs couleurs</h3>
+
+<p>Cet exemple utilise des points d'arrêt situés à la même position et avec des couleurs différentes. La transition est donc franche et on obtient ainsi des bandes de couleurs.</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">body {
+  width: 100vw;
+  height: 100vh;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">body {
+  background: linear-gradient(to right,
+     red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);
+}</pre>
+
+<p>{{EmbedLiveSample("Un_dégradé_avec_des_points_d’arrêts_à_plusieurs_couleurs", 120, 120)}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> Voir la page <a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">Utiliser les dégradés CSS</a> pour plus d'exemples.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Images', '#linear-gradients', 'linear-gradient()')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Images', '#color-stop-syntax', 'Gradient Color-Stops')}}</td>
+   <td>{{Spec2('CSS4 Images')}}</td>
+   <td>Ajout des indices d'interpolation.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>{{Compat("css.types.image.gradient.linear-gradient")}}</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">Manipuler les dégradés CSS</a>
+
+  <ul>
+   <li>{{cssxref("radial-gradient", "radial-gradient()")}}</li>
+   <li>{{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}</li>
+   <li>{{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}</li>
+   <li>{{cssxref("conic-gradient")}}</li>
+   <li>{{cssxref("repeating-conic-gradient")}}</li>
+  </ul>
+ </li>
+ <li>Des propriétés sur lesquelles cette fonction peut être utilisée :
+  <ul>
+   <li>{{cssxref("background-image")}}</li>
+   <li>{{cssxref("background")}}</li>
+  </ul>
+ </li>
+ <li><a class="external" href="https://lea.verou.me/css3patterns/">Une collection de motifs construits avec des dégradés CSS, par Léa Verou</a></li>
+ <li><a href="https://cssgenerator.org/gradient-css-generator.html">Générateur de dégradés CSS</a></li>
+ <li>{{cssxref("&lt;image&gt;")}}</li>
+ <li>{{cssxref("element()")}}</li>
+ <li>{{cssxref("_image","image()")}}</li>
+ <li>{{cssxref("image-set","image-set()")}}</li>
+ <li>{{cssxref("cross-fade")}}</li>
+</ul>
diff --git a/files/fr/web/css/list-style-image/index.html b/files/fr/web/css/list-style-image/index.html
new file mode 100644
index 0000000000..5dc240279f
--- /dev/null
+++ b/files/fr/web/css/list-style-image/index.html
@@ -0,0 +1,108 @@
+---
+title: list-style-image
+slug: Web/CSS/list-style-image
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/list-style-image
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>list-style-image</code></strong> définit l'image utilisée comme puce devant les <a href="fr/HTML/%c3%89l%c3%a9ment/li">éléments de listes</a>. On peut également utiliser la propriété raccourcie {{cssxref("list-style")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/list-style-image.html")}}</div>
+
+
+
+<div class="note">
+<p><strong>Note :</strong> Cette propriété s'applique aux éléments d'une liste (c'est-à-dire aux éléments pour lesquels {{cssxref("display")}}<code>: list-item</code><code>;</code>}}). Par défaut, cela inclut les éléments {{HTMLElement("li")}}. Cette propriété peut être héritée par les éléments et si on veut donc gérer une liste de façon uniforme, on pourra appliquer la propriété à l'élément parent (qui correspond en général à {{HTMLElement("ol")}} ou à {{HTMLElement("ul")}}).</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé*/
+list-style-image: none;
+
+/*  Valeurs pointant vers une image */
+list-style-image: url('starsolid.gif');
+
+/* Valeurs globales */
+list-style-image: inherit;
+list-style-image: initial;
+list-style-image: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>url</code></dt>
+ <dd>Emplacement de l'image à utiliser comme puce (cf. {{cssxref("&lt;url&gt;")}} pour plus de détails sur les valeurs possibles pour ce type).</dd>
+ <dt><code>none</code></dt>
+ <dd>Aucune image ne sera utilisée comme puce. Si cette valeur est définie, le marqueur défini avec {{cssxref("list-style-type")}} sera utilisé à la place.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">ul {
+  list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif");
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul&gt;
+    &lt;li&gt;Élément 1&lt;/li&gt;
+    &lt;li&gt;Élément 2&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemple')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Lists', '#propdef-list-style-image', 'list-style-image')}}</td>
+   <td>{{Spec2('CSS3 Lists')}}</td>
+   <td>Propriété étendue pour supporter n'importe quel type {{cssxref("&lt;image&gt;")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'generate.html#propdef-list-style-image', 'list-style-image')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.list-style-image")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("list-style")}}</li>
+ <li>{{cssxref("list-style-type")}}</li>
+ <li>{{cssxref("list-style-position")}}</li>
+ <li>La fonction {{cssxref("url()", "url()")}}</li>
+</ul>
diff --git a/files/fr/web/css/list-style-position/index.html b/files/fr/web/css/list-style-position/index.html
new file mode 100644
index 0000000000..a9ebac525b
--- /dev/null
+++ b/files/fr/web/css/list-style-position/index.html
@@ -0,0 +1,138 @@
+---
+title: list-style-position
+slug: Web/CSS/list-style-position
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/list-style-position
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>list-style-position</code></strong> permet de définir la position du marqueur (cf. {{cssxref("::marker")}} de liste par rapport à la boîte principale.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/list-style-position.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Pour définir cette propriété, on pourra aussi utiliser la propriété raccourcie {{cssxref("list-style")}}.</p>
+
+<div class="note">
+<p><strong>Notes :</strong></p>
+
+<ul>
+ <li>Cette propriété s'applique aux éléments d'une liste (c'est-à-dire aux éléments pour lesquels {{cssxref("display")}}<code>: list-item</code><code>;</code>). <a href="https://www.w3.org/TR/html5/rendering.html#lists">Par défaut</a>, cela inclut les éléments {{HTMLElement("li")}}. Cette propriété peut être héritée par les éléments et si on veut donc gérer une liste de façon uniforme, on pourra appliquer la propriété à l'élément parent (qui correspond en général à {{HTMLElement("ol")}} ou à {{HTMLElement("ul")}}).</li>
+ <li>Une différence de comportement existe entre les navigateurs lorsqu'un élément de bloc est placé en premier au sein d'un élément de liste avec <code>list-style-position: inside</code>. Chrome et Safari placent l'élément sur la même ligne que la boîte du marqueur. En revanche, Firefox, Internet Explorer et Opera placent l'élément sur la ligne suivante. Voir {{bug("36854")}} pour plus d'informations.</li>
+</ul>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec mot-clé */
+list-style-position: inside;
+list-style-position: outside;
+
+/* Valeurs globales */
+list-style-position: inherit;
+list-style-position: initial;
+list-style-position: unset;
+</pre>
+
+<p>La propriété <code>list-style-position</code> est définie avec l'un des mots-clés suivants.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>inside</code></dt>
+ <dd>La boîte du marqueur ({{cssxref("::marker")}}) est la première boîte en ligne (<em>inline</em>) de la boîte principale. Le contenu de l'élément sera appliqué à la suite de la boîte du marqueur.</dd>
+ <dt><code>outside</code></dt>
+ <dd>La boîte du marqueur ({{cssxref("::marker")}}) est en dehors de la boîte principale.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css;">.one {
+  list-style:square inside;
+}
+
+.two {
+  list-style-position: outside;
+  list-style-type: circle;
+}
+
+.three {
+  list-style-image: url("https://mdn.mozillademos.org/files/11979/starsolid.gif");
+  list-style-position: inherit;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul class="one"&gt; Liste 1
+  &lt;li&gt;Élément 1-1&lt;/li&gt;
+  &lt;li&gt;Élément 1-2&lt;/li&gt;
+  &lt;li&gt;Élément 1-3&lt;/li&gt;
+  &lt;li&gt;Élément 1-4&lt;/li&gt;
+&lt;/ul&gt;
+&lt;ul class="two"&gt; Liste 2
+  &lt;li&gt;Élément 2-1&lt;/li&gt;
+  &lt;li&gt;Élément 2-2&lt;/li&gt;
+  &lt;li&gt;Élément 2-3&lt;/li&gt;
+  &lt;li&gt;Élément 2-4&lt;/li&gt;
+&lt;/ul&gt;
+&lt;ul class="three"&gt; Liste 3
+  &lt;li&gt;Élément 3-1&lt;/li&gt;
+  &lt;li&gt;Élément 3-2&lt;/li&gt;
+  &lt;li&gt;Élément 3-3&lt;/li&gt;
+  &lt;li&gt;Élément 3-4&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","200","420")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Lists', '#list-style-position-property', 'list-style-position')}}</td>
+   <td>{{Spec2('CSS3 Lists')}}</td>
+   <td>Aucun changement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'generate.html#propdef-list-style-position', 'list-style-position')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.list-style-position")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("list-style")}}</li>
+ <li>{{cssxref("list-style-type")}}</li>
+ <li>{{cssxref("list-style-image")}}</li>
+ <li>{{cssxref("::marker")}}</li>
+</ul>
diff --git a/files/fr/web/css/list-style-type/index.html b/files/fr/web/css/list-style-type/index.html
new file mode 100644
index 0000000000..fce26cdf01
--- /dev/null
+++ b/files/fr/web/css/list-style-type/index.html
@@ -0,0 +1,614 @@
+---
+title: list-style-type
+slug: Web/CSS/list-style-type
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/list-style-type
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété<strong> <code>list-style-type</code></strong> permet de définir l'apparence de la puce d'un élément de liste (un cercle, un caractère, un compteur spécifique, etc.).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/list-style-type.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La <a href="/fr/docs/Web/CSS/color_value">couleur</a> de la puce utilisée sera la même que la couleur calculée de l'élément sur lequel elle s'applique.</p>
+
+<p>Cette propriété s'applique aux éléments d'une liste (c'est-à-dire les éléments pour lesquels on a {{cssxref("display")}}<code>: list-item;</code>. Cela inclut par défaut les éléments {{HTMLElement("li")}} et {{HTMLElement("summary")}}. Il est possible de l'utiliser pour d'autres éléments si on utilise <code>display: list-item</code> sur ceux-ci. Cette propriété est héritée et on peut donc l'appliquer aux éléments parents (généralement {{HTMLElement("ol")}} ou {{HTMLElement("ul")}}) afin qu'elle s'applique à l'ensemble des éléments fils.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Liste partielle des mots-clés utilisables */
+list-style-type: disc;
+list-style-type: circle;
+list-style-type: square;
+list-style-type: decimal;
+list-style-type: georgian;
+list-style-type: cjk-ideographic;
+list-style-type: kannada;
+
+/* Une chaîne de caractères */
+/* Type &lt;string&gt;            */
+list-style-type: '-';
+
+/* Un identifiant correspondant à */
+/* une règle @counter-style       */
+list-style-type: custom-counter-style;
+
+/* Valeur avec un mot-clé */
+list-style-type: none;
+
+/* Valeurs globales */
+list-style-type: inherit;
+list-style-type: initial;
+list-style-type: unset;
+</pre>
+
+<p>La propriété <code>list-style-type</code> peut être définie grâce à :</p>
+
+<ul>
+ <li>une valeur <code><a href="#custom-ident">&lt;custom-ident&gt;</a></code></li>
+ <li>une valeur <code><a href="#symbol">symbols()</a></code></li>
+ <li>une valeur <code><a href="#str">&lt;string&gt;</a></code></li>
+ <li>au mot-clé <code><a href="#none*">none</a></code></li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><a id="symbol">{{cssxref("symbols()")}}</a></dt>
+ <dd>Définit un style de puce utilisé.</dd>
+ <dt><a id="none*"><code>none</code></a></dt>
+ <dd>Aucun marqueur n'est affiché.</dd>
+ <dt><a id="str">{{cssxref("&lt;string&gt;")}}</a></dt>
+ <dd>La chaîne de caractères indiquée sera utilisée comme puce</dd>
+ <dt><a id="custom-ident">{{cssxref("custom-ident", "&lt;custom-ident&gt;")}}</a></dt>
+ <dd>Un identifiant correspondant à la valeur d'un {{cssxref("@counter-style")}} ou à un style prédéfini :</dd>
+</dl>
+
+<dl style="background: rgb(238, 238, 238); padding: 0.5em 0px 0.5em 0.5em; border: 1px solid powderblue; font-size: 90%; -moz-column-width: 20em; -webkit-columns: 20em; -moz-column-rule: 1px solid powderblue; -webkit-column-rule: 1px solid powderblue;">
+ <dt><code>disc</code></dt>
+ <dd>
+ <ul style="list-style-type: disc;">
+  <li>Un disque plein (la valeur par défaut)</li>
+ </ul>
+ </dd>
+ <dt><code>circle</code></dt>
+ <dd>
+ <ul style="list-style-type: circle;">
+  <li>Un cercle vide</li>
+ </ul>
+ </dd>
+ <dt><code>square</code></dt>
+ <dd>
+ <ul style="list-style-type: square;">
+  <li>Un carré plein</li>
+ </ul>
+ </dd>
+ <dt><code>decimal</code></dt>
+ <dd>
+ <ul style="list-style-type: decimal;">
+  <li>Des nombres en base 10</li>
+  <li>Commençant par 1</li>
+ </ul>
+ </dd>
+ <dt><code>cjk-decimal</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul>
+  <li>Nombres décimaux Han</li>
+  <li>E.g. 一, 二, 三, ..., 九八, 九九, 一〇〇</li>
+ </ul>
+ </dd>
+ <dt><code>decimal-leading-zero</code></dt>
+ <dd>
+ <ul style="list-style-type: decimal-leading-zero;">
+  <li>Nombres en base 10</li>
+  <li>Avec des 0 devant</li>
+  <li>E.g. 01, 02, 03, … 98, 99</li>
+ </ul>
+ </dd>
+ <dt><code>lower-roman</code></dt>
+ <dd>
+ <ul style="list-style-type: lower-roman;">
+  <li>Nombres romains minuscules</li>
+  <li>Par exemple i, ii, iii, iv, v…</li>
+ </ul>
+ </dd>
+ <dt><code>upper-roman</code></dt>
+ <dd>
+ <ul style="list-style-type: upper-roman;">
+  <li>Nombres romains en majuscules</li>
+  <li>Par exemple I, II, III, IV, V…</li>
+ </ul>
+ </dd>
+ <dt><code>lower-greek</code></dt>
+ <dd>
+ <ul style="list-style-type: lower-greek;">
+  <li>Lettres grecques minuscules</li>
+  <li>alpha, beta, gamma…</li>
+  <li>Par exemple α, β, γ…</li>
+ </ul>
+ </dd>
+ <dt><code>lower-alpha</code></dt>
+ <dt><code>lower-latin</code></dt>
+ <dd>
+ <ul style="list-style-type: lower-alpha;">
+  <li>Lettres ASCII en minuscules</li>
+  <li>Par exemple a, b, c, … z</li>
+  <li><code>lower-latin</code> n'est pas pris en charge par les versions avant IE7</li>
+  <li>Voir le tableau de compatibilité</li>
+ </ul>
+ </dd>
+ <dt><code>upper-alpha</code></dt>
+ <dt><code>upper-latin</code></dt>
+ <dd>
+ <ul style="list-style-type: upper-alpha;">
+  <li>Lettres ASCII en majuscules</li>
+  <li>Par exemple A, B, C, … Z</li>
+  <li><code>upper-latin</code> n'est pas pris en charge par les versions avant IE7</li>
+ </ul>
+ </dd>
+ <dt><code>arabic-indic</code></dt>
+ <dt><code>-moz-arabic-indic</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-arabic-indic; list-style-type: arabic-indic;">
+  <li>Exemple</li>
+ </ul>
+ </dd>
+ <dt><code>armenian</code></dt>
+ <dd>
+ <ul style="list-style-type: armenian;">
+  <li>Système de numérotation arménien</li>
+  <li>(ayb/ayp, ben/pen, gim/keem…</li>
+ </ul>
+ </dd>
+ <dt><code>bengali</code></dt>
+ <dt><code>-moz-bengali</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-bengali; list-style-type: bengali;">
+  <li>Exemple</li>
+ </ul>
+ </dd>
+ <dt><code>cambodian</code> {{experimental_inline}}*</dt>
+ <dd>
+ <ul style="list-style-type: cambodian;">
+  <li>Exemple</li>
+  <li>est un synonyme pour <code>khmer</code></li>
+ </ul>
+ </dd>
+ <dt><code>cjk-earthly-branch</code></dt>
+ <dt><code>-moz-cjk-earthly-branch</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-cjk-earthly-branch; list-style-type: cjk-earthly-branch;">
+  <li>Exemple</li>
+ </ul>
+ </dd>
+ <dt><code>cjk-heavenly-stem</code></dt>
+ <dt><code>-moz-cjk-heavenly-stem</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-cjk-heavenly-stem; list-style-type: cjk-heavenly-stem;">
+  <li>Exemple</li>
+ </ul>
+ </dd>
+ <dt><code>cjk-ideographic</code>{{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: cjk-ideographic;">
+  <li>Identique à <code>trad-chinese-informal</code></li>
+  <li>E.g. 一萬一千一百一十一</li>
+ </ul>
+ </dd>
+ <dt><code>devanagari</code></dt>
+ <dt><code>-moz-devanagari</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-devanagari; list-style-type: devanagari;">
+  <li>Exemple</li>
+ </ul>
+ </dd>
+ <dt><code>ethiopic-numeric</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: ethiopic-numeric;">
+  <li>Exemple</li>
+ </ul>
+ </dd>
+ <dt><code>georgian</code></dt>
+ <dd>
+ <ul style="list-style-type: georgian;">
+  <li>Système de numérotation géorgien</li>
+  <li>Par exemple an, ban, gan, … he, tan, in…</li>
+ </ul>
+ </dd>
+ <dt><code>gujarati</code></dt>
+ <dt><code>-moz-gujarati</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-gujarati; list-style-type: gujarati;">
+  <li>Exemple</li>
+ </ul>
+ </dd>
+ <dt><code>gurmukhi</code></dt>
+ <dt><code>-moz-gurmukhi</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-gurmukhi; list-style-type: gurmukhi;">
+  <li>Exemple</li>
+ </ul>
+ </dd>
+ <dt><code>hebrew</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: hebrew;">
+  <li>Système de numérotation hébreux</li>
+ </ul>
+ </dd>
+ <dt><code>hiragana</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: hiragana;">
+  <li>あ, い, う, え, お, か, き , …</li>
+  <li>(Japonais)</li>
+ </ul>
+ </dd>
+ <dt><code>hiragana-iroha</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: hiragana-iroha;">
+  <li>い, ろ, は, に, ほ, へ, と  …</li>
+  <li>{{interwiki('wikipedia', 'Iroha')}} est l'ancien ordre japonais pour les syllabes.</li>
+ </ul>
+ </dd>
+ <dt><code>japanese-formal</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: japanese-formal;">
+  <li>Système de numérotation japonais formel utilisé pour les documents légaux ou financiers.</li>
+  <li>E.g., 壱萬壱阡壱百壱拾壱</li>
+  <li>Ces kanjis ont été conçus afin de ne pas pouvoir être confondus avec d'autres</li>
+ </ul>
+ </dd>
+ <dt><code>japanese-informal</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: japanese-informal;">
+  <li>Système de numérotation japonais informel</li>
+ </ul>
+ </dd>
+ <dt><code>kannada</code></dt>
+ <dt><code>-moz-kannada</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-kannada; list-style-type: kannada;">
+  <li>Exemple</li>
+ </ul>
+ </dd>
+ <dt style="list-style-type: katakana;"><code>katakana</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: katakana;">
+  <li>ア, イ, ウ, エ, オ, カ, キ, …</li>
+  <li>(Japonais)</li>
+ </ul>
+ </dd>
+ <dt><code>katakana-iroha</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: katakana-iroha;">
+  <li>イ, ロ, ハ, ニ, ホ, ヘ, ト, …</li>
+  <li>{{interwiki('wikipedia', 'Iroha')}} correspond à l'ancien ordre japonais pour les syllabes.</li>
+ </ul>
+ </dd>
+ <dt><code>khmer</code></dt>
+ <dt><code>-moz-khmer</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-khmer; list-style-type: khmer;">
+  <li>Exemple</li>
+ </ul>
+ </dd>
+ <dt><code>korean-hangul-formal</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: korean-hangul-formal;">
+  <li>Système de numérotation coréen hangul .</li>
+  <li>E.g., 일만 일천일백일십일</li>
+ </ul>
+ </dd>
+ <dt><code>korean-hanja-formal</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: korean-hanja-formal;">
+  <li>Système de numérotation formel coréen Han.</li>
+  <li>E.g. 壹萬 壹仟壹百壹拾壹</li>
+ </ul>
+ </dd>
+ <dt><code>korean-hanja-informal</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: korean-hanja-informal;">
+  <li>Système de numérotation coréen hanja numbering.</li>
+  <li>E.g., 萬 一千百十一</li>
+ </ul>
+ </dd>
+ <dt><code>lao</code></dt>
+ <dt><code>-moz-lao</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-lao; list-style-type: lao;">
+  <li>Exemple</li>
+ </ul>
+ </dd>
+ <dt><code>lower-armenian</code> {{experimental_inline}}*</dt>
+ <dd>
+ <ul style="list-style-type: lower-armenian;">
+  <li>Exemple</li>
+ </ul>
+ </dd>
+ <dt><code>malayalam</code></dt>
+ <dt><code>-moz-malayalam</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-malayalam; list-style-type: malayalam;">
+  <li>Exemple</li>
+ </ul>
+ </dd>
+ <dt><code>mongolian</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: mongolian;">
+  <li>Exemple</li>
+ </ul>
+ </dd>
+ <dt><code>myanmar</code></dt>
+ <dt><code>-moz-myanmar</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-myanmar; list-style-type: myanmar;">
+  <li>Exemple</li>
+ </ul>
+ </dd>
+ <dt><code>oriya</code></dt>
+ <dt><code>-moz-oriya</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-oriya; list-style-type: oriya;">
+  <li>Exemple</li>
+ </ul>
+ </dd>
+ <dt><code>persian</code> {{experimental_inline}}</dt>
+ <dt><code>-moz-persian</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-persian; list-style-type: persian;">
+  <li>Exemple</li>
+ </ul>
+ </dd>
+ <dt><code>simp-chinese-formal</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: simp-chinese-formal;">
+  <li>Système de numérotation formel chinois simplifié.</li>
+  <li>E.g. 壹万壹仟壹佰壹拾壹</li>
+ </ul>
+ </dd>
+ <dt><code>simp-chinese-informal</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: simp-chinese-informal;">
+  <li>Système de numérotation informel chinois simplifié.</li>
+  <li>E.g. 一万一千一百一十一</li>
+ </ul>
+ </dd>
+ <dt><code>tamil</code> {{experimental_inline}}</dt>
+ <dt><code>-moz-tamil</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-tamil; list-style-type: tamil;">
+  <li>Exemple</li>
+ </ul>
+ </dd>
+ <dt><code>telugu</code></dt>
+ <dt><code>-moz-telugu</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-telugu; list-style-type: telugu;">
+  <li>Exemple</li>
+ </ul>
+ </dd>
+ <dt><code>thai</code></dt>
+ <dt><code>-moz-thai</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-thai; list-style-type: thai;">
+  <li>Exemple</li>
+ </ul>
+ </dd>
+ <dt><code>tibetan</code> {{experimental_inline}}*</dt>
+ <dd>
+ <ul style="list-style-type: tibetan;">
+  <li>Exemple</li>
+ </ul>
+ </dd>
+ <dt><code>trad-chinese-formal</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: trad-chinese-formal;">
+  <li>Système de numérotation formel chinois traditionnel.</li>
+  <li>E.g. 壹萬壹仟壹佰壹拾壹</li>
+ </ul>
+ </dd>
+ <dt><code>trad-chinese-informal</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: trad-chinese-informal;">
+  <li>Système de numérotation informel chinois traditionnel.</li>
+  <li>E.g. 一萬一千一百一十一</li>
+ </ul>
+ </dd>
+ <dt><code>upper-armenian</code> {{experimental_inline}}*</dt>
+ <dd>
+ <ul style="list-style-type: upper-armenian;">
+  <li>Exemple</li>
+ </ul>
+ </dd>
+ <dt><code>disclosure-open</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: disclosure-open;">
+  <li>Symbole indiquant qu'un <em>widget</em> (comme {{HTMLElement("details")}}) est ouvert.</li>
+ </ul>
+ </dd>
+ <dt><code>disclosure-closed</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: disclosure-closed;">
+  <li>Symbole indiquant qu'un <em>widget</em> (comme {{HTMLElement("details")}}) est fermé.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Extensions_non-standards">Extensions non-standards</h3>
+
+<p>D'autres types sont fournis par Gecko (Firefox), Blink (Chrome and Opera) and WebKit (Safari) mais ne sont pas standards. Pour voir les différents navigateurs les supportant, se référer au tableau de compatibilité en bas de page.</p>
+
+<dl style="background: rgb(238, 238, 238); padding: 0.5em 0px 0.5em 0.5em; border: 1px solid powderblue; font-size: 90%; -moz-column-width: 16em; -webkit-columns: 16em; -moz-column-rule: 1px solid powderblue; -webkit-column-rule: 1px solid powderblue;">
+ <dt><code>-moz-ethiopic-halehame</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-ethiopic-halehame;">
+  <li>Exemple</li>
+ </ul>
+ </dd>
+ <dt><code>-moz-ethiopic-halehame-am</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-ethiopic-halehame-am;">
+  <li>Exemple</li>
+ </ul>
+ </dd>
+ <dt><code>ethiopic-halehame-ti-er</code></dt>
+ <dt><code>-moz-ethiopic-halehame-ti-er</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-ethiopic-halehame-ti-er;">
+  <li>Exemple</li>
+ </ul>
+ </dd>
+ <dt><code>ethiopic-halehame-ti-et</code></dt>
+ <dt><code>-moz-ethiopic-halehame-ti-et</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-ethiopic-halehame-ti-et;">
+  <li>Exemple</li>
+ </ul>
+ </dd>
+ <dt><code>hangul</code></dt>
+ <dt><code>-moz-hangul</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-hangul;">
+  <li>Exemple</li>
+  <li>Exemple</li>
+  <li>Exemple</li>
+ </ul>
+ </dd>
+ <dt><code>hangul-consonant</code></dt>
+ <dt><code>-moz-hangul-consonant</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-hangul-consonant;">
+  <li>Exemple</li>
+  <li>Exemple</li>
+  <li>Exemple</li>
+ </ul>
+ </dd>
+ <dt><code>urdu</code></dt>
+ <dt><code>-moz-urdu</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-urdu;">
+  <li>Exemple</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">ol.normal {
+  list-style-type: upper-alpha;
+}
+
+/* on peut aussi utiliser la propriété raccourcie */
+/* "list-style": */
+ol.shortcut {
+  list-style: upper-alpha;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ol class="normal"&gt;Liste 1
+  &lt;li&gt;Coucou&lt;/li&gt;
+  &lt;li&gt;Monde&lt;/li&gt;
+  &lt;li&gt;Comment ça va ?&lt;/li&gt;
+&lt;/ol&gt;
+
+&lt;ol class="shortcut"&gt;Liste 2
+  &lt;li&gt;On a&lt;/li&gt;
+  &lt;li&gt;le&lt;/li&gt;
+  &lt;li&gt;même&lt;/li&gt;
+  &lt;li&gt;résultat&lt;/li&gt;
+&lt;/ol&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","200","300")}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Le lecteur d'écran <a href="https://help.apple.com/voiceover/info/guide/">VoiceOver</a> n'annonce pas, incorrectement, les listes non ordonnées lorsque <code>list-style-type:none</code> leur est appliqué. Pour pallier ce problème, on peut ajouter un <a href="https://fr.wikipedia.org/wiki/Espace_sans_chasse">espace sans chasse</a> comme <a href="/fr/docs/Web/CSS/content">pseudo-contenu</a> avant chaque élément de liste afin que la liste soit correctement annoncée.</p>
+
+<pre class="brush: css">ul {
+  list-style-type: none;
+}
+
+ul li::before {
+  content: "\200B";
+}
+</pre>
+
+<ul>
+ <li><a href="https://unfetteredthoughts.net/2017/09/26/voiceover-and-list-style-type-none/">VoiceOver et <code>list-style-type: none</code> – Unfettered Thoughts (en anglais)</a></li>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">Comprendre les règles WCAG 1.3</a></li>
+ <li><em><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html" rel="noopener">Understanding Success Criterion 1.3.1, W3C Understanding WCAG 2.0 </a></em><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html" rel="noopener">(en anglais)</a></li>
+</ul>
+
+<h2 id="Notes">Notes</h2>
+
+<ul>
+ <li>Pour certains types, il est nécessaire d'avoir une police correspondante installée pour que l'affichage fonctionne.</li>
+ <li>Pour des raisons historiques, <code>cjk-ideographic</code> est synonyme de <code>trad-chinese-informal</code>.</li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Counter Styles', '#extending-css2', 'list-style-type')}}</td>
+   <td>{{Spec2("CSS3 Counter Styles")}}</td>
+   <td>Les compteurs CSS2.1 sont redéfinis.<br>
+    La syntaxe est étendue pour prendre en charge les règles <code>@counter-style</code>.<br>
+    Définition des types : <code>hebrew</code>, <code>cjk-ideographic</code>, <code>hiragana</code>, <code>hiragana-iroha</code>, <code>katakana</code>, <code>katakana-iroha</code>, <code>japanese-formal</code>, <code>japanese-informal</code>, <code>simp-chinese-formal</code>, <code>trad-chinese-formal</code>, <code>simp-chinese-formal</code>, <code>trad-chinese-formal</code>,<code>korean-hangul-formal</code>, <code>korean-hanja-informal</code>, <code>korean-hanja-formal</code>, <code>cjk-decimal</code>, <code>ethiopic-numeric</code>, <code>disclosure-open</code> et <code>disclosure-closed</code>.<br>
+    <code>&lt;counter-style&gt;</code> est étendu avec la notation fonctionnelle <code>symbols()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Lists', '#propdef-list-style-type', 'list-style-type')}}</td>
+   <td>{{Spec2('CSS3 Lists')}}</td>
+   <td>La syntaxe est modifiée pour prendre en charge les identifiants utilisés avec les règles <code>@counter-style</code>.<br>
+    Prise en charge du type <code>&lt;string&gt;</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'generate.html#propdef-list-style-type', 'list-style-type')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>
+    <p>Définition initiale.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.list-style-type")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("list-style")}}</li>
+ <li>{{cssxref("list-style-image")}}</li>
+ <li>{{cssxref("list-style-position")}}</li>
+</ul>
diff --git a/files/fr/web/css/list-style/index.html b/files/fr/web/css/list-style/index.html
new file mode 100644
index 0000000000..19fcbef3f3
--- /dev/null
+++ b/files/fr/web/css/list-style/index.html
@@ -0,0 +1,155 @@
+---
+title: list-style
+slug: Web/CSS/list-style
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/list-style
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>list-style</code></strong> est une <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">propriété raccourcie</a> qui permet de définir {{cssxref("list-style-type")}}, {{cssxref("list-style-image")}} et {{cssxref("list-style-position")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/list-style.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note">
+<p><strong>Note :</strong> Cette propriété s'applique aux éléments d'une liste (c'est-à-dire aux éléments pour lesquels {{cssxref("display")}}<code>: list-item</code><code>;</code>}}). Par défaut, cela inclut les éléments {{HTMLElement("li")}}. Cette propriété peut être héritée par les éléments et si on veut donc gérer une liste de façon uniforme, on pourra appliquer la propriété à l'élément parent (qui correspond en général à {{HTMLElement("ol")}} ou à {{HTMLElement("ul")}}).</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Type */
+list-style: square;
+
+/* Image */
+list-style: url('../img/etoile.png');
+
+/* Position */
+list-style: inside;
+
+/* type | position */
+list-style: georgian inside;
+
+/* type | image | position */
+list-style: lower-roman url('../img/etoile.png') outside;
+
+list-style: none;
+
+/* Valeurs globales */
+list-style: inherit;
+list-style: initial;
+list-style: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>Cette propriété raccourcie peut prendre un, deux ou trois mots-clés, dans n'importe quel ordre. Si {{cssxref("list-style-type")}} et {{cssxref("list-style-image")}} sont tous les deux définis, <code>list-style-type</code> sera utilisé si l'image est indisponible.</p>
+
+<dl>
+ <dt><code>&lt;'list-style-type'&gt;</code></dt>
+ <dd>Voir {{cssxref("list-style-type")}}</dd>
+ <dt><code>&lt;'list-style-image'&gt;</code></dt>
+ <dd>Voir {{cssxref("list-style-image")}}</dd>
+ <dt><code>&lt;'list-style-position'&gt;</code></dt>
+ <dd>Voir {{cssxref("list-style-position")}}</dd>
+ <dt><code>none</code></dt>
+ <dd>Aucun style n'est utilisé.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.un {
+  list-style: circle;
+}
+
+.deux {
+  list-style: square inside;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">Liste 1
+&lt;ul class="un"&gt;
+  &lt;li&gt;Élément 1&lt;/li&gt;
+  &lt;li&gt;Élément 2&lt;/li&gt;
+  &lt;li&gt;Élément 3&lt;/li&gt;
+&lt;/ul&gt;
+Liste 2
+&lt;ul class="deux"&gt;
+  &lt;li&gt;Élément A&lt;/li&gt;
+  &lt;li&gt;Élément B&lt;/li&gt;
+  &lt;li&gt;Élément C&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples','auto', 220)}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Safari ne reconnait pas (incorrectement) les listes non ordonnées lorsque <code>list-style:none</code> leur est appliqué et ne les ajoute pas dans l'arbre d'accessibilité (utilisé par les lecteurs d'écrans). Pour pallier ce problème, on peut ajouter un <a href="https://fr.wikipedia.org/wiki/Espace_sans_chasse">espace sans chasse</a> comme <a href="/fr/docs/Web/CSS/content">pseudo-contenu</a> avant chaque élément de liste afin que la liste soit correctement annoncée.</p>
+
+<pre class="brush: css">ul {
+  list-style: none;
+}
+
+ul li::before {
+  content: "\200B";
+}
+</pre>
+
+<ul>
+ <li><a href="https://unfetteredthoughts.net/2017/09/26/voiceover-and-list-style-type-none/">VoiceOver et <code>list-style-type: none</code> – Unfettered Thoughts (en anglais)</a></li>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">Comprendre les règles WCAG 1.3</a></li>
+ <li><em><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html" rel="noopener">Understanding Success Criterion 1.3.1, W3C Understanding WCAG 2.0 </a></em><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html" rel="noopener">(en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Lists', '#list-style-property', 'list-style')}}</td>
+   <td>{{Spec2('CSS3 Lists')}}</td>
+   <td>Aucun changement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'generate.html#propdef-list-style', 'list-style')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.list-style")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("list-style-type")}}</li>
+ <li>{{cssxref("list-style-image")}}</li>
+ <li>{{cssxref("list-style-position")}}</li>
+</ul>
diff --git a/files/fr/web/css/liste_de_fonctionnalités_css_propriétaires/index.html b/files/fr/web/css/liste_de_fonctionnalités_css_propriétaires/index.html
new file mode 100644
index 0000000000..2c88258187
--- /dev/null
+++ b/files/fr/web/css/liste_de_fonctionnalités_css_propriétaires/index.html
@@ -0,0 +1,173 @@
+---
+title: Liste de fonctionnalités CSS propriétaires
+slug: Web/CSS/Liste_de_Fonctionnalités_CSS_Propriétaires
+tags:
+  - CSS
+  - Draft
+  - NeedsContent
+translation_of: Web/CSS/List_of_Proprietary_CSS_Features
+---
+<p>{{CSSRef}}{{Draft}}</p>
+
+<div class="note">
+<p><strong>Note : Cette page est un brouillon et son contenu est incomplet voire obsolète. À lire avec un œil critique.</strong></p>
+</div>
+
+<div class="warning">
+<p><strong>Attention !</strong> Cette page est incomplète et n'est pas à jour. Se référer aux pages suivantes pour plus d'informations :</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">Les extensions Microsoft à CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/Extensions_Mozilla">Les extensions Mozilla à CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/Reference/Extensions_WebKit">Les extensions WebKit à CSS</a></li>
+</ul>
+</div>
+
+<div style="margin: 1em 0px; padding: 1em; background-color: rgb(255, 255, 204); text-align: center;"><strong>BROUILLON</strong>
+
+<div style="font-size: x-small;">Cette page est incomplète.</div>
+</div>
+
+<p>Cette liste contient les extensions propriétaires des CSS en fonction des moteurs des différents navigateurs ; il ne s'agit pas des implémentations expérimentales des fonctionnalités en cours de standardisation (voir <a href="/fr/docs/Web/CSS/Implémentation_des_Brouillons_CSS" title="en/CSS/Draft_Implementations_of_CSS_Features">Implémentation des fonctionnalités CSS à l'état de brouillon</a> pour une liste de ces dernières).</p>
+
+<h2 id="Gecko">Gecko</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<ul>
+ <li>{{ Cssxref("-moz-force-broken-image-icon") }}</li>
+ <li>{{ Cssxref("-moz-image-region") }}</li>
+ <li>{{ Cssxref("-moz-margin-end") }}</li>
+ <li>{{ Cssxref("-moz-margin-start") }}</li>
+ <li>{{ Cssxref("-moz-orient") }}</li>
+ <li>{{ Cssxref("-moz-padding-end") }}</li>
+ <li>{{ Cssxref("-moz-padding-start") }}</li>
+ <li>{{ Cssxref("-moz-stack-sizing") }}</li>
+ <li>{{ Cssxref("-moz-window-shadow") }}</li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<h4 id="cssxref(background-image)">{{ cssxref("background-image") }}</h4>
+
+<ul>
+ <li>Portions d'images
+  <ul>
+   <li>{{ cssxref("-moz-image-rect") }}</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Pseudo-éléments_et_pseudo-classes">Pseudo-éléments et pseudo-classes</h3>
+
+<p>...</p>
+
+<h3 id="Règles_At">Règles At</h3>
+
+<p>...</p>
+
+<h3 id="Requêtes_de_média">Requêtes de média</h3>
+
+<p>...</p>
+
+<h3 id="Autres">Autres</h3>
+
+<p>...</p>
+
+<h2 id="Opera">Opera</h2>
+
+<h3 id="Propriétés_2">Propriétés</h3>
+
+<p>...</p>
+
+<h3 id="Valeurs_2">Valeurs</h3>
+
+<h4 id="cssxref(background-image)_2">{{ cssxref("background-image") }}</h4>
+
+<ul>
+ <li>{{ cssxref("-o-double-rainbow") }}</li>
+</ul>
+
+<h3 id="Pseudo-éléments_et_pseudo-classes_2">Pseudo-éléments et pseudo-classes</h3>
+
+<p>...</p>
+
+<h3 id="Règles_At_2">Règles At</h3>
+
+<p>...</p>
+
+<h3 id="Requêtes_de_média_2">Requêtes de média</h3>
+
+<p>...</p>
+
+<h3 id="Autres_2">Autres</h3>
+
+<p>...</p>
+
+<h2 id="Trident_(IE)">Trident (IE)</h2>
+
+<h3 id="Propriétés_3">Propriétés</h3>
+
+<ul>
+ <li>{{ cssxref("-ms-accelerator") }}</li>
+</ul>
+
+<h3 id="Valeurs_3">Valeurs</h3>
+
+<p>...</p>
+
+<h3 id="Pseudo-éléments_et_pseudo-classes_3">Pseudo-éléments et pseudo-classes</h3>
+
+<p>...</p>
+
+<h3 id="Règles_At_3">Règles At</h3>
+
+<p>...</p>
+
+<h3 id="Requêtes_de_média_3">Requêtes de média</h3>
+
+<p>...</p>
+
+<h3 id="Autres_3">Autres</h3>
+
+<p>...</p>
+
+<h2 id="WebKit">WebKit</h2>
+
+<h3 id="Propriétés_4">Propriétés</h3>
+
+<ul>
+ <li>{{ Cssxref("-webkit-box-reflect") }}</li>
+ <li>{{ Cssxref("-webkit-mask") }}</li>
+ <li>{{ Cssxref("-webkit-mask-attachment") }}</li>
+ <li>{{ Cssxref("-webkit-mask-composite") }}</li>
+ <li>{{ Cssxref("-webkit-mask-image") }}</li>
+ <li>{{ Cssxref("-webkit-mask-origin") }}</li>
+ <li>{{ Cssxref("-webkit-mask-repeat") }}</li>
+ <li>{{ Cssxref("-webkit-tap-highlight-color") }}</li>
+ <li>{{ Cssxref("-webkit-text-decorations-in-effect") }}</li>
+ <li>{{ Cssxref("-webkit-text-stroke") }}</li>
+ <li>{{ Cssxref("-webkit-text-stroke-color") }}</li>
+ <li>{{ Cssxref("-webkit-text-stroke-width") }}</li>
+ <li>{{ Cssxref("-webkit-touch-callout") }}</li>
+</ul>
+
+<h3 id="Valeurs_4">Valeurs</h3>
+
+<p>...</p>
+
+<h3 id="Pseudo-éléments_et_pseudo-classes_4">Pseudo-éléments et pseudo-classes</h3>
+
+<p>...</p>
+
+<h3 id="Règles_At_4">Règles At</h3>
+
+<p>...</p>
+
+<h3 id="Requêtes_de_média_4">Requêtes de média</h3>
+
+<p>...</p>
+
+<h3 id="Autres_4">Autres</h3>
+
+<p>...</p>
diff --git a/files/fr/web/css/liste_propriétés_css_animées/index.html b/files/fr/web/css/liste_propriétés_css_animées/index.html
new file mode 100644
index 0000000000..e3927a94d8
--- /dev/null
+++ b/files/fr/web/css/liste_propriétés_css_animées/index.html
@@ -0,0 +1,17 @@
+---
+title: Liste des propriétés CSS animées
+slug: Web/CSS/Liste_propriétés_CSS_animées
+tags:
+  - Animations
+  - CSS
+  - Reference
+  - Transitions
+translation_of: Web/CSS/CSS_animated_properties
+---
+<div>{{CSSRef}}</div>
+
+<p>Certaines propriétés CSS peuvent être animées. Cela signifie que leur valeur change de façon graduelle grâce aux <a href="/fr/docs/Web/CSS/CSS_Animations">animations CSS</a> ou aux <a href="/fr/docs/Web/CSS/CSS_Transitions">transitions CSS</a>.</p>
+
+<p>Voici la liste des propriétés qui peuvent être animées :</p>
+
+<p>{{CSSAnimatedProperties}}</p>
diff --git a/files/fr/web/css/margin-block-end/index.html b/files/fr/web/css/margin-block-end/index.html
new file mode 100644
index 0000000000..2634d401ec
--- /dev/null
+++ b/files/fr/web/css/margin-block-end/index.html
@@ -0,0 +1,113 @@
+---
+title: margin-block-end
+slug: Web/CSS/margin-block-end
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/margin-block-end
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>margin-block-end</code></strong> définit la marge logique appliquée à la fin des éléments de bloc, selon le mode d'écriture, la directionnalité et l'orientation du texte. Selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}, elle peut correspondre à {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} ou {{cssxref("margin-left")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/margin-block-end.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cette propriété est à rapprocher de {{cssxref("margin-block-start")}}, {{cssxref("margin-inline-end")}} et de {{cssxref("margin-inline-start")}} qui définissent les autres marges appliquées à l'élément.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+margin-block-end: 10px;      /* Une longueur absolue */
+margin-block-end: 1em;       /* Une longueur relative à la taille du texte */
+margin-block-end: 5%;        /* Une largeur relative à la
+                                   largeur du bloc englobant */
+
+/* Valeurs avec un mot-clé */
+margin-block-end: auto;
+
+/* Valeurs globales */
+margin-block-end: inherit;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>La propriété <code>margin-block-end</code> peut prendre les mêmes valeurs que la propriété {{cssxref("margin-left")}}.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  margin-block-end: 20px;
+  background-color: #c8c800;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-margin-block-end", "margin-block-end")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.margin-block-end")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes :
+  <ul>
+   <li>{{cssxref("margin-top")}},</li>
+   <li>{{cssxref("margin-right")}},</li>
+   <li>{{cssxref("margin-bottom")}}</li>
+   <li>{{cssxref("margin-left")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("writing-mode")}}</li>
+ <li>{{cssxref("direction")}}</li>
+ <li>{{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/margin-block-start/index.html b/files/fr/web/css/margin-block-start/index.html
new file mode 100644
index 0000000000..d7ead1802d
--- /dev/null
+++ b/files/fr/web/css/margin-block-start/index.html
@@ -0,0 +1,113 @@
+---
+title: margin-block-start
+slug: Web/CSS/margin-block-start
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/margin-block-start
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>margin-block-start</code></strong> définit la marge logique appliquée au début des éléments en bloc, selon le mode d'écriture, la directionalité et l'orientation du texte. Selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}, elle peut correspondre à {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} ou {{cssxref("margin-left")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/margin-block-start.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cette propriété est à rapprocher de {{cssxref("margin-inline-start")}}, {{cssxref("margin-block-end")}} et de {{cssxref("margin-inline-end")}} qui définissent les autres marges appliquées à l'élément.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css  no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+margin-block-start: 10px;      /* Une longueur absolue */
+margin-block-start: 1em;       /* Une longueur relative à la taille du texte */
+margin-block-start: 5%;        /* Une largeur relative à la
+                                   largeur du bloc englobant */
+
+/* Valeurs avec un mot-clé */
+margin-block-start: auto;
+
+/* Valeurs globales */
+margin-block-start: inherit;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>La propriété <code>margin-block-start</code> peut prendre les mêmes valeurs que la propriété {{cssxref("margin-left")}}.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  margin-block-start: 20px;
+  background-color: #c8c800;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-margin-block-start", "margin-block-start")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.margin-block-start")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes :
+  <ul>
+   <li>{{cssxref("margin-top")}},</li>
+   <li>{{cssxref("margin-right")}},</li>
+   <li>{{cssxref("margin-bottom")}}</li>
+   <li>{{cssxref("margin-left")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("writing-mode")}}</li>
+ <li>{{cssxref("direction")}}</li>
+ <li>{{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/margin-block/index.html b/files/fr/web/css/margin-block/index.html
new file mode 100644
index 0000000000..8d7482ceae
--- /dev/null
+++ b/files/fr/web/css/margin-block/index.html
@@ -0,0 +1,103 @@
+---
+title: margin-block
+slug: Web/CSS/margin-block
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/margin-block
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>margin-block</code></strong> définit la marge sur les côtés de l'élément qui sont ceux de l'axe de bloc. Cette propriété logique peut correspondre à différentes marges selon le mode d'écriture de l'élément, sa direction ou l'orientation du texte. Autrement dit, cette propriété peut correspondre aux propriétés {{cssxref("margin-top")}} et {{cssxref("margin-bottom")}} ou à   {{cssxref("margin-right")}} et {{cssxref("margin-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+margin-block: 10px 20px;  /* Une longueur absolue */
+margin-block: 1em 2em;    /* Une longueur relative à la taille du texte */
+margin-block: 5% 2%;      /* Une longueur relative à la largeur ou hauteur du bloc englobant */
+margin-block: 10px;       /* Une valeur utilisée pour les deux côtés */
+
+/* Valeurs avec un mot-clé */
+margin-block: auto;
+
+/* Valeurs globales */
+margin-block: inherit;
+margin-block: initial;
+margin-block: unset;
+</pre>
+
+<p>Cette propriété est une propriété raccourcie pour les deux propriétés logiques {{cssxref("margin-block-start")}} et {{cssxref("margin-block-end")}}. Pour régler les marges selon l'axe en ligne, on pourra utiliser la propriété logique raccourcie {{cssxref("margin-inline")}} qui correspond aux propriétés {{cssxref("margin-inline-start")}} et {{cssxref("margin-inline-end")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>La propriété <code>margin-block</code> peut prendre les mêmes valeurs que la propriété {{cssxref("margin-left")}}.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.texteExemple {
+  writing-mode: vertical-rl;
+  margin-block: 20px 40px;
+  background-color: #c8c800;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="texteExemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-margin-block", "margin-block")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.margin-block")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes : {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} et {{cssxref("margin-left")}}</li>
+ <li>Les propriétés qui influencent les propriétés logiques {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/margin-bottom/index.html b/files/fr/web/css/margin-bottom/index.html
new file mode 100644
index 0000000000..6da12febe9
--- /dev/null
+++ b/files/fr/web/css/margin-bottom/index.html
@@ -0,0 +1,141 @@
+---
+title: margin-bottom
+slug: Web/CSS/margin-bottom
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/margin-bottom
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>margin-bottom</code></strong> définit la marge basse appliquée à un élément. On peut définir une marge négative qui rapprochera l'élément de ses voisins ou une marge positive qui l'en écartera..</p>
+
+<div>{{EmbedInteractiveExample("pages/css/margin-bottom.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cette propriété n'a aucun effet sur les éléments en ligne (<em>inline</em>) qui ne sont pas remplacés comme {{HTMLElement("tt")}} ou {{HTMLElement("span")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt;     */
+margin-bottom: 10px;    /* Une longueur absolue */
+margin-bottom: 1em;     /* Une longueur relative à la taille du texte */
+margin-bottom: 5%;      /* Une longueur relative à la
+                 largeur du bloc englobant */
+
+/* Valeurs avec un mot-clé */
+margin-bottom: auto;
+
+/* Valeurs globales*/
+margin-bottom: inherit;
+margin-bottom: initial;
+margin-bottom: unset;
+</pre>
+
+<p>La valeur de cette propriété peut être le mot-clé <code>auto</code>, une longueur (<code>&lt;length&gt;</code>) ou un pourcentage (<code>&lt;percentage</code><code>&gt;</code>). Cette valeur peut être nulle, positive ou négative.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Cette valeur définit une largeur fixée. Pour les valeurs qui peuvent être utilisées, voir la page sur le type {{cssxref("&lt;length&gt;")}}.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Une valeur en pourcentage (type {{cssxref("&lt;percentage&gt;")}} qui est relative à la <strong>largeur</strong> du bloc englobant.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Voir {{cssxref("margin")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<p>Grâce à la feuille de style on définit la marge basse et la hauteur des différentes <code>div</code> :</p>
+
+<pre class="brush: css">.box0 {
+  margin-bottom:1em;
+  height:3em;
+}
+.box1 {
+  margin-bottom:-1.5em;
+  height:4em;
+}
+.box2 {
+  border:1px dashed black;
+  border-width:1px 0;
+  margin-bottom:2em;
+}
+
+</pre>
+
+<p>On ajoute quelques règles afin de mieux visualiser les effets obtenus :</p>
+
+<pre class="brush: css">.container {
+  background-color:orange;
+  width:320px;
+  border:1px solid black;
+}
+div {
+  width:320px;
+  background-color:gold;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+&lt;div class="box0"&gt;Boîte 0&lt;/div&gt;
+&lt;div class="box1"&gt;Boîte 1&lt;/div&gt;
+&lt;div class="box2"&gt;La marge négative de 1 m'attire vers le haut&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples',350,200)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Box', '#margin-bottom', 'margin-bottom')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>Pas de modification significative.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-bottom')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>margin-bottom</code> peut désormais être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-bottom')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>L'effet sur les éléments en ligne est supprimé.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#margin-bottom', 'margin-bottom')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.margin-bottom")}}</p>
diff --git a/files/fr/web/css/margin-inline-end/index.html b/files/fr/web/css/margin-inline-end/index.html
new file mode 100644
index 0000000000..a2f3b7c213
--- /dev/null
+++ b/files/fr/web/css/margin-inline-end/index.html
@@ -0,0 +1,114 @@
+---
+title: margin-inline-end
+slug: Web/CSS/margin-inline-end
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/margin-inline-end
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>margin-inline-end</code></strong> définit la marge logique appliquée à la fin des éléments en ligne, selon le mode d'écriture, la directionalité et l'orientation du texte. Selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}, elle peut correspondre à {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} ou {{cssxref("margin-left")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/margin-inline-end.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cette propriété est à rapprocher de {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}} et de {{cssxref("margin-inline-start")}} qui définissent les autres marges appliquées à l'élément.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+margin-inline-end: 10px;      /* Une longueur absolue */
+margin-inline-end: 1em;       /* Une longueur relative à la taille du texte */
+margin-inline-end: 5%;        /* Une largeur relative à la
+                                   largeur du bloc englobant */
+
+/* Valeurs avec un mot-clé */
+margin-inline-end: auto;
+
+/* Valeurs globales */
+margin-inline-end: inherit;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>La propriété <code>margin-inline-end</code> peut prendre les mêmes valeurs que la propriété {{cssxref("margin-left")}}.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  margin-inline-end: 20px;
+  background-color: #c8c800;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-margin-inline-end", "margin-inline-end")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.margin-inline-end")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes :
+  <ul>
+   <li>{{cssxref("margin-top")}},</li>
+   <li>{{cssxref("margin-right")}},</li>
+   <li>{{cssxref("margin-bottom")}}</li>
+   <li>{{cssxref("margin-left")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("margin-inline-start")}}</li>
+ <li>{{cssxref("writing-mode")}}</li>
+ <li>{{cssxref("direction")}}</li>
+ <li>{{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/margin-inline-start/index.html b/files/fr/web/css/margin-inline-start/index.html
new file mode 100644
index 0000000000..66f62e3a22
--- /dev/null
+++ b/files/fr/web/css/margin-inline-start/index.html
@@ -0,0 +1,114 @@
+---
+title: margin-inline-start
+slug: Web/CSS/margin-inline-start
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/margin-inline-start
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>margin-inline-start</code></strong> définit la marge logique appliquée au début des éléments en ligne, selon le mode d'écriture, la directionalité et l'orientation du texte. Selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}, elle peut correspondre à {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} ou {{cssxref("margin-left")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/margin-inline-start.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cette propriété est à rapprocher de {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}} et de {{cssxref("margin-inline-end")}} qui définissent les autres marges appliquées à l'élément.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+margin-inline-start: 10px;      /* Une longueur absolue */
+margin-inline-start: 1em;       /* Une longueur relative à la taille du texte */
+margin-inline-start: 5%;        /* Une largeur relative à la
+                                   largeur du bloc englobant */
+
+/* Valeurs avec un mot-clé */
+margin-inline-start: auto;
+
+/* Valeurs globales */
+margin-inline-start: inherit;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>La propriété <code>margin-inline-start</code> peut prendre les mêmes valeurs que la propriété {{cssxref("margin-left")}}.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  margin-inline-start: 20px;
+  background-color: #c8c800;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-margin-inline-start", "margin-inline-start")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.margin-inline-start")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes :
+  <ul>
+   <li>{{cssxref("margin-top")}},</li>
+   <li>{{cssxref("margin-right")}},</li>
+   <li>{{cssxref("margin-bottom")}}</li>
+   <li>{{cssxref("margin-left")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("margin-inline-end")}}</li>
+ <li>{{cssxref("writing-mode")}}</li>
+ <li>{{cssxref("direction")}}</li>
+ <li>{{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/margin-inline/index.html b/files/fr/web/css/margin-inline/index.html
new file mode 100644
index 0000000000..44ce1a255a
--- /dev/null
+++ b/files/fr/web/css/margin-inline/index.html
@@ -0,0 +1,103 @@
+---
+title: margin-inline
+slug: Web/CSS/margin-inline
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/margin-inline
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>margin-inline</code></strong> définit la marge sur les côtés de l'élément qui sont ceux de l'axe en ligne. Cette propriété logique peut correspondre à différentes marges selon le mode d'écriture de l'élément, sa direction ou l'orientation du texte. Autrement dit, cette propriété peut correspondre aux propriétés {{cssxref("margin-top")}} et {{cssxref("margin-bottom")}} ou à   {{cssxref("margin-right")}} et {{cssxref("margin-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+margin-inline: 10px 20px;  /* Une longueur absolue */
+margin-inline: 1em 2em;    /* Une longueur relative à la taille du texte */
+margin-inline: 5% 2%;      /* Une longueur relative à la largeur ou hauteur du bloc englobant */
+margin-inline: 10px;       /* Une valeur utilisée pour les deux côtés */
+
+/* Valeurs avec un mot-clé */
+margin-inline: auto;
+
+/* Valeurs globales */
+margin-inline: inherit;
+margin-inline: initial;
+margin-inline: unset;
+</pre>
+
+<p>Cette propriété est une propriété raccourcie pour les deux propriétés logiques {{cssxref("margin-inline-start")}} et {{cssxref("margin-inline-end")}}. Pour régler les marges selon l'axe en ligne, on pourra utiliser la propriété logique raccourcie {{cssxref("margin-block")}} qui correspond aux propriétés {{cssxref("margin-block-start")}} et {{cssxref("margin-block-end")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>La propriété <code>margin-inline</code> peut prendre les mêmes valeurs que la propriété {{cssxref("margin-left")}}.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.texteExemple {
+  writing-mode: vertical-rl;
+  margin-inline: 20px 40px;
+  background-color: #c8c800;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="texteExemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-margin-inline", "margin-inline")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.margin-inline")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes : {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} et {{cssxref("margin-left")}}</li>
+ <li>Les propriétés qui influencent les propriétés logiques {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/margin-left/index.html b/files/fr/web/css/margin-left/index.html
new file mode 100644
index 0000000000..46fda52a12
--- /dev/null
+++ b/files/fr/web/css/margin-left/index.html
@@ -0,0 +1,188 @@
+---
+title: margin-left
+slug: Web/CSS/margin-left
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/margin-left
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>margin-left</code></strong> d'un élément définit l'espace horizontal à gauche qui formera la marge à gauche de l'élément. On peut avoir une marge gauche négative qui rapproche l'élément de ses voisins ou une marge positive qui l'en écarte.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/margin-left.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Les marges des côtés droit et gauche de deux boîtes adjacentes peuvent fusionner entre elles. C'est ce qu'on appelle <a href="/fr/docs/Web/CSS/Fusion_des_marges"><em>la fusion de marges</em></a>.</p>
+
+<p>Dans certains cas où les dimensions sont sur-contraintes (autrement dit quand <code>width</code>, <code>margin-left</code>, <code>border</code>, <code>padding</code>, la taille de la zone de contenu et <code>margin-right</code> sont toutes définies), <code>margin-left</code> est ignorée. La valeur calculée sera la même que si <code>auto</code> avait été utilisée.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+margin-left: 10px;  /* Une longueur absolue */
+margin-left: 1em;   /* Une longueur absolue relative à la taille du texte */
+margin-left: 5%;    /* Une marge dont la taille est relative à la largeur
+                       du bloc englobant */
+
+/* Valeur avec un mot-clé */
+margin-left: auto;
+
+/* Valeurs globales */
+margin-left: inherit;
+margin-left: initial;
+margin-left: unset;
+</pre>
+
+<p>La valeur de cette propriété peut être le mot-clé <code>auto</code>, une longueur (<code>&lt;length&gt;</code>) ou un pourcentage (<code>&lt;percentage&gt;</code>).</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une valeur fixe, du type {{cssxref("&lt;length&gt;")}} : elle peut être exprimée en pixels (<code>px</code>) ou en fonction de la taille du texte (<code>em</code>) ou être relative à la taille de la zone d'affichage (<em>viewport</em>) (<code>vh</code>).</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Une valeur exprimée en pourcentage (type {{cssxref("&lt;percentage&gt;")}} relative à la largeur du bloc englobant.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Un mot-clé qui indique que la marge droite s'adapte à l'espace restant. Cet espace est principalement défini par le mode de disposition utilisé.L'espace calculé sera réparti de façon équitable entre la marge droite et la marge gauche si celle-ci vaut également <code>auto</code>. Le tableau suivant précise les différents cas :
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col">Valeur de {{cssxref("display")}}</th>
+    <th scope="col">Valeur de {{cssxref("float")}}</th>
+    <th scope="col">Valeur de {{cssxref("position")}}</th>
+    <th scope="col">Valeur calculée pour <code>auto</code></th>
+    <th scope="col">Commentaires</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <th><code>inline</code>, <code>inline-block</code>, <code>inline-table</code></th>
+    <th><em>n'importe laquelle</em></th>
+    <th><code>static</code> ou <code>relative</code></th>
+    <td><code>0</code></td>
+    <td>Disposition en ligne</td>
+   </tr>
+   <tr>
+    <th><code>block</code>, <code>inline</code>, <code>inline-block</code>, <code>block</code>, <code>table</code>, <code>inline-table</code>, <code>list-item</code>, <code>table-caption</code></th>
+    <th><em>n'importe laquelle</em></th>
+    <th><code>static</code> ou <code>relative</code></th>
+    <td><code>0</code> sauf si <code>margin-left</code> et <code>margin-right</code> valent <code>auto</code>. Dans ce cas, la valeur utilisée sera celle qui permet de centrer l'élément au sein de l'élément parent.</td>
+    <td>Disposition en bloc</td>
+   </tr>
+   <tr>
+    <th><code>block</code>, <code>inline</code>, <code>inline-block</code>, <code>block</code>, <code>table</code>, <code>inline-table</code>, <code>list-item</code>, <code>table-caption</code></th>
+    <th><code>left</code> ou <code>right</code></th>
+    <th><code>static</code> ou <code>relative</code></th>
+    <td><code>0</code></td>
+    <td>Disposition en bloc avec les éléments flottants</td>
+   </tr>
+   <tr>
+    <th><em>n'importe quelle </em><code>table-*</code><em>, sauf </em><code>table-caption</code></th>
+    <th><em>n'importe laquelle</em></th>
+    <th><em>n'importe laquelle</em></th>
+    <td><code>0</code></td>
+    <td>Les éléments <code>table-*</code> n'ont pas de marge, il faut utiliser {{cssxref("border-spacing")}} à la place.</td>
+   </tr>
+   <tr>
+    <th><em>n'importe laquelle, sauf <code>flex</code>,</em> <code>inline-flex</code><em>, ou </em><code>table-*</code></th>
+    <th><em>n'importe laquelle</em></th>
+    <th><em><code>fixed</code></em> ou <code>absolute</code></th>
+    <td><code>0</code> sauf si <code>margin-left</code> et <code>margin-right</code> valent <code>auto</code>. Dans ce cas, la valeur utilisée sera celle qui permet de centrer la boîte de bordure dans la zone de largeur disponible si elle fixée.</td>
+    <td>Positionnement absolu.</td>
+   </tr>
+   <tr>
+    <th><code>flex</code>, <code>inline-flex</code></th>
+    <th><em>n'importe laquelle</em></th>
+    <th><em>n'importe laquelle</em></th>
+    <td><code>0</code>, sauf s'il reste de l'espace horizontal libre. Dans ce cas, l'espace restant sera distribué de façon équitable entre toutes les marges avec <code>auto</code>.</td>
+    <td>Boîtes flexibles.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple {
+  margin-left: 50%;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Un grand rosier se trouvait à l’entrée du jardin ;
+   les roses qu’il portait étaient blanches, mais
+   trois jardiniers étaient en train de les peindre
+   en rouge.
+&lt;/p&gt;
+&lt;p class=exemple&gt;
+  Alice s’avança pour les regarder, et, au moment où
+  elle approchait, elle en entendit un qui disait :
+  « Fais donc attention, Cinq, et ne m’éclabousse pas
+  ainsi avec ta peinture. »
+&lt;/p&gt;
+&lt;p&gt;
+  « Ce n’est pas de ma faute, » dit Cinq d’un ton
+  bourru, « c’est Sept qui m’a poussé le coude. »
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Box', '#the-margin', 'margin-left')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>Pas de modification significative depuis CSS 2.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-left')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>margin-left</code> peut désormais être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#item-margins', 'margin-left')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Le comportement de <code>margin-left</code> sur les éléments flexibles est défini.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-left')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>L'effet sur les éléments en ligne (<em>inline</em>) est retiré.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#margin-left', 'margin-left')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.margin-left")}}</p>
diff --git a/files/fr/web/css/margin-right/index.html b/files/fr/web/css/margin-right/index.html
new file mode 100644
index 0000000000..a34a800ead
--- /dev/null
+++ b/files/fr/web/css/margin-right/index.html
@@ -0,0 +1,186 @@
+---
+title: margin-right
+slug: Web/CSS/margin-right
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/margin-right
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>margin-right</code></strong> d'un élément définit l'espace horizontal à droite qui formera la marge à droite. On peut avoir une marge droite négative.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/margin-right.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Les marges des côtés droit et gauche de deux boîtes adjacentes peuvent fusionner entre elles. C'est ce qu'on appelle <a href="/fr/docs/Web/CSS/Fusion_des_marges"><em>la fusion de marges</em></a>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css  no-line-numbers">/* Valeur de longueur */
+/* Type &lt;length&gt;      */
+margin-right: 20px;        /* Une longueur absolue */
+margin-right: 1em;         /* Une longueur relative à la taille du texte */
+margin-right: 5%;          /* Une marge relative à la largeur
+                           du bloc englobant */
+
+/* Valeur avec un mot-clé */
+margin-right: auto;
+
+/* Valeurs globales */
+margin-right: inherit;
+margin-right: initial;
+margin-right: unset;
+</pre>
+
+<p>La valeur de cette propriété peut être le mot-clé <code>auto</code>, une longueur (<code>&lt;length&gt;</code>) ou un pourcentage (<code>&lt;percentage&gt;</code>).</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une valeur fixe, du type {{cssxref("&lt;length&gt;")}} : elle peut être exprimée en pixels (<code>px</code>) ou en fonction de la taille du texte (<code>em</code>) ou être relative à la taille de la zone d'affichage (<em>viewport</em>) (<code>vh</code>).</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Une valeur exprimée en pourcentage (type {{cssxref("&lt;percentage&gt;")}} relative à la largeur du bloc englobant.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Un mot-clé qui indique que la marge droite s'adapte à l'espace restant. Cet espace est principalement défini par le mode de disposition utilisé.L'espace calculé sera réparti de façon équitable entre la marge droite et la marge gauche si celle-ci vaut également <code>auto</code>. Le tableau suivant précise les différents cas :
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col">Valeur de {{cssxref("display")}}</th>
+    <th scope="col">Valeur de {{cssxref("float")}}</th>
+    <th scope="col">Valeur de {{cssxref("position")}}</th>
+    <th scope="col">Valeur calculée pour <code>auto</code></th>
+    <th scope="col">Commentaires</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <th><code>inline</code>, <code>inline-block</code>, <code>inline-table</code></th>
+    <th><em>n'importe laquelle</em></th>
+    <th><code>static</code> ou <code>relative</code></th>
+    <td><code>0</code></td>
+    <td>Disposition en ligne</td>
+   </tr>
+   <tr>
+    <th><code>block</code>, <code>inline</code>, <code>inline-block</code>, <code>block</code>, <code>table</code>, <code>inline-table</code>, <code>list-item</code>, <code>table-caption</code></th>
+    <th><em>n'importe laquelle</em></th>
+    <th><code>static</code> ou <code>relative</code></th>
+    <td><code>0</code> sauf si <code>margin-left</code> et <code>margin-right</code> valent <code>auto</code>. Dans ce cas, la valeur utilisée sera celle qui permet de centrer l'élément au sein de l'élément parent.</td>
+    <td>Disposition en bloc</td>
+   </tr>
+   <tr>
+    <th><code>block</code>, <code>inline</code>, <code>inline-block</code>, <code>block</code>, <code>table</code>, <code>inline-table</code>, <code>list-item</code>, <code>table-caption</code></th>
+    <th><code>left</code> ou <code>right</code></th>
+    <th><code>static</code> ou <code>relative</code></th>
+    <td><code>0</code></td>
+    <td>Disposition en bloc avec les éléments flottants</td>
+   </tr>
+   <tr>
+    <th><em>n'importe quelle </em><code>table-*</code><em> sauf </em><code>table-caption</code></th>
+    <th><em>n'importe laquelle</em></th>
+    <th><em>n'importe laquelle</em></th>
+    <td><code>0</code></td>
+    <td>Les éléments <code>table-*</code> n'ont pas de marge, il faut utiliser {{cssxref("border-spacing")}} à la place.</td>
+   </tr>
+   <tr>
+    <th><em>ni'mporte quelle autre sauf <code>flex</code>,</em> <code>inline-flex</code><em> ou </em><code>table-*</code></th>
+    <th><em>n'importe laquelle</em></th>
+    <th><em><code>fixed</code></em> ou <code>absolute</code></th>
+    <td><code>0</code> sauf si <code>margin-left</code> et <code>margin-right</code> valent <code>auto</code>. Dans ce cas, la valeur utilisée sera celle qui permet de centrer la boîte de bordure dans la zone de largeur disponible si elle fixée.</td>
+    <td>Positionnement absolu.</td>
+   </tr>
+   <tr>
+    <th><code>flex</code>, <code>inline-flex</code></th>
+    <th><em>n'importe laquelle</em></th>
+    <th><em>n'importe laquelle</em></th>
+    <td><code>0</code>, sauf s'il reste de l'espace horizontal libre. Dans ce cas, l'espace restant sera distribué de façon équitable entre toutes les marges avec <code>auto</code>.</td>
+    <td>Boîtes flexibles.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple {
+  margin-right: 50%;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Un grand rosier se trouvait à l’entrée du jardin ;
+   les roses qu’il portait étaient blanches, mais
+   trois jardiniers étaient en train de les peindre
+   en rouge.
+&lt;/p&gt;
+&lt;p class=exemple&gt;
+  Alice s’avança pour les regarder, et, au moment où
+  elle approchait, elle en entendit un qui disait :
+  « Fais donc attention, Cinq, et ne m’éclabousse pas
+  ainsi avec ta peinture. »
+&lt;/p&gt;
+&lt;p&gt;
+  « Ce n’est pas de ma faute, » dit Cinq d’un ton
+  bourru, « c’est Sept qui m’a poussé le coude. »
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Box', '#the-margin', 'margin-right')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>Pas de changement significatif.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-right')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>margin-right</code> peut désormais être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#item-margins', 'margin-right')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Le comportement de <code>margin-right</code> est défini sur les éléments flexibles.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-right')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>L'effet sur les éléments en ligne (<em>inline</em>) est retiré.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#margin-right', 'margin-right')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.margin-right")}}</p>
diff --git a/files/fr/web/css/margin-top/index.html b/files/fr/web/css/margin-top/index.html
new file mode 100644
index 0000000000..01d930ef85
--- /dev/null
+++ b/files/fr/web/css/margin-top/index.html
@@ -0,0 +1,125 @@
+---
+title: margin-top
+slug: Web/CSS/margin-top
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/margin-top
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>margin-top</code></strong> définit l'espace vertical pour la marge appliquée en haut de l'élément. Une valeur négative peut être utilisée.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/margin-top.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cette propriété n'a aucun effet sur les éléments non-remplacés en ligne (<em>inline</em>) tels que {{HTMLElement("tt")}} ou {{HTMLElement("span")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+margin-top: 10px;  /* Une longueur absolue */
+margin-top: 1em;   /* Une longueur proportionnelle à la taille du texte */
+margin-top: 5%;    /* Une marge relative à la largeur */
+                   /* du bloc englobant le plus proche */
+
+/* Valeur avec un mot-clé */
+margin-top: auto;
+
+/* Valeurs globales */
+margin-top: inherit;
+margin-top: initial;
+margin-top: unset;
+</pre>
+
+<p>Le mot-clé <code>auto</code> ou une valeur de longueur (<code>&lt;length&gt;</code>) ou de pourcentage (<code>&lt;percentage&gt;</code>).</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Cette valeur définit une largeur fixée. Pour les valeurs qui peuvent être utilisées, voir la page sur le type {{cssxref("&lt;length&gt;")}}.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Une valeur en pourcentage (type {{cssxref("&lt;percentage&gt;")}} qui est relative à la <strong>largeur</strong> du bloc englobant.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Voir {{cssxref("margin")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: blue;
+  background-clip: border-box;
+  width: 50px;
+  height: 2em;
+}
+.exemple {
+  margin-top: 3em;
+  background-color: gold;
+  background-clip: border-box;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;&lt;/div&gt;
+&lt;p class=exemple&gt;
+  C’est ce qui arriva en effet, et bien plus tôt
+  qu’elle ne s’y attendait. Elle n’avait pas bu
+  la moitié de la bouteille, que sa tête touchait
+  au plafond et qu’elle fut forcée de se baisser
+  pour ne pas se casser le cou.&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Box', '#the-margin', 'margin-top')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>Aucun changement significatif</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-top')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>margin-top</code> peut désormais être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-top')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>L'effet sur les éléments en ligne (<em>inline</em>) est retiré.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#margin-top', 'margin-top')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.margin-top")}}</p>
diff --git a/files/fr/web/css/margin-trim/index.html b/files/fr/web/css/margin-trim/index.html
new file mode 100644
index 0000000000..1cff4f496c
--- /dev/null
+++ b/files/fr/web/css/margin-trim/index.html
@@ -0,0 +1,66 @@
+---
+title: margin-trim
+slug: Web/CSS/margin-trim
+tags:
+  - CSS
+  - Draft
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/margin-trim
+---
+<div>{{CSSRef}}{{Draft}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>margin-trim</code></strong> permet à un conteneur de rogner les marges de ses éléments enfants qui sont adjacentes aux bords du conteneur.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Les marges ne sont pas rognées par le conteneur.</dd>
+ <dt><code>in-flow</code></dt>
+ <dd>
+ <p>Pour les boîtes du conteneur et qui sont dans le flux, les marges sur l'axe de bloc et qui sont adjacentes aux bords du conteneur sont tronquées.</p>
+
+ <p>Les marges fusionnées avec de telles marges sont également tronquées.</p>
+ </dd>
+ <dt><code>all</code></dt>
+ <dd>Les marges des boîtes qui sont dans le flux et des boîtes flottantes coincidant avec le bord du conteneur sont tronquées.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Spécification</th>
+   <th>État</th>
+   <th>Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Box", "#margin-trim", "margin-trim")}}</td>
+   <td>{{Spec2("CSS3 Box")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.margin-trim")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{CSSxRef("margin")}}</li>
+</ul>
diff --git a/files/fr/web/css/margin/index.html b/files/fr/web/css/margin/index.html
new file mode 100644
index 0000000000..867ce5d592
--- /dev/null
+++ b/files/fr/web/css/margin/index.html
@@ -0,0 +1,187 @@
+---
+title: margin
+slug: Web/CSS/margin
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/margin
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>margin</code></strong> définit la taille des marges sur les quatre côtés de l'élément. C'est une propriété raccourcie qui permet de manipuler les autres propriétés de marges : {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} et {{cssxref("margin-left")}}.</p>
+
+<p>Il est possible d'utiliser des valeurs négatives pour chacun des côtés.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/margin.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Les marges haute et basse n'ont aucun effet sur les élements en ligne (<em>inline</em>) qui ne sont pas <a href="/fr/docs/Web/CSS/%C3%89l%C3%A9ment_remplac%C3%A9">remplacés</a> (par exemple les {{HTMLElement("span")}} ou {{HTMLElement("code")}}).</p>
+
+<div class="note">
+<p><strong>Note : </strong>Les marges créent un espace supplémentaire à l'extérieur de l'élément. Le <em>« remplissage »</em> ({{cssxref("padding")}}) permet quant à lui de créer un espace supplémentaire à l'intérieur de l'élément.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css">/* La propriété s'applique aux quatre côtés */
+margin: 1em;
+
+/* vertical | horizontal */
+margin: 5% auto;
+
+/* haut | horizontal | bas */
+margin: 1em auto 2em;
+
+/* haut | droit | bas | gauche */
+margin: 2px 1em 0 auto;
+
+/* Valeurs globales */
+margin: inherit;
+margin: initial;
+margin: unset;
+</pre>
+
+<p>La propriété <code>margin</code> peut être définie grâce à une, deux, trois ou quatre valeurs. Chaque valeur est une valeur de type {{cssxref("&lt;length&gt;")}} ou de type {{cssxref("&lt;percentage&gt;")}} ou est le mot-clé <code><a href="#auto">auto</a></code>. Les valeurs négatives permette de dessiner l'élément plus près de ses voisins que ne l'aurait permis la valeur par défaut.</p>
+
+<ul>
+ <li>Avec <strong>une</strong> valeur, celle-ci définira la marge pour les quatre côtés de la boîte</li>
+ <li>Avec <strong>deux</strong> valeurs, la première s'appliquera aux côtés haut et bas et la seconde aux côtés gauche et droit</li>
+ <li>Avec <strong>trois</strong> valeurs, la première s'appliquera au côté haut, la deuxième aux côtés gauche et droit et la troisième au côté bas</li>
+ <li>Avec <strong>quatre</strong> valeurs, la première s'appliquera en haut, la deuxième à droite, la troisième en bas et la quatrième à gauche (ce qui correspond au sens des aiguilles d'une montre - c'est plus facile à mémoriser).</li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>Cette propriété peut accepter une, deux, trois ou quatre valeurs avec les types suivants :</p>
+
+<dl>
+ <dt><a id="length" name="length"><code>&lt;length&gt;</code></a></dt>
+ <dd>La marge est définie avec une valeur absolue. On peut utiliser des valeurs négatives. Pour les différentes unités possibles, voir la page {{cssxref("&lt;length&gt;")}}.</dd>
+ <dt><a id="percentage" name="percentage"><code>&lt;percentage&gt;</code></a></dt>
+ <dd>Une valeur relative, exprimée en pourcentage (type {{cssxref("&lt;percentage&gt;")}}, à la <strong>largeur</strong> du bloc englobant. On peut utiliser des valeurs négatives.</dd>
+ <dt><a id="auto" name="auto"><code>auto</code></a></dt>
+ <dd><code>auto </code>est remplacé par une valeur adaptée (il peut être utilisé pour centrer les blocs, par exemple, <code>div { width:50%;  margin:0 auto; }</code> permet de centrer un conteneur <code>div</code> horizontalement).</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css; highlight:[2,7]">.ex1 {
+  margin: auto;
+  background: gold;
+  width: 66%;
+}
+.ex2 {
+  margin: 20px 0px 0 -20px;
+  background: gold;
+  width: 66%;
+}</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="ex1"&gt;
+  margin:     auto;
+  background: gold;
+  width:      66%;
+&lt;/div&gt;
+&lt;div class="ex2"&gt;
+  margin:     20px 0px 0px -20px;
+  background: gold;
+  width:      66%;
+&lt;/div&gt;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Exemple_simple')}}</p>
+
+<h3 id="Autres_exemples">Autres exemples</h3>
+
+<pre class="brush: css">margin: 5%;                /* tous les côtés avec une marge de 5% */
+margin: 10px;              /* tous les côtés avec une marge de 10px */
+
+margin: 1.6em 20px;        /* haut et bas à 1.6em     */
+                           /* gauche et droite à 20px */
+
+margin: 10px 3% 1em;       /* haut à 10px, gauche et droite à 3% */
+                           /* bas à 1em */
+
+margin: 10px 3px 30px 5px; /* haut à 10px, droite à 3px */
+                           /* bas à 30px, gauche à 5px  */
+
+margin: 1em auto;          /* marge de 1em en haut et en bas       */
+                           /* la boîte est centrée horizontalement */
+
+margin: auto;              /* boîte centrée horizontalement */
+                           /* marge nulle en haut et en bas */
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<h3 id="Centrer_horizontalement">Centrer horizontalement</h3>
+
+<p>Afin de centrer un élément horizontalement, avec un navigateur « moderne » on peut utiliser {{cssxref("display")}}<code>: flex; </code>{{cssxref("justify-content")}}<code>: center;</code>.</p>
+
+<p>Les anciens navigateurs comme IE8-9 ne gèrent pas ces valeurs. Aussi, il faudra utiliser <code>margin: 0 auto </code>pour centrer un élément au sein de son parent.</p>
+
+<h3 id="Fusion_des_marges">Fusion des marges</h3>
+
+<p>Les marges haute et basse des éléments sont parfois fusionnées en une seule marge qui est égale à la plus grande des deux marges. Pour plus d'informations, lire <a href="/fr/docs/Web/CSS/Modèle_de_boîte_CSS/Fusion_des_marges">l'article sur la fusion des marges</a>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Box', '#margin', 'margin')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>Aucun changement significatif.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'margin')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>margin</code> peut désormais être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Retrait de l'effet sur les éléments en ligne (<em>inline</em>).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#margin', 'margin')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.margin")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="internal" href="/fr/docs/Web/CSS/Fusion_des_marges">Fusion des marges</a></li>
+ <li><a href="/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte">Le modèle de boîte CSS</a></li>
+ <li>{{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} et {{cssxref("margin-left")}}</li>
+</ul>
diff --git a/files/fr/web/css/mask-border-mode/index.html b/files/fr/web/css/mask-border-mode/index.html
new file mode 100644
index 0000000000..4b28d66c90
--- /dev/null
+++ b/files/fr/web/css/mask-border-mode/index.html
@@ -0,0 +1,63 @@
+---
+title: mask-border-mode
+slug: Web/CSS/mask-border-mode
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/mask-border-mode
+---
+<div>{{cssref}}{{SeeCompatTable}}</div>
+
+<p>La propriété CSS <strong><code>mask-border-mode</code></strong> indique le mode de fusion utilisé pour <a href="/fr/docs/Web/CSS/mask-border">le masque de bordure</a>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+mask-border-mode: luminance;
+mask-border-mode: alpha;
+
+/* Valeurs globales */
+mask-border-mode: inherit;
+mask-border-mode: initial;
+mask-border-mode: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>luminance</code></dt>
+ <dd>Les valeurs de luminance proventant de l'image de masque sont utilisées pour le masque.</dd>
+ <dt><code>alpha</code></dt>
+ <dd>Les valeurs du canal alpha proventant de l'image de masque sont utilisées pour le masque.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Masks", "#propdef-mask-border-mode", "mask-border-mode")}}</td>
+   <td>{{Spec2("CSS Masks")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>TBD</p>
diff --git a/files/fr/web/css/mask-border-outset/index.html b/files/fr/web/css/mask-border-outset/index.html
new file mode 100644
index 0000000000..336e8f8c4f
--- /dev/null
+++ b/files/fr/web/css/mask-border-outset/index.html
@@ -0,0 +1,85 @@
+---
+title: mask-border-outset
+slug: Web/CSS/mask-border-outset
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/mask-border-outset
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété CSS <strong><code>mask-border-outset</code></strong> indique la distance entre le <a href="/fr/docs/Web/CSS/mask-border">masque de la bordure</a> et la boîte de la bordure.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeur de longueur */
+/* Type &lt;length&gt; */
+mask-border-outset: 1rem;
+
+/* Valeur numérique */
+/* Type &lt;number&gt; */
+mask-border-outset: 1.5;
+
+/* Décalage vertical | horizontal */
+mask-border-outset: 1 1.2;
+
+/* haut | horizontal | bas */
+mask-border-outset: 30px 2 45px;
+
+/* haut | droit | bas | gauche */
+mask-border-outset: 7px 12px 14px 5px;
+
+/* Valeurs globales */
+mask-border-outset: inherit;
+mask-border-outset: initial;
+mask-border-outset: unset;
+</pre>
+
+<p>La propriété <code>mask-border-outset</code> peut être utilisée avec une, deux, trois ou quatre valeurs. Chaque valeur peut être de type {{cssxref("&lt;length&gt;")}} ou {{cssxref("&lt;number&gt;")}}. Les valeurs négatives ne sont pas autorisées.</p>
+
+<ul>
+ <li>Si une seule valeur est utilisée, c'est ce décalage qui est utilisé pour chaque côté.</li>
+ <li>Lorsque deux valeurs sont utilisées, la première indique le décalage en haut et en bas et la seconde indique le décalage à gauche et à droite.</li>
+ <li>Lorsque trois valeurs sont utilisées, la première indique le décalage avec le côté haut, la deuxième avec le côté gauche et le côté droit et la troisième le décalage avec le côté bas.</li>
+ <li>Lorsque quatre valeurs sont indiquées, elles s'appliquent respectivement aux côtés haut, droit, bas et gauche (c'est-à-dire dans le sens des aiguilles d'une montre).</li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>La distance, avec une dimension, pour le décalage du masque.</dd>
+ <dt>{{cssxref("&lt;number&gt;")}}</dt>
+ <dd>Le décalage du masque, exprimé comme un multiple de {{cssxref("border-width")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specifications" name="Specifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Masks", "#propdef-mask-border-outset", "mask-border-outset")}}</td>
+   <td>{{Spec2("CSS Masks")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Compatiblité_des_navigateurs">Compatiblité des navigateurs</h2>
+
+<p>TBD</p>
diff --git a/files/fr/web/css/mask-border-repeat/index.html b/files/fr/web/css/mask-border-repeat/index.html
new file mode 100644
index 0000000000..ac59c27850
--- /dev/null
+++ b/files/fr/web/css/mask-border-repeat/index.html
@@ -0,0 +1,79 @@
+---
+title: mask-border-repeat
+slug: Web/CSS/mask-border-repeat
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/mask-border-repeat
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété CSS <strong><code>mask-border-repeat</code></strong> indique la façon dont les régions du bord du <a href="/fr/docs/Web/CSS/mask-border">masque</a> sont ajustées pour correspondre aux dimensions de la bordure de l'élément.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+mask-border-repeat: stretch;
+mask-border-repeat: repeat;
+mask-border-repeat: round;
+mask-border-repeat: space;
+
+/* vertical | horizontal */
+mask-border-repeat: round stretch;
+
+/* Valeurs globales */
+mask-border-repeat: inherit;
+mask-border-repeat: initial;
+mask-border-repeat: unset;
+</pre>
+
+<p>La propriété <code>mask-border-repeat</code> peut être utilisée avec une ou deux valeurs parmi celles de la liste ci-après.</p>
+
+<ul>
+ <li>Lorsqu'une seule valeur est fournie, le même comportement est utilisé pour les quatre côtés.</li>
+ <li>Lorsque deux valeurs sont indiquées, la première valeur s'applique aux côtés haut et bas et la deuxième aux côtés gauche et droit.</li>
+</ul>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>stretch</code></dt>
+ <dd>Les bords de l'image source sont étirés afin de remplir l'espace entre chaque bordure.</dd>
+ <dt><code>repeat</code></dt>
+ <dd>Les bords de l'image source sont répétés afin de remplir l'espace entre chaque bordure. Les fragments répétés peuvent être rognés afin que le remplissage soit exact.</dd>
+ <dt><code>round</code></dt>
+ <dd>Les bords de l'image source sont répétés afin de remplir l'espace entre chaque bordure. Les fragments peuvent être étirés afin que le remplissage soit exact.</dd>
+ <dt><code>space</code></dt>
+ <dd>Les bords de l'image source sont répétés afin de remplir l'espace entre chaque bordure. L'espace supplémentaire est réparti entre les fragments répétés pour que le remplissage soit exact.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specifications" name="Specifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Masks", "#propdef-mask-border-repeat", "mask-border-repeat")}}</td>
+   <td>{{Spec2("CSS Masks")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>TBD</p>
diff --git a/files/fr/web/css/mask-border-slice/index.html b/files/fr/web/css/mask-border-slice/index.html
new file mode 100644
index 0000000000..a3020b76fd
--- /dev/null
+++ b/files/fr/web/css/mask-border-slice/index.html
@@ -0,0 +1,107 @@
+---
+title: mask-border-slice
+slug: Web/CSS/mask-border-slice
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/mask-border-slice
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété CSS <strong><code>mask-border-slice</code></strong> permet de découper l'image source, fournie par {{cssxref("mask-border-source")}}, en différentes régions. Ces régions sont utilisées pour former les composants du <a href="/fr/docs/Web/CSS/mask-border">masque de la bordure</a>.</p>
+
+<p>Cette découpe permet d'obtenir neuf régions au total : quatre pour les coins, quatre pour les côtés et une région pour le centre. Cette découpe est effectuée selon 4 lignes qui sont écartées d'une certaine distance des bords de l'image.</p>
+
+<p><a href="/files/3814/border-image-slice.png"><img alt="The nine regions defined by the border-image or border-image-slice properties" src="/files/3814/border-image-slice.png" style="margin: 1px; padding: 1em; width: 460px;"></a></p>
+
+<p>Le diagramme ci-avant illustre l'emplacement de chaque région.</p>
+
+<ul>
+ <li>Les zones de 1 à 4 sont <a id="corner-regions" name="corner-regions">les zones aux coins</a>. Chacune sera utilisée une seule fois pour construire les coins de l'image du masque.</li>
+ <li>Les zones 5 à 8 sont <a id="edge-regions" name="edge-regions">les zones de côtés</a>. Ces zones peuvent être <a href="/fr/docs/Web/CSS/mask-border-repeat">répétées, redimensionnées, ou modifiées</a> afin que le masque de bordule final aient les mêmes dimensions que l'élément.</li>
+ <li>La zone 9 est  <a id="middle-region" name="middle-region">la zone centrale</a>. Par défaut, elle n'est pas utilisée mais elle pourra être utilisée comme image d'arrière-plan si le mot-clé <code>fill</code> est utilisé.</li>
+</ul>
+
+<p>Les propriétés {{cssxref("mask-border-repeat")}}, {{cssxref("mask-border-width")}} et  {{cssxref("mask-border-outset")}} déterminent la façon dont ces régions sont utilisées pour construire le masque final.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Une valeur pour tous les côtés */
+mask-border-slice: 30%;
+
+/* vertical | horizontal */
+mask-border-slice: 10% 30%;
+
+/* haut | horizontal | bas */
+mask-border-slice: 30 30% 45;
+
+/* haut | droit | bas | gauche */
+mask-border-slice: 7 12 14 5;
+
+/* Utilisation du mot-clé `fill` */
+mask-border-slice: 10% fill 7 12;
+
+/* Valeurs globales */
+mask-border-slice: inherit;
+mask-border-slice: initial;
+mask-border-slice: unset;
+</pre>
+
+<p>La propriété <code>mask-border-slice</code> peut être définie avec une, deux, trois ou quatre valeurs <code>&lt;number-percentage&gt;</code> qui représentent la distance entre le trait de coupe et le bord de l'image. Les valeurs négatives sont invalides et les valeurs supérieures à la dimension de l'image sur cet axe sont ramenées à <code>100%</code>.</p>
+
+<ul>
+ <li>Lorsqu'une seule valeur est utilisée, les quatre traits de découpe se situent à la même distance de leurs côtés respectifs.</li>
+ <li>Lorsque deux valeurs sont utilisées, la première valeur indique la distance des traits de coupe pour le côté haut et bas et la deuxième indique la distance des traits de coupe pour le côté droit et gauche.</li>
+ <li>Lorsque trois positions sont utilisées, la première indique la distance pour le trait de coupe du côté haut, la deuxième indique la distance pour les traits de coupe des côtés droit et gauche et la troisième valeur indique la distance pour le trait de coupe par rapport au côté bas.</li>
+ <li>Si 4 valeurs sont employées, elles indiquent respectivement les distances des traits de coupe par rapport aux côtés haut, droit, bas et gauche (c'est-à-dire dans l'ordre des aiguilles d'une montre).</li>
+</ul>
+
+<p>La valeur optionnelle <code>fill</code> peut être utilisée et placée à n'importe quel endroit de la déclaration.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;number&gt;")}}</dt>
+ <dd>Une valeur numérique représentant le décalage entre le trait de coupe et le bord de l'image. La valeur est exprimée en nombre de pixels pour les images matricielles (<em>bitmap</em>/<em>raster</em>) et en coordonnées pour les images vectorielles. Pour les images vecorielles, le nombre utilisé est relatif à la taille de l'élément et pas à la taille de l'image source. Dans ce dernier cas, il peut être préférable d'utiliser des valeurs en pourcentage.</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>Le décalage entre le trait de découpe et le bord de l'image, exprimé relativement à la taille de l'image source (pour les traits horizontaux, la distance est proportionnelle à la hauteur et pour les traits verticaux, la distance est proportionnelle à la largeur).</dd>
+ <dt><code>fill</code></dt>
+ <dd>La zone centrale est conservée ; sa largeur et sa hauteur correspondent aux dimensions utilisées pour les régions haute et gauche.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Masks", "#propdef-mask-border-slice", "mask-border-slice")}}</td>
+   <td>{{Spec2("CSS Masks")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>TBD</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Propriétés_raccourcies#Quelques_cas_aux_limites_épineux">Description illustrée de la syntaxe pouvant couvrir de 1 à 4 valeurs</a></li>
+</ul>
diff --git a/files/fr/web/css/mask-border-source/index.html b/files/fr/web/css/mask-border-source/index.html
new file mode 100644
index 0000000000..2b6ffcd553
--- /dev/null
+++ b/files/fr/web/css/mask-border-source/index.html
@@ -0,0 +1,72 @@
+---
+title: mask-border-source
+slug: Web/CSS/mask-border-source
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/mask-border-source
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété CSS <strong><code>mask-border-source</code></strong> définit l'image à utiliser pour créer <a href="/fr/docs/Web/CSS/mask-border">le masque de bordure</a> d'un élément.</p>
+
+<p>C'est la propriété {{cssxref("mask-border-slice")}} qui est utilisée afin de découper l'image en tranches/régions ensuite appliquées dynamiquement pour créer le masque final.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeur avec un mot-clé */
+mask-border-source: none;
+
+/* Valeurs de type &lt;image&gt; */
+mask-border-source: url(image.jpg);
+mask-border-source: linear-gradient(to top, red, yellow);
+
+/* Valeurs globales */
+mask-border-source: inherit;
+mask-border-source: initial;
+mask-border-source: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Aucun masque de bordure n'est utilisé.</dd>
+ <dt>{{cssxref("&lt;image&gt;")}}</dt>
+ <dd>Une référence vers une image qu'on utilise pour le masque de la bordure.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Voir la page {{cssxref("mask-border")}}.</p>
+
+<h2 id="Specifications" name="Specifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Masks", "#propdef-mask-border-source", "mask-border-source")}}</td>
+   <td>{{Spec2("CSS Masks")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>TBD</p>
diff --git a/files/fr/web/css/mask-border-width/index.html b/files/fr/web/css/mask-border-width/index.html
new file mode 100644
index 0000000000..e10891a78b
--- /dev/null
+++ b/files/fr/web/css/mask-border-width/index.html
@@ -0,0 +1,94 @@
+---
+title: mask-border-width
+slug: Web/CSS/mask-border-width
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/mask-border-width
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété CSS <strong><code>mask-border-width</code></strong> définit la largeur <a href="/fr/docs/Web/CSS/mask-border">du masque de bordure</a> d'un élément.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeur avec un mot-clé */
+mask-border-width: auto;
+
+/* Valeur de longueur */
+/* Type &lt;length&gt; */
+mask-border-width: 1rem;
+
+/* Valeur proportionnelle */
+/* Type &lt;percentage&gt; */
+mask-border-width: 25%;
+
+/* Valeur numérique */
+/* Type &lt;number&gt; */
+mask-border-width: 3;
+
+/* vertical | horizontal */
+mask-border-width: 2em 3em;
+
+/* haut | horizontal | bas */
+mask-border-width: 5% 15% 10%;
+
+/* haut | droit | bas | gauche */
+mask-border-width: 5% 2em 10% auto;
+
+/* Valeurs globales */
+mask-border-width: inherit;
+mask-border-width: initial;
+mask-border-width: unset;
+</pre>
+
+<p>La propriété <code>mask-border-width</code> peut être définie avec une, deux, trois ou quatre valeurs parmi celles de la liste ci-après.</p>
+
+<ul>
+ <li>Lorsqu'une seule valeur est indiquée, elle est utilisée comme largeur pour les quatre côtés.</li>
+ <li>Lorsque deux valeurs sont fournies, la première indique la largeur pour les côtés bas et haut et la deuxième la largeur pour les côtés gauche et droite.</li>
+ <li>Lorsque trois valeurs sont fournies, la première est appliquée au côté haut, la deuxième au côté gauche et droit et la troisième au côté bas.</li>
+ <li>Lorsque quatre valeurs sont fournies, elles s'appliquent respectivement aux côtés haut, droit, bas et gauche (c'est-à-dire dans l'ordre des aiguilles d'une montre).</li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>La largeur du masque de bordure, indiquée avec une valeur de type {{cssxref("&lt;length&gt;")}} ou {{cssxref("&lt;percentage&gt;")}}. Les pourcentages sont relatifs à la largeur de la zone de bordure pour les décalages horizontaux et à la hauteur de la zone de bordure pour les décalages verticaux. Cette valeur ne peut pas être négative.</dd>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>La largeur du masque de bordure comme multiple de la largeur {{cssxref("border-width")}}. Cette valeur ne peut pas être négative.</dd>
+ <dt><code>auto</code></dt>
+ <dd>La largeur du masque de bordure est égale à la largeur ou à la hauteur intrinsèque de la valeur {{cssxref("mask-border-slice")}} correspondante. Si l'image ne possède pas de dimension intrinsèque, c'est la valeur <code>border-width</code> qui est utilisée à la place.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specifications" name="Specifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Masks", "#propdef-mask-border-width", "mask-border-width")}}</td>
+   <td>{{Spec2("CSS Masks")}}</td>
+   <td>Définition intiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>TBD</p>
diff --git a/files/fr/web/css/mask-border/index.html b/files/fr/web/css/mask-border/index.html
new file mode 100644
index 0000000000..4695440d10
--- /dev/null
+++ b/files/fr/web/css/mask-border/index.html
@@ -0,0 +1,114 @@
+---
+title: mask-border
+slug: Web/CSS/mask-border
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Propriété raccourcie
+  - Reference
+translation_of: Web/CSS/mask-border
+---
+<div>{{cssref}}{{SeeCompatTable}}</div>
+
+<p>La propriété CSS <strong><code>mask-border</code></strong> permet de créer un masque le long de la bordure d'un élément.</p>
+
+<p>Cette propriété est une propriété <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">raccourcie</a> pour les propriétés {{cssxref("mask-border-source")}}, {{cssxref("mask-border-slice")}}, {{cssxref("mask-border-width")}}, {{cssxref("mask-border-outset")}}, {{cssxref("mask-border-repeat")}} et {{cssxref("mask-border-mode")}}. Comme pour l'ensemble des propriétés raccourcies, toutes les propriétés qui ne sont pas explicitement utilisées dans la règle utilisent leur <a href="/fr/docs/Web/CSS/Valeur_initiale">valeur initiale</a>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* source | slice */
+mask-border: url('border-mask.png') 25;
+
+/* source | slice | repeat */
+mask-border: url('border-mask.png') 25 space;
+
+/* source | slice | width */
+mask-border: url('border-mask.png') 25 / 35px;
+
+/* source | slice | width | outset | repeat | mode */
+mask-border: url('border-mask.png') 25 / 35px / 12px space alpha;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;'mask-border-source'&gt;</code></dt>
+ <dd>L'image source, pour plus d'informations, voir {{cssxref("mask-border-source")}}.</dd>
+ <dt><code>&lt;'mask-border-slice'&gt;</code></dt>
+ <dd>Les dimensions qui permettent de découper l'image source en différentes régions. Il est possible d'utiliser jusqu'à 4 valeurs. Voir {{cssxref("mask-border-slice")}}.</dd>
+ <dt><code>&lt;'mask-border-width'&gt;</code></dt>
+ <dd>La largeur du masque pour la bordure. Il est possible d'utiliser jusqu'à 4 valeurs. Voir {{cssxref("mask-border-width")}}.</dd>
+ <dt><code>&lt;'mask-border-outset'&gt;</code></dt>
+ <dd>La distance entre le masque de la bordure et le bord extérieur de l'image. Il est possible d'utiliser jusqu'à 4 valeurs. Voir {{cssxref("mask-border-outset")}}.</dd>
+ <dt><code>&lt;'mask-border-repeat'&gt;</code></dt>
+ <dd>Cette valeur indiique la façon dont les régions du bord de l'image source sont ajustées afin de correspondre aux dimensions du masque. Il est possible d'utiliser jusqu'à deux valeurs. Voir {{cssxref("mask-border-repeat")}}.</dd>
+ <dt><code>&lt;'mask-border-mode'&gt;</code></dt>
+ <dd>Cette valeur définit si l'image source est traitée comme un masque de luminance ou comme un masque alpha. Voir {{cssxref("mask-border-mode")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Image_matricielle_(bitmap)">Image matricielle (<em>bitmap</em>)</h3>
+
+<p>Dans cet exemple, on utilise un masque en losange. L'image source utilisée est un fichier PNG de 90 pixels de long et de large :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15836/mask-border-diamonds.png" style="height: 90px; width: 90px;"></p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div id="bitmap"&gt;
+  Cet élément est entouré d'un masque de bordure
+  matriciel. C'est pas mal.
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<p>Pour avoir un seul losange, on divise le carré en 3 (avec la valeur <code>30</code>). On utilise la valeur <code>round</code> pour que le masque soit réparti également de part et d'autre.</p>
+
+<pre class="brush: css">div {
+  width: 200px;
+  background-color: lavender;
+  border: 18px solid salmon;
+  padding: 10px;
+
+  mask-border:
+    url("https://mdn.mozillademos.org/files/15836/mask-border-diamonds.png")  /* source */
+    30 /         /* slice */
+    36px 18px    /* width */
+    round;       /* repeat */
+}
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Image_matricielle_(bitmap)")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentairezs</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Masks", "#propdef-mask-border", "mask-border")}}</td>
+   <td>{{Spec2("CSS Masks")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateursEdit">Compatibilité des navigateurs<a class="button section-edit only-icon" href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-image$edit#Browser_compatibility" rel="nofollow, noindex"><span>Edit</span></a></h2>
+
+<p><span>TBD</span></p>
diff --git a/files/fr/web/css/mask-clip/index.html b/files/fr/web/css/mask-clip/index.html
new file mode 100644
index 0000000000..33e7499059
--- /dev/null
+++ b/files/fr/web/css/mask-clip/index.html
@@ -0,0 +1,130 @@
+---
+title: mask-clip
+slug: Web/CSS/mask-clip
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/mask-clip
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>mask-clip</code></strong> définit la zone qui est modifiée par un masque. Le contenu « peint » sera restreint à cette zone.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de type &lt;geometry-box&gt; */
+mask-clip: content-box;
+mask-clip: padding-box;
+mask-clip: border-box;
+mask-clip: margin-box;
+mask-clip: fill-box;
+mask-clip: stroke-box;
+mask-clip: view-box;
+
+/* Valeurs avec un mot-clé */
+mask-clip: no-clip;
+
+/* Valeurs multiples */
+mask-clip: padding-box, no-clip;
+mask-clip: view-box, fill-box, border-box;
+
+/* Mots-clés non-standards */
+-webkit-mask-clip: border;
+-webkit-mask-clip: padding;
+-webkit-mask-clip: content;
+-webkit-mask-clip: text;
+
+/* Valeurs globales */
+mask-clip: inherit;
+mask-clip: initial;
+mask-clip: unset;
+</pre>
+
+<h2 id="Syntaxe_2">Syntaxe</h2>
+
+<p>Un ou plusieurs mots-clés parmi ceux listés ci-après, chacun séparé par une virgule.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>content-box</code></dt>
+ <dd>La partie qui est « peinte » est rognée sur la boîte de contenu.</dd>
+ <dt><code>padding-box</code></dt>
+ <dd>La partie qui est « peinte » est rognée sur la boîte de <em>padding</em>.</dd>
+ <dt><code>border-box</code></dt>
+ <dd>La partie qui est « peinte » est rognée sur la boîte de bordure.</dd>
+ <dt><code>margin-box</code></dt>
+ <dd>La partie qui est « peinte » est rognée sur la boîte de marge.</dd>
+ <dt><code>fill-box</code></dt>
+ <dd>La partie qui est « peinte » est rognée sur la boîte contenant l'objet.</dd>
+ <dt><code>stroke-box</code></dt>
+ <dd>La partie qui est « peinte » est rognée sur la boîte contenant le contour.</dd>
+ <dt><code>view-box</code></dt>
+ <dd>C'est le <em>viewport</em> du plus proche SVG qui est utilisé comme boîte de référence. Si l'attribut <code><a href="/fr/docs/Web/SVG/Attribute/viewBox">viewBox</a></code> est défini pour l'élément qui crée le <em>viewport</em>, la boîte de référence est positionnée à l'origine du système de coordonnées défini par l'attribut <code>viewBox</code> et les dimensions de la boîtes sont basées sur la hauteur et la largeur de l'attribut <code>viewBox</code>.</dd>
+ <dt><code>no-clip</code></dt>
+ <dd>La partie qui est « peinte » n'est pas rognée.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[10]">#masked {
+  width: 100px;
+  height: 100px;
+  background-color: #8cffa0;
+  margin: 20px;
+  border: 20px solid #8ca0ff;
+  padding: 20px;
+  -webkit-mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg);
+  mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg);
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+  -webkit-mask-clip: border;
+  mask-clip: border-box;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="masked"&gt;&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "220px", "250px")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Masks", "#the-mask-clip", "mask-clip")}}</td>
+   <td>{{Spec2("CSS Masks")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.mask-clip")}}</p>
diff --git a/files/fr/web/css/mask-composite/index.html b/files/fr/web/css/mask-composite/index.html
new file mode 100644
index 0000000000..1b4d2be85f
--- /dev/null
+++ b/files/fr/web/css/mask-composite/index.html
@@ -0,0 +1,117 @@
+---
+title: mask-composite
+slug: Web/CSS/mask-composite
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/mask-composite
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>mask-composite</code></strong> permet d'effectuer une opération de composition entre le masque situé sur la couche de l'élément et le masque présent en dessous.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé*/
+mask-composite: add;
+mask-composite: subtract;
+mask-composite: intersect;
+mask-composite: exclude;
+
+/* Valeurs globales */
+mask-composite: inherit;
+mask-composite: initial;
+mask-composite: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Un ou plusieurs mots-clés parmi ceux listés ci-après, chacun séparé par une virgule.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>La couche du masque de l'élément est appelée <em>source</em> et les couches inférieures sont appelées <em>destination</em>.</p>
+
+<dl>
+ <dt><code>add</code></dt>
+ <dd>La source est placée sur la destination.</dd>
+ <dt><code>subtract</code></dt>
+ <dd>La source est placée lorsque la destination est vide à cet endroit.</dd>
+ <dt><code>intersect</code></dt>
+ <dd>Les endroits de la source qui chevauchent la destination prennent le pas sur la destination.</dd>
+ <dt><code>exclude</code></dt>
+ <dd>Les régions de la source et de la destination qui ne se chevauchent pas sont combinées.The non-overlapping regions of source and destination are combined.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[7]">#masked {
+  width: 100px;
+  height: 100px;
+  background-color: #8cffa0;
+  -webkit-mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg),
+                      url(https://mdn.mozillademos.org/files/12676/star.svg);
+  mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg),
+              url(https://mdn.mozillademos.org/files/12676/star.svg);
+  mask-size: 100% 100%;
+  -webkit-mask-composite: add;
+  mask-composite: add; /* peut-être modifiée dans la démo */
+}
+</pre>
+
+<div class="hidden">
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="masked"&gt;
+&lt;/div&gt;
+&lt;select id="compositeMode"&gt;
+  &lt;option value="add"&gt;add&lt;/option&gt;
+  &lt;option value="subtract"&gt;subtract&lt;/option&gt;
+  &lt;option value="intersect"&gt;intersect&lt;/option&gt;
+  &lt;option value="exclude"&gt;exclude&lt;/option&gt;
+&lt;/select&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var clipBox = document.getElementById("compositeMode");
+clipBox.addEventListener("change", function (evt) {
+  document.getElementById("masked").style.maskClip = evt.target.value;
+});
+</pre>
+</div>
+
+<p>{{EmbedLiveSample("Exemples", "200px", "200px")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Masks", "#the-mask-composite", "mask-composite")}}</td>
+   <td>{{Spec2("CSS Masks")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.mask-composite")}}</p>
diff --git a/files/fr/web/css/mask-image/index.html b/files/fr/web/css/mask-image/index.html
new file mode 100644
index 0000000000..2a74bb21dc
--- /dev/null
+++ b/files/fr/web/css/mask-image/index.html
@@ -0,0 +1,96 @@
+---
+title: mask-image
+slug: Web/CSS/mask-image
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/mask-image
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>mask-image</code></strong> définit l'image qui sera utilisée comme masque pour un élément.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeur avec un mot-clé */
+mask-image: none;
+
+/* Valeur de type &lt;mask-source&gt; */
+mask-image: url(masks.svg#mask1);
+
+/* Valeurs de type &lt;image&gt; */
+mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent);
+mask-image: image(url(mask.png), skyblue);
+
+/* Gestion de plusieurs masques */
+mask-image: image(url(mask.png), skyblue, linear-gradient(rgba(0, 0, 0, 1.0), transparent);
+
+/* Valeurs globales */
+mask-image: inherit;
+mask-image: initial;
+mask-image: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Le masque défini par ce mot-clé sera une image noire transparente.</dd>
+ <dt><code>&lt;mask-source&gt;</code></dt>
+ <dd>Une référence {{cssxref("&lt;url&gt;")}} vers un masque ({{SVGElement("mask")}}) ou une image CSS.</dd>
+ <dt>{{cssxref("&lt;image&gt;")}}</dt>
+ <dd>Une image utilisée pour le masque.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css;">#masked {
+  width: 100px;
+  height: 100px;
+  background-color: #8cffa0;
+  -webkit-mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
+  mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="masked"&gt;&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Exemples", "100px", "100px",'', '', 'hide-codepen-jsfiddle') }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Masks", "#the-mask-image", "mask-image")}}</td>
+   <td>{{Spec2("CSS Masks")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.mask-image")}}</p>
diff --git a/files/fr/web/css/mask-mode/index.html b/files/fr/web/css/mask-mode/index.html
new file mode 100644
index 0000000000..1f1f49c77b
--- /dev/null
+++ b/files/fr/web/css/mask-mode/index.html
@@ -0,0 +1,131 @@
+---
+title: mask-mode
+slug: Web/CSS/mask-mode
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/mask-mode
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>mask-mode</code></strong> détermine si le masque défini par {{cssxref("mask-image")}} est considéré comme un masque de luminance ou un masque alpha (transparence).</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+mask-mode: alpha;
+mask-mode: luminance;
+mask-mode: match-source;
+
+/* Gestion de plusieurs masques */
+mask-mode: alpha, match-source;
+
+/* Valeurs globales */
+mask-mode: inherit;
+mask-mode: initial;
+mask-mode: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <code>mask-mode</code> est définie avec un ou plusieurs mots-clés parmi ceux de la liste suivante, séparés par des virgules.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>alpha</code></dt>
+ <dd>Ce mot-clé indique que ce sont les valeurs du canal alpha (le canal de transparence) qui sont utilisées comme valeurs de masque.</dd>
+ <dt><code>luminance</code></dt>
+ <dd>Ce mot-clé indique que ce sont les valeurs de luminance qui sont utilisées comme valeurs de masque.</dd>
+ <dt><code>match-source</code></dt>
+ <dd>
+ <p>Si la propriété {{cssxref("mask-image")}} est de type <code>&lt;mask-source&gt;</code>, les valeurs de luminance de l'image doivent être utilisée comme valeurs pour le masque.</p>
+
+ <p>Si elle est de type {{cssxref("&lt;image&gt;")}}, ce seront les valeurs de transparence (canal alpha) qui seront utilisées.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Alpha">Alpha</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css; highlight[7]">#masked {
+  width: 100px;
+  height: 100px;
+  background: blue linear-gradient(red, blue);
+  -webkit-mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg);
+  mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg);
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+  -webkit-mask-mode: alpha;
+  mask-mode: alpha;
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div id="masked"&gt;&lt;/div&gt;
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Alpha", "110px", "130px")}}</p>
+
+<h3 id="Luminance">Luminance</h3>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css; highlight[7]">#masked {
+  width: 100px;
+  height: 100px;
+  background-color: #8cffa0;
+  -webkit-mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg);
+  mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg);
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+  -webkit-mask-mode: luminance;
+  mask-mode: luminance;
+}
+</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;div id="masked"&gt;&lt;/div&gt;
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Luminance", "110px", "130px")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Masks", "#the-mask-mode", "mask-mode")}}</td>
+   <td>{{Spec2("CSS Masks")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.mask-mode")}}</p>
diff --git a/files/fr/web/css/mask-origin/index.html b/files/fr/web/css/mask-origin/index.html
new file mode 100644
index 0000000000..fdebe34999
--- /dev/null
+++ b/files/fr/web/css/mask-origin/index.html
@@ -0,0 +1,144 @@
+---
+title: mask-origin
+slug: Web/CSS/mask-origin
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/mask-origin
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>mask-origin</code></strong> permet de définir l'origine à partir de laquelle placer le masque.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+mask-origin: content-box;
+mask-origin: padding-box;
+mask-origin: border-box;
+mask-origin: margin-box;
+mask-origin: fill-box;
+mask-origin: stroke-box;
+mask-origin: view-box;
+
+/* Valeurs multiples */
+mask-origin: padding-box, content-box;
+mask-origin: view-box, fill-box, border-box;
+
+/* Valeurs non-standards */
+ -webkit-mask-origin: content;
+ -webkit-mask-origin: padding;
+ -webkit-mask-origin: border;
+
+/* Valeurs globales */
+mask-origin: inherit;
+mask-origin: initial;
+mask-origin: unset;
+</pre>
+
+<p>Pour les éléments qui sont affichés avec une unique boîte, cette propriété définit la zone de positionnement du masque. Autrement dit, cette propriété indique l'origine de la position pour l'image définie via {{cssxref("mask-image")}}. Pour les éléments qui sont affichés comme plusieurs boîtes (les boîtes <em>inline</em> ou plusieurs lignes ou plusieurs boîtes sur plusieurs pages), elle définit les boîtes sur lesquelles {{cssxref("box-decoration-break")}} agira pour déterminer la zone de positionnement du masque.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Un ou plusieurs mots-clés parmi ceux listés ci-après, chacun séparé par une virgule.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>content-box</code></dt>
+ <dd>La position de la zone est relative à la boîte de contenu.</dd>
+ <dt><code>padding-box</code></dt>
+ <dd>La position de la zone est relative à la boîte de remplissage (<em>padding</em>). Pour les boîtes simples, <code>0 0</code> désigne le coin en haut à gauche de la bordure de cette boîte et <code>100% 100%</code> le coin en bas à droite.</dd>
+ <dt><code>border-box</code></dt>
+ <dd>La position de la zone est relative à la boîte de bordure.</dd>
+ <dt><code>margin-box</code></dt>
+ <dd>La position de la zone est relative à la boîte de marge.</dd>
+ <dt><code>fill-box</code></dt>
+ <dd>La position de la zone est relative à la boîte liée à l'objet (<em><a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#__svg__SVGLocatable__getBBox">bounding box</a></em>).</dd>
+ <dt><code>stroke-box</code></dt>
+ <dd>La position de la zone est relative à la boîte de contour de l'objet (<em><a href="https://www.w3.org/TR/css-masking/#stroke-bounding-box">stroke bounding box</a></em>).</dd>
+ <dt><code>view-box</code></dt>
+ <dd>La zone d'affichage (<em>viewport</em>) SVG la plus proche est utilisée comme boîte de référence. Si l'attribut {{svgattr("viewBox")}} est défini pour l'élément qui crée la zone d'affichage, la boîte de référence est positionnée à l'origine du système de coordonnées établi par <code>viewBox</code>. Les dimensions de la boîte de référence sont les valeurs de largeur et de hauteur de <code>viewBox</code>.</dd>
+ <dt><code>content</code>{{non-standard_inline}}</dt>
+ <dd>Synonyme de <code>content-box</code>.</dd>
+ <dt><code>padding</code>{{non-standard_inline}}</dt>
+ <dd>Synonyme de <code>padding-box</code>.</dd>
+ <dt><code>border</code>{{non-standard_inline}}</dt>
+ <dd>Synonyme de <code>border-box</code>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[9]">#masked {
+  width: 100px;
+  height: 100px;
+  margin: 10px;
+  border: 10px solid blue;
+  background-color: #8cffa0;
+  padding: 10px;
+  -webkit-mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
+  mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
+  -webkit-mask-origin: border-box; /* À modifier dans le résultat. */
+  mask-origin: border-box; /* À modifier dans le résultat. */
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="masked"&gt;
+&lt;/div&gt;
+&lt;select id="origin"&gt;
+  &lt;option value="content-box"&gt;content-box&lt;/option&gt;
+  &lt;option value="padding-box"&gt;padding-box&lt;/option&gt;
+  &lt;option value="border-box" selected&gt;border-box&lt;/option&gt;
+  &lt;option value="margin-box"&gt;margin-box&lt;/option&gt;
+  &lt;option value="fill-box"&gt;fill-box&lt;/option&gt;
+  &lt;option value="stroke-box"&gt;stroke-box&lt;/option&gt;
+  &lt;option value="view-box"&gt;view-box&lt;/option&gt;
+&lt;/select&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var origin = document.getElementById("origin");
+origin.addEventListener("change", function (evt) {
+  document.getElementById("masked").style.maskOrigin = evt.target.value;
+});
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 160, 200)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Masks", "#the-mask-origin", "mask-origin")}}</td>
+   <td>{{Spec2("CSS Masks")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.mask-origin")}}</p>
diff --git a/files/fr/web/css/mask-position/index.html b/files/fr/web/css/mask-position/index.html
new file mode 100644
index 0000000000..c5e49fc5c9
--- /dev/null
+++ b/files/fr/web/css/mask-position/index.html
@@ -0,0 +1,132 @@
+---
+title: mask-position
+slug: Web/CSS/mask-position
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/mask-position
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>mask-position</code></strong> indique la position initiale pour chaque image de masque utilisée. Cette position est relative à l'origine définie via la propriété {{cssxref("mask-origin")}}.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+mask-position: top;
+mask-position: bottom;
+mask-position: left;
+mask-position: right;
+mask-position: center;
+
+/*  Valeurs en pourcentage */
+/* Type &lt;percentage&gt;       */
+mask-position: 25% 75%;
+
+/* Valeurs en longueur */
+/* Type &lt;length&gt;       */
+mask-position: 0px 0px;
+mask-position: 1cm 2cm;
+mask-position: 10ch 8em;
+
+/* Valeurs multiples */
+mask-position: 0px 0px, center;
+
+/* Valeurs globales */
+mask-position: inherit;
+mask-position: initial;
+mask-position: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;position&gt;</code></dt>
+ <dd>Une position CSS (type {{cssxref("&lt;position&gt;")}}) qui représente une position par rapport aux côtés de la boîte de l'élément. Les décalages indiqués peuvent être relatifs ou absolus. On notera que la position obtenue peut être située en dehors de la boîte de l'élément.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[13]">#wrapper {
+  border: 1px solid black;
+  width: 250px;
+  height: 250px;
+}
+
+#masked {
+  width: 250px;
+  height: 250px;
+  background: blue linear-gradient(red, blue);
+  mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
+  mask-repeat: no-repeat;
+  mask-position: top right; /* Can be changed in the live sample */
+  margin-bottom: 10px;
+}
+</pre>
+
+<div class="hidden">
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="wrapper"&gt;
+  &lt;div id="masked"&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+&lt;select id="maskPosition"&gt;
+  &lt;option value="top"&gt;top&lt;/option&gt;
+  &lt;option value="center"&gt;center&lt;/option&gt;
+  &lt;option value="bottom"&gt;bottom&lt;/option&gt;
+  &lt;option value="top right" selected&gt;top right&lt;/option&gt;
+  &lt;option value="center center"&gt;center center&lt;/option&gt;
+  &lt;option value="bottom left"&gt;bottom left&lt;/option&gt;
+  &lt;option value="10px 20px"&gt;10px 20px&lt;/option&gt;
+  &lt;option value="60% 20%"&gt;60% 20%&lt;/option&gt;
+&lt;/select&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var maskPosition = document.getElementById("maskPosition");
+maskPosition.addEventListener("change", function (evt) {
+  document.getElementById("masked").style.maskPosition = evt.target.value;
+});
+</pre>
+</div>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples",200,200)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Masks", "#the-mask-position", "mask-position")}}</td>
+   <td>{{Spec2("CSS Masks")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.mask-position")}}</p>
diff --git a/files/fr/web/css/mask-repeat/index.html b/files/fr/web/css/mask-repeat/index.html
new file mode 100644
index 0000000000..501cc2e22f
--- /dev/null
+++ b/files/fr/web/css/mask-repeat/index.html
@@ -0,0 +1,165 @@
+---
+title: mask-repeat
+slug: Web/CSS/mask-repeat
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/mask-repeat
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>mask-repeat</code></strong> définit la façon dont les images de masque sont répétées. Une image de masque peut être répétée horizontalement, verticalement, dans les deux directions ou pas du tout.</p>
+
+<pre class="brush:css no-line-numbers">/* Syntaxe avec une valeur */
+mask-repeat: repeat-x;
+mask-repeat: repeat-y;
+mask-repeat: repeat;
+mask-repeat: space;
+mask-repeat: round;
+mask-repeat: no-repeat;
+
+/* Syntaxe avec deux valeurs */
+/* Première valeur : répétition horizontale */
+/* Seconde valeur : répétition verticale */
+mask-repeat: repeat space;
+mask-repeat: repeat repeat;
+mask-repeat: round space;
+mask-repeat: no-repeat round;
+
+/* Valeurs globales */
+mask-repeat: inherit;
+mask-repeat: initial;
+mask-repeat: unset;
+</pre>
+
+<p>Par défaut, les images répétées sont rognées aux limites de l'élément mais on peut également les adapter pour qu'elles soient également réparties sur l'élément : en les redimensionnant si nécessaire (<code>round</code>) ou en les espaçant (<code>space</code>).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Une ou plusieurs valeurs <code>&lt;repeat-style&gt;</code>, séparées par des virgules.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;repeat-style&gt;</code></dt>
+ <dd>La notation utilisant une seule valeur est une notation raccourcie qui possède un équivalent avec deux valeurs :</dd>
+ <dd>
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td><strong>Valeur unique</strong></td>
+    <td><strong>Équivalent sur deux valeurs</strong></td>
+   </tr>
+   <tr>
+    <td><code>repeat-x</code></td>
+    <td><code>repeat no-repeat</code></td>
+   </tr>
+   <tr>
+    <td><code>repeat-y</code></td>
+    <td><code>no-repeat repeat</code></td>
+   </tr>
+   <tr>
+    <td><code>repeat</code></td>
+    <td><code>repeat repeat</code></td>
+   </tr>
+   <tr>
+    <td><code>space</code></td>
+    <td><code>space space</code></td>
+   </tr>
+   <tr>
+    <td><code>round</code></td>
+    <td><code>round round</code></td>
+   </tr>
+   <tr>
+    <td><code>no-repeat</code></td>
+    <td><code>no-repeat no-repeat</code></td>
+   </tr>
+  </tbody>
+ </table>
+ Lorsqu'on utilise deux valeurs, la première indique le motif de répétition sur l'axe horizontal et la deuxième sur l'axe vertical. Voici une définition de chacun des mots-clés :</dd>
+ <dd>
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td><code>repeat</code></td>
+    <td>L'image est répétée autant de fois que nécessaire pour recouvrir la zone dédiée au masque. La dernière image sera rognée si nécessaire.</td>
+   </tr>
+   <tr>
+    <td><code>space</code></td>
+    <td>L'image est répétée autant que possible sans rognage. La première et la dernière image sont accolées aux bords de l'élément et des espaces sont repartis de façon égale entre les images. La propriété {{cssxref("mask-position")}} est ignorée sauf s'il n'y a qu'une seule image qui puisse être affichée sans être rognée. Le seul cas où <code>space</code> est utilisé et qu'une image est rognée se produit lorsque l'image est trop grande pour être affichée.</td>
+   </tr>
+   <tr>
+    <td><code>round</code></td>
+    <td>L'image est répétée autant que possible et est étirée si nécessaire afin qu'il n'y ait ni rognage ni espace restant.</td>
+   </tr>
+   <tr>
+    <td><code>no-repeat</code></td>
+    <td>Il n'y a aucune répétition de l'image (dès lors, il est possible que toute la zone ne soit pas recouverte par cette image). La position de l'image est définie grâce à la propriété {{cssxref("mask-position")}}.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple {
+  height: 100px;
+  width: 100px;
+  background-color: rgb(128,128,128);
+  border: solid black 1px;
+
+  /* Pour voir la bordure */
+  -webkit-mask-clip: content;
+  mask-clip: content;
+
+  -webkit-mask-image: url('https://developer.mozilla.org/static/img/favicon32.png');
+  mask-image: url('https://developer.mozilla.org/static/img/favicon32.png');
+
+  -webkit-mask-repeat: repeat-x;
+  mask-repeat: repeat-x;
+
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="exemple"&gt;&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","200","200")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Masks", "#the-mask-repeat", "mask-repeat")}}</td>
+   <td>{{Spec2("CSS Masks")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.mask-repeat")}}</p>
diff --git a/files/fr/web/css/mask-size/index.html b/files/fr/web/css/mask-size/index.html
new file mode 100644
index 0000000000..bbdc192176
--- /dev/null
+++ b/files/fr/web/css/mask-size/index.html
@@ -0,0 +1,153 @@
+---
+title: mask-size
+slug: Web/CSS/mask-size
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/mask-size
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>mask-size</code></strong> définit les dimensions des images utilisées comme masques. La taille de l'image peut être contrainte, partiellement ou complètement, afin de conserver ses proportions intrinsèques.</p>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+mask-size: cover;
+mask-size: contain;
+
+/* Syntaxe avec une valeur           */
+/* qui indique la largeur de l'image */
+/* la hauteur est fixée à auto       */
+mask-size: 50%;
+mask-size: 3em;
+mask-size: 12px;
+mask-size: auto;
+
+/* Syntaxe avec deux valeurs :           */
+/* La première valeur indique la largeur */
+/* La seconde indique la hauteur         */
+mask-size: 50% auto;
+mask-size: 3em 25%;
+mask-size: auto 6px;
+mask-size: auto auto;
+
+/* Valeurs multiples pour gérer différents */
+/* masques. Attention à ne pas confondre   */
+/* avec mask-size: auto auto               */
+mask-size: auto, auto;
+mask-size: 50%, 25%, 25%;
+mask-size: 6px, auto, contain;
+
+/* Valeurs globales */
+mask-size: inherit;
+mask-size: initial;
+mask-size: unset;
+</pre>
+
+<div class="note"><strong>Note :</strong> Si la valeur de cette propriété n'est pas définie avec la propriété raccourcie {{cssxref("mask")}} et que celle-ci est appliquée après <code>mask-size</code>, la valeur sera réinitialisée avec sa valeur initiale à cause de la propriété raccourcie.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Une ou plusieurs valeurs <code>&lt;bg-size&gt;</code>, séparées par des virgules. Une valeur <code>&lt;bg-size&gt;</code> peut être définie de trois façons :</p>
+
+<ul>
+ <li>avec le mot-clé <code><a href="#contain">contain</a></code></li>
+ <li>avec le mot-clé <code><a href="#cover">cover</a></code></li>
+ <li>avec des valeurs pour la hauteur et la largeur.</li>
+</ul>
+
+<p>Pour indiquer une taille avec une largeur et une hauteur, il est possible de fournir une ou deux valeurs :</p>
+
+<ul>
+ <li>Si une seule valeur est fournie, elle servira à définir la largeur, la hauteur vaudra alors <code>auto</code></li>
+ <li>Si deux valeurs sont fournies, la première définira la largeur et la seonde définira la hauteur.</li>
+</ul>
+
+<p>Chaque valeur peut être une longueur (<code>&lt;length&gt;</code>), un pourcentage (<code>&lt;percentage&gt;</code>) ou <code>auto</code>.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une valeur de longueur (type {{cssxref("&lt;length&gt;")}} qui redimensionne l'image avec la longueur indiquée dans l'axe correspondant. Les longueurs négatives ne sont pas autorisées.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Une valeur de pourcentage ({{cssxref("&lt;percentage&gt;")}} qui indique le redimensionnement à appliquer dans l'axe correspondant à partir de l'origine définie par {{cssxref("mask-origin")}} par rapport à la taille  de la zone du masque. Par défaut, cette zone contient la boîte de contenu et la boîte de remplissage (<em>padding</em>) (on peut modifier cette zone pour choisir les boîtes concernées). Les valeurs négatives ne sont pas autorisées.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Un mot-clé qui permet de redimensionner l'image du masque dans l'axe correspondant tout en conservant ses proportions.</dd>
+ <dt><a><code>contain</code></a></dt>
+ <dd>Un mot-clé qui redimensionne l'image afin qu'elle soit aussi grande que possible et conserve ses proportions tout en étant contenue dans le contenur. Par défaut, l'image est centrée sauf si {{cssxref("mask-position")}} indique un autre paramètre.</dd>
+ <dt><a id="cover"><code>cover</code></a></dt>
+ <dd>Un mot-clé qui se comporte à l'inverse de <code>contain</code>. L'image est agrandie autant que possible et ses proportions sont conservées et elle couvre toute la surface du conteneur, si les dimensions du conteneur sont différentes, l'image est rognée sur les côtés (haut et bas ou droite et gauche).</dd>
+</dl>
+
+<p>L'interprétation des valeurs se fera en fonction des dimensions intrinsèques de l'image (sa hauteur et sa largeur) et de ses proportions intrinsèques (le ratio entre la largeur et la hauteur). Une image matricielle (<em>bitmap</em>) possèdera toujours des dimensions intrinsèques et des proportions intrinsèques. Une image vectorielle pourra avoir des dimensions intrinsèques (et donc, <em>de facto</em>, des proportions intrinsèques) ou également n'avoir qu'une ou aucune dimension intrinsèque et des proportions intrinsèques ou non. Les gradients sont considérés comme des images sans dimensions ni proportions intrinsèques.</p>
+
+<p>La taille de l'image affichée pour le masque est calculée de la façon suivante :</p>
+
+<dl>
+ <dt>Si les deux composants de <code>mask-size</code> sont définis et sont différents de <code>auto</code> :</dt>
+ <dd>L'image est affichée avec la taille indiquée.</dd>
+ <dt>Si <code>mask-size</code> vaut <code>contain</code> ou <code>cover</code> :</dt>
+ <dd>L'image est affichée en conservant ses proportions avec la plus grande taille possible pour être contenue ou couvrire toute la zone du masque. Si l'image ne possède pas de proportions intrinsèques, sa taille d'affichage sera la taille de la zone du masque.</dd>
+ <dt>Si <code>mask-size</code> vaut <code>auto</code> ou <code>auto auto </code>:</dt>
+ <dd>Si l'image possède deux dimensions intrinsèques, elle sera affichée avec cette taille. Si elle ne possède pas de dimensions intrinsèques ni de proportions intrinsèques, elle sera affichée à la taille de la zone du masque. Si elle n'a aucune dimension intrinsèque mais possède des proportions intrinsèques elle sera affichée comme si <code>contain</code> avait été utilisé. Si l'image possède une dimension intrinsèque et des proportions intrinsèques, sa taille sera déterminée grâce à ses informations. Si l'image possède une dimension intrinsèque mais aucune proportion intrinsèque, la dimension connue sera utilisée pour cet axe et la seconde sera celle de la zone pour le masque.</dd>
+ <dt>Si <code>mask-size</code> possède un composant <code>auto</code> et un autre composant différent de <code>auto</code> :</dt>
+ <dd>Si l'image possède des proportions intrinsèques, elle sera affichée avec la dimension connue et la deuxième sera calculée à partir de la proportion. Si l'image ne possède pas de proportions intrinsèques, la valeur définie sera utilisée pour l'axe correspondant et pour l'autre axe, on utilisera la dimension intrinsèque si elle est connue, sinon, on utilisera la dimension (sur cet axe) de la zone du masque.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple {
+  height: 100px;
+  width: 100px;
+  background-color: rgb(128,128,128);
+
+  -webkit-mask-image: url('https://mdn.mozillademos.org/files/13024/masque2.png');
+  mask-image: url('https://mdn.mozillademos.org/files/13024/masque2.png');
+
+  -webkit-mask-size: auto 50%;
+  mask-size: auto 50%;
+
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="exemple"&gt;&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples",200,200)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Masks", "#the-mask-size", "mask-size")}}</td>
+   <td>{{Spec2("CSS Masks")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.mask-size")}}</p>
diff --git a/files/fr/web/css/mask-type/index.html b/files/fr/web/css/mask-type/index.html
new file mode 100644
index 0000000000..e62f64e80e
--- /dev/null
+++ b/files/fr/web/css/mask-type/index.html
@@ -0,0 +1,182 @@
+---
+title: mask-type
+slug: Web/CSS/mask-type
+tags:
+  - CSS
+  - Propriété
+  - Reference
+  - SVG
+translation_of: Web/CSS/mask-type
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>mask-type</code></strong> définit si un masque sera utilisé comme un masque de <em>luminance</em> ou comme un masque de transparence (aussi appelé masque <em>alpha</em>). Cette propriété s'applique sur l'élément SVG {{SVGElement("mask")}}. Le comportement de cette propriété peut être surchargée par la propriété {{cssxref("mask-mode")}} qui définit sur quel élément le masque est appliqué. De façon générale, les masques alpha sont appliqués plus rapidement que les masques de luminance.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+mask-type: luminance;
+mask-type: alpha;
+
+/* Valeurs globales */
+mask-type: inherit;
+mask-type: initial;
+mask-type: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <code>mask-type</code> est définie avec un mot-clé parmi ceux définis ci-après.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>luminance</code></dt>
+ <dd>Un mot-clé qui indique que l'image du masque doit être utilisée comme un masque de luminance. Autrement dit, ce sont <a href="https://fr.wikipedia.org/wiki/Luminance_relative">les valeurs de luminance relatives</a> qui seront utilisées lorsque le masque sera appliqué.</dd>
+ <dt><code>alpha</code></dt>
+ <dd>Un mot-clé qui indique que l'image du masque doit être utilisée comme un masque de transparence. Autrement dit, ce sont les valeurs du <a href="https://fr.wikipedia.org/wiki/Canal_alpha">canal alpha</a> de l'image qui seront utilisées lorsque le masque sera appliqué.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Prenons comme masque le rectangle suivant :</p>
+
+<pre class="brush: html">&lt;rect x="10" y="10" width="80" height="80"
+    fill="red" fill-opacity="0.7" /&gt;</pre>
+
+<div class="hidden">
+<h3 id="mask">mask</h3>
+
+<pre class="brush: html">&lt;svg width="100" height="100"&gt;
+  &lt;rect x="10" y="10" width="80" height="80"
+      fill="red" fill-opacity="0.7"/&gt;
+&lt;/svg&gt;</pre>
+</div>
+
+<div>Le voici : {{EmbedLiveSample('mask', '100%', '100')}}</div>
+
+<p>Appliquons le à cette boîte :</p>
+
+<div class="hidden">
+<h3 id="box">box</h3>
+
+<pre class="brush: css">.redsquare {
+  height: 100px;
+  width: 100px;
+  background-color: rgb(128, 128, 128);
+  border: solid 1px black;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="redsquare"&gt;&lt;/div&gt;
+</pre>
+</div>
+
+<div>{{EmbedLiveSample('box', '100%', '120')}}</div>
+
+<p>Voici le résultat, si votre navigateur prend en charge cette propriété, avec les deux valeurs de <code>mask-type</code> appliquée à l'élément {{SVGElement("mask")}}, on aura deux carrés différents :</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>mask-type: alpha;</code></td>
+   <td><code>mask-type: luminance;</code></td>
+  </tr>
+  <tr>
+   <td>
+    <div class="hidden" id="maskalpha">
+    <pre class="brush: html">
+&lt;div class="redsquare"&gt;&lt;/div&gt;
+&lt;svg version="1.1" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"&gt;
+  &lt;defs&gt;
+    &lt;mask id="m" maskContentUnits="objectBoundingBox"
+        style="mask-type:alpha"&gt;
+      &lt;rect x=".1" y=".1" width=".8" height=".8"
+          fill="red" fill-opacity="0.7"/&gt;
+    &lt;/mask&gt;
+  &lt;/defs&gt;
+&lt;/svg&gt;
+</pre>
+
+    <pre class="brush: css">
+.redsquare {
+  height: 100px;
+  width: 100px;
+  background-color: rgb(128, 128, 128);
+  border: solid 1px black;
+  mask: url("#m");
+}
+</pre>
+    </div>
+
+    <div>{{EmbedLiveSample('maskalpha', '100%', '102')}}</div>
+   </td>
+   <td>
+    <div class="hidden" id="maskluminance">
+    <pre class="brush: html">
+&lt;div class="redsquare"&gt;&lt;/div&gt;
+&lt;svg version="1.1" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"&gt;
+  &lt;defs&gt;
+    &lt;mask id="m" maskContentUnits="objectBoundingBox"
+        style="mask-type:luminance"&gt;
+      &lt;rect x=".1" y=".1" width=".8" height=".8"
+          fill="red" fill-opacity="0.7"/&gt;
+    &lt;/mask&gt;
+  &lt;/defs&gt;
+&lt;/svg&gt;
+</pre>
+
+    <pre class="brush: css">
+.redsquare {
+  height: 100px;
+  width: 100px;
+  background-color: rgb(128, 128, 128);
+  border: solid 1px black;
+  mask: url("#m");
+}
+</pre>
+    </div>
+
+    <div>{{EmbedLiveSample('maskluminance', '100%', '102')}}</div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Masks', '#the-mask-type', 'mask-type')}}</td>
+   <td>{{Spec2('CSS Masks')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.mask-type")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("mask")}}</li>
+ <li>{{cssxref("mask-mode")}}</li>
+</ul>
diff --git a/files/fr/web/css/mask/index.html b/files/fr/web/css/mask/index.html
new file mode 100644
index 0000000000..4a69a1adf8
--- /dev/null
+++ b/files/fr/web/css/mask/index.html
@@ -0,0 +1,128 @@
+---
+title: mask
+slug: Web/CSS/mask
+tags:
+  - CSS
+  - Propriété
+  - Reference
+  - SVG
+translation_of: Web/CSS/mask
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>mask</code></strong> permet de masquer un élément partiellement ou complètement en utilisant un masque apposé sur l'image ou en rognant l'image aux positions données. Cette propriété est une propriété raccourcie pour les propriétés {{cssxref("mask-image")}}, {{cssxref("mask-mode")}}, {{cssxref("mask-repeat")}}, {{cssxref("mask-position")}}, {{cssxref("mask-clip")}}, {{cssxref("mask-origin")}}, {{cssxref("mask-size")}} et {{cssxref("mask-composite ")}}.</p>
+
+<div class="note">
+<p><strong>Note :</strong> La propriété raccourcie réinitialise également {{cssxref("mask-border")}} avec sa valeur initiale. Il est donc recommandé d'utiliser la propriété raccourcie à travers les feuilles de style plutôt que les propriétés raccourcies (sauf en cas d'héritage complexe).</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css  no-line-number">/* Valeurs avec un mot-clé */
+mask: none;
+
+/* Valeurs d'image */
+/* Type &lt;image&gt;    */
+mask: url(mask.png);                       /* Image matricielle utilisée comme masque */
+mask: url(masks.svg#star);                 /* Élément d'un SVG utilisé comme masque */
+
+/* Valeurs combinées */
+mask: url(masks.svg#star) luminance;       /* Élément d'un SVG utilisé comme masque de luminance */
+mask: url(masks.svg#star) 40px 20px;       /* Élément d'un SVG utilisé comme masque positioné à 40px du haut et 20px de la gauche */
+mask: url(masks.svg#star) 0 0/50px 50px;   /* Élément d'un SVG utilisé comme masque avec une hauteur et largeur de 50px */
+mask: url(masks.svg#star) repeat-x;        /* Élément d'un SVG utilisé comme masque répété horizontalement */
+mask: url(masks.svg#star) stroke-box;      /* Élément d'un SVG utilisé comme masque étendu à la boîte contenu dans le contour */
+mask: url(masks.svg#star) exclude;         /* Élément d'un SVG utilisé comme masque et combiné avec l'arrière-plan pour les parties qui ne se chevauchent pas */
+
+/* Valeurs globales */
+mask: inherit;
+mask: initial;
+mask: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;mask-reference&gt;</code></dt>
+ <dd>Cette valeur permet de définir l'image source pour le masque. Voir {{cssxref("mask-image")}}.</dd>
+ <dt><code>&lt;masking-mode&gt;</code></dt>
+ <dd>Cette valeur définit le mode du masque. Voir {{cssxref("mask-mode")}}.</dd>
+ <dt><code>&lt;position&gt;</code></dt>
+ <dd>Cette valeur définit la position de l'image du masque. Voir {{cssxref("mask-position")}}.</dd>
+ <dt><code>&lt;bg-size&gt;</code></dt>
+ <dd>Cette valeur définit la taille de l'image du masque. Voir {{cssxref("mask-size")}}.</dd>
+ <dt><code>&lt;repeat-style&gt;</code></dt>
+ <dd>Cette valeur définit le mode de répétition de l'image du masque. Voir {{cssxref("mask-repeat")}}.</dd>
+ <dt><code>&lt;geometry-box&gt;</code></dt>
+ <dd>Si une seule valeur <code>&lt;geometry-box&gt;</code> est fournie, elle définira les valeurs de {{cssxref("mask-origin")}} et {{cssxref("mask-clip")}}. Si deux valeurs sont fournies, la première sera utilisée pour définir {{cssxref("mask-origin")}} et la deuxième pour définir {{cssxref("mask-clip")}}.</dd>
+ <dt><code>&lt;geometry-box&gt; | no-clip</code></dt>
+ <dd>Cette valeur définit la zone qui est impactée par l'image du masque. Voir {{cssxref("mask-clip")}}.</dd>
+ <dt><code>&lt;compositing-operator&gt;</code></dt>
+ <dd>Cette valeur définit l'opération de composition qui est utilisée par rapport à la couche de masque actuelle. Voir {{cssxref("mask-composite")}}.</dd>
+ <dt>
+ <h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+ </dt>
+</dl>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="exemple"&gt;Il y avait une table servie sous un arbre devant
+ la maison, et le Lièvre y prenait le thé avec le Chapelier. Un Loir
+ profondément endormi était assis entre les deux autres qui s’en
+ servaient comme d’un coussin, le coude appuyé sur lui et causant
+ par-dessus sa tête.&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple{
+  mask:url(https://developer.cdn.mozilla.net/static/img/favicon72.png) luminance 20%;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Masks", "#the-mask", 'mask')}}</td>
+   <td>{{Spec2("CSS Masks")}}</td>
+   <td>Extension aux éléments HTML. La syntaxe est étendue et la propriété devient une propriété raccourcie pour les nouvelles propriétés <code>mask-*</code> définies avec cette spécification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.mask")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("clip-path")}}, {{cssxref("filter")}}</li>
+ <li><a href="https://hacks.mozilla.org/2017/06/css-shapes-clipping-and-masking/">Les formes CSS : "clipping" et "masking" – comment les utiliser (en anglais)</a></li>
+ <li><a href="/fr/docs/Applying_SVG_effects_to_HTML_content">Appliquer des effets SVG à du contenu HTML</a></li>
+ <li><a href="/fr/docs/Web/SVG">SVG</a></li>
+</ul>
diff --git a/files/fr/web/css/max()/index.html b/files/fr/web/css/max()/index.html
new file mode 100644
index 0000000000..88016899ac
--- /dev/null
+++ b/files/fr/web/css/max()/index.html
@@ -0,0 +1,120 @@
+---
+title: max()
+slug: Web/CSS/max()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+translation_of: Web/CSS/max()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction CSS <code><strong>max</strong></code><strong><code>()</code></strong> permet d'obtenir la plus grande valeurs parmi une liste d'expressions, séparées par des virgules afin d'utiliser ce maximum comme valeur d'une propriété CSS. La fonction <code>max()</code> peut être utilisée à tout endroit où une valeur de type {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;frequency&gt;")}}, {{cssxref("&lt;angle&gt;")}}, {{cssxref("&lt;time&gt;")}}, {{cssxref("&lt;percentage&gt;")}}, {{cssxref("&lt;number&gt;")}} ou {{cssxref("&lt;integer&gt;")}} est autorisée.</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* property: max(expression<code class="css plain"> [, expression]</code>) */
+width: max(10vw, 4em, 80px);
+</pre>
+
+<p>Dans l'exemple précédent, la largeur mesurera au moins 80 pixels de large, sera plus large si la zone d'affichage (<em>viewport</em>) est plus large que 800 pixels ou si un <code>em</code> vaut plus que 20 pixels de large. Autrement dit, la valeur fournie <code>max()</code> est calculée comme un seuil et généralement, on aura un seuil minimal dans une expression <code>max()</code> (ce qui peut paraître contradictoire à juste titre).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La fonction <code>max()</code> prend comme arguments une ou plusieurs expressions, séparées par des virgules. Elle renvoie comme valeur le plus grand résultat des évaluations des expressions passées en arguments.</p>
+
+<p>Les expressions passées à cette fonction peuvent utiliser des fonctions mathématiques (cf. {{CSSxRef("calc", "calc()")}}), des valeurs littérales ou d'autres expressions (ex. avec <code><a href="/fr/docs/Web/CSS/attr">attr()</a></code>). Il est nécessaire que ces expressions fournissent une valeur d'un type valide (ex. {{cssxref("&lt;length&gt;")}}).</p>
+
+<p>Il est tout à fait possible de combiner des valeurs avec différentes unités dans les expressions passées en arguments. On peut également utiliser des parenthèses à l'intérieur des expressions afin de s'assurer de la précédence des opérateurs.</p>
+
+<h3 id="Notes">Notes</h3>
+
+<ul>
+ <li>Les expressions mathématiques qui utilisent des pourcentages pour les hauteurs et largeurs de colonnes de tableaux, de groupes de colonnes de tableaux, pour les lignes de tableaux, pour les groupes de lignes de tableaux et pour les cellules de tableau seront considérées comme <code>auto</code> si le tableau suit une disposition automatique ou fixée.</li>
+ <li>Il est possible d'imbriquer des fonctions <code>max()</code> et <code>min()</code> dans les expressions et d'utiliser les opérateurs mathématiques d'addition, soustraction, multiplication, division sans nécessairement recourir à <code>calc()</code>.</li>
+</ul>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Garantir_une_taille_minimale_pour_des_images">Garantir une taille minimale pour des images</h3>
+
+<p><code>max()</code> permet de simplifier la définition d'une taille <strong>minimale</strong>, par exemple la largeur d'une image. Dans cet exemple, la règle CSS permet d'obtenir un logo qui s'étire sur la moitié de la fenêtre pour les fenêtres les plus larges, sans dépasser 300 pixels et sans avoir à utiliser des requêtes média.</p>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">.logo {
+  width: max(50vw, 300px);
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;img src="https://developer.mozilla.org/static/img/web-docs-sprite.svg" alt="MDN Web Docs" class="logo"&gt;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Garantir_une_taille_minimale_pour_des_images', 'auto', '60')}}</p>
+
+<p>Avec cet exemple, le logo sera au moins large de 300 pixels et sera plus large afin d'occuper la moitié de la zone d'affichage si le <em>viewport</em> devient plus large que 600 pixels.</p>
+
+<h3 id="Fixer_une_taille_minimale_pour_une_police">Fixer une taille minimale pour une police</h3>
+
+<p>On peut également utiliser <code>max()</code> pour définir la taille d'une police et fixer un seuil minimal pour garantir une certaine lisibilité.</p>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">h1 {
+  font-size: 2rem;
+}
+h1.responsive {
+  font-size: max(4vw, 2em, 2rem);
+}
+</pre>
+
+<p>Avec ces règles, la valeur pour <code>font-size</code> vaudra au moins <code>2rems</code> ou deux fois la taille par défaut de la police sur la page.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Ce texte est toujours lisible mais sa taille ne change pas.&lt;/h1&gt;
+&lt;h1 class="responsive"&gt;Ce texte est toujours lisible et s'adapte dans une certaine mesure.&lt;/h1&gt;
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample('Fixer_une_taille_minimale_pour_une_police', '700', '300')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Values', '#calc-notation', 'max()')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.types.max")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{CSSxRef("calc", "calc()")}}</li>
+ <li>{{CSSxRef("clamp", "clamp()")}}</li>
+ <li>{{CSSxRef("min", "min()")}}</li>
+ <li><a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/Values_and_units">Valeurs et unités en CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/max-block-size/index.html b/files/fr/web/css/max-block-size/index.html
new file mode 100644
index 0000000000..775b7f91ed
--- /dev/null
+++ b/files/fr/web/css/max-block-size/index.html
@@ -0,0 +1,140 @@
+---
+title: max-block-size
+slug: Web/CSS/max-block-size
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/max-block-size
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>max-block-size</code></strong> définit la taille maximale horizontale ou verticale d'un élément selon l'axe perpendiculaire (l'axe de bloc) au sens d'écriture indiqué par {{cssxref("writing-mode")}}. Elle correspond à la propriété {{cssxref("max-width")}} ou {{cssxref("max-height")}} selon la valeur utilisée pour {{cssxref("writing-mode")}}. Si le mode d'écriture est orienté verticalement, <code>max-block-size</code> fait référence à la hauteur maximale de l'élément, sinon elle fait référence à la largeur maximale de l'élément.</p>
+
+<p>La propriété {{cssxref("max-inline-size")}} peut être utilisée pour l'effet analogue selon l'axe en ligne (c'est-à-dire l'axe qui suit le sens d'écriture).</p>
+
+<p>Cette propriété est une propriété <em>logique</em> qui doit remplacer les propriétés <em>physiques</em> correspondantes (<code>max-height</code> ou <code>max-width</code>) si on souhaite que la disposition tienne compte du mode d'écriture de la page (que celui-ci soit horizontal ou vertical). Vous pouvez consulter <a href="/fr/docs/Web/CSS/writing-mode#Exemple">ces exemples</a> pour en savoir plus.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/max-block-size.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+max-block-size: 300px;
+max-block-size: 25em;
+
+/* Valeurs proportionnelles */
+/* Type &lt;percentage&gt; */
+max-block-size: 75%;
+
+/* Valeurs avec un mot-clé */
+max-block-size: none;
+max-block-size: max-content;
+max-block-size: min-content;
+max-block-size: fit-content;
+max-block-size: fill-available;
+
+/* Valeurs globales */
+max-block-size: inherit;
+max-block-size: initial;
+max-block-size: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>La propriété <code>max-block-size</code> peut prendre les mêmes valeurs que les propriétés {{cssxref("max-width")}} ou {{cssxref("max-height")}}.</p>
+
+<p>{{page("/fr/docs/Web/CSS/max-width", "Valeurs")}}</p>
+
+<h3 id="Relation_avec_les_propriétés_physiques">Relation avec les propriétés physiques</h3>
+
+<p>La valeur de <code>writing-mode</code> détermine la propriété physique correspondant à <code>max-block-size</code> :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Valeur pour <code>writing-mode</code></th>
+   <th scope="col">Propriété physique équivalente à <code>max-block-size</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>horizontal-tb</code>, <code>lr</code> {{deprecated_inline}}, <code>lr-tb</code> {{deprecated_inline}}, <code>rl</code> {{deprecated_inline}}, <code>rb</code> {{deprecated_inline}}, <code>rb-rl</code> {{deprecated_inline}}</td>
+   <td>{{cssxref("max-height")}}</td>
+  </tr>
+  <tr>
+   <td><code>vertical-rl</code>, <code>vertical-lr</code>, <code>sideways-rl</code> {{experimental_inline}}, <code>sideways-lr</code> {{experimental_inline}}, <code>tb</code> {{deprecated_inline}}, <code>tb-rl</code> {{deprecated_inline}}</td>
+   <td>{{cssxref("max-width")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note :</strong> Les valeurs <code>sideways-lr</code> et <code>sideways-rl</code> pour <code>writing-mode</code> ont été retirées de la spécification CSS Writing Modes Level 3 en fin de processus et pourraient être réintroduites dans la spécification Level 4.</p>
+</div>
+
+<div class="note">
+<p><strong>Note :</strong> Les modes d'écriture <code>lr</code>, <code>lr-tb</code>, <code>rl</code>, <code>rb</code> et <code>rb-tl</code> ne sont plus autorisés pour les contextes {{Glossary("HTML")}} et peuvent uniquement être utilisés dans des contextes {{Glossary("SVG")}} 1.x.</p>
+</div>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple {
+  writing-mode: vertical-rl;
+  background-color: yellow;
+  block-size: 100%;
+  max-block-size: 200px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemple")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécifications</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-max-block-size", "max-block-size")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.max-block-size")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes : {{cssxref("max-width")}} et {{cssxref("max-height")}}</li>
+ <li>{{cssxref("writing-mode")}}</li>
+</ul>
diff --git a/files/fr/web/css/max-height/index.html b/files/fr/web/css/max-height/index.html
new file mode 100644
index 0000000000..9b94e51229
--- /dev/null
+++ b/files/fr/web/css/max-height/index.html
@@ -0,0 +1,146 @@
+---
+title: max-height
+slug: Web/CSS/max-height
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/max-height
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>max-height</code></strong> est utilisée pour définir la hauteur maximale d'un élément donné. Elle empêche la valeur de la propriété {{cssxref("height")}} de devenir supérieure à la valeur spécifiée par <code>max-height</code> (autrement dit, <code>max-height</code> est une borne supérieure pour <code>height</code>).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/max-height.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La valeur de <code>max-height</code> surcharge la valeur de {{cssxref("height")}} mais elle est surchargée par {{cssxref("min-height")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeur de longueur */
+/* Type &lt;length&gt;      */
+max-height: 3.5em;
+
+/* Valeurs relatives */
+/* Type &lt;percentage&gt; */
+max-height: 10%;
+
+/* Valeurs avec un mot-clé */
+max-height: none;
+max-height: max-content;
+max-height: min-content;
+max-height: fit-content;
+max-height: fill-available;
+
+/* Valeurs globales */
+max-height: inherit;
+max-height: initial;
+max-height: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>La hauteur maximale fixée, exprimée comme une valeur absolue. Voir {{cssxref("&lt;length&gt;")}} pour les unités qu'on peut utiliser.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>La hauteur maximale fixée, exprimée comme un fraction de la hauteur du bloc englobant. Voir la page {{cssxref("&lt;percentage&gt;")}} sur les valeurs possibles avec ce type.</dd>
+ <dt><code>none</code></dt>
+ <dd>Il n'y pas de limite à la hauteur que peut prendre la boîte.</dd>
+ <dt><code>max-content</code> {{experimental_inline}}</dt>
+ <dd>La hauteur intrinsèque préférée.</dd>
+ <dt><code>min-content</code> {{experimental_inline}}</dt>
+ <dd>La hauteur intrinsèque minimale.</dd>
+ <dt><code>fill-available</code>{{experimental_inline}}</dt>
+ <dd>La hauteur du bloc englobant moins la marge verticale, la bordure et le remplissage (<em>padding</em>). Certains navigateurs implémentent cette valeur avec un ancien nom : <code>available</code>.</dd>
+ <dt><code>fit-content</code> {{experimental_inline}}</dt>
+ <dd>Un synonyme pour <code>max-content</code>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt; Lorem ipsum tralala sit amet, consectetur adipisicing
+  &lt;p&gt;
+     Ut enim ad minim veniam, quis nostrud exercitation
+     ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  &lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  height: 250px;
+  border: solid 1px red;
+}
+
+p {
+  max-height: 30%;
+  border: solid 1px blue;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","100%")}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Veiller à s'assurer que les éléments ciblés avec une règle utilisant <code>max-height</code> ne sont pas tronqués ou ne masquent pas d'autre contenu sur la page lorsqu'on zoome pour augmenter la taille du texte.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html" rel="noopener"><em>Understanding Success Criterion 1.4.4, W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Sizing', '#height-height-keywords', 'max-height')}}</td>
+   <td>{{Spec2('CSS3 Sizing')}}</td>
+   <td>Ajout des mots-clés <code>max-content</code>, <code>min-content</code>, <code>fit-content</code> et <code>fill-available</code>. Les deux brouillons de spécification CSS3 Box et CSS3 Writing Modes définissaient ces mots-clés mais ces spécifications ont été remplacées par celles-ci.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'max-height')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>max-height</code> peut désormais être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visudet.html#min-max-heights', 'max-height')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.max-height")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("height")}}</li>
+ <li>{{cssxref("min-height")}}</li>
+ <li>{{cssxref("box-sizing")}}</li>
+ <li><a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte" title="en/CSS/box_model">Le modèle de boîtes</a></li>
+</ul>
diff --git a/files/fr/web/css/max-inline-size/index.html b/files/fr/web/css/max-inline-size/index.html
new file mode 100644
index 0000000000..c8fac84ce1
--- /dev/null
+++ b/files/fr/web/css/max-inline-size/index.html
@@ -0,0 +1,103 @@
+---
+title: max-inline-size
+slug: Web/CSS/max-inline-size
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/max-inline-size
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <a href="/fr/docs/Web/CSS">CSS</a> <strong><code>max-inline-size</code></strong> définit la taille maximale horizontale ou verticale d'un élément en ligne (<em>inline</em>) selon le mode d'écriture utilisé. Elle correspond à la propriété {{cssxref("max-width")}} ou {{cssxref("max-height")}} selon la valeur utilisée pour {{cssxref("writing-mode")}}. Si le mode d'écriture est orienté verticalement, <code>max-inline-size</code> fait référence à la hauteur maximale de l'élément, sinon elle fait référence à la largeur maximale de l'élément. La propriété {{cssxref("max-block-size")}} peut être utilisée pour les blocs.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/max-inline-size.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+max-inline-size: 300px;
+max-inline-size: 25em;
+
+/* Valeurs proportionnelles */
+/* Type &lt;percentage&gt; */
+max-inline-size: 75%;
+
+/* Valeurs avec un mot-clé */
+max-inline-size: none;
+max-inline-size: max-content;
+max-inline-size: min-content;
+max-inline-size: fit-content;
+max-inline-size: fill-available;
+
+/* Valeurs globales */
+max-inline-size: inherit;
+max-inline-size: initial;
+max-inline-size: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>La propriété <code>max-inline-size</code> peut prendre les mêmes valeurs que les propriétés {{cssxref("max-width")}} ou {{cssxref("max-height")}}.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple {
+  writing-mode: vertical-rl;
+  background-color: yellow;
+  block-size: 100%;
+  max-inline-size: 200px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemple")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécifications</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-max-inline-size", "max-inline-size")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une <em>pull request</em> sur ce dépôt: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("css.properties.max-inline-size")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes : {{cssxref("max-width")}} et {{cssxref("max-height")}}</li>
+ <li>{{cssxref("writing-mode")}}</li>
+</ul>
diff --git a/files/fr/web/css/max-width/index.html b/files/fr/web/css/max-width/index.html
new file mode 100644
index 0000000000..e50a03260b
--- /dev/null
+++ b/files/fr/web/css/max-width/index.html
@@ -0,0 +1,150 @@
+---
+title: max-width
+slug: Web/CSS/max-width
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/max-width
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>max-width</code></strong> est utilisée pour définir la largeur maximale d'un élément donné. Elle empêche la valeur de la propriété {{cssxref("width")}} de devenir supérieure à la valeur spécifiée par <code>max-width</code> (autrement dit, <code>max-width</code> est une borne supérieur pour <code>width</code>).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/max-width.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La valeur de <code>max-width</code> surcharge la valeur de {{cssxref("width")}} mais elle est surchargée par {{cssxref("min-width")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeur de longueur */
+/* Type &lt;length&gt;      */
+max-width: 3.5em;
+
+/* Valeurs relatives */
+/* Type &lt;percentage&gt; */
+max-width: 10%;
+
+/* Valeurs avec un mot-clé */
+max-width: none;
+max-width: max-content;
+max-width: min-content;
+max-width: fit-content;
+max-width: fill-available;
+
+/* Valeurs globales */
+max-width: inherit;
+max-width: initial;
+max-width: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>La largeur minimale fixée. Voir {{cssxref("&lt;length&gt;")}} pour les unités qu'on peut utiliser. Une largeur négative rendra la déclaration invalide.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>La largeur minimale fixée, exprimée comme un fraction de la largeur du bloc englobant. Voir la page {{cssxref("&lt;percentage&gt;")}} sur les valeurs possibles avec ce type. Les valeurs négatives rendront la déclaration invalide.</dd>
+ <dt><code>fill-available</code>{{experimental_inline}}</dt>
+ <dd>La largeur du bloc englobant moins la marge horizontale, la bordure et le remplissage (<em>padding</em>). Certains navigateurs implémentent cette valeur avec un ancien nom : <code>available</code>.</dd>
+ <dt><code>fit-content</code> {{experimental_inline}}</dt>
+ <dd>Un synonyme pour <code>max-content</code>.</dd>
+ <dt><code>max-content</code> {{experimental_inline}}</dt>
+ <dd>La largeur intrinsèque préférée.</dd>
+ <dt><code>min-content</code> {{experimental_inline}}</dt>
+ <dd>La largeur intrinsèque minimale.</dd>
+ <dt><code>none</code></dt>
+ <dd>Il n'y a pas de maximum pour la largeur. C'est la valeur par défaut.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_simple_avec_un_tableau">Exemple simple avec un tableau</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div&gt; Lorem ipsum tralala sit amet, consectetur adipisicing
+  &lt;p&gt;
+     Ut enim ad minim veniam, quis nostrud exercitation
+     ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  &lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">div {
+  width: 250px;
+  border: solid 1px red;
+}
+
+p {
+  max-width: 60%;
+  border: solid 1px blue;
+}</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemple_simple_avec_un_tableau","100%","100%")}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Veiller à s'assurer que les éléments ciblés avec une règle utilisant <code>max-width</code> ne sont pas tronqués ou ne masquent pas d'autre contenu sur la page lorsqu'on zoome pour augmenter la taille du texte.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html" rel="noopener"><em>Understanding Success Criterion 1.4.4, W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Sizing', '#width-height-keywords', 'max-width')}}</td>
+   <td>{{Spec2('CSS3 Sizing')}}</td>
+   <td>Ajout des mots-clés <code>max-content</code>, <code>min-content</code>, <code>fit-content</code> et <code>fill-available</code>. Les deux brouillons de spécifications CSS3 Box et CSS3 Writing Modes définissaient ces mots-clés mais ont été remplacées par cette spécification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'max-width')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>max-width</code> peut désormais être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visudet.html#min-max-widths', 'max-width')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.max-width")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("width")}}</li>
+ <li>{{cssxref("min-width")}}</li>
+ <li>{{cssxref("min-height")}}</li>
+ <li>{{cssxref("max-height")}}</li>
+ <li>{{cssxref("box-sizing")}}</li>
+ <li><a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte" title="en/CSS/box_model">Le modèle de boîtes</a></li>
+</ul>
diff --git a/files/fr/web/css/min()/index.html b/files/fr/web/css/min()/index.html
new file mode 100644
index 0000000000..3c948df62a
--- /dev/null
+++ b/files/fr/web/css/min()/index.html
@@ -0,0 +1,140 @@
+---
+title: min()
+slug: Web/CSS/min()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+translation_of: Web/CSS/min()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction CSS <code><strong>min()</strong></code> permet d'obtenir la plus petite valeurs parmi une liste d'expressions, séparées par des virgules afin d'utiliser ce minimum comme valeur d'une propriété CSS. La fonction <code>min()</code> peut être utilisée à tout endroit où une valeur de type {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;frequency&gt;")}}, {{cssxref("&lt;angle&gt;")}}, {{cssxref("&lt;time&gt;")}}, {{cssxref("&lt;percentage&gt;")}}, {{cssxref("&lt;number&gt;")}} ou {{cssxref("&lt;integer&gt;")}} est autorisée.</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* property: min(expression<code class="css plain"> [, expression]</code>) */
+width: min(10vw, 4em, 80px);
+</pre>
+
+<p>Dans l'exemple précédent, la largeur mesurera au plus 80 pixels de large, sera moins large si la zone d'affichage (<em>viewport</em>) est moins large que 800 pixels ou si un <code>em</code> vaut moins que 20 pixels de large. Autrement dit, la valeur fournie <code>min()</code> est calculée comme un seuil et généralement, on aura un seuil maximal dans une expression <code>min()</code> (ce qui peut paraître contradictoire à juste titre).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La fonction <code>min()</code> prend comme arguments une ou plusieurs expressions, séparées par des virgules. Elle renvoie comme valeur le plus petit résultat des évaluations des expressions passées en arguments.</p>
+
+<p>Les expressions passées à cette fonction peuvent utiliser des fonctions mathématiques (cf. {{CSSxRef("calc", "calc()")}}), des valeurs littérales ou d'autres expressions (ex. avec {{CSSxRef("attr", "attr()")}}). Il est nécessaire que ces expressions fournissent une valeur d'un type valide (ex. {{cssxref("&lt;length&gt;")}}).</p>
+
+<p>Il est tout à fait possible de combiner des valeurs avec différentes unités dans les expressions passées en arguments. On peut également utiliser des parenthèses à l'intérieur des expressions afin de s'assurer de la précédence des opérateurs.</p>
+
+<h3 id="Notes">Notes</h3>
+
+<ul>
+ <li>Les expressions mathématiques qui utilisent des pourcentages pour les hauteurs et largeurs de colonnes de tableaux, de groupes de colonnes de tableaux, pour les lignes de tableaux, pour les groupes de lignes de tableaux et pour les cellules de tableau seront considérées comme <code>auto</code> si le tableau suit une disposition automatique ou fixée.</li>
+ <li>Il est possible d'imbriquer des fonctions <code>min()</code> et <code>min()</code> dans les expressions et d'utiliser les opérateurs mathématiques d'addition, soustraction, multiplication, division sans nécessairement recourir à <code>calc()</code>.</li>
+</ul>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Garantir_une_taille_maximale_pour_des_images">Garantir une taille maximale pour des images</h3>
+
+<p><code>min()</code> permet de simplifier la définition d'une taille <strong>maximale</strong>, par exemple la largeur d'une image. Dans cet exemple, la règle CSS permet d'obtenir un logo qui s'étire sur la moitié de la fenêtre pour les fenêtres les moins larges, sans dépasser 300 pixels et sans avoir à utiliser des requêtes média.</p>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">.logo {
+  width: min(50vw, 300px);
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;img src="https://developer.mozilla.org/static/img/web-docs-sprite.svg" alt="MDN Web Docs" class="logo"&gt;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Garantir_une_taille_minimale_pour_des_images', '100%', '110')}}</p>
+
+<h3 id="Définir_une_taille_maximale_pour_un_champ_de_saisie_et_son_libellé">Définir une taille maximale pour un champ de saisie et son libellé</h3>
+
+<p>La fonction <code>min()</code> peut également être utilisée pour définir la taille maximale d'un contrôle dans un formulaire et permettre de réduire le champ et le libellé associé lorsque la largeur de l'écran diminue.</p>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">input, label {
+  padding: 2px;
+  box-sizing: border-box;
+  display: inline-block;
+  width: min(40%, 400px);
+  background-color: pink;
+}
+
+form {
+  margin: 4px;
+  border: 1px solid black;
+  padding: 4px;
+}
+</pre>
+
+<p>On a ici la règle qui s'applique au formulaire et qui occupe 100% de la largeur de son parent. On déclare avec <code>min()</code> que la largeur doit mesurer au plus 400 pixels ou 40% de la largeur du formulaire. Autrement dit, la taille la plus grande que pourra atteindre le champ et le libellé sera 400 pixels. La largeur la plus étroite sera nécessairement 40% (ce qui peut être tout petit sur l'affichage d'une montre par exemple).</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;label&gt;Saisir quelque chose :&lt;/label&gt;
+  &lt;input type="text"&gt;
+&lt;/form&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Définir_une_taille_maximale_pour_un_champ_de_saisie_et_son_libellé", '100%', '110')}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Lorsqu'on utilise <code>min()</code> afin de contrôler la taille du texte, il faut s'assurer que le texte puisse toujours être suffisamment grand pour être lisible. Pour cela, on peut imbriquer l'appel à <code>min()</code> dans <code><a href="/fr/docs/Web/CSS/max">max()</a></code> utilisant <a href="/fr/docs/Web/CSS/length#Unités_de_longueur_relatives">une unité de longueur relative</a> en deuxième argument afin de garantir une lisibilité minimale :</p>
+
+<pre class="brush: css notranslate">small {
+  font-size: max(min(0.5vw, 0.5em), 1rem);
+}</pre>
+
+<p>On aura ainsi une taille minimale de <code>1rem</code> et la taille du texte qui se met à l'échelle si on zoome sur la page.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles 1.4 du WCAG</a> (MDN)</li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html">Comprendre le critère de réussite 1.4.4 du WCAG 2.0 (W3C)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Values', '#calc-notation', 'min()')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.types.min")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{CSSxRef("calc", "calc()")}}</li>
+ <li>{{CSSxRef("clamp", "clamp()")}}</li>
+ <li>{{CSSxRef("max", "max()")}}</li>
+ <li><a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/Values_and_units">Valeurs et unités en CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/min-block-size/index.html b/files/fr/web/css/min-block-size/index.html
new file mode 100644
index 0000000000..c53032ddfa
--- /dev/null
+++ b/files/fr/web/css/min-block-size/index.html
@@ -0,0 +1,110 @@
+---
+title: min-block-size
+slug: Web/CSS/min-block-size
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/min-block-size
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>min-block-size</code></strong> définit la taille minimale horizontale ou verticale d'un élément de bloc (<em>block</em>) selon le mode d'écriture utilisé. Cette propriété « logique » correspond à la propriété {{cssxref("min-width")}} ou {{cssxref("min-height")}} selon la valeur utilisée pour {{cssxref("writing-mode")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/min-block-size.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Si le mode d'écriture est orienté verticalement, <code>min-block-size</code> fait référence à la hauteur minimale de l'élément. Sinon, elle fait référence à la largeur minimale de l'élément.  to the minimal height of the element, otherwise it relates to the minimal width of the element. La propriété {{cssxref("min-inline-size")}} peut être utilisée pour les éléments en ligne.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+min-block-size: 100px;
+min-block-size: 5em;
+
+/* Valeurs proportionnelles à la */
+/* largeur du bloc englobant     */
+/* Type &lt;percentage&gt;             */
+min-block-size: 10%;
+
+/* Valeurs avec un mot-clé */
+min-block-size: max-content;
+min-block-size: min-content;
+min-block-size: fit-content;
+min-block-size: fill-available;
+
+/* Valeurs globales */
+min-block-size: inherit;
+min-block-size: initial;
+min-block-size: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>La propriété <code>min-block-size</code> peut prendre les mêmes valeurs que les propriétés {{cssxref("min-width")}} ou {{cssxref("min-height")}}.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple {
+  writing-mode: vertical-rl;
+  background-color: yellow;
+  block-size: 5%;
+  min-block-size: 200px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-min-block-size", "min-block-size")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une <em>pull request</em> sur ce dépôt: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("css.properties.min-block-size")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes
+  <ul>
+   <li>{{cssxref("min-width")}}</li>
+   <li>{{cssxref("min-height")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("writing-mode")}}</li>
+</ul>
diff --git a/files/fr/web/css/min-height/index.html b/files/fr/web/css/min-height/index.html
new file mode 100644
index 0000000000..cafd659f5d
--- /dev/null
+++ b/files/fr/web/css/min-height/index.html
@@ -0,0 +1,142 @@
+---
+title: min-height
+slug: Web/CSS/min-height
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/min-height
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété<strong> <code>min-height</code></strong> est utilisée afin de définir la hauteur minimale d'un élément. Elle empêche ainsi que la valeur de la propriété {{cssxref("height")}} devienne inférieure à <code>min-height</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/min-height.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La valeur de la propriété <code>min-height</code> surcharge celles de {{cssxref("max-height")}} et {{cssxref("height")}} lorsque <code>min-height</code> est supérieure.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeur de longueur */
+/* Type &lt;length&gt;      */
+min-height: 3.5em;
+
+/* Valeur relative au bloc */
+/* Type &lt;percentage&gt;       */
+min-height: 10%;
+
+/* Valeurs avec un mot-clé */
+min-height: max-content;
+min-height: min-content;
+min-height: fit-content;
+min-height: fill-available;
+
+/* Valeurs globales */
+min-height: inherit;
+min-height: initial;
+min-height: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>La hauteur minimale exprimée de façon absolue. Voir la page {{cssxref("&lt;length&gt;")}} pour les différentes unités. Les valeurs négatives sont interdites, si elles sont utilisées, la déclaration sera considérée comme invalide.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>La hauteur minimale exprimée de façon relative à la hauteur du bloc englobant grâce à une valeur de type {{cssxref("&lt;percentage&gt;")}}. Les valeurs négatives sont interdites, si elles sont utilisées, la déclaration sera considérée comme invalide.</dd>
+ <dt><code>max-content</code> {{experimental_inline}}</dt>
+ <dd>La hauteur intrinsèque préférée.</dd>
+ <dt><code>min-content</code> {{experimental_inline}}</dt>
+ <dd>La hauteur intrinsèque minimale préférée.</dd>
+ <dt><code>fill-available</code>{{experimental_inline}}</dt>
+ <dd>La hauteur du bloc englobant moins celle de la marge verticale, de la bordure et du remplissage (<em>padding</em>). Certains navigateurs implémentent cette valeur avec un mot-clé d'une ancienne version : <code>available</code>.</dd>
+ <dt><code>fit-content</code> {{experimental_inline}}</dt>
+ <dd>Selon la spécification CSS3 sur les boîtes (CSS3 Box), cette valeur est synonyme de <code>min-content.</code> La spécification CSS3 sur le dimensionnement (CSS3 Sizing) définit un algorithme plus complexe mais qui n'est implémenté par aucun navigateur, y compris de façon expérimentale.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt; Lorem ipsum tralala
+&lt;p class="exemple"&gt;toto&lt;/p&gt;
+ Duis aute irure dolor in reprehender
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  height: 150px;
+  border: solid 1px red;
+}
+
+.exemple {
+  min-height: 70%;
+  border: solid 1px blue;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Sizing', '#width-height-keywords', 'min-height')}}</td>
+   <td>{{Spec2('CSS3 Sizing')}}</td>
+   <td>Ajout des mots-clés <code>max-content</code>, <code>min-content</code>, <code>fit-content</code> et <code>fill-available</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#min-auto', 'min-height')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>
+    <p>Ajout du mot-clé <code>auto</code> et définition de ce mot-clé comme valeur initiale.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'min-height')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>min-height</code> peut désormais être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visudet.html#min-max-heights', 'min-height')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une <em>pull request</em> sur ce dépôt: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("css.properties.min-height")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("width")}}</li>
+ <li>{{cssxref("height")}}</li>
+ <li>{{cssxref("max-height")}}</li>
+ <li><a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">Le modèle de boîtes</a></li>
+ <li>{{cssxref("min-width")}}</li>
+ <li>{{cssxref("box-sizing")}}</li>
+ <li>{{cssxref("height")}}</li>
+ <li>{{cssxref("max-height")}}</li>
+</ul>
diff --git a/files/fr/web/css/min-inline-size/index.html b/files/fr/web/css/min-inline-size/index.html
new file mode 100644
index 0000000000..71ff919c9a
--- /dev/null
+++ b/files/fr/web/css/min-inline-size/index.html
@@ -0,0 +1,111 @@
+---
+title: min-inline-size
+slug: Web/CSS/min-inline-size
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/min-inline-size
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>min-inline-size</code></strong> définit la taille minimale horizontale ou verticale d'un élément en ligne (<em>inline</em>) selon le mode d'écriture utilisé. Cette propriété « logique » correspond à la propriété {{cssxref("min-width")}} ou {{cssxref("min-height")}} selon la valeur utilisée pour {{cssxref("writing-mode")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/min-inline-size.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Si le mode d'écriture est orienté verticalement, <code>min-inline-size</code> fait référence à la hauteur minimale de l'élément. Sinon, elle fait référence à la largeur minimale de l'élément.  to the minimal height of the element, otherwise it relates to the minimal width of the element. La propriété {{cssxref("min-block-size")}} peut être utilisée pour les blocs.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+min-inline-size: 100px;
+min-inline-size: 5em;
+
+/* Valeurs proportionnelles à la */
+/* largeur du bloc englobant     */
+/* Type &lt;percentage&gt;             */
+min-inline-size: 10%;
+
+/* Valeurs avec un mot-clé */
+min-inline-size: max-content;
+min-inline-size: min-content;
+min-inline-size: fit-content;
+min-inline-size: fill-available;
+
+/* Valeurs globales */
+min-inline-size: inherit;
+min-inline-size: initial;
+min-inline-size: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>La propriété <code>min-inline-size</code> peut prendre les mêmes valeurs que les propriétés {{cssxref("min-width")}} ou {{cssxref("min-height")}}.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple {
+  writing-mode: vertical-rl;
+  background-color: yellow;
+  block-size: 5%;
+  min-inline-size: 200px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-min-inline-size", "min-inline-size")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une <em>pull request</em> sur ce dépôt: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("css.properties.min-inline-size")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes
+  <ul>
+   <li>{{cssxref("min-width")}}</li>
+   <li>{{cssxref("min-height")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("writing-mode")}}</li>
+</ul>
diff --git a/files/fr/web/css/min-width/index.html b/files/fr/web/css/min-width/index.html
new file mode 100644
index 0000000000..16337c8f00
--- /dev/null
+++ b/files/fr/web/css/min-width/index.html
@@ -0,0 +1,142 @@
+---
+title: min-width
+slug: Web/CSS/min-width
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/min-width
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>min-width</code></strong> est utilisée pour définir la largeur minimale d'un élément donné. Elle empêche la valeur de la propriété {{cssxref("width")}} de devenir inférieure à la valeur spécifiée par <code>min-width</code> (autrement dit, <code>min-width</code> est une borne inférieure pour <code>width</code>).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/min-width.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La valeur de <code>min-width</code> surcharge les valeurs de {{cssxref("max-width")}} et de {{cssxref("width")}} si elle est supérieure à l'une de ces propriétés.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeur de longueur */
+/* Type &lt;length&gt;      */
+min-width: 3.5em;
+
+/* Valeurs relatives */
+/* Type &lt;percentage&gt; */
+min-width: 10%;
+
+/* Valeurs avec un mot-clé */
+min-width: max-content;
+min-width: min-content;
+min-width: fit-content;
+min-width: fill-available;
+
+/* Valeurs globales */
+min-width: inherit;
+min-width: initial;
+min-width: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>La largeur minimale. Voir {{cssxref("&lt;length&gt;")}} pour les unités qu'on peut utiliser. Une largeur négative rendra la déclaration invalide.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>La largeur minimale, exprimée comme un fraction de la largeur du bloc englobant. Voir la page {{cssxref("&lt;percentage&gt;")}} sur les valeurs possibles avec ce type. Les valeurs négatives rendront la déclaration invalide.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Définit une taille automatique minimale. Sauf si elle est définie par la disposition courante, la résolution de cette valeur sera 0. A des fins de rétro-compatibilité, la valeur résolue de ce mot-clé sera 0 pour l'ensemble des disposition CSS2 : bloc, en ligne, bloc-en ligne, disposition en tableau..</dd>
+ <dt><code>max-content</code> {{experimental_inline}}</dt>
+ <dd>La largeur intrinsèque préférée.</dd>
+ <dt><code>min-content</code> {{experimental_inline}}</dt>
+ <dd>La largeur intrinsèque minimale.</dd>
+ <dt><code>fill-available</code>{{experimental_inline}}</dt>
+ <dd>La largeur du bloc englobant moins la marge horizontale, la bordure et le remplissage (<em>padding</em>). Certains navigateurs implémentent cette valeur avec un ancien nom : <code>available</code>.</dd>
+ <dt><code>fit-content</code> {{experimental_inline}}</dt>
+ <dd>La largeur calculée par <code>min(max-content, max(min-content, fill-available))</code>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt; Lorem ipsum tralala sit amet, consectetur adipisicing
+  &lt;p&gt;
+     Ut enim ad minim veniam, quis nostrud exercitation
+     ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  &lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  width: 250px;
+  border: solid 1px red;
+}
+
+p {
+  max-width: 60%;
+  border: solid 1px blue;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Sizing', '#width-height-keywords', 'min-width')}}</td>
+   <td>{{Spec2('CSS3 Sizing')}}</td>
+   <td>Ajout des mots-clés <code>max-content</code>, <code>min-content</code>, <code>fit-content</code> et <code>fill-available</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#min-size-auto', 'min-width')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Ajout du mot-clé <code>auto</code> qui est utilisé comme valeur initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'min-width')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>min-width</code> peut désormais être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visudet.html#min-max-widths', 'min-width')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une <em>pull request</em> sur ce dépôt: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("css.properties.min-width")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("width")}}</li>
+ <li>{{cssxref("max-width")}}</li>
+ <li>{{cssxref("min-height")}}</li>
+ <li>{{cssxref("box-sizing")}}</li>
+ <li><a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte" title="en/CSS/box_model">Le modèle de boîtes</a></li>
+</ul>
diff --git a/files/fr/web/css/minmax()/index.html b/files/fr/web/css/minmax()/index.html
new file mode 100644
index 0000000000..be3492db41
--- /dev/null
+++ b/files/fr/web/css/minmax()/index.html
@@ -0,0 +1,151 @@
+---
+title: minmax()
+slug: Web/CSS/minmax()
+tags:
+  - CSS
+  - Experimental
+  - Fonction
+  - Reference
+  - Web
+translation_of: Web/CSS/minmax()
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La fonction CSS <code><strong>minmax</strong></code><strong><code>()</code></strong> définit un intervalle de taille compris (au sens large) entre <var>min</var> et <var>max</var>. Cette fonction est utilisée avec <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">les grilles CSS</a>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* Valeurs &lt;inflexible-breadth&gt;, &lt;track-breadth&gt; */
+minmax(200px, 1fr)
+minmax(400px, 50%)
+minmax(30%, 300px)
+minmax(100px, max-content)
+minmax(min-content, 400px)
+minmax(max-content, auto)
+minmax(auto, 300px)
+minmax(min-content, auto)
+
+/* Valeurs &lt;fixed-breadth&gt;, &lt;track-breadth&gt; */
+minmax(200px, 1fr)
+minmax(30%, 300px)
+minmax(400px, 50%)
+minmax(50%, min-content)
+minmax(300px, max-content)
+minmax(200px, auto)
+
+/* Valeurs &lt;inflexible-breadth&gt;, &lt;fixed-breadth&gt; */
+minmax(400px, 50%)
+minmax(30%, 300px)
+minmax(min-content, 200px)
+minmax(max-content, 200px)
+minmax(auto, 300px)
+</pre>
+
+<p>Une fonction qui prend en entrée deux arguments : <em>min</em> et <em>max</em>.</p>
+
+<p>Chaque paramètre peut être une longueur, un pourcentage, un facteur de flexibilité ou l'un des mots-clés parmi <code>max-content</code>, <code>min-content</code> ou <code>auto</code>.</p>
+
+<p>Si <var>max</var> &lt; <var>min</var>, <var>max</var> est ignoré et <code>minmax(min,max)</code> correspond à <var>min</var>. Utilisé comme maximum, une valeur {{cssxref("flex_value","&lt;flex&gt;")}} permet de définir le facteur de flexibilité d'une piste de la grille, elle est invalide comme minimum.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une longueur positive (cf. le type {{cssxref("&lt;length&gt;")}}).</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Un pourcentage ({{cssxref("&lt;percentage&gt;")}}) positif, relatif à la taille en ligne du conteneur pour les colonnes et à la taille en bloc pour les lignes du conteneur. Si la taille de la grille dépend de la taille de ses pistes, la valeur devra être traitée comme <code>auto</code>. L'agent utilisateur peut ajuster les contributions des tailles intrinsèques à la taille de la piste du conteneur de la grille et augmenter la taille finale de la piste par l'écart minimal nécessaire pour respecter ce pourcentage.</dd>
+ <dt><code>&lt;flex&gt;</code></dt>
+ <dd>Une dimension positive avec l'unité <code>fr</code> qui définit le facteur de flexibilité de la piste (cf. {{cssxref("&lt;flex&gt;")}}). Chaque piste avec un tel coefficient <code>&lt;flex&gt;</code> occupe une partie de l'espace disponible restant en fonction de son facteur de flexibilité.</dd>
+ <dt><code>max-content</code></dt>
+ <dd>Cette valeur représente la plus grande valeur <code>max-content</code> contribuant aux objets de la grille qui occupent la piste.</dd>
+ <dt><code>min-content</code></dt>
+ <dd>Cette valeur représente la plus grande valeur <code>min-content</code> contribuant aux objets de la grille qui occupent la piste</dd>
+ <dt><code>auto</code></dt>
+ <dd>Utilisé comme maximum, c'est un synonyme de <code>max-content</code>. Utilisé comme un minimum, il représente le plus grand des minima (selon  {{cssxref("min-width")}}/{{cssxref("min-height")}}) des objets de la grille qui occupent la piste.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h3 id="Propriétés_CSS_applicables">Propriétés CSS applicables</h3>
+
+<p>La fonction <code>minmax()</code> peut être utilisée avec les propriétés suivantes :</p>
+
+<ul>
+ <li>{{cssxref("grid-template-columns")}}</li>
+ <li>{{cssxref("grid-template-rows")}}</li>
+ <li>{{cssxref("grid-auto-columns")}}</li>
+ <li>{{cssxref("grid-auto-rows")}}</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[3] notranslate">#container {
+  display: grid;
+  grid-template-columns: minmax(min-content, 300px) minmax(200px, 1fr) 150px;
+  grid-gap: 5px;
+  box-sizing: border-box;
+  height: 200px;
+  width: 100%;
+  background-color: #8cffa0;
+  padding: 10px;
+}
+
+#container &gt; div {
+  background-color: #8ca0ff;
+  padding: 5px;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div id="container"&gt;
+  &lt;div&gt;
+    Item aussi large que le contenu jusqu'à 300 pixels max.
+  &lt;/div&gt;
+  &lt;div&gt;
+    Item avec une largeur flexible minimale de 200 pixels.
+  &lt;/div&gt;
+  &lt;div&gt;
+    Item inflexible de 150 pixels de large.
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "100%", 200)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Spécification</th>
+   <th>État</th>
+   <th>Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Grid", "#valdef-grid-template-columns-minmax", "minmax()")}}</td>
+   <td>{{Spec2("CSS Grid")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.grid-template-columns.minmax")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="http://gridbyexample.com/video/series-minmax/">Un tutoriel vidéo : Introduction à <code>minmax()</code> (en anglais)</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture">Les grilles CSS : les valeurs logiques et les modes d'écriture</a></li>
+</ul>
diff --git a/files/fr/web/css/mix-blend-mode/index.html b/files/fr/web/css/mix-blend-mode/index.html
new file mode 100644
index 0000000000..c6abaca52a
--- /dev/null
+++ b/files/fr/web/css/mix-blend-mode/index.html
@@ -0,0 +1,661 @@
+---
+title: mix-blend-mode
+slug: Web/CSS/mix-blend-mode
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/mix-blend-mode
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>mix-blend-mode</code></strong> définit la façon dont le contenu d'un élément doit se mélanger avec le contenu de l'élément parent et avec son arrière-plan.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/mix-blend-mode.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de type &lt;blend-mode&gt; */
+mix-blend-mode: normal;
+mix-blend-mode: multiply;
+mix-blend-mode: screen;
+mix-blend-mode: overlay;
+mix-blend-mode: darken;
+mix-blend-mode: lighten;
+mix-blend-mode: color-dodge;
+mix-blend-mode: color-burn;
+mix-blend-mode: hard-light;
+mix-blend-mode: soft-light;
+mix-blend-mode: difference;
+mix-blend-mode: exclusion;
+mix-blend-mode: hue;
+mix-blend-mode: saturation;
+mix-blend-mode: color;
+mix-blend-mode: luminosity;
+
+/* Valeurs globales */
+mix-blend-mode: initial;
+mix-blend-mode: inherit;
+mix-blend-mode: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;blend-mode&gt;</code></dt>
+ <dd>Indique comment la fusion des modes doit intervenir (cf. {{cssxref("&lt;blend-mode&gt;")}}).</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<div class="hidden" id="mix-blend-mode">
+<pre class="brush: html">&lt;div class="grid"&gt;
+  &lt;div class="col"&gt;
+    &lt;div class="note"&gt;Blending isolé (pas de blending avec l'arrière-plan)&lt;/div&gt;
+    &lt;div class="row isolate"&gt;
+      &lt;div class="cell"&gt; normal
+        &lt;div class="container normal"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;defs&gt;
+                &lt;linearGradient id="red"&gt;
+                  &lt;stop offset="0"    stop-color="hsl(0,100%,50%)" /&gt;
+                  &lt;stop offset="100%" stop-color="hsl(0,0%,100%)" /&gt;
+                &lt;/linearGradient&gt;
+                &lt;linearGradient id="green"&gt;
+                  &lt;stop offset="0"    stop-color="hsl(120,100%,50%)" /&gt;
+                  &lt;stop offset="100%" stop-color="hsl(120,0%,100%)" /&gt;
+                &lt;/linearGradient&gt;
+                &lt;linearGradient id="blue"&gt;
+                  &lt;stop offset="0"    stop-color="hsl(240,100%,50%)" /&gt;
+                  &lt;stop offset="100%" stop-color="hsl(240,0%,100%)" /&gt;
+                &lt;/linearGradient&gt;
+              &lt;/defs&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; multiply
+        &lt;div class="container multiply"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; darken
+        &lt;div class="container darken"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; screen
+        &lt;div class="container screen"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; lighten
+        &lt;div class="container lighten"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; overlay
+        &lt;div class="container overlay"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; color-dodge
+        &lt;div class="container color-dodge"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; color-burn
+        &lt;div class="container color-burn"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; hard-light
+        &lt;div class="container hard-light"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; soft-light
+        &lt;div class="container soft-light"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; difference
+        &lt;div class="container difference"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; exclusion
+        &lt;div class="container exclusion"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; hue
+        &lt;div class="container hue"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; saturation
+        &lt;div class="container saturation"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; color
+        &lt;div class="container color"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; luminosity
+        &lt;div class="container luminosity"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;Blending étendu (avec l'arrière-plan)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; normal
+        &lt;div class="container normal"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; multiply
+        &lt;div class="container multiply"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; darken
+        &lt;div class="container darken"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; screen
+        &lt;div class="container screen"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; lighten
+        &lt;div class="container lighten"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; overlay
+        &lt;div class="container overlay"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; color-dodge
+        &lt;div class="container color-dodge"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; color-burn
+        &lt;div class="container color-burn"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; hard-light
+        &lt;div class="container hard-light"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; soft-light
+        &lt;div class="container soft-light"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; difference
+        &lt;div class="container difference"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; exclusion
+        &lt;div class="container exclusion"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; hue
+        &lt;div class="container hue"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; saturation
+        &lt;div class="container saturation"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; color
+        &lt;div class="container color"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; luminosity
+        &lt;div class="container luminosity"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">html,body {
+  height: 100%;
+  box-sizing: border-box;
+  background: #EEE;
+}
+
+.grid {
+  width: 100%;
+  display: flex;
+  font: 1em monospace;
+}
+
+.row {
+  display: flex;
+  flex: 1 auto;
+  flex-direction: row;
+  flex-wrap: wrap;
+  height: auto;
+}
+
+.col {
+  display: flex;
+  flex: 1 auto;
+  flex-direction: column;
+  height: auto;
+}
+
+.cell {
+  margin: .5em;
+  padding: .5em;
+  background-color: #FFF;
+  overflow: hidden;
+  text-align: center;
+}
+
+.note {
+  background: #fff3d4;
+  padding: 1em;
+  margin: .5em .5em 0;
+  font: .8em sans-serif;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.note + .row .cell {
+  margin-top: 0;
+}
+
+.container {
+  position: relative;
+  background: linear-gradient(to right, #000 0%, transparent 50%, #FFF 100%),
+              linear-gradient(to bottom, #FF0 0%, #F0F 50%, #0FF 100%);
+  width: 150px;
+  height: 150px;
+  margin: 0 auto;
+}
+
+.R {
+  transform-origin: center;
+  transform: rotate(-30deg);
+  fill: url(#red);
+}
+
+.G {
+  transform-origin: center;
+  transform: rotate(90deg);
+  fill: url(#green);
+}
+
+.B {
+  transform-origin: center;
+  transform: rotate(210deg);
+  fill: url(#blue);
+}
+
+.isolate .group { isolation: isolate; }
+
+.normal .item      { mix-blend-mode: normal; }
+.multiply .item    { mix-blend-mode: multiply; }
+.screen .item      { mix-blend-mode: screen; }
+.overlay .item     { mix-blend-mode: overlay; }
+.darken .item      { mix-blend-mode: darken; }
+.lighten .item     { mix-blend-mode: lighten; }
+.color-dodge .item { mix-blend-mode: color-dodge; }
+.color-burn .item  { mix-blend-mode: color-burn; }
+.hard-light .item  { mix-blend-mode: hard-light; }
+.soft-light .item  { mix-blend-mode: soft-light; }
+.difference .item  { mix-blend-mode: difference; }
+.exclusion .item   { mix-blend-mode: exclusion; }
+.hue .item         { mix-blend-mode: hue; }
+.saturation .item  { mix-blend-mode: saturation; }
+.color .item       { mix-blend-mode: color; }
+.luminosity .item  { mix-blend-mode: luminosity; }</pre>
+</div>
+
+<div>{{EmbedLiveSample("mix-blend-mode", "100%", 500, "", "", "example-outcome-frame")}}</div>
+
+<h3 id="Exemple_avec_SVG">Exemple avec SVG</h3>
+
+<h4 id="SVG">SVG</h4>
+
+<pre class="brush: html">&lt;svg&gt;
+  &lt;circle cx="40" cy="40" r="40" fill="red"/&gt;
+  &lt;circle cx="80" cy="40" r="40" fill="lightgreen"/&gt;
+  &lt;circle cx="60" cy="80" r="40" fill="blue"/&gt;
+&lt;/svg&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush:css">circle {
+  mix-blend-mode: screen;
+}</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemple_avec_SVG", "100%", "180")}}</p>
+
+<h3 id="Exemple_avec_HTML">Exemple avec HTML</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="isolate"&gt;
+  &lt;div class="circle circle-1"&gt;&lt;/div&gt;
+  &lt;div class="circle circle-2"&gt;&lt;/div&gt;
+  &lt;div class="circle circle-3"&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">.circle {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  mix-blend-mode: screen;
+  position: absolute;
+}
+
+.circle-1 {
+  background: red;
+}
+
+.circle-2 {
+  background: lightgreen;
+  left: 40px;
+}
+
+.circle-3 {
+  background: blue;
+  left: 20px;
+  top: 40px;
+}
+
+.isolate {
+  isolation: isolate; /* Without isolation, the background color will be taken into account */
+  position: relative;
+}</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemple_avec_HTML", "100%", "180")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Compositing', '#mix-blend-mode', 'mix-blend-mode')}}</td>
+   <td>{{Spec2('Compositing')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.mix-blend-mode")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("&lt;blend-mode&gt;")}}</li>
+ <li>{{cssxref("background-blend-mode")}}</li>
+</ul>
diff --git a/files/fr/web/css/mode_de_mise_en_page/index.html b/files/fr/web/css/mode_de_mise_en_page/index.html
new file mode 100644
index 0000000000..377b162194
--- /dev/null
+++ b/files/fr/web/css/mode_de_mise_en_page/index.html
@@ -0,0 +1,25 @@
+---
+title: Mode de mise en page
+slug: Web/CSS/Mode_de_mise_en_page
+tags:
+  - CSS
+  - Reference
+translation_of: Web/CSS/Layout_mode
+---
+<div>{{CSSRef}}</div>
+
+<p>Un <strong>mode de disposition CSS</strong> (<em>layout mode</em>), parfois raccourci en « disposition » est un algorithme qui détermine la position et la taille des boîtes des éléments en fonction des interactions avec leurs voisins et leurs ancêtres. Il existe plusieurs modes de disposition :</p>
+
+<ul>
+ <li><em><a href="/fr/docs/Web/CSS/CSS_Flow_Layout">Le flux normal (</a></em><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout">normal flow</a><em><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout">)</a></em> : tous les éléments font partie du flux normal par défaut. Le flux normal inclut la disposition en bloc qui permet d'organiser les boîtes comme les paragraphes et la disposition en ligne qui permet d'organiser les éléments en ligne comme le texte.</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Table"><em>La disposition en tableau (</em>Table layout<em>)</em></a> : cette disposition est conçue pour organiser des tableaux.</li>
+ <li><em>La disposition flottante (</em>Float layout<em>)</em> : cette disposition est conçue pour positionner des éléments à gauche ou à droite du reste du contenu en flux normal et qui évolue « autour » de ces éléments.</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Positioning"><em>La disposition positionnée (</em>Positioned layout<em>)</em></a> : cette disposition est conçue afin de positionner des éléments sans interaction avec les autres.</li>
+ <li><a href="/fr/docs/Web/CSS/Colonnes_CSS"><em>La disposition en colonnes (</em>Multi-column layout<em>)</em></a> : cette disposition permet d'organiser le contenu en colonnes, comme on peut le voir dans les journaux.</li>
+ <li><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox"><em>La disposition avec les boîtes flexibles (flexbox) (</em>flexible box layout<em>)</em></a> : cette disposition permet d'organiser des pages complexes qui peuvent être redimensionnées facilement.</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout"><em>La disposition en grille (</em>Grid layout<em>)</em></a> : cette disposition permet d'organiser les éléments relativement à une grille fixe.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note :</strong> <a href="/fr/docs/Web/CSS/Reference">Les propriétés CSS</a> ne s'appliquent toutes à tous les modes de disposition. La plupart des propriétés n'ont d'effet que pour un ou deux de ces modes et seront sans effet pour un élément qui s'inscrit dans un autre mode de disposition.</p>
+</div>
diff --git a/files/fr/web/css/modèle_de_boîte_css/fusion_des_marges/index.html b/files/fr/web/css/modèle_de_boîte_css/fusion_des_marges/index.html
new file mode 100644
index 0000000000..3b14f121d8
--- /dev/null
+++ b/files/fr/web/css/modèle_de_boîte_css/fusion_des_marges/index.html
@@ -0,0 +1,92 @@
+---
+title: Fusion des marges
+slug: Web/CSS/Modèle_de_boîte_CSS/Fusion_des_marges
+tags:
+  - CSS
+  - Reference
+translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
+---
+<div>{{CSSRef}}</div>
+
+<div>Les marges <a href="/fr/docs/Web/CSS/margin-top">haute</a> et <a href="/fr/docs/Web/CSS/margin-bottom">basse</a> des blocs sont parfois fusionnées en une seule marge dont la taille est la plus grande des deux marges fusionnées. C'est ce qu'on appelle <strong>la fusion des marges</strong>.</div>
+
+<p>La fusion des marges se produit si on a l'un de ces trois cas :</p>
+
+<dl>
+ <dt>Des éléments voisins adjacents</dt>
+ <dd>Les marges des éléments voisins adjacents sont fusionnés (sauf quand le dernier voisin doit passer à la ligne pour <a href="/fr/docs/Web/CSS/clear">dégager</a> les flottements). Ainsi :
+ <pre class="brush: html"> &lt;p&gt;La marge basse de ce paragraphe est fusionnée…&lt;/p&gt;
+ &lt;p&gt;… avec la marge haute de celui-ci.&lt;/p&gt;
+</pre>
+ </dd>
+ <dt>Aucun contenu séparant le parent et ses descendants</dt>
+ <dd>S'il n'y a aucune bordure, remplissage, contenu en ligne (<em>inline</em>), lorsqu' un <a href="/fr/docs/Web/CSS/Block_formatting_context"> contexte de formatage de blocs </a> est créé ou <em><a href="/fr/docs/Web/CSS/clear">dégagement</a></em> pour séparer la marge haute d'un bloc avec la marge haute d'un ou plusieurs des blocs descendants ou quand il n'y a aucune bordure, remplissage, contenu en ligne, {{cssxref("height")}}, {{cssxref("min-height")}} ou {{cssxref("max-height")}} pour séparer la marge basse d'un bloc avec la marge basse d'un ou plusieurs des blocs descendants, ces marges sont fusionnées. La marge fusionnée termine en dehors de l'élément parent.</dd>
+ <dt>Des blocs vides</dt>
+ <dd>S'il n'y a aucune bordure, remplissage, contenu en ligne, {{cssxref("height")}} ou {{cssxref("min-height")}} pour séparer la marge haute d'un bloc de sa marge basse, ces deux marges sont fusionnées.</dd>
+</dl>
+
+<p>On peut avoir des cas de fusion plus complexes lorsque ces cas de figures sont combinés.</p>
+
+<p>Ces règles s'appliquent également lorsque les marges sont égales à 0. Ainsi, la marge d'une descendant finit toujours en dehors de l'élément parent (selon la deuxième règle vue ci-avant) quelle que soit la marge de l'élément parent (nulle ou non).</p>
+
+<p>Lorsqu'on manipule des marges négatives, la taille de la marge fusionnée est la somme de la marge positive la plus grande et de la marge négative la plus petite (celle dont la valeur est plus éloignée de 0).</p>
+
+<p>Les marges des éléments <a href="/fr/docs/Web/CSS/float">flottants</a> et <a href="/fr/docs/Web/CSS/position">positionnés de façon absolue</a> ne sont jamais fusionnées.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;La marge basse de ce paragraphe est fusionnée…&lt;/p&gt;
+&lt;p&gt;… avec la marge haute de ce paragraphe. On a donc une marge
+   de &lt;code&gt;1.2rem&lt;/code&gt; entre les deux.&lt;/p&gt;
+
+&lt;div&gt;Cet élément contient deux paragraphes !
+  &lt;p&gt;Celui-ci a une marge de &lt;code&gt;.4rem&lt;/code&gt; par rapport au texte ci-dessus.&lt;/p&gt;
+  &lt;p&gt;La marge basse de cet élément fusionne avec la marge basse
+     de l'élément parent. On a donc &lt;code&gt;2rem&lt;/code&gt; de marge.
+&lt;/p&gt;
+&lt;/div&gt;
+
+&lt;p&gt;Bip bap bop.&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  margin: 2rem 0;
+  background: lavender;
+}
+
+p {
+  margin: .4rem 0 1.2rem 0;
+  background: yellow;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples','100%',250)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Reference">La référence CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/modèle_de_boîte_css/générateur_box-shadow/index.html b/files/fr/web/css/modèle_de_boîte_css/générateur_box-shadow/index.html
new file mode 100644
index 0000000000..77f236ac13
--- /dev/null
+++ b/files/fr/web/css/modèle_de_boîte_css/générateur_box-shadow/index.html
@@ -0,0 +1,2887 @@
+---
+title: Générateur de box-shadow
+slug: Web/CSS/Modèle_de_boîte_CSS/Générateur_box-shadow
+tags:
+  - CSS
+  - Outil
+translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator
+---
+<p>Cet outil visuel permet de construire des effets d'ombre et de générer du code pour la propriété {{cssxref("box-shadow")}} qui pourra être ajouté à votre feuille de style.</p>
+
+<div style="display: none;">
+<h2 id="box-shadow_generator" name="box-shadow_generator">box-shadow generator</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;div id="container"&gt;
+    &lt;div class="group section"&gt;
+        &lt;div id="layer_manager"&gt;
+            &lt;div class="group section"&gt;
+                &lt;div class="button" data-type="add"&gt; &lt;/div&gt;
+                &lt;div class="button" data-type="move-up"&gt; &lt;/div&gt;
+                &lt;div class="button" data-type="move-down"&gt; &lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div id="stack_container"&gt;&lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="preview_zone"&gt;
+            &lt;div id="layer_menu" class="col span_12"&gt;
+                &lt;div class="button" id="element" data-type="subject" data-title="element"&gt; element &lt;/div&gt;
+                &lt;div class="button" id="before" data-type="subject" data-title=":before"&gt;
+                    :before
+                    &lt;span class="delete" data-type="disable"&gt;&lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="button" id="after" data-type="subject" data-title=":after"&gt;
+                    :after
+                    &lt;span class="delete" data-type="disable"&gt;&lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='before' data-label=":before"&gt;&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='after' data-label=":after"&gt;&lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="preview"&gt;
+                &lt;div id="obj-element"&gt;
+                    &lt;div class="content"&gt; &lt;/div&gt;
+                    &lt;div id="obj-before"&gt; &lt;/div&gt;
+                    &lt;div id="obj-after"&gt; &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div id="controls" class="group section"&gt;
+        &lt;div class="wrap-left"&gt;
+            &lt;div class="colorpicker category"&gt;
+                &lt;div class="title"&gt; &lt;/div&gt;
+                &lt;div id="colorpicker" class="group"&gt;
+                    &lt;div id="gradient" class="gradient"&gt;
+                        &lt;div id="gradient_picker"&gt; &lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div id="hue" data-topic="hue" class="hue"&gt;
+                        &lt;div id="hue_selector"&gt; &lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="info"&gt;
+                        &lt;div class="input" data-topic="hue" data-title='H:' data-action="HSV"&gt;&lt;/div&gt;
+                        &lt;div class="input" data-topic="saturation" data-title='S:' data-action="HSV"&gt;&lt;/div&gt;
+                        &lt;div class="input" data-topic="value" data-title='V:' data-action="HSV"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="alpha"&gt;
+                        &lt;div id="alpha" data-topic="alpha"&gt;
+                            &lt;div id="alpha_selector"&gt; &lt;/div&gt;
+                        &lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="info"&gt;
+                        &lt;div class="input" data-topic="r" data-title='R:' data-action="RGB"&gt;&lt;/div&gt;
+                        &lt;div class="input" data-topic="g" data-title='G:' data-action="RGB"&gt;&lt;/div&gt;
+                        &lt;div class="input" data-topic="b" data-title='B:' data-action="RGB"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="preview block"&gt;
+                        &lt;div id="output_color"&gt; &lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="block info"&gt;
+                        &lt;div class="input" data-topic="a" data-title='alpha:' data-action="alpha"&gt;&lt;/div&gt;
+                        &lt;div class="input" data-topic="hexa" data-title='' data-action="hexa"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div class="wrap-right"&gt;
+
+            &lt;div id="shadow_properties" class="category"&gt;
+                &lt;div class="title"&gt; Propriétés d'ombre &lt;/div&gt;
+                &lt;div class="group"&gt;
+                    &lt;div class="group property"&gt;
+                        &lt;div class="ui-slider-name"&gt; inset &lt;/div&gt;
+                        &lt;div class="ui-checkbox" data-topic='inset'&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Position x &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="posX" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="posX"
+                            data-min="-500" data-max="500" data-step="1"&gt; &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="posX" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="posX" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Position y &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="posY" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="posY"
+                            data-min="-500" data-max="500" data-step="1"&gt; &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="posY" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="posY" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Blur &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="blur" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="blur"
+                            data-min="0" data-max="200" data-step="1"&gt; &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="blur" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="blur" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Spread &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="spread" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="spread"
+                            data-min="-100"    data-max="100" data-step="1" data-value="50"&gt;
+                        &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="spread" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="spread" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="element_properties" class="category"&gt;
+                &lt;div class="title"&gt; Propriétés d'ombre &lt;/div&gt;
+                &lt;div class="group"&gt;
+                    &lt;div class="group property"&gt;
+                        &lt;div class="ui-slider-name"&gt; border &lt;/div&gt;
+                        &lt;div class="ui-checkbox" data-topic='border-state' data-state="true"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div id="z-index" class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; z-index &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="z-index" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="z-index"
+                            data-min="-10" data-max="10" data-step="1"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="z-index" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="z-index"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; top &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="top" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="top"
+                            data-min="-500" data-max="500" data-step="1"&gt; &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="top" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="top" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; left &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="left" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="left"
+                            data-min="-300" data-max="700" data-step="1"&gt; &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="left" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="left" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div id="transform_rotate" class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Rotate &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="rotate" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="rotate"
+                            data-min="-360" data-max="360" data-step="1" data-value="0"&gt;
+                        &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="rotate" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="rotate" data-unit="deg"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Width &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="width" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="width"
+                            data-min="0" data-max="1000" data-step="1" data-value="200"&gt;
+                        &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="width" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="width"  data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Height &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="height" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="height"
+                            data-min="0" data-max="400" data-step="1" data-value="200"&gt;
+                        &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="height" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="height" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="output" class="category"&gt;
+                &lt;div id="menu" class="menu"&gt;&lt;/div&gt;
+                &lt;div class="title"&gt;    Code CSS &lt;/div&gt;
+                &lt;div class="group" style="border-top-left-radius: 0;"&gt;
+                    &lt;div class="output" data-topic="element" data-name="element"
+                        data-prop="width height background-color position=[relative] box-shadow"&gt;
+                    &lt;/div&gt;
+                    &lt;div class="output" data-topic="before" data-name="element:before"
+                        data-prop="content=[&amp;quot;&amp;quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"&gt;
+                    &lt;/div&gt;
+                    &lt;div class="output" data-topic="after" data-name="element:after"
+                        data-prop="content=[&amp;quot;&amp;quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">/*  GRID OF TWELVE
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+/*
+ * UI Slider
+ */
+
+.slidergroup {
+	height: 20px;
+	margin: 10px 0;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.slidergroup * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Slider */
+
+.ui-slider {
+	height: 10px;
+	width: 200px;
+	margin: 4px 10px;
+	display: block;
+	border: 1px solid #999;
+	border-radius: 3px;
+	background: #EEE;
+}
+
+.ui-slider:hover {
+	cursor: pointer;
+}
+
+.ui-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-slider-pointer {
+	width: 13px;
+	height: 13px;
+	background-color: #EEE;
+	border: 1px solid #2C9FC9;
+	border-radius: 3px;
+	position: relative;
+	top: -3px;
+	left: 0%;
+}
+
+.ui-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 3px;
+	color: #FFF;
+	font-weight: bold;
+	text-align: center;
+}
+
+.ui-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+.ui-slider-input &gt; input {
+	margin: 0 10px;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/*
+ * UI Button
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox &gt; input {
+ 	display: none;
+}
+
+.ui-checkbox &gt; label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 3px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox &gt; label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox &gt; input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+/*
+ * BOX SHADOW GENERATOR TOOL
+ */
+
+body {
+	max-width: 1000px;
+	height: 800px;
+	margin: 20px auto 0;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+}
+
+#container {
+	width: 100%;
+	padding: 2px;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/* container with shadows stacks */
+#stack_container {
+	height: 400px;
+	overflow: hidden;
+	position: relative;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#stack_container .container {
+	height: 100%;
+	width: 100%;
+	position: absolute;
+	left: 100%;
+	transition-property: left;
+	transition-duration: 0.5s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+#stack_container .title {
+	text-align: center;
+	font-weight: bold;
+	line-height: 2em;
+	border-bottom: 1px solid #43A6E1;
+	color: #666;
+}
+
+
+/*
+ * Stack of Layers for shadow
+ */
+
+#layer_manager {
+	width: 17%;
+	background-color: #FEFEFE;
+	margin: 0 1% 0 0;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	float: left;
+}
+
+
+#layer_manager .button {
+	width: 30%;
+	height: 25px;
+	margin:0 0 10px;
+	color: #333;
+	background-color: #EEE;
+	text-align: center;
+	font-size: 0.75em;
+	line-height: 1.5em;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+
+	display: block;
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	float: left;
+}
+
+#layer_manager .button:hover {
+	background-color: #3380C4;
+	border: 1px solid #3380C4;
+	cursor: pointer;
+}
+
+#layer_manager [data-type='add'] {
+	background-image: url("https://mdn.mozillademos.org/files/5685/add-black.png");
+}
+
+#layer_manager [data-type='add']:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5687/add-white.png");
+}
+
+#layer_manager [data-type='move-up'] {
+	background-image: url("https://mdn.mozillademos.org/files/5697/up-black.png");
+	margin-left: 5%;
+	margin-right: 5%;
+}
+
+#layer_manager [data-type='move-up']:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5709/up-white.png");
+}
+
+#layer_manager [data-type='move-down'] {
+	background-image: url("https://mdn.mozillademos.org/files/5693/down-black.png");
+}
+
+#layer_manager [data-type='move-down']:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5695/down-white.png");
+}
+
+/* shadows classes */
+
+#layer_manager .node {
+	width: 100%;
+	margin: 5px 0;
+	padding: 5px;
+	text-align: center;
+	background-color: #EEE;
+	border: 1px solid #DDD;
+	font-size: 0.75em;
+	line-height: 1.5em;
+	color: #333;
+	border-radius: 3px;
+
+	position: relative;
+	display: block;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#layer_manager .node:hover {
+	color: #FFF;
+	background-color: #3380C4;
+	cursor: pointer;
+}
+
+/* active element styling */
+
+#layer_manager [data-active='layer'] {
+	color: #FFF;
+	border: none;
+	background-color: #379B4A;
+}
+
+#layer_manager [data-active='subject'] {
+	color: #FFF;
+	background-color: #467FC9;
+}
+
+/* delete button */
+
+#layer_manager .delete {
+	width: 1.5em;
+	height: 100%;
+	float: right;
+	border-radius: 3px;
+	background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	position: absolute;
+	top: 0;
+	right: 10px;
+	display: none;
+}
+
+#layer_manager .delete:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png");
+}
+
+#layer_manager .node:hover .delete {
+	display: block;
+}
+
+
+#layer_manager .stack {
+	padding: 0 5px;
+	max-height: 90%;
+	overflow: auto;
+	overflow-x: hidden;
+}
+
+
+/*
+ * Layer Menu
+ */
+
+#layer_menu {
+	margin: 0 0 10px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#layer_menu .button {
+	width: 100px;
+	margin: 0 5px 0 0;
+	padding: 2.5px;
+	color: #333;
+	background-color: #EEE;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+	font-size: 0.75em;
+	line-height: 1.5em;
+
+	position: relative;
+	display: block;
+	float: left;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#layer_menu .button:hover {
+	color: #FFF;
+	background-color: #3380C4;
+	border: 1px solid #3380C4;
+	cursor: pointer;
+}
+
+#layer_menu .delete {
+	width: 1.5em;
+	height: 100%;
+	float: right;
+	border-radius: 3px;
+	background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	position: absolute;
+	top: 0;
+	right: 5px;
+	display: none;
+}
+
+#layer_menu .delete:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png");
+}
+
+#layer_menu .button:hover .delete {
+	display: block;
+}
+
+
+/*
+ * active element styling
+ */
+
+#layer_menu [data-active='subject'] {
+	color: #FFF;
+	background-color: #379B4A;
+	border: 1px solid #379B4A;
+}
+
+
+/* Checkbox */
+
+#layer_menu .ui-checkbox &gt; label {
+	height: 15px;
+	line-height: 17px;
+	font-weight: normal;
+	width: 46px;
+	margin: 0 5px 0 0;
+}
+
+#layer_menu .ui-checkbox &gt; input:checked + label {
+	display: none;
+}
+
+
+/******************************************************************************/
+/******************************************************************************/
+/*
+ * Preview Area
+ */
+
+#preview_zone {
+	width: 82%;
+	float: left;
+
+}
+
+
+#preview {
+	width: 100%;
+	height: 400px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	cursor: move;
+	float: left;
+}
+
+#preview .content {
+	width: 100%;
+	height: 100%;
+	display: block;
+}
+
+#obj-element {
+	width: 300px;
+	height: 100px;
+	border: 1px solid #CCC;
+	background: #FFF;
+	position: relative;
+}
+
+
+#obj-before {
+	height: 100%;
+	width: 100%;
+	background: #999;
+	border: 1px solid #CCC;
+	text-align: left;
+	display : block;
+	position: absolute;
+	z-index: -1;
+}
+
+#obj-after {
+	height: 100%;
+	width: 100%;
+	background: #DDD;
+	border: 1px solid #CCC;
+	text-align: right;
+	display : block;
+	position: absolute;
+	z-index: -1;
+}
+
+
+/******************************************************************************/
+/******************************************************************************/
+
+/**
+ * Controls
+ */
+
+.wrap-left {
+	float: left;
+	overflow: hidden;
+}
+
+.wrap-right {
+	float: right;
+	overflow: hidden;
+}
+
+.wrap-left &gt; * {
+	float: left;
+}
+
+.wrap-right &gt; * {
+	float: right;
+}
+
+@media (min-width: 960px) {
+
+	.wrap-left {
+		width: 45%;
+	}
+
+	.wrap-right {
+		width: 55%;
+	}
+}
+
+
+@media (max-width: 959px) {
+
+	.wrap-left {
+		width: 30%;
+	}
+
+	.wrap-right {
+		width: 70%;
+	}
+}
+
+
+#controls {
+	color: #444;
+	margin: 10px 0 0 0;
+}
+
+
+#controls .category {
+	width: 500px;
+	margin: 0 auto 20px;
+	padding: 0;
+
+}
+
+#controls .category .title {
+	width: 100%;
+	height: 1.5em;
+	line-height: 1.5em;
+	color: #AAA;
+	text-align: right;
+}
+
+#controls .category &gt; .group {
+	border: 1px solid #CCC;
+	border-radius: 3px;
+}
+
+
+/**
+ * 	Color Picker
+ */
+
+@media (min-width: 960px) {
+	#controls .colorpicker {
+		width: 420px;
+	}
+}
+
+@media (max-width: 959px) {
+	#controls .colorpicker {
+		width: 210px;
+	}
+}
+
+#colorpicker {
+	width: 100%;
+	margin: 0 auto;
+}
+
+#colorpicker .gradient {
+	width: 200px;
+	height: 200px;
+	margin: 5px;
+	background: url("https://mdn.mozillademos.org/files/5707/picker_mask_200.png");
+	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background-color: #F00;
+	float: left;
+}
+
+#colorpicker .hue {
+	width: 200px;
+	height: 30px;
+	margin: 5px;
+	background: url("https://mdn.mozillademos.org/files/5701/hue.png");
+	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	float: left;
+}
+
+#colorpicker .alpha {
+	width: 200px;
+	height: 30px;
+	margin: 5px;
+	border: 1px solid #CCC;
+	float: left;
+	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#colorpicker #alpha {
+	width: 100%;
+	height: 100%;
+	background: url("https://mdn.mozillademos.org/files/5703/alpha_mask.png");
+	background: -moz-linear-gradient(left, rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 1) 100%);
+}
+
+#colorpicker #gradient_picker {
+	width: 0.5em;
+	height: 0.5em;
+	border-radius: 0.4em;
+	border: 2px solid #CCC;
+	position: relative;
+	top: 20%;
+	left: 20%;
+}
+
+#colorpicker #hue_selector,
+#colorpicker #alpha_selector {
+	width: 3px;
+	height: 100%;
+	border: 1px solid #777;
+	background-color: #FFF;
+	position: relative;
+	top: -1px;
+	left: 0%;
+}
+
+/* input HSV and RGB */
+#colorpicker .info {
+	width: 200px;
+	margin: 5px;
+	float: left;
+}
+
+#colorpicker .info * {
+	float: left;
+}
+
+#colorpicker .info input {
+	margin: 0;
+	text-align: center;
+	width: 30px;
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+#colorpicker .info span {
+	height: 20px;
+	width: 30px;
+	text-align: center;
+	line-height: 20px;
+	display: block;
+}
+
+/* Preview color */
+#colorpicker .block {
+	width: 95px;
+	height: 54px;
+	float: left;
+	position: relative;
+}
+
+#colorpicker .preview {
+	margin: 5px;
+	border: 1px solid #CCC;
+	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#colorpicker .preview:before {
+	height: 100%;
+	width: 50%;
+	left: 50%;
+	content: "";
+	background: #FFF;
+	position: absolute;
+	z-index: 1;
+}
+
+#colorpicker .preview &gt; * {
+	width: 50%;
+	height: 100%;
+}
+
+#colorpicker #output_color {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	z-index: 2;
+}
+
+#colorpicker .block .input {
+	float: right;
+}
+
+#colorpicker [data-topic="a"] &gt; span {
+	width: 50px;
+}
+
+#colorpicker [data-topic="hexa"] {
+	float: right;
+	margin: 10px 0 0 0;
+}
+
+#colorpicker [data-topic="hexa"] &gt; span {
+	display: none;
+}
+
+#colorpicker [data-topic="hexa"] &gt; input {
+	width: 85px;
+	padding: 2px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/*
+ * UI Components
+ */
+
+/* Property */
+
+.property {
+	height: 20px;
+	margin: 10px 0;
+}
+
+.property * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Slider */
+
+#controls .ui-slider-name {
+	margin: 0 10px 0 0;
+}
+
+/*
+ * Output code styling
+ */
+
+#output {
+	position: relative;
+}
+
+#output .menu {
+	max-width: 70%;
+	height: 20px;
+	position: absolute;
+	top: 2px;
+}
+
+#output .button {
+	width: 90px;
+	height: 22px;
+	margin: 0 5px 0 0;
+	text-align: center;
+	line-height: 20px;
+	font-size: 14px;
+	color: #FFF;
+	background-color: #999;
+	border-top-left-radius: 3px;
+	border-top-right-radius: 3px;
+	bottom: -5px;
+	float:left;
+}
+
+#output .button:hover {
+	color: #FFF;
+	background-color: #666;
+	cursor: pointer;
+}
+
+#output .menu [data-active="true"] {
+	color: #777;
+	background-color: #FFF;
+	border: 1px solid #CCC;
+	border-bottom: none;
+}
+
+#output .menu [data-topic="before"] {
+	left: 100px;
+}
+
+#output .menu [data-topic="after"] {
+	left: 200px;
+}
+
+#output .output {
+	width: 480px;
+	margin: 10px;
+	padding: 10px;
+	overflow: hidden;
+	color: #555;
+	font-size: 14px;
+	border: 1px dashed #CCC;
+	border-radius: 3px;
+	display: none;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+#output .css-property {
+	width: 100%;
+	float: left;
+	white-space: pre;
+}
+
+#output .name {
+	width: 35%;
+	float: left;
+}
+
+#output .value {
+	width: 65%;
+	float: left;
+}
+
+</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js"><code class="language-js">
+
+'use strict';
+
+/**
+ * UI-SlidersManager
+ */
+
+var SliderManager = (function SliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var Slider = function(node) {
+		var min = node.getAttribute('data-min') | 0;
+		var max = node.getAttribute('data-max') | 0;
+		var step = node.getAttribute('data-step') | 0;
+		var value = node.getAttribute('data-value') | 0;
+		var snap = node.getAttribute('data-snap');
+		var topic = node.getAttribute('data-topic');
+
+		this.min = min;
+		this.max = max &gt; 0 ? max : 100;
+		this.step = step === 0 ? 1 : step;
+		this.value = value &lt;= max &amp;&amp; value &gt;= min ? value : (min + max) / 2 | 0;
+		this.snap = snap === "true" ? true : false;
+		this.topic = topic;
+		this.node = node;
+
+		var pointer = document.createElement('div');
+		pointer.className = 'ui-slider-pointer';
+		node.appendChild(pointer);
+		this.pointer = pointer;
+
+		setMouseTracking(node, updateSlider.bind(this));
+
+		sliders[topic] = this;
+		setValue(topic, this.value);
+	}
+
+	var setButtonComponent = function setButtonComponent(node) {
+		var type = node.getAttribute('data-type');
+		var topic = node.getAttribute('data-topic');
+		if (type === "sub") {
+			node.textContent = '-';
+			node.addEventListener("click", function() {
+				decrement(topic);
+			});
+		}
+		if (type === "add") {
+			node.textContent = '+';
+			node.addEventListener("click", function() {
+				increment(topic);
+			});
+		}
+	}
+
+	var setInputComponent = function setInputComponent(node) {
+		var topic		= node.getAttribute('data-topic');
+		var unit_type	= node.getAttribute('data-unit');
+
+		var input = document.createElement('input');
+		var unit = document.createElement('span');
+		unit.textContent = unit_type;
+
+		input.setAttribute('type', 'text');
+		node.appendChild(input);
+		node.appendChild(unit);
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			setValue(topic, e.target.value | 0);
+		});
+
+		subscribe(topic, function(value) {
+			node.children[0].value = value;
+		});
+	}
+
+	var increment = function increment(topic) {
+		var slider = sliders[topic];
+		if (slider === null || slider === undefined)
+			return;
+
+		if (slider.value + slider.step &lt;= slider.max) {
+			slider.value += slider.step;
+			setValue(slider.topic, slider.value)
+			notify.call(slider);
+		}
+	};
+
+	var decrement = function decrement(topic) {
+		var slider = sliders[topic];
+		if (slider === null || slider === undefined)
+			return;
+
+		if (slider.value - slider.step &gt;= slider.min) {
+			slider.value -= slider.step;
+			setValue(topic, slider.value)
+			notify.call(slider);
+		}
+	}
+
+	// this = Slider object
+	var updateSlider = function updateSlider(e) {
+		var node = this.node;
+		var pos = e.pageX - node.offsetLeft;
+		var width = node.clientWidth;
+		var delta = this.max - this.min;
+		var offset = this.pointer.clientWidth + 4; // border width * 2
+
+		if (pos &lt; 0) pos = 0;
+		if (pos &gt; width) pos = width;
+
+		var value = pos * delta / width | 0;
+		var precision = value % this.step;
+		value = value - precision + this.min;
+		if (precision &gt; this.step / 2)
+			value = value + this.step;
+
+		if (this.snap)
+			pos =  (value - this.min) * width / delta;
+
+		this.pointer.style.left = pos - offset/2 + "px";
+		this.value = value;
+		node.setAttribute('data-value', value);
+		notify.call(this);
+	}
+
+	var setValue = function setValue(topic, value) {
+		var slider = sliders[topic];
+
+		if (value &gt; slider.max || value &lt; slider.min)
+			return;
+
+		var delta = slider.max - slider.min;
+		var width = slider.node.clientWidth;
+		var offset = slider.pointer.clientWidth;
+		var pos =  (value - slider.min) * width / delta;
+		slider.value = value;
+		slider.pointer.style.left = pos - offset / 2 + "px";
+		slider.node.setAttribute('data-value', value);
+		notify.call(slider);
+	}
+
+	var setMouseTracking = function setMouseTracking(elem, callback) {
+		elem.addEventListener("mousedown", function(e) {
+			callback(e);
+			document.addEventListener("mousemove", callback);
+		});
+
+		document.addEventListener("mouseup", function(e) {
+			document.removeEventListener("mousemove", callback);
+		});
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	}
+
+	var init = function init() {
+		var elem, size;
+
+		elem = document.querySelectorAll('.ui-slider-btn-set');
+		size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			setButtonComponent(elem[i]);
+
+		elem = document.querySelectorAll('.ui-slider-input');
+		size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			setInputComponent(elem[i]);
+
+		elem = document.querySelectorAll('.ui-slider');
+		size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new Slider(elem[i]);
+	}
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	}
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	}
+
+	var setValue = function setValue(topic, value) {
+		try {
+			buttons[topic].checkbox.checked = value;
+			notify.call(buttons[topic]);
+		}
+		catch(error) {
+			console.log(error, topic, value);
+		}
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	}
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new CheckBox(elem[i]);
+	}
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+
+window.addEventListener("load", function(){
+	BoxShadow.init();
+});
+
+var BoxShadow = (function BoxShadow() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	/**
+	 * RGBA Color class
+	 */
+
+	function Color() {
+		this.r = 0;
+		this.g = 0;
+		this.b = 0;
+		this.a = 1;
+		this.hue = 0;
+		this.saturation = 0;
+		this.value = 0;
+	}
+
+	Color.prototype.copy = function copy(obj) {
+		if(obj instanceof Color !== true) {
+			console.log("Typeof instance not Color");
+			return;
+		}
+
+		this.r = obj.r;
+		this.g = obj.g;
+		this.b = obj.b;
+		this.a = obj.a;
+		this.hue = obj.hue;
+		this.saturation = obj.saturation;
+		this.value = obj.value;
+	}
+
+	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
+		if (red != undefined)
+			this.r = red | 0;
+		if (green != undefined)
+			this.g = green | 0;
+		if (blue != undefined)
+			this.b = blue | 0;
+		if (alpha != undefined)
+			this.a = alpha | 0;
+	}
+
+	/**
+	 * HSV/HSB (hue, saturation, value / brightness)
+	 * @param hue			0-360
+	 * @param saturation	0-100
+	 * @param value 		0-100
+	 */
+	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.value = value;
+		this.updateRGB();
+	}
+
+	Color.prototype.updateRGB = function updateRGB() {
+		var sat = this.saturation / 100;
+		var value = this.value / 100;
+		var C = sat * value;
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = value - C;
+		var precision = 255;
+
+		C = (C + m) * precision;
+		X = (X + m) * precision;
+		m = m * precision;
+
+		if (H &gt;= 0 &amp;&amp; H &lt; 1) {	this.setRGBA(C, X, m);	return; }
+		if (H &gt;= 1 &amp;&amp; H &lt; 2) {	this.setRGBA(X, C, m);	return; }
+		if (H &gt;= 2 &amp;&amp; H &lt; 3) {	this.setRGBA(m, C, X);	return; }
+		if (H &gt;= 3 &amp;&amp; H &lt; 4) {	this.setRGBA(m, X, C);	return; }
+		if (H &gt;= 4 &amp;&amp; H &lt; 5) {	this.setRGBA(X, m, C);	return; }
+		if (H &gt;= 5 &amp;&amp; H &lt; 6) {	this.setRGBA(C, m, X);	return; }
+	}
+
+	Color.prototype.updateHSV = function updateHSV() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / cmax;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue &lt; 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.value = (cmax * 100) | 0;
+	}
+
+	Color.prototype.setHexa = function setHexa(value) {
+		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value)
+		if (valid !== true)
+			return;
+
+		if (value[0] === '#')
+			value = value.slice(1, value.length);
+
+		if (value.length === 3)
+			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,"$1$1$2$2$3$3");
+
+		this.r = parseInt(value.substr(0, 2), 16);
+		this.g = parseInt(value.substr(2, 2), 16);
+		this.b = parseInt(value.substr(4, 2), 16);
+
+		this.alpha	= 1;
+	}
+
+	Color.prototype.getHexa = function getHexa() {
+		var r = this.r.toString(16);
+		var g = this.g.toString(16);
+		var b = this.b.toString(16);
+		if (this.r &lt; 16) r = '0' + r;
+		if (this.g &lt; 16) g = '0' + g;
+		if (this.b &lt; 16) b = '0' + b;
+		var value = '#' + r + g + b;
+		return value.toUpperCase();
+	}
+
+	Color.prototype.getRGBA = function getRGBA() {
+
+		var rgb = "(" + this.r + ", " + this.g + ", " + this.b;
+		var a = '';
+		var v = '';
+		if (this.a !== 1) {
+			a = 'a';
+			v = ', ' + this.a;
+		}
+
+		var value = "rgb" + a + rgb + v + ")";
+		return value;
+	}
+
+	Color.prototype.getColor = function getColor() {
+		if (this.a | 0 === 1)
+			return this.getHexa();
+		return this.getRGBA();
+	}
+
+	/**
+	 * Shadow Object
+	 */
+	function Shadow() {
+		this.inset  = false;
+		this.posX   = 5;
+		this.posY   = -5;
+		this.blur   = 5;
+		this.spread = 0;
+		this.color  = new Color();
+
+		var hue			= (Math.random() * 360) | 0;
+		var saturation	= (Math.random() * 75) | 0;
+		var value 		= (Math.random() * 50 + 50) | 0;
+		this.color.setHSV(hue, saturation, value, 1);
+	}
+
+	Shadow.prototype.computeCSS = function computeCSS() {
+		var value = "";
+		if (this.inset === true)
+			value += "inset ";
+		value += this.posX + "px ";
+		value += this.posY + "px ";
+		value += this.blur + "px ";
+		value += this.spread + "px ";
+		value += this.color.getColor();
+
+		return value;
+	}
+
+	Shadow.prototype.toggleInset = function toggleInset(value) {
+		if (value !== undefined || typeof value === "boolean")
+			this.inset = value;
+		else
+			this.inset = this.inset === true ? false : true;
+	}
+
+	Shadow.prototype.copy = function copy(obj) {
+		if(obj instanceof Shadow !== true) {
+			console.log("Typeof instance not Shadow");
+			return;
+		}
+
+		this.inset  = obj.inset;
+		this.posX   = obj.posX;
+		this.posY   = obj.posY;
+		this.blur   = obj.blur;
+		this.spread = obj.spread;
+		this.color.copy(obj.color);
+	}
+
+	/**
+	 * Color Picker
+	 */
+	var ColoPicker = (function ColoPicker() {
+
+		var colorpicker;
+		var hue_area;
+		var gradient_area;
+		var alpha_area;
+		var gradient_picker;
+		var hue_selector;
+		var alpha_selector;
+		var pick_object;
+		var info_rgb;
+		var info_hsv;
+		var info_hexa;
+		var output_color;
+		var color = new Color();
+		var subscribers = [];
+
+		var updateColor = function updateColor(e) {
+			var x = e.pageX - gradient_area.offsetLeft;
+			var y = e.pageY - gradient_area.offsetTop;
+
+			// width and height should be the same
+			var size = gradient_area.clientWidth;
+
+			if (x &gt; size)
+				x = size;
+			if (y &gt; size)
+				y = size;
+
+			if (x &lt; 0) x = 0;
+			if (y &lt; 0) y = 0;
+
+			var value = 100 - (y * 100 / size) | 0;
+			var saturation = x * 100 / size | 0;
+
+			color.setHSV(color.hue, saturation, value);
+			// should update just
+			// color pointer location
+			updateUI();
+			notify("color", color);
+		}
+
+		var updateHue = function updateHue(e) {
+			var x = e.pageX - hue_area.offsetLeft;
+			var width = hue_area.clientWidth;
+
+			if (x &lt; 0) x = 0;
+			if (x &gt; width) x = width;
+
+			var hue = ((360 * x) / width) | 0;
+			if (hue === 360) hue = 359;
+
+			color.setHSV(hue, color.saturation, color.value);
+
+			// should update just
+			// hue pointer location
+			// picker area background
+			// alpha area background
+			updateUI();
+			notify("color", color);
+		}
+
+		var updateAlpha = function updateAlpha(e) {
+			var x = e.pageX - alpha_area.offsetLeft;
+			var width = alpha_area.clientWidth;
+
+			if (x &lt; 0) x = 0;
+			if (x &gt; width) x = width;
+
+			color.a = (x / width).toFixed(2);
+
+			// should update just
+			// alpha pointer location
+			updateUI();
+			notify("color", color);
+		}
+
+		var setHueGfx = function setHueGfx(hue) {
+			var sat = color.saturation;
+			var val = color.value;
+			var alpha = color.a;
+
+			color.setHSV(hue, 100, 100);
+			gradient_area.style.backgroundColor = color.getHexa();
+
+			color.a = 0;
+			var start = color.getRGBA();
+			color.a = 1;
+			var end = color.getRGBA();
+			color.a = alpha;
+
+			var gradient = '-moz-linear-gradient(left, ' +	start + '0%, ' + end + ' 100%)';
+			alpha_area.style.background = gradient;
+		}
+
+		var updateUI = function updateUI() {
+			var x, y;		// coordinates
+			var size;		// size of the area
+			var offset;		// pointer graphic selector offset
+
+			// Set color pointer location
+			size = gradient_area.clientWidth;
+			offset = gradient_picker.clientWidth / 2 + 2;
+
+			x = (color.saturation * size / 100) | 0;
+			y = size - (color.value * size / 100) | 0;
+
+			gradient_picker.style.left = x - offset + "px";
+			gradient_picker.style.top = y - offset + "px";
+
+			// Set hue pointer location
+			size = hue_area.clientWidth;
+			offset = hue_selector.clientWidth/2;
+			x = (color.hue * size / 360 ) | 0;
+			hue_selector.style.left = x - offset + "px";
+
+			// Set alpha pointer location
+			size = alpha_area.clientWidth;
+			offset = alpha_selector.clientWidth/2;
+			x = (color.a * size) | 0;
+			alpha_selector.style.left = x - offset + "px";
+
+			// Set picker area background
+			var nc = new Color();
+			nc.copy(color);
+			if (nc.hue === 360) nc.hue = 0;
+			nc.setHSV(nc.hue, 100, 100);
+			gradient_area.style.backgroundColor = nc.getHexa();
+
+			// Set alpha area background
+			nc.copy(color);
+			nc.a = 0;
+			var start = nc.getRGBA();
+			nc.a = 1;
+			var end = nc.getRGBA();
+			var gradient = '-moz-linear-gradient(left, ' +	start + '0%, ' + end + ' 100%)';
+			alpha_area.style.background = gradient;
+
+			// Update color info
+			notify("color", color);
+			notify("hue", color.hue);
+			notify("saturation", color.saturation);
+			notify("value", color.value);
+			notify("r", color.r);
+			notify("g", color.g);
+			notify("b", color.b);
+			notify("a", color.a);
+			notify("hexa", color.getHexa());
+			output_color.style.backgroundColor = color.getRGBA();
+		}
+
+		var setInputComponent = function setInputComponent(node) {
+			var topic = node.getAttribute('data-topic');
+			var title = node.getAttribute('data-title');
+			var action = node.getAttribute('data-action');
+			title = title === null ? '' : title;
+
+			var input = document.createElement('input');
+			var info = document.createElement('span');
+			info.textContent = title;
+
+			input.setAttribute('type', 'text');
+			input.setAttribute('data-action', 'set-' + action + '-' + topic);
+			node.appendChild(info);
+			node.appendChild(input);
+
+			input.addEventListener('click', function(e) {
+				this.select();
+			});
+
+			input.addEventListener('change', function(e) {
+				if (action === 'HSV')
+					inputChangeHSV(topic);
+				if (action === 'RGB')
+					inputChangeRGB(topic);
+				if (action === 'alpha')
+					inputChangeAlpha(topic);
+				if (action === 'hexa')
+					inputChangeHexa(topic);
+			});
+
+			subscribe(topic, function(value) {
+				node.children[1].value = value;
+			});
+		}
+
+		var inputChangeHSV = function actionHSV(topic) {
+			var selector = "[data-action='set-HSV-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = parseInt(node.value);
+
+			if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
+				value &gt;= 0 &amp;&amp; value &lt; 360)
+				color[topic] = value;
+
+			color.updateRGB();
+			updateUI();
+		}
+
+		var inputChangeRGB = function inputChangeRGB(topic) {
+			var selector = "[data-action='set-RGB-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = parseInt(node.value);
+
+			if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
+				value &gt;= 0 &amp;&amp; value &lt;= 255)
+				color[topic] = value;
+
+			color.updateHSV();
+			updateUI();
+		}
+
+		var inputChangeAlpha = function inputChangeAlpha(topic) {
+			var selector = "[data-action='set-alpha-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = parseFloat(node.value);
+
+			if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
+				value &gt;= 0 &amp;&amp; value &lt;= 1)
+				color.a = value.toFixed(2);
+
+			updateUI();
+		}
+
+		var inputChangeHexa = function inputChangeHexa(topic) {
+			var selector = "[data-action='set-hexa-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = node.value;
+			color.setHexa(value);
+			color.updateHSV();
+			updateUI();
+		}
+
+		var setMouseTracking = function setMouseTracking(elem, callback) {
+
+			elem.addEventListener("mousedown", function(e) {
+				callback(e);
+				document.addEventListener("mousemove", callback);
+			});
+
+			document.addEventListener("mouseup", function(e) {
+				document.removeEventListener("mousemove", callback);
+			});
+		}
+
+		/*
+		 * Observer
+		 */
+		var setColor = function setColor(obj) {
+			if(obj instanceof Color !== true) {
+				console.log("Typeof instance not Color");
+				return;
+			}
+			color.copy(obj);
+			updateUI();
+		}
+
+		var subscribe = function subscribe(topic, callback) {
+			if (subscribers[topic] === undefined)
+				subscribers[topic] = [];
+
+			subscribers[topic].push(callback);
+		}
+
+		var unsubscribe = function unsubscribe(callback) {
+			subscribers.indexOf(callback);
+			subscribers.splice(index, 1);
+		}
+
+		var notify = function notify(topic, value) {
+			for (var i in subscribers[topic])
+				subscribers[topic][i](value);
+		}
+
+		var init = function init() {
+			colorpicker		= getElemById("colorpicker");
+			hue_area		= getElemById("hue");
+			gradient_area	= getElemById("gradient");
+			alpha_area		= getElemById("alpha");
+			gradient_picker	= getElemById("gradient_picker");
+			hue_selector	= getElemById("hue_selector");
+			alpha_selector	= getElemById("alpha_selector");
+			output_color	= getElemById("output_color");
+
+			var elem = document.querySelectorAll('#colorpicker .input');
+			var size = elem.length;
+			for (var i = 0; i &lt; size; i++)
+				setInputComponent(elem[i]);
+
+			setMouseTracking(gradient_area, updateColor);
+			setMouseTracking(hue_area, updateHue);
+			setMouseTracking(alpha_area, updateAlpha);
+
+		}
+
+		return {
+			init : init,
+			setColor : setColor,
+			subscribe : subscribe,
+			unsubscribe : unsubscribe
+		}
+
+	})();
+
+	/**
+	 * Shadow dragging
+	 */
+	var PreviewMouseTracking = (function Drag() {
+		var active = false;
+		var lastX = 0;
+		var lastY = 0;
+		var subscribers = [];
+
+		var init = function init(id) {
+			var elem = getElemById(id);
+			elem.addEventListener('mousedown', dragStart, false);
+			document.addEventListener('mouseup', dragEnd, false);
+		}
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			active = true;
+			lastX = e.clientX;
+			lastY = e.clientY;
+			document.addEventListener('mousemove', mouseDrag, false);
+		}
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			if (active === true) {
+				active = false;
+				document.removeEventListener('mousemove', mouseDrag, false);
+			}
+		}
+
+		var mouseDrag = function mouseDrag(e) {
+			notify(e.clientX - lastX, e.clientY - lastY);
+			lastX = e.clientX;
+			lastY = e.clientY;
+		}
+
+		var subscribe = function subscribe(callback) {
+			subscribers.push(callback);
+		}
+
+		var unsubscribe = function unsubscribe(callback) {
+			var index = subscribers.indexOf(callback);
+			subscribers.splice(index, 1);
+		}
+
+		var notify = function notify(deltaX, deltaY) {
+			for (var i in subscribers)
+				subscribers[i](deltaX, deltaY);
+		}
+
+		return {
+			init : init,
+			subscribe : subscribe,
+			unsubscribe : unsubscribe
+		}
+
+	})();
+
+	/*
+	 * Element Class
+	 */
+	var CssClass = function CssClass(id) {
+		this.left = 0;
+		this.top = 0;
+		this.rotate = 0;
+		this.width = 300;
+		this.height = 100;
+		this.display = true;
+		this.border = true;
+		this.zIndex = -1;
+		this.bgcolor = new Color();
+		this.id = id;
+		this.node = getElemById('obj-' + id);
+		this.object = getElemById(id);
+		this.shadowID = null;
+		this.shadows = []
+		this.render = [];
+		this.init();
+	}
+
+	CssClass.prototype.init = function init() {
+		this.left = ((this.node.parentNode.clientWidth - this.node.clientWidth) / 2) | 0;
+		this.top = ((this.node.parentNode.clientHeight - this.node.clientHeight) / 2) | 0;
+
+		this.setTop(this.top);
+		this.setLeft(this.left);
+		this.setHeight(this.height);
+		this.setWidth(this.width);
+		this.bgcolor.setHSV(0, 0, 100);
+		this.updateBgColor(this.bgcolor);
+	}
+
+	CssClass.prototype.updatePos = function updatePos(deltaX, deltaY) {
+		this.left += deltaX;
+		this.top += deltaY;
+		this.node.style.top = this.top + "px";
+		this.node.style.left = this.left + "px";
+		SliderManager.setValue("left", this.left);
+		SliderManager.setValue("top", this.top);
+	}
+
+	CssClass.prototype.setLeft = function setLeft(value) {
+		this.left = value;
+		this.node.style.left = this.left + "px";
+		OutputManager.updateProperty(this.id, 'left', this.left + 'px');
+	}
+
+	CssClass.prototype.setTop = function setTop(value) {
+		this.top = value;
+		this.node.style.top = this.top + 'px';
+		OutputManager.updateProperty(this.id, 'top', this.top + 'px');
+	}
+
+	CssClass.prototype.setWidth = function setWidth(value) {
+		this.width = value;
+		this.node.style.width = this.width + 'px';
+		OutputManager.updateProperty(this.id, 'width', this.width + 'px');
+	}
+
+	CssClass.prototype.setHeight = function setHeight(value) {
+		this.height = value;
+		this.node.style.height = this.height + 'px';
+		OutputManager.updateProperty(this.id, 'height', this.height + 'px');
+	}
+
+	// Browser support
+	CssClass.prototype.setRotate = function setRotate(value) {
+		var cssvalue = 'rotate(' + value +'deg)';
+
+		this.node.style.transform = cssvalue;
+		this.node.style.webkitTransform = cssvalue;
+		this.node.style.msTransform = cssvalue;
+
+		if (value !== 0) {
+			if (this.rotate === 0) {
+				OutputManager.toggleProperty(this.id, 'transform', true);
+				OutputManager.toggleProperty(this.id, '-webkit-transform', true);
+				OutputManager.toggleProperty(this.id, '-ms-transform', true);
+			}
+		}
+		else {
+			OutputManager.toggleProperty(this.id, 'transform', false);
+			OutputManager.toggleProperty(this.id, '-webkit-transform', false);
+			OutputManager.toggleProperty(this.id, '-ms-transform', false);
+		}
+
+		OutputManager.updateProperty(this.id, 'transform', cssvalue);
+		OutputManager.updateProperty(this.id, '-webkit-transform', cssvalue);
+		OutputManager.updateProperty(this.id, '-ms-transform', cssvalue);
+		this.rotate = value;
+	}
+
+	CssClass.prototype.setzIndex = function setzIndex(value) {
+		this.node.style.zIndex = value;
+		OutputManager.updateProperty(this.id, 'z-index', value);
+		this.zIndex = value;
+	}
+
+	CssClass.prototype.toggleDisplay = function toggleDisplay(value) {
+		if (typeof value !== "boolean" || this.display === value)
+			return;
+
+		this.display = value;
+		var display = this.display === true ? "block" : "none";
+		this.node.style.display = display;
+		this.object.style.display = display;
+	}
+
+	CssClass.prototype.toggleBorder = function toggleBorder(value) {
+		if (typeof value !== "boolean" || this.border === value)
+			return;
+
+		this.border = value;
+		var border = this.border === true ? "1px solid #CCC" : "none";
+		this.node.style.border = border;
+	}
+
+	CssClass.prototype.updateBgColor = function updateBgColor(color) {
+		this.bgcolor.copy(color);
+		this.node.style.backgroundColor = color.getColor();
+		OutputManager.updateProperty(this.id, 'background-color', color.getColor());
+	}
+
+	CssClass.prototype.updateShadows = function updateShadows() {
+		if (this.render.length === 0)
+			OutputManager.toggleProperty(this.id, 'box-shadow', false);
+		if (this.render.length === 1)
+			OutputManager.toggleProperty(this.id, 'box-shadow', true);
+
+		this.node.style.boxShadow = this.render.join(", ");
+		OutputManager.updateProperty(this.id, 'box-shadow', this.render.join(", \n"));
+
+	}
+
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+
+		var preview;
+		var classes = [];
+		var active = null;
+		var animate = false;
+
+		/*
+		 * Toll actions
+		 */
+		var addCssClass = function addCssClass(id) {
+			classes[id] = new CssClass(id);
+		}
+
+		var setActiveClass = function setActiveClass(id) {
+			active = classes[id];
+			active.shadowID = null;
+			ColoPicker.setColor(classes[id].bgcolor);
+			SliderManager.setValue("top", active.top);
+			SliderManager.setValue("left", active.left);
+			SliderManager.setValue("rotate", active.rotate);
+			SliderManager.setValue("z-index", active.zIndex);
+			SliderManager.setValue("width", active.width);
+			SliderManager.setValue("height", active.height);
+			ButtonManager.setValue("border-state", active.border);
+			active.updateShadows();
+		}
+
+		var disableClass = function disableClass(topic) {
+			classes[topic].toggleDisplay(false);
+			ButtonManager.setValue(topic, false);
+		}
+
+		var addShadow = function addShadow(position) {
+			if (animate === true)
+				return -1;
+
+			active.shadows.splice(position, 0, new Shadow());
+			active.render.splice(position, 0, null);
+		}
+
+		var swapShadow = function swapShadow(id1, id2) {
+			var x = active.shadows[id1];
+			active.shadows[id1] = active.shadows[id2];
+			active.shadows[id2] = x;
+			updateShadowCSS(id1);
+			updateShadowCSS(id2);
+		}
+
+		var deleteShadow = function deleteShadow(position) {
+			active.shadows.splice(position, 1);
+			active.render.splice(position, 1);
+			active.updateShadows();
+		}
+
+		var setActiveShadow = function setActiveShadow(id, glow) {
+			active.shadowID = id;
+			ColoPicker.setColor(active.shadows[id].color);
+			ButtonManager.setValue("inset", active.shadows[id].inset);
+			SliderManager.setValue("blur", active.shadows[id].blur);
+			SliderManager.setValue("spread", active.shadows[id].spread);
+			SliderManager.setValue("posX", active.shadows[id].posX);
+			SliderManager.setValue("posY", active.shadows[id].posY);
+			if (glow === true)
+				addGlowEffect(id);
+		}
+
+		var addGlowEffect = function addGlowEffect(id) {
+			if (animate === true)
+				return;
+
+			animate = true;
+			var store = new Shadow();
+			var shadow = active.shadows[id];
+
+			store.copy(shadow);
+			shadow.color.setRGBA(40, 125, 200, 1);
+			shadow.blur = 10;
+			shadow.spread = 10;
+
+			active.node.style.transition = "box-shadow 0.2s";
+			updateShadowCSS(id);
+
+			setTimeout(function() {
+				shadow.copy(store);
+				updateShadowCSS(id);
+				setTimeout(function() {
+					active.node.style.removeProperty("transition");
+					animate = false;
+				}, 100);
+			}, 200);
+		}
+
+		var updateActivePos = function updateActivePos(deltaX, deltaY) {
+			if (active.shadowID === null)
+				active.updatePos(deltaX, deltaY);
+			else
+				updateShadowPos(deltaX, deltaY);
+		}
+
+		/*
+		 * Shadow properties
+		 */
+		var updateShadowCSS = function updateShadowCSS(id) {
+			active.render[id] = active.shadows[id].computeCSS();
+			active.updateShadows();
+		}
+
+		var toggleShadowInset = function toggleShadowInset(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].toggleInset(value);
+			updateShadowCSS(active.shadowID);
+		}
+
+		var updateShadowPos = function updateShadowPos(deltaX, deltaY) {
+			var shadow = active.shadows[active.shadowID];
+			shadow.posX += deltaX;
+			shadow.posY += deltaY;
+			SliderManager.setValue("posX", shadow.posX);
+			SliderManager.setValue("posY", shadow.posY);
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowPosX = function setShadowPosX(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].posX = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowPosY = function setShadowPosY(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].posY = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowBlur = function setShadowBlur(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].blur = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowSpread = function setShadowSpread(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].spread = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var updateShadowColor = function updateShadowColor(color) {
+			active.shadows[active.shadowID].color.copy(color);
+			updateShadowCSS(active.shadowID);
+		}
+
+		/*
+		 * Element Properties
+		 */
+		var updateColor = function updateColor(color) {
+			if (active.shadowID === null)
+				active.updateBgColor(color);
+			else
+				updateShadowColor(color);
+		}
+
+		var init = function init() {
+			preview = getElemById("preview");
+
+			ColoPicker.subscribe("color", updateColor);
+			PreviewMouseTracking.subscribe(updateActivePos);
+
+			// Affects shadows
+			ButtonManager.subscribe("inset", toggleShadowInset);
+			SliderManager.subscribe("posX", setShadowPosX);
+			SliderManager.subscribe("posY", setShadowPosY);
+			SliderManager.subscribe("blur", setShadowBlur);
+			SliderManager.subscribe("spread", setShadowSpread);
+
+			// Affects element
+			SliderManager.subscribe("top", function(value){
+				active.setTop(value);
+			});
+			SliderManager.subscribe("left", function(value){
+				active.setLeft(value);
+			});
+			SliderManager.subscribe("rotate", function(value) {
+				if (active == classes["element"])
+					return;
+				active.setRotate(value);
+			});
+
+			SliderManager.subscribe("z-index", function(value) {
+				if (active == classes["element"])
+					return;
+				active.setzIndex(value);
+			});
+
+			SliderManager.subscribe("width", function(value) {
+				active.setWidth(value)
+			});
+
+			SliderManager.subscribe("height", function(value) {
+				active.setHeight(value)
+			});
+
+			// Actions
+			classes['before'].top = -30;
+			classes['before'].left = -30;
+			classes['after'].top = 30;
+			classes['after'].left = 30;
+			classes['before'].toggleDisplay(false);
+			classes['after'].toggleDisplay(false);
+			ButtonManager.setValue('before', false);
+			ButtonManager.setValue('after', false);
+
+			ButtonManager.subscribe("before", classes['before'].toggleDisplay.bind(classes['before']));
+			ButtonManager.subscribe("after", classes['after'].toggleDisplay.bind(classes['after']));
+
+			ButtonManager.subscribe("border-state", function(value) {
+				active.toggleBorder(value);
+			});
+
+		}
+
+		return {
+			init 			: init,
+			addShadow		: addShadow,
+			swapShadow		: swapShadow,
+			addCssClass		: addCssClass,
+			disableClass	: disableClass,
+			deleteShadow	: deleteShadow,
+			setActiveClass	: setActiveClass,
+			setActiveShadow : setActiveShadow
+		}
+
+	})();
+
+	/**
+	 * Layer Manager
+	 */
+	var LayerManager = (function LayerManager() {
+		var stacks = [];
+		var active = {
+			node : null,
+			stack : null
+		}
+		var elements = {};
+
+		var mouseEvents = function mouseEvents(e) {
+			var node = e.target;
+			var type = node.getAttribute('data-type');
+
+			if (type === 'subject')
+				setActiveStack(stacks[node.id]);
+
+			if (type === 'disable') {
+				Tool.disableClass(node.parentNode.id);
+				setActiveStack(stacks['element']);
+			}
+
+			if (type === 'add')
+				active.stack.addLayer();
+
+			if (type === 'layer')
+				active.stack.setActiveLayer(node);
+
+			if (type === 'delete')
+				active.stack.deleteLayer(node.parentNode);
+
+			if (type === 'move-up')
+				active.stack.moveLayer(1);
+
+			if (type === 'move-down')
+				active.stack.moveLayer(-1);
+		}
+
+		var setActiveStack = function setActiveStack(stackObj) {
+			active.stack.hide();
+			active.stack = stackObj;
+			active.stack.show();
+		}
+
+		/*
+		 * Stack object
+		 */
+		var Stack = function Stack(subject) {
+			var S = document.createElement('div');
+			var title = document.createElement('div');
+			var stack = document.createElement('div');
+
+			S.className = 'container';
+			stack.className = 'stack';
+			title.className = 'title';
+			title.textContent = subject.getAttribute('data-title');
+			S.appendChild(title);
+			S.appendChild(stack);
+
+			this.id = subject.id;
+			this.container = S;
+			this.stack = stack;
+			this.subject = subject;
+			this.order = [];
+			this.uid = 0;
+			this.count = 0;
+			this.layer = null;
+			this.layerID = 0;
+		}
+
+		Stack.prototype.addLayer = function addLayer() {
+			if (Tool.addShadow(this.layerID) == -1)
+				return;
+
+			var uid = this.getUID();
+			var layer = this.createLayer(uid);
+
+			if (this.layer === null &amp;&amp; this.stack.children.length &gt;= 1)
+				this.layer = this.stack.children[0];
+
+			this.stack.insertBefore(layer, this.layer);
+			this.order.splice(this.layerID, 0, uid);
+			this.count++;
+			this.setActiveLayer(layer);
+		}
+
+		Stack.prototype.createLayer = function createLayer(uid) {
+			var layer = document.createElement('div');
+			var del = document.createElement('span');
+
+			layer.className = 'node';
+			layer.setAttribute('data-shid', uid);
+			layer.setAttribute('data-type', 'layer');
+			layer.textContent = 'Ombre ' + uid;
+
+			del.className = 'delete';
+			del.setAttribute('data-type', 'delete');
+
+			layer.appendChild(del);
+			return layer;
+		}
+
+		Stack.prototype.getUID = function getUID() {
+			return this.uid++;
+		}
+
+		// SOLVE IE BUG
+		Stack.prototype.moveLayer = function moveLayer(direction) {
+			if (this.count &lt;= 1 || this.layer === null)
+				return;
+			if (direction === -1 &amp;&amp; this.layerID === (this.count - 1) )
+				return;
+			if (direction === 1 &amp;&amp; this.layerID === 0 )
+				return;
+
+			if (direction === -1) {
+				var before = null;
+				Tool.swapShadow(this.layerID, this.layerID + 1);
+				this.swapOrder(this.layerID, this.layerID + 1);
+				this.layerID += 1;
+
+				if (this.layerID + 1 !== this.count)
+					before = this.stack.children[this.layerID + 1];
+
+				this.stack.insertBefore(this.layer, before);
+				Tool.setActiveShadow(this.layerID, false);
+			}
+
+			if (direction === 1) {
+				Tool.swapShadow(this.layerID, this.layerID - 1);
+				this.swapOrder(this.layerID, this.layerID - 1);
+				this.layerID -= 1;
+				this.stack.insertBefore(this.layer, this.stack.children[this.layerID]);
+				Tool.setActiveShadow(this.layerID, false);
+			}
+		}
+
+		Stack.prototype.swapOrder = function swapOrder(pos1, pos2) {
+			var x = this.order[pos1];
+			this.order[pos1] = this.order[pos2];
+			this.order[pos2] = x;
+		}
+
+		Stack.prototype.deleteLayer = function deleteLayer(node) {
+			var shadowID =  node.getAttribute('data-shid') | 0;
+			var index = this.order.indexOf(shadowID);
+			this.stack.removeChild(this.stack.children[index]);
+			this.order.splice(index, 1);
+			this.count--;
+
+			Tool.deleteShadow(index);
+
+			if (index &gt; this.layerID)
+				return;
+
+			if (index == this.layerID) {
+				if (this.count &gt;= 1) {
+					this.layerID = 0;
+					this.setActiveLayer(this.stack.children[0], true);
+				}
+				else {
+					this.layer = null;
+					this.show();
+				}
+			}
+
+			if (index &lt; this.layerID) {
+				this.layerID--;
+				Tool.setActiveShadow(this.layerID, true);
+			}
+
+		}
+
+		Stack.prototype.setActiveLayer = function setActiveLayer(node) {
+			elements.shadow_properties.style.display = 'block';
+			elements.element_properties.style.display = 'none';
+
+			if (this.layer)
+				this.layer.removeAttribute('data-active');
+
+			this.layer = node;
+			this.layer.setAttribute('data-active', 'layer');
+
+			var shadowID =  node.getAttribute('data-shid') | 0;
+			this.layerID = this.order.indexOf(shadowID);
+			Tool.setActiveShadow(this.layerID, true);
+		}
+
+		Stack.prototype.unsetActiveLayer = function unsetActiveLayer() {
+			if (this.layer)
+				this.layer.removeAttribute('data-active');
+
+			this.layer = null;
+			this.layerID = 0;
+		}
+
+		Stack.prototype.hide = function hide() {
+			this.unsetActiveLayer();
+			this.subject.removeAttribute('data-active');
+			var style = this.container.style;
+			style.left = '100%';
+			style.zIndex = '0';
+		}
+
+		Stack.prototype.show = function show() {
+			elements.shadow_properties.style.display = 'none';
+			elements.element_properties.style.display = 'block';
+
+			if (this.id === 'element') {
+				elements.zIndex.style.display = 'none';
+				elements.transform_rotate.style.display = 'none';
+			}
+			else {
+				elements.zIndex.style.display = 'block';
+				elements.transform_rotate.style.display = 'block';
+			}
+
+			this.subject.setAttribute('data-active', 'subject');
+			var style = this.container.style;
+			style.left = '0';
+			style.zIndex = '10';
+			Tool.setActiveClass(this.id);
+		}
+
+		function init() {
+
+			var elem, size;
+			var layerManager = getElemById("layer_manager");
+			var layerMenu = getElemById("layer_menu");
+			var container = getElemById("stack_container");
+
+			elements.shadow_properties = getElemById('shadow_properties');
+			elements.element_properties = getElemById('element_properties');
+			elements.transform_rotate = getElemById('transform_rotate');
+			elements.zIndex = getElemById('z-index');
+
+			elem = document.querySelectorAll('#layer_menu [data-type="subject"]');
+			size = elem.length;
+
+			for (var i = 0; i &lt; size; i++) {
+				var S = new Stack(elem[i]);
+				stacks[elem[i].id] = S;
+				container.appendChild(S.container);
+				Tool.addCssClass(elem[i].id);
+			}
+
+			active.stack = stacks['element'];
+			stacks['element'].show();
+
+			layerManager.addEventListener("click", mouseEvents);
+			layerMenu.addEventListener("click", mouseEvents);
+
+			ButtonManager.subscribe("before", function(value) {
+				if (value === false &amp;&amp; active.stack === stacks['before'])
+					setActiveStack(stacks['element'])
+				if (value === true &amp;&amp; active.stack !== stacks['before'])
+					setActiveStack(stacks['before'])
+			});
+
+			ButtonManager.subscribe("after", function(value) {
+				if (value === false &amp;&amp; active.stack === stacks['after'])
+					setActiveStack(stacks['element'])
+				if (value === true &amp;&amp; active.stack !== stacks['after'])
+					setActiveStack(stacks['after'])
+			});
+		}
+
+		return {
+			init : init
+		}
+	})();
+
+	/*
+	 * OutputManager
+	 */
+	var OutputManager = (function OutputManager() {
+		var classes = [];
+		var buttons = [];
+		var active = null;
+		var menu = null;
+		var button_offset = 0;
+
+		var crateOutputNode = function(topic, property) {
+
+			var prop = document.createElement('div');
+			var name = document.createElement('span');
+			var value = document.createElement('span');
+
+			var pmatch = property.match(/(^([a-z0-9\-]*)=\[([a-z0-9\-\"]*)\])|^([a-z0-9\-]*)/i);
+
+			name.textContent = '\t' + pmatch[4];
+
+			if (pmatch[3] !== undefined) {
+				name.textContent = '\t' + pmatch[2];
+				value.textContent = pmatch[3] + ';';
+			}
+
+			name.textContent += ': ';
+			prop.className = 'css-property';
+			name.className = 'name';
+			value.className = 'value';
+			prop.appendChild(name);
+			prop.appendChild(value);
+
+			classes[topic].node.appendChild(prop);
+			classes[topic].line[property] = prop;
+			classes[topic].prop[property] = value;
+		}
+
+		var OutputClass = function OutputClass(node) {
+			var topic = node.getAttribute('data-topic');
+			var prop = node.getAttribute('data-prop');
+			var name = node.getAttribute('data-name');
+			var properties = prop.split(' ');
+
+			classes[topic] = {};
+			classes[topic].node = node;
+			classes[topic].prop = [];
+			classes[topic].line = [];
+			classes[topic].button = new Button(topic);
+
+			var open_decl = document.createElement('div');
+			var end_decl = document.createElement('div');
+
+			open_decl.textContent = name + ' {';
+			end_decl.textContent = '}';
+			node.appendChild(open_decl);
+
+			for (var i in properties)
+				crateOutputNode(topic, properties[i]);
+
+			node.appendChild(end_decl);
+		}
+
+		var Button = function Button(topic) {
+			var button = document.createElement('div');
+
+			button.className = 'button';
+			button.textContent = topic;
+			button.style.left = button_offset + 'px';
+			button_offset += 100;
+
+			button.addEventListener("click", function() {
+				toggleDisplay(topic);
+			})
+
+			menu.appendChild(button);
+			return button;
+		}
+
+		var toggleDisplay = function toggleDisplay(topic) {
+			active.button.removeAttribute('data-active');
+			active.node.style.display = 'none';
+			active = classes[topic];
+			active.node.style.display = 'block';
+			active.button.setAttribute('data-active', 'true');
+		}
+
+		var toggleButton = function toggleButton(topic, value) {
+			var display = (value === true) ? 'block' : 'none';
+			classes[topic].button.style.display = display;
+
+			if (value === true)
+				toggleDisplay(topic);
+			else
+				toggleDisplay('element');
+		}
+
+		var updateProperty = function updateProperty(topic, property, data) {
+			try {
+				classes[topic].prop[property].textContent = data + ';';
+			}
+			catch(error) {
+				// console.log("ERROR undefined : ", topic, property, data);
+			}
+		}
+
+		var toggleProperty = function toggleProperty(topic, property, value) {
+			var display = (value === true) ? 'block' : 'none';
+			try {
+				classes[topic].line[property].style.display = display;
+			}
+			catch(error) {
+				// console.log("ERROR undefined : ",classes, topic, property, value);
+			}
+		}
+
+		var init = function init() {
+
+			menu = getElemById('menu');
+
+			var elem = document.querySelectorAll('#output .output');
+			var size = elem.length;
+			for (var i = 0; i &lt; size; i++)
+				OutputClass(elem[i]);
+
+			active = classes['element'];
+			toggleDisplay('element');
+
+			ButtonManager.subscribe("before", function(value) {
+				toggleButton('before', value);
+			});
+
+			ButtonManager.subscribe("after", function(value) {
+				toggleButton('after', value);
+			});
+		}
+
+		return {
+			init : init,
+			updateProperty : updateProperty,
+			toggleProperty : toggleProperty
+		}
+
+	})();
+
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		ButtonManager.init();
+		OutputManager.init();
+		ColoPicker.init();
+		SliderManager.init();
+		LayerManager.init();
+		PreviewMouseTracking.init("preview");
+		Tool.init();
+	}
+
+	return {
+		init : init
+	}
+
+})();
+
+
+</code></pre>
+</div>
+
+<div>{{EmbedLiveSample('box-shadow_generator', '100%', '1100px', '')}}</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://cssgenerator.org/box-shadow-css-generator.html">Le générateur d'ombres CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/modèle_de_boîte_css/index.html b/files/fr/web/css/modèle_de_boîte_css/index.html
new file mode 100644
index 0000000000..3bc62c03f1
--- /dev/null
+++ b/files/fr/web/css/modèle_de_boîte_css/index.html
@@ -0,0 +1,115 @@
+---
+title: Modèle de boîte
+slug: Web/CSS/Modèle_de_boîte_CSS
+tags:
+  - Aperçu
+  - CSS
+  - CSS Box Model
+  - Overview
+  - Reference
+translation_of: Web/CSS/CSS_Box_Model
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>Le modèle de boîte CSS</strong> (<em>Basic Box Model</em> en anglais) est un module CSS qui définit les boîtes rectangulaires (y compris leurs zones de remplissage (<em>padding</em>) et de marges) qui sont générées pour disposer les éléments selon leur modèle de mise en forme visuelle.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<h4 id="Les_propriétés_qui_définissent_le_flux_du_contenu_dans_une_boîte">Les propriétés qui définissent le flux du contenu dans une boîte</h4>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("overflow")}}</li>
+ <li>{{cssxref("overflow-x")}}</li>
+ <li>{{cssxref("overflow-y")}}</li>
+</ul>
+</div>
+
+<h4 id="Les_propriétés_qui_définissent_la_taille_d'une_boîte">Les propriétés qui définissent la taille d'une boîte</h4>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("height")}}</li>
+ <li>{{cssxref("width")}}</li>
+ <li>{{cssxref("max-height")}}</li>
+ <li>{{cssxref("max-width")}}</li>
+ <li>{{cssxref("min-height")}}</li>
+ <li>{{cssxref("min-width")}}</li>
+</ul>
+</div>
+
+<h4 id="Les_propriétés_qui_définissent_les_marges_d'une_boîte">Les propriétés qui définissent les marges d'une boîte</h4>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("margin")}}</li>
+ <li>{{cssxref("margin-bottom")}}</li>
+ <li>{{cssxref("margin-left")}}</li>
+ <li>{{cssxref("margin-right")}}</li>
+ <li>{{cssxref("margin-top")}}</li>
+ <li>{{CSSxRef("margin-trim")}} {{Experimental_Inline}}</li>
+</ul>
+</div>
+
+<h4 id="Les_propriétés_qui_définissent_le_remplissage_(padding)_d'une_boîte">Les propriétés qui définissent le remplissage (<em>padding</em>) d'une boîte</h4>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("padding")}}</li>
+ <li>{{cssxref("padding-bottom")}}</li>
+ <li>{{cssxref("padding-left")}}</li>
+ <li>{{cssxref("padding-right")}}</li>
+ <li>{{cssxref("padding-top")}}</li>
+</ul>
+</div>
+
+<h4 id="Les_autres_propriétés">Les autres propriétés</h4>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("box-shadow")}}</li>
+ <li>{{cssxref("visibility")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">Une introduction au modèle de boîte CSS</a></dt>
+ <dd>Cet article explique un des concepts clé de CSS : le modèle de boîte. Il définit notamment les notions de marge, de remplissage (<em>padding</em>) ainsi que les différentes zones qui forment une boîte.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Fusion_des_marges">Maîtriser la fusion des marges</a></dt>
+ <dd>Dans certains cas, deux marges adjacentes sont fusionnées en une seule. Cet article explique quand cela se produit et comment contrôler ce comportement.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Modèle_de_mise_en_forme_visuelle">Le modèle de mise en forme visuel</a></dt>
+ <dd>Cet article explique le modèle de mise en forme visuel.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Box")}}</td>
+   <td>{{Spec2("CSS3 Box")}}</td>
+   <td>Added <code>margin-trim</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "box.html")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1")}}</td>
+   <td>{{Spec2("CSS1")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/css/modèle_de_mise_en_forme_visuelle/index.html b/files/fr/web/css/modèle_de_mise_en_forme_visuelle/index.html
new file mode 100644
index 0000000000..d9ac8b3f09
--- /dev/null
+++ b/files/fr/web/css/modèle_de_mise_en_forme_visuelle/index.html
@@ -0,0 +1,179 @@
+---
+title: Modèle de mise en forme visuelle
+slug: Web/CSS/Modèle_de_mise_en_forme_visuelle
+tags:
+  - CSS
+  - Intermédiaire
+  - NeedsUpdate
+translation_of: Web/CSS/Visual_formatting_model
+---
+<div>{{CSSRef}}</div>
+
+<p>En CSS, le modèle de mise en forme visuelle est un algorithme qui traite un document afin de l'afficher sur un support visuel. Chaque élément du document est ainsi transformé en zéro, une ou plusieurs boîtes qui s'inscrivent dans <a href="/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte">le modèle de boîtes CSS</a>. La disposition de chaque boîte est dictée par :</p>
+
+<ul>
+ <li>Les dimensions de la boîte qui peuvent être définies explicitement, contraintes ou non</li>
+ <li>Le type de la boîte : en ligne, en ligne et de niveau (<em>inline-level</em>), atomique, en bloc</li>
+ <li>Le mode de positionnement : dans le flux normal, en flottement ou positionnée de façon absolue</li>
+ <li>Les autres éléments présents dans l'arbre du document et notamment ses enfants et ses voisins</li>
+ <li>La taille et la position de la zone d'affichage (<em>viewport</em>)</li>
+ <li>Les dimensions intrinsèques des images qu'elle contient</li>
+ <li>Éventuellement d'autres informations externes.</li>
+</ul>
+
+<p>Le modèle affiche une boîte par rapport au bord du bloc qui la contient. Généralement, une boîte devient le bloc contenant pour ses éléments descendants. Toutefois, une boîte n'est pas contrainte dans son bloc contenant, le contenu d'une boîte peut parfois dépasser (ce qu'on appelle en anglais <em>overflow</em>).</p>
+
+<h2 id="Génération_de_la_boîte">Génération de la boîte</h2>
+
+<p>Lors de cette étape, on crée les boîtes à partir des éléments du document. Les boîtes générées sont de différents types et ces types ont un impact sur la mise en forme visuelle. Le type de boîte générée dépend de la valeur de la propriété {{cssxref("display")}}.</p>
+
+<h3 id="Les_éléments_de_bloc_et_les_boîtes_de_bloc">Les éléments de bloc et les boîtes de bloc</h3>
+
+<p>Un élément est dit « de bloc » lorsque <a href="/fr/docs/Web/CSS/Valeur_calculée">la valeur calculée</a> de la propriété {{cssxref("display")}} qui lui est appliquée vaut : <code>block</code>, <code>list-item</code> ou <code>table</code>. Un élément de bloc est représenté sous la forme d'un bloc (comme un paragraphe par exemple) et les blocs sont empilés verticalement les uns sur les autres.</p>
+
+<p>Chaque boîte de bloc contribue au <a href="/fr/docs/Web/CSS/Block_formatting_context">contexte de mise en forme des blocs</a>. Chaque élément de bloc génère au moins une boîte de niveau bloc, qu'on appelle la boîte de bloc principale. Certains éléments (comme les éléments d'une liste par exemple) génèrent d'autres boîtes afin de gérer les puces ou d'autres éléments typographiques.</p>
+
+<p>La boîte de bloc principale contient les boîtes générées par les descendants ete le contenu généré. Cette boîte participe au schéma de positionnement.</p>
+
+<p><img alt="venn_blocks.png" class="internal lwrap" src="/@api/deki/files/5995/=venn_blocks.png"></p>
+
+<p>Une boîte de bloc peut également un conteneur de blocs. Un conteneur de blocs est une boîte qui ne contient que d'autres boîtes de bloc ou qui crée un contexte de formatage en ligne et qui ne contient alors que des boîtes en ligne. Attention, les notions de boîtes de bloc et de conteneurs de blocs ne sont pas identiques. La première décrit la façon dont la boîte se comporte avec ses parents et ses voisins et le seconde définit la façon dont elle interagit avec ses descendants. Certaines boîtes de blocs, telles que les tableaux, ne sont pas des conteneurs de blocs. Réciproquement, certains conteneurs de blocs (tels que les cellules de tableau non remplacées) ne sont pas des boîtes de bloc.</p>
+
+<p>Les boîtes de bloc qui sont également des conteneurs de blocs sont appelées des boîtes-bloc.</p>
+
+<h4 id="Les_boîtes_de_bloc_anonymes">Les boîtes de bloc anonymes</h4>
+
+<p>Dans certains cas, l'algorithme doit ajouter certaines boîtes supplémentaires. Or, les sélecteurs CSS ne permettent pas de mettre en forme ou de nommer ces boîtes, elles sont donc appelées boîtes de bloc <em>anonymes</em>.</p>
+
+<p>Les sélecteurs ne permettent pas de manipuler la mise en forme de ces boîtes. Aussi, pour ces boîtes, toutes les propriétés CSS utilisant l'héritage auront la valeur {{cssxref("inherit")}} et toutes les propriétés CSS qui ne sont pas héritées auront la valeur <code>initial</code>.</p>
+
+<p>Les boîtes qui contiennent des blocs ne contiennent que des boîtes en ligne ou que des boîtes en blocs. Mais souvent, le document contient un mélange des deux. Dans ces cas, des boîtes de bloc anonymes sont créées autour des boîtes en lignes adjacentes.</p>
+
+<p>Si on prend le code HTML suivant, mis en forme avec les règles par défaut (<code>display:block</code>) :</p>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+   Some inline text
+   &lt;p&gt;followed by a paragraph&lt;/p&gt;
+   followed by more inline text.
+&lt;/div&gt;
+</pre>
+
+<p>On aura deux boîtes de bloc anonymes qui seront créées : une pour le texte avant le paragraphe et une pour le texte après. On aura alors la structure suivante :<br>
+   <img alt="anonymous_block-level_boxes.png" src="/@api/deki/files/5996/=anonymous_block-level_boxes.png"></p>
+
+<p>À la différence de la boîte des éléments {{HTMLElement("p")}}, les développeurs ne peuvent pas contrôler la mise en forme des boîtes anonymes. Les propriétés qui héritent des éléments parents récupèreront la valeur obtenue pour l'élément {{HTMLElement("div")}} et les autres propriétés auront la valeur <code>initial</code>.</p>
+
+<p>Un autre scénario peut amener à la création de boîtes de bloc anonyme : lorsqu'une boîte en ligne contient une ou plusieurs boîtes de bloc. Dans ce cas, la boîte qui contient la boîte de bloc est divisée en deux boîtes en ligne : une avant et une après la boîte de bloc. Toutes les boîtes en ligne avant la boîte de bloc sont englobées dans une boîte de bloc anonyme et il en va de même pour les boîtes en ligne qui suivent la boîte de bloc. Aussi, la boîte de bloc devient un voisin de deux boîtes de bloc anonymes qui contiennent les éléments en ligne.</p>
+
+<p>S'il y a plusieurs boîtes de bloc sans contenu en ligne entre elles, les boîtes de bloc anonymes sont créées avant et après ces boîtes.</p>
+
+<p>Si on prend le code HTML suivant, pour lequel {{HTMLElement("p")}} aura <code>display:inline</code> et {{HTMLElement("span")}} aura <code>display:block</code> :</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;
+  Some &lt;em&gt;inline&lt;/em&gt; text
+  &lt;span&gt;followed by a paragraph&lt;/span&gt;
+  followed by more inline text.
+&lt;/p&gt;</pre>
+
+<p>Deux boîtes de bloc anonymes sont créées : une pour le texte avant l'élément <code>&lt;span&gt;</code> et une pour le texte qui suit cet élément. On a alors la structure suivante :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13625/anonymous_block_box_break.png" style="height: 137px; width: 597px;"></p>
+
+<h3 id="Les_éléments_en_ligne_et_les_boîtes_en_ligne">Les éléments en ligne et les boîtes en ligne</h3>
+
+<p>Un élément est dit « en ligne » lorsque la valeur de sa propriété CSS {{cssxref("display")}} vaut : <code>inline</code>, <code>inline-block</code> ou <code>inline-table</code>. Visuellement, un tel élément est organisé sur des lignes qui se suivent les unes les autres avec d'autre contenu en ligne. Généralement, il s'agit du contenu d'un paragraphe (éventuellement mis en forme).</p>
+
+<p>Les éléments en ligne génèrent des boîtes en lignes qui contribuent <a href="/fr/docs/CSS/Inline_formatting_context">au contexte de mise en forme en ligne</a>.</p>
+
+<p>Les boîtes en lignes atomiques ne peuvent pas être divisées en plusieurs lignes au sein d'un contexte de mise en forme.</p>
+
+<pre class="brush: html notranslate">&lt;style&gt;
+  span {
+    /* La valeur par défaut */
+    display:inline;
+  }
+&lt;/style&gt;
+&lt;div style="width:20em;"&gt;
+   Le texte dans le span &lt;span&gt;peut être divisé
+   en plusieurs lignes&lt;/span&gt; dans une boîte en
+   ligne.
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: html notranslate">&lt;style&gt;
+  span {
+    display:inline-block;
+  }
+&lt;/style&gt;
+&lt;div style="width:20em;"&gt;
+   Le texte dans le span &lt;span&gt;ne peut pas être
+   divisé en plusieurs lignes car&lt;/span&gt; il est
+   dans une boîte de type inline-block.
+&lt;/div&gt;
+</pre>
+
+<h4 id="Les_boîtes_en_ligne_anonymes">Les boîtes en ligne anonymes</h4>
+
+<p>Comme pour les boîtes de bloc, il existe quelques cas pour lesquels des boîtes en lignes sont automatiquement créées par le moteur CSS. Ces boîtes en ligne sont également anonymes et ne peuvent être ciblées par les sélecteurs. Pour les propriétés qui fonctionnent avec l'héritage, ces boîtes hériteront de la valeur de la propriété <code>relative</code> à l'élément parent, pour les autres, elles vaudront <code>initial</code>.</p>
+
+<p>La plupart du temps, une boîte en ligne anonyme est créée lorsque du texte se trouve être un enfant direct d'une boîte en bloc, ce qui crée un contexte de mise en forme en ligne. Dans ce cas, le texte est inclus dans la plus grande boîte en ligne qui puisse être et c'est cette boîte qui est la boîte anonyme. Par ailleurs, le contenu blanc qui serait retiré par la propriété {{cssxref("white-space")}} ne génère pas de boîtes en ligne car celles-ci seraient vides.</p>
+
+<h3 id="Les_autres_types_de_boîte">Les autres types de boîte</h3>
+
+<h4 id="Les_boîtes_de_ligne">Les boîtes de ligne</h4>
+
+<p><em>Les boîtes de ligne</em> sont générées dans un contexte de mise en forme en ligne afin de représenter une ligne de texte. Au sein d'une boîte en bloc, un boîte de ligne s'étend d'un bord à l'autre de la boîte. Lorsqu'il y a une disposition flottante, la boîte de ligne démarre au bord le plus à droite de la partie flottante qui est située à gauche et finit à la droite du bord gauche suivant.</p>
+
+<p>Ces boîtes sont uniquement utilisées par le moteur et les développeurs web ne devraient pas avoir à s'en préoccuper.</p>
+
+<h4 id="Les_types_de_boîtes_liés_au_modèle_CSS">Les types de boîtes liés au modèle CSS</h4>
+
+<p>En plus des boîtes en ligne et des boîtes de bloc, CSS définit plusieurs autres modèles de contenu qui peuvent être appliqués aux éléments. Ces modèles définissent des types de boîtes supplémentaires :</p>
+
+<ul>
+ <li>Le modèle de contenu pour les tableaux utilise des boîtes englobant les tableaux, des boîtes de tableau et des boîtes de légende</li>
+ <li>Le modèle de contenu à plusieurs colonnes permet de créer des boîtes de colonne entre la boîte englobante et le contenu<em>.</em></li>
+ <li>Les modèles de contenu expérimentaux en grille (<em>CSS Grid</em>) ou avec les boîtes flexibles (<em>flexbox</em>) définissent d'autres types de boîtes.</li>
+</ul>
+
+<h2 id="Modes_de_positionnement">Modes de positionnement</h2>
+
+<p>Une fois les boîtes générées, le moteur CSS doit les disposer les unes par rapport aux autres. Pour ce faire, il utilise un des algorithmes suivants :</p>
+
+<ul>
+ <li>Le mode de positionnement normal positionne les boîtes les unes après les autres</li>
+ <li>Le mode de positionnement flottant permet d'extraire une boîte du flux normal et de la placer sur le côté de la boîte englobante</li>
+ <li>Le mode de positionnement absolu permet de placer une boîte dans un système de coordonnées absolues, basée sur l'élément englobant. Un élément positionné de façon absolue peut recouvrir d'autres éléments.</li>
+</ul>
+
+<h3 id="Le_mode_normal">Le mode normal</h3>
+
+<p>Dans le mode de positionnement normal, les boîtes sont disposées les unes après les autres. Pour un contexte de mise en forme de bloc, elles seront empilées verticalement et pour un contexte de mise en forme en ligne, elles se suivront horizontalement. Le mode de disposition normal est déclenché lorsque la propriété CSS {{cssxref("position")}} vaut <code>static</code> ou <code>relative</code> et si la propriété CSS {{cssxref("float")}} vaut <code>none</code>.</p>
+
+<p>On a deux cas de figure pour le mode normal : le positionnement statique et le positionnement relatif.</p>
+
+<ul>
+ <li>En positionnement statique (obtenu avec la valeur <code>static</code> pour la propriété {{cssxref("position")}}), les boîtes sont dessinées à l'emplacement exact dicté par le flux normal.</li>
+ <li>En positionnement relatif (obtenu lorsque la propriété {{cssxref("position")}} vaut <code>relative</code>), les boîtes sont dessinées avec un décalage défini par les propriétés {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}}.</li>
+</ul>
+
+<h3 id="Le_mode_flottant">Le mode flottant</h3>
+
+<p>Avec le mode de positionnement flottant, certaines boîtes sont placées au début ou à la fin de ligne courante. Le texte (et tout ce qui se trouve dans le flux normal) épouse donc le contour des boîtes flottantes (sauf si la propriété {{cssxref("clear")}} dicte un autre comportement).</p>
+
+<p>Pour qu'une boîte soit une boîte flottante, on utilisera la propriété {{cssxref("float")}} avec une valeur différente de <code>none</code> et la propriété {{cssxref("position")}} avec <code>static</code> ou <code>relative</code>. Si {{cssxref("float")}} vaut <code>left</code>, la boîte flottante sera positionnée au début de la ligne de la boîte englobante et si elle vaut <code>right</code>, elle sera à la fin de la ligne.</p>
+
+<h3 id="Le_mode_absolu">Le mode absolu</h3>
+
+<p>En mode absolu, les boîtes sont entièrement retirées du flux normal et n'interagissent plus avec le flux. Elles sont positionnées de façon relative à leur bloc englobant grâce aux propriétés {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}}.</p>
+
+<p>Un élément est positionné de façon absolue lorsque la propriété {{cssxref("position")}} vaut <code>absolute</code> ou <code>fixed</code>.</p>
+
+<p>Pour un élément positionné de façon fixe, le bloc englobant sera la zone d'affichage (<em>viewport</em>) et la position de l'élément est absolue par rapport à la zone d'affichage. Faire défiler le contenu ne modifie pas la position de l'élément.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Reference">La référence CSS</a></li>
+ <li>{{css_key_concepts}}</li>
+</ul>
diff --git a/files/fr/web/css/motion_path/index.html b/files/fr/web/css/motion_path/index.html
new file mode 100644
index 0000000000..e6740d2023
--- /dev/null
+++ b/files/fr/web/css/motion_path/index.html
@@ -0,0 +1,54 @@
+---
+title: Motion Path
+slug: Web/CSS/Motion_Path
+tags:
+  - Aperçu
+  - CSS
+  - Experimental
+  - Motion Path
+  - Reference
+translation_of: Web/CSS/CSS_Motion_Path
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><em><strong>Motion Path</strong></em> est un module de la spécification CSS qui permet aux auteurs d'animer des objets graphiques le long d'une ligne appelée <em>chemin</em>.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("offset")}}</li>
+ <li>{{cssxref("offset-distance")}}</li>
+ <li>{{cssxref("offset-path")}}</li>
+ <li>{{cssxref("offset-rotate")}}</li>
+</ul>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Spécification</th>
+   <th>État</th>
+   <th>Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Motion Path Level 1')}}</td>
+   <td>{{Spec2('Motion Path Level 1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<h3 id="offset"><code>offset</code></h3>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.offset")}}</p>
diff --git a/files/fr/web/css/média_paginés/index.html b/files/fr/web/css/média_paginés/index.html
new file mode 100644
index 0000000000..9d114b8e9b
--- /dev/null
+++ b/files/fr/web/css/média_paginés/index.html
@@ -0,0 +1,20 @@
+---
+title: Médias paginés
+slug: Web/CSS/Média_paginés
+tags:
+  - CSS
+  - Reference
+translation_of: Web/CSS/Paged_Media
+---
+<div>{{CSSRef}}</div>
+
+<p>Les propriétés des médias paginés contrôlent la présentation du contenu imprimable ou de tout autre média dont le contenu est divisé en pages individuelles. Elles permettent de définir des sauts de page, de contrôler la zone d'impression, de donner des styles différents aux pages gauche et droite et de contrôler l'application des césures à l'intérieur des éléments. Voici quelques-unes des propriétés supportées les plus fréquemment utilisées :</p>
+
+<ul>
+ <li>{{cssxref("page-break-before")}}</li>
+ <li>{{cssxref("page-break-after")}}</li>
+ <li>{{cssxref("page-break-inside")}}</li>
+ <li>{{cssxref("orphans")}}</li>
+ <li>{{cssxref("widows")}}</li>
+ <li>{{cssxref("@page")}}</li>
+</ul>
diff --git a/files/fr/web/css/none/index.html b/files/fr/web/css/none/index.html
new file mode 100644
index 0000000000..a638a00c93
--- /dev/null
+++ b/files/fr/web/css/none/index.html
@@ -0,0 +1,42 @@
+---
+title: none
+slug: Web/CSS/none
+tags:
+  - CSS
+  - Référence CSS
+translation_of: Web/CSS/float
+---
+<p>{{ CSSRef() }}</p>
+<h2 id="Résumé">Résumé</h2>
+<p><code>none</code> est une valeur commune pour la plupart des propriétés CSS et souvent c'est la valeur par défaut. On peut la comparer à la valeur {{ Cssxref("normal") }} qui peut être utilisée de manière similaire pour d'autres propriétés.</p>
+<h2 id="Utilisation">Utilisation</h2>
+<div class="warning">
+  Cette liste n'est pas exhaustive et les propriétés qui ne sont pas encore supportées par les différents navigateurs ne sont pas incluses.</div>
+<ul>
+  <li>{{ Cssxref("animation-name") }}</li>
+  <li>{{ Cssxref("background-image") }}</li>
+  <li>{{ Cssxref("border-style") }} ({{ Cssxref("border-bottom-style") }}, {{ Cssxref("border-left-style") }}, {{ Cssxref("border-right-style") }} et {{ Cssxref("border-top-style") }}</li>
+  <li>{{ Cssxref("clear") }}</li>
+  <li>{{ Cssxref("content") }}</li>
+  <li>{{ Cssxref("display") }}</li>
+  <li>{{ Cssxref("float") }}</li>
+  <li>{{ Cssxref("font-size-adjust") }}</li>
+  <li>{{ Cssxref("list-style-image") }}</li>
+  <li>{{ Cssxref("list-style-type") }}</li>
+  <li>{{ Cssxref("max-height") }}</li>
+  <li>{{ Cssxref("max-width") }}</li>
+  <li>{{ Cssxref("outline-style") }}</li>
+  <li>{{ Cssxref("quotes") }}</li>
+  <li>{{ Cssxref("resize") }}</li>
+  <li>{{ Cssxref("text-decoration") }}</li>
+  <li>{{ Cssxref("text-transform") }}</li>
+</ul>
+<p><u><strong>Extensions Mozilla :</strong></u></p>
+<ul>
+  <li>{{ Cssxref("-moz-transform") }}</li>
+  <li>{{ Cssxref("-moz-transition-property") }}</li>
+  <li>{{ Cssxref("-moz-text-blink") }}</li>
+  <li>{{ Cssxref("-moz-user-input") }}</li>
+  <li>{{ Cssxref("-moz-user-select") }}</li>
+  <li>{{ Cssxref("-moz-window-shadow") }}</li>
+</ul>
diff --git a/files/fr/web/css/normal/index.html b/files/fr/web/css/normal/index.html
new file mode 100644
index 0000000000..a0647d35ac
--- /dev/null
+++ b/files/fr/web/css/normal/index.html
@@ -0,0 +1,35 @@
+---
+title: normal
+slug: Web/CSS/normal
+tags:
+  - CSS
+  - Référence CSS
+translation_of: Web/CSS/font-variant
+---
+<p>{{ CSSRef() }}</p>
+<h2 id="Résumé">Résumé</h2>
+<p><code>normal</code> est une valeur commune pour certaines propriétés CSS et souvent c'est la valeur par défaut. On peut la comparer à la valeur {{ Cssxref("none") }} qui peut être utilisée de manière similaire pour d'autres propriétés.</p>
+<h2 id="Utilisation">Utilisation</h2>
+<div class="warning">
+  Cette liste n'est pas exhaustive et les propriétés qui ne sont pas encore supportées par les différents navigateurs ne sont pas incluses.</div>
+<ul>
+  <li>{{ Cssxref("animation-direction") }}</li>
+  <li>{{ Cssxref("content") }}</li>
+  <li>{{ Cssxref("counter-increment") }}</li>
+  <li>{{ Cssxref("counter-reset") }}</li>
+  <li>{{ Cssxref("font-style") }}</li>
+  <li>{{ Cssxref("font-variant") }}</li>
+  <li>{{ Cssxref("font-weight") }}</li>
+  <li>{{ Cssxref("letter-spacing") }}</li>
+  <li>{{ Cssxref("white-space") }}</li>
+  <li>{{ Cssxref("word-spacing") }}</li>
+  <li>{{ Cssxref("word-wrap") }}</li>
+</ul>
+<p><u><strong>Extensions Mozilla :</strong></u></p>
+<ul>
+  <li>{{ Cssxref("-moz-appearance") }}</li>
+  <li>{{ Cssxref("-moz-box-direction") }}</li>
+  <li>{{ Cssxref("-moz-column-gap") }}</li>
+  <li>{{ Cssxref("-moz-column-rule-width") }}</li>
+</ul>
+<p>{{ languages( { "en": "en/CSS/normal", "es": "es/CSS/normal" } ) }}</p>
diff --git a/files/fr/web/css/number/index.html b/files/fr/web/css/number/index.html
new file mode 100644
index 0000000000..24f099da66
--- /dev/null
+++ b/files/fr/web/css/number/index.html
@@ -0,0 +1,88 @@
+---
+title: <number>
+slug: Web/CSS/number
+tags:
+  - CSS
+  - Reference
+  - Type
+translation_of: Web/CSS/number
+---
+<div>{{CSSRef}}</div>
+
+<p>Le type de donnée CSS <strong><code>&lt;number&gt;</code></strong> permet de représenter des nombres entiers ou décimaux. C'est donc un type qui englobe le type de données {{cssxref("&lt;integer&gt;")}} (permettant de représenter des entiers).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Pour représenter des nombres décimaux, on utilisera le point (.) comme séparateur. Comme pour {{cssxref("&lt;integer&gt;")}}, il n'y a aucune unité associée aux valeurs de type <code>&lt;number&gt;</code> (ce n'est donc pas une dimension).</p>
+
+<h2 id="Interpolation">Interpolation</h2>
+
+<p>Les valeurs de type <code>&lt;number&gt;</code> peuvent être interpolées afin d'être utilisées dans les animations. Les valeurs de ce type seront interpolées comme des nombres réels à virgule flottante. La vitesse de l'interpolation sera définie grâce <a href="/fr/docs/Web/CSS/timing-function">à la fonction de temporisation</a> associée à l'animation.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Voici des exemples de valeurs <code>&lt;number&gt;</code> valides :</p>
+
+<pre class="eval example-good">12          Un entier (<a href="/fr/docs/Web/CSS/integer">&lt;integer&gt;</a>) est également un &lt;number&gt;
+4.01        Un nombre (décimal) positif
+-456.8      Un nombre décimal négatif
+0.0         Zéro
++0.0        Zéro, avec un +
+-0.0        Zero, avec un -
+.60         Les chiffres avant le point sont facultatifs
+10e3        On peut utiliser la notation scientifique
+-3.4e-2     Un cas d'utilisation de notation scientifique plus complexe
+</pre>
+
+<p>Voici des exemples de valeurs invalides :</p>
+
+<pre class="eval example-bad">12.         Le point doit être suivi par des chiffres
++-12.2      Seul un +/- est autorisé.
+12.1.1      Seul un point est autorisé.
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Values", "#numbers", "&lt;number&gt;")}}</td>
+   <td>{{Spec2("CSS4 Values")}}</td>
+   <td>Aucune modification significative.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#numbers', '&lt;number&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Aucune modification significative depuis la spécification CSS de niveau 2 (première révision).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'syndata.html#numbers', '&lt;number&gt;')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition explicite du type de données.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '', '&lt;number&gt;')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition implicite du type de données.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.types.number")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("&lt;integer&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/object-fit/index.html b/files/fr/web/css/object-fit/index.html
new file mode 100644
index 0000000000..6d86a4f4b7
--- /dev/null
+++ b/files/fr/web/css/object-fit/index.html
@@ -0,0 +1,189 @@
+---
+title: object-fit
+slug: Web/CSS/object-fit
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/object-fit
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>object-fit</code></strong> définit la façon dont le contenu d'un <a href="/fr/docs/Web/CSS/Élément_remplacé">élément remplacé</a> ({{HTMLElement("img")}} ou {{HTMLElement("video")}} par exemple) doit s'adapter à son conteneur en utilisant sa largeur et sa hauteur.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/object-fit.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Selon la valeur utilisée pour <code>object-fit</code>, l'élément peut être rogné, mis à l'échelle ou étiré, afin de remplir la boîte qui le contient.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Il est possible de modifier l'alignement du contenu de l'élément remplacé au sein de la boîte de l'élément grâce à la propriété {{cssxref("object-position")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+object-fit: fill;
+object-fit: contain;
+object-fit: cover;
+object-fit: none;
+object-fit: scale-down;
+
+/* Valeurs globales */
+object-fit: inherit;
+object-fit: initial;
+object-fit: unset;
+</pre>
+
+<p>La propriété <code>object-fit</code> peut être définie grâce à l'un des mots-clés suivants.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>contain</code></dt>
+ <dd>Le contenu remplacé est dimensionné pour maintenir ses proportions tout en étant ajusté à la boîte de contenu : sa taille réelle est résolue en utilisant la largeur et la hauteur de l'élément comme contraintes de contenant.</dd>
+ <dt><code>cover</code></dt>
+ <dd>Le contenu remplacé est dimensionné pour maintenir son ratio d'affichage tout en remplissant toute la boîte de contenu. La taille réelle est calculée pour couvrir la zone décrite par la hauteur et la largeur de l'élément. Si les ratios de l'objet et de la boîte ne correspondent pas, le contenu remplacé sera rogné.</dd>
+ <dt><code>fill</code></dt>
+ <dd>Le contenu remplacé est dimensionné pour remplir la boîte de contenu. La taille réelle de l'objet est déterminée grâce à la hauteur et à la largeur de l'élément. Il est donc étiré afin de remplir la boîte.</dd>
+ <dt><code>none</code></dt>
+ <dd>Le contenu remplacé n'est pas redimensionné à l'intérieur de l'élément.</dd>
+ <dt><code>scale-down</code></dt>
+ <dd>Le contenu est dimensionné comme si <code>none</code> ou <code>contain</code> étaient spécifiés, on prend celui qui aboutirait à une taille réelle plus petite.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;h2&gt;object-fit: fill&lt;/h2&gt;
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill"/&gt;
+
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill narrow"/&gt;
+
+  &lt;h2&gt;object-fit: contain&lt;/h2&gt;
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain"/&gt;
+
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain narrow"/&gt;
+
+  &lt;h2&gt;object-fit: cover&lt;/h2&gt;
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover"/&gt;
+
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover narrow"/&gt;
+
+  &lt;h2&gt;object-fit: none&lt;/h2&gt;
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none"/&gt;
+
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none narrow"/&gt;
+
+  &lt;h2&gt;object-fit: scale-down&lt;/h2&gt;
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down"/&gt;
+
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down narrow"/&gt;
+
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">h2 {
+  font-family: 'Courier New', monospace;
+  font-size: 1em;
+  margin: 1em 0 0.3em;
+}
+
+div {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  height: 940px;
+}
+
+img {
+  width: 150px;
+  height: 100px;
+  border: 1px solid #000;
+}
+
+.narrow {
+  width: 100px;
+  height: 150px;
+  margin-top: 10px;
+}
+
+.fill {
+  object-fit: fill;
+}
+
+.contain {
+  object-fit: contain;
+}
+
+.cover {
+  object-fit: cover;
+}
+
+.none {
+  object-fit: none;
+}
+
+.scale-down {
+  object-fit: scale-down;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', 500, 450)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Images', '#the-object-fit', 'object-fit')}}</td>
+   <td>{{Spec2('CSS4 Images')}}</td>
+   <td>Les mots-clés <code>from-image</code> et <code>flip</code> ont été ajoutés.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Images', '#the-object-fit', 'object-fit')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.object-fit")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("background-size")}}</li>
+ <li>Les autres propriétés CSS liées aux images :
+  <ul>
+   <li>{{cssxref("object-position")}}</li>
+   <li>{{cssxref("image-orientation")}}</li>
+   <li>{{cssxref("image-rendering")}}</li>
+   <li>{{cssxref("image-resolution")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/object-position/index.html b/files/fr/web/css/object-position/index.html
new file mode 100644
index 0000000000..c87ac86ea9
--- /dev/null
+++ b/files/fr/web/css/object-position/index.html
@@ -0,0 +1,116 @@
+---
+title: object-position
+slug: Web/CSS/object-position
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/object-position
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>object-position</code></strong> détermine l'alignement d'un <a href="/fr/docs/Web/CSS/%C3%89l%C3%A9ment_remplac%C3%A9">élément remplacé</a> au sein de sa boîte. Les zones de la boîtes qui ne sont pas recouvertes par le contenu de l'élément remplacé montreront l'arrière-plan de l'élément.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/object-position.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note">
+<p><strong>Note :</strong> Il est possible d'ajuster la taille de l'élément remplacé au sein de la boîte de l'élément grâce à la propriété {{cssxref("object-fit")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css  no-line-numbers">/* Valeurs de positionnement */
+/* Type &lt;position&gt;           */
+object-position: center top;
+object-position: 100px 50px;
+
+/* Valeurs globales */
+object-position: inherit;
+object-position: initial;
+object-position: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;position&gt;</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;position&gt;")}}, c'est-à-dire une à quatre valeurs permettant de définir une position en deux dimensions par rapport aux limites de la boîte dans laquelle est placé l'élément. On peut donner des décalages absolus ou relatifs. On notera que la position peut être définie en dehors de la boîte de l'élément.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;img id="object-position-1" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/&gt;
+&lt;img id="object-position-2" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">img {
+   width: 300px;
+   height: 250px;
+   border: 1px solid black;
+   background-color: silver;
+   margin-right: 1em;
+   object-fit: none;
+}
+
+#object-position-1 {
+  object-position: 10px;
+}
+
+#object-position-2 {
+  object-position: 100% 10%;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '100%','300px')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Images', '#the-object-position', 'object-position')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.object-position")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les autres propriétés CSS liées aux images :
+  <ul>
+   <li>{{cssxref("object-fit")}}</li>
+   <li>{{cssxref("image-orientation")}}</li>
+   <li>{{cssxref("image-rendering")}}</li>
+   <li>{{cssxref("image-resolution")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/offset-anchor/index.html b/files/fr/web/css/offset-anchor/index.html
new file mode 100644
index 0000000000..2d8f3f0ee5
--- /dev/null
+++ b/files/fr/web/css/offset-anchor/index.html
@@ -0,0 +1,152 @@
+---
+title: offset-anchor
+slug: Web/CSS/offset-anchor
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/offset-anchor
+---
+<div>{{cssref}}{{seecompattable}}</div>
+
+<p>La propriété CSS <strong><code>offset-anchor</code></strong> définit le point, à l'intérieur d'une boîte d'un élément, qui se déplace le long d'un chemin {{cssxref("offset-path")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs avec un movalues */
+offset-anchor: top;
+offset-anchor: bottom;
+offset-anchor: left;
+offset-anchor: right;
+offset-anchor: center;
+offset-anchor: auto;
+
+/* Valeurs de pourcentages */
+/* Type &lt;percentage&gt; */
+offset-anchor: 25% 75%;
+
+/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+offset-anchor: 0 0;
+offset-anchor: 1cm 2cm;
+offset-anchor: 10ch 8em;
+
+/* Valeurs de décalage relatives à un bord */
+offset-anchor: bottom 10px right 20px;
+offset-anchor: right 3em bottom 10px;
+
+/* Valeurs globales */
+offset-anchor: inherit;
+offset-anchor: initial;
+offset-anchor: unset;</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd><code>offset-anchor</code> reçoit la même valeur que {{cssxref("transform-origin")}} sauf si {{cssxref("offset-path")}} vaut <code>none</code>, dans ce cas, elle récupère la valeur de {{cssxref("offset-position")}}.</dd>
+ <dt><code>&lt;position&gt;</code></dt>
+ <dd>Une position ({{cssxref("&lt;position&gt;")}}) définie par un couple de coordonnées X/Y qui permet de placer un objet par rapport aux bords de sa boîte. On peut définir la position à partir de une à quatre valeurs. Pour plus d'informations, voir les pages sur {{cssxref("&lt;position&gt;")}} et {{cssxref("background-position")}}. La syntaxe à trois valeurs ne fonctionne pas pour <code>&lt;position&gt;</code>, excepté pour <code>background(-position)</code>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, on dispose de trois éléments {{htmlelement("div")}} imbriqués chacun dans un élément {{htmlelement("section")}}. Chaque <code>&lt;div&gt;</code> se déplace sur le même chemin {{cssxref("offset-path")}} (une ligne horizontale mesurant 200 pixels). Les trois blocs possèdent une couleur ({{cssxref("background-color")}}) et une valeur <code>offset-anchor</code> différentes.</p>
+
+<p>Chaque élément <code>&lt;section&gt;</code> a été mise en forme avec un dégradé linéaire afin de fournir une indication visuelle du chemin.</p>
+
+<p>On peut voir que la première valeur, <code>auto</code>, déplace l'élément sur son centre. La deuxième et la troisième déplacent le <code>&lt;div&gt;</code> par le coin supérieur droit et le coin inférieur gauche respectivement.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;section&gt;
+  &lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"offset-anchor1</span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;
+&lt;/section&gt;
+&lt;section&gt;
+</span><span class="tag token"><span class="punctuation token">  &lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"offset-anchor2</span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;
+&lt;/section&gt;
+&lt;section&gt;
+</span><span class="tag token"><span class="punctuation token">  &lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"offset-anchor3</span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code>
+&lt;/section&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  offset-path: path('M 0,20 L 200,20');
+  animation: move 3000ms infinite alternate ease-in-out;
+  width: 40px;
+  height: 40px;
+}
+
+section {
+  background-image: linear-gradient(to bottom, transparent, transparent 49%, #000 50%, #000 51%, transparent 52%);
+  border: 1px solid #ccc;
+  margin-bottom: 10px;
+}
+
+.offset-anchor1 {
+  offset-anchor: auto;
+  background: cyan;
+}
+
+.offset-anchor2 {
+  offset-anchor: right top;
+  background: purple;
+}
+
+.offset-anchor3 {
+  offset-anchor: left bottom;
+  background: magenta;
+}
+
+@keyframes move {
+  0% {
+    offset-distance: 0%;
+  }
+  100% {
+    offset-distance: 100%;
+  }
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '100%', '300')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Spécification</th>
+   <th>État</th>
+   <th>Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Motion Path Level 1', '#offset-anchor-property', 'offset-anchor')}}</td>
+   <td>{{Spec2('Motion Path Level 1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.offset-anchor")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("offset")}}</li>
+ <li>{{cssxref("offset-distance")}}</li>
+ <li>{{cssxref("offset-rotation")}}</li>
+ <li><a href="/fr/docs/Web/SVG/Tutoriel/Paths">L'élément SVG <code>&lt;path&gt;</code></a></li>
+</ul>
diff --git a/files/fr/web/css/offset-distance/index.html b/files/fr/web/css/offset-distance/index.html
new file mode 100644
index 0000000000..ea1a89b020
--- /dev/null
+++ b/files/fr/web/css/offset-distance/index.html
@@ -0,0 +1,100 @@
+---
+title: offset-distance
+slug: Web/CSS/offset-distance
+tags:
+  - CSS
+  - Propriété
+  - Reference
+  - motion-offset
+  - offset-distance
+translation_of: Web/CSS/offset-distance
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>offset-distance</code></strong> définit une position le long d'un chemin {{CSSxRef("offset-path")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeur par défaut */
+offset-distance: 0;
+
+/* La position à la moitié de offset-path */
+offset-distance: 50%;
+
+/* Une position absolue le long du chemin */
+offset-distance: 40px;</pre>
+
+<dl>
+ <dt><code>{{cssxref('&lt;length-percentage&gt;')}}</code></dt>
+ <dd>Une longueur qui définit l'emplacement de l'élément le long du chemin (défini par {{cssxref('offset-path')}}).</dd>
+ <dd>La valeur 100% représente la longueur totale du chemin (lorsque <code>offset-path</code> est défini par une forme simple ou grâce à la fonction <code>path()</code>).</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Animation">Animation</h3>
+
+<p>La notion de mouvement contenue dans <em>CSS Motion Path</em> vient principalement de la propriété <code>offset-distance</code>. Si on souhaite animer un élément le long du chemin, on définira un chemin avec {{cssxref('offset-path')}} et on utilisera une animation qui fera évoluer <code>offset-distance</code> de <code>0%</code> à <code>100%</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div id="motion-demo"&gt;&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">#motion-demo {
+  offset-path: path('M20,20 C20,100 200,0 200,100');
+  animation: move 3000ms infinite alternate ease-in-out;
+  width: 40px;
+  height: 40px;
+  background: cyan;
+}
+
+@keyframes move {
+  0% {
+    offset-distance: 0%;
+  }
+  100% {
+    offset-distance: 100%;
+  }
+}</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Animation')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Motion Path Level 1', '#offset-distance-property', 'offset-distance')}}</td>
+   <td>{{Spec2('Motion Path Level 1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{CSSInfo}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Dans les versions antérieures de la spécification, cette propriété était intitulée <code>motion-offset</code>.</p>
+</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.offset-distance")}}</p>
diff --git a/files/fr/web/css/offset-path/index.html b/files/fr/web/css/offset-path/index.html
new file mode 100644
index 0000000000..3d6826f621
--- /dev/null
+++ b/files/fr/web/css/offset-path/index.html
@@ -0,0 +1,178 @@
+---
+title: offset-path
+slug: Web/CSS/offset-path
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/offset-path
+---
+<div>{{SeeCompatTable}}{{CSSRef}}</div>
+
+<p>La propriété <code><strong>offset</strong></code><strong><code>-path</code></strong> définit le tracé d'un mouvement sur lequel un élément est positionné, relativement au conteneur parent ou au système de coordonnées SVG.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/offset-path.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cette propriété sert à définir un chemin qu'un élément va suivre lors d'une animation.</p>
+
+<p>La position exacte de l'élément sur ce tracé est déterminée grâce à la propriété {{cssxref("offset-distance")}}. Le tracé d'un mouvement peut être défini grâce à un chemin ou à plusieurs chemins successifs ou encore grâce à la géométrie d'une forme. Chaque forme ou chemin doit définir une position initiale pour la valeur calculée <code>0</code> de {{cssxref("offset-distance")}} ainsi qu'une direction initiale qui définit la rotation de l'objet dans sa position initiale.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Dans des versions antérieures des spécifications, cette propriété était intitulée <code>motion-path</code>. Le nom a été modifié en <code>offset-path</code> afin de décrire un chemin statique plutôt qu'un chemin en mouvement.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css">/* Valeur par défaut */
+offset-path: none;
+
+/* Valeurs avec une notation fonctionnelle */
+offset-path: ray(45deg closest-side contain);
+
+/* URL */
+offset-path: url(#path);
+
+/* Formes */
+offset-path: circle(50% at 25% 25%);
+offset-path: inset(50% 50% 50% 50%);
+offset-path: polygon(30% 0%, 70% 0%, 100% 50%, 30% 100%, 0% 70%, 0% 30%);
+offset-path: path('M 0,200 Q 200,200 260,80 Q 290,20 400,0 Q 300,100 400,200');
+
+/* Boîtes géométriques */
+offset-path: margin-box;
+offset-path: stroke-box;
+
+/* Valeurs globales */
+offset-path: inherit;
+offset-path: initial;
+offset-path: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<div class="warning"><strong>Attention !</strong> À l'heure actuelle, seule la notation <code>path()</code> est prise en charge par les navigateurs.</div>
+
+<dl>
+ <dt><code>ray()</code></dt>
+ <dd>Cette notation fonctionnelle prend jusqu'à trois valeurs et définit un chemin qui est un ligne commençant à la position de la boîte et qui suit la direction de l'angle indiqué (la valeur 0deg correspond à une direction verticale, vers le haut et les angles allant dans le sens horaire). La valeur de la taille est définie de façon semblable à celle utilisée pour les dégradés entre <code>closest-side</code> et <code>farthest-corner</code> avec le mot-clé <code>contain</code>.</dd>
+ <dt><code>url()</code></dt>
+ <dd>Cette notation fonctionnelle permet de faire référence à l'identifiant d'une forme SVG : <code>circle</code>, <code>ellipse</code>, <code>line</code>, <code>path</code>, <code>polygon</code>, <code>polyline</code> ou <code>rect</code> et d'utiliser la géométrie de la forme visée pour construire le chemin.</dd>
+ <dt><code>&lt;basic-shape&gt;</code></dt>
+ <dd>Cette valeur indique une <a href="/en-US/docs/Web/CSS/CSS_Shapes/Basic_Shapes">forme CSS</a> en utilisant les notations fonctionnelles <code>circle()</code>, <code>ellipse()</code>, <code>inset()</code>, <code>polygon()</code> ou <code>path()</code>.</dd>
+ <dd>
+ <dl>
+  <dt><code>path()</code></dt>
+  <dd>Une chaîne de caractères qui définit un chemin avec la syntaxe des coordonnées SVG. À l'heure actuelle (16 novembre 2018), c'est la seule valeur qui est prise en charge.</dd>
+ </dl>
+ </dd>
+ <dt><code>none</code></dt>
+ <dd>Aucun chemin de mouvement n'est indiqué.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>L'exemple qui suit est tiré de <a href="http://codepen.io/ericwilligers/pen/bwVkNa">cette démo présente sur CodePen</a>. Le code SVG dessine la forme d'une maison avec une cheminée. Les propriétés <code>offset-path</code> utilisées permettent de déplacer l'icône (des ciseaux) autour de la maison. On notera que la pseudo-classe <code>:path()</code> est utilisée avec <code>offset-path</code> et que le document SVG contient <code>&lt;path&gt;</code>. Si on compare ces deux données, on verra qu'elles sont identiques.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.scissorHalf {
+  offset-path: path('M900,190  L993,245 V201  A11,11 0 0,1 1004,190  H1075  A11,11 0 0,1 1086,201  V300  L1294,423 H1216  A11,11 0 0,0 1205,434  V789  A11,11 0 0,1 1194,800  H606  A11,11 0 0,1 595,789  V434  A11,11 0 0,0 584,423  H506 L900,190');
+  animation: followpath 4s linear infinite;
+}
+
+@keyframes followpath {
+   to {
+     motion-offset: 100%;
+     offset-distance: 100%;
+   }
+}</pre>
+
+<h3 id="SVG">SVG</h3>
+
+<p>Les moitiés supérieure et inférieure des ciseaux apparaîtront dans le coin en haut à gauche du canevas si elles ne sont pas positionnés sur le point de départ avec <code>offset-path</code>.</p>
+
+<pre class="brush: html">&lt;svg xmlns="http://www.w3.org/2000/svg"
+     width="700"
+     height="450"
+     viewBox="350 0 1400 900"&gt;
+  &lt;title&gt;House and Scissors&lt;/title&gt;
+  &lt;rect x="595"
+        y="423"
+        width="610"
+        height="377"
+        fill="blue" /&gt;
+  &lt;polygon points="506,423 900,190 1294,423"
+           fill="yellow" /&gt;
+  &lt;polygon points="993,245 993,190 1086,190 1086,300"
+           fill="red" /&gt;
+  &lt;path id="house" d="M900,190 L993,245 V201 A11,11 0 0,1 1004,190 H1075 A11,11 0 0,1 1086,201 V300 L1294,423 H1216 A11,11 0 0,0 1205,434 V789 A11,11 0 0,1 1194,800 H606 A11,11 0 0,1 595,789 V434 A11,11 0 0,0 584,423 H506 L900,190"
+        fill="none"
+        stroke="black"
+        stroke-width="13"
+        stroke-linejoin="round"
+        stroke-linecap="round" /&gt;
+  &lt;path id="firstScissorHalf" class="scissorHalf"
+        d="M30,0 H-10 A10,10 0 0,0 -20,10 A20,20 0 1,1 -40,-10 H20 A10,10 0 0,1 30,0 M-40,20 A10,10 1 0,0 -40,0 A10,10 1 0,0 -40,20 M0,0"
+        transform="translate(0,0)"
+        fill="green"
+        stroke="black"
+        stroke-width="5"
+        stroke-linejoin="round"
+        stroke-linecap="round"
+        fill-rule="evenodd" /&gt;
+  &lt;path id="secondScissorHalf" class="scissorHalf"
+        d="M30,0 H-10 A10,10 0 0,1 -20,-10 A20,20 0 1,0 -40,10 H20 A10,10 0 0,0 30,0 M-40,-20 A10,10 1 0,0 -40,0 A10,10 1 0,0 -40,-20 M0,0"
+        transform="translate(0,0)"
+        fill="forestgreen"
+        stroke="black"
+        stroke-width="5"
+        stroke-linejoin="round"
+        stroke-linecap="round"
+        fill-rule="evenodd" /&gt;
+&lt;/svg&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '100%', '450')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Spécification</th>
+   <th>État</th>
+   <th>Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Motion Path Level 1', '#offset-path-property', 'offset-path')}}</td>
+   <td>{{Spec2('Motion Path Level 1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une <em>pull request</em> sur ce dépôt: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("css.properties.offset-path")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("offset")}}</li>
+ <li>{{cssxref("offset-distance")}}</li>
+ <li>{{cssxref("offset-rotation")}}</li>
+ <li>{{cssxref("offset-anchor")}}</li>
+ <li>{{cssxref("offset-position")}}</li>
+ <li>{{SVGElement("path")}}</li>
+</ul>
diff --git a/files/fr/web/css/offset-position/index.html b/files/fr/web/css/offset-position/index.html
new file mode 100644
index 0000000000..21b83a9b99
--- /dev/null
+++ b/files/fr/web/css/offset-position/index.html
@@ -0,0 +1,105 @@
+---
+title: offset-position
+slug: Web/CSS/offset-position
+translation_of: Web/CSS/offset-position
+---
+<div>{{CSSRef}}{{seecompattable}}</div>
+
+<p>La propriété <a href="/fr/docs/Web/CSS">CSS</a> <strong><code>offset-position</code></strong> définit la <a href="https://www.w3.org/TR/motion-1/#valdef-offsetpath-initial-position">position initiale</a> de {{cssxref("offset-path")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* Valeurs de mots clefs */
+offset-position: auto;
+offset-position: top;
+offset-position: bottom;
+offset-position: left;
+offset-position: right;
+offset-position: center;
+
+/* Valeurs de &lt;pourcentage&gt; */
+offset-position: 25% 75%;
+
+/* Valeurs de &lt;longueur&gt; */
+offset-position: 0 0;
+offset-position: 1cm 2cm;
+offset-position: 10ch 8em;
+
+/* Valeurs d'écart d'un bord */
+offset-position: bottom 10px right 20px;
+offset-position: right 3em bottom 10px;
+offset-position: bottom 10px right;
+offset-position: top right 10px;
+
+/* Valeurs globales */
+offset-position: inherit;
+offset-position: initial;
+offset-position: unset;
+</pre>
+
+<h3 id="Values" name="Values">Values</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>La position initiale est la position de la boîte spécifiée par la propriété {{cssxref("position")}}.</dd>
+ <dt id="&lt;position>"><code>&lt;position&gt;</code></dt>
+ <dd>Une {{cssxref("&lt;position&gt;")}}. Une position définit des coordonnées x/y pour positionner un élément de façon relative aux bords de la boîte de cet élément. Elles peuvent être définies en utilisant une à quatre valeurs. Si deux valeurs qui ne sont pas des mots clefs sont utilisées, la première valeur représente la position horizontale et la seconde représente la position verticale. Si seulement une valeur est définie, la seconde est considérée comme <code>center</code>. Si trois ou quatre valeurs sont utilisées, les valeurs en pourcentage sont des écarts du mot clef qui les précéde. Pour plus d'explications sur ces types de valeur, consultez {{cssxref("background-position")}}.</dd>
+</dl>
+
+<h2 id="Définition_formelle">Définition formelle</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax_formelle">Syntax formelle</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Définir_la_valeur_initiale_de_offset-position">Définir la valeur initiale de offset-position</h3>
+
+<pre class="brush: html notranslate">&lt;div id="motion-demo"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">#motion-demo {
+  offset-path: path('M20,20 C20,100 200,0 200,100');
+  offset-position: left top;
+  animation: move 3000ms infinite alternate ease-in-out;
+  width: 40px;
+  height: 40px;
+  background: cyan;
+}
+
+@keyframes move {
+  0% {
+    offset-distance: 0%;
+  }
+  100% {
+    offset-distance: 100%;
+  }
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Spécification</th>
+   <th>Statut</th>
+   <th>Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Motion Path Level 1', '#offset-position-property', 'offset-position')}}</td>
+   <td>{{Spec2('Motion Path Level 1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_de_navigateur">Compatibilité de navigateur</h2>
+
+<div class="hidden">Le tableau de compatibilité est généré sur cette page avec des données structurées. Si vous désiez contribuer à ces données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer votre proposition de changement.</div>
+
+<p>{{Compat("css.properties.offset-position")}}</p>
diff --git a/files/fr/web/css/offset-rotate/index.html b/files/fr/web/css/offset-rotate/index.html
new file mode 100644
index 0000000000..4ddd5380c0
--- /dev/null
+++ b/files/fr/web/css/offset-rotate/index.html
@@ -0,0 +1,123 @@
+---
+title: offset-rotate
+slug: Web/CSS/offset-rotate
+tags:
+  - CSS
+  - Propriété
+  - Reference
+  - offset-rotate
+translation_of: Web/CSS/offset-rotate
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>offset-rotate</code></strong> définit l'orientation et la direction de l'élément lorsqu'il est positionné le long du chemin représenté par {{cssxref("offset-path")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Suit la direction du chemin avec un éventuel */
+/* décalage angulaire */
+offset-rotate: auto;
+offset-rotate: auto 45deg;
+
+/* Suit la direction du chemin mais orienté dans la
+/* direction opposée */
+offset-rotate: reverse;
+
+/* Conserve une rotation constante quelle que soit la position
+/* sur le chemin  */
+offset-rotate: 90deg;
+offset-rotate: .5turn;</pre>
+
+<dl>
+ <dt><code><dfn>auto</dfn></code></dt>
+ <dd>
+ <p>L'élément est tourné avec l'angle donné par la direction du chemin {{cssxref("offset-path")}}, relativement à l'axe des abscisses. C'est la valeur par défaut.</p>
+ </dd>
+ <dt><code>{{cssxref("&lt;angle&gt;")}}</code></dt>
+ <dd>
+ <p>L'élément est tourné d'un angle fixe (indiqué dans le sens horaire).</p>
+ </dd>
+ <dt><code><dfn>auto &lt;angle&gt;</dfn></code></dt>
+ <dd>
+ <p>Si le mot-clé <code>auto</code> est suivi d'une valeur {{cssxref("&lt;angle&gt;")}}, l'élément est tourné de l'angle donné par rapport à la direction du chemin.</p>
+ </dd>
+ <dt><code><dfn>reverse</dfn></code></dt>
+ <dd>
+ <p>L'élément est tourné de façon similaire à <code>auto</code>, mais fait face à la direction opposée. Cette valeur est équivalente à <code>auto 180deg</code>.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  width: 40px;
+  height: 40px;
+  background: #2BC4A2;
+  margin: 20px;
+  clip-path: polygon(0% 0%, 70% 0%, 100% 50%, 70% 100%, 0% 100%, 30% 50%);
+  animation: move 5000ms infinite alternate ease-in-out;
+
+  offset-path: path('M20,20 C20,50 180,-10 180,20');
+}
+div:nth-child(1) {
+  offset-rotate: auto;
+}
+div:nth-child(2) {
+  offset-rotate: auto 90deg;
+}
+div:nth-child(3) {
+  offset-rotate: 30deg;
+}
+
+@keyframes move {
+  100% {
+    offset-distance: 100%;
+  }
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;&lt;/div&gt;
+&lt;div&gt;&lt;/div&gt;
+&lt;div&gt;&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Motion Path Level 1', '#offset-rotate-property', 'offset-rotate')}}</td>
+   <td>{{Spec2('Motion Path Level 1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> Les versions antérieures de la spécification utilisait le nom <code>motion-rotation</code> pour cette propriété.</p>
+</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.offset-rotate")}}</p>
diff --git a/files/fr/web/css/offset/index.html b/files/fr/web/css/offset/index.html
new file mode 100644
index 0000000000..a3fe13e57b
--- /dev/null
+++ b/files/fr/web/css/offset/index.html
@@ -0,0 +1,104 @@
+---
+title: offset
+slug: Web/CSS/offset
+tags:
+  - CSS
+  - Draft
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/offset
+---
+<div>{{CSSRef}}{{Draft}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>offset</code></strong> est une propriété raccourcie pour les propriétés {{cssxref("offset-path")}}, {{cssxref("offset-position")}}, {{cssxref("offset-distance")}}, {{cssxref("offset-rotate")}} et {{cssxref("offset-anchor")}}. Elle permet d'animer un élément sur un tracé défini.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Dans les premières versions de la spécification, cette propriété était intitulée <code>motion</code>.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Position de décalage */
+offset: auto
+offset: 10px 30px;
+offset: none;
+
+/* Chemin de décalage */
+offset: ray(45deg closest-side);
+offset: path(M 100 100 L 300 100 L 200 300 z);
+offset: url(arc.svg);
+
+/* Chemin de décalage avec une distance et/ou */
+/* une rotation */
+offset: url(circle.svg) 100px;
+offset: url(circle.svg) 40%;
+offset: url(circle.svg) 30deg;
+offset: url(circle.svg) 50px 20deg;
+
+/* Gestion d'une ancre de décalage */
+offset: ray(45deg closest-side) / 40px 20px;
+offset: url(arc.svg) 2cm / 0.5cm 3cm;
+offset: url(arc.svg) 30deg / 50px 100px;
+</pre>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="offsetElement"&gt;&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@keyframes move {
+  from {
+    offset-distance: 0%;
+  }
+
+  to {
+    offset-distance: 100%;
+  }
+}
+
+#offsetElement {
+  width: 50px;
+  height: 50px;
+  background-color: blue;
+  offset: path("M 100 100 L 300 100 L 200 300 z") auto;
+  animation: move 3s linear infinite;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 350, 350)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Spécification</th>
+   <th>État</th>
+   <th>Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Motion Path Level 1', '#offset-shorthand', 'offset')}}</td>
+   <td>{{Spec2('Motion Path Level 1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.offset")}}</p>
diff --git a/files/fr/web/css/opacity/index.html b/files/fr/web/css/opacity/index.html
new file mode 100644
index 0000000000..d454141433
--- /dev/null
+++ b/files/fr/web/css/opacity/index.html
@@ -0,0 +1,184 @@
+---
+title: opacity
+slug: Web/CSS/opacity
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/opacity
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>opacity</code></strong> définit la transparence d'un élément. Autrement dit, elle permet de définir le degré de visibilité de l'arrière-plan sur lequel est placé l'élément.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/opacity.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La valeur s'applique à l'ensemble de l'élément et à ce qu'il contient même si la valeur n'est pas héritée par les éléments fils. Ainsi, un élément et les fils qu'il contient auront tous la même opacité relative à l'arrière-plan, même si l'élément et ses descendants ont des opacités différentes. Si on souhaite utiliser différentes opacités pour les différents éléments enfants, plutôt que d'utiliser <code>opacity</code>, on pourra utiliser la propriété {{cssxref("background")}} avec une composante alpha différente de 1 (par exemple : <code>background: rgba(0, 0, 0, 0.4);</code>).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs numériques */
+/* Totalement opaque  */
+opacity: 1;
+opacity: 1.0;
+
+/* Légèrement transparent */
+opacity: 0.6;
+
+/* Complètement transparent */
+opacity: 0.0;
+opacity: 0;
+
+/* Valeurs globales */
+opacity: inherit;
+opacity: initial;
+opacity: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;number&gt;")}} dans l'intervalle [<code>0.0</code>, <code>1.0]</code> qui représente l'opacité de l'élément, la valeur de son canal alpha. Les valeurs en dehors de cet intervalle seront considérées comme valides mais ramenées dans cet intervalle (ainsi <code>6</code> sera équivalent à <code>1</code> et -2 sera équivalent à <code>0</code>).
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <th>Valeur</th>
+    <th>Signification</th>
+   </tr>
+   <tr>
+    <td><code>0</code></td>
+    <td>L'élément est complètement transparent (invisible).</td>
+   </tr>
+   <tr>
+    <td>Toute valeur de type {{cssxref("&lt;number&gt;")}} strictement comprise entre <code>0</code> et <code>1</code></td>
+    <td>L'élément est partiellement transparent, on peut voir l'arrière-plan.</td>
+   </tr>
+   <tr>
+    <td><code>1</code> (la valeur par défaut)</td>
+    <td>L'élément est complètement opaque.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+}
+
+.leger {
+  /* On ne voit presque pas le texte */
+  opacity: 0.2;
+}
+.moyen {
+  /* On peut mieux discerner le texte */
+  opacity: 0.5;
+}
+.lourd {
+  /* Le texte est clairement visible */
+  opacity: 0.9;
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="leger"&gt;On arrive à peine à lire.&lt;/div&gt;
+&lt;div class="moyen"&gt;On voit mieux.&lt;/div&gt;
+&lt;div class="lourd"&gt;Ceci est plus simple à lire.&lt;/div&gt;
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Exemple_simple', '640', '64')}}</p>
+
+<h3 id="Jouer_sur_l’opacité_avec_hover">Jouer sur l’opacité avec <code>:hover</code></h3>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">img.opacity {
+  opacity: 1;
+  /* IE8 et antérieurs */
+  filter: alpha(opacity=100);
+  /* Déclenche "hasLayout" dans IE 7 et antérieurs */
+  zoom: 1;
+}
+
+img.opacity:hover {
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+  zoom: 1;
+}</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;img src="//developer.mozilla.org/media/img/mdn-logo.png"
+     alt="MDN logo" width="128" height="146"
+     class="opacity"&gt;
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Jouer_sur_l’opacité_avec_hover", '150', '175')}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Si l'opacité du texte est modifiée, il est nécessaire de vérifier que le contraste entre la couleur du texte et l'arrière-plan est suffisant pour que le texte soit lisible, y compris pour les personnes souffrant de trouble de la vision.</p>
+
+<p>Le ratio de contraste est déterminé en comparant la luminosité de la couleur du texte (dont l'opacité a été adaptée) et celle de l'arrière-plan. Les recommandations du <a href="https://www.w3.org/WAI/intro/wcag">WCAG</a>  conseillent un ratio de 4.5:1 pour les textes normaux et 3:1 pour les textes plus grands (un texte est considéré comme grand s'il est en gras et dont les lettres mesurent 18.66px ou si ses lettres mesurent 24px ou plus).</p>
+
+<ul>
+ <li><a href="https://webaim.org/resources/contrastchecker/">Vérificateur de contraste WebAIM</a></li>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html"><em>Understanding Success Criterion 1.4.3, W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'opacity')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>opacity</code> peut désormais être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Colors', '#opacity', 'opacity')}}</td>
+   <td>{{Spec2('CSS3 Colors')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.opacity")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://msdn.microsoft.com/en-us/library/ms532910%28VS.85%29.aspx">La documentation MSDN de Microsoft sur <code>filter:alpha(opacity=xx)</code></a></li>
+</ul>
diff --git a/files/fr/web/css/order/index.html b/files/fr/web/css/order/index.html
new file mode 100644
index 0000000000..193a043b33
--- /dev/null
+++ b/files/fr/web/css/order/index.html
@@ -0,0 +1,130 @@
+---
+title: order
+slug: Web/CSS/order
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/order
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>order</code></strong> définit l'ordre avec lequel on dessine les éléments d'un conteneur d'éléments flexibles ou d'une grille d'éléments. Les éléments sont appliqués dans l'ordre croissant des valeurs de <code>order</code>. Les éléments ayant la même valeur pour <code>order</code> seront appliqués dans l'ordre selon lequel ils apparaissent dans le code source du document.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/order.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note">
+<p><strong>Note </strong>: <code>order</code> est uniquement conçue pour affecter <strong>l'ordre visuel</strong>. Elle ne doit pas être utilisée pour modifier l'ordre logique ou l'ordre de tabulation. <code><strong>order</strong></code> ne doit pas être utilisée avec les média non visuels comme les informations vocales.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs entières (type &lt;integer&gt;) */
+/* positives ou négatives */
+order: 5;
+order: -5;
+
+/* Valeurs globales */
+order: inherit;
+order: initial;
+order: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;integer&gt;</code></dt>
+ <dd>Un nombre entier (cf. {{cssxref("&lt;integer&gt;")}}) indiquant l'ordre à appliquer pour l'élément.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html;">&lt;div id='main'&gt;
+   &lt;article&gt;Lorem ipsum&lt;/article&gt;
+   &lt;nav&gt; consectetur adipisicing elit, sed do eiusmod&lt;/nav&gt;
+   &lt;aside&gt;tempor incididunt ut labore et dolore magna&lt;/aside&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<p>Grâce à ces déclarations CSS, on crée un disposition avec deux barres entourant un bloc de contenu. Le module de disposition des boîtes flexibles crée des bloc de tailles verticales égales et utilise autant d'espace horizontal qu'il y en a de disponible.</p>
+
+<pre class="brush:css;">#main {
+  display: flex;
+}
+
+#main &gt; article {
+  flex:1;
+  order: 2;
+  border: 1px dotted orange;
+}
+
+#main &gt; nav {
+  width: 200px;
+  order: 1;
+  border: 1px dotted blue;
+}
+
+#main &gt; aside {
+  width: 200px;
+  order: 3;
+  border: 1px dotted blue;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>La propriété <code>order</code> créera une incohérence entre l'ordre de présentation visuelle et celui du DOM. Cela aura un impact négatif pour les utilisateurs avec des troubles de la vision et qui utilisent des outils d'assistance comme les lecteurs d'écran. Si l'ordre visuel est important, les utilisateurs de lecteurs d'écran n'auront pas accès à l'ordre correct.</p>
+
+<ul>
+ <li><a href="https://tink.uk/flexbox-the-keyboard-navigation-disconnect/"><em>Flexbox &amp; the keyboard navigation disconnect — Tink</em> (en anglais)</a></li>
+ <li><a href="http://adrianroselli.com/2015/09/source-order-matters.html"><em>Source Order Matters, Adrian Roselli</em> (en anglais)</a></li>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">Comprendre les règles du WCAG 1.3</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-sequence.html"><em>Understanding Success Criterion 1.3.2, W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#order-property', 'order')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.order")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Le guide CSS sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de base</a></em></li>
+ <li>Le guide CSS sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Ordering_Flex_Items">Ordonner les éléments flexibles</a></em></li>
+ <li>Le guide sur la grille CSS : <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité">La disposition en grille et l'accessibilité</a></em></li>
+</ul>
diff --git a/files/fr/web/css/orphans/index.html b/files/fr/web/css/orphans/index.html
new file mode 100644
index 0000000000..8fa838fcac
--- /dev/null
+++ b/files/fr/web/css/orphans/index.html
@@ -0,0 +1,114 @@
+---
+title: orphans
+slug: Web/CSS/orphans
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/orphans
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>orphans</code></strong> définit le nombre <em>minimum</em> de lignes qui doivent rester en bas d'une <a href="/fr/docs/Web/CSS/M%C3%A9dia_pagin%C3%A9s">page</a>, d'une région ou d'une <a href="/fr/docs/Web/CSS/Colonnes_CSS">colonne</a> dans un conteneur de bloc.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeur numérique entière */
+orphans: 3;
+
+/* Valeurs globales */
+orphans: inherit;
+orphans: initial;
+orphans: unset;
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> En typographie, un orphelin (<em>orphan</em> en anglais) est la première ligne d'un paragraphe qui apparaît isolée en bas d'une page (le paragraphe poursuivant sur la page suivante).</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;integer&gt;</code></dt>
+ <dd>Seules les valeurs positives sont autorisées. Le nombre de lignes qu'on souhaite avoir au minimum avant une rupture.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class=exemple&gt;
+  Tout en causant ainsi, Alice était entrée dans une petite chambre
+  bien rangée, et, comme elle s’y attendait, sur une petite table
+  dans l’embrasure de la fenêtre, elle vit un éventail et deux ou
+  trois paires de gants de chevreau tout petits. Elle en prit une
+  paire, ainsi que l’éventail, et allait quitter la chambre lorsqu’
+  elle aperçut, près du miroir, une petite bouteille. Cette fois il
+  n’y avait pas l’inscription BUVEZ-MOI — ce qui n’empêcha pas Alice
+  de la déboucher et de la porter à ses lèvres. « Il m’arrive toujours
+  quelque chose d’intéressant, » se dit-elle, « lorsque je mange ou
+  que je bois. Je vais voir un peu l’effet de cette bouteille.
+  J’espère bien qu’elle me fera regrandir, car je suis vraiment
+  fatiguée de n’être qu’une petite nabote ! »C’est ce qui arriva en
+  effet, et bien plus tôt qu’elle ne s’y attendait. Elle n’avait pas
+  bu la moitié de la bouteille, que sa tête touchait au plafond et
+  qu’elle fut forcée de se baisser pour ne pas se casser le cou. Elle
+  remit bien vite la bouteille sur la table en se disant : « En voilà
+  assez ; j’espère ne pas grandir davantage. Je ne puis déjà plus
+  passer par la porte. Oh ! je voudrais bien n’avoir pas tant bu ! »
+&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple {
+  orphans: 4;
+  columns: 3;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","600","500")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fragmentation', '#widows-orphans', 'orphans')}}</td>
+   <td>{{Spec2('CSS3 Fragmentation')}}</td>
+   <td>La propriété <code>orphans</code> est étendue pour s'appliquer à n'importe quel fragment comme les pages, les régions ou les colonnes.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'page.html#break-inside', 'orphans')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.orphans")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("widows")}}</li>
+ <li><a href="/fr/docs/Web/CSS/Média_paginés">Média paginés</a></li>
+</ul>
diff --git a/files/fr/web/css/outils/générateur_de_courbe_de_bézier/index.html b/files/fr/web/css/outils/générateur_de_courbe_de_bézier/index.html
new file mode 100644
index 0000000000..6a4671d141
--- /dev/null
+++ b/files/fr/web/css/outils/générateur_de_courbe_de_bézier/index.html
@@ -0,0 +1,13 @@
+---
+title: Générateur de courbe de Bézier
+slug: Web/CSS/Outils/Générateur_de_courbe_de_Bézier
+tags:
+  - CSS
+  - Outils
+translation_of: Web/CSS/Tools/Cubic_Bezier_Generator
+---
+<p>{{Draft}}</p>
+
+<div class="note">
+<p><strong>Note</strong><strong> :</strong> Cette page n'est pas complète, l'outil doit être finalisé sur la version anglaise.</p>
+</div>
diff --git a/files/fr/web/css/outils/générateur_de_dégradés_linéaires/index.html b/files/fr/web/css/outils/générateur_de_dégradés_linéaires/index.html
new file mode 100644
index 0000000000..ae2340fd73
--- /dev/null
+++ b/files/fr/web/css/outils/générateur_de_dégradés_linéaires/index.html
@@ -0,0 +1,13 @@
+---
+title: Générateur de dégradés linéaires
+slug: Web/CSS/Outils/Générateur_de_dégradés_linéaires
+tags:
+  - CSS
+  - Outils
+translation_of: Web/CSS/Tools/Linear-gradient_Generator
+---
+<p>{{Draft}}</p>
+
+<div class="note">
+<p><strong>Note</strong><strong> :</strong> Cette page n'est pas complète, l'outil doit être finalisé sur la version anglaise.</p>
+</div>
diff --git a/files/fr/web/css/outils/index.html b/files/fr/web/css/outils/index.html
new file mode 100644
index 0000000000..ac78261ad4
--- /dev/null
+++ b/files/fr/web/css/outils/index.html
@@ -0,0 +1,20 @@
+---
+title: Outils
+slug: Web/CSS/Outils
+tags:
+  - CSS
+  - Outils
+translation_of: Web/CSS/Tools
+---
+<p>CSS fournit de nombreuses fonctionnalités qui peuvent être paramétrées avec différents facteurs. Il est donc utile de pouvoir visualiser ces paramètres lorsqu'on manipule ces propriétés. Cette page indique différents outils qui pourront vous être utiles lorsque vous construirez vos feuilles de style avec ces fonctionnalités.</p>
+
+<p>{{LandingPageListSubpages}}</p>
+
+<h2 id="Autres_outils">Autres outils</h2>
+
+<ul>
+ <li><a href="http://jeremyckahn.github.io/stylie/">Stylie </a>pour les animations</li>
+ <li>Connaître les informations d'affichage d'un appareil (utile pour la conception de sites adaptatifs) : <a href="http://mydevice.io">mydevice.io</a></li>
+ <li>Construire des menus CSS - <a href="https://cssmenumaker.com/">cssmenumaker.com</a></li>
+ <li>Un linter CSS qui permet de respecter des conventions homogènes et d'éviter des erreurs dans les feuilles de style - <a href="https://stylelint.io/">stylelint</a></li>
+</ul>
diff --git a/files/fr/web/css/outline-color/index.html b/files/fr/web/css/outline-color/index.html
new file mode 100644
index 0000000000..9e3bc20978
--- /dev/null
+++ b/files/fr/web/css/outline-color/index.html
@@ -0,0 +1,133 @@
+---
+title: outline-color
+slug: Web/CSS/outline-color
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/outline-color
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>outline-color</code></strong> permet de définir la couleur avec laquelle on trace le conteur de l'élément. Ce contour est tracé autour de <a href="/fr/Apprendre/CSS/Les_bases/Le_mod%C3%A8le_de_bo%C3%AEte">la boîte de bordure</a> et peut être utilisé pour faire ressortir l'élément.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/outline-color.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>À la différence de la bordure, le contour est tracé en dehors du cadre de l'élément et peut donc chevaucher d'autres contenus. La bordure, en revanche, modifiera la disposition de la page afin de s'assurer qu'aucun chevauchement involontaire ne se produit.La propriété <code>outline-color</code> est également synthétisée avec la propriété raccourcie {{cssxref("outline")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p> </p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+outline-color: invert;
+
+/* Valeurs de couleur */
+/* Type &lt;color&gt;       */
+outline-color: red;
+outline-color: #f92525;
+outline-color: rgb(30,222,121);
+
+/* Valeurs globales */
+outline-color: inherit;
+outline-color: initial;
+outline-color: unset;
+</pre>
+
+<p> </p>
+
+<p>La propriété <code>outline-color</code> est définie avec une des valeurs listées ci-après.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>Voir la page {{cssxref("&lt;color&gt;")}} pour plus d'informations sur les valeurs utilisables avec ce type.</dd>
+ <dt><code>invert</code></dt>
+ <dd>Afin de s'assurer que la bordure est visible, on applique une inversion de couleur avec l'arrière-plan. Cela permet de renforcer le contraste, quelle que soit la couleur de l'arrière-plan. Cette valeur ne doit pas nécessairement être supportée par les navigateurs. Si elle ne l'est pas, ils considèreront la règle comme invalide.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html;">&lt;p class="exemple"&gt;Mon contour est blue, da ba dee.&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight:[3]">.exemple {
+  /* Tout d'abord on utiliser outline */
+  /* pour définir le contour          */
+  outline: 2px solid;
+
+  /* Ensuite on précise sa couleur avec */
+  /* outline-color                      */
+  outline-color: #0000FF;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","100%")}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p><a href="/fr/docs/Web/CSS/:focus">L'utilisation d'un focus personnalisé</a> s'accompagne généralement d'une modification de la propriété {{cssxref("outline")}}. Si la couleur du contour est modifiée, il est nécessaire de vérifier que le contraste entre le contour et l'arrière-plan est suffisant afin que le contour puisse clairement être distingué.</p>
+
+<p>Le ratio de contraste est déterminé en comparaisant les luminosités des deux couleurs. Pour le contraste entre un texte et son arrière-plan, les recommandations <a href="https://www.w3.org/WAI/intro/wcag">Web Content Accessibility Guidelines (WCAG)</a> requièrent un ratio de 4.5:1 pour le contenu textuel et un ratio de 3:1 pour les titres ou les textes plus grands (18.66px et en gras ou 24px ou plus grand).</p>
+
+<ul>
+ <li><a href="https://webaim.org/resources/contrastchecker/">Vérificateur de contraste WebAIM (en anglais)</a></li>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li>
+ <li><em><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3 - W3C Understanding WCAG 2.0</a></em><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html"> (en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#outline-color', 'outline-color')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Aucun changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'outline-color')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>outline-color</code> peut désormais être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'ui.html#propdef-outline-color', 'outline-color')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.outline-color")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Le type de donnée {{cssxref("&lt;color&gt;")}}</li>
+ <li>Les autres propriétés relatives aux couleurs : {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}}</li>
+ <li><a href="/fr/docs/Web/HTML/Applying_color">Appliquer des couleurs sur des éléments HTML grâce à CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/outline-offset/index.html b/files/fr/web/css/outline-offset/index.html
new file mode 100644
index 0000000000..d46cc50ed6
--- /dev/null
+++ b/files/fr/web/css/outline-offset/index.html
@@ -0,0 +1,94 @@
+---
+title: outline-offset
+slug: Web/CSS/outline-offset
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/outline-offset
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>outline-offset</code></strong> définit l'espace qu'il y a entre la bordure dessinée par {{cssxref("outline")}} et le bord de <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">la boîte de bordure</a> d'un élément. Cet espace est transparent et la couleur visible en arrière-plan sera déterminée par l'élément parent.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/outline-offset.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+outline-offset: 3px;
+outline-offset: 0.2em;
+
+/* Valeurs globales */
+outline-offset: inherit;
+outline-offset: initial;
+outline-offset: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>La largeur de l'espace, voir la page {{cssxref("&lt;length&gt;")}} pour plus d'informations. Les valeurs négatives sont utilisées et font que la bordure dessinée est dessinée dans l'élément.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple {
+  outline: 1px dashed red;
+  /* On décale la ligne de 10px */
+  outline-offset: 10px;
+  background: yellow;
+  margin: 15px;
+  border: 1px solid black;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="exemple"&gt;La bordure est décalée&lt;p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'outline-offset')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>outline-offset</code> peut désormais être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#outline-offset', 'outline-offset')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.outline-offset")}}</p>
diff --git a/files/fr/web/css/outline-style/index.html b/files/fr/web/css/outline-style/index.html
new file mode 100644
index 0000000000..d205203a01
--- /dev/null
+++ b/files/fr/web/css/outline-style/index.html
@@ -0,0 +1,150 @@
+---
+title: outline-style
+slug: Web/CSS/outline-style
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/outline-style
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>outline-style</code></strong> permet de définir la mise en forme utilisée pour dessiner la bordure d'un élément. Cette bordure est dessinée autour de <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">la boîte de bordure</a> et peut être utilisée afin de faire ressortir l'élément.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/outline-style.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cette propriété est synthétisée grâce à la propriété {{cssxref("outline")}} qui regroupe outline-style, {{cssxref("outline-width")}} et {{cssxref("outline-color")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* Valeurs avec un mot-clé */
+outline-style: auto;
+outline-style: none;
+outline-style: dotted;
+outline-style: dashed;
+outline-style: solid;
+outline-style: double;
+outline-style: groove;
+outline-style: ridge;
+outline-style: inset;
+outline-style: outset;
+
+/* Valeurs globales */
+outline-style: inherit;
+outline-style: initial;
+outline-style: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>L'agent utilisateur peut afficher une bordure avec une mise en forme par défaut.</dd>
+ <dt><code>none</code></dt>
+ <dd>Aucune bordure n'est dessinée (équivalent à {{cssxref("outline-width")}} avec la valeur <code>0</code>).</dd>
+ <dt><code>dotted</code></dt>
+ <dd>Le bordure est dessinée avec une série de points.</dd>
+ <dt><code>dashed</code></dt>
+ <dd>La bordure est dessinée avec des tirets.</dd>
+ <dt><code>solid</code></dt>
+ <dd>La bordure est dessinée avec une ligne continue.</dd>
+ <dt><code>double</code></dt>
+ <dd>La bordure est dessinée avec deux lignes continues. La valeur de la propriété {{cssxref("outline-width")}} désigne la somme de la largeur des deux lignes et de l'espace entre elles.</dd>
+ <dt><code>groove</code></dt>
+ <dd>La bordure est dessinée comme si elle était gravée dans le document.</dd>
+ <dt><code>ridge</code></dt>
+ <dd>La forme obtenue est opposée à <code>groove</code> : la bordure semble dépasser du document.</dd>
+ <dt><code>inset</code></dt>
+ <dd>La bordure semble être intégrée dans le document..</dd>
+ <dt><code>outset</code></dt>
+ <dd>La forme obtenue est opposée à <code>inset</code> : la bordure semble ressortir du document.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">.exemple-groove {
+  outline-style: groove;
+  outline-color: red;
+  outline-width: 2px;
+}
+
+.exemple-outset {
+  outline-style: outset;
+  outline-color: green;
+  outline-width: 1px;
+}</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p class="exemple-groove"&gt;Ça c'est le groove&lt;/p&gt;
+&lt;p class="exemple-outset"&gt;Et ça c'est outset&lt;/p&gt;
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemple_simple","100%","100%")}}</p>
+
+<h3 id="Example_0_-_auto" name="Example_0_-_auto">Utilisation de la valeur <code>auto</code></h3>
+
+<p>La valeur <code>auto</code> indique une bordure sur mesure selon l'interface du système d'exploitation ou de l'agent utilisateur.</p>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">.auto {
+  outline-style: auto; /* same result as "outline: auto" */
+}
+
+/* To make the Demo clearer */
+* { outline-width: 10px; padding: 15px; } </pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+  &lt;p class="auto"&gt;Outline Demo&lt;/p&gt;
+&lt;/div&gt; </pre>
+
+<h4 id="Résulat">Résulat</h4>
+
+<p>{{EmbedLiveSample('Example_0_-_auto')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#outline-style', 'outline-style')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>La valeur <code>auto</code> a été ajoutée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'ui.html#propdef-outline-style', 'outline-style')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.outline-style")}}</p>
diff --git a/files/fr/web/css/outline-width/index.html b/files/fr/web/css/outline-width/index.html
new file mode 100644
index 0000000000..dd552aa948
--- /dev/null
+++ b/files/fr/web/css/outline-width/index.html
@@ -0,0 +1,135 @@
+---
+title: outline-width
+slug: Web/CSS/outline-width
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/outline-width
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>outline-width</code></strong> est utilisée afin de définir l'épaisseur de la bordure (<em>outline</em>) d'un élément. Cette bordure est dessinée autour des éléments et délimite <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">la boîte de bordure</a>. Visuellement, cela permet de faire ressortir l'élément.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/outline-width.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot clé */
+outline-width: thin;
+outline-width: medium;
+outline-width: thick;
+
+/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+outline-width: 1px;
+outline-width: 0.1em;
+
+/* Valeurs globales */
+outline-width: inherit;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>thin</code></dt>
+ <dd>La largeur appliquée dépendra de l'agent utilisateur. On attend une largeur fine. Généralement, pour les navigateurs de bureau comme Firefox, cela correspondra à <code>1px</code>.</dd>
+ <dt><code>medium</code></dt>
+ <dd>La largeur appliquée dépendra de l'agent utilisateur. On attend une largeur moyenne. Généralement, pour les navigateurs de bureau comme Firefox, cela correspondra à <code>3px</code>.</dd>
+ <dt><code>thick</code></dt>
+ <dd>La largeur appliquée dépendra de l'agent utilisateur. On attend une largeur de trait prononcée. Généralement, pour les navigateurs de bureau comme Firefox, cela correspondra à <code>5px</code>.</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Voir la page sur le type {{cssxref("&lt;length&gt;")}} pour les différentes valeurs correspondantes.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;span id="thin"&gt;thin&lt;/span&gt;
+&lt;span id="medium"&gt;medium&lt;/span&gt;
+&lt;span id="thick"&gt;thick&lt;/span&gt;
+&lt;span id="deuxpixels"&gt;2px&lt;/span&gt;
+&lt;span id="unex"&gt;1ex&lt;/span&gt;
+&lt;span id="deuxem"&gt;2em&lt;/span&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">span {
+  outline-style: solid;
+  display: inline-block;
+  margin: 20px;
+}
+
+#thin {
+  outline-width: thin;
+}
+
+#medium {
+  outline-width: medium;
+}
+
+#thick {
+  outline-width: thick;
+}
+
+#deuxpixels {
+  outline-width: 2px;
+}
+
+#unex {
+  outline-width: 1ex;
+}
+
+#deuxem {
+  outline-width: 2em;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '100%', '80')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#outline-width', 'outline-width')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Aucun changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'outline-width')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>outline-width</code> peut désormais être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'ui.html#propdef-outline-width', 'outline-width')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.outline-width")}}</p>
diff --git a/files/fr/web/css/outline/index.html b/files/fr/web/css/outline/index.html
new file mode 100644
index 0000000000..11148a26fa
--- /dev/null
+++ b/files/fr/web/css/outline/index.html
@@ -0,0 +1,159 @@
+---
+title: outline
+slug: Web/CSS/outline
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/outline
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>outline</code></strong> est <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">une propriété raccourcie</a> qui permet de définir, dans une seule déclaration, une ou plusieurs des propriétés parmi {{cssxref("outline-style")}}, {{cssxref("outline-width")}} et {{cssxref("outline-color")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/outline.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>À l'instar des autres propriétés raccourcies, toutes les valeurs qui ne sont pas explicitement utilisées dans la déclaration sont réinitialisées avec <a href="/fr/docs/Web/CSS/Valeur_initiale">leur valeur initiale</a>.</p>
+
+<h3 id="Bordures_et_contours">Bordures et contours</h3>
+
+<p>Les contours (<em>outline</em>) diffèrent des bordures, notamment sur les points suivants :</p>
+
+<ul>
+ <li>Les contours ne prennent pas d'espace et sont dessinés au-dessus du contenu.</li>
+ <li>Les contours peuvent avoir une forme qui n'est pas rectangulaire. Ils seront rectangulaires avec Gecko et Firefox mais Opera dessinera une forme autour du contenu (cf. exemples).</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* style */
+outline: solid;
+
+/* couleur | style */
+outline: #f66 dashed;
+
+/* style | épaisseur */
+outline: inset thick;
+
+/* couleur | style | épaisseur */
+outline: green solid 3px;
+
+/* Valeurs globales */
+outline: inherit;
+outline: initial;
+outline: unset;
+</pre>
+
+<p id="Values">La propriété <code>outline</code> peut être définie avec une, deux ou trois valeurs parmi celles listées ci-après. L'ordre de ces valeurs n'a pas d'importance.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Si aucun style n'est défini, le contour sera invisible (car le style par défaut vaut <code>none</code>).</p>
+</div>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;'outline-width'&gt;</code></dt>
+ <dd>Voir {{cssxref("outline-width")}}.</dd>
+ <dt><code>&lt;'outline-style'&gt;</code></dt>
+ <dd>Voir {{cssxref("outline-style")}}.</dd>
+ <dt><code>&lt;'outline-color'&gt;</code></dt>
+ <dd>Depuis Gecko 1.9 (Firefox 3), la valeur de la propriété {{cssxref("color")}} de l'élément est utilisée. Voir {{cssxref("outline-color")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p class="exemple"&gt;Je suis entouré de tirets rouges&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.exemple {
+  outline: dashed red 2px;
+  /* on aurait pu utiliser          */
+  /* les trois propriétés unitaires */
+  /* et avoir le même résultat      */
+}
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemple_simple")}}</p>
+
+<h3 id="Exemple_de_contour_non_rectangulaire">Exemple de contour non rectangulaire</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;p class="exemple"&gt;
+  petit texte
+    &lt;span class=grand&gt;Grand Texte&lt;/span&gt;
+  petit texte
+&lt;/p&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">.exemple {
+  outline: dotted orange 1px;
+}
+
+.grand {
+  font-size:xx-large;
+}
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemple_de_contour_non_rectangulaire")}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Utiliser la propriété <code>outline</code> avec une valeur <code>0</code> ou <code>none</code> supprimera le style par défaut du navigateur pour le focus. Lorsqu'on interagit avec un élément, celui-ci doit avoir un indicateur visible. Aussi, veillez à fournir un tel indicateur si vous retirez le style par défaut pour le focus</p>
+
+<ul>
+ <li>{{cssxref(":focus")}}</li>
+ <li><a href="https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/">Comment concevoir des indicateurs de focus utiles et utilisables (en anglais)</a></li>
+ <li>
+  <p><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html"><em>Understanding Success Criterion 2.4.7  | Understanding WCAG 2.0</em> (en anglais)</a></p>
+ </li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#outline', 'outline')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Aucun changement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'ui.html#propdef-outline', 'outline')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.outline")}}</p>
diff --git a/files/fr/web/css/overflow-anchor/guide_ancrage_défilement/index.html b/files/fr/web/css/overflow-anchor/guide_ancrage_défilement/index.html
new file mode 100644
index 0000000000..e50bb21aa3
--- /dev/null
+++ b/files/fr/web/css/overflow-anchor/guide_ancrage_défilement/index.html
@@ -0,0 +1,79 @@
+---
+title: 'Guide : ancrage du défilement (scroll anchoring)'
+slug: Web/CSS/overflow-anchor/Guide_ancrage_défilement
+tags:
+  - CSS
+  - Guide
+  - Intermédiaire
+translation_of: Web/CSS/overflow-anchor/Guide_to_scroll_anchoring
+---
+<div>{{CSSRef}}</div>
+
+<p>Lorsque vous naviguez sur le Web avec une connexion plus ou moins performante, vous avez déjà pu rencontrer le problème suivant : vous faites défiler verticalement le contenu d'une page qui est en cours de chargement puis, au milieu de votre lecture, le contenu se décale brutalement plus bas (parce que des images au-dessus ou d'autres éléments ont fini de charger et s'affichent enfin).</p>
+
+<p>L'ancrage du défilement (ou <em>scroll anchoring</em> en anglais) est une fonctionnalité des navigateurs qui vise à résoudre ce problème de « saut » (qui se produit lorsque l'utilisateur a déjà suffisamment fait défiler le contenu pour arriver sur une autre partie du document).</p>
+
+<h2 id="Comment_cela_fonctionne">Comment cela fonctionne ?</h2>
+
+<p>L'ancrage du défilement ajuste la position du défilement pour compenser les modification apportées en dehors de la zone d'affichage (<em>viewport</em>). Cela signifie que l'emplacement atteint par l'utilisateur reste dans la zone d'affichage (la position de défilement se retrouve donc implicitement modifiée en termes de distance parcourue sur le document).</p>
+
+<h2 id="Comment_activer_l'ancrage_du_défilement">Comment activer l'ancrage du défilement ?</h2>
+
+<p>Il n'y a rien à fait. Cette fonctionnalité est activée par défaut pour les navigateurs qui la prennent en charge. Dans la plupart des cas, ces sauts inattendus ne sont pas une expérience voulue.</p>
+
+<h2 id="Si_besoin_que_faire_pour_le_désactiver">Si besoin, que faire pour le désactiver ?</h2>
+
+<p>La spécification fournit une nouvelle propriété : {{cssxref("overflow-anchor")}}. Celle-ci peut être utilisée pour désactiver explicitement l'ancrage du défilement sur une partie ou sur l'ensemble du document. Cette propriété sert de mécanisme pour ne pas utiliser le nouveau comportement.</p>
+
+<p>Les valeurs utilisables pour cette propriété sont <code>auto</code> ou <code>none</code> :</p>
+
+<ul>
+ <li><code>auto</code> correspond à la valeur initiale : si c'est un navigateur compatible qui est utilisé, l'ancrage est activé et il devrait y avoir moins de déplacements brusques.</li>
+ <li><code>none</code> signifie qu'on choisit explicitement de ne pas utiliser l'ancrage du défilement pour tout ou partie du document.</li>
+</ul>
+
+<p>Pour désactiver l'ancrage sur l'ensemble du document, on pourra appliquer la propriété sur l'élément {{htmlelement("body")}} :</p>
+
+<pre class="brush: css">body {
+  overflow-anchor: none;
+} </pre>
+
+<p>Pour désactiver cette fonctionnalité sur une certaine partie du document, on ciblera <code>overflow-anchor: none</code> sur l'élément conteneur dans lequel l'utilisateur fait défiler le contenu :</p>
+
+<pre class="brush: css">.container {
+  overflow-anchor: none;
+} </pre>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong> : Dans la spécification, il est indiqué qu'il n'est pas possible de « revenir » avec l'ancrage dans un élément fils si l'ancrage a été désactivé sur un élément parent. Ainsi, si on désactive l'ancrage pour l'ensemble du document, on ne pourra pas appliquer (avec succès) <code>overflow-anchor: auto</code> à un autre endroit du document.</p>
+</div>
+
+<h3 id="Supression_triggers">Supression triggers</h3>
+
+<p>La spécification définit également certains évènements qui suppriment cette fonctionnalité où ça serait problématique. Si un évènement particulier se produit sur le nœud d'ancrage ou sur un ancêtre de celui-ci, l'ancrage est supprimé.</p>
+
+<p>Les évènements en question sont les modifications des <a href="/fr/docs/Web/CSS/Valeur_calculée">valeurs calculées</a> des propriétés suivantes :</p>
+
+<ul>
+ <li>{{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}} ou {{cssxref("bottom")}}</li>
+ <li>{{cssxref("margin")}} ou {{cssxref("padding")}}</li>
+ <li>Toute propriété relative à {{cssxref("width")}} ou à {{cssxref("height")}}</li>
+ <li>{{cssxref("position")}}</li>
+ <li>{{cssxref("transform")}}</li>
+</ul>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Si vous souhaitez appliquer une amélioration progressive et détecter si cette fonctionnalité est disponible dans le navigateur utilisé, vous pouvez utiliser <a href="/fr/docs/Web/CSS/@supports">les requêtes de fonctionnalité</a> afin de tester la prise en charge de la propriété <code>overflow-anchor</code>.</p>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.overflow-anchor")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://github.com/WICG/ScrollAnchoring/blob/master/explainer.md">Document d'explication sur le site du WICG (en anglais)</a></li>
+ <li><a href="https://blog.chromium.org/2017/04/scroll-anchoring-for-web-developers.html">L'ancrage du défilement pour les développeurs web - Blog Chromium (en anglais)</a></li>
+ <li><a href="https://blog.eqrion.net/pin-to-bottom/">Implémenter un élément avec le défilement fixe en bas (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/overflow-anchor/index.html b/files/fr/web/css/overflow-anchor/index.html
new file mode 100644
index 0000000000..79327c6f3f
--- /dev/null
+++ b/files/fr/web/css/overflow-anchor/index.html
@@ -0,0 +1,80 @@
+---
+title: overflow-anchor
+slug: Web/CSS/overflow-anchor
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/overflow-anchor
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>overflow-anchor</code></strong> permet d'éviter, lors du défilement, que le navigateur ajuste la position afin de minimiser le déplacement du contenu.</p>
+
+<p>Ce comportement est activé par défaut pour les navigateurs qui le prenne en charge. Aussi, cette propriété est uniquement nécessaire lorsque vous rencontrez des problèmes de défilement dans un document et que vous souhaitez désactiver ce comportement.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+overflow-anchor: auto;
+overflow-anchor: none;
+
+/* Valeurs globales */
+overflow-anchor: inherit;
+overflow-anchor: initial;
+overflow-anchor: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>L'élément peut devenir une ancre lorsque la position de défilement est ajustée.</dd>
+ <dt><code>none</code></dt>
+ <dd>L'élément ne sera pas sélectionné comme ancre.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Pour désactiver l'ancrage du défilement, on pourra utiliser cette propriété :</p>
+
+<pre class="brush: css">body {
+  overflow-anchor: none;
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Scroll Anchoring', '#propdef-overflow-anchor', 'overflow-anchor')}}</td>
+   <td>{{Spec2('CSS Scroll Anchoring')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.overflow-anchor")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/overflow-anchor/Guide_to_scroll_anchoring">Guide sur l'ancrage du défilement (<em>scroll anchoring</em>)</a></li>
+</ul>
diff --git a/files/fr/web/css/overflow-block/index.html b/files/fr/web/css/overflow-block/index.html
new file mode 100644
index 0000000000..f754f76cca
--- /dev/null
+++ b/files/fr/web/css/overflow-block/index.html
@@ -0,0 +1,140 @@
+---
+title: overflow-block
+slug: Web/CSS/overflow-block
+tags:
+  - CSS
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/overflow-block
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>overflow-block</code></strong> est une propriété logique qui définit ce qu'il faut afficher quand le contenu dépasse d'un élément de bloc sur les bords de bloc (ceux orthogonaux au sens d'écriture). On peut choisir d'afficher rien, une barre de défilement ou de laisser le contenu dépasser.</p>
+
+<div class="note">
+<p><strong>Note :</strong> La propriété <code>overflow-block</code> correspond à {{cssxref("overflow-y")}} ou {{cssxref("overflow-x")}} selon le mode d'écriture du document.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+overflow-block: visible;
+overflow-block: hidden;
+overflow-block: scroll;
+overflow-block: auto;
+
+/* Valeurs globales */
+overflow-block: inherit;
+overflow-block: initial;
+overflow-block: unset;
+</pre>
+
+<p>La propriété <code>overflow-block</code> se définit avec un mot-clé parmi ceux de la liste suivante.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>visible</code></dt>
+ <dd>Le contenu n'est pas rogné et peut être affiché en dehors des limites de bloc de la boîte.</dd>
+ <dt><code>hidden</code></dt>
+ <dd>Le contenu qui dépasse est masqué afin de ne pas dépasser dans l'axe de bloc. Aucune barre de défilement n'est affichée.</dd>
+ <dt><code>scroll</code></dt>
+ <dd>Le contenu est rogné si nécessaire selon l'axe de bloc pour tenir dans la boîte (de remplissage). Les navigateurs affichent des barres de défilement que le contenu soit rogné ou non (on évite ainsi d'avoir des barres qui apparaissent/disparaissent lorsque le contenu change). Les imprimantes peuvent imprimer le contenu qui dépasse.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Le comportement de cette valeur dépend de l'agent utilisateur. Si le contenu tient dans la boîte de remplissage, elle se comportera comme <code>visible</code> mais établira un nouveau contexte de formatage. Les navigateurs de bureau affichent des barres de défilement si le contenu dépasse.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;&lt;code&gt;overflow-block:hidden&lt;/code&gt; — masque le texte en dehors
+  &lt;div id="div1"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    &lt;/div&gt;
+  &lt;/li&gt;
+
+  &lt;li&gt;&lt;code&gt;overflow-block:scroll&lt;/code&gt; — ajoute une barre de défilement
+  &lt;div id="div2"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    &lt;/div&gt;
+  &lt;/li&gt;
+
+  &lt;li&gt;&lt;code&gt;overflow-block:visible&lt;/code&gt; — affiche le texte en dehors si besoin
+  &lt;div id="div3"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    &lt;/div&gt;
+  &lt;/li&gt;
+
+  &lt;li&gt;&lt;code&gt;overflow-block:auto&lt;/code&gt; — pour la plupart des navigateurs, équivalent à &lt;code&gt;scroll&lt;/code&gt;
+  &lt;div id="div4"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    &lt;/div&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;
+
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#div1,
+#div2,
+#div3,
+#div4 {
+  border: 1px solid black;
+  width:  250px;
+  height: 100px;
+}
+
+#div1 { overflow-block: hidden; margin-bottom: 12px;}
+#div2 { overflow-block: scroll; margin-bottom: 12px;}
+#div3 { overflow-block: visible; margin-bottom: 120px;}
+#div4 { overflow-block: auto; margin-bottom: 120px;}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<figure>
+<p>{{EmbedLiveSample("Exemples", "100%", "780")}}</p>
+</figure>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Overflow', '#propdef-overflow-block', 'overflow-block')}}</td>
+   <td>{{Spec2('CSS3 Overflow')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.overflow-block")}}</p>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li>Propriétés CSS associées : {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{cssxref("overflow")}}, {{cssxref("overflow-inline")}}, {{cssxref("overflow-x")}}, {{Cssxref("overflow-y")}}, {{cssxref("clip")}}, {{cssxref("display")}}</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Logical_Properties">Les propriétés logiques en CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Writing_Modes">Les modes d'écriture</a></li>
+</ul>
diff --git a/files/fr/web/css/overflow-clip-box-block/index.html b/files/fr/web/css/overflow-clip-box-block/index.html
new file mode 100644
index 0000000000..54c60574d8
--- /dev/null
+++ b/files/fr/web/css/overflow-clip-box-block/index.html
@@ -0,0 +1,157 @@
+---
+title: overflow-clip-box-block
+slug: Web/CSS/overflow-clip-box-block
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Mozilla/Gecko/Chrome/CSS/overflow-clip-box-block
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété CSS <strong><code>overflow-clip-box-block</code></strong> définit par rapport à quelle boîte est appliqué le rognement lorsque le contenu dépasse dans la direction de bloc (la direction orthogonale au sens d'écriture).</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+overflow-clip-box-block: padding-box;
+overflow-clip-box-block: content-box;
+
+/* Valeurs globales */
+overflow-clip-box-block: inherited;
+overflow-clip-box-block: initial;
+overflow-clip-box-block: unset;
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Sur Gecko, <code>padding-box</code> est, par défaut utilisé partout sauf pour <code>&lt;input type="text"&gt;</code> et les éléments semblables qui utilisent <code>content-box</code>. Par défaut, cette propriété est uniquement activée pour les feuilles de style de l'agent utilisateur et le contexte du chrome.</p>
+</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>padding-box</code></dt>
+ <dd>Avec ce mot-clé, le rognage est relatif à <a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#Les_propri%C3%A9t%C3%A9s_des_bo%C3%AEtes">la boîte de remplissage (<em>padding</em>)</a>.</dd>
+ <dt><code>content-box</code></dt>
+ <dd>Avec ce mot-clé, le rognage est relatif à <a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#Les_propri%C3%A9t%C3%A9s_des_bo%C3%AEtes">la boîte de contenu</a>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="padding-box">padding-box</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="things"&gt;
+  &lt;input value="ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ" class="scroll padding-box"&gt;
+  &lt;div class="scroll padding-box"&gt;&lt;span&gt;ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ&lt;/span&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.scroll {
+  overflow: auto;
+  padding: 0 30px;
+  width: 6em;
+  border: 1px solid black;
+  background: lime content-box;
+}
+
+.padding-box {
+  overflow-clip-box-block: padding-box;
+}</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">function scrollSomeElements() {
+  var elms = document.querySelectorAll('.scroll');
+  for (i=0; i &lt; elms.length; ++i) {
+    elms[i].scrollLeft=80;
+  }
+}
+var elt = document.queryElementsByTagName('body')[0];
+
+elt.addEventListener("load", scrollSomeElements, false);
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('padding-box')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété a été proposée au groupe de travail CSSWG du W3C. Elle n'est pas encore en voie de standardisation mais devrait apparaître dans {{SpecName("CSS3 Overflow")}} si c'est le cas.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatGeckoDesktop(59)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatGeckoMobile(59)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Cette propriété est contrôlée par la préférence <code>layout.css.overflow-clip-box.enabled</code> dont la valeur par défaut est <code>false</code>. Elle est uniquement activée pour les feuilles de style de l'agent utilisateur ou le contexte du chrome. Voir {{bug(966992)}}.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("text-overflow")}},</li>
+ <li>{{cssxref("white-space")}},</li>
+ <li>{{cssxref("overflow")}},</li>
+ <li>{{cssxref("overflow-x")}},</li>
+ <li>{{cssxref("overflow-y")}},</li>
+ <li>{{cssxref("clip")}},</li>
+ <li>{{cssxref("display")}}</li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/css/overflow-clip-box-inline/index.html b/files/fr/web/css/overflow-clip-box-inline/index.html
new file mode 100644
index 0000000000..e7df371778
--- /dev/null
+++ b/files/fr/web/css/overflow-clip-box-inline/index.html
@@ -0,0 +1,157 @@
+---
+title: overflow-clip-box-inline
+slug: Web/CSS/overflow-clip-box-inline
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Mozilla/Gecko/Chrome/CSS/overflow-clip-box-inline
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété CSS <strong><code>overflow-clip-box-inline</code></strong> définit par rapport à quelle boîte est appliqué le rognement lorsque le contenu dépasse dans la direction en ligne (la direction correspondant au sens d'écriture).</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+overflow-clip-box-inline: padding-box;
+overflow-clip-box-inline: content-box;
+
+/* Valeurs globales */
+overflow-clip-box-inline: inherited;
+overflow-clip-box-inline: initial;
+overflow-clip-box-inline: unset;
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Sur Gecko, <code>padding-box</code> est, par défaut utilisé partout sauf pour <code>&lt;input type="text"&gt;</code> et les éléments semblables qui utilisent <code>content-box</code>. Par défaut, cette propriété est uniquement activée pour les feuilles de style de l'agent utilisateur et le contexte du chrome.</p>
+</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>padding-box</code></dt>
+ <dd>Avec ce mot-clé, le rognage est relatif à <a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#Les_propri%C3%A9t%C3%A9s_des_bo%C3%AEtes">la boîte de remplissage (<em>padding</em>)</a>.</dd>
+ <dt><code>content-box</code></dt>
+ <dd>Avec ce mot-clé, le rognage est relatif à <a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#Les_propri%C3%A9t%C3%A9s_des_bo%C3%AEtes">la boîte de contenu</a>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="padding-box">padding-box</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="things"&gt;
+  &lt;input value="ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ" class="scroll padding-box"&gt;
+  &lt;div class="scroll padding-box"&gt;&lt;span&gt;ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ&lt;/span&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.scroll {
+  overflow: auto;
+  padding: 0 30px;
+  width: 6em;
+  border: 1px solid black;
+  background: lime content-box;
+}
+
+.padding-box {
+  overflow-clip-box-inline: padding-box;
+}</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">function scrollSomeElements() {
+  var elms = document.querySelectorAll('.scroll');
+  for (i=0; i &lt; elms.length; ++i) {
+    elms[i].scrollLeft=80;
+  }
+}
+var elt = document.queryElementsByTagName('body')[0];
+
+elt.addEventListener("load", scrollSomeElements, false);
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('padding-box')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété a été proposée au groupe de travail CSSWG du W3C. Elle n'est pas encore en voie de standardisation mais devrait apparaître dans {{SpecName("CSS3 Overflow")}} si c'est le cas.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatGeckoDesktop(59)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatGeckoMobile(59)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Cette propriété est contrôlée par la préférence <code>layout.css.overflow-clip-box.enabled</code> dont la valeur par défaut est <code>false</code>. Elle est uniquement activée pour les feuilles de style de l'agent utilisateur ou le contexte du chrome. Voir {{bug(966992)}}.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("text-overflow")}},</li>
+ <li>{{cssxref("white-space")}},</li>
+ <li>{{cssxref("overflow")}},</li>
+ <li>{{cssxref("overflow-x")}},</li>
+ <li>{{cssxref("overflow-y")}},</li>
+ <li>{{cssxref("clip")}},</li>
+ <li>{{cssxref("display")}}</li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/css/overflow-clip-box/index.html b/files/fr/web/css/overflow-clip-box/index.html
new file mode 100644
index 0000000000..997137220e
--- /dev/null
+++ b/files/fr/web/css/overflow-clip-box/index.html
@@ -0,0 +1,175 @@
+---
+title: overflow-clip-box
+slug: Web/CSS/overflow-clip-box
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Propriété raccourcie
+  - Reference
+translation_of: Mozilla/Gecko/Chrome/CSS/overflow-clip-box
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété <strong><code>overflow-clip-box</code></strong> permet de définir la boîte à laquelle faire référence lorsqu'il y a un dépassement du contenu. C'est une propriété raccourcie pour les propriétés {{cssxref("overflow-clip-box-inline")}} et {{cssxref("overflow-clip-box-block")}}.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+overflow-clip-box: padding-box;
+overflow-clip-box: content-box;
+
+/* Deux valeurs */
+overflow-clip-box: padding-box content-box;
+overflow-clip-box: content-box content-box;
+
+/* Valeurs globales */
+overflow-clip-box: inherited;
+overflow-clip-box: initial;
+overflow-clip-box: unset;
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Par défaut, sur Gecko, <code>padding-box</code> est utilisé partout mais <code>&lt;input type="text"&gt;</code> et les éléments similaires utilisent la valeur <code>content-box</code>. Avant Firefox 29, ce comportement était intégré en dur. Depuis, le comportement se base sur cette propriété qui peut être utilisée à d'autres endroits. On notera que cette propriété est uniquement activée pour les feuilles de styles définies au niveau de l'agent utilisateur et pour les contextes liés au chrome de l'application.</p>
+</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>padding-box</code></dt>
+ <dd>Ce mot-clé indique que le rognage du contenu qui dépasse sera fait par rapport à <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">la boîte de remplissage (<em>padding</em>)</a>.</dd>
+ <dt><code>content-box</code></dt>
+ <dd>Ce mot-clé indique que le rognage du contenu qui dépasse sera fait par rapport à <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">la boîte de contenu</a>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="things"&gt;
+  &lt;input value="ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ" class="scroll padding-box"&gt;
+  &lt;div class="scroll padding-box"&gt;&lt;span&gt;ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ&lt;/span&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.scroll {
+  overflow: auto;
+  padding: 0 30px;
+  width: 6em;
+  border: 1px solid black;
+  background: lime content-box;
+}
+
+.padding-box {
+  overflow-clip-box: padding-box;
+}
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">function scrollSomeElements() {
+  var elms = document.querySelectorAll('.scroll');
+  for (i=0; i &lt; elms.length; ++i) {
+    elms[i].scrollLeft=80;
+  }
+}
+var elt = document.queryElementsByTagName('body')[0];
+
+elt.addEventListener("load", scrollSomeElements, false);
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété a été proposée dans le cadre du groupe de travail CSS du W3C. Elle n'est pas encore sur le chemin du processus standard mais si elle est acceptée, elle fera vraisemblablement partie de la spécification {{SpecName("CSS3 Overflow")}}.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatGeckoDesktop("29.0")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Propriété raccourcie, gestion de deux valeurs</td>
+   <td>{{CompatGeckoDesktop("59")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatGeckoMobile("29.0")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Propriété raccourcie, gestion de deux valeurs</td>
+   <td>{{CompatGeckoMobile("59")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Cette propriété est contrôlée grâce à la préférence <code>layout.css.overflow-clip-box.enabled</code> dont la valeur par défaut est <code>false</code>. Elle est uniquement activée au sein des feuilles de style de l'agent utilisateur pour le chrome. Pour plus d'informations, voir {{bug(966992)}}.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("text-overflow")}},</li>
+ <li>{{cssxref("white-space")}},</li>
+ <li>{{cssxref("overflow")}},</li>
+ <li>{{cssxref("overflow-x")}},</li>
+ <li>{{cssxref("overflow-y")}},</li>
+ <li>{{cssxref("clip")}},</li>
+ <li>{{cssxref("display")}}</li>
+</ul>
diff --git a/files/fr/web/css/overflow-inline/index.html b/files/fr/web/css/overflow-inline/index.html
new file mode 100644
index 0000000000..bbec96456f
--- /dev/null
+++ b/files/fr/web/css/overflow-inline/index.html
@@ -0,0 +1,140 @@
+---
+title: overflow-inline
+slug: Web/CSS/overflow-inline
+tags:
+  - CSS
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/overflow-inline
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>overflow-inline</code></strong> est une propriété logique qui définit ce qu'il faut afficher quand le contenu dépasse d'une boîte sur les bords en ligne (ceux parallèles au sens d'écriture). On peut choisir d'afficher rien, une barre de défilement ou de laisser le contenu dépasser.</p>
+
+<div class="note">
+<p><strong>Note :</strong> La propriété <code>overflow-inline</code> correspond à {{cssxref("overflow-y")}} ou {{cssxref("overflow-x")}} selon le mode d'écriture du document.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+overflow-inline: visible;
+overflow-inline: hidden;
+overflow-inline: scroll;
+overflow-inline: auto;
+
+/* Valeurs globales */
+overflow-inline: inherit;
+overflow-inline: initial;
+overflow-inline: unset;
+</pre>
+
+<p>La propriété <code>overflow-inline</code> se définit avec un mot-clé parmi ceux de la liste suivante.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>visible</code></dt>
+ <dd>Le contenu n'est pas rogné et peut être affiché en dehors des limites en ligne de la boîte.</dd>
+ <dt><code>hidden</code></dt>
+ <dd>Le contenu qui dépasse est masqué afin de ne pas dépasser dans l'axe en ligne. Aucune barre de défilement n'est affichée.</dd>
+ <dt><code>scroll</code></dt>
+ <dd>Le contenu est rogné si nécessaire selon l'axe en ligne pour tenir dans la boîte (de remplissage). Les navigateurs affichent des barres de défilement que le contenu soit rogné ou non (on évite ainsi d'avoir des barres qui apparaissent/disparaissent lorsque le contenu change). Les imprimantes peuvent imprimer le contenu qui dépasse.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Le comportement de cette valeur dépend de l'agent utilisateur. Si le contenu tient dans la boîte de remplissage, elle se comportera comme <code>visible</code> mais établira un nouveau contexte de formatage. Les navigateurs de bureau affichent des barres de défilement si le contenu dépasse.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;&lt;code&gt;overflow-inline:hidden&lt;/code&gt; — masque le texte en dehors
+  &lt;div id="div1"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    &lt;/div&gt;
+  &lt;/li&gt;
+
+  &lt;li&gt;&lt;code&gt;overflow-inline:scroll&lt;/code&gt; — ajoute une barre de défilement
+  &lt;div id="div2"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    &lt;/div&gt;
+  &lt;/li&gt;
+
+  &lt;li&gt;&lt;code&gt;overflow-inline:visible&lt;/code&gt; — affiche le texte en dehors si besoin
+  &lt;div id="div3"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    &lt;/div&gt;
+  &lt;/li&gt;
+
+  &lt;li&gt;&lt;code&gt;overflow-inline:auto&lt;/code&gt; — pour la plupart des navigateurs, équivalent à &lt;code&gt;scroll&lt;/code&gt;
+  &lt;div id="div4"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    &lt;/div&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;
+
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#div1,
+#div2,
+#div3,
+#div4 {
+  border: 1px solid black;
+  width:  250px;
+  height: 100px;
+}
+
+#div1 { overflow-inline: hidden;}
+#div2 { overflow-inline: scroll;}
+#div3 { overflow-inline: visible;}
+#div4 { overflow-inline: auto;}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<figure>
+<p>{{EmbedLiveSample("Exemples", "100%", "270")}}</p>
+</figure>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Overflow', '#propdef-overflow-inline', 'overflow-inline')}}</td>
+   <td>{{Spec2('CSS3 Overflow')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.overflow-inline")}}</p>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li>Propriétés CSS associées : {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{cssxref("overflow")}}, {{cssxref("overflow-block")}}, {{cssxref("overflow-x")}}, {{cssxref("overflow-y")}}, {{cssxref("clip")}}, {{cssxref("display")}}</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Logical_Properties">Les propriétés logiques en CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Writing_Modes">Les modes d'écriture</a></li>
+</ul>
diff --git a/files/fr/web/css/overflow-wrap/index.html b/files/fr/web/css/overflow-wrap/index.html
new file mode 100644
index 0000000000..6cde7358d5
--- /dev/null
+++ b/files/fr/web/css/overflow-wrap/index.html
@@ -0,0 +1,153 @@
+---
+title: overflow-wrap
+slug: Web/CSS/overflow-wrap
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/overflow-wrap
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>overflow-wrap</code></strong> s'applique aux éléments en ligne (<em>inline</em>) et est utilisée afin de définir si le navigateur peut ou non faire la césure à l'intérieur d'un mot pour éviter le dépassement d'une chaîne qui serait trop longue afin qu'elle ne dépasse pas de la boîte.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/overflow-wrap.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note">
+<p><strong>Note :</strong> À la différence de {{cssxref("word-break")}}, <code>overflow-wrap</code> créera uniquement un saut de ligne si un mot entier ne peut pas être placé sur sa propre ligne sans dépasser.</p>
+</div>
+
+<p>À l'origine, cette propriété était une extension non-standard sans préfixe de Microsoft et intitulée <code>word-wrap</code>. Implémentée sous ce nom par la plupart des navigateurs depuis, elle a été renommée en <code>overflow-wrap</code> et <code>word-wrap</code> est devenu un alias.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Avec un mot-clé */
+overflow-wrap: normal;
+overflow-wrap: break-word;
+overflow-wrap: anywhere;
+
+/* Valeurs globales */
+overflow-wrap: inherit;
+overflow-wrap: initial;
+overflow-wrap: unset;
+</pre>
+
+<p>La propriété <code>overflow-wrap</code> peut être définie avec l'un des mots-clés suivants.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Indique que la césure d'une ligne ne peut avoir lieu qu'aux positions de césures normales.</dd>
+ <dt><code>anywhere</code></dt>
+ <dd>Indique que la césure pourra avoir lieu afin d'éviter le dépassement, y compris s'il n'y a pas de point de césure acceptable sur la ligne. Cela est notamment utile pour éviter le dépassement et qu'on a une longue ligne (un long mot ou une URL). Aucun caractère ne sera ajouté au point de césure. Les possibilités de rupture douces ajoutées par la césure sont prises en compte lors du calcul des tailles <code>min-content</code> intrinsèques.</dd>
+ <dt><code>break-word</code></dt>
+ <dd>Indique que les mots qui ne subissent habituellement pas de césure peuvent être scindés à n'importe quelle position s'il n'y a pas d'autres positions envisageables pour la césure de la ligne. Les possibilités de rupture douces ajoutées par la césure <strong>ne sont pas</strong> prises en compte lors du calcul des tailles <code>min-content</code> intrinsèques.</dd>
+ <dt>
+ <h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+ <pre class="syntaxbox">{{csssyntax}}</pre>
+ </dt>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  width: 13em;
+  margin: 2px;
+  background: gold;
+}
+
+.ow-anywhere {
+  overflow-wrap: anywhere;
+}
+
+.ow-break-word {
+  overflow-wrap: break-word;
+}
+
+.word-break {
+  word-break: break-all;
+}
+
+.hyphens {
+<code>  -webkit-hyphens: auto;
+  -ms-hyphens: auto;
+</code>  hyphens: auto;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;h3&gt;&lt;code&gt;normal&lt;/code&gt;&lt;/h3&gt;
+&lt;p&gt;They say the fishing is excellent at
+  Lake &lt;em class="normal"&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;,
+  though I've never been there myself.&lt;/p&gt;
+&lt;h3&gt;&lt;code&gt;overflow-wrap: anywhere&lt;/code&gt;&lt;/h3&gt;
+&lt;p&gt;They say the fishing is excellent at
+  Lake &lt;em class="ow-anywhere"&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;,
+  though I've never been there myself.&lt;/p&gt;
+&lt;h3&gt;&lt;code&gt;overflow-wrap: break-word&lt;/code&gt;&lt;/h3&gt;
+&lt;p&gt;They say the fishing is excellent at
+  Lake &lt;em class="ow-break-word"&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;,
+  though I've never been there myself. &lt;/p&gt;
+&lt;h3&gt;&lt;code&gt;word-break: break-all&lt;/code&gt;&lt;/h3&gt;
+&lt;p&gt;They say the fishing is excellent at
+  Lake &lt;em class="word-break"&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;,
+  though I've never been there myself.&lt;/p&gt;
+&lt;h3&gt;&lt;code&gt;hyphens: auto&lt;/code&gt;, without &lt;code&gt;lang&lt;/code&gt; attribute&lt;/h3&gt;
+&lt;p class="hyphens"&gt;They say the fishing is excellent at
+  Lake &lt;em&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;
+  though I've never been there myself. &lt;/p&gt;
+&lt;h3&gt;&lt;code&gt;hyphens: auto&lt;/code&gt;, English rules&lt;/h3&gt;
+&lt;p class="hyphens" lang="en"&gt;They say the fishing is excellent at
+  Lake &lt;em&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;,
+  though I've never been there myself.&lt;/p&gt;
+&lt;h3&gt;&lt;code&gt;hyphens: auto&lt;/code&gt;, German rules&lt;/h3&gt;
+&lt;p class="hyphens" lang="de"&gt;They say the fishing is excellent at
+  Lake &lt;em&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;,
+  though I've never been there myself.&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", '100%', 520)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text', '#propdef-overflow-wrap', 'overflow-wrap')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une <em>pull request</em> sur ce dépôt: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("css.properties.overflow-wrap")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("word-break")}}</li>
+ <li>{{cssxref("hyphens")}}</li>
+ <li>{{cssxref("text-overflow")}}</li>
+</ul>
diff --git a/files/fr/web/css/overflow-x/index.html b/files/fr/web/css/overflow-x/index.html
new file mode 100644
index 0000000000..ace75a305c
--- /dev/null
+++ b/files/fr/web/css/overflow-x/index.html
@@ -0,0 +1,153 @@
+---
+title: overflow-x
+slug: Web/CSS/overflow-x
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/overflow-x
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>overflow-x</code></strong> permet de définir les mécanismes à utiliser (rognage, ascenseurs, dépassement, etc.) lorsque le contenu dépasse des bords droit et gauche de la boîte de contenu.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Si {{cssxref("overflow-y")}} vaut <code>hidden</code>, <code>scroll</code> ou <code>auto</code> et que cette propriété vaut <code>visible</code> (la valeur par défaut), sa valeur calculée sera implicitement <code>auto</code>.</p>
+</div>
+
+<div>{{EmbedInteractiveExample("pages/css/overflow-x.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+overflow-x: visible;
+overflow-x: hidden;
+overflow-x: scroll;
+overflow-x: auto;
+
+/* Valeurs globales */
+overflow-x: inherit;
+overflow-x: initial;
+overflow-x: unset;
+</pre>
+
+<p>La propriété <code>overflow-x</code> est définie avec l'un des mots-clés définis ci-après.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>visible</code></dt>
+ <dd>Le contenu n'est pas rogné. Il peut être affiché en dehors de la boîte de remplissage (<em>padding</em>) à droite et à gauche malgré le manque d'espace.</dd>
+ <dt><code>hidden</code></dt>
+ <dd>Le contenu est rogné afin de tenir horizontalement dans la boîte de remplissage (<em>padding</em>) et aucun ascenseur horizontal n'est affiché.</dd>
+ <dt><code>scroll</code></dt>
+ <dd>Le contenu est rogné afin de tenir horizontalement dans la boîte de remplissage et le navigateur affiche des barres de défilement (ascenseurs) dans tous les cas. Cela permet d'éviter d'avoir des barres qui apparaissent / disparaissent dans un environnement dynamique. Les imprimantes peuvent imprimer le contenu qui dépasse.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Le comportement dépend de l'agent utilisateur. Les navigateurs de bureau comme Firefox peuvent afficher des barres de défilement si le contenu dépasse.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;&lt;code&gt;overflow-x:hidden&lt;/code&gt; — cache le texte en dehors de la boîte
+    &lt;div id="div1"&gt;
+      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
+    &lt;/div&gt;
+  &lt;/li&gt;
+
+  &lt;li&gt;&lt;code&gt;overflow-x:scroll&lt;/code&gt; — ajoute toujours un ascenseur
+    &lt;div id="div2"&gt;
+      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
+    &lt;/div&gt;
+  &lt;/li&gt;
+
+  &lt;li&gt;&lt;code&gt;overflow-x:visible&lt;/code&gt; — affiche le texte en dehors de la boîte si besoin
+    &lt;div id="div3"&gt;
+      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
+    &lt;/div&gt;
+  &lt;/li&gt;
+
+  &lt;li&gt;&lt;code&gt;overflow-x:auto&lt;/code&gt; — sur la plupart des navigateurs, cela sera équivalent à &lt;code&gt;scroll&lt;/code&gt;
+    &lt;div id="div4"&gt;
+      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
+    &lt;/div&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#div1, #div2, #div3, #div4 {
+  border: 1px solid black;
+  width:  250px;
+  margin-bottom: 12px;
+}
+
+#div1 {
+  overflow-x: hidden;
+}
+
+#div2 {
+  overflow-x: scroll;
+}
+
+#div3 {
+  overflow-x: visible;
+}
+
+#div4 {
+  overflow-x: auto;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<figure>
+<p>{{EmbedLiveSample("Exemples", "100%", "270")}}</p>
+</figure>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Overflow', '#propdef-overflow-x', 'overflow-x')}}</td>
+   <td>{{Spec2('CSS3 Overflow')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.overflow-x")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("text-overflow")}},</li>
+ <li>{{cssxref("white-space")}},</li>
+ <li>{{cssxref("overflow")}},</li>
+ <li>{{cssxref("overflow-y")}},</li>
+ <li>{{cssxref("clip")}},</li>
+ <li>{{cssxref("display")}}</li>
+</ul>
diff --git a/files/fr/web/css/overflow-y/index.html b/files/fr/web/css/overflow-y/index.html
new file mode 100644
index 0000000000..254e6ceafe
--- /dev/null
+++ b/files/fr/web/css/overflow-y/index.html
@@ -0,0 +1,158 @@
+---
+title: overflow-y
+slug: Web/CSS/overflow-y
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/overflow-y
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>overflow-y</code></strong> permet de définir les mécanismes à utiliser (rognage, ascenseurs, dépassement, etc.) lorsque le contenu dépasse des bords haut et bas de la boîte.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Si {{cssxref("overflow-x")}} vaut <code>hidden</code>, <code>scroll</code> ou <code>auto</code> et que cette propriété vaut <code>visible</code> (la valeur par défaut), la valeur calculée sera implicitement <code>auto</code>.</p>
+</div>
+
+<div>{{EmbedInteractiveExample("pages/css/overflow-y.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css  no-line-numbers">/* Valeurs avec un mot-clé */
+overflow-y: visible;
+overflow-y: hidden;
+overflow-y: scroll;
+overflow-y: auto;
+
+/* Valeurs globales */
+overflow-y: inherit;
+overflow-y: initial;
+overflow-y: unset;
+</pre>
+
+<p>La propriété <code>overflow-y</code> est définie avec un des mots-clés définis ci-après.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>visible</code></dt>
+ <dd>Le contenu n'est pas rogné. Il peut être affiché en dehors de la boîte de remplissage (<em>padding</em>) en haut et en bas malgré le manque d'espace.</dd>
+ <dt><code>hidden</code></dt>
+ <dd>Le contenu est rogné afin de tenir verticalement dans la boîte de remplissage (<em>padding</em>) et aucun ascenseur vertical n'est affiché.</dd>
+ <dt><code>scroll</code></dt>
+ <dd>Le contenu est rogné afin de tenir verticalement au sein de la boîte de remplissage (<em>padding</em>) et le navigateur affiche des barres de défilement (ascenseurs) dans tous les cas. Cela permet d'éviter d'avoir des barres qui apparaissent / disparaissent dans un environnement dynamique. Les imprimantes peuvent imprimer le contenu qui dépasse.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Le comportement dépend de l'agent utilisateur. Les navigateurs de bureau comme Firefox peuvent afficher des barres de défilement si le contenu dépasse.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;&lt;code&gt;overflow-y:hidden&lt;/code&gt; — cache le texte en dehors de la boîte
+  &lt;div id="div1"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    &lt;/div&gt;
+  &lt;/li&gt;
+
+  &lt;li&gt;&lt;code&gt;overflow-y:scroll&lt;/code&gt; — ajoute toujours un ascenseur
+  &lt;div id="div2"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    &lt;/div&gt;
+  &lt;/li&gt;
+
+  &lt;li&gt;&lt;code&gt;overflow-y:visible&lt;/code&gt; — affiche le texte en dehors de la boîte si besoin
+  &lt;div id="div3"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    &lt;/div&gt;
+  &lt;/li&gt;
+
+  &lt;li&gt;&lt;code&gt;overflow-y:auto&lt;/code&gt; — sur la plupart des navigateurs, cela sera équivalent à &lt;code&gt;scroll&lt;/code&gt;
+  &lt;div id="div4"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    &lt;/div&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;
+
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#div1, #div2, #div3,#div4 {
+  border: 1px solid black;
+  width:  250px;
+  height: 100px;
+}
+
+#div1 {
+  overflow-y: hidden;
+  margin-bottom: 12px;
+}
+
+#div2 {
+  overflow-y: scroll;
+  margin-bottom: 12px;
+}
+
+#div3 {
+  overflow-y: visible;
+  margin-bottom: 120px;
+}
+
+#div4 {
+  overflow-y: auto;
+  margin-bottom: 120px;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<figure>
+<p>{{EmbedLiveSample("Exemples", "100%", "780")}}</p>
+</figure>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Overflow', '#propdef-overflow-y', 'overflow-y')}}</td>
+   <td>{{Spec2('CSS3 Overflow')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.overflow-y")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("text-overflow")}}</li>
+ <li>{{cssxref("white-space")}}</li>
+ <li>{{cssxref("overflow")}}</li>
+ <li>{{cssxref("overflow-x")}}</li>
+ <li>{{cssxref("clip")}}</li>
+ <li>{{cssxref("display")}}</li>
+</ul>
diff --git a/files/fr/web/css/overflow/index.html b/files/fr/web/css/overflow/index.html
new file mode 100644
index 0000000000..2361debd6c
--- /dev/null
+++ b/files/fr/web/css/overflow/index.html
@@ -0,0 +1,175 @@
+---
+title: overflow
+slug: Web/CSS/overflow
+tags:
+  - CSS
+  - Propriété
+  - Propriété raccourcie
+  - Reference
+translation_of: Web/CSS/overflow
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>overflow</code></strong> est une <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">propriété raccourcie</a> qui définit comment gérer le dépassement du contenu d'un élément dans son bloc. Elle définit les valeurs des propriétés {{cssxref("overflow-x")}} et {{cssxref("overflow-y")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/overflow.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Lorsqu'on utilise la propriété <code>overflow</code> avec une autre valeur que <code>visible</code> (la valeur par défaut), cela entraîne la création <a href="/fr/docs/Web/CSS/Block_formatting_context">d'un nouveau contexte de formatage de bloc</a>. Cette création est nécessaire d'un point de vue technique. Ceci est nécessaire techniquement puisque si un élément flottant traverse l'élément avec barres de défilement, cela forcera l'encapsulation du contenu de ce dernier autour de l'élément flottant. L'encapsulation devrait alors se produire après chaque défilement de la barre et mènerait à une expérience utilisateur dégradée</p>
+
+<p>Afin que la propriété <code>overflow</code> puisse avoir un effet, le conteneur de niveau de bloc doit avoir une hauteur limite (définie grâce à {{cssxref("height")}} ou {{cssxref("max-height")}}) ou avoir <code>white-space</code> avec la valeur <code>nowrap.</code></p>
+
+<div class="note">
+<p><strong>Note :</strong> Si on définit un axe avec <code>visible</code> (la valeur par défaut) et qu'on définit l'autre axe avec une valeur différente, alors la valeur du premier axe (<code>visible</code>) sera considérée comme <code>auto</code>.</p>
+</div>
+
+<div class="note">
+<p><strong>Note </strong>: Lorsqu'on définit, via un script, la propriété <code>scrollTop</code> sur les éléments HTML pertinents, même lorsque <code>overflow</code> vaut <code>hidden</code>, il faut parfois faire défiler l'élément.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+overflow: visible;
+overflow: hidden;
+overflow: clip;
+overflow: scroll;
+overflow: auto;
+overflow: hidden visible;
+
+/* Valeurs globales */
+overflow: inherit;
+overflow: initial;
+overflow: unset;
+</pre>
+
+<p>La propriété <code>overflow</code> peut être définie grâce à un ou deux des mots-clés suivants. Si deux mots-clés sont utilisé, le premier sera appliqué à <code>overflow-x</code> et le second à <code>overflow-y</code>. Si une seule valeur est utilisée, elle sera appliquée à <code>overflow-x</code> et à <code>overflow-y</code>.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>visible</code></dt>
+ <dd>La valeur par défaut. Le contenu n'est pas rogné. Le contenu peut éventuellement être affiché en dehors de la boîte de remplissage (<em>padding</em>).</dd>
+ <dt><code>hidden</code></dt>
+ <dd>Le contenu est rogné si besoin pour s'inscrire dans la boîte de remplissage (<em>padding</em>) et aucune barre de défilement n'est affichée.</dd>
+ <dt><code>clip</code></dt>
+ <dd>Se comporte comme <code>hidden</code> au sens où le contenu est rogné pour s'inscrire dans la boîte de remplissage. Comme <code>hidden</code>, <code>clip</code> ne présente pas de barre de défilement mais contrairement à <code>hidden</code>, <code>clip</code> empêche tout défilement, y compris à l'aide de scripts. La boîte n'est pas un conteneur de défilement et ne définit pas de nouveau contexte de formatage. Si on souhaite obtenir un nouveau contexte de formatage, il faudra utiliser {{cssxref("display", "display: flow-root", "#flow-root")}}.<br>
+ Certains navigateurs ne prennent pas encore cette fonctionnalité en charge.</dd>
+ <dt><code>scroll</code></dt>
+ <dd>Le contenu est rogné pour s'inscrire dans la boîte de remplissage (<em>padding</em>) et les navigateurs de bureau affichent des barres de défilement dans tous les cas. Cela évite d'avoir des barres qui apparaissent et disparaissent sans cesse avec du contenu dynamique. Les imprimantes peuvent éventuellement imprimer le contenu qui dépasse.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Le comportement est laissé à la discrétion de l'agent utilisateur. Les navigateurs comme Firefox affichent des ascenseurs si le contenu dépasse dans la boîte de remplissage (<em>padding</em>)</dd>
+ <dt><code>overlay</code> {{Deprecated_inline}}</dt>
+ <dd>Cette valeur se comporte comme <code>auto</code> sauf que les barres de défilement sont au-dessus du contenu plutôt que de prendre de la place. Cette valeur est uniquement prise en charge par les navigateurs basés sur WebKit (Safari) ou Blink (Chrome, Opera).</dd>
+</dl>
+
+<h4 id="Extensions_propres_au_moteur_Mozilla">Extensions propres au moteur Mozilla</h4>
+
+<dl>
+ <dt><code>-moz-scrollbars-none </code>{{obsolete_inline}}</dt>
+ <dd><code>overflow:hidden</code> doit être utilisé à la place.
+ <p class="note"><strong>Note :</strong> À partir de Firefox 63, cette fonctionnalité est placée derrière une préférence qui doit être activée. Dans <code>about:config</code>, il faut passer <code>layout.css.overflow.moz-scrollbars.enabled</code> à <code>true</code>.</p>
+ </dd>
+ <dt><code>-moz-scrollbars-horizontal </code>{{Deprecated_inline}}</dt>
+ <dd>Utilisez {{cssxref("overflow-x")}} et {{cssxref("overflow-y")}} à la place.
+ <p class="note"><strong>Note :</strong> À partir de Firefox 63, cette fonctionnalité est placée derrière une préférence qui doit être activée. Dans <code>about:config</code>, il faut passer <code>layout.css.overflow.moz-scrollbars.enabled</code> à <code>true</code>.</p>
+ </dd>
+ <dt><code>-moz-scrollbars-vertical </code>{{Deprecated_inline}}</dt>
+ <dd>Utilisez {{cssxref("overflow-x")}} et {{cssxref("overflow-y")}} à la place.
+ <p class="note"><strong>Note :</strong> À partir de Firefox 63, cette fonctionnalité est placée derrière une préférence qui doit être activée. Dans <code>about:config</code>, il faut passer <code>layout.css.overflow.moz-scrollbars.enabled</code> à <code>true</code>.</p>
+ </dd>
+ <dt><code>-moz-hidden-unscrollable</code> {{non-standard_inline}}</dt>
+ <dd>Principalement utilisé en interne et par les thèmes. Cela désactive le défilement pour les éléments XML racines <code>&lt;html&gt;</code>, <code> &lt;body&gt;</code> (avec les flèches du clavier et la roue de la souris).</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">p {
+  width: 12em;
+  height: 6em;
+  border: dotted;
+
+  /* le contenu n'est pas rogné */
+  overflow: visible;
+}
+</pre>
+
+<p style="overflow: visible; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>visible</code> (default)<br>
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
+
+<pre class="brush: css">p {
+  /* pas d'ascenseur fourni */
+  overflow: hidden;
+}
+</pre>
+
+<p style="overflow: hidden; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>overflow: hidden</code><br>
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
+
+<pre class="brush: css">p {
+  /* les ascenseurs sont toujours affichés */
+  overflow: scroll;
+}
+</pre>
+
+<p style="overflow: scroll; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>overflow: scroll</code><br>
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
+
+<pre class="brush: css">p {
+  /* les ascenseurs sont affichés si nécessaires */
+  overflow: auto;
+}
+</pre>
+
+<p style="overflow: auto; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>overflow: auto</code><br>
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Overflow', '#propdef-overflow', 'overflow')}}</td>
+   <td>{{Spec2('CSS3 Overflow')}}</td>
+   <td>La syntaxe permet désormais d'utiliser une ou deux valeurs.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visufx.html#overflow', 'overflow')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.overflow")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("text-overflow")}},</li>
+ <li>{{cssxref("white-space")}},</li>
+ <li>{{cssxref("overflow-x")}},</li>
+ <li>{{cssxref("overflow-y")}},</li>
+ <li>{{cssxref("overflow-inline")}},</li>
+ <li>{{cssxref("overflow-block")}},</li>
+ <li>{{cssxref("clip")}},</li>
+ <li>{{cssxref("display")}}</li>
+</ul>
diff --git a/files/fr/web/css/overscroll-behavior-x/index.html b/files/fr/web/css/overscroll-behavior-x/index.html
new file mode 100644
index 0000000000..e061936d92
--- /dev/null
+++ b/files/fr/web/css/overscroll-behavior-x/index.html
@@ -0,0 +1,98 @@
+---
+title: overscroll-behavior-x
+slug: Web/CSS/overscroll-behavior-x
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/overscroll-behavior-x
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>overscroll-behavior-x</code></strong> définit le comportement de l'agent utilisateur lorsqu'on atteint la limite de la zone de défilement sur l'axe horizontal.</p>
+
+<div class="note">
+<p><strong>Note</strong> : Voir {{cssxref("overscroll-behavior")}} pour plus de détails.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+overscroll-behavior-x: auto;
+overscroll-behavior-x: contain;
+overscroll-behavior-x: none;
+
+/* Valeurs globales */
+overscroll-behavior-x: inherit;
+overscroll-behavior-x: initial;
+overscroll-behavior-x: unset;
+</pre>
+
+<p>La propriété <code>overscroll-behavior-x</code> est définie avec un des mots-clés définis ci-après.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Le dépassement de la zone de défilement se déroule normalement.</dd>
+ <dt><code>contain</code></dt>
+ <dd>Le comportement normal est utilisé à l'intérieur de l'élément pour lequel s'applique cette valeur (on a donc un effet de rebondissement) mais aucun effet associé n'a lieu sur les zones de défilement environnantes. Autrement dit, les éléments sous-jacents ne défilent pas.</dd>
+ <dt><code>none</code></dt>
+ <dd>Il n'y a pas d'effet associé sur les zones de défilement environnantes et on empêche le comportement normal de se produire sur l'élément lorsqu'on dépasse de la zone de défilement.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple <a href="https://mdn.github.io/css-examples/overscroll-behavior/overscroll-behavior-x"><code>overscroll-behavior-x</code> </a> (cf. <a href="https://github.com/mdn/css-examples/blob/master/overscroll-behavior/overscroll-behavior-x.html">le code source</a> associé), on dispose de deux boîtes de bloc, l'une contenue à l'intérieure de l'autre. La boîte englobante possède une grande largeur avec {{cssxref("width")}} afin que la page puisse défiler horizontalement. La boîte intérieure a une petite largeur (et une petite hauteur, définie avec {{cssxref("height")}}) afin de pouvoir être facilement contenue dans la zone d'affichage mais son contenu possède une grande largeur afin de défiler horizontalement.</p>
+
+<p>Par défaut, lorsqu'on fait défiler la boîte intérieure et qu'on atteint une limite de défilement, c'est toute la page qui commence à défiler. Si ce n'est pas le comportement souhaité, on peut empêcher ça en utilisant <code>overscroll-behavior-x: contain</code> sur la boîte intérieure :</p>
+
+<pre class="brush: css">main &gt; div {
+  height: 300px;
+  width: 500px;
+  overflow: auto;
+  position: relative;
+  top: 100px;
+  left: 100px;
+  overscroll-behavior-x: contain;
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Overscroll Behavior', '#propdef-overscroll-behavior-x', 'overscroll-behavior-x')}}</td>
+   <td>{{Spec2('Overscroll Behavior')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.overscroll-behavior-x")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developers.google.com/web/updates/2017/11/overscroll-behavior#demo">Take control of your scroll: customizing pull-to-refresh and overflow effects (en anglais)</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/css/overscroll-behavior-y/index.html b/files/fr/web/css/overscroll-behavior-y/index.html
new file mode 100644
index 0000000000..5cf1ba394b
--- /dev/null
+++ b/files/fr/web/css/overscroll-behavior-y/index.html
@@ -0,0 +1,92 @@
+---
+title: overscroll-behavior-y
+slug: Web/CSS/overscroll-behavior-y
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/overscroll-behavior-y
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>overscroll-behavior-y</code></strong> permet de contrôler le comportement de l'agent utilisateur lorsqu'on atteint la limite de la zone de défilement sur l'axe vertical.</p>
+
+<div class="note">
+<p><strong>Note</strong> : Voir {{cssxref("overscroll-behavior")}} pour plus de détails.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+overscroll-behavior-y: auto;
+overscroll-behavior-y: contain;
+overscroll-behavior-y: none;
+
+/* Valeurs globales */
+overscroll-behavior-y: inherit;
+overscroll-behavior-y: initial;
+overscroll-behavior-y: unset;
+</pre>
+
+<p>La propriété <code>overscroll-behavior-x</code> est définie avec un des mots-clés définis ci-après.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Le dépassement de la zone de défilement se déroule normalement.</dd>
+ <dt><code>contain</code></dt>
+ <dd>Le comportement normal est utilisé à l'intérieur de l'élément pour lequel s'applique cette valeur (on a donc un effet de rebondissement) mais aucun effet associé n'a lieu sur les zones de défilement environnantes. Autrement dit, les éléments sous-jacents ne défilent pas.</dd>
+ <dt><code>none</code></dt>
+ <dd>Il n'y a pas d'effet associé sur les zones de défilement environnantes et on empêche le comportement normal de se produire sur l'élément lorsqu'on dépasse de la zone de défilement.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">.messages {
+  height: 220px;
+  overflow: auto;
+  overscroll-behavior-y: contain;
+}</pre>
+
+<p>Voir {{cssxref("overscroll-behavior")}}  pour un exemple complet et plus de détails.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Overscroll Behavior', '#propdef-overscroll-behavior-y', 'overscroll-behavior-y')}}</td>
+   <td>{{Spec2('Overscroll Behavior')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.overscroll-behavior-y")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developers.google.com/web/updates/2017/11/overscroll-behavior#demo">Take control of your scroll: customizing pull-to-refresh and overflow effects (en anglais)</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/css/overscroll-behavior/index.html b/files/fr/web/css/overscroll-behavior/index.html
new file mode 100644
index 0000000000..e54eac7aa3
--- /dev/null
+++ b/files/fr/web/css/overscroll-behavior/index.html
@@ -0,0 +1,109 @@
+---
+title: overscroll-behavior
+slug: Web/CSS/overscroll-behavior
+tags:
+  - CSS
+  - Propriété
+  - Propriété raccourcie
+  - Reference
+translation_of: Web/CSS/overscroll-behavior
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>overscroll-behavior</code></strong> est une propriété raccourcie permettant de définir les propriétés {{cssxref("overscroll-behavior-x")}} et {{cssxref("overscroll-behavior-y")}}. Ces propriétés contrôlent le comportement du navigateur lorsqu'on dépasse la limite d'une zone de défilement (<em>scrolling</em>).</p>
+
+<p>Par défaut, les navigateurs mobiles fournissent un effet de rebondissement voire déclenchent un rafraîchissement de la page lorsqu'on défile jusqu'en haut ou jusqu'en bas de la page. Vous avez pu remarquer que, lorsqu'une boîte de dialogue possède du contenu qu'on peut faire défiler, si on atteint la limite de défilement pour ce contenu, c'est la page sous-jacente qui défilera sous la boîte de dialogue : c'est ce qu'on appelle <strong>le chaînage du défilement</strong> (<em>scroll chaining</em>).</p>
+
+<p>Dans certains cas, ces effets ne sont pas souhaitables. On peut alors utiliser <code>overscroll-behavior</code> pour éviter les chaînages intempestifs et les comportements du type "défiler pour rafraîchir".</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clés */
+overscroll-behavior: auto;
+overscroll-behavior: contain;
+overscroll-behavior: none;
+
+/* Valeurs avec deux mots-clés */
+overscroll-behavior: auto contain;
+
+/* Valeurs globales */
+overflow: inherit;
+overflow: initial;
+overflow: unset;
+</pre>
+
+<p>La propriété <code>overscroll-behavior</code> est définie avec un ou deux mots-clés parmi ceux de la liste ci-après.</p>
+
+<p>Lorsqu'on utilise cette propriété raccourcie avec deux valeurs, la première est utilisée pour <code>overscroll-behavior-x</code> et la seconde pour <code>overscroll-behavior-y</code>. Si une seule valeur est fournie, c'est cette même valeur qui est utilisée pour les deux propriétés.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Le dépassement de la zone de défilement se déroule normalement.</dd>
+ <dt><code>contain</code></dt>
+ <dd>Le comportement normal est utilisé à l'intérieur de l'élément pour lequel s'applique cette valeur (on a donc un effet de rebondissement) mais aucun effet associé n'a lieu sur les zones de défilement environnantes. Autrement dit, les éléments sous-jacents ne défilent pas.</dd>
+ <dt><code>none</code></dt>
+ <dd>Il n'y a pas d'effet associé sur les zones de défilement environnantes et on empêche le comportement normal de se produire sur l'élément lorsqu'on dépasse de la zone de défilement.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans notre exemple sur <code><a href="https://mdn.github.io/css-examples/overscroll-behavior/">overscroll-behavior</a></code> (cf. <a href="https://github.com/mdn/css-examples/tree/master/overscroll-behavior">le code source</a> associé), on affiche une page entière de contacts et une boîte de dialogue avec une fenêtre de discussion. </p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15778/example.png" style="border-style: solid; border-width: 1px; display: block; height: 622px; margin: 0px auto; width: 350px;"></p>
+
+<p>Ces deux zones possèdent du contenu qui entraîne leur défilement. Normalement, si on défile la fenêtre de discussion jusqu'à une limite de défilement, ce serait au tour de la liste de contacts de défiler en dessous. Cependant, cet effet n'est pas souhaitable ici. On utilise donc <code>overscroll-behavior-y</code> (<code>overscroll-behavior</code> fonctionnerait également) sur la fenêtre de discussion :</p>
+
+<pre class="brush: css">.messages {
+  height: 220px;
+  overflow: auto;
+  overscroll-behavior-y: contain;
+} </pre>
+
+<p>On souhaite également se débarasser des effets de bord lorsqu'on défile jusqu'en haut ou jusqu'en bas de la liste des contacts (Chrome pour Android rafraichit la page lorsqu'on défile après la limite haute par exemple). Pour cela, on utilise <code>overscroll-behavior: none</code> sur l'élément {{htmlelement("body")}} :</p>
+
+<pre class="brush: css">body {
+  margin: 0;
+  overscroll-behavior: none;
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Jusqu'à ce que le CSSWG publie son propre brouillon, la spécification est consutable sur <a href="https://wicg.github.io/overscroll-behavior/">le dépôt GitHub du WICG</a>.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Overscroll Behavior', '#propdef-overscroll-behavior', 'overscroll-behavior')}}</td>
+   <td>{{Spec2('CSS Overscroll Behavior')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.overscroll-behavior")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developers.google.com/web/updates/2017/11/overscroll-behavior#demo">Take control of your scroll: customizing pull-to-refresh and overflow effects (en anglais)</a></li>
+ <li>{{cssxref("-ms-scroll-chaining")}}</li>
+</ul>
diff --git a/files/fr/web/css/padding-block-end/index.html b/files/fr/web/css/padding-block-end/index.html
new file mode 100644
index 0000000000..cc97778ece
--- /dev/null
+++ b/files/fr/web/css/padding-block-end/index.html
@@ -0,0 +1,114 @@
+---
+title: padding-block-end
+slug: Web/CSS/padding-block-end
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/padding-block-end
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>padding-block-end</code></strong> définit le début logique de la zone de remplissage d'un élément de bloc. Cette propriété logique est traduite en une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à la propriété {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} ou {{cssxref("padding-left")}} selon les valeurs qui sont utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<p>Elle est à rapprocher des propriétés {{cssxref("padding-block-start")}}, {{cssxref("padding-inline-start")}} et {{cssxref("padding-inline-end")}} qui définissent les autres écarts de remplissage logiques d'un élément.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/padding-block-end.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+padding-block-end: 10px;
+padding-block-end: 1em;
+
+/* Valeurs de proportions */
+/* Type &lt;percentage&gt;      */
+padding-block-end: 5%;  /* Relatif à la largeur du bloc englobant */
+
+/* Valeurs globales */
+padding-block-end: inherit;
+padding-block-end: initial;
+padding-block-end: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>La propriété <code>padding-block-end</code> peut prendre les mêmes valeurs que la propriété {{cssxref("padding-left")}}.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exemple"&gt;Texte d'exemple et Lorem et IP sum&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  padding-block-end: 20px;
+  background-color: #C8C800;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-padding-block-end", "padding-block-end")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.padding-block-end")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes :
+  <ul>
+   <li>{{cssxref("padding-top")}},</li>
+   <li>{{cssxref("padding-right")}},</li>
+   <li>{{cssxref("padding-bottom")}},</li>
+   <li>{{cssxref("padding-left")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("writing-mode")}},</li>
+ <li>{{cssxref("direction")}},</li>
+ <li>{{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/padding-block-start/index.html b/files/fr/web/css/padding-block-start/index.html
new file mode 100644
index 0000000000..2af0e4d6fc
--- /dev/null
+++ b/files/fr/web/css/padding-block-start/index.html
@@ -0,0 +1,114 @@
+---
+title: padding-block-start
+slug: Web/CSS/padding-block-start
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/padding-block-start
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>padding-block-start</code></strong> définit le début logique de la zone de remplissage d'un élément de bloc. Cette propriété logique est traduite en une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à la propriété {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} ou {{cssxref("padding-left")}} selon les valeurs qui sont utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<p>Elle est à rapprocher des propriétés {{cssxref("padding-block-end")}}, {{cssxref("padding-inline-start")}} et {{cssxref("padding-inline-end")}} qui définissent les autres écarts de remplissage logiques d'un élément.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/padding-block-start.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css  no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+padding-block-start: 10px;
+padding-block-start: 1em;
+
+/* Valeurs de proportions */
+/* Type &lt;percentage&gt;      */
+padding-block-start: 5%;  /* Relatif à la largeur du bloc englobant */
+
+/* Valeurs globales */
+padding-block-start: inherit;
+padding-block-start: initial;
+padding-block-start: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>La propriété <code>padding-block-start</code> peut prendre les mêmes valeurs que la propriété {{cssxref("padding-left")}}.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exemple"&gt;Texte d'exemple et Lorem et IP sum&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  padding-block-start: 20px;
+  background-color: #C8C800;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-padding-block-start", "padding-block-start")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.padding-block-start")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes :
+  <ul>
+   <li>{{cssxref("padding-top")}},</li>
+   <li>{{cssxref("padding-right")}},</li>
+   <li>{{cssxref("padding-bottom")}},</li>
+   <li>{{cssxref("padding-left")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("writing-mode")}},</li>
+ <li>{{cssxref("direction")}},</li>
+ <li>{{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/padding-block/index.html b/files/fr/web/css/padding-block/index.html
new file mode 100644
index 0000000000..80025dd82e
--- /dev/null
+++ b/files/fr/web/css/padding-block/index.html
@@ -0,0 +1,116 @@
+---
+title: padding-block
+slug: Web/CSS/padding-block
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/padding-block
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>padding-block</code></strong> définit l'espace de remplissage (<em>padding</em>) pour le début et la fin de l'axe de bloc de l'élément. Cette propriété logique peut correspondre à différentes propriétés physiques selon le mode d'écriture de l'élément, sa direction et l'orientation du texte. Autrement dit, cette propriété peut correspondre aux propriétés {{cssxref("padding-top")}} et  {{cssxref("padding-bottom")}} ou à {{cssxref("padding-right")}} et {{cssxref("padding-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+padding-block: 10px 20px;  /* Des longueurs absolues */
+padding-block: 1em 2em;    /* Des longueurs relatives à la taille du texte */
+padding-block: 5% 2%;      /* Des longueurs relatives à la taille du bloc englobant */
+padding-block: 10px;       /* Une seule valeur définit le remplissage des deux côtés */
+
+/* Valeurs avec un mot-clé */
+padding-block: auto;
+
+/* Valeurs globales */
+padding-block: inherit;
+padding-block: initial;
+padding-block: unset;
+</pre>
+
+<p>Ces valeurs peuvent être définies individuellement grâce aux propriétés détaillées {{cssxref("padding-block-start")}} et {{cssxref("padding-block-end")}}. Pour définir le remplissage sur l'axe en ligne, on pourra utiliser la propriété logique raccourcie {{cssxref("padding-inline")}} qui définit {{cssxref("padding-inline-start")}} et {{cssxref("padding-inline-end")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>La propriété <code>padding-block</code> peut prendre les mêmes valeurs que la propriété {{cssxref("padding-left")}}.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.texteExemple {
+  writing-mode: vertical-rl;
+  padding-block: 20px 40px;
+  background-color: #c8c800;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="texteExemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-padding-block", "padding-block")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.padding-block")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes :
+  <ul>
+   <li>{{cssxref("padding-top")}},</li>
+   <li>{{cssxref("padding-right")}},</li>
+   <li>{{cssxref("padding-bottom")}},</li>
+   <li>{{cssxref("padding-left")}}</li>
+  </ul>
+ </li>
+ <li>Les propriétés influençant les propriétés logiques :
+  <ul>
+   <li>{{cssxref("writing-mode")}},</li>
+   <li>{{cssxref("direction")}},</li>
+   <li>{{cssxref("text-orientation")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/padding-bottom/index.html b/files/fr/web/css/padding-bottom/index.html
new file mode 100644
index 0000000000..f191ec7c27
--- /dev/null
+++ b/files/fr/web/css/padding-bottom/index.html
@@ -0,0 +1,120 @@
+---
+title: padding-bottom
+slug: Web/CSS/padding-bottom
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/padding-bottom
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>padding-bottom</code></strong> d'un élément ajuste la hauteur de la boîte de remplissage (<em>padding</em>) en haut de l'élément. La <a href="/fr/Apprendre/CSS/Les_bases/Le_mod%C3%A8le_de_bo%C3%AEte">zone de remplissage</a> correspond à l'espace entre le contenu et la bordure. Contrairement à {{cssxref("margin-bottom")}}, <code>padding-bottom</code> ne peut pas recevoir de valeurs négatives.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/padding-bottom.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La propriété raccourcie {{cssxref("padding")}} permet de paramétrer les dimensions des quatre côtés de cette boîte (y compris <code>padding-bottom</code> donc).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+padding-bottom: 0.5em;
+padding-bottom: 0;
+padding-bottom: 2cm;
+
+/* Valeurs de proportions */
+/* Type &lt;percentage&gt;      */
+padding-bottom: 10%;
+
+/* Valeurs globales */
+padding-bottom: inherit;
+padding-bottom: initial;
+padding-bottom: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Cette valeur définit une hauteur positive. Voir {{cssxref("&lt;length&gt;")}} pour plus de détails.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Un pourcentage en rapport avec la largeur du bloc englobant. Voir {{cssxref("&lt;percentage&gt;")}} pour plus de détails.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="padd"&gt;
+  Elle n’avait pas bu la moitié de la bouteille,
+  que sa tête touchait au plafond et qu’elle fut
+  forcée de se baisser pour ne pas se casser le
+  cou.
+&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.padd {
+  padding-bottom: 5em;
+  border: solid 1px;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","100%")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Box', '#the-padding', 'padding-bottom')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>Aucun changement depuis {{SpecName('CSS2.1', 'box.html#padding-properties', 'padding-bottom')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'padding-bottom')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>padding-bottom</code> peut désormais être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#padding-properties', 'padding-bottom')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Aucun changement depuis {{Specname('CSS1', '#padding-bottom', 'padding-bottom')}}.</td>
+  </tr>
+  <tr>
+   <td>{{Specname('CSS1', '#padding-bottom', 'padding-bottom')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.padding-bottom")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte">Le modèle de boîtes CSS</a></li>
+ <li>La propriété raccourcie {{cssxref("padding")}} qui permet de paramétrer <code>padding-bottom</code>, {{cssxref("padding-right")}}, {{cssxref("padding-top")}} et {{cssxref("padding-left")}}.</li>
+</ul>
diff --git a/files/fr/web/css/padding-inline-end/index.html b/files/fr/web/css/padding-inline-end/index.html
new file mode 100644
index 0000000000..b226bc62bd
--- /dev/null
+++ b/files/fr/web/css/padding-inline-end/index.html
@@ -0,0 +1,114 @@
+---
+title: padding-inline-end
+slug: Web/CSS/padding-inline-end
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/padding-inline-end
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété<strong> <code>padding-inline-end</code></strong> définit le décalage avec la fin de la zone de remplissage d'un élément, selon le mode d'écriture, la directionnalité et l'orientation du texte. Elle correspond à la propriété {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} ou {{cssxref("padding-left")}} slon les valeurs définies poru {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<p>Les autres parties « logiques » du remplissage sont définies grâce aux propriétés {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}} et {{cssxref("padding-inline-start")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/padding-inline-end.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+padding-inline-end: 10px;
+padding-inline-end: 1em;
+
+/* Valeurs de proportions */
+/* Type &lt;percentage&gt;      */
+padding-inline-end: 5%;  /* Relatif à la largeur du bloc englobant */
+
+/* Valeurs globales */
+padding-inline-end: inherit;
+padding-inline-end: initial;
+padding-inline-end: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>La propriété <code>padding-inline-end</code> peut prendre les mêmes valeurs que la propriété {{cssxref("padding-left")}}.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exemple"&gt;Texte d'exemple Lorem y psoum&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  padding-inline-end: 20px;
+  background-color: #C8C800;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-padding-inline-end", "padding-inline-end")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.padding-inline-end")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes :
+  <ul>
+   <li>{{cssxref("padding-top")}},</li>
+   <li>{{cssxref("padding-right")}},</li>
+   <li>{{cssxref("padding-bottom")}},</li>
+   <li>{{cssxref("padding-left")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("writing-mode")}},</li>
+ <li>{{cssxref("direction")}},</li>
+ <li>{{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/padding-inline-start/index.html b/files/fr/web/css/padding-inline-start/index.html
new file mode 100644
index 0000000000..4e3ab291af
--- /dev/null
+++ b/files/fr/web/css/padding-inline-start/index.html
@@ -0,0 +1,114 @@
+---
+title: padding-inline-start
+slug: Web/CSS/padding-inline-start
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/padding-inline-start
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété<strong> <code>padding-inline-start</code></strong> définit le décalage avec le début de la zone de remplissage d'un élément, selon le mode d'écriture, la directionnalité et l'orientation du texte. Elle correspond à la propriété {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} ou {{cssxref("padding-left")}} selon les valeurs définies pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<p>Les autres parties « logiques » du remplissage sont définies grâce aux propriétés {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}} et {{cssxref("padding-inline-end")}}.</p>
+
+<p>{{EmbedInteractiveExample("pages/css/padding-inline-start.html")}}</p>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+padding-inline-start: 10px;
+padding-inline-start: 1em;
+
+/* Valeurs de proportions */
+/* Type &lt;percentage&gt;      */
+padding-inline-start: 5%;  /* Relatif à la largeur du bloc englobant */
+
+/* Valeurs globales */
+padding-inline-start: inherit;
+padding-inline-start: initial;
+padding-inline-start: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>La propriété <code>padding-inline-start</code> peut prendre les mêmes valeurs que la propriété {{cssxref("padding-left")}}.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  padding-inline-start: 20px;
+  background-color: #C8C800;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-padding-inline-start", "padding-inline-start")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.padding-inline-start")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes :
+  <ul>
+   <li>{{cssxref("padding-top")}},</li>
+   <li>{{cssxref("padding-right")}},</li>
+   <li>{{cssxref("padding-bottom")}},</li>
+   <li>{{cssxref("padding-left")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("writing-mode")}},</li>
+ <li>{{cssxref("direction")}},</li>
+ <li>{{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/padding-inline/index.html b/files/fr/web/css/padding-inline/index.html
new file mode 100644
index 0000000000..380dfcda04
--- /dev/null
+++ b/files/fr/web/css/padding-inline/index.html
@@ -0,0 +1,116 @@
+---
+title: padding-inline
+slug: Web/CSS/padding-inline
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/padding-inline
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>padding-inline</code></strong> définit l'espace de remplissage (<em>padding</em>) pour le début et la fin de l'axe en ligne de l'élément. Cette propriété logique peut correspondre à différentes propriétés physiques selon le mode d'écriture de l'élément, sa direction et l'orientation du texte. Autrement dit, cette propriété peut correspondre aux propriétés {{cssxref("padding-top")}} et  {{cssxref("padding-bottom")}} ou à {{cssxref("padding-right")}} et {{cssxref("padding-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<pre class="brush:css no-line-numbers notranslate">/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+padding-inline: 10px 20px;  /* Des longueurs absolues */
+padding-inline: 1em 2em;    /* Des longueurs relatives à la taille du texte */
+padding-inline: 5% 2%;      /* Des longueurs relatives à la taille du bloc englobant */
+padding-inline: 10px;       /* Une seule valeur définit le remplissage des deux côtés */
+
+/* Valeurs avec un mot-clé */
+padding-inline: auto;
+
+/* Valeurs globales */
+padding-inline: inherit;
+padding-inline: initial;
+padding-inline: unset;
+</pre>
+
+<p>Ces valeurs peuvent être définies individuellement grâce aux propriétés détaillées {{cssxref("padding-inline-start")}} et {{cssxref("padding-inline-end")}}. Pour définir le remplissage sur l'axe de bloc, on pourra utiliser la propriété logique raccourcie {{cssxref("padding-block")}} qui définit {{cssxref("padding-block-start")}} et {{cssxref("padding-block-end")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>La propriété <code>padding-inline</code> peut prendre les mêmes valeurs que la propriété {{cssxref("padding-left")}}.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.texteExemple {
+  writing-mode: vertical-rl;
+  padding-inline: 20px 40px;
+  background-color: #c8c800;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+  &lt;p class="texteExemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-padding-inline", "padding-inline")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.padding-inline")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes :
+  <ul>
+   <li>{{cssxref("padding-top")}},</li>
+   <li>{{cssxref("padding-right")}},</li>
+   <li>{{cssxref("padding-bottom")}},</li>
+   <li>{{cssxref("padding-left")}}</li>
+  </ul>
+ </li>
+ <li>Les propriétés influençant les propriétés logiques :
+  <ul>
+   <li>{{cssxref("writing-mode")}},</li>
+   <li>{{cssxref("direction")}},</li>
+   <li>{{cssxref("text-orientation")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/padding-left/index.html b/files/fr/web/css/padding-left/index.html
new file mode 100644
index 0000000000..164ce17636
--- /dev/null
+++ b/files/fr/web/css/padding-left/index.html
@@ -0,0 +1,120 @@
+---
+title: padding-left
+slug: Web/CSS/padding-left
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/padding-left
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>padding-left</code></strong> d'un élément correspond à l'espace nécessaire à la gauche d'un élément. La <a href="/fr/Apprendre/CSS/Les_bases/Le_mod%C3%A8le_de_bo%C3%AEte">zone de remplissage</a> correspond à l'espace entre le contenu et la bordure. <code>padding-left</code> ne peut pas recevoir de valeurs négatives.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/padding-left.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La propriété raccourcie {{cssxref("padding")}} permet de paramétrer les dimensions des quatre côtés de cette boîte (y compris <code>padding-left</code> donc).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+padding-left: 0.5em;
+padding-left: 0;
+padding-left: 2cm;
+
+/* Valeurs de proportions */
+/* Type &lt;percentage&gt;      */
+padding-left: 10%;
+
+/* Valeurs globales */
+padding-left: inherit;
+padding-left: initial;
+padding-left: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Cette valeur définit une largeur positive. Voir {{cssxref("&lt;length&gt;")}} pour plus de détails.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Un pourcentage en rapport avec la largeur du bloc englobant. Voir {{cssxref("&lt;percentage&gt;")}} pour plus de détails.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="padd"&gt;
+  Elle n’avait pas bu la moitié de la bouteille,
+  que sa tête touchait au plafond et qu’elle fut
+  forcée de se baisser pour ne pas se casser le
+  cou.
+&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.padd {
+  padding-left: 20%;
+  border: solid 1px;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","100%")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Box', '#the-padding', 'padding-left')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>Aucun changement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'padding-left')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>padding-left</code> peut désormais être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#padding-properties', 'padding-left')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Aucun changement.</td>
+  </tr>
+  <tr>
+   <td>{{Specname('CSS1', '#padding-left', 'padding-left')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("css.properties.padding-left")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte">Le modèle de boîtes CSS</a></li>
+ <li>La propriété raccourcie {{cssxref("padding")}} qui permet de paramétrer <code>padding-top</code>, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} et {{cssxref("padding-left")}}.</li>
+</ul>
diff --git a/files/fr/web/css/padding-right/index.html b/files/fr/web/css/padding-right/index.html
new file mode 100644
index 0000000000..bdc3db6f3b
--- /dev/null
+++ b/files/fr/web/css/padding-right/index.html
@@ -0,0 +1,122 @@
+---
+title: padding-right
+slug: Web/CSS/padding-right
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/padding-right
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>padding-right</code></strong> d'un élément correspond à l'espace nécessaire à la droite d'un élément. La <a href="/fr/Apprendre/CSS/Les_bases/Le_mod%C3%A8le_de_bo%C3%AEte" title="http://developer.mozilla.org/en/CSS/Box_model#padding">zone de remplissage</a> correspond à l'espace entre le contenu et la bordure. <code>padding-right</code> ne peut pas recevoir de valeurs négatives.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/padding-right.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note">
+<p><strong>Note :</strong> La propriété raccourcie {{cssxref("padding")}} permet de paramétrer les dimensions des quatre côtés de cette boîte (y compris <code>padding-right</code> donc).</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+padding-right: 0.5em;
+padding-right: 0;
+padding-right: 2cm;
+
+/* Valeurs de proportions */
+/* Type &lt;percentage&gt;      */
+padding-right: 10%;
+
+/* Valeurs globales */
+padding-right: inherit;
+padding-right: initial;
+padding-right: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Cette valeur définit une largeur positive. Voir {{cssxref("&lt;length&gt;")}} pour plus de détails.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Un pourcentage en rapport avec la largeur du bloc englobant. Voir {{cssxref("&lt;percentage&gt;")}} pour plus de détails.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="padd"&gt;
+  Elle n’avait pas bu la moitié de la bouteille,
+  que sa tête touchait au plafond et qu’elle fut
+  forcée de se baisser pour ne pas se casser le
+  cou.
+&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.padd {
+  padding-right: 20%;
+  border: solid 1px;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","100%")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Box', '#the-padding', 'padding-right')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>Aucun changement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'padding-right')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>padding-right</code> peut désormais être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#padding-properties', 'padding-right')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Aucun changement.</td>
+  </tr>
+  <tr>
+   <td>{{Specname('CSS1', '#padding-right', 'padding-right')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.padding-right")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte">Le modèle de boîtes CSS</a></li>
+ <li>La propriété raccourcie {{cssxref("padding")}} qui permet de paramétrer <code>padding-right</code>, {{cssxref("padding-top")}}, {{cssxref("padding-bottom")}} et {{cssxref("padding-left")}}.</li>
+</ul>
diff --git a/files/fr/web/css/padding-top/index.html b/files/fr/web/css/padding-top/index.html
new file mode 100644
index 0000000000..076e4a9f04
--- /dev/null
+++ b/files/fr/web/css/padding-top/index.html
@@ -0,0 +1,122 @@
+---
+title: padding-top
+slug: Web/CSS/padding-top
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/padding-top
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>padding-top</code></strong> d'un élément ajuste la hauteur de la boîte de remplissage (<em>padding</em>) en haut de l'élément.</p>
+
+<p>La <a href="/fr/Apprendre/CSS/Les_bases/Le_mod%C3%A8le_de_bo%C3%AEte">zone de remplissage</a> correspond à l'espace entre le contenu et la bordure. Contrairement à {{cssxref("margin-top")}}, <code>padding-top</code> ne peut pas recevoir de valeurs négatives.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/padding-top.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La propriété raccourcie {{cssxref("padding")}} permet de paramétrer les dimensions des quatre côtés de cette boîte (y compris <code>padding-top</code> donc).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+padding-top: 0.5em;
+padding-top: 0;
+padding-top: 2cm;
+
+/* Valeurs de proportions */
+/* Type &lt;percentage&gt;      */
+padding-top: 10%;
+
+/* Valeurs globales */
+padding-top: inherit;
+padding-top: initial;
+padding-top: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Cette valeur définit une hauteur positive. Voir {{cssxref("&lt;length&gt;")}} pour plus de détails.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Un pourcentage en rapport avec la largeur du bloc englobant. Voir {{cssxref("&lt;percentage&gt;")}} pour plus de détails.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="padd"&gt;
+  Elle n’avait pas bu la moitié de la bouteille,
+  que sa tête touchait au plafond et qu’elle fut
+  forcée de se baisser pour ne pas se casser le
+  cou.
+&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.padd {
+  padding-top: 5em;
+  border: solid 1px;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","100%")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Box', '#the-padding', 'padding-top')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>Aucun changement depuis {{SpecName('CSS2.1', 'box.html#padding-properties', 'padding-top')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'padding-top')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>padding-top</code> peut désormais être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#padding-properties', 'padding-top')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Aucun changement depuis {{Specname('CSS1', '#padding-top', 'padding-top')}}.</td>
+  </tr>
+  <tr>
+   <td>{{Specname('CSS1', '#padding-top', 'padding-top')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.padding-top")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte">Le modèle de boîtes CSS</a></li>
+ <li>La propriété raccourcie {{cssxref("padding")}} qui permet de paramétrer <code>padding-top</code>, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} et {{cssxref("padding-left")}}.</li>
+</ul>
diff --git a/files/fr/web/css/padding/index.html b/files/fr/web/css/padding/index.html
new file mode 100644
index 0000000000..e5b53a52e6
--- /dev/null
+++ b/files/fr/web/css/padding/index.html
@@ -0,0 +1,148 @@
+---
+title: padding
+slug: Web/CSS/padding
+tags:
+  - CSS
+  - Propriété
+  - Propriété raccourcie
+  - Reference
+translation_of: Web/CSS/padding
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>padding</code></strong> est <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">une propriété raccourcie</a> qui permet de définir les différents écarts de remplissage sur les quatre côtés d'un élément (cf. <a href="/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte#Les_propriétés_des_boîtes">les boîtes CSS</a>). Elle synthétise {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/padding.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte" title="http://developer.mozilla.org/en/CSS/Box_model#padding">zone de remplissage</a> correspond à l'espace entre le contenu de l'élément et sa bordure. Les valeurs négatives ne sont pas autorisées.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Le <em>padding</em> permet de créer un espace supplémentaire à l'intérieur d'un élément. La marge ({{cssxref("margin")}}) permet quant à elle de créer un espace supplémentaire à l'extérieur de l'élément.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css">/* On applique la même valeur aux quatre côtés */
+padding: 1em;
+
+/* vertical | horizontal */
+padding: 5% 10%;
+
+/* haut | horizontal | bas */
+padding: 1em 2em 2em;
+
+/* haut | droit | bas | gauche */
+padding: 5px 1em 0 2em;
+
+/* Valeurs globales */
+padding: inherit;
+padding: initial;
+padding: unset;
+</pre>
+
+<p>Selon la quantité de valeurs utilisées, on a un effet différent. Chaque valeur peut être une longueur (<code><a href="#length">&lt;length&gt;</a></code>) ou un pourcentage (<code><a href="#percentage">&lt;percentage&gt;</a></code>). Les valeurs négatives ne sont pas autorisées.</p>
+
+<ul>
+ <li><strong>Une valeur</strong> applique le même écart aux 4 côtés.</li>
+ <li><strong>Deux valeurs</strong> appliquent le premier écart en haut et en bas et le second sur les côtés droit et gauche.</li>
+ <li><strong>Trois valeurs</strong> appliquent le premier écart en haut, le deuxième à droite et à gauche et le troisième en bas.</li>
+ <li><strong>Quatre valeurs</strong> appliquent le premier écart en haut, le deuxième à droite, le troisième en bas et le quatrième à gauche.</li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>Les valeurs permettent de définir une, deux, trois ou quatre valeurs pour les écarts de remplissage. On peut utiliser des valeurs de type :</p>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Définit un écart fixe. Voir la page {{cssxref("&lt;length&gt;")}} sur les valeurs de ce type.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Définit un écart relatif à la <strong>largeur</strong> du bloc englobant. Voir la page {{cssxref("&lt;percentage&gt;")}} pour plus d'informations sur les valeurs de ce type.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;h4&gt;Coucou le monde !&lt;/h4&gt;
+&lt;h3&gt;Le remplissage n'est pas le même ici.&lt;/h3&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">h4 {
+  background-color: green;
+  padding: 50px 20px 20px 50px;
+}
+
+h3 {
+  background-color: blue;
+  padding: 400px 5%;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples',"100%","100%")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Box', '#the-padding', 'padding')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>Aucun changement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'padding')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>padding</code> peut être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#propdef-padding', 'padding')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Aucun changement.</td>
+  </tr>
+  <tr>
+   <td>{{Specname('CSS1', '#padding', 'padding')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.padding")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="internal" href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte" title="en/CSS/box model">CSS : Le modèle de boîtes</a></li>
+ <li>Les quatres propriétés détaillées synthétisées par <code>padding</code> :
+  <ul>
+   <li>{{cssxref("padding-top")}}</li>
+   <li>{{cssxref("padding-right")}}</li>
+   <li>{{cssxref("padding-bottom")}}</li>
+   <li>{{cssxref("padding-left")}}.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/page-break-after/index.html b/files/fr/web/css/page-break-after/index.html
new file mode 100644
index 0000000000..3d88e13bf6
--- /dev/null
+++ b/files/fr/web/css/page-break-after/index.html
@@ -0,0 +1,153 @@
+---
+title: page-break-after
+slug: Web/CSS/page-break-after
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/page-break-after
+---
+<div>{{CSSRef}}</div>
+
+<div class="blockIndicator warning">
+<p><strong>Attention !</strong> Cette propriété a été remplacée par la propriété {{cssxref("break-after")}}.</p>
+</div>
+
+<p>La propriété CSS <strong><code>page-break-after</code></strong> permet d'ajuster les sauts de page placés <em>après</em> l'élément courant.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+page-break-after: auto;
+page-break-after: always;
+page-break-after: avoid;
+page-break-after: left;
+page-break-after: right;
+page-break-after: recto;
+page-break-after: verso;
+
+/* Valeurs globales */
+page-break-after: inherit;
+page-break-after: initial;
+page-break-after: unset;
+</pre>
+
+<p>Cette propriété s'applique aux éléments de blocs qui génèrent une boîte. Elle ne s'appliquera pas à un {{HTMLElement("div")}} qui ne génère pas de boîte.</p>
+
+<h2 id="Synonymes_avec_break-after">Synonymes avec <code>break-after</code></h2>
+
+<p>La propriété <code>page-break-after</code> est désormais remplacée par {{cssxref("break-after")}}.</p>
+
+<p>Si pour des raisons de compatibilité, on doit traiter <code>page-break-after</code> comme synonyme, on pourra utiliser le tableau de correspondance des valeurs suivant :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><code>page-break-after</code></th>
+   <th scope="col"><code>break-after</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>auto</code></td>
+   <td><code>auto</code></td>
+  </tr>
+  <tr>
+   <td><code>left</code></td>
+   <td><code>left</code></td>
+  </tr>
+  <tr>
+   <td><code>right</code></td>
+   <td><code>right</code></td>
+  </tr>
+  <tr>
+   <td><code>avoid</code></td>
+   <td><code>avoid</code></td>
+  </tr>
+  <tr>
+   <td><code>always</code></td>
+   <td><code>page</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Valeur initiale. Les sauts de page sont automatiques (ni forcés, ni interdits).</dd>
+ <dt><code>always</code></dt>
+ <dd>Le saut de page est toujours forcé après l'élément.</dd>
+ <dt><code>avoid</code></dt>
+ <dd>Les sauts de page sont évités après l'élément.</dd>
+ <dt><code>left</code></dt>
+ <dd>Le saut de page est forcé après l'élément afin que la prochaine page soit mise en forme comme une page gauche.</dd>
+ <dt><code>right</code></dt>
+ <dd>Le saut de page est forcé après l'élément afin que la prochaine page soit mise en forme comme une page droite.</dd>
+ <dt><code>recto</code> {{experimental_inline}}</dt>
+ <dd>Si la page progresse de gauche à droite, cette valeur est équivalente à <code>right</code>. Si la page progresse de droite à gauche, elle est synonyme de <code>left</code>.</dd>
+ <dt><code>verso</code> {{experimental_inline}}</dt>
+ <dd>Si la page progresse de gauche à droite, cette valeur est équivalente à <code>left</code>. Si la page progresse de droite à gauche, elle est synonyme de <code>right</code>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">/* On force une nouvelle page à la suite */
+/* d'une note en bas de page             */
+div.footnotes {
+  page-break-after: always;
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Logical Properties', '#page', 'recto and verso')}}</td>
+   <td>{{Spec2('CSS Logical Properties')}}</td>
+   <td>Ajout des valeurs <code>recto</code> et <code>verso</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Paged Media', '#page-break-after', 'page-break-after')}}</td>
+   <td>{{Spec2('CSS3 Paged Media')}}</td>
+   <td>Cette propriété peut désormais être étendues aux lignes de tableau et aux groupe de lignes de tableau.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'page.html#propdef-page-break-after', 'page-break-after')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.page-break-after")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("break-before")}}</li>
+ <li>{{cssxref("break-after")}}</li>
+ <li>{{cssxref("break-inside")}}</li>
+ <li>{{cssxref("page-break-before")}}</li>
+ <li>{{cssxref("page-break-inside")}}</li>
+ <li>{{cssxref("orphans")}}</li>
+ <li>{{cssxref("widows")}}</li>
+</ul>
diff --git a/files/fr/web/css/page-break-before/index.html b/files/fr/web/css/page-break-before/index.html
new file mode 100644
index 0000000000..d6e1df056d
--- /dev/null
+++ b/files/fr/web/css/page-break-before/index.html
@@ -0,0 +1,151 @@
+---
+title: page-break-before
+slug: Web/CSS/page-break-before
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/page-break-before
+---
+<div>{{CSSRef}}</div>
+
+<div class="blockIndicator warning">
+<p><strong>Attention !</strong> Cette propriété a été remplacée par la propriété {{cssxref("break-before")}}.</p>
+</div>
+
+<p>La propriété CSS <strong><code>page-break-before</code></strong> permet d'ajuster les sauts de page placés <em>avant</em> l'élément courant.Cette propriété s'applique aux éléments de blocs qui génèrent une boîte. Elle ne s'appliquera pas à un {{HTMLElement("div")}} qui ne génère pas de boîte.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+page-break-before: auto;
+page-break-before: always;
+page-break-before: avoid;
+page-break-before: left;
+page-break-before: right;
+page-break-before: recto;
+page-break-before: verso;
+
+/* Valeurs globales */
+page-break-before: inherit;
+page-break-before: initial;
+page-break-before: unset;
+</pre>
+
+<h2 id="Synonymes_avec_break-before">Synonymes avec <code>break-before</code></h2>
+
+<p>La propriété <code>page-break-before</code> est désormais remplacée par {{cssxref("break-before")}}.</p>
+
+<p>Pour des raisons de compatibilité, si on traite <code>page-break-before</code> comme un synonyme de <code>break-before</code>, on pourra utiliser le tableau de correspondance suivant :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><code>page-break-before</code></th>
+   <th scope="col"><code>break-before</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>auto</code></td>
+   <td><code>auto</code></td>
+  </tr>
+  <tr>
+   <td><code>left</code></td>
+   <td><code>left</code></td>
+  </tr>
+  <tr>
+   <td><code>right</code></td>
+   <td><code>right</code></td>
+  </tr>
+  <tr>
+   <td><code>avoid</code></td>
+   <td><code>avoid</code></td>
+  </tr>
+  <tr>
+   <td><code>always</code></td>
+   <td><code>page</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Valeur initiale. Les sauts de page sont automatiques (ni forcés, ni interdits).</dd>
+ <dt><code>always</code></dt>
+ <dd>Le saut de page est toujours forcé avant l'élément.</dd>
+ <dt><code>avoid</code></dt>
+ <dd>Les sauts de page sont évités avant l'élément.</dd>
+ <dt><code>left</code></dt>
+ <dd>Le saut de page est forcé avant l'élément afin que la prochaine page soit mise en forme comme une page gauche.</dd>
+ <dt><code>right</code></dt>
+ <dd>Le saut de page est forcé avant l'élément afin que la prochaine page soit mise en forme comme une page droite.</dd>
+ <dt><code>recto</code> {{experimental_inline}}</dt>
+ <dd>Si la page progresse de gauche à droite, cette valeur est équivalente à <code>right</code>. Si la page progresse de droite à gauche, elle est synonyme de <code>left</code>.</dd>
+ <dt><code>verso</code> {{experimental_inline}}</dt>
+ <dd>Si la page progresse de gauche à droite, cette valeur est équivalente à <code>left</code>. Si la page progresse de droite à gauche, elle est synonyme de <code>right</code>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">/* Pour éviter d'avoir un saut de page avant */
+/* une note dans un div                      */
+div.note {
+    page-break-before: avoid;
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Logical Properties', '#logical-page', 'recto and verso')}}</td>
+   <td>{{Spec2('CSS Logical Properties')}}</td>
+   <td>Ajout des valeurs <code>recto</code> et <code>verso</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Paged Media', '#page-break-before', 'page-break-before')}}</td>
+   <td>{{Spec2('CSS3 Paged Media')}}</td>
+   <td>Cette propriété peut désormais être étendues aux lignes de tableau et aux groupe de lignes de tableau.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'page.html#propdef-page-break-before', 'page-break-before')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.page-break-before")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("break-before")}}</li>
+ <li>{{cssxref("break-after")}}</li>
+ <li>{{cssxref("break-inside")}}</li>
+ <li>{{cssxref("page-break-after")}}</li>
+ <li>{{cssxref("page-break-inside")}}</li>
+ <li>{{cssxref("orphans")}}</li>
+ <li>{{cssxref("widows")}}</li>
+</ul>
diff --git a/files/fr/web/css/page-break-inside/index.html b/files/fr/web/css/page-break-inside/index.html
new file mode 100644
index 0000000000..cf16f15c01
--- /dev/null
+++ b/files/fr/web/css/page-break-inside/index.html
@@ -0,0 +1,164 @@
+---
+title: page-break-inside
+slug: Web/CSS/page-break-inside
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/page-break-inside
+---
+<div>{{CSSRef}}</div>
+
+<div class="blockIndicator warning">
+<p><strong>Attention !</strong> Cette propriété a été remplacée par la propriété {{cssxref("break-inside")}}.</p>
+</div>
+
+<p>La propriété <strong><code>page-break-inside</code></strong> ajuste la façon dont sont appliqués les sauts de page au sein de l'élément courant.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+page-break-inside: auto;
+page-break-inside: avoid;
+
+/* Valeurs globales */
+page-break-inside: inherit;
+page-break-inside: initial;
+page-break-inside: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Valeur initiale. Les sauts de page sont automatiques (ni forcés, ni interdits).</dd>
+ <dt><code>avoid</code></dt>
+ <dd>L'agent utilisateur évite d'insérer un saut de page au sein de l'élément.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Alias_avec_break-inside">Alias avec <code>break-inside</code></h2>
+
+<p>La propriété <code>page-break-inside</code> a désormais été remplacée par la propriété {{cssxref("break-inside")}}.</p>
+
+<p>Pour des raisons de compatibilité, <code>page-break-inside</code> devrait être considérée par les navigateurs comme synonyme de <code>break-inside</code>. De cette façon, les sites utilisant <code>page-break-inside</code> pourront continuer de fonctionner. Voici un sous-ensemble des valeurs de cette propriété et des correspondances</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><code>page-break-inside</code></th>
+   <th scope="col"><code>break-inside</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>auto</code></td>
+   <td><code>auto</code></td>
+  </tr>
+  <tr>
+   <td><code>avoid</code></td>
+   <td><code>avoid</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="page"&gt;
+  &lt;p&gt;Un premier paragraphe.&lt;/p&gt;
+  &lt;section class="list"&gt;
+    &lt;span&gt;Une liste&lt;/span&gt;
+    &lt;ol&gt;
+      &lt;li&gt;Un&lt;/li&gt;
+&lt;!--       &lt;li&gt;Deux&lt;/li&gt; --&gt;
+    &lt;/ol&gt;
+  &lt;/section&gt;
+  &lt;ul&gt;
+    &lt;li&gt;Un&lt;/li&gt;
+&lt;!--     &lt;li&gt;Deux&lt;/li&gt; --&gt;
+  &lt;/ul&gt;
+  &lt;p&gt;Un deuxième paragraphe.&lt;/p&gt;
+  &lt;p&gt;Un troisième paragraphe, un peu plus long.&lt;/p&gt;
+  &lt;p&gt;Un quatrième paragraphe, un peu plus long voire plus long que le troisième.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.page {
+  background-color: #8cffa0;
+  height: 90px;
+  width: 200px;
+  columns: 1;
+  column-width: 100px;
+}
+
+.list, ol, ul, p {
+  break-inside: avoid;
+}
+
+p {
+  background-color: #8ca0ff;
+}
+
+ol, ul, .list {
+  margin: 0.5em 0;
+  display: block;
+  background-color: orange;
+}
+
+p:first-child {
+  margin-top: 0;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 400, 160)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Paged Media', '#page-break-inside', 'page-break-inside')}}</td>
+   <td>{{Spec2('CSS3 Paged Media')}}</td>
+   <td>Permet d'appliquer cette propriété sur plus d'éléments.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'page.html#propdef-page-break-inside', 'page-break-inside')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.page-break-inside")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("break-before")}}</li>
+ <li>{{cssxref("break-after")}}</li>
+ <li>{{cssxref("break-inside")}}</li>
+ <li>{{cssxref("page-break-after")}}</li>
+ <li>{{cssxref("page-break-before")}}</li>
+ <li>{{cssxref("orphans")}}</li>
+ <li>{{cssxref("widows")}}</li>
+</ul>
diff --git a/files/fr/web/css/paint()/index.html b/files/fr/web/css/paint()/index.html
new file mode 100644
index 0000000000..189965b358
--- /dev/null
+++ b/files/fr/web/css/paint()/index.html
@@ -0,0 +1,111 @@
+---
+title: paint()
+slug: Web/CSS/paint()
+tags:
+  - CSS
+  - Fonction
+  - Houdini
+  - Reference
+  - Web
+translation_of: Web/CSS/paint()
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La fonction CSS <strong><code>paint()</code></strong> définit une {{cssxref("&lt;image&gt;")}} dont la valeur est générée par un <em>PaintWorklet</em>.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">paint(<var>workletName</var>, <var>parameters</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code><var>workletName</var></code></dt>
+ <dd>Le nom du <em>worklet</em> enregistré.</dd>
+ <dt><code><var>parameters</var></code></dt>
+ <dd>Des paramètres supplémentaires optionnels, passés aux <em>paintWorklet</em>.</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Exemples</h2>
+
+<p>Il est possible de passer des arguments supplémentaires grâce à la fonction CSS <code>paint()</code>. Dans cet exemple, on passe deux arguments : le premier indiquant si l'arrière-plan est rempli ou si on utilise juste son contour et le second indiquant la largeur de ce contour :</p>
+
+<pre class="brush: html hidden notranslate">&lt;ul&gt;
+    &lt;li&gt;item 1&lt;/li&gt;
+    &lt;li&gt;item 2&lt;/li&gt;
+    &lt;li&gt;item 3&lt;/li&gt;
+    &lt;li&gt;item 4&lt;/li&gt;
+    &lt;li&gt;item 5&lt;/li&gt;
+    &lt;li&gt;item 6&lt;/li&gt;
+    &lt;li&gt;item 7&lt;/li&gt;
+    &lt;li&gt;item 8&lt;/li&gt;
+    &lt;li&gt;item 9&lt;/li&gt;
+    &lt;li&gt;item 10&lt;/li&gt;
+    &lt;li&gt;item 11&lt;/li&gt;
+    &lt;li&gt;item 12&lt;/li&gt;
+    &lt;li&gt;item 13&lt;/li&gt;
+    &lt;li&gt;item 14&lt;/li&gt;
+    &lt;li&gt;item 15&lt;/li&gt;
+    &lt;li&gt;item 16&lt;/li&gt;
+    &lt;li&gt;item 17&lt;/li&gt;
+    &lt;li&gt;item 18&lt;/li&gt;
+    &lt;li&gt;item 19&lt;/li&gt;
+    &lt;li&gt;item 20&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<pre class="brush: js hidden notranslate">  CSS.paintWorklet.addModule('https://mdn.github.io/houdini-examples/cssPaint/intro/worklets/hilite.js');
+</pre>
+
+<pre class="brush: css notranslate">li {
+   --boxColor: hsla(55, 90%, 60%, 1.0);
+   background-image: paint(hollowHighlights, stroke, 2px);
+}
+
+li:nth-of-type(3n) {
+   --boxColor: hsla(155, 90%, 60%, 1.0);
+   background-image: paint(hollowHighlights, filled,  3px);
+}
+
+li:nth-of-type(3n+1) {
+   --boxColor: hsla(255, 90%, 60%, 1.0);
+   background-image: paint(hollowHighlights, stroke, 1px);
+}</pre>
+
+<p>On a ici ajouté <a href="/fr/docs/Web/CSS/--*">une propriété personnalisée</a> dans le sélecteur du bloc. Ces propriétés personnalisées peuvent être manipulées par le <em>PaintWorklet</em>.</p>
+
+<p>{{EmbedLiveSample("Examples", 300, 300)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Painting API', '#paint-notation', 'Paint Notation')}}</td>
+   <td>{{Spec2('CSS Painting API')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.types.image.paint")}}</p>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref('PaintWorklet')}}</li>
+ <li>{{domxref('CSS Painting API')}}</li>
+ <li><a href="/fr/docs/Web/API/CSS_Painting_API/Guide">Utiliser l'API CSS Painting</a></li>
+ <li>{{cssxref("&lt;image&gt;")}}</li>
+ <li>{{domxref("canvas")}}</li>
+</ul>
diff --git a/files/fr/web/css/paint-order/index.html b/files/fr/web/css/paint-order/index.html
new file mode 100644
index 0000000000..3e0e34f287
--- /dev/null
+++ b/files/fr/web/css/paint-order/index.html
@@ -0,0 +1,116 @@
+---
+title: paint-order
+slug: Web/CSS/paint-order
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+  - SVG
+  - Web
+translation_of: Web/CSS/paint-order
+---
+<div>{{CSSRef}}{{seecompattable}}</div>
+
+<p>La propriété <code><strong>paint-order</strong></code> permet de contrôler l'ordre dans lequel le remplissage, les marqueurs de peinture et le contour du texte et des formes sont dessinés.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Normal */
+paint-order: normal;
+
+/* Valeur unique */
+/* le contour est dessiné en premier, puis */
+/* le remplissage puis les marqueurs */
+paint-order: stroke;
+/* les marqueurs sont dessinés en premier, */
+/* suivis du remplissage et du contour */
+paint-order: markers;
+
+/* Plusieurs valeurs */
+/* Le contour est dessiné en premier puis */
+/* le remplissage puis les marqueurs */
+paint-order: stroke fill;
+/* Les marqueurs sont dessinés en premiers */
+/* puis le contour, puis le remplissage */
+paint-order: markers stroke fill;
+</pre>
+
+<p>La valeur par défaut, utilisée si aucune valeur n'est fournie, sera <code>fill</code>, <code>stroke</code>, <code>markers</code>.</p>
+
+<p>Lorsqu'une seule valeur est indiquée, c'est celle-ci qui est appliquée par défaut suivi des deux autres selon l'ordre par défaut. Lorsque deux valeurs sont indiquées, elles sont appliquées dans cet ordre puis suivi de la troisième.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Pour cette propriété, les marqueurs sont uniquement utilisés dans le cas de formes SVG qui utilisent les propriétés <code>marker-*</code> (e.g. <code><a href="/fr/docs/Web/SVG/Attribute/marker-start">marker-start</a></code>) ou l'élément <code><a href="/fr/docs/Web/SVG/Element/marker">&lt;marker&gt;</a></code>. Les marqueurs ne sont pas appliqués sur le texte HTML, dans ce cas, seul l'ordre entre <code>stroke</code> et <code>fill</code> importe.</p>
+</div>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Les différents niveaux sont appliqués dans l'ordre normal.</dd>
+ <dt><code>stroke</code></dt>
+ <dt> </dt>
+ <dt><code>fill</code></dt>
+ <dt><code>markers</code></dt>
+ <dd>Indiquent les valeurs dans l'ordre dans lequel on veut qu'elles soient peintes.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="SVG">SVG</h3>
+
+<pre class="brush: html">&lt;svg xmlns="http://www.w3.org/2000/svg" width="400" height="200"&gt;
+  &lt;text x="10" y="75"&gt;stroke in front&lt;/text&gt;
+  &lt;text x="10" y="150" class="stroke-behind"&gt;stroke behind&lt;/text&gt;
+&lt;/svg&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">text {
+  font-family: sans-serif;
+  font-size: 50px;
+  font-weight: bold;
+  fill: black;
+  stroke: red;
+  stroke-width: 4px;
+}
+
+.stroke-behind {
+  paint-order: stroke fill;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '100%', 165)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('SVG2', 'painting.html#PaintOrder', 'paint-order')}}</td>
+   <td>{{Spec2('SVG2')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.paint-order")}}</p>
diff --git a/files/fr/web/css/percentage/index.html b/files/fr/web/css/percentage/index.html
new file mode 100644
index 0000000000..338b562069
--- /dev/null
+++ b/files/fr/web/css/percentage/index.html
@@ -0,0 +1,97 @@
+---
+title: <percentage>
+slug: Web/CSS/percentage
+tags:
+  - CSS
+  - Reference
+  - Type
+translation_of: Web/CSS/percentage
+---
+<div>{{CSSRef}}</div>
+
+<p>Le type de données CSS <strong><code>&lt;percentage&gt;</code></strong> représente une valeur exprimée en pourcentages. De nombreuses propriétés CSS utilisent des valeurs en pourcentages, la plupart du temps pour déterminer des tailles en fonction de la taille des éléments parent.</p>
+
+<p>De nombreuses propriétés CSS utilisent des pourcentages : {{cssxref("width")}}, {{cssxref("margin")}}, {{cssxref("padding")}}, etc.. Les pourcentages peuvent aussi être vus avec {{cssxref("font-size")}}, où la taille du texte est directement en relation avec celle de son parent.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Seules les valeurs calculées sont héritées. Ainsi, même si une valeur en pourcentage est utilisée sur la propriété parent, une valeur réelle, comme une largeur en pixel pour une valeur {{cssxref("&lt;length&gt;")}}, sera accessible sur la propriété héritée, pas la valeur en pourcentage.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Les valeurs de type <code>&lt;percentage&gt;</code> sont formées d'un {{cssxref("&lt;number&gt;")}} immédiatement suivi par le signe pourcentage <code>%</code>. Comme pour toutes les valeurs avec unité en CSS, il n'y a aucun espace entre le '%' et le nombre.</p>
+
+<h2 id="Interpolation">Interpolation</h2>
+
+<p>Les valeurs du type <code>&lt;percentage&gt;</code> peuvent être interpolées de manière à rendre les animations possibles. Dans ce cas l'interpolation se fait par des nombres réels à virgule flottante. La rapidité de l'interpolation est déterminée par la {{cssxref("timing-function","fonction de temporisation","",1)}} associée à l'animation.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="width_et_margin-left"><code>width</code> et <code>margin-left</code></h3>
+
+<pre class="brush: html">&lt;div style="background-color:#0000FF;"&gt;
+  &lt;div style="width:50%;margin-left:20%;background-color:#00FF00;"&gt;
+    width : 50%, left-margin : 20%
+  &lt;/div&gt;
+  &lt;div style="width:30%;margin-left:60%;background-color:#FF0000;"&gt;
+    width : 30%, left-margin : 60%
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Le fragment de HTML précédent sera affiché de cette façon :</p>
+
+<p>{{EmbedLiveSample('width_et_margin-left', '100%', '140')}}</p>
+
+<h3 id="font-size"><code>font-size</code></h3>
+
+<pre class="brush: html">&lt;div style="font-size:18px;"&gt;
+  &lt;p&gt;Texte en taille normale (18px)&lt;/p&gt;
+  &lt;p&gt;&lt;span style="font-size:50%;"&gt;50%&lt;/span&gt;&lt;/p&gt;
+  &lt;p&gt;&lt;span style="font-size:200%;"&gt;200%&lt;/span&gt;&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Le fragment HTML précédent donnera ce résultat :</p>
+
+<p>{{EmbedLiveSample('font-size')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Values', '#percentages', '&lt;percentage&gt;')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td>Aucune modification significative.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#percentages', '&lt;percentage&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Aucune modification significative depuis la spécification CSS de niveau 2 (première révision).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'syndata.html#percentage-units', '&lt;percentage&gt;')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Aucune modification depuis la spécification CSS de niveau 1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#percentage-units', '&lt;percentage&gt;')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.types.percentage")}}</p>
diff --git a/files/fr/web/css/perspective-origin/index.html b/files/fr/web/css/perspective-origin/index.html
new file mode 100644
index 0000000000..6505dac1ab
--- /dev/null
+++ b/files/fr/web/css/perspective-origin/index.html
@@ -0,0 +1,389 @@
+---
+title: perspective-origin
+slug: Web/CSS/perspective-origin
+tags:
+  - CSS
+  - Propriété
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/perspective-origin
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>perspective-origin</code></strong> détermine la poisition depuis laquelle le spectateur regarde le document. Elle est utilisée comme point de fuite par la propriété {{cssxref("perspective")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/perspective-origin.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Les propriétés <code>perspective-origin</code> et {{cssxref("perspective")}} sont à rattacher à l'élément parent de l'élément qu'on veut placer dans un espace 3D. En revanche, la fonction <code><a href="/fr/docs/Web/CSS/transform-function/perspective">perspective()</a></code> s'applique à même l'élément qu'on veut placer en 3D.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css  no-line-numbers">/* Syntaxe avec une valeur */
+perspective-origin: x-position;
+
+/* Syntaxe avec deux valeurs */
+perspective-origin: x-position y-position;
+
+/* Lorsque x-position et y-position sont des mots-clés */
+/* on peut aussi avoir la forme suivante valide        */
+perspective-origin: y-position x-position;
+
+/* Valeurs globales */
+perspective-origin: inherit;
+perspective-origin: initial;
+perspective-origin: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><em>x-position</em></dt>
+ <dd>Indique l'abscisse de la position du point de fuite. La valeur peut être :
+ <ul>
+  <li>De type {{cssxref("&lt;length-percentage&gt;")}} : la position est indiquée comme une longueur absolue ou relativement à la largeur de l'élément. La valeur peut être négative.</li>
+  <li><code>left</code> : un mot-clé qui est un alias pour indiquer une longueur nulle.</li>
+  <li><code>center</code> : un mot-clé qui est un alias pour indiquer une valeur de pourcentage de <code>50%</code>.</li>
+  <li><code>right</code> : un mot-clé qui est un alias pour indiquer un pourcentage de <code>100%</code>.</li>
+ </ul>
+ </dd>
+ <dt><em>y-position</em></dt>
+ <dd>Indique l'ordonnée de la position du point de fuite. La valeur peut être :
+ <ul>
+  <li>De type {{cssxref("&lt;length-percentage&gt;")}} : la position est indiquée comme une longueur absolue ou relativement à la hauteur de l'élément. La valeur peut être négative.</li>
+  <li>De type {{cssxref("&lt;length&gt;")}} : la position est indiquée avec une valeur de longueur. La valeur peut être négative.</li>
+  <li><code>top</code> : un mot-clé qui est un alias pour indiquer une longueur nulle.</li>
+  <li><code>center</code> : un mot-clé qui est un alias pour indiquer une valeur de pourcentage de <code>50%</code>.</li>
+  <li><code>bottom</code> : un mot-clé qui est un alias pour indiquer un pourcentage de <code>100%</code>.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Cubes_avec_des_valeurs_communes_pour_perspective-origin">Cubes avec des valeurs communes pour <code>perspective-origin</code></h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;section&gt;
+&lt;figure&gt;
+  &lt;caption&gt;&lt;code&gt;perspective-origin: top left;&lt;/code&gt;&lt;/caption&gt;
+    &lt;div class="container"&gt;
+    &lt;div class="cube potl"&gt;
+      &lt;div class="face front"&gt;1&lt;/div&gt;
+      &lt;div class="face back"&gt;2&lt;/div&gt;
+      &lt;div class="face right"&gt;3&lt;/div&gt;
+      &lt;div class="face left"&gt;4&lt;/div&gt;
+      &lt;div class="face top"&gt;5&lt;/div&gt;
+      &lt;div class="face bottom"&gt;6&lt;/div&gt;
+    &lt;/div&gt;
+&lt;/figure&gt;
+
+&lt;figure&gt;
+  &lt;caption&gt;&lt;code&gt;perspective-origin: top;&lt;/code&gt;&lt;/caption&gt;
+   &lt;div class="container"&gt;
+    &lt;div class="cube potm"&gt;
+      &lt;div class="face front"&gt;1&lt;/div&gt;
+      &lt;div class="face back"&gt;2&lt;/div&gt;
+      &lt;div class="face right"&gt;3&lt;/div&gt;
+      &lt;div class="face left"&gt;4&lt;/div&gt;
+      &lt;div class="face top"&gt;5&lt;/div&gt;
+      &lt;div class="face bottom"&gt;6&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/figure&gt;
+
+&lt;figure&gt;
+  &lt;caption&gt;&lt;code&gt;perspective-origin: top right;&lt;/code&gt;&lt;/caption&gt;
+  &lt;div class="container"&gt;
+    &lt;div class="cube potr"&gt;
+      &lt;div class="face front"&gt;1&lt;/div&gt;
+      &lt;div class="face back"&gt;2&lt;/div&gt;
+      &lt;div class="face right"&gt;3&lt;/div&gt;
+      &lt;div class="face left"&gt;4&lt;/div&gt;
+      &lt;div class="face top"&gt;5&lt;/div&gt;
+      &lt;div class="face bottom"&gt;6&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/figure&gt;
+
+&lt;figure&gt;
+  &lt;caption&gt;&lt;code&gt;perspective-origin: left;&lt;/code&gt;&lt;/caption&gt;
+  &lt;div class="container"&gt;
+    &lt;div class="cube poml"&gt;
+      &lt;div class="face front"&gt;1&lt;/div&gt;
+      &lt;div class="face back"&gt;2&lt;/div&gt;
+      &lt;div class="face right"&gt;3&lt;/div&gt;
+      &lt;div class="face left"&gt;4&lt;/div&gt;
+      &lt;div class="face top"&gt;5&lt;/div&gt;
+      &lt;div class="face bottom"&gt;6&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/figure&gt;
+
+&lt;figure&gt;
+  &lt;caption&gt;&lt;code&gt;perspective-origin: 50% 50%;&lt;/code&gt;&lt;/caption&gt;
+  &lt;div class="container"&gt;
+    &lt;div class="cube pomm"&gt;
+      &lt;div class="face front"&gt;1&lt;/div&gt;
+      &lt;div class="face back"&gt;2&lt;/div&gt;
+      &lt;div class="face right"&gt;3&lt;/div&gt;
+      &lt;div class="face left"&gt;4&lt;/div&gt;
+      &lt;div class="face top"&gt;5&lt;/div&gt;
+      &lt;div class="face bottom"&gt;6&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/figure&gt;
+
+&lt;figure&gt;
+  &lt;caption&gt;&lt;code&gt;perspective-origin: right;&lt;/code&gt;&lt;/caption&gt;
+  &lt;div class="container"&gt;
+    &lt;div class="cube pomr"&gt;
+      &lt;div class="face front"&gt;1&lt;/div&gt;
+      &lt;div class="face back"&gt;2&lt;/div&gt;
+      &lt;div class="face right"&gt;3&lt;/div&gt;
+      &lt;div class="face left"&gt;4&lt;/div&gt;
+      &lt;div class="face top"&gt;5&lt;/div&gt;
+      &lt;div class="face bottom"&gt;6&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/figure&gt;
+
+&lt;figure&gt;
+  &lt;caption&gt;&lt;code&gt;perspective-origin: bottom left;&lt;/code&gt;&lt;/caption&gt;
+  &lt;div class="container"&gt;
+    &lt;div class="cube pobl"&gt;
+      &lt;div class="face front"&gt;1&lt;/div&gt;
+      &lt;div class="face back"&gt;2&lt;/div&gt;
+      &lt;div class="face right"&gt;3&lt;/div&gt;
+      &lt;div class="face left"&gt;4&lt;/div&gt;
+      &lt;div class="face top"&gt;5&lt;/div&gt;
+      &lt;div class="face bottom"&gt;6&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/figure&gt;
+
+&lt;figure&gt;
+  &lt;caption&gt;&lt;code&gt;perspective-origin: bottom;&lt;/code&gt;&lt;/caption&gt;
+  &lt;div class="container"&gt;
+    &lt;div class="cube pobm"&gt;
+      &lt;div class="face front"&gt;1&lt;/div&gt;
+      &lt;div class="face back"&gt;2&lt;/div&gt;
+      &lt;div class="face right"&gt;3&lt;/div&gt;
+      &lt;div class="face left"&gt;4&lt;/div&gt;
+      &lt;div class="face top"&gt;5&lt;/div&gt;
+      &lt;div class="face bottom"&gt;6&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/figure&gt;
+
+&lt;figure&gt;
+  &lt;caption&gt;&lt;code&gt;perspective-origin: bottom right;&lt;/code&gt;&lt;/caption&gt;
+  &lt;div class="container"&gt;
+    &lt;div class="cube pobr"&gt;
+      &lt;div class="face front"&gt;1&lt;/div&gt;
+      &lt;div class="face back"&gt;2&lt;/div&gt;
+      &lt;div class="face right"&gt;3&lt;/div&gt;
+      &lt;div class="face left"&gt;4&lt;/div&gt;
+      &lt;div class="face top"&gt;5&lt;/div&gt;
+      &lt;div class="face bottom"&gt;6&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/figure&gt;
+
+&lt;figure&gt;
+  &lt;caption&gt;&lt;code&gt;perspective-origin: -200% -200%;&lt;/code&gt;&lt;/caption&gt;
+  &lt;div class="container"&gt;
+    &lt;div class="cube po200200neg"&gt;
+      &lt;div class="face front"&gt;1&lt;/div&gt;
+      &lt;div class="face back"&gt;2&lt;/div&gt;
+      &lt;div class="face right"&gt;3&lt;/div&gt;
+      &lt;div class="face left"&gt;4&lt;/div&gt;
+      &lt;div class="face top"&gt;5&lt;/div&gt;
+      &lt;div class="face bottom"&gt;6&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/figure&gt;
+
+&lt;figure&gt;
+  &lt;caption&gt;&lt;code&gt;perspective-origin: 200% 200%;&lt;/code&gt;&lt;/caption&gt;
+  &lt;div class="container"&gt;
+    &lt;div class="cube po200200pos"&gt;
+      &lt;div class="face front"&gt;1&lt;/div&gt;
+      &lt;div class="face back"&gt;2&lt;/div&gt;
+      &lt;div class="face right"&gt;3&lt;/div&gt;
+      &lt;div class="face left"&gt;4&lt;/div&gt;
+      &lt;div class="face top"&gt;5&lt;/div&gt;
+      &lt;div class="face bottom"&gt;6&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/figure&gt;
+
+&lt;figure&gt;
+  &lt;caption&gt;&lt;code&gt;perspective-origin: 200% -200%;&lt;/code&gt;&lt;/caption&gt;
+  &lt;div class="container"&gt;
+    &lt;div class="cube po200200"&gt;
+      &lt;div class="face front"&gt;1&lt;/div&gt;
+      &lt;div class="face back"&gt;2&lt;/div&gt;
+      &lt;div class="face right"&gt;3&lt;/div&gt;
+      &lt;div class="face left"&gt;4&lt;/div&gt;
+      &lt;div class="face top"&gt;5&lt;/div&gt;
+      &lt;div class="face bottom"&gt;6&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/figure&gt;
+
+&lt;/section&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">/* Valeurs de perspective-origin (uniques pour chaque exemple) */
+.potl {
+  perspective-origin: top left;
+}
+.potm {
+  perspective-origin: top;
+}
+.potr {
+  perspective-origin: top right;
+}
+.poml {
+  perspective-origin: left;
+}
+.pomm {
+  perspective-origin: 50% 50%;
+}
+.pomr {
+  perspective-origin: right;
+}
+.pobl {
+  perspective-origin: bottom left;
+}
+.pobm {
+  perspective-origin: bottom;
+}
+.pobr {
+  perspective-origin: bottom right;
+}
+.po200200neg {
+  perspective-origin: -200% -200%;
+}
+.po200200pos {
+  perspective-origin: 200% 200%;
+}
+.po200200 {
+  perspective-origin: 200% -200%;
+}
+
+/* On définit le conteneur, le cube et une face générique */
+.container {
+  width: 100px;
+  height: 100px;
+  margin: 24px;
+  border: none;
+}
+
+.cube {
+  width: 100%;
+  height: 100%;
+  backface-visibility: visible;
+  perspective: 300px;
+  transform-style: preserve-3d;
+}
+
+.face {
+  display: block;
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  border: none;
+  line-height: 100px;
+  font-family: sans-serif;
+  font-size: 60px;
+  color: white;
+  text-align: center;
+}
+
+/* On définit chaque face */
+.front {
+  background: rgba(0, 0, 0, 0.3);
+  transform: translateZ(50px);
+}
+.back {
+  background: rgba(0, 255, 0, 1);
+  color: black;
+  transform: rotateY(180deg) translateZ(50px);
+}
+.right {
+  background: rgba(196, 0, 0, 0.7);
+  transform: rotateY(90deg) translateZ(50px);
+}
+.left {
+  background: rgba(0, 0, 196, 0.7);
+  transform: rotateY(-90deg) translateZ(50px);
+}
+.top {
+  background: rgba(196, 196, 0, 0.7);
+  transform: rotateX(90deg) translateZ(50px);
+}
+.bottom {
+  background: rgba(196, 0, 196, 0.7);
+  transform: rotateX(-90deg) translateZ(50px);
+}
+
+/* On améliore la disposition */
+section {
+  background-color: #EEE;
+  padding: 10px;
+  font-family: sans-serif;
+  text-align: left;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Cubes_avec_des_valeurs_communes_pour_perspective-origin', 620, 800)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Transforms 2', '#perspective-origin-property', 'perspective-origin')}}</td>
+   <td>{{Spec2('CSS Transforms 2')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.perspective-origin")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS" title="CSS/Using_CSS_transforms">Utiliser les transformations CSS</a></li>
+ <li>{{cssxref('transform-style')}}</li>
+ <li>{{cssxref('transform-function')}}</li>
+ <li>{{cssxref('perspective')}}</li>
+ <li><a href="/fr/docs/Web/CSS/transform-function/perspective">La fonction de transformation <code>perspective()</code></a></li>
+</ul>
diff --git a/files/fr/web/css/perspective/index.html b/files/fr/web/css/perspective/index.html
new file mode 100644
index 0000000000..6569ee0add
--- /dev/null
+++ b/files/fr/web/css/perspective/index.html
@@ -0,0 +1,249 @@
+---
+title: perspective
+slug: Web/CSS/perspective
+tags:
+  - CSS
+  - Propriétés
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/perspective
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>perspective</code></strong> détermine la distance entre le plan d'équation z = 0 et la position de l'utilisateur afin de donner une perspective aux objets positionnés dans l'espace 3D. Chaque élément pour lequel la côte (z) est positif sera plus grand et chaque élément pour lequel z est négatif apparaîtra plus petit. La force de cet effet est déterminée par la valeur de cette propriété.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/perspective.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Les parties des éléments 3D qui se situent derrière l'utilisateur (c'est-à-dire ceux pour lesquels leur coordonnée en z est plus grande que la valeur de la propriété <code>perspective</code>) ne sont pas dessiné.</p>
+
+<p>Par défaut, le point de fuite est placé au centre de l'élément mais il peut être déplacé grâce à la propriété {{cssxref("perspective-origin")}}.</p>
+
+<p>Si on utilise cette propriété avec une valeur différente de <code>0</code> ou <code>none</code>, cela créera un nouveau <a href="/fr/docs/Web/CSS/Comprendre_z-index/L'empilement_de_couches">contexte d'empilement</a>. Et l'objet joue alors le rôle de bloc englobant pour les éléments qu'il contient et qui ont <code>position: fixed</code> ou <code>position: absolute</code></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */
+perspective: none;
+
+/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+perspective: 20px;
+perspective: 3.5em;
+
+/* Valeurs globales */
+perspective: inherit;
+perspective: initial;
+perspective: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Un mot-clé qui indique qu'on n'applique aucune perspective.</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une longueur (une valeur de type {{cssxref("&lt;length&gt;")}}) qui indique la distance entre l'utilisateur et le plan d'équation z = 0. Elle est utilisée pour appliquer une perspective à l'élément et à son contenu. Si elle vaut <code>0</code> ou qu'elle est négative, aucune transformation de perspective ne sera appliquée.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Trois_cubes">Trois cubes</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;th&gt;&lt;code&gt;perspective: 250px;&lt;/code&gt;
+      &lt;/th&gt;
+      &lt;th&gt;&lt;code&gt;perspective: 350px;&lt;/code&gt;
+      &lt;/th&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;
+        &lt;div class="container"&gt;
+          &lt;div class="cube pers250"&gt;
+            &lt;div class="face front"&gt;1&lt;/div&gt;
+            &lt;div class="face back"&gt;2&lt;/div&gt;
+            &lt;div class="face right"&gt;3&lt;/div&gt;
+            &lt;div class="face left"&gt;4&lt;/div&gt;
+            &lt;div class="face top"&gt;5&lt;/div&gt;
+            &lt;div class="face bottom"&gt;6&lt;/div&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/td&gt;
+      &lt;td&gt;
+        &lt;div class="container"&gt;
+          &lt;div class="cube pers350"&gt;
+            &lt;div class="face front"&gt;1&lt;/div&gt;
+            &lt;div class="face back"&gt;2&lt;/div&gt;
+            &lt;div class="face right"&gt;3&lt;/div&gt;
+            &lt;div class="face left"&gt;4&lt;/div&gt;
+            &lt;div class="face top"&gt;5&lt;/div&gt;
+            &lt;div class="face bottom"&gt;6&lt;/div&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;th&gt;&lt;code&gt;perspective: 500px;&lt;/code&gt;
+      &lt;/th&gt;
+      &lt;th&gt;&lt;code&gt;perspective: 650px;&lt;/code&gt;
+      &lt;/th&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;
+        &lt;div class="container"&gt;
+          &lt;div class="cube pers500"&gt;
+            &lt;div class="face front"&gt;1&lt;/div&gt;
+            &lt;div class="face back"&gt;2&lt;/div&gt;
+            &lt;div class="face right"&gt;3&lt;/div&gt;
+            &lt;div class="face left"&gt;4&lt;/div&gt;
+            &lt;div class="face top"&gt;5&lt;/div&gt;
+            &lt;div class="face bottom"&gt;6&lt;/div&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/td&gt;
+      &lt;td&gt;
+        &lt;div class="container"&gt;
+          &lt;div class="cube pers650"&gt;
+            &lt;div class="face front"&gt;1&lt;/div&gt;
+            &lt;div class="face back"&gt;2&lt;/div&gt;
+            &lt;div class="face right"&gt;3&lt;/div&gt;
+            &lt;div class="face left"&gt;4&lt;/div&gt;
+            &lt;div class="face top"&gt;5&lt;/div&gt;
+            &lt;div class="face bottom"&gt;6&lt;/div&gt;
+          &lt;/div&gt;
+      &lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">/* Des classes pour les différentes valeurs */
+.pers250 {
+    perspective: 250px;
+}
+.pers350 {
+    perspective: 350px;
+}
+.pers500 {
+    perspective: 500px;
+}
+.pers650 {
+    perspective: 650px;
+}
+
+/* On définit le div pour le conteneur, */
+/* le cube, ainsi qu'une face générique */
+ .container {
+   width: 200px;
+   height: 200px;
+   margin: 75px 0 0 75px;
+   border: none;
+}
+
+.cube {
+   width: 100%;
+   height: 100%;
+   backface-visibility: visible;
+   perspective-origin: 150% 150%;
+   transform-style: preserve-3d;
+}
+
+.face {
+   display: block;
+   position: absolute;
+   width: 100px;
+   height: 100px;
+   border: none;
+   line-height: 100px;
+   font-family: sans-serif;
+   font-size: 60px;
+   color: white;
+   text-align: center;
+}
+
+/* On définit chaque face en fonction de sa direction */
+ .front {
+   background: rgba(0, 0, 0, 0.3);
+   transform: translateZ(50px);
+}
+
+.back {
+   background: rgba(0, 255, 0, 1);
+   color: black;
+   transform: rotateY(180deg) translateZ(50px);
+}
+
+.right {
+   background: rgba(196, 0, 0, 0.7);
+   transform: rotateY(90deg) translateZ(50px);
+}
+
+.left {
+   background: rgba(0, 0, 196, 0.7);
+   transform: rotateY(-90deg) translateZ(50px);
+}
+
+.top {
+   background: rgba(196, 196, 0, 0.7);
+   transform: rotateX(90deg) translateZ(50px);
+}
+
+.bottom {
+   background: rgba(196, 0, 196, 0.7);
+   transform: rotateX(-90deg) translateZ(50px);
+}
+
+/* On améliore légèrement le tableau */
+th, p, td {
+   background-color: #EEEEEE;
+   padding: 10px;
+   font-family: sans-serif;
+   text-align: left;
+}</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Trois_cubes', 660, 700)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{Specname('CSS Transforms 2', '#propdef-perspective', 'perspective')}}</td>
+   <td>{{Spec2('CSS Transforms 2')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.perspective")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS">Utiliser les transformations CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/place-content/index.html b/files/fr/web/css/place-content/index.html
new file mode 100644
index 0000000000..d1817fbb81
--- /dev/null
+++ b/files/fr/web/css/place-content/index.html
@@ -0,0 +1,247 @@
+---
+title: place-content
+slug: Web/CSS/place-content
+tags:
+  - CSS
+  - Propriété
+  - Propriété raccourcie
+  - Reference
+translation_of: Web/CSS/place-content
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété raccourcie <code><strong>place</strong></code><strong><code>-content</code></strong> permet de définir les valeurs des propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}. Elle peut être utilisée pour n'importe quelle méthode de disposition (boîtes flexibles, grilles, etc;) qui prend en charge ces deux propriétés d'alignement.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/place-content.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs décrivant l'alignement */
+/* Note : align-content ne gère pas les valeurs left et right */
+place-content: center start;
+place-content: start center;
+place-content: end left;
+place-content: flex-start center;
+place-content: flex-end center;
+
+/* Valeurs décrivant l'alignement par rapport à la ligne de base */
+/* Note : justify-content ne gère pas les valeurs liées à la ligne de base */
+place-content: baseline center;
+place-content: first baseline space-evenly;
+place-content: last baseline right;
+
+/* Valeurs décrivant la distribution de l'alignment */
+place-content: space-between space-evenly;
+place-content: space-around space-evenly;
+place-content: space-evenly stretch;
+place-content: stretch space-evenly;
+
+/* Valeurs globales */
+place-content: inherit;
+place-content: initial;
+place-content: unset;</pre>
+
+<p>La première valeur utilisée sera celle qui correspond à {{cssxref("align-content")}} et la seconde valeur correspondra à {{cssxref("justify-content")}}. Si la deuxième valeur n'est pas présente, la première valeur indiquée sera également utilisée pour <code>justify-content</code>.</p>
+
+<div class="warning">
+<p><strong>Attention !</strong> Si une seule valeur est fournie et que celle-ci est invalide pour l'une ou l'autre des propriétés détaillées, c'est la déclaration entière qui sera invalide.</p>
+</div>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>start</code></dt>
+ <dd>Les éléments sont alignés vers le début du conteneur pour l'axe correspondant.</dd>
+ <dt><code>end</code></dt>
+ <dd>Les éléments sont alignés vers la fin du conteneur pour l'axe correspondant.</dd>
+ <dt><code>flex-start</code></dt>
+ <dd>Les éléments sont alignés vers le début du conteneur flexible pour l'axe correspondant. Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne sont pas des éléments d'un conteneur flexible, cette valeur sera synonyme de <code>start</code>.</dd>
+ <dt><code>flex-end</code></dt>
+ <dd>Les éléments sont alignés vers la fin du conteneur flexible pour l'axe correspondant. Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne sont pas des éléments d'un conteneur flexible, cette valeur sera synonyme de <code>end</code>.</dd>
+ <dt><code>center</code></dt>
+ <dd>Les éléments sont alignés au centre du conteneur dans l'axe correspondant.</dd>
+ <dt><code>left</code></dt>
+ <dd>Les éléments sont alignés vers le bord gauche du conteneur dans l'axe correspondant. Si l'axe de cette propriété n'est pas parallèle à l'axe en ligne (<em>inline axis</em>), cette valeur sera synonyme de <code>start</code>.</dd>
+ <dt><code>right</code></dt>
+ <dd>Les éléments sont alignés vers le bord droit du conteneur dans l'axe correspondant. Si l'axe de cette propriété n'est pas parallèle à l'axe en ligne (<em>inline axis</em>), cette valeur sera synonyme de <code>start</code>.</dd>
+ <dt><code>space-between</code></dt>
+ <dd>Les éléments sont équirépartis dans le conteneur sur l'axe correspondant. Ainsi, l'espace entre chaque élément adjacent sera le même. Le premier élément est aligné sur le bord du conteneur et le dernier élément est également aligné sur le bord du conteneur à la fin de l'axe.</dd>
+ <dt><code>baseline<br>
+ first baseline</code><br>
+ <code>last baseline</code></dt>
+ <dd>Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.<br>
+ The fallback alignment for <code>first baseline</code> is <code>start</code>, the one for <code>last baseline</code> is <code>end</code>.</dd>
+ <dt><code>space-around</code></dt>
+ <dd>Les éléments sont équirépartis dans le conteneur sur l'axe correspondant. L'espace entre chaque élément adjacent sera le même. L'espace entre le bord du conteneur et le premier élément sera la moitié de l'espace utilisé entre chaque élément. L'espace entre le dernier élément et le bord du conteneur sera la moitié de l'espace utilisé entre chaque élément.</dd>
+ <dt><code>space-evenly</code></dt>
+ <dd>Les éléments sont équirépartis dans le conteneur sur l'axe correspondant. L'espace entre chaque élément adjacent sera le même, ce sera également cet espace qui sera utilisé entre le bord du conteneur et le premier élément et entre le dernier élément et le bord du conteneur.</dd>
+ <dt><code>stretch</code></dt>
+ <dd>Si la somme des tailles des éléments est inférieure à la taille du conteneur pour l'axe correspondant, tous les éléments dimensionnés automatiquement seront étirés de la même façon (et pas de façon proportionnelle) tout en respectant les contraintes imposées par {{cssxref("max-height")}}/{{cssxref("max-width")}} (ou par les fonctionnalités équivalentes) afin que la taille de l'ensemble des éléments soit exactement celle du conteneur.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[7]">#container {
+  display: flex;
+  height:240px;
+  width: 240px;
+  flex-wrap: wrap;
+  background-color: #8c8c8c;
+  writing-mode: horizontal-tb; /* Cette valeur peut être modifiée dans l'exemple */
+  direction: ltr; /* Cette valeur peut être modifiée dans l'exemple */
+  place-content: flex-end center; /* Cette valeur peut être modifiée dans l'exemple */
+}
+
+div &gt; div {
+  border: 2px solid #8c8c8c;
+  width: 50px;
+  background-color: #a0c8ff;
+}
+
+.small {
+  font-size: 12px;
+  height: 40px;
+}
+
+.large {
+  font-size: 14px;
+  height: 50px;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="container"&gt;
+  &lt;div class="small"&gt;Lorem&lt;/div&gt;
+  &lt;div class="small"&gt;Lorem&lt;br/&gt;ipsum&lt;/div&gt;
+  &lt;div class="large"&gt;Lorem&lt;/div&gt;
+  &lt;div class="large"&gt;Lorem&lt;br/&gt;impsum&lt;/div&gt;
+  &lt;div class="large"&gt;&lt;/div&gt;
+  &lt;div class="large"&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="hidden brush:html">&lt;code&gt;writing-mode:&lt;/code&gt;&lt;select id="writingMode"&gt;
+  &lt;option value="horizontal-tb" selected&gt;horizontal-tb&lt;/option&gt;
+  &lt;option value="vertical-rl"&gt;vertical-rl&lt;/option&gt;
+  &lt;option value="vertical-lr"&gt;vertical-lr&lt;/option&gt;
+  &lt;option value="sideways-rl"&gt;sideways-rl&lt;/option&gt;
+  &lt;option value="sideways-lr"&gt;sideways-lr&lt;/option&gt;
+&lt;/select&gt;&lt;code&gt;;&lt;/code&gt;&lt;br/&gt;
+&lt;code&gt;direction:&lt;/code&gt;&lt;select id="direction"&gt;
+  &lt;option value="ltr" selected&gt;ltr&lt;/option&gt;
+  &lt;option value="rtl"&gt;rtl&lt;/option&gt;
+&lt;/select&gt;&lt;code&gt;;&lt;/code&gt;&lt;br/&gt;
+&lt;code&gt;place-content:&lt;/code&gt;&lt;select id="alignContentAlignment"&gt;
+  &lt;option value="normal"&gt;normal&lt;/option&gt;
+  &lt;option value="first baseline"&gt;first baseline&lt;/option&gt;
+  &lt;option value="last baseline"&gt;last baseline&lt;/option&gt;
+  &lt;option value="baseline"&gt;baseline&lt;/option&gt;
+  &lt;option value="space-between"&gt;space-between&lt;/option&gt;
+  &lt;option value="space-around"&gt;space-around&lt;/option&gt;
+  &lt;option value="space-evenly" selected&gt;space-evenly&lt;/option&gt;
+  &lt;option value="stretch"&gt;stretch&lt;/option&gt;
+  &lt;option value="center"&gt;center&lt;/option&gt;
+  &lt;option value="start"&gt;start&lt;/option&gt;
+  &lt;option value="end"&gt;end&lt;/option&gt;
+  &lt;option value="flex-start"&gt;flex-start&lt;/option&gt;
+  &lt;option value="flex-end"&gt;flex-end&lt;/option&gt;
+&lt;/select&gt;
+&lt;select id="justifyContentAlignment"&gt;
+  &lt;option value="normal"&gt;normal&lt;/option&gt;
+  &lt;option value="space-between"&gt;space-between&lt;/option&gt;
+  &lt;option value="space-around"&gt;space-around&lt;/option&gt;
+  &lt;option value="space-evenly"&gt;space-evenly&lt;/option&gt;
+  &lt;option value="stretch"&gt;stretch&lt;/option&gt;
+  &lt;option value="center" selected&gt;center&lt;/option&gt;
+  &lt;option value="start"&gt;start&lt;/option&gt;
+  &lt;option value="end"&gt;end&lt;/option&gt;
+  &lt;option value="flex-start"&gt;flex-start&lt;/option&gt;
+  &lt;option value="flex-end"&gt;flex-end&lt;/option&gt;
+  &lt;option value="left"&gt;left&lt;/option&gt;
+  &lt;option value="right"&gt;right&lt;/option&gt;
+&lt;/select&gt;&lt;code&gt;;&lt;/code&gt;
+</pre>
+
+<div class="hidden">
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var update = function () {
+   document.getElementById("container").style.placeContent = document.getElementById("alignContentAlignment").value + " " + document.getElementById("justifyContentAlignment").value;
+}
+
+var alignContentAlignment = document.getElementById("alignContentAlignment");
+alignContentAlignment.addEventListener("change",  update);
+
+var justifyContentAlignment = document.getElementById("justifyContentAlignment");
+justifyContentAlignment.addEventListener("change", update);
+
+var writingM = document.getElementById("writingMode");
+writingM.addEventListener("change", function (evt) {
+   document.getElementById("container").style.writingMode = evt.target.value;
+});
+var direction = document.getElementById("direction");
+direction.addEventListener("change", function (evt) {
+   document.getElementById("container").style.direction = evt.target.value;
+});
+</pre>
+</div>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "370", "300")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Box Alignment", "#propdef-place-content", "place content")}}</td>
+   <td>{{Spec2("CSS3 Box Alignment")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.place-content")}}</p>
+
+<h3 id="Prise_en_charge_pour_les_dispositions_flexibles">Prise en charge pour les dispositions flexibles</h3>
+
+<p>{{Compat("css.properties.place-content.flex_context")}}</p>
+
+<h3 id="Prise_en_charge_pour_les_grilles">Prise en charge pour les grilles</h3>
+
+<p>{{Compat("css.properties.place-content.grid_context")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS/Utilisation_des_flexbox_en_CSS">Utiliser les boîtes flexibles en CSS</a></li>
+ <li>Guide sur les grilles : <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">Aligner des objets dans une grille</a></em></li>
+ <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de bases</a></em></li>
+ <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible">Aligner des objets dans un conteneur flexible</a></em></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Le module de spécification CSS Box Alignment</a></li>
+ <li>La propriété {{cssxref("align-content")}}</li>
+ <li>La propriété {{cssxref("justify-content")}}</li>
+</ul>
diff --git a/files/fr/web/css/place-items/index.html b/files/fr/web/css/place-items/index.html
new file mode 100644
index 0000000000..b9a2608334
--- /dev/null
+++ b/files/fr/web/css/place-items/index.html
@@ -0,0 +1,281 @@
+---
+title: place-items
+slug: Web/CSS/place-items
+tags:
+  - CSS
+  - Propriété
+  - Propriété raccourcie
+  - Reference
+translation_of: Web/CSS/place-items
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété raccourcie <code><strong>place</strong></code><strong><code>-items</code></strong> définit les valeurs utilisées pour les propriétés {{cssxref("align-items")}} et {{cssxref("justify-items")}}. La première valeur fournie est utilisée pour <code>align-items</code> et la seconde est utilisée pour <code>justify-items</code>. S'il n'y a pas de seconde valeur fournie, c'est la première qui est reprise pour <code>justify-items</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/place-items.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css">/* Valeurs avec un mot-clé */
+place-items: auto center;
+place-items: normal start;
+
+/* Alignement géométrique */
+place-items: center normal;
+place-items: start auto;
+place-items: end normal;
+place-items: self-start auto;
+place-items: self-end normal;
+place-items: flex-start auto;
+place-items: flex-end normal;
+place-items: left auto;
+place-items: right normal;
+
+/* Alignement par rapport à la ligne de base */
+place-items: baseline normal;
+place-items: first baseline auto;
+place-items: last baseline normal;
+place-items: stretch auto;
+
+/* Valeurs globales */
+place-items: inherit;
+place-items: initial;
+place-items: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>La valeur utilisée est celle de <code>justify-items</code> pour l'élément parent sauf si l'élément n'a pas de parent ou qu'il est positionné de façon absolue auquel cas <code>auto</code> sera synonyme de <code>normal</code>.</dd>
+ <dt><code>normal</code></dt>
+ <dd>L'effet de ce mot-clé depend du mode de disposition utilisé :
+ <ul>
+  <li>Pour les dispositions en bloc, ce mot-clé est synonyme de <code>start</code>.</li>
+  <li>Pour les dispositions absolues, ce mot-clé se comporte comme <code>start</code> pour les éléments remplacés ou comme <code>stretch</code> pour tous les autres éléments.</li>
+  <li>Pour les cellules de tableaux, ce mot-clé n'a pas de sens et cette propriété est ignorée.</li>
+  <li>Pour les dispositions utilisant des boîtes flexibles, ce mot-clé n'a pas de sens et cette propriété est ignorée<em>.</em></li>
+  <li>Pour les dispositions en grille, ce mot-clé se comporte comme <code>stretch</code> sauf pour les éléments qui ont des dimensions intrinsèques ou des contraintes de ratio, auquel cas cette valeur est synonyme de <code>start</code>.</li>
+ </ul>
+ </dd>
+ <dt><code>start</code></dt>
+ <dd>L'élément est aligné au début de l'axe dans la direction correspondante.</dd>
+ <dt><code>end</code></dt>
+ <dd>L'élément est aligné à la fin de l'axe dans la direction correspondante.</dd>
+ <dt><code>flex-start</code></dt>
+ <dd>Les éléments sont regroupés vers le début du conteneur flexible pour l'axe correspondant.<br>
+ Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne font pas partie d'un conteneur flexible, cette valeur correspond à <code>start</code>.</dd>
+ <dt><code>flex-end</code></dt>
+ <dd>Les éléments sont regroupés vers la fin du conteneur flexible pour l'axe correspondant.<br>
+ Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne font pas partie d'un conteneur flexible, cette valeur correspond à <code>end</code>.</dd>
+ <dt><code>self-start</code></dt>
+ <dd>Les éléments sont alignés sur le bord de leur boîte vers le début de l'axe correspondant.</dd>
+ <dt><code>self-end</code></dt>
+ <dd>Les éléments sont alignés sur le bord de leur boîte vers la fin de l'axe correspondant.</dd>
+ <dt><code>center</code></dt>
+ <dd>L'élément est centré le long de l'axe correspondant.</dd>
+ <dt><code>left</code></dt>
+ <dd>L'élément est aligné sur le bord gauche du conteneur. Si l'axe de la propriété n'est pas parallèle à l'axe en ligne, cette valeur se comporte comme <code>start</code>.</dd>
+ <dt><code>right</code></dt>
+ <dd>L'élément est aligné sur le bord droit du conteneur. Si l'axe de la propriété n'est pas parallèle à l'axe en ligne, cette valeur se comporte comme <code>start</code>.</dd>
+ <dt><code>baseline<br>
+ first baseline</code><br>
+ <code>last baseline</code></dt>
+ <dd>Ces valeurs permettent de définir l'alignement par rapport à la ligne de base pour l'élément du conteneur avec la ligne de base la plus haute ou la plus basse.<br>
+ Si <code>first baseline</code> n'est pas prise en charge, la valeur correspondra à <code>start</code>, si <code>last baseline</code> n'est pas prise en charge, la valeur correspondra à <code>end</code>.</dd>
+ <dt><code>stretch</code></dt>
+ <dd>Si la somme des tailles des éléments est inférieure à la taille du conteneur, les éléments dimensionnés automatiquement seront élargis de la même longueur tout en respectant les contraintes imposées par {{cssxref("max-height")}}/{{cssxref("max-width")}} (ou par les fonctionnalités équivalentes), afin que l'ensemble des éléments remplisse exactement le conteneur.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[4]">#container {
+  height:200px;
+  width: 240px;
+  place-items: center; /* Cette valeur peut être modifiée dans l'exemple */
+  background-color: #8c8c8c;
+}
+
+.flex {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 50px);
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css;">div &gt; div {
+  box-sizing: border-box;
+  border: 2px solid #8c8c8c;
+  width: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#item1 {
+  background-color: #8cffa0;
+  min-height: 30px;
+}
+
+#item2 {
+  background-color: #a0c8ff;
+  min-height: 50px;
+}
+
+#item3 {
+  background-color: #ffa08c;
+  min-height: 40px;
+}
+
+#item4 {
+  background-color: #ffff8c;
+  min-height: 60px;
+}
+
+#item5 {
+  background-color: #ff8cff;
+  min-height: 70px;
+}
+
+#item6 {
+  background-color: #8cffff;
+  min-height: 50px;
+  font-size: 30px;
+}
+
+select {
+  font-size: 16px;
+}
+
+.row {
+  margin-top: 10px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="container" class="flex"&gt;
+  &lt;div id="item1"&gt;1&lt;/div&gt;
+  &lt;div id="item2"&gt;2&lt;/div&gt;
+  &lt;div id="item3"&gt;3&lt;/div&gt;
+  &lt;div id="item4"&gt;4&lt;/div&gt;
+  &lt;div id="item5"&gt;5&lt;/div&gt;
+  &lt;div id="item6"&gt;6&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="row"&gt;
+  &lt;label for="display"&gt;display: &lt;/label&gt;
+  &lt;select id="display"&gt;
+    &lt;option value="flex"&gt;flex&lt;/option&gt;
+    &lt;option value="grid"&gt;grid&lt;/option&gt;
+  &lt;/select&gt;
+&lt;/div&gt;
+
+&lt;div class="row"&gt;
+  &lt;label for="values"&gt;place-items: &lt;/label&gt;
+  &lt;select id="values"&gt;
+    &lt;option value="start"&gt;start&lt;/option&gt;
+    &lt;option value="center"&gt;center&lt;/option&gt;
+    &lt;option value="end"&gt;end&lt;/option&gt;
+    &lt;option value="left"&gt;left&lt;/option&gt;
+    &lt;option value="right"&gt;right&lt;/option&gt;
+    &lt;option value="auto center"&gt;auto center&lt;/option&gt;
+    &lt;option value="normal start"&gt;normal start&lt;/option&gt;
+    &lt;option value="center normal"&gt;center normal&lt;/option&gt;
+    &lt;option value="start auto"&gt;start auto&lt;/option&gt;
+    &lt;option value="end normal"&gt;end normal&lt;/option&gt;
+    &lt;option value="self-start auto"&gt;self-start auto&lt;/option&gt;
+    &lt;option value="self-end normal"&gt;self-end normal&lt;/option&gt;
+    &lt;option value="flex-start auto"&gt;flex-start auto&lt;/option&gt;
+    &lt;option value="flex-end normal"&gt;flex-end normal&lt;/option&gt;
+    &lt;option value="left auto"&gt;left auto&lt;/option&gt;
+    &lt;option value="right normal"&gt;right normal&lt;/option&gt;
+    &lt;option value="baseline normal"&gt;baseline normal&lt;/option&gt;
+    &lt;option value="first baseline auto"&gt;first baseline auto&lt;/option&gt;
+    &lt;option value="last baseline normal"&gt;last baseline normal&lt;/option&gt;
+    &lt;option value="stretch auto"&gt;stretch auto&lt;/option&gt;
+  &lt;/select&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var values = document.getElementById('values');
+var display = document.getElementById('display');
+var container = document.getElementById('container');
+
+values.addEventListener('change', function (evt) {
+  container.style.placeItems = evt.target.value;
+});
+
+display.addEventListener('change', function (evt) {
+  container.className = evt.target.value;
+});
+</pre>
+</div>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 260, 290)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Box Alignment", "#place-items-property", "place-items")}}</td>
+   <td>{{Spec2('CSS3 Box Alignment')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<h3 id="Prise_en_charge_pour_les_dispositions_flexibles">Prise en charge pour les dispositions flexibles</h3>
+
+<p>{{Compat("css.properties.place-items.flex_context")}}</p>
+
+<h3 id="Prise_en_charge_pour_les_grilles">Prise en charge pour les grilles</h3>
+
+<p>{{Compat("css.properties.place-items.grid_context")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Guide sur les grilles : <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">Aligner des objets dans une grille</a></em></li>
+ <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de bases</a></em></li>
+ <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible">Aligner des objets dans un conteneur flexible</a></em></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Le module de spécification CSS Box Alignment</a></li>
+ <li>Les propriétés détaillées correspondantes :
+  <ul>
+   <li>{{cssxref("align-items")}}</li>
+   <li>{{cssxref("justify-items")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("justify-self")}}</li>
+ <li>{{cssxref("align-self")}}</li>
+</ul>
diff --git a/files/fr/web/css/place-self/index.html b/files/fr/web/css/place-self/index.html
new file mode 100644
index 0000000000..d7d96613fd
--- /dev/null
+++ b/files/fr/web/css/place-self/index.html
@@ -0,0 +1,132 @@
+---
+title: place-self
+slug: Web/CSS/place-self
+tags:
+  - CSS
+  - Propriété
+  - Propriété raccourcie
+  - Reference
+translation_of: Web/CSS/place-self
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <code><strong>place</strong></code><strong><code>-self</code></strong> est une <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">propriété raccourcie</a> qui permet de paramétrer les valeurs des propriétés {{cssxref("align-self")}} et  {{cssxref("justify-self")}}. La première valeur sera utilisée pour <code>align-self</code> et la seconde pour <code>justify-self</code>. S'il n'y a pas de seconde valeur, la première sera également utilisée pour <code>justify-self</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/place-self.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs avec un mot-clé */
+place-self: auto center;
+place-self: normal start;
+
+/* Alignement géométrique */
+place-self: center normal;
+place-self: start auto;
+place-self: end normal;
+place-self: self-start auto;
+place-self: self-end normal;
+place-self: flex-start auto;
+place-self: flex-end normal;
+place-self: left auto;
+place-self: right normal;
+
+/* Alignement relatif à la ligne de base */
+place-self: baseline normal;
+place-self: first baseline auto;
+place-self: last baseline normal;
+place-self: stretch auto;
+
+/* Valeurs globales */
+place-self: inherit;
+place-self: initial;
+place-self: unset;</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>La valeur utilise celle de {{cssxref("align-items")}} pour l'élément parent.</dd>
+ <dt><code>normal</code></dt>
+ <dd>Ce mot-clé aura un sens différent selon le mode de disposition utilisé :
+ <ul>
+  <li>Pour les dispositions avec un positionnment absolu, ce mot-clé se comporte comme <code>start</code> pour les boîtes des éléments remplacés ou comme <code>stretch</code> pour les autres boîtes positionnées de façon absolue.</li>
+  <li>Pour les éléments positionnés de façon statique au sein d'une disposition absolue, ce mot-clé agira comme <code>stretch</code></li>
+  <li>Pour les cellules de tableaux, ce mot-clé n'a pas de signification car cette propriété est ignorée.</li>
+  <li>Pour les éléments disposés en blocs, cette propriété est ignorée.</li>
+  <li>Pour les dispositions qui utilisent les boîtes flexibles, ce mot-clé n'a pas de signification car cette propriété est ignorée<em>.</em></li>
+  <li>Pour les dispositions qui utilisent une grille, ce mot-clé aura un comportement proche de <code>stretch</code>, sauf pour les boîtes qui ont des dimensions intrinsèques, dans ce cas, il est synonyme de <code>start</code>.</li>
+ </ul>
+ </dd>
+ <dt><code>self-start</code></dt>
+ <dd>Les éléments sont alignés sur le bord du conteneur vers le début de l'axe en bloc.</dd>
+ <dt><code>self-end</code></dt>
+ <dd>Les éléments sont alignés sur le bord du conteneur vers la fin de l'axe en bloc.</dd>
+ <dt><code>flex-start</code></dt>
+ <dd>Le bord de l'élément flexible au début de l'axe en bloc est aligné avec le début de l'axe en bloc sur la ligne.</dd>
+ <dt><code>flex-end</code></dt>
+ <dd>Le bord de l'élément flexible à la fin de l'axe en bloc est aligné avec la fin de l'axe en bloc sur la ligne.</dd>
+ <dt><code>center</code></dt>
+ <dd>La boîte de marge de l'élément flexible est centrée sur la ligne par rapport à l'axe en bloc. Si la taille de l'élément est supérieure à celle du conteneur flexible, l'élément dépasse également dans chaque direction.</dd>
+ <dt><code>baseline<br>
+ first baseline</code><br>
+ <code>last baseline</code></dt>
+ <dd>Ces valeurs permettent de définir l'alignement par rapport à la ligne de base pour l'élément du conteneur avec la ligne de base la plus haute ou la plus basse.<br>
+ Si <code>first baseline</code> n'est pas prise en charge, la valeur correspondra à <code>start</code>, si <code>last baseline</code> n'est pas prise en charge, la valeur correspondra à <code>end</code>.</dd>
+ <dt><code>stretch</code></dt>
+ <dd>Si la somme des tailles des éléments est inférieure à la taille du conteneur pour l'axe en ligne, les éléments dimensionnés automatiquement seront élargis de la même longueur tout en respectant les contraintes imposées par {{cssxref("max-height")}}/{{cssxref("max-width")}} (ou par les fonctionnalités équivalentes), afin que l'ensemble des éléments remplisse exactement le conteneur.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Box Alignment", "#place-self-property", "place-self")}}</td>
+   <td>{{Spec2("CSS3 Box Alignment")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<h3 id="Prise_en_charge_pour_les_dispositions_flexibles">Prise en charge pour les dispositions flexibles</h3>
+
+<p>{{Compat("css.properties.place-self.flex_context")}}</p>
+
+<h3 id="Prise_en_charge_pour_les_grilles">Prise en charge pour les grilles</h3>
+
+<p>{{Compat("css.properties.place-self.grid_context")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Guide sur les grilles : <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">Aligner des objets dans une grille</a></em></li>
+ <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de bases</a></em></li>
+ <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible">Aligner des objets dans un conteneur flexible</a></em></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Le module de spécification CSS Box Alignment</a></li>
+ <li>Les propriétés détaillées correspondantes
+  <ul>
+   <li>{{cssxref("align-self")}}</li>
+   <li>{{cssxref("justify-self")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/pointer-events/index.html b/files/fr/web/css/pointer-events/index.html
new file mode 100644
index 0000000000..8d2b91dc73
--- /dev/null
+++ b/files/fr/web/css/pointer-events/index.html
@@ -0,0 +1,146 @@
+---
+title: pointer-events
+slug: Web/CSS/pointer-events
+tags:
+  - CSS
+  - Propriété
+  - Reference
+  - SVG
+translation_of: Web/CSS/pointer-events
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS<strong> <code>pointer-events</code></strong> permet aux auteurs de contrôler les circonstances dans lesquelles un élément graphique peut être <a href="/fr/docs/Web/API/Event/target">une cible</a>, c'est-à-dire recevoir des événements de la souris, du pointeur ou du doigt.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/pointer-events.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Lorsque cette propriété n'est pas définie,  pour le contenu SVG, on aura le même effet qu'avec la valeur <code>visiblePainted</code>. Lorsqu'on utilise la valeur <code>none</code>, cela indique que l'élément ne peut pas recevoir d'événement de pointeur mais cela indique également qu'on peut passer « au travers » de l'élément pour atteindre des contrôles qui pourraient être en-dessous/derrière.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+pointer-events: auto;
+pointer-events: none;
+pointer-events: visiblePainted; /* SVG uniquement */
+pointer-events: visibleFill;    /* SVG uniquement */
+pointer-events: visibleStroke;  /* SVG uniquement */
+pointer-events: visible;        /* SVG uniquement */
+pointer-events: painted;        /* SVG uniquement */
+pointer-events: fill;           /* SVG uniquement */
+pointer-events: stroke;         /* SVG uniquement */
+pointer-events: all;            /* SVG uniquement */
+
+/* Valeurs globales */
+pointer-events: inherit;
+pointer-events: initial;
+pointer-events: unset;
+</pre>
+
+<p>La propriété <code>pointer-events</code> est définie grâce à un mot-clé parmi ceux de la liste suivante.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>L'élément se comporte comme si la propriété <code>pointer-events</code> n'était pas spécifiée. Pour le contenu SVG, cette valeur et la valeur <code>visiblePainted</code> ont le même effet.</dd>
+ <dt><code>none</code></dt>
+ <dd>L'élément ne sera jamais <a href="/fr/docs/Web/API/Event/target">la cible</a> d'événements de pointeur. Toutefois, les événements peuvent atteindre les éléments qui sont des descendants si ceux-ci ont une autre valeur pour <code>pointer-events</code>. Sous ces circonstances, les événements déclencheront les gestionnaires d'événement sur l'élément parent jusqu'à/depuis l'élément descendant lors de la phase de capture/<a href="/fr/docs/Web/API/Event/bubbles">bouillonnement</a> de l'événement.</dd>
+</dl>
+
+<h4 id="Valeurs_uniquement_utilisables_avec_SVG">Valeurs uniquement utilisables avec SVG</h4>
+
+<dl>
+ <dt><code>visiblePainted</code></dt>
+ <dd>L'élément ne peut être la cible d'un événement de pointeur que si la propriété <code>visibility</code> vaut <code>visible</code> et lorsque le pointeur est au-dessus de l'intérieur de l'élément et que la valeur de la propriété <code>fill</code> n'est pas <code>none</code> ou lorsque le pointeur de la souris est au-dessus du contour de l'élément et que la valeur de la propriété <code>stroke</code> n'est pas <code>none</code>.</dd>
+ <dt><code>visibleFill</code></dt>
+ <dd>L'élément ne peut être la cible d'un événement de pointeur que si la propriété <code>visibility</code> vaut <code>visible</code> et lorsque le pointeur est au-dessus de l'intérieur de l'élément. La valeur de la propriété <code>fill</code> n'a pas d'impact sur le traitement des événements.</dd>
+ <dt><code>visibleStroke</code></dt>
+ <dd>L'élément ne peut être la cible d'un événement de pointeur que si la propriété <code>visibility</code> vaut <code>visible</code> et lorsque le pointeur de la souris est au-dessus du contour de l'élément. La valeur de la propriété <code>stroke</code> n'a pas d'impact sur le traitement des événements.</dd>
+ <dt><code>visible</code></dt>
+ <dd>L'élément ne peut être la cible d'un événement de pointeur que si la propriété <code>visibility</code> vaut <code>visible</code> et lorsque le pointeur est au-dessus de l'intérieur de l'élément ou lorsque le pointeur de la souris est au-dessus du contour de l'élément. Les valeurs de <code>fill</code> et <code>stroke</code> n'ont pas d'impact sur le traitement des événements.</dd>
+ <dt><code>painted</code></dt>
+ <dd>L'élément ne peut être la cible d'un événement de pointeur que lorsque le pointeur est au-dessus de l'intérieur de l'élément et que la valeur de la propriété <code>fill</code> n'est pas <code>none</code> ou lorsque le pointeur de la souris est au-dessus du contour de l'élément et que la valeur de la propriété <code>stroke</code> n'est pas <code>none</code>. La valeur de <code>visibility</code> n'a pas d'impact sur le traitement des événements.</dd>
+ <dt><code>fill</code></dt>
+ <dd>L'élément ne peut être la cible d'un événement de pointeur que lorsque le pointeur est au-dessus de l'intérieur de l'élément. Les valeurs de <code>fill</code> et de <code>visibility</code> n'ont pas d'impact sur le traitement des événements.</dd>
+ <dt><code>stroke</code></dt>
+ <dd>L'élément ne peut être la cible d'un événement de pointeur que lorsque le pointeur est au-dessus du contour de l'élément. Les valeurs de <code>stroke</code> et de <code>visibility</code> n'ont pas d'impact sur le traitement des événements.</dd>
+ <dt><code>all</code></dt>
+ <dd>L'élément ne peut être la cible d'un événement de pointeur que lorsque le pointeur est au-dessus de l'intérieur de l'élément ou lorsque le pointeur de la souris est au-dessus du contour de l'élément. Les valeurs de <code>fill</code>, <code>stroke</code> et de <code>visibility</code> n'ont pas d'impact sur le traitement des événements.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on rend le lien http://exemple.com inactif.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html">&lt;ul&gt;
+  &lt;li&gt;&lt;a href="https://developer.mozilla.org"&gt;MDN&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="http://exemple.com"&gt;exemple.com&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">a[href="http://exemple.com"] {
+  pointer-events: none;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<div>{{EmbedLiveSample('Exemples', "500", "100")}}</div>
+
+<h2 id="Notes">Notes</h2>
+
+<p>L'utilisation de <code>pointer-events</code> peut empêcher que des événements soient directement déclenchés sur l'élément avec les pointeurs. Cela ne signifie en aucun cas que les gestionnaires d'événement de cet élément ne pourront pas être déclenchés ! Si l'un des éléments descendants possède une valeur explicite de <code>pointer-events</code> qui lui permet de recevoir des événements de pointeur, les événements qui parcourent les ancêtres pourront déclencher les gestionnaires d'événements associés. Bien entendu, tout pointage, qui a lieu sur un endroit de l'écran qui est couvert par le parent mais pas par l'élément descendant, ne déclenchera d'événement. L'événement passera au travers du parent et ciblera le contenu qui est en-dessous.</p>
+
+<p>Les éléments avec <code>pointer-events: none</code> continueront de recevoir le focus via la navigation au clavier avec la touche <kbd>Tab</kbd>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'interact.html#PointerEventsProperty', 'pointer-events')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG2', 'interact.html#PointerEventsProperty', 'pointer-events')}}</td>
+   <td>{{Spec2('SVG2')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>L'extension de cette propriété aux éléments HTML, bien qu'elle fut présente dans les premiers brouillons de la spécification <em>CSS Basic User Interface Module Level 3</em>, a été remise à la spécification de <a class="external" href="https://wiki.csswg.org/spec/css4-ui#pointer-events"> niveau 4</a>.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.pointer-events")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'attribut SVG {{SVGAttr("pointer-events")}}</li>
+ <li>L'attribut SVG {{SVGAttr("visibility")}}</li>
+ <li>La propriété {{cssxref("user-select")}} qui contrôle lorsque l'utilisateur peut sélectionner du texte</li>
+ <li><a class="external" href="https://webkit.org/specs/PointerEventsProperty.html">« Spécification » WebKit pour étendre la propriété pointer-events</a> au contenu (X)HTML</li>
+ <li><a href="http://www.thecssninja.com/javascript/pointer-events-60fps">Un défilement à 60fps en utilisant <code>pointer-events: none</code> (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/position/index.html b/files/fr/web/css/position/index.html
new file mode 100644
index 0000000000..d1ab95d2ec
--- /dev/null
+++ b/files/fr/web/css/position/index.html
@@ -0,0 +1,344 @@
+---
+title: position
+slug: Web/CSS/position
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/position
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>position</code></strong> définit la façon dont un élément est positionné dans un document. Les propriétés {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} et {{cssxref("left")}} déterminent l'emplacement final de l'élément positionné.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/position.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h3 id="Types_de_positionnement">Types de positionnement</h3>
+
+<ul>
+ <li>Un <strong>élément positionné</strong> est un élément dont la propriété de position <a href="/fr/docs/Web/CSS/Valeur_calculée">calculée</a> est <code>relative</code>, <code>absolute</code>, <code>fixed</code> ou <code>sticky</code>.</li>
+ <li>Un <strong>élément positionné de façon relative</strong> est un élément dont la propriété de position calculée est <code>relative</code>. Dans ce cas, les propriétés {{cssxref("top")}} ou {{cssxref("bottom")}} indiquent le décalage vertical à appliquer et {{cssxref("left")}} ou {{cssxref("right")}} indiquent le décalage horizontal.</li>
+ <li>Un <strong>élément positionné de façon absolue</strong> est un élément dont la propriété de position calculée est <code>absolute</code> ou <code>fixed</code>. Dans ce cas, les propriétés {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("right")}} et {{cssxref("left")}} indiquent les distances entre les bords de l'élément et les bords du bloc englobant (c'est-à-dire l'ancêtre par rapport auquel l'élément est positionné). Si l'élément possède des marges, elles sont ajoutées aux décalages.</li>
+ <li>Un <strong>élément positionné en adhérence</strong> est un élément dont la propriété de position calculée vaut <code>sticky</code>. Un tel élément se comporte comme un élément positionné de façon relative jusqu'à ce que son bloc englobant dépasse un seuil donné (par exemple fourni par la valeur de {{cssxref("top")}}) au sein du conteneur puis il se comporte ensuite comme un élément fixe jusqu'à atteindre le bord opposé du bloc englobant.</li>
+</ul>
+
+<p>La plupart du temps, les éléments positionnés de façon absolue ont leurs propriétés {{cssxref("height")}} et {{cssxref("width")}} qui valent <code>auto</code> afin que le contenu ait suffisamment d'espace. Toutefois, les éléments positionnés de façon absolue et qui ne sont pas des éléments remplacés peuvent remplir l'espace vertical en utilisant {{cssxref("top")}} et {{cssxref("bottom")}} tout en laissant {{cssxref("height")}} indéfini (c'est-à-dire avec la valeur <code>auto</code>). On pourra faire de même pour l'espace horizontal avec les propriétés {{cssxref("left")}} et {{cssxref("right")}}.</p>
+
+<p>Sauf dans le cas précédemment énoncé des éléments positionnés de façon absolue et qui remplissent l'espace :</p>
+
+<ul>
+ <li>Si <code>top</code> et <code>bottom</code> sont tous les deux définis (enfin, s'ils ne valent pas <code>auto</code>), c'est <code>top</code> qui aura la priorité</li>
+ <li>Si <code>left</code> et <code>right</code> sont tous les deux définis, c'est <code>left</code> qui aura la priorité si la direction du texte est de gauche à droite (LTR) et <code>right</code> qui aura la priorité si la direction du texte est de droite à gauche (RTL) (par exemple en perse, arabe, hébreu).</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+position: static;
+position: relative;
+position: absolute;
+position: fixed;
+position: sticky;
+
+/* Valeurs globales*/
+position: inherit;
+position: initial;
+position: unset;
+</pre>
+
+<p>La propriété <code>position</code> peut être définie avec l'un des mots-clés de la liste suivante.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>static</code></dt>
+ <dd>Comportement normal (par défaut). L'élément est alors positionné dans le flux avec sa position. Les propriétés {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("z-index")}} ne s'appliquent pas.</dd>
+ <dt><code>relative</code></dt>
+ <dd>L'élément est positionné dans le flux normal du document puis décalé, par rapport à lui-même, selon les valeurs fournies par <code>top</code>, <code>right</code>, <code>bottom</code> et <code>left</code>. Le décalage n'a pas d'impact sur la position des éléments. Aussi, l'espace fourni à l'élément sur la page est le même que celui fourni avec <code>static</code>.</dd>
+ <dd>Cette valeur crée un nouveau <a href="/fr/docs/Glossaire/Contexte_d_empilement">contexte d'empilement</a> lorsque <code>z-index</code> ne vaut pas <code>auto</code>. L'effet de cette valeur n'est pas défini pour les éléments <code>table-*-group</code>, <code>table-row</code>, <code>table-column</code>, <code>table-cell</code> et <code>table-caption</code>.</dd>
+ <dt><code>absolute</code></dt>
+ <dd>L'élément est retiré du flux normal et aucun espace n'est créé pour l'élément sur la page. Il est ensuite positionné par rapport à son ancêtre le plus proche qui est positionné s'il y en a un ou par rapport au bloc englobant initial sinon. La position finale de l'élément est déterminée par les valeurs de <code>top</code>, <code>right</code>, <code>bottom</code> et <code>left</code>.</dd>
+ <dd>Cette valeur crée un nouveau <a href="/fr/docs/Glossaire/Contexte_d_empilement">contexte d'empilement</a> lorsque <code>z-index</code> ne vaut pas <code>auto</code>. Les éléments positionnés de façon absolue peuvent avoir des marges, ces marges ne fusionnent pas avec les autres marges.</dd>
+ <dt><code>fixed</code></dt>
+ <dd>L'élément est retiré du flux normal et aucun espace n'est laissé pour l'élément. L'élément est positionné relativement au bloc englobant initial formé par la zone d'affichage (<em>viewport</em>), sauf si un des ancêtres a une propriété {{cssxref("transform")}}, {{cssxref("perspective")}} ou {{cssxref("filter")}} qui est différente de <code>none</code> (voir <a href="https://www.w3.org/TR/css-transforms-1/#propdef-transform">la spécification sur les transformations CSS</a>) ; dans ce cas, c'est l'élément ancêtre qui joue le rôle de bloc englobant. Cela empêche le défilement lorsque la page est parcourue (ou lors de l'impression, le positionne à cette position fixe pour <em>chaque page</em>). Cette valeur crée toujours un nouveau contexte d'empilement. Certains incohérences existent entre les navigateurs quant au rôle de <code>perspective</code> et <code>filter</code> pour la définition du bloc englobant. La valeur finale de l'élément est déterminée par les valeurs de <code>top</code>, <code>right</code>, <code>bottom</code> et <code>left</code>.</dd>
+ <dd>Cette valeur crée toujours un nouveau <a href="/fr/docs/Glossaire/Contexte_d_empilement">contexte d'empilement</a>. Pour les documents imprimés, cela se traduit par le placement de l'élément au même endroit pour <em>chacune des pages</em>.</dd>
+ <dt><code>sticky</code></dt>
+ <dd>La position de la boîte est calculée en fonction du flux normal du document. Ensuite, la boîte est décalée par rapport à son ancêtre de défilement le plus proche et par rapport à <a href="/fr/docs/Web/CSS/A_Propos_Du_Bloc_Conteneur">son bloc englobant</a> selon les valeurs de <code>top</code>, <code>right</code>, <code>bottom</code> et <code>left</code>. Dans tous les cas, y compris avec les éléments <code>table</code>, cela n'affecte pas la position des autres éléments.</dd>
+ <dd>Cette valeur entraîne toujours la création d'un nouveau <a href="/fr/docs/Glossaire/Contexte_d_empilement">contexte d'empilement</a>. On notera qu'un tel élément « adhèrera » à l'ancêtre le plus proche qui dispose d'un mécanisme de défilement (c'est-à-dire quand <code>overflow</code> vaut <code>hidden</code>, <code>scroll</code>, <code>auto</code> ou <code>overlay</code>) même si cet ancêtre n'est pas nécessairement l'ancêtre de défilement le plus proche : cette valeur ne fonctionnera pas dans un élément pour lequel la propriété vaut <code>overflow: hidden</code> ou <code>auto</code> (<a href="https://github.com/w3c/csswg-drafts/issues/865">cf.: cette <em>issue</em> GitHub</a>).</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Positionnement_relatif">Positionnement relatif</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="box" id="un"&gt;Un&lt;/div&gt;
+&lt;div class="box" id="deux"&gt;Deux&lt;/div&gt;
+&lt;div class="box" id="trois"&gt;Trois&lt;/div&gt;
+&lt;div class="box" id="quatre"&gt;Quatre&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.box {
+   display: inline-block;
+   background: red;
+   width: 100px;
+   height: 100px;
+   color: white;
+}
+
+#deux {
+   position: relative;
+   top: 20px;
+   left: 20px;
+}
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>Dans cet exemple, on voit comment les autres éléments sont positionnés, comme si « Deux » prenait l'espace de sa position normale.</p>
+
+<p>{{EmbedLiveSample('Positionnement_relatif', '600px', '200px')}}</p>
+
+<h3 id="Positionnement_absolu">Positionnement absolu</h3>
+
+<p>Les éléments qui sont positionnés de façon relatives sont toujours pris en compte dans le flux normal des éléments du document. En revanche, les éléments positionnés de façon absolue sont retirés du flux et ne prennent donc plus d'espace lorsqu'il s'agit de positionner les autres éléments. Un élément positionné de façon absolu est positionné par rapport à son plus proche ancêtre positionné. S'il n'y a pas de tel ancêtre, c'est le conteneur initial, le bloc englobant la racine du document, qui est utilisé (voir <a href="https://www.w3.org/TR/CSS2/visudet.html#containing-block-details">la définition du W3C</a>).</p>
+
+<p>Dans l'exemple qui suit, on n'a pas d'ancêtre positionné et la boîte « Trois » est positionnée de façon absolue par rapport à l'ancêtre immédiat (l'élément <code>&lt;body&gt;</code> de l'<code>iframe</code> générée ici) :</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;h1&gt;Positionnement absolu&lt;/h1&gt;
+&lt;p&gt;Un élément de bloc simple. Les éléments de bloc adjacents sont sur de nouvelles lignes en-dessous.&lt;/p&gt;
+&lt;p class="positioned"&gt;Par défaut, on occupe 100% de la largeur de l'élément parent et on est aussi grand que notre contenu.&lt;/p&gt;
+&lt;p&gt;Nous sommes séparés par nos marges (une seule marge en raison de la fusion des marges).&lt;/p&gt;
+&lt;p&gt;Les éléments &lt;em&gt;inline&lt;/em&gt; &lt;span&gt;comme celui-ci&lt;/span&gt; et &lt;span&gt;celui-là&lt;/span&gt; se situent sur la même ligne avec également les noeuds texte. S'il y a de l'espace sur la même ligne. Les éléments qui dépassent &lt;span&gt;passent à la ligne si possible — comme pour ce texte.&lt;/span&gt; ou cette image &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+  background: aqua;
+  border: 3px solid blue;
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: red;
+  border: 1px solid black;
+}
+
+.positioned {
+  position: absolute;
+  background: yellow;
+  top: 30px;
+  left: 30px;
+}</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample('Positionnement_absolu', '100%', 420)}}</p>
+
+<h3 id="Positionnement_fixe">Positionnement fixe</h3>
+
+<p>Le positionnement fixe est semblable au positionnement absolu sauf qu'ici, le bloc englobant correspond au <em>viewport</em> si aucun ancêtre de l'élément ne possède une propriété {{cssxref("transform")}}, {{cssxref("perspective")}} ou {{cssxref("filter")}} qui est différente de <code>none</code>. On utilise souvent ce positionnement pour créer un élément flottant qui reste à la même position, même lorsqu'on fait défiler la page. Dans l'exemple qui suit, la boîte « Un » est fixée à 80 pixels du haut de la page et à 20 pixels du bord gauche.</p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;div class="outer"&gt;
+  &lt;p&gt;
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
+    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
+    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
+    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
+    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
+    Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
+    Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
+  &lt;/p&gt;
+  &lt;p&gt;
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
+    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
+    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
+    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
+    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
+    Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
+    Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
+  &lt;/p&gt;
+  &lt;div class="box" id="un"&gt;Un&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css">.box {
+  background: red;
+  width: 100px;
+  height: 100px;
+  margin: 20px;
+  color: white;
+}
+#un {
+  position: fixed;
+  top: 80px;
+  left: 10px;
+}
+.outer {
+  width: 500px;
+  height: 300px;
+  overflow: scroll;
+  padding-left: 150px;
+}
+</pre>
+
+<h4 id="Résultat_3">Résultat</h4>
+
+<p>Lorsqu'on regarde le haut de la page, la boîte apparaît en haut à gauche, même après avoir défilé, elle reste à la même place par rapport au <em>viewport</em> :</p>
+
+<p>{{EmbedLiveSample('Positionnement_fixe', '800px', '300px')}}</p>
+
+<h3 id="Positionnement_adhérent_(sticky)">Positionnement adhérent (<em>sticky</em>)</h3>
+
+<p>Le positionnement adhérent est un mélange de positionnement relatif et de positionnement fixe. L'élément est considéré comme positionné de façon relative, jusqu'à ce qu'un seuil soit franchi. À partir de ce seuil, l'élément est positionné de façon fixe. Par exemple :</p>
+
+<pre class="brush: css">#un {
+  position: sticky;
+  top: 10px;
+}</pre>
+
+<p>se comportera comme un élément positionné de façon relative jusqu'à ce que le <em>viewport</em> défile au point où l'élément est à moins de 10 pixels du haut. Ensuite, il sera fixé à 10 pixels du haut, jusqu'à ce que le <em>viewport</em> redéfile jusqu'avant ce seuil.</p>
+
+<p>Le positionnement adhérent est souvent utilisé pour gérer les niveaux de titre dans les listes alphabétiques. Le titre pour B apparaîtra sous les éléments commençant par A jusqu'à ce que ceux-ci disparaissent de l'écran. Plutôt que de défiler avec le reste de l'écran, la lettre B restera affichée en haut du <em>viewport</em> jusqu'à ce que tous les éléments commençant par B aient défilés sur l'écran (ce sera ensuite le tour de la lettre C et ainsi de suite).</p>
+
+<p>Il faut définir un seuil avec au moins {{cssxref("top")}} ou {{cssxref("right")}} ou {{cssxref("bottom")}} ou {{cssxref("left")}} pour que le positionnement adhérent fonctionne comme attendu. Sinon, on ne pourra pas le distinguer du positionnement relatif.</p>
+
+<h4 id="HTML_4">HTML</h4>
+
+<pre class="brush: html">&lt;dl&gt;
+  &lt;div&gt;
+    &lt;dt&gt;A&lt;/dt&gt;
+    &lt;dd&gt;Andrew W.K.&lt;/dd&gt;
+    &lt;dd&gt;Apparat&lt;/dd&gt;
+    &lt;dd&gt;Arcade Fire&lt;/dd&gt;
+    &lt;dd&gt;At The Drive-In&lt;/dd&gt;
+    &lt;dd&gt;Aziz Ansari&lt;/dd&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;dt&gt;C&lt;/dt&gt;
+    &lt;dd&gt;Chromeo&lt;/dd&gt;
+    &lt;dd&gt;Common&lt;/dd&gt;
+    &lt;dd&gt;Converge&lt;/dd&gt;
+    &lt;dd&gt;Crystal Castles&lt;/dd&gt;
+    &lt;dd&gt;Cursive&lt;/dd&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;dt&gt;E&lt;/dt&gt;
+    &lt;dd&gt;Explosions In The Sky&lt;/dd&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;dt&gt;T&lt;/dt&gt;
+    &lt;dd&gt;Ted Leo &amp; The Pharmacists&lt;/dd&gt;
+    &lt;dd&gt;T-Pain&lt;/dd&gt;
+    &lt;dd&gt;Thrice&lt;/dd&gt;
+    &lt;dd&gt;TV On The Radio&lt;/dd&gt;
+    &lt;dd&gt;Two Gallants&lt;/dd&gt;
+  &lt;/div&gt;
+&lt;/dl&gt;
+</pre>
+
+<h4 id="CSS_4">CSS</h4>
+
+<pre class="brush: css">* {
+  box-sizing: border-box;
+}
+dl &gt; div {
+  margin: 0;
+  padding: 24px 0 0 0;
+}
+
+dt {
+  background: #B8C1C8;
+  border-bottom: 1px solid #989EA4;
+  border-top: 1px solid #717D85;
+  color: #FFF;
+  font: bold 18px/21px Helvetica, Arial, sans-serif;
+  margin: 0;
+  padding: 2px 0 0 12px;
+  position: -webkit-sticky;
+  position: sticky;
+  width: 99%;
+  top: -1px;
+}
+
+dd {
+  font: bold 20px/45px Helvetica, Arial, sans-serif;
+  margin: 0;
+  padding: 0 0 0 12px;
+  white-space: nowrap;
+}
+
+dd + dd {
+  border-top: 1px solid #CCC;
+}
+</pre>
+
+<h4 id="Résultat_4">Résultat</h4>
+
+<p>{{EmbedLiveSample('Positionnement_adhérent_(sticky)', '500px', '300px')}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Il faut s'assurer que les éléments positionnés avec <code>absolute</code> ou <code>fixed</code> ne masquent pas d'autre contenu sur la page lorsqu'on zoome sur la page afin d'augmenter la taille du texte.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener"><em>Visual Presentation: Understanding SC 1.4.8 | Understanding WCAG 2.0</em> (en anglais)</a></li>
+</ul>
+
+<h3 id="Performance_et_accessibilité">Performance et accessibilité</h3>
+
+<p>Les éléments qui défilent avec du contenu utilisant <code>fixed</code> ou <code>sticky</code> peuvent entraîner des problèmes de performance et d'accessibilité. Lorsque l'utilisateur fait défiler le contenu, le navigateur doit « repeindre » le contenu adhérant ou fixé à un nouvel emplacement. Selon le contenu qui doit être repeint, les performances du navigateur et celles de l'appareil, il est possible que le contenu ne soit pas affiché de façon fluide (60fps), créant ainsi des saccades. Une solution consiste à ajouter <code>will-change: transform</code> (cf. {{cssxref("will-change")}}) aux éléments positionnés afin que le rendu de l'élément soit géré à part, améliorant ainsi les performances et l'accessibilité.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#propdef-position', 'position')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Positioning','#position-property','position')}}</td>
+   <td>{{Spec2('CSS3 Positioning')}}</td>
+   <td>Ajout de la valeur <code>sticky</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.position")}}</p>
diff --git a/files/fr/web/css/propriétés_raccourcies/index.html b/files/fr/web/css/propriétés_raccourcies/index.html
new file mode 100644
index 0000000000..6c390b9dc8
--- /dev/null
+++ b/files/fr/web/css/propriétés_raccourcies/index.html
@@ -0,0 +1,155 @@
+---
+title: Propriétés raccourcies
+slug: Web/CSS/Propriétés_raccourcies
+tags:
+  - CSS
+  - Guide
+  - Reference
+translation_of: Web/CSS/Shorthand_properties
+---
+<div>{{CSSRef}}</div>
+
+<p><dfn>Les propriétés raccourcies sont des propriétés CSS qui permettent de définir la valeur de plusieurs propriétés via une seule déclaration. En manipulant des propriétés raccourcies, un développeur web peut créer des feuilles de style plus concises et plus lisibles, améliorant ainsi la maintenabilité</dfn>.</p>
+
+<p>La spécification CSS définit les propriétés raccourcies en regroupant la définition des propriétés agissant sur le même aspect de l'élément. Ainsi, la propriété {{cssxref("background")}} est une propriété raccourcie qui permettra de définir {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-repeat")}} et {{cssxref("background-position")}}. De même, les propriétés fréquemment utilisées pour la mise en forme des polices de caractères (<em>font</em>) peuvent être définies via la propriété raccourcie {{cssxref("font")}} et celles qui concernent la marge avec la propriété raccourcie {{cssxref("margin")}}.</p>
+
+<h2 id="Quelques_cas_aux_limites_épineux">Quelques cas aux limites épineux</h2>
+
+<p>Bien que les propriétés raccourcies soient pratiques à utiliser. Il est nécessaire de noter certains éléments pour parer aux cas étranges qui peuvent survenir :</p>
+
+<ol>
+ <li>Une valeur qui n'est pas définie pour la propriété raccourcie <strong>sera réinitialisée avec sa valeur initiale</strong>. Cela peut sembler anecdotique mais attention aux valeurs qui seront surchargées et à l'ordre des déclarations. Ainsi :
+
+  <pre class="brush:css notranslate">background-color: red;
+background: url(images/bg.gif) no-repeat top right;
+</pre>
+  ne définira pas la couleur d'arrière-plan en rouge mais avec la valeur par défaut de {{cssxref("background-color")}} <code>transparent</code> car la deuxième déclaration prend le pas sur la première.</li>
+ <li>L'héritage des propriétés ne peut avoir lieu qu'avec les propriétés individuelles . En effet, les valeurs absentes sont remplacées par leurs valeurs initiales et il est donc impossible d'hériter des valeurs en les omettant. Le mot-clé {{cssxref("inherit")}} pourra être appliqué à une propriété mais ce sera sur l'ensemble et non pour une valeur donnée ou une autre. Ainsi, pour utiliser une valeur héritée sur une propriété spécifique, il faudra utiliser cette propriété « longue » avec le mot-clé <code>inherit.</code></li>
+ <li>Les propriétés raccourcies n'ont pas d'ordre spécifique pour trier les valeurs des propriétés détaillées qu'elles remplacent. Cela fonctionne sans problème lorsque les différentes propriétés utilisent différents types de valeurs car l'ordre n'a alors aucune importance. Toutefois, lorsque les différentes propriétés peuvent prendre les mêmes valeurs, cela n'est pas si simple. On peut regrouper les différents cas en deux catégories distinctes :
+  <ol>
+   <li>Les propriétés raccourcies qui gèrent les bords d'une boîte telles que {{cssxref("border-style")}}, {{cssxref("margin")}} ou {{cssxref("padding")}}. Elles utilisent une méthode constante selon qu'elles reçoivent 1 à 4 valeurs :
+    <table>
+     <tbody>
+      <tr>
+       <td style="width: 79px;"><img alt="border1.png" src="/files/3646/border1.png"></td>
+       <td><em>1 valeur </em>: <code>border-width: 1em</code> — La valeur unique s'adresse à tous les côtés.</td>
+      </tr>
+      <tr>
+       <td><img alt="border2.png" src="/files/3647/border2.png"></td>
+       <td><em>2 valeurs </em>: <code>border-width: 1em 2em</code> — La première valeur représente les côtés horizontaux en haut et en bas. La seconde valeur représente les côtés verticaux, à gauche et à droite.</td>
+      </tr>
+      <tr>
+       <td><img alt="border3.png" src="/files/3648/border3.png"></td>
+       <td><em>3 valeurs </em>: <code>border-width: 1em 2em 3em</code> — La première valeur représente le côté haut, la deuxième les côtés gauche et droit et la troisième représente le côté bas.</td>
+      </tr>
+      <tr>
+       <td><img alt="border4.png" src="/files/3649/border4.png"></td>
+       <td>
+        <p><em>4 valeurs </em>: <code>border-width: 1em 2em 3em 4em</code> — Les quatre valeurs représentent respectivement le côté haut, le côté droit, le côté bas et le côté haut, toujours dans cet ordre (le sens horaire).</p>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+   </li>
+   <li>De la même façon, les propriétés raccourcies relatives aux coins d'une boîte comme {{cssxref("border-radius")}} utilisent une méthode constante selon qu'elles reçoivent 1 à 4 valeurs :
+    <table>
+     <tbody>
+      <tr>
+       <td style="width: 69px;"><img alt="corner1.png" src="/files/3650/corner1.png"></td>
+       <td><em>1 valeur </em>: <code>border-radius: 1em</code> — La valeur s'applique à tous les coins.</td>
+      </tr>
+      <tr>
+       <td><img alt="corner2.png" src="/files/3651/corner2.png"></td>
+       <td><em>2 valeurs </em>: <code>border-radius: 1em 2em</code> — La première valeur s'applique aux coins en haut à gauche et en bas à droite et la deuxième s'applique aux coins en haut à droite et en bas à gauche.</td>
+      </tr>
+      <tr>
+       <td><img alt="corner3.png" src="/files/3652/corner3.png"></td>
+       <td><em>3 valeurs </em>: <code>border-radius: 1em 2em 3em</code> — La première valeur représente le coin en haut à gauche, la deuxième représente les coins en haut à droite et en bas à gauche et la troisième valeur représente le coin en bas à droite.</td>
+      </tr>
+      <tr>
+       <td><img alt="corner4.png" src="/files/3653/corner4.png"></td>
+       <td>
+        <p><em>4 valeurs </em>: <code>border-radius: 1em 2em 3em 4em</code> — Les quatre valeurs s'appliquent respectivement au coin en haut à gauche, en haut à droite, en bas à droite et en bas à gauche, toujours dans cet ordre (le sens horaire).</p>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+   </li>
+  </ol>
+ </li>
+</ol>
+
+<h2 id="Les_propriétés_concernant_larrière-plan">Les propriétés concernant l'arrière-plan</h2>
+
+<p>Lorsqu'on décrit un arrière-plan avec les propriétés suivantes :</p>
+
+<pre class="brush:css notranslate">background-color: #000;
+background-image: url(images/bg.gif);
+background-repeat: no-repeat;
+background-position: top right;</pre>
+
+<p>On peut le faire de façon plus concise grâce à la propriété raccourcie. Voici la déclaration équivalent :</p>
+
+<pre class="brush:css notranslate">background: #000 url(images/bg.gif) no-repeat top right;</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Pour être tout à fait précis, la forme raccourcie présentée juste avant est équivalente aux propriétés détaillées qui précèdent auxquelles on ajoute <code>background-attachment: scroll</code> et d'autres propriétés avec CSS3).</p>
+</div>
+
+<p>Pour plus d'informations, voir {{cssxref("background")}}.</p>
+
+<h2 id="Les_propriétés_liées_à_la_police_font">Les propriétés liées à la police (<em>font</em>)</h2>
+
+<p>Les déclarations suivantes :</p>
+
+<pre class="brush:css notranslate">font-style: italic;
+font-weight: bold;
+font-size: .8em;
+line-height: 1.2;
+font-family: Arial, sans-serif;</pre>
+
+<p>Peuvent être synthétisées en une seule déclaration avec la propriété raccourcie :</p>
+
+<pre class="brush:css notranslate">font: italic bold .8em/1.2 Arial, sans-serif;</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Pour être tout à fait précis, la déclaration raccourcie précédente est équivalente aux déclarations détaillées ci-avant auxquelles on ajoutera <code>font-variant: normal</code> et <code>font-size-adjust: none</code> (CSS2.0 / CSS3), <code>font-stretch: normal</code> (CSS3).</p>
+</div>
+
+<h2 id="Les_propriétés_liées_aux_bordures">Les propriétés liées aux bordures</h2>
+
+<p>Avec les bordures, la largeur, la couleur et le style peuvent être regroupés en une seule déclaration. Par exemple,</p>
+
+<pre class="brush:css notranslate">border-width: 1px;
+border-style: solid;
+border-color: #000;</pre>
+
+<p>peut être écrit ainsi :</p>
+
+<pre class="brush:css notranslate">border: 1px solid #000;</pre>
+
+<h2 id="Les_propriétés_liées_à_la_marge_et_au_remplissage_padding">Les propriétés liées à la marge et au remplissage (<em>padding</em>)</h2>
+
+<p>Les propriétés raccourcies agissant sur la boîte de marge ou sur la boîte de remplissage (<em>padding</em>) fonctionnent de la même façon. Ainsi, les déclarations CSS suivantes :</p>
+
+<pre class="brush:css notranslate">margin-top: 10px;
+margin-right: 5px;
+margin-bottom: 10px;
+margin-left: 5px;</pre>
+
+<p>sont équivalentes à la déclaration qui suit (on notera que les valeurs sont ordonnés dans le sens horaire : haut, droit, bas, gauche ; un moyen mnémotechnique est d'utiliser l'acronyme anglais TRBL qui ressemble à <em>trouble</em>) :</p>
+
+<pre class="brush:css notranslate">margin: 10px 5px 10px 5px;</pre>
+
+<h2 id="La_propriété_raccourcie_universelle">La propriété raccourcie universelle</h2>
+
+<p>CSS fournit une propriété raccourcie qui permet d'appliquer une même valeur à l'ensemble des propriétés du document : {{cssxref("all")}}.</p>
+
+<p>Voir l'article sur <a href="/fr/Apprendre/CSS/Introduction_à_CSS/La_cascade_et_l_héritage">la cascade et l'héritage</a> pour plus d'informations sur le fonctionnement de l'héritage.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Reference">La référence CSS</a></li>
+ <li>Les propriétés raccourcies : {{cssxref("animation")}}, {{cssxref("background")}}, {{cssxref("border")}}, {{cssxref("border-bottom")}}, {{cssxref("border-color")}}, {{cssxref("border-left")}}, {{cssxref("border-radius")}}, {{cssxref("border-right")}}, {{cssxref("border-style")}}, {{cssxref("border-top")}}, {{cssxref("border-width")}}, {{cssxref("column-rule")}}, {{cssxref("columns")}}, {{cssxref("flex")}}, {{cssxref("flex-flow")}}, {{cssxref("font")}}, {{cssxref("grid")}}, {{cssxref("grid-area")}}, {{cssxref("grid-column")}}, {{cssxref("grid-row")}}, {{cssxref("grid-template")}}, {{cssxref("list-style")}}, {{cssxref("margin")}}, {{cssxref("offset")}}, {{cssxref("outline")}}, {{cssxref("overflow")}}, {{cssxref("padding")}}, {{cssxref("place-content")}}, {{cssxref("place-items")}}, {{cssxref("place-self")}}, {{cssxref("text-decoration")}}, {{cssxref("transition")}}</li>
+</ul>
diff --git a/files/fr/web/css/pseudo-classes/index.html b/files/fr/web/css/pseudo-classes/index.html
new file mode 100644
index 0000000000..8c7425003c
--- /dev/null
+++ b/files/fr/web/css/pseudo-classes/index.html
@@ -0,0 +1,205 @@
+---
+title: Pseudo-classes
+slug: Web/CSS/Pseudo-classes
+tags:
+  - CSS
+  - Intermédiaire
+  - Pseudo-classe
+  - Reference
+  - Sélecteur
+translation_of: Web/CSS/Pseudo-classes
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Une <strong>pseudo-classe</strong> est un mot-clé qui peut être ajouté à un sélecteur afin d'indiquer l'état spécifique dans lequel l'élément doit être pour être ciblé par la déclaration. La pseudo-classe {{cssxref(":hover")}}, par exemple, permettra d'appliquer une mise en forme spécifique lorsque l'utilisateur survole l'élément ciblé par le sélecteur (changer la couleur d'un bouton par exemple).</p>
+
+<pre class="brush: css no-line-numbers">div:hover {
+  background-color: #F89B4D;
+}</pre>
+
+<p>Les pseudo-classes permettent d'appliquer un style à un élément non seulement en fonction de son contenu dans l'arbre du document mais aussi en fonction de facteurs externes (l'historique de navigation par exemple avec {{cssxref(":visited")}} ; le statut du contenu avec {{cssxref(":checked")}} ; la position de la souris {{cssxref(":hover")}}).</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> À la différence des pseudo-classes, <a href="/fr/docs/Web/CSS/Pseudo-%C3%A9l%C3%A9ments">les pseudo-éléments</a> peuvent être utilisés afin d'appliquer un style sur une certaine partie d'un élément.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">sélecteur:pseudo-classe {
+  propriété: valeur;
+}
+</pre>
+
+<p>À l'instar des classes, on peut chaîner plusieurs pseudo-classes au sein d'un sélecteur.</p>
+
+<h2 id="Liste_des_pseudo-classes_standards">Liste des pseudo-classes standards</h2>
+
+<div class="index" id="index">
+<ul>
+ <li>{{CSSxRef(":active")}}</li>
+ <li>{{CSSxRef(":any-link")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":blank")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":checked")}}</li>
+ <li>{{CSSxRef(":current")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":default")}}</li>
+ <li>{{CSSxRef(":defined")}}</li>
+ <li>{{CSSxRef(":dir", ":dir()")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":disabled")}}</li>
+ <li>{{CSSxRef(":drop")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":empty")}}</li>
+ <li>{{CSSxRef(":enabled")}}</li>
+ <li>{{CSSxRef(":first")}}</li>
+ <li>{{CSSxRef(":first-child")}}</li>
+ <li>{{CSSxRef(":first-of-type")}}</li>
+ <li>{{CSSxRef(":fullscreen")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":future")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":focus")}}</li>
+ <li>{{CSSxRef(":focus-visible")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":focus-within")}}</li>
+ <li>{{CSSxRef(":has", ":has()")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":host")}}</li>
+ <li>{{CSSxRef(":host()")}}</li>
+ <li>{{CSSxRef(":host-context()")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":hover")}}</li>
+ <li>{{CSSxRef(":indeterminate")}}</li>
+ <li>{{CSSxRef(":in-range")}}</li>
+ <li>{{CSSxRef(":invalid")}}</li>
+ <li>{{CSSxRef(":is")}} {{Experimental_inline}}</li>
+ <li>{{CSSxRef(":lang", ":lang()")}}</li>
+ <li>{{CSSxRef(":last-child")}}</li>
+ <li>{{CSSxRef(":last-of-type")}}</li>
+ <li>{{CSSxRef(":left")}}</li>
+ <li>{{CSSxRef(":link")}}</li>
+ <li>{{CSSxRef(":local-link")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":not", ":not()")}}</li>
+ <li>{{CSSxRef(":nth-child", ":nth-child()")}}</li>
+ <li>{{CSSxRef(":nth-col", ":nth-col()")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":nth-last-child", ":nth-last-child()")}}</li>
+ <li>{{CSSxRef(":nth-last-col", ":nth-last-col()")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":nth-last-of-type", ":nth-last-of-type()")}}</li>
+ <li>{{CSSxRef(":nth-of-type", ":nth-of-type()")}}</li>
+ <li>{{CSSxRef(":only-child")}}</li>
+ <li>{{CSSxRef(":only-of-type")}}</li>
+ <li>{{CSSxRef(":optional")}}</li>
+ <li>{{CSSxRef(":out-of-range")}}</li>
+ <li>{{CSSxRef(":past")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":placeholder-shown")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":read-only")}}</li>
+ <li>{{CSSxRef(":read-write")}}</li>
+ <li>{{CSSxRef(":required")}}</li>
+ <li>{{CSSxRef(":right")}}</li>
+ <li>{{CSSxRef(":root")}}</li>
+ <li>{{CSSxRef(":scope")}}</li>
+ <li>{{CSSxRef(":target")}}</li>
+ <li>{{CSSxRef(":target-within")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":user-invalid")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":valid")}}</li>
+ <li>{{CSSxRef(":visited")}}</li>
+ <li>{{CSSxRef(":where", ":where()")}} {{Experimental_Inline}}</li>
+</ul>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.survol:hover {
+  background-color: palegreen;
+}
+
+p:nth-child(2n+1) {
+  background-color: lime;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="survol"&gt;
+    La Reine devint pourpre de colère ; et après
+    l’avoir considérée un moment avec des yeux
+    flamboyants comme ceux d’une bête fauve, elle
+    se mit à crier : « Qu’on lui coupe la tête ! »
+  &lt;/p&gt;
+  &lt;p&gt;
+    « Quelle idée ! » dit Alice très-haut et d’un
+    ton décidé. La Reine se tut.
+  &lt;/p&gt;
+  &lt;p&gt;
+    Le Roi lui posa la main sur le bras, et lui
+    dit timidement : « Considérez donc, ma chère
+    amie, que ce n’est qu’une enfant. »
+  &lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","250","350")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Fullscreen')}}</td>
+   <td>{{Spec2('Fullscreen')}}</td>
+   <td>Définition de <code>:fullscreen</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#pseudo-classes')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Définit lorsque des sélecteurs particuliers correspondent à des éléments HTML.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>
+    <p>Définition de <code>:any-link</code>, <code>:local-link</code>, <code>:scope</code>, <code>:active-drop-target</code>, <code>:valid-drop-target</code>, <code>:invalid-drop-target</code>, <code>:current</code>, <code>:past</code>, <code>:future</code>, <code>:placeholder-shown</code>, <code>:user-error</code>, <code>:blank</code>, <code>:nth-match()</code>, <code>:nth-last-match()</code>, <code>:nth-column()</code>, <code>:nth-last-column()</code> et <code>:matches()</code>.</p>
+
+    <p>Changement afin que <code>:empty</code> se comporte comme {{CSSxRef(":-moz-only-whitespace")}} {{Non-standard_Inline}}.</p>
+
+    <p>Aucune modification significative pour les pseudo-classes définies avec {{SpecName('CSS3 Selectors')}} et {{SpecName('HTML5 W3C')}}.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Copie les éléments pertinents de la spécification HTML WHATWG</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Définition de <code>:default</code>, <code>:valid</code>, <code>:invalid</code>, <code>:in-range</code>, <code>:out-of-range</code>, <code>:required</code>, <code>:optional</code>, <code>:read-only</code> et <code>:read-write</code>, mais sans la sémantique associée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Définition de <code>:target</code>, <code>:root</code>, <code>:nth-child()</code>, <code>:nth-last-of-child()</code>, <code>:nth-of-type()</code>, <code>:nth-last-of-type()</code>, <code>:last-child</code>, <code>:first-of-type</code>, <code>:last-of-type</code>, <code>:only-child</code>, <code>:only-of-type</code>, <code>:empty</code> et <code>:not()</code>.<br>
+    Définition de la syntaxe pour <code>:enabled</code>, <code>:disabled</code>, <code>:checked</code> et <code>:indeterminate</code>, mais sans la sémantique associée.<br>
+    Pas de modification significative pour les pseudo-classes définies avec {{SpecName('CSS2.1')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition de <code>:lang()</code>, <code>:first-child</code>, <code>:hover</code> et <code>:focus</code>.<br>
+    Aucune modification significative pour les pseudo-classes définies avec  {{SpecName('CSS1')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition de <code>:link</code>, <code>:visited</code> et <code>:active</code>, mais sans la sémantique associée.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Pseudo-%C3%A9l%C3%A9ments">Les pseudo-éléments</a></li>
+</ul>
diff --git a/files/fr/web/css/pseudo-éléments/index.html b/files/fr/web/css/pseudo-éléments/index.html
new file mode 100644
index 0000000000..4f9ce9eeb9
--- /dev/null
+++ b/files/fr/web/css/pseudo-éléments/index.html
@@ -0,0 +1,132 @@
+---
+title: Pseudo-éléments
+slug: Web/CSS/Pseudo-éléments
+tags:
+  - CSS
+  - Pseudo-element
+  - Reference
+  - Sélecteur
+translation_of: Web/CSS/Pseudo-elements
+---
+<div>{{CSSRef}}</div>
+
+<p>Un <strong>pseudo-élément</strong> est un mot-clé ajouté à un sélecteur qui permet de mettre en forme certaines parties de l'élément ciblé par la règle. Ainsi, le pseudo-élément {{cssxref("::first-line")}} permettra de ne cibler que la première ligne d'un élément visé par le sélecteur.</p>
+
+<pre class="brush: css no-line-numbers">/* La première ligne de chaque élément &lt;p&gt;. */
+p::first-line {
+  color: blue;
+  text-transform: uppercase;
+}
+</pre>
+
+
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> À la différence des pseudo-éléments, <a href="/fr/docs/Web/CSS/Pseudo-classes">les pseudo-classes</a> peuvent être utilisées afin de mettre en forme un élément en fonction de son état.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">sélecteur::pseudo-élément {
+  propriété: valeur;
+}</pre>
+
+<p>On ne peut utiliser qu'un seul pseudo-élément dans un sélecteur. Le pseudo-élément doit apparaître après les sélecteurs simple de la déclaration</p>
+
+<p>Depuis CSS3, on utilise deux fois le caractère deux-points (:) pour préfixer les pseudo-éléments (afin de pouvoir les différencier des pseudo-classes). Toutefois, la plupart des navigateurs prennent en charge les pseudo-éléments pour lesquels le préfixe n'est formé que d'un seul « : ».</p>
+
+<h2 id="Liste_des_pseudo-éléments">Liste des pseudo-éléments</h2>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("::after", "::after (:after)")}}</li>
+ <li>{{CSSxRef("::backdrop")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("::before", "::before (:before)")}}</li>
+ <li>{{CSSxRef("::cue", "::cue (:cue)")}}</li>
+ <li>{{CSSxRef("::first-letter", "::first-letter (:first-letter)")}}</li>
+ <li>{{CSSxRef("::first-line", "::first-line (:first-line)")}}</li>
+ <li>{{CSSxRef("::grammar-error")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("::marker")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("::part")}} {{Experimental_inline}}</li>
+ <li>{{CSSxRef("::placeholder")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("::selection")}}</li>
+ <li>{{CSSxRef("::slotted", "::slotted()")}}</li>
+ <li>{{CSSxRef("::spelling-error")}} {{Experimental_Inline}}</li>
+</ul>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p::first-line {
+  color: blue;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  C’était le Lapin Blanc qui revenait en trottinant,
+  et qui cherchait de tous côtés, d’un air inquiet,
+  comme s’il avait perdu quelque chose ; Alice
+  l’entendit qui marmottait : « La Duchesse ! La
+  Duchesse ! Oh ! mes pauvres pattes ; oh ! ma robe
+  et mes moustaches ! Elle me fera guillotiner aussi
+  vrai que des furets sont des furets ! Où pourrais-je
+  bien les avoir perdus ? » Alice devina tout de suite
+  qu’il cherchait l’éventail et la paire de gants paille,
+  et, comme elle avait bon cœur, elle se mit à les
+  chercher aussi ; mais pas moyen de les trouver.
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', 250, 200)}}</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Navigateur</th>
+   <th>Version minimale</th>
+   <th>Prise en charge de :</th>
+  </tr>
+  <tr>
+   <td rowspan="2">Internet Explorer</td>
+   <td>8.0</td>
+   <td><code>:pseudo-element</code></td>
+  </tr>
+  <tr>
+   <td>9.0</td>
+   <td><code>:pseudo-element ::pseudo-element</code></td>
+  </tr>
+  <tr>
+   <td rowspan="2">Firefox (Gecko)</td>
+   <td>1.0 (1.0)</td>
+   <td><code>:pseudo-element</code></td>
+  </tr>
+  <tr>
+   <td>1.0 (1.5)</td>
+   <td><code>:pseudo-element ::pseudo-element</code></td>
+  </tr>
+  <tr>
+   <td rowspan="2">Opera</td>
+   <td>4.0</td>
+   <td><code>:pseudo-element</code></td>
+  </tr>
+  <tr>
+   <td>7.0</td>
+   <td><code>:pseudo-element ::pseudo-element</code></td>
+  </tr>
+  <tr>
+   <td>Safari (WebKit)</td>
+   <td>1.0 (85)</td>
+   <td><code>:pseudo-element ::pseudo-element</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Pseudo-classes">Les pseudo-classes</a></li>
+</ul>
diff --git a/files/fr/web/css/quotes/index.html b/files/fr/web/css/quotes/index.html
new file mode 100644
index 0000000000..00bc1a176b
--- /dev/null
+++ b/files/fr/web/css/quotes/index.html
@@ -0,0 +1,109 @@
+---
+title: quotes
+slug: Web/CSS/quotes
+tags:
+  - CSS
+  - Propriété
+  - Reference
+  - Web
+translation_of: Web/CSS/quotes
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>quotes</code></strong> indique la façon dont les marques de citation sont affichées.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/quotes.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeur avec un mot-clé */
+quotes: none;
+
+/* Chaînes de caractères */
+/* Type &lt;string&gt;         */
+quotes: "«" "»";           /* On utilise les guillemets français
+                              pour ouvrir et fermer une citation  */
+quotes: "«" "»" "‹" "›";   /* On définit deux niveaux de citation */
+
+/* Valeurs globales */
+quotes: inherit;
+quotes: initial;
+quotes: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Les valeurs <code>open-quote</code> et <code>close-quote</code> de la propriété {{cssxref("content")}} n'entraînent aucune marque de citation.</dd>
+ <dt><code>[&lt;string&gt; &lt;string&gt;]+</code></dt>
+ <dd>Une ou plusieurs paires de {{cssxref("&lt;string&gt;")}} pour les valeurs <code>open-quote</code> et <code>close-quote</code>. La première paire représente les symboles utilisés pour les citations de plus haut niveau, la deuxième indique comment délimiter une citation dans une citation, la troisième paire permet d'ajouter un niveau d'imbrication supplémentaire et ainsi de suite.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  &lt;q&gt;Bientôt le Lapin aperçut Alice qui furetait ;
+  il lui cria d’un ton d’impatience :
+    &lt;q&gt;Eh bien ! Marianne, que faites-vous ici ?
+    Courez vite à la maison me chercher une paire
+    de gants et un éventail ! Allons, dépêchons-nous.
+    &lt;/q&gt;
+  &lt;/q&gt;
+&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">q {
+  quotes : "«" "»" '"' '"';
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","100%")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Content", "#quotes", "quotes")}}</td>
+   <td>{{Spec2("CSS3 Content")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'generate.html#quotes', 'quotes')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une <em>pull request</em> sur ce dépôt: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("css.properties.quotes")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("content")}}</li>
+</ul>
diff --git a/files/fr/web/css/radial-gradient()/index.html b/files/fr/web/css/radial-gradient()/index.html
new file mode 100644
index 0000000000..bb6cb5951d
--- /dev/null
+++ b/files/fr/web/css/radial-gradient()/index.html
@@ -0,0 +1,225 @@
+---
+title: radial-gradient
+slug: Web/CSS/radial-gradient()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+translation_of: Web/CSS/radial-gradient()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>radial-gradient()</code></strong> permet de créer une {{cssxref("&lt;image&gt;")}} CSS représentant un dégradé de couleur. Ce dégradé diffuse depuis une origine, le <em>centre</em> du gradient. La valeur renvoyée par cette fonction est un objet CSS de type {{cssxref("&lt;gradient&gt;")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-radial-gradient.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>De façon analogue aux autres types de dégradés, un dégradé radial n'est pas une couleur ({{cssxref("&lt;color&gt;")}}) CSS mais une image <a href="/fr/docs/CSS/image#no_intrinsic">sans dimension intrinsèque</a> (c'est-à-dire que celle-ci ne possède pas de taille naturelle ou préférée ni de proportion). Sa taille réelle correspondra à la taille de l'élément auquel le gradient s'applique.</p>
+
+<div class="note">
+<p><strong>Note :</strong> La fonction <code>radial-gradient</code> ne permet pas d'obtenir des dégradés radiaux répétés. Pour obtenir un tel effet concentrique, on pourra utiliser la fonction CSS {{cssxref("repeating-radial-gradient")}}.</p>
+</div>
+
+<div class="note">
+<p><strong>Note :</strong> Une valeur de type <code>&lt;gradient&gt;</code> est également une valeur de type <code>&lt;image&gt;</code>. On peut donc utiliser des dégradés à n'importe quel endroit où on peut utiliser des images. En revanche, un dégradé n'est pas une valeur de type {{cssxref("&lt;color&gt;")}} et ne peut donc pas être utilisé avec les propriétés manipulant ces valeurs (par exemple {{cssxref("background-color")}}).</p>
+</div>
+
+<h2 id="Composition_dun_dégradé_radial">Composition d'un dégradé radial</h2>
+
+<p><img alt="" src="/files/3795/radial%20gradient.png" style="height: 176px; width: 396px;"></p>
+
+<p>Les dégradés radiaux sont définis par trois notions :</p>
+
+<ul>
+ <li>Le centre,</li>
+ <li>La forme de terminaison : le contour et sa position,</li>
+ <li>Les points de couleur (<em>color stops</em>).</li>
+</ul>
+
+<p>Pour obtenir un dégradé radial, on trace des formes uniformes concentriques, identiques à la formes de terminaison en partant du centre. Les points de couleur sont positionnés sur un <em>rayon virtuel</em> qui s'étend horizontalement depuis le centre et vers la droite. Lorsqu'on positionne ces points avec des pourcentages, la valeur sera relative au rayon total qui est la distance entre le centre et la forme de terminaison. Chaque forme a une seule couleur qui est déterminée par la couleur du point d'intersection entre le rayon et la forme.</p>
+
+<p>Les formes de terminaisons peuvent prendre deux formes <code>:</code></p>
+
+<ul>
+ <li>circulaire (avec le mot-clé <code>circle)</code></li>
+ <li>elliptique (avec le mot-clé <code>ellipse</code>).</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css  no-line-numbers notranslate">/* Un dégradé qui part du centre du conteneur,
+   qui commence en rouge, passe par du bleu
+   et finit en vert. */
+radial-gradient(circle at center, red 0, blue, green 100%)</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;position&gt;</code></dt>
+ <dd>Une {{cssxref("&lt;position&gt;")}} CSS qui est interprétée de la même façon que pour les propriétés {{cssxref("background-position")}} ou {{cssxref("transform-origin")}}. La valeur par défaut est <code>center</code>.</dd>
+ <dt><code>&lt;shape&gt;</code></dt>
+ <dd>La forme du gradient. Elle vaut soit <code>circle</code> (la forme du dégradé sera un cercle de rayon constant) ou <code>ellipse</code> (la forme est une ellipse alignée sur les axes). La valeur par défaut est <code>ellipse</code>.</dd>
+ <dt><code>&lt;linear-color-stop&gt;</code></dt>
+ <dd>Ces valeurs indiquent qu'une couleur donnée doit être utilisée à un endroit spécifique du dégradé. Cette valeur se compose d'une valeur {{cssxref("&lt;color&gt;")}} éventuellement suivie d'une position définie par une pourcentage ({{cssxref("&lt;percentage&gt;")}}) ou une longueur ({{cssxref("&lt;length&gt;")}}) selon le rayon virtuel du gradient. Un pourcentage ou une longueur nulle (<code>0%</code> ou <code>0</code>) indiquera le centre du dégradé. La valeur <code>100%</code> correspondra à l'intersection entre la forme de terminaison et le rayon virtuel. Les valeurs intermédiaires seront situées de façon proportionnelle.</dd>
+ <dt><code>&lt;color-hint&gt;</code></dt>
+ <dd>Une indication pour définir la progression de l'interpolation entre les deux points d'arrêt de couleur adjacents. La longueur définit l'emplacement auquel la transition aurait été effectuée à moitié entre les deux couleurs.</dd>
+ <dt><code>&lt;extent-keyword&gt;</code></dt>
+ <dd>Des mots-clés qui permettent de décrire la taille de la forme de terminaison. Les valeurs possibles sont :</dd>
+ <dd>
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <th>Constante</th>
+    <th>Description</th>
+   </tr>
+   <tr>
+    <td><code>closest-side</code></td>
+    <td>La forme de terminaison du dégradé touche le côté de la boîte le plus proche du centre (pour les cercles) ou touche les côtés horizontaux et verticaux les plus proches du centre (pour les ellipses).</td>
+   </tr>
+   <tr>
+    <td><code>closest-corner</code></td>
+    <td>La forme de terminaison du dégradé est dimensionnée afin de toucher exactement le coin de la boîte le plus proche du centre.</td>
+   </tr>
+   <tr>
+    <td><code>farthest-side</code></td>
+    <td>Cette valeur fonctionne de façon semblable à <code>closest-side</code>, sauf que ce seront les côtés les plus éloignés qui seront utilisés.</td>
+   </tr>
+   <tr>
+    <td><code>farthest-corner</code></td>
+    <td>La valeur par défaut. Cette valeur fonctionne de façon semblable à <code>closest-corner</code>, sauf que ce sera le coin le plus éloigné qui sera utilisé.</td>
+   </tr>
+  </tbody>
+ </table>
+ D'anciens brouillons de la spécification indiquaient d'autres mots-clés, <code>cover</code> et <code>contain</code>, respectivement synonymes des valeurs standards <code>farthest-corner</code> et <code>closest-side</code>. Seules les valeurs standards doivent être utilisées, certaines implémentations ont d'ailleurs déjà retirées les anciennes formes.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">radial-gradient(   [ circle || {{cssxref("&lt;length&gt;")}} ] [ at {{cssxref("&lt;position&gt;")}} ]? ,
+                 | [ ellipse || [ {{cssxref("&lt;length&gt;")}}  |  {{cssxref("&lt;percentage&gt;")}}  ]{2}] [ at  {{cssxref("&lt;position&gt;")}}  ]? ,
+                 | [ [ circle | ellipse ] || &lt;extent-keyword&gt; ] [ at  {{cssxref("&lt;position&gt;")}}  ]? ,
+                 | at  {{cssxref("&lt;position&gt;")}}  ,
+                 &lt;color-stop-list&gt; [ , &lt;color-stop-list&gt; ]+ )
+avec &lt;extent-keyword&gt; = closest-corner | closest-side | farthest-corner | farthest-side
+<code>  et<code> &lt;color-stop-list&gt; </code>= [ &lt;</code><dfn>linear-</dfn><code>color-stop&gt; [, &lt;color-hint&gt;? ]? ]#, &lt;</code><dfn>linear-</dfn><code>color-stop&gt;
+  et &lt;</code><dfn>linear-</dfn><code>color-stop&gt; = &lt;color&gt; [ &lt;color-stop-length&gt; ]?
+  et &lt;color-stop-length&gt; = [ &lt;percentage&gt; | &lt;length&gt; ]{1,2}
+  et &lt;color-hint&gt; = [ &lt;percentage&gt; | &lt;length&gt; ]</code></pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Une_ellipse_avec_farthest-corner">Une ellipse avec <code>farthest-corner</code></h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">.exemple {
+  height: 100vh;
+  width: 200vh;
+  background-image: radial-gradient(ellipse farthest-corner at 45px 45px , #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%);
+}</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p class="exemple"&gt;
+  Yop
+&lt;/p&gt;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Une_ellipse_avec_farthest-corner","250","150")}}</p>
+
+<h3 id="Un_cercle_de_16_pixels">Un cercle de 16 pixels</h3>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">.exemple {
+  height: 100vh;
+  width: 100vh;
+  background-image: radial-gradient(16px at 60px 50% , #000000 0%, #000000 14px, rgba(0, 0, 0, 0.3) 18px, rgba(0, 0, 0, 0) 19px);
+}</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p class="exemple"&gt;
+  Yop
+&lt;/p&gt;</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Un_cercle_de_16_pixels","250","150")}}</p>
+
+<h3 id="Un_dégradé_simple">Un dégradé simple</h3>
+
+<pre class="brush: html notranslate">&lt;div class="radial-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.radial-gradient {
+  width: 240px;
+  height: 120px;
+  background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%);
+} </pre>
+
+<p>{{EmbedLiveSample('Un_dégradé_simple', 120, 120)}}</p>
+
+<h3 id="Un_dégradé_non-centré">Un dégradé non-centré</h3>
+
+<pre class="brush: html notranslate">&lt;div class="radial-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.radial-gradient {
+  width: 240px;
+  height: 120px;
+  background-image: radial-gradient(farthest-corner at 40px 40px,
+      #f35 0%, #43e 100%);
+}</pre>
+
+<p>{{EmbedLiveSample('Un_dégradé_non-centré', 240, 120)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Images', '#radial-gradients', 'radial-gradients()')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.types.image.gradient.radial-gradient")}}</p>
+
+<h3 id="Notes_relatives_à_Quantum_Firefox">Notes relatives à Quantum (Firefox)</h3>
+
+<ul>
+ <li>Gecko possède un bug qui fait que <code>radial-gradient(circle  gold, red)</code> fonctionne bien que la virgule entre <code>circle</code> et <code>gold</code> soit absente (cf. {{bug("1383323")}}). Le nouveau moteur de rendu CSS, <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, prévu pour Firefox 57, corrige ce bug.</li>
+ <li>De plus, les expressions utilisant {{cssxref("calc")}} sont rejetées lorsqu'elles sont utilisées pour définit le rayon dans <code>radial-gradient()</code>, la valeur obtenue étant alors considérée comme invalide (cf. {{bug(1376019)}}). Ce point a également été corrigé avec Stylo.</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">Manipuler les dégradés CSS</a>,</li>
+ <li>{{cssxref("repeating-radial-gradient")}},</li>
+ <li>{{cssxref("linear-gradient")}}</li>
+ <li>{{cssxref("repeating-linear-gradient")}}</li>
+ <li>{{cssxref("conic-gradient")}}</li>
+ <li>{{cssxref("repeating-conic-gradient")}}</li>
+ <li>{{cssxref("&lt;image&gt;")}}</li>
+ <li>{{cssxref("_image","image()")}}</li>
+ <li>{{cssxref("element()")}}</li>
+ <li>{{cssxref("image-set","image-set()")}}</li>
+ <li>{{cssxref("cross-fade")}}</li>
+</ul>
diff --git a/files/fr/web/css/ratio/index.html b/files/fr/web/css/ratio/index.html
new file mode 100644
index 0000000000..51d9786b28
--- /dev/null
+++ b/files/fr/web/css/ratio/index.html
@@ -0,0 +1,110 @@
+---
+title: <ratio>
+slug: Web/CSS/ratio
+tags:
+  - CSS
+  - Reference
+  - Type
+translation_of: Web/CSS/ratio
+---
+<div>{{CSSRef}}</div>
+
+<p>Le type de donnée CSS <strong><code>&lt;ratio&gt;</code></strong> permet de décrire les proportions <a href="/fr/docs/Web/CSS/Media_queries">dans les <em>media queries</em></a> (N.D.T. pour « requête média » qui est moins usité). entre deux valeurs sans unité.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Une valeur de ce type se compose d'un entier strictement positif (type {{cssxref("&lt;integer&gt;")}}, suivi d'une barre oblique ('/', Unicode<code> U+002F SOLIDUS</code>) puis d'un second entier strictement positif (type {{cssxref("&lt;integer&gt;")}}). Il est possible d'avoir des espaces avant et après la barre oblique.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_dans_une_media_query">Utiliser dans une <em>media query</em></h3>
+
+<pre class="brush: css">@media screen and (min-aspect-ratio: 16/9) { … }</pre>
+
+<h3 id="Ratios_fréquemment_utilisés">Ratios fréquemment utilisés</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"> </th>
+   <th scope="col">Ratio</th>
+   <th scope="col">Utilisation</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><img alt="Ratio4_3.png" class="default internal" src="/@api/deki/files/5714/=Ratio4_3.png"></td>
+   <td><code>4/3</code></td>
+   <td>Format traditionnel utilisé par les télévisions au XX<sup>e</sup> siècle.</td>
+  </tr>
+  <tr>
+   <td><img alt="Ratio16_9.png" src="/@api/deki/files/5711/=Ratio16_9.png"></td>
+   <td><code>16/9</code></td>
+   <td>Format « moderne » des télévisions.</td>
+  </tr>
+  <tr>
+   <td><img alt="Ratio1_1.85.png" src="/@api/deki/files/5712/=Ratio1_1.85.png"></td>
+   <td><code>185/100</code> = <code>91/50</code><br>
+    <em>(les numérateurs et dénominateurs décimaux ne sont pas autorisés)</em></td>
+   <td>Le format le plus utilisé pour la projection de films depuis les années 1960.</td>
+  </tr>
+  <tr>
+   <td><img alt="Ratio1_2.39.png" src="/@api/deki/files/5713/=Ratio1_2.39.png"></td>
+   <td><code>239/100</code><br>
+    <em>(les numérateurs et dénominateurs décimaux ne sont pas autorisés)</em></td>
+   <td>Le format « large » utilisé pour projeter certains films (on parle de format anamorphique).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple_appliqué">Exemple appliqué</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@media screen and (min-aspect-ratio: 1/1) {
+  .exemple {
+    background-color: palegreen;
+  }
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="exemple"&gt;
+  Essayez de m'étirer en longueur ou de me réduire en largeur
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemple_appliqué","300","300")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#values', '&lt;ratio&gt;')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.types.ratio")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="internal" href="/fr/docs/Web/CSS/Media_queries">Les <em>media queries</em> CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/@media/aspect-ratio">La caractéristique média aspect-ratio</a></li>
+</ul>
diff --git a/files/fr/web/css/redimensionnement_arrière-plans_svg/index.html b/files/fr/web/css/redimensionnement_arrière-plans_svg/index.html
new file mode 100644
index 0000000000..ecd528838c
--- /dev/null
+++ b/files/fr/web/css/redimensionnement_arrière-plans_svg/index.html
@@ -0,0 +1,331 @@
+---
+title: Redimensionnement d'arrière-plans SVG
+slug: Web/CSS/Redimensionnement_arrière-plans_SVG
+tags:
+  - CSS
+  - Guide
+  - SVG
+translation_of: Web/CSS/Scaling_of_SVG_backgrounds
+---
+<p>Les images SVG sont très flexibles et lorsqu'on les utilise en CSS avec les propriétés {{cssxref("background-image")}} et {{cssxref("background-size")}}, il faut s'assurer de considérer les différents aspects qui leurs sont propres. Dans cet article, on décrit comment les images SVG sont redimensionnées grâce à ces propriétés.</p>
+
+<h2 id="Un_algorithme_simple">Un algorithme simple</h2>
+
+<p>Dans la plupart des cas, l'algorithme utilisé pourra être réduit à ces quatre règles. Ces règles ne sont pas exhaustives et ne couvrent pas certains cas aux limites mais cela sera suffisant ici :</p>
+
+<ol>
+ <li>Si {{cssxref("background-size")}} définit une dimension fixe (des pourcentages ou des unités relatives fixées par le contexte), cette dimension l'emporte.</li>
+ <li>Si l'image possède des proportions intrinsèques (autrement dit, si le ratio largeur/hauteur est constant : 16:9, 4:3, 2.39:1, 1:1), l'arrière-plan sera affiché en conservant ces proportions.</li>
+ <li>Si l'image définit une taille et que celle-ci n'est pas modifiée par une contrainte quelconque, cette taille l'emporte.</li>
+ <li>Dans tous les autres cas, l'image est affichée avec la taille de la zone dédiée à l'arrière-plan.</li>
+</ol>
+
+<p>On notera ici que l'algorithme ne prend en cas que les dimensions et/ou les proportions de l'image (leur absence éventullement). Ainsi, une image SVG dont les dimensions sont fixées sera traitée comme une image matricielle de la même taille.</p>
+
+<h2 id="Fichiers_dexemples">Fichiers d'exemples</h2>
+
+<p>Avant d'aller plus loin dans l'exploration des résultats avec {{cssxref("background-size")}}, il serait judicieux de disposer de différentes images sources avec différents paramètres de dimensions, proportions, etc.</p>
+
+<p>Pour chaque cas d'exemple fourni ci-après, l'image est affichée dans une boîte carrée de 150 pixels et un lien est fourni vers le fichier SVG correspondant.</p>
+
+<h3 id="Image_sans_dimension_ni_proportion">Image sans dimension ni proportion</h3>
+
+<p>Cette image ne possède ni dimension ni proportion. Quelle que soit sa taille, il n'y aura pas de ratio largeur/hauteur particulier. On a ici une image qui forme un dégradé, quelles que soient les dimensions et la proportion de l'écran.</p>
+
+<p><img alt="no-dimensions-or-ratio.png" class="default internal" src="/@api/deki/files/5860/=no-dimensions-or-ratio.png"></p>
+
+<p><a href="/@api/deki/files/5864/=no-dimensions-or-ratio.svg">Fichier source SVG</a></p>
+
+<h3 id="Image_sans_proportion_avec_une_dimension_fixée">Image sans proportion avec une dimension fixée</h3>
+
+<p>Cette image mesure 100 pixels de large mais n'a pas de hauteur ni de proportion intrinsèque. On a ainsi une bande d'arrière-plan qui peut être étirée sur toute la hauteur d'un bloc.</p>
+
+<p><img alt="100px-wide-no-height-or-ratio.png" class="default internal" src="/@api/deki/files/5858/=100px-wide-no-height-or-ratio.png"></p>
+
+<p><a href="/@api/deki/files/5863/=100px-wide-no-height-or-ratio.svg">Fichier source SVG</a></p>
+
+<h3 id="Image_avec_une_dimension_fixée_et_des_proportions_intrinsèques">Image avec une dimension fixée et des proportions intrinsèques</h3>
+
+<p>Cette image mesure 100 pixels de haut mais n'a pas de largeur fixée. Elle définit également une proportion de 3:4. Ainsi, le rapport largeur/hauteur sera toujours 3/4.</p>
+
+<p>On a ici un cas très proche de l'image pour laquelle on définit une largeur et une hauteur car, une fois qu'on a une dimension et une proportion, la deuxième dimension est implicite. Cela n'en reste pas moins un exemple utile.</p>
+
+<p><img alt="100px-height-3x4-ratio.png" class="default internal" src="/@api/deki/files/5857/=100px-height-3x4-ratio.png"></p>
+
+<p><a href="/@api/deki/files/5862/=100px-height-3x4-ratio.svg">Fichier source SVG</a></p>
+
+<h3 id="Image_sans_largeur_ni_hauteur_mais_avec_des_proportions_intrinsèques">Image sans largeur ni hauteur mais avec des proportions intrinsèques</h3>
+
+<p>Cette image n'indique pas de hauteur ou de largeur mais un ratio intrinsèque de 1:1. On obtiendra toujours un carré (qui pourra être utilisé comme une icône) pour n'importe quelle taille : 32x32, 128x128, or 512x512.</p>
+
+<p><img alt="no-dimensions-1x1-ratio.png" class="default internal" src="/@api/deki/files/5859/=no-dimensions-1x1-ratio.png"></p>
+
+<p><a href="/@api/deki/files/5861/=no-dimensions-1x1-ratio.svg">Fichier source SVG</a></p>
+
+<h2 id="Exemples_de_redimensionnement">Exemples de redimensionnement</h2>
+
+<p>Appliquons maintenant différents redimensionnements sur ces images. Pour chacun des exemples qui suivent, les rectangles dessinés font 300 pixels de large et 200 pixels de haut. De plus, on utilise {{cssxref("background-repeat")}} avec <code>no-repeat</code> pour plus de clarté..</p>
+
+<div class="note"><strong>Note :</strong> Les images montrées ci-après illustrent le rendu <strong>attendu</strong>. Les navigateurs peuvent ne pas produire le bon résultat.</div>
+
+<h3 id="Indiquer_des_dimensions_fixées_sur_les_deux_axes">Indiquer des dimensions fixées sur les deux axes</h3>
+
+<p>Si on utilise {{cssxref("background-size")}} pour indiquer la longueur et la largeur de l'image, celles-ci seront toujours utilisées (cf. la règle n°1 précédemment énoncée). Autrement dit, l'image sera toujours étirée pour obtenir ces dimensions, quelles que soient les dimensions initiales de l'image ou ses proportions.</p>
+
+<h4 id="SVG_source_Aucune_dimension_ni_proportion">SVG source : Aucune dimension ni proportion</h4>
+
+<p>Avec ces déclarations CSS :</p>
+
+<pre class="brush: css notranslate">background: url(no-dimensions-or-ratio.svg);
+background-size: 125px 175px;
+</pre>
+
+<p>On doit obtenir un résultat semblable à :</p>
+
+<p><img alt="fixed-no-dimensions-or-ratio.png" class="default internal" src="/@api/deki/files/5868/=fixed-no-dimensions-or-ratio.png"></p>
+
+<h4 id="SVG_source_Une_dimension_définie_et_aucune_proportion">SVG source : Une dimension définie et aucune proportion</h4>
+
+<p>Avec ces déclarations CSS :</p>
+
+<pre class="brush: css notranslate">background: url(100px-wide-no-height-or-ratio.svg);
+background-size: 250px 150px;
+</pre>
+
+<p>On doit obtenir un résultat semblable à :</p>
+
+<p><img alt="fixed-100px-wide-no-height-or-ratio.png" class="default internal" src="/@api/deki/files/5866/=fixed-100px-wide-no-height-or-ratio.png"></p>
+
+<h4 id="SVG_source_Une_dimension_définie_et_des_proportions_intrinsèques">SVG source : Une dimension définie et des proportions intrinsèques</h4>
+
+<p>Avec ces déclarations CSS :</p>
+
+<pre class="brush: css notranslate">background: url(100px-height-3x4-ratio.svg);
+background-size: 275px 125px;
+</pre>
+
+<p>On doit obtenir un résultat semblable à :</p>
+
+<p><img alt="fixed-100px-height-3x4-ratio.png" class="default internal" src="/@api/deki/files/5865/=fixed-100px-height-3x4-ratio.png"></p>
+
+<h4 id="SVG_source_Aucune_largeur_ni_hauteur_définie_mais_des_proportions_intrinsèques">SVG source : Aucune largeur ni hauteur définie mais des proportions intrinsèques</h4>
+
+<p>Avec ces déclarations CSS :</p>
+
+<pre class="brush: css notranslate">background: url(no-dimensions-1x1-ratio.svg);
+background-size: 250px 100px;
+</pre>
+
+<p>On doit obtenir un résultat semblable à :</p>
+
+<p><img alt="fixed-no-dimensions-1x1-ratio.png" class="default internal" src="/@api/deki/files/5867/=fixed-no-dimensions-1x1-ratio.png"></p>
+
+<h3 id="Utiliser_contain_ou_cover">Utiliser <code>contain</code> ou <code>cover</code></h3>
+
+<p>En utilisant la valeur <code>cover</code> pour {{cssxref("background-size")}}, l'image sera réduite au maximum pour couvrir toute la zone de l'arrière-plan. <code>contain</code> fonctionne de façon symétrique, l'image est agrandie autant que possible sans être rognée par la zone de l'arrière-plan.</p>
+
+<p>Pour une image avec des proportions intrinsèques, une seule dimension suffira à déterminer la taille pour <code>cover</code>/<code>contain</code>. En revanche, sans ratio, ce n'est pas suffisant et il faut donc utiliser les contraintes de la zone de l'arrière-plan.</p>
+
+<h4 id="SVG_source_Aucune_dimension_ni_proportion_2">SVG source : Aucune dimension ni proportion</h4>
+
+<p>Si une image n'a ni dimensions définie, ni proportions définies, les règles 2 ou 3 ne pourront pas s'appliquer. La règle 4 est donc utilisée et l'image couvre toute la zone (ce qui satisfait d'ailleurs les différentes contraintes).</p>
+
+<pre class="brush: css notranslate">background: url(no-dimensions-or-ratio.svg);
+background-size: contain;
+</pre>
+
+<p>Le résultat obtenu sera :</p>
+
+<p><img alt="no-dimensions-or-ratio-contain.png" class="default internal" src="/@api/deki/files/5874/=no-dimensions-or-ratio-contain.png"></p>
+
+<h4 id="SVG_source_Une_dimension_définie_et_aucune_proportion_2">SVG source : Une dimension définie et aucune proportion</h4>
+
+<p>De même si l'image possède une dimension mais aucune proportion, la règle 4 sera appliquée : l'image est ainsi redimensionnée pour couvrir toute la zone.</p>
+
+<pre class="brush: css notranslate">background: url(100px-wide-no-height-or-ratio.svg);
+background-size: contain;
+</pre>
+
+<p>Le résultat obtenu sera :</p>
+
+<p><img alt="100px-wide-no-height-or-ratio-contain.png" class="default internal" src="/@api/deki/files/5871/=100px-wide-no-height-or-ratio-contain.png"></p>
+
+<h4 id="SVG_source_Une_dimension_définie_et_des_proportions_intrinsèques_2">SVG source : Une dimension définie et des proportions intrinsèques</h4>
+
+<p>Ici, on a des proportions intrinsèques. Dans ce cas, la règle 1 n'est pas pertinente et on utilise donc la règle 2 : le ratio est conservé (tout en respectant les consignes de <code>contain</code> ou <code>cover</code>). Ainsi, avec <code>contain</code>, la boîte de 300x200 et le ratio de 3:4 entraîneront le dessin d'un arrière-plan de 150x200.</p>
+
+<h5 id="contain"><code>contain</code></h5>
+
+<pre class="brush: css notranslate">background: url(100px-height-3x4-ratio.svg);
+background-size: contain;
+</pre>
+
+<p>Le résultat obtenu sera :</p>
+
+<p><img alt="100px-height-3x4-ratio-contain.png" class="default internal" src="/@api/deki/files/5869/=100px-height-3x4-ratio-contain.png"></p>
+
+<p>On voit ici que toute l'image est affichée et est contenue dans la boîte sans être rognée.</p>
+
+<h5 id="cover"><code>cover</code></h5>
+
+<pre class="brush: css notranslate">background: url(100px-height-3x4-ratio.svg);
+background-size: cover;
+</pre>
+
+<p>Le résultat obtenu sera :</p>
+
+<p><img alt="100px-height-3x4-ratio-cover.png" class="default internal" src="/@api/deki/files/5870/=100px-height-3x4-ratio-cover.png"></p>
+
+<p>Dans ce cas, le ratio 3:4 est conservé et l'image est étirée Here, the 3:4 ratio is preserved while still stretching the image to fill the entire box. That causes the bottom of the image to be clipped away.</p>
+
+<h4 id="SVG_source_Aucune_dimension_mais_des_proportions_intrinsèques">SVG source : Aucune dimension mais des proportions intrinsèques</h4>
+
+<p>On obtient des résultats analogues lorsqu'on manipule une image sans dimension intrinsèque mais avec des proportions intrinsèques.</p>
+
+<h5 id="contain_2"><code>contain</code></h5>
+
+<pre class="brush: css notranslate">background: url(no-dimensions-1x1-ratio.svg);
+background-size: contain;
+</pre>
+
+<p>Le résultat ressemblera à :</p>
+
+<p><img alt="no-dimensions-1x1-ratio-contain.png" class="default internal" src="/@api/deki/files/5872/=no-dimensions-1x1-ratio-contain.png"></p>
+
+<p>On voit ici que l'image est redimensionnée à la plus petite taille tout en conservant le ratio 1:1.</p>
+
+<h5 id="cover_2"><code>cover</code></h5>
+
+<pre class="brush: css notranslate">background: url(no-dimensions-1x1-ratio.svg);
+background-size: cover;
+</pre>
+
+<p>Le résultat ressemblera à :</p>
+
+<p><img alt="no-dimensions-1x1-ratio-cover.png" class="default internal" src="/@api/deki/files/5873/=no-dimensions-1x1-ratio-cover.png"></p>
+
+<p>Ici, l'image est dimensionnée afin de couvrir la plus grande surface avec le ratio 1:1.</p>
+
+<h3 id="Utiliser_auto_pour_les_deux_axes">Utiliser <code>auto</code> pour les deux axes</h3>
+
+<p>Si {{cssxref("background-size")}} vaut <code>auto</code> ou <code>auto auto</code>, ce sera la règle n°2 qui s'appliquera : les proportions intrinsèques devront être conservées.</p>
+
+<h4 id="SVG_source_Aucune_dimension_ni_proportion_intrinsèque">SVG source : Aucune dimension ni proportion intrinsèque</h4>
+
+<p>Lorsque l'image n'a aucune proportion ni dimension, ce sera la dernière règle qui s'appliquera : l'image couvrira toute la surface de la zone.</p>
+
+<pre class="brush: css notranslate">background: url(no-dimensions-or-ratio.svg);
+background-size: auto auto;
+</pre>
+
+<p>Voici le résultat obtenu :</p>
+
+<p><img alt="auto-no-dimensions-or-ratio.png" class="default internal" src="/@api/deki/files/5878/=auto-no-dimensions-or-ratio.png"></p>
+
+<h4 id="SVG_source_une_dimension_mais_aucune_proportion_intrinsèque">SVG source : une dimension mais aucune proportion intrinsèque</h4>
+
+<p>S'il n'y a aucune proportion définie mais qu'une dimension est fournie, la règle n°3 s'appliquera et l'image sera affichée avec ces dimensions.</p>
+
+<pre class="brush: css notranslate">background: url(100px-wide-no-height-or-ratio.svg);
+background-size: auto auto;
+</pre>
+
+<p>Voici le résultat obtenu :</p>
+
+<p><img alt="auto-100px-wide-no-height-or-ratio.png" class="default internal" src="/@api/deki/files/5876/=auto-100px-wide-no-height-or-ratio.png"></p>
+
+<p>Ici, on voit que la largeur définie par le fichier SVG (100 pixels) est respectée. L'image s'étend sur toute la hauteur de la zone de l'arrière-plan car elle n'est pas définie (explicitement dans les déclarations ou intrinsèquement via l'image).</p>
+
+<h4 id="SVG_source_une_dimension_et_des_proportions_intrinsèques">SVG source : une dimension et des proportions intrinsèques</h4>
+
+<p>Si on dispose de proportions intrinsèques et d'une dimension fixée, les deux dimensions sont alors définies.</p>
+
+<pre class="brush: css notranslate">background: url(100px-height-3x4-ratio.svg);
+background-size: auto auto;
+</pre>
+
+<p>Le résultat sera le suivant :</p>
+
+<p><img alt="auto-100px-height-3x4-ratio.png" class="default internal" src="/@api/deki/files/5875/=auto-100px-height-3x4-ratio.png"></p>
+
+<p>Cette image mesure 100 pixels de haut et possède des proportions intrinsèques avec un ratio de 3:4. La largeur vaut donc 75 pixels et c'est ainsi qu'elle est affichée avec <code>auto</code>.</p>
+
+<h4 id="SVG_source_Aucune_dimension_définie_mais_des_proportions_intrinsèques">SVG source : Aucune dimension définie mais des proportions intrinsèques</h4>
+
+<p>Lorsqu'un ratio s'applique sans dimension, c'est la règle n°2 qui s'applique. L'image est affichée comme pour <code>contain</code>.</p>
+
+<pre class="brush: css notranslate">background: url(no-dimensions-1x1-ratio.svg);
+background-size: auto auto;
+</pre>
+
+<p>Le résultat ressemblera à :</p>
+
+<p><img alt="auto-no-dimensions-1x1-ratio.png" class="default internal" src="/@api/deki/files/5877/=auto-no-dimensions-1x1-ratio.png"></p>
+
+<h3 id="Utiliser_auto_et_une_dimension_fixée">Utiliser <code>auto</code> et une dimension fixée</h3>
+
+<p>Avec la première règle, les dimensions définies sont toujours utilisées et il faut donc utiliser les autres règles pour déterminer la seconde dimension.</p>
+
+<h4 id="SVG_source_aucune_dimension_ni_proportion_intrinsèque">SVG source : aucune dimension ni proportion intrinsèque</h4>
+
+<p>Si l'image ne possède ni dimension ni proportion intrinsèque, c'est la règle 4 qui s'applique et les dimensions de la zone pour l'arrière-plan seront utilisées pour <code>auto</code>.</p>
+
+<pre class="brush: css notranslate">background: url(no-dimensions-or-ratio.svg);
+background-size: auto 140px;
+</pre>
+
+<p><img alt="1auto-no-dimensions-or-ratio.png" class="default internal" src="/@api/deki/files/5881/=1auto-no-dimensions-or-ratio.png"></p>
+
+<p>Ici, la largeur est déterminée grâce à la zone dédiée à l'arrière-plan (règle n°4) et la hauteur est indiquée via la feuille de style (140px).</p>
+
+<h4 id="SVG_source_une_dimension_intrinsèque_mais_pas_de_proportion_intrinsèque">SVG source : une dimension intrinsèque mais pas de proportion intrinsèque</h4>
+
+<p>Si l'image possède une dimension implicite mais pas de ratio, la dimension définie sera utilisée selon la règle n°3 si elle vaut <code>auto</code> dans le code CSS.</p>
+
+<pre class="brush: css notranslate">background: url(100px-wide-no-height-or-ratio.svg);
+background-size: 200px auto;
+</pre>
+
+<p><img alt="100px-wide-no-height-or-ratio-length-auto.png" class="default internal" src="/@api/deki/files/5883/=100px-wide-no-height-or-ratio-length-auto.png"></p>
+
+<p>Ici, la valeur de 200px fournie dans la feuille de style surcharge la valeur de 100px définie dans le fichier SVG. Puisqu'il n'y a aucune proportion intrinsèque ni hauteur de définie et qu'on utilise la valeur <code>auto</code>, l'image fera la même hauteur que la zone pour l'arrière-plan.</p>
+
+<pre class="brush: css notranslate">background: url(100px-wide-no-height-or-ratio.svg);
+background-size: auto 125px;
+</pre>
+
+<p><img alt="100px-wide-no-height-or-ratio-auto-length.png" class="default internal" src="/@api/deki/files/5882/=100px-wide-no-height-or-ratio-auto-length.png"></p>
+
+<p>Ici, c'est la largeur qui vaut <code>auto</code> et ce sera donc la valeur définie dans l'image SVG (100px) qui sera utilisée. La hauteur est fixée à 125 pixels via la feuille de style.</p>
+
+<h4 id="SVG_source_une_dimension_définie_et_des_proportions_intrinsèques">SVG source : une dimension définie et des proportions intrinsèques</h4>
+
+<p>Lorsqu'une dimension est indiquée, la première règle s'applique et la dimension du fichier SVG est utilisée sauf si le CSS la redéfinit. Lorsqu'un ratio est indiqué, celui-ci est utilisé pour déterminer la deuxième dimension.</p>
+
+<pre class="brush: css notranslate">background: url(100px-height-3x4-ratio.svg);
+background-size: 150px auto;
+</pre>
+
+<p><img alt="1auto-100px-height-3x4-ratio.png" class="default internal" src="/@api/deki/files/5879/=1auto-100px-height-3x4-ratio.png"></p>
+
+<p>Ici, la hauteur de l'image a été surchargée pour valoir 150px. Les proportions intrinsèques permettent ensuite de définir la largeur (<code>auto</code> dans la feuille de style).</p>
+
+<h4 id="SVG_source_aucune_dimension_mais_des_proportions_intrinsèques">SVG source : aucune dimension mais des proportions intrinsèques</h4>
+
+<p>Si aucune dimension n'est définie dans l'image SVG, ce sera celle du CSS qui sera appliquée. Les proportions intrinsèques sont ensuite utilisées pour déterminer l'autre dimension (selon la rgèle n°2).</p>
+
+<pre class="brush: css notranslate">background: url(no-dimensions-1x1-ratio.svg);
+background-size: 150px auto;
+</pre>
+
+<p><img alt="1auto-no-dimensions-1x1-ratio.png" class="default internal" src="/@api/deki/files/5880/=1auto-no-dimensions-1x1-ratio.png"></p>
+
+<p>La largeur est définie à 150 pixels via la feuille de style et la hauteur est calculée à partir de cette largeur en utilisant le ratio 1:1, elle vaudra donc 150px ce qui donnera le résultat ci-dessus.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("background-size")}}</li>
+ <li>{{cssxref("background-image")}}</li>
+ <li>Billet de blog de Jeff Walden : <a href="https://whereswalden.com/2011/10/21/properly-resizing-vector-image-backgrounds/">Properly resizing vector image backgrounds (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/reference/index.html b/files/fr/web/css/reference/index.html
new file mode 100644
index 0000000000..8aa4af3b7a
--- /dev/null
+++ b/files/fr/web/css/reference/index.html
@@ -0,0 +1,193 @@
+---
+title: Référence CSS
+slug: Web/CSS/Reference
+tags:
+  - CSS
+  - CSS Data Types
+  - 'I10n:priority'
+  - Overview
+  - Reference
+  - Types CSS
+translation_of: Web/CSS/Reference
+---
+<div>{{CSSRef}}</div>
+
+<p>Cette <strong>référence CSS</strong> fournit un <strong><a href="#Index_des_mots-clés">index alphabétique</a></strong> de toutes les propriétés <a href="/fr/docs/Web/CSS">CSS</a> standards, des <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classes</a>, des <a href="/fr/docs/Web/CSS/Pseudo-elements">pseudo-éléments</a>, des <a href="/fr/docs/Web/CSS/Types_CSS">types de données</a> et des <a href="/fr/docs/Web/CSS/Règles_@">règles @</a>. Vous pouvez également trouver une liste alphabétique de tous les <strong><a href="#Sélecteurs">sélecteurs CSS par type</a></strong> et une liste des <strong><a href="#Concepts">concepts clés de CSS</a></strong>. Enfin est inclus un bref sommaire de <strong><a href="#DOM-CSS_CSSOM">référence sur DOM-CSS / CSSOM</a></strong>.</p>
+
+<h2 id="Syntaxe_de_règle_basique">Syntaxe de règle basique</h2>
+
+<h3 id="Syntaxe_de_style_basique">Syntaxe de style basique</h3>
+
+<pre class="syntaxbox"><var>règle-de-style-basique</var> <strong>::=</strong>
+    <var>liste-de-sélecteurs</var> <strong>{</strong>
+      <var>liste-de-propriétés</var>
+    <strong>}</strong>
+</pre>
+
+<p>... où :</p>
+
+<pre class="syntaxbox"><var>liste-de-sélecteurs</var> <strong>::=</strong>
+    <var>sélecteur[</var><strong>:</strong><var>pseudo-classe] [</var><strong>::</strong><var>pseudo-élément]
+    [</var><strong>,</strong><var> liste-de-sélecteurs]</var>
+
+<var>liste-de-propriétés</var> <strong>::=</strong>
+<var>    [propriété </var><strong>:</strong> <var>valeur] [</var><strong>; </strong><var>liste-de-propriétés]</var>
+</pre>
+
+<p>Voir aussi les <a href="#Sélecteurs"><em>sélecteurs</em></a>, <a href="#Pseudo-classes"><em>pseudo-classes</em></a>, et <em><a href="#Pseudo-éléments">pseudo-éléments</a></em> listés ci-dessous. La syntaxe des <em>valeurs</em> dépend du type de données attendu pour chaque <em>propriété</em> indiquée.</p>
+
+<h4 id="Exemples_de_règle_de_style">Exemples de règle de style</h4>
+
+<pre class="brush: css">strong {
+  color: red;
+}
+
+div.menu-bar li:hover &gt; ul {
+  display: block;
+}
+</pre>
+
+<p>Pour une introduction à la syntaxe des sélecteurs CSS, consultez <a href="/fr/docs/Apprendre/CSS/Introduction_%C3%A0_CSS/La_syntaxe">ce tutoriel</a>. Soyez conscient que n’importe quelle erreur de <a href="/fr/docs/Learn/CSS/First_steps/How_CSS_is_structured">syntaxe CSS</a> dans une définition de règle l’invalide entièrement. Les règles non validées sont ignorées par le navigateur. Note : les définitions de règles CSS sont intégralement <a href="https://www.w3.org/TR/css-syntax-3/#intro">basées sur du texte</a> (ASCII) alors que DOM-CSS / CSSOM (le système de gestion des règles) est <a href="https://www.w3.org/TR/cssom/#introduction">basé sur des objets</a>.</p>
+
+<h3 id="Syntaxe_des_règles"><strong>Syntaxe des règles @</strong></h3>
+
+<p>Comme la structure des règles @ varie grandement, veuillez consulter <a href="/fr/docs/Web/CSS/Règles_@">règle @</a> pour trouver la syntaxe que vous souhaitez.</p>
+
+<h2 id="Index_des_mots-clés"><strong>Index des mots-clés</strong></h2>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Les noms de propriétés de cet index n’incluent <strong>pas</strong> les <a href="/fr/docs/Web/CSS/CSS_Properties_Reference">noms de l’API DOM JavaScript</a> lorsqu’ils sont différents des noms standards CSS.</p>
+</div>
+
+<p>{{CSS_Ref}}</p>
+
+<h2 id="Sélecteurs">Sélecteurs</h2>
+
+<p>Sont indiqués dans ce qui suit les divers <a href="/fr/docs/Web/CSS/Sélecteurs_CSS">sélecteurs</a>, qui permettent aux styles d'être appliqués de façon conditionnelle selon diverses caractéristiques des éléments présents dans le DOM.</p>
+
+<h3 id="Sélecteurs_simples"><a href="/fr/docs/Web/CSS/Sélecteurs_CSS#Les_sélecteurs_simples/fr/docs/Web/CSS/Sélecteurs_CSS">Sélecteurs simples</a></h3>
+
+<p>Les sélecteurs simples sont des sélecteurs fondamentaux. Ce sont les sélecteurs les plus élémentaires qui sont fréquemment combinés pour créer d'autres sélecteurs plus complexes.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Sélecteurs_de_type">Sélecteur de type</a> <code><var>nomElement</var></code></li>
+ <li><a href="/fr/docs/Web/CSS/Sélecteurs_de_classe">Sélecteur de classe</a> <code><strong>.</strong><var>nomClasse</var></code></li>
+ <li><a href="/fr/docs/Web/CSS/Sélecteurs_d_ID">Sélecteur d’identifiant</a> <code><strong>#</strong><var>nomID</var></code></li>
+ <li><a href="/fr/docs/Web/CSS/Sélecteurs_universels">Sélecteur universel</a> <code><strong>*</strong></code>, <code><var>ns</var><strong>|*</strong></code>, <code><strong>*|*</strong></code>, <code><strong>|*</strong></code></li>
+ <li><a href="/fr/docs/Web/CSS/Sélecteurs_d_attribut">Sélecteur d’attribut</a> <code><strong>[</strong><var>attr</var><strong>=</strong><var>valeur</var><strong>]</strong></code></li>
+</ul>
+
+<h3 id="Sélecteur_de_groupe">Sélecteur de groupe</h3>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/Selector_list">Sélecteur de conjonction</a> <code>A, B</code></dt>
+ <dd>Indique que les éléments des sélecteurs <code>A</code> et <code>B</code> doivent être sélectionnés. Il s'agit d'une méthode de groupement pour sélectionner des éléments selon plusieurs critères.</dd>
+</dl>
+
+<h3 id="Combinateurs"><a href="/fr/docs/Web/CSS/Sélecteurs_CSS#Les_combinateurs">Combinateurs</a></h3>
+
+<p>Les combinateurs sont des sélecteurs qui établissent une relation entre deux sélecteurs ou plus, tel que "A est un enfant de B" ou "A est adjacent à B".</p>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/Sélecteur_de_voisin_direct">Combinateur de voisin direct</a> <code><var>A</var> <strong>+</strong> <var>B</var></code></dt>
+ <dd>Indique que les éléments sélectionnés par <code>A</code> et par <code>B</code> ont le même parent et que celui sélectionné par <code>B</code> suit immédiatement celui sélectionné par <code>A</code>.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Sélecteurs_de_voisins_généraux">Combinateur de voisin général</a> <code><var>A</var> <strong>~</strong> <var>B</var></code></dt>
+ <dd>Indique que les éléments sélectionnés par <code>A</code> et par <code>B</code> ont le même parent et que celui sélectionné par <code>B</code> suit celui sélectionné par <code>A</code>, mais pas nécessairement immédiatement après lui.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Sélecteurs_enfant">Combinateur d’enfant</a> <code><var>A</var> <strong>&gt;</strong> <var>B</var></code></dt>
+ <dd>Indique que l’élément sélectionné par <code>B</code> est un enfant direct de l’élément sélectionné par <code>A</code>.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Sélecteurs_descendant">Combinateur de descendant</a> <code><var>A</var> <var>B</var></code></dt>
+ <dd>Indique que l’élément sélectionné par <code>B</code> est un descendant de l’élément sélectionné par <code>A</code>, mais n’en est pas nécessairement un enfant direct.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Column_combinator">Combinateur de colonne</a> <code><var>A</var> <strong>||</strong> <var>B</var></code> {{Experimental_Inline}}</dt>
+ <dd>Indique que l’élément sélectionné par <code>B</code> est situé dans la colonne de table indiquée par <code>A</code>. Les éléments qui s’étendent sur des colonnes multiples sont considérés comme étant membres de chacune de ces colonnes.</dd>
+</dl>
+
+<h3 id="Pseudo-classes"><a href="/fr/docs/Web/CSS/Sélecteurs_CSS#Les_pseudo-classes">Pseudo-classes</a></h3>
+
+<div class="index">
+<ul>
+ <li class="hidden">{{Page("/fr/docs/Web/CSS/Pseudo-classes", "index")}}</li>
+</ul>
+</div>
+
+<h3 id="Pseudo-éléments"><a href="/fr/docs/Web/CSS/Sélecteurs_CSS#Les_pseudo-éléments">Pseudo-éléments</a></h3>
+
+<div class="index">
+<ul>
+ <li class="hidden">{{Page("/fr/docs/Web/CSS/Pseudo-elements", "index")}}</li>
+</ul>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Une <a href="https://www.w3.org/TR/selectors/#overview">liste complète des sélecteurs</a> existe dans le module de spécification Selectors de niveau 4.</p>
+</div>
+
+<h2 id="Concepts">Concepts</h2>
+
+<h3 id="Syntaxe_et_sémantique">Syntaxe et sémantique</h3>
+
+<ul>
+ <li><a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/La_syntaxe">Syntaxe CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/Règles_@">Règles @ (<em>at-rules</em>)</a></li>
+ <li><a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/La_cascade_et_l_héritage">Cascade</a></li>
+ <li><a href="/fr/docs/Web/CSS/Comments">Commentaires</a></li>
+ <li><a href="/fr/docs/Glossaire/Descripteur_(CSS)">Descripteurs</a></li>
+ <li><a href="/fr/docs/Web/CSS/Héritage">Héritage</a></li>
+ <li><a href="/fr/docs/Web/CSS/Propriétés_raccourcies">Propriétés raccourcies</a></li>
+ <li><a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/La_cascade_et_l_héritage#Spécificité">Spécificité</a></li>
+ <li><a href="/fr/docs/Web/CSS/Syntaxe_de_définition_des_valeurs">Syntaxe de définition des valeurs</a></li>
+ <li><a href="/fr/docs/Web/CSS/Valeurs_et_unités_CSS">Unités et valeurs CSS</a></li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/valeur_reelle">Valeur réelle</a></li>
+ <li><a href="/fr/docs/Web/CSS/Valeur_calculée">Valeur calculée</a></li>
+ <li><a href="/fr/docs/Web/CSS/Valeur_initiale">Valeur initiale</a></li>
+ <li><a href="/fr/docs/Web/CSS/valeur_résolue">Valeur résolue</a></li>
+ <li><a href="/fr/docs/Web/CSS/Valeur_spécifiée">Valeur spécifiée</a></li>
+ <li><a href="/fr/docs/Web/CSS/Valeur_utilisée">Valeur utilisée</a></li>
+</ul>
+
+<h3 id="Disposition">Disposition</h3>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Block_formatting_context">Contexte de formatage de bloc</a></li>
+ <li><a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte">Modèle de boîte</a></li>
+ <li><a href="/fr/docs/Web/CSS/A_Propos_Du_Bloc_Conteneur">Bloc englobant</a></li>
+ <li><a href="/fr/docs/Web/CSS/Mode_de_mise_en_page">Modes de disposition</a></li>
+ <li><a href="/fr/docs/Web/CSS/Modèle_de_boîte_CSS/Fusion_des_marges">Fusion des marges</a></li>
+ <li><a href="/fr/docs/Web/CSS/Élément_remplacé">Éléments remplacés</a></li>
+ <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Empilement_de_couches">Contexte d'empilement</a></li>
+ <li><a href="/fr/docs/Web/CSS/Modèle_de_mise_en_forme_visuelle">Modèle de mise en forme visuelle</a></li>
+</ul>
+
+<h2 id="DOM-CSS_CSSOM">DOM-CSS / CSSOM</h2>
+
+<h3 id="Principaux_types_dobjets">Principaux types d'objets</h3>
+
+<ul>
+ <li>{{DOMxRef("DocumentOrShadowRoot.styleSheets")}}</li>
+ <li><code>{{DOMxRef("StyleSheetList", "styleSheets", "", 1)}}[i].{{DOMxRef("CSSRuleList", "cssRules", "", 1)}}</code></li>
+ <li><code>cssRules[i].{{DOMxRef("CSSRule.cssText", "cssText", "", 1)}}</code> (sélecteur et style)</li>
+ <li><code>cssRules[i].{{DOMxRef("CSSStyleRule.selectorText", "selectorText", "", 1)}}</code></li>
+ <li>{{DOMxRef("HTMLElement.style")}}</li>
+ <li><code>HTMLElement.style.{{DOMxRef("CSSStyleDeclaration.cssText", "cssText", "", 1)}}</code> (style uniquement)</li>
+ <li>{{DOMxRef("Element.className")}}</li>
+ <li>{{DOMxRef("Element.classList")}}</li>
+</ul>
+
+<h3 id="Méthodes_importantes">Méthodes importantes</h3>
+
+<ul>
+ <li>{{DOMxRef("CSSStyleSheet.insertRule()")}}</li>
+ <li>{{DOMxRef("CSSStyleSheet.deleteRule()")}}</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Extensions_Mozilla">Extensions spécifiques de Mozilla à CSS</a> (préfixées avec <code>-moz-</code>)</li>
+ <li><a href="/fr/docs/Web/CSS/Reference/Extensions_WebKit">Extensions spécifiques de WebKit à CSS</a> (préfixées pour la plupart avec <code>-webkit-</code>)</li>
+ <li><a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">Extensions spécifiques de Microsoft à CSS</a> (préfixées pour la plupart avec <code>-ms-</code>)</li>
+</ul>
diff --git a/files/fr/web/css/repeat()/index.html b/files/fr/web/css/repeat()/index.html
new file mode 100644
index 0000000000..17ef02d2f8
--- /dev/null
+++ b/files/fr/web/css/repeat()/index.html
@@ -0,0 +1,149 @@
+---
+title: repeat()
+slug: Web/CSS/repeat()
+tags:
+  - CSS
+  - Fonction
+  - Grille CSS
+  - Reference
+  - Web
+translation_of: Web/CSS/repeat()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction CSS <code><strong>repeat</strong></code><strong><code>()</code></strong> permet de répéter un fragment d'une liste de pistes. Autrement dit, lorsqu'on a une grille avec de nombreuses lignes/colonnes, cela permet de réutiliser un même motif sur la grille. On a alors des règles plus concises.</p>
+
+<p>Cette fonction peut être utilisée par les propriétés CSS {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-rows")}} relatives aux grilles.</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* Valeurs de type &lt;track-repeat&gt; */
+repeat(4, 1fr)
+repeat(4, [col-start] 250px [col-end])
+repeat(4, [col-start] 60% [col-end])
+repeat(4, [col-start] 1fr [col-end])
+repeat(4, [col-start] min-content [col-end])
+repeat(4, [col-start] max-content [col-end])
+repeat(4, [col-start] auto [col-end])
+repeat(4, [col-start] minmax(100px, 1fr) [col-end])
+repeat(4, [col-start] fit-content(200px) [col-end])
+repeat(4, 10px [col-start] 30% [col-middle] auto [col-end])
+repeat(4, [col-start] min-content [col-middle] max-content [col-end])
+
+/* Valeurs de type &lt;auto-repeat&gt; */
+repeat(auto-fill, 250px)
+repeat(auto-fit, 250px)
+repeat(auto-fill, [col-start] 250px [col-end])
+repeat(auto-fit, [col-start] 250px [col-end])
+repeat(auto-fill, [col-start] minmax(100px, 1fr) [col-end])
+repeat(auto-fill, 10px [col-start] 30% [col-middle] 400px [col-end])
+
+/* Valeurs de type &lt;fixed-repeat&gt; */
+repeat(4, 250px)
+repeat(4, [col-start] 250px [col-end])
+repeat(4, [col-start] 60% [col-end])
+repeat(4, [col-start] minmax(100px, 1fr) [col-end])
+repeat(4, [col-start] fit-content(200px) [col-end])
+repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end])
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une longueur positive (cf. le type {{cssxref("&lt;length&gt;")}}).</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Un pourcentage (cf. le type {{cssxref("&lt;percentage&gt;")}}) positif qui indique la proportion par rapport à la taille en ligne (c'est-à-dire la dimension qui suit l'axe de lecture) pour les colonnes et par rapport à la taille en bloc (l'axe orthogonal) pour les lignes. Si la taille de la grille est calculée en fonction de la taille des pistes qu'elle contient, <code>&lt;percentage&gt;</code> devra être interprété comme <code>auto</code>. L'agent utilisateur peut ajuster les tailles intrinsèques des pistes pour qu'elles remplissent exactement le conteneur et acroître le moins possible la taille finale de la piste pour qu'elle se rapproche du pourcentage souhaité.</dd>
+ <dt><code>&lt;flex&gt;</code></dt>
+ <dd>Une dimension positive, exprimée en <code>fr</code>, qui indique le facteur de flexibilité de la piste (cf. le type {{cssxref("&lt;flex&gt;")}}). Chaque piste flexible partage l'espace de façon proportionnelle avec les autres pistes flexibles.</dd>
+ <dt><code>max-content</code></dt>
+ <dd>Cette valeur représente la contribution maximale des éléments qui occupent la piste.</dd>
+ <dt><code>min-content</code></dt>
+ <dd>Cette valeur représente la contribution minimale des éléments qui occupent la piste.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Utilisée comme maximum, cette valeur se comporte comme <code>max-content</code>. Utilisée comme minimum, elle représente la plus grande taille minimale (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}}) des éléments qui occupent la piste.</dd>
+ <dt><code>auto-fill</code></dt>
+ <dd>Si le conteneur de la grille possède une taille définie ou maximale sur cet axe, alors le moteur répètera autant que possible le motif pour ne pas déborder de la grille. Si répéter le motif implique de déborder de la grille, il n'est répété qu'une fois. Sinon, si le conteneur de la grille possède une taille minimale sur cet axe, on utilisera le moins de répétitions possible pour atteindre ce minimum. Sinon, la liste de piste n'est répétée qu'une seule fois.</dd>
+ <dt><code>auto-fit</code></dt>
+ <dd>
+ <p>Cette valeur se comporte comme <code>auto-fill</code> mais, une fois que les objets sont placés, toutes les pistes répétées qui sont vides sont repliées. Une piste vide est une piste qui ne contient aucun élément ou sur laquelle aucun élément n'intersecte. Toutes les pistes peuvent être repliées si elles sont toutes vides.</p>
+
+ <p>Une piste repliée est traitée comme si elle avait une taille de piste de <code>0px</code> (les gouttières sont également repliées de chaque côté).</p>
+
+ <p>Afin de calculer le nombre de pistes automatiquement répétées, l'agent utilisateur arrondit la taille de la piste à une valeur non nulle, propre à l'agent utilisateur (par exemple 1 px), afin d'éviter les divisions par zéros.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[3] notranslate">#container {
+  display: grid;
+  grid-template-columns: repeat(2, 50px 1fr) 100px;
+  grid-gap: 5px;
+  box-sizing: border-box;
+  height: 200px;
+  width: 100%;
+  background-color: #8cffa0;
+  padding: 10px;
+}
+
+#container &gt; div {
+  background-color: #8ca0ff;
+  padding: 5px;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div id="container"&gt;
+  &lt;div&gt;
+    Un élément qui mesure 50 pixels de large.
+  &lt;/div&gt;
+  &lt;div&gt;
+    Un élément avec une largeur flexible.
+  &lt;/div&gt;
+  &lt;div&gt;
+    Un élément qui mesure 50 pixels de large.
+  &lt;/div&gt;
+  &lt;div&gt;
+    Un élément avec une largeur flexible.
+  &lt;/div&gt;
+  &lt;div&gt;
+    Un élément non-flexible qui mesure 100 pixels de large.
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Example", "100%", 200)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Spécification</th>
+   <th>État</th>
+   <th>Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Grid", "#funcdef-repeat", "repeat()")}}</td>
+   <td>{{Spec2("CSS Grid")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.grid-template-columns.repeat")}}</p>
diff --git a/files/fr/web/css/repeating-conic-gradient()/index.html b/files/fr/web/css/repeating-conic-gradient()/index.html
new file mode 100644
index 0000000000..8e08d42e5a
--- /dev/null
+++ b/files/fr/web/css/repeating-conic-gradient()/index.html
@@ -0,0 +1,207 @@
+---
+title: repeating-conic-gradient()
+slug: Web/CSS/repeating-conic-gradient()
+tags:
+  - CSS
+  - Dégradé
+  - Fonction
+  - Reference
+translation_of: Web/CSS/repeating-conic-gradient()
+---
+<div>{{draft}} {{CSSRef}}</div>
+
+<p><span class="seoSummary">La fonction CSS <strong><code>repeating-conic-gradient()</code></strong> crée une image composée d'un dégradé conique répété. Elle permet d'avoir un motif répété qu'on pourrait décrire avec une seule itération grâce à {{cssxref('conic-gradient')}}. Le résultat fourni par la fonction <code>repeating-conic-gradient()</code> est une valeur de type {{CSSxRef("&lt;gradient&gt;")}} qui est un sous-type du type{{CSSxRef("&lt;image&gt;")}}.</span></p>
+
+<p>Si le premier ou le dernier arrêt de couleur inclut un angle supérieur à <code>0deg</code> ou inférieur à <code>360deg</code>, le dégradé conique ne sera pas répété.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-repeating-conic-gradient.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>À l'instar des autres dégradés, les dégradés coniques répétés n'ont pas <a href="/fr/docs/Web/CSS/image#Les_types_d'images">de dimensions intrinsèques</a> (c'est-à-dire pas de taille naturelle ou préférée et pas de proportion préférée). La taille finale du dégradé sera la taille de l'élément sur lequel il est appliqué ou la taille indiquée par d'autres propriétés.</p>
+
+<p>Le type de donnée <code>&lt;gradient&gt;</code>s étant un sous-type d'<code>&lt;image&gt;</code>, on pourra utiliser les dégradés coniques répétés là où des valeurs de type <code>&lt;image&gt;</code> sont attendues. Ainsi, <code>repeating-conic-gradient()</code> ne fonctionnera pas pour la propriété {{CSSxRef("background-color")}} car celle-ci attend une valeur de type {{CSSxRef("&lt;color&gt;")}}.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Afin de créer un dégradé conique qui ne se répète pas, on pourra utiliser la notation fonctionnelle {{CSSxRef("conic-gradient")}}.</p>
+</div>
+
+<h2 id="Comprendre_les_dégradés_coniques_répétés">Comprendre les dégradés coniques répétés</h2>
+
+<p>La syntaxe pour <code>repeating-conic-gradient</code> est semblable à celle de {{CSSxRef("conic-gradient")}} et à celle de {{CSSxRef("repeating-radial-gradient")}}. À l'instar du dégradé conique unitaire, les arrêts de couleur sont placés autour d'un arc. Comme pour les dégradés radiaux répétés, la taille de la portion répétée correspond au premier arrêt de couleur auquel on a soustrait l'angle du dernier arrêt de couleur.</p>
+
+<p><img alt="Comparison of the color stops for repeating and non-repeating conic and radial gradients" src="https://mdn.mozillademos.org/files/16798/repeatingconicgradient.png" style="height: 376px; width: 1403px;"></p>
+
+<p>Les dégradés ci-dessus sont définis avec un tiers de bleu, un tiers de rouge et un tiers de jaune.</p>
+
+<pre class="notranslate">repeating-conic-gradient(from 0deg, red 0deg 30deg, yellow 30deg 60deg, blue 60deg 90deg);
+
+repeating-radial-gradient(red 0 8%, yellow 8% 16%, blue 16% 24%);
+
+conic-gradient(red 120deg, yellow 120deg 240deg, blue 240deg);
+
+radial-gradient(red 33%, yellow 33% 66%, blue 66%);
+</pre>
+
+<p>Pour un dégradé répété, on définit le premier et le dernier arrêt de couleur. Si les valeurs ne sont pas explicitement définies, elles correspondent respectivement aux angles <code>0</code> et <code>360deg</code>. Lorsque ces valeurs sont utilisées par défaut, l'arc qui est répété occupe 360 degrés et il n'y a donc pas de répétition.</p>
+
+<p>Les arrêts de couleur sont placés autour d'un arc (et non sur une ligne qui s'écarte du centre). L'arc progresse dans le sens horaire.</p>
+
+<p>Un dégradé conique répété est défini en indiquant un angle de rotation, le centre du dégradé et une liste d'arrêts de couleur. Les arrêts de couleur sont définis avec un angle (type CSS {{cssxref('angle')}}). Les unités qui permettent de déclarer un angle sont <code>deg</code> (pour les degrés), <code>grad</code> (pour les grades), <code>rad</code> (pour les radians) et <code>turn</code> (pour les tours). Un cercle se compose de 360 degrés, 400 grade, 2π radians et d'un tour.</p>
+
+<p>Les navigateurs qui prennent en charge ces dégradés permettent également d'utiliser des valeurs en pourcentages (où 100% correspond à 360 degrés). Toutefois, ce comportement n'est pas décrit dans la spécification.</p>
+
+<p>La syntaxe de définition permet de placer le centre du dégradé à l'intérieur ou encore à l'extérieur de l'image. Les valeurs permettant de définir la position du centre s'écrivent comme la syntaxe à deux valeurs de  {{cssxref('background-position')}}.</p>
+
+<h3 id="Personnaliser_des_dégradés">Personnaliser des dégradés</h3>
+
+<p>En ajoutant des arrêts de couleur à l'arc du dégradé, il est possible de créer des dégradés sur mesures. La position d'un arrêt de couleur se définit via un {{CSSxRef("&lt;angle&gt;")}}. Si on n'indique pas de position pour un arrêt, celui-ci est placé à mi-parcours entre le précédent et le suivant. Si la position du premier ou du dernier arrêt ne sont pas définies, par défaut, ils seront placés à <code>0deg</code> et à <code>360deg</code> respectivement.</p>
+
+<p>Attention, lorsque ces valeurs par défaut sont utilisées, l'arc occupe tout le cercle et le dégradé n'est donc pas répété.</p>
+
+<p>Les deux formulations suivantes sont équivalentes :</p>
+
+<pre class="brush: css notranslate">repeating-conic-gradient(red, orange, yellow, green, blue 50%);
+repeating-conic-gradient(from -45deg, red 45deg, orange, yellow, green, blue 225deg)</pre>
+
+<p>Par défaut, les couleurs évoluent progressivement entre chaque arrêt et le milieur de l'arc correspondra à la moyenne des couleurs. Il est possible de déplacer ce point intermédiaire en fournissant une indication quant à l'emplacement du milieu de la transition.</p>
+
+<p>Si deux (voire plusieurs) couleurs sont au même emplacement, la transition sera une ligne brutale entre la première et la dernière couleur déclarées à cet emplacement.</p>
+
+<p>Bien qu'il soit possible de mélanger et de combiner différentes unités pour les angles, il est préférable d'éviter par souci de lisibilité / maintenabilité.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="language-css notranslate" id="css">background: repeating-conic-gradient(
+    from 3deg at 25% 25%,
+    hsl(200, 100%, 50%) 0deg 15deg,
+    hsl(200, 100%, 60%) 10deg 30deg);
+);</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt>{{CSSxRef("&lt;angle&gt;")}}</dt>
+ <dd>Lorsque cet angle est précédé du mot-clé <code>from</code>, cela définit la rotation du dégradé dans le sens horaire.</dd>
+ <dt><code>&lt;position&gt;</code></dt>
+ <dd>Une position définie avec la même syntaxe que la propriété {{cssxref("background-position")}}. Cette position définit le centre du dégradé. Lorsque cette valeur est absente, la valeur utilisée par défaut est <code>center</code>, ce qui indique que le dégradé est centré.</dd>
+ <dt><code>&lt;angular-color-stop&gt;</code></dt>
+ <dd>Une valeur {{CSSxRef("&lt;color&gt;")}} pour un arrêt de couleur, suivie par une ou plusieurs positions d'arrêt (données par un {{CSSxRef("&lt;angle&gt;")}} le long de l'arc). La taille de l'arc répété pour le dégradé est donné par l'angle du dernier arrêt de couleur auquel on a soustrait l'angle du premier arrêt de couleur.</dd>
+ <dt><code>&lt;color-hint&gt;</code></dt>
+ <dd>Une indication d'interpolation qui définit la façon dont le dégradé progresse entre deux arrêts de couleurs adjacents. Cette indication indique l'emplacement où la couleur doit être la couleur intermédiaire entre les deux arrêts environnant. Si cette valeur est absente, la moitié de la transition entre les couleurs sera atteinte à la moitié de l'arc entre les deux arrêts.</dd>
+ <dd>
+ <div class="note">
+ <p><strong>Note :</strong> Le rendu des arrêts de couleur pour les dégradés CSS suit les mêmes règles que celui des arrêts de couleur pour <a href="/fr/docs/Web/SVG/Tutoriel/Gradients">les dégradés SVG</a>.</p>
+ </div>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">repeating-conic-gradient(
+  [ from &lt;angle&gt; ]? [ at &lt;position&gt; ]?, &lt;angular-color-stop-list&gt; )
+  \---------------------------------/ \----------------------------/
+        Définition du dégradé            Liste d'arrêts de couleur
+
+where &lt;angular-color-stop-list&gt; = [ &lt;angular-color-stop&gt; [, &lt;angular-color-hint&gt;]? ]# , &lt;angular-color-stop&gt;
+  and &lt;angular-color-stop&gt; = &lt;color&gt; &amp;&amp; &lt;color-stop-angle&gt;?
+  and &lt;angular-color-hint&gt; = &lt;angle-percentage&gt;
+  and &lt;color-stop-angle&gt; = &lt;angle-percentage&gt;{1,2}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<div>
+<h3 id="Noir_et_blanc">Noir et blanc</h3>
+
+<div class="hidden">
+<pre class="brush: css notranslate">div {
+  width: 200px;
+  height: 200px;
+}</pre>
+
+<pre class="brush: html notranslate">&lt;div&gt;&lt;/div&gt;
+</pre>
+</div>
+
+<pre class="brush: css notranslate">div {
+  background-image:
+     repeating-conic-gradient(#fff 0 9deg, #000 9deg 18deg);
+}
+</pre>
+
+<p>{{EmbedLiveSample("Noir_et_blanc", 220, 220)}}</p>
+</div>
+
+<div>
+<h3 id="Dégradé_désaxé">Dégradé désaxé</h3>
+
+<div class="hidden">
+<pre class="brush: css notranslate">div {
+  width: 200px;
+  height: 200px;
+}</pre>
+
+<pre class="brush: html notranslate">&lt;div&gt;&lt;/div&gt;
+</pre>
+</div>
+
+<pre class="brush: css notranslate">div {
+  background: repeating-conic-gradient(
+    from 3deg at 25% 25%,
+    green, blue 2deg 5deg, green, yellow 15deg 18deg, green 20deg);
+}</pre>
+
+<p>{{EmbedLiveSample("Dégradé_désaxé", 220, 220)}}</p>
+
+<p>Le degradé est répété 18 fois mais on en voit que la moitié droite et on voit donc 9 répétitions.</p>
+</div>
+
+<div class="note">
+<p><strong>Note :</strong> Voir la page <a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">Utiliser les dégradés en CSS</a> pour plus d'exemples.</p>
+</div>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Les navigateurs ne fournissent pas d'informations spécifiques aux outils d'assistance quant aux images d'arrière-plan. Les lecteurs d'écran ne pourront donc pas annoncer le sens de l'image aux utilisateurs. Bien qu'il soit possible de créer des camemberts, damiers, etc. avec CSS, si l'image contient des informations critiques pour la compréhension générale de la page, mieux vaudra décrire ces informations de façon sémantique dans le document.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">Comprendre les règles du WCAG 1.1</a></li>
+ <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">Understanding Success Criterion 1.1.1 - W3C Understanding WCAG 2.0 (en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Images', '#repeating-gradients', 'repeating-conic-gradient()')}}</td>
+   <td>{{Spec2('CSS4 Images')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<div>{{Compat("css.types.image.gradient.conic-gradient")}}</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">Manipuler les dégradés en CSS</a></li>
+ <li>Les autres fonctions relatives aux dégradés : {{CSSxRef("conic-gradient")}}, {{CSSxRef("linear-gradient")}}, {{CSSxRef("repeating-linear-gradient")}}, {{CSSxRef("radial-gradient")}}, {{CSSxRef("repeating-radial-gradient")}}</li>
+ <li>{{cssxref("&lt;image&gt;")}}</li>
+ <li>{{cssxref("_image","image()")}}</li>
+ <li>{{cssxref("element()")}}</li>
+ <li>{{cssxref("image-set","image-set()")}}</li>
+ <li>{{cssxref("cross-fade")}}</li>
+</ul>
diff --git a/files/fr/web/css/repeating-linear-gradient()/index.html b/files/fr/web/css/repeating-linear-gradient()/index.html
new file mode 100644
index 0000000000..0e6c63df58
--- /dev/null
+++ b/files/fr/web/css/repeating-linear-gradient()/index.html
@@ -0,0 +1,174 @@
+---
+title: repeating-linear-gradient
+slug: Web/CSS/repeating-linear-gradient()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+translation_of: Web/CSS/repeating-linear-gradient()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction CSS <strong><code>repeating-linear-gradient</code></strong> créé une {{cssxref("&lt;image&gt;")}} composée de dégradés qui se répètent. Cela fonctionne de manière similaire aux dégradés linéaires simples décrits les mêmes arguments que les dégradés linéaires basiques représentés avec {{cssxref("linear-gradient")}} mais les points d'arrêt des couleurs sont automatiquement répétés, indéfiniment, dans les deux directions (les points d'arrêt sont répétés d'autant que la distance qui sépare le premier et le dernier point d'arrêt).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-repeating-linear-gradient.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Par conséquent, la ligne de la couleur de fin coïncide toujours avec la ligne de la couleur de début. Si les deux ne sont pas identiques, on obtiendra alors une transition abrupte.</p>
+
+<p>Comme pour les autres dégradés, un dégradé linéaire répété n'est pas une couleur (type {{cssxref("&lt;color&gt;")}}) CSS mais une image (type {{cssxref("&lt;image&gt;")}}) <a href="/fr/docs/Web/CSS/image" title="en/CSS/image#no_intrinsic">sans dimension intrinsèque</a> ; c'est-à-dire, qu'il n'a ni taille naturelle ni taille préférée. Sa taille réelle s'adapte à l'élément auquel il s'applique.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Le type <code>&lt;gradient&gt;</code> est un sous-type du type  <code>&lt;image&gt;</code>. À ce titre, <code>repeating-linear-gradient()</code> ne fonctionnera pas pour {{cssxref("background-color")}} et les autres propriétés qui utilisent le type de données {{cssxref("&lt;color&gt;")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* Un dégradé répétitif sur un axe à 45 degrés */
+/* débutant bleu et finissant rouge, répété 3 fois */
+repeating-linear-gradient( 45deg, blue, red 33.3% );
+
+/* Un dégradé répétitif allant du coin inférieur droit */
+/* à coin supérieur gauche débutant bleu et finissant rouge */
+/* et répété tous les 20 pixels */
+repeating-linear-gradient( to left top, blue, red 20px);
+
+/* Un dégradé répétitif allant du bas vers le haut, */
+/* débutant bleu, étant vert après 40% et finissant rouge */
+repeating-linear-gradient( 0deg, blue, green 40%, red );
+
+/* Un dégradé répété cinq fois, progressant de gauche à
+   droite, commençant en rouge, passant en vert puis à
+   nouveau en rouge */
+repeating-linear-gradient(to right, red 0%, green 10%, red 20%);</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;side-or-corner&gt;</code></dt>
+ <dd>Représente la position du point de départ de la ligne de dégradé. Cette valeur comprends deux mots-clés : le premier indique le côté sur une ligne horizontale, <code>left</code> ou <code>right</code>, le second indique le côté sur une ligne verticale, <code>top</code> ou <code>bottom</code>. L'ordre n'a pas d'influence et chacun des mots-clés est optionnel.<br>
+ Les valeurs<code> to top</code>, <code>to bottom</code>, <code>to left</code> et <code>to right</code> sont respectivement traduites vers les angles <code>0deg</code>, <code>180deg</code>, <code>270deg</code>, <code>90deg</code>. Les autres sont traduites vers des angles qui permettent au point de départ d'être dans le même quadrant que le coin décrit et que la ligne définie par le point de départ et le coin soit perpendiculaire à la ligne de dégradé. De cette manière, la couleur décrite par le point d'arrêt sera exactement celle du coin. Ceci est parfois appelé la propriété du « coin magique ». Le point de fin de la ligne de dégradé est le point symétrique de du point de départ dans l'autre direction par rapport au centre de la boîte.</dd>
+ <dt><code>&lt;angle&gt;</code></dt>
+ <dd>Un angle pour la direction du dégradé. L'angle démarre à <code>0deg</code> (ce qui est équivalent à <code>to top</code>) et progresse dans le sens des aiguilles d'une montre. Voir {{cssxref("&lt;angle&gt;")}}.</dd>
+ <dt><code>&lt;linear-color-stop&gt;</code></dt>
+ <dd>Cette valeur est composée d'une valeur de  couleur (type {{cssxref("&lt;color&gt;")}}), suivie d'une position d'arrêt optionnelle (soit un pourcentage entre 0% et 100% ou une longueur (type {{cssxref("&lt;length&gt;")}}) mesurée le long de l'axe du dégradé).</dd>
+ <dt><code>&lt;color-hint&gt;</code></dt>
+ <dd>L'indication de couleur est une indication pour l'interpolation des couleurs le long du dégradé et entre deux points d'arrêt de couleur. La longueur définit l'emplacement où la transition entre les deux couleurs est appliquée à moitié. Si cette valeur est absente, le niveau intermédiaire de la transition se situera à équidistance des deux points d'arrêt de couleur.</dd>
+ <dd>Le rendu des points d'arrêt en CSS suit les mêmes règles que les dégradés en SVG.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">repeating-linear-gradient(  [ <a href="/fr/docs/Web/CSS/angle">&lt;angle&gt;</a> | to &lt;side-or-corner&gt; ,]? &lt;color-stop-list&gt; )
+                            \---------------------------------/ \---------------/
+                              Définition de la ligne du dégradé Liste des points d'arrêt
+
+où <code>&lt;side-or-corner&gt; = [left | right] || [top | bottom]</code>
+  et <code>&lt;</code><code>color-stop-list&gt; = [ &lt;</code><dfn>linear-</dfn><code>color-stop&gt; [, &lt;color-hint&gt;? ]? ]#, &lt;</code><dfn>linear-</dfn><code>color-stop&gt;
+  et &lt;</code><dfn>linear-</dfn><code>color-stop&gt; = &lt;color&gt; [ &lt;color-stop-length&gt; ]?
+  et &lt;color-stop-length&gt; = [ &lt;percentage&gt; | &lt;length&gt; ]{1,2}
+  et &lt;color-hint&gt; = [ &lt;percentage&gt; | &lt;length&gt; ]</code>
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Bandes_zébrées">Bandes zébrées</h3>
+
+<div class="hidden">
+<pre class="brush: css notranslate">body {
+  width: 100vw;
+  height: 100vh;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">body {
+  background-image: repeating-linear-gradient(-45deg,
+      transparent,
+      transparent 20px,
+      black 20px,
+      black 40px);
+  /* avec plusieurs longueurs pour les points d'arrêt */
+  background-image: repeating-linear-gradient(-45deg,
+      transparent 0 20px,
+      black 20px 40px);
+}
+</pre>
+
+<p>{{EmbedLiveSample('Bandes_zébrées', 120, 120)}}</p>
+
+<h3 id="Dix_barres_horizontales_répétées">Dix barres horizontales répétées</h3>
+
+<div class="hidden">
+<pre class="brush: css notranslate">body {
+  width: 100vw;
+  height: 100vh;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">body {
+  background-image: repeating-linear-gradient(to bottom,
+      rgb(26,198,204),
+      rgb(26,198,204) 7%,
+      rgb(100,100,100) 10%);
+}
+</pre>
+
+<p>{{EmbedLiveSample('Dix_barres_horizontales_répétées', 120, 120)}}</p>
+
+<p>Comme le dernier point d'arrêt est situé à 10% et que le dégradé est vertical, chaque dégradé occupera 10% de la hauteur et on aura donc au total dix barres horizontales.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Voir la page <a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">Manipuler les dégradés CSS</a> pour plus d'exemples.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Images', '#repeating-gradients', 'repeating-linear-gradient()')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.types.image.gradient.repeating-linear-gradient")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">Manipuler les dégradés CSS</a></li>
+ <li>Les propriétés liées aux dégradés :
+  <ul>
+   <li>{{cssxref("radial-gradient", "radial-gradient()")}},</li>
+   <li>{{cssxref("linear-gradient", "linear-gradient()")}},</li>
+   <li>{{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}</li>
+   <li>{{cssxref("conic-gradient")}}</li>
+   <li>{{cssxref("repeating-conic-gradient")}}</li>
+  </ul>
+ </li>
+ <li>Les propriétés où ces fonctions peuvent être utilisées :
+  <ul>
+   <li>{{cssxref("background-image")}},{{cssxref("background")}}.</li>
+  </ul>
+ </li>
+ <li><a href="https://codepen.io/adobe/full/fhnBJ">Un dégradé CSS interactif</a></li>
+ <li>{{cssxref("&lt;image&gt;")}}</li>
+ <li>{{cssxref("_image","image()")}}</li>
+ <li>{{cssxref("element()")}}</li>
+ <li>{{cssxref("image-set","image-set()")}}</li>
+ <li>{{cssxref("cross-fade")}}</li>
+</ul>
diff --git a/files/fr/web/css/repeating-radial-gradient()/index.html b/files/fr/web/css/repeating-radial-gradient()/index.html
new file mode 100644
index 0000000000..eae482b540
--- /dev/null
+++ b/files/fr/web/css/repeating-radial-gradient()/index.html
@@ -0,0 +1,165 @@
+---
+title: repeating-radial-gradient()
+slug: Web/CSS/repeating-radial-gradient()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+translation_of: Web/CSS/repeating-radial-gradient()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <code><strong>repeating-radial-gradient()</strong></code> fonctionne de façon similaire à {{cssxref("radial-gradient")}} mais répète les couleurs de façon infinie dans les deux directions avec des répétitions formant des bandes de gradient (de façon analogue à {{cssxref("repeating-linear-gradient")}} qui permet de répéter un dégradé linéaire ({{cssxref("linear-gradient")}}).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-repeating-radial-gradient.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Comme pour les autres gradients, un gradient radial répété n'est pas une couleur CSS : ce n'est pas une valeur de type {{cssxref("&lt;color&gt;")}} mais une image (type {{cssxref("&lt;image&gt;")}}) <a href="/fr/docs/Web/CSS/image">sans dimension intrinsèque</a> : elle n'a pas de taille naturelle ou préférée ni de proportion. Sa taille réelle correspondra à celle de l'élément où est appliqué le gradient.</p>
+
+<div class="note">
+<p><strong>Note :</strong> En CSS, un dégradé est une image (type de données {{cssxref("&lt;image&gt;")}} et une telle valeur ne peut être utilisée qu'avec les propriétés qui gèrent des images. Ainsi, <code>repeating-radial-gradient()</code> ne fonctionnera pas avec {{cssxref("background-color")}} ou avec les autres propriétés qui acceptent des couleurs (type de données {{cssxref("&lt;color&gt;")}}).</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* Un dégradé répété qui part du centre de son conteneur,
+   en commençant par du rouge, passant par du bleu puis,
+   finissant par du vert */
+repeating-radial-gradient(circle at center, red 0, blue, green 30px);
+
+/* Un dégradé elliptique qui commence dans le coin supérieur gauche
+   en commençant rouge puis en passant au vert, cinq fois entre le
+   centre et le coin inférieur droit et une seule fois entre le
+   centre et le coin supérieur gauche */
+repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20%);
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;position&gt;</code></dt>
+ <dd>Une position CSS ({{cssxref("&lt;position&gt;")}}) qui sera interprétée de la même façon que {{cssxref("background-position")}} ou {{cssxref("transform-origin")}}. La valeur par défaut est <code>center</code>.</dd>
+ <dt><code>&lt;shape&gt;</code></dt>
+ <dd>La forme du gradient employé. C'est un mot-clé parmi <code>circle</code> (le dégradé est circulaire avec un rayon constant) ou <code>ellipse</code> (la forme est elliptique et l'axe est aligné avec la direction indiquée). La valeur par défaut est <code>ellipse</code>.</dd>
+ <dt><code>&lt;size&gt;</code></dt>
+ <dd>La taille du gradient (cf. la section sur les constantes dimensionnelles ci-après).</dd>
+ <dt><code>&lt;color-stop&gt;</code></dt>
+ <dd>Cette valeur représente une couleur fixe à une position donnée. Cette valeur est composée d'une valeur {{cssxref("&lt;color&gt;")}} éventuellement suivie d'une position d'arrêt (une valeur {{cssxref("&lt;percentage&gt;")}} ou {{cssxref("&lt;length&gt;")}} représentant l'emplacement sur la ligne du gradient). Une valeur de <code>0%</code> ou <code>0</code> représentera le centre du gradient et la valeur de <code>100%</code> représentera la fin de la forme qu'occupe le dégradé. Les valeurs intermédiaires sont positionnées de façon proportionnelles sur le rayon.</dd>
+ <dt><code>&lt;extent-keyword&gt;</code></dt>
+ <dd>Des mots-clés qui déterminent la taille de la forme. Les valeurs possibles sont :</dd>
+ <dd>
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <th>Constante</th>
+    <th>Description</th>
+   </tr>
+   <tr>
+    <td><code>closest-side</code></td>
+    <td>La forme du gradient est délimitée par les côtés de la boîtes qui sont le plus proche du centre dans le cas des cercles. Dans le cas des ellipses, elle est délimitée par les côtés horizontaux et verticaux de la boîte.</td>
+   </tr>
+   <tr>
+    <td><code>closest-corner</code></td>
+    <td>La forme du gradient est dimensionnée afin d'atteindre exactement le coin de la boîte le plus proche du centre.</td>
+   </tr>
+   <tr>
+    <td><code>farthest-side</code></td>
+    <td>Fonctionne de façon similaire à <code>closest-side</code> mais cette fois, ce sont les côtés les plus éloignés du centre qui servent de délimitation.</td>
+   </tr>
+   <tr>
+    <td><code>farthest-corner</code></td>
+    <td>Fonctionne de façon similaire à <code>closest-corner</code> mais dans ce cas, c'est le coin le plus éloigné du centre qui est utilisé comme délimitation.</td>
+   </tr>
+  </tbody>
+ </table>
+ Les premières versions du brouillon utilisaient d'autres termes comme <code>cover</code> et <code>contain</code>, respectivement synonymes de <code>farthest-corner</code> et <code>closest-side</code>. Certaines implémentations ont abandonné ces termes et on préfèrera donc utiliser les mots-clés précédemment listés.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Dégradé_noir_et_blanc">Dégradé noir et blanc</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="radial-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">.radial-gradient {
+  width: 120px;
+  height: 120px;
+  background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
+}
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Dégradé_noir_et_blanc', 120, 120)}}</p>
+
+<h3 id="Utilisation_de_farthest-corner">Utilisation de <code>farthest-corner</code></h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="radial-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">.radial-gradient {
+  width: 120px;
+  height: 120px;
+  background: repeating-radial-gradient(ellipse farthest-corner,
+      red, black 5%, blue 5%, green 10%);
+}
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample('Utilisation_de_farthest-corner', 120, 120)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Images', '#repeating-gradients', 'repeating-radial-gradient()')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.types.image.gradient.repeating-radial-gradient")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">Utiliser les gradients CSS</a></li>
+ <li>{{cssxref("repeating-linear-gradient")}}</li>
+ <li>{{cssxref("radial-gradient")}}</li>
+ <li>{{cssxref("repeating-linear-gradient")}}</li>
+ <li>{{cssxref("conic-gradient")}}</li>
+ <li>{{cssxref("repeating-conic-gradient")}}</li>
+ <li>{{cssxref("&lt;image&gt;")}}</li>
+ <li>{{cssxref("_image","image()")}}</li>
+ <li>{{cssxref("element()")}}</li>
+ <li>{{cssxref("image-set","image-set()")}}</li>
+ <li>{{cssxref("cross-fade")}}</li>
+</ul>
diff --git a/files/fr/web/css/requêtes_média/index.html b/files/fr/web/css/requêtes_média/index.html
new file mode 100644
index 0000000000..58c6cdc73e
--- /dev/null
+++ b/files/fr/web/css/requêtes_média/index.html
@@ -0,0 +1,86 @@
+---
+title: Media queries
+slug: Web/CSS/Requêtes_média
+tags:
+  - Aperçu
+  - CSS
+  - CSS Media Queries
+  - Reference
+translation_of: Web/CSS/Media_Queries
+---
+<div>{{CSSRef}}</div>
+
+<p>Les requêtes média, plus souvent appelées <strong><em>media queries,</em></strong> sont un outil de <em>responsive design</em> qui permet d'adapter la feuille de style CSS en fonction de différents paramètres ou caractéristiques de l'appareil. Par exemple, on pourra appliquer différents styles si l'écran de l'appareil utilisé pour consulter le document est plus petit qu'une taille donnée ou si l'utilisateur tient son appareil en mode portrait ou paysage. La règle @ (ou <em>at-rule</em>) {{cssxref("@media")}} est utilisée afin d'appliquer les styles de façon conditionnelle.</p>
+
+<p>De plus, la syntaxe des requêtes média est également employée dans d'autres contextes, notamment l'attribut {{htmlattrxref("media", "source")}} de l'élément {{HTMLElement("source")}} qui permet de définir une chaîne de caractères contenant une requête média afin de choisir le fichier source utilisé pour une image grâce à l'élément HTML {{HTMLElement("picture")}}.</p>
+
+<p>De plus, la méthode du DOM {{domxref("Window.matchMedia()")}} peut être utilisée afin de tester le résultat d'une requête média pour la fenêtre courante. On peut également utiliser la méthode {{domxref("MediaQueryList.addListener()")}} afin de recevoir une notification lorsque l'état de la requête évolue. Grâce à cette fonctionnalité, un site ou une application peut réagir aux changements de configuration, d'orientation ou d'état.</p>
+
+<p>Vous pouvez en découvrir plus dans l'article <a href="/fr/docs/Web/CSS/Requêtes_média/Tester_les_media_queries">Tester des requêtes media</a>.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Règles">Règles @</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("@import")}}</li>
+ <li>{{cssxref("@media")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/Media_queries">Manipuler les requêtes média</a></dt>
+ <dd>Cet article présente les requêtes média, ce qu'elles font, et explique les différentes expressions qu'il est possible d'utiliser.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Media_Queries/Testing_media_queries">Tester les requêtes média</a></dt>
+ <dd>Cet article explique comment tester une requête média grâce à un programme JavaScript. On pourra par exemple déterminer l'état de l'appareil, mettre en place des gestionnaires d'évènements afin d'être notifié lorsque les résultats d'une requête média évoluent (par exemple lorsqu'un utilisateur tourne son appareil).</dd>
+ <dt><a href="/fr/docs/Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility">Utiliser des requêtes média pour l'accessibilité</a></dt>
+ <dd>Cet article explique comment les requêtes média peuvent être utilisées afin de rendre un site plus accessible.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS5 Media Queries')}}</td>
+   <td>{{Spec2('CSS5 Media Queries')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Conditional')}}</td>
+   <td>{{Spec2('CSS3 Conditional')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'media.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La règle-@ {{cssxref("@supports")}} afin d'appliquer une mise en forme srlon que l'agent utilisateur prend ou non en charge certaines technologies CSS.</li>
+</ul>
diff --git a/files/fr/web/css/requêtes_média/tester_les_media_queries/index.html b/files/fr/web/css/requêtes_média/tester_les_media_queries/index.html
new file mode 100644
index 0000000000..39539a5749
--- /dev/null
+++ b/files/fr/web/css/requêtes_média/tester_les_media_queries/index.html
@@ -0,0 +1,79 @@
+---
+title: Tester les requêtes média en JavaScript
+slug: Web/CSS/Requêtes_média/Tester_les_media_queries
+tags:
+  - Avancé
+  - CSS
+  - DOM
+  - Guide
+translation_of: Web/CSS/Media_Queries/Testing_media_queries
+---
+<div>{{CSSRef}}</div>
+
+<p>Le {{Glossary("DOM")}} fournit un certain nombre de fonctionnalités qui permettent de tester les résultats d'une requête média (<em>media query</em>) avec un script. Pour cela, on utilise l'interface {{domxref("MediaQueryList")}} ainsi que ses méthodes et ses propriétés. Une fois qu'on a créé un objet {{domxref("MediaQueryList") }}, on peut vérifier le résultat de la requête ou également recevoir des notifications automatiques lorsque le résultat de la requête change.</p>
+
+<h2 id="Créer_une_liste_de_requêtes_média">Créer une liste de requêtes média</h2>
+
+<p>Avant d'évaluer les résultats d'une requête, on doit créer un objet {{domxref("MediaQueryList")}} qui représente la requête média. Pour cela, on utilisera la méthode {{domxref("window.matchMedia")}}.</p>
+
+<p>Ainsi, si on veut avoir une liste de requête qui détermine si l'appareil utilisé est orienté en portrait ou en paysage, on pourra écrire :</p>
+
+<pre class="brush: js">var mql = window.matchMedia("(orientation: portrait)");
+</pre>
+
+<h2 id="Vérifier_le_résultat_d'une_requête">Vérifier le résultat d'une requête</h2>
+
+<p>Une fois que la liste de requêtes média a été créée, on peut vérifier le résultat de la requête grâce à la propriété <code>matches</code> qui représente les résultat de la requête :</p>
+
+<pre class="brush: js">if (mql.matches) {
+  /* La zone d'affichage/viewport est en portrait */
+} else {
+  /* La zone d'affichage/viewport est en paysage */
+}
+</pre>
+
+<h2 id="Recevoir_des_notifications_liées_à_la_requête">Recevoir des notifications liées à la requête</h2>
+
+<p>Afin de savoir lorsque l'évaluation d'une requête a changé, il sera plus efficace de déclarer un <em>listener</em> plutôt que d'interroger sans cesse le résultat. Pour cela, on pourra utiliser la méthode <code>addListener()</code> sur l'objet {{domxref("MediaQueryList")}} et définir un observateur qui implémente l'interface {{domxref("MediaQueryListListener")}} :</p>
+
+<pre class="brush: js">var mql = window.matchMedia("(orientation: portrait)");
+mql.addListener(handleOrientationChange);
+handleOrientationChange(mql);
+</pre>
+
+<p>Ce code crée la liste de requêtes média qui teste l'orientation (l'objet <code>mql</code>) puis ajoute un <em>listener</em>. Une fois qu'on a ajouté le <em>listener</em>, on l'invoque une fois. Cela permet d'ajuster l'état initial du <em>listener</em> selon l'orientation de l'appareil (sinon, le code aurait considéré que l'appareil était en portrait par défaut même si ce dernier était en paysage, ce qui aurait engendré des incohérences).</p>
+
+<p>La méthode <code>handleOrientationChange()</code> qu'on implémente ensuite consulte le résultat de la requête et gère le cas où l'orientation est modifiée :</p>
+
+<pre class="brush: js">function handleOrientationChange(mql) {
+  if (mql.matches) {
+    /* La zone d'affichage/viewport est en portrait */
+  } else {
+    /* La zone d'affichage/viewport est en paysage */
+  }
+}
+</pre>
+
+<h2 id="Terminer_la_réception_des_notifications">Terminer la réception des notifications</h2>
+
+<p>Lorsqu'on ne souhaite plus recevoir de notifications sur les modifications apportées à la valeur de la requête média, on pourra simplement utiliser <code>removeListener()</code> sur l'objet  {{domxref("MediaQueryList") }} :</p>
+
+<pre class="brush: js">mql.removeListener(handleOrientationChange);
+</pre>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<h3 id="Interface_MediaQueryList">Interface <code>MediaQueryList</code></h3>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.MediaQueryList")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries" title="CSS/Media queries">Les requêtes média (<em>media queries</em>)</a></li>
+ <li>{{domxref("window.matchMedia()")}}</li>
+ <li>{{domxref("MediaQueryList")}}</li>
+ <li>{{domxref("MediaQueryListEvent")}}</li>
+</ul>
diff --git a/files/fr/web/css/requêtes_média/utilisation_requêtes_media_accessibilité/index.html b/files/fr/web/css/requêtes_média/utilisation_requêtes_media_accessibilité/index.html
new file mode 100644
index 0000000000..3ff2740bd8
--- /dev/null
+++ b/files/fr/web/css/requêtes_média/utilisation_requêtes_media_accessibilité/index.html
@@ -0,0 +1,96 @@
+---
+title: Utilisation des requêtes média pour l'accessibilité
+slug: Web/CSS/Requêtes_média/Utilisation_requêtes_media_accessibilité
+tags:
+  - '@media'
+  - Accessibilité
+  - CSS
+translation_of: Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility
+---
+<div>{{QuickLinksWithSubpages("/fr/docs/Web/CSS/Requêtes_média/")}}</div>
+
+<p><strong>Les requêtes média (<em>media queries</em>)</strong> peuvent être utilisées afin d'améliorer l'accessibilité d'un site web.</p>
+
+<h2 id="Réduction_de_mouvement_-_prefers-reduced-motion">Réduction de mouvement - <code>prefers-reduced-motion</code></h2>
+
+<p>Le clignotement ou les animations rapides peuvent poser problème, notamment pour les personnes souffrant de troubles tels que le troubles de déficit de l'attention ou d'epilepsie, de migraines, etc.</p>
+
+<p>Cette méthode peut également améliorer l'expérience des utilisateurs en économisant l'énergie nécessaire à l'affichage de la page (avec une amélioration sensible pour les appareils avec une batterie faible ou qui ne sont pas particulièrement récents).</p>
+
+<h3 id="Syntaxe">Syntaxe</h3>
+
+<dl>
+ <dt><code><dfn>no-preference</dfn></code></dt>
+ <dd>Cette valeur indique que l'utilisateur n'a pas indiqué de préférence particulière dans le système.</dd>
+ <dt><code><dfn>reduce</dfn></code></dt>
+ <dd>Cette valeur indique que l'utilisateur a signalé au système qu'il préférait une interface minimisant la quantité de mouvement ou d'animation. Idéalement, tous les mouvements qui ne sont pas essentiles doivent être retirés.</dd>
+</dl>
+
+<h3 id="Exemple">Exemple</h3>
+
+<p>Cet exemple illustre comment éviter les animations inutiles en activant une préférence pour réduire les mouvements à l'écran.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="animation"&gt;animated box&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.animation {
+  -webkit-animation: vibrate 0.3s linear infinite both;
+  animation: vibrate 0.3s linear infinite both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animation {
+    animation: none;
+  }
+}
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemple")}}</p>
+
+<h2 id="Mode_de_contraste_élevéNon-standard_inline">Mode de contraste élevé{{Non-standard_inline}}</h2>
+
+<p>La caractéristique média <code><strong>-ms-high-contrast</strong></code> est <a href="/en-US/docs/Web/CSS/Microsoft_extensions">spécifique à Microsoft</a> mais permet d'indiquer si l'application est affichée avec un mode de contraste élevé et, si c'est le cas, quelle variation de couleur est utilisée.</p>
+
+<p>Cela ne bénéficie pas seulement aux utilisateurs souffrant de troubles de la vision mais aussi aux personnes qui consultent le document avec une lumière ambiante importante (ex. sur un écran faiblement éclairé et en plein soleil).</p>
+
+<h3 id="Syntaxe_2">Syntaxe</h3>
+
+<p>La caractéristique média <strong><code>-ms-high-contrast</code></strong> peut être définie avec l'une des valeurs suivantes.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>active</code></dt>
+ <dd>
+ <p>Cette valeur indique que les règles suivantes seront appliquées lorsque le système utilise un mode de contraste élevé, quelle que soit la variation de couleurs.</p>
+ </dd>
+ <dt><code>black-on-white</code></dt>
+ <dd>
+ <p>Cette valeur indique que les règles suivantes seront appliquées lorsque le système utilise un mode de contraste élevé avec une dominante noir sur blanc.</p>
+ </dd>
+ <dt><code>white-on-black</code></dt>
+ <dd>
+ <p>Cette valeur indique que les règles suivantes seront appliquées lorsque le système utilise un mode de contraste élevé avec une dominante blanc sur noir.</p>
+ </dd>
+</dl>
+
+<h3 id="Exemple_2">Exemple</h3>
+
+<p>Les déclarations suivantes s'appliqueront respectivement aux applications qui sont affichées avec un mode de contraste élevé, quelle que soit la variation de couleur (1), avec une dominante noir sur blanc (2), avec une dominante blanc sur noir (3).</p>
+
+<pre class="brush: css">@media screen and (-ms-high-contrast: active) {
+  /* Toutes les règles appliquées en contraste élevé */
+}
+@media screen and (-ms-high-contrast: black-on-white) {
+  div { background-image: url('image-bw.png'); }
+}
+@media screen and (-ms-high-contrast: white-on-black) {
+  div { background-image: url('image-wb.png'); }
+}
+</pre>
diff --git a/files/fr/web/css/requêtes_média/utiliser_les_media_queries/index.html b/files/fr/web/css/requêtes_média/utiliser_les_media_queries/index.html
new file mode 100644
index 0000000000..4dc71551de
--- /dev/null
+++ b/files/fr/web/css/requêtes_média/utiliser_les_media_queries/index.html
@@ -0,0 +1,384 @@
+---
+title: Media queries
+slug: Web/CSS/Requêtes_média/Utiliser_les_Media_queries
+tags:
+  - Avancé
+  - CSS
+  - CSS3
+  - Guide
+  - Media Queries
+  - Requêtes média
+  - Responsive Design
+translation_of: Web/CSS/Media_Queries/Using_media_queries
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>Les requêtes média (<em>media queries</em>)</strong> permettent de modifier l'apparence d'un site ou d'une application en fonction du type d'appareil (impression ou écran par exemple) et de ses caractéristiques (la résolution d'écran ou la largeur de la zone d'affichage (<em>viewport</em>) par exemple).</p>
+
+<p>Les requêtes média sont utilisées afin :</p>
+
+<ul>
+ <li>D'appliquer certains styles de façon conditionnelle grâce <a href="/fr/docs/Web/CSS/R%C3%A8gles_@">aux règles @</a> {{cssxref("@media")}} et {{cssxref("@import")}}<a href="/fr/docs/Web/CSS/At-rule">.</a></li>
+ <li>De cibler certains médias pour les éléments {{HTMLElement("style")}}, {{HTMLElement("link")}}, {{HTMLElement("source")}} et d'autres éléments <a href="/fr/docs/Web/HTML">HTML</a> grâce à l'attribut <code>media=</code>.</li>
+ <li>De <a href="/fr/docs/Web/CSS/Requêtes_média/Tester_les_media_queries">tester et surveiller l'état d'un média</a> grâce aux méthodes {{domxref("Window.matchMedia()")}} et {{domxref("MediaQueryList.addListener()")}}.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note :</strong> Les exemples de cet article utilisent <code>@media</code> à des fins d'illustration. Toutefois, la syntaxe est la même pour les différents types de requêtes média.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Une requête média se compose d'un <em>type de média</em> optionnel et d'une ou plusieurs expressions de <em>caractéristiques de média</em>. Plusieurs requêtes peuvent être combinées entre elles grâce à des opérateurs logiques. Les requêtes média ne sont pas sensibles à la casse.</p>
+
+<p>Une requête média vaut <code>true</code> si le type de média correspond à l'appareil utilisé pour l'affichage du document et si toutes les expressions relatives aux caractéristiques sont vraies. Les requêtes qui utilisent des types de média inconnus valent toujours <code>false</code>.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Lorsqu'une feuille de style est attachée à un élément {{HTMLElement("link")}} comportant une requếte média, cette feuille de style <a href="http://scottjehl.github.com/CSS-Download-Tests/">sera toujours téléchargée</a>, même si la requête renvoie <code>false</code>. Toutefois, le contenu de cette feuille n'est pas appliquée tant que le résultat de la requête ne devient pas <code>true</code>.</p>
+</div>
+
+<h3 id="Types_de_média"><a id="types" name="types">Types de média</a></h3>
+
+<p>Un type de média définit une catégorie générale d'appareil. Le type de média est optionnel dans une requête média, sauf si celle-ci utilise les opérateurs logiques <code>not</code> ou <code>only</code>. Par défaut, le type de média utilisé est <code>all</code>.</p>
+
+<dl>
+ <dt><code id="all">all</code></dt>
+ <dd>Correspond pour tous les appareils.</dd>
+ <dt><code id="print">print</code></dt>
+ <dd>Correspond aux matériaux paginés et aux documents consultés en aperçu avant impression. Pour plus d'informations, voir l'article sur <a href="/fr/docs/Web/CSS/Média_paginés">les média paginés</a>.</dd>
+ <dt><code id="screen">screen</code></dt>
+ <dd>Correspond aux appareils dotés d'un écran.</dd>
+ <dt><code id="speech">speech</code></dt>
+ <dd>Correspond aux outils de synthèse vocale.</dd>
+</dl>
+
+<div class="note"><strong>Note : Les types de média dépréciés</strong> CSS2.1 et <a href="https://drafts.csswg.org/mediaqueries-3/#background">Media Queries 3</a> ont défini plusieurs types additionnels (<code>tty</code>, <code>tv</code>, <code>projection</code>, <code>handheld</code>, <code>braille</code>, <code>embossed</code>, and <code>aural</code>) qui ont ensuite été dépréciés avec <a href="http://dev.w3.org/csswg/mediaqueries/#media-types">Media Queries 4</a>. Ces types ne doivent donc plus être utilisés. Le type <code>aural</code> a été remplacé par le type <code>speech</code>.</div>
+
+<h3 id="Caractéristiques_média_media_features"><a id="caractéristiques" name="caractéristiques">Caractéristiques média (<em>media features</em>)</a></h3>
+
+<p>Les caractéristiques média décrivent certaines caractéristiques spécifiques de l'agent utilisateur, de l'appareil d'affichage ou de l'environnement. Les expressions de caractéristique média testent leur présence ou leur valeur. Chaque expression de caractéristique doit être entourée de parenthèses.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th>Nom</th>
+   <th>Résumé</th>
+   <th>Notes</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{cssxref("@media/width","width")}}</td>
+   <td>La largeur de la zone d'affichage (<em>viewport</em>)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/height","height")}}</td>
+   <td>La hauteur de la zone d'affichage</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/aspect-ratio","aspect-ratio")}}</td>
+   <td>Le rapport largeur/hauteur de la zone d'affichage</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/orientation","orientation")}}</td>
+   <td>L'orientation la zone d'affichage</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/resolution","resolution")}}</td>
+   <td>La densité de pixel pour l'appareil d'affichage</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/scan","scan")}}</td>
+   <td>Le processus de scan de l'appareil d'affichage</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/grid","grid")}}</td>
+   <td>Le type d'écran de l'appareil : matriciel ou grille ?</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/update-frequency","update")}}</td>
+   <td>La fréquence de modification du contenu par l'appareil d'affichage</td>
+   <td>Ajoutée avec le niveau 4 du module de spécification <em>Media Queries</em>.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/overflow-block","overflow-block")}}</td>
+   <td>La façon dont l'appareil d'affichage gère le contenu qui dépasse de la zone d'affichage selon l'axe de bloc</td>
+   <td>Ajoutée avec le niveau 4 du module de spécification <em>Media Queries</em>.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/overflow-inline","overflow-inline")}}</td>
+   <td>La possibilité de faire défiler (<em>scroll</em>) le contenu qui dépasse de la zone d'affichage sur l'axe en ligne</td>
+   <td>Ajoutée avec le niveau 4 du module de spécification <em>Media Queries</em>.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/color","color")}}</td>
+   <td>Le nombre de bits pour chaque composante de couleur pour l'appareil d'affichage (ou 0 si l'appareil ne gère pas les couleurs)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/color-gamut","color-gamut")}}</td>
+   <td>Un intervalle approximatif des couleurs prises en charge par l'agent utilisateur et l'appareil d'affichage</td>
+   <td>Ajoutée avec le niveau 4 du module de spécification <em>Media Queries</em>.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/color-index","color-index")}}</td>
+   <td>Le nombre d'éléments dans le tableau des couleurs de l'appareil d'affichage (ou 0 si l'appareil ne dispose pas d'un tel tableau)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/display-mode","display-mode")}}</td>
+   <td>Le mode d'affichage de l'application, tel qu'indiqué par la propriété <a href="/fr/docs/Web/Manifest#display"><code>display</code></a> du manifeste</td>
+   <td>Définie dans <a href="https://w3c.github.io/manifest/#the-display-mode-media-feature">la spécification pour les manifestes des applications web</a>.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/monochrome","monochrome")}}</td>
+   <td>Le nombre de bits par pixel pour le <em>frame buffer</em> monochrome de l'appareil d'affichage ou 0 si l'appareil n'est pas monochrome</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/inverted-colors","inverted-colors")}}</td>
+   <td>L'inversion (ou non) des couleurs par l'agent utilisateur ou le système d'exploitation</td>
+   <td>Reportée au niveau 5 du module de spécification <em>Media Queries</em>.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/pointer","pointer")}}</td>
+   <td>La présence d'un appareil de pointage comme mécanisme de saisie principal et sa précision</td>
+   <td>Ajoutée avec le niveau 4 du module de spécification <em>Media Queries</em>.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/hover","hover")}}</td>
+   <td>La capacité du mécanisme de saisie principal à survoler les éléments</td>
+   <td>Ajoutée avec le niveau 4 du module de spécification <em>Media Queries</em>.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/any-pointer","any-pointer")}}</td>
+   <td>La présence d'un appareil de pointage parmi les mécanismes de saisie et sa précision</td>
+   <td>Ajoutée avec le niveau 4 du module de spécification <em>Media Queries</em>.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/any-hover","any-hover")}}</td>
+   <td>La capacité d'un des mécanismes de saisie à survoler les éléments</td>
+   <td>Ajoutée avec le niveau 4 du module de spécification <em>Media Queries</em>.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/light-level","light-level")}}</td>
+   <td>Le niveau de luminosité de l'environnement</td>
+   <td>Ajoutée avec le niveau 5 du module de spécification <em>Media Queries</em>.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}}</td>
+   <td>L'utilisateur préfère que la quantité de mouvement sur la page soit réduite.</td>
+   <td>Ajoutée avec le niveau 5 du module de spécification <em>Media Queries</em>.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/prefers-reduced-transparency", "prefers-reduced-transparency")}}</td>
+   <td>L'utilisateur préfère que la transparence utilisée sur la page soit réduite.</td>
+   <td>Ajoutée avec le niveau 5 du module de spécification <em>Media Queries</em>.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/prefers-contrast", "prefers-contrast")}}</td>
+   <td>L'utilisateur préfère que la contraste soit augmenté ou réduit entre des couleurs proches.</td>
+   <td>Ajoutée avec le niveau 5 du module de spécification <em>Media Queries</em>.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}}</td>
+   <td>L'utilisateur préfère utiliser un thème clair ou un thème sombre.</td>
+   <td>Ajoutée avec le niveau 5 du module de spécification <em>Media Queries</em>.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/forced-colors", "forced-colors")}}</td>
+   <td>Détecte si l'agent utilisateur restreint la palette de couleurs.</td>
+   <td>Ajoutée avec le niveau 5 du module de spécification <em>Media Queries</em>.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/scripting","scripting")}}</td>
+   <td>La disponibilité des fonctions de script (JavaScript par exemple)</td>
+   <td>Reportée au niveau 5 du module de spécification <em>Media Queries</em>.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/device-width","device-width")}} {{obsolete_inline}}</td>
+   <td>La largeur de la surface de rendu pour l'appareil d'affichage</td>
+   <td>Dépréciée par le niveau 4 du module de spécification <em>Media Queries</em>.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/device-height","device-height")}} {{obsolete_inline}}</td>
+   <td>La hauteur de la surface de rendu pour l'appareil d'affichage</td>
+   <td>Dépréciée par le niveau 4 du module de spécification <em>Media Queries</em>.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/device-aspect-ratio","device-aspect-ratio")}} {{obsolete_inline}}</td>
+   <td>Le rapport largeur/hauteur de la surface de rendu pour l'appareil d'affichage</td>
+   <td>Dépréciée par le niveau 4 du module de spécification <em>Media Queries</em>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Opérateurs_logiques">Opérateurs logiques</h3>
+
+<p>Les opérateurs logiques <code>not</code>, <code>and</code> et <code>only</code> peuvent être utilisés afin de construire une requête média complexe. Il est aussi possible de combiner plusieurs requêtes média en les séparant par des virgules.</p>
+
+<h4 id="and"><code>and</code></h4>
+
+<p>L'opérateur <code>and</code> permet de combiner plusieurs requêtes média en une seule. Pour que la requête résultante soit vraie, il faut que chacune des sous-requêtes soit vraie. Cet opérateur est également utilisé afin de relier des caractéristiques média avec des types de média.</p>
+
+<h4 id="not"><code>not</code></h4>
+
+<p>L'opérateur <code>not</code> est utilisé afin d'obtenir le résultat opposé d'une requête média (il renvoie <code>true</code> si l'opérande renvoie <code>false</code>). S'il est utilisé dans une liste de requêtes séparées par des virgules, il ne nie que la requête sur laquelle il est appliqué. Si l'opérateur <code>not</code> est utilisé, la requête doit nécessairement contenir un type de média.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Pour la spécification de niveau 3, l'opérateur <code>not</code> ne peut pas être utilisé afin de prendre l'opposé d'une expression de caractéristique de média, il ne peut servir qu'à l'échelle d'une requête média entière.</p>
+</div>
+
+<h4 id="only"><code>only</code></h4>
+
+<p>L'opérateur <code>only</code> est utilisé afin d'appliquer un style uniquement si l'intégralité de la requête est vérifiée. Il permet d'empêcher les anciens navigateurs d'appliquer les styles concernés. Si on utilise pas <code>only</code>, un ancien navigateur interprètera <code>screen and (max-width: 500px)</code> comme <code>screen</code> uniquement (appliquant ainsi le style à tous les écrans). Si l'opérateur <code>only</code> est utilisé, la requête doit nécessairement contenir un type de média.</p>
+
+<h4 id="virgule"><code>,</code> (virgule)</h4>
+
+<p>Les virgules permettent de combiner plusieurs requêtes en une. Chaque requête est traitée séparément. Autrement dit, si une des requêtes de la liste renvoie <code>true</code>, toute la requête combinée renverra <code>true</code>. En ce sens, l'opérateur <code>,</code> agit comme un opérateur booléen <code>or</code>.</p>
+
+<h2 id="Cibler_des_types_de_média">Cibler des types de média</h2>
+
+<p>Les types de média décrivent la catégorie générale de l'appareil utilisé. Bien que la plupart des sites web soient principalement conçus pour être affichés sur des écrans, il est possibles d'avoir des styles spécifiques pour les impressions ou pour les lecteurs d'écran. Voici une requête qui permet de cibler les imprimantes ou autres appareils imprimant le contenu sur plusieurs pages :</p>
+
+<pre class="brush: css notranslate">@media print { ... }</pre>
+
+<p>Il est possible de cibler plusieurs types à la fois. La règle suivante permet de cibler les écrans et les appareils d'impression :</p>
+
+<pre class="brush: css notranslate">@media screen, print { ... }</pre>
+
+<p>Pour une liste complète des types de média, voir <a class="internal" href="#types">ci-avant</a>. Ces types étant très génériques, peu de valeurs sont disponibles. Afin d'avoir un ciblage plus fin, on pourra utiliser les caractéristiques média.</p>
+
+<h2 id="Cibler_des_caractéristiques_média">Cibler des caractéristiques média</h2>
+
+<p>Les caractéristiques média décrivent les caractéristiques spécifiques d'un agent utilisateur, d'un appareil d'affichage ou de l'environnement. On peut ainsi cibler différents styles pour les écrans larges, pour les ordinateurs qui disposent d'une souris ou pour les appareils utilisés dans une faible luminosité. Dans l'exemple qui suit, on a une requête qui vérifie si le mécanisme de saisie principal de l'appareil peut survoler les éléments :</p>
+
+<pre class="brush: css notranslate">@media (hover: hover) { ... }</pre>
+
+<p>De nombreuses caractéristiques média sont des caractéristiques portant sur un intervalle et peuvent être préfixées par <code>min-</code> ou <code>max-</code> afin d'exprimer des seuils de valeurs. Par exemple, la requête suivante permet d'appliquer des styles à condition que la largeur de la zone d'affichage (<em>viewport</em>) soit inférieure à 1250px :</p>
+
+<pre class="brush: css notranslate">@media (max-width: 1250px) { ... }</pre>
+
+<div class="blockIndicator note">
+<p>Selon la spécification du W3C, les barres de défilement font parties des dimensions de la page. Ainsi la barre de défilement vertical s'ajoute à la largeur du document tandis que la barre de défilement horizontal s'ajoute à la hauteur du document. Cependant tous les navigateurs n'ont pas adopté cette recommandation (Chrome par exemple) et tous n'ont pas opté pour la même taille de barre de défilement, ce qui mène à un développement plus difficile pour assurer une comptabilité sur tous les navigateurs.</p>
+</div>
+
+<p>Si on utilise une caractéristique média sans indiquer de valeur, la requête sera vérifiée tant que la valeur de cette caractéristique n'est pas nulle (ou <code>none</code> pour la spécification de niveau 4). Ainsi, la requête suivante permettra d'appliquer les styles qu'elle contient si l'appareil peut afficher des couleurs :</p>
+
+<pre class="brush: css notranslate">@media (color) { ... }</pre>
+
+<p>Si une caractéristique ne s'applique pas à l'appareil, les expressions utilisant cette caractéristique renverront <code>false</code>. Ainsi, la requête suivante aura toujours la valeur <code>false</code> car aucun appareil de synthèse vocale ne possède de caractéristique relative à ses proportions d'écran :</p>
+
+<pre class="brush: css notranslate">@media speech and (aspect-ratio: 11/5) { ... }</pre>
+
+<p>Pour plus d'exemples, voir les pages de référence de chacune de ces caractéristiques depuis <a href="#caractéristiques">le tableau ci-dessus</a>.</p>
+
+<h2 id="Créer_des_requêtes_média_complexes">Créer des requêtes média complexes</h2>
+
+<p>Il est parfois nécessaire d'avoir une requête qui repose sur plusieurs conditions. Pour cela, on peut utiiliser les opérateurs logiques : <code>not</code>, <code>and</code>, <code>only</code> et la virgule (<code>,</code>) afin de combiner plusieurs requêtes média.</p>
+
+<p>Dans l'exemple précédent, on a utilisé l'opérateur <code>and</code> afin de combiner un type de média et une caractéristique média. Cet opérateur peut également servir à assembler plusieurs requêtes média pour en former la conjonction logique. L'opérateur <code>not</code> permet d'obtenir la négation d'une requête média tandis que l'opérateur <code>only</code> empêche les anciens navigateurs d'appliquer les styles qu'une requête contient.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Dans la plupart des cas, le type de média <code>all</code> est utilisé par défaut si aucun autre type n'est fourni. Toutefois, lorsqu'on utilise les opérateurs <code>not</code> ou <code>only</code>, il est nécessaire de fournir un type de média explicite.</p>
+</div>
+
+<h3 id="Combiner_plusieurs_types_ou_caractéristiques">Combiner plusieurs types ou caractéristiques</h3>
+
+<p>Le mot-clé <code>and</code> permet de combiner une caractéristique média avec un type de média ou avec d'autres caractéristiques média. L'exemple suivant permet de restreindre l'application d'un style aux appareils orientés en mode paysage et dont la largeur mesure au moins 30ems :</p>
+
+<pre class="brush: css notranslate">@media (min-width: 30em) and (orientation: landscape) { ... }</pre>
+
+<p>Si on souhaite restreindre ces règles aux écrans, on pourra ajouter une clause avec le type de média <code>screen</code> :</p>
+
+<pre class="brush: css notranslate">@media screen and (min-width: 30em) and (orientation: landscape) { ... }</pre>
+
+<h3 id="Tester_plusieurs_requêtes">Tester plusieurs requêtes</h3>
+
+<p>La virgule peut être utilisée afin de créer une disjonction (un OU logique) sur différentes clauses (types de média, caractéristiques ou états). Dans l'exemple qui suit, les styles de la requête sont appliqués si l'appareil possède une hauteur supérieure ou égale à 680 pixels ou si l'écran est en mode portrait :</p>
+
+<pre class="brush: css notranslate">@media (min-height: 680px), screen and (orientation: portrait) { ... }</pre>
+
+<p>Avec cet exemple, si l'utilisateur utilise une imprimante et que la page mesure 800 pixels de haut, la requête média aurait été vérifiée. Il en aurait été de même si l'utilisateur avait utilisé un smartphone avec une zone d'affichage haute de 480 pixels en portrait car la deuxième clause aurait renvoyée <code>true</code>.</p>
+
+<h3 id="Opérer_une_négation">Opérer une négation</h3>
+
+<p>Le mot-clé <code>not</code> permet d'inverser le résultat d'une requête. Il inversera uniquement la requête sur laquelle il est appliqué (et non la liste des requêtes s'il est utilisé au sein de requêtes séparées par des virgules). Le mot-clé <code>not</code> ne peut pas être utilisé afin d'inverser une caractéristique média, il peut uniquement être utilisé pour une requête média complète. Dans la requête qui suit, l'opérateur <code>not</code> est évalué en dernier :</p>
+
+<pre class="brush: css notranslate">@media not all and (monochrome) { ... }
+</pre>
+
+<p>La requête précédente est donc équivalente à :</p>
+
+<pre class="brush: css notranslate">@media not (all and (monochrome)) { ... }
+</pre>
+
+<p>Mais elle n'est pas équivalente à :</p>
+
+<pre class="brush: css example-bad notranslate">@media (not all) and (monochrome) { ... }</pre>
+
+<p>De même :</p>
+
+<pre class="brush: css notranslate">@media not screen and (color), print and (color) { ... }
+</pre>
+
+<p>sera évaluée comme :</p>
+
+<pre class="brush: css notranslate">@media (not (screen and (color))), print and (color) { ... }</pre>
+
+<h3 id="Améliorer_la_compatibilité_avec_les_anciens_navigateurs">Améliorer la compatibilité avec les anciens navigateurs</h3>
+
+<p>Le mot-clé <code>only</code> empêche les navigateurs qui ne prennent pas en charge les requêtes média avec les caractéristiques média d'appliquer les styles concernés. Cet opérateur n'a aucun effet pour les navigateurs modernes<em>.</em></p>
+
+<pre class="brush: css notranslate">@media only screen and (color) { ... }
+</pre>
+
+<h2 id="Améliorations_syntaxiques_avec_la_spécification_de_niveau_4">Améliorations syntaxiques avec la spécification de niveau 4</h2>
+
+<p>La spécification de niveau 4 pour les requêtes média ajoute des améliorations syntaxiques pour les requêtes média qui portent sur un intervalle (par exemple les critères de largeur et de hauteur). On peut par exemple utiliser le préfixe <code>max-</code> pour les largeurs et écrire :</p>
+
+<pre class="brush: css notranslate">@media (max-width: 30em) { ... }</pre>
+
+<p>Avec les requêtes média de niveau 4, on peut écrire :</p>
+
+<pre class="brush: css notranslate">@media (width &lt;= 30em) { ... }</pre>
+
+<p>Si on utilise <code>min-</code> et <code>max-</code> conjointement, on peut tester l'appartenance d'une valeur à un intervalle :</p>
+
+<pre class="brush: css notranslate">@media (min-width: 30em) and (max-width: 50em) { ... }</pre>
+
+<p>Avec les requêtes média de niveau 4, on peut écrire :</p>
+
+<pre class="brush: css notranslate">@media (30em &lt;= width &lt;= 50em ) { ... }
+</pre>
+
+<p>Les requêtes média de niveau 4 permettent également d'utiliser une logique booléenne avec les opérateurs <code>and</code>, <code>not</code> et <code>or</code>.</p>
+
+<h3 id="Tester_labsence_dune_caractéristique_avec_not">Tester l'absence d'une caractéristique avec <code>not</code></h3>
+
+<p>On peut utiliser l'opérateur <code>not()</code> autour d'une caractéristique média afin de tester l'absence de cette caractéristique. Ainsi, on peut <code>not(hover)</code> pour cibler les appareils qui ne permettent pas le survol d'un élément :</p>
+
+<pre class="brush: css notranslate">@media (not(hover)) { ... }</pre>
+
+<h3 id="Tester_plusieurs_caractéristiques_avec_or">Tester plusieurs caractéristiques avec <code>or</code></h3>
+
+<p>Il est possible d'utiliser l'opérateur <code>or</code> pour tester une correspondance sur plus d'une caractéristique. Dans l'exemple suivant, on cible les appareils qui ont un affichage monochrome (<code>not (color)</code>) ou qui permettent de survoler les éléments (<code>hover</code>) :</p>
+
+<pre class="brush: css notranslate">@media (not (color)) or (hover) { ... }
+</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Requêtes_média/Tester_les_media_queries">Tester des requêtes média en script</a></li>
+ <li><a href="http://davidwalsh.name/animate-media-queries">Utiliser les animations CSS entre les requêtes média (en anglais)</a></li>
+ <li><a href="/fr/docs/Web/CSS/Extensions_Mozilla#Caractéristiques">Les caractéristiques média spécifiques à Mozilla</a></li>
+ <li><a href="/fr/docs/Web/CSS/Reference/Extensions_WebKit#Caractéristiques_média">Les caractéristiques média spécifiques à WebKit</a></li>
+</ul>
diff --git a/files/fr/web/css/resize/index.html b/files/fr/web/css/resize/index.html
new file mode 100644
index 0000000000..3b215af7ef
--- /dev/null
+++ b/files/fr/web/css/resize/index.html
@@ -0,0 +1,153 @@
+---
+title: resize
+slug: Web/CSS/resize
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/resize
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>resize</code></strong> permet de contrôler le caractère redimensionnable d'un élément et notamment la direction dans laquelle celui-ci peut être redimensionné.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/resize.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+resize: none;
+resize: both;
+resize: horizontal;
+resize: vertical;
+resize: block;
+resize: inline;
+
+/* Valeurs globales */
+resize: inherit;
+resize: initial;
+resize: unset;
+</pre>
+
+<p>La propriété <code>resize</code> peut être définie avec l'un des mots-clés suivants.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>L'élément n'offre aucune méthode à l'utilisateur pour que celui-ci le redimensionne.</dd>
+ <dt><code>both</code></dt>
+ <dd>L'élément affiche un mécanisme afin que l'utilisateur puisse le redimensionner, horizontalement et verticalement.</dd>
+ <dt><code>horizontal</code></dt>
+ <dd>L'élément affiche un mécanisme afin que l'utilisateur puisse le redimensionner horizontalement (pas de redimensionnement vertical).</dd>
+ <dt><code>vertical</code></dt>
+ <dd>L'élément affiche un mécanisme afin que l'utilisateur puisse le redimensionner verticalement (pas de redimensionnement horizontal).</dd>
+ <dt><code>block</code> {{experimental_inline}}</dt>
+ <dd>Selon les valeurs de {{cssxref("writing-mode")}} et {{cssxref("direction")}}, l'élément affiche un mécanisme pour que l'utilisateur puisse le redimensionner, horizontalement ou verticalement, dans la direction du bloc.</dd>
+ <dt><code>inline</code> {{experimental_inline}}</dt>
+ <dd>Selon les valeurs de {{cssxref("writing-mode")}} et {{cssxref("direction")}}, l'élément affiche un mécanisme pour que l'utilisateur puisse le redimensionner, horizontalement ou verticalement, dans la direction du flux en ligne.</dd>
+</dl>
+
+<div class="note"><strong>Note :</strong> <code>resize</code> ne s'applique pas aux blocs dont la propriété {{cssxref("overflow")}} vaut <code>visible</code>.</div>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Désactiver_le_redimensionnement_des_éléments_textarea">Désactiver le redimensionnement des éléments <code>textarea</code></h3>
+
+<h4 id="CSS">CSS</h4>
+
+<p>Par défaut, les éléments {{HTMLElement("textarea")}} peuvent être redimensionnés. Ce comportement peut être modifié grâce à ce fragment CSS :</p>
+
+<pre class="brush: css">textarea.exemple {
+  resize: none;
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;textarea class="exemple"&gt;Saisir du texte ici.&lt;/textarea&gt;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Désactiver_le_redimensionnement_des_éléments_textarea","200","100")}}</p>
+
+<h3 id="Utiliser_resize_sur_des_éléments_quelconques">Utiliser <code>resize</code> sur des éléments quelconques</h3>
+
+<p>La propriété <code>resize</code> peut être utilisée afin de pouvoir redimensionner n'importe quel élément. Dans l'exemple qui suit, on a une boîte {{HTMLElement("div")}} redimensionnable qui contient un paragraphe (({{HTMLElement("p")}}) lui-même redimensionnable) :</p>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">.redimensionnable {
+  resize: both;
+  overflow: scroll;
+  border: 1px solid black;
+}
+
+div {
+  height: 300px;
+  width: 300px;
+}
+
+p {
+  height: 200px;
+  width: 200px;
+}
+</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;div class="redimensionnable"&gt;
+  &lt;p class="redimensionnable"&gt;
+    Ce paragraphe peut être redimensionné car la propriété
+    CSS resize vaut 'both' sur cet élément.
+  &lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Utiliser_resize_sur_des_éléments_quelconques","450","450")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Logical Properties', '#resize', 'resize')}}</td>
+   <td>{{Spec2('CSS Logical Properties')}}</td>
+   <td>Ajout des valeurs <code>block</code> et <code>inline</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#resize', 'resize')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.resize")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("textarea")}}</li>
+</ul>
diff --git a/files/fr/web/css/resolution/index.html b/files/fr/web/css/resolution/index.html
new file mode 100644
index 0000000000..4af732acb5
--- /dev/null
+++ b/files/fr/web/css/resolution/index.html
@@ -0,0 +1,127 @@
+---
+title: <resolution>
+slug: Web/CSS/resolution
+tags:
+  - CSS
+  - Reference
+  - Type
+translation_of: Web/CSS/resolution
+---
+<div>{{CSSRef}}</div>
+
+<p>Le type de donnée CSS <strong><code>&lt;resolution&gt;</code></strong>, utilisé dans les <em><a href="/fr/docs/Web/CSS/Media_queries">media queries</a></em>, décrit la densité de pixels d'un appareil d'affichage, c'est-à-dire sa résolution.</p>
+
+<p>Les dimensions font référence aux unités CSS (un pixel CSS, un centimètre CSS, etc.) et non aux dimensions physiques.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Une valeur de ce type sera composée d'un nombre (une valeur de type {{cssxref("&lt;number&gt;")}}) immédiatement suivi d'une unité de résolution (<code>dpi</code>, <code>dpcm</code>, …). Comme pour les autres dimensions CSS, il n'y a aucun espace entre la valeur numérique et l'unité.</p>
+
+<p>Bien que toutes les unités représentent la même chose pour la valeur <code>0</code>, l'unité ne peut être omise dans ce cas puisque ce n'est pas une donnée de type {{cssxref("&lt;length&gt;")}} : <code>0</code> est invalide et ne représente pas <code>0dpi</code>, <code>0dpcm</code>, ni <code>0dppx</code>.</p>
+
+<h3 id="Unités">Unités</h3>
+
+<dl>
+ <dt><code><a name="dpi">dpi</a></code></dt>
+ <dd>Cette unité représente le nombre de <a href="https://fr.wikipedia.org/wiki/Point_par_pouce">points par pouce</a>. Un écran compte habituellement 72 ou 96 ppi (dpi), tandis qu'un document imprimé en compte généralement un nombre beaucoup plus élevé. Puisque 1 pouce équivaut à 2,54 cm, <code>1 dpi ≈ 0,39 dpcm</code>.</dd>
+ <dt><code><a name="dpcm">dpcm</a></code></dt>
+ <dd>Cette unité représente le nombre de <a href="https://fr.wikipedia.org/wiki/Point_par_pouce#Tableau_de_conversion">points par centimètre</a>. Puisque 1 pouce équivaut à 2.54 cm, <code>1dpcm ≈ 2,54 dpi</code>.</dd>
+ <dt><code><a name="dppx">dppx</a></code></dt>
+ <dd>Cette unité représente le nombre de points par unité CSS <code>px</code>. Puisque le ratio entre les unités CSS <code class="css">in</code> et CSS <code class="css">px</code> vaut 1:96, <code class="css">1 dppx</code> est équivalent à <code class="css">96 dpi</code>, ce qui correspond à la résolution par défaut des images affichées en CSS tel que défini par {{cssxref("image-resolution")}}.</dd>
+ <dt><a id="x" name="x"><code>x</code></a></dt>
+ <dd>Un alias pour <code>dppx</code>.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> Bien que le nombre <code>0</code> représente la même mesure pour ces différentes unités. Si la valeur est écrite sans unité, elle sera considérée comme invalide. Autrement dit, <code>0</code> est invalide et ne représente pas <code>0dpi</code>, <code>0dpcm</code> ou <code>0dppx</code>.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Usage_correct">Usage correct</h3>
+
+<p>Voici quelques exemples d'utilisation correcte de données de type <code>&lt;resolution&gt;</code> :</p>
+
+<pre class="brush: css">96dpi                                              Usage correct : un {{cssxref("&lt;number&gt;")}} (ici un {{cssxref("&lt;integer&gt;")}}) suivi d'une unité.
+@media print and (min-resolution: 300dpi) { ... }  Usage correct dans le contexte d'une <a href="/fr/docs/CSS/Media_queries">media query</a>.
+</pre>
+
+<h3 id="Usages_incorrects">Usages incorrects</h3>
+
+<pre class="brush: css">72 dpi    Incorrect : les espaces ne sont pas acceptés entre le {{cssxref("&lt;number&gt;")}} et l'unité.
+ten dpi   Incorrect : seules des expressions numériques sont acceptées.
+0         Incorrect : l'unité ne peut être omise que pour l'expression de la valeur 0 de type {{cssxref("&lt;length&gt;")}}.
+</pre>
+
+<h3 id="Exemple_appliqué">Exemple appliqué</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">/* Saurez-vous trouver votre résolution en dpi */
+/* via l'exemple live ?                        */
+@media screen and (min-resolution: 100dpi) {
+  .exemple {
+    background-color: palegreen;
+  }
+}
+
+@media screen and (max-resolution: 99dpi) {
+  .exemple {
+    background-color: orange;
+  }
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p class="exemple"&gt;
+  À ces mots le Chapelier ouvrit de grands yeux ; mais
+  il se contenta de dire : « Pourquoi une pie
+  ressemble-t-elle à un pupitre ? »
+&lt;/p&gt;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemple_appliqué","200","200")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Values', '#resolution', '&lt;resolution&gt;')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td>Ajout de l'unité <code>x</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#resolution', '&lt;resolution&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Ajout de l'unité <code>dppx</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#resolution', '&lt;resolution&gt;')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.types.resolution")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Media_queries">Les <em>media queries</em> CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/@media/resolution">La caractéristique média <code>resolution</code></a></li>
+</ul>
diff --git a/files/fr/web/css/revert/index.html b/files/fr/web/css/revert/index.html
new file mode 100644
index 0000000000..2ddf16c775
--- /dev/null
+++ b/files/fr/web/css/revert/index.html
@@ -0,0 +1,200 @@
+---
+title: revert
+slug: Web/CSS/revert
+tags:
+  - CSS
+  - Cascade
+  - Mot-clé
+  - Reference
+translation_of: Web/CSS/revert
+---
+<div>{{CSSRef}}</div>
+
+<p>Le mot-clé <strong><code>revert</code></strong> permet de <em>remonter</em> la cascade afin que la propriété puisse prendre la valeur qui aurait été utilisée sans mise en forme particulière (la valeur qu'elle aurait eu sans mise en forme appliquée par la feuille de style de l'auteur, de l'utilisateur ou de l'agent utilisateur). Ainsi, si la propriété hérite de son parent, elle prendra la valeur héritée et sinon la valeur par défaut de l'agent utilisateur (ou de la feuille de style utilisateur).</p>
+
+<p>Cette valeur peut être utilisée pour n'importe quelle propriété CSS, y compris la propriété raccourcie {{cssxref("all")}}.</p>
+
+<p>La remontée de la cascade sera plus ou moins prononcée selon l'endroit où est utilisé <code>revert</code> :</p>
+
+<ul>
+ <li>Si <code>revert</code> est utilisé dans une feuille de style d'un site, ce sera la valeur définie dans la feuille de style de l'utilisateur qui sera utilisée ou celle de l'agent utilisateur par défaut sinon.</li>
+ <li>Si <code>revert</code> est utilisé dans une feuille de style utilisateur ou si le style a été appliqué par l'utilisateur, <code>revert</code> entraînera l'utilisation de la valeur par défaut de l'agent utilisateur.</li>
+ <li>Si <code>revert</code> est utilisé comme style par défaut de l'agent utilisateur, il aura un comportement équivalent à {{cssxref("unset")}}</li>
+</ul>
+
+<p>Le mot-clé <code>revert</code> fonctionne comme <code>unset</code> pour de nombreux cas. Les seules différences observables se produisent quand les valeurs sont définies par le navigateur ou dans une feuille de style utilisateur.</p>
+
+<p><code>revert</code> n'aura pas d'effet sur les éléments fils de l'élément ciblé (mais supprimera l'effet d'une règle du parent qui s'appliquerait indirectement aux enfants).</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> <code>revert</code> est une simple valeur, il est toujours possible de la surcharger par une autre avec une règle d'une <a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/La_cascade_et_l_héritage#Spécificité">spécificité</a> supérieure.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Le mot-clé <code>revert</code> est différent de {{cssxref("initial")}} et ne doit pas être confondu avec ce dernier. {{cssxref("initial")}} utilise <a href="/fr/docs/Web/CSS/Valeur_initiale">la valeur initiale</a>, définie pour chaque propriété par les spécifications CSS. En revanche, les feuilles de style des agents utilisateurs définissent des valeurs par défaut selon les sélecteurs CSS. Par exemple, <a href="/fr/docs/Web/CSS/Valeur_initiale">la valeur initiale</a> de {{cssxref("display")}} est <code>inline</code> mais un agent utilisateur pourra définir les valeurs par défaut suivante dans sa feuille de style : <code>block</code> pour {{HTMLElement("div")}}, <code>table</code> pour {{HTMLElement("table")}} etc.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;section&gt;
+  &lt;p&gt;Voici une section !&lt;/p&gt;
+
+  &lt;aside class="widget"&gt;
+    &lt;p&gt;Et un petit widget.&lt;/p&gt;
+  &lt;/aside&gt;
+&lt;/section&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">section p {
+  color: blue;
+  font-family: sans-serif;
+  font-weight: bold;
+}
+
+.widget p {
+  all: revert;
+}</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Exemple_simple')}}</p>
+
+<h3 id="revert_et_unset"><code>revert</code> et <code>unset</code></h3>
+
+<p>Bien que <code>revert</code> et <code>unset</code> soient semblables, il y a quelques différences pour certaines propriétés de certains éléments.</p>
+
+<p>Dans l'exemple qui suit, on indique une valeur spécifique pour <code>font-weight</code> au niveau de la feuille de style globale sur laquelle on revient avec <code>unset</code> et <code>revert</code>. <code>unset</code> conservera un texte normal car c'est la valeur initiale pour <code>font-weight</code> tandis que <code>revert</code> rendra le texte en gras car c'est la valeur par défaut pour les titres pour la plupart des navigateurs.</p>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">h3 {
+  font-weight: normal;
+  color: blue;
+}</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;h3 style="font-weight: unset; color: unset;"&gt;
+  Ceci aura toujours font-weight: normal mais color: black
+&lt;/h3&gt;
+&lt;p&gt;
+  Juste un peu de texte
+&lt;/p&gt;
+&lt;h3 style="font-weight: revert; color: revert;"&gt;
+  Ceci devrait avoir font-weight: bold (la valeur originale)
+  et color: black
+&lt;/h3&gt;
+&lt;p&gt;
+ Juste un peu de texte
+&lt;/p&gt;</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample('revert_et_unset')}}</p>
+
+<h3 id="all"><code>all</code></h3>
+
+<p>Revenir sur toutes les valeurs peut s'avérer utile lorsqu'on veut annuler l'effet de modifications lourdes. Si on poursuit avec l'exemple précédent, plutôt que de revenir séparément sur <code>font-weight</code> et <code>color</code>, on utilise <code>all</code> à la place.</p>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css">h3 {
+  font-weight: normal;
+  color: blue;
+  border-bottom: 1px solid grey;
+}</pre>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;h3&gt;
+  Un style spécifique
+&lt;/h3&gt;
+&lt;p&gt;
+  Juste un peu de texte
+&lt;/p&gt;
+&lt;h3 style="all: revert"&gt;
+  Retour aux réglages par défaut pour toutes les propriétés
+&lt;/h3&gt;
+&lt;p&gt;
+  Juste un peu de texte
+&lt;/p&gt;</pre>
+
+<h4 id="Résultat_3">Résultat</h4>
+
+<p>{{EmbedLiveSample('all')}}</p>
+
+<h3 id="Revenir_sur_une_propriété_du_parent">Revenir sur une propriété du parent</h3>
+
+<p>Utiliser <code>revert</code> annule la valeur d'une propriété pour le seul élément ciblé. Pour illustrer ce principe, nous utiliserons une couleur verte pour une section et rouge pour un paragraphe.</p>
+
+<h4 id="CSS_4">CSS</h4>
+
+<pre class="brush: css">section {
+  color: darkgreen;
+}
+p {
+  color: red;
+}
+section.with-revert {
+  color: revert;
+}
+</pre>
+
+<h4 id="HTML_4">HTML</h4>
+
+<pre class="brush: html">&lt;section&gt;
+  &lt;h3&gt;Ce texte sera vert foncé&lt;/h3&gt;
+  &lt;p&gt;Ce texte sera rouge.&lt;/p&gt;
+  Ce texte sera aussi vert.
+&lt;/section&gt;
+&lt;section class="with-revert"&gt;
+  &lt;h3&gt;Ce texte sera noir&lt;/h3&gt;
+  &lt;p&gt;Ce texte sera rouge.&lt;/p&gt;
+  Ce texte sera aussi noir.
+&lt;/section&gt;</pre>
+
+<p>On voit ici que le paragraphe reste en rouge malgré l'utilisation de <code>revert</code> pour la section. On voit également que le titre et le nœud texte de la deuxième section sont en noir : comme si <code>section { color: darkgreen }</code> n'existait pas pour cette section.</p>
+
+<h4 id="Résultat_4">Résultat</h4>
+
+<p>{{EmbedLiveSample('Revenir_sur_une_propriété_du_parent')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Cascade', '#default', 'revert')}}</td>
+   <td>{{Spec2('CSS4 Cascade')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.types.global_keywords.revert")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("initial")}}</li>
+ <li>{{cssxref("inherit")}}</li>
+ <li>{{cssxref("unset")}}</li>
+ <li>La propriété {{cssxref("all")}} permet de réinitialiser l'ensemble des propriétés avec leurs valeurs initiales, héritées, annulées ou par défaut.</li>
+</ul>
diff --git a/files/fr/web/css/right/index.html b/files/fr/web/css/right/index.html
new file mode 100644
index 0000000000..f0dc4cbc85
--- /dev/null
+++ b/files/fr/web/css/right/index.html
@@ -0,0 +1,152 @@
+---
+title: right
+slug: Web/CSS/right
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/right
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>right</code></strong> définit, en partie, la position des éléments positionnés. La propriété <code>right</code> n'a aucun effet sur les éléments non-positionnés.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/right.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>L'effet de la propriété <code>right</code> dépend de la façon dont l'élément est positionné (c'est-à-dire de la valeur de la propriété {{cssxref("position")}}) :</p>
+
+<ul>
+ <li>Quand <code>position</code> vaut <code>absolute</code> ou <code>fixed</code>, <code>right</code> indique la distance entre le bord droit de l'élément et le bord droit du bloc englobant.</li>
+ <li>Quand <code>position</code> vaut <code>relative</code>, <code>right</code> indique la distance de laquelle le bord droit de l'élément est décalé vers la gauche par rapport à sa position normale.</li>
+ <li>Quand <code>position</code> vaut <code>sticky</code>, <code>right</code> se comporte comme <code>relative</code> lorsque l'élément est à l'intérieur de la zone d'affichage (<em>viewport</em>) et comme <code>fixed</code> lorsque l'élément est en dehors de la zone d'affichage.</li>
+ <li>Quand <code>position</code> vaut <code>static</code>, <code>right</code> n'a aucun effet.</li>
+</ul>
+
+<p>Lorsque les propriétés <code>right</code> et {{cssxref("left")}} sont définies toutes les deux et que l'élément ne peut pas s'étendre afin de satisfaire ces deux contraintes, la position de l'élément est <em>sur-définie.</em> Dans ce cas, la valeur de {{cssxref("left")}} est prioritaire lorsque le contenant est disposé en lecture de gauche à droite (la valeur calculée de <code>right</code> sera <code>-left</code>), et la valeur de <code>right</code> est prioritaire lorsque le contenant est disposé en lecture de droite à gauche (la valeur calculée de {{cssxref("left")}} sera <code>-right</code>).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css  no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+right: 3px;
+right: 2.4em;
+
+/* Valeurs de pourcentage */
+/* Type &lt;percentage&gt;      */
+right: 10%;
+
+/* Valeur avec un mot-clé */
+right: auto;
+
+/* Valeurs globales */
+right: inherit;
+right: initial;
+right: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;length&gt;")}} qui peut être négative, positive ou nulle et représente :
+ <ul>
+  <li>pour les éléments à positionnement absolu : la distance jusqu'au bord droit du bloc englobant.</li>
+  <li>pour les éléments à positionnement relatif : le décalage à droite que l'élément subit par rapport à sa position dans le flux normal s'il n'était pas positionné.</li>
+ </ul>
+ </dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;percentage&gt;")}} représentant le pourcentage de la largeur du bloc englobant.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Un mot-clé qui représente :
+ <ul>
+  <li>pour les éléments à positionnement absolu : la position de l'élément fondé sur la propriété {{cssxref("left")}} et considère <code>width: auto</code> comme une largeur fondée sur le contenu ; ou, si <code>left</code> vaut aussi <code>auto</code>, l'élément serait positionné horizontalement comme s'il avait été un élément statique.</li>
+  <li>pour les éléments à positionnement relatif : le décalage à droite de l'élément par rapport à sa position originale fondé sur la propriété {{cssxref("left")}} ou, si <code>left</code> vaut également <code>auto</code>, aucun décalage.</li>
+ </ul>
+ </dd>
+ <dt><code>inherit</code></dt>
+ <dd>Un mot-clé indiquant que la valeur est identique à la valeur calculée de l'élément parent (qui peut ne pas être sont bloc contenant). Cette valeur calculée est manipulée comme si elle était de type {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;percentage&gt;")}} ou comme si elle était le mot-clé <code>auto</code>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight:[16]">#exemple_3 {
+  width: 100px;
+  height: 100px;
+  background-color: #FFC7E4;
+  position: relative;
+  top: 20px;
+  left: 20px;
+}
+
+#exemple_4 {
+  width: 100px;
+  height: 100px;
+  background-color: #FFD7C2;
+  position: absolute;
+  bottom: 10px;
+  right: 20px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="exemple_3"&gt;Exemple 3&lt;/div&gt;
+&lt;div id="exemple_4"&gt;Exemple 4&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', 500, 220)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'right')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Définit <code>right</code> comme pouvant être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Positioning', '#propdef-right', 'right')}}</td>
+   <td>{{Spec2('CSS3 Positioning')}}</td>
+   <td>Description du comportement pour le comportement adhérent (<em>sticky</em>).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#propdef-right', 'right')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.right")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("position")}},</li>
+ <li>{{cssxref("left")}},</li>
+ <li>{{cssxref("top")}},</li>
+ <li>{{cssxref("bottom")}}</li>
+</ul>
diff --git a/files/fr/web/css/rotate/index.html b/files/fr/web/css/rotate/index.html
new file mode 100644
index 0000000000..66b5d0819b
--- /dev/null
+++ b/files/fr/web/css/rotate/index.html
@@ -0,0 +1,126 @@
+---
+title: rotate
+slug: Web/CSS/rotate
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/rotate
+---
+<div>{{CSSRef}}{{seecompattable}}</div>
+
+<p>La propriété <strong><code>rotate</code></strong> permet d'indiquer des rotations individuellement et indépendamment de la propriété {{cssxref("transform")}}. Cela peut être utile pour la construction d'une interface utilisateur et évite d'avoir à se souvenir de l'ordre exact des fonctions de transformations à indiquer pour <code>transform</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs avec un mot-clé */
+rotate: none;
+
+/* Valeur angulaire */
+rotate: 90deg;
+rotate: 0.25turn;
+rotate: 1.57rad;
+
+/* Un axe x, y, z et l'angle associé */
+rotate: x 90deg;
+rotate: y 0.25turn;
+rotate: z 1.57rad;
+
+/* Un vector et l'angle associé */
+rotate: 1 1 1 90deg;</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt>Valeur angulaire</dt>
+ <dd>Une valeur {{cssxref("&lt;angle&gt;")}} qui indique l'angle à utiliser, autour de l'axe Z, pour tourner les éléments. Cela est équivalent à la fonction <code>rotate()</code>.</dd>
+ <dt>Le nom de l'axe et l'angle associé</dt>
+ <dd>Le nom de l'axe par rapport auquel on souhaite effectuer la rotation (<code>"x"</code>, "<code>y</code>" ou "<code>z"</code>), puis une valeur {{cssxref("&lt;angle&gt;")}} qui indique l'angle à appliquer pour la rotation. Cela est équivalent à l'une des fonctions <code>rotateX()</code>/<code>rotateY()</code>/<code>rotateZ()</code>.</dd>
+ <dt>Un vecteur et l'angle associé</dt>
+ <dd>Trois nombres (valeurs {{cssxref("&lt;number&gt;")}}) qui représentent une vecteur centré sur l'origine qui définit la ligne autour de laquelle on souhaite faire tourner l'élément puis une valeur {{cssxref("&lt;angle&gt;")}} qui indique l'angle de rotation. Cela est équivalent à la fonction <code>rotate3d()</code>.</dd>
+ <dt id="none"><code>none</code></dt>
+ <dd>Cette valeur indique qu'aucune rotation ne devrait être appliquée.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="rotate"&gt;Rotation&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">* {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: sans-serif;
+}
+
+div {
+  width: 150px;
+  margin: 0 auto;
+}
+
+p {
+  padding: 10px 5px;
+  border: 3px solid black;
+  border-radius: 20px;
+  width: 150px;
+  font-size: 1.2rem;
+  text-align: center;
+}
+
+.rotate {
+  transition: rotate 1s;
+}
+
+div:hover .rotate {
+  rotate: 1 -0.5 1 180deg;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Transforms 2', '#individual-transforms', 'individual transforms')}}</td>
+   <td>{{Spec2('CSS Transforms 2')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.rotate")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref('translate')}}</li>
+ <li>{{cssxref('scale')}}</li>
+ <li>{{cssxref('transform')}}</li>
+</ul>
diff --git a/files/fr/web/css/row-gap/index.html b/files/fr/web/css/row-gap/index.html
new file mode 100644
index 0000000000..b4f88ab37e
--- /dev/null
+++ b/files/fr/web/css/row-gap/index.html
@@ -0,0 +1,169 @@
+---
+title: row-gap (grid-row-gap)
+slug: Web/CSS/row-gap
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/row-gap
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>row-gap</code></strong> définit la taille des gouttières entre les lignes d'un élément.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/grid-row-gap.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note">
+<p><strong>Note :</strong> La propriété {{cssxref("grid-row-gap")}} a d'abord été définie avec le module de spécification <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a>. Cette propriété préfixée a ensuite été remplacée par <code>row-gap</code> dans le module <a href="/fr/docs/Web/CSS/CSS_Box_Alignment">CSS Alignment</a> afin d'être généralisée à d'autres modes de disposition. Toutefois, à des fins de compatibilité envers les navigateurs qui n'implémentent pas encore la version non-préfixée, mieux vaut utiliser les deux versions.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;largeur&gt;      */
+row-gap: 20px;
+row-gap: 1em;
+row-gap: 3vmin;
+row-gap: 0.5cm;
+
+/* Valeurs proportionnelles */
+/* Type &lt;pourcentage&gt; */
+row-gap: 10%;
+
+/* Valeurs globales */
+row-gap: inherit;
+row-gap: initial;
+row-gap: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;pourcentage-largeur&gt;</code></dt>
+ <dd>La largeur de la « gouttière » placée entre les lignes de la grille. Les valeurs exprimées en pourcentages sont relatives aux dimensions de l'élément.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Disposition_flexible">Disposition flexible</h3>
+
+<p>{{SeeCompatTable}}</p>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css; highlight[4]">#flexbox {
+  display: flex;
+  flex-wrap: wrap;
+  width: 300px;
+  row-gap: 20px;
+}
+
+#flexbox &gt; div {
+  background-color: lime;
+  flex: 1 1 auto;
+  width: 100px;
+  height: 50px;
+}</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div id="flexbox"&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Disposition_flexible', "auto", "120px")}}</p>
+
+<h3 id="Disposition_sur_une_grille">Disposition sur une grille</h3>
+
+<h4 id="CSS_2">CSS</h4>
+
+<div class="hidden">
+<pre class="brush: css">#grid {
+  grid-row-gap: 20px;
+}
+</pre>
+</div>
+
+<pre class="brush: css; highlight[6]">#grid {
+  display: grid;
+  height: 200px;
+  grid-template-columns: 200px;
+  grid-template-rows: repeat(3, 1fr);
+  row-gap: 20px;
+}
+
+#grid &gt; div {
+  background-color: lime;
+}</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;div id="grid"&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample('Disposition_sur_une_grille', 'auto', 120)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Box Alignment", "#propdef-row-gap", "row-gap")}}</td>
+   <td>{{Spec2("CSS3 Box Alignment")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<h3 id="Prise_en_charge_pour_les_dispositions_flexibles">Prise en charge pour les dispositions flexibles</h3>
+
+<p>{{Compat("css.properties.row-gap.flex_context")}}</p>
+
+<h3 id="Prise_en_charge_pour_les_grilles">Prise en charge pour les grilles</h3>
+
+<p>{{Compat("css.properties.row-gap.grid_context")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les versions sans préfixe des propriétés :
+  <ul>
+   <li>{{cssxref("column-gap")}}</li>
+   <li>{{cssxref("gap")}}</li>
+  </ul>
+ </li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base#Les_gouttières">Guide : les concepts de base : les gouttières</a></li>
+ <li><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Guide : les concepts de base des boîtes flexibles (flexbox)</a></li>
+</ul>
diff --git a/files/fr/web/css/ruby-align/index.html b/files/fr/web/css/ruby-align/index.html
new file mode 100644
index 0000000000..589f6a46a6
--- /dev/null
+++ b/files/fr/web/css/ruby-align/index.html
@@ -0,0 +1,146 @@
+---
+title: ruby-align
+slug: Web/CSS/ruby-align
+tags:
+  - CSS
+  - Propriété
+  - Reference
+  - Ruby
+translation_of: Web/CSS/ruby-align
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <code><strong>ruby-align</strong></code> définit la façon dont les éléments ruby sont distribués autour du texte de base.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeur avec un mot-clé */
+ruby-align: start;
+ruby-align: center;
+ruby-align: space-between;
+ruby-align: space-around;
+
+/* Valeurs globales */
+ruby-align: inherit;
+ruby-align: initial;
+ruby-align: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>start</code></dt>
+ <dd>Un mot-clé indiquant que les notations ruby sont alignées avec le début du texte de base.</dd>
+ <dt><code>center</code></dt>
+ <dd>Un mot-clé indiquant que les notations ruby sont alignées avec le milieu du texte de base.</dd>
+ <dt><code>space-between</code></dt>
+ <dd>Un mot-clé indiquant qu'un espace supplémentaire sera distribué entre les éléments ruby.</dd>
+ <dt><code>space-around</code></dt>
+ <dd>Un mot-clé indiquant qu'un espace supplémentaire sera distribué entre les éléments ruby et autour d'eux.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Ce fragment HTML sera affiché différemment en fonction des valeurs de <code>ruby-align</code> :</p>
+
+<pre class="brush: html">&lt;ruby&gt;
+  &lt;rb&gt;Un long texte pour tester&lt;/rb&gt;
+  &lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;Un petit ruby&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;
+&lt;/ruby&gt;
+</pre>
+
+<h3 id="Alignement_par_rapport_au_début_du_texte_de_base">Alignement par rapport au début du texte de base</h3>
+
+<pre class="brush: html" style="display: none;">&lt;ruby&gt;
+  &lt;rb&gt;This is a long text to check&lt;/rb&gt;
+  &lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;short ruby&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;
+&lt;/ruby&gt;
+</pre>
+
+<pre class="brush: css">ruby {
+  ruby-align: start;
+}</pre>
+
+<p>Avec ce CSS, on obtient le résultat suivant :</p>
+
+<p>{{EmbedLiveSample("Alignement_par_rapport_au_début_du_texte_de_base", 180, 40)}}</p>
+
+<h3 id="Alignement_par_rapport_au_centre">Alignement par rapport au centre</h3>
+
+<pre class="brush: html" style="display: none;">&lt;ruby&gt;
+  &lt;rb&gt;This is a long text to check&lt;/rb&gt;
+  &lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;short ruby&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;
+&lt;/ruby&gt;
+</pre>
+
+<pre class="brush: css">ruby {
+  ruby-align: center;
+}</pre>
+
+<p>Avec ce CSS, on obtient le résultat suivant :</p>
+
+<p>{{EmbedLiveSample("Alignement_par_rapport_au_centre", 180, 40)}}</p>
+
+<h3 id="Un_espace_supplémentaire_entre_les_éléments_ruby">Un espace supplémentaire entre les éléments ruby</h3>
+
+<pre class="brush: html" style="display: none;">&lt;ruby&gt;
+  &lt;rb&gt;This is a long text to check&lt;/rb&gt;
+  &lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;short ruby&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;
+&lt;/ruby&gt;
+</pre>
+
+<pre class="brush: css">ruby {
+  ruby-align: space-between;
+}</pre>
+
+<p>Avec ce CSS, on obtient le résultat suivant :</p>
+
+<p>{{EmbedLiveSample("Un_espace_supplémentaire_entre_les_éléments_ruby", 180, 40)}}</p>
+
+<h3 id="Un_espace_supplémentaire_entre_et_autour_des_éléments_ruby">Un espace supplémentaire entre et autour des éléments ruby</h3>
+
+<pre class="brush: css">ruby {
+  ruby-align: space-around;
+}</pre>
+
+<p>Avec ce CSS, on obtient le résultat suivant :</p>
+
+<p>{{EmbedLiveSample("Un_espace_supplémentaire_entre_et_autour_des_éléments_ruby", 180, 40)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Ruby', '#ruby-align-property', 'ruby-align')}}</td>
+   <td>{{Spec2('CSS3 Ruby')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.ruby-align")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les éléments HTML liés aux notations Ruby : {{HTMLElement("ruby")}}, {{HTMLElement("rt")}}, {{HTMLElement("rp")}} et {{HTMLElement("rtc")}}.</li>
+ <li>Les propriétés CSS liées aux notations Ruby : {{cssxref("ruby-position")}}, {{cssxref("ruby-merge")}}.</li>
+</ul>
diff --git a/files/fr/web/css/ruby-position/index.html b/files/fr/web/css/ruby-position/index.html
new file mode 100644
index 0000000000..bb0ec85090
--- /dev/null
+++ b/files/fr/web/css/ruby-position/index.html
@@ -0,0 +1,117 @@
+---
+title: ruby-position
+slug: Web/CSS/ruby-position
+tags:
+  - CSS
+  - Propriété
+  - Reference
+  - Ruby
+translation_of: Web/CSS/ruby-position
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <code><strong>ruby-position</strong></code> définit la position d'un élément ruby par rapport à son élément de base. L'élément ruby peut ainsi être positionné au-dessus de l'élément (<code>over</code>), en-dessous (<code>under</code>) ou entre les caractères, sur leur droite (<code>inter-character</code>).</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+ruby-position: over;
+ruby-position: under;
+ruby-position: inter-character;
+
+/* Valeurs globales */
+ruby-position: inherit;
+ruby-position: initial;
+ruby-position: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>over</code></dt>
+ <dd>Un mot-clé qui indique que les annotations ruby doivent être placée au-dessus du texte pour les scripts horizontaux et à droite pour les scripts verticaux.</dd>
+ <dt><code>under</code></dt>
+ <dd>Un mot-clé qui indique que les annotations ruby doivent être placés sous le texte pour les scripts horizontaux et à gauche pour les scripts verticaux.</dd>
+ <dt><code>inter-character</code></dt>
+ <dd>Un mot-clé qui indique que les annotations ruby doivent être placées entre les différents caractères.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Ce fragment HTML rendra un résultat différent pour chaque valeur de <code>ruby-position</code> :</p>
+
+<pre class="brush: html">&lt;ruby&gt;
+  &lt;rb&gt;超電磁砲&lt;/rb&gt;
+  &lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;レールガン&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;
+&lt;/ruby&gt;
+</pre>
+
+<h3 id="Au-dessus_du_texte">Au-dessus du texte</h3>
+
+<pre class="brush: html" style="display: none;">&lt;ruby&gt;
+  &lt;rb&gt;超電磁砲&lt;/rb&gt;
+  &lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;レールガン&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;
+&lt;/ruby&gt;
+</pre>
+
+<pre class="brush: css">ruby {
+    ruby-position:over;
+}</pre>
+
+<p>On obtiendra le résultat suivant :</p>
+
+<p>{{EmbedLiveSample("Au-dessus_du_texte", 100, 40)}}</p>
+
+<h3 id="En-dessous_du_texte">En-dessous du texte</h3>
+
+<pre class="brush: html" style="display: none;">&lt;ruby&gt;
+  &lt;rb&gt;超電磁砲&lt;/rb&gt;
+  &lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;レールガン&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;
+&lt;/ruby&gt;
+</pre>
+
+<pre class="brush: css">ruby {
+    ruby-position:under;
+}</pre>
+
+<p>On obtiendra le résultat suivant :</p>
+
+<p>{{EmbedLiveSample("En-dessous_du_texte", 100, 40)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Ruby', '#rubypos', 'ruby-position')}}</td>
+   <td>{{Spec2('CSS3 Ruby')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.ruby-position")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les éléments HTML à propos de Ruby : {{HTMLElement("ruby")}}, {{HTMLElement("rt")}}, {{HTMLElement("rp")}} et {{HTMLElement("rtc")}}.</li>
+ <li>Les propriétés CSS à propos de Ruby : {{cssxref("ruby-align")}}, {{cssxref("ruby-merge")}}.</li>
+</ul>
diff --git a/files/fr/web/css/règles_@/index.html b/files/fr/web/css/règles_@/index.html
new file mode 100644
index 0000000000..e298cf9028
--- /dev/null
+++ b/files/fr/web/css/règles_@/index.html
@@ -0,0 +1,82 @@
+---
+title: Règles @
+slug: Web/CSS/Règles_@
+tags:
+  - CSS
+  - Reference
+  - Règle @
+translation_of: Web/CSS/At-rule
+---
+<div>{{cssref}}</div>
+
+<p>Une <strong>règle @</strong> est une <a href="/fr/Apprendre/CSS/Introduction_à_CSS/La_syntaxe#Les_instructions_CSS">expression CSS</a> commençant par le symbole '@' (U+0040 COMMERCIAL AT), suivi d'un identifiant et qui contient tout ce qui se trouve jusqu'au prochain point-virgule, ';' (U+003B SEMICOLON), ou jusqu'au prochain <a href="/fr/Apprendre/CSS/Introduction_à_CSS/La_syntaxe#Les_blocs_CSS">bloc CSS</a> trouvé en premier.</p>
+
+<pre class="brush: css">/* Forme générique */
+@IDENTIFIANT (RÈGLE);
+
+/* Exemple : indiquer au navigateur d'utiliser */
+/* UTF-8 comme jeu de caractères */
+@charset "utf-8";</pre>
+
+<p>Il existe de nombreuses règles @, désignées par leurs identifiants, chacune ayant leur propre syntaxe :</p>
+
+<ul>
+ <li>{{cssxref("@charset")}} qui définit le jeu de caractères utilisé par la feuille de style.</li>
+ <li>{{cssxref("@import")}} qui indique au moteur de rendu d'inclure une feuille de style externe.</li>
+ <li>{{cssxref("@namespace")}} qui indique au moteur de rendu que le contenu doit être pris en compte comme s'il était préfixé pour un espace de noms XML.</li>
+ <li><strong><em>Les règles @ imbriquées</em></strong>. Ces règles sont un sous-ensemble des instructions imbriquées qui peuvent être utilisées au plus haut niveau de la feuille de style et aussi à l'intérieur de règles conditionnelles :
+  <ul>
+   <li>{{cssxref("@media")}} : une règle de groupe conditionnelle qui applique son contenu si l'appareil utilisé respecte les critères définis dans la « requête média » (ou <em>media query</em>).</li>
+   <li>{{cssxref("@supports")}} : une règle de groupe conditionnelle qui applique son contenu si le navigateur respecte une condition donnée (par exemple, si le navigateur supporte tel élément de syntaxe).</li>
+   <li>{{cssxref("@document")}} {{experimental_inline}} : une règle de groupe conditionnelle qui applique son contenu si le document sur lequel s'applique la feuille de style respecte une condition donnée <em>(cette règle a été reportée pour être incluse dans la spécification CSS de niveau 4)</em></li>
+   <li>{{cssxref("@page")}} : une règle qui décrit les modifications de disposition à appliquer lorsque le document doit être imprimé/paginé.</li>
+   <li>{{cssxref("@font-face")}} : une règle qui définit une police externe à télécharger.</li>
+   <li>{{cssxref("@keyframes")}} : une règle qui décrit les états des différentes étapes intermédiaires qui composent une animation CSS.</li>
+   <li>{{cssxref("@viewport")}} {{experimental_inline}} : une règle de groupe conditionnelle qui applique son contenu selon des critères relatifs à la zone d'affichage (<em>viewport</em>) <em>(cette règle est au stade du brouillon de travail).</em></li>
+   <li>{{cssxref("@counter-style")}} : une règle qui permet de définir des styles de compteur spécifiques qui ne font pas partie des styles prédéfinis (bien que la spécification ait atteint le niveau de <em>Candidate Recommendation</em>, cette fonctionnalité est uniquement implémentée dans Gecko au moment où nous écrivons ces lignes)</li>
+   <li>{{cssxref("@font-feature-values")}} (ainsi que <code>@swash</code>, <code>@ornaments</code>, <code>@annotation</code>, <code>@stylistic</code>, <code>@styleset</code> et <code>@character-variant</code>) : ces règles permettent de définir des noms d'usages pour la propriété {{cssxref("font-variant-alternates")}} qui permet d'activer différentes caractéristiques des polices OpenType (bien que la spécification ait atteint le niveau de <em>Candidate Recommendation</em>, cette fonctionnalité est uniquement implémentée dans Gecko au moment où nous écrivons ces lignes)</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Les_règles_de_groupe_conditionnelles">Les règles de groupe conditionnelles</h2>
+
+<p>Comme pour les différentes propriétés, chaque règle @ possède une syntaxe différente. Toutefois, on peut en regrouper certaines dans une catégorie : <strong>les règles de groupe conditionnelles</strong>. Ces instructions partagent une syntaxe commune et permettent d'inclure des <em>instructions imbriquées </em>(soit des ensembles de règles CSS soit des règles @ imbriquées). De plus, elles portent toutes une sémantique commune : toutes définissent une certaine condition qui, selon qu'elle est évaluée à vrai ou à faux, permettre d'appliquer les instructions imbriquées du groupe.</p>
+
+<p>Les règles de groupe conditionnelles définies par <a href="https://drafts.csswg.org/css-conditional-3/">la spécification de niveau 3 sur les règles CSS conditionnelles</a> sont :</p>
+
+<ul>
+ <li>{{cssxref("@media")}},</li>
+ <li>{{cssxref("@supports")}},</li>
+ <li>{{cssxref("@document")}} <em>(qui a été reporté à la spécification de niveau 4).</em></li>
+</ul>
+
+<p>Chaque groupe conditionnel peut également contenir des instructions imbriquées. Il peut donc y avoir un nombre indéterminé de niveaux d'imbrication.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Définition</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Conditional')}}</td>
+   <td>{{Spec2('CSS3 Conditional')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Compat', '#css-at-rules', 'CSS At-rules')}}</td>
+   <td>{{Spec2('Compat')}}</td>
+   <td>Standardisation de <code>@-webkit-keyframes</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Reference">La référence CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/scale/index.html b/files/fr/web/css/scale/index.html
new file mode 100644
index 0000000000..dfece432da
--- /dev/null
+++ b/files/fr/web/css/scale/index.html
@@ -0,0 +1,126 @@
+---
+title: scale
+slug: Web/CSS/scale
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/scale
+---
+<div>{{CSSRef}}{{seecompattable}}</div>
+
+<p>La propriété <strong><code>scale</code></strong> permet de mise à l'échelle individuellement et indépendamment de la propriété {{cssxref("transform")}}. Cela peut être utile pour la construction d'une interface utilisateur et évite d'avoir à se souvenir de l'ordre exact des fonctions de transformations à indiquer pour <code>transform</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs avec un mot-clé */
+scale: none;
+
+/* Une seule valeur */
+/* Les valeurs supérieures à 1 agrandissent l'élément */
+scale: 2;
+/* Les valeurs inférieures à 1 rétrécissent l'élément */
+scale: 0.5;
+
+/* Deux valeurs */
+scale: 2 0.5;
+
+/* Trois valeurs */
+scale: 2 0.5 2;</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt>Une seule valeur de longueur/pourcentage</dt>
+ <dd>Une longueur ou un pourcentage qui définit une mise à l'échelle en deux dimensions. Le facteur utilisé est le même pour l'axe X et l'axe Y. Cela est équivalent à la fonction <code>scale()</code> (mise à l'échelle sur deux dimensions) avec une seule valeur.</dd>
+ <dt>Deux valeurs de longueur/pourcentage</dt>
+ <dd>Deux longueurs ou pourcentages qui définissent respectivement les composantes horizontale et verticale de l'agrandissement/rétrécissement en deux dimensions. Cela est équivalent à la fonction <code>scale()</code> appelée avec ces deux arguments.</dd>
+ <dt>Trois valeurs de longueur/pourcentage</dt>
+ <dd>Trois longueurs ou pourcentages qui définissent respectivement les composantes horizontale, verticale et en profondeur de la mise à l'échelle sur trois dimensions. Cela est équivalent à la fonction <code>scale3d()</code> appelée avec ces trois arguments.</dd>
+ <dt id="none"><code>none</code></dt>
+ <dd>Cette valeur indique qu'aucune mise à l'échelle ne devrait être appliquée.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="scale"&gt;Scaling&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">* {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: sans-serif;
+}
+
+div {
+  width: 150px;
+  margin: 0 auto;
+}
+
+p {
+  padding: 10px 5px;
+  border: 3px solid black;
+  border-radius: 20px;
+  width: 150px;
+  font-size: 1.2rem;
+  text-align: center;
+}
+
+.scale {
+  transition: scale 1s;
+}
+
+div:hover .scale {
+  scale: 2 0.7;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Examples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Transforms 2', '#individual-transforms', 'individual transforms')}}</td>
+   <td>{{Spec2('CSS Transforms 2')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.scale")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref('translate')}}</li>
+ <li>{{cssxref('rotate')}}</li>
+ <li>{{cssxref('transform')}}</li>
+</ul>
diff --git a/files/fr/web/css/scroll-behavior/index.html b/files/fr/web/css/scroll-behavior/index.html
new file mode 100644
index 0000000000..75791bd495
--- /dev/null
+++ b/files/fr/web/css/scroll-behavior/index.html
@@ -0,0 +1,143 @@
+---
+title: scroll-behavior
+slug: Web/CSS/scroll-behavior
+tags:
+  - CSS
+  - CSSOM
+  - Propriété
+  - Reference
+translation_of: Web/CSS/scroll-behavior
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété<strong> <code>scroll-behavior</code></strong> définit le comportement du défilement pour une boîte de défilement lorsque celui-ci provient de la navigation ou des API CSSOM.</p>
+
+<p>Pour les autres défilements, appliqués par l'utilisateur, cette propriété n'a aucun impact. Lorsque cette propriété est définie sur l'élément racine, elle s'applique à la zone d'affichage (<em>viewport</em>).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-behavior.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Les agents utilisateur peuvent choisir d'ignorer cette propriété. Lorsque cette propriété est indiquée sur l'élément <code>body</code>, elle ne se propage pas à la zone d'affichage (<em>viewport</em>).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+scroll-behavior: auto;
+scroll-behavior: smooth;
+
+/* Valeurs globales */
+scroll-behavior: inherit;
+scroll-behavior: initial;
+scroll-behavior: unset;
+</pre>
+
+<p>La propriété <code>scroll-behavior</code> est définie avec l'un des mots-clés suivants.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>La boîte de défilement progresse de façon instantanée.</dd>
+ <dt><code>smooth</code></dt>
+ <dd>Le défilement est doux et utilise une fonction de minutage définie par l'agent utilisateur pendant une période définie par l'agent utilisateur. Les agents utilisateur doivent respecter les conventions de la plate-forme s'il y en a.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">a {
+  display: inline-block;
+  width: 50px;
+  text-decoration: none;
+}
+nav, scroll-container {
+  display: block;
+  margin: 0 auto;
+  text-align: center;
+}
+nav {
+  width: 339px;
+  padding: 5px;
+  border: 1px solid black;
+}
+scroll-container {
+  display: block;
+  width: 350px;
+  height: 200px;
+  overflow-y: scroll;
+  scroll-behavior: smooth;
+}
+scroll-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  font-size: 5em;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;nav&gt;
+  &lt;a href="#page-1"&gt;1&lt;/a&gt;
+  &lt;a href="#page-2"&gt;2&lt;/a&gt;
+  &lt;a href="#page-3"&gt;3&lt;/a&gt;
+&lt;/nav&gt;
+&lt;scroll-container&gt;
+  &lt;scroll-page id="page-1"&gt;1&lt;/scroll-page&gt;
+  &lt;scroll-page id="page-2"&gt;2&lt;/scroll-page&gt;
+  &lt;scroll-page id="page-3"&gt;3&lt;/scroll-page&gt;
+&lt;/scroll-container&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "100%", 250)}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p><a href="https://fr.wikipedia.org/wiki/Syst%C3%A8me_vestibulaire">Les troubles du système vestibulaires</a> peuvent être causés par la maladie, l'âge ou des blessures. Ces troubles entraînent des vertiges, fatigues et nausées suite aux mouvements.</p>
+
+<p>En utilisant la caractéristique média <code>prefers-reduced-motion</code>, on peut désactiver le défilement instantanné pour les utilisateurs qui ont paramétré leur système/navigateur afin de réduire les animations et mouvements :</p>
+
+<pre class="brush: css">html {
+  scroll-behavior: smooth;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM View', "#propdef-scroll-behavior", 'scroll-behavior')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.scroll-behavior")}}</p>
diff --git a/files/fr/web/css/scroll-margin-block-end/index.html b/files/fr/web/css/scroll-margin-block-end/index.html
new file mode 100644
index 0000000000..db70841cd0
--- /dev/null
+++ b/files/fr/web/css/scroll-margin-block-end/index.html
@@ -0,0 +1,68 @@
+---
+title: scroll-margin-block-end
+slug: Web/CSS/scroll-margin-block-end
+tags:
+  - CSS
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/scroll-margin-block-end
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>scroll-margin-block-end</code></strong> définit la marge de défilement de l'élément sur la fin de l'axe de bloc. La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-margin-block-end.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+scroll-margin-block-end: 10px;
+scroll-margin-block-end: 1em;
+
+/* Valeurs globales */
+scroll-margin-block-end: inherit;
+scroll-margin-block-end: initial;
+scroll-margin-block-end: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Un décalage par rapport au côté correspondant du conteneur de défilement.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-block-end", "scroll-margin-block-end")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.scroll-margin-block-end")}}</p>
diff --git a/files/fr/web/css/scroll-margin-block-start/index.html b/files/fr/web/css/scroll-margin-block-start/index.html
new file mode 100644
index 0000000000..58a7dcf83a
--- /dev/null
+++ b/files/fr/web/css/scroll-margin-block-start/index.html
@@ -0,0 +1,69 @@
+---
+title: scroll-margin-block-start
+slug: Web/CSS/scroll-margin-block-start
+tags:
+  - CSS
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/scroll-margin-block-start
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>scroll-margin-block-start</code></strong> définit la marge de défilement de l'élément sur le début de l'axe de bloc. La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-margin-block-start.html")}}</div>
+
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+scroll-margin-block-start: 10px;
+scroll-margin-block-start: 1em;
+
+/* Valeurs globales */
+scroll-margin-block-start: inherit;
+scroll-margin-block-start: initial;
+scroll-margin-block-start: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Un décalage par rapport au côté correspondant du conteneur de défilement.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-block-start", "scroll-margin-block-start")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.scroll-margin-block-start")}}</p>
diff --git a/files/fr/web/css/scroll-margin-block/index.html b/files/fr/web/css/scroll-margin-block/index.html
new file mode 100644
index 0000000000..e032413d5b
--- /dev/null
+++ b/files/fr/web/css/scroll-margin-block/index.html
@@ -0,0 +1,71 @@
+---
+title: scroll-margin-block
+slug: Web/CSS/scroll-margin-block
+tags:
+  - CSS
+  - Propriété
+  - Propriété logique
+  - Propriété raccourcie
+  - Reference
+translation_of: Web/CSS/scroll-margin-block
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>scroll-margin-block</code></strong> est une propriété raccourcie logique qui définit les marges de défilement sur l'axe de bloc (i.e. les propriétés logiques <code>scroll-margin-block-start</code> et <code>scroll-margin-block-end</code>).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-margin-block.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Les valeurs des marges de défilement correspondent aux décalages entre la zone qui est utilisée pour définir les limites du défilement de la boîtes et la zone de défilement normale (<em>snapport</em>). La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+scroll-margin-block: 10px;
+scroll-margin-block: 1em .5em;
+
+/* Valeurs globales */
+scroll-margin-block: inherit;
+scroll-margin-block: initial;
+scroll-margin-block: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Un décalage par rapport au côté correspondant du conteneur de défilement.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-block", "scroll-margin-block")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.scroll-margin-block")}}</p>
diff --git a/files/fr/web/css/scroll-margin-bottom/index.html b/files/fr/web/css/scroll-margin-bottom/index.html
new file mode 100644
index 0000000000..53c85231a0
--- /dev/null
+++ b/files/fr/web/css/scroll-margin-bottom/index.html
@@ -0,0 +1,69 @@
+---
+title: scroll-margin-bottom
+slug: Web/CSS/scroll-margin-bottom
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/scroll-margin-bottom
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>scroll-margin-bottom</code></strong> définit la marge de défilement de l'élément sur le côté bas. La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-margin-bottom.html")}}</div>
+
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+scroll-margin-bottom: 10px;
+scroll-margin-bottom: 1em;
+
+/* Valeurs globales */
+scroll-margin-bottom: inherit;
+scroll-margin-bottom: initial;
+scroll-margin-bottom: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Un décalage par rapport au côté correspondant du conteneur de défilement.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-bottom", "scroll-margin-bottom")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.scroll-margin-bottom")}}</p>
diff --git a/files/fr/web/css/scroll-margin-inline-end/index.html b/files/fr/web/css/scroll-margin-inline-end/index.html
new file mode 100644
index 0000000000..91062d05bf
--- /dev/null
+++ b/files/fr/web/css/scroll-margin-inline-end/index.html
@@ -0,0 +1,69 @@
+---
+title: scroll-margin-inline-end
+slug: Web/CSS/scroll-margin-inline-end
+tags:
+  - CSS
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/scroll-margin-inline-end
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>scroll-margin-inline-end</code></strong> définit la marge de défilement de l'élément sur la fin de l'axe en ligne. La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-margin-inline-end.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+scroll-margin-inline-end: 10px;
+scroll-margin-inline-end: 1em;
+
+/* Valeurs globales */
+scroll-margin-inline-end: inherit;
+scroll-margin-inline-end: initial;
+scroll-margin-inline-end: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Un décalage par rapport au côté correspondant du conteneur de défilement.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-inline-end", "scroll-margin-inline-end")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.scroll-margin-inline-end")}}</p>
diff --git a/files/fr/web/css/scroll-margin-inline-start/index.html b/files/fr/web/css/scroll-margin-inline-start/index.html
new file mode 100644
index 0000000000..eed1eb99f3
--- /dev/null
+++ b/files/fr/web/css/scroll-margin-inline-start/index.html
@@ -0,0 +1,69 @@
+---
+title: scroll-margin-inline-start
+slug: Web/CSS/scroll-margin-inline-start
+tags:
+  - CSS
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/scroll-margin-inline-start
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>scroll-margin-inline-start</code></strong> définit la marge de défilement de l'élément sur le début de l'axe en ligne. La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.</p>
+
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-margin-inline-start.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+scroll-margin-inline-start: 10px;
+scroll-margin-inline-start: 1em;
+
+/* Valeurs globales */
+scroll-margin-inline-start: inherit;
+scroll-margin-inline-start: initial;
+scroll-margin-inline-start: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Un décalage par rapport au côté correspondant du conteneur de défilement.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-inline-start", "scroll-margin-inline-start")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.scroll-margin-inline-start")}}</p>
diff --git a/files/fr/web/css/scroll-margin-inline/index.html b/files/fr/web/css/scroll-margin-inline/index.html
new file mode 100644
index 0000000000..2f1d7507b4
--- /dev/null
+++ b/files/fr/web/css/scroll-margin-inline/index.html
@@ -0,0 +1,67 @@
+---
+title: scroll-margin-inline
+slug: Web/CSS/scroll-margin-inline
+tags:
+  - CSS
+  - Propriété
+  - Propriété logique
+  - Propriété raccourcie
+  - Reference
+translation_of: Web/CSS/scroll-margin-inline
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>scroll-margin-inline</code></strong> est une propriété raccourcie logique qui définit les marges de défilement sur l'axe de bloc (i.e. les propriétés logiques <code>scroll-margin-inline-start</code> et <code>scroll-margin-inline-end</code>).</p>
+
+<p>Les valeurs des marges de défilement correspondent aux décalages entre la zone qui est utilisée pour définir les limites du défilement de la boîtes et la zone de défilement normale (<em>snapport</em>). La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+scroll-margin-inline: 10px;
+scroll-margin-inline: 1em .5em;
+
+/* Valeurs globales */
+scroll-margin-inline: inherit;
+scroll-margin-inline: initial;
+scroll-margin-inline: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Un décalage par rapport au côté correspondant du conteneur de défilement.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-inline", "scroll-margin-inline")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.scroll-margin-inline")}}</p>
diff --git a/files/fr/web/css/scroll-margin-left/index.html b/files/fr/web/css/scroll-margin-left/index.html
new file mode 100644
index 0000000000..557fc01916
--- /dev/null
+++ b/files/fr/web/css/scroll-margin-left/index.html
@@ -0,0 +1,68 @@
+---
+title: scroll-margin-left
+slug: Web/CSS/scroll-margin-left
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/scroll-margin-left
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>scroll-margin-left</code></strong> définit la marge de défilement de l'élément sur le côté gauche. La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-margin-left.html")}}</div>
+
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+scroll-margin-left: 10px;
+scroll-margin-left: 1em;
+
+/* Valeurs globales */
+scroll-margin-left: inherit;
+scroll-margin-left: initial;
+scroll-margin-left: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Un décalage par rapport au côté correspondant du conteneur de défilement.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-left", "scroll-margin-left")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.scroll-margin-left")}}</p>
diff --git a/files/fr/web/css/scroll-margin-right/index.html b/files/fr/web/css/scroll-margin-right/index.html
new file mode 100644
index 0000000000..56e7a9be1a
--- /dev/null
+++ b/files/fr/web/css/scroll-margin-right/index.html
@@ -0,0 +1,68 @@
+---
+title: scroll-margin-right
+slug: Web/CSS/scroll-margin-right
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/scroll-margin-right
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>scroll-margin-right</code></strong> définit la marge de défilement de l'élément sur le côté droit. La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-margin-right.html")}}</div>
+
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+scroll-margin-right: 10px;
+scroll-margin-right: 1em;
+
+/* Valeurs globales */
+scroll-margin-right: inherit;
+scroll-margin-right: initial;
+scroll-margin-right: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Un décalage par rapport au côté correspondant du conteneur de défilement.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-right", "scroll-margin-right")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.scroll-margin-right")}}</p>
diff --git a/files/fr/web/css/scroll-margin-top/index.html b/files/fr/web/css/scroll-margin-top/index.html
new file mode 100644
index 0000000000..5e435abef0
--- /dev/null
+++ b/files/fr/web/css/scroll-margin-top/index.html
@@ -0,0 +1,67 @@
+---
+title: scroll-margin-top
+slug: Web/CSS/scroll-margin-top
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/scroll-margin-top
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>scroll-margin-top</code></strong> définit la marge de défilement de l'élément sur le côté haut. La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-margin-top.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+scroll-margin-top: 10px;
+scroll-margin-top: 1em;
+
+/* Valeurs globales */
+scroll-margin-top: inherit;
+scroll-margin-top: initial;
+scroll-margin-top: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Un décalage par rapport au côté correspondant du conteneur de défilement.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-top", "scroll-margin-top")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.scroll-margin-top")}}</p>
diff --git a/files/fr/web/css/scroll-margin/index.html b/files/fr/web/css/scroll-margin/index.html
new file mode 100644
index 0000000000..007adfd400
--- /dev/null
+++ b/files/fr/web/css/scroll-margin/index.html
@@ -0,0 +1,70 @@
+---
+title: scroll-margin
+slug: Web/CSS/scroll-margin
+tags:
+  - CSS
+  - Propriété
+  - Propriété raccourcie
+  - Reference
+translation_of: Web/CSS/scroll-margin
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <code>scroll-margin</code> est une propriété raccourcie qui permet de définir l'ensemble des propriétés <code>scroll-margin-top</code>, <code>scroll-margin-left</code>, <code>scroll-margin-bottom</code> et <code>scroll-margin-right</code> (de la même façon que la propriété <code>margin</code> définit les différents côtés des marges).</p>
+<div>{{EmbedInteractiveExample("pages/css/scroll-margin.html")}}</div>
+
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Les valeurs de <code>scroll-margin</code> correspondent aux décalages entre la zone qui est utilisée pour définir les limites du défilement de la boîtes et la zone de défilement normale (<em>snapport</em>). La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeur de longueur */
+/* Type &lt;length&gt; */
+scroll-margin: 10px;
+scroll-margin: 1em .5em 1em 1em;
+
+/* Valeurs globales */
+scroll-margin: inherit;
+scroll-margin: initial;
+scroll-margin: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Un décalage par rapport au côté correspondant pour le conteneur de défilement. Voir {{cssxref("&lt;length&gt;")}} pour les valeurs possibles.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin", "scroll-margin")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.scroll-margin")}}</p>
diff --git a/files/fr/web/css/scroll-padding-block-end/index.html b/files/fr/web/css/scroll-padding-block-end/index.html
new file mode 100644
index 0000000000..26d40884ff
--- /dev/null
+++ b/files/fr/web/css/scroll-padding-block-end/index.html
@@ -0,0 +1,78 @@
+---
+title: scroll-padding-block-end
+slug: Web/CSS/scroll-padding-block-end
+tags:
+  - CSS
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/scroll-padding-block-end
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <code><strong>scroll-padding-block-end</strong></code> est une propriété qui permet de définir le remplissage, à la fin de l'axe de bloc, entre l'élément et la zone de défilement.</p>
+
+<p>Les propriétés pour le remplissage de la zone de défilement permettent de définir des décalages par rapport à la zone de défilement de l'élément (<em>scrollport</em>). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-padding-block-end.html")}}</div>
+
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs avec un mot-clé */
+scroll-padding-block-end: auto;
+
+/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+scroll-padding-block-end: 10px;
+scroll-padding-block-end: 1em;
+scroll-padding-block-end: 10%;
+
+/* Valeurs globales */
+scroll-padding-block-end: inherit;
+scroll-padding-block-end: initial;
+scroll-padding-block-end: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. C'est une longueur ou un pourcentage valide.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à <code>0px</code> mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-block-end", "scroll-padding-block-end")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.scroll-padding-block-end")}}</p>
diff --git a/files/fr/web/css/scroll-padding-block-start/index.html b/files/fr/web/css/scroll-padding-block-start/index.html
new file mode 100644
index 0000000000..e52e1cf2af
--- /dev/null
+++ b/files/fr/web/css/scroll-padding-block-start/index.html
@@ -0,0 +1,78 @@
+---
+title: scroll-padding-block-start
+slug: Web/CSS/scroll-padding-block-start
+tags:
+  - CSS
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/scroll-padding-block-start
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <code><strong>scroll-padding-block-start</strong></code> est une propriété qui permet de définir le remplissage, au début de l'axe de bloc, entre l'élément et la zone de défilement.</p>
+
+<p>Les propriétés pour le remplissage de la zone de défilement permettent de définir des décalages par rapport à la zone de défilement de l'élément (<em>scrollport</em>). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-padding-block-start.html")}}</div>
+
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs avec un mot-clé */
+scroll-padding-block-start: auto;
+
+/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+scroll-padding-block-start: 10px;
+scroll-padding-block-start: 1em;
+scroll-padding-block-start: 10%;
+
+/* Valeurs globales */
+scroll-padding-block-start: inherit;
+scroll-padding-block-start: initial;
+scroll-padding-block-start: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. C'est une longueur ou un pourcentage valide.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à <code>0px</code> mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-block-start", "scroll-padding-block-start")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.scroll-padding-block-start")}}</p>
diff --git a/files/fr/web/css/scroll-padding-block/index.html b/files/fr/web/css/scroll-padding-block/index.html
new file mode 100644
index 0000000000..0537332219
--- /dev/null
+++ b/files/fr/web/css/scroll-padding-block/index.html
@@ -0,0 +1,77 @@
+---
+title: scroll-padding-block
+slug: Web/CSS/scroll-padding-block
+tags:
+  - CSS
+  - Propriété
+  - Propriété logique
+  - Propriété raccourcie
+  - Reference
+translation_of: Web/CSS/scroll-padding-block
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <code><strong>scroll-padding-block</strong></code> est une propriété raccourcie qui permet de définir le remplissage, sur l'axe de bloc, entre l'élément et la zone de défilement. Autrement dit, elle permet de définir <code>scroll-padding-block-end</code> et <code>scroll-padding-block-start</code>.</p>
+<div>{{EmbedInteractiveExample("pages/css/scroll-padding-block.html")}}</div>
+
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Les propriétés pour le remplissage de la zone de défilement permettent de définir des décalages par rapport à la zone de défilement de l'élément (<em>scrollport</em>). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs avec un mot-clé */
+scroll-padding-block: auto;
+
+/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+scroll-padding-block: 10px;
+scroll-padding-block: 1em .5em;
+scroll-padding-block: 10%;
+
+/* Valeurs globales */
+scroll-padding-block: inherit;
+scroll-padding-block: initial;
+scroll-padding-block: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. C'est une longueur ou un pourcentage valide.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à <code>0px</code> mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-block", "scroll-padding-block")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.scroll-padding-block")}}</p>
diff --git a/files/fr/web/css/scroll-padding-bottom/index.html b/files/fr/web/css/scroll-padding-bottom/index.html
new file mode 100644
index 0000000000..038a5ead65
--- /dev/null
+++ b/files/fr/web/css/scroll-padding-bottom/index.html
@@ -0,0 +1,77 @@
+---
+title: scroll-padding-bottom
+slug: Web/CSS/scroll-padding-bottom
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/scroll-padding-bottom
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <code><strong>scroll-padding-bottom</strong></code> est une propriété qui permet de définir le remplissage sur le côté bas entre l'élément et la zone de défilement.</p>
+
+<p>Les propriétés pour le remplissage de la zone de défilement permettent de définir des décalages par rapport à la zone de défilement de l'élément (<em>scrollport</em>). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-padding-bottom.html")}}</div>
+
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs avec un mot-clé */
+scroll-padding-bottom: auto;
+
+/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+scroll-padding-bottom: 10px;
+scroll-padding-bottom: 1em;
+scroll-padding-bottom: 10%;
+
+/* Valeurs globales */
+scroll-padding-bottom: inherit;
+scroll-padding-bottom: initial;
+scroll-padding-bottom: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. C'est une longueur ou un pourcentage valide.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à <code>0px</code> mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-bottom", "scroll-padding-bottom")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.scroll-padding-bottom")}}</p>
diff --git a/files/fr/web/css/scroll-padding-inline-end/index.html b/files/fr/web/css/scroll-padding-inline-end/index.html
new file mode 100644
index 0000000000..610cf71fd0
--- /dev/null
+++ b/files/fr/web/css/scroll-padding-inline-end/index.html
@@ -0,0 +1,78 @@
+---
+title: scroll-padding-inline-end
+slug: Web/CSS/scroll-padding-inline-end
+tags:
+  - CSS
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/scroll-padding-inline-end
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <code><strong>scroll-padding-inline-end</strong></code> est une propriété qui permet de définir le remplissage, à la fin de l'axe en ligne, entre l'élément et la zone de défilement.</p>
+
+<p>Les propriétés pour le remplissage de la zone de défilement permettent de définir des décalages par rapport à la zone de défilement de l'élément (<em>scrollport</em>). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.</p>
+
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-padding-inline-end.html")}}</div>
+
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs avec un mot-clé */
+scroll-padding-inline-end: auto;
+
+/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+scroll-padding-inline-end: 10px;
+scroll-padding-inline-end: 1em;
+scroll-padding-inline-end: 10%;
+
+/* Valeurs globales */
+scroll-padding-inline-end: inherit;
+scroll-padding-inline-end: initial;
+scroll-padding-inline-end: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. C'est une longueur ou un pourcentage valide.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à <code>0px</code> mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-inline-end", "scroll-padding-inline-end")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.scroll-padding-inline-end")}}</p>
diff --git a/files/fr/web/css/scroll-padding-inline-start/index.html b/files/fr/web/css/scroll-padding-inline-start/index.html
new file mode 100644
index 0000000000..4c13252345
--- /dev/null
+++ b/files/fr/web/css/scroll-padding-inline-start/index.html
@@ -0,0 +1,78 @@
+---
+title: scroll-padding-inline-start
+slug: Web/CSS/scroll-padding-inline-start
+tags:
+  - CSS
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/scroll-padding-inline-start
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <code><strong>scroll-padding-inline-start</strong></code> est une propriété qui permet de définir le remplissage, au début de l'axe en ligne, entre l'élément et la zone de défilement.</p>
+
+<p>Les propriétés pour le remplissage de la zone de défilement permettent de définir des décalages par rapport à la zone de défilement de l'élément (<em>scrollport</em>). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-padding-inline-start.html")}}</div>
+
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs avec un mot-clé */
+scroll-padding-inline-start: auto;
+
+/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+scroll-padding-inline-start: 10px;
+scroll-padding-inline-start: 1em;
+scroll-padding-inline-start: 10%;
+
+/* Valeurs globales */
+scroll-padding-inline-start: inherit;
+scroll-padding-inline-start: initial;
+scroll-padding-inline-start: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. C'est une longueur ou un pourcentage valide.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à <code>0px</code> mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-inline-start", "scroll-padding-inline-start")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.scroll-padding-inline-start")}}</p>
diff --git a/files/fr/web/css/scroll-padding-inline/index.html b/files/fr/web/css/scroll-padding-inline/index.html
new file mode 100644
index 0000000000..642fa78f58
--- /dev/null
+++ b/files/fr/web/css/scroll-padding-inline/index.html
@@ -0,0 +1,78 @@
+---
+title: scroll-padding-inline
+slug: Web/CSS/scroll-padding-inline
+tags:
+  - CSS
+  - Propriété
+  - Propriété logique
+  - Propriété raccourcie
+  - Reference
+translation_of: Web/CSS/scroll-padding-inline
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <code><strong>scroll-padding-inline</strong></code> est une propriété raccourcie qui permet de définir le remplissage, sur l'axe en ligne, entre l'élément et la zone de défilement. Autrement dit, elle permet de définir <code>scroll-padding-inline-end</code> et <code>scroll-padding-inline-start</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-padding-inline.html")}}</div>
+
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Les propriétés pour le remplissage de la zone de défilement permettent de définir des décalages par rapport à la zone de défilement de l'élément (<em>scrollport</em>). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs avec un mot-clé */
+scroll-padding-inline: auto;
+
+/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+scroll-padding-inline: 10px;
+scroll-padding-inline: 1em .5em;
+scroll-padding-inline: 10%;
+
+/* Valeurs globales */
+scroll-padding-inline: inherit;
+scroll-padding-inline: initial;
+scroll-padding-inline: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. C'est une longueur ou un pourcentage valide.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à <code>0px</code> mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-inline", "scroll-padding-inline")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.scroll-padding-inline")}}</p>
diff --git a/files/fr/web/css/scroll-padding-left/index.html b/files/fr/web/css/scroll-padding-left/index.html
new file mode 100644
index 0000000000..4cd58ee8a7
--- /dev/null
+++ b/files/fr/web/css/scroll-padding-left/index.html
@@ -0,0 +1,77 @@
+---
+title: scroll-padding-left
+slug: Web/CSS/scroll-padding-left
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/scroll-padding-left
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <code><strong>scroll-padding-left</strong></code> est une propriété qui permet de définir le remplissage sur le côté gauche entre l'élément et la zone de défilement.</p>
+
+<p>Les propriétés pour le remplissage de la zone de défilement permettent de définir des décalages par rapport à la zone de défilement de l'élément (<em>scrollport</em>). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-padding-left.html")}}</div>
+
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs avec un mot-clé */
+scroll-padding-left: auto;
+
+/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+scroll-padding-left: 10px;
+scroll-padding-left: 1em;
+scroll-padding-left: 10%;
+
+/* Valeurs globales */
+scroll-padding-left: inherit;
+scroll-padding-left: initial;
+scroll-padding-left: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. C'est une longueur ou un pourcentage valide.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à <code>0px</code> mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-left", "scroll-padding-left")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.scroll-padding-left")}}</p>
diff --git a/files/fr/web/css/scroll-padding-right/index.html b/files/fr/web/css/scroll-padding-right/index.html
new file mode 100644
index 0000000000..135dd97e41
--- /dev/null
+++ b/files/fr/web/css/scroll-padding-right/index.html
@@ -0,0 +1,75 @@
+---
+title: scroll-padding-right
+slug: Web/CSS/scroll-padding-right
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/scroll-padding-right
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <code><strong>scroll-padding-right</strong></code> est une propriété qui permet de définir le remplissage sur le côté droit entre l'élément et la zone de défilement.</p>
+
+<p>Les propriétés pour le remplissage de la zone de défilement permettent de définir des décalages par rapport à la zone de défilement de l'élément (<em>scrollport</em>). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-padding-right.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs avec un mot-clé */
+scroll-padding-right: auto;
+
+/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+scroll-padding-right: 10px;
+scroll-padding-right: 1em;
+scroll-padding-right: 10%;
+
+/* Valeurs globales */
+scroll-padding-right: inherit;
+scroll-padding-right: initial;
+scroll-padding-right: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. C'est une longueur ou un pourcentage valide.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à <code>0px</code> mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-right", "scroll-padding-right")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.scroll-padding-right")}}</p>
diff --git a/files/fr/web/css/scroll-padding-top/index.html b/files/fr/web/css/scroll-padding-top/index.html
new file mode 100644
index 0000000000..72bea4927f
--- /dev/null
+++ b/files/fr/web/css/scroll-padding-top/index.html
@@ -0,0 +1,76 @@
+---
+title: scroll-padding-top
+slug: Web/CSS/scroll-padding-top
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/scroll-padding-top
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <code><strong>scroll-padding-top</strong></code> est une propriété qui permet de définir le remplissage sur le côté haut entre l'élément et la zone de défilement.</p>
+
+<p>Les propriétés pour le remplissage de la zone de défilement permettent de définir des décalages par rapport à la zone de défilement de l'élément (<em>scrollport</em>). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-padding-top.html")}}</div>
+
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs avec un mot-clé */
+scroll-padding-top: auto;
+
+/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+scroll-padding-top: 10px;
+scroll-padding-top: 1em;
+scroll-padding-top: 10%;
+
+/* Valeurs globales */
+scroll-padding-top: inherit;
+scroll-padding-top: initial;
+scroll-padding-top: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. C'est une longueur ou un pourcentage valide.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à <code>0px</code> mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-top", "scroll-padding-top")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.scroll-padding-top")}}</p>
diff --git a/files/fr/web/css/scroll-padding/index.html b/files/fr/web/css/scroll-padding/index.html
new file mode 100644
index 0000000000..533f712e98
--- /dev/null
+++ b/files/fr/web/css/scroll-padding/index.html
@@ -0,0 +1,76 @@
+---
+title: scroll-padding
+slug: Web/CSS/scroll-padding
+tags:
+  - CSS
+  - Propriété
+  - Propriété raccourcie
+  - Reference
+translation_of: Web/CSS/scroll-padding
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <code><strong>scroll-padding</strong></code> est une <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">propriété raccourcie</a> qui permet de définir l'ensemble des propriétés <code>scroll-padding-top</code>, <code>scroll-padding-right</code>, <code>scroll-padding-bottom</code> et <code>scroll-padding-left</code> (de la même façon que la propriété {{cssxref("padding")}} permet de définir les propriétés détaillées associées).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-padding.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Les propriétés <code>scroll-padding-*</code> permettent de définir des décalages par rapport à la zone de défilement de l'élément (<em>scrollport</em>). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs avec un mot-clé */
+scroll-padding: auto;
+
+/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+scroll-padding: 10px;
+scroll-padding: 1em .5em 1em 1em;
+scroll-padding: 10%;
+
+/* Valeurs globales */
+scroll-padding: inherit;
+scroll-padding: initial;
+scroll-padding: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. Cette valeur, de type {{cssxref("&lt;length-percentage&gt;")}}, est une longueur ({{cssxref("&lt;length&gt;")}}) ou un pourcentage ({{cssxref("&lt;percentage&gt;")}}) valide.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à <code>0px</code> mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding", "scroll-padding")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.scroll-padding")}}</p>
diff --git a/files/fr/web/css/scroll-snap-align/index.html b/files/fr/web/css/scroll-snap-align/index.html
new file mode 100644
index 0000000000..e47b84f197
--- /dev/null
+++ b/files/fr/web/css/scroll-snap-align/index.html
@@ -0,0 +1,73 @@
+---
+title: scroll-snap-align
+slug: Web/CSS/scroll-snap-align
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/scroll-snap-align
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>scroll-snap-align</code></strong> définit la position de la boîte d'accroche (<em>snap positions</em>) comme un alignement entre la zone d'accroche et le conteneur (la boîte de défilement de l'élément). Les deux valeurs fournies à cette propriété s'appliquent respectivement à l'axe de bloc et à l'axe en ligne. Lorsqu'une seule valeur est fournie, la seconde prendra par défaut la valeur de la première.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs avec un mot-clé */
+scroll-snap-align: none;
+scroll-snap-align: start end;
+scroll-snap-align: center;
+
+/* Valeurs globales */
+scroll-snap-align: inherit;
+scroll-snap-align: initial;
+scroll-snap-align: unset;
+</pre>
+
+<h3 id="Values" name="Values">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>La boîte ne définit aucune position d'accroche sur cet axe.</dd>
+ <dt><code>start</code></dt>
+ <dd>Le point d'alignement situé au début de l'axe et sur le bord de la boîte de défilement est une position d'accroche sur cet axe.</dd>
+ <dt><code>end</code></dt>
+ <dd>Le point d'alignement situé à la fin de l'axe et sur le bord de la boîte de défilement est une position d'accroche sur cet axe.</dd>
+ <dt><code>center</code></dt>
+ <dd>Le point d'alignement situé au centre de l'axe et à l'intérieur de la boîte de défilement est une position d'accroche sur cet axe.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-align", "scroll-snap-align")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.scroll-snap-align")}}</p>
+
+<div class="blockIndicator warning">
+<p><strong>Attention !</strong> Pour Safari, la syntaxe utilisant les deux valeurs intervertit les deux valeurs (la première cible l'alignement en ligne et la seconde l'alignement en bloc). Voir <a href="https://bugs.webkit.org/show_bug.cgi?id=191865">le bug n°191865</a>.</p>
+</div>
diff --git a/files/fr/web/css/scroll-snap-coordinate/index.html b/files/fr/web/css/scroll-snap-coordinate/index.html
new file mode 100644
index 0000000000..dbfa4f05c3
--- /dev/null
+++ b/files/fr/web/css/scroll-snap-coordinate/index.html
@@ -0,0 +1,157 @@
+---
+title: scroll-snap-coordinate
+slug: Web/CSS/scroll-snap-coordinate
+tags:
+  - CSS
+  - Déprécié
+  - Propriété
+  - Reference
+translation_of: Web/CSS/scroll-snap-coordinate
+---
+<div>{{CSSRef}}{{deprecated_header}}</div>
+
+<p>La propriété <strong> <code>scroll-snap-coordinate</code></strong> définit les coordonnées horizontale et verticale, au sein de l'élément, qui s'aligneront avec les points définis par {{cssxref("scroll-snap-destination")}} dans le conteneur le plus proche en termes de parenté.</p>
+
+<p>Si l'élément a été transformé, les coordonnées sont transformées de la même façon afin d'aligner le point d'accroche avec l'élément tel qu'il est affiché.</p>
+
+<pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */
+scroll-snap-coordinate: none;
+
+/* Valeurs de &lt;position&gt; */
+/* Une paire de coordonnées */
+scroll-snap-coordinate: 50px 50px;
+/* Plusieurs coordonnées */
+scroll-snap-coordinate: 100px 100px, 100px bottom;
+
+/* Valeurs globales */
+scroll-snap-coordinate: inherit;
+scroll-snap-coordinate: initial;
+scroll-snap-coordinate: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>L'élément ne contribue à aucun point d'accrochage.</dd>
+ <dt><code>&lt;position&gt;</code></dt>
+ <dd>Définit le décalage du point d'accrochage par rapport à la boîte de bordure le l'élément. Pour chaque paire, la première valeur indique l'abscisse et la seconde, l'ordonnée. Pour plus d'informations sur les valeurs possibles, voir {{cssxref("&lt;position&gt;")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="container"&gt;
+  &lt;div&gt;
+    &lt;p&gt;Coordonnées (0, 0)&lt;/p&gt;
+    &lt;div class="scrollContainer coordinate0"&gt;
+      &lt;div&gt;1&lt;/div&gt;
+      &lt;div&gt;2&lt;/div&gt;
+      &lt;div&gt;3&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+
+  &lt;div&gt;
+    &lt;p&gt;Coordonnées (25, 0)&lt;/p&gt;
+    &lt;div class="scrollContainer coordinate25"&gt;
+      &lt;div&gt;1&lt;/div&gt;
+      &lt;div&gt;2&lt;/div&gt;
+      &lt;div&gt;3&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+
+  &lt;div&gt;
+    &lt;p&gt;Coordonnées (50, 0)&lt;/p&gt;
+    &lt;div class="scrollContainer coordinate50"&gt;
+      &lt;div&gt;1&lt;/div&gt;
+      &lt;div&gt;2&lt;/div&gt;
+      &lt;div&gt;3&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#container {
+  display: flex;
+}
+
+#container &gt; div:nth-child(-n+2) {
+  margin-right: 20px;
+}
+
+.scrollContainer {
+  width: 100px;
+  overflow: auto;
+  white-space: nowrap;
+  scroll-snap-type: mandatory;
+  font-size: 0;
+}
+
+.scrollContainer &gt; div {
+  width: 100px;
+  height: 100px;
+  display: inline-block;
+  line-height: 100px;
+  text-align: center;
+  font-size: 50px;
+}
+
+.coordinate0 &gt; div {
+  scroll-snap-coordinate: 0 0;
+}
+
+.coordinate25 &gt; div {
+  scroll-snap-coordinate: 25px 0;
+}
+
+.coordinate50 &gt; div {
+  scroll-snap-coordinate: 50px 0;
+}
+
+.scrollContainer &gt; div:nth-child(even) {
+  background-color: #87ea87;
+}
+
+.scrollContainer &gt; div:nth-child(odd) {
+  background-color: #87ccea;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "100%", "170")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-coordinate", "scroll-snap-coordinate")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.scroll-snap-coordinate")}}</p>
diff --git a/files/fr/web/css/scroll-snap-destination/index.html b/files/fr/web/css/scroll-snap-destination/index.html
new file mode 100644
index 0000000000..032eb7846e
--- /dev/null
+++ b/files/fr/web/css/scroll-snap-destination/index.html
@@ -0,0 +1,149 @@
+---
+title: scroll-snap-destination
+slug: Web/CSS/scroll-snap-destination
+tags:
+  - CSS
+  - Déprécié
+  - Propriété
+  - Reference
+translation_of: Web/CSS/scroll-snap-destination
+---
+<div>{{CSSRef}}{{deprecated_header}}</div>
+
+<p>La propriété <strong><code>scroll-snap-destination</code></strong> définit les coordonnées horizontale et verticale des points d'accroche dans le {{Glossary("viewport")}} du conteneur.</p>
+
+<pre class="brush: css  no-line-numbers">/* Valeur &lt;position&gt; */
+scroll-snap-destination: 400px 600px;
+
+/* Valeurs globales */
+scroll-snap-destination: inherit;
+scroll-snap-destination: initial;
+scroll-snap-destination: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;position&gt;</code></dt>
+ <dd>Définit le décalage entre le bord du viewport du conteneur et le point d'accroche à utiliser lors du défilement. La première valeur indique la coordonnée horizontale et la seconde indique la coordonnée verticale.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="container"&gt;
+  &lt;div&gt;
+    &lt;p&gt;Coordonnées (0, 0)&lt;/p&gt;
+    &lt;div class="scrollContainer destination0"&gt;
+      &lt;div&gt;1&lt;/div&gt;
+      &lt;div&gt;2&lt;/div&gt;
+      &lt;div&gt;3&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+
+  &lt;div&gt;
+    &lt;p&gt;Coordonnées (25, 0)&lt;/p&gt;
+    &lt;div class="scrollContainer destination25"&gt;
+      &lt;div&gt;1&lt;/div&gt;
+      &lt;div&gt;2&lt;/div&gt;
+      &lt;div&gt;3&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+
+  &lt;div&gt;
+    &lt;p&gt;Coordonnées (50, 0)&lt;/p&gt;
+    &lt;div class="scrollContainer destination50"&gt;
+      &lt;div&gt;1&lt;/div&gt;
+      &lt;div&gt;2&lt;/div&gt;
+      &lt;div&gt;3&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#container {
+  display: flex;
+}
+
+#container &gt; div:nth-child(-n+2) {
+  margin-right: 20px;
+}
+
+.scrollContainer {
+  width: 100px;
+  overflow: auto;
+  white-space: nowrap;
+  scroll-snap-points-x: repeat(100%);
+  scroll-snap-type: mandatory;
+  scroll-snap-destination: 20px 0;
+  font-size: 0;
+}
+
+.destination0 {
+  scroll-snap-destination: 0 0;
+}
+
+.destination25 {
+  scroll-snap-destination: 25px 0;
+}
+
+.destination50 {
+  scroll-snap-destination: 50px 0;
+}
+
+.scrollContainer &gt; div {
+  width: 100px;
+  height: 100px;
+  display: inline-block;
+  line-height: 100px;
+  text-align: center;
+  font-size: 50px;
+}
+
+.scrollContainer &gt; div:nth-child(even) {
+  background-color: #87EA87;
+}
+
+.scrollContainer &gt; div:nth-child(odd) {
+  background-color: #87CCEA;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "100%", "170")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-destination", "scroll-snap-destination")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.scroll-snap-destination")}}</p>
diff --git a/files/fr/web/css/scroll-snap-points-x/index.html b/files/fr/web/css/scroll-snap-points-x/index.html
new file mode 100644
index 0000000000..b7f1acea8b
--- /dev/null
+++ b/files/fr/web/css/scroll-snap-points-x/index.html
@@ -0,0 +1,94 @@
+---
+title: scroll-snap-points-x
+slug: Web/CSS/scroll-snap-points-x
+tags:
+  - CSS
+  - Déprécié
+  - Propriété
+  - Reference
+translation_of: Web/CSS/scroll-snap-points-x
+---
+<div>{{CSSRef}}{{deprecated_header}}</div>
+
+<p>La propriété <strong><code>scroll-snap-points-x</code></strong> définit le positionnement horizontal des points d'accroche dans le conteneur de défilement auquel ils s'appliquent.</p>
+
+<pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */
+scroll-snap-points-x: none;
+
+/* Répétition des points d'accroche */
+scroll-snap-points-x: repeat(400px);
+
+/* Valeurs globales */
+scroll-snap-points-x: inherit;
+scroll-snap-points-x: initial;
+scroll-snap-points-x: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Le conteneur ne possède pas de points d'accroche. Les éléments contenus à l'intérieur peuvent définir leurs propres points d'accroche.</dd>
+ <dt><code>repeat(&lt;length-percentage&gt;)</code></dt>
+ <dd>Cette valeur permet de définir un intervalle de répétition pour les points d'accroche, en commençant par le bord (pertinent) du conteneur. Seules les longueurs positives sont autorisées. Les pourcentages sont relatifs à la largeur du conteneur.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="container"&gt;
+  &lt;div&gt;1&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#container {
+  width: 200px;
+  overflow: auto;
+  white-space: nowrap;
+  scroll-snap-points-x: repeat(100%);
+  scroll-snap-type: mandatory;
+  font-size: 0;
+}
+
+#container &gt; div {
+  width: 200px;
+  height: 200px;
+  display: inline-block;
+  line-height: 200px;
+  text-align: center;
+  font-size: 100px;
+}
+
+#container &gt; div:nth-child(even) {
+  background-color: #87ea87;
+}
+
+#container &gt; div:nth-child(odd) {
+  background-color: #87ccea;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 220, 220)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété avait été définie dans <a href="http://www.w3.org/TR/2015/WD-css-snappoints-1-20150326/#scroll-snap-points">un brouillon de spécification pour le module CSS sur les points d'accroche</a> mais <a href="https://github.com/w3c/csswg-drafts/commit/922af86be789222b8490c92038d1a5142e1c1198">a ensuite été retirée</a> de la spécification pour être remplacée par <a href="https://lists.w3.org/Archives/Public/www-style/2015Nov/0266.html">l'accroche basée sur les éléments</a>.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.scroll-snap-points-x")}}</p>
diff --git a/files/fr/web/css/scroll-snap-points-y/index.html b/files/fr/web/css/scroll-snap-points-y/index.html
new file mode 100644
index 0000000000..a7570fcd75
--- /dev/null
+++ b/files/fr/web/css/scroll-snap-points-y/index.html
@@ -0,0 +1,96 @@
+---
+title: scroll-snap-points-y
+slug: Web/CSS/scroll-snap-points-y
+tags:
+  - CSS
+  - Déprécié
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/scroll-snap-points-y
+---
+<div>{{CSSRef}}{{deprecated_header}}</div>
+
+<p>La propriété <strong><code>scroll-snap-points-y</code></strong> définit le positionnement vertical des points d'accroche dans le conteneur de défilement auquel ils s'appliquent.</p>
+
+<pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */
+scroll-snap-points-y: none;
+
+/* Répétition des points d'accroche */
+scroll-snap-points-y: repeat(400px);
+
+/* Valeurs globales */
+scroll-snap-points-y: inherit;
+scroll-snap-points-y: initial;
+scroll-snap-points-y: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Le conteneur ne possède pas de points d'accroche. Les éléments contenus à l'intérieur peuvent définir leurs propres points d'accroche.</dd>
+ <dt><code>repeat(&lt;length-percentage&gt;)</code></dt>
+ <dd>Cette valeur permet de définir un intervalle de répétition pour les points d'accroche, en commençant par le bord (pertinent) du conteneur. Seules les longueurs positives sont autorisées. Les pourcentages sont relatifs à la largeur du conteneur.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="container"&gt;
+  &lt;div&gt;1&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#container {
+  height: 200px;
+  width: 220px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  scroll-snap-points-y: repeat(200px);
+  scroll-snap-type: mandatory;
+  font-size: 0;
+}
+
+#container &gt; div {
+  width: 200px;
+  height: 200px;
+  display: inline-block;
+  line-height: 200px;
+  text-align: center;
+  font-size: 100px;
+}
+
+#container &gt; div:nth-child(even) {
+  background-color: #87EA87;
+}
+
+#container &gt; div:nth-child(odd) {
+  background-color: #87CCEA;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 220, 220)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété avait été définie dans <a href="http://www.w3.org/TR/2015/WD-css-snappoints-1-20150326/#scroll-snap-points">un brouillon de spécification pour le module CSS sur les points d'accroche</a> mais <a href="https://github.com/w3c/csswg-drafts/commit/922af86be789222b8490c92038d1a5142e1c1198">a ensuite été retirée</a> de la spécification pour être remplacée par <a href="https://lists.w3.org/Archives/Public/www-style/2015Nov/0266.html">l'accroche basée sur les éléments</a>.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.scroll-snap-points-y")}}</p>
diff --git a/files/fr/web/css/scroll-snap-stop/index.html b/files/fr/web/css/scroll-snap-stop/index.html
new file mode 100644
index 0000000000..9d08d3a4d0
--- /dev/null
+++ b/files/fr/web/css/scroll-snap-stop/index.html
@@ -0,0 +1,224 @@
+---
+title: scroll-snap-stop
+slug: Web/CSS/scroll-snap-stop
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/scroll-snap-stop
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>scroll-snap-stop</code></strong> définit la façon dont un conteneur de défilement peut « passer outre » certaines positions d'accroche.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+scroll-snap-stop: normal;
+scroll-snap-stop: always;
+
+/* Valeurs globales */
+scroll-snap-type: inherit;
+scroll-snap-type: initial;
+scroll-snap-type: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Lorsque la zone d'affichage ({{Glossary("viewport")}}) du conteneur défile, elle peut passer sur certaines positions d'accroche.</dd>
+ <dt><code>always</code></dt>
+ <dd>Le conteneur de défilement ne peut pas passer sur une position d'accroche. Le conteneur doit « s'accrocher » dès la première position d'accroche de l'élément.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* setup */
+:root, body {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-flow: column nowrap;
+  font-family: monospace;
+}
+.container {
+  display: flex;
+  overflow: auto;
+  outline: 1px dashed lightgray;
+  flex: none;
+}
+
+.container.x {
+  width: 100%;
+  height: 128px;
+  flex-flow: row nowrap;
+}
+
+.container.y {
+  width: 256px;
+  height: 256px;
+  flex-flow: column nowrap;
+}
+/* definite scroll snap */
+.mandatory-scroll-snapping &gt; div {
+  scroll-snap-stop: always;
+}
+.proximity-scroll-snapping &gt; div {
+  scroll-snap-stop: normal;
+}
+/* scroll-snap */
+.x.mandatory-scroll-snapping {
+  scroll-snap-type: x mandatory;
+}
+
+.y.mandatory-scroll-snapping {
+  scroll-snap-type: y mandatory;
+}
+
+.x.proximity-scroll-snapping {
+  scroll-snap-type: x proximity;
+}
+
+.y.proximity-scroll-snapping {
+  scroll-snap-type: y proximity;
+}
+
+.container &gt; div {
+  text-align: center;
+  scroll-snap-align: center;
+  flex: none;
+}
+
+.x.container &gt; div {
+  line-height: 128px;
+  font-size: 64px;
+  width: 100%;
+  height: 128px;
+}
+
+.y.container &gt; div {
+  line-height: 256px;
+  font-size: 128px;
+  width: 256px;
+  height: 256px;
+}
+/* appearance fixes */
+.y.container &gt; div:first-child {
+  line-height: 1.3;
+  font-size: 64px;
+}
+/* coloration */
+.container &gt; div:nth-child(even) {
+  background-color: #87EA87;
+}
+
+.container &gt; div:nth-child(odd) {
+  background-color: #87CCEA;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="container x mandatory-scroll-snapping" dir="ltr"&gt;
+  &lt;div&gt;X Mand. LTR &lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="container x proximity-scroll-snapping" dir="ltr"&gt;
+  &lt;div&gt;X Proximity LTR&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="container y mandatory-scroll-snapping" dir="ltr"&gt;
+  &lt;div&gt;Y Mand. LTR&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="container y proximity-scroll-snapping" dir="ltr"&gt;
+  &lt;div&gt;Y Prox. LTR&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="container x mandatory-scroll-snapping" dir="rtl"&gt;
+  &lt;div&gt;X Mandatory RTL&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="container x proximity-scroll-snapping" dir="rtl"&gt;
+  &lt;div&gt;X Proximity RTL&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="container y mandatory-scroll-snapping" dir="rtl"&gt;
+  &lt;div&gt;Y Mand. RTL&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="container y proximity-scroll-snapping" dir="rtl"&gt;
+  &lt;div&gt;Y Prox. RTL&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "100%", "1630")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-stop", "scroll-snap-stop")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.scroll-snap-stop")}}</p>
diff --git a/files/fr/web/css/scroll-snap-type-x/index.html b/files/fr/web/css/scroll-snap-type-x/index.html
new file mode 100644
index 0000000000..f6d179979e
--- /dev/null
+++ b/files/fr/web/css/scroll-snap-type-x/index.html
@@ -0,0 +1,55 @@
+---
+title: scroll-snap-type-x
+slug: Web/CSS/scroll-snap-type-x
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/scroll-snap-type-x
+---
+<div>{{CSSRef}}{{deprecated_header}}</div>
+
+<p>La propriété <strong><code>scroll-snap-type-x</code></strong> définit la « force » avec laquelle les points d'accroche sont respectés lors d'un défilement horizontal.</p>
+
+<p>La gestion précise des animations et de la physique pour respecter ces points d'accroche n'est pas décrite par cette propriété et est laissée à la discrétion de l'agent utilisateur.</p>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+scroll-snap-type-x: none;
+scroll-snap-type-x: mandatory;
+scroll-snap-type-x: proximity;
+
+/* Valeurs globales */
+scroll-snap-type-x: inherit;
+scroll-snap-type-x: initial;
+scroll-snap-type-x: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Lorsque le {{Glossary("viewport")}} du conteneur défile horizontalement, on ignore les points d'accroche.</dd>
+ <dt><code>mandatory</code></dt>
+ <dd>Le <em>viewport</em> visuel du conteneur doit s'arrêter sur les points d'accroche s'il n'est pas en cours de défilement. Cela signifie qu'il accroche sur ce point quand le défilement s'arrête. Si du contenu est ajouté, déplacé, supprimé ou redimensionné, le décalage induit doit être ajusté pour rester sur ce point d'accroche.</dd>
+ <dt><code>proximity</code></dt>
+ <dd>Le <em>viewport</em> visuel du conteneur peut s'accrocher à un point d'accroche si aucun défilement n'est en cours, selon les paramètres de défilement de l'agent utilisateur. Si du contenu est ajouté, déplacé, supprimé ou redimensionne, le décalage induit peut être ajuster pour rester sur ce point d'accroche.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">none | mandatory | proximity</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.scroll-snap-type-x")}}</p>
diff --git a/files/fr/web/css/scroll-snap-type-y/index.html b/files/fr/web/css/scroll-snap-type-y/index.html
new file mode 100644
index 0000000000..c608ee46ca
--- /dev/null
+++ b/files/fr/web/css/scroll-snap-type-y/index.html
@@ -0,0 +1,55 @@
+---
+title: scroll-snap-type-y
+slug: Web/CSS/scroll-snap-type-y
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/scroll-snap-type-y
+---
+<div>{{CSSRef}}{{deprecated_header}}</div>
+
+<p>La propriété <strong><code>scroll-snap-type-y</code></strong> définit la « force » avec laquelle les points d'accroche sont respectés lors d'un déroulement vertical.</p>
+
+<p>La gestion précise des animations et de la physique pour respecter ces points d'accroche n'est pas décrite par cette propriété et est laissée à la discrétion de l'agent utilisateur.</p>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+scroll-snap-type-y: none;
+scroll-snap-type-y: mandatory;
+scroll-snap-type-y: proximity;
+
+/* Valeurs globales */
+scroll-snap-type-y: inherit;
+scroll-snap-type-y: initial;
+scroll-snap-type-y: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Lorsque le {{Glossary("viewport")}} du conteneur défile verticalement, on ignore les points d'accroche.</dd>
+ <dt><code>mandatory</code></dt>
+ <dd>Le <em>viewport</em> visuel du conteneur doit s'arrêter sur les points d'accroche s'il n'est pas en cours de défilement. Cela signifie qu'il accroche sur ce point quand le défilement s'arrête. Si du contenu est ajouté, déplacé, supprimé ou redimensionné, le décalage induit doit être ajusté pour rester sur ce point d'accroche.</dd>
+ <dt><code>proximity</code></dt>
+ <dd>Le <em>viewport</em> visuel du conteneur peut s'accrocher à un point d'accroche si aucun défilement n'est en cours, selon les paramètres de défilement de l'agent utilisateur. Si du contenu est ajouté, déplacé, supprimé ou redimensionne, le décalage induit peut être ajuster pour rester sur ce point d'accroche.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">none | mandatory | proximity</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.scroll-snap-type-y")}}</p>
diff --git a/files/fr/web/css/scroll-snap-type/index.html b/files/fr/web/css/scroll-snap-type/index.html
new file mode 100644
index 0000000000..d8a49404a1
--- /dev/null
+++ b/files/fr/web/css/scroll-snap-type/index.html
@@ -0,0 +1,252 @@
+---
+title: scroll-snap-type
+slug: Web/CSS/scroll-snap-type
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/scroll-snap-type
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>scroll-snap-type</code></strong> définit la force d'adhérence aux points d'accroche en cas de défilement d'un conteneur.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-snap-type.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+
+<p>La gestion précise des animations et de la physique pour respecter ces points d'accroche n'est pas décrite par cette propriété et est laissée à la discrétion de l'agent utilisateur.</p>
+
+<pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */
+scroll-snap-type: none;
+scroll-snap-type: x;
+scroll-snap-type: y;
+scroll-snap-type: block;
+scroll-snap-type: inline;
+scroll-snap-type: both;
+
+/* Ajout du mot-clé optionnel mandatory ou proximity*/
+scroll-snap-type: x mandatory;
+scroll-snap-type: y proximity;
+scroll-snap-type: both mandatory;
+/* etc. */
+
+/* Valeurs globales */
+scroll-snap-type: inherit;
+scroll-snap-type: initial;
+scroll-snap-type: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Lorsque le {{Glossary("viewport")}} du conteneur défile, on ignore les points d'accroche.</dd>
+ <dt><code>x</code></dt>
+ <dd>Le conteneur qui défile s'accroche aux positions sur l'axe horizontal uniquement.</dd>
+ <dt><code>y</code></dt>
+ <dd>Le conteneur qui défile s'accroche aux positions sur l'axe vertical uniquement.</dd>
+ <dt><code>block</code></dt>
+ <dd>Le conteneur qui défile s'accroche aux positions sur l'axe de bloc (celui orthogonal à l'axe de lecture) uniquement.</dd>
+ <dt><code>inline</code></dt>
+ <dd>Le conteneur qui défile s'accroche aux positions sur l'axe en ligne (correspondant à au sens de lecteure) uniquement.</dd>
+ <dt><code>both</code></dt>
+ <dd>Le conteneur qui défile s'accroche aux positions sur les deux axes de façon indépendante.</dd>
+ <dt><code>mandatory</code></dt>
+ <dd>Le <em>viewport</em> visuel du conteneur doit s'arrêter sur les points d'accroche s'il n'est pas en cours de défilement. Cela signifie qu'il accroche sur ce point quand le défilement s'arrête. Si du contenu est ajouté, déplacé, supprimé ou redimensionné, le décalage induit doit être ajusté pour rester sur ce point d'accroche.</dd>
+ <dt><code>proximity</code></dt>
+ <dd>Le <em>viewport</em> visuel du conteneur peut s'accrocher à un point d'accroche si aucun défilement n'est en cours, selon les paramètres de défilement de l'agent utilisateur. Si du contenu est ajouté, déplacé, supprimé ou redimensionne, le décalage induit peut être ajusté pour rester sur ce point d'accroche.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* setup */
+html, body, .holster {
+  height: 100%;
+}
+.holster {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-flow: column nowrap;
+  font-family: monospace;
+}
+
+.container {
+  display: flex;
+  overflow: auto;
+  outline: 1px dashed lightgray;
+  flex: none;
+}
+
+.container.x {
+  width: 100%;
+  height: 128px;
+  flex-flow: row nowrap;
+}
+
+.container.y {
+  width: 256px;
+  height: 256px;
+  flex-flow: column nowrap;
+}
+/* scroll-snap */
+.x.mandatory-scroll-snapping {
+  scroll-snap-type: x mandatory;
+}
+
+.y.mandatory-scroll-snapping {
+  scroll-snap-type: y mandatory;
+}
+
+.x.proximity-scroll-snapping {
+  scroll-snap-type: x proximity;
+}
+
+.y.proximity-scroll-snapping {
+  scroll-snap-type: y proximity;
+}
+
+.container &gt; div {
+  text-align: center;
+  scroll-snap-align: center;
+  flex: none;
+}
+
+.x.container &gt; div {
+  line-height: 128px;
+  font-size: 64px;
+  width: 100%;
+  height: 128px;
+}
+
+.y.container &gt; div {
+  line-height: 256px;
+  font-size: 128px;
+  width: 256px;
+  height: 100%;
+}
+/* appearance fixes */
+.y.container &gt; div:first-child {
+  line-height: 1.3;
+  font-size: 64px;
+}
+/* coloration */
+.container &gt; div:nth-child(even) {
+  background-color: #87EA87;
+}
+
+.container &gt; div:nth-child(odd) {
+  background-color: #87CCEA;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="holster"&gt;
+&lt;div class="container x mandatory-scroll-snapping" dir="ltr"&gt;
+  &lt;div&gt;X Mand. LTR&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="container x proximity-scroll-snapping" dir="ltr"&gt;
+  &lt;div&gt;X Prox. LTR&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="container y mandatory-scroll-snapping" dir="ltr"&gt;
+  &lt;div&gt;Y Mand. LTR&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="container y proximity-scroll-snapping" dir="ltr"&gt;
+  &lt;div&gt;Y Prox. LTR&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="container x mandatory-scroll-snapping" dir="rtl"&gt;
+  &lt;div&gt;X Mand. RTL&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="container x proximity-scroll-snapping" dir="rtl"&gt;
+  &lt;div&gt;X Prox. RTL&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="container y mandatory-scroll-snapping" dir="rtl"&gt;
+  &lt;div&gt;Y Mand. RTL&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="container y proximity-scroll-snapping" dir="rtl"&gt;
+  &lt;div&gt;Y Prox. RTL&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "100%", "1630")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-type", "scroll-snap-type")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.scroll-snap-type")}}</p>
diff --git a/files/fr/web/css/scrollbar-color/index.html b/files/fr/web/css/scrollbar-color/index.html
new file mode 100644
index 0000000000..211f21b634
--- /dev/null
+++ b/files/fr/web/css/scrollbar-color/index.html
@@ -0,0 +1,126 @@
+---
+title: scrollbar-color
+slug: Web/CSS/scrollbar-color
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/scrollbar-color
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>scrollbar-color</code></strong> permet à un auteur de définir la couleur utilisée pour le curseur et la piste (la ligne sur laquelle se déplace le curseur) de la barre de défilement.</p>
+
+<p>{{EmbedInteractiveExample("pages/css/scrollbar-color.html")}}</p>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs avec un mot-clé */
+scrollbar-color: auto;
+scrollbar-color: dark;
+scrollbar-color: light;
+
+/* Valeur de couleur */
+/* La première cible le curseur et la seconde la piste */
+/* type &lt;color&gt; */
+scrollbar-color: rebeccapurple green;
+
+/* Valeurs globales */
+scrollbar-color: inherit;
+scrollbar-color: initial;
+scrollbar-color: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;scrollbar-face-color&gt;</code></dt>
+ <dd>Une valeur définissant la couleur.<br>
+
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td><code>auto</code></td>
+    <td>
+     <p>Utilise le rendu par défaut du système pour la piste de la barre de défilement si aucune autre couleur n'est indiquée pour la mise en forme CSS de la barre de défilement.</p>
+    </td>
+   </tr>
+   <tr>
+    <td><code>dark</code></td>
+    <td>Affiche une barre de défilement sombre. Ce peut être la variante sombre fournie par le système sous-jacent ou une barre de défilement personnalisée avec des couleurs sombres.</td>
+   </tr>
+   <tr>
+    <td><code>light</code></td>
+    <td>Affiche une barre de défilement claire. Ce peut être la variante claire fournie par le système sous-jacent ou une barre de défilement personnalisée avec des couleurs claires.</td>
+   </tr>
+   <tr>
+    <td><code>&lt;color&gt; &lt;color&gt;</code></td>
+    <td>La première couleur est appliquée au curseur et la seconde à la piste sur laquelle se déplace le curseur.</td>
+   </tr>
+  </tbody>
+ </table>
+
+ <div class="note">
+ <p><strong>Note :</strong> Pour toute valeur de <code>scrollbar-color</code>, les agents utilisateur doivent appliquer la valeur sur l'élément racine de la zone d'affichage (<em>viewport</em>).</p>
+ </div>
+
+ <div class="note">
+ <p><strong>Note :</strong> Si la couleur d'une partie de la barre de défilement est indiquée, les implémentations peuvent afficher une barre de défilement simple (plutôt que celle provenant du système) afin de la colorer avec la/les couleur(s) indiquée(s).</p>
+ </div>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">.scroller {
+  width: 300px;
+  height: 100px;
+  overflow-y: scroll;
+  scrollbar-color: rebeccapurple green;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="scroller"&gt;Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Lorsqu'on utilise <code>scrollbar-color</code> avec certains couleurs spécifiques, il est nécessaire de s'assurer que le contraste entre le curseur et la piste est suffisant. Lorsque des mots-clés sont utilisés, c'est à l'agent utilisateur de s'assurer que le contraste est suffisant. Voir <a href="https://www.w3.org/TR/WCAG20-TECHS/G183.html">les techniques WCAG 2.0 G183 : Utiliser un ratio de contraste de 3:1</a>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scrollbars", "#scrollbar-color", "scrollbar-color")}}</td>
+   <td>{{Spec2("CSS Scrollbars")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<div>{{Compat("css.properties.scrollbar-color")}}</div>
diff --git a/files/fr/web/css/scrollbar-width/index.html b/files/fr/web/css/scrollbar-width/index.html
new file mode 100644
index 0000000000..2cd1714b7e
--- /dev/null
+++ b/files/fr/web/css/scrollbar-width/index.html
@@ -0,0 +1,119 @@
+---
+title: scrollbar-width
+slug: Web/CSS/scrollbar-width
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/scrollbar-width
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>scrollbar-width</code></strong> permet à un auteur de définir l'épaisseur maximale à utiliser pour la barre de défilement si celle-ci est affichée.</p>
+
+<p>{{EmbedInteractiveExample("pages/css/scrollbar-width.html")}}</p>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs avec un mot-clé */
+scrollbar-width: auto;
+scrollbar-width: thin;
+scrollbar-width: none;
+
+/* Valeurs globales */
+scrollbar-width: inherit;
+scrollbar-width: initial;
+scrollbar-width: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;scrollbar-width&gt;</code></dt>
+ <dd>Une valeur qui définit l'épaisseur de la barre de défilement. Cette valeur est une longueur (cf. {{cssxref("&lt;length&gt;")}}) positive ou bien un mot-clé. Si c'est un mot-clé, ce dernier doit avoir l'une des valeurs suivantes :
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td><code>auto</code></td>
+    <td>La largeur par défaut, fournie par le système, pour la barre de défilement.</td>
+   </tr>
+   <tr>
+    <td><code>thin</code></td>
+    <td>Une variante plus fine de la barre de défilement plus fine dans le cas des plateformes qui fournissent une telle option ou une barre de défilement avec une largeur moindre que la largeur par défaut du système.</td>
+   </tr>
+   <tr>
+    <td><code>none</code></td>
+    <td>Aucune barre de défilement n'est affichée mais on peut toujours faire défiler l'élément.</td>
+   </tr>
+  </tbody>
+ </table>
+
+ <div class="note">
+ <p><strong>Note :</strong> Toute valeur de <code>scrollbar-width</code> doit être appliquée sur l'élément racine de la zone d'affichage (<em>viewport</em>) par les agents utilisateur.</p>
+ </div>
+
+ <div class="note">
+ <p><strong>Note :</strong> L'utilisation des longueurs pour <code>scrollbar-width</code> est une fonctionnalité qui sera potentiellement abandonnée de la spécification (voir <a href="https://github.com/w3c/csswg-drafts/issues/1958">l'<em>issue</em> 1958</a>).</p>
+ </div>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">.scroller {
+  width: 300px;
+  height: 100px;
+  overflow-y: scroll;
+  scrollbar-width: thin;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="scroller"&gt;Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scrollbars", "#scrollbar-width", "scrollbar-width")}}</td>
+   <td>{{Spec2("CSS Scrollbars")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.scrollbar-width")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{CSSxRef("-ms-overflow-style")}}</li>
+ <li>{{CSSxRef("::-webkit-scrollbar")}}</li>
+</ul>
diff --git a/files/fr/web/css/selector_list/index.html b/files/fr/web/css/selector_list/index.html
new file mode 100644
index 0000000000..28e73a371b
--- /dev/null
+++ b/files/fr/web/css/selector_list/index.html
@@ -0,0 +1,99 @@
+---
+title: Liste de sélecteurs
+slug: Web/CSS/Selector_list
+tags:
+  - CSS
+  - Sélecteur
+translation_of: Web/CSS/Selector_list
+---
+<div>{{CSSRef}}</div>
+
+<p><strong> Une liste de sélecteurs</strong> (<code>,</code>) permet de cibler tous les nœuds correspondants à l'une des conditions.</p>
+
+<pre class="brush: css no-line-numbers">/* Cible tous les éléments correspondants */
+span,
+div {
+  border: red 2px solid;
+}</pre>
+
+<p>Afin de réduire la taille d'une feuille de style, on peut grouper les sélecteurs dans une liste séparée par des virgules.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">element, element, element { <em>propriétés de style</em> }</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Groupement_sur_une_seule_ligne">Groupement sur une seule ligne</h3>
+
+<p>On peut grouper les sélecteurs sur une seule ligne :</p>
+
+<pre class="brush: css">h1, h2, h3, h4, h5, h6 { font-family: helvetica; }
+</pre>
+
+<h3 id="Groupement_sur_plusieurs_lignes">Groupement sur plusieurs lignes</h3>
+
+<p>On peut grouper les sélecteurs sur plusieurs lignes :</p>
+
+<pre class="brush: css">#main,
+.content,
+article {
+  font-size: 1.1em;
+}
+</pre>
+
+<h3 id="Invalidation_dune_liste_de_sélecteurs">Invalidation d'une liste de sélecteurs</h3>
+
+<p>Un inconvénient des listes de sélecteurs est la non-équivalence des deux blocs suivants :</p>
+
+<pre class="brush: css">h1 { font-family: sans-serif }
+h2:maybe-unsupported { font-family: sans-serif }
+h3 { font-family: sans-serif }</pre>
+
+<pre class="brush: css">h1, h2:maybe-unsupported, h3 { font-family: sans-serif }</pre>
+
+<p>En effet, un seul sélecteur vous manque et tout est dépeuplé. Enfin, un seul sélecteur invalide rend l'ensemble de la règle invalide.</p>
+
+<p>Pour éviter cet effet indésirable, on pourra utiliser le sélecteur {{CSSxRef(":is", ":is()")}} qui ignore les sélecteurs invalides parmi ses arguments. Par contre, tous les sélecteurs passés en arguments auront la même spécificité.</p>
+
+<pre class="brush: css">h1 { font-family: sans-serif }
+h2:maybe-unsupported { font-family: sans-serif }
+h3 { font-family: sans-serif }</pre>
+
+<pre class="brush: css">:is(h1, h2:maybe-unsupported, h3) { font-family: sans-serif }</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors", "#grouping", "Selector Lists")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>Renommage en « liste de sélecteur »</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#grouping', 'grouping')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.list")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les pseudo-classes {{CSSxRef(":is", ":is()")}} {{Experimental_Inline}} et {{CSSxRef(":where", ":where()")}} {{Experimental_Inline}} qui n'ont pas ce problème historique d'invalidation des listes de sélecteurs.</li>
+</ul>
diff --git a/files/fr/web/css/shape-box/index.html b/files/fr/web/css/shape-box/index.html
new file mode 100644
index 0000000000..ebb643f4c8
--- /dev/null
+++ b/files/fr/web/css/shape-box/index.html
@@ -0,0 +1,168 @@
+---
+title: <shape-box>
+slug: Web/CSS/shape-box
+tags:
+  - CSS
+  - Reference
+  - Type
+translation_of: Web/CSS/shape-outside
+---
+<div>{{CSSRef}}</div>
+
+<p>Le type de donnée CSS <strong><code>&lt;shape-box&gt;</code></strong> permet de définir des formes relatives aux boîtes de l'élément (voir <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">le modèle de boîtes</a>), notamment pour la propriété {{cssxref("shape-outside")}}.</p>
+
+<h2 id="Valeurs">Valeurs</h2>
+
+<dl>
+ <dt><code>margin-box</code></dt>
+ <dd>La forme correspond à la forme dessinée par le contour extérieur de la boîte de marge. Les rayons des coins de la forme sont définis grâce aux propriétés {{cssxref("border-radius")}} et {{cssxref("margin")}}. Si le ratio <code>border-radius</code> / <code>margin</code> est supérieur ou égal à 1, le rayon du coin de la boîte sera <code>border-radius</code> + <code>margin</code>. Si le ratio <code>border-radius / margin</code> est inférieur à 1, le rayon du coin de la boîte sera <code>border-radius + (margin * (1 + (ratio-1)^3))</code>.</dd>
+ <dt><code>border-box</code></dt>
+ <dd>La forme correspond à la forme dessinée par le contour extérieur de la boîte de bordure. Elle suit donc les règles normales de mise en forme de la bordure (notamment pour les coins arrondis).</dd>
+ <dt><code>padding-box</code></dt>
+ <dd>La forme correspond à la forme dessinée par le contour extérieur de la boîte de remplissage (<em>padding</em>). Elle suit les règles normales de mise en forme de la bordure (notamment pour les coins arrondis).</dd>
+ <dt><code>content-box</code></dt>
+ <dd>La forme correspond à la forme dessinée par le contour extérieur de la boîte de contenu. Le rayon de chaque coin correspondra à la valeur maximale entre <code>0</code> et <code>border-radius</code> - <code>border-width</code> - <code>padding</code>.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.main {
+    width: 500px;
+    height: 200px;
+}
+
+.left {
+    -webkit-shape-outside: polygon(0 0, 100% 100%, 0 100%);
+    float: left;
+    width: 40%;
+    height: 12ex;
+    background-color: lightgray;
+    -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
+}
+
+.right {
+    -webkit-shape-outside: polygon(100% 0, 100% 100%, 0 100%);
+    float: right;
+    width: 40%;
+    height: 12ex;
+    background-color: lightgray;
+    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
+}
+
+p {
+    text-align: center;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="main"&gt;
+    &lt;div class="left"&gt;&lt;/div&gt;
+    &lt;div class="right"&gt;&lt;/div&gt;
+    &lt;p&gt;
+      Sometimes a web page's text content appears to be
+      funneling your attention towards a spot on the page
+      to drive you to follow a particular link. Sometimes
+      you don't notice.
+    &lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<h3 id="EmbedLiveSample('Exemples'100100)">{{EmbedLiveSample('Exemples',"100%","100%")}}</h3>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Shapes', '#typedef-shape-box', '&lt;shape-box&gt;')}}</td>
+   <td>{{Spec2('CSS Shapes')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{compatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{compatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>\xx</td>
+   <td>{{compatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{compatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome pour Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{compatVersionUnknown}}</td>
+   <td>{{compatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{compatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>\xx</td>
+   <td>{{compatVersionUnknown}}</td>
+   <td>{{compatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{compatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("shape-outside")}}</li>
+ <li><a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">Le modèle de boîtes CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/shape-image-threshold/index.html b/files/fr/web/css/shape-image-threshold/index.html
new file mode 100644
index 0000000000..b4a32531a6
--- /dev/null
+++ b/files/fr/web/css/shape-image-threshold/index.html
@@ -0,0 +1,117 @@
+---
+title: shape-image-threshold
+slug: Web/CSS/shape-image-threshold
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/shape-image-threshold
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>shape-image-threshold</code></strong> définit le seuil, en terme de canal alpha, à utiliser pour extraire la forme d'une image. Cette forme pourra être utilisée pour {{cssxref("shape-outside")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/shape-image-threshold.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Touts les pixels dont la composante alpha est supérieure à ce seuil seront retenus pour délimiter les contours de la formes. Une valeur de 0.5 indiquera par exemple qu'on prend la forme qui englobe tous les pixels dont l'opacité est supérieure à 50%.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Quantité seuil  */
+/* Valeur &lt;number&gt; */
+shape-image-threshold: 0.7;
+
+/* Valeurs globales */
+shape-image-threshold: inherit;
+shape-image-threshold: initial;
+shape-image-threshold: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>Un nombre ({{cssxref("&lt;number&gt;")}}) représentant le seuil utilisé pour extraire une forme d'une image. La forme est définie par les pixels dont la valeur du canal alpha est supérieur au seuil indiqué. Un seuil qui est inférieur à 0.0 (transparence totale) ou supérieur à 1.0 (opacité totale) sera ramené dans cet intervalle.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, on utilise un bloc {{HTMLElement("div")}} pour y afficher une image d'arrière-plan avec un dégradé. On retrouve ce dégradé dans une forme CSS avec la propriété <code>shape-outside</code> et on utilise <code>shape-image-threshold</code> afin de ne retenir que les pixels dont l'opacité est supérieure ou égale à 20% pour délimiter la forme.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; hightlight[9]">#gradient-shape {
+  width: 150px;
+  height: 150px;
+  float: left;
+  background-image: linear-gradient(30deg, black, transparent 80%,
+      transparent);
+  shape-outside: linear-gradient(30deg, black, transparent 80%,
+      transparent);
+  shape-image-threshold: 0.2;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="gradient-shape"&gt;&lt;/div&gt;
+
+&lt;p&gt;
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel at commodi
+  voluptates enim, distinctio officia. Saepe optio accusamus doloribus sint
+  facilis itaque ab nulla, dolor molestiae assumenda cum sit placeat
+  adipisci, libero quae nihil porro debitis laboriosam inventore animi
+  impedit nostrum nesciunt quisquam expedita! Dolores consectetur iure atque
+  a mollitia dicta repudiandae illum exercitationem aliquam repellendus
+  ipsum porro modi, id nemo eligendi, architecto ratione quibusdam iusto
+  nisi soluta? Totam inventore ea eum sed velit et eligendi suscipit
+  accusamus iusto dolore, at provident eius alias maxime pariatur non
+  deleniti ipsum sequi rem eveniet laboriosam magni expedita?
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', "600px", "230px")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Shapes', '#shape-image-threshold-property', 'shape-image-threshold')}}</td>
+   <td>{{Spec2('CSS Shapes')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.shape-image-threshold")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Shapes">Les formes CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Shapes/Aperçu_formes_CSS">Un aperçu des formes CSS</a></li>
+ <li>{{cssxref("&lt;basic-shape&gt;")}}</li>
+ <li>{{cssxref("shape-outside")}}</li>
+ <li>{{cssxref("shape-margin")}}</li>
+</ul>
diff --git a/files/fr/web/css/shape-margin/index.html b/files/fr/web/css/shape-margin/index.html
new file mode 100644
index 0000000000..aeae58a570
--- /dev/null
+++ b/files/fr/web/css/shape-margin/index.html
@@ -0,0 +1,118 @@
+---
+title: shape-margin
+slug: Web/CSS/shape-margin
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/shape-margin
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>shape-margin</code></strong> définit la marge autour d'une forme CSS créée avec {{cssxref("shape-outside")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/shape-margin.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La marge permet d'ajuster la distance entre le contour de la forme (l'élément flottant) et le contenu autour.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeur de longueur */
+/* Type &lt;length&gt; */
+shape-margin: 10px;
+shape-margin: 20mm;
+
+/* Valeur proportionnelle */
+/* Type &lt;percentage&gt; */
+shape-margin: 60%;
+
+/* Valeurs globales */
+shape-margin: inherit;
+shape-margin: initial;
+shape-margin: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>Cette valeur définit la marge entre la forme et le texte alentour grâce à une longueur (cf. {{cssxref("&lt;length&gt;")}}) ou à un pourcentage ({{cssxref("&lt;percentage&gt;")}}) proportionnel à la largeur du bloc englobant de l'élément.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">section {
+  max-width: 400px;
+}
+
+.shape {
+  float: left;
+  width: 150px;
+  height: 150px;
+  background-color: maroon;
+  clip-path: polygon(0 0, 150px 150px, 0 150px);
+  shape-outside: polygon(0 0, 150px 150px, 0 150px);
+  shape-margin: 20px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;section&gt;
+  &lt;div class="shape"&gt;&lt;/div&gt;
+  We are not quite sure of any one thing in biology; our knowledge of geology
+  is relatively very slight, and the economic laws of society are
+  uncertain to every one except some individual who attempts to set them
+  forth; but before the world was fashioned the square on the hypotenuse
+  was equal to the sum of the squares on the other two sides of a right
+  triangle, and it will be so after this world is dead; and the inhabitant
+  of Mars, if he exists, probably knows its truth as we know it.
+&lt;/section&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 500, 250)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Shapes', '#shape-margin-property', 'shape-margin')}}</td>
+   <td>{{Spec2('CSS Shapes')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.shape-margin")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Shapes">Les formes CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Shapes/Aperçu_formes_CSS">Un aperçu des formes CSS</a></li>
+ <li>{{cssxref("shape-outside")}}</li>
+ <li>{{cssxref("shape-image-threshold")}}</li>
+ <li>{{cssxref("&lt;basic-shape&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/shape-outside/index.html b/files/fr/web/css/shape-outside/index.html
new file mode 100644
index 0000000000..f759a838c5
--- /dev/null
+++ b/files/fr/web/css/shape-outside/index.html
@@ -0,0 +1,167 @@
+---
+title: shape-outside
+slug: Web/CSS/shape-outside
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/shape-outside
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>shape-outside</code></strong> définit une forme (qui peut ne pas être un rectangle) autour de laquelle le contenu en ligne devra « s'écouler ». Par défaut, le contenu en ligne évolue autour de la boîte de marge de l'élément flottant. La propriété <code>shape-outside</code> permet de personnaliser ce contour et d'obtenir un texte qui s'écoule autour d'objets plus complexes que des rectangles.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/shape-outside.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css  no-line-numbers">/* Valeurs avec un mot-clé */
+shape-outside: none;
+shape-outside: margin-box;
+shape-outside: content-box;
+shape-outside: border-box;
+shape-outside: padding-box;
+
+/* Valeurs utilisant une fonction */
+shape-outside: circle();
+shape-outside: ellipse();
+shape-outside: inset(10px 10px 10px 10px);
+shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);
+shape-outside: linear-gradient(45deg, rgba(255,255,255,0) 150px, red 150px);
+
+/* Valeur de type &lt;url&gt; */
+shape-outside: url(image.png);
+
+
+/* Valeur de type &lt;gradient&gt; */
+shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px);
+
+/* Valeurs globales */
+shape-outside: initial;
+shape-outside: inherit;
+shape-outside: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>La zone de flottement n'est pas modifiée. Le contenu en ligne épouse le contour de la boîte de marge normalement.</dd>
+ <dt><code>&lt;shape-box&gt;</code></dt>
+ <dd>La forme est calculée selon '<code>margin-box</code>', '<code>border-box</code>', '<code>padding-box</code>' or '<code>content-box</code>' qui correspondent chacune aux boîtes de marge, bordure, remplissage et de contenu. La boîte ainsi définie inclue les courbures induites par {{cssxref("border-radius")}}. On a un effet semblable à {{cssxref("background-clip")}}.</dd>
+ <dt><code>&lt;basic-shape&gt;</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;basic-shape&gt;")}}. La forme est calculée selon une valeur parmi <code><a href="/fr/docs/Web/CSS/basic-shape#inset()">inset()</a></code>, <code><a href="/fr/docs/Web/CSS/basic-shape#circle()">circle()</a></code>, <code><a href="/fr/docs/Web/CSS/basic-shape#ellipse()">ellipse()</a></code>, ou <code><a href="/fr/docs/Web/CSS/basic-shape#polygon()">polygon()</a></code>. Si une valeur <code>&lt;shape-box&gt;</code> est fournie, cela définira la boîte de référence dans laquelle appliquée la forme définie avec la fonction <code>&lt;basic-shape&gt;</code>. Si <code>&lt;shape-box&gt;</code> n'est pas fournie, la valeur par défaut sera '<code>margin-box</code>'.</dd>
+ <dt><code>&lt;image&gt;</code></dt>
+ <dd>La forme est extraite et calculée à partir du canal alpha de l'image {{cssxref("image")}} en utilisant l propriété {{cssxref("shape-image-threshold")}}.</dd>
+ <dd>Les agents utilisateurs doivent utiliser la méthode <code>fetch</code>, éventuellement avec CORS pour les URL utilisées dans <code>shape-outside</code>. Lors de l'accès à la ressource, les agents utilisateurs doivent utiliser le mode Anonymous et définir la source du <em>referrer</em> comme l'URL de la feuille de style, l'origine de l'URL doit être celle du document. S'il y a des erreurs réseau empêchant de récupérer l'image, l'effet sera le même que celui obtenu avec la valeur <code><strong>none</strong></code>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Interpolation">Interpolation</h2>
+
+<p>Afin de pouvoir interpoler entre deux formes, on appliquera les règles suivantes. Les valeurs avec des fonctions sont interpolées comme une liste simple. Les valeurs d'une liste sont interpolées comme des longueurs, des pourcentages ou des valeurs calculées lorsque c'est possible. Si les valeurs de la liste n'ont pas ces types mais sont identiques (par exemple, on trouve <code>nonzero</code> à la même position dans les deux listes), les valeurs pourront interopérer.</p>
+
+<ul>
+ <li>Les deux formes doivent utiliser la même boîtes de référence.</li>
+ <li>Si les deux formes sont du même type, que ce type est <code>ellipse()</code> ou <code>circle()</code> et qu'aucun des rayons n'utilise les mots-clés <code>closest-side</code> ou <code>farthest-side</code>, on aura une interpolation entre chaque valeur.</li>
+ <li>Si les deux formes sont du type <code>inset()</code>, on aura une interpolation entre chaque valeur.</li>
+ <li>Si les deux formes sont du types <code>polygon()</code>, que les deux polygones ont le même nombre de côtés et utilisent la même règle <code>&lt;fill-rule&gt;</code>, on aura une interpolation entre chaque valeur.</li>
+ <li>Dans les autres cas, on n'a pas d'interpolation définie.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="main"&gt;
+  &lt;div class="left"&gt;&lt;/div&gt;
+  &lt;div class="right"&gt;&lt;/div&gt;
+  &lt;p&gt;
+    Sometimes a web page's text content appears to be
+    funneling your attention towards a spot on the page
+    to drive you to follow a particular link.  Sometimes
+    you don't notice.
+  &lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[13,14,21,22]">.main {
+  width: 530px;
+}
+
+.left,
+.right {
+  width: 40%;
+  height: 12ex;
+  background-color: lightgray;
+}
+
+.left {
+  -webkit-shape-outside: polygon(0 0, 100% 100%, 0 100%);
+  shape-outside: polygon(0 0, 100% 100%, 0 100%);
+  float: left;
+  -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
+  clip-path: polygon(0 0, 100% 100%, 0 100%);
+}
+
+.right {
+  -webkit-shape-outside: polygon(100% 0, 100% 100%, 0 100%);
+  shape-outside: polygon(100% 0, 100% 100%, 0 100%);
+  float: right;
+  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
+  clip-path: polygon(100% 0, 100% 100%, 0 100%);
+}
+
+p {
+  text-align: center;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', "100%", 130)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Shapes', '#shape-outside-property', 'shape-outside')}}</td>
+   <td>{{Spec2('CSS Shapes')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.shape-outside")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Shapes">Les formes CSS : le module de spécification <em>CSS Shapes</em></a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Shapes/Aperçu_formes_CSS">Un aperçu des formes CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Shapes/Créer_formes_boîtes">Créer des formes à partir des boîtes</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Shapes/Formes_simples">Les formes simples : le type de donnée <code>&lt;basic-shape&gt;</code></a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Shapes/Générer_formes_images">Créer des formes à partir d'images</a></li>
+ <li>{{cssxref("&lt;basic-shape&gt;")}}</li>
+ <li>{{cssxref("shape-margin")}}</li>
+ <li>{{cssxref("shape-image-threshold")}}</li>
+</ul>
diff --git a/files/fr/web/css/shape/index.html b/files/fr/web/css/shape/index.html
new file mode 100644
index 0000000000..5475c0e6c4
--- /dev/null
+++ b/files/fr/web/css/shape/index.html
@@ -0,0 +1,106 @@
+---
+title: <shape>
+slug: Web/CSS/shape
+tags:
+  - CSS
+  - Déprécié
+  - Reference
+  - Type
+translation_of: Web/CSS/shape
+---
+<div>{{CSSRef}}{{deprecated_header}}</div>
+
+<p>Le type de donnée CSS <strong><code>&lt;shape&gt;</code></strong> permet de représenter des formes. Ces formes (ou régions) sont utilisées pour définir les parties d'un élément sur lesquelles des propriétés comme {{cssxref("clip")}} s'appliquent. Ce type de donnée a été déprécié pour être remplacé par {{cssxref("&lt;basic-shape&gt;")}}.</p>
+
+<div class="note">
+<p><strong>Note :</strong> <code>&lt;shape&gt;</code> et <code>rect()</code> fonctionnent avec la propriété {{cssxref("clip")}} qui a été dépréciée pour être remplacée par {{cssxref("clip-path")}}. Il est donc préférable d'utiliser cette dernière si possible avec une valeur de type {{cssxref("&lt;basic-shape&gt;")}} à la place.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Les valeurs de type <code>&lt;shape&gt;</code> sont construites grâce à la notation fonctionnelle <code>rect()</code> qui permet de créer une zone en forme de rectangle.</p>
+
+<pre class="syntaxbox">rect(<em>haut</em>, <em>droite</em>, <em>bas</em>, <em>gauche</em>)
+</pre>
+
+<h4 id="Valeurs">Valeurs</h4>
+
+<p><img alt="rect.png" class="internal rwrap" src="/@api/deki/files/5730/=rect.png" style="float: right;"></p>
+
+<dl>
+ <dt><code><em>haut</em></code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;length&gt;")}} qui représente le décalage entre le côté haut du rectangle et le côté haut de la bordure de l'élément.</dd>
+</dl>
+
+<dl>
+ <dt><code><em>droite</em></code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;length&gt;")}} qui représente le décalage entre le côté droit du rectangle et le côté gauche de la bordure de l'élément.</dd>
+</dl>
+
+<dl>
+ <dt><code><em>bas</em></code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;length&gt;")}} qui représente le décalage entre le côté bas du rectangle et le côté haut de la bordure de l'élément.</dd>
+</dl>
+
+<dl>
+ <dt><code><em>gauche</em></code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;length&gt;")}} qui représente le décalage entre le côté gauche du rectangle et le côté gauche de la bordure de l'élément.</dd>
+</dl>
+
+<h2 id="Interpolation">Interpolation</h2>
+
+<p>Les valeurs de type <code>&lt;shape&gt;</code> sont des rectangles qui peuvent être interpolées lors des animations. Pour ces valeurs, l'interpolation s'effectue en interpolant chacune des valeurs <code>haut</code>, <code>droite</code>, <code>bas</code> et <code>gauche</code> comme des nombres réels (à virgule flottante). La vitesse de l'interpolation est définie grâce à <a href="/fr/docs/Web/CSS/timing-function">la fonction de temporisation</a> associée à l'animation.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">.exemple {
+   position: absolute;
+   top: 0px;
+   left: 360px;
+   clip: rect(0px, 175px, 113px, 0px);
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  &lt;img class="exemple" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Rogné en haut à gauche"&gt;
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","120","120")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visufx.html#value-def-shape', '&lt;shape&gt;')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition avec la propriété {{cssxref("clip")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.types.shape")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("clip")}}</li>
+ <li>La fonction spécifique à Gecko {{cssxref("-moz-image-rect()")}}</li>
+</ul>
diff --git a/files/fr/web/css/string/index.html b/files/fr/web/css/string/index.html
new file mode 100644
index 0000000000..a3c01544ab
--- /dev/null
+++ b/files/fr/web/css/string/index.html
@@ -0,0 +1,85 @@
+---
+title: <string>
+slug: Web/CSS/string
+tags:
+  - CSS
+  - Reference
+  - Type
+translation_of: Web/CSS/string
+---
+<div>{{CSSRef}}</div>
+
+<p>Le type de donnée CSS <strong><code>&lt;string&gt;</code></strong> représente une chaîne de caractères. En CSS, les chaînes de caractères sont présentes dans de nombreuses propriétés comme {{cssxref("content")}}, {{cssxref("font-family")}} et {{cssxref("quotes")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Une chaîne de caractères CSS est formée d'un ou plusieurs caractères <a href="https://fr.wikipedia.org/wiki/Unicode">Unicode</a> délimités par des quotes (<code>'</code>) ou des doubles quotes (<code>"</code>). Une chaîne délimitée par des doubles quotes ne peut pas contenir de double quotes à moins qu'elles soient échappées à l'aide d'une barre oblique inversée (<code>\</code>). Le même principe s'applique aux chaînes délimitées par des quotes simples, qui ne peuvent contenir de quotes simples sans qu'elles soient échappés à l'aide d'une barre oblique inversée (<code>\</code>).</p>
+
+<p>Le caractère barre oblique inversée doit être échappé afin de faire partie d'une chaîne de caractère.</p>
+
+<p>Les nouvelles lignes ne sont pas acceptées, sauf si elles sont échappées à l'aide d'un caractère de saut de ligne tel que <code>\A</code> ou <code>\00000a</code>. Toutefois, des chaînes de caractères peuvent s'étendre sur plusieurs lignes. Dans ce cas, il est possible de couper la chaîne en plusieurs lignes en utilisant une barre oblique inversée (<code>\</code>) comme dernier caractère de chaque ligne.</p>
+
+<p>Les caractères peuvent être décrits en utilisant leur <a href="https://fr.wikipedia.org/wiki/Unicode#Partitionnement">point de code Unicode</a> hexadécimal, qui doit alors être échappé à l'aide du caractère <code>\</code>. <code>\27</code> représente par exemple le guillemet droit simple (<code>'</code>) et <code>\A9</code> le symbole du <em>copyright</em> ©.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Les <a href="/fr/docs/Glossaire/Entity">entités</a> telles que <code>&amp;nbsp;</code> ou <code>&amp;#8212;</code> ne peuvent pas être utilisées pour les chaînes de caractères CSS.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">"Chaîne avec des guillemets doubles"
+"Chaîne avec plusieurs \" guillemets doubles"
+'Chaîne avec des guillemets simples'
+'Chaîne avec plusieurs \' guillemets simples'
+
+"Chaîne avec une \Anouvelle ligne"
+
+"Une grande chaîne \
+de caractères"
+"Une grande chaîne de caractères"
+</pre>
+
+<div class="note"><strong>Note</strong> : on peut également échapper des doubles quotes avec <code>\22</code> et les simples quotes avec <code>\27</code>.</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#strings', '')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Aucune modification significative depuis CSS Level 2 (Revision 1)</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'syndata.html#strings', '')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition explicite. Les valeurs Unicode échappées sur 6 chiffres sont autorisées.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '', '')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition implicite. Les valeurs Unicode échappées sur 4 chiffres sont autorisées.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.types.string")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Valeurs_et_unités_CSS">Valeurs et unités en CSS</a></li>
+ <li><a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/Values_and_units">Tutoriel - Introduction aux valeurs et unités CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/Types_CSS">Types de donnée en CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/symbols()/index.html b/files/fr/web/css/symbols()/index.html
new file mode 100644
index 0000000000..8e0395bae9
--- /dev/null
+++ b/files/fr/web/css/symbols()/index.html
@@ -0,0 +1,74 @@
+---
+title: symbols()
+slug: Web/CSS/symbols()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+translation_of: Web/CSS/symbols()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>symbols()</code></strong> permet de définir des styles pour les compteurs en ligne, directement comme valeur de la propriété CSS. À la différence des styles définis avec {{cssxref("@counter-style")}}, ces styles sont anonymes. La fonction <code>symbols()</code> ne possède pas toute la flexibilité offerte par la règle @ {{cssxref("@counter-style")}} mais peut s'avérer utile dans des cas où le style nécessaire n'est utilisé qu'une seule fois et où il n'est pas nécessaire d'utiliser toutes les options fournies par {{cssxref("@counter-style")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">symbols() = symbols( &lt;symbols-type&gt;? [ &lt;string&gt; | &lt;image&gt; ]+ );</pre>
+
+<p><code>&lt;symbols-type&gt;</code> est l'un des mots-clés suivants :</p>
+
+<ul>
+ <li><code>cyclic</code> : le système utilisera les différentes valeurs les unes à la suite des autres, de façon cyclique.</li>
+ <li><code>numeric</code> : le système interprètera les valeurs fournies comme une suite numérique composant un système de numération.</li>
+ <li><code>alphabetic</code> : le système interprètera les valeurs fournies comme les chiffres d'un système de numération alphabétique (par exemple : A, B, C, AA, AB, AC, etc.) sans zéro.</li>
+ <li><code>symbolic</code> : le système parcourt les différentes valeurs fournies et en affiche une de plus à chaque cycle.</li>
+ <li><code>fixed</code> : le système affiche chaque symbole une fois puis poursuit avec les chiffres arabes.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ol&gt;
+  &lt;li&gt;Un&lt;/li&gt;
+  &lt;li&gt;Deux&lt;/li&gt;
+  &lt;li&gt;Trois&lt;/li&gt;
+  &lt;li&gt;Quatre&lt;/li&gt;
+  &lt;li&gt;Cinq&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">ol {
+  list-style: symbols(alphabetic "*" "\2020" "\2021");
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","100%")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Counter Styles', '#symbols-function', 'symbols()')}}</td>
+   <td>{{Spec2('CSS3 Counter Styles')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("@counter-style")}}</li>
+ <li>{{cssxref("list-style-type")}} et la propriété raccourcie correspondante : {{cssxref("list-style")}}.</li>
+</ul>
diff --git a/files/fr/web/css/syntaxe_de_définition_des_valeurs/index.html b/files/fr/web/css/syntaxe_de_définition_des_valeurs/index.html
new file mode 100644
index 0000000000..2acb4d1da7
--- /dev/null
+++ b/files/fr/web/css/syntaxe_de_définition_des_valeurs/index.html
@@ -0,0 +1,421 @@
+---
+title: Syntaxe de définition des valeurs
+slug: Web/CSS/Syntaxe_de_définition_des_valeurs
+tags:
+  - CSS
+  - Débutant
+  - Reference
+translation_of: Web/CSS/Value_definition_syntax
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>La syntaxe de définition des valeurs CSS</strong> est une grammaire formelle qui définit les règles pour créer des règles CSS valides. En plus de ces règles, il peut y avoir des contraintes sémantiques (ex. un nombre doit être positif pour une propriété donnée).</p>
+
+<p>La syntaxe de définition décrit les valeurs qui sont permises et les interactions entre ces valeurs. Un composant peut-être un mot-clé, un littéral, une valeur d'un type donné ou une autre propriété CSS.</p>
+
+<h2 id="Les_types_de_composants">Les types de composants</h2>
+
+<h3 id="Les_mots-clés">Les mots-clés</h3>
+
+<h4 id="Les_mots-clés_génériques">Les mots-clés génériques</h4>
+
+<p>Un mot-clé avec une signification prédéfinie, qui peut apparaître littéralement, sans apostrophes ou guillemets (ex. <code>auto</code>, <code>smaller</code> ou <code>ease-in</code>).</p>
+
+<h4 id="inherit_initial_et_unset"><code>inherit</code>, <code>initial</code> et <code>unset</code></h4>
+
+<p>Toutes propriétés CSS acceptent les mots-clés <code>inherit</code>, <code>initial</code> et <code>unset</code> définies par la spécification CSS. Ces mots-clés ne sont pas listés dans la définition de la syntaxe et sont définies implicitement.</p>
+
+<h3 id="Les_littéraux">Les littéraux</h3>
+
+<p>En CSS, quelques caractères peuvent apparaître directement (ex. la barre oblique « / » ou la virgule « , ») et sont utilisés dans les définitions d'une propriété pour séparer ses composantes. La virgule est généralement utilisée pour séparer des valeurs d'une liste ou des paramètres d'une fonction. La barre oblique sépare des composantes sémantiquement différentes mais avec une syntaxe similaire. Généralement, la barre oblique est utilisée dans les propriétés raccourcies pour séparer les composants du même type mais qui sont associés aux différentes propriétés détaillées.</p>
+
+<p>Ces deux symboles sont utilisés tels quels dans la définition d'une valeur.</p>
+
+<h3 id="Les_types_de_donnée">Les types de donnée</h3>
+
+<h4 id="Les_types_de_donnée_simples">Les types de donnée simples</h4>
+
+<p>Certains types de donnée sont utilisés pour différentes propriétés et sont définis pour l'ensemble des valeurs de la spécification. Ce sont les types de donnée simples et sont représentés par leur nom encadré par des chevrons (le type <code>angle</code> est donc représenté par : {{ cssxref("&lt;angle&gt;") }}, {{cssxref("&lt;string&gt;")}}, et ainsi de suite).</p>
+
+<h4 id="Les_types_de_donnée_non_terminaux">Les types de donnée non terminaux</h4>
+
+<p>D'autres types de donnée, moins utilisés, sont appelés types de donné non-terminaux et sont également encadrés par des chevrons.</p>
+
+<p>Les types de donnée non terminaux sont de deux sortes :</p>
+
+<ul>
+ <li>Les types de donnée qui utilisent le même nom qu'une propriété. Dans ce cas, le type de donnée correspond à l'ensemble des valeurs utilisé par la propriété. Ceux-ci sont généralement utilisés dans les définitions des propriétés raccourcies.</li>
+ <li>Les types de donnée dont le nom de n'est pas celui d'une propriété. Ces types de donnée sont très proches des types simples. La seule différence est l'emplacement de leur définition : dans ce cas, la définition est généralement très proche de la définition de la propriété qui les utilise.</li>
+</ul>
+
+<h2 id="Les_combinateurs">Les combinateurs</h2>
+
+<h3 id="Les_crochets">Les crochets</h3>
+
+<p>Les crochets permettent de regrouper plusieurs entités, combinateurs et multiplicateurs pour les transformer en un seul composant. Cela permet de grouper les composants afin d' appliquer des règles de priorités (supérieures aux règles de précédence).</p>
+
+<pre class="syntaxbox">bold [ thin &amp;&amp; &lt;length&gt; ]</pre>
+
+<p>Cet exemple pourra illustrer les valeurs suivantes :</p>
+
+<ul>
+ <li><code>bold thin 2vh</code></li>
+ <li><code>bold 0 thin</code></li>
+ <li><code>bold thin 3.5em</code></li>
+</ul>
+
+<p>Mais ne correspondra pas à :</p>
+
+<ul>
+ <li><code>thin bold 3em</code> car <code>bold</code> est juxtaposé au composant défini entre les crochets alors qu'il doit apparaître avant.</li>
+</ul>
+
+<h3 id="Juxtaposition">Juxtaposition</h3>
+
+<p>Si on place plusieurs mots-clés, littéraux ou types de donnée les uns à la suite des autres, séparés par un ou plusieurs blancs, cela indique que tous les composants sont <strong>obligatoires et doivent apparaître dans cet ordre</strong>.</p>
+
+<pre class="syntaxbox">bold &lt;length&gt; , thin
+</pre>
+
+<p>Cet exemple pourra illustrer les valeurs suivantes :</p>
+
+<ul>
+ <li><code>bold 1em, thin</code></li>
+ <li><code>bold 0, thin</code></li>
+ <li><code>bold 2.5cm, thin</code></li>
+ <li><code>bold 3vh, thin</code></li>
+</ul>
+
+<p>Mais il ne correspondra pas à :</p>
+
+<ul>
+ <li><code>thin 1em, bold</code> car les entités ne sont pas dans l'ordre indiqué</li>
+ <li><code>bold 1em thin</code> car les entités sont obligatoires et la virgule qui est un littéral doit être présente</li>
+ <li><code>bold 0.5ms, thin</code> car les valeurs <code>ms</code> ne sont pas des valeurs du type {{cssxref("&lt;length&gt;")}}</li>
+</ul>
+
+<h3 id="Double_esperluette">Double esperluette</h3>
+
+<p>Lorsqu'on sépare deux ou plusieurs composants par une double esperluette, cela signifie que <strong>toutes les entités sont obligatoires mais peuvent apparaître dans n'importe quel ordre</strong>.</p>
+
+<pre class="syntaxbox">bold &amp;&amp; &lt;length&gt;
+</pre>
+
+<p>Cet exemple pourra illustrer les valeurs suivantes :</p>
+
+<ul>
+ <li><code>bold 1em</code></li>
+ <li><code>bold 0</code></li>
+ <li><code>2.5cm bold</code></li>
+ <li><code>3vh bold</code></li>
+</ul>
+
+<p>Mais il ne correspondra pas à :</p>
+
+<ul>
+ <li><code>bold</code> car les deux composants doivent apparaître.</li>
+ <li><code>bold 1em bold</code> car les deux composants doivent apparaître exactement une fois.</li>
+</ul>
+
+<div class="note"><strong>Note :</strong> La juxtaposition est prioritaire par rapport à la double esperluette. <code>bold thin &amp;&amp; &lt;length&gt;</code> est donc équivalent à <code>[ </code><code>bold thin ] &amp;&amp; &lt;length&gt;</code>. Il décrit <code>bold thin &lt;length&gt;</code> ou <code>&lt;length&gt;</code><code> bold thin</code> mais pas <code>bold &lt;length&gt;</code><code> thin</code>.</div>
+
+<h3 id="Double_barre">Double barre</h3>
+
+<p>Lorsque deux ou plusieurs composants sont séparés par une double barre verticale <code>||</code>. Cela signifie qu'au moins un composant doit <strong>être présent et qu'ils peuvent apparaître dans n'importe quel ordre</strong>. Généralement, ceci est utilisé pour définir les différentes valeurs d'une propriété raccourcie.</p>
+
+<pre class="syntaxbox">&lt;'border-width'&gt; || &lt;'border-style'&gt; || &lt;'border-color'&gt;
+</pre>
+
+<p>Cet exemple pourra illustrer les valeurs suivantes :</p>
+
+<ul>
+ <li><code>1em solid blue</code></li>
+ <li><code>blue 1em</code></li>
+ <li><code>solid 1px yellow</code></li>
+</ul>
+
+<p>Mais il ne correspondra pas à :</p>
+
+<ul>
+ <li><code>blue yellow</code> car le composant doit apparaître au plus une fois.</li>
+ <li><code>bold</code> car le mot-clé n'est pas permis pour aucune valeur de l'entité.</li>
+</ul>
+
+<div class="note"><strong>Note :</strong> La double esperluette est prioritaire par rapport à la double barre. <code>bold || thin &amp;&amp; &lt;length&gt;</code> est équivalent à <code>bold || [ thin &amp;&amp; &lt;length&gt; ]</code> qui décrit <code>bold</code>, <code>thin</code> <code>&lt;length&gt;</code>, <code>bold thin</code> <code>&lt;length&gt;</code>, ou <code>thin &lt;length&gt; bold</code> mais pas <code>&lt;length&gt;</code><code> bold thin</code> car bold, s'il est présent doit apparaître avant <code>thin &amp;&amp; &lt;length&gt;</code>.</div>
+
+<h3 id="La_barre_verticale">La barre verticale</h3>
+
+<p>Lorsqu'on sépare deux entités par une barre verticale. Cela signifie que les différentes options sont exclusives : <strong>seule une des options doit être présente</strong>. Généralement, cela permet de séparer différents mots-clés possible.</p>
+
+<pre class="syntaxbox">&lt;percentage&gt; | &lt;length&gt; | left | center | right | top | bottom</pre>
+
+<p>Cet exemple pourra illustrer les valeurs suivantes :</p>
+
+<ul>
+ <li><code>3%</code></li>
+ <li><code>0</code></li>
+ <li><code>3.5em</code></li>
+ <li><code>left</code></li>
+ <li><code>center</code></li>
+ <li><code>right</code></li>
+ <li><code>top</code></li>
+ <li><code>bottom</code></li>
+</ul>
+
+<p>Mais il ne correspondra pas à :</p>
+
+<ul>
+ <li><code>center 3%</code> car seul un seul des composants doit être présent.</li>
+ <li><code>3em 4.5em</code> car un composant doit être présent au plus une seule fois.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note :</strong> La double barre verticale est prioritaire par rapport à la simple barre verticale. Ainsi <code>bold | thin || &lt;length&gt;</code> est équivalent à <code>bold | [ thin || &lt;length&gt; ]</code> qui décrit <code>bold</code>, <code>thin</code>, <code>&lt;length&gt;</code>, <code>&lt;length&gt; thin</code> ou <code>thin &lt;length&gt; </code>mais pas <code>bold &lt;length&gt;</code> car seule entité peut être présente.</p>
+</div>
+
+<h2 id="Les_multiplicateurs">Les multiplicateurs</h2>
+
+<p>Un multiplicateur est un signe qui indique nombre de fois qu'une entité peut être répétée. Sans aucun multiplicateur, une entité doit apparaître exactement une fois.</p>
+
+<h3 id="L'astérisque_(*)">L'astérisque (<code>*</code>)</h3>
+
+<p>L'astérisque indique qu'une entité peut apparaître <strong>zéro, une ou plusieurs fois</strong>.</p>
+
+<pre class="syntaxbox">bold smaller*</pre>
+
+<p>Cet exemple pourra illustrer les valeurs suivantes :</p>
+
+<ul>
+ <li><code>bold</code></li>
+ <li><code>bold smaller</code></li>
+ <li><code>bold smaller smaller</code></li>
+ <li><code>bold smaller smaller smaller</code> and so on.</li>
+</ul>
+
+<p>Mais il ne correspondra pas à :</p>
+
+<ul>
+ <li><code>smaller</code> car <code>bold</code> est juxtaposé et doit apparaître avant le mot-clé <code>smaller</code>.</li>
+</ul>
+
+<h3 id="Plus_()">Plus (<code>+</code>)</h3>
+
+<p>Le multiplicateur « plus » indique que l'entité peut apparaître <strong>une ou plusieurs fois</strong>.</p>
+
+<pre class="syntaxbox">bold smaller+</pre>
+
+<p>Cet exemple pourra illustrer les valeurs suivantes :</p>
+
+<ul>
+ <li><code>bold smaller</code></li>
+ <li><code>bold smaller smaller</code></li>
+ <li><code>bold smaller smaller smaller</code> and so on.</li>
+</ul>
+
+<p>Mais il ne correspondra pas à :</p>
+
+<ul>
+ <li><code>bold</code> car <code>smaller</code> doit apparaître au moins une fois</li>
+ <li><code>smaller</code> car <code>bold</code> est juxtaposé et doit apparaitre avant <code>smaller</code>.</li>
+</ul>
+
+<h3 id="Le_point_d'interrogation_()">Le point d'interrogation (<code>?</code>)</h3>
+
+<p>Le point d'interrogation indique que l'entité est optionnelle et doit apparaître<strong> zéro ou une fois</strong>.</p>
+
+<pre class="syntaxbox">bold smaller?</pre>
+
+<p>Cet exemple pourra illustrer les valeurs suivantes :</p>
+
+<ul>
+ <li><code>bold</code></li>
+ <li><code>bold smaller</code></li>
+</ul>
+
+<p>Mais il ne correspondra pas à :</p>
+
+<ul>
+ <li><code>bold smaller smaller</code> car <code>smaller</code> doit apparaître au plus une fois</li>
+ <li><code>smaller</code> car <code>bold</code> est juxtaposé et doit apparaître avant le mot-clé <code>smaller</code> s'il est présent.</li>
+</ul>
+
+<h3 id="Les_accolades_(_)">Les accolades (<code>{ }</code>)</h3>
+
+<p>Les accolades encadrent deux entiers A et B, séparés par une virgule et indiquent que l'entité <strong>doit apparaître au moins A fois et au plus B fois</strong>.</p>
+
+<pre class="syntaxbox">bold smaller{1,3}</pre>
+
+<p>Cet exemple pourra illustrer les valeurs suivantes :</p>
+
+<ul>
+ <li><code>bold smaller</code></li>
+ <li><code>bold smaller smaller</code></li>
+ <li><code>bold smaller smaller smaller</code></li>
+</ul>
+
+<p>Mais il ne correspondra pas à :</p>
+
+<ul>
+ <li><code>bold</code> car <code>smaller</code> doit apparaître au moins une fois.</li>
+ <li><code>bold smaller smaller smaller smaller</code> car <code>smaller</code> doit apparaître au plus trois fois.</li>
+ <li><code>smaller</code> car <code>bold</code> est juxtaposé et doit apparaître avant le mot-clé <code>smaller</code>.</li>
+</ul>
+
+<h3 id="Dièse_()">Dièse (<code>#</code>)</h3>
+
+<p>Le symbole dièse indique qu'une entité doit être répétée <strong>une ou plusieurs fois et que chaque occurrence est séparée par une virgule</strong>.</p>
+
+<pre class="syntaxbox">bold smaller#</pre>
+
+<p>Cet exemple pourra illustrer les valeurs suivantes :</p>
+
+<ul>
+ <li><code>bold smaller</code></li>
+ <li><code>bold smaller, smaller</code></li>
+ <li><code>bold smaller, smaller, smaller</code> and so on.</li>
+</ul>
+
+<p>Mais il ne correspondra pas à :</p>
+
+<ul>
+ <li><code>bold</code> car <code>smaller</code> doit apparaître au moins une fois.</li>
+ <li><code>bold smaller smaller smaller</code> car les différentes occurrences de <code>smaller</code> doivent être séparées par des virgules.</li>
+ <li><code>smaller</code> car <code>bold</code> est juxtaposé et doit apparaître avant toute occurrence du mot-clé <code>smaller</code>.</li>
+</ul>
+
+<h3 id="Point_d'exclamation_(!)">Point d'exclamation (<code>!</code>)</h3>
+
+<p>Le multiplicateur <em>point d'exclamation</em> est utilisé après un groupe pour indiquer que celui-ci ne doit produire qu'une seule valeur. Ici, même si la grammaire des éléments du groupe indiquent que tous les composants peuvent être absents, il faut qu'il y ait au moins un composant présent.</p>
+
+<pre class="syntaxbox">[ bold? smaller? ]!
+</pre>
+
+<p>Cet exemple correspondra aux valeurs suivantes :</p>
+
+<ul>
+ <li><code>bold</code></li>
+ <li><code>smaller</code></li>
+ <li><code>bold smaller</code></li>
+</ul>
+
+<p>Mais pas à :</p>
+
+<ul>
+ <li>ni <code>bold</code> ni <code>smaller</code>, car il faut au moins l'un des deux.</li>
+ <li><code>smaller bold</code>, car <code>bold</code> est juxtaposé et doit apparaître avant le mot-clé <code>smaller</code>.</li>
+ <li><code>bold smaller bold</code>, car <code>bold</code> et <code>smaller</code> doivent apparaître au plus une fois.</li>
+</ul>
+
+<h2 id="Récapitulatif">Récapitulatif</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Signe</th>
+   <th scope="col">Nom</th>
+   <th scope="col">Description</th>
+   <th scope="col">Exemple</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="4">Combinateurs</th>
+  </tr>
+  <tr>
+   <td> </td>
+   <td>Juxtaposition</td>
+   <td>Les composants sont obligatoires et doivent apparaître dans cet ordre.</td>
+   <td><code>solid &lt;length&gt;</code></td>
+  </tr>
+  <tr>
+   <td><code>&amp;&amp;</code></td>
+   <td>Double esperluette</td>
+   <td>Les composants sont obligatoires mais peuvent apparaître dans n'importe quel ordre.</td>
+   <td><code>&lt;length&gt; &amp;&amp; &lt;string&gt;</code></td>
+  </tr>
+  <tr>
+   <td><code>||</code></td>
+   <td>Double barre</td>
+   <td>Au moins un des composants doit être présent et ils peuvent apparaître dans n'importe quel ordre.</td>
+   <td><code>&lt;'border-image-outset'&gt; || &lt;'border-image-slice'&gt;</code></td>
+  </tr>
+  <tr>
+   <td><code>|</code></td>
+   <td>Barre simple</td>
+   <td>Un et un seul des composants doit être présent.</td>
+   <td><code>smaller | small | normal | big | bigger</code></td>
+  </tr>
+  <tr>
+   <td><code>[ ]</code></td>
+   <td>Crochets</td>
+   <td>Les composants peuvent être groupés pour avoir une priorité supérieure aux règles précédentes.</td>
+   <td><code>bold [ thin &amp;&amp; &lt;length&gt; ]</code></td>
+  </tr>
+  <tr>
+   <th colspan="4">Multiplicateurs</th>
+  </tr>
+  <tr>
+   <td> </td>
+   <td>Aucun multiplicateur</td>
+   <td>Exactement 1 fois.</td>
+   <td><code>solid</code></td>
+  </tr>
+  <tr>
+   <td><code>*</code></td>
+   <td>Astérisque</td>
+   <td>0 ou plus.</td>
+   <td><code>bold smaller*</code></td>
+  </tr>
+  <tr>
+   <td><code>+</code></td>
+   <td>Signe plus</td>
+   <td>1 ou plus.</td>
+   <td><code>bold smaller+</code></td>
+  </tr>
+  <tr>
+   <td><code>?</code></td>
+   <td>Point d'interrogation</td>
+   <td>0 ou 1 fois (autrement dit, la valeur est optionnelle<em>)</em></td>
+   <td><code>bold smaller?</code></td>
+  </tr>
+  <tr>
+   <td><code>{A,B}</code></td>
+   <td>Accolades</td>
+   <td>Au moins <code>A</code> fois et au plus <code>B</code> fois.</td>
+   <td><code>bold smaller{1,3}</code></td>
+  </tr>
+  <tr>
+   <td><code>#</code></td>
+   <td>Dièse</td>
+   <td>1 ou plus de fois mais chaque occurrence doit être séparée d'une autre par une virgule.</td>
+   <td><code>bold smaller#</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Values", "#value-defs", "Value definition syntax")}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Ajout du multiplicateur avec le dièse.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "about.html#value-defs", "Value definition syntax")}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Ajout de la double esperluette.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1", "#notation-for-property-values", "Value definition syntax")}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/css/sélecteurs_css/comparison_with_xpath/index.html b/files/fr/web/css/sélecteurs_css/comparison_with_xpath/index.html
new file mode 100644
index 0000000000..2a35cb5611
--- /dev/null
+++ b/files/fr/web/css/sélecteurs_css/comparison_with_xpath/index.html
@@ -0,0 +1,49 @@
+---
+title: Comparison entre les sélecteurs CSS et XPath
+slug: Web/CSS/Sélecteurs_CSS/Comparison_with_XPath
+tags:
+  - CSS
+  - Draft
+  - NeedsContent
+  - Reference
+  - XPath
+translation_of: Web/XPath/Comparison_with_CSS_selectors
+---
+<div>{{CSSRef("Selectors")}}{{QuickLinksWithSubpages("/fr/docs/Web/XPath")}}{{Draft}}</div>
+
+<p class="summary">Dans cet article, nous listerons les différences entre les sélecteurs CSS et les fonctionnalités XPath afin que les développeurs web puissent choisir l'outil le plus pertinent.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><a href="/fr/docs/Web/XPath">Fonctionnalité XPath</a></th>
+   <th scope="col"><a href="/fr/docs/Web/CSS/Sélecteurs_CSS">Équivalent CSS</a></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Axe <a href="/fr/docs/XPath/Axes/ancestor"><code>ancestor</code></a>, <a href="/fr/docs/XPath/Axes/parent"><code>parent</code></a> ou <a href="/fr/docs/XPath/Axes/preceding-sibling"><code>preceding-sibling</code></a></td>
+   <td>{{CSSxRef(":has",":has()")}} selector {{experimental_inline}}</td>
+  </tr>
+  <tr>
+   <td>Axe <a href="/fr/docs/XPath/Axes/attribute"><code>attribute</code></a></td>
+   <td><a href="/en-US/docs/Web/CSS/Attribute_selectors">Sélecteurs d'attribut</a></td>
+  </tr>
+  <tr>
+   <td>Axe <a href="/fr/docs/XPath/Axes/child"><code>child</code></a></td>
+   <td><a href="/fr/docs/Web/CSS/Sélecteurs_enfant">Sélecteurs d'enfant</a></td>
+  </tr>
+  <tr>
+   <td>Axe <a href="/fr/docs/XPath/Axes/descendant"><code>descendant</code></a></td>
+   <td><a href="/fr/docs/Web/CSS/Sélecteurs_descendant">Sélecteur de descendant</a></td>
+  </tr>
+  <tr>
+   <td>Axe <a href="/fr/docs/XPath/Axes/following-sibling"><code>following-sibling</code></a></td>
+   <td><a href="/fr/docs/Web/CSS/Sélecteurs_de_voisins_généraux">Sélecteur de voisin général</a> ou <a href="/fr/docs/Web/CSS/Sélecteur_de_voisin_direct">sélecteur de voisin direct</a></td>
+  </tr>
+  <tr>
+   <td>Axe <a href="/fr/docs/XPath/Axes/self"><code>self</code></a></td>
+   <td>Sélecteur {{CSSxRef(":scope")}} ou {{CSSxRef(":host")}}</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/css/sélecteurs_css/index.html b/files/fr/web/css/sélecteurs_css/index.html
new file mode 100644
index 0000000000..a9d6f91d81
--- /dev/null
+++ b/files/fr/web/css/sélecteurs_css/index.html
@@ -0,0 +1,114 @@
+---
+title: Sélecteurs CSS
+slug: Web/CSS/Sélecteurs_CSS
+tags:
+  - Aperçu
+  - CSS
+  - CSS Selectors
+  - Reference
+  - Sélecteur
+translation_of: Web/CSS/CSS_Selectors
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><span class="seoSummary"><strong>Les sélecteurs</strong> définissent les éléments sur lesquelles s'applique un ensemble de règles CSS.</span></p>
+
+<h2 id="Les_sélecteurs_simples">Les sélecteurs simples</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/Sélecteurs_de_type">Les sélecteurs de type</a></dt>
+ <dd>Ce sélecteur simple permet de cibler les éléments qui correspondent au nom indiqué.<br>
+ <strong>Syntaxe :</strong> <code><var>nomelement</var></code><br>
+ <strong>Exemple :</strong> <code>input</code> permettra de cibler n'importe quel élément {{HTMLElement('input')}}.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Sélecteurs_de_classe">Les sélecteurs de classe</a></dt>
+ <dd>Ce sélecteur simple permet de cibler les éléments en fonction de la valeur de leur attribut <code>class</code>.<br>
+ <strong>Syntaxe :</strong> <code>.<var>nomclasse</var></code><br>
+ <strong>Exemple :</strong> <code>.index</code> permettra de cibler n'importe quel élément qui possède la classe <code>index</code> (vraisemblablement définie avec un attribut <code>class="index"</code>).</dd>
+ <dt><a href="/fr/docs/Web/CSS/Sélecteurs_d_ID">Les sélecteurs d'identifiant</a></dt>
+ <dd>Ce sélecteur simple permet de cibler un élément d'un document en fonction de la valeur de son attribut <code>id</code>. Dans un document, il ne doit y avoir qu'un seul élément pour un identifiant donné.<br>
+ <strong>Syntaxe :</strong> <code>#<var>valeurid</var></code><br>
+ <strong>Exemple :</strong> <code>#toc</code> permettra de cibler l'élément qui possède l'identifiant <code>toc</code> (vraisemblablement défini avec un attribut <code>id="toc"</code>).</dd>
+ <dt><a href="/fr/docs/Web/CSS/Sélecteurs_universels">Le sélecteur universel</a></dt>
+ <dd>Ce sélecteur permet de cibler tous les nœuds d'un document. Il existe également une variante pour ne cibler qu'un seul espace de noms et une variante pour cibler tous les espaces de noms.<br>
+ <strong>Syntaxe :</strong> <code>*</code> <code>ns|*</code> <code>*|*</code><br>
+ <strong>Exemple :</strong> <code>*</code> permettra de cibler tous les éléments du document.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Sélecteurs_d_attribut">Les sélecteurs d'attribut</a></dt>
+ <dd>Ce sélecteur simple permet de cibler des éléments d'un document en fonction de la valeur d'un de leurs attributs.<br>
+ <strong>Syntaxe :</strong> <code>[attr]</code> <code>[attr=valeur]</code> <code>[attr~=valeur]</code> <code>[attr|=valeur] [attr^=valeur]</code> <code>[attr$=valeur]</code> <code>[attr*=valeur]</code><br>
+ <strong>Exemple :</strong> <code>[autoplay]</code> permettra de cibler tous les éléments qui possède l'attribut <code>autoplay</code> défini (quelle que soit sa valeur).</dd>
+</dl>
+
+<h2 id="Les_combinateurs">Les combinateurs</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/Sélecteur_de_voisin_direct">Les sélecteurs de voisin direct</a></dt>
+ <dd>Le combinateur <code>'+'</code> permet de sélectionner les nœuds qui suivent immédiatement un élément donné.<br>
+ <strong>Syntaxe :</strong> <code><var>A</var> + <var>B</var></code><br>
+ <strong>Exemple :</strong> <code>div + p</code> permettra de cibler n'importe quel élément {{HTMLElement('p')}} qui suit immédiatement un élément {{HTMLElement('div')}}.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Sélecteurs_de_voisins_généraux">Les sélecteurs de voisins</a></dt>
+ <dd>Le combinateur <code>'~'</code> permet de sélectionner les nœuds qui suivent un élément et qui ont le même parent.<br>
+ <strong>Syntaxe :</strong> <code><var>A</var> ~ <var>B</var></code><br>
+ <strong>Exemple :</strong> <code>p ~ span</code> permettra de cibler les éléments {{HTMLElement('span')}} qui suivent (immédiatement ou non) un élément {{HTMLElement('p')}} et qui ont le même élément parent.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Sélecteurs_enfant">Les sélecteurs d'éléments fils</a></dt>
+ <dd>Le combinateur <code>'&gt;'</code> permet de sélectionner les nœuds qui sont des fils directs d'un élément donné.<br>
+ <strong>Syntaxe :</strong> <code><var>A</var> &gt; <var>B</var></code><br>
+ <strong>Exemple :</strong> <code>ul &gt; li</code> permettra de cibler tous les éléments {{HTMLElement('li')}} qui sont directement situés sous un élément {{HTMLElement('ul')}}.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Sélecteurs_descendant">Les sélecteurs d'éléments descendants</a></dt>
+ <dd>Le combinateur <code> </code> (espace) permet de sélectionner les nœuds qui sont des descendants (pas nécessairement des fils directs) d'un élément donné.<br>
+ <strong>Syntaxe :</strong> <code>A B</code><br>
+ <strong>Exemple :</strong> <code>div span</code> permettra de cibler n'importe quel élément {{HTMLElement('span')}} situé à l'intérieur d'un élément {{HTMLElement('div')}}.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Combinateur_colonne">Le combinateur de colonne</a>{{experimental_inline}}</dt>
+ <dd>Le combinateur <code>||</code> sélectionne les nœuds qui appartiennent à une colonne. <strong>Syntaxe :</strong> <code>A || B</code><br>
+ <strong>Exemple :</strong> <code>col || td</code> permettra de cibler n'importe quel élément {{HTMLElement('td')}} sous la portée d'une colonne {{HTMLElement('col')}}.</dd>
+</dl>
+
+<h2 id="Les_pseudo-classes">Les pseudo-classes</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/Pseudo-classes">Les pseudo-classes</a> permettent de cibler des éléments selon une information d'état qui n'est pas stockée dans l'arbre du document.</dt>
+ <dd><strong>Exemple:</strong> <code>a:visited</code> permettra de cibler l'ensemble des éléments {{HTMLElement('a')}} (des liens) ayant déjà été visités par l'utilisateur.</dd>
+</dl>
+
+<h2 id="Les_pseudo-éléments">Les pseudo-éléments</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/Pseudo-éléments">Les pseudo-éléments</a> représentent des entités du document qui ne sont pas décrites en HTML.</dt>
+ <dd><strong>Exemple :</strong> <code>p::first-line</code> permettra de cibler la première ligne de chacun des éléments {{HTMLElement('p')}} (les paragraphes) du document.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Ajout du combinateur de colonne (<code>||</code>), des sélecteurs structurels pour la  grille, des combinateurs logiques, des pseudo-classes pour la localisation, la temporisation, les états de ressources, les éléments linguistiques et les éléments relatifs à l'interface utilisateur. Ajout du modificateur de sensibilité à la casse pour les caractèes ASCII et du ciblage des attributs insensible à la casse.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Ajout du combinateur de voisin <code>~</code>. Les pseudo-éléments utilisent désormais un préfixe avec deux fois deux-points (<code>::</code>)</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>
+    <p>Ajout des combinateurs pour les fils (<code>&gt;</code>) et voisins adjacents (<code>+</code>).<br>
+     Ajout du sélecteur universel et du sélecteur d'attribut.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/css/sélecteurs_css/utiliser_la_pseudo-classe__colon_target_dans_un_selecteur/index.html b/files/fr/web/css/sélecteurs_css/utiliser_la_pseudo-classe__colon_target_dans_un_selecteur/index.html
new file mode 100644
index 0000000000..8aeae8c255
--- /dev/null
+++ b/files/fr/web/css/sélecteurs_css/utiliser_la_pseudo-classe__colon_target_dans_un_selecteur/index.html
@@ -0,0 +1,63 @@
+---
+title: 'Utiliser la pseudo-classe :target dans un sélecteur'
+slug: 'Web/CSS/Sélecteurs_CSS/Utiliser_la_pseudo-classe_:target_dans_un_selecteur'
+tags:
+  - CSS
+  - Guide
+  - Intermédiaire
+translation_of: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors'
+---
+<div>{{CSSRef}}</div>
+
+<p>Afin d'aider à identifier la destination d'un lien qui mène vers une portion spécifique du document, les <a class="external" href="https://www.w3.org/TR/css3-selectors/#target-pseudo">sélecteurs CSS3</a> ont introduit <a href="/fr/docs/Web/CSS/Pseudo-classes">la pseudo-classe</a> {{cssxref(":target")}}.</p>
+
+<h2 id="Choisir_une_cible">Choisir une cible</h2>
+
+<p>La pseudo-classe {{cssxref(":target")}} permet de mettre en forme l'élément ciblé par le fragment d'identifiant de l'URL du document. Ainsi l'URL <code>https://developer.mozilla.org/fr/docs/Utiliser_la_pseudo-classe_:target_dans_un_selecteur#Exemple</code> contient le fragment d'identifiant <code>#Exemple</code>. En HTML, les identifiants correspondent aux valeurs des attributs <code>id</code> et <code>name</code>, puisque les deux partagent le même espace de nommage. Ainsi l'URL dans l'exemple devrait pointer vers le titre « Exemple » de ce document.</p>
+
+<p>Imaginons qu'on souhaite mettre en forme n'importe quel élément {{HTMLElement("h2")}} qui serait la cible de l'URL mais qu'on ne souhaite pas qu'un autre type d'élément ait un style particulier lorsqu'il est ciblé. On peut obtenir cet effet assez simplement :</p>
+
+<pre class="brush: css">h2:target {
+  font-weight: bold;
+}</pre>
+
+<p>On peut également créer des styles particuliers pour une portion spécifique du document. On peut ainsi utiliser la même valeur identifiant la cible que celle présente dans l'URL. Par exemple, pour ajouter une bordure au fragment <code>#Exemple</code>, on pourra écrire :</p>
+
+<pre class="brush: css">#Exemple:target {
+  border: 1px solid black;
+}</pre>
+
+<h2 id="Cibler_tous_les_éléments">Cibler tous les éléments</h2>
+
+<p>Si le but est de créer un style commun qui s'appliquera à tous les éléments lorsque ceux-ci seront ciblés, un sélecteur universel utilisant seulement la pseudo-classe s'avèrera très pratique :</p>
+
+<pre class="brush: css">:target {
+  color: red;
+}
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans l'exemple suivant, cinq liens pointent chacun vers une portion du même document. Actionner le lien « Premier », par exemple, fera en sorte que le<code> &lt;h1 id="un"&gt; </code>devienne l'élément cible. Notons que le document pourrait défiler vers une nouvelle position, jusqu'à la cible du lien.</p>
+
+<div id="exemple">
+<pre class="brush: html">&lt;h4 id="un"&gt;...&lt;/h4&gt; &lt;p id="deux"&gt;...&lt;/p&gt;
+&lt;div id="trois"&gt;...&lt;/div&gt; &lt;a id="quatre"&gt;...&lt;/a&gt; &lt;em id="cinq"&gt;...&lt;/em&gt;
+
+&lt;a href="#un"&gt;Premier&lt;/a&gt;
+&lt;a href="#deux"&gt;Deuxième&lt;/a&gt;
+&lt;a href="#trois"&gt;Troisième&lt;/a&gt;
+&lt;a href="#quatre"&gt;Quatrième&lt;/a&gt;
+&lt;a href="#cinq"&gt;Cinquième&lt;/a&gt;</pre>
+</div>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>Les utilisateurs peuvent être gênés lorsqu'un fragment d'identifiant mène à une portion du document, ne sachant pas quelle partie du document ils sont supposés lire. En mettant en forme la cible d'une URI, on peut réduire (voire supprimer) cette confusion.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="external" href="https://www.w3.org/TR/css3-selectors/#target-pseudo"><em>CSS3 Selectors #target-pseudo</em> (en anglais)</a></li>
+ <li>{{cssxref(":target")}}</li>
+</ul>
diff --git a/files/fr/web/css/sélecteurs_d_attribut/index.html b/files/fr/web/css/sélecteurs_d_attribut/index.html
new file mode 100644
index 0000000000..6c9e719345
--- /dev/null
+++ b/files/fr/web/css/sélecteurs_d_attribut/index.html
@@ -0,0 +1,243 @@
+---
+title: Sélecteurs d'attribut
+slug: Web/CSS/Sélecteurs_d_attribut
+tags:
+  - CSS
+  - Débutant
+  - Reference
+  - Sélecteur
+translation_of: Web/CSS/Attribute_selectors
+---
+<div>{{CSSRef}}</div>
+
+<p>Les sélecteurs d'attribut permettent de cibler un élément selon la présence d'un attribut ou selon la valeur donnée d'un attribut.</p>
+
+<pre class="brush: css no-line-numbers">/* Les éléments &lt;a&gt; avec un attribut title */
+a[title] {
+  color: purple;
+}
+
+/* Les éléments &lt;a&gt; avec un href qui correspond */
+/* à "https://example.org" */
+a[href="https://example.org"] {
+  color: green;
+}
+
+/* Les éléments &lt;a&gt; dont href contient "example" */
+a[href*="example"] {
+  font-size: 2em;
+}
+
+/* Les éléments &lt;a&gt; dont href finit par ".org" */
+a[href$=".org"] {
+  font-style: italic;
+}
+
+/* Les éléments &lt;a&gt; dont l'attribut class contient le mot logo */
+/* comportement identique à a.logo */
+a[class~="logo"] {
+  padding: 2px;
+}</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<dl>
+ <dt><code>[<em>attr</em>]</code></dt>
+ <dd>Permet de cibler un élément qui possède un attribut <code>attr</code>.</dd>
+ <dt><code>[<em>attr</em>=<em>valeur</em>]</code></dt>
+ <dd>Permet de cibler un élément qui possède un attribut <code>attr</code> dont la valeur est exactement <code>valeur</code>.</dd>
+ <dt><code>[<em>attr</em>~=<em>valeur</em>]</code></dt>
+ <dd>Permet de cibler un élément qui possède un attribut <code>attr</code> dont la valeur est <code>valeur</code>. Cette forme permet de fournir une liste de valeurs, séparées par des blancs, à tester. Si au moins une de ces valeurs est égale à celle de l'attribut, l'élément sera ciblé.</dd>
+ <dt><code>[<em>attr</em>|=<em>valeur</em>]</code></dt>
+ <dd>Permet de cibler un élément qui possède un attribut <code>attr</code> dont la valeur est exactement <code>valeur</code> ou dont la valeur commence par <code>valeur</code> suivi immédiatement d'un tiret (U+002D). Cela peut notamment être utilisé pour effectuer des correspondances avec des codes de langues.</dd>
+ <dt><code>[<em>attr</em>^=<em>valeur</em>]</code></dt>
+ <dd>Permet de cibler un élément qui possède un attribut <code>attr</code> dont la valeur commence par <code>valeur</code>.</dd>
+ <dt><code>[<em>attr</em>$=<em>valeur</em>]</code></dt>
+ <dd>Permet de cibler un élément qui possède un attribut <code>attr</code> dont la valeur se termine par <code>valeur</code>.</dd>
+ <dt><code>[<em>attr</em>*=<em>valeur</em>]</code></dt>
+ <dd>Permet de cibler un élément qui possède un attribut <code>attr</code> et dont la valeur contient au moins une occurrence de <code>valeur</code> dans la chaîne de caractères.</dd>
+ <dt id="case-insensitive"><code>[<em>attr</em> <em>operateur</em> <em>valeur</em> i]</code></dt>
+ <dd>On peut ajouter un <code>i</code> (ou <code>I</code>) avant le crochet de fin. Dans ce cas, la casse ne sera pas prise en compte (pour les caractères contenus sur l'intervalle ASCII).</dd>
+ <dt><code>[attr operateur valeur s]</code> {{experimental_inline}}</dt>
+ <dd>Ajouter un <code>s</code> (ou <code>S</code>) avant le crochet fermant permettra d'effectuer une comparaison de valeur sensible à la casse (pour les caractères ASCII).</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Liens">Liens</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">a {
+  color: blue;
+}
+
+/* Liens internes commençant avec "#" */
+a[href^="#"] {
+  background-color: gold;
+}
+
+/* Liens avec "example" n'importe où dans l'URL */
+a[href*="example"] {
+  background-color: silver;
+}
+
+/* Liens avec "insensitive" n'importe où dans l'URL,
+   quelle que soit la casse */
+a[href*="insensitive" i] {
+  color: cyan;
+}
+
+/* Liens avec "cAsE" n'importe où dans l'URL,
+   et avec cette casse donnée.*/
+a[href*="cAsE" s] {
+  color: pink;
+}
+
+/* Liens qui finissent ".org" */
+a[href$=".org"] {
+  color: red;
+}</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;&lt;a href="#internal"&gt;Lien interne&lt;a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="http://example.com"&gt;Lien d'exemple&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="#InSensitive"&gt;Lien interne insensible à la casse&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="http://example.org"&gt;Lien vers example.org&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Liens")}}</p>
+
+<h3 id="Langues">Langues</h3>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">/* Tous les éléments divs avec un attribut `lang` seront en gras. */
+div[lang] {
+  font-weight: bold;
+}
+
+/* Tous les divs en anglais américains seront bleus. */
+div[lang~="en-us"] {
+  color: blue;
+}
+
+/* Tous les divs en portugais seront verts. */
+div[lang="pt"] {
+  color: green;
+}
+
+/* Tous les divs en chinois seront rouges (chinois
+   simplifié (zh-CN) ou traditionnel (zh-TW). */
+div[lang|="zh"] {
+  color: red;
+}
+
+/* Tous les divs en chinois traditionnels pour l'attribut
+   `data-lang` seront violet. */
+/* Note : Les doubles quotes ne sont pas strictement nécessaires
+   ici */
+div[data-lang="zh-TW"] {
+  color: purple;
+}
+</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;div lang="en-us en-gb en-au en-nz"&gt;Hello World!&lt;/div&gt;
+&lt;div lang="pt"&gt;Olá Mundo!&lt;/div&gt;
+&lt;div lang="zh-CN"&gt;世界您好！&lt;/div&gt;
+&lt;div lang="zh-TW"&gt;世界您好！&lt;/div&gt;
+&lt;div data-lang="zh-TW"&gt;世界您好！&lt;/div&gt;
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Langues")}}</p>
+
+<h3 id="Listes_ordonnées">Listes ordonnées</h3>
+
+<p>{{SeeCompatTable}}</p>
+
+<p>La spécification HTML indique que l'attribut {{htmlattrxref("type", "input")}} doit être testé sans sensibilité à la casse car il est généralement utilisé avec l'élément {{HTMLElement("input")}}. Si on souhaite utiliser un sélecteur d'attribut avec {{htmlattrxref("type", "ol")}} d'une liste ordonnée ({{HTMLElement("ol")}}), cela ne fonctionnera pas sans le modificateur de sensibilité à la casse.</p>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css">/* Les types de liste devront être utilisé avec le
+   marqueur pour la casse vu les spécifications HTML */
+ol[type="a"] {
+  list-style-type: lower-alpha;
+  background: red;
+}
+
+ol[type="a" s] {
+  list-style-type: lower-alpha;
+  background: lime;
+}
+
+ol[type="A" s] {
+  list-style-type: upper-alpha;
+  background: lime;
+}</pre>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html;">&lt;ol type="A"&gt;
+  &lt;li&gt;Liste d'exemple&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h4 id="Résultat_3">Résultat</h4>
+
+<p>{{EmbedLiveSample("Listes_ordonnées")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#attribute-selectors', 'attribute selectors')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Ajout du modification pour la sélection des valeurs d'attribut ASCII insensible à la casse.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.attribute")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{CSSxRef("attr")}}</li>
+ <li>Sélectionner un élément : {{domxref("Document.querySelector()")}}, {{domxref("DocumentFragment.querySelector()")}} ou {{domxref("Element.querySelector()")}}</li>
+ <li>Sélectionner l'ensemble des éléments correspondants : {{domxref("Document.querySelectorAll()")}}, {{domxref("DocumentFragment.querySelectorAll()")}} ou {{domxref("Element.querySelectorAll()")}}</li>
+ <li>Ces méthodes sont implémentées sur le <em>mixin</em> {{domxref("ParentNode")}}, voir {{domxref("ParentNode.querySelector()")}} et {{domxref("ParentNode.querySelectorAll()")}}</li>
+</ul>
diff --git a/files/fr/web/css/sélecteurs_d_id/index.html b/files/fr/web/css/sélecteurs_d_id/index.html
new file mode 100644
index 0000000000..aa9a2141bc
--- /dev/null
+++ b/files/fr/web/css/sélecteurs_d_id/index.html
@@ -0,0 +1,87 @@
+---
+title: Sélecteurs d'ID
+slug: Web/CSS/Sélecteurs_d_ID
+tags:
+  - CSS
+  - Débutant
+  - Reference
+  - Sélecteur
+translation_of: Web/CSS/ID_selectors
+---
+<div>{{CSSRef("Selectors")}}</div>
+
+<p>Un sélecteur d'identifiant (<em>ID selector</em>) permet, pour un document HTML, de cibler un élément grâce à la valeur de son attribut {{htmlattrxref("ID")}}. Il faut que la valeur soit exactement la même que celle du sélecteur pour que l'élément soit effectivement ciblé.</p>
+
+<pre class="brush: css no-line-numbers">/* L'élément avec l'identifiant id="demo" */
+#demo {
+  border: red 2px solid;
+}</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">#valeur_identifiant { <em>déclarations</em> }</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Cela est équivalent à la notation suivante qui utilise un {{cssxref("Sélecteurs_d_attribut", "sélecteur d'attribut")}}:</p>
+
+<pre class="syntaxbox">[id=valeur_identifiant] { <em>déclarations</em> }</pre>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#identifie {
+  background-color: blue;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;span id="identifie"&gt;Voici un span avec du texte.&lt;/span&gt;
+&lt;span&gt;Et un autre (mais sans identifiant).&lt;/span&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 200, 50)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors", "#id-selectors", "ID selectors")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Selectors", "#id-selectors", "ID selectors")}}</td>
+   <td>{{Spec2("CSS3 Selectors")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "selector.html#id-selectors", "ID selectors")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1", "#id-as-selector", "ID selectors")}}</td>
+   <td>{{Spec2("CSS1")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.id")}}</p>
diff --git a/files/fr/web/css/sélecteurs_de_classe/index.html b/files/fr/web/css/sélecteurs_de_classe/index.html
new file mode 100644
index 0000000000..115d791092
--- /dev/null
+++ b/files/fr/web/css/sélecteurs_de_classe/index.html
@@ -0,0 +1,101 @@
+---
+title: Sélecteurs de classe
+slug: Web/CSS/Sélecteurs_de_classe
+tags:
+  - CSS
+  - Reference
+  - Sélecteur
+translation_of: Web/CSS/Class_selectors
+---
+<div>{{CSSRef}}</div>
+
+<p>Les <strong>sélecteurs de classe</strong> CSS permettent de cibler des éléments d'un document en fonction du contenu de l'attribut <code>class</code> de chaque élément.</p>
+
+<pre class="brush: css no-line-numbers">/* Cible tous les éléments ayant la classe "spacious" */
+.spacious {
+  margin: 2em;
+}
+
+/* Cible tous les éléments &lt;li&gt; ayant la classe "spacious" */
+li.spacious {
+  margin: 2em;
+}
+
+/* Cible tous les éléments &lt;li&gt; ayant une classe qui */
+/* contient à la fois "spacious" et "elegant"        */
+li.spacious.elegant {
+  margin: 2em;
+}</pre>
+
+<p>L'attribut {{htmlattrxref("class")}} est une liste de termes séparés par des espaces, il est nécessaire qu'un de ces termes corresponde exactement au nom utilisé dans le sélecteur pour que l'élément soit ciblé.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">.nomdeclasse { <em>déclarations CSS</em> }</pre>
+
+<p>Cela est exactement équivalent à l'utilisation du <a href="/fr/docs/Web/CSS/S%C3%A9lecteurs_d_attribut">sélecteur d'attribut</a> de la façon suivante :</p>
+
+<pre class="syntaxbox">[class~=nomdeclasse] { <em>déclarations CSS</em> }</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.classy {
+  background-color: skyblue;
+}
+.toto {
+ font-weight: bold;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="classy"&gt;Voici un div avec du texte.&lt;/div&gt;
+&lt;div class="toto classy truc"&gt;Les éléments peuvent avoir plusieurs classes, le sélecteur fonctionnera tout de même !&lt;/div&gt;
+&lt;div&gt;En voilà un autre.&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#class-html', 'class selectors')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#class-html', 'class selectors')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#class-html', 'child selectors')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#class-as-selector', 'child selectors')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.class")}}</p>
diff --git a/files/fr/web/css/sélecteurs_de_type/index.html b/files/fr/web/css/sélecteurs_de_type/index.html
new file mode 100644
index 0000000000..adf931d9fe
--- /dev/null
+++ b/files/fr/web/css/sélecteurs_de_type/index.html
@@ -0,0 +1,82 @@
+---
+title: Sélecteurs de type
+slug: Web/CSS/Sélecteurs_de_type
+tags:
+  - CSS
+  - Reference
+  - Sélecteur
+translation_of: Web/CSS/Type_selectors
+---
+<div>{{CSSRef("Selectors")}}</div>
+
+<p>Les sélecteurs de type CSS ciblent des éléments en fonction du nom de leur nœud. Ainsi, lorsqu'un sélecteur de type est utilisé seul, il ciblera tous les éléments de ce type (autrement dit tous les nœuds avec ce nom) contenus dans le document.</p>
+
+<pre class="brush: css no-line-numbers">/* Cibler tous les éléments &lt;a&gt;. */
+a {
+  color: red;
+}</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">élément { <em>style propriétés</em> }
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">span {
+  background-color: skyblue;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;span&gt;Voici un élément &lt;code&gt;span&lt;/code&gt; avec du texte.&lt;/span&gt;
+&lt;p&gt;Et là un élément &lt;code&gt;p&lt;/code&gt;.&lt;/p&gt;
+&lt;span&gt;Enfin, un autre élément &lt;code&gt;span&lt;/code&gt;.&lt;/span&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', 200, 150)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#basic-concepts', 'type selectors')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.type")}}</p>
diff --git a/files/fr/web/css/sélecteurs_de_voisins_généraux/index.html b/files/fr/web/css/sélecteurs_de_voisins_généraux/index.html
new file mode 100644
index 0000000000..ea97bdbf67
--- /dev/null
+++ b/files/fr/web/css/sélecteurs_de_voisins_généraux/index.html
@@ -0,0 +1,81 @@
+---
+title: Sélecteurs de voisins généraux
+slug: Web/CSS/Sélecteurs_de_voisins_généraux
+tags:
+  - CSS
+  - Débutant
+  - Reference
+  - Sélecteur
+translation_of: Web/CSS/General_sibling_combinator
+---
+<div>{{CSSRef("Selectors")}}</div>
+
+<p>Le combinateur <code>~</code> permet de séparer deux sélecteurs et de cibler un élément si celui-ci correspond au second sélecteur et est précédé (mais pas forcément voisin immédiat) d'un autre élément correspondant au premier sélecteur qui partage le même parent. Les deux éléments sont des fils d'un même parent {{domxref("Element")}}, voisins immédiats ou pas.</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* Parmi tous les éléments &lt;img&gt;, cibler tous
+   éléments &lt;p&gt; qui les suivent. */
+img ~ p {
+  color: red;
+}</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">premier_element ~ second_element { <em>propriétés de style</em> }
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">p ~ span {
+  color: red;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;span&gt;Ici, ce n'est pas rouge.&lt;/span&gt;
+&lt;p&gt;Voici un paragraphe.&lt;/p&gt;
+&lt;code&gt;Un peu de code.&lt;/code&gt;
+&lt;span&gt;Et un autre span.&lt;/span&gt;
+&lt;code&gt;Encore du code&lt;/code&gt;
+&lt;span&gt;Ici aussi, c'est rouge&lt;/span&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', 280, 120)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#general-sibling-combinators', 'following-sibling combinator')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Ce combinateur est renommé en « <em>subsequent-sibling combinator</em> ».</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#general-sibling-combinators', 'general sibling combinator')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.general_sibling")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Sélecteur_de_voisin_direct">Sélecteur de voisin direct</a></li>
+</ul>
diff --git a/files/fr/web/css/sélecteurs_descendant/index.html b/files/fr/web/css/sélecteurs_descendant/index.html
new file mode 100644
index 0000000000..5690dd95e7
--- /dev/null
+++ b/files/fr/web/css/sélecteurs_descendant/index.html
@@ -0,0 +1,109 @@
+---
+title: Sélecteurs descendant
+slug: Web/CSS/Sélecteurs_descendant
+tags:
+  - CSS
+  - Débutant
+  - Reference
+  - Sélecteur
+translation_of: Web/CSS/Descendant_combinator
+---
+<div>{{CSSRef("Selectors")}}</div>
+
+<p>Le <strong>combinateur de descendance</strong>, représenté par un blanc (ou plusieurs blancs à la suite) permet de combiner deux sélecteurs  (sous la forme <code><var>sélecteur₁</var> <var>sélecteur₂</var></code>) afin de cibler les éléments qui correspondent au second sélecteur uniquement si ceux-ci ont un élément ancêtre qui correspond au premier sélecteur. Les sélecteurs qui utilisent ce combinateur sont souvent appelés des sélecteurs de descendants.</p>
+
+<pre class="brush: css no-line-numbers">/* Les éléments &lt;li&gt; qui sont des descendants */
+/* d'un &lt;ul class="mon-truc"&gt; */
+ul.mon-truc li {
+  margin: 2em;
+}</pre>
+
+<p>Techniquement, le combinateur de descendance est représenté par un ou plusieurs blancs (les caractères qui sont des blancs sont : l'espace, le retour chariot, le saut de ligne, la tabulation verticale, la tabulation horizontale) entre deux sélecteurs lorsqu'il n'y a aucun autre combinateur. Les blancs utilisés pour le combinateur peuvent éventuellement contenir des commentaires CSS.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">selecteur1 selecteur2 { <var>/* déclarations CSS */</var> }
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">li {
+  list-style-type: disc;
+}
+
+li li {
+  list-style-type: circle;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;
+    &lt;div&gt;Élément 1&lt;/div&gt;
+    &lt;ul&gt;
+      &lt;li&gt;Sous-élément A&lt;/li&gt;
+      &lt;li&gt;Sous-élément B&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;div&gt;Élément 2&lt;/div&gt;
+    &lt;ul&gt;
+      &lt;li&gt;Sous-élément A&lt;/li&gt;
+      &lt;li&gt;Sous-élément B&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors", "#descendant-combinators", "descendant combinator")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#descendant-combinators', 'descendant combinator')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#descendant-selectors', 'descendant selectors')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#contextual-selectors', 'contextual selectors')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.descendant")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Sélecteurs_enfant">Sélecteur d'enfant</a></li>
+</ul>
diff --git a/files/fr/web/css/sélecteurs_enfant/index.html b/files/fr/web/css/sélecteurs_enfant/index.html
new file mode 100644
index 0000000000..bc24234ef2
--- /dev/null
+++ b/files/fr/web/css/sélecteurs_enfant/index.html
@@ -0,0 +1,94 @@
+---
+title: Sélecteurs enfant
+slug: Web/CSS/Sélecteurs_enfant
+tags:
+  - CSS
+  - Débutant
+  - Reference
+  - Sélecteur
+translation_of: Web/CSS/Child_combinator
+---
+<div>{{CSSRef("Selectors")}}</div>
+
+<p>Le combinateur <code>&gt;</code> sépare deux sélecteurs et cible seulement les éléments correspondant au second sélecteur qui sont des enfants <strong>directs</strong> des éléments ciblés par le premier sélecteur.</p>
+
+<pre class="brush: css no-line-numbers">/* Les éléments &lt;li&gt; qui sont des enfant d'un */
+/* &lt;ul class="mon-truc"&gt; */
+ul.mon-truc&gt;li {
+  margin: 2em;
+}</pre>
+
+<p>En comparaison, lorsque deux sélecteurs sont combinés à l'aide du sélecteur descendant, l'expression formée par la combinaison des deux sélecteurs cible les éléments correspondant au second sélecteur qui ont un parent de n'importe quel niveau qui correspond au premier sélecteur, quelque soit le nombre de « sauts » dans le DOM.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">selecteur1 &gt; selecteur2 { <em>déclarations CSS</em> }
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">span {
+  background-color: white;
+}
+
+div &gt; span {
+  background-color: blue;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;span&gt;Premier span du div.
+    &lt;span&gt;Deuxième span, dans un span dans un div.&lt;/span&gt;
+  &lt;/span&gt;
+&lt;/div&gt;
+&lt;span&gt;Troisième span, en dehors de tout div.&lt;/span&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "100%", 100)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#child-combinators', 'child combinator')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#child-combinators', 'child combinators')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#child-selectors', 'child selectors')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.child")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Sélecteurs_descendant">Le combinateur de descendant</a></li>
+</ul>
diff --git a/files/fr/web/css/sélecteurs_universels/index.html b/files/fr/web/css/sélecteurs_universels/index.html
new file mode 100644
index 0000000000..470d27160c
--- /dev/null
+++ b/files/fr/web/css/sélecteurs_universels/index.html
@@ -0,0 +1,103 @@
+---
+title: Sélecteurs universels
+slug: Web/CSS/Sélecteurs_universels
+tags:
+  - CSS
+  - Reference
+  - Sélecteur
+translation_of: Web/CSS/Universal_selectors
+---
+<div>{{CSSRef("Selectors")}}</div>
+
+<p>L'astérisque (*) est le sélecteur universel en CSS. Il correspond à un élément de n'importe quel type.</p>
+
+<pre class="brush: css no-line-numbers">* {
+  color: green;
+}</pre>
+
+<p>En CSS 3, l'astérisque peut être combinée avec les espaces de nom :</p>
+
+<ul>
+ <li><code>ns|*</code> - correspond à tous les éléments de l'espace de noms <code>ns</code></li>
+ <li><code>*|*</code> - correspond à tous les éléments</li>
+ <li><code>|*</code> - correspond à tous les éléments sans espace de noms déclaré</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">* { <em>style properties</em> }</pre>
+
+<p>L'astérisque est optionnelle lorsqu'elle est utilisée avec des sélecteurs simples. Par exemple, <code>*.warning</code> et <code>.warning</code> seront équivalents.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">* [lang^=fr] {
+  color:green;
+}
+
+*.warning {
+  color:red;
+}
+
+*#maincontent {
+  border: 1px solid blue;
+}
+
+.floating {
+  float: left;
+}
+
+.floating + * {
+  clear: left;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="warning"&gt;
+  &lt;span lang="fr"&gt;Un span vert&lt;/span&gt; dans un paragraphe rouge.
+&lt;/p&gt;
+&lt;p id="maincontent" lang="fr"&gt;
+  &lt;span class="warning"&gt;Un span rouge&lt;/span&gt; dans un paragraphe vert.
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', 250, 100)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#the-universal-selector', 'universal selector')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#universal-selector', 'universal selector')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Définition du comportement avec les espaces de noms et ajout d'indications pour omettre le sélecteur avec les pseudo-éléments.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#universal-selector', 'universal selector')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.universal")}}</p>
diff --git a/files/fr/web/css/tab-size/index.html b/files/fr/web/css/tab-size/index.html
new file mode 100644
index 0000000000..61b80c16e2
--- /dev/null
+++ b/files/fr/web/css/tab-size/index.html
@@ -0,0 +1,98 @@
+---
+title: tab-size
+slug: Web/CSS/tab-size
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/tab-size
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété<strong> <code>tab-size</code></strong> permet d'adapter la largeur utilisée pour représenter le caractère de tabulation (<code>U+0009</code>).</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs entières */
+/* Type &lt;integer&gt;   */
+tab-size: 4;
+tab-size: 0;
+
+/* Valeurs de longueurs */
+/* Type &lt;length&gt;        */
+tab-size: 10px;
+tab-size: 2em;
+
+/* Valeurs globales */
+tab-size: inherit;
+tab-size: initial;
+tab-size: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;integer&gt;")}}</dt>
+ <dd>Le nombre d'espaces qu'occupe une tabulation. La valeur doit être positive.</dd>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>La largeur de la tabulation. La valeur doit être positive.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;pre class="exemple"&gt;
+	print "tabulation avant"
+    print "4 espaces avant"
+  print "2 espaces avant"
+&lt;/pre&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple {
+  tab-size: 5;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","100%")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text', '#tab-size-property', 'tab-size')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.tab-size")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="external" href="http://lists.w3.org/Archives/Public/www-style/2008Dec/0009.html"><cite>Contrôler la taille du caractère de tabulation (U+0009)</cite></a>, un e-mail d'Anne van Kesteren pour le CSSWG afin de proposer la standardisation de cette propriété (en anglais).</li>
+</ul>
diff --git a/files/fr/web/css/table-layout/index.html b/files/fr/web/css/table-layout/index.html
new file mode 100644
index 0000000000..d6c9238751
--- /dev/null
+++ b/files/fr/web/css/table-layout/index.html
@@ -0,0 +1,111 @@
+---
+title: table-layout
+slug: Web/CSS/table-layout
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/table-layout
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>table-layout</code></strong> définit l'algorithme utilisé pour disposer les cellules, lignes et colonnes d'un tableau.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/table-layout.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeur utilisant un mot-clé */
+table-layout: auto;
+table-layout: fixed;
+
+/* Valeurs globales */
+table-layout: inherit;
+table-layout: initial;
+table-layout: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt>{{cssxref("auto")}}</dt>
+ <dd>Un algorithme automatique, utilisé communément par la plupart des navigateurs, est utilisé pour gérer la disposition du tableau. La largeur du tableau et de ses cellules dépendent de leur contenu.</dd>
+ <dt><code>fixed</code></dt>
+ <dd>La largeur du tableau et celles des colonnes sont définies grâce aux largeurs des éléments <code>table</code> et <code>col</code> ou grâce à la largeur (explicite) de la première ligne de cellules. Les cellules des lignes suivantes n'affectent pas la largeur des colonnes.<br>
+ <br>
+ Avec cette méthode « fixée », tout le tableau peut être rendu dès que la première ligne a été téléchargée et analysée. Cela permet d'accélérer le temps de rendu par rapport à la valeur <code>auto</code>. En revanche, le contenu des lignes (en dehors de la première), peut ne pas rentrer dans les colonnes avec la largeur calculée. Les cellules dont le contenu est trop large utiliseront la propriété {{cssxref("overflow")}} pour déterminer comment gérer le dépassement.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Cet exemple utilise <code>table-layout: fixed</code> et une largeur donnée (avec la propriété <code>width</code>) afin que le tableau ne s'agrandisse pas avec son contenu. Ainsi, on peut voir l'effet de la propriété {{cssxref("text-overflow")}} et l'application d'une ellipse pour les mots trop longs pour le tableau.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;table class="exemple"&gt;
+  &lt;tr&gt;
+    &lt;td width="7em"&gt;Jean&lt;/td&gt;
+    &lt;td width="7em"&gt;Biche&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Jean-Roger-Michel&lt;/td&gt;
+    &lt;td&gt;du Domaine de la Biche&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple {
+  table-layout: fixed;
+  width: 120px;
+  border: 1px solid red;
+}
+
+tr, td {
+  border: solid;
+}
+
+td {
+  border: 1px solid blue;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'tables.html#width-layout', 'table-layout')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.table-layout")}}</p>
diff --git a/files/fr/web/css/text-align-last/index.html b/files/fr/web/css/text-align-last/index.html
new file mode 100644
index 0000000000..a0f42f8863
--- /dev/null
+++ b/files/fr/web/css/text-align-last/index.html
@@ -0,0 +1,114 @@
+---
+title: text-align-last
+slug: Web/CSS/text-align-last
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/text-align-last
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>text-align-last</code></strong> définit la façon dont la dernière ligne d'un bloc, ou une ligne avant un retour à la ligne forcé, doit être alignée.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/text-align-last.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs utilisant un mot-clé */
+text-align-last: auto;
+text-align-last: start;
+text-align-last: end;
+text-align-last: left;
+text-align-last: right;
+text-align-last: center;
+text-align-last: justify;
+
+/* Valeurs globales */
+text-align-last: inherit;
+text-align-last: initial;
+text-align-last: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>La ligne concernée est alignée selon la valeur de {{cssxref("text-align")}} sauf si {{cssxref("text-align")}} vaut <code>justify</code>, auquel cas, cela aura le même effet que d'utiliser la valeur <code>start</code> pour <code>text-align-last</code>.</dd>
+ <dt><code>start</code></dt>
+ <dd>Cette valeur a le même effet que la valeur <code>left</code> si la direction du texte va de gauche à droite ou le même effet que <code>right</code> si la direction du texte va de droite à gauche.</dd>
+ <dt><code>end</code></dt>
+ <dd>Cette valeur a le même effet que la valeur <code>right</code> si la direction du texte va de gauche à droite ou le même effet que <code>left</code> si la direction du texte va de droite à gauche.</dd>
+ <dt><code>left</code></dt>
+ <dd>Les contenus en ligne (<em>inline</em>) sont alignés sur le bord gauche de la boîte contenant la ligne.</dd>
+ <dt><code>right</code></dt>
+ <dd>Les contenus en ligne (<em>inline</em>) sont alignés sur le bord droit de la boîte contenant la ligne.</dd>
+ <dt><code>center</code></dt>
+ <dd>Les contenus en ligne (<em>inline</em>) sont horizontalement centrés par rapport à la boîte contenant la ligne.</dd>
+ <dt><code>justify</code></dt>
+ <dd>Le texte est justifié. Les bords gauche et droit du texte sont alignés avec les bord gauche et droit du paragraphe.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="exemple"&gt;
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">.exemple {
+  text-align: justify;
+  text-align-last: center;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","100%")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text', '#text-align-last-property', 'text-align-last')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur le dépôt <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("css.properties.text-align-last")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("text-align")}}</li>
+</ul>
diff --git a/files/fr/web/css/text-align/index.html b/files/fr/web/css/text-align/index.html
new file mode 100644
index 0000000000..50e54360ba
--- /dev/null
+++ b/files/fr/web/css/text-align/index.html
@@ -0,0 +1,227 @@
+---
+title: text-align
+slug: Web/CSS/text-align
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/text-align
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>text-align</code></strong> définit l'alignement horizontal d'un élément de bloc ou de la boîte d'une cellule de tableau. Cette propriété fonctionne donc de façon analogue à {{cssxref("vertical-align")}} mais dans le sens horizontal.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/text-align.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+text-align: left;
+text-align: right;
+text-align: center;
+text-align: justify;
+text-align: justify-all;
+text-align: start;
+text-align: end;
+text-align: match-parent;
+
+/* Dans une cellule de tableau, caractère sur lequel */
+/* doit être aligné le contenu de la cellule         */
+text-align: ".";
+text-align: "." center;
+
+/* Alignement de bloc (non standard) */
+text-align: -moz-center;
+text-align: -webkit-center;
+
+/* Valeurs globales */
+text-align: inherit;
+text-align: initial;
+text-align: unset;
+</pre>
+
+<p>La propriété <code>text-align</code> peut être définie grâce à l'un des mots-clés de la liste qui suit.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>start</code> {{experimental_inline}}</dt>
+ <dd>Cette valeur a le même effet que la valeur <code>left</code> si la direction du texte va de gauche à droite ou le même effet que <code>right</code> si la direction du texte va de droite à gauche.</dd>
+ <dt><code>end</code> {{experimental_inline}}</dt>
+ <dd>Cette valeur a le même effet que la valeur <code>right</code> si la direction du texte va de gauche à droite ou le même effet que <code>left</code> si la direction du texte va de droite à gauche.</dd>
+ <dt><code>left</code></dt>
+ <dd>Les contenus en ligne (<em>inline</em>) sont alignés sur le bord gauche de la boîte contenant la ligne.</dd>
+ <dt><code>right</code></dt>
+ <dd>Les contenus en ligne (<em>inline</em>) sont alignés sur le bord droit de la boîte contenant la ligne.</dd>
+ <dt><code>center</code></dt>
+ <dd>Les contenus en ligne (<em>inline</em>) sont horizontalement centrés par rapport à la boîte contenant la ligne.</dd>
+ <dt><code>justify</code></dt>
+ <dd>Le texte est justifié. Les bords gauche et droit du texte sont alignés avec les bord gauche et droit du paragraphe.</dd>
+ <dt><code>justify-all</code>{{experimental_inline}}</dt>
+ <dd>Comportement analogue à <code>justify</code> mais avec la dernière ligne nécessairement justifiée.</dd>
+ <dt><code>match-parent</code> {{experimental_inline}}</dt>
+ <dd>Semblable à <code>inherit</code> mais les valeurs <code>start</code> et <code>end</code> sont calculées selon la valeur de {{cssxref("direction")}} pour le parent et sont remplacées par <code>left</code> ou <code>right</code> selon ce qui est adéquat.</dd>
+ <dt>{{cssxref("&lt;string&gt;")}} {{experimental_inline}}</dt>
+ <dd>Lorsque cette valeur est appliquée sur une cellule de tableau, elle indique le caractère sur lequel doit être aligné le contenu de la cellule.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Alignement_à_gauche">Alignement à gauche</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p class="exemple"&gt;
+  Il y avait en Vestphalie, dans le château de M. le baron de
+  Thunder-ten-tronckh, un jeune garçon à qui la nature avait
+  donné les moeurs les plus douces. Sa physionomie annonçait
+  son âme. Il avait le jugement assez droit, avec l’esprit le plus
+  simple ; c’est, je crois, pour cette raison qu’on le nommait Candide.
+&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.exemple {
+  text-align: left;
+  border: solid;
+}</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Alignement_à_gauche","100%","100%")}}</p>
+
+<h3 id="Texte_centré">Texte centré</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;p class="exemple"&gt;
+  Il y avait en Vestphalie, dans le château de M. le baron de
+  Thunder-ten-tronckh, un jeune garçon à qui la nature avait
+  donné les moeurs les plus douces. Sa physionomie annonçait
+  son âme. Il avait le jugement assez droit, avec l’esprit le plus
+  simple ; c’est, je crois, pour cette raison qu’on le nommait Candide.
+&lt;/p&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">.exemple {
+  text-align: center;
+  border: solid;
+}</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Texte_centré","100%","100%")}}</p>
+
+<h3 id="Justification">Justification</h3>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;p class="exemple"&gt;
+  Il y avait en Vestphalie, dans le château de M. le baron de
+  Thunder-ten-tronckh, un jeune garçon à qui la nature avait
+  donné les moeurs les plus douces. Sa physionomie annonçait
+  son âme. Il avait le jugement assez droit, avec l’esprit le plus
+  simple ; c’est, je crois, pour cette raison qu’on le nommait Candide.
+&lt;/p&gt;</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css">.exemple {
+  text-align: justify;
+  border: solid;
+}</pre>
+
+<h4 id="Résultat_3">Résultat</h4>
+
+<p>{{EmbedLiveSample("Justification","100%","100%")}}</p>
+
+<h3 id="Notes">Notes</h3>
+
+<p>La méthode la plus générique pour centrer un bloc plutot que de centrer son contenu est d'utiliser la propriété {{cssxref("margin")}} avec les valeurs <code>left</code> et <code>right</code> à <code>auto</code>, e.g. :</p>
+
+<pre class="brush: css">.classe {
+  margin: auto;
+}
+</pre>
+
+<pre class="brush: css">.classe {
+  margin: 0 auto;
+}
+</pre>
+
+<pre class="brush: css">.classe {
+  margin-left: auto;
+  margin-right: auto;
+}
+</pre>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>L'espacement créé entre les mots par la justification du texte peut rendre la lecture difficile pour les personnes dyslexiques ou souffrant de troubles cognitifs.</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html"><em>Understanding Success Criterion 1.4.8  | Understanding WCAG 2.0</em> (en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Logical Properties', '#text-align', 'text-align')}}</td>
+   <td>{{Spec2('CSS Logical Properties')}}</td>
+   <td>Aucun changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Text', '#alignment', 'text-align')}}</td>
+   <td>{{Spec2('CSS4 Text')}}</td>
+   <td>Ajout de la gestion des valeurs <code>&lt;string&gt;</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Text', '#text-align-property', 'text-align')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Ajout des valeurs <code>start</code>, <code>end</code> et <code>match-parent</code>. La valeur initiale qui n'était pas nommée est bien définie avec <code>start</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html#alignment-prop', 'text-align')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Aucun changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#text-align', 'text-align')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.text-align")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("margin","margin:auto")}}</li>
+ <li>{{cssxref("margin-left","margin-left:auto")}}</li>
+ <li>{{cssxref("vertical-align")}}</li>
+</ul>
diff --git a/files/fr/web/css/text-combine-upright/index.html b/files/fr/web/css/text-combine-upright/index.html
new file mode 100644
index 0000000000..3041435d0e
--- /dev/null
+++ b/files/fr/web/css/text-combine-upright/index.html
@@ -0,0 +1,122 @@
+---
+title: text-combine-upright
+slug: Web/CSS/text-combine-upright
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/text-combine-upright
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>text-combine-upright</code></strong> définit comment intégrer une combinaison de plusieurs caractères dans l'espace normalement alloué à un seul caractère. Si la combinaison obtenue est plus large qu'<code>1em</code>, l'agent utilisateur devra compresser le contenu afin qu'il tienne sur <code>1em</code>. La combinaison est ensuite manipulée comme un seul glyphe pour la disposition et pour la décoration. Enfin, cette propriété n'a d'effet que sur les modes d'écriture verticaux.</p>
+
+<p>Cela permet d'obtenir un effet appelé tate-chū-yoko (<span lang="ja">縦中横</span>) en japonais ou <span lang="zh-Hant">直書橫向</span> en chinois.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+text-combine-upright: none;
+text-combine-upright: all;
+
+/* Valeurs pour les chiffres */
+/* 2 chiffres qui se suivent prendront la place
+   d'un caractère dans du texte vertical */
+text-combine-upright: digits;
+/* Compresse jusqu'à 4 chiffres consécutifs afin
+   qu'ils occupent l'espace d'un caractère dans
+   du texte vertical */
+text-combine-upright: digits 4;
+
+/* Valeurs globales */
+text-combine-upright: inherit;
+text-combine-upright: initial;
+text-combine-upright: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Aucun traitement particulier n'est appliqué.</dd>
+ <dt><code>all</code></dt>
+ <dd>L'agent utilisateur tente de compresser tous les caractères consécutifs dans une même boîte afin qu'ils occupent l'espace d'un seul caractère sur l'axe vertical de la boîte.</dd>
+ <dt><code>digits &lt;n&gt;?</code></dt>
+ <dd>L'agent utilisateur tente d'afficher une suite de chiffres ASCII (U+0030–U+0039) avec au plus n caractères afin que cette suite occupe l'espace d'un seul caractère sur l'axe vertical de la boîte. La valeur par défaut (lorsque l'entier n'est pas indiqué) vaut 2. Les entiers en dehors de l'intervalle <code>[2;4]</code> sont considérés comme invalides.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_avec_digits">Exemple avec <code>digits</code></h3>
+
+<p>Utiliser <code>digit</code><code>s</code> nécessite moins de règles et déclarations mais n'est pas encore largement pris en charge par les navigateurs.</p>
+
+<pre class="brush: html">&lt;p lang="ja" class="exempleText"&gt;平成20年4月16日に&lt;/p&gt;
+</pre>
+
+<pre class="brush: css">.exempleText {
+  writing-mode: vertical-lr;
+  text-combine-upright: digits 2;
+  font: 36px serif;
+}</pre>
+
+<p>{{EmbedLiveSample("Exemple_avec_digits", 100, 350, "https://mdn.mozillademos.org/files/12127/tate-chu-yoko.png")}}</p>
+
+<h3 id="Exemple_avec_all">Exemple avec <code>all</code></h3>
+
+<p>Pour utiliser <code>all</code>, on devra baliser chaque fragment de texte horizontal mais cette valeur est actuellement mieux prise en charge que <code>digits</code>.</p>
+
+<pre class="brush: html">&lt;p lang="zh-Hant"&gt;民國&lt;span class="num"&gt;105&lt;/span
+&gt;年&lt;span class="num"&gt;4&lt;/span
+&gt;月&lt;span class="num"&gt;29&lt;/span&gt;日&lt;/p&gt;
+</pre>
+
+<pre class="brush: css">html { writing-mode: vertical-rl; font: 24px serif }
+.num { text-combine-upright: all }
+</pre>
+
+<p>{{EmbedLiveSample("Exemple_avec_all", 250, 300, "https://mdn.mozillademos.org/files/13096/text-combine-upright-all.png")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Writing Modes", "#propdef-text-combine-upright", "text-combine-upright")}}</td>
+   <td>{{Spec2("CSS3 Writing Modes")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS4 Writing Modes", "#propdef-text-combine-upright", "text-combine-upright")}}</td>
+   <td>{{Spec2("CSS4 Writing Modes")}}</td>
+   <td>Ajout de la valeur <code>digits</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.text-combine-upright")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("writing-mode")}},</li>
+ <li>{{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/text-decoration-color/index.html b/files/fr/web/css/text-decoration-color/index.html
new file mode 100644
index 0000000000..1abd04f003
--- /dev/null
+++ b/files/fr/web/css/text-decoration-color/index.html
@@ -0,0 +1,115 @@
+---
+title: text-decoration-color
+slug: Web/CSS/text-decoration-color
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/text-decoration-color
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>text-decoration-color</code></strong> définit la couleur utilisée pour dessiner les lignes décorant le texte (quel que soit le style définit {{cssxref("text-decoration-line")}}).</p>
+
+<p>La propriété raccourcie {{cssxref("text-decoration")}} permet de paramétrer cette propriété et d'autres propriétés associées aux décorations.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/text-decoration-color.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note">
+<p><strong>Note :</strong> Lorsqu'on définit plusieurs décorations à la fois, il peut être plus pratique d'utiliser la propriété raccourcie {{cssxref("text-decoration")}}.</p>
+</div>
+
+<p>Il est préférable d'utiliser cette propriété pour colorer ces décorations plutôt que d'utiliser d'autres éléments HTML.</p>
+
+<div class="note">
+<p><strong>Note :</strong> CSS ne fournit pas de mécanisme spécifique pour définir une couleur par type de ligne. On peut toutefois y parvenir en imbriquant des éléments mis en forme différemment.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Couleurs */
+/* Valeurs de type &lt;color&gt; */
+text-decoration-color: currentColor;
+text-decoration-color: red;
+text-decoration-color: #00ff00;
+text-decoration-color: rgba(255, 128, 128, 0.5);
+text-decoration-color: transparent;
+
+/* Valeurs globales */
+text-decoration-color: inherit;
+text-decoration-color: initial;
+text-decoration-color: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>La propriété <code>color</code> accepte différents mots-clés et valeurs numériques. Pour plus de détails, voir {{cssxref("&lt;color&gt;")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="exemple"&gt;Du texte avec un effet au survol&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple {
+  text-decoration: underline;
+  text-decoration-color: red;
+}
+
+.exemple:hover {
+  color: blue;
+  text-decoration: line-through;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text Decoration', '#text-decoration-color-property', 'text-decoration-color')}}</td>
+   <td>{{Spec2('CSS3 Text Decoration')}}</td>
+   <td>Définition initiale. La propriété {{cssxref("text-decoration")}} n'était pas une propriété raccourcie auparavant.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.text-decoration-color")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La propriété raccourcie {{cssxref("text-decoration")}} qui permet, entre autres, de paramétrer <code>text-decoration-color</code>.</li>
+ <li>Le type de données {{cssxref("&lt;color&gt;")}}</li>
+ <li>D'autres propriétés relatives aux couleurs : {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}}</li>
+ <li><a href="/fr/docs/Web/HTML/Applying_color">Appliquer des couleurs aux éléments HTML</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/css/text-decoration-line/index.html b/files/fr/web/css/text-decoration-line/index.html
new file mode 100644
index 0000000000..8b54586657
--- /dev/null
+++ b/files/fr/web/css/text-decoration-line/index.html
@@ -0,0 +1,108 @@
+---
+title: text-decoration-line
+slug: Web/CSS/text-decoration-line
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/text-decoration-line
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>text-decoration-line</code></strong> définit la façon dont les décorations linéaires sont ajoutées à un élément et notamment leur position (sous le texte, au-dessus ou en travers de celui-ci).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/text-decoration-line.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La propriété raccourcie {{cssxref("text-decoration")}} permet de paramétrer cette propriété et d'autres propriétés associées aux décorations.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+text-decoration-line: none;
+text-decoration-line: underline;
+text-decoration-line: overline;
+text-decoration-line: line-through;
+
+/* Valeurs avec plusieurs mots-clés */
+text-decoration-line: underline overline;                /* On a deux décorations pour la ligne */
+text-decoration-line: overline underline line-through;   /* On a plusieurs décorations */
+
+/* Valeurs globales */
+text-decoration-line: inherit;
+text-decoration-line: initial;
+text-decoration-line: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>Cette propriété peut avoir une ou plusieurs valeurs séparées par des espaces. Si aucune valeur n'est fournie, il n'y a pas de décoration ajoutée :</p>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Aucune ligne ne décore le texte.</dd>
+ <dt><code>underline</code></dt>
+ <dd>Chaque ligne de texte est soulignée.</dd>
+ <dt><code>overline</code></dt>
+ <dd>Une ligne est dessinée au-dessus de chaque ligne de texte.</dd>
+ <dt><code>line-through</code></dt>
+ <dd>Une ligne est dessinée au milieu de chaque ligne de texte.</dd>
+ <dt><code>blink</code> {{deprecated_inline}}</dt>
+ <dd>Le texte clignote. Les agents utilisateurs conformes peuvent ne pas suivre cette directive. Cette valeur est dépréciée et il est conseillé d'utiliser les <a href="/fr/docs/Web/CSS/animation">animations CSS</a> pour obtenir un effet similaire.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Voici un texte souligné avec une vaguelette rouge.&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  text-decoration-line: underline;
+  text-decoration-style: wavy;
+  text-decoration-color: red;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', 300, 60)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text Decoration', '#text-decoration-line', 'text-decoration-line')}}</td>
+   <td>{{Spec2('CSS3 Text Decoration')}}</td>
+   <td>Définition initiale. La propriété {{cssxref("text-decoration")}} n'était pas une propriété raccourcie auparavant.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.text-decoration-line")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La propriété raccourcie {{cssxref("text-decoration")}} qui permet, entre autres, de paramétrer <code>text-decoration-line</code>.</li>
+</ul>
diff --git a/files/fr/web/css/text-decoration-skip-ink/index.html b/files/fr/web/css/text-decoration-skip-ink/index.html
new file mode 100644
index 0000000000..862eccec08
--- /dev/null
+++ b/files/fr/web/css/text-decoration-skip-ink/index.html
@@ -0,0 +1,86 @@
+---
+title: text-decoration-skip-ink
+slug: Web/CSS/text-decoration-skip-ink
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+  - Web
+translation_of: Web/CSS/text-decoration-skip-ink
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>text-decoration-skip-ink</code></strong> définit la façon dont la ligne décorative (en dessous ou au dessus du texte) est dessinée lorsqu'elle rencontre <a href="https://fr.wikipedia.org/wiki/Jambage">le jambage</a> ou <a href="https://fr.wikipedia.org/wiki/F%C3%BBt_(typographie)">la hampe</a> d'un caractère (ou glyphe).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeur avec un mot-clé */
+text-decoration-skip-ink: none;
+text-decoration-skip-ink: auto;
+
+/* Valeurs globales */
+text-decoration-skip: inherit;
+text-decoration-skip: initial;
+text-decoration-skip: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>La ligne décorative traverse l'ensemble des glyphes, qu'ils aient un jambage ou une hampe.</dd>
+ <dt><code>auto</code></dt>
+ <dd>La valeur par défaut : la ligne (au dessus ou en dessous du texte) est uniquement dessinée de façon à ne pas être proche des jambages ou hampes des glyphes. Autrement dit, la ligne est interrompue à chaque fois qu'elle croise un glyphe.</dd>
+ <dd><img alt='An example of "text-decoration-skip: ink;".' src="https://mdn.mozillademos.org/files/13464/decoration-skip-ink.png"></dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Un instant après, Alice était à la poursuite du Lapin dans le terrier…&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[4]">p {
+  margin: 0;
+  font-size: 2em;
+  text-decoration: underline blue;
+  text-decoration-skip-ink: auto;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "100%", 60)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Text Decoration", "#text-decoration-skip-ink-property", "text-decoration-skip-ink")}}</td>
+   <td>{{Spec2("CSS4 Text Decoration")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.text-decoration-skip-ink")}}</p>
diff --git a/files/fr/web/css/text-decoration-skip/index.html b/files/fr/web/css/text-decoration-skip/index.html
new file mode 100644
index 0000000000..39d8c49dfa
--- /dev/null
+++ b/files/fr/web/css/text-decoration-skip/index.html
@@ -0,0 +1,107 @@
+---
+title: text-decoration-skip
+slug: Web/CSS/text-decoration-skip
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/text-decoration-skip
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>text-decoration-skip</code></strong> définit la façon dont les lignes décoratives doivent être appliquées aux éléments et aux caractères. Elle contrôle les lignes décoratives dessinées par l'élément courant ainsi que celles de ses ancêtres.</p>
+
+<pre class="brush: css no-line-numbers">/* Syntaxe avec un mot-clé */
+text-decoration-skip: none;
+text-decoration-skip: objects;
+text-decoration-skip: edges;
+text-decoration-skip: box-decoration;
+text-decoration-skip: spaces;
+
+/* Plusieurs mots-clés */
+text-decoration-skip: object spaces;
+text-decoration-skip: leading-spaces trailing-spaces;
+text-decoration-skip: objects edges box-decoration;
+
+/* Valeurs globales */
+text-decoration-skip: inherit;
+text-decoration-skip: initial;
+text-decoration-skip: unset;
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> La valeur <code>ink</code> initialement définie pour cette propriété a été déplacée vers la propriété {{cssxref("text-decoration-skip-ink")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>La propriété <code>text-decoration</code> s'applique à tous les éléments sélectionnés.</dd>
+ <dt><code>objects</code></dt>
+ <dd>La propriété <code>text-decoration</code> n'est pas appliquée pour les éléments en lignes atomiques telles que les images ou les blocs en lignes.</dd>
+ <dt><code>spaces</code></dt>
+ <dd>Les décorations ne sont pas appliquées où il y a des espaces (c'est-à-dire <a href="https://www.unicode.org/reports/tr44/#White_Space">des caractères Unicode considérés comme des blancs</a>, des séparateurs de mots et toute propriété {{cssxref("letter-spacing")}} ou {{cssxref("word-spacing")}} adjacente).</dd>
+ <dt><code>leading-spaces</code></dt>
+ <dd>Comportement analogue à <code>spaces</code> mais seuls les espaces avant les mots sont ignorés.</dd>
+ <dt><code>trailing-spaces</code></dt>
+ <dd>Comportement analogue à <code>spaces</code> mais seuls les espaces après les mots sont ignorés.</dd>
+ <dt><code>edges</code></dt>
+ <dd>La décoration de <code>text-decoration</code> est rognée vers l'intérieur de la moitié de la largueur de la ligne, vers la droite et la gauche..</dd>
+ <dd><img alt='An example of "text-decoration-skip: edges;".' src="https://mdn.mozillademos.org/files/13466/decoration-skip-edges.png" style="height: 77px; margin: 0px auto; width: 223px;"></dd>
+ <dt><code>box-decoration</code></dt>
+ <dd>La propriété <code>text-decoration</code> n'est pas appliquée pour les marges, bordures et zones de remplissage (<em>padding</em>) des éléments fils.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[4]">p {
+  margin: 0;
+  font-size: 3em;
+  text-decoration: underline;
+  text-decoration-skip: edge;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Bonjour tout le monde, quelle journée !&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "100%", 60)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Text Decoration", "#text-decoration-skip-property", "text-decoration-skip")}}</td>
+   <td>{{Spec2("CSS4 Text Decoration")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.text-decoration-skip")}}</p>
diff --git a/files/fr/web/css/text-decoration-style/index.html b/files/fr/web/css/text-decoration-style/index.html
new file mode 100644
index 0000000000..28db746152
--- /dev/null
+++ b/files/fr/web/css/text-decoration-style/index.html
@@ -0,0 +1,117 @@
+---
+title: text-decoration-style
+slug: Web/CSS/text-decoration-style
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/text-decoration-style
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>text-decoration-style</code></strong> définit le style appliqué sur les lignes visées par {{cssxref("text-decoration-line")}}. Le style s'applique à toutes les lignes définies avec <code>text-decoration-line</code>.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Il n'existe pas de méthode permettant de mettre en forme les lignes décorées différemment les unes des autres.</p>
+</div>
+
+<div>{{EmbedInteractiveExample("pages/css/text-decoration-style.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Si la mise en forme appliquée possède une sémantique forte (par exemple barrer le texte pour indiquer qu'il a été supprimé), on recommande aux auteurs d'utiliser les balises HTML associées si elles existent (par exemple {{HTMLElement("del")}} ou {{HTMLElement("s")}}). Les navigateurs peuvent parfois désactiver la mise en forme et ces éléments permettent de conserver la sémantique du contenu quoi qu'il arrive.</p>
+
+<p>La propriété raccourcie {{cssxref("text-decoration")}} permet de paramétrer cette propriété et d'autres propriétés associées aux décorations.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec des mots-clés */
+text-decoration-style: solid;
+text-decoration-style: double;
+text-decoration-style: dotted;
+text-decoration-style: dashed;
+text-decoration-style: wavy;
+
+/* Valeurs globales */
+text-decoration-style: inherit;
+text-decoration-style: initial;
+text-decoration-style: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>solid</code></dt>
+ <dd>Dessine une ligne.</dd>
+ <dt><code>double</code></dt>
+ <dd>Dessine une double-ligne.</dd>
+ <dt><code>dotted</code></dt>
+ <dd>Dessiner une ligne avec des points.</dd>
+ <dt><code>dashed</code></dt>
+ <dd>Dessine une ligne avec des tirets.</dd>
+ <dt><code>wavy</code></dt>
+ <dd>Dessine une ligne ondulée.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple {
+  -moz-text-decoration-line: underline;
+  -moz-text-decoration-style: wavy;
+  -moz-text-decoration-color: red;
+  -webkit-text-decoration-line: underline;
+  -webkit-text-decoration-style: wavy;
+  -webkit-text-decoration-color: red;
+  text-decoration-line: underline;
+  text-decoration-style: wavy;
+  text-decoration-color: red;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="exemple"&gt;Et voilà le résultat.&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text Decoration', '#text-decoration-style', 'text-decoration-style')}}</td>
+   <td>{{Spec2('CSS3 Text Decoration')}}</td>
+   <td>Définition initiale. La propriété {{cssxref("text-decoration")}} n'était pas une propriété raccourcie auparavant.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.text-decoration-style")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La propriété raccourcie {{cssxref("text-decoration")}} qui permet, entre autres, de paramétrer <code>text-decoration-style</code>.</li>
+</ul>
diff --git a/files/fr/web/css/text-decoration-thickness/index.html b/files/fr/web/css/text-decoration-thickness/index.html
new file mode 100644
index 0000000000..ee195ade44
--- /dev/null
+++ b/files/fr/web/css/text-decoration-thickness/index.html
@@ -0,0 +1,111 @@
+---
+title: text-decoration-thickness
+slug: Web/CSS/text-decoration-thickness
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/text-decoration-thickness
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>text-decoration-thickness</code></strong> définit l'épaisseur ou la largeur de la ligne de décoration utilisée sur le texte d'un élément (la ligne qui raye, souligne ou surligne le texte).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Un seul mot-clé*/
+text-decoration-thickness: auto;
+text-decoration-thickness: from-font;
+
+/* Une valeur de longueur */
+text-decoration-thickness: 0.1em;
+text-decoration-thickness: 3px;
+
+/* Valeurs globales */
+text-decoration-thickness: inherit;
+text-decoration-thickness: initial;
+text-decoration-thickness: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Le navigateur choisit l'épaisseur pour la ligne de décoration.</dd>
+ <dt><code>from-font</code></dt>
+ <dd>Si le fichier de la police indique une épaisseur préférée, c'est cette valeur qui est utilisée. Si le fichier ne contient pas cette information, cette valeur est synonyme de <code>auto</code>.</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Specifies the thickness of text decoration line as a {{cssxref('length')}}, overriding the font file suggestion or the browser default.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="longhand"&gt;Voici du texte avec un soulignement rouge de 2px.&lt;/p&gt;
+&lt;p class="under-and-over"&gt;Celui est souligné et surligné.&lt;/p&gt;
+&lt;p class="shorthand"&gt;Ce texte sera souligné avec une ligne bleue de 1px si la formulation raccourcie est prise en charge.&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.longhand {
+  text-decoration-line: underline;
+  text-decoration-style: solid;
+  text-decoration-color: red;
+  text-decoration-thickness: 2px;
+}
+
+.under-and-over {
+  text-decoration-line: underline overline;
+  text-decoration-style: solid;
+  text-decoration-color: orange;
+  text-decoration-thickness: 0.2rem;
+}
+
+.shorthand {
+  text-decoration: underline solid blue 1px;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '', '', '')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Text Decoration', '#text-decoration-width-property', 'text-decoration-width')}}</td>
+   <td>{{Spec2('CSS4 Text Decoration')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Cette propriété était initialement intitulée <code>text-decoration-width</code> mais fut renommée en 2019 en <code>text-decoration-thickness</code>.</p>
+</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.text-decoration-thickness")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("text-decoration")}}</li>
+ <li>{{cssxref("text-underline-offset")}}</li>
+</ul>
diff --git a/files/fr/web/css/text-decoration/index.html b/files/fr/web/css/text-decoration/index.html
new file mode 100644
index 0000000000..c9c37513a5
--- /dev/null
+++ b/files/fr/web/css/text-decoration/index.html
@@ -0,0 +1,148 @@
+---
+title: text-decoration
+slug: Web/CSS/text-decoration
+tags:
+  - CSS
+  - Propriété
+  - Propriété raccourcie
+  - Reference
+translation_of: Web/CSS/text-decoration
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>text-decoration</code></strong> est utilisée pour « décorer » le texte en ajoutant une ligne pouvant être positionnée sous, sur ou à travers le texte. C'est une <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">propriété raccourcie</a> qui permet de paramétrer simultanément les propriétés « détaillées » : {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}} et {{cssxref("text-decoration-style")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/text-decoration.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Ces décorations se propagent sur les différents éléments enfants. Cela signifie qu'il n'est pas possible de désactiver la décoration d'un élément descendant pour lequel un ancêtre est décoré. Par exemple, avec ce fragment de HTML <code>&lt;p&gt;Ce texte a &lt;em&gt; des mots mis en avant&lt;/em&gt; dedans.&lt;/p&gt;</code>, et cette règle CSS <code>p { text-decoration: underline; }</code>, on aura tout le  paragraphe souligné, même si on applique la règle <code>em { text-decoration: none; }</code>, cela n'aurait aucun impact. En revanche, ajouter la règle <code>em { text-decoration: overline; }</code> entraînerait un cumul des décorations pour « des mots mis en avant ».</p>
+
+<div class="note style-wrap">
+<p><strong>Note : </strong>La spécification CSS Text Decoration de niveau 3 indique que cette propriété est une propriété raccourcie pour les trois propriétés {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}} et {{cssxref("text-decoration-style")}}. Comme pour les autres propriétés raccourcies, cela signifie que la valeur de chaque « sous-propriété » est réinitialisée avec sa valeur par défaut si elle n'est pas explicitement définie dans la propriété raccourcie.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* Valeurs avec mots-clés */
+text-decoration: none;                 /* Aucune décoration */
+text-decoration: underline red;        /* On souligne en rouge */
+text-decoration: underline wavy red;   /* On souligne en rouge avec */
+                                       /* une ligne ondulée */
+
+/* Valeurs globales */
+text-decoration: inherit;
+text-decoration: initial;
+text-decoration: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt>{{cssxref("text-decoration-line")}}</dt>
+ <dd>Cette valeur indique le type de décoration utilisée.</dd>
+ <dt>{{cssxref("text-decoration-color")}}</dt>
+ <dd>Cette valeur indique la couleur de la décoration utilisée.</dd>
+ <dt>{{cssxref("text-decoration-style")}}</dt>
+ <dd>Cette valeur indique le style à utiliser pour la décoration.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">.under {
+  text-decoration: underline red;
+}
+
+.over {
+  text-decoration: wavy overline lime;
+}
+
+.line {
+  text-decoration: line-through;
+}
+
+.plain {
+  text-decoration: none;
+}
+
+.underover {
+  text-decoration: dashed underline overline;
+}
+
+.blink {
+  text-decoration: blink;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p class="under"&gt;Ce texte a une ligne en dessous.&lt;/p&gt;
+&lt;p class="over"&gt;Ce texte a une ligne au dessus.&lt;/p&gt;
+&lt;p class="line"&gt;Ce texte est barré d'une ligne.&lt;/p&gt;
+&lt;p&gt;Ce &lt;a class="plain" href="#"&gt;lien ne sera pas souligné&lt;/a&gt;,
+    comme les liens le sont normalement. Attention à ces décorations
+    sur les ancres cars le soulignement sert souvent d'indication pour
+    un hyperlien.&lt;/p&gt;
+&lt;p class="underover"&gt;Ce texte a des lignes en dessous et au dessus.&lt;/p&gt;
+&lt;p class="blink"&gt;Ce texte peut clignoter selon le navigateur utilisé.&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples','auto','280')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text Decoration', '#text-decoration-property', 'text-decoration')}}</td>
+   <td>{{Spec2('CSS3 Text Decoration')}}</td>
+   <td>Transformée comme une propriété raccourcie. Ajout du support pour la valeur de {{cssxref('text-decoration-style')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html#lining-striking-props', 'text-decoration')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Pas de changement significatif.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#text-decoration', 'text-decoration')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.text-decoration")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'attribut {{cssxref("list-style")}} qui contrôle la façon dont les éléments apparaissent dans les listes HTML {{HTMLElement("ol")}} et {{HTMLElement("ul")}}.</li>
+ <li>Les propriétés détaillées associées à cette propriété raccourcie :
+  <ul>
+   <li>{{cssxref("text-decoration-line")}}</li>
+   <li>{{cssxref("text-decoration-color")}}</li>
+   <li>{{cssxref("text-decoration-style")}}.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/text-emphasis-color/index.html b/files/fr/web/css/text-emphasis-color/index.html
new file mode 100644
index 0000000000..5b6f24d086
--- /dev/null
+++ b/files/fr/web/css/text-emphasis-color/index.html
@@ -0,0 +1,97 @@
+---
+title: text-emphasis-color
+slug: Web/CSS/text-emphasis-color
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/text-emphasis-color
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>text-emphasis-color</code></strong> définit la couleur utilisée pour dessiner les marques d'emphase. Celle-ci peut être (re)définie grâce à la propriété raccourcie {{cssxref("text-emphasis")}}.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeur initiale */
+text-emphasis-color: currentColor;
+
+/* Valeur de couleur */
+/* Type &lt;color&gt; */
+text-emphasis-color: #555;
+text-emphasis-color: blue;
+text-emphasis-color: rgba(90, 200, 160, 0.8);
+text-emphasis-color: transparent;
+
+/* Valeurs globales */
+text-emphasis-color: inherit;
+text-emphasis-color: initial;
+text-emphasis-color: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>Définit la couleur utilisée pour les marques. Si on ne définit pas de couleur, ce sera la couleur courante du texte qui sera utilisée.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;&lt;em&gt;Coucou&lt;/em&gt;, je suis &lt;em&gt;là&lt;/em&gt;&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">em {
+  text-emphasis-style: sesame;
+  text-emphasis-color: blue;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text Decoration', '#text-emphasis-color-property', 'text-emphasis')}}</td>
+   <td>{{Spec2('CSS3 Text Decoration')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.text-emphasis-color")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref('text-emphasis-style')}}</li>
+ <li>{{cssxref('text-emphasis')}}.</li>
+ <li>{{cssxref('text-emphasis-position')}}</li>
+ <li>Le type de données {{cssxref("&lt;color&gt;")}}</li>
+ <li>D'autres propriétés relatives aux couleurs {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}}</li>
+ <li><a href="/fr/docs/Web/HTML/Applying_color">Appliquer des couleurs sur des éléments HTML</a></li>
+</ul>
diff --git a/files/fr/web/css/text-emphasis-position/index.html b/files/fr/web/css/text-emphasis-position/index.html
new file mode 100644
index 0000000000..2dfa5fb7cb
--- /dev/null
+++ b/files/fr/web/css/text-emphasis-position/index.html
@@ -0,0 +1,167 @@
+---
+title: text-emphasis-position
+slug: Web/CSS/text-emphasis-position
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/text-emphasis-position
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>text-emphasis-position</code></strong> permet de décrire l'emplacement des marques d'emphase quand elles sont utilisées. L'ajout des marques a le même effet que <a href="/fr/docs/Web/HTML/Element/ruby">les annotations ruby</a> quant à la hauteur de ligne : s'il n'y a pas suffisamment de place, la hauteur de la ligne est augmentée.</p>
+
+<pre class="brush:css">/* Valeur initiale */
+text-emphasis-position: over right;
+
+/* Valeurs avec mot-clé */
+text-emphasis-position: over left;
+text-emphasis-position: under right;
+text-emphasis-position: under left;
+
+
+text-emphasis-position: left over;
+text-emphasis-position: right under;
+text-emphasis-position: left under;
+
+/* Valeurs globales */
+text-emphasis-position: inherit;
+text-emphasis-position: initial;
+text-emphasis-position: unset;
+</pre>
+
+<h2 id="Position_privilégiée">Position privilégiée</h2>
+
+<p>La position des marques d'emphase varie en fonction du langage. Par exemple, en japonais, on préfère les placer au dessus à droite. En revanche, pour le chinois, on préfèrera en bas à droite. Le tableau qui suit illustre les différences, notamment entre le chinois, le mongolien et le japonais  :</p>
+
+<table>
+ <caption>Position privilégiée pour les marques d'emphase en ruby</caption>
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col">Langue</th>
+   <th colspan="2" scope="col">Position</th>
+   <th colspan="2" rowspan="2" scope="col">Illustration</th>
+  </tr>
+  <tr>
+   <th>Horizontale</th>
+   <th>Verticale</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Japanese</td>
+   <td rowspan="2">au dessus</td>
+   <td rowspan="2">à droite</td>
+   <td rowspan="2"><img alt="Emphasis marks appear over each emphasized character in horizontal Japanese text." src="https://drafts.csswg.org/css-text-decor-3/images/text-emphasis-ja.png" style="height: 28px; width: 225px;" title="Emphasis (shown in blue for clarity) applied above a fragment of Japanese text"></td>
+   <td rowspan="3"><img alt="Emphasis marks appear on the right of each emphasized character in vertical Japanese text." src="https://drafts.csswg.org/css-text-decor-3/images/text-emphasis-v.gif" style="height: 89px; width: 34px;" title="Emphasis applied on the right of a fragment of Japanese text"></td>
+  </tr>
+  <tr>
+   <td>Mongolian</td>
+  </tr>
+  <tr>
+   <td>Chinese</td>
+   <td>en dessous</td>
+   <td>à droite</td>
+   <td><img alt="Emphasis marks appear below each emphasized character in horizontal Simplified Chinese text." src="https://drafts.csswg.org/css-text-decor-3/images/text-emphasis-zh.gif" style="height: 28px; width: 133px;" title="Emphasis (shown in blue for clarity) applied below a fragment of Chinese text"></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note :</strong> La propriété <code>text-emphasis-position</code> ne peut pas être définie (et donc ne peut pas être redéfinie) avec la propriété raccourcie {{cssxref("text-emphasis")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code><dfn>over</dfn></code></dt>
+ <dd>Les marques sont dessinées au-dessus du texte lorsqu'il est écrit en mode horizontal.</dd>
+ <dt><code><dfn>under</dfn></code></dt>
+ <dd>Les marques sont dessinées en-dessous du texte lorsqu'il est écrit en mode horizontal.</dd>
+ <dt><code><dfn>right</dfn></code></dt>
+ <dd>Les marques sont dessinées à droite du texte lorsqu'il est écrit en mode vertical.</dd>
+ <dt><code><dfn>left</dfn></code></dt>
+ <dd>Les marques sont dessinées à gauche du texte lorsqu'il est écrit en mode vertical.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Masquer_les_marques">Masquer les marques</h3>
+
+<p>Certains éditeurs préfèrent masquer les marques d'emphase lorsque celles-ci entre en conflit avec les annotations ruby. On peut utiliser la règle suivante :</p>
+
+<pre class="brush: css">ruby {
+  text-emphasis: none;
+}
+</pre>
+
+<p>D'autres préfèrent masquer le contenu ruby et privilégier les marques d'emphase. On peut obtenir cet effet avec les déclarations suivantes :</p>
+
+<pre class="brush: css">em {
+ /* On utilise text-emphasis pour les &lt;em&gt; */
+  text-emphasis: dot;
+}
+
+em rt {
+ /* On masque le ruby dans les éléments &lt;em&gt; */
+  display: none;
+}</pre>
+
+<h3 id="Exemple_live">Exemple <em>live</em></h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;&lt;em&gt;Coucou&lt;/em&gt;, je suis &lt;em&gt;là&lt;/em&gt;&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">em {
+  text-emphasis-style: sesame;
+  text-emphasis-position: under right;
+}</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemple_live","100%","100%")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text Decoration', '#text-emphasis-position-property', 'text-emphasis')}}</td>
+   <td>{{Spec2('CSS3 Text Decoration')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.text-emphasis-position")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("text-emphasis-style")}}</li>
+ <li>{{cssxref("text-emphasis-color")}}</li>
+ <li>{{cssxref("text-emphasis")}}</li>
+</ul>
diff --git a/files/fr/web/css/text-emphasis-style/index.html b/files/fr/web/css/text-emphasis-style/index.html
new file mode 100644
index 0000000000..950aef3ddc
--- /dev/null
+++ b/files/fr/web/css/text-emphasis-style/index.html
@@ -0,0 +1,115 @@
+---
+title: text-emphasis-style
+slug: Web/CSS/text-emphasis-style
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/text-emphasis-style
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>text-emphasis-style</code></strong> définit le type d'emphase utilisée. Celui-ci peut également être (re)défini via la propriété raccourcie {{cssxref("text-emphasis")}}.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeur initiale */
+/* Aucune marque d'emphase */
+text-emphasis-style: none;
+
+/*  Valeur distincte */
+text-emphasis-style: 'x';
+text-emphasis-style: '点';
+text-emphasis-style: '\25B2';
+text-emphasis-style: '*';
+
+/* Valeurs avec un mot-clé */
+text-emphasis-style: filled;
+text-emphasis-style: open;
+text-emphasis-style: filled sesame;
+text-emphasis-style: open sesame;
+
+/* Valeurs globales */
+text-emphasis-style: inherit;
+text-emphasis-style: initial;
+text-emphasis-style: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Aucune marque d'emphase.</dd>
+ <dt><code>filled</code></dt>
+ <dd>La forme est remplie avec une couleur unie. Si <code>filled</code> ou <code>open</code> est absent, ce sera la valeur par défaut.</dd>
+ <dt><code>open</code></dt>
+ <dd>La forme est vide.</dd>
+ <dt><code>dot</code></dt>
+ <dd>Cette valeur permet d'afficher des marques en forme de points. Le point rempli est le caractère <code>'•'</code> (<code>U+2022</code>) et le point vide est le caractère <code>'◦'</code> (<code>U+25E6</code>).</dd>
+ <dt><code>circle</code></dt>
+ <dd>Cette valeur permet d'afficher des marques en forme de cercles (plus grands que les points). Le cercle rempli est le caractère <code>'●'</code> (<code>U+25CF</code>) et celui pour le cercle ouvert est <code>'○'</code> (<code>U+25CB</code>).</dd>
+ <dt><code>double-circle</code></dt>
+ <dd>Cette valeur permet d'afficher des marques en forme de doubles cercles. Le double-cercle rempli est le caractère <code>'◉'</code> (<code>U+25C9</code>), et le double-cercle ouvert est le caractère <code>'◎'</code> (<code>U+25CE</code>).</dd>
+ <dt><code>triangle</code></dt>
+ <dd>Cette valeur permet d'afficher des marques en forme de triangles. Le triangle rempli correspond au caractère <code>'▲'</code> (<code>U+25B2</code>) et le triangle ouvert au caractère <code>'△'</code> (<code>U+25B3</code>).</dd>
+ <dt><code>sesame</code></dt>
+ <dd>Cette valeur permet d'afficher des marques en forme de points sésame :<code>'﹅'</code> (<code>U+FE45</code>) pour le caractère rempli et <code>'﹆'</code> (<code>U+FE46</code>) pour le caractère ouvert.</dd>
+ <dt><code>&lt;string&gt;</code></dt>
+ <dd>Utilise la chaîne fournie comme marque. Attention, l'agent utilisateur peut tronquer la chaîne ou choisir d'ignorer les chaînes qui ont plus d'un graphème. Il est donc conseillé de n'utiliser qu'une seule lettre.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;&lt;em&gt;Coucou&lt;/em&gt;, je suis &lt;em&gt;là&lt;/em&gt;&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css"><code>em {
+  text-emphasis-style: sesame;
+}</code></pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text Decoration', '#text-emphasis-style-property', 'text-emphasis')}}</td>
+   <td>{{Spec2('CSS3 Text Decoration')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.text-emphasis-style")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref('text-emphasis-color')}}</li>
+ <li>{{cssxref('text-emphasis')}}.</li>
+ <li>{{cssxref('text-emphasis-position')}}</li>
+</ul>
diff --git a/files/fr/web/css/text-emphasis/index.html b/files/fr/web/css/text-emphasis/index.html
new file mode 100644
index 0000000000..cf604b5fd5
--- /dev/null
+++ b/files/fr/web/css/text-emphasis/index.html
@@ -0,0 +1,135 @@
+---
+title: text-emphasis
+slug: Web/CSS/text-emphasis
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/text-emphasis
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>text-emphasis</code></strong> est une propriété raccourcie qui permet de définir {{cssxref("text-emphasis-style")}} et {{cssxref("text-emphasis-color")}} avec une seule déclaration. Cette propriété appliquera les marques d'emphase définies sur chaque caractères du texte de l'élément sauf pour les séparateurs (comme les espaces) et les caractères de contrôle.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/text-emphasis.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La propriété <code>text-emphasis</code> est différente de {{cssxref("text-decoration")}}. La propriété <code>text-decoration</code> n'a pas d'héritage et la décoration est appliquée sur tout l'élément. Cependant, <code>text-emphasis</code> a un héritage et il est donc possible de changer la marque selon les « descendants » d'un élément.</p>
+
+<p>La taille du symbole d'emphase, comme celle des symboles Ruby, représente environ 50% de la taille de la police du texte. <code>text-emphasis</code> peut modifier la hauteur de la ligne lorsque l'interlignage n'est pas suffisant pour placer les marques.</p>
+
+<div class="note">
+<p><strong>Note :</strong> <code>text-emphasis</code> ne réinitialise pas la valeur de {{cssxref("text-emphasis-position")}}. En effet, bien que la couleur et le style des marques puisse varier, il est très peu probable qu'on change leurs positions au cours du même document.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css  no-line-numbers">/* Valeur initiale */
+text-emphasis: none; /* Pas de marque */
+
+/* Chaîne de caractères */
+/* Type &lt;string&gt;        */
+text-emphasis: 'x';
+text-emphasis: '点';
+text-emphasis: '\25B2';
+text-emphasis: '*' #555;
+/* À ne pas utiliser, cela pourra être */
+/* considéré comme 't' uniquement      */
+text-emphasis: 'toto';
+
+/* Valeurs avec mot(s)-clé(s) */
+text-emphasis: filled;
+text-emphasis: open;
+text-emphasis: filled sesame;
+text-emphasis: open sesame;
+
+/* Valeurs avec mots-clés, combinés à une couleur */
+text-emphasis: filled sesame #555;
+
+/* Valeurs globales */
+text-emphasis: inherit;
+text-emphasis: initial;
+text-emphasis: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Il n'y aura pas de marques d'emphase appliquées.</dd>
+ <dt><code>filled</code></dt>
+ <dd>La forme de la marque est remplie avec une couleur unie. Si aucun des mots-clés parmi <code>filled</code> ou <code>open</code> n'est présent, ce sera la valeur par défaut.</dd>
+ <dt><code>open</code></dt>
+ <dd>La forme de la marque est évidée.</dd>
+ <dt><code>dot</code></dt>
+ <dd>La forme de la marque est un petit cercle. Le cercle plein est le caractère <code>'•'</code> (<code>U+2022</code>) et celui qui est évidé est <code>'◦'</code> (<code>U+25E6</code>).</dd>
+ <dt><code>circle</code></dt>
+ <dd>La forme de la marque est un grand cercle. Le cercle plein est le caractère <code>'●'</code> (<code>U+25CF</code>) et celui du cercle évidé est <code>'○'</code> (<code>U+25CB</code>). Lorsqu'aucune forme n'est spécifiée, c'est la forme par défaut utilisée pour les modes d'écriture horizontaux.</dd>
+ <dt><code>double-circle</code></dt>
+ <dd>La forme de la marque est un double-cercle. Le double-cercle plein est le caractère <code>'◉'</code> (<code>U+25C9</code>), celui du double-cercle évidé est <code>'◎'</code> (<code>U+25CE</code>).</dd>
+ <dt><code>triangle</code></dt>
+ <dd>La forme de la marque est un triangle. Le triangle plein correspond au caractère <code>'▲'</code> (<code>U+25B2</code>) et celui du triangle évidé correspond à <code>'△'</code> (<code>U+25B3</code>).</dd>
+ <dt><code>sesame</code></dt>
+ <dd>La forme de la marque est un sésame. Le sésame plein correspond au caractère <code>'﹅'</code> (<code>U+FE45</code>) et celui du sésame évidé correspond à <code>'﹆'</code> (<code>U+FE46</code>). Lorsqu'aucune forme n'a été définie, c'est la forme par défaut qui est utilisée pour les marques d'emphase pour les modes d'écriture verticaux.</dd>
+ <dt><code>&lt;string&gt;</code></dt>
+ <dd>La marque affichée sera la chaîne de caractères. Attention à n'utiliser que des chaînes d'un seul caractère. L'agent utilisateur peut tronquer ou ignorer les chaînes qui comportent plusieurs graphèmes.</dd>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>Définit la couleur utilisée pour la marque. Si aucune couleur n'est définie, la valeur utilisée par défaut sera <code>currentColor</code>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;&lt;em&gt;Coucou&lt;/em&gt;, je suis &lt;em&gt;là&lt;/em&gt;&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">em {
+  text-emphasis: sesame blue;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text Decoration', '#text-emphasis-property', 'text-emphasis')}}</td>
+   <td>{{Spec2('CSS3 Text Decoration')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.text-emphasis")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref('text-emphasis-style')}}</li>
+ <li>{{cssxref('text-emphasis-color')}}</li>
+ <li>{{cssxref('text-emphasis-position')}}</li>
+</ul>
diff --git a/files/fr/web/css/text-indent/index.html b/files/fr/web/css/text-indent/index.html
new file mode 100644
index 0000000000..de7e3f2b7f
--- /dev/null
+++ b/files/fr/web/css/text-indent/index.html
@@ -0,0 +1,144 @@
+---
+title: text-indent
+slug: Web/CSS/text-indent
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/text-indent
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>text-indent</code></strong> définit la longueur qui doit être laissée avant le début de la première ligne d'un élément contenant du texte.</p>
+
+<p>L'espacement horizontal se fait en accord avec la bord gauche (ou droit pour les dispositions de droite à gauche) de l'élément contenant le texte. Par défaut, cela ne contrôle que l'indentation de la première ligne du bloc mais les mots-clés <code>hanging</code> et <code>each-line</code> peuvent être utilisés pour modifier ce comportement.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/text-indent.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+text-indent: 3mm;
+text-indent: 40px;
+
+/* Valeurs de pourcentages */
+/* relatives à la largeur  */
+/* du bloc englobant       */
+/* Type &lt;percentage&gt;       */
+text-indent: 15%;
+
+/* Valeurs avec un mot-clé */
+text-indent: 5em each-line;
+text-indent: 5em hanging;
+text-indent: 5em hanging each-line;
+
+/* Valeurs globales */
+text-indent: inherit;
+text-indent: initial;
+text-indent: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>L'indentation est définie de façon absolue avec une longueur ({{cssxref("&lt;length&gt;")}}). On peut utiliser des valeurs négatives. Voir la page sur {{cssxref("&lt;length&gt;")}} pour les différentes unités possibles.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>L'indentation est définie en proportion de la largeur du bloc englobant (type {{cssxref("&lt;percentage&gt;")}}).</dd>
+ <dt><code>each-line</code> {{experimental_inline}}</dt>
+ <dd>L'indentation n'affecte que la première ligne du bloc et chaque ligne située après un saut de ligne forcé. Cela n'affecte pas les lignes situées après un retour à la ligne automatique (<em>wrap</em>).</dd>
+ <dt><code>hanging</code> {{experimental_inline}}</dt>
+ <dd>Inverse les lignes indentées. Toutes les lignes, sauf la première, seront indentées.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Indentation_simple">Indentation simple</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt;
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">p {
+  text-indent: 5em;
+  background: powderblue;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Indentation_simple','100%','100%') }}</p>
+
+<h3 id="Indentation_proportionnelle">Indentation proportionnelle</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt;
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt; </pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">p {
+  text-indent: 30%;
+  background: plum;
+}</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample('Indentation_proportionnelle','100%','100%')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text', '#text-indent-property', 'text-indent')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Ajout des mots-clés <code>hanging</code> et <code>each-line</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'text-indent')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>text-indent</code> peut être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html#indentation-prop', 'text-indent')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>The behavior with <code>display: inline-block</code> and anonymous block boxes have been explicitly defined.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#text-indent', 'text-indent')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.text-indent")}}</p>
diff --git a/files/fr/web/css/text-justify/index.html b/files/fr/web/css/text-justify/index.html
new file mode 100644
index 0000000000..65e314a68d
--- /dev/null
+++ b/files/fr/web/css/text-justify/index.html
@@ -0,0 +1,116 @@
+---
+title: text-justify
+slug: Web/CSS/text-justify
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/text-justify
+---
+<div>{{CSSRef}}</div>
+
+<p>la propriété CSS <strong><code>text-justify</code></strong> définit le type de justification à appliquer au texte justifié (par exemple avec {{cssxref("text-align")}}<code>: justify;</code>).</p>
+
+<pre class="brush: css no-line-numbers">text-justify: none;
+text-justify: auto;
+text-justify: inter-word;
+text-justify: inter-character;
+text-justify: distribute;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <code>text-justify</code> peut être définie grâce à l'un des mots-clés suivants.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Le texte ne sera pas justifié— cela aura le même effet que de ne pas définir {{cssxref("text-align")}}, mais cela peut se révéler utile pour activer ou désactiver globalement la justification.</dd>
+ <dt><code>auto</code></dt>
+ <dd>
+ <p>Le navigateur choisira la meilleure justification pour la situation, en se basant sur le rapport entre performance et qualité, mais également sur la valeur la plus appropriée par rapport à la langue (français, langues CJK, etc.). C'est la propriété par défaut, qui est appliquée lorsque <code>text-justify</code> n'est pas définie.</p>
+ </dd>
+ <dt><code>inter-word</code></dt>
+ <dd>Le texte est justifié en ajustant les espaces entre les mots (en faisant varier {{cssxref("word-spacing")}}) ; cette propriété est appropriée pour les langues qui séparent les mots avec des espaces, comme le Français ou le Coréen.</dd>
+ <dt><code>inter-character</code></dt>
+ <dd>Le texte est justifié en ajustant les espaces entre les caractères (en faisant varier {{cssxref("letter-spacing")}}) ;  cette propritété est plus appropriée pour des langues comme le Japonais.</dd>
+ <dt><code>distribute</code> {{deprecated_inline}}</dt>
+ <dd>Même effet que <code>inter-character</code> ; cette valeur sert uniquement à de fins de compatibilité.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: html">&lt;p class="none"&gt;&lt;code&gt;text-justify: none&lt;/code&gt; — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.&lt;/p&gt;
+&lt;p class="auto"&gt;&lt;code&gt;text-justify: auto&lt;/code&gt; — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.&lt;/p&gt;
+&lt;p class="dist"&gt;&lt;code&gt;text-justify: distribute&lt;/code&gt; — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.&lt;/p&gt;
+&lt;p class="word"&gt;&lt;code&gt;text-justify: inter-word&lt;/code&gt; — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.&lt;/p&gt;
+&lt;p class="char"&gt;&lt;code&gt;text-justify: inter-character&lt;/code&gt; — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.&lt;/p&gt;</pre>
+
+<pre class="brush: css">p {
+  font-size: 1.5em;
+  border: 1px solid black;
+  padding: 10px;
+  width: 95%;
+  margin: 10px auto;
+  text-align: justify;
+}
+
+.none {
+  text-justify: none;
+}
+
+.auto {
+  text-justify: auto;
+}
+
+.dist {
+  text-justify: distribute;
+}
+
+.word {
+  text-justify: inter-word;
+}
+
+.char {
+  text-justify: inter-character;
+}</pre>
+
+<p>{{EmbedLiveSample("Exemples","100%",400)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text', '#text-justify-property', 'text-justify')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_avec_les_navigateurs">Compatibilité avec les navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<div>{{Compat("css.properties.text-justify")}}</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("text-align")}}</li>
+</ul>
diff --git a/files/fr/web/css/text-orientation/index.html b/files/fr/web/css/text-orientation/index.html
new file mode 100644
index 0000000000..adf52e134b
--- /dev/null
+++ b/files/fr/web/css/text-orientation/index.html
@@ -0,0 +1,107 @@
+---
+title: text-orientation
+slug: Web/CSS/text-orientation
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/text-orientation
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>text-orientation</code></strong> définit l'orientation du texte sur une ligne. Cette propriété n'a d'effet qu'en mode vertical (autrement dit, quand {{cssxref("writing-mode")}} n'est pas <code>horizontal-tb</code>). Elle est utile pour contrôler l'affichage de l'écriture pour les langues dont le script est vertical. Elle permet aussi de gérer les en-têtes de tableaux verticaux.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/text-orientation.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+text-orientation: mixed;
+text-orientation: upright;
+text-orientation: sideways-right;
+text-orientation: sideways-left;
+text-orientation: sideways;
+text-orientation: use-glyph-orientation;
+
+/* Valeurs globales */
+text-orientation: inherit;
+text-orientation: initial;
+text-orientation: unset;
+</pre>
+
+<p>La propriété <code>text-orientation</code> peut valoir l'un des mots-clés suivants.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>mixed</code></dt>
+ <dd>Ce mot-clé permet de tourner les caractères de 90° dans le sens des aiguilles d'une montre pour les scripts horizontaux, les glyphes des scripts verticaux sont affichés normalement. C'est la valeur par défaut.</dd>
+ <dt><code>upright</code></dt>
+ <dd>Ce mot-clé permet d'afficher les caractères des scripts horizontaux normalement et d'afficher les glyphes des scripts verticaux « debout ». Ce mot-clé implique que tous les caractères soient considérés comme <em>ltr</em> (<em>left-to-right</em> ou gauche à droite). La valeur utilisée pour {{cssxref("direction")}} sera <code>ltr</code>, quelle que soit celle définie par l'utilisateur.</dd>
+ <dt><code>sideways</code></dt>
+ <dd>Ce mot-clé permet d'afficher les caractères comme s'ils étaient disposés horizontalement et que la ligne de base était tournée de 90° dans le sens des aiguilles d'une montre.</dd>
+ <dt><code>sideways-right</code></dt>
+ <dd>Un alias pour <code>sideways</code> conservé pour des raisons de compatibilité.</dd>
+ <dt><code>use-glyph-orientation</code></dt>
+ <dd>Pour les éléments SVG, ce mot-clé permet d'utiliser la valeur des propriétés SVG dépréciées <code>glyph-orientation-vertical</code> et <code>glyph-orientation-horizontal</code>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="monTexte"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.monTexte {
+  writing-mode: vertical-rl;
+  text-orientation: sideways;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%",200)}}</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Writing Modes', '#text-orientation', 'text-orientation')}}</td>
+   <td>{{Spec2('CSS3 Writing Modes')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.text-orientation")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("writing-mode")}}</li>
+ <li>{{cssxref("text-combine-upright")}}</li>
+ <li>{{cssxref("unicode-bidi")}}</li>
+</ul>
diff --git a/files/fr/web/css/text-overflow/index.html b/files/fr/web/css/text-overflow/index.html
new file mode 100644
index 0000000000..cd18e2e925
--- /dev/null
+++ b/files/fr/web/css/text-overflow/index.html
@@ -0,0 +1,343 @@
+---
+title: text-overflow
+slug: Web/CSS/text-overflow
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/text-overflow
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>text-overflow</code></strong> définit la façon dont le contenu textuel qui dépasse d'une boîte est signalé pour les utilisateurs. Le texte peut être rogné (<em>clipping</em>), afficher une ellipse ('<code>…</code>', <code style="text-transform: uppercase;">U+2026 Horizontal Ellipsis</code>) ou afficher une chaîne de caractères choisie.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/text-overflow.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Le rognage se fera à la bordure de la boîte. Afin que le rognage se fasse plus tôt, à la limite des caractères, on peut utiliser la chaîne vide (<code>''</code>).</p>
+
+<p>Cette propriété n'affecte que le contenu qui dépasse de la boîte englobante dans le sens de la progression en ligne. Par exemple, on ne parle pas ici du texte qui dépasserait vers le bas d'une boîte. Le texte peut dépasser lorsqu'on empêche le retour automatique à la ligne (par exemple avec <code class="css">white-space: nowrap</code>) ou lorsqu'un seul mot est trop long pour tenir dans le conteneur.</p>
+
+<p>Cette  propriété CSS ne force pas le dépassement. Pour ce faire et afin que <code>text-overflow</code> soit appliqué, l'auteur devra ajouter des propriétés supplémentaires sur l'élément, notamment : {{cssxref("overflow")}} avec <code>hidden</code> et {{cssxref("white-space")}} avec <code>nowrap</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* On gère le dépassement en fin de ligne
+    - à droite en LTR,
+    - à gauche en RTL */
+text-overflow: clip;
+text-overflow: ellipsis;
+text-overflow: "…";
+text-overflow: fade;
+text-overflow: fade(10px);
+text-overflow: fade(5%);
+
+/* On gère le dépassement au début et
+   à la fin de la ligne. La directionnalité
+   n'a pas d'importance */
+text-overflow: clip ellipsis;
+text-overflow: "…" "…";
+text-overflow: fade clip;
+text-overflow: fade(10px) fade(10px);
+text-overflow: fade(5%) fade(5%);
+
+/* Valeurs globales */
+text-overflow: inherit;
+text-overflow: initial;
+text-overflow: unset;
+</pre>
+
+<p>La propriété <code>text-overflow</code> peut être définie grâce à une ou deux valeurs.</p>
+
+<p>Si une valeur est fournie, celle-ci indique le comportement du dépassement en fin de ligne (c'est-à-dire l'extrêmité droite pour les textes écrits de gauche à droite et l'extrêmité gauche pour les textes écrits de droite à gauche). Si deux valeurs sont fournies, la première précisera la comportement pour le dépassement à l'extrêmité gauche de la ligne et la seconde indiquera le comportement du dépassement pour l'extrêmité droite de la ligne.</p>
+
+<p>Chacune des valeurs se compose :</p>
+
+<ul>
+ <li>D'un des mots-clés : <code><a href="#clip">clip</a></code>, <code><a href="#ellipsis">ellipsis</a></code>, <code><a href="#fade">fade</a></code></li>
+ <li>De la fonction <code><a href="#fade_fun">fade()</a></code> à laquelle on passe une valeur de type {{cssxref("&lt;length&gt;")}} ou {{cssxref("&lt;percentage&gt;")}} qui permet de contrôler la distance d'effacement</li>
+ <li>D'<a href="#string">une chaîne de caractères <code>&lt;string&gt;</code></a>.</li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><a id="clip" name="clip"><code>clip</code></a></dt>
+ <dd>La valeur par défaut de cette propriété. Ce mot-clé indique qu'on tronque le texte à la limite de <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">la boîte de contenu</a>. La troncature peut donc arriver sur le milieu d'un caractère. Pour que celle-ci soit appliquée entre deux caractères, on devra utiliser la chaîne vide (<code>''</code>) comme valeur pour cette propriété.</dd>
+ <dt><a id="ellipsis" name="ellipsis"><code>ellipsis</code></a></dt>
+ <dd>Ce mot-clé indique qu'on affiche une ellipse (<code>'…'</code>, <code style="text-transform: uppercase;">U+2026 Horizontal Ellipsis</code>) pour représenter le texte rogné. L'ellipse est affichée à l'intérieur de <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">la boîte de contenu</a> et réduit donc la quantité de texte affichée. S'il n'y a pas assez de place pour afficher l'ellipse, celle-ci est rognée.</dd>
+ <dt><a id="fade" name="fade"><code>fade</code></a> {{experimental_inline}}</dt>
+ <dd>Ce mot-clé indique que le contenu qui dépasse est rogné avec un effet de dégradé en transparence. Au bout de la boîte, le contenu est totalement transparent.</dd>
+ <dt><a id="fade_fun" name="fade_fun"><code>fade( &lt;length&gt; | &lt;percentage&gt; )</code></a> {{experimental_inline}}</dt>
+ <dd>Cette fonction permet de rogner le contenu qui dépasse et d'appliquer un effet de dégradé en transparence. Au bout de la boîte, on a une transparence totale.<br>
+ L'argument passé à la fonction détermine la distance sur laquelle cet effet est appliqué. La valeur en pourcentage est relative à la largeur de la boîte. Les valeurs inférieures à <code>0</code> sont ramenées à <code>0</code>. Les valeurs supérieures à la largeur de la boîte sont écrétées à la largeur de la boîte.</dd>
+ <dt><a id="string" name="string"><code>&lt;string&gt;</code></a> {{experimental_inline}}</dt>
+ <dd>Une chaîne de caractères (type {{cssxref("&lt;string&gt;")}}) utilisée pour représentée le texte rogné. La chaîne est affichée à l'intérieur de <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">la boîte de contenu</a> et réduit donc la quantité de texte affichée. S'il n'y a pas assez de place pour afficher la chaîne choisie, celle-ci est rognée.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  width: 200px;
+  border: 1px solid;
+  padding: 2px 5px;
+
+  /* Nécessaires pour text-overflow */
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.overflow-visible {
+  white-space: initial;
+}
+
+.overflow-clip {
+  text-overflow: clip;
+}
+
+.overflow-ellipsis {
+  text-overflow: ellipsis;
+}
+
+.overflow-string {
+  /* Cette forme n'est pas prise en charge
+    par la plupart des navigateurs. cf. la
+    section Compatibilité ci-après */
+  text-overflow: " [..]";
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="overflow-visible"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
+
+&lt;p class="overflow-clip"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
+
+&lt;p class="overflow-ellipsis"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
+
+&lt;p class="overflow-string"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', 300, 220, '', 'Web/CSS/text-overflow')}}</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th colspan="1" rowspan="2" scope="col">Valeur CSS</th>
+   <th colspan="2" rowspan="1" scope="col" style="text-align: center;"><code>direction: ltr</code></th>
+   <th colspan="2" rowspan="1" scope="col" style="text-align: center;"><code>direction: rtl</code></th>
+  </tr>
+  <tr>
+   <th scope="col">Résultat attendu</th>
+   <th scope="col">Résultat du navigateur</th>
+   <th scope="col">Résultat attendu</th>
+   <th scope="col">Résultat du navigateur</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>overflow:visible</code></td>
+   <td style="font-family: monospace;">1234567890</td>
+   <td style="direction: ltr;">
+    <div style="float: left; font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: visible;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+   <td style="font-family: monospace;">0987654321</td>
+   <td>
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: visible;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: clip</code></td>
+   <td style="padding: 1px; font-family: monospace;"><img alt="t-o_clip.png" class="default internal" src="/@api/deki/files/6056/=t-o_clip.png"></td>
+   <td style="direction: ltr;">
+    <div style="float: left; font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip;">123456</div>
+   </td>
+   <td style="padding: 1px; font-family: monospace;"><img alt="t-o_clip_rtl.png" class="default internal" src="/@api/deki/files/6057/=t-o_clip_rtl.png"></td>
+   <td style="direction: rtl;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: ''</code></td>
+   <td style="font-family: monospace;">12345</td>
+   <td style="direction: ltr;">
+    <div style="float: left; font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: '';">123456</div>
+   </td>
+   <td style="font-family: monospace;">54321</td>
+   <td style="direction: rtl;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: '';"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: ellipsis</code></td>
+   <td style="font-family: monospace;">1234…</td>
+   <td style="direction: ltr;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+   <td style="font-family: monospace;">…4321</td>
+   <td style="direction: rtl;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: '.'</code></td>
+   <td style="font-family: monospace;">1234.</td>
+   <td style="direction: ltr;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: '.';"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+   <td style="font-family: monospace;">.4321</td>
+   <td style="direction: rtl;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: '.';"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: clip clip</code></td>
+   <td style="font-family: monospace;">123456</td>
+   <td style="direction: ltr;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip clip;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+   <td style="font-family: monospace;">654321</td>
+   <td style="direction: rtl;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip clip;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: clip ellipsis</code></td>
+   <td style="font-family: monospace;">1234…</td>
+   <td style="direction: ltr;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip ellipsis;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+   <td style="font-family: monospace;">6543…</td>
+   <td style="direction: rtl;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip ellipsis;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: clip '.'</code></td>
+   <td style="font-family: monospace;">1234.</td>
+   <td style="direction: ltr;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip '.';"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+   <td style="font-family: monospace;">6543.</td>
+   <td style="direction: rtl;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip '.';"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: ellipsis clip</code></td>
+   <td style="font-family: monospace;">…3456</td>
+   <td style="direction: ltr;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis clip;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+   <td style="font-family: monospace;">…4321</td>
+   <td style="direction: rtl;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis clip;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: ellipsis ellipsis</code></td>
+   <td style="font-family: monospace;">…34…</td>
+   <td style="direction: ltr;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis ellipsis;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+   <td style="font-family: monospace;">…43…</td>
+   <td style="direction: rtl;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis ellipsis;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: ellipsis '.'</code></td>
+   <td style="font-family: monospace;">…34.</td>
+   <td style="direction: ltr;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis '.';"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+   <td style="font-family: monospace;">…43.</td>
+   <td style="direction: rtl;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis '.';"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: ',' clip</code></td>
+   <td style="font-family: monospace;">,3456</td>
+   <td style="direction: ltr;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ',' clip;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+   <td style="font-family: monospace;">,4321</td>
+   <td style="direction: rtl;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ',' clip;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: ',' ellipsis</code></td>
+   <td style="font-family: monospace;">,34…</td>
+   <td style="direction: ltr;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ','ellipsis;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+   <td style="font-family: monospace;">,43…</td>
+   <td style="direction: rtl;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ','ellipsis;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: ',' '.'</code></td>
+   <td style="font-family: monospace;">,34.</td>
+   <td style="direction: ltr;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ',' '.';"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+   <td style="font-family: monospace;">,43.</td>
+   <td style="direction: rtl;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ',' '.';"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 UI', '#text-overflow', 'text-overflow')}}</td>
+   <td>{{Spec2('CSS4 UI')}}</td>
+   <td>Ajout des valeurs <code>&lt;string&gt;</code> et <code>fade</code> et de la fonction <code>fade()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Overflow', '#text-overflow', 'text-overflow')}}</td>
+   <td>{{Spec2('CSS3 Overflow')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Une version précédente de cette interface avait atteint le statut de <em>Candidate Recommendation</em>. Certaines fonctionnalités devaient être retirées et n'étaient pas listées parmi les fonctionnalités à risque, la spécification a donc été déchue au niveau <em>Working Draft</em>. Cela explique pourquoi les navigateurs ont implémenté cette propriété sans préfixe bien qu'elle ne soit pas une CR.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.text-overflow")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("overflow")}}</li>
+ <li>{{cssxref("white-space")}}</li>
+</ul>
diff --git a/files/fr/web/css/text-rendering/index.html b/files/fr/web/css/text-rendering/index.html
new file mode 100644
index 0000000000..94c1706c49
--- /dev/null
+++ b/files/fr/web/css/text-rendering/index.html
@@ -0,0 +1,132 @@
+---
+title: text-rendering
+slug: Web/CSS/text-rendering
+tags:
+  - CSS
+  - Propriété
+  - Reference
+  - SVG
+translation_of: Web/CSS/text-rendering
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>text-rendering</code></strong> donne de l'information au moteur de rendu sur ce qu'il doit optimiser lors de l'affichage du texte.</p>
+
+<p>Le navigateur fait des compromis entre la vitesse, la lisibilité et la précision géométrique.</p>
+
+<pre class="brush:css no-line-numbers">/* Avec un mot-clé */
+text-rendering: auto;
+text-rendering: optimizeSpeed;
+text-rendering: optimizeLegibility;
+text-rendering: geometricPrecision;
+
+/* Valeurs globales */
+text-rendering: inherit;
+text-rendering: initial;
+text-rendering: unset;
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> La propriété <code>text-rendering</code> est une propriété SVG qui n'est définie dans aucun standard CSS. Toutefois, les navigateurs utilisant Gecko et WebKit permettent d'appliquer cette propriété à du contenu HTML ou XML sur Windows, Mac OS X et Linux.</p>
+</div>
+
+<p>Un effet très visible est : <code>text-rendering : optimizeLegibility;</code> qui active les ligatures (ff, fi, fl etc.) dans les textes en dessous de 20px pour certains polices (par exemple, <em>Calibri, Candara, Constantia </em>et <em>Corbel</em> de Microsoft, ou la famille <em>DejaVu</em>).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Le navigateur fait un choix éclairé sur la manière d'optimiser la vitesse, lisibilité et la précision géométrique lors de l'affichage du texte. Pour en savoir plus sur la manière dont est supportée cette valeur, reportez-vous au tableau de compatibilité.</dd>
+ <dt><code>optimizeSpeed</code></dt>
+ <dd>Le navigateur privilégie la vitesse de rendu par rapport à la lisibilité et la précision géométrique lors de l'affichage du texte. Cela désactive les ligatures et le crénage.</dd>
+ <dt><code>optimizeLegibility</code></dt>
+ <dd>Le navigateur privilégie la lisibilité par rapport à la vitesse de rendu ou la précision géométrique. Ceci active le crénage et les ligatures.</dd>
+ <dt><code>geometricPrecision</code></dt>
+ <dd>
+ <p>Le navigateur privilégie la précision géométrique par rapport à la vitesse de rendu et la lisibilité. Certains aspects d'une police — comme le crénage — ne se mettent pas à l'échelle de manière linéaire, donc <code>geometricPrecision</code> peut rendre agréables à l'œil les textes utilisant ces polices.</p>
+
+ <p>Avec SVG, lorsque le texte est agrandi ou réduit, le navigateur calcule la taille finale du texte (qui est la taille de police définie et le facteur appliqué) et demande une police de cette taille calculée au système de police de la plateforme. Mais si vous demandez une police de taille 9 avec un facteur de 140 %, la taille résultante de 12,6 n'existe pas dans la système de polices, donc le navigateur arrondi la taille de police à 12 dans ce cas. Ce qui aboutit à une mise à l'échelle en escalier du texte.</p>
+
+ <p>Toutefois la propriété <code>geometricPrecision</code> — lorsqu'elle est complètement supportée par le moteur de rendu — permet de mettre à l'échelle le texte de manière continue. Pour les facteurs de mise à l'échelle élevés, il est possible d'obtenir un rendu de texte moins-que-joli, mais de la taille que vous attendez — et pas arrondi à la taille supportée par Windows ou Linux la plus proche.</p>
+
+ <p>WebKit applique précisément la valeur définie, mais Gecko traite la valeur de la même manière que <code>optimizeLegibility</code>.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Application_automatique_de_optimizeLegibility">Application automatique de <code>optimizeLegibility</code></h3>
+
+<p>Cet exemple illustre comment <code>optimizeLegibility</code> est automatiquement utilisé par les navigateurs lorsque <code>font-size</code> est inférieure à <code>20px</code>.</p>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.small { font: 19.9px "Times New Roman", "Georgia", "Palatino", serif; }
+.big   { font: 20px "Times New Roman", "Georgia", "Palatino", serif; }</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p class="small"&gt;LYoWAT - ff fi fl ffl&lt;/p&gt;
+&lt;p class="big"&gt;LYoWAT - ff fi fl ffl&lt;/p&gt;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Application_automatique_de_optimizeLegibility')}}</p>
+
+<h3 id="optimizeSpeed_et_optimizeLegibility"><code>optimizeSpeed</code> et <code>optimizeLegibility</code></h3>
+
+<p>Cet exemple illustre la différence d'apparence entre <code>optimizeSpeed</code> et <code>optimizeLegibility</code> (cette différence peut varier d'un navigateur à l'autre).</p>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">p { font: 1.5em "Times New Roman", "Georgia", "Palatino", serif }
+
+.speed       { text-rendering: optimizeSpeed; }
+.legibility  { text-rendering: optimizeLegibility; }</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;p class="speed"&gt;LYoWAT - ff fi fl ffl&lt;/p&gt;
+&lt;p class="legibility"&gt;LYoWAT - ff fi fl ffl&lt;/p&gt;</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample('optimizeSpeed_et_optimizeLegibility')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('SVG2', 'painting.html#TextRenderingProperty', 'text-rendering')}}</td>
+   <td>{{Spec2('SVG2')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'painting.html#TextRenderingProperty', 'text-rendering')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.text-rendering")}}</p>
diff --git a/files/fr/web/css/text-shadow/index.html b/files/fr/web/css/text-shadow/index.html
new file mode 100644
index 0000000000..af5d743c79
--- /dev/null
+++ b/files/fr/web/css/text-shadow/index.html
@@ -0,0 +1,142 @@
+---
+title: text-shadow
+slug: Web/CSS/text-shadow
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/text-shadow
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>text-shadow</code></strong> ajoute des ombres au texte. Elle accepte une liste d'ombres à appliquer au texte et aux <a href="/fr/docs/Web/CSS/text-decoration">décorations</a> de l'élément. Chaque ombre est décrite par une certaine combinaison de décalages X et Y de l'élément, de rayon de flou et de couleur.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/text-shadow.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* offset-x | offset-y | blur-radius | color */
+text-shadow: 1px 1px 2px black;
+
+/* color | offset-x | offset-y | blur-radius */
+text-shadow: #fc0 1px 0 10px;
+
+/* offset-x | offset-y | color */
+text-shadow: 5px 5px #558abb;
+
+/* color | offset-x | offset-y */
+text-shadow: white 2px 5px;
+
+/* offset-x | offset-y
+/* Utiliser les défauts pour la couleur et le rayon de flou */
+text-shadow: 5px 10px;
+
+/* Valeurs globales */
+text-shadow: inherit;
+text-shadow: initial;
+text-shadow: unset;
+</pre>
+
+<p>Cette propriété est spécifiée comme une liste d'ombres séparées par des virgules.</p>
+
+<p>Chaque ombre est spécifiée par deux ou trois valeurs <code>&lt;length&gt;</code>, suivies d'une valeur <code>&lt;color&gt;</code>. Les deux premières valeurs <code>&lt;length&gt;</code> sont les valeurs <code>&lt;decalage-x&gt;</code> et <code>&lt;decalage-y&gt;</code>. La troisième valeur <code>&lt;length&gt;</code>, facultative, est le <code>&lt;rayon-de-flou&gt;</code>. La valeur <code>&lt;color&gt;</code> est la couleur de l'ombre.</p>
+
+<p>Lorsque plus d'une ombre est indiquée, les ombres sont appliquées d'avant en arrière, avec la première ombre spécifiée sur le dessus.</p>
+
+<p>Cette propriété s'applique aux deux <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-éléments</a> {{cssxref("::first-line")}} et {{cssxref("::first-letter")}}.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;color&gt;")}}</dt>
+ <dd>Optionnelle. La couleur de l'ombre. Elle peut être spécifiée avant ou après les valeurs de décalage. Si non spécifiée, la valeur de la couleur est laissée à l'agent utilisateur, donc quand une cohérence entre les navigateurs est désirée, vous devriez la définir explicitement.</dd>
+ <dt>&lt;decalage-x&gt; &lt;decalage-y&gt;</dt>
+ <dd>Obligatoires. Ces valeurs {{cssxref("&lt;length&gt;")}} définissent la distance de l'ombre par rapport au texte. <code>&lt;decalage-x&gt;</code> définit la distance horizontale ; une valeur négative place l'ombre à gauche du texte. <code>&lt;decalage-y&gt;</code> définit la distance verticale ; une valeur négative place l'ombre au-dessus du texte. Si les deux valeurs sont à <code>0</code>, l'ombre sera placée exactement derrière le texte, bien qu'elle puisse être partiellement visible du fait de l'effet du <code>&lt;rayon-de-flou&gt;</code>).</dd>
+ <dt>&lt;rayon-de-flou&gt;</dt>
+ <dd>Optionnel. C'est une valeur {{cssxref("&lt;length&gt;")}}). Plus la valeur sera élevée, plus le flou sera important ; l'ombre deviendra plus large et plus légère. Si non utilisée, elle a pour défaut <code>0</code>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Ombre_simple">Ombre simple</h3>
+
+<div id="Example1">
+<pre class="brush: css">.red-text-shadow {
+   text-shadow: red 0 -2px;
+}</pre>
+
+<pre class="brush: html">&lt;p class="red-text-shadow"&gt;Sed ut perspiciatis unde omnis iste
+    natus error sit voluptatem accusantium doloremque laudantium,
+    totam rem aperiam, eaque ipsa quae ab illo inventore.&lt;/p&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample('Simple_shadow', '660px', '90px')}}</p>
+
+<h3 id="Ombres_multiples">Ombres multiples</h3>
+
+<div id="Example2">
+<pre class="brush:css">.white-text-with-blue-shadow {
+   text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
+   color: white;
+   font: 1.5em Georgia, serif;
+}</pre>
+
+<pre class="brush: html">&lt;p class="white-text-with-blue-shadow"&gt;Sed ut perspiciatis unde omnis iste
+    natus error sit voluptatem accusantium doloremque laudantium,
+    totam rem aperiam, eaque ipsaquae ab illo inventore.&lt;/p&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample('Multiple_shadows', '660px', '170px')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'text-shadow')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Spécifie <code>text-shadow</code> comme animable.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow')}}</td>
+   <td>{{Spec2('CSS3 Text Decoration')}}</td>
+   <td>La propriété CSS <code>text-shadow</code> était <a class="external" href="https://www.w3.org/TR/2008/REC-CSS2-20080411/text.html#text-shadow-props">incorrectement définie dans CSS2</a> et fut abandonnée dans CSS2 (Level 1). La spéc CSS Text Module Level 3 a raffiné la syntaxe. Ensuite, elle a été déplacée dans <a href="https://www.w3.org/TR/css-text-decor-3/">CSS Text Decoration Module Level 3</a>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("css.properties.text-shadow")}}</p>
+
+<h3 id="Notes_CSS_Quantum">Notes CSS Quantum</h3>
+
+<ul>
+ <li>Gecko présente un bug en raison duquel les {{cssxref("transition")}}s ne fonctionnent pas lors d'une transition entre une <code>text-shadow</code> avec une couleur spécifiée et une <code>ext-shadow</code> sans couleur spécifiée ({{bug(726550)}}). Cela a été corrigé dans le nouveau moteur CSS (aussi connu comme <a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> ou <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>), prévu pour être disponible dans Firefox 57.</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://cssgenerator.org/text-shadow-css-generator.html">Text Shadow Generator</a> - Un générateur CSS d'ombre de texte interactif</li>
+ <li>{{cssxref("box-shadow")}}</li>
+ <li>Le type de données {{cssxref("&lt;color&gt;")}} (pour spécifier la couleur d'ombre)</li>
+ <li><a href="/fr/docs/Web/HTML/Applying_color">Appliquer des couleurs sur des éléments HTML</a></li>
+</ul>
diff --git a/files/fr/web/css/text-size-adjust/index.html b/files/fr/web/css/text-size-adjust/index.html
new file mode 100644
index 0000000000..724f0ac75c
--- /dev/null
+++ b/files/fr/web/css/text-size-adjust/index.html
@@ -0,0 +1,88 @@
+---
+title: text-size-adjust
+slug: Web/CSS/text-size-adjust
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/text-size-adjust
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>text-size-adjust</code></strong> permet de contrôler l'algorithme d'amplification du texte sur certains appareils mobiles. Cette propriété n'est pas standard et doit donc être préfixée : <code>-moz-text-size-adjust</code>, <code>-webkit-text-size-adjust</code>, and <code>-ms-text-size-adjust</code>.</p>
+
+<pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */
+text-size-adjust: none;
+text-size-adjust: auto;
+
+/* Valeurs proportionnelles */
+text-size-adjust: 80%;
+
+/* Valeurs globales */
+text-size-adjust: inherit;
+text-size-adjust: initial;
+text-size-adjust: unset;
+</pre>
+
+<p>De nombreuses pages web n'ont pas été conçues pour le mobile et les navigateurs mobiles n'affichent pas les pages web de la même façon que les navigateurs de bureau. Plutôt que d'afficher une page web dans la largeur de l'écran, un navigateur mobile sera parfois amené à l'afficher dans une zone d'affichage beaucoup plus large que l'écran. Pour gérer la largeur de l'écran, le navigateur n'affichera qu'une partie ou rétrécira la taille de la zone d'affichage.</p>
+
+<p>Par essence, cela signifie que, sur mobiles, on ne voit qu'une portion rectangulaire de la page ou que la page a l'air dézoomée (et apparaît donc plus petite).</p>
+
+<p>Cependant, lorsque l'utilisateur zoome jusqu'à ce que le texte soit lisible, on a alors une barre horizontale de défilement qui apparaît car le texte est large que la largeur de l'écran et l'ergonomie est donc détériorée car l'utilisateur doit défiler à la fin et au début à chaque passage à la ligne. Pour éviter ce problème, plusieurs navigateurs mobiles implémentent un algorithme de <strong>gonflement</strong> (<em>inflation</em>). Lorsqu'un élément reçoit le focus, qu'il contient du texte et qu'il utilise 100 % de la largeur de l'écran, la taille du texte est augmentée afin qu'il soit lisible, sans pour autant modifier la disposition générale (ce qui évite d'avoir à recourir à une barre de défilement horizontale).</p>
+
+<p>La propriété <code>text-size-adjust</code> permet aux auteurs de ne pas suivre ce comportement si les pages web ont été adaptées pour les différents formats d'écran.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <code>text-size-adjust</code> est définie avec le mot-clé <code>none</code> ou le mot-clé <code>auto</code> ou avec une valeur de type <code>&lt;percentage&gt;</code>.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Un mot-clé qui permet de ne pas utiliser l'algorithme de gonflement. En résumé, cela signifie que l'élément sera affiché sans que le texte soit amplifié. Pour les anciennes versions des navigateurs basés sur le moteur WebKit (Chrome ≤ 26 et Safari ≤ 5), cela empêchera l'utilisateur de zoomer/dézoomer sur la page web.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Active l'algorithme d'amplification du navigateur. Ce mot-clé permet notamment d'annuler une valeur <code>none</code> utilisée précédemment.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Une valeur exprimée en pourcentages (type de données {{cssxref("&lt;percentage&gt;")}}. Cette valeur est synonyme du mot-clé <code>auto</code> et ajoute comme information le taux d'amplification à utiliser sur la police avec l'algorithme.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Text Size Adjust", "#adjustment-control", "text-size-adjust")}}</td>
+   <td>{{Spec2("CSS Text Size Adjust")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une <em>pull request</em> sur ce dépôt: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("css.properties.text-size-adjust")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="link-https" href="https://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html">La documentation d'Apple</a></li>
+ <li><a class="external" href="http://dbaron.org/log/20111126-font-inflation">Le comportement de Gecko décrit par L. David Baron</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff462082(v=vs.105).aspx">La documentation de Microsoft</a></li>
+</ul>
diff --git a/files/fr/web/css/text-transform/index.html b/files/fr/web/css/text-transform/index.html
new file mode 100644
index 0000000000..ecba436b31
--- /dev/null
+++ b/files/fr/web/css/text-transform/index.html
@@ -0,0 +1,191 @@
+---
+title: text-transform
+slug: Web/CSS/text-transform
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/text-transform
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>text-transform</code></strong> définit la façon d'utiliser les lettres capitales pour le texte d'un élément. Cela permet que le texte soit écrit uniquement en majuscules, minuscules ou que chaque mot commence par une capitale. Cela permet également d'améliorer la lisibilité pour les textes avec des annotations <a href="/fr/docs/HTML/Element/ruby">Ruby</a>.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/text-transform.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La propriété <code>text-transform</code> gère les différences liées aux langues, par exemple :</p>
+
+<ul>
+ <li>
+  <p>Pour les langues turques comme le turc (tr), l'azéri (az), le tatar de Crimée (crh), le tatar de Volga (tt) et le bachkir (ba), il existe deux sortes de i, avec et sans le point. Les majuscules correspondantes sont également différentes : <code>i</code>/<code>İ</code> et <code>ı</code>/<code>I</code>.</p>
+ </li>
+ <li>
+  <p>En allemand (de), le <code>ß</code> devient <code>SS</code> en majuscule.</p>
+ </li>
+ <li>
+  <p>En néerlandais (nl), le digraphe <code>ij</code> devient <code>IJ</code>, y compris avec <code>text-transform: capitalize</code> qui ne met que la première lettre de chaque mot en majuscule.</p>
+ </li>
+ <li>
+  <p>En grec (el), les voyelles perdent leur accent lorsque tout le mot est écrit en capitales (<code>ά</code>/<code>Α</code>) à l'exception du eta disjonctif (<code>ή</code>/<code>Ή</code>). Les diphtongues avec un accent sur la première voyelle perde l'accent et récupère un tréma sur la seconde voyelle (<code>άι</code>/<code>ΑΪ</code>). La lettre sigma a deux formes minuscules : <code>σ</code> et <code>ς</code>. <code>ς</code> est utilisée uniquement lorsque c'est la dernière lettre du mot. Lorsque l'agent utilisateur applique <code>text-transform: lowercase</code> à un sigma majuscule (<code>Σ</code>), il doit choisir l'une des deux formes selon le contexte.</p>
+ </li>
+ <li>En gaëlique (ga), une lettre qui préfixe un mot doit rester en minuscule lorsqu'on capitalise toutes les lettres. Ainsi, en appliquant <code>text-transform: uppercase</code> à <code>ar aon tslí</code>, on obtiendra <code>AR AON tSLÍ</code> et non <code>AR AON TSLÍ</code>. Dans certains cas, un trait d'union peut être retiré lors du passage en majuscules : <code>an t-uisce</code> deviendra <code>AN tUISCE </code>(le trait-d'union sera bien réinséré avec <code>text-transform: lowercase</code>)</li>
+</ul>
+
+<p>La langue d'un document HTML est définie par l'attribut XML <code>xml:lang</code>, qui a la priorité sur l'attribut global <code><a href="/fr/docs/Web/HTML/Attributs_globaux/lang">lang</a></code>.</p>
+
+<p>Le support de ces différents cas peut varier d'un navigateur à un autre. Pour plus de détails, <a href="#compat">voir le tableau de compatibilité des navigateurs</a>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Avec un mot-clé */
+text-transform: none;
+text-transform: capitalize;
+text-transform: uppercase;
+text-transform: lowercase;
+text-transform: full-width;
+text-transform: full-size-kana;
+
+/* Valeurs globales */
+text-transform: inherit;
+text-transform: initial;
+text-transform: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>capitalize</code></dt>
+ <dd>
+ <p>En utilisant ce mot-clé, la première lettre de chaque mot sera affichée en capitale. Les autres caractères ne seront pas modifiés et conserveront ainsi la forme originale, contenue dans le texte de l'élément. Ici, une lettre peut être n'importe quel caractère Unicode qui fait partie des catégories génériques Lettre. Cela exclue donc les symboles de ponctuations qui peuvent être utilisés en début de mot.</p>
+
+ <p class="note">Le mot-clé capitalize n'était pas complètement spécifié avec CSS 1 et CSS 2.1. Il y avait certaines différences entre les navigateurs : Firefox considèrait que - et _ étaient des lettres ; Webkit et Gecko considéraient que les symboles lettrés comme ⓐ étaient de vraies lettres ; Internet Explorer 9 était le plus proche de la définition donnée par CSS2 mais il y avait certains cas étranges. Grâce à CSS Text Level 3, ces ambiguités sont levées. Dans le tableau, la ligne capitalize traduit le support de cette spécification.</p>
+ </dd>
+ <dt><code>uppercase</code></dt>
+ <dd>En utilisant ce mot-clé, tous les caractères seront écrits en capitales.</dd>
+ <dt><code>lowercase</code></dt>
+ <dd>En utilisant ce mot-clé, tous les caractères seront écrits en minuscules.</dd>
+ <dt><code>none</code></dt>
+ <dd>Ce mot-clé empêche les modifications liées à la casse des caractères.</dd>
+ <dt><code>full-width</code> {{experimental_inline}}</dt>
+ <dd>Ce mot-clé force l'écriture de chaque caractère dans un carré, ce qui permet de les aligner avec des scripts d'Asie Orientale (par exemple du chinois ou du japonais).</dd>
+ <dt><code>full-size-kana</code></dt>
+ <dd>Cette valeur est généralement utilisée pour <a href="/fr/docs/Web/HTML/Element/ruby">les annotations Ruby</a>. Ce mot-clé convertit les caractères Kana de petite taille en leur équivalent de grande taille. Cela permet de compenser les problèmes de lisibilité des tailles de police généralement utilisées pour le Ruby.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;code&gt;none :&lt;/code&gt;
+&lt;p class="sans_effet"&gt;
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit
+&lt;/p&gt;
+
+&lt;code&gt;capitalize :&lt;/code&gt;
+&lt;p class="cap"&gt;
+  (Voici) “un” –rapide– -test- ⓙkl
+&lt;/p&gt;
+
+&lt;/code&gt; uppercase :&lt;/code&gt;
+&lt;p class="majuscules"&gt;
+  Cependant d'Artagnan voulut d'abord se rendre compte de
+  la physionomie de l'impertinent qui se moquait de lui.
+&lt;/p&gt;
+
+&lt;code&gt;full-width :&lt;/code&gt;
+&lt;p class="mix"&gt;
+  ABCDEF&lt;/br&gt;
+  最初に彼を嘲
+&lt;/p&gt;
+
+&lt;code&gt;full-size-kana :&lt;/code&gt;
+&lt;p class="full-size-kana"&gt;ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ&lt;/p&gt;
+&lt;p&gt;ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ&lt;/p&gt;
+
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p.sans_effet {
+  text-transform: none;
+}
+
+p.cap {
+  text-transform: capitalize;
+}
+
+p.majuscules {
+  text-transform: uppercase;
+}
+
+p.mix {
+  text-transform: full-width;
+}
+
+p.full-size-kana {
+  text-transform: full-size-kana;
+}
+
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","500")}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>De grandes portions de texte utilisant <code>text-transform</code> avec la valeur <code>uppercase</code> peuvent être difficilement lisibles par les personnes dyslexiques ou souffrant de problèmes cognitifs.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener"><em>Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text', '#text-transform', 'text-transform')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Par rapport à {{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}}, la spécification s'étend aux caractères Unicode des catégories générales Nombre et Lettre. Le comportement de <code>capitalize</code> est modifié pour ignorer les éventuels symboles ou caractères de ponctuations utilisés. Les mots-clés <code>full-width</code> et <code>full-size-kana</code> sont ajoutés afin de pouvoir mélanger harmonieusement les caractères alphabétiques et les caractères idéographiques.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Par rapport à {{SpecName('CSS1', '#text-transform', 'text-transform')}}, étend la spécifications aux lettres non latines et aux scripts bicaméraux.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#text-transform', 'text-transform')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs"><a id="compat" name="compat">Compatibilité des navigateurs</a></h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.text-transform")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("font-variant")}}</li>
+</ul>
diff --git a/files/fr/web/css/text-underline-offset/index.html b/files/fr/web/css/text-underline-offset/index.html
new file mode 100644
index 0000000000..b62f7eb7e6
--- /dev/null
+++ b/files/fr/web/css/text-underline-offset/index.html
@@ -0,0 +1,112 @@
+---
+title: text-underline-offset
+slug: Web/CSS/text-underline-offset
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/text-underline-offset
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>text-underline-offset</code></strong> définit le décalage de la ligne de décoration du texte par rapport à sa position originale.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/text-underline-offset.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> <code>text-underline-offset</code> n'est pas une propriété détaillée de {{cssxref('text-decoration')}}. Bien qu'un élément puisse avoir plusieurs lignes décoratives, <code>text-underline-offset</code> n'aura qu'un impact sur le soulignage (et pas sur les autres lignes telles que celles fournies par {{cssxref('text-decoration-line')}} avec <code>overline</code> ou <code>line-through</code>).</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeur simple */
+text-underline-offset: none;
+text-underline-offset: from-font;
+text-underline-offset: 0.2em;
+
+/* Valeurs globales */
+text-underline-offset: inherit;
+text-underline-offset: initial;
+text-underline-offset: unset;
+</pre>
+
+<p>La propriété <code>text-underline-offset</code> est définie avec le mot-clé <code>none</code> ou avec une valeur de la liste suivante.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Le navigateur choisit un décalage approprié pour le soulignage.</dd>
+ <dt><code>from-font</code></dt>
+ <dd>Si le fichier de fonte inclut des informations quant à un décalage préféré, c'est cette valeur qui sera utilisée. Si le fichier de fonte n'a pas cette information, cette valeur se comportera comme <code>auto</code>.</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une longueur (valeur de type {{cssxref("&lt;length&gt;")}}) indiquant le décalage à utiliser. Il est recommandé d'utiliser des <code><a href="/fr/docs/Web/CSS/length#em">em</a></code> comme unité afin que le décalage suive la taille de la police (quand on zoome par exemple).</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  text-decoration-line: underline;
+  text-decoration-style: wavy;
+  text-decoration-color: red;
+  text-underline-offset: 1em;
+}
+
+.deuxlignes{
+  text-decoration-line: underline overline;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="uneligne"&gt;
+  Voici un texte souligné avec une ligne ondulée rouge !
+&lt;/p&gt;
+&lt;p class="deuxlignes"&gt;
+  Ce texte a une ligne en dessous et une ligne au dessus.
+  Seule la ligne du dessous est déplacée.
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '', '', '')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Text Decoration', '#<span class="pl-s">underline-offset</span>', 'text-underline-offset')}}</td>
+   <td>{{Spec2('CSS4 Text Decoration')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.text-underline-offset")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("text-decoration")}}</li>
+</ul>
diff --git a/files/fr/web/css/text-underline-position/index.html b/files/fr/web/css/text-underline-position/index.html
new file mode 100644
index 0000000000..09bbd3b97d
--- /dev/null
+++ b/files/fr/web/css/text-underline-position/index.html
@@ -0,0 +1,128 @@
+---
+title: text-underline-position
+slug: Web/CSS/text-underline-position
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/text-underline-position
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>text-underline-position</code></strong> définit la position du soulignement utilisé lorsque la propriété {{cssxref("text-decoration")}} prend la valeur <code>underline</code>.</p>
+
+<pre class="brush:css  no-line-numbers">/* Avec un mot-clé */
+text-underline-position: auto;
+text-underline-position: under;
+text-underline-position: left;
+text-underline-position: right;
+
+/* Avec plusieurs mots-clés */
+text-underline-position: under left;
+text-underline-position: right under;
+
+/* Valeurs globales */
+text-underline-position: inherit;
+text-underline-position: initial;
+text-underline-position: unset;
+</pre>
+
+<p>Cette propriété est héritée sur les différents éléments et n'est pas réinitialisée avec la propriété raccourcie {{cssxref("text-decoration")}}, ce qui permet de la définir simplement pour l'ensemble du document.</p>
+
+<pre class="brush: css">:root {
+  /* Une meilleure règle par défaut pour un document */
+  /* avec de nombreuses formules chimiques */
+  text-underline-position: under;
+}
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Ce mot-clé permet à l'agent utilisateur d'utiliser un algorithme pour choisir entre <code>under</code> et <code>alphabetic</code>.</dd>
+ <dt><code>under</code></dt>
+ <dd>Ce mot-clé force la ligne à se situer sous la ligne de base, à une position où elle ne traversera pas de <a href="https://fr.wikipedia.org/wiki/Jambage">jambage</a>. Cela est notamment utile lorsqu'on veut souligner de façon lisible des formules chimiques ou mathématiques (qui utilisent fréquemment des indices).</dd>
+ <dt><code>left</code></dt>
+ <dd>In vertical writing-modes, this keyword forces the line to be placed on the <em>left</em> of the characters. In horizontal writing-modes, it is a synonym of <code>under.</code></dd>
+ <dt><code>right</code></dt>
+ <dd>Pour les modes d'écritures verticaux, ce mot-clé force la ligne à être placée à droite des caractères. Pour les modes d'écritures horizontaux, ce mot-clé est synonyme de <code>under.</code></dd>
+ <dt><code>auto-pos</code>{{non-standard_inline}}</dt>
+ <dd>Ce mot-clé est synonyme de <code>auto</code> et c'est ce dernier qui doit être utilisé à la place.</dd>
+ <dt><code>above</code>{{non-standard_inline}}</dt>
+ <dd>Ce mot-clé force la ligne à être dessinée au dessus du texte. Lorsqu'on écrit avec un script d'Asie orientale, la valeur <code>auto</code> aura un effet semblable.</dd>
+ <dt><code>below</code>{{non-standard_inline}}</dt>
+ <dd>Ce mot-clé force la ligne à être dessinée sous le texte. Lorsqu'on utilise un texte alphabétique, la valeur <code>auto</code> aura un effet semblable.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="chimique"&gt;
+  C&lt;sub&gt;6&lt;/sub&gt;H&lt;sub&gt;12&lt;/sub&gt;O&lt;sub&gt;6&lt;/sub&gt;
+&lt;/p&gt;
+&lt;p class="defaut"&gt;
+  Et là avec des &lt;sub&gt;indices&lt;/sub&gt;
+  et du jambage
+&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.chimique {
+  text-decoration: underline;
+  text-underline-position: under;
+}
+
+.defaut {
+  text-decoration: underline;
+  text-underline-position: auto;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","100%")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text Decoration', '#text-underline-position-property', 'text-underline-position')}}</td>
+   <td>{{Spec2('CSS3 Text Decoration')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.text-underline-position")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("text-decoration")}}</li>
+ <li>{{cssxref("text-decoration-line")}}</li>
+ <li>{{cssxref("text-decoration-style")}}</li>
+ <li>{{cssxref("text-decoration-color")}}</li>
+ <li><a href="https://msdn.microsoft.com/en-us/library/ie/ms531176%28v=vs.85%29.aspx">La documentation sur les valeurs non-standard utilisées par Microsoft</a></li>
+</ul>
diff --git a/files/fr/web/css/time-percentage/index.html b/files/fr/web/css/time-percentage/index.html
new file mode 100644
index 0000000000..840ef99d22
--- /dev/null
+++ b/files/fr/web/css/time-percentage/index.html
@@ -0,0 +1,50 @@
+---
+title: <time-percentage>
+slug: Web/CSS/time-percentage
+tags:
+  - CSS
+  - Reference
+  - Type
+translation_of: Web/CSS/time-percentage
+---
+<div>{{CSSRef}}</div>
+
+<p>Le type de donnée <strong><code>&lt;time-percentage&gt;</code></strong> représente une valeur qui peut être de type {{Cssxref("time")}} ou une valeur qui peut être de type {{Cssxref("percentage")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Se référer à la documentation des types {{Cssxref("time")}} et {{Cssxref("percentage")}} pour plus de détails sur les syntaxes possibles pour chacun de ces types.</p>
+
+<h2 id="Utilisation_avec_calc()">Utilisation avec <code>calc()</code></h2>
+
+<p>Lorsqu'une valeur de type <code>&lt;time-percentage&gt;</code> est autorisée dans une déclaration, cela signifie que le pourcentage sera résolu comme un temps et qu'il peut donc être utilisée dans une expression {{Cssxref("calc()")}}.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Values', '#mixed-percentages', '&lt;time-percentage&gt;')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#mixed-percentages', '&lt;time-percentage&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Définition du type <code>&lt;time-percentage&gt;</code>. Ajout de <code>calc()</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.types.time-percentage")}}</p>
diff --git a/files/fr/web/css/time/index.html b/files/fr/web/css/time/index.html
new file mode 100644
index 0000000000..1dab59ddcb
--- /dev/null
+++ b/files/fr/web/css/time/index.html
@@ -0,0 +1,83 @@
+---
+title: <time>
+slug: Web/CSS/time
+tags:
+  - CSS
+  - Reference
+  - Type
+translation_of: Web/CSS/time
+---
+<div>{{CSSRef}}</div>
+
+<p>Le type de donnée <strong><code>&lt;time&gt;</code></strong> indique des durées exprimées en secondes ou en millisecondes. Il est par exemple utilisé dans les propriétés {{cssxref("animation")}}, {{cssxref("transition")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Une valeur temporelle consiste en une valeur de type {{cssxref("&lt;number&gt;")}} immédiatement suivie d'une unité. Comme avec les autres unités CSS, il n'y a pas d'espace entre l'unité et le nombre. La valeur peut éventuellement être précédée d'un signe <code>+</code> ou <code>-</code>.</p>
+
+<p>Même si toutes les unités représentent le même temps pour la valeur <code>0</code>, l'unité ne doit pas être omises, car il ne s'agit pas d'une {{cssxref("&lt;length&gt;")}} : <code>0</code> n'est pas valide et ne représente pas <code>0s</code>, <code>0ms</code>.</p>
+
+<h3 id="Unités">Unités</h3>
+
+<dl>
+ <dt><code><a id="s">s</a></code></dt>
+ <dd>Cette unité permet d'exprimer le temps en secondes. Par exemple : <code>0s</code>, <code>1.5s</code>, <code>-60s</code>.</dd>
+ <dt><code><a id="ms">ms</a></code></dt>
+ <dd>Cette unité permet d'exprimer le temps en millisecondes. Par exemple : <code>0ms</code>, <code>1500ms</code>, <code>-6000ms</code>.</dd>
+</dl>
+
+<p>La conversion entre <code>s</code> et <code>ms</code> suit la logique suivante : <code>1s = 1000ms</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Valeurs_valides">Valeurs valides</h3>
+
+<pre class="brush: css example-good">12s         Nombre entier positif
+-456ms      Nombre entier négatif
+4.3ms       Nombre décimal
+14mS        L'unité n'est pas sensible à la casse, cependant les majuscules sont déconseillées pour s et ms.
++0s         Zero, précédé d'un + et suivi de son unité.
+-0ms        Zero, précédé d'un - et suivi de son unité (bien qu'étrange, ceci est autorisé).
+</pre>
+
+<h3 id="Valeurs_invalides">Valeurs invalides</h3>
+
+<pre class="brush: css example-bad">0           Bien qu'un zéro sans unité soit autorisé pour les longueurs, ceci n'est pas valide avec les autres dimensions.
+12.0        Il s'agit d'un nombre, pas d'un temps, l'unité est obligatoire.
+7 ms        Aucun espace n'est autorisé entre le nombre et l'unité.
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Values','#time','&lt;time&gt;')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values','#time','&lt;time&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Définition normative de <code>s</code> et <code>ms</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1','aural.html#times','&lt;time&gt;')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition informelle de <code>s</code> et <code>ms</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.types.time")}}</p>
diff --git a/files/fr/web/css/timing-function/index.html b/files/fr/web/css/timing-function/index.html
new file mode 100644
index 0000000000..9d3ffe95a3
--- /dev/null
+++ b/files/fr/web/css/timing-function/index.html
@@ -0,0 +1,274 @@
+---
+title: <timing-function>
+slug: Web/CSS/timing-function
+tags:
+  - CSS
+  - Reference
+  - Type
+translation_of: Web/CSS/easing-function
+---
+<div>{{CSSRef}}</div>
+
+<p>Le type de donnée <strong><code>&lt;timing-function&gt;</code></strong> représente une fonction mathématique qui décrit la vitesse à laquelle évolue une valeur unidimensionnelle lors d'une transition ou d'une animation. Cela permet de définir une courbe d'accélération afin que la vitesse de l'animation puisse changer lors de son exécution. Ces fonctions sont souvent appelées « fonction de temporisation » ou « <em>easing functions</em> » (en anglais).</p>
+
+<p>Cette fonction prend comme entrée un ratio de temps (0 : l'état initial, 1 : l'état final) et produit un ratio d'évolution (sous la forme d'une valeur {{cssxref("&lt;number&gt;")}}) allant également de 0.0 à 1.0.</p>
+
+<p><img src="/files/3434/TF_with_output_gt_than_1.png"><img src="/files/3435/TF_with_output_gt_than_1_clipped.png" style="margin-right: 5px;"></p>
+
+<p>Le ratio de sortie peut être supérieur à 1.0 ou inférieur à 0.0. Cela entraînera l'animation « plus loin » que l'état final ou initial avant de revenir. Cela permettra de créer un effet de <em>rebondissement</em>.</p>
+
+<p>Toutefois, si la valeur de sortie correspondante est entrainée hors de son domaine de validité (par exemple une composante de couleur entraînée au-delà de 255), la valeur est ramenée à la valeur autorisée la plus proche (dans l'exemple : 255).</p>
+
+<h2 class="cleared" id="Valeurs">Valeurs</h2>
+
+<div style="width: 100%;">
+<p>CSS prend en charge deux types de fonctions de temporisation :</p>
+
+<ul>
+ <li>un sous-ensemble des courbes de Bézier cubiques</li>
+ <li>des fonctions en escalier.</li>
+</ul>
+
+<p>Les plus utiles de ces fonctions sont également disponibles via un mot-clé qui permet de les décrire.</p>
+
+<h3 id="La_classe_de_fonctions_cubic-bezier()">La classe de fonctions <code>cubic-bezier()</code></h3>
+
+<p style="float: left;"><img src="/files/3433/cubic-bezier,%20example.png"></p>
+
+<p>La notation fonctionnelle <code>cubic-bezier()</code> définit <a href="https://fr.wikipedia.org/wiki/Courbe_de_Bézier">une courbe de Bézier cubique</a>. Ces courbes sont continues et sont généralement « douces » (peu de variations) au début et à la fin.</p>
+
+<p>Une courbe de Bézier cubique se définit par quatre points P<sub>0</sub>, P<sub>1</sub>, P<sub>2</sub>, et P<sub>3</sub>. P<sub>0</sub> et P<sub>3</sub> correspondent respectivement au début et à la fin de la courbe. En CSS, ces points sont fixes car les coordonnées des points expriment des ratios. P<sub>0</sub> est donc <code>(0, 0)</code> (instant initial et état initial) et P<sub>3</sub> est <code>(1, 1)</code> (instant final et état final).</p>
+
+<p>Tous les courbes de Bézier cubiques ne peuvent pas être utilisées comme des fonctions de temporisation. Certaines de ces courbes ne sont pas des <a href="https://fr.wikipedia.org/wiki/Fonction_(math%C3%A9matiques)">fonctions mathématiques</a> (c'est-à-dire des courbes qui n'ont qu'une valeur pour une abscisse donnée). P<sub>0</sub> et P<sub>3</sub> sont fixés par la définition CSS et une courbe de Bézier cubique est donc uniquement valide si et seulement si les abscisses des points P<sub>1</sub> et P<sub>2</sub> sont toutes les deux comprises dans l'intervalle <code>[0, 1]</code>.</p>
+
+<p>Les courbes de Bézier cubiques pour lesquelles les ordonnées de P<sub>1</sub> et/ou P<sub>2</sub> sont situées en dehors de l'intervalle <code>[0, 1]</code> génèreront un effet de rebondissement.</p>
+
+<p>Lorsqu'on définit une courbe de Bézier invalide en CSS via <code>cubic-bezier</code>, le moteur ignore la déclaration dans son intégralité.</p>
+</div>
+
+<h4 id="Syntaxe">Syntaxe</h4>
+
+<pre class="syntaxbox">cubic-bezier(<em>x<sub>1</sub></em>, <em>y<sub>1</sub></em>, <em>x<sub>2</sub></em>, <em>y<sub>2</sub></em>)
+</pre>
+
+<p>avec</p>
+
+<dl>
+ <dt><strong><em>x<sub>1</sub></em>, <em>y<sub>1</sub></em>, <em>x<sub>2</sub></em>, <em>y<sub>2</sub></em></strong></dt>
+ <dd>qui sont des valeurs de type {{cssxref("&lt;number&gt;")}} représentant les abscisses et les ordonnées des points P<sub>1</sub> et P<sub>2</sub> définissant la courbe de Bézier cubique. x<sub>1</sub> et x<sub>2</sub> doivent appartenir à l'intervalle [0, 1], sinon la valeur est considérée comme invalide.</dd>
+</dl>
+
+<h4 id="Exemples">Exemples</h4>
+
+<p>Voici des courbes de Bézier cubiques qui peuvent être utilisées en CSS :</p>
+
+<pre class="brush: css">cubic-bezier(0.1, 0.7, 1.0, 0.1)
+
+cubic-bezier(0, 0, 1, 1)
+
+/* Des valeurs négatives pour les ordonnées pour */
+/* créer du rebondissement                       */
+cubic-bezier(0.1, -0.6, 0.2, 0)
+
+/* Idem avec des valeurs &gt; 1                     */
+cubic-bezier(0, 1.1, 0.8, 4)       </pre>
+
+<p>En revanche, ces définitions sont invalides :</p>
+
+<pre class="brush: css example-bad">/* Bien que le type de sortie puisse être une couleur */
+/* les courbes de Bézier fonctionnent avec des ratios */
+/* numériques */
+cubic-bezier(0.1, red, 1.0, green)
+
+/* Les abscisses doivent appartenir à l'intervalle [0, 1] */
+/* car sinon la courbe n'est pas une fonction temporelle. */
+cubic-bezier(2.45, 0.6, 4, 0.1)
+
+/* Il faut définir les deux points, il n'y a pas de valeur */
+/* par défaut. */
+cubic-bezier(0.3, 2.1)
+
+/* Les abscisses doivent appartenir à l'intervalle [0, 1] */
+/* car sinon la courbe n'est pas une fonction temporelle. */
+cubic-bezier(-1.9, 0.3, -0.2, 2.1)
+</pre>
+
+<h3 id="La_classe_de_fonction_steps()">La classe de fonction <code>steps()</code></h3>
+
+<p>La notation fonctionnelle <code>steps()</code> permet de définir <a href="https://en.wikipedia.org/wiki/Step_function">une fonction en escalier</a> qui découpe les valeurs de sortie en « marches » de même longueur. Chacune de ces marches correspondra à une étape de l'animation.</p>
+
+<p style="float: left;"><img src="/files/3436/steps(2,start).png" style="height: 332px; width: 248px;"></p>
+
+<p><code>steps(2, start)</code></p>
+
+<p style="float: left;"><img src="/files/3437/steps(4,end).png" style="height: 332px; width: 248px;"></p>
+
+<p><code>steps(4, end)</code></p>
+
+<h4 class="cleared" id="Syntaxe_2">Syntaxe</h4>
+
+<pre class="syntaxbox">steps(<em>nombre_de_marche</em>, <em>direction</em>)
+</pre>
+
+<p>avec</p>
+
+<dl>
+ <dt><code><strong><em>nombre_de_marche</em></strong></code></dt>
+ <dd>Un entier (valeur de type {{cssxref("&lt;integer&gt;")}} qui représente le nombre de marches composant la fonction en escalier.</dd>
+ <dt><code><strong><em>direction</em></strong></code></dt>
+ <dd>Un mot-clé qui indique si la fonction est continue à gauche ou continue à droite :
+ <ul>
+  <li><code>start</code> indique une fonction continue à gauche : la première marche se déroule à partir du début de l'animation</li>
+  <li><code>end</code> indique une fonction continue à droite : la dernière marche se déroule lors de la fin de l'animation.</li>
+ </ul>
+ <code>end</code> est la valeur par défaut.</dd>
+</dl>
+
+<h4 id="Exemples_2">Exemples</h4>
+
+<p>Voici des exemples de fonction de temporisation en escalier valides :</p>
+
+<pre class="brush: css">/* Il y a cinq marches et la dernière est utilisée */
+/* avant la fin de l'animation.                    */
+steps(5, end)
+
+/* Une fonction à deux marches dont la première se */
+/* déroule au début de l'animation.                */
+steps(2, start)
+
+/* Le deuxième paramètre est facultatif. */
+steps(2)
+</pre>
+
+<p>En revanche, celles-ci sont invalides :</p>
+
+<pre class="brush: css example-bad">/* Le premier paramètre doit être un entier (type */
+/* &lt;integer&gt;)                                     */
+steps(2.0, end)
+
+/* Le nombre d'étapes ne peut pas être négatif. */
+steps(-3, start)
+
+/* Il ne peut pas être nul.*/
+steps(0, end)
+</pre>
+
+<h3 id="La_classe_de_fonction_frames()">La classe de fonction <code>frames()</code></h3>
+
+<div class="note">
+<p><strong>Note :</strong> Le nom "frames" est <a href="https://github.com/w3c/csswg-drafts/issues/1301">actuellement en discussion</a> et la classe de fonction associée est actuellement désactivée dans les versions finales des différents navigateurs tant qu'une décision n'a pas été prise.</p>
+</div>
+
+<p>La notation fonctionnelle <code>frames()</code> définit une fonction en escalier avec des intervalles (les marches) équidistantes. La différence difference entre <code>frames()</code> et <code>steps()</code> est que <code>frames()</code> considèrent l'état initial (0%) et final (100%) comme étant des paliers à part entière. Ces états sont donc affichés aussi longtemps que les autres intervalles.</p>
+
+<p><img src="https://www.w3.org/TR/css-timing-1/frames-timing-func-examples.svg" style="float: left; height: 200px; width: 244px;"><code>frames(2), frames(4)</code></p>
+
+<p> </p>
+
+<p> </p>
+
+<h4 id="Syntaxe_3">Syntaxe</h4>
+
+<pre class="syntaxbox">steps(<var>nombre_etapes</var>)
+</pre>
+
+<p>où :</p>
+
+<dl>
+ <dt><var>nombre_etapes</var></dt>
+ <dd>Est un entier ({{cssxref("&lt;integer&gt;")}}) strictement positif qui représente le nombre d'intervalles équidistants qui composent la fonction en escalier.</dd>
+</dl>
+
+<h4 id="Exemples_3">Exemples</h4>
+
+<p>Ces fonctions de temporisation sont valides :</p>
+
+<pre class="brush: css">/* Le paramètre est un entier positif. */
+frames(10)
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> <a href="https://mdn.github.io/css-examples/animation-frames-timing-function/index-transitions.html">une démo de la fonction <code>frames()</code> avec un exemple fonctionnel</a> est disponible sur notre dépôt GitHub.</p>
+</div>
+
+<p>Ces fonctions de temporisation sont invalides :</p>
+
+<pre class="brush: css example-bad">/* Le paramètre passé à la fonction doit être un entier
+   et pas une valeur décimale, même si cette dernière est
+   égale à un entier. */
+frames(2.0)
+
+/* Le nombre de frames doit être positif. */
+frames(-3)
+
+/* Il doit y avoir au moins une frame. */
+frames(0)
+</pre>
+
+<h3 id="Mots-clés_pour_les_fonctions_de_temporisation_usuelles">Mots-clés pour les fonctions de temporisation usuelles</h3>
+
+<h4 id="linear"><code>linear</code></h4>
+
+<p><img src="/files/3425/cubic-bezier,linear.png" style="float: left; height: 332px; width: 249px;">Ce mot-clé représente la fonction de temporisation <code>cubic-bezier(</code><code>0.0, 0.0, 1.0, 1.0</code><code>)</code>. Cette fonction permet de passer de l'état initial à l'état final avec une vitesse constante.</p>
+
+<h4 class="cleared" id="ease"><code>ease</code></h4>
+
+<p><img src="/files/3429/cubic-bezier,ease.png" style="float: left; height: 332px; width: 244px;">Ce mot-clé représente la fonction de temporisation <code>cubic-bezier(0.25, 0.1, 0.25, 1.0)</code>. Cette fonction est semblable à <code>ease-in-out</code> sauf qu'elle accélère plus rapidement au début et ralentit dès la moitié du parcours..</p>
+
+<h4 class="cleared" id="ease-in"><code>ease-in</code></h4>
+
+<p><img src="/files/3426/cubic-bezier,ease-in.png" style="float: left; height: 332px; width: 249px;">Ce mot-clé représente la fonction de temporisation <code>cubic-bezier(0.42, 0.0, 1.0, 1.0)</code>. L'animation démarre lentement puis accélère progressivement jusqu'à atteindre l'état final. Cela donne l'impression que l'animation s'arrête brutalement.</p>
+
+<h4 class="cleared" id="ease-in-out"><code>ease-in-out</code></h4>
+
+<p><img src="/files/3428/cubic-bezier,ease-in-out.png" style="float: left; height: 332px; width: 244px;">Ce mot-clé représente la fonction de temporisation <code>cubic-bezier(</code><code>0.42, 0.0, 0.58, 1.0</code><code>)</code>. L'animation démarre lentement puis accélère progressivement avant de ralentir à nouveau à l'approche de l'état final. Dans la première phase, la courbe se comporte comme <code>ease-in</code> et dans la deuxième moitié, elle se comporte comme <code>ease-out</code>.</p>
+
+<h4 class="cleared" id="ease-out"><code>ease-out</code></h4>
+
+<p><img src="/files/3427/cubic-bezer,ease-out.png" style="float: left; height: 332px; width: 249px;">Ce mot-clé représente la fonction de temporisation <code>cubic-bezier(</code><code>0.0, 0.0, 0.58, 1.0</code><code>)</code>. L'animation démarre rapidement puis ralentit progressivement avant d'atteindre son état final.</p>
+
+<h4 class="cleared" id="step-start"><code>step-start</code></h4>
+
+<p><img src="/files/3423/steps(1,start).png" style="float: left; height: 332px; width: 248px;">Ce mot-clé représente la fonction de temporisation <code>steps(1, start)</code> (ou <code>steps(1, jump-start)</code>). Avec cette fonction, l'animation passe directement à l'état final dès le début et conserve cet état jusqu'à la fin de l'animation.</p>
+
+<h4 class="cleared" id="step-end"><code>step-end</code></h4>
+
+<p><img src="/files/3424/steps(1,end).png" style="float: left; height: 332px; width: 248px;">Ce mot-clé représente la fonction de temporisation <code>steps(1, end)</code> (ou <code>steps(1, jump-end)</code>). Avec cette fonction, l'animation reste dans son état initial tout le long de la durée et passe directement à la position finale à la toute fin.</p>
+
+<h2 class="cleared" id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Spécification</th>
+   <th>État</th>
+   <th>Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#transition-timing-function', '&lt;timing-function&gt;')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Animations', '#animation-timing-function', '&lt;timing-function&gt;')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Définition de <code>&lt;single-timing-function&gt;</code> comme synonyme de <code>&lt;single-transition-timing-function&gt;</code> selon le module CSS pour les transitions.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.types.timing-function", 2)}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés {{cssxref("transition-timing-function")}} et {{cssxref("animation-timing-function")}} qui utilisent une valeur de type <code>&lt;timing-function&gt;</code></li>
+ <li><a href="/fr/docs/Web/CSS/Animations_CSS">Les animations CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Transitions">Les transitions CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/top/index.html b/files/fr/web/css/top/index.html
new file mode 100644
index 0000000000..64d8a462c4
--- /dev/null
+++ b/files/fr/web/css/top/index.html
@@ -0,0 +1,178 @@
+---
+title: top
+slug: Web/CSS/top
+tags:
+  - CSS
+  - Positionnement
+  - Propriété
+  - Reference
+translation_of: Web/CSS/top
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>top</code></strong> définit une partie de la position des éléments positionnés, elle n'a aucun effet pour les éléments non-positionnés.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/top.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>L'effet de la propriété <code>top</code> dépend de la façon dont l'élément est positionné (autrement dit, il dépend de la valeur de la propriété {{cssxref("position")}}) :</p>
+
+<ul>
+ <li>Pour les éléments qui sont positionnés de manière absolue ({{cssxref("position")}}<code>: absolute</code> ou {{cssxref("position")}}<code>: fixed</code>), cette propriété définit la distance entre le bord haut de la marge (<em>margin</em>) de l'élément et le bord haut du bloc englobant (il faut que le bloc englobant ait <code>position: relative</code>).</li>
+ <li>Lorsque <code>position</code> vaut <code>relative</code>, cela définit la grandeur du déplacement avec laquelle l'élément est placé en dessous de sa position normale.</li>
+ <li>Lorsque <code>position</code> vaut <code>sticky</code>, la propriété <code>top</code> se comporte comme avec <code>relative</code> lorsque l'élément se situe à l'intérieur de la zone d'affichage (<em>viewport</em>) et elle se comporte comme <code>fixed</code> lorsque l'élément est à l'extérieur de la zone d'affichage.</li>
+ <li>Lorsque <code>position</code> vaut <code>static</code>, la propriété <code>top</code> n'a aucun effet.</li>
+</ul>
+
+<p>Lorsque <code>top</code> et {{cssxref("bottom")}} sont utilisés tous les deux, tant que {{cssxref("height")}} n'est pas définie ou ne vaut pas <code>auto</code> ou <code>100%</code>, les distances introduites par <code>top</code> et {{cssxref("bottom")}} seront respectées. Sinon, si {{cssxref("height")}} est contrainte d'une certaine façon, la propriété <code>top</code> prendra le pas sur {{cssxref("bottom")}} qui sera ignorée.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css">/* Valeur de longueur */
+/* Type &lt;length&gt; */
+top: 3px;
+top: 2.4em;
+
+/* Valeur en pourcentages */
+/* Relative à la hauteur du bloc englobant */
+/* Type &lt;percentages&gt; */
+top: 10%;
+
+/* Avec un mot-clé */
+top: auto;
+
+/* Valeur globale */
+top: inherit;
+top: initial;
+top: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une valeur négative, nulle ou positive du type {{cssxref("&lt;length&gt;")}} qui représente :
+ <ul>
+  <li>La distance depuis le bord haut du bloc englobant pour les <em>éléments positionnés de façon absolue</em></li>
+  <li>Le décalage avec lequel l'élément est déplacé vers le bas (relativement à sa position normale) pour <em>les éléments positionnés de façon relative</em>.</li>
+ </ul>
+ </dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Une valeur du type {{cssxref("&lt;percentage&gt;")}} qui est relative à la hauteur du bloc englobant.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Un mot-clé qui représente :
+ <ul>
+  <li>Pour les éléments positionnés de façon absolue, la position de l'élément en fonction de la propriété {{cssxref("bottom")}} et qui traite <code>height: auto</code> comme une hauteur basée sur le contenu. Si <code>bottom</code>vaut également <code>auto</code>, l'élément est positionné verticalement comme s'il avait été un élément statique.</li>
+  <li>Pour les éléments positionnés de façon relative, le décalage de l'élément par rapport à sa position originale, basée sur la propriété {{cssxref("bottom")}}. Si <code>bottom</code> vaut également <code>auto</code>, aucun décalage n'est appliqué.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Positionnement_relatif">Positionnement relatif</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p&gt;Lorem ipsum et tralala normal&lt;/p&gt;
+  &lt;p class="relatif"&gt;Lorem ipsum et tralala relatif&lt;/p&gt;
+  &lt;p&gt;Lorem ipsum et tralala normal&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">div {
+  border: 2px black dashed;
+}
+
+p.relatif {
+  position: relative;
+  top: 5em;
+  border: 2px black solid
+}
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Positionnement_relatif","100%","200")}}</p>
+
+<h3 id="Positionnement_absolu">Positionnement absolu</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p&gt;Lorem ipsum et tralala normal&lt;/p&gt;
+  &lt;p class="absolu"&gt;Lorem ipsum et tralala absolu&lt;/p&gt;
+  &lt;p&gt;Lorem ipsum et tralala normal&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">div {
+  border: 2px black dashed;
+}
+
+p.absolu {
+  position: absolute;
+  top: 5em;
+  border: 2px black solid;
+}</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Positionnement_absolu","100%","100%")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'top')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>top</code> peut désormais être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Positioning', '#propdef-top', 'top')}}</td>
+   <td>{{Spec2('CSS3 Positioning')}}</td>
+   <td>Description du comportement pour le positionnement adhérent (<em>sticky</em>)</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#propdef-top', 'top')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.top")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("position")}}</li>
+ <li>{{cssxref("bottom")}}</li>
+ <li>{{cssxref("height")}}</li>
+ <li>{{cssxref("left")}}</li>
+ <li>{{cssxref("right")}}</li>
+ <li><a href="/fr/Apprendre/CSS/Les_bases/La_disposition#Le_positionnement">Les bases de CSS : la disposition et le positionnement</a></li>
+</ul>
diff --git a/files/fr/web/css/touch-action/index.html b/files/fr/web/css/touch-action/index.html
new file mode 100644
index 0000000000..f76ced27d0
--- /dev/null
+++ b/files/fr/web/css/touch-action/index.html
@@ -0,0 +1,160 @@
+---
+title: touch-action
+slug: Web/CSS/touch-action
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/touch-action
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>touch-action</code></strong> définit si une région donnée peut être manipulée par l'utilisateur grâce à des interactions tactiles (en déplaçant ou en zoomant) et comment cette interaction fonctionnera.</p>
+
+<pre class="brush:css no-line-numbers notranslate">/* Avec un mot-clé */
+touch-action: auto;
+touch-action: none;
+touch-action: pan-x;
+touch-action: pan-left;
+touch-action: pan-right;
+touch-action: pan-y;
+touch-action: pan-up;
+touch-action: pan-down;
+touch-action: pinch-zoom;
+touch-action: manipulation;
+
+/* Valeurs globales */
+touch-action: inherit;
+touch-action: initial;
+touch-action: unset;
+</pre>
+
+<p>Par défaut, le déplacement et le zoom sont exclusivement gérés par le navigateur, ce qui déclenche un évènement {{event("pointercancel")}} à destination de l'application. En désactivant la prise en charge de ces gestes, l'application peut alors fournir ses propres gestionnaires d'évènements pour {{event("pointermove")}}, {{event("pointerup")}}.</p>
+
+<p>On utilise parfois cette propriété pour désactiver les interactions tactiles sur un élément pour un jeu ou une carte qui fournissent leur propre gestion tactile.</p>
+
+<p>Lorsqu'une interaction tactile a lieu, le navigateur inspecte les valeurs de <code>touch-action</code> pour l'élément et ses ancêtres jusqu'à atteindre l'élément qui implémente le geste (c'est-à-dire celui qui peut défiler/zoomer). En pratique, <code>touch-action</code> est généralement uniquement appliquée aux éléments de plus haut niveau ayant besoin d'un comportement spécifique. Il n'est pas nécessaire de redéfinir <code>touch-action</code> sur les descendants.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Lorsqu'un geste est déjà initié, tout changement sur <code>touch-action</code> n'aura aucun impact sur le geste en cours.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <code>touch-action</code> peut être définie grâce à :</p>
+
+<ul>
+ <li>l'un des mots-clés parmi <code><a href="#auto">auto</a></code>, <code><a href="#none">none</a></code>, <code><a href="#manipulation">manipulation</a></code><em> ou</em></li>
+ <li>un mot-clé parmi <code><a href="#pan-x">pan-x</a></code>, <code><a href="#pan-keywords">pan-left</a></code>, <code><a href="#pan-keywords">pan-right</a></code>, et/ou un mot-clé parmi <code><a href="#pan-y">pan-y</a></code>, <code><a href="#pan-keywords">pan-up</a></code>, <code><a href="#pan-keywords">pan-down</a></code> et éventuellement le mot-clé <code><a href="#">pinch-zoom</a></code>.</li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>L'agent utilisateur détermine les interactions tactiles possibles (zoomer, déplacer le viewport) lorsque l'élément est touché.</dd>
+ <dt><code>manipulation</code></dt>
+ <dd>Les gestes de déplacement et de zoom sont autorisés mais les gestes non-standards (ex. double touche pour zoomer) sont désactivés. Cette valeur est un alias pour <code>pan-x pan-y pinch-zoom</code>.</dd>
+ <dt><code>none</code></dt>
+ <dd>Cette valeur désactive tous les comportements par défaut et permet au contenu de gérer les interaction tactiles (les touches qui commencent sur l'élément ne doivent pas déclencher de comportements tactiles par défaut).</dd>
+ <dt><code>pan-x</code></dt>
+ <dd>L'agent utilisateur peut considérer que les touchers qui débutent sur l'élément ont pour but de faire défiler horizontalement le plus proche ancêtre de l'élément qui possède du contenu en défilement horizontal. Cette valeur peut être combinée avec <code>pan-y</code>, <code>pan-up</code>, <code>pan-down</code> et/ou <code>pinch-zoom</code>.</dd>
+ <dt><code>pan-y</code></dt>
+ <dd>L'agent utilisateur peut considérer que les touchers qui débutent sur l'élément ont pour but de faire défiler verticalement le plus proche ancêtre de l'élément qui possède du contenu en défilement vertical. Cette valeur peut être combinée avec <code>pan-x</code>, <code>pan-left</code>, <code>pan-right</code> et/ou <code>pinch-zoom</code>.</dd>
+ <dt><code>pan-left</code>, <code>pan-right</code> {{experimental_inline}}</dt>
+ <dd>L'agent utilisateur peut considérer que les touchers qui commencent sur l'élément n'ont pour but que de faire défiler horizontalement le contenu du plus proche ancêtre de l'élément qui possède du contenu qui peut défiler (<em>scrollable</em>) horizontalement.</dd>
+ <dt><code>pan-up</code>, <code>pan-down</code> {{experimental_inline}}</dt>
+ <dd>L'agent utilisateur peut considérer que les touchers qui commencent sur l'élément n'ont pour but que de faire défiler verticalement le contenu du plus proche ancêtre de l'élément qui possède du contenu qui peut défiler (<em>scrollable</em>) verticalement.</dd>
+ <dt><code>pinch-zoom</code></dt>
+ <dd>L'agent utilisateur peut considérer que les touches qui commencent sur l'élément n'ont pour but que de zoomer sur l'ancêtre le plus proche qui contient du contenu sur lequel on peut zoomer.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;ul&gt;Ma list
+  &lt;li&gt;UnLongTexteQuiDevraitTenirSurUneLigneHeureusementQuOnAOverflowScroll&lt;/li&gt;
+  &lt;li&gt;UnAutreLongTexteQuiDevraitTenirSurUneLigneHeureusementQuOnAOverflowScroll&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">ul {
+  width: 200px;
+  height: 50px;
+  overflow-x: scroll;
+}
+
+ul &gt; li {
+  touch-action: pan-x pinch-zoom;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> La propriété <code>touch-action</code> est également utilisée afin de supprimer le délai donné à l'évènement {{event("click")}} pour prendre en charge le zoom via la double-touche.</p>
+</div>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Une déclaration <code>touch action: none;</code> empêchera le navigateur de zoomer. Cela peut empêcher les personnes à faible vision de lire et de comprendre le contenu de la page.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li>
+ <li><em><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html">Understanding Success Criterion 1.4.4 - Understanding WCAG 2.0</a></em><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html"> (en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Compat', '#touch-action', 'touch-action')}}</td>
+   <td>{{Spec2('Compat')}}</td>
+   <td>Ajout de la valeur <code>pinch-zoom</code> pour la propriété.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events 2 Ext', '#additional-touch-action-values', 'touch-action')}}</td>
+   <td>{{Spec2('Pointer Events 2 Ext')}}</td>
+   <td>Ajout des valeurs <code>pan-left</code>, <code>pan-right</code>, <code>pan-up</code>, <code>pan-down</code> pour la propriété.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events', '#the-touch-action-css-property', 'touch-action')}}</td>
+   <td>{{Spec2('Pointer Events')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{compat("css.properties.touch-action")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Pointer_events">Les événements de pointage</a></li>
+ <li>Un billet du blog WebKit : <a href="https://webkit.org/blog/5610/more-responsive-tapping-on-ios/">une gestion plus responsive du toucher sur iOS (en anglais)</a></li>
+ <li><a href="*https://developers.google.com/web/updates/2017/01/scrolling-intervention">Rendre le défilement tactile rapide, par défaut sur le Google Developers Blog</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Scroll_Snap">Le module de spécification CSS Scroll Snap</a></li>
+</ul>
diff --git a/files/fr/web/css/transform-box/index.html b/files/fr/web/css/transform-box/index.html
new file mode 100644
index 0000000000..7f040e8636
--- /dev/null
+++ b/files/fr/web/css/transform-box/index.html
@@ -0,0 +1,108 @@
+---
+title: transform-box
+slug: Web/CSS/transform-box
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-box
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>transform-box</code></strong> définit la boîte à laquelle les propriétés {{cssxref("transform")}} et {{cssxref("transform-origin")}} font référence.</p>
+
+<pre class="brush:css no-line-numbers">/* Avec un mot-clé */
+transform-box: border-box;
+transform-box: fill-box;
+transform-box: view-box;
+
+/* Valeurs globales */
+transform-box: inherit;
+transform-box: initial;
+transform-box: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <code>transform-box</code> est définie grâce à l'un des mots-clés suivants.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>border-box</code></dt>
+ <dd>La boîte de bordure (<em>border</em>) est utilisée comme boîte de référence. La boîte de référence d'un tableau est la boîte de bordure englobante (celle qui inclue les éventuelles légendes ou titres rattachés au tableau) et non uniquement celle autour du tableau.</dd>
+ <dt><code>fill-box</code></dt>
+ <dd>La boîte liée à l'objet est utilisée comme boîte de référence.</dd>
+ <dt><code>view-box</code></dt>
+ <dd>Le plus proche <em>viewport</em> {{Glossary("SVG")}} est utilisé comme boîte de référence. Si l'attribut {{SVGAttr("viewBox")}} est défini pour le <em>viewport</em> de l'élément, la boîte de référence est positionnée à l'origine du système de coordonnées défini par l'attribut <code>viewBox</code> et les dimensions de la boîte de référence sont définies avec les valeurs de hauteur et largeur de l'attribut <code>viewBox</code>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="premier"&gt;"I saw Mr. Hyde"&lt;/p&gt;
+
+&lt;p class="deuxieme"&gt;"Quite right, Mr. Utterson"&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  transform: rotate(90deg);
+  transform-origin: bottom left;
+  transform-box: border-box;
+}
+
+.premier {
+   border: 3px black solid;
+}
+
+.deuxieme {
+  border: 3px black solid;
+  padding: 3em;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemple","100%","300")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transforms', '#transform-box', 'transform-box')}}</td>
+   <td>{{Spec2('CSS3 Transforms')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.transform-box")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS">Utiliser les transformations CSS</a></li>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("transform-origin")}}</li>
+</ul>
diff --git a/files/fr/web/css/transform-function/index.html b/files/fr/web/css/transform-function/index.html
new file mode 100644
index 0000000000..7ee42e43cb
--- /dev/null
+++ b/files/fr/web/css/transform-function/index.html
@@ -0,0 +1,162 @@
+---
+title: transform-function
+slug: Web/CSS/transform-function
+tags:
+  - CSS
+  - Reference
+  - Type de donnée
+translation_of: Web/CSS/transform-function
+---
+<div>{{CSSRef}}</div>
+
+<p>Le type de donnée <strong><code>&lt;transform-function&gt;</code></strong> représente une fonction qui, lorsqu'elle est appliquée à un élément, permet de modifier sa représentation géométrique. Ces transformations sont généralement exprimées sous forme de matrices et l'image obtenue peut être déterminée en appliquant la matrice de la transformation sur chaque point de l'image. On peut ainsi tourner, redimensionner, distordre. Ce type de donnée est utilisé avec la propriété {{cssxref("transform")}}.</p>
+
+<h2 id="Coordonnées_en_deux_dimensions">Coordonnées en deux dimensions</h2>
+
+<p>Il existe plusieurs modèles de repères géométriques permettant de décrire des transformations. Le repère utilisé le plus communément est <a href="https://fr.wikipedia.org/wiki/Coordonn%C3%A9es_cart%C3%A9siennes">le système cartésien</a>.</p>
+
+<h3 id="Le_système_de_coordonnées_cartésiennes">Le système de coordonnées cartésiennes</h3>
+
+<p><a href="/@api/deki/files/5796/=coord_in_R2.png"><img src="/files/3438/coord_in_R2.png" style="float: right; width: 171px;"></a></p>
+
+<p>Pour <a class="external" href="https://fr.wikipedia.org/wiki/Coordonn%C3%A9es_cart%C3%A9siennes">le système cartésien</a>, chaque point de l'espace est décrit avec deux valeurs, l'abscisse et l'ordonnée. L'origine du repère <code>(0, 0)</code> correspond au coin supérieur gauche de l'élément. À la différence des conventions usuelles, l'axe verticale (<em>y</em>) se dirige vers le bas. Chaque point est décrit avec la notation <code>(x,y)</code>.</p>
+
+<p>Chaque fonction linéaire est décrite avec une matrice 2 x 2 :</p>
+
+<div style="text-align: center;">
+<p><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd></mtr> <mtr><mtd>b</mtd><mtd>d</mtd></mtr> </mtable> </mfenced> </math></p>
+</div>
+
+<p>L'application d'une transformation consiste à multiplier la matrice de transformation au vecteur de coordonnées <code>(x,y)</code> :</p>
+
+<p style="text-align: center;"><math> <mfenced> <mtable> <mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd></mtr> <mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd></mtr> </mtable> </mfenced> <mfenced> <mtable> <mtr><mtd><mi>x</mi></mtd></mtr><mtr><mtd><mi>y</mi></mtd></mtr> </mtable> </mfenced> <mo>=</mo> <mfenced> <mtable> <mtr> <mtd><mi>a</mi><mi>x</mi><mo>+</mo><mi>c</mi><mi>y</mi></mtd> </mtr> <mtr> <mtd><mi>b</mi><mi>x</mi><mo>+</mo><mi>d</mi><mi>y</mi></mtd> </mtr> </mtable> </mfenced> </math></p>
+
+<p>On peut appliquer plusieurs transformations les unes à la suite des autres :</p>
+
+<p style="text-align: center;"><math> <mfenced> <mtable> <mtr> <mtd><msub><mi>a</mi><mn>1</mn></msub></mtd> <mtd><msub><mi>c</mi><mn>1</mn></msub></mtd> </mtr> <mtr> <mtd><msub><mi>b</mi><mn>1</mn></msub></mtd> <mtd><msub><mi>d</mi><mn>1</mn></msub></mtd> </mtr> </mtable> </mfenced> <mfenced> <mtable> <mtr> <mtd><msub><mi>a</mi><mn>2</mn></msub></mtd> <mtd><msub><mi>c</mi><mn>2</mn></msub></mtd> </mtr> <mtr> <mtd><msub><mi>b</mi><mn>2</mn></msub></mtd> <mtd><msub><mi>d</mi><mn>2</mn></msub></mtd> </mtr> </mtable> </mfenced> <mo>=</mo> <mfenced> <mtable> <mtr> <mtd> <msub><mi>a</mi><mn>1</mn></msub> <msub><mi>a</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>c</mi><mn>1</mn></msub> <msub><mi>b</mi><mn>2</mn></msub> </mtd> <mtd> <msub><mi>a</mi><mn>1</mn></msub> <msub><mi>c</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>c</mi><mn>1</mn></msub> <msub><mi>d</mi><mn>2</mn></msub> </mtd> </mtr> <mtr> <mtd> <msub><mi>b</mi><mn>1</mn></msub> <msub><mi>a</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>d</mi><mn>1</mn></msub> <msub><mi>b</mi><mn>2</mn></msub> </mtd> <mtd> <msub><mi>b</mi><mn>1</mn></msub> <msub><mi>c</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>d</mi><mn>1</mn></msub> <msub><mi>d</mi><mn>2</mn></msub> </mtd> </mtr> </mtable> </mfenced> </math></p>
+
+<p>En utilisant cette notation, on peut décrire et enchaîner (ou composer) la plupart des transformations : des rotations, des homothéties et des distorsions. Les transformations qui sont composées entre elles sont appliquées dans l'ordre, de droite à gauche. Une transformation qui n'est pas linéaire ne pourra pas être représentée par cet outil. Ainsi, l'opération de translation ne pourra pas être représentée par une matrice et devra être gérée à part.</p>
+
+<p><a class="external" href="https://fr.wikipedia.org/wiki/August_Ferdinand_M%C3%B6bius">Les coordonnées homogènes de Möbius</a> utilisées en <a class="external" href="https://fr.wikipedia.org/wiki/G%C3%A9om%C3%A9trie_projective">géométrie projective</a> permettent d'obtenir des matrices de transformations 3x3. Bien que plus complexe et moins usitées, celles-ci permettent de représenter les translations car ces dernières correspondent à des fonctions linéaires pour cette algèbre.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Plusieurs fonctions sont disponibles en CSS pour décrire des transformations. Chacune des fonctions qui suivent applique une opération géométrique, en 2D ou en 3D.</p>
+
+<h3 id="Matrices_de_transformation">Matrices de transformation</h3>
+
+<dl>
+ <dt><code><a href="/fr/docs/Web/CSS/transform-function/matrix">matrix()</a></code></dt>
+ <dd>La fonction <code>matrix()</code> permet de définir une matrice de transformation homogène en deux dimensions. Cette matrice contient six coefficients. Les valeurs constantes de ces matrices sont implicites et ne font donc pas partie des paramètres. Les autres paramètres sont décrits dans l'ordre des colonnes.</dd>
+ <dd><code>matrix(a, b, c, d, tx, ty)</code> est une notation raccourcie pour <code>matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)</code>.</dd>
+ <dt><code><a href="/fr/docs/Web/CSS/transform-function/matrix3d">matrix3d()</a></code></dt>
+ <dd>La fonction <code>matrix3d()</code> permet de définir une transformation en trois dimensions grâce à une matrice homogène 4x4. Les 16 paramètres sont décrits dans l'ordre des colonnes.</dd>
+</dl>
+
+<h3 id="Perspective">Perspective</h3>
+
+<dl>
+ <dt><code><a href="/fr/docs/Web/CSS/transform-function/perspective">perspective()</a></code></dt>
+ <dd>La fonction <code>perspective()</code> définit la distance entre le plan de coordonnées z=0 et l'œil de l'utilisateur. Cela permet de placer une perspective en trois dimensions sur l'élément. Chaque élément 3D pour lequel z est supérieur à 0 devient plus grand et chaque élément pour lequel z est négatif devient plus petit.</dd>
+</dl>
+
+<h3 id="Rotation">Rotation</h3>
+
+<dl>
+ <dt><code><a href="/fr/docs/Web/CSS/transform-function/rotate">rotate()</a></code></dt>
+ <dd>La fonction <code>rotate()</code> définit une transformation qui déplace l'élément autour d'un point fixe (défini par la propriété {{cssxref("transform-origin")}}) sans le déformer. La quantité de mouvement est définie par l'angle passé en argument. Si la valeur fournie est positive, le mouvement se fait dans le sens des aiguilles d'une montre (sens <em>horaire</em>) et sinon dans le sens inverse (sens <em>anti-horaire</em>).</dd>
+ <dt><code><a href="/fr/docs/Web/CSS/transform-function/rotate3d">rotate3d()</a></code></dt>
+ <dd>La fonction <code>rotate3d()</code> définit une transformation qui déplace l'élément autour d'un axe donné, sans déformer l'élément. La quantité de mouvement est indiquée par l'angle passé en argument. Si celui-ci est positif, le mouvement se fera dans le sens des aiguilles d'une montre (sens <em>horaire</em>) et s'il est négatif, il se fera dans le sens anti-horaire. Contrairement aux rotations en deux dimensions (rotations <em>planes</em>), la composition des rotations en trois dimensions n'est pas commutative (autrement dit, l'ordre dans lequel elles sont appliquées a toute son importance).</dd>
+ <dt><code><a href="/fr/docs/Web/CSS/transform-function/rotateX">rotateX()</a></code></dt>
+ <dd>La fonction <code>rotateX()</code> définit une transformation qui déplace un élément autour de l'axe des abscisses sans le déformer. La quantité de mouvement est indiquée par l'angle passé en argument. Si celui-ci est positif, le mouvement se fera dans le sens des aiguilles d'une montre (sens <em>horaire</em>) et s'il est négatif, il se fera dans le sens anti-horaire. L'origine de cette rotation est définie par la propriété {{cssxref("transform-origin")}}.</dd>
+ <dd><code>rotateX(a)</code> est une notation raccourcie pour <code>rotate3D(1, 0, 0, a)</code>.</dd>
+ <dt><code><a href="/fr/docs/Web/CSS/transform-function/rotateY">rotateY()</a></code></dt>
+ <dd>La fonction <code>rotateY()</code> définit une transformation qui déplace un élément autour de l'axe des ordonnées sans le déformer. La quantité de mouvement est indiquée par l'angle passé en argument. Si celui-ci est positif, le mouvement se fera dans le sens des aiguilles d'une montre (sens <em>horaire</em>) et s'il est négatif, il se fera dans le sens anti-horaire. L'origine de cette rotation est définie par la propriété {{cssxref("transform-origin")}}.</dd>
+ <dd><code>rotateY(a)</code> est une notation raccourcie pour <code>rotate3D(0, 1, 0, a)</code>.</dd>
+ <dt><code><a href="/fr/docs/Web/CSS/transform-function/rotateZ">rotateZ()</a></code></dt>
+ <dd>La fonction <code>rotateZ()</code> définit une transformation qui déplace un élément autour de l'axe Z sans le déformer. La quantité de mouvement est indiquée par l'angle passé en argument. Si celui-ci est positif, le mouvement se fera dans le sens des aiguilles d'une montre (sens <em>horaire</em>) et s'il est négatif, il se fera dans le sens anti-horaire. L'origine de cette rotation est définie par la propriété {{cssxref("transform-origin")}}.</dd>
+ <dd><code>rotateZ(a)</code> est une notation raccourcie pour <code>rotate3D(0, 0, 1, a)</code>.</dd>
+</dl>
+
+<h3 id="Changement_d'échelle">Changement d'échelle</h3>
+
+<dl>
+ <dt><code><a href="/fr/docs/Web/CSS/transform-function/scale">scale()</a></code></dt>
+ <dd>La fonction <code>scale()</code> modifie la taille d'un élément. Elle permet d'appliquer une homothétie définie par un vecteur. Ce vecteur décrit l'amplification ou la réduction de l'élément selon chacun des deux axes plans. Si les deux coordonnées sont égales, l'homothétie sera uniforme et la forme de l'élément sera conservée.</dd>
+ <dt><a href="/fr/docs/Web/CSS/transform-function/scale3d">scale3d()</a></dt>
+ <dd>La fonction <code>scale3d()</code> modifie la taille d'un élément. Elle permet d'appliquer une homothétie définie par un vecteur. Ce vecteur décrit l'amplification ou la réduction de l'élément selon les trois axes. Si les trois coordonnées sont égales, l'homothétie sera uniforme et la forme de l'élément sera conservée.</dd>
+ <dt><code><a href="/fr/docs/Web/CSS/transform-function/scaleX">scaleX()</a></code></dt>
+ <dd>La fonction <code>scaleX()</code> modifie l'abscisse de chaque point de l'élément en la multipliant par un facteur. Si ce facteur vaut 1, la fonction de transformation correspondra à l'identité. Cette transformation n'est pas isotropique et les angles de l'élément ne sont pas conservés. <code>scaleX(-1)</code> permet de définir une symétrie axiale qui passe par l'axe vertical de l'origine (définie par la propriété {{cssxref("transform-origin")}}).</dd>
+ <dd><code>scaleX(sx)</code> est une notation raccourcie pour <code>scale(sx, 1)</code> ou pour <code>scale3d(sx, 1, 1)</code>.</dd>
+ <dt><code><a href="/fr/docs/Web/CSS/transform-function/scaleY">scaleY()</a></code></dt>
+ <dd>La fonction <code>scaleY()</code> modifie l'ordonnée de chaque point de l'élément en la multipliant par un facteur. Si ce facteur vaut 1, la fonction de transformation correspondra à l'identité. Cette transformation n'est pas isotropique et les angles de l'élément ne sont pas conservés. <code>scaleY(-1)</code> permet de définir une symétrie axiale qui passe par l'axe horizontal de l'origine (définie par la propriété {{cssxref("transform-origin")}}).</dd>
+ <dd><code>scaleY(sy)</code> est une notation raccourcie pour <code>scale(1, sy)</code> ou pour <code>scale3d(1, sy, 1)</code>.</dd>
+ <dt><code><a href="/fr/docs/Web/CSS/transform-function/scaleZ">scaleZ()</a></code></dt>
+ <dd>La fonction <code>scaleZ()</code> modifie la côte de chaque point de l'élément en la multipliant par un facteur. Si ce facteur vaut 1, la fonction de transformation correspondra à l'identité. Cette transformation n'est pas isotropique et les angles de l'élément ne sont pas conservés. <code>scaleZ(-1)</code> permet de définir une symétrie axiale qui passe par l'axe Z de l'origine (définie par la propriété {{cssxref("transform-origin")}}).</dd>
+ <dd><code>scaleZ(sz)</code> est une notation raccourcie pour <code>scale3d(1, 1, sz)</code>.</dd>
+</dl>
+
+<h3 id="Distorsions">Distorsions</h3>
+
+<dl>
+ <dt><code><a href="/fr/docs/Web/CSS/transform-function/skew">skew()</a></code></dt>
+ <dd>La fonction <code>skew()</code> permet de décrire une distorsion de l'élément où chaque point est tourné d'un angle dans chaque direction. Plus le point est éloigné de l'origine, plus grande sera la transformation appliquée.</dd>
+ <dt><code><a href="/fr/docs/Web/CSS/transform-function/skewX">skewX()</a></code></dt>
+ <dd>La fonction <code>skewX()</code> permet de distordre un élément dans la direction horizontale. Le résultat est obtenu en augmentant l'abscisse par une valeur proportionnelle à l'angle et à la distance par rapport à l'origine. Plus le point est éloigné de l'origine, plus grande sera la transformation appliquée.</dd>
+ <dt><code><a href="/fr/docs/Web/CSS/transform-function/skewY">skewY()</a></code></dt>
+ <dd>La fonction <code>skewY()</code> permet de distordre un élément dans la direction verticale. Le résultat est obtenu en augmentant l'ordonnée par une valeur proportionnelle à l'angle et à la distance par rapport à l'origine. Plus le point est éloigné de l'origine, plus grande sera la transformation appliquée.</dd>
+</dl>
+
+<h3 id="Translations">Translations</h3>
+
+<dl>
+ <dt><code><a href="/fr/docs/Web/CSS/transform-function/translate">translate()</a></code></dt>
+ <dd>La fonction <code>translate()</code> permet de déplacer un élément sur le plan formé par le document. Cette transformation est caractérisée par un vecteur contenant deux coordonnées dont chacune définit la quantité de déplacement horizontale et verticale.</dd>
+ <dt><code><a href="/fr/docs/Web/CSS/transform-function/translate3d">translate3d()</a></code></dt>
+ <dd>La fonction <code>translate3d()</code> permet de déplacer un élément dans l'espace en 3D. Cette transformation est caractérisée par un vecteur en 3 dimensions dont les coordonnées définissent les quantités de déplacement respectives aux trois axes.</dd>
+ <dt><code><a href="/fr/docs/Web/CSS/transform-function/translateX">translateX()</a></code></dt>
+ <dd>La fonction <code>translateX()</code> permet de déplacer un élément horizontalement dans le plan. Cette transformation est caractérisée par une valeur de type {{cssxref("&lt;length&gt;")}} qui définit la quantité de déplacement horizontal.</dd>
+ <dd><code>translateX(tx)</code>est une notation raccourcie pour ​​​​​​ <code>translate(tx, 0)</code>.</dd>
+ <dt><code><a href="/fr/docs/Web/CSS/transform-function/translateY">translateY()</a></code></dt>
+ <dd>La fonction <code>translateY()</code> permet de déplacer un élément verticalement dans le plan. Cette transformation est caractérisée par une valeur de type {{cssxref("&lt;length&gt;")}} qui définit la quantité de déplacement vertical.</dd>
+ <dd><code>translateY(ty)</code> est une notation raccourcie pour <code>translate(0, ty)</code>.</dd>
+ <dt><code><a href="/fr/docs/Web/CSS/transform-function/translateZ">translateZ()</a></code></dt>
+ <dd>La fonction <code>translateZ()</code> permet de déplacer un élément sur l'axe z de l'espace en 3D. Cette transformation est caractérisée par une valeur de type {{cssxref("&lt;length&gt;")}} qui définit la quantité de déplacement.</dd>
+ <dd><code>translateZ(tz)</code> est une notation raccourcie pour <code>translate3d(0, 0, tz)</code>.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Transforms 2', '#transform-functions', '&lt;transform-function&gt;')}}</td>
+   <td>{{Spec2('CSS Transforms 2')}}</td>
+   <td>Added 3D transform functions.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transforms', '#transform-functions', '&lt;transform-function&gt;')}}</td>
+   <td>{{Spec2('CSS3 Transforms')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.types.transform-function")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La propriété CSS {{cssxref("transform")}}</li>
+</ul>
diff --git a/files/fr/web/css/transform-function/matrix()/index.html b/files/fr/web/css/transform-function/matrix()/index.html
new file mode 100644
index 0000000000..9e1068a7e0
--- /dev/null
+++ b/files/fr/web/css/transform-function/matrix()/index.html
@@ -0,0 +1,112 @@
+---
+title: matrix()
+slug: Web/CSS/transform-function/matrix()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/matrix()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>matrix()</code></strong> définit une matrice homogène de transformation, définie par 6 coefficients. Les paramètres de cette fonction sont ces coefficients, dans l'ordre des lignes puis des colonnes, suivis des coefficients de translation.</p>
+
+<p><code>matrix(a, b, c, d, tx, ty)</code> est une notation raccourcie, équivalente à <code>matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">matrix(<var>a</var>, <var>b</var>, <var>c</var>, <var>d</var>, <var>tx</var>, <var>ty</var>)
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>a</code> <code>b</code> <code>c</code> <code>d</code></dt>
+ <dd>Les coefficients de la matrice, de type {{cssxref("&lt;number&gt;")}}, qui définissent la transformation linéaire.</dd>
+ <dt><code>tx</code> <code>ty</code></dt>
+ <dd>Les coefficients de la matrice, de type {{cssxref("&lt;number&gt;")}}, qui définissent la translation à appliquer.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> Jusqu'à Firefox 16, Gecko permettait d'utiliser des valeurs {{cssxref("&lt;length&gt;")}} pour les coefficients <code>tx</code> et <code>ty</code>.</p>
+</div>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd></mtr> <mtr><mtd>b</mtd><mtd>d</mtd></mtr> </mtable> </mfenced> </math></td>
+   <td><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd><mtd>tx</mtd></mtr><mtr><mtd>b</mtd><mtd>d</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd><mtd>tx</mtd></mtr><mtr><mtd>b</mtd><mtd>d</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd><mtd>0</mtd><mtd>tx</mtd></mtr><mtr><mtd>b</mtd><mtd>d</mtd><mtd>0</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[a b c d tx ty]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation{
+  transform: matrix(0.87,-0.5,0,0.87,0,1);
+  background-color: blue;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","200")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Transforms", "#funcdef-transform-matrix", "matrix()")}}</td>
+   <td>{{Spec2("CSS3 Transforms")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+ <li><code><a href="/fr/docs/Web/CSS/transform-function/matrix3d">matrix3d()</a></code></li>
+ <li><a href="https://dev.opera.com/articles/understanding-the-css-transforms-matrix/">Comprendre les matrices de transformations CSS (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/transform-function/matrix3d()/index.html b/files/fr/web/css/transform-function/matrix3d()/index.html
new file mode 100644
index 0000000000..0f638286b7
--- /dev/null
+++ b/files/fr/web/css/transform-function/matrix3d()/index.html
@@ -0,0 +1,182 @@
+---
+title: matrix3d()
+slug: Web/CSS/transform-function/matrix3d()
+tags:
+  - CSS
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/matrix3d()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>matrix3d()</code></strong> décrit une transformation en trois dimensions sous la forme d'une matrice homogène (4x4). Les 16 paramètres passés à la fonction sont listés par ligne puis par colonne. Le résultat de cette fonction est une valeur de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">matrix3d(<var>a1</var>, <var>b1</var>, <var>c1</var>, <var>d1</var>, <var>a2</var>, <var>b2</var>, <var>c2</var>, <var>d2</var>, <var>a3</var>, <var>b3</var>, <var>c3</var>, <var>d3</var>, <var>a4</var>, <var>b4</var>, <var>c4</var>, <var>d4</var>)</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><var>a1</var> <var>b1</var> <var>c1</var> <var>d1</var> <var>a2</var> <var>b2</var> <var>c2</var> <var>d2</var> <var>a3</var> <var>b3</var> <var>c3</var> <var>d3</var> <var>d4</var></dt>
+ <dd>Des valeurs de type {{cssxref("&lt;number&gt;")}} qui sont les coefficients de la matrice définissant la transformation linéaire.</dd>
+ <dt><code>a4</code> <code>b4<em> </em>c4</code></dt>
+ <dd>Les coefficients de type {{cssxref("&lt;number&gt;")}} qui définissent la translation à appliquer.</dd>
+</dl>
+
+<div class="note"><strong>Note :</strong> Jusqu'à Firefox 16, Gecko permettait d'utiliser des valeurs {{cssxref("&lt;length&gt;")}} pour les coefficients <code>a4</code>, <code>b4</code> et <code>c4</code>.</div>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2" rowspan="2">Cette transformation s'applique dans l'espace (3D) et ne peut pas être représentée en deux dimensions.</td>
+   <td colspan="1" rowspan="2">Les matrices exprimées avec des coordonnées cartésiennes ne permettent pas de représenter des transformations 3D affines car les translations ne sont pas des transformations linéaires.</td>
+   <td colspan="1" rowspan="2"><math><mfenced><mtable><mtr><mtd>a1</mtd><mtd>a2</mtd><mtd>a3</mtd><mtd>a4</mtd></mtr><mtr><mtd>b1</mtd><mtd>b2</mtd><mtd>b3</mtd><mtd>b4</mtd></mtr><mtr><mtd>c1</mtd><mtd>c2</mtd><mtd>c3</mtd><mtd>c4</mtd></mtr><mtr><mtd>d1</mtd><mtd>d2</mtd><mtd>d3</mtd><mtd>d4</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation{
+  transform: matrix3d(0.87,-0.5,0.00,0,0.50,0.87,0.00,0,0,0,1,0,0,0,0,1);
+  background-color: blue;
+}
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemple_simple","100%","200")}}</p>
+
+<h3 id="Translation_et_homothétie_matricielle">Translation et homothétie matricielle</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="foo"&gt;
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+ Quos quaerat sit soluta, quisquam exercitationem delectus qui unde in facere
+ necessitatibus aut quia porro dolorem nesciunt enim, at consequuntur aliquam esse?
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">html {
+  width: 100%;
+}
+body {
+  height: 100vh;
+  /* Centering content */
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+  align-content: center;
+
+}
+.foo {
+  width: 50%;
+  padding: 1em;
+  color: white;
+  background: #ff8c66;
+  border: 2px dashed black;
+  text-align: center;
+  font-family: system-ui, sans-serif;
+  font-size: 14px;
+   /* Setting up animation for better demonstration */
+  animation: MotionScale 2s alternate linear infinite;
+}
+
+@keyframes MotionScale {
+  from {
+    /*
+      Identity matrix is used as basis here.
+      The matrix below describes the
+      following transformations:
+        Translates every X point by -50px
+        Translates every Y point by -100px
+        Translates every Z point by 0
+        Scales down by 10%
+    */
+    transform: matrix3d(
+      1,0,0,0,
+      0,1,0,0,
+      0,0,1,0,
+      -50,-100,0,1.1
+    );
+
+  }
+  50% {
+    transform: matrix3d(
+      1,0,0,0,
+      0,1,0,0,
+      0,0,1,0,
+      0,0,0,0.9
+    );
+  }
+  to {
+     transform: matrix3d(
+      1,0,0,0,
+      0,1,0,0,
+      0,0,1,0,
+      50,100,0,1.1
+    )
+  }
+}</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample('Translation_et_homothétie_matricielle', '100%', '400px')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Transforms 2", "#funcdef-matrix3d", "matrix3d()")}}</td>
+   <td>{{Spec2("CSS Transforms 2")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+ <li><a href="https://dev.opera.com/articles/understanding-the-css-transforms-matrix/">Comprendre les matrices de transformations CSS (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/transform-function/perspective()/index.html b/files/fr/web/css/transform-function/perspective()/index.html
new file mode 100644
index 0000000000..0fb86405b6
--- /dev/null
+++ b/files/fr/web/css/transform-function/perspective()/index.html
@@ -0,0 +1,159 @@
+---
+title: perspective()
+slug: Web/CSS/transform-function/perspective()
+tags:
+  - CSS
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/perspective()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>perspective()</code></strong> définit la distance entre le plan d'équation z = 0 et l'œil de l'utilisateur afin de fournir une perspective aux éléments positionnés dans l'espace (3D). Chaque élément pour lequel z est positif apparaîtra plus grand et chaque élément pour lequel z est négatif apparaîtra plus petit. La « force » de cet effet est déterminée par la valeur de cette propriété. La valeur obtenue comme résultat de cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+
+<p>Le résultat de cette fonction est une valeur de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-perspective.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La fonction de transformation <code>perspective()</code>s'applique à l'élément qu'on veut transformer. En revanche, les propriétés {{cssxref('perspective')}} et {{cssxref('perspective-origin')}} s'appliquent sur l'élément parent de l'enfant qu'on veut placer dans un espace 3D.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">perspective(<var>l</var>)
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><var>l</var></dt>
+ <dd>Une valeur de type {{cssxref("&lt;length&gt;")}} qui définit la distance entre l'œil de l'utilisateur et le plan décrit par l'équation <code>z = 0</code>. Si la valeur est nulle ou négative, aucune perspective ne sera appliquée.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2" rowspan="2">
+    <p>Cette transformation s'applique dans l'espace (3D) et ne peut pas être représentée en deux dimensions.</p>
+   </td>
+   <td colspan="1" rowspan="2">Une perspective n'est pas une transformation linéaire de ℝ<sup>3</sup> et ne peut donc pas être représentée en utilisant une matrice du système cartésien.</td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd><mo>−</mo>1<mo>/</mo>d</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Appliquer_une_perspective_sur_un_objet_3D">Appliquer une perspective sur un objet 3D</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">.face {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  line-height: 100px;
+  font-size: 100px;
+  text-align: center;
+}
+
+p + div {
+  width: 100px;
+  height: 100px;
+  transform-style: preserve-3d;
+  margin-left: 100px;
+}
+.no-perspective-box {
+  transform: rotateX(-15deg) rotateY(30deg);
+}
+
+.perspective-box-far {
+  transform: perspective(9cm) rotateX(-15deg) rotateY(30deg);
+}
+
+.perspective-box-closer {
+  transform: perspective(4cm) rotateX(-15deg) rotateY(30deg);
+}
+
+.top {
+  background-color: skyblue;
+  transform: rotateX(90deg) translate3d(0, 0, 50px);
+}
+
+.left {
+  background-color: pink;
+  transform: rotateY(-90deg) translate3d(0, 0, 50px);
+}
+
+.front {
+  background-color: limegreen;
+  transform: translate3d(0, 0, 50px);
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;Sans perspective :&lt;/p&gt;
+&lt;div class="no-perspective-box"&gt;
+  &lt;div class="face front"&gt;A&lt;/div&gt;
+  &lt;div class="face top"&gt;B&lt;/div&gt;
+  &lt;div class="face left"&gt;C&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;p&gt;Avec une perspective (9cm) :&lt;/p&gt;
+&lt;div class="perspective-box-far"&gt;
+  &lt;div class="face front"&gt;A&lt;/div&gt;
+  &lt;div class="face top"&gt;B&lt;/div&gt;
+  &lt;div class="face left"&gt;C&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;p&gt;Avec une perspective (4cm) :&lt;/p&gt;
+&lt;div class="perspective-box-closer"&gt;
+  &lt;div class="face front"&gt;A&lt;/div&gt;
+  &lt;div class="face top"&gt;B&lt;/div&gt;
+  &lt;div class="face left"&gt;C&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Appliquer_une_perspective_sur_un_objet_3D', '100%', '350', '', 'Web/CSS/transform-function/perspective')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Transforms 2", "#funcdef-perspective", "perspective()")}}</td>
+   <td>{{Spec2("CSS Transforms 2")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/transform-function/rotate()/index.html b/files/fr/web/css/transform-function/rotate()/index.html
new file mode 100644
index 0000000000..eedbb8b131
--- /dev/null
+++ b/files/fr/web/css/transform-function/rotate()/index.html
@@ -0,0 +1,153 @@
+---
+title: rotate()
+slug: Web/CSS/transform-function/rotate()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/rotate()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>rotate()</code></strong> définit une transformation qui déplace un élément autour d'un point fixe (défini par la propriété {{cssxref("transform-origin")}}) sans le déformer (autrement dit, qui applique une rotation plane). C'est une rotation autour de ce point. Par défaut, cette origine correspond au centre de l'élément.</p>
+
+<p>La rotation plane est définie par un angle, l'argument de la fonction. Si l'angle indiqué est positif, le mouvement sera appliqué dans le sens horaire et sinon il sera appliqué dans le sens inverse des aiguilles d'une montre. La valeur obtenue par cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>L'angle de la rotation créée grâce à <code>rotate()</code> est fourni comme argument à cette fonction via une valeur de type {{cssxref("&lt;angle&gt;")}}. Si l'angle est positif, la rotation sera dans le sens des aiguilles d'une montre et s'il est négatif, elle sera dans le sens inverse des aiguilles d'une montre.</p>
+
+<pre class="syntaxbox notranslate">rotate(<var>a</var>)
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><var>a</var></dt>
+ <dd>Une valeur de type {{cssxref("&lt;angle&gt;")}} qui représente l'angle de la rotation. Un angle positif indique une rotation appliquée dans le sens horaire, un angle négatif applique une rotation dans le sens anti-horaire.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes surℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd></mtr> <mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd></mtr></mtable></mfenced></math></td>
+   <td><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[cos(a) sin(a) -sin(a) cos(a) 0 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.tourne {
+  transform: rotate(45deg); /* Équivalent à rotateZ(45deg) */
+  background-color: pink;
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;Normal&lt;/div&gt;
+&lt;div class="tourne"&gt;Tourné&lt;/div&gt;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemple_simple", "auto", 180)}}</p>
+
+<h3 id="Associer_une_rotation_à_une_autre_transformation">Associer une rotation à une autre transformation</h3>
+
+<p>Lorsqu'on applique plusieurs transformations, il faut faire attention à l'ordre dans lequel elles sont appliquées. Ainsi, si on applique une rotation avant une translation, la translation se fera selon le nouvel axe de rotation !</p>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  position: absolute;
+  left: 40px;
+  top: 40px;
+  width: 100px;
+  height: 100px;
+  background-color: lightgray;
+}
+
+.rotate {
+  background-color: transparent;
+  outline: 2px dashed;
+  transform: rotate(45deg);
+}
+
+.rotate-translate {
+  background-color: pink;
+  transform: rotate(45deg) translateX(180px);
+}
+
+.translate-rotate {
+  background-color: gold;
+  transform: translateX(180px) rotate(45deg);
+}
+</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;Normal&lt;/div&gt;
+&lt;div class="rotate"&gt;Tourné&lt;/div&gt;
+&lt;div class="rotate-translate"&gt;Tourné puis translaté&lt;/div&gt;
+&lt;div class="translate-rotate"&gt;Translaté puis tourné&lt;/div&gt;
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Associer_une_rotation_avec_une_autre_transformation", "auto", 320)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Transforms", "#funcdef-transform-rotate", "rotate()")}}</td>
+   <td>{{Spec2("CSS3 Transforms")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+ <li><code><a href="/fr/docs/Web/CSS/transform-function/rotate3d">rotate3d()</a></code></li>
+</ul>
diff --git a/files/fr/web/css/transform-function/rotate3d()/index.html b/files/fr/web/css/transform-function/rotate3d()/index.html
new file mode 100644
index 0000000000..29c8b92462
--- /dev/null
+++ b/files/fr/web/css/transform-function/rotate3d()/index.html
@@ -0,0 +1,144 @@
+---
+title: rotate3d()
+slug: Web/CSS/transform-function/rotate3d()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/rotate3d()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>rotate3d()</code></strong> définit une transformation qui déplace un élément autour d'un axe sans le déformer. L'angle de la rotation est un argument de la fonction. Si l'angle indiqué est positif, le mouvement sera appliqué dans le sens horaire et sinon il sera appliqué dans le sens inverse des aiguilles d'une montre. La valeur obtenue par cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/rotate3d.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Dans l'espace (en trois dimensions), les rotations ont trois degrés de liberté qui définissent l'axe de rotation. Cet axe est défini par un vecteur <code>[x, y, z]</code> et passe par l'origine du repère (définie grâce à la propriété {{cssxref("transform-origin")}}). Si le vecteur n'est pas normalisé (autrement dit, si la somme des carrés de ses trois composantes ne vaut pas 1), il sera normalisé par le moteur. Un vecteur qui ne peut être normalisé (par exemple le vecteur nul <code>[0, 0, 0]</code>) empêchera la rotation d'être appliquée mais la propriété CSS restera valide.</p>
+
+<div class="note"><strong>Note :</strong> Contrairement aux rotations appliqués dans le plan, la composition de rotations dans l'espace n'est pas commutative. Autrement dit, l'ordre dans lequel on applique les rotations est déterminant.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">rotate3d(<em>x</em>, <em>y</em>, <em>z</em>, <em>a</em>)
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;number&gt;")}} qui définit la composante en X (l'abscisse) du vecteur qui sera l'axe de la rotation.</dd>
+ <dt><code>y</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;number&gt;")}} qui définit la composante en Y (l'ordonnée) du vecteur qui sera l'axe de la rotation.</dd>
+ <dt><code>z</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;number&gt;")}} qui définit la composante en Z (la côte) du vecteur qui sera l'axe de la rotation.</dd>
+ <dt><code>a</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;angle&gt;")}} qui représente l'angle de la rotation. Un angle positif indique une rotation appliquée dans le sens horaire, un angle négatif applique une rotation dans le sens anti-horaire.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2">Cette transformation s'applique dans l'espace (3D) et ne peut pas être représentée en deux dimensions.</td>
+   <td colspan="1"><math><mfenced><mtable><mtr><mtd>1<mo>+</mo>(1<mo>-</mo>cos(<mi>a</mi>))(<msup><mi>x</mi><mn>2</mn></msup><mo>-</mo>1)</mtd><mtd><mi>z</mi><mo>·</mo>sin(<mi>a</mi>)+<mi>x</mi><mi>y</mi>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtd><mo>-</mo><mi>y</mi><mo>·</mo>sin(<mi>a</mi>)<mo>+</mo><mi>x</mi><mi>z</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd></mtr><mtr><mtd><mo>-</mo><mi>z</mi><mo>·</mo>sin(<mi>a</mi>)<mo>+</mo><mi>x</mi><mi>y</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtd>1+(1-cos(a))(y2-1)</mtd><mtd><mi>x</mi><mo>·</mo>sin(<mi>a</mi>)<mo>+</mo><mi>y</mi><mi>z</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtr><mtd>ysin(a) + xz(1-cos(a))</mtd><mtd>-xsin(a)+yz(1-cos(a))</mtd><mtd>1+(1-cos(a))(z2-1)</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr> </mtr></mtable></mfenced></math></td>
+   <td colspan="1"><a href="/@api/deki/files/5986/=transform-functions-rotate3d_hom4.png"><img src="/@api/deki/files/5986/=transform-functions-rotate3d_hom4.png?size=webview" style="height: 61px; width: 522px;"></a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Définir_une_rotation_en_Y">Définir une rotation en Y</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">body {
+  perspective: 800px;
+}
+
+p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+  margin: auto;
+}
+
+.transformation{
+  transform: rotate3d(0,1,0,60deg);
+  background-color: blue;
+}
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Définir_une_rotation_en_Y","100%","200")}}</p>
+
+<h3 id="Définir_une_rotation_sur_un_axe_quelconque">Définir une rotation sur un axe quelconque</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+  transform: rotate3d(1, 2, -1, 192deg);
+  background-color: blue;
+}
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Définir_une_rotation_sur_un_axe_quelconque","100%","200")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Transforms 2", "#funcdef-rotate3d", "rotate3d()")}}</td>
+   <td>{{Spec2("CSS Transforms 2")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/transform-function/rotatex()/index.html b/files/fr/web/css/transform-function/rotatex()/index.html
new file mode 100644
index 0000000000..01fc488e05
--- /dev/null
+++ b/files/fr/web/css/transform-function/rotatex()/index.html
@@ -0,0 +1,108 @@
+---
+title: rotateX()
+slug: Web/CSS/transform-function/rotateX()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/rotateX()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>rotateX()</code></strong> définit une transformation qui déplace l'élément autour de l'axe des abscisses sans le déformer. L'angle de rotation est défini par l'argument passé à la fonction. Si l'angle indiqué est positif, le mouvement sera appliqué dans le sens horaire et sinon il sera appliqué dans le sens inverse des aiguilles d'une montre.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-rotateX.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>L'axe de la rotation passe par l'origine du repère, définie par la propriété {{cssxref("transform-origin")}}.</p>
+
+<p><code>rotateX(a)</code> est une notation raccourcie, équivalente à <code>rotate3D(1, 0, 0, a)</code>.</p>
+
+<div class="note"><strong>Note :</strong> Contrairement aux rotations appliqués dans le plan, la composition de rotations dans l'espace n'est pas commutative. Autrement dit, l'ordre dans lequel on applique les rotations est déterminant.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">rotateX(<em>a</em>)
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>a</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;angle&gt;")}} qui représente l'angle de la rotation. Un angle positif indique une rotation appliquée dans le sens horaire, un angle négatif applique une rotation dans le sens anti-horaire.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2" rowspan="2">Cette transformation s'applique dans l'espace (3D) et ne peut pas être représentée en deux dimensions.</td>
+   <td colspan="1"><math> <mfenced><mtable><mtr><mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>cos(a)</mtd><mtd>-sin(a)</mtd></mtr><mtr><mtd>0</mtd><mtd>sin(a)</mtd><mtd>cos(a)</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1"><math><mfenced><mtable><mtr><mtd>1</mtd><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+  transform: rotateX(45deg);
+  background-color: blue;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","200")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Transforms 2", "#funcdef-rotatex", "rotateX()")}}</td>
+   <td>{{Spec2("CSS Transforms 2")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/transform-function/rotatey()/index.html b/files/fr/web/css/transform-function/rotatey()/index.html
new file mode 100644
index 0000000000..86d43fd733
--- /dev/null
+++ b/files/fr/web/css/transform-function/rotatey()/index.html
@@ -0,0 +1,108 @@
+---
+title: rotateY()
+slug: Web/CSS/transform-function/rotateY()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/rotateY()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>rotateY()</code></strong> définit une rotation, qui déplace l'élément autour de l'axe des ordonnées, sans le déformer. L'angle de rotation est défini par l'argument passé à la fonction. Si l'angle indiqué est positif, le mouvement sera appliqué dans le sens horaire et sinon il sera appliqué dans le sens inverse des aiguilles d'une montre.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-rotateY.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>L'axe de la rotation passe par l'origine du repère, définie par la propriété {{cssxref("transform-origin")}}.</p>
+
+<p><code>rotateY(a)</code> est une notation raccourcie, équivalente à <code>rotate3D(0, 1, 0, a)</code>.</p>
+
+<div class="note"><strong>Note :</strong> Contrairement aux rotations appliqués dans le plan, la composition de rotations dans l'espace n'est pas commutative. Autrement dit, l'ordre dans lequel on applique les rotations est déterminant.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">rotateY(<em>a</em>)
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>a</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;angle&gt;")}} qui représente l'angle de la rotation. Un angle positif indique une rotation appliquée dans le sens horaire, un angle négatif applique une rotation dans le sens anti-horaire.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2">Cette transformation s'applique dans l'espace (3D) et ne peut pas être représentée en deux dimensions.</td>
+   <td colspan="1"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>0</mtd><mtd>sin(a)</mtd></mtr><mtr><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>-sin(a)</mtd><mtd>0</mtd><mtd>cos(a)</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1"><math><mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>0</mtd><mtd>sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>-sin(a)</mtd><mtd>0</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+  transform: rotateY(60deg);
+  background-color: blue;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","200")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Transforms 2", "#funcdef-rotatey", "rotateY()")}}</td>
+   <td>{{Spec2("CSS Transforms 2")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/transform-function/rotatez()/index.html b/files/fr/web/css/transform-function/rotatez()/index.html
new file mode 100644
index 0000000000..823e0355bc
--- /dev/null
+++ b/files/fr/web/css/transform-function/rotatez()/index.html
@@ -0,0 +1,108 @@
+---
+title: rotateZ()
+slug: Web/CSS/transform-function/rotateZ()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/rotateZ()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>rotateZ()</code></strong> définit une transformation qui déplace l'élément autour de l'axe Z, sans déformer cet élément. L'angle de rotation est défini par l'argument passé à la fonction. Si l'angle indiqué est positif, le mouvement sera appliqué dans le sens horaire et sinon il sera appliqué dans le sens inverse des aiguilles d'une montre.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-rotateZ.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>L'axe de la rotation passe par l'origine du repère, définie par la propriété {{cssxref("transform-origin")}}.</p>
+
+<p><code>rotateZ(a)</code> est une notation raccourcie équivalente à <code>rotate3D(0, 0, 1, a)</code>.</p>
+
+<div class="note"><strong>Note :</strong> Contrairement aux rotations appliqués dans le plan, la composition de rotations dans l'espace n'est pas commutative. Autrement dit, l'ordre dans lequel on applique les rotations est déterminant.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">rotateZ(<em>a</em>)
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>a</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;angle&gt;")}} qui représente l'angle de la rotation. Un angle positif indique une rotation appliquée dans le sens horaire, un angle négatif applique une rotation dans le sens anti-horaire.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2" rowspan="2">Cette transformation s'applique dans l'espace (3D) et ne peut pas être représentée en deux dimensions.</td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math><mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+  transform: rotateZ(45deg);
+  background-color: blue;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","200")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Transforms 2", "#funcdef-rotatez", "rotateZ()")}}</td>
+   <td>{{Spec2("CSS Transforms 2")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/transform-function/scale()/index.html b/files/fr/web/css/transform-function/scale()/index.html
new file mode 100644
index 0000000000..5010957fd3
--- /dev/null
+++ b/files/fr/web/css/transform-function/scale()/index.html
@@ -0,0 +1,157 @@
+---
+title: scale()
+slug: Web/CSS/transform-function/scale()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/scale()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>scale()</code></strong> permet de modifier la taille d'un élément avec un facteur d'échelle sur deux dimensions. Le résultat de cette fonction est une valeur de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+
+<p><img src="https://mdn.mozillademos.org/files/12115/scale.png" style="height: 325px; width: 392px;"></p>
+
+<p>Cette transformation est définie par un vecteur dont les coordonnées définissent la déformation appliquée dans chaque direction (horizontale et verticale). Si les deux coordonnées du vecteur sont égales, la mise à l'échelle est uniforme (ou isotropique) et la forme de l'élément est conservée.</p>
+
+<p>Lorsque les coordonnées du vecteur sont en dehors de l'intervalle [<code>-1, 1]</code>, la transformation agrandit la taille de l'élément. Dans cet intervalle, l'élément est réduit.</p>
+
+<div class="note">La fonction <code>scale</code><code>()</code> applique un transformation dans le plan (2D). S'il faut que la transformation soit appliquée dans l'espace (3D), on pourra utiliser la fonction <code>scale3D()</code> .</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">scale(<em>sx</em>)
+scale(<em>sx</em>, <em>sy</em>)
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>sx</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;number&gt;")}} qui représente l'abscisse du vecteur de transformation (le facteur d'échelle selon l'axe horizontal).</dd>
+ <dt><code>sy</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;number&gt;")}} qui représente l'abscisse du vecteur de transformation (le facteur d'échelle selon l'axe vertical). Si ce paramètre est absent, la valeur par défaut qui sera prise sera <em><strong>sx</strong></em> (on aura ainsi une transformation homogène).</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>sx</mtd><mtd>0</mtd></mtr> <mtr><mtd>0</mtd><mtd>sy</mtd></mtr> </mtable> </mfenced> </math></td>
+   <td><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>sy</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>sy</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>sy</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[sx 0 0 sy 0 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Déformation_horizontale">Déformation horizontale</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+  /* identique à scaleX(2) scaleY(2)*/
+  transform: scale(2);
+  background-color: blue;
+}
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Déformation_horizontale","100%","200")}}</p>
+
+<h3 id="Déformer_horizontalement_et_verticalement_avec_origine_déplacée">Déformer horizontalement et verticalement avec origine déplacée</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+  /* identique à scaleX(2) scaleY(0.5) */
+  transform: scale(2, 0.5);
+  transform-origin: left;
+  background-color: blue;
+}
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Déformer_horizontalement_et_verticalement_avec_origine_déplacée","100%","200")}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Les animations utilisées pour les zooms/changement d'échelle peuvent poser problème comme facteurs de déclenchement pour certains types de migraine. Si vous devez inclure de telles animations sur votre site, vous devriez fournir un moyen de désactiver les animations pour le site.</p>
+
+<p>Vous pouvez également tirer parti de la caractéristique média {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} et écrire une requête média qui désactivera les animations si l'utilisateur décide de réduire les animations via les préférences du système.</p>
+
+<p>Pour en savoir plus :</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.3_%E2%80%94_Seizures_and_Physical_Reactions_Do_not_design_content_in_a_way_that_is_known_to_cause_seizures_or_physical_reactions">Comprendres les règles WCAG 2.3</a></li>
+ <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions">Comprendre les critères de succès WCAG 2.1 / 2.3.3 (W3C)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Transforms", "#funcdef-transform-scale", "scale()")}}</td>
+   <td>{{Spec2("CSS3 Transforms")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+ <li>{{cssxref("transform-function/scale3d", "scale3d()")}}</li>
+</ul>
diff --git a/files/fr/web/css/transform-function/scale3d()/index.html b/files/fr/web/css/transform-function/scale3d()/index.html
new file mode 100644
index 0000000000..cddec8bdc7
--- /dev/null
+++ b/files/fr/web/css/transform-function/scale3d()/index.html
@@ -0,0 +1,141 @@
+---
+title: scale3d()
+slug: Web/CSS/transform-function/scale3d()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/scale3d()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>scale3d()</code></strong> permet de modifier la taille d'un élément en appliquant une homothétie définie par un vecteur. Les composantes de ce vecteur permettent d'appliquer des échelles différentes selon les différentes dimensions.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-scale3d.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La transformation appliquée est définie par un vecteur dont les coordonnées définissent l'amplitude de l'homothétie dans chaque direction. Si les trois coordonnées du vecteur sont égales, la transformation est isotropique et la forme de l'élément est conservée.</p>
+
+<p>Lorsque les composantes du vecteurs sont en dehors de l'intervalle <code>[-1, 1]</code>, la transformation agrandit l'élément dans le sens des coordonnées. Lorsque les composantes sont dans cet intervalle, cela réduit l'élément.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">scale3d(<em>sx</em>, <em>sy</em>, <em>sz</em>)
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>sx</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;number&gt;")}} qui représente l'abscisse du vecteur définissant l'homothétie.</dd>
+ <dt><code>sy</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;number&gt;")}} qui représente l'ordonnée du vecteur définissant l'homothétie</dd>
+ <dt><code>sz</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;number&gt;")}} qui représente la composante, selon l'axe Z, du vecteur définissant l'homothétie</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2" rowspan="2">Cette transformation s'applique dans en 3 dimensions et ne peut pas être représentée sur le plan.</td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>sy</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>sz</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>sy</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>sz</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Avec_origine_non_modifiée">Avec origine non modifiée</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;foo&lt;/p&gt;
+&lt;p class="transformation"&gt;bar&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+  transform: perspective(500px) scale3d(0.8, 2, 0.2) translateZ(100px);
+  background-color: blue;
+}
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Avec_origine_non_modifiée","100%","200")}}</p>
+
+<h3 id="Avec_origine_translatée">Avec origine translatée</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+  transform: scale3d(2, 3, 0);
+  transform-origin: center;
+  background-color: blue;
+}
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Avec_origine_translatée","100%","200")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Transforms 2", "#funcdef-scale3d", "scale3d()")}}</td>
+   <td>{{Spec2("CSS Transforms 2")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+ <li><code><a href="/fr/docs/Web/CSS/transform-function/scaleZ">scaleZ()</a></code></li>
+ <li><code><a href="/fr/docs/Web/CSS/transform-function/translate3d">translate3d()</a></code></li>
+ <li><code><a href="/fr/docs/Web/CSS/transform-function/rotate3d">rotate3d()</a></code></li>
+</ul>
diff --git a/files/fr/web/css/transform-function/scalex()/index.html b/files/fr/web/css/transform-function/scalex()/index.html
new file mode 100644
index 0000000000..231bc73da3
--- /dev/null
+++ b/files/fr/web/css/transform-function/scalex()/index.html
@@ -0,0 +1,139 @@
+---
+title: scaleX()
+slug: Web/CSS/transform-function/scaleX()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/scaleX()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>scaleX()</code></strong> permet de modifier l'abscisse de chaque sommet de l'élément par un facteur multiplicateur. L'homothétie obtenue n'est pas isotropique et les angles de l'élément ne sont pas conservés.</p>
+
+<p><img src="https://mdn.mozillademos.org/files/12117/scaleX.png" style="height: 315px; width: 372px;"></p>
+
+<p><code>scaleX(sx)</code> est une notation raccourcie équivalente à <code>scale(sx, 1)</code> ou à <code>scale3d(sx, 1, 1)</code>.</p>
+
+<p><code>scaleX(-1)</code> définit une symétrie axiale par rapport à un axe vertical passant par l'origine du repère (définie grâce à la propriété {{cssxref("transform-origin")}}).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">scaleX(<em>s</em>)
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>s</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;number&gt;")}} qui représente le facteur d'échelle de l'homothétie.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>s</mtd><mtd>0</mtd></mtr> <mtr><mtd>0</mtd><mtd>1</mtd></mtr> </mtable> </mfenced> </math></td>
+   <td><math> <mfenced><mtable><mtr>s<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>s<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>s<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[s 0 0 1 0 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Origine_inchangée">Origine inchangée</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+  transform: scaleX(2);
+  background-color: blue;
+}
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Origine_inchangée","100%","200")}}</p>
+
+<h3 id="Origine_déplacée">Origine déplacée</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;bar&lt;/p&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+  transform: scaleX(2);
+  transform-origin: left;
+  background-color: blue;
+}
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Origine_déplacée","100%","200")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Transforms", "#funcdef-transform-scalex", "scaleX()")}}</td>
+   <td>{{Spec2("CSS3 Transforms")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><code><a href="/fr/docs/Web/CSS/transform-function/scaleY">scaleY()</a></code></li>
+ <li><code><a href="/fr/docs/Web/CSS/transform-function/scaleZ">scaleZ()</a></code></li>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+ <li>{{cssxref("transform-origin")}}</li>
+</ul>
diff --git a/files/fr/web/css/transform-function/scaley()/index.html b/files/fr/web/css/transform-function/scaley()/index.html
new file mode 100644
index 0000000000..f8b82479b3
--- /dev/null
+++ b/files/fr/web/css/transform-function/scaley()/index.html
@@ -0,0 +1,111 @@
+---
+title: scaleY()
+slug: Web/CSS/transform-function/scaleY()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/scaleY()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>scaleY()</code></strong> modifie l'ordonnée de chaque sommet de l'élément avec un facteur multiplicateur. L'homothétie n'est pas isotropique et les angles de l'élément ne sont pas conservés. La valeur obtenue par cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+
+<p><img src="https://mdn.mozillademos.org/files/12119/scaleY.png" style="height: 381px; width: 365px;"></p>
+
+<p><code>scaleY(sy)</code> est une notation raccourcie équivalente à <code>scale(1, sy)</code> ou à <code>scale3d(1, sy, 1)</code>.</p>
+
+<p><code>scaleY(-1)</code> définit une symétrie axiale selon un axe horizontal, passant par l'origine du repère (cette origine est définie grâce à la propriété {{cssxref("transform-origin")}}).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">scaleY(s)
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>s</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;number&gt;")}} qui indique le facteur d'échelle pour l'homothétie.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd></mtr> <mtr><mtd>0</mtd><mtd>s</mtd></mtr> </mtable> </mfenced> </math></td>
+   <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>s</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>s</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>s</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[1 0 0 s 0 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+  transform: scaleY(2);
+  background-color: blue;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","200")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Transforms", "#funcdef-transform-scaley", "scaleY()")}}</td>
+   <td>{{Spec2("CSS3 Transforms")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><code><a href="/fr/docs/Web/CSS/transform-function/scaleX">scaleX()</a></code></li>
+ <li><code><a href="/fr/docs/Web/CSS/transform-function/scaleZ">scaleZ()</a></code></li>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+ <li>{{cssxref("transform-origin")}}</li>
+</ul>
diff --git a/files/fr/web/css/transform-function/scalez()/index.html b/files/fr/web/css/transform-function/scalez()/index.html
new file mode 100644
index 0000000000..11324f1efb
--- /dev/null
+++ b/files/fr/web/css/transform-function/scalez()/index.html
@@ -0,0 +1,117 @@
+---
+title: scaleZ()
+slug: Web/CSS/transform-function/scaleZ()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/scaleZ()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>scaleZ()</code></strong> modifie la coordonnée en Z de chaque point de l'élément avec un facteur multiplicateur donné. Si ce facteur vaut 1, l'opération appliqué sera l'identité. L'homothétie n'est pas isotropique et les angles de l'élément ne sont pas conservés. La valeur obtenue par cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-scaleZ.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p><code>scaleZ(sz)</code> est une notation raccourcie équivalente à <code>scale3d(1, 1, sz)</code>.</p>
+
+<p><code>scaleZ(-1)</code> définit une symétrie axiale selon l'axe Z qui passe par l'origine (définie grâce à la propriété {{cssxref("transform-origin")}}).</p>
+
+<p>Dans les exemples interactifs ci-avant, <code>perspective: 500px;</code> a été utilisée afin de créer un espace en trois dimensions et <code>transform-style: preserve-3d</code> permet de positionner les éléments enfants dans cet espace 3D.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">scaleZ(s)
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>s</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;number&gt;")}} qui représente le facteur d'échelle à appliquer sur la côte (coordonnées en Z) de chaque point de l'élément.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2" rowspan="2">Cette transformation s'applique sur l'espace en trois dimensions et ne peut donc être représentée sous la forme d'une transformation plane.</td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>s</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>s</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="translation"&gt;Translaté&lt;/p&gt;
+&lt;p class="homothetie"&gt;Échelle&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.translation{
+  /* On ajoute une perspective pour créer un volume 3D */
+  transform: perspective(500px) translateZ(100px);
+}
+
+.homothetie{
+  /* On ajoute une perspective pour créer un volume 3D */
+  transform: perspective(500px) scaleZ(2) translateZ(100px);
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","200")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Transforms 2", "#funcdef-scalez", "scaleZ()")}}</td>
+   <td>{{Spec2("CSS Transforms 2")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><code><a href="/fr/docs/Web/CSS/transform-function/scaleX">scaleX()</a></code></li>
+ <li><code><a href="/fr/docs/Web/CSS/transform-function/scaleY">scaleY()</a></code></li>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+ <li>{{cssxref("transform-origin")}}</li>
+</ul>
diff --git a/files/fr/web/css/transform-function/skew()/index.html b/files/fr/web/css/transform-function/skew()/index.html
new file mode 100644
index 0000000000..96a2973536
--- /dev/null
+++ b/files/fr/web/css/transform-function/skew()/index.html
@@ -0,0 +1,139 @@
+---
+title: skew()
+slug: Web/CSS/transform-function/skew()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/skew()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>skew()</code></strong> permet d'opérer une distorsion en étirant chaque point de l'élément d'un certain angle dans une direction du plan. Pour cela, on augmente l'ordonnée d'un élément d'une valeur proportionnelle à l'angle donné et à la distance de l'origine. Plus le point est éloigné de l'origine, plus le décalage obtenu sera important.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-skew.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La valeur obtenue par cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">skew(<em>ax</em>)
+skew(<em>ax</em>, <em>ay</em>)
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>ax</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;angle&gt;")}} qui représente l'angle avec lequel appliquer la distorsion selon l'axe des abscisses (axe horizontal).</dd>
+ <dt><code>ay</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;angle&gt;")}} qui représente l'angle avec lequel appliquer la distorsion selon l'axe des ordonnées (axe vertical).</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd></mtr><mtr>tan(ay)<mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd><mtd>0</mtd></mtr><mtr>tan(ay)<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr><mtr></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd><mtd>0</mtd></mtr><mtr>tan(ay)<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>tan(ay)<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[1 tan(ay) tan(ax) 1 0 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_une_distorsion_horizontale">Utiliser une distorsion horizontale</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+ /* the same as skewX(10deg); */
+  transform: skew(10deg);
+  background-color: blue;
+}
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Utiliser_une_distorsion_horizontale","100%","200")}}</p>
+
+<h3 id="Utiliser_deux_angles">Utiliser deux angles</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+  transform: skew(10deg, 10deg);
+  background-color: blue;
+}
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Utiliser_deux_angles","100%","200")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Transforms", "#funcdef-transform-skew", "skew()")}}</td>
+   <td>{{Spec2("CSS3 Transforms")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/transform-function/skewx()/index.html b/files/fr/web/css/transform-function/skewx()/index.html
new file mode 100644
index 0000000000..2dde08e015
--- /dev/null
+++ b/files/fr/web/css/transform-function/skewx()/index.html
@@ -0,0 +1,110 @@
+---
+title: skewX()
+slug: Web/CSS/transform-function/skewX()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/skewX()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>skewX()</code></strong> permet d'opérer une distorsion horizontale en étirant chaque point de l'élément d'un certain angle dans la direction horizontale. Pour cela, on augmente l'abscisse d'un élément d'une valeur proportionnelle à l'angle donné et à la distance de l'origine. Plus le point est éloigné de l'origine et loin de l'axe, plus le décalage obtenu sera important.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-skewX.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La valeur obtenue par cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+
+<p><code>skewX(a)</code> est équivalent à <code><a href="/fr/docs/Web/CSS/transform-function/skew">skew(a)</a></code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">skewX(a)
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>a</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;angle&gt;")}} qui représente l'angle avec lequel appliquer la distorsion selon l'axe des abscisses (axe horizontal).</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ay)</mtd></mtr><mtr>0<mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td><math> <mfenced><mtable><mtr>1<mtd>tan(ay)</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ay)</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ay)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[1 0 tan(a) 1 0 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+  transform: skewX(10deg);
+  background-color: blue;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","200")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Transforms", "#funcdef-transform-skewx", "skewX()")}}</td>
+   <td>{{Spec2("CSS3 Transforms")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/transform-function/skewy()/index.html b/files/fr/web/css/transform-function/skewy()/index.html
new file mode 100644
index 0000000000..bff12a7055
--- /dev/null
+++ b/files/fr/web/css/transform-function/skewy()/index.html
@@ -0,0 +1,108 @@
+---
+title: skewY()
+slug: Web/CSS/transform-function/skewY()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/skewY()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>skewY()</code></strong> permet d'opérer une distorsion verticale en étirant chaque point de l'élément d'un certain angle dans la direction verticale. Pour cela, on augmente l'ordonnée d'un élément d'une valeur proportionnelle à l'angle donné et à la distance de l'origine. Plus le point est éloigné de l'origine et loin de l'axe, plus le décalage obtenu sera important.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-skewY.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La valeur obtenue par cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">skewY(a)
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>a</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;angle&gt;")}} qui représente l'angle avec lequel appliquer la distorsion selon l'axe des ordonnées (axe vertical).</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd></mtr><mtr>tan(ax)<mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>tan(ax)<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>tan(ax)<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>tan(ax)<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[1 tan(a) 0 1 0 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+  transform: skewY(40deg);
+  background-color: blue;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","250")}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Transforms", "#funcdef-transform-skewy", "skewY()")}}</td>
+   <td>{{Spec2("CSS3 Transforms")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/transform-function/translate()/index.html b/files/fr/web/css/transform-function/translate()/index.html
new file mode 100644
index 0000000000..4e1eb7e81a
--- /dev/null
+++ b/files/fr/web/css/transform-function/translate()/index.html
@@ -0,0 +1,141 @@
+---
+title: translate()
+slug: Web/CSS/transform-function/translate()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/translate()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>translate()</code></strong> permet de déplacer un élément sur le plan représenté par le document. Cette transformation est définie à l'aide d'un vecteur dont les coordonnées définissent la quantité de déplacement sur chaque axe (horizontal et vertical).</p>
+
+<p><img src="https://mdn.mozillademos.org/files/12121/translate.png" style="height: 195px; width: 249px;"></p>
+
+<p>La valeur obtenue par cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">translate(tx)
+translate(tx, ty)
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>tx</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;length&gt;")}} qui représente l'abscisse du vecteur de translation. Autrement dit, c'est l'amplitude du déplacement horizontal de la translation.</dd>
+ <dt><code>ty</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;length&gt;")}} qui représente l'ordonnée du vecteur de translation. Autrement dit, c'est l'amplitude du déplacement vertical de la translation. Si ce paramètre n'est pas utilisé, la valeur par défaut sera 0 : <code>translate(2)</code> sera donc équivalent à <code>translate(2, 0)</code>.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2">
+    <p>Une translation plane n'est pas une transformation linéaire de ℝ<sup>2</sup> et ne peut donc pas être représentée sous la forme d'une matrice dans  le système cartésien.</p>
+   </td>
+   <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[1 0 0 1 tx ty]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Définir_une_translation_horizontale">Définir une translation horizontale</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;
+&lt;p&gt;toto&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+  transform: translate(10px);
+  /* équivalent à translateX(10px)*/
+  background-color: blue;
+}
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Définir_une_translation_horizontale","100%","250")}}</p>
+
+<h3 id="Définir_une_translation_sur_les_deux_axes">Définir une translation sur les deux axes</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;
+&lt;p&gt;toto&lt;/p&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+  transform: translate(10px,10px);
+  background-color: blue;
+}
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Définir_une_translation_sur_les_deux_axes","100%","250")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transforms', '#funcdef-transform-translate', 'translate()')}}</td>
+   <td>{{Spec2('CSS3 Transforms')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/transform-function/translate3d()/index.html b/files/fr/web/css/transform-function/translate3d()/index.html
new file mode 100644
index 0000000000..650c9b714f
--- /dev/null
+++ b/files/fr/web/css/transform-function/translate3d()/index.html
@@ -0,0 +1,140 @@
+---
+title: translate3d()
+slug: Web/CSS/transform-function/translate3d()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/translate3d()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction CSS <strong><code>translate3d()</code></strong> permet de déplacer un élément dans l'espace tridimensionnel. Cette transformation est définie à l'aide d'un vecteur dont les coordonnées définissent l'amplitude du déplacement pour chaque direction.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-translate3d.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La valeur obtenue par cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">translate3d(tx, ty, tz)
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>tx</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;length&gt;")}} ou {{cssxref("&lt;percentage&gt;")}} qui représente l'abscisse du vecteur de translation (équivalente au déplacement horizontal).</dd>
+ <dt><code>ty</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;length&gt;")}} ou {{cssxref("&lt;percentage&gt;")}} qui représente l'ordonnée du vecteur de translation (équivalente au déplacement vertical).</dd>
+ <dt><code>tz</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;length&gt;")}} qui représente la composante en profondeur du vecteur de translation (équivalente au déplacement en profondeur). La valeur ne peut pas être de type {{cssxref("&lt;percentage&gt;")}}, si c'est le cas, la règle décrivant la transformation sera considérée comme invalide.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2" rowspan="2">
+    <p>Cette transformation s'applique en trois dimensions et ne peut donc être représentée sur le plan.</p>
+   </td>
+   <td colspan="1" rowspan="2">Une translation n'est pas une transformation linéaire de ℝ<sup>3</sup> et ne peut donc pas être représentée par une matrice dans le système cartésien.</td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>tz</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Définir_une_translation_sur_un_seul_axe">Définir une translation sur un seul axe</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;Statique&lt;/p&gt;
+&lt;p class="transformation"&gt;Bougé&lt;/p&gt;
+&lt;p&gt;Statique&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">p {
+  width: 60px;
+  height: 60px;
+  background-color: skyblue;
+}
+
+.transformation {
+  transform: perspective(500px) translate3d(10px,0px,0px);
+  /* equivalent to perspective(500px) translateX(10px)*/
+  background-color: pink;
+}
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Définir_une_translation_sur_un_seul_axe","100%","250")}}</p>
+
+<h3 id="Définir_une_translation_sur_les_axes_X_et_Z">Définir une translation sur les axes X et Z</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;Statique&lt;/p&gt;
+&lt;p class="transformation"&gt;Bougé&lt;/p&gt;
+&lt;p&gt;Statique&lt;/p&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">p {
+  width: 60px;
+  height: 60px;
+  background-color: skyblue;
+}
+
+.transformation {
+  transform: perspective(500px) translate3d(10px,0px,100px);
+  background-color: pink;
+}
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Définir_une_translation_sur_les_axes_X_et_Z","100%","250")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Transforms 2", "#funcdef-translate3d", "translate3d()")}}</td>
+   <td>{{Spec2("CSS Transforms 2")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/transform-function/translatex/index.html b/files/fr/web/css/transform-function/translatex/index.html
new file mode 100644
index 0000000000..76f583c665
--- /dev/null
+++ b/files/fr/web/css/transform-function/translatex/index.html
@@ -0,0 +1,109 @@
+---
+title: translateX()
+slug: Web/CSS/transform-function/translateX
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/translateX
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <code><strong>translateX()</strong></code> permet de déplacer un élément horizontalement. Cette transformation est caractérisée par une longueur (type {{cssxref("&lt;length&gt;")}}) qui définit l'amplitude du mouvement horizontal. La valeur obtenue par cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+
+<p><img src="https://mdn.mozillademos.org/files/3544/transform-functions-translateX_2.png" style="height: 146px; width: 243px;"></p>
+
+<p><code>translateX(tx)</code> est une notation raccourcie équivalente à <code>translate(tx, 0)</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">translateX(t)
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>t</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;length&gt;")}} qui représente l'abscisse (la coordonnée en X) du vecteur de translation.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2">
+    <p>Une translation n'est pas une transformation linéaire sur ℝ<sup>2</sup> et on ne peut donc pas la représenter en utilisant une matrice exprimée dans le système cartésien.</p>
+   </td>
+   <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>t</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>t</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>t</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[1 0 0 1 t 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;
+&lt;p&gt;toto&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+  transform: translateX(10px);
+  background-color: blue;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","250")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Transforms", "#funcdef-transform-translatex", "translateX()")}}</td>
+   <td>{{Spec2("CSS3 Transforms")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/transform-function/translatey()/index.html b/files/fr/web/css/transform-function/translatey()/index.html
new file mode 100644
index 0000000000..80ae24352c
--- /dev/null
+++ b/files/fr/web/css/transform-function/translatey()/index.html
@@ -0,0 +1,109 @@
+---
+title: translateY()
+slug: Web/CSS/transform-function/translateY()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/translateY()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <code><strong>translateY()</strong></code> permet de déplacer un élement verticalement sur le plan. Cette transformation est caractérisée par une longueur (type {{cssxref("&lt;length&gt;")}}) qui définit l'amplitude du déplacement. La valeur obtenue par cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+
+<p><img src="https://mdn.mozillademos.org/files/12125/translateY.png" style="height: 195px; width: 243px;"></p>
+
+<p><code>translateY(ty)</code> est une notation raccourcie équivalente à <code>translate(0, ty)</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">translateY(t)
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>t</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;length&gt;")}} qui représente l'ordonnée du vecteur de translation (la composante en Y).</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2">
+    <p>Une translation n'est pas une transformation linéaire sur ℝ<sup>2</sup> et on ne peut donc pas la représenter en utilisant une matrice exprimée dans le système cartésien.</p>
+   </td>
+   <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[1 0 0 1 0 t]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;
+&lt;p&gt;toto&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+  transform: translateY(10px);
+  background-color: blue;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","250")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Transforms", "#funcdef-transform-translatey", "translateY()")}}</td>
+   <td>{{Spec2("CSS3 Transforms")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/transform-function/translatez()/index.html b/files/fr/web/css/transform-function/translatez()/index.html
new file mode 100644
index 0000000000..d55e4a1279
--- /dev/null
+++ b/files/fr/web/css/transform-function/translatez()/index.html
@@ -0,0 +1,113 @@
+---
+title: translateZ()
+slug: Web/CSS/transform-function/translateZ()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/translateZ()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>translateZ()</code></strong> permet de déplacer un élément selon l'axe z de l'espace tridimensionnel. Cette transformation est caractérisée par une valeur de longueur (type {{cssxref("&lt;length&gt;")}}) qui définit l'amplitude du mouvement. La valeur obtenue par cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-translateZ.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p><code>translateZ(tz)</code> est un raccourci équivalent à <code>translate3d(0, 0, tz)</code>.</p>
+
+<p>Dans les exemples interactifs ci-avant, <code>perspective: 500px;</code> a été utilisée afin de créer un espace en trois dimensions et <code>transform-style: preserve-3d</code> permet de positionner les éléments enfants (les 6 faces du cube) dans cet espace 3D.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">translateZ(t)
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>t</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;length&gt;")}} qui représente la composante en Z du vecteur de translation appliqué. Cet argument ne peut pas être de type {{cssxref("&lt;percentage&gt;")}}, si c'est le cas, la propriété qui contient la transformation est considérée comme invalide.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2" rowspan="2">Cette transformation s'applique en trois dimensions et ne peut donc être représentée sur un plan.</td>
+   <td colspan="1" rowspan="2">Une translation n'est pas une transformation linéaire sur ℝ<sup>3</sup> et ne peut donc pas être représentée avec une matrice dans le système cartésien.</td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+  /* On ajoute une perspective pour créer un */
+  /* espace 3D. L'utilisateur regarde « depuis »*/
+  /* 500px et on avance l'élément vers l'utili- */
+  /* sateur de 200px */
+  transform: perspective(500px) translateZ(200px);
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<p>Si la valeur fournie à <code>perspective()</code> est inférieure à l'argument de <code>translateZ()</code> (ex. <code>transform: perspective(200px) translateZ(300px);</code>), l'élément transformé ne sera pas visible car il sera situé au-delà de l'espace projeté sur l'écran. Plus l'écart entre ces deux arguments est faible, plus l'élément paraîtra proche de l'utilisateur.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Transforms 2', '#transform-functions', 'transform')}}</td>
+   <td>{{Spec2('CSS Transforms 2')}}</td>
+   <td>Ajout des fonctions de transformations 3D au module standard <em>CSS Transforms</em></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS">Les transformations CSS</a></li>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("transform-function/translateX", "translateX()")}} et {{cssxref("transform-function/translateY", "translateY()")}}</li>
+</ul>
diff --git a/files/fr/web/css/transform-origin/index.html b/files/fr/web/css/transform-origin/index.html
new file mode 100644
index 0000000000..986fc41f6c
--- /dev/null
+++ b/files/fr/web/css/transform-origin/index.html
@@ -0,0 +1,462 @@
+---
+title: transform-origin
+slug: Web/CSS/transform-origin
+tags:
+  - CSS
+  - CSS Transoforms
+  - Propriété CSS
+  - Reference
+  - transform-origin
+  - 'valeur par défaut : center'
+translation_of: Web/CSS/transform-origin
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>transform-origin</code></strong> permet de modifier l'origine du repère pour les opérations de transformation d'un élément.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/transform-origin.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Par exemple, l'origine par défaut pour la fonction <code>rotate()</code> est le centre de la rotation. Cette propriété est utilisée en :</p>
+
+<ol>
+ <li>Translatant l'élément avec l'opposé de la valeur fournie</li>
+ <li>Appliquant la transformation souhaitée sur l'élément</li>
+ <li>Translatant l'élément avec la valeur fournie pour cette propriété.</li>
+</ol>
+
+<p>Les valeurs qui ne sont pas définies explicitement sont réinitialisées avec les valeurs correspondantes.</p>
+
+<p>Par défaut, l'origine d'une transformation est <code>center</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Utilisation d'une seule valeur */
+transform-origin: 2px<em>;</em>
+transform-origin: bottom;
+
+/* x-offset y-offset */
+transform-origin: 3cm 2px;
+
+/* y-offset x-offset-keyword */
+transform-origin: 2px left;
+
+/* x-offset-keyword y-offset */
+transform-origin: left 2px;
+
+/* x-offset-keyword y-offset-keyword */
+transform-origin: right top;
+
+/* y-offset-keyword x-offset-keyword */
+transform-origin: top right;
+
+/* x-offset y-offset z-offset */
+transform-origin: 2px 30% 10px;
+
+/* y-offset x-offset-keyword z-offset */
+transform-origin: 2px left 10px;
+
+/* x-offset-keyword y-offset z-offset */
+transform-origin: left 5px -3px;
+
+/* x-offset-keyword y-offset-keyword z-offset */
+transform-origin: right bottom 2cm;
+
+/* y-offset-keyword x-offset-keyword z-offset */
+transform-origin: bottom right 2cm;
+
+/* Valeurs globales */
+transform-origin: inherit;
+transform-origin: initial;
+transform-origin: unset;
+</pre>
+
+<p>La propriété <code>transform-origin</code> peut être définie en utiisant une, deux ou trois valeurs.</p>
+
+<ul>
+ <li>Avec une valeur, celle-ci doit être :
+  <ul>
+   <li>Une longueur (type {{cssxref("&lt;length&gt;")}})</li>
+   <li>Un pourcentage (type {{cssxref("&lt;percentage&gt;")}}</li>
+   <li>Un mot-clé parmi <code>left</code>, <code>center</code>, <code>right</code>, <code>top</code>, <code>bottom</code>.</li>
+  </ul>
+ </li>
+ <li>Avec deux valeurs
+  <ul>
+   <li>La première valeur doit être une longueur (type {{cssxref("&lt;length&gt;")}}), un pourcentage (type {{cssxref("&lt;percentage&gt;")}} ou un mot-clé parmi <code>left</code>, <code>center</code>, <code>right</code></li>
+   <li>La seconde valeur doit être une longueur (type {{cssxref("&lt;length&gt;")}}), un pourcentage (type {{cssxref("&lt;percentage&gt;")}} ou un mot-clé parmi <code>top</code>, <code>center</code>, <code>bottom</code>.</li>
+  </ul>
+ </li>
+ <li>Avec trois valeurs
+  <ul>
+   <li>Les deux premières valeurs doivent être structurées comme la syntaxe avec deux valeurs</li>
+   <li>La troisième valeur doit être une longueur (type {{cssxref("length")}}</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Valeur">Valeur</h3>
+
+<dl>
+ <dt><code>x-offset</code></dt>
+ <dd>Une valeur du type {{cssxref("&lt;length&gt;")}} ou {{cssxref("&lt;percentage&gt;")}} qui décrit la distance, depuis le bord gauche de la boîte, à laquelle l'origine de la transformation sera placée.</dd>
+ <dt><code>offset-keyword</code></dt>
+ <dd>Un mot-clé parmi <code>left</code>, <code>right</code>, <code>top</code>, <code>bottom</code> ou <code>center</code> qui décrit le décalage correspondant.</dd>
+ <dt><code>y-offset</code></dt>
+ <dd>Une valeur du type {{cssxref("&lt;length&gt;")}} ou {{cssxref("&lt;percentage&gt;")}} qui décrit la distance, depuis le bord haut de la boîte, à laquelle l'origine de la transformation sera placée.</dd>
+ <dt><code>x-offset-keyword</code></dt>
+ <dd>Un mot-clé parmi <code>left</code>, <code>right</code> ou <code>center</code> qui décrit la distance, depuis le bord gauche de la boîte, à laquelle l'origine de la transformation sera placée.</dd>
+ <dt><code>y-offset-keyword</code></dt>
+ <dd>Un mot-clé parmi <code>top</code>, <code>bottom</code> ou <code>center</code> qui décrit la distance, depuis le bord haut de la boîte, à laquelle l'origine de la transformation sera placée.</dd>
+ <dt><code>z-offset</code></dt>
+ <dd>Une valeur du type {{cssxref("&lt;length&gt;")}} (et jamais une valeur du type {{cssxref("&lt;percentage&gt;")}}, sinon la déclaration serait invalide) qui décrit la distance, depuis l'œil de l'utilisateur, de l'origine de la transformation sur l'axe de profondeur (z)..</dd>
+</dl>
+
+<p>Les mots-clés sont des raccourcis qui correspondent aux valeurs {{cssxref("&lt;percentage&gt;")}} suivantes :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Mot-clé</th>
+   <th scope="col">Valeur</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>left</code></td>
+   <td><code>0%</code></td>
+  </tr>
+  <tr>
+   <td><code>center</code></td>
+   <td><code>50%</code></td>
+  </tr>
+  <tr>
+   <td><code>right</code></td>
+   <td><code>100%</code></td>
+  </tr>
+  <tr>
+   <td><code>top</code></td>
+   <td><code>0%</code></td>
+  </tr>
+  <tr>
+   <td><code>bottom</code></td>
+   <td><code>100%</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Voir la page sur <a class="internal" href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS">l'utilisation des transformations CSS</a> pour des exemples supplémentaires.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Code</th>
+   <th>Exemple</th>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: none;</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_none">
+    <pre class="brush: html">
+&lt;div class="box1"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css">
+.box1 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform: none;
+}
+</pre>
+    </div>
+
+    <p>{{EmbedLiveSample('transform_none', '', '120', '', '', 'no-button') }}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: rotate(30deg);</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_rotate_only">
+    <pre class="brush: html">
+&lt;div class="box2"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css">
+.box2 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform: rotate(30deg);
+}
+</pre>
+    </div>
+
+    <p>{{EmbedLiveSample('transform_rotate_only', '', '120', '', '', 'no-button') }}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: rotate(30deg);<br>
+     transform-origin: 0 0;</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_rotate">
+    <pre class="brush: html">
+&lt;div class="box3"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css">
+.box3 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform-origin: 0 0;
+transform: rotate(30deg);
+}
+</pre>
+    </div>
+
+    <p>{{EmbedLiveSample('transform_rotate', '', '120', '', '', 'no-button') }}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: rotate(30deg);<br>
+     transform-origin: 100% 100%;</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_rotate_with_percentage">
+    <pre class="brush: html">
+&lt;div class="box4"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css">
+.box4 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform-origin: 100% 100%;
+transform: rotate(30deg);
+}
+</pre>
+    </div>
+
+    <p>{{EmbedLiveSample('transform_rotate_with_percentage', '', '120', '', '', 'no-button') }}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: rotate(30deg);<br>
+     transform-origin: -10em -30em;</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_rotate_with_em">
+    <pre class="brush: html">
+&lt;div class="box5"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css">
+.box5 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform-origin: -10em -30em;
+transform: rotate(30deg);
+}
+</pre>
+    </div>
+
+    <p>{{EmbedLiveSample('transform_rotate_with_em', '', '120', '', '', 'no-button') }}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: scale(1.9);</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_scale_only">
+    <pre class="brush: html">
+&lt;div class="box6"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css">
+.box6 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform: scale(1.9);
+}
+</pre>
+    </div>
+
+    <p>{{EmbedLiveSample('transform_scale_only', '', '120', '', '', 'no-button') }}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: scale(1.9);<br>
+     transform-origin: 0 0;</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_scale_without_origin">
+    <pre class="brush: html">
+&lt;div class="box7"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css">
+.box7 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform: scale(1.9);
+transform-origin: 0 0;
+}
+</pre>
+    </div>
+
+    <p>{{EmbedLiveSample('transform_scale_without_origin', '', '120', '', '', 'no-button') }}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: scale(1.9);<br>
+     transform-origin: 100% -30%;</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_scale">
+    <pre class="brush: html">
+&lt;div class="box8"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css">
+.box8 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform: scale(1.9);
+transform-origin: 100% -30%;
+}
+</pre>
+    </div>
+
+    <p>{{EmbedLiveSample('transform_scale', '', '120', '', '', 'no-button') }}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: skewX(50deg);<br>
+     transform-origin: 100% -30%;</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_skew_x">
+    <pre class="brush: html">
+&lt;div class="box9"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css">
+.box9 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform: skewX(50deg);
+transform-origin: 100% -30%;
+}
+</pre>
+    </div>
+
+    <p>{{EmbedLiveSample('transform_skew_x', '', '120', '', '', 'no-button') }}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: skewY(50deg);<br>
+     transform-origin: 100% -30%;</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_skew_y">
+    <pre class="brush: html">
+&lt;div class="box10"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css">
+.box10 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform: skewY(50deg);
+transform-origin: 100% -30%;
+}
+</pre>
+    </div>
+
+    <p>{{EmbedLiveSample('transform_skew_y', '', '120', '', '', 'no-button') }}</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transforms', '#transform-origin-property', 'transform-origin')}}</td>
+   <td>{{Spec2('CSS3 Transforms')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.transform-origin")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS">Utiliser les transformations CSS</a></li>
+ <li><a href="https://css-tricks.com/almanac/properties/t/transform-origin/">https://css-tricks.com/almanac/properties/t/transform-origin/</a></li>
+</ul>
diff --git a/files/fr/web/css/transform-style/index.html b/files/fr/web/css/transform-style/index.html
new file mode 100644
index 0000000000..7aa0e24ccc
--- /dev/null
+++ b/files/fr/web/css/transform-style/index.html
@@ -0,0 +1,80 @@
+---
+title: transform-style
+slug: Web/CSS/transform-style
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-style
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>transform-style</code></strong> définit si les éléments-fils d'un éléments sont positionnés dans l'espace tridimensionnel ou s'ils sont aplatis dans le plan de l'élément.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/transform-style.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>S'ils sont aplanis, les éléments-fils n'auront pas d'espace tridimensionnel propre.</p>
+
+<p>Cette propriété n'est pas héritée et doit donc être définie sur tous les descendants de l'éléments qui ne sont pas des feuilles (autrement dit des descendants qui n'ont aucun fils).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Avec un mot-clé */
+transform-style: preserve-3d;
+transform-style: flat;
+
+/* Valeurs globales */
+transform-style: inherit;
+transform-style: initial;
+transform-style: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>flat</code></dt>
+ <dd>Indique que les fils de l'éléments sont positionnés dans le plan de l'élément.</dd>
+ <dt><code>preserve-3d</code></dt>
+ <dd>Indique que les fils de l'élément ciblé doivent être positionnés dans l'espace tridimensionnel.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Transforms 2', '#transform-style-property', 'transform-style')}}</td>
+   <td>{{Spec2('CSS Transforms 2')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.transform-style")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS">Utiliser les transformations CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/transform/index.html b/files/fr/web/css/transform/index.html
new file mode 100644
index 0000000000..adde4477a9
--- /dev/null
+++ b/files/fr/web/css/transform/index.html
@@ -0,0 +1,160 @@
+---
+title: transform
+slug: Web/CSS/transform
+tags:
+  - CSS
+  - Propriété
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>transform</code></strong> modifie l'espace de coordonnées utilisé pour la mise en forme visuelle. Grâce à cette propriété, il est possible de translater les éléments, de les tourner, d'appliquer des homothéties, de les distordre pour en changer la perspective.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/transform.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Si la propriété est différente de <code>none</code>, un <a href="/fr/docs/Web/CSS/Comprendre_z-index/L'empilement_de_couches">contexte d'empilement</a> sera créé. Dans ce cas, l'élément agira comme le bloc englobant pour les éléments qu'il contient et qui ont <code>position</code><code>: fixed;</code> ou <code>position: absolute;</code>.</p>
+
+<div class="warning">
+<p><strong>Attention !</strong> Seuls certains éléments peuvent être transformés. Les éléments dont la disposition est gérée avec des <a href="https://developer.mozilla.org/fr/docs/Web/CSS/Mod%C3%A8le_de_mise_en_forme_visuelle#Les_%C3%A9l%C3%A9ments_en_ligne_et_les_bo%C3%AEtes_en_ligne">boîtes en ligne non-remplacées</a>, des <a href="/fr/docs/Web/HTML/Element/col">colonnes de tableau</a> ou des <a href="/fr/docs/Web/HTML/Element/colgroup">groupes de colonnes de tableau</a> ne peuvent pas être transformés.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Keyword values */
+transform: none;
+
+/* Valeurs fonctionnelles */
+transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
+transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+
+transform: translate(12px, 50%);
+transform: translateX(2em);
+transform: translateY(3in);
+transform: translateZ(2px);
+transform: translate3d(12px, 50%, 3em);
+
+transform: scale(2, 0.5);
+transform: scaleX(2);
+transform: scaleY(0.5);
+transform: scaleZ(0.3);
+transform: scale3d(2.5, 1.2, 0.3);
+
+transform: skew(30deg, 20deg);
+transform: skewX(30deg);
+transform: skewY(1.07rad);
+
+transform: rotate(0.5turn);
+transform: rotateX(10deg);
+transform: rotateY(10deg);
+transform: rotateZ(10deg);
+transform: rotate3d(1, 2.0, 3.0, 10deg);
+
+transform: perspective(17px);
+
+/* Valeurs avec plusieurs fonctions */
+transform: translateX(10px) rotate(10deg) translateY(5px);
+transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);
+
+/* Valeurs globales */
+transform: inherit;
+transform: initial;
+transform: unset;
+</pre>
+
+<p>La propriété <code>transform</code> peut être définie avec le mot-clé <code><a href="#none">none</a></code> ou une ou plusieurs valeurs de type <code><a href="#transform-function">&lt;transform-function&gt;</a></code>.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;transform-function&gt;")}}</dt>
+ <dd>Une ou plusieurs <a href="/fr/docs/Web/CSS/transform-function">fonctions de transformation CSS</a> à appliquer. Les transformations qui sont composées entre elles sont appliquées dans l'ordre, de gauche à droite.</dd>
+ <dt><code>none</code></dt>
+ <dd>Aucune transformation ne sera appliquée.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Si on utilise plusieurs fonctions dont <code><a href="/fr/docs/Web/CSS/transform-function/perspective">perspective()</a></code>, celle-ci devra apparaître en premier.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Voir la page sur <a href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS">l'utilisation des transformations CSS</a>, {(cssxref("&lt;transform-function&gt;")}} ou l'exemple suivant.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;L'élément transformé&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  border: solid red;
+
+  -webkit-transform: translate(100px) rotate(20deg);
+  -webkit-transform-origin: 0 -250px;
+
+  transform: translate(100px) rotate(20deg);
+  transform-origin: 0 -250px;
+}</pre>
+
+<p>{{EmbedLiveSample("Exemples", "400", "170")}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Les animations de déplacement ou de zoom peuvent poser des problèmes d'accessibilité en déclenchant certaines migraines. Si vous devez inclure des animations sur votre site web, vous devez fournir aux utilisateurs une méthode qui leur permette de réduire voire de désactiver les animations sur l'ensemble du site.</p>
+
+<p>À cet égard, on pourra utiliser la caractéristique média <code><a href="/fr/docs/Web/CSS/@media/prefers-reduced-motion">prefers-reduced-motion</a></code> qui permet d'utiliser une requête média pour désactiver les animations si l'utilisateur a indiqué une telle préférence via son système / son navigateur.</p>
+
+<p>Pour en savoir plus :</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.3_%E2%80%94_Seizures_and_Physical_Reactions_Do_not_design_content_in_a_way_that_is_known_to_cause_seizures_or_physical_reactions">MDN : Comprendre WCAG - Explications pour les lignes directrives 2.3</a></li>
+ <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions">Comprendre les critères de succès 2.3.3 - W3C - Comprendre WCAG 2.1</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transforms', '#transform-property', 'transform')}}</td>
+   <td>{{Spec2('CSS3 Transforms')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS Transforms 2', '#transform-functions', 'transform')}}</td>
+   <td>{{Spec2('CSS Transforms 2')}}</td>
+   <td>Ajout des fonctions de transformation en 3D.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.transform")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS">Utiliser les transformations CSS</a></li>
+ <li>Le type de donnée {{cssxref("&lt;transform-function&gt;")}}</li>
+ <li><a href="https://paulirish.com/2010/introducing-css3please/#comment-36380">Plus d'informations sur les rotations CSS3 et les filtres matriciels sur le blog de Paul Irish</a></li>
+</ul>
diff --git a/files/fr/web/css/transition-delay/index.html b/files/fr/web/css/transition-delay/index.html
new file mode 100644
index 0000000000..8d3991d0a2
--- /dev/null
+++ b/files/fr/web/css/transition-delay/index.html
@@ -0,0 +1,357 @@
+---
+title: transition-delay
+slug: Web/CSS/transition-delay
+tags:
+  - CSS
+  - Propriété
+  - Reference
+  - Transitions
+translation_of: Web/CSS/transition-delay
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>transition-delay</code></strong> indique la durée à attendre avant de débuter la transition qui s'applique pour un changement de propriété.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/transition-delay.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cette durée peut être nulle, positive ou négative :</p>
+
+<ul>
+ <li>Une valeur de <code>0s</code> ou <code>0ms</code> indique que l'animation correspondante démarrera immédiatement lorsque la valeur sera modifiée.</li>
+ <li>Une valeur positive permettra d'attendre avant de démarrer l'effet de transition.</li>
+ <li>Une valeur négative lancera l'animation immédiatement mais à partir d'un état intermédiaire (comme si la  transition avait déjà commencé).</li>
+</ul>
+
+<p>Il est possible d'indiquer plusieurs valeurs d'attente. Chaque valeur sera appliquée à la propriété correspondante donnée par la liste {{cssxref("transition-property")}} (qui agit comme un index des propriétés concernées par les transitions). S'il n'y a pas suffisamment de valeurs dans cette liste, les valeurs précédentes seront répétées jusqu'à ce qu'il y en ait suffisamment. S'il y a plus de valeurs d'attente que d'éléments dans {{cssxref("transition-property")}}, la liste est simplement tronquée. Dans les deux cas, la déclaration CSS est considérée comme valide.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs temporelles */
+/* Type &lt;time&gt; */
+transition-delay: 3s;
+transition-delay: 2s, 4ms;
+
+/* Valeurs globales */
+transition-delay: inherit;
+transition-delay: initial;
+transition-delay: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;time&gt;</code></dt>
+ <dd>Une valeur {{cssxref("&lt;time&gt;")}} qui indique la durée à attendre avant de démarrer l'effet de transition déclenché par le changement de valeur d'une propriété.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<div>
+<div id="delay_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-delay: 0.5s</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:0.5s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:0.5s;
+    transition-timing-function: linear;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+     -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:0.5s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:0.5s;
+    transition-timing-function: linear;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("delay_0_5s",275,150)}}</div>
+</div>
+
+<div id="delay_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-delay: 1s</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+     -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:1s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:1s;
+    transition-timing-function: linear;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:1s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:1s;
+    transition-timing-function: linear;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("delay_1s",275,150)}}</div>
+</div>
+
+<div id="delay_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-delay: 2s</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:2s;
+    transition-timing-function: linear;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:2s;
+    transition-timing-function: linear;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("delay_2s",275,150)}}</div>
+</div>
+
+<div id="delay_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-delay: 4s</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:4s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:4s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("delay_4s",275,150)}}</div>
+</div>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#transition-delay-property', 'transition-delay')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.transition-delay")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">Utiliser les transitions CSS</a></li>
+ <li>L'API {{domxref("TransitionEvent")}}</li>
+</ul>
diff --git a/files/fr/web/css/transition-duration/index.html b/files/fr/web/css/transition-duration/index.html
new file mode 100644
index 0000000000..7d97c7ae48
--- /dev/null
+++ b/files/fr/web/css/transition-duration/index.html
@@ -0,0 +1,343 @@
+---
+title: transition-duration
+slug: Web/CSS/transition-duration
+tags:
+  - CSS
+  - Propriété
+  - Reference
+  - Transitions
+translation_of: Web/CSS/transition-duration
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>transition-duration</code></strong> définit le nombre de secondes ou de millisecondes que doit durer une animation. La valeur par défaut, <code>0s</code>, indique qu'il n'y aura aucune animation.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/transition-duration.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Il est possible de définir plusieurs durées, chacune sera appliquée à la propriété correspondante listée par {{cssxref("transition-property")}} (qui agit comme un index des propriétés impactées par les animations). S'il y a moins de durées que d'éléments dans cette liste, l'agent utilisateur dupliquera les durées. S'il y a trop de durées, la liste sera tronquée. Dans les deux cas, la déclaration CSS sera considérée comme valide.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs temporelles */
+/* Type &lt;time&gt; */
+transition-duration: 6s;
+transition-duration: 120ms;
+transition-duration: 1s, 15s;
+transition-duration: 10s, 30s, 230ms;
+
+/* Valeurs globales */
+transition-duration: inherit;
+transition-duration: initial;
+transition-duration: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;time&gt;</code></dt>
+ <dd>Une valeur {{cssxref("&lt;time&gt;")}} qui définit la durée que doit prendre l'animation pour changer la valeur d'une propriété (entre l'ancienne valeur et la nouvelle). Une durée de <code>0s</code> qu'aucune transition ne sera appliquée et que le passage d'un état à l'autre sera instantanné. Si la valeur utilisée est négative, la déclaration sera considérée comme invalide.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<div>
+<div id="duration_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-duration: 0.5s</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:0.5s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:0.5s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:0.5s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transformv color;
+    transition-duration:0.5s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("duration_0_5s",275,150)}}</div>
+</div>
+
+<div id="duration_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-duration: 1s</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top -webkit-transform color;
+    -webkit-transition-duration:1s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform color;
+    transition-duration:1s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top -webkit-transform transform color;
+    -webkit-transition-duration:1s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:1s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("duration_1s",275,150)}}</div>
+</div>
+
+<div id="duration_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-duration: 2s</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:2s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:2s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("duration_2s",275,150)}}</div>
+</div>
+
+<div id="duration_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-duration: 4s</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:4s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:4s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("duration_4s",275,150)}}</div>
+</div>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#transition-duration', 'transition-duration')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.transition-duration")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/CSS/Using_CSS_transitions" title="en/CSS/CSS transitions">Utiliser les transitions CSS</a></li>
+ <li>{{domxref("TransitionEvent")}}</li>
+</ul>
diff --git a/files/fr/web/css/transition-property/index.html b/files/fr/web/css/transition-property/index.html
new file mode 100644
index 0000000000..fe6981f42c
--- /dev/null
+++ b/files/fr/web/css/transition-property/index.html
@@ -0,0 +1,97 @@
+---
+title: transition-property
+slug: Web/CSS/transition-property
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/transition-property
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>transition-property</code></strong> désigne les noms des propriétés CSS sur lesquelles <a href="/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS">un effet de transition</a> devrait être appliqué.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/transition-property.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note"><strong>Note :</strong> <a href="/fr/docs/Web/CSS/Liste_propriétés_CSS_animées">L'ensemble des propriétés CSS qui peuvent être animées</a> évolue. Vous devriez donc éviter de lister ici des propriétés qui, actuellement, ne sont pas animées car elles pourraient l'être demain et cela pourrait affecter votre document.</div>
+
+<p>Si vous définissez une propriété raccourcie (par exemple {{cssxref("background")}}), toutes les propriétés détaillées correspondantes seront animées de la même façon.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Avec un mot-clé */
+transition-property: none;
+transition-property: all;
+
+/* Valeurs utilisant un identifiant */
+/* &lt;custom-ident&gt; */
+transition-property: test1;
+transition-property: test_05;
+transition-property: -specific;
+transition-property: sliding-vertically;
+
+/* Valeurs multiples */
+transition-property: test1, animation4;
+transition-property: all, height, all;
+transition-property: all, -moz-specific, sliding;
+
+/* Avec des valeurs globales */
+transition-property: inherit;
+transition-property: initial;
+transition-property: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Aucune propriété n'est concernée par les transitions.</dd>
+ <dt><code>all</code></dt>
+ <dd>Toutes les propriétés qui peuvent avoir une transition animée seront concernées.</dd>
+ <dt><code>&lt;custom-ident&gt;</code></dt>
+ <dd>Une chaîne de caractère qui identifie la propriété pour laquelle on doit appliquer un effet de transition lorsque sa valeur change. Pour plus de détails sur la forme de cet identifiant, voir la page sur le type {{cssxref("&lt;custom-ident&gt;")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Il y a plusieurs exemples sur les transitions CSS qui se trouvent dans <a href="/fr/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">l'article sur les transitions CSS</a>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#transition-property-property', 'transition-property')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.transition-property")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS">Utiliser les transitions CSS</a></li>
+ <li>{{domxref("TransitionEvent")}}</li>
+</ul>
diff --git a/files/fr/web/css/transition-timing-function/index.html b/files/fr/web/css/transition-timing-function/index.html
new file mode 100644
index 0000000000..6e019efdcb
--- /dev/null
+++ b/files/fr/web/css/transition-timing-function/index.html
@@ -0,0 +1,286 @@
+---
+title: transition-timing-function
+slug: Web/CSS/transition-timing-function
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/transition-timing-function
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>transition-timing-function</code></strong> décrit la façon dont les valeurs intermédiaires des propriétés CSS affectées par un <a href="/fr/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">effet de transition</a> sont calculées. Ceci permet donc de définir une courbe d'accelération, de manière à ce que la vitesse de la transition varie au cours de sa durée.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/transition-timing-function.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cette courbe d'accelération est définie en utilisant une {{cssxref("&lt;timing-function&gt;")}} pour chacune des propriétés à animer.</p>
+
+<p>Il est possible de définir plusieurs fonctions de temporisation dans une même déclaration ; chacune sera appliquée à la propriété correspondante listée avec la propriété {{cssxref("transition-property")}}, qui agit comme liste maîtresse :</p>
+
+<ul>
+ <li>S'il y a moins de fonctions définies que d'éléments dans la liste, les valeurs manquantes sont remplacées par la valeur par défaut (<code>ease</code>).</li>
+ <li>S'il y a trop de fonctions de temporisation, la liste est simplement tronquée à la bonne dimension.</li>
+</ul>
+
+<p>Dans les deux cas, la déclaration CSS reste valide.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">/* Valeurs avec un mot-clé */
+transition-timing-function: ease;
+transition-timing-function: ease-in;
+transition-timing-function: ease-out;
+transition-timing-function: ease-in-out;
+transition-timing-function: linear;
+transition-timing-function: step-start;
+transition-timing-function: step-end;
+
+/* Valeurs fonctionnelles */
+transition-timing-function: steps(4, jump-end);
+transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
+
+/* Valeurs avec une fonction en escalier */
+transition-timing-function: steps(4, jump-start);
+transition-timing-function: steps(10, jump-end);
+transition-timing-function: steps(20, jump-none);
+transition-timing-function: steps(5, jump-both);
+transition-timing-function: steps(6, start);
+transition-timing-function: steps(8, end);
+
+/* Utilisation de plusieurs fonctions */
+transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
+
+/* Valeurs globales */
+transition-timing-function: inherit;
+transition-timing-function: initial;
+transition-timing-function: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;timing-function&gt;</code></dt>
+ <dd>Chaque valeur {{cssxref("&lt;timing-function&gt;")}} représente une fonction temporelle à rattacher à chaque propriété de la transition définies grâce à {{cssxref("transition-property")}}.
+ <p>Les valeurs avec des mots-clés (<code>ease</code>, <code>linear</code>, <code>ease-in-out</code>, etc.) correspondent à une courbe de Bézier cubique fixe avec quatre valeurs prédéfinies; La fonction <code>cubic-bezier()</code> permet de paramétrer une courbe spécifique. Les fonctions en escalier permettent de diviser la transition en intervalles de même durée.</p>
+
+ <dl>
+  <dt><code>ease</code></dt>
+  <dd>Correspond à <code>cubic-bezier(0.25, 0.1, 0.25, 1.0)</code> : c'est la valeur par défaut, la vitesse de la transition augmente au milieu de celle-ci puis ralentit à la fin.</dd>
+  <dt><code>linear</code></dt>
+  <dd>Correspond à <code>cubic-bezier(0.0, 0.0, 1.0, 1.0)</code> : la transition s'effectue à vitesse constante.</dd>
+  <dt><code>ease-in</code></dt>
+  <dd>Correspond à <code>cubic-bezier(0.42, 0, 1.0, 1.0)</code> : la transition commence doucement puis la vitesse augmente jusqu'à ce qu'elle soit terminée.</dd>
+  <dt><code>ease-out</code></dt>
+  <dd>Correspond à <code>cubic-bezier(0, 0, 0.58, 1.0)</code> : la transition commence rapidement puis ralentit jusqu'à la fin.</dd>
+  <dt><code>ease-in-out</code></dt>
+  <dd>Correspond à <code>cubic-bezier(0.42, 0, 0.58, 1.0)</code> : la transition commence lentement, accèlere puis ralentit à nouveau avant la fin.</dd>
+  <dt><code>cubic-bezier(p1, p2, p3, p4)</code></dt>
+  <dd>Une courbe de Bézier paramétrable à l'aide de quatre coefficient compris entre 0 et 1.</dd>
+  <dt><code>steps( n, &lt;jumpterm&gt;)</code></dt>
+  <dd>La transition s'effectue selon <em>n</em> étapes de durées égales. Ainsi, si n vaut 5, la transition se composera de cinq paliers. Selon la valeur du paramètre <em>jumpterm</em>, ces paliers se trouveront entre 0%, 20%, 40%, 60% et 80%, ou entre 20%, 40%, 60%, 80% et 100%, or ou inclueront également 0% et 100% (soit 0%, 25%, 50%, 75% et 100%) :
+  <dl>
+   <dt><code>jump-start</code></dt>
+   <dd>La fonction est continue à gauche et le premier saut se produit au début de la transition.</dd>
+   <dt><code>jump-end</code></dt>
+   <dd>La fonction est continue à droite et le dernier saut se produit à la fin de la transition.</dd>
+   <dt><code>jump-none</code></dt>
+   <dd>Il n'y a aucune rupture au début ou à la fin. Il y a un palier constant après 0% et un palier constant avant 100% (chacun durant 1/n).</dd>
+   <dt><code>jump-both</code></dt>
+   <dd>Une pause est présente aux niveaux 0% et 100%, ce qui ajoute un niveau pendant la transition.</dd>
+   <dt><code>start</code></dt>
+   <dd>Identique à <code>jump-start.</code></dd>
+   <dt><code>end</code></dt>
+   <dd>Identique à <code>jump-end.</code></dd>
+  </dl>
+  </dd>
+  <dt><code>step-start</code></dt>
+  <dd>Synonyme de <code>steps(1, jump-start)</code></dd>
+  <dt><code>step-end</code></dt>
+  <dd>Synonyme de <code>steps(1, jump-end)</code></dd>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<div>
+<h3 id="Courbes_de_Bézier_cubiques">Courbes de Bézier cubiques</h3>
+
+<div class="hidden">
+<pre class="brush:html">&lt;div class="parent"&gt;
+  &lt;div class="ease"&gt;ease&lt;/div&gt;
+  &lt;div class="easein"&gt;ease-in&lt;/div&gt;
+  &lt;div class="easeout"&gt;ease-out&lt;/div&gt;
+  &lt;div class="easeinout"&gt;ease-in-out&lt;/div&gt;
+  &lt;div class="linear"&gt;linear&lt;/div&gt;
+  &lt;div class="cb"&gt;cubic-bezier(0.2,-2,0.8,2)&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush:css;">.parent {}
+.parent &gt; div[class] {
+    width: 12em;
+    min-width: 12em;
+    margin-bottom: 4px;
+    background-color: black;
+    border: 1px solid red;
+    color: white;
+    transition-property: all;
+    transition-duration: 7s;
+}
+.parent &gt; div.box1{
+    width: 90vw;
+    min-width: 24em;
+    background-color: magenta;
+    color: yellow;
+    border: 1px solid orange;
+    transition-property: all;
+    transition-duration: 2s;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var els = document.querySelectorAll(".parent &gt; div[class]");
+  for(var c = els.length, i = 0; i &lt; c; i++) {
+     els[i].classList.toggle("box1");
+  }
+}
+
+var intervalID = window.setInterval(updateTransition, 10000);
+</pre>
+</div>
+
+<pre class="brush: css">.ease {
+   transition-timing-function: ease;
+}
+.easein {
+   transition-timing-function: ease-in;
+}
+.easeout {
+   transition-timing-function: ease-out;
+}
+.easeinout {
+   transition-timing-function: ease-in-out;
+}
+.linear {
+   transition-timing-function: linear;
+}
+.cb {
+   transition-timing-function: cubic-bezier(0.2,-2,0.8,2);
+}</pre>
+
+<div>{{EmbedLiveSample("Courbes_de_Bézier_cubiques")}}</div>
+</div>
+
+<div>
+<h3 id="Fonctions_en_créneaux">Fonctions en créneaux</h3>
+
+<div class="hidden">
+<pre class="brush:html">&lt;div class="parent"&gt;
+  &lt;div class="jump-start"&gt;jump-start&lt;/div&gt;
+  &lt;div class="jump-end"&gt;jump-end&lt;/div&gt;
+  &lt;div class="jump-both"&gt;jump-both&lt;/div&gt;
+  &lt;div class="jump-none"&gt;jump-none&lt;/div&gt;
+  &lt;div class="step-start"&gt;step-start&lt;/div&gt;
+  &lt;div class="step-end"&gt;step-end&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush:css;">.parent {}
+.parent &gt; div[class] {
+    width: 12em;
+    min-width: 12em;
+    margin-bottom: 4px;
+    background-color: black;
+    border: 1px solid red;
+    color: white;
+    transition-property: all;
+    transition-duration:7s;
+}
+.parent &gt; div.box1{
+    width: 90vw;
+    min-width: 24em;
+    background-color: magenta;
+    color: yellow;
+    border: 1px solid orange;
+    transition-property: all;
+    transition-duration:2s;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var els = document.querySelectorAll(".parent &gt; div[class]");
+  for(var c = els.length, i = 0; i &lt; c; i++) {
+     els[i].classList.toggle("box1");
+  }
+}
+
+var intervalID = window.setInterval(updateTransition, 10000);
+</pre>
+</div>
+
+<pre class="brush: css">.jump-start {
+   transition-timing-function: steps(5, jump-start);
+}
+.jump-end {
+   transition-timing-function: steps(5, jump-end);
+}
+.jump-none {
+   transition-timing-function: steps(5, jump-none);
+}
+.jump-both {
+   transition-timing-function: steps(5, jump-both);
+}
+.step-start {
+   transition-timing-function: step-start;
+}
+.step-end {
+   transition-timing-function: step-end;
+}</pre>
+
+<div>{{EmbedLiveSample("Fonctions_en_créneaux")}}</div>
+</div>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Certaines animations permettent de guider les utilisateurs vers les actions possibles et utiles, d'illustrer les relations qui existent entre les éléments d'interface et d'informer les utilisateurs quant aux actions qui se sont produites. Les animations réduisent ainsi la charge cognitive et améliorent la perception du changement.</p>
+
+<p>Toutefois, certaines animations s'avèrent problématiques pour les personnes souffrant de troubles cognitifs, d'épilepsie ou autre. Pour cela, on prévoira d'intégrer un mécanisme qui permette de suspendre ou de désactiver l'animation. De même, on pourra tirer parti de <a href="/fr/docs/Web/CSS/@media/prefers-reduced-motion">la requête média sur la réduction de mouvements</a> afin de créer une expérience complémentaire pour les personnes ayant exprimé leur souhait d'absence d'animation.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État/th&gt;</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#transition-timing-function-property', 'transition-timing-function')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.transition-timing-function")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS" title="en/CSS/CSS transitions">Utiliser les transitions CSS</a></li>
+ <li>{{domxref("TransitionEvent")}}</li>
+</ul>
diff --git a/files/fr/web/css/transition/index.html b/files/fr/web/css/transition/index.html
new file mode 100644
index 0000000000..b195fff18f
--- /dev/null
+++ b/files/fr/web/css/transition/index.html
@@ -0,0 +1,106 @@
+---
+title: transition
+slug: Web/CSS/transition
+tags:
+  - CSS
+  - Propriété
+  - Reference
+  - Transitions CSS
+translation_of: Web/CSS/transition
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>transition</code></strong> est <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">une propriété raccourcie</a> pour les propriétés {{cssxref("transition-property")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-timing-function")}} et {{cssxref("transition-delay")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/transition.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Elle permet de définir la transition entre deux états d'un élément. Les différents états peuvent être définis à l'aide <a href="/fr/docs/Web/CSS/Pseudo-classes">de pseudo-classes</a> telles que {{cssxref(":hover")}} ou {{cssxref(":active")}} ou être définis dynamiquement avec JavaScript.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* S'applique à une propriété */
+/* on a le nom et la durée */
+transition: margin-right 4s;
+
+/* nom de la propriété | durée | retard */
+transition: margin-right 4s 1s;
+
+/* nom | durée | fonction */
+transition: margin-right 4s ease-in-out;
+
+/* nom | durée | fonction | retard */
+transition: margin-right 4s ease-in-out 1s;
+
+/* S'applique à deux propriétés */
+transition: margin-right 4s, color 1s;
+
+/* S'applique à toutes les propriétés modifiées */
+transition: all 0.5s ease-out;
+
+/* Valeurs globales */
+transition: inherit;
+transition: initial;
+transition: unset;
+</pre>
+
+<p>La propriété <code>transition</code> se définit comme une ou plusieurs propriétés de transitions, séparées par des virgules.</p>
+
+<p>Chacune des propriétés de transition décrit la transition qui devrait être appliquée à une propriété donnée (ou pour les valeurs spéciales <code>all</code> et <code>none</code>). Une propriété de transition inclut :</p>
+
+<ul>
+ <li>zéro ou une valeur qui représente la propriété à laquelle la transition s'applique. Ça peut être :
+  <ul>
+   <li>le mot-clé <code>none</code></li>
+   <li>le mot-clé <code>all</code></li>
+   <li>Un identifiant ({{cssxref("&lt;custom-ident&gt;")}}) qui nomme une propriété CSS.</li>
+  </ul>
+ </li>
+ <li>zéro ou une valeur {{cssxref("&lt;single-transition-timing-function&gt;")}} qui représente la fonction de temporisation utilisée pour la transition</li>
+ <li>zéro, une ou deux valeurs {{cssxref("&lt;time&gt;")}}. La première valeur qui peut être interprétée comme un temps sera affectée à la propriété {{cssxref("transition-duration")}} et la seconde valeur qui peut être affectée comme un temps sera affectée à la propriété {{cssxref("transition-delay")}}.</li>
+</ul>
+
+<p>Si la liste des valeurs est trop courte pour les différentes propriétés, les valeurs seront répétées. Si la liste est trop longue, elle sera tronquée.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Plusieurs exemples de transitions CSS sont présentés <a href="/fr/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions" title="en/CSS/CSS transitions">sur l'article sur les transitions CSS</a>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#transition-shorthand-property', 'transition')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.transition")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions" title="en/CSS/CSS transitions">Utiliser les transitions CSS</a></li>
+ <li>{{domxref("TransitionEvent")}}</li>
+</ul>
diff --git a/files/fr/web/css/translate/index.html b/files/fr/web/css/translate/index.html
new file mode 100644
index 0000000000..abe509dcce
--- /dev/null
+++ b/files/fr/web/css/translate/index.html
@@ -0,0 +1,127 @@
+---
+title: translate
+slug: Web/CSS/translate
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/translate
+---
+<div>{{CSSRef}}{{seecompattable}}</div>
+
+<p>La propriété <strong><code>translate</code></strong> permet de définir des opérations de translations, individuellement et indépendamment de la propriété {{cssxref("transform")}}. Cela peut être utile pour la construction d'une interface utilisateur et évite d'avoir à se souvenir de l'ordre exact des fonctions de transformations à indiquer pour <code>transform</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+translate: none;
+
+/* Valeurs uniques */
+translate: 100px;
+translate: 50%;
+
+/* Deux valeurs */
+translate: 100px 200px;
+translate: 50% 105px;
+
+/* Trois valeurs */
+translate: 50% 105px 5rem;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt>Une seule valeur de longueur/pourcentage ({{cssxref("&lt;length-percentage&gt;")}})</dt>
+ <dd>Une longueur ({{cssxref("&lt;length&gt;")}}) ou un pourcentage ({{cssxref("&lt;percentage&gt;")}}) qui définit une translation en deux dimensions. La translation est la même pour l'axe X et l'axe Y. Cela est équivalent à la fonction <code>translate()</code> (translation en deux dimensions) avec une seule valeur.</dd>
+ <dt>Deux valeurs de longueur/pourcentage ({{cssxref("&lt;length-percentage&gt;")}})</dt>
+ <dd>Deux longueurs ({{cssxref("&lt;length&gt;")}}) ou pourcentages ({{cssxref("&lt;percentage&gt;")}}) qui définissent respectivement les composantes horizontale et verticale d'une translation en deux dimensions. Cela est équivalent à la fonction <code>translate()</code> appelée avec ces deux arguments.</dd>
+ <dt>Trois valeurs</dt>
+ <dd>Deux valeurs de longueur/pourcentage ({{cssxref("&lt;length-percentage&gt;")}}) et une longueur ({{cssxref("&lt;length&gt;")}}) qui définissent respectivement les composantes horizontale, verticale et en profondeur de la translation en trois dimensions. Cela est équivalent à la fonction <code>translate3d()</code> appelée avec ces trois arguments.</dd>
+ <dt id="none"><code>none</code></dt>
+ <dd>Cette valeur indique qu'aucune translation ne devrait être appliquée.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="translate"&gt;Translation&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">* {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: sans-serif;
+}
+
+div {
+  width: 150px;
+  margin: 0 auto;
+}
+
+p {
+  padding: 10px 5px;
+  border: 3px solid black;
+  border-radius: 20px;
+  width: 150px;
+  font-size: 1.2rem;
+  text-align: center;
+}
+
+.translate {
+  transition: translate 1s;
+}
+
+div:hover .translate {
+  translate: 200px 50px;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Transforms 2', '#individual-transforms', 'individual transforms')}}</td>
+   <td>{{Spec2('CSS Transforms 2')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.translate")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref('scale')}}</li>
+ <li>{{cssxref('rotate')}}</li>
+ <li>{{cssxref('transform')}}</li>
+</ul>
diff --git a/files/fr/web/css/translation-value/index.html b/files/fr/web/css/translation-value/index.html
new file mode 100644
index 0000000000..28396eb769
--- /dev/null
+++ b/files/fr/web/css/translation-value/index.html
@@ -0,0 +1,41 @@
+---
+title: translation-value
+slug: Web/CSS/translation-value
+tags:
+  - CSS
+  - Reference
+  - Type
+translation_of: Web/CSS/translation-value
+---
+<div>{{CSSRef}}</div>
+
+<p>Le type de donnée <strong><code>&lt;translation-value&gt;</code></strong> est utilisé dans les arguments pour certaines fonctions de <a href="/fr/docs/Web/CSS/transform" title="CSS/transform">transformation</a> dont <code><a href="/fr/docs/Web/CSS/transform-function/translate">translate()</a></code>, <code><a href="/fr/docs/Web/CSS/transform-function/translateX">translateX()</a></code>, <code><a href="/fr/docs/Web/CSS/transform-function/translateY">translateY()</a></code>, et <code><a href="/fr/docs/Web/CSS/transform-function/translate3d">translate3d()</a></code>. </p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Un argument <code>&lt;translation-value&gt;</code> peut être une valeur de type {{cssxref("&lt;length&gt;")}} ou de type {{cssxref("&lt;percentage&gt;")}}.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Spécification</th>
+   <th>Statut</th>
+   <th>Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transforms', '#transform-functions', 'The Transform Functions')}}</td>
+   <td>{{Spec2('CSS3 Transforms')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+</ul>
diff --git a/files/fr/web/css/tutorials/index.html b/files/fr/web/css/tutorials/index.html
new file mode 100644
index 0000000000..5f2312d94c
--- /dev/null
+++ b/files/fr/web/css/tutorials/index.html
@@ -0,0 +1,62 @@
+---
+title: Tutoriels CSS
+slug: Web/CSS/Tutorials
+tags:
+  - Beginner
+  - CSS
+  - Guide
+  - Tutorial
+translation_of: Web/CSS/Tutorials
+---
+<p>Apprendre CSS peut sembler être une tache impressionnante. Cependant pour vous aider nous avons écrit de nombreux <strong>tutoriels a propos de CSS</strong>. Certains d'entre eux sont à l'attention des non initier, tandis que d'autres présentent des fonctionnalitées complexes qui peuvent être utile aux utilisateurs expérimenté.</p>
+
+<p>Cette page les listes tous, avec une courte description. <span id="result_box" lang="fr"><span class="hps">Ils sont regroupés</span> <span class="hps">par complexité</span> <span class="hps">de sorte que vous</span> <span class="hps">pouvez</span> <span class="hps">choisir la plus appropriée</span> <span class="hps">à votre niveau</span><span>.</span></span></p>
+
+<div class="note">
+<p><strong>Note de l'éditeur:</strong> Vous devriez penser à utiliser les tags "niveau de difficulté", sur les pages de tutoriel donc les listes basées sur la difficultés peuvent être construites automatiquement.</p>
+</div>
+
+<h2 id="Tutoriel_CSS_pour_Débutants">Tutoriel CSS pour Débutants</h2>
+
+<dl>
+ <dt><a href="/fr/docs/CSS/Premiers_pas" title="/fr/docs/CSS/Premiers_pas">Débuter</a></dt>
+ <dd>Ce guide est destiné aux non initiés : vous n'avez jamais écrit une seule ligne de CSS ? — Cet article est pour vous! Il explique les concepts fondamentaux du langage et vous guide via la rédaction de feuilles de style basiques.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Fonds_multiples" title="/fr/docs/Web/CSS/Fonds_multiples">Utiliser les arrière-plans multiples</a></dt>
+ <dd>Les arrières-plans sont fondamentaux afin d'obtenir un beau design : CSS vous permet d'en définir plusieurs pour chaque boite. Ce tutoriel explique comment elles interagissent et comment les utiliser pour réaliser de jolis effets.</dd>
+ <dt><a href="/en-US/docs/CSS/Scaling_background_images" title="/en-US/docs/CSS/Scaling_background_images">Mise à l'échelle des images d'arrière-plan (en anglais)</a></dt>
+ <dd>CSS vous permet de redimensionner des images utilisées comme élément d'arrière plan. Ce tutoriel décrit comment faire cela simplement.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Media_queries" title="/fr/docs/Web/CSS/Media_queries">Media queries</a></dt>
+ <dd>La taille des écrans, ou la nature des appareils comme les écrans tactiles ou feuilles imprimées, varie grandement de nos jours. Les <em>Media queries</em> sont des briques fondamentales pour construire des sites Web avec un rendu de grande qualité sur n'importe quel appareil.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Comprendre_z-index" title="/fr/docs/Web/CSS/Comprendre_z-index">Comprendre le z-index</a></dt>
+ <dd>Contrôler la superposition des boites est une <span id="result_box" lang="fr"><span class="hps">caractéristique fondamentale</span></span> pour les développeurs Web. Il ne s'agit pas de quelque chose de difficile cependant cela requiert une connaissance basique du CSS.</dd>
+</dl>
+
+<h2 id="Tutoriel_intermédiaire_en_CSS">Tutoriel intermédiaire en CSS</h2>
+
+<p>Après la sortie de CSS2 (Niveau 1), les nouvelles fonctionnalités ont été ajoutées dans CSS. Certaines d'entre elles sont élégantes et autonomes. Elles sont faciles à utiliser par quiconque avec une bonne compréhension des concepts basique.</p>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/Compteurs_CSS" title="/fr/docs/Web/CSS/Compteurs_CSS">Compteur CSS</a></dt>
+ <dd>Compter les éléments et pages est une tache aisée en CSS. Apprenez à utiliser {{cssxref("counter-reset")}}, {{cssxref("counter-increment")}}, {{cssxref("counters", "counters()")}}, et {{cssxref("counter", "counter()")}}.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations" title="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_animations">Animations CSS</a></dt>
+ <dd>Les animation CSS vous permettent de définir des configurations de style, comme les <em><a href="/fr/docs/Web/CSS/Animations_CSS" title="/fr/docs/Web/CSS/Animations_CSS">keyframes</a></em>, et de réaliser une transition entre elles pour définir une animation.</dd>
+ <dt><a href="/en-US/docs/CSS/Tutorials/Using_CSS_transitions" title="/en-US/docs/CSS/Using_CSS_transitions">Transitions CSS</a></dt>
+ <dd>Les transitions CSS vous permettent de définir une animation entre plusieurs styles et contrôlent la voie manière laquelle les transitions s'appliquent.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Utilisation_des_transformations_CSS">Transformations CSS</a></dt>
+ <dd>Les transformations CSS vous permettent de changer la position d'éléments en modifiants leurs coordonnées spatiales: comme des translations, rotations et déformations en espaces 3D et 2D.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS" title="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">Gradients CSS</a></dt>
+ <dd>Les gradients CSS sont des images qui changent de façon homogène d'une couleur à une autre. Il y a différents types de gradients possibles en CSS : linéaire ou radial, répétable ou non. Ce tutoriel décrit comment les utiliser.</dd>
+</dl>
+
+<h2 id="Tutoriels_avancés_en_CSS">Tutoriels avancés en CSS</h2>
+
+<p>CSS3 possède de nouvelles fonctionnalités vous permettant de créer des mises en pages complexes. Même les plus simples de ces méthodes, peuvent être complexes pour un débutant.</p>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/Colonnes_CSS3" title="/fr/docs/Web/CSS/Colonnes_CSS3">Mises en pages Multi-colonnes CSS</a></dt>
+ <dd>CSS3 introduit une nouvelle mise en page vous autorisant à définir facilement des éléments sur plusieurs multiples colonnes. Cependant les textes sur plusieurs colonnes ne sont pas si communs sur des écrans. Pourtant cela s'avère très pratique lorsque l'on imprime des pages ou pour indexer.</dd>
+ <dt><a href="/fr/docs/Web/Guide/CSS/Flexible_boxes" title="/fr/docs/Web/Guide/CSS/Flexible_boxes">Mises en pages flexibles de boites"</a></dt>
+ <dd>Cette nouvelle mise en page vous permet de donner de la flexibilité aux boites, permettant à celles-ci d'être redimensionnées de façon fluide. Il s'agit d'une façon puissante de décrire des interfaces complexes.</dd>
+</dl>
+
+<p> </p>
diff --git a/files/fr/web/css/type_color/index.html b/files/fr/web/css/type_color/index.html
new file mode 100644
index 0000000000..fd238e5816
--- /dev/null
+++ b/files/fr/web/css/type_color/index.html
@@ -0,0 +1,1379 @@
+---
+title: <color>
+slug: Web/CSS/Type_color
+tags:
+  - CSS
+  - Reference
+  - Type
+translation_of: Web/CSS/color_value
+---
+<div>{{CSSRef}}</div>
+
+<p>Le type de données CSS <strong><code>&lt;color&gt;</code></strong> permet de représenter des couleurs dans <a class="external" href="https://fr.wikipedia.org/wiki/SRGB">l'espace de couleurs sRGB</a>. Une couleur pourra être décrite de trois façons :</p>
+
+<ul>
+ <li>grâce à un mot-clé (comme <code>blue</code> ou  <code>transparent</code> par exemple)</li>
+ <li>en utilisant <a href="https://fr.wikipedia.org/wiki/Couleur_du_Web#Triplet_hexad.C3.A9cimal">le système de coordonnées cubiques RGB</a> (grâce à la notation #-hexadecimal ou aux notations fonctionnelles <code>rgb()</code> et <code>rgba()</code>)</li>
+ <li>en utilisant <a class="external" href="https://fr.wikipedia.org/wiki/Teinte_saturation_lumi%C3%A8re">le système de coordonnées cylindriques HSL</a> (grâce aux notations fonctionnelles <code>hsl()</code> et <code>hsla()</code>)</li>
+</ul>
+
+<p>En plus de la couleur exprimée dans l'espace RGB, une valeur <code>&lt;color&gt;</code> contient également un <a href="https://fr.wikipedia.org/wiki/Alpha_blending">canal alpha</a> qui décrit la transparence de l'image et donc la façon dont cette image se <a href="https://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#SimpleAlphaBlending">compose</a> avec son arrière-plan.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Cet article décrit le type de donnée CSS <code>&lt;color&gt;</code> en détails. Si vous souhaitez en savoir plus sur l'utilisation des couleurs en HTML, n'hésitez pas à lire <a href="/fr/docs/Web/HTML/Appliquer_des_couleurs">Appliquer des couleurs à des éléments HTML grâce à CSS</a>.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<div class="note">
+<p>Bien que les valeurs des couleurs CSS soient définies précisément, elles pourront s'afficher différemment sur différents appareils. La plupart des appareils ne sont pas calibrés et certains navigateurs ne prennent pas en charge <a href="https://fr.wikipedia.org/wiki/Profil_ICC">le profil de couleurs</a> de l'appareil. Sans ces éléments, le rendu des couleurs peut varier.</p>
+</div>
+
+<p>Il existe plusieurs méthodes pour décrire une valeur <code>&lt;color&gt;</code>.</p>
+
+<h3 id="Les_mots-clés">Les mots-clés</h3>
+
+<p>Les mots-clés sont des identifiants insensibles à la casse qui représentent une couleur donnée. Par exemple, le mot-clé red représentera la couleur rouge, <code>blue</code> le bleu, <code>brown</code> le marron, etc. La liste des valeurs autorisées a fortement évolué au cours des différentes versions de la spécification :</p>
+
+<ul>
+ <li>La spécification CSS de niveau 1 n'acceptait que 16 couleurs basiques, construites à partir des couleurs <a href="https://fr.wikipedia.org/wiki/Video_Graphics_Array">VGA</a> disponibles sur les cartes graphiques.</li>
+ <li>La spécification CSS de niveau 2 a ajouté le mot-clé <code>orange</code>.</li>
+ <li>Depuis le début des couleurs CSS, les navigateurs ont pris en charge d'autres couleurs, notamment les couleurs X11 car certains des premiers navigateurs étaient des applications X11. SVG 1.0 a été le premier standard qui a défini formellement ces mots-clés et la spécification CSS de niveau 3 sur les couleurs a aussi défini ces couleurs formellement. Ces différentes couleurs sont parfois intitulées couleurs étendues (<em>extended colors</em>), couleurs X11 ou couleurs SVG.</li>
+ <li>La spécification CSS de niveau a ajouté la couleur <code>rebeccapurple</code> <a href="https://codepen.io/trezy/post/honoring-a-great-man">en l'honneur d'Eric Meyer</a>.</li>
+</ul>
+
+<p>Voici quelques inconvénients liés aux mots-clés :</p>
+
+<ul>
+ <li>En dehors des 16 couleurs de base présentes également en HTML, les autres valeurs ne peuvent pas être utilisées en HTML. HTML convertira ces valeurs inconnues avec un algorithme spécifique qui donnera d'autres couleurs à l'arrivée. Ces mots-clés ne doivent être utilisés qu'avec SVG ou CSS.</li>
+ <li>Si un mot-clé inconnu est utilisé, la propriété sera considérée comme invalide et sera donc ignorée. Le comportement est donc différent de HTML (qui calculera une couleur).</li>
+ <li>Aucun mot-clé ne définit de couleurs transparentes, toutes les couleurs indiquées par des mots-clés sont unies et opaques.</li>
+ <li>Certains mots-clés désignent la même couleur :
+  <ul>
+   <li><code>aqua</code> / <code>cyan</code></li>
+   <li><code>fuchsia</code> / <code>magenta</code></li>
+   <li><code>darkgray</code> / <code>darkgrey</code></li>
+   <li><code>darkslategray</code> / <code>darkslategrey</code></li>
+   <li><code>dimgray</code> / <code>dimgrey</code></li>
+   <li><code>lightgray</code> / <code>lightgrey</code></li>
+   <li><code>lightslategray</code> / <code>lightslategrey</code></li>
+   <li><code>gray</code> / <code>grey</code></li>
+   <li><code>slategray</code> / <code>slategrey</code></li>
+  </ul>
+ </li>
+ <li>Bien que les noms des mots-clés soient calqués sur les couleurs X11, les couleurs correspondantes peuvent être différentes en CSS et avec X11 car pour ce dernier les couleurs étaient conçues pour le matériel du constructeur.</li>
+</ul>
+
+<table id="colors_table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Couleur</th>
+   <th scope="col">Mot-clé</th>
+   <th scope="col">Valeurs exprimées en hexadécimal RGB</th>
+   <th scope="col">Exemple «<em> live</em> » dans le navigateur</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr style="position: relative;">
+   <td rowspan="16">{{SpecName("CSS1")}}</td>
+   <td style="background: #000;"></td>
+   <td style="text-align: center;"><code>black</code></td>
+   <td><code>#000000</code></td>
+   <td style="background: black;"></td>
+  </tr>
+  <tr>
+   <td style="background: #C0C0C0;"></td>
+   <td style="text-align: center;"><code>silver</code></td>
+   <td><code>#c0c0c0</code></td>
+   <td style="background: silver;"></td>
+  </tr>
+  <tr>
+   <td style="background: #808080;"></td>
+   <td style="text-align: center;"><code>gray</code></td>
+   <td><code>#808080</code></td>
+   <td style="background: gray;"></td>
+  </tr>
+  <tr>
+   <td style="background: #FFF;"></td>
+   <td style="text-align: center;"><code>white</code></td>
+   <td><code>#ffffff</code></td>
+   <td style="background: white;"></td>
+  </tr>
+  <tr>
+   <td style="background: #800000;"></td>
+   <td style="text-align: center;"><code>maroon</code></td>
+   <td><code>#800000</code></td>
+   <td style="background: maroon;"></td>
+  </tr>
+  <tr>
+   <td style="background: #F00;"></td>
+   <td style="text-align: center;"><code>red</code></td>
+   <td><code>#ff0000</code></td>
+   <td style="background: red;"></td>
+  </tr>
+  <tr>
+   <td style="background: #800080;"></td>
+   <td style="text-align: center;"><code>purple</code></td>
+   <td><code>#800080</code></td>
+   <td style="background: purple;"></td>
+  </tr>
+  <tr>
+   <td style="background: #F0F;"></td>
+   <td style="text-align: center;"><code>fuchsia</code></td>
+   <td><code>#ff00ff</code></td>
+   <td style="background: fuchsia;"></td>
+  </tr>
+  <tr>
+   <td style="background: #008000;"></td>
+   <td style="text-align: center;"><code>green</code></td>
+   <td><code>#008000</code></td>
+   <td style="background: green;"></td>
+  </tr>
+  <tr>
+   <td style="background: #0F0;"></td>
+   <td style="text-align: center;"><code>lime</code></td>
+   <td><code>#00ff00</code></td>
+   <td style="background: lime;"></td>
+  </tr>
+  <tr>
+   <td style="background: #808000;"></td>
+   <td style="text-align: center;"><code>olive</code></td>
+   <td><code>#808000</code></td>
+   <td style="background: olive;"></td>
+  </tr>
+  <tr>
+   <td style="background: #FF0;"></td>
+   <td style="text-align: center;"><code>yellow</code></td>
+   <td><code>#ffff00</code></td>
+   <td style="background: yellow;"></td>
+  </tr>
+  <tr>
+   <td style="background: #000080;"></td>
+   <td style="text-align: center;"><code>navy</code></td>
+   <td><code>#000080</code></td>
+   <td style="background: navy;"></td>
+  </tr>
+  <tr>
+   <td style="background: #00F;"></td>
+   <td style="text-align: center;"><code>blue</code></td>
+   <td><code>#0000ff</code></td>
+   <td style="background: blue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #008080;"></td>
+   <td style="text-align: center;"><code>teal</code></td>
+   <td><code>#008080</code></td>
+   <td style="background: teal;"></td>
+  </tr>
+  <tr>
+   <td style="background: #0FF;"></td>
+   <td style="text-align: center;"><code>aqua</code></td>
+   <td><code>#00ffff</code></td>
+   <td style="background: aqua;"></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1")}}</td>
+   <td style="background: #FFA500;"></td>
+   <td style="text-align: center;"><code>orange</code></td>
+   <td><code>#ffa500</code></td>
+   <td style="background: orange;"></td>
+  </tr>
+  <tr>
+   <td rowspan="130">{{SpecName("CSS3 Colors")}}</td>
+   <td style="background: #f0f8ff;"></td>
+   <td style="text-align: center;"><code>aliceblue</code></td>
+   <td><code>#f0f8ff</code></td>
+   <td style="background: aliceblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #faebd7;"></td>
+   <td style="text-align: center;"><code>antiquewhite</code></td>
+   <td><code>#faebd7</code></td>
+   <td style="background: antiquewhite;"></td>
+  </tr>
+  <tr>
+   <td style="background: #7fffd4;"></td>
+   <td style="text-align: center;"><code>aquamarine</code></td>
+   <td><code>#7fffd4</code></td>
+   <td style="background: aquamarine;"></td>
+  </tr>
+  <tr>
+   <td style="background: #f0ffff;"></td>
+   <td style="text-align: center;"><code>azure</code></td>
+   <td><code>#f0ffff</code></td>
+   <td style="background: azure;"></td>
+  </tr>
+  <tr>
+   <td style="background: #f5f5dc;"></td>
+   <td style="text-align: center;"><code>beige</code></td>
+   <td><code>#f5f5dc</code></td>
+   <td style="background: beige;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ffe4c4;"></td>
+   <td style="text-align: center;"><code>bisque</code></td>
+   <td><code>#ffe4c4</code></td>
+   <td style="background: bisque;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ffebcd;"></td>
+   <td style="text-align: center;"><code>blanchedalmond</code></td>
+   <td><code>#ffebcd</code></td>
+   <td style="background: blanchedalmond;"></td>
+  </tr>
+  <tr>
+   <td style="background: #8a2be2;"></td>
+   <td style="text-align: center;"><code>blueviolet</code></td>
+   <td><code>#8a2be2</code></td>
+   <td style="background: blueviolet;"></td>
+  </tr>
+  <tr>
+   <td style="background: #a52a2a;"></td>
+   <td style="text-align: center;"><code>brown</code></td>
+   <td><code>#a52a2a</code></td>
+   <td style="background: brown;"></td>
+  </tr>
+  <tr>
+   <td style="background: #deb887;"></td>
+   <td style="text-align: center;"><code>burlywood</code></td>
+   <td><code>#deb887</code></td>
+   <td style="background: burlywood;"></td>
+  </tr>
+  <tr>
+   <td style="background: #5f9ea0;"></td>
+   <td style="text-align: center;"><code>cadetblue</code></td>
+   <td><code>#5f9ea0</code></td>
+   <td style="background: cadetblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #7fff00;"></td>
+   <td style="text-align: center;"><code>chartreuse</code></td>
+   <td><code>#7fff00</code></td>
+   <td style="background: chartreuse;"></td>
+  </tr>
+  <tr>
+   <td style="background: #d2691e;"></td>
+   <td style="text-align: center;"><code>chocolate</code></td>
+   <td><code>#d2691e</code></td>
+   <td style="background: chocolate;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ff7f50;"></td>
+   <td style="text-align: center;"><code>coral</code></td>
+   <td><code>#ff7f50</code></td>
+   <td style="background: coral;"></td>
+  </tr>
+  <tr>
+   <td style="background: #6495ed;"></td>
+   <td style="text-align: center;"><code>cornflowerblue</code></td>
+   <td><code>#6495ed</code></td>
+   <td style="background: cornflowerblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #fff8dc;"></td>
+   <td style="text-align: center;"><code>cornsilk</code></td>
+   <td><code>#fff8dc</code></td>
+   <td style="background: cornsilk;"></td>
+  </tr>
+  <tr>
+   <td style="background: #dc143c;"></td>
+   <td style="text-align: center;"><code>crimson</code></td>
+   <td><code>#dc143c</code></td>
+   <td style="background: crimson;"></td>
+  </tr>
+  <tr>
+   <td style="background: #0ff;"></td>
+   <td style="text-align: center;"><code>cyan</code> (synonyme de <code>aqua</code>)</td>
+   <td><code>#00ffff</code></td>
+   <td style="background: cyan;"></td>
+  </tr>
+  <tr>
+   <td style="background: #00008b;"></td>
+   <td style="text-align: center;"><code>darkblue</code></td>
+   <td><code>#00008b</code></td>
+   <td style="background: darkblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #008b8b;"></td>
+   <td style="text-align: center;"><code>darkcyan</code></td>
+   <td><code>#008b8b</code></td>
+   <td style="background: darkcyan;"></td>
+  </tr>
+  <tr>
+   <td style="background: #b8860b;"></td>
+   <td style="text-align: center;"><code>darkgoldenrod</code></td>
+   <td><code>#b8860b</code></td>
+   <td style="background: darkgoldenrod;"></td>
+  </tr>
+  <tr>
+   <td style="background: #a9a9a9;"></td>
+   <td style="text-align: center;"><code>darkgray</code></td>
+   <td><code>#a9a9a9</code></td>
+   <td style="background: darkgray;"></td>
+  </tr>
+  <tr>
+   <td style="background: #006400;"></td>
+   <td style="text-align: center;"><code>darkgreen</code></td>
+   <td><code>#006400</code></td>
+   <td style="background: darkgreen;"></td>
+  </tr>
+  <tr>
+   <td style="background: #a9a9a9;"></td>
+   <td style="text-align: center;"><code>darkgrey</code></td>
+   <td><code>#a9a9a9</code></td>
+   <td style="background: darkgrey;"></td>
+  </tr>
+  <tr>
+   <td style="background: #bdb76b;"></td>
+   <td style="text-align: center;"><code>darkkhaki</code></td>
+   <td><code>#bdb76b</code></td>
+   <td style="background: darkkhaki;"></td>
+  </tr>
+  <tr>
+   <td style="background: #8b008b;"></td>
+   <td style="text-align: center;"><code>darkmagenta</code></td>
+   <td><code>#8b008b</code></td>
+   <td style="background: darkmagenta;"></td>
+  </tr>
+  <tr>
+   <td style="background: #556b2f;"></td>
+   <td style="text-align: center;"><code>darkolivegreen</code></td>
+   <td><code>#556b2f</code></td>
+   <td style="background: darkolivegreen;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ff8c00;"></td>
+   <td style="text-align: center;"><code>darkorange</code></td>
+   <td><code>#ff8c00</code></td>
+   <td style="background: darkorange;"></td>
+  </tr>
+  <tr>
+   <td style="background: #9932cc;"></td>
+   <td style="text-align: center;"><code>darkorchid</code></td>
+   <td><code>#9932cc</code></td>
+   <td style="background: darkorchid;"></td>
+  </tr>
+  <tr>
+   <td style="background: #8b0000;"></td>
+   <td style="text-align: center;"><code>darkred</code></td>
+   <td><code>#8b0000</code></td>
+   <td style="background: darkred;"></td>
+  </tr>
+  <tr>
+   <td style="background: #e9967a;"></td>
+   <td style="text-align: center;"><code>darksalmon</code></td>
+   <td><code>#e9967a</code></td>
+   <td style="background: darksalmon;"></td>
+  </tr>
+  <tr>
+   <td style="background: #8fbc8f;"></td>
+   <td style="text-align: center;"><code>darkseagreen</code></td>
+   <td><code>#8fbc8f</code></td>
+   <td style="background: darkseagreen;"></td>
+  </tr>
+  <tr>
+   <td style="background: #483d8b;"></td>
+   <td style="text-align: center;"><code>darkslateblue</code></td>
+   <td><code>#483d8b</code></td>
+   <td style="background: darkslateblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #2f4f4f;"></td>
+   <td style="text-align: center;"><code>darkslategray</code></td>
+   <td><code>#2f4f4f</code></td>
+   <td style="background: darkslategray;"></td>
+  </tr>
+  <tr>
+   <td style="background: #2f4f4f;"></td>
+   <td style="text-align: center;"><code>darkslategrey</code></td>
+   <td><code>#2f4f4f</code></td>
+   <td style="background: darkslategrey;"></td>
+  </tr>
+  <tr>
+   <td style="background: #00ced1;"></td>
+   <td style="text-align: center;"><code>darkturquoise</code></td>
+   <td><code>#00ced1</code></td>
+   <td style="background: darkturquoise;"></td>
+  </tr>
+  <tr>
+   <td style="background: #9400d3;"></td>
+   <td style="text-align: center;"><code>darkviolet</code></td>
+   <td><code>#9400d3</code></td>
+   <td style="background: darkviolet;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ff1493;"></td>
+   <td style="text-align: center;"><code>deeppink</code></td>
+   <td><code>#ff1493</code></td>
+   <td style="background: deeppink;"></td>
+  </tr>
+  <tr>
+   <td style="background: #00bfff;"></td>
+   <td style="text-align: center;"><code>deepskyblue</code></td>
+   <td><code>#00bfff</code></td>
+   <td style="background: deepskyblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #696969;"></td>
+   <td style="text-align: center;"><code>dimgray</code></td>
+   <td><code>#696969</code></td>
+   <td style="background: dimgray;"></td>
+  </tr>
+  <tr>
+   <td style="background: #696969;"></td>
+   <td style="text-align: center;"><code>dimgrey</code></td>
+   <td><code>#696969</code></td>
+   <td style="background: dimgrey;"></td>
+  </tr>
+  <tr>
+   <td style="background: #1e90ff;"></td>
+   <td style="text-align: center;"><code>dodgerblue</code></td>
+   <td><code>#1e90ff</code></td>
+   <td style="background: dodgerblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #b22222;"></td>
+   <td style="text-align: center;"><code>firebrick</code></td>
+   <td><code>#b22222</code></td>
+   <td style="background: firebrick;"></td>
+  </tr>
+  <tr>
+   <td style="background: #fffaf0;"></td>
+   <td style="text-align: center;"><code>floralwhite</code></td>
+   <td><code>#fffaf0</code></td>
+   <td style="background: floralwhite;"></td>
+  </tr>
+  <tr>
+   <td style="background: #228b22;"></td>
+   <td style="text-align: center;"><code>forestgreen</code></td>
+   <td><code>#228b22</code></td>
+   <td style="background: forestgreen;"></td>
+  </tr>
+  <tr>
+   <td style="background: #dcdcdc;"></td>
+   <td style="text-align: center;"><code>gainsboro</code></td>
+   <td><code>#dcdcdc</code></td>
+   <td style="background: gainsboro;"></td>
+  </tr>
+  <tr>
+   <td style="background: #f8f8ff;"></td>
+   <td style="text-align: center;"><code>ghostwhite</code></td>
+   <td><code>#f8f8ff</code></td>
+   <td style="background: ghostwhite;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ffd700;"></td>
+   <td style="text-align: center;"><code>gold</code></td>
+   <td><code>#ffd700</code></td>
+   <td style="background: gold;"></td>
+  </tr>
+  <tr>
+   <td style="background: #daa520;"></td>
+   <td style="text-align: center;"><code>goldenrod</code></td>
+   <td><code>#daa520</code></td>
+   <td style="background: goldenrod;"></td>
+  </tr>
+  <tr>
+   <td style="background: #adff2f;"></td>
+   <td style="text-align: center;"><code>greenyellow</code></td>
+   <td><code>#adff2f</code></td>
+   <td style="background: greenyellow ;"></td>
+  </tr>
+  <tr>
+   <td style="background: #808080;"></td>
+   <td style="text-align: center;"><code>grey</code></td>
+   <td><code>#808080</code></td>
+   <td style="background: grey;"></td>
+  </tr>
+  <tr>
+   <td style="background: #f0fff0;"></td>
+   <td style="text-align: center;"><code>honeydew</code></td>
+   <td><code>#f0fff0</code></td>
+   <td style="background: honeydew;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ff69b4;"></td>
+   <td style="text-align: center;"><code>hotpink</code></td>
+   <td><code>#ff69b4</code></td>
+   <td style="background: hotpink;"></td>
+  </tr>
+  <tr>
+   <td style="background: #cd5c5c;"></td>
+   <td style="text-align: center;"><code>indianred</code></td>
+   <td><code>#cd5c5c</code></td>
+   <td style="background: indianred;"></td>
+  </tr>
+  <tr>
+   <td style="background: #4b0082;"></td>
+   <td style="text-align: center;"><code>indigo</code></td>
+   <td><code>#4b0082</code></td>
+   <td style="background: indigo;"></td>
+  </tr>
+  <tr>
+   <td style="background: #fffff0;"></td>
+   <td style="text-align: center;"><code>ivory</code></td>
+   <td><code>#fffff0</code></td>
+   <td style="background: ivory;"></td>
+  </tr>
+  <tr>
+   <td style="background: #f0e68c;"></td>
+   <td style="text-align: center;"><code>khaki</code></td>
+   <td><code>#f0e68c</code></td>
+   <td style="background: khaki;"></td>
+  </tr>
+  <tr>
+   <td style="background: #e6e6fa;"></td>
+   <td style="text-align: center;"><code>lavender</code></td>
+   <td><code>#e6e6fa</code></td>
+   <td style="background: lavender;"></td>
+  </tr>
+  <tr>
+   <td style="background: #fff0f5;"></td>
+   <td style="text-align: center;"><code>lavenderblush</code></td>
+   <td><code>#fff0f5</code></td>
+   <td style="background: lavenderblush ;"></td>
+  </tr>
+  <tr>
+   <td style="background: #7cfc00;"></td>
+   <td style="text-align: center;"><code>lawngreen</code></td>
+   <td><code>#7cfc00</code></td>
+   <td style="background: lawngreen;"></td>
+  </tr>
+  <tr>
+   <td style="background: #fffacd;"></td>
+   <td style="text-align: center;"><code>lemonchiffon</code></td>
+   <td><code>#fffacd</code></td>
+   <td style="background: lemonchiffon;"></td>
+  </tr>
+  <tr>
+   <td style="background: #add8e6;"></td>
+   <td style="text-align: center;"><code>lightblue</code></td>
+   <td><code>#add8e6</code></td>
+   <td style="background: lightblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #f08080;"></td>
+   <td style="text-align: center;"><code>lightcoral</code></td>
+   <td><code>#f08080</code></td>
+   <td style="background: lightcoral;"></td>
+  </tr>
+  <tr>
+   <td style="background: #e0ffff;"></td>
+   <td style="text-align: center;"><code>lightcyan</code></td>
+   <td><code>#e0ffff</code></td>
+   <td style="background: lightcyan;"></td>
+  </tr>
+  <tr>
+   <td style="background: #fafad2;"></td>
+   <td style="text-align: center;"><code>lightgoldenrodyellow</code></td>
+   <td><code>#fafad2</code></td>
+   <td style="background: lightgoldenrodyellow ;"></td>
+  </tr>
+  <tr>
+   <td style="background: #d3d3d3;"></td>
+   <td style="text-align: center;"><code>lightgray</code></td>
+   <td><code>#d3d3d3</code></td>
+   <td style="background: lightgray;"></td>
+  </tr>
+  <tr>
+   <td style="background: #90ee90;"></td>
+   <td style="text-align: center;"><code>lightgreen</code></td>
+   <td><code>#90ee90</code></td>
+   <td style="background: lightgreen;"></td>
+  </tr>
+  <tr>
+   <td style="background: #d3d3d3;"></td>
+   <td style="text-align: center;"><code>lightgrey</code></td>
+   <td><code>#d3d3d3</code></td>
+   <td style="background: lightgrey;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ffb6c1;"></td>
+   <td style="text-align: center;"><code>lightpink</code></td>
+   <td><code>#ffb6c1</code></td>
+   <td style="background: lightpink;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ffa07a;"></td>
+   <td style="text-align: center;"><code>lightsalmon</code></td>
+   <td><code>#ffa07a</code></td>
+   <td style="background: lightsalmon;"></td>
+  </tr>
+  <tr>
+   <td style="background: #20b2aa;"></td>
+   <td style="text-align: center;"><code>lightseagreen</code></td>
+   <td><code>#20b2aa</code></td>
+   <td style="background: lightseagreen;"></td>
+  </tr>
+  <tr>
+   <td style="background: #87cefa;"></td>
+   <td style="text-align: center;"><code>lightskyblue</code></td>
+   <td><code>#87cefa</code></td>
+   <td style="background: lightskyblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #778899;"></td>
+   <td style="text-align: center;"><code>lightslategray</code></td>
+   <td><code>#778899</code></td>
+   <td style="background: lightslategray;"></td>
+  </tr>
+  <tr>
+   <td style="background: #778899;"></td>
+   <td style="text-align: center;"><code>lightslategrey</code></td>
+   <td><code>#778899</code></td>
+   <td style="background: lightslategrey;"></td>
+  </tr>
+  <tr>
+   <td style="background: #b0c4de;"></td>
+   <td style="text-align: center;"><code>lightsteelblue</code></td>
+   <td><code>#b0c4de</code></td>
+   <td style="background: lightsteelblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ffffe0;"></td>
+   <td style="text-align: center;"><code>lightyellow</code></td>
+   <td><code>#ffffe0</code></td>
+   <td style="background: lightyellow;"></td>
+  </tr>
+  <tr>
+   <td style="background: #32cd32;"></td>
+   <td style="text-align: center;"><code>limegreen</code></td>
+   <td><code>#32cd32</code></td>
+   <td style="background: limegreen;"></td>
+  </tr>
+  <tr>
+   <td style="background: #faf0e6;"></td>
+   <td style="text-align: center;"><code>linen</code></td>
+   <td><code>#faf0e6</code></td>
+   <td style="background: linen;"></td>
+  </tr>
+  <tr>
+   <td style="background: rgb(255, 0, 255) none repeat scroll 0% 0%;"></td>
+   <td style="text-align: center;"><code>magenta</code> (synonyme de <code>fuchsia</code>)</td>
+   <td><code>#ff00ff</code></td>
+   <td style="background: magenta none repeat scroll 0% 0%;"></td>
+  </tr>
+  <tr>
+   <td style="background: #66cdaa;"></td>
+   <td style="text-align: center;"><code>mediumaquamarine</code></td>
+   <td><code>#66cdaa</code></td>
+   <td style="background: mediumaquamarine;"></td>
+  </tr>
+  <tr>
+   <td style="background: #0000cd;"></td>
+   <td style="text-align: center;"><code>mediumblue</code></td>
+   <td><code>#0000cd</code></td>
+   <td style="background: mediumblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ba55d3;"></td>
+   <td style="text-align: center;"><code>mediumorchid</code></td>
+   <td><code>#ba55d3</code></td>
+   <td style="background: mediumorchid;"></td>
+  </tr>
+  <tr>
+   <td style="background: #9370db;"></td>
+   <td style="text-align: center;"><code>mediumpurple</code></td>
+   <td><code>#9370db</code></td>
+   <td style="background: mediumpurple;"></td>
+  </tr>
+  <tr>
+   <td style="background: #3cb371;"></td>
+   <td style="text-align: center;"><code>mediumseagreen</code></td>
+   <td><code>#3cb371</code></td>
+   <td style="background: mediumseagreen;"></td>
+  </tr>
+  <tr>
+   <td style="background: #7b68ee;"></td>
+   <td style="text-align: center;"><code>mediumslateblue</code></td>
+   <td><code>#7b68ee</code></td>
+   <td style="background: mediumslateblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #00fa9a;"></td>
+   <td style="text-align: center;"><code>mediumspringgreen</code></td>
+   <td><code>#00fa9a</code></td>
+   <td style="background: mediumspringgreen;"></td>
+  </tr>
+  <tr>
+   <td style="background: #48d1cc;"></td>
+   <td style="text-align: center;"><code>mediumturquoise</code></td>
+   <td><code>#48d1cc</code></td>
+   <td style="background: mediumturquoise;"></td>
+  </tr>
+  <tr>
+   <td style="background: #c71585;"></td>
+   <td style="text-align: center;"><code>mediumvioletred</code></td>
+   <td><code>#c71585</code></td>
+   <td style="background: mediumvioletred;"></td>
+  </tr>
+  <tr>
+   <td style="background: #191970;"></td>
+   <td style="text-align: center;"><code>midnightblue</code></td>
+   <td><code>#191970</code></td>
+   <td style="background: midnightblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #f5fffa;"></td>
+   <td style="text-align: center;"><code>mintcream</code></td>
+   <td><code>#f5fffa</code></td>
+   <td style="background: mintcream;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ffe4e1;"></td>
+   <td style="text-align: center;"><code>mistyrose</code></td>
+   <td><code>#ffe4e1</code></td>
+   <td style="background: mistyrose;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ffe4b5;"></td>
+   <td style="text-align: center;"><code>moccasin</code></td>
+   <td><code>#ffe4b5</code></td>
+   <td style="background: moccasin;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ffdead;"></td>
+   <td style="text-align: center;"><code>navajowhite</code></td>
+   <td><code>#ffdead</code></td>
+   <td style="background: navajowhite;"></td>
+  </tr>
+  <tr>
+   <td style="background: #fdf5e6;"></td>
+   <td style="text-align: center;"><code>oldlace</code></td>
+   <td><code>#fdf5e6</code></td>
+   <td style="background: oldlace;"></td>
+  </tr>
+  <tr>
+   <td style="background: #6b8e23;"></td>
+   <td style="text-align: center;"><code>olivedrab</code></td>
+   <td><code>#6b8e23</code></td>
+   <td style="background: olivedrab;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ff4500;"></td>
+   <td style="text-align: center;"><code>orangered</code></td>
+   <td><code>#ff4500</code></td>
+   <td style="background: orangered;"></td>
+  </tr>
+  <tr>
+   <td style="background: #da70d6;"></td>
+   <td style="text-align: center;"><code>orchid</code></td>
+   <td><code>#da70d6</code></td>
+   <td style="background: orchid;"></td>
+  </tr>
+  <tr>
+   <td style="background: #eee8aa;"></td>
+   <td style="text-align: center;"><code>palegoldenrod</code></td>
+   <td><code>#eee8aa</code></td>
+   <td style="background: palegoldenrod;"></td>
+  </tr>
+  <tr>
+   <td style="background: #98fb98;"></td>
+   <td style="text-align: center;"><code>palegreen</code></td>
+   <td><code>#98fb98</code></td>
+   <td style="background: palegreen;"></td>
+  </tr>
+  <tr>
+   <td style="background: #afeeee;"></td>
+   <td style="text-align: center;"><code>paleturquoise</code></td>
+   <td><code>#afeeee</code></td>
+   <td style="background: paleturquoise;"></td>
+  </tr>
+  <tr>
+   <td style="background: #db7093;"></td>
+   <td style="text-align: center;"><code>palevioletred</code></td>
+   <td><code>#db7093</code></td>
+   <td style="background: palevioletred;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ffefd5;"></td>
+   <td style="text-align: center;"><code>papayawhip</code></td>
+   <td><code>#ffefd5</code></td>
+   <td style="background: papayawhip;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ffdab9;"></td>
+   <td style="text-align: center;"><code>peachpuff</code></td>
+   <td><code>#ffdab9</code></td>
+   <td style="background: peachpuff;"></td>
+  </tr>
+  <tr>
+   <td style="background: #cd853f;"></td>
+   <td style="text-align: center;"><code>peru</code></td>
+   <td><code>#cd853f</code></td>
+   <td style="background: peru;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ffc0cb;"></td>
+   <td style="text-align: center;"><code>pink</code></td>
+   <td><code>#ffc0cb</code></td>
+   <td style="background: pink;"></td>
+  </tr>
+  <tr>
+   <td style="background: #dda0dd;"></td>
+   <td style="text-align: center;"><code>plum</code></td>
+   <td><code>#dda0dd</code></td>
+   <td style="background: plum;"></td>
+  </tr>
+  <tr>
+   <td style="background: #b0e0e6;"></td>
+   <td style="text-align: center;"><code>powderblue</code></td>
+   <td><code>#b0e0e6</code></td>
+   <td style="background: powderblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #bc8f8f;"></td>
+   <td style="text-align: center;"><code>rosybrown</code></td>
+   <td><code>#bc8f8f</code></td>
+   <td style="background: rosybrown;"></td>
+  </tr>
+  <tr>
+   <td style="background: #4169e1;"></td>
+   <td style="text-align: center;"><code>royalblue</code></td>
+   <td><code>#4169e1</code></td>
+   <td style="background: royalblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #8b4513;"></td>
+   <td style="text-align: center;"><code>saddlebrown</code></td>
+   <td><code>#8b4513</code></td>
+   <td style="background: saddlebrown;"></td>
+  </tr>
+  <tr>
+   <td style="background: #fa8072;"></td>
+   <td style="text-align: center;"><code>salmon</code></td>
+   <td><code>#fa8072</code></td>
+   <td style="background: salmon;"></td>
+  </tr>
+  <tr>
+   <td style="background: #f4a460;"></td>
+   <td style="text-align: center;"><code>sandybrown</code></td>
+   <td><code>#f4a460</code></td>
+   <td style="background: sandybrown;"></td>
+  </tr>
+  <tr>
+   <td style="background: #2e8b57;"></td>
+   <td style="text-align: center;"><code>seagreen</code></td>
+   <td><code>#2e8b57</code></td>
+   <td style="background: seagreen;"></td>
+  </tr>
+  <tr>
+   <td style="background: #fff5ee;"></td>
+   <td style="text-align: center;"><code>seashell</code></td>
+   <td><code>#fff5ee</code></td>
+   <td style="background: seashell;"></td>
+  </tr>
+  <tr>
+   <td style="background: #a0522d;"></td>
+   <td style="text-align: center;"><code>sienna</code></td>
+   <td><code>#a0522d</code></td>
+   <td style="background: sienna;"></td>
+  </tr>
+  <tr>
+   <td style="background: #87ceeb;"></td>
+   <td style="text-align: center;"><code>skyblue</code></td>
+   <td><code>#87ceeb</code></td>
+   <td style="background: skyblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #6a5acd;"></td>
+   <td style="text-align: center;"><code>slateblue</code></td>
+   <td><code>#6a5acd</code></td>
+   <td style="background: slateblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #708090;"></td>
+   <td style="text-align: center;"><code>slategray</code></td>
+   <td><code>#708090</code></td>
+   <td style="background: slategray;"></td>
+  </tr>
+  <tr>
+   <td style="background: #708090;"></td>
+   <td style="text-align: center;"><code>slategrey</code></td>
+   <td><code>#708090</code></td>
+   <td style="background: slategrey;"></td>
+  </tr>
+  <tr>
+   <td style="background: #fffafa;"></td>
+   <td style="text-align: center;"><code>snow</code></td>
+   <td><code>#fffafa</code></td>
+   <td style="background: snow;"></td>
+  </tr>
+  <tr>
+   <td style="background: #00ff7f;"></td>
+   <td style="text-align: center;"><code>springgreen</code></td>
+   <td><code>#00ff7f</code></td>
+   <td style="background: springgreen;"></td>
+  </tr>
+  <tr>
+   <td style="background: #4682b4;"></td>
+   <td style="text-align: center;"><code>steelblue</code></td>
+   <td><code>#4682b4</code></td>
+   <td style="background: steelblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #d2b48c;"></td>
+   <td style="text-align: center;"><code>tan</code></td>
+   <td><code>#d2b48c</code></td>
+   <td style="background: tan;"></td>
+  </tr>
+  <tr>
+   <td style="background: #d8bfd8;"></td>
+   <td style="text-align: center;"><code>thistle</code></td>
+   <td><code>#d8bfd8</code></td>
+   <td style="background: thistle;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ff6347;"></td>
+   <td style="text-align: center;"><code>tomato</code></td>
+   <td><code>#ff6347</code></td>
+   <td style="background: tomato;"></td>
+  </tr>
+  <tr>
+   <td style="background: #40e0d0;"></td>
+   <td style="text-align: center;"><code>turquoise</code></td>
+   <td><code>#40e0d0</code></td>
+   <td style="background: turquoise;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ee82ee;"></td>
+   <td style="text-align: center;"><code>violet</code></td>
+   <td><code>#ee82ee</code></td>
+   <td style="background: violet;"></td>
+  </tr>
+  <tr>
+   <td style="background: #f5deb3;"></td>
+   <td style="text-align: center;"><code>wheat</code></td>
+   <td><code>#f5deb3</code></td>
+   <td style="background: wheat;"></td>
+  </tr>
+  <tr>
+   <td style="background: #f5f5f5;"></td>
+   <td style="text-align: center;"><code>whitesmoke</code></td>
+   <td><code>#f5f5f5</code></td>
+   <td style="background: whitesmoke;"></td>
+  </tr>
+  <tr>
+   <td style="background: #9acd32;"></td>
+   <td style="text-align: center;"><code>yellowgreen</code></td>
+   <td><code>#9acd32</code></td>
+   <td style="background: yellowgreen;"></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS4 Colors")}}</td>
+   <td style="background: #639;"></td>
+   <td style="text-align: center;"><code>rebeccapurple</code></td>
+   <td><code>#663399</code></td>
+   <td style="background: rebeccapurple;"></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>La couleur <code>rebeccapurple</code> est équivalente à la couleur <code>#639</code>. Pour mieux comprendre pourquoi elle a été ajoutée, vous pouvez lire ce billet Codepen par Trezy « <a href="https://codepen.io/trezy/blog/honoring-a-great-man">Honorer un grand homme</a> » (en anglais).</p>
+
+<h3 id="Le_mot-clé_transparent">Le mot-clé <code>transparent</code></h3>
+
+<p><code>transparent</code> est un mot-clé qui représente une couleur totalement transparente (autrement dit, la couleur qui sera vue sera la couleur située en arrière-plan). D'un point de vue technique, il s'agit d'un noir pur avec un canal alpha minimal : <code>rgba(0,0,0,0)</code>.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Attention lorsqu'on utilise ce mot-clé pour un dégradé (cf.{{cssxref("gradient")}}, <a href="https://www.w3.org/TR/2012/CR-css3-images-20120417/#color-stop-syntax">la spécification W3C indique que <code>transparent</code> devrait être calculé dans l'espace de couleurs avec pré-multiplication des alpha</a>. Cependant, les anciens navigateurs peuvent traiter ce noir avec une valeur <code>alpha</code> de 0.</p>
+</div>
+
+<div class="note"><strong>Note historique :</strong> Le mot-clé <code>transparent</code> n'était pas une valeur de type <code>&lt;color&gt;</code> pour la spécification CSS de niveau 2 (première révision). C'était un mot-clé qui pouvait être utilisé comme valeur pour les propriétés {{cssxref("background")}} et {{cssxref("border")}}. Il a été ajouté afin de pouvoir surcharger l'héritage de couleurs opaques. Avec l'ajout de la gestion de l'opacité via <a href="https://fr.wikipedia.org/wiki/Alpha_blending">les canaux alpha</a>, <code>transparent</code> a été redéfini comme une couleur avec la spécification CSS de niveau 3 sur les couleurs, ce qui permet de l'utiliser à n'importe quel endroit où une valeur <code>&lt;color&gt;</code> est nécessaire (la propriété {{cssxref("color")}} par exemple).</div>
+
+<h3 id="Le_mot-clé_currentColor">Le mot-clé <code>currentColor</code></h3>
+
+<p>Le mot-clé <code>currentColor</code> représente <a href="/fr/docs/Web/CSS/Valeur_calcul%C3%A9e">la valeur calculée</a> de la propriété {{cssxref("color")}} pour l'élément. Il permet aux propriétés de couleur d'hériter de la valeur de l'élément parent même si, par défaut, celles-ci n'utilisent pas l'héritage.</p>
+
+<p>Il peut également être utilisé sur des propriétés qui héritent de la valeur calculée de la propriété {{cssxref("color")}} de l'élément. Cela sera alors équivalent au mot-clé {{cssxref("inherit")}}.</p>
+
+<p>Si <code>currentColor</code> est utilisée comme valeur pour la propriété <code>color</code>, sa valeur est déterminée à partir de la valeur héritée pour la propriété <code>color</code>.</p>
+
+<h4 id="Exemples">Exemples</h4>
+
+<p>La couleur de la ligne prend la couleur héritée depuis son élément parent.</p>
+
+<div>
+<h5 id="Exemple_live_n°1">Exemple <em>live</em> n°1</h5>
+
+<pre class="brush: html">&lt;div style="color:darkred"&gt;
+ La couleur de ce texte est bleu.
+  &lt;div style="background:currentColor; height:1px"&gt;&lt;/div&gt;
+ Un peu de texte.
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('Exemple_live_n°1')}}</p>
+
+<h5 id="Exemple_live_n°2">Exemple <em>live</em> n°2</h5>
+
+<pre class="brush: html">&lt;div style="color:blue; border-bottom: 1px dashed currentColor;"&gt;
+ La couleur de ce texte est bleu :
+  &lt;div style="background:currentColor; height:1px"&gt;&lt;/div&gt;
+ Un peu de texte.
+&lt;/div&gt; </pre>
+
+<p>{{EmbedLiveSample('Exemple_live_n°2')}}</p>
+</div>
+
+<h3 id="Les_couleurs_RGB"><a id="rgb" name="rgb">Les couleurs RGB</a></h3>
+
+<p>Les couleurs peuvent être définies selon le modèles rouge-vert-bleu-alpha (RGB avec une composante alpha, optionnelle, pour gérer la transparence.</p>
+
+<h4 id="Syntaxe_2">Syntaxe</h4>
+
+<p>Les couleurs RGB peuvent être exprimées avec une notation hexadécimale (préfixée avec <code>#</code>) ou avec des notations fonctionnelles (<code>rgb()</code> ou <code>rgba()</code>).</p>
+
+<div class="note">
+<p><strong>Note :</strong> Dans la spécification du module CSS Color de niveau 4, <code>rgba()</code> a été définie comme une fonction historique dont la grammaire et le comportement est le même que <code>rgb()</code>. C'est donc un synonyme. À partir de cette spécification, les deux peuvent accepter les mêmes paramètres.</p>
+</div>
+
+<dl>
+ <dt>Notation hexadécimale : <code>#RRGGBB[AA]</code></dt>
+ <dd>Le signe « <code>#</code> » suivi par huit caractères hexadécimaux (0-9, A-F), les deux premiers déterminent la composante rouge, les deux suivants la composante verte puis la composante bleue et enfin les deux derniers, optionnels, déterminent la composante alpha.</dd>
+ <dt>Notation hexadécimale : <code>#RGB[A]</code></dt>
+ <dd>le signe « <code>#</code> » suivi par quatre caractères hexadécimaux (0-9, A-F), le premier chiffre représente la composante rouge, le deuxième la composante verte, le troisième la composante bleue et le quatrième, optionnel, la composante alpha.</dd>
+ <dt>Notation fonctionnelle avec des virgules : <code>rgb(R, G, B[, A])</code> ou <code>rgba(R, G, B, A)</code></dt>
+ <dd>Cette fonction permet d'ajouter une composante d'opacité (par rapport à la fonction <code>rgb()</code>). Le quatrième argument définira la force de l'opacité : 1 pour une opacité complète et 0 pour une transparence totale. Les arguments peuvent être des nombres ({{cssxref("&lt;number&gt;")}}) ou des pourcentages ({{cssxref("&lt;percentage&gt;")}}) (ex. <code>rgb(1e2, .5e1, .5e0, +.25e2%)</code>).</dd>
+ <dt>Notation fonctionnelle : <code>rgb(R G B[ / A])</code> ou <code>rgba(R G B / A)</code></dt>
+ <dd>Cette forme fonctionne de façon analogue à la forme précédente depuis le module de spécification <em>CSS Colors Level 4</em>.</dd>
+</dl>
+
+<h4 id="Exemples_2">Exemples</h4>
+
+<h5 id="Les_différentes_variantes_pour_la_syntaxe_RGB">Les différentes variantes pour la syntaxe RGB</h5>
+
+<pre class="plain">/* Ces exemples définissent tous la même couleur */
+#f03
+#F03
+#ff0033
+#FF0033
+rgb(255,0,51)
+rgb(255, 0, 51)
+rgb(255, 0, 51.0)
+rgb(100%,0%,20%)
+rgb(100%, 0%, 20%)
+<s>rgb(100%, 0, 20%)</s> /* Erreur : on ne peut pas mélanger les nombres et les pourcentages */
+</pre>
+
+<h5 id="RGBa">RGBa</h5>
+
+<pre class="brush: css">/* Notation hexadécimale */
+#f030               /*   0% opacité - rouge */
+#F03F               /* 100% opacité - rouge */
+#ff003300           /*   0% opacité - rouge */
+#FF003388           /*  50% opacité - rouge */
+
+/* Notation fonctionnelle */
+rgba(255,0,0,0.1)   /*  10% opacité - rouge */
+rgba(255,0,0,0.4)   /*  40% opacité - rouge */
+rgba(255,0,0,0.7)   /*  70% opacité - rouge */
+rgba(255,0,0,  1)   /* 100% opacité - rouge */
+
+/* Notation fonctionnelle avec des nombres décimaux */
+rgba(255, 0, 153.6, 1)
+rgba(1e2, .5e1, .5e0, +.25e2%)
+
+/* Notation avec un espace */
+rgba(255 0 0 / 0.4) /* 40% opacité - rouge */
+rgba(255 0 0 / 40%) /* 40% opacité - rouge */</pre>
+
+<h3 id="Les_couleurs_HSL"><a id="hsl" name="hsl">Les couleurs HSL</a></h3>
+
+<p>Les couleurs peuvent également être définies selon le modèle HSL (pour <em>Hue-Saturation-Lightness</em> qui signifie teinte-saturation-clarté).</p>
+
+<p>HSL est considéré comme plus intuitif que RGB car on peut ajuster les couleurs au fur et à mesure ou créer des palettes de couleurs plus simplement (par exemple en conservant la même teinte et en faisant varier la saturation et/ou la clarté).</p>
+
+<h4 id="Syntaxe_3">Syntaxe</h4>
+
+<p>Pour HSL, les couleurs peuvent être exprimées via les notations fonctionnelles <code>hsl()</code> ou <code>hsla()</code>.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Dans la spécification du module CSS Color de niveau 4, <code>hsla()</code> a été définie comme une fonction historique dont la grammaire et le comportement est le même que <code>hsl()</code>. C'est donc un synonyme. À partir de cette spécification, les deux peuvent accepter les mêmes paramètres.</p>
+</div>
+
+<dl>
+ <dt>Notation fonctionnelle : <code>hsl(H, S, L,[, A])</code> ou <code>hsla(H, S, L, A)</code></dt>
+ <dd>
+ <p><strong>La valeur H correspond à la teinte (<em>hue</em>) </strong>et est représentée comme un angle {{cssxref("&lt;angle&gt;")}} sur le cercle des couleurs. Lorsque la valeur est écrite sans unité, elle est considérée comme une valeur exprimée en degré. Par définition, <strong>le rouge correspond à 0 et 360</strong> et les autres couleurs évoluent sur le cercle. <strong>Vert correspond à 120 et bleu à 240</strong>. La valeur se comporte comme un angle et « tournera en boucle » avec une même mesure de couleur qui peut avoir différentes valeurs (par exemple -120 sera équivalent à 240 et 480 sera équivalent à 120).</p>
+
+ <p><strong>La valeur S correspond à la saturation</strong> (<em>saturation</em>) et <strong>la valeur L correspond à la clarté (<em>lightness</em>)</strong>, ces deux valeurs sont représentées par des pourcentages. Pour la saturation, avec <code>100%</code> l'image sera complètement saturée et avec <code>0%</code>, l'image sera en nuances de gris. Pour la clarté, <code>100%</code> correspondra à du blanc et <code>0%</code> à du noir. <code>50%</code> agira comme une clarté « normale ».</p>
+
+ <p><strong>La valeur A</strong> (canal alpha) peut être un nombre (type {{cssxref("&lt;number&gt;")}} entre 0 et 1 ou un pourcentage (type {{cssxref("&lt;percentage&gt;")}} (la valeur <code>100%</code> correspond alors à la valeur numérique 1 : opacité complète).</p>
+ </dd>
+ <dt>Notation fonctionnelle : <code>hsl(H S L[ / A])</code> ou <code>hsla(H S L / A)</code></dt>
+ <dd>
+ <p>Le module CSS Colors Level 4 ajoute la prise en charge de la notation fonctionnelle avec les espaces comme séparateur.</p>
+ </dd>
+</dl>
+
+<h4 id="Exemples_3">Exemples</h4>
+
+<h5 id="HSL">HSL</h5>
+
+<pre class="brush: css" style="text-shadow: rgba(255,255,255,0.4) -1px -1px;">hsl(0,  100%,50%)   /* red */
+hsl(30, 100%,50%)
+hsl(60, 100%,50%)
+hsl(90, 100%,50%)
+hsl(120,100%,50%)   /* green */
+hsl(150,100%,50%)
+hsl(180,100%,50%)
+hsl(210,100%,50%)
+hsl(240,100%,50%)   /* blue */
+hsl(270,100%,50%)
+hsl(300,100%,50%)
+hsl(330,100%,50%)
+hsl(360,100%,50%)   /* red */
+
+hsl(120,100%,25%)   /* dark green */
+hsl(120,100%,50%)   /* green */
+hsl(120,100%,75%)   /* light green */
+
+hsl(120,100%,50%)   /* green */
+hsl(120, 67%,50%)
+hsl(120, 33%,50%)
+hsl(120,  0%,50%)
+
+hsl(120, 60%,70%)   /* pastel green */
+
+/* syntaxe avec les espaces */
+hsl(120 60% 70%) /* pastel green */
+
+/* Valeur d'angle */
+/* on peut également utiliser les unités */
+/* rad, grad, turn */
+hsl(120deg 60% 70%) /* pastel green */
+
+/* Valeur alpha optionnelle */
+hsl(240,100%,50%,0.05)   /* 5% opaque blue */
+hsl(240,100%,50%,5%)     /* 5% opaque blue with percentage value for alpha */
+hsl(240 100% 50% / 0.05) /* 5% opaque blue */
+hsl(240 100% 50% / 5%)   /* 5% opaque blue with percentage value for alpha */
+</pre>
+
+<h5 id="HSLa">HSLa</h5>
+
+<pre class="brush: css" style="text-shadow: rgba(255,255,255,0.4) -1px -1px;">hsla(240,100%,50%,0.05)  /* 5% opaque blue */
+hsla(240,100%,50%, 0.4)  /* 40% opaque blue */
+hsla(240,100%,50%, 0.7)  /* 70% opaque blue */
+hsla(240,100%,50%,   1)  /* full opaque blue */
+
+/* syntaxe avec un espace */
+hsla(240 100% 50% / 0.05)/* 5% opaque blue */
+
+/* valeur en pourcentage pour l'alpha */
+hsla(240 100% 50% / 5%)/* 5% opaque blue */
+
+/* valeur d'angle pour la teinte */
+/* les unités rad, grad et turn*/
+/* sont également acceptées */
+hsla(240deg 100% 50% / 5%)/* 5% opaque blue */
+hsla(240deg,100%,50%, 0.4) /* 40% opaque blue */</pre>
+
+<h3 id="Couleurs_système">Couleurs système</h3>
+
+<p>Tous les systèmes ne prennent pas en charges toutes les couleurs système. Cet usage est déprécié pour les pages web publiques (cf. ci-après le tableau des spécifications).</p>
+
+<dl style="font: small Tahoma,'Liberation Sans','Nimbus Sans L',sans-serif; border: 1px solid powderblue; padding: 0.5em 0pt 0.5em 0.5em; -moz-column-rule: 1px solid powderblue; -moz-column-width: 15em; background: #eee; -webkit-columns: 15em; -webkit-column-rule: 1px solid powderblue; columns: 17em; column-rule: 1px solid powderblue;">
+ <dt>ActiveBorder</dt>
+ <dd>La bordure de la fenêtre active.</dd>
+ <dt>ActiveCaption</dt>
+ <dd>La légende de la fenêtre active. Devrait être utilisé avec <code>CaptionText</code> comme couleur de premier-plan.</dd>
+ <dt>AppWorkspace</dt>
+ <dd>La couleur d'arrière-plan d'une interface avec plusieurs documents.</dd>
+ <dt>Background</dt>
+ <dd>L'arrière-plan du bureau.</dd>
+ <dt>ButtonFace</dt>
+ <dd>La couleur d'arrière-plan visible (qui fait face à l'utilisateur) pour les éléments qui sont en 3D avec une bordure qui les entoure. Devrait être utilisée avec <code>ButtonText</code> comme couleur de premier-plan.</dd>
+ <dt>ButtonHighlight</dt>
+ <dd>La couleur de la bordure faisant face à la source de lumière pour les éléments qui apparaissent en 3D à cause d'une bordure autour.</dd>
+ <dt>ButtonShadow</dt>
+ <dd>La couleur de la bordure éloignée de la source de lumière pour les éléments qui apparaissent en 3D à cause d'une bordure autour..</dd>
+ <dt>ButtonText</dt>
+ <dd>La couleur du texte sur les bouttons. Devrait être utilisée avec <code>ButtonFace</code> ou <code>ThreeDFace</code> comme couleur d'arrière-plan.</dd>
+ <dt>CaptionText</dt>
+ <dd>La couleur du texte dans les légendes, la couleur des boîtes redimensionnables et de la flèche de l'ascenseur. Devrait être utilisée avec <code>ActiveCaption</code> comme couleur d'arrière-plan.</dd>
+ <dt>GrayText</dt>
+ <dd>Texte (désactivé) en gris.</dd>
+ <dt>Highlight</dt>
+ <dd>La couleur des éléments sélectionnés dans un contrôle. Devrait être utilisé avec <code>HighlightText</code> comme couleur de premier-plan.</dd>
+ <dt>HighlightText</dt>
+ <dd>La couleur du texte des éléments sélectionnés dans un contrôle. Devrait être utilisée avec <code>Highlight</code> comme couleur d'arrière-plan.</dd>
+ <dt>InactiveBorder</dt>
+ <dd>La couleur de la bordure d'une fenêtre inactive.</dd>
+ <dt>InactiveCaption</dt>
+ <dd>La couleur de la légende de fenêtre inactive. Devrait être utilisée avec <code>InactiveCaptionText</code> comme couleur de premier-plan.</dd>
+ <dt>InactiveCaptionText</dt>
+ <dd>La couleur du texte pour une légende inactive. Devrait être utilisée avec <code>InactiveCaption</code> comme couleur d'arrière-plan.</dd>
+ <dt>InfoBackground</dt>
+ <dd>La couleur d'arrière-plan pour les bulles d'informations. Devrait être utilisée avec <code>InfoText</code> comme couleur de premier-plan.</dd>
+ <dt>InfoText</dt>
+ <dd>La couleur du texte pour les bulles d'informations. Devrait être utilisée avec <code>InfoBackground</code> comme couleur d'arrière-plan.</dd>
+ <dt>Menu</dt>
+ <dd>La couleur d'arrière-plan du menu. Devrait être utilisée avec <code>MenuText</code> ou <code>-moz-MenuBarText</code> comme couleur de premier-plan.</dd>
+ <dt>MenuText</dt>
+ <dd>La couleur du texte dans les menus. Devrait être utilisée avec <code>Menu</code> comme couleur d'arrière-plan.</dd>
+ <dt>Scrollbar</dt>
+ <dd>La couleur d'arrière-plan de la barre de défilement (ascenseur).</dd>
+ <dt>ThreeDDarkShadow</dt>
+ <dd>La couleur de la bordure la plus sombre (généralement la bordure extérieure) éloignée de la source de lumière lorsque deux bordures concentriques sont utilisées pour générer un effet 3D.</dd>
+ <dt>ThreeDFace</dt>
+ <dd>La couleur d'arrière-plan pour les éléments qui apparaissent en 3D grâce à des bordures concentriques. Devrait être utilisée avec <code>ButtonText</code> comme couleur de premier-plan.</dd>
+ <dt>ThreeDHighlight</dt>
+ <dd>La couleur de la bordure la plus claire (généralement la bordure extérieure) proche de la source de lumière lorsque deux bordures concentriques sont utilisées pour générer un effet 3D.</dd>
+ <dt>ThreeDLightShadow</dt>
+ <dd>La couleur de la bordure la plus sombre (généralement la bordure intérieure) proche de la source de lumière lorsque deux bordures concentriques sont utilisées pour générer un effet 3D.</dd>
+ <dt>ThreeDShadow</dt>
+ <dd>La couleur de la bordure la plus claire (généralement la bordure intérieure) lorsque deux bordures concentriques sont utilisées pour générer un effet 3D.</dd>
+ <dt>Window</dt>
+ <dd>La couleur d'arrière-plan de la fenêtre. Devrait être utilisée avec la couleur <code>WindowText</code> en premier plan.</dd>
+ <dt>WindowFrame</dt>
+ <dd>La couleur du cadre de la fenêtre.</dd>
+ <dt>WindowText</dt>
+ <dd>La couleur du texte dans les fenêtres. Devrait être utilisée avec la couleur <code>Window</code> en arrière-plan.</dd>
+</dl>
+
+<h3 id="Ajouts_propres_à_Mozilla_pour_les_couleurs_système">Ajouts propres à Mozilla pour les couleurs système</h3>
+
+<dl style="font: small Tahoma,'Liberation Sans','Nimbus Sans L',sans-serif; border: 1px solid powderblue; padding: 0.5em 0 0.5em 0.5em; -moz-column-rule: 1px solid powderblue; -moz-column-width: 17em; background: #eee; -webkit-columns: 17em; -webkit-column-rule: 1px solid powderblue; columns: 17em; column-rule: 1px solid powderblue;">
+ <dt>-moz-ButtonDefault</dt>
+ <dd>La couleur de la bordure autour des boutons représentant l'action par défaut d'une boîte de dialogue.</dd>
+ <dt>-moz-ButtonHoverFace</dt>
+ <dd>La couleur d'arrière-plan d'un bouton survolé par le pointeur (qui serait <code>ThreeDFace</code> ou <code>ButtonFace</code> lorsque le pointeur n'est pas sur le bouton). Devrait être utilisée avec <code>-moz-ButtonHoverText</code> comme couleur de premier-plan.</dd>
+ <dt>-moz-ButtonHoverText</dt>
+ <dd>La couleur du texte d'un bouton survolé par le pointeur (qui serait ButtonText lorsque le pointeur n'est pas sur le bouton). Devrait être utilisée avec<code>-moz-ButtonHoverFace</code> comme couleur d'arrière-plan.</dd>
+ <dt>-moz-CellHighlight</dt>
+ <dd>La couleur d'arrière-plan pour un élément sélectionné dans un widget arborescent. Devrait être utilisée avec <code>-moz-CellHighlightText</code> comme couleur de premier-plan. Voir aussi <code>-moz-html-CellHighlight</code>.</dd>
+ <dt>-moz-CellHighlightText</dt>
+ <dd>La couleur du texte pour un élément sélectionné dans un widget arborescent. Devrait être utilisée avec <code>-moz-CellHighlight</code> comme couleur d'arrière-plan. Voir aussi <code>-moz-html-CellHighlightText</code>.</dd>
+ <dt>-moz-Combobox</dt>
+ <dd>{{Gecko_minversion_inline("1.9.2")}} La couleur d'arrière-plan pour les listes déroulantes. Devrait être utilisée avec <code>-moz-ComboboxText</code> comme couleurs de premier-plan. Pour les versions antérieures à 1.9.2, on utilisera <code>-moz-Field</code> à la place.</dd>
+ <dt>-moz-ComboboxText</dt>
+ <dd>{{Gecko_minversion_inline("1.9.2")}} La couleur du texte pour les listes déroulantes. Devrait être utilisée avec <code>-moz-Combobox</code> comme couleur d'arrière-plan. Pour les versions antérieures à 1.9.2, on utilisera <code>-moz-FieldText</code> à la place.</dd>
+ <dt>-moz-Dialog</dt>
+ <dd>La couleur d'arrière-plan pour les boîtes de dialogue. Devrait être utilisée avec <code>-moz-DialogText</code> comme couleur de premier-plan.</dd>
+ <dt>-moz-DialogText</dt>
+ <dd>La couleur du texte pour les boîtes de dialogue. Devrait être utilisée avec <code>-moz-Dialog</code> comme couleur d'arrière-plan.</dd>
+ <dt>-moz-dragtargetzone</dt>
+ <dt>-moz-EvenTreeRow</dt>
+ <dd>{{gecko_minversion_inline("1.9")}} La couleur d'arrière-plan pour les lignes numérotées paires d'un arbre. Devrait être utilisée avec<code>-moz-FieldText</code> comme couleur de premier-plan. Pour les versions de Gecko avant 1.9, on utilisera <code>-moz-Field</code>. Voir aussi <code>-moz-OddTreeRow</code>.</dd>
+ <dt>-moz-Field</dt>
+ <dd>La couleur d'arrière-plan pour les champs texte. Devrait être utilisée avec <code>-moz-FieldText</code> comme couleur de premier-plan.</dd>
+ <dt>-moz-FieldText</dt>
+ <dd>La couleur du texte pour les champs texte. Devrait être utilisée avec <code>-moz-Field</code>, <code>-moz-EvenTreeRow</code>, ou <code>-moz-OddTreeRow</code> comme couleur d'arrière-plan.</dd>
+ <dt>-moz-html-CellHighlight</dt>
+ <dd>{{gecko_minversion_inline("1.9")}} La couleur d'arrière-plan pour les éléments sélectionnés dans un élément HTML {{HTMLElement("select")}}. Devrait être utilisée avec <code>-moz-html-CellHighlightText</code> comme couleur de premier-plan. Avant Gecko 1.9, on utilisera <code>-moz-CellHighlight</code>.</dd>
+ <dt>-moz-html-CellHighlightText</dt>
+ <dd>{{gecko_minversion_inline("1.9")}} La couleur du texte pour les éléments sélectionnés dans un élément HTML {{HTMLElement("select")}}. Devrait être utilisée avec <code>-moz-html-CellHighlight</code> comme couleur d'arrière-plan. Avant Gecko 1.9, on utilisera <code>-moz-CellHighlightText</code>.</dd>
+ <dt>-moz-mac-accentdarkestshadow</dt>
+ <dt>-moz-mac-accentdarkshadow</dt>
+ <dt>-moz-mac-accentface</dt>
+ <dt>-moz-mac-accentlightesthighlight</dt>
+ <dt>-moz-mac-accentlightshadow</dt>
+ <dt>-moz-mac-accentregularhighlight</dt>
+ <dt>-moz-mac-accentregularshadow</dt>
+ <dt>-moz-mac-chrome-active</dt>
+ <dd>{{Gecko_minversion_inline("1.9.1")}}</dd>
+ <dt>-moz-mac-chrome-inactive</dt>
+ <dd>{{Gecko_minversion_inline("1.9.1")}}</dd>
+ <dt>-moz-mac-focusring</dt>
+ <dt>-moz-mac-menuselect</dt>
+ <dt>-moz-mac-menushadow</dt>
+ <dt>-moz-mac-menutextselect</dt>
+ <dt>-moz-MenuHover</dt>
+ <dd>La couleur d'arrière-plan pour les éléments de menu survolés. Généralement semblable à <code>Highlight</code>. Devrait être utilisée avec <code>-moz-MenuHoverText</code> ou <code>-moz-MenuBarHoverText</code> comme couleur de premier-plan.</dd>
+ <dt>-moz-MenuHoverText</dt>
+ <dd>La couleur du texte pour les éléments de menu survolés. Généralement similaire à <code>HighlightText</code>. Devrait être utilisée avec <code>-moz-MenuHover</code> comme couleur d'arrière-plan.</dd>
+ <dt>-moz-MenuBarText</dt>
+ <dd>{{Gecko_minversion_inline("1.9.2")}} La couleur du texte dans les barres de menu. Généralement similaire à <code>MenuText</code>. Devrait être utilisée avec <code>Menu</code> comme couleur d'arrière-plan.</dd>
+ <dt>-moz-MenuBarHoverText</dt>
+ <dd>La couleur du texte pour les éléments survolés dans les barres de menu, généralement similaire à <code>-moz-MenuHoverText</code>. Devrait être utilisée avec <code>-moz-MenuHover</code> comme couleur d'arrière-plan.</dd>
+ <dt>-moz-nativehyperlinktext</dt>
+ <dd>{{Gecko_minversion_inline("1.9.1")}} La couleur par défaut de la plate-forme pour les hyperliens.</dd>
+ <dt>-moz-OddTreeRow</dt>
+ <dd>{{gecko_minversion_inline("1.9")}} La couleur d'arrière-plan pour les lignes numérotées impaires d'un arbre. Devrait être utilisée avec<code>-moz-FieldText</code> comme couleur de premier-plan. Pour les versions de Gecko avant 1.9, on utilisera <code>-moz-Field</code>. Voir aussi <code>-moz-EvenTreeRow</code>.</dd>
+ <dt>-moz-win-accentcolor</dt>
+ <dd>{{gecko_minversion_inline("56")}} Utilisée pour accéder à la couleur d'accentuation de Windows 10 pour les menus, la barre de tâches, les barres de titre.</dd>
+ <dt>-moz-win-accentcolortext</dt>
+ <dd>{{gecko_minversion_inline("56")}} Utilisée pour accéder à la couleur d'accentuation de Windows 10 uttilisée pour le texte des menus, de la barre de tâches et des barres de titre.</dd>
+ <dt>-moz-win-communicationstext</dt>
+ <dd>{{gecko_minversion_inline("1.9")}} Devrait être utilisée comme couleur pour les textes des objets pour lesquels <code>{{cssxref("-moz-appearance")}}: -moz-win-communications-toolbox;</code>.</dd>
+ <dt>-moz-win-mediatext</dt>
+ <dd>{{gecko_minversion_inline("1.9")}} Devrait être utilisée comme couleur pour les textes des objets pour lesquels <code>{{cssxref("-moz-appearance")}}: -moz-win-media-toolbox</code>.</dd>
+</dl>
+
+<h3 id="Ajout_de_Mozilla_pour_les_couleurs_liées_aux_préférences">Ajout de Mozilla pour les couleurs liées aux préférences</h3>
+
+<dl style="font: small Tahoma,'Liberation Sans','Nimbus Sans L',sans-serif; border: 1px solid powderblue; padding: 0.5em 0 0.5em 0.5em; background: #eee;">
+ <dt>-moz-activehyperlinktext</dt>
+ <dd>La couleur choisie par l'utilisateur pour le texte des liens actifs. Devrait être utilisée avec la couleur d'arrière-plan par défaut du document.</dd>
+ <dt>-moz-default-background-color</dt>
+ <dd>{{Gecko_minversion_inline("5.0")}} La couleur choisie par l'utilisateur pour la couleur d'arrière-plan du document.</dd>
+ <dt>-moz-default-color</dt>
+ <dd>{{Gecko_minversion_inline("5.0")}} La couleur choisie par l'utilisateur pour la couleur du texte.</dd>
+ <dt>-moz-hyperlinktext</dt>
+ <dd>La couleur choisie par l'utilisateur pour le texte des liens non visités. Devrait être utilisée avec la couleur d'arrière-plan par défaut du document.</dd>
+ <dt>-moz-visitedhyperlinktext</dt>
+ <dd>La couleur choisie par l'utilisateur pour le texte des liens visités. Devrait être utilisée avec la couleur d'arrière-plan par défaut du document.</dd>
+</dl>
+
+<h2 id="Interpolation">Interpolation</h2>
+
+<p>Les valeurs de type <code>&lt;color&gt;</code> peuvent être interpolées afin de créer des animations ou des dégradés (type <code>&lt;gradient&gt;</code>). Dans ce cas, elles sont interpolées via chacune de leurs composantes rouge, verte, bleue et chacune de ces coordonnées est gérée comme un nombre réel flottant. L'interpolation des couleurs est appliquée dans <a class="external" href="https://www.gimp.org/docs/plug-in/appendix-alpha.html">l'espace de couleurs alpha sRGBA prémultiplié</a> afin d'empêcher des tons de gris d'apparaître. Pour les animations, la vitesse de l'interpolation est définie selon <a href="/fr/docs/Web/CSS/timing-function">la fonction de temporisation</a> associée à l'animation.</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>La recommandation du W3C : <a class="external" href="https://www.w3.org/TR/WCAG/#visual-audio-contrast">WCAG 2.0</a> conseille vivement aux auteurs de ne pas utiliser la couleur comme le seul moyen de transmettre une information, une action ou un résultat. Certains utilisateurs peuvent rencontrer des difficultés à distinguer les couleurs. Bien entendu, cette recommandation ne vise pas à interdire l'utilisation des couleurs, elle indique simplement que ce ne doit pas être le seul moyen de fournir une information (voir l'article sur <a href="/fr/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">Ies couleurs et le contraste</a> pour plus d'informations).</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Colors', '#colorunits', '&lt;color&gt;')}}</td>
+   <td>{{Spec2('CSS4 Colors')}}</td>
+   <td>Ajout de la couleur <code>rebeccapurple</code>, de la notation hexadécimale sur quatre chiffres (<code>#RGBA</code>) et sur huit chiffres (<code>#RRGGBBAA</code>). <code>rgba()</code> et <code>hsla()</code> sont désormais synonymes de <code>rgb()</code> et <code>hsl()</code>, les paramètres des fonctions peuvent être séparés par des espaces plutôt que ds virgules, les valeurs de transparence (alpha) peuvent être exprimées en pourcentages et les valeurs de teinte avec un angle.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Colors', '#colorunits', '&lt;color&gt;')}}</td>
+   <td>{{Spec2('CSS3 Colors')}}</td>
+   <td>Les couleurs système sont désormais dépréciée. Les couleurs SVG sont ajoutées ainsi que les notations fonctionnelles <code>rgba()</code>, <code>hsl()</code>, <code>hsla()</code>.</td>
+  </tr>
+  <tr style="vertical-align: top;">
+   <td style="vertical-align: top;">{{SpecName('CSS2.1', 'syndata.html#value-def-color', '&lt;color&gt;')}}</td>
+   <td style="vertical-align: top;">{{Spec2('CSS2.1')}}</td>
+   <td style="vertical-align: top;">Ajout de la couleur <code>orange</code> et des couleurs système.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">{{SpecName('CSS1', '#color-units', '&lt;color&gt;')}}</td>
+   <td style="vertical-align: top;">{{Spec2('CSS1')}}</td>
+   <td style="vertical-align: top;">Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.color")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("opacity")}}</li>
+ <li>{{cssxref("color")}}</li>
+ <li>{{cssxref("background-color")}}</li>
+ <li>{{cssxref("border-color")}}</li>
+ <li>{{cssxref("outline-color")}}</li>
+ <li>{{cssxref("text-shadow")}}</li>
+ <li>{{cssxref("box-shadow")}}</li>
+</ul>
diff --git a/files/fr/web/css/type_position/index.html b/files/fr/web/css/type_position/index.html
new file mode 100644
index 0000000000..03ddd68285
--- /dev/null
+++ b/files/fr/web/css/type_position/index.html
@@ -0,0 +1,129 @@
+---
+title: <position>
+slug: Web/CSS/Type_position
+tags:
+  - CSS
+  - Reference
+  - Type
+translation_of: Web/CSS/position_value
+---
+<div>{{CSSRef}}</div>
+
+<p>Le type de donnée CSS <strong><code>&lt;position&gt;</code></strong> définit une paire de coordonnées dans l'espace (bidimensionnel) afin de définir la position relative d'une boîte. La position finale obtenue, décrite par la valeur <code>&lt;position&gt;</code>, n'est pas nécessairement située à l'intérieur de la boîte de l'élément. Ce type de donnée est notamment utilisé avec la propriété {{cssxref("background-position")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>On peut définir un emplacement grâce à deux mots-clés avec chacun un décalage par rapport au côté correspondant à ce mot-clé. Un mot-clé représente un côté de la boîte ou la ligne du centre située entre les deux bords. Ce mot-clé sera <img alt="" src="https://mdn.mozillademos.org/files/12215/position_type.png" style="float: left; height: 230px; width: 362px;"><code>left</code>, <code>right</code>, <code>top</code>, <code>bottom</code> ou <code>center</code> (ce dernier représente le milieu entre les côtés droit et gauche ou le milieu entre les côtés haut et bas selon le contexte).</p>
+
+<p>Le décalage peut être une valeur relative, exprimée en pourcentages (valeur de type {{cssxref("&lt;percentage&gt;")}} ou une valeur absolue. Les valeurs positives décalent vers la droite ou vers le bas. Les valeurs négatives décalent dans l'autre sens (vers la gauche ou vers le haut).</p>
+
+<p>Si un seul décalage est indiqué, ce sera le décalage horizontal. Lorsqu'un seul décalage ou mot-clé est utilisé, la valeur par défaut pour l'autre axe est <code>center</code>.</p>
+
+<h2 id="Valeurs">Valeurs</h2>
+
+<pre class="brush:css">/* Syntaxe avec une valeur */
+<var>mot-clé</var>                  /* Le côté depuis lequel décaler, on centrera sur l'autre axe*/
+<var>&lt;length&gt;</var> ou <var>&lt;percentage&gt;</var> /* La position sur l'axe */
+
+/* Syntaxe avec deux valeurs */
+<var>mot-clé</var> <var>mot-clé</var>          /* Un mot-clé pour chaque direction, l'ordre n'est pas important */
+<var>mot-clé</var> <var>valeur</var>           /* La valeur indique le décalage par rapport au côté indiqué par le mot-clé */
+<em>valeur</em> <em>mot-clé</em>           /* Une valeur pour le décalage horizontal et un mot-clé pour le décalage vertical */
+<em>valeur</em> <em>valeur</em>            /* Une valeur pour chaque composante du décalage */
+
+/* Syntaxe avec quatre valeurs */
+<em>mot-clé</em> <em>valeur</em> <em>mot-clé</em> <em>valeur</em> /* Chaque valeur indique le décalage par rapport au mot-clé qui le précède */
+</pre>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">[
+ [ left | center | right ] || [ top | center | bottom ]
+|
+ [ left | center | right | &lt;length&gt; | &lt;percentage&gt; ]
+ [ top | center | bottom | &lt;length&gt; | &lt;percentage&gt; ]?
+|
+ [ [ left | right ] [ &lt;length&gt; | &lt;percentage&gt; ] ] &amp;&amp;
+ [ [ top | bottom ] [ &lt;length&gt; | &lt;percentage&gt; ] ]
+]
+</pre>
+
+<h2 id="Interpolation">Interpolation</h2>
+
+<p>Les valeurs des coordonnées en abscisses et en ordonnées sont interpolées indépendamment. La vitesse de l'interpolation est définie par la même fonction de temporisation ({{cssxref("&lt;timing-function&gt;")}}) et le point se déplacera donc sur une ligne.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: #FFEE99;
+  background-repeat: no-repeat;
+  width: 300px;
+  height: 80px;
+  margin-bottom: 12px;
+}
+
+.exemple{
+  background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 no-repeat;
+  // Ici un exemple de valeur &lt;position&gt;
+  background-position:  2.5cm bottom;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="exemple"&gt;Exemple&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', 120, 200)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#position', '&lt;position&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Renvoie aux deux définitions avec la contrainte suivante qui permet d'être cohérent : si {{SpecName('CSS3 Backgrounds')}} est pris en charge, c'est sa définition de  <code>&lt;position&gt;</code> qui doit être utilisée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#position', '&lt;position&gt;')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td><code>&lt;position&gt;</code> est défini de façon explicite et est étendu afin de pouvoir exprimer un décalage depuis n'importe quel côté.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-position', '&lt;position&gt;')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Autorise la combinaison d'un mot-clé et d'une valeur {{cssxref("&lt;length&gt;")}} ou {{cssxref("&lt;percentage&gt;")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#background-position', '&lt;position&gt;')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td><code>&lt;position&gt;</code> est défini de façon anonyme comme valeur de {{cssxref("background-position")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.types.position")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Valeurs_et_unités_CSS">Valeurs et unités en CSS</a></li>
+ <li><a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/Values_and_units">Tutoriel - Introduction aux valeurs et unités CSS</a></li>
+ <li>{{cssxref("background-position")}}</li>
+ <li>{{cssxref("radial-gradient","radial-gradient()")}}</li>
+ <li>{{cssxref("conic-gradient","conic-gradient()")}}</li>
+</ul>
diff --git a/files/fr/web/css/types_css/index.html b/files/fr/web/css/types_css/index.html
new file mode 100644
index 0000000000..28f95eeef4
--- /dev/null
+++ b/files/fr/web/css/types_css/index.html
@@ -0,0 +1,102 @@
+---
+title: Types CSS
+slug: Web/CSS/Types_CSS
+tags:
+  - Aperçu
+  - CSS
+  - CSS Data Type
+  - Reference
+  - Type
+translation_of: Web/CSS/CSS_Types
+---
+<div>{{CSSRef}}</div>
+
+<p>Le module <strong><em>CSS basic data types</em></strong> définit les différents types de données CSS qui permettent de définir les types de valeurs (mots-clés et unités) acceptées par les différentes propriétés et fonctions. Lorsqu'on utilise une notation formelle, les types de données sont représentés par un mot-clé entre chevrons (&lt; &gt;).</p>
+
+<div class="note">
+<p><strong>Note </strong><strong>:</strong> Les types de donnée CSS sont un type spécial de <a href="https://www.w3.org/TR/css3-values/#component-types">composant de type de valeur</a>.</p>
+</div>
+
+<h2 id="Référence">Référence</h2>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("&lt;angle&gt;")}}</li>
+ <li>{{cssxref("&lt;angle-percentage&gt;")}}</li>
+ <li>{{cssxref("&lt;angular-color-hint&gt;")}}</li>
+ <li>{{cssxref("&lt;angular-color-stop&gt;")}}</li>
+ <li>{{cssxref("&lt;attr-fallback&gt;")}}</li>
+ <li>{{cssxref("&lt;attr-name&gt;")}}</li>
+ <li>{{cssxref("&lt;basic-shape&gt;")}}</li>
+ <li>{{cssxref("&lt;blend-mode&gt;")}}</li>
+ <li>{{cssxref("&lt;calc-product&gt;")}}</li>
+ <li>{{cssxref("&lt;calc-sum&gt;")}}</li>
+ <li>{{cssxref("&lt;calc-value&gt;")}}</li>
+ <li>{{cssxref("&lt;color&gt;")}}</li>
+ <li>{{cssxref("&lt;color-stop&gt;")}}</li>
+ <li>{{cssxref("&lt;color-stop-angle&gt;")}}</li>
+ <li>{{cssxref("&lt;counter-style&gt;")}}</li>
+ <li>{{cssxref("&lt;custom-ident&gt;")}}</li>
+ <li>{{cssxref("&lt;dimension&gt;")}}</li>
+ <li>{{cssxref("&lt;filter-function&gt;")}}</li>
+ <li>{{cssxref("&lt;flex&gt;")}}</li>
+ <li>{{cssxref("&lt;frequency&gt;")}}</li>
+ <li>{{cssxref("&lt;frequency-percentage&gt;")}}</li>
+ <li>{{cssxref("&lt;gradient&gt;")}}</li>
+ <li>{{cssxref("&lt;ident&gt;")}}</li>
+ <li>{{cssxref("&lt;image&gt;")}}</li>
+ <li>{{cssxref("&lt;integer&gt;")}}</li>
+ <li>{{cssxref("&lt;length&gt;")}}</li>
+ <li>{{cssxref("&lt;length-percentage&gt;")}}</li>
+ <li>{{cssxref("&lt;number&gt;")}}</li>
+ <li>{{cssxref("&lt;number-percentage&gt;")}}</li>
+ <li>{{cssxref("&lt;percentage&gt;")}}</li>
+ <li>{{cssxref("&lt;position&gt;")}}</li>
+ <li>{{cssxref("&lt;quote&gt;")}}</li>
+ <li>{{cssxref("&lt;ratio&gt;")}}</li>
+ <li>{{cssxref("&lt;resolution&gt;")}}</li>
+ <li>{{cssxref("&lt;shape-box&gt;")}}</li>
+ <li>{{cssxref("&lt;shape-radius&gt;")}}</li>
+ <li>{{cssxref("&lt;string&gt;")}}</li>
+ <li>{{cssxref("&lt;time&gt;")}}</li>
+ <li>{{cssxref("&lt;time-percentage&gt;")}}</li>
+ <li>{{cssxref("&lt;timing-function&gt;")}}</li>
+ <li>{{cssxref("&lt;toggle-value&gt;")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+ <li>{{cssxref("&lt;type-or-unit&gt;")}}</li>
+ <li>{{cssxref("&lt;url&gt;")}}</li>
+ <li>{{cssxref("&lt;url-modifier&gt;")}}</li>
+ <li>{{cssxref("&lt;zero&gt;")}}</li>
+</ul>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Values')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Valeurs_et_unités_CSS">Unités et valeurs CSS</a></li>
+ <li><a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/Values_and_units">Introduction à CSS : les valeurs et les unités</a></li>
+</ul>
diff --git a/files/fr/web/css/unicode-bidi/index.html b/files/fr/web/css/unicode-bidi/index.html
new file mode 100644
index 0000000000..b7ef1080bf
--- /dev/null
+++ b/files/fr/web/css/unicode-bidi/index.html
@@ -0,0 +1,100 @@
+---
+title: unicode-bidi
+slug: Web/CSS/unicode-bidi
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/unicode-bidi
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>unicode-bidi</code></strong>, associée à la propriété {{cssxref("direction")}}, permet de gérer du texte bidirectionnel dans un document. Par exemple, si un bloc de texte contient à la fois du texte qui se lit de droite à gauche et du texte qui se lit de gauche à droite, l'agent utilisateur utilisera un algorithme Unicode complexe pour savoir comment afficher le texte. Cette propriété prend le pas sur l'algorithme et permet au développeur de contrôler l'intégration du texte.</p>
+
+<p>Les propriétés <code>unicode-bidi</code> et {{cssxref("direction")}} sont les deux seules propriétés qui ne sont pas impactées par {{cssxref("all")}}.</p>
+
+<div class="note"><strong>Note :</strong> Cette propriété est d'abord destinée aux concepteurs de DTD, les auteurs Web ne devraient pas surcharger sa valeur.</div>
+
+<pre class="brush:css no-line-numbers">/* Avec un mot-clé */
+unicode-bidi: normal;
+unicode-bidi: embed;
+unicode-bidi: isolate;
+unicode-bidi: bidi-override;
+unicode-bidi: isolate-override;
+unicode-bidi: plaintext;
+
+/* Valeurs globales */
+unicode-bidi: inherit;
+unicode-bidi: initial;
+unicode-bidi: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>L'élément n'ajoute pas de niveau de logique supplémentaire pour l'intégration et l'application de l'algorithme de bidirectionnalité. Pour les éléments en ligne, le réarrangement des éléments est fait entre les frontières des éléments.</dd>
+ <dt><code>embed</code></dt>
+ <dd>Si l'élément est en ligne, la valeur ajoute un niveau de logique supplémentaire pour l'intégration. La direction du niveau d'intégration est fournie par la propriété {{cssxref("direction")}}.</dd>
+ <dt><code>bidi-override</code></dt>
+ <dd>Pour les éléments en ligne, cela surcharge la directionnalité. Pour les conteneurs de bloc, cela crée une surcharge pour les éléments-fils qui sont en ligne et qui ne sont pas dans un autre conteneur de bloc. Cela signifie qu'au sein de l'élément, le réarrangement se fait strictement en fonction de la propriété {{cssxref("direction")}}, la partie implicite apportée par l'algorithme de bidirectionnalité est ignorée.</dd>
+ <dt><code>isolate</code></dt>
+ <dd>Ce mot-clé indique que la directionnalité du conteneur de l'élément devrait être calculée sans prendre en compte le contenu de cet élément. L'élément est donc <em>isolé</em> (<em>isolated</em> en anglais) de ses voisins. Lorsqu'on applique l'algorithme de résolution bidirectionnelle, l'élément conteneur le traite comme un ou plusieurs <code>U+FFFC Object Replacement Character</code> (autrement dit, comme une image).</dd>
+ <dt><code>isolate-override</code></dt>
+ <dd>Ce mot-clé applique l'isolation fournie par <code>isolate</code> au contenu environnant et applique la surcharge fournie par <code>bidi-override</code> au contenu intérieur.</dd>
+ <dt><code>plaintext</code>{{experimental_inline}}</dt>
+ <dd>Ce mot-clé permet de calculer la directionnalité de l'élément sans prendre en compte l'état de son parent ou la valeur de la propriété {{cssxref("direction")}}. La directionnalité est calculée en utilisant les règles P2 et P3 de l'algorithme de bidirectionnalité Unicode.<br>
+ Cette valeur permet d'affiché des données qui ont déjà été mises en forme par un outil ayant appliqué l'algorithme de bidirectionnalité Unicode.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">.bible-quote {
+  direction: rtl;
+  unicode-bidi: embed;
+}
+</pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Writing Modes', '#unicode-bidi', 'unicode-bidi')}}</td>
+   <td>{{Spec2('CSS3 Writing Modes')}}</td>
+   <td>Ajout des mots-clés <code>plaintext</code>, <code>isolate</code> et <code>isolate-override</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#propdef-unicode-bidi', 'unicode-bidi')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.unicode-bidi")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("direction")}}</li>
+</ul>
diff --git a/files/fr/web/css/unset/index.html b/files/fr/web/css/unset/index.html
new file mode 100644
index 0000000000..218d83528d
--- /dev/null
+++ b/files/fr/web/css/unset/index.html
@@ -0,0 +1,115 @@
+---
+title: unset
+slug: Web/CSS/unset
+tags:
+  - CSS
+  - Mot-clé
+  - Reference
+  - Web
+translation_of: Web/CSS/unset
+---
+<div>{{CSSRef}}</div>
+
+<p>Le mot-clé <strong><code>unset</code></strong> correspond à la combinaison des mots-clés {{cssxref("initial")}} et {{cssxref("inherit")}}. Comme les autres mots-clés globaux à tout CSS, il peut être utilisé pour n'importe quelle propriété CSS, y compris la propriété raccourcie {{cssxref("all")}}. Ce mot-clé <em>réinitialise</em> la propriété afin que sa valeur soit la valeur héritée depuis l'élément parent ou soit la valeur initiale (s'il n'y a pas d'héritage). Autrement dit, s'il y a de l'héritage, ce mot-clé se comporte comme <code>inherit</code>, sinon, il se comporte comme <code>initial</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Avec_color">Avec <code>color</code></h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">p {
+  color: red;
+}
+
+#sidebar p {
+  color: unset;
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;This text is red&lt;/p&gt;
+&lt;div id="sidebar"&gt;
+  &lt;p&gt;This text has the default color&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Avec_color', '100%', '120')}}</p>
+
+<h3 id="Avec_border">Avec <code>border</code></h3>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">div {
+  border: 1px solid green;
+}
+
+p {
+  border: 1px solid red;
+}
+
+.truc p {
+  border-color: unset;
+}</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;Ce texte a une bordure rouge.&lt;/p&gt;
+&lt;div class="toto"&gt;
+  &lt;p&gt;Ce texte a une bordure rouge&lt;/p&gt;
+&lt;/div&gt;
+&lt;div class="truc"&gt;
+  &lt;p&gt;Ce texte a une bordure noire (la valeur initiale, non héritée)&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample('Avec_border','100%','200')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Cascade', '#inherit-initial', 'unset')}}</td>
+   <td>{{Spec2('CSS4 Cascade')}}</td>
+   <td>Aucun changement depuis Level 3</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Cascade', '#inherit-initial', 'unset')}}</td>
+   <td>{{Spec2('CSS3 Cascade')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.types.global_keywords.unset")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les valeurs globales qui peuvent s'appliquer pour toutes les propriétés CSS :
+  <ul>
+   <li>{{cssxref("initial")}},</li>
+   <li>{{cssxref("inherit")}},</li>
+   <li>{{cssxref("unset")}},</li>
+   <li>{{cssxref("revert")}}.</li>
+  </ul>
+ </li>
+ <li>La propriété {{cssxref("all")}} est une propriété raccourcie qui permet de réinitialiser l'ensemble des propriétés avec leurs valeurs initiales, héritées, annulées ou indéfinies.</li>
+</ul>
diff --git a/files/fr/web/css/url()/index.html b/files/fr/web/css/url()/index.html
new file mode 100644
index 0000000000..d09e8c4434
--- /dev/null
+++ b/files/fr/web/css/url()/index.html
@@ -0,0 +1,184 @@
+---
+title: url()
+slug: Web/CSS/url()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Web
+  - url()
+translation_of: Web/CSS/url()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction CSS <code><strong>url</strong></code><strong><code>()</code></strong> est utilisée afin d'inclure un fichier. Le paramètre est une URL absolue, une URL relative ou un URI de donnée. La fonction <code><strong>url</strong></code><strong><code>()</code></strong> peut être utilisée comme paramètre d'une autre fonction comme {{cssxref('attr()')}}. Selon la propriété pour laquelle elle est utilisée, la ressource utilisée peut être une image, une police ou une feuille de stye.</p>
+
+<p>La notation fonctionelle <code>url()</code> correspond au type de donnée CSS <code><a href="/fr/docs/Web/CSS/url">&lt;url&gt;</a></code>.</p>
+
+<pre class="brush: css no-line-numbers">/* Utilisation simple */
+url(https://example.com/images/myImg.jpg);
+url(data:image/png;base64,iRxVB0…);
+url(myFont.woff);
+url(#IDofSVGpath);
+
+/* Propriétés utilisables */
+background-image: url("https://mdn.mozillademos.org/files/16761/star.gif");
+list-style-image: url('../images/bullet.jpg');
+content: url("pdficon.jpg");
+cursor: url(mycursor.cur);
+border-image-source: url(/media/diamonds.png);
+src: url('fantasticfont.woff');
+offset-path: url(#path);
+mask-image: url("masks.svg#mask1");
+
+/* Propriétés avec valeurs de recours */
+cursor: url(pointer.cur), pointer
+
+/* Propriétés raccourcies associées */
+background: url('https://mdn.mozillademos.org/files/16761/star.gif') bottom right repeat-x blue;
+border-image: url("/media/diamonds.png") 30 fill / 30px / 30px space;
+
+/* Utilisation comme paramètre d'une fonction CSS */
+background-image: cross-fade(20% url(first.png), url(second.png));
+mask-image: image(url(mask.png), skyblue, linear-gradient(rgba(0, 0, 0, 1.0), transparent);
+
+/* Utilisation avec plusieurs valeurs */
+content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg);
+
+/* Règles @ / at-rules */
+@document url("https://www.example.com/") { ... } {{Experimental_Inline}}
+@import url("https://www.example.com/style.css");
+@namespace url(http://www.w3.org/1999/xhtml);
+</pre>
+
+<p>Lorsque des URL relatives sont utilisées, elles sont relatives à l'URL de la feuille de style et pas à celle de la page web courante).</p>
+
+<p class="task-list-item">La fonction <code><strong>url</strong></code><strong><code>()</code></strong> peut être incluse comme valeur pour les propriétés {{cssxref('background-image')}}, {{cssxref('border-image')}}, {{cssxref('list-style-image')}}, {{cssxref('content' )}}, {{cssxref('cursor')}}, {{cssxref('border-image')}}, {{cssxref('border-image-source')}}, comme descripteur <code><a href="/fr/docs/Web/CSS/@font-face/src">src</a></code> pour une règle <code><a href="/fr/docs/Web/CSS/@font-face">@font-face</a></code> ou <code><a href="/fr/docs/Web/CSS/@counter-style/symbols">@counter-style/symbol</a></code></p>
+
+<p>Dans la spécification CSS de niveau 1, la notation fonctionnelle <code>url()</code> ne permettait que de décrire des URL. Avec la spécification de niveau 2, la définition d'<code>url()</code> a été étendue afin de décrire n'importe quel URI, y compris des URI de données. Le module de spécification <em>CSS Values and Units</em> de niveau 3 est revenu à la définition initiale plus stricte. Aussi, à l'heure actuelle et formellement <code>url()</code> ne permet que de décrire des valeurs <code>&lt;url&gt;</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>string</code></dt>
+ <dd>
+ <dl>
+  <dt><code>&lt;url&gt;</code></dt>
+  <dd>Une URL, relative ou absolue, qui pointe vers une ressource web à inclure ou un URI de donnée éventuellement encadrée entre quotes ou doubles quotes. Les quotes sont obligatoires si l'URL inclut des parenthèses, espaces, doubles quotes, etc. (sauf si ces caractères sont échappés) ou si l'adresse inclut des caractères de contrôle supérieurs à <code>0x7e</code>. Il n'est pas possible d'utiliser des doubles quotes dans une URL encadrée par des doubles quotes à moins de les échapper. De même, on ne peut pas utiliser une simple quote dans une URL délimitée par des simples quotes. Les déclarations suivantes seront équivalentes :
+  <pre class="syntaxbox">&lt;propriété_css&gt;: url("https://example.com/image.png")
+&lt;propriété_css&gt;: url('https://example.com/image.png')
+&lt;propriété_css&gt;: url(https://example.com/image.png)</pre>
+  </dd>
+ </dl>
+ </dd>
+ <dt><em>chemin</em></dt>
+ <dd>La référence à un identifiant d'une <a href="/en-US/docs/Web/SVG/Tutorial/Basic_Shapes">forme SVG</a> -- <code>circle</code>, <code>ellipse</code>, <code>line</code>, <code>path</code>, <code>polygon</code>, <code>polyline</code>, or <code>rect</code>. Ce sera alors la géométrie de la forme qui sera utilisée pour le chemin.</dd>
+</dl>
+
+<dl>
+ <dt><code>url-modifier</code> {{Experimental_Inline}}</dt>
+ <dd>À l'avenir, la fonction <code>url()</code> pourrait prendre en charge un modificateur tel qu'un identifiant ou une notation fonctionnelle qui modifierait le sens de l'URL. Cette valeur n'est pas complètement définie par la spécification et n'est pas prise en charge.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">url( <a href="/fr/docs/Web/CSS/string">&lt;string&gt;</a> <a href="/en-US/docs/">&lt;url-modifier&gt;</a>* )</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Propriété_content">Propriété <code>content</code></h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;Item 1&lt;/li&gt;
+  &lt;li&gt;Item 2&lt;/li&gt;
+  &lt;li&gt;Item 3&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css highlight[2]">li::after {
+  content: ' - ' url(https://mdn.mozillademos.org/files/16761/star.gif);
+}</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Propriété_content", "100%", 50)}}</p>
+
+<h3 id="URI_de_données">URI de données</h3>
+
+<div id="color-value">
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;div class="background"&gt;&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<div class="hidden">
+<pre class="brush: css">.background {
+  height: 100vh;
+}</pre>
+</div>
+
+<pre class="brush: css highlight[6]">.background {
+  background: yellow;
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='45'%3E%3Cpath d='M10 10h60' stroke='%2300F' stroke-width='5'/%3E%3Cpath d='M10 20h60' stroke='%230F0' stroke-width='5'/%3E%3Cpath d='M10 30h60' stroke='red' stroke-width='5'/%3E%3C/svg%3E");
+}</pre>
+</div>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("URI_de_données", "100%", 50)}}</p>
+
+<h2 id="Specifications" name="Specifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Values', '#urls', 'url()')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#urls', 'url()')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Aucune modification significative depuis la spécification de niveau 2 (première révision).</td>
+  </tr>
+  <tr>
+   <td>{{Specname('CSS2.1', 'syndata.html#uri', 'uri()')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Aucune modification significative depuis la spécification de niveau 1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#url', 'url()')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<div>{{Compat("css.types.url")}}</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("&lt;gradient&gt;")}}</li>
+ <li>{{cssxref("element()")}}</li>
+ <li>{{cssxref("_image","image()")}}</li>
+ <li>{{cssxref("image-set","image-set()")}}</li>
+ <li>{{cssxref("cross-fade")}}</li>
+</ul>
diff --git a/files/fr/web/css/url/index.html b/files/fr/web/css/url/index.html
new file mode 100644
index 0000000000..7b1b51043c
--- /dev/null
+++ b/files/fr/web/css/url/index.html
@@ -0,0 +1,108 @@
+---
+title: <url>
+slug: Web/CSS/url
+tags:
+  - CSS
+  - Reference
+  - Type
+translation_of: Web/CSS/url
+---
+<div>{{CSSRef}}</div>
+
+<p>Le type de donnée CSS <strong><code>&lt;url&gt;</code></strong> représente un pointeur vers une ressource (cela peut être une image, une police de caractères). Ce type de données ne possède pas de syntaxe propre et ne peut être utilisé qu'avec la notation fonctionnelle <code>url()</code>. Il est utilisé avec de nombreuses propriétés telles que {{cssxref("background-image")}}, {{cssxref("cursor")}}, {{cssxref("list-style")}}, etc.</p>
+
+<div class="note"><strong>Note : URI ou URL ?</strong><br>
+<br>
+Une <a href="https://fr.wikipedia.org/wiki/Uniform_Resource_Identifier">URI</a> est différente d'une <a href="https://fr.wikipedia.org/wiki/Uniform_Resource_Locator">URL</a>. Une URL décrit l'emplacement d'une ressource et l'URI décrit l'identifiant de la ressource. Une URI peut être un emplacement, une URL, un nom, une <a href="https://fr.wikipedia.org/wiki/Uniform_Resource_Name">URN</a> d'une ressource.<br>
+<br>
+Pour la spécification CSS de niveau 1, la notation fonctionnelle <code>url()</code> a été introduite afin de décrire des… URL, autrement dit des emplacements (un type de donnée <code>&lt;url&gt;</code> bien qu'il n'était pas défini explicitement).<br>
+<br>
+Pour la spécification CSS de niveau 2, la même notation fonctionnelle a été étendue afin de pouvoir décrire n'importe quelle URI, que ce soit une URL ou un URN. Cela a été une source d'ambiguïté car  <code>url()</code> était utilisée pour créer une valeur de type <code>&lt;uri&gt;</code>. En plus d'être source de confusion, les URN était très marginalement utilisées dans la pratique.<br>
+<br>
+Afin de remédier à cela, la spécification CSS de niveau 3 est revenue à la définition initiale avec cette fois-ci une définition explicite. La notation fonctionnelle <code>url()</code> représente donc une valeur de type <code>&lt;url&gt;</code> et plus une valeur de type <code>&lt;uri&gt;</code>.<br>
+<br>
+Cela dit, ces détails de sémantique ont peu d'impact pour les auteurs web voire pour l'implémentation du type de donnée par le moteur.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>L'URL peut être indiquée telle quelle comme argument de la fonction <code>url()</code>et encadrée, ou non, entre quotes ou doubles quotes. Il est possible d'utiliser des URL relatives. Celles-ci sont alors relatives à l'URL de la feuille de style (et non à l'URL de la page web).</p>
+
+<pre class="syntaxbox"> &lt;propriété_css&gt;:  url("http://monsite.exemple.com/curseur.png")
+ &lt;propriété_css&gt;: url("http://monsite.exemple.com/curseur.png")
+ &lt;propriété_css&gt;:  url(http://monsite.exemple.com/curseur.png)
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Les caractères de contrôle au-delà de 0x7e ne sont plus autorisés pour la forme sans quote à partir de Firefox 15. Voir {{bug(752230)}} pour plus d'informations.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">ul {
+  list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif")
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul&gt;
+    &lt;li&gt;Élément 1&lt;/li&gt;
+    &lt;li&gt;Élément 2&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Values', '#urls', '&lt;url&gt;')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#urls', '&lt;url&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Aucune modification significative.</td>
+  </tr>
+  <tr>
+   <td>{{Specname('CSS2.1', 'syndata.html#uri', '&lt;uri&gt;')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Aucune modification significative.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#url', '&lt;url&gt;')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.types.url")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("url()", "url()")}}</li>
+ <li>{{cssxref("&lt;gradient&gt;")}}</li>
+ <li>{{cssxref("element()")}}</li>
+ <li>{{cssxref("_image","image()")}}</li>
+ <li>{{cssxref("image-set","image-set()")}}</li>
+ <li>{{cssxref("cross-fade")}}</li>
+</ul>
diff --git a/files/fr/web/css/user-modify/index.html b/files/fr/web/css/user-modify/index.html
new file mode 100644
index 0000000000..da8d61685a
--- /dev/null
+++ b/files/fr/web/css/user-modify/index.html
@@ -0,0 +1,90 @@
+---
+title: user-modify
+slug: Web/CSS/user-modify
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/user-modify
+---
+<div>{{Non-standard_header}}{{CSSRef}}{{deprecated_header}}</div>
+
+<p>La propriété <strong><code>user-modify</code></strong> n'a aucun effet. Elle était initialement conçue pour déterminer si le contenu d'un élément peut être édité ou non par l'utilisateur.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+user-modify: read-only;
+user-modify: read-write;
+user-modify: write-only;
+
+/* Valeurs globales */
+user-modify: inherit;
+user-modify: initial;
+user-modify: unset;
+</pre>
+
+<div class="warning">
+<p><strong>Attention !</strong> Cette propriété a été remplacée par l'attribut {{HTMLAttrxref("contenteditable")}}.</p>
+</div>
+
+<p>Cette propriété est similaire à l'attribut HTML {{htmlattrxref("contenteditable")}}. Une propriété similaire : <code>user-focus</code> a été proposée <a class="external" href="https://www.w3.org/TR/2000/WD-css3-userint-20000216">pour des brouillons de la spécification CSS3 pour les interfaces utilisateur</a> mais fut rejetée par le groupe de travail. <strong>Elle a été désactivée de Firefox et n'a donc pas d'effet.</strong></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <code>user-modify</code> est définie grâce à un mot-clé parmi ceux de la liste ci-après.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>read-only</code></dt>
+ <dd>La valeur par défaut, le contenu ne peut pas être modifié.</dd>
+ <dt><code>read-write</code></dt>
+ <dd>L'utilisateur peut lire et modifier le contenu.</dd>
+ <dt><code>read-write-plaintext-only</code> {{Non-standard_inline}}</dt>
+ <dd>Identique à <code>read-write</code> mais la mise en forme du texte sera perdue.</dd>
+ <dt><code>write-only</code></dt>
+ <dd>L'utilisateur peut éditer le contenu mais ne peut pas le lire.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">.readwrite {
+  -moz-user-modify: read-write;
+  -webkit-user-modify: read-write;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html">&lt;div class="readwrite"&gt;L'utilisateur est capable de modifier ce texte.&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 300, 30)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p><code>user-modify</code> a <a class="external" href="https://www.w3.org/TR/2000/WD-css3-userint-20000216#user-modify" lang="en">été proposée pour la spécification CSS 3 sur les interfaces utilisateurs</a> (le brouillon de travail de février 2000 qui est désormais remplacé par le module <em>Basic User Interface</em> de <em>CSS 3</em>).</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.user-modify")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("-moz-user-focus")}}</li>
+ <li>{{cssxref("-moz-user-input")}}</li>
+ <li>{{cssxref("-moz-user-select")}}</li>
+</ul>
diff --git a/files/fr/web/css/user-select/index.html b/files/fr/web/css/user-select/index.html
new file mode 100644
index 0000000000..1024770ab4
--- /dev/null
+++ b/files/fr/web/css/user-select/index.html
@@ -0,0 +1,137 @@
+---
+title: user-select
+slug: Web/CSS/user-select
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/user-select
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <code><strong>user-select</strong></code> permet de contrôler l'opération de <a href="/fr/docs/Web/API/Selection">sélection</a>. Cela n'a aucun effet sur le contenu qui est chargé dans les éléments de l'interface ({{Glossary("Chrome", "chrome")}}), sauf pour les boîtes de texte.</p>
+
+<pre class="brush:css">/* Valeurs avec un mot-clé */
+user-select: none;
+user-select: auto;
+user-select: text;
+user-select: contain;
+user-select: all;
+
+/* Valeurs globales */
+user-select: inherit;
+user-select: initial;
+user-select: unset;
+
+/* Valeurs spécifiques à Mozilla */
+-moz-user-select: none;
+-moz-user-select: text;
+-moz-user-select: all;
+
+/* Valeurs spécifiques à WebKit */
+-webkit-user-select: none;
+-webkit-user-select: text;
+-webkit-user-select: all; /* Ne fonctionne pas pour Safari */
+
+/* Valeurs spécifiques à Microsoft */
+-ms-user-select: none;
+-ms-user-select: text;
+-ms-user-select: element;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>On ne pourra pas sélectionner le texte de l'élément et celui de ses descendants. Toutefois, l'objet {{domxref("Selection")}} pourra contenir ces éléments. À partir de Firefox 21, <code>none</code> se comporte comme <code>-moz-none</code> et la sélection peut donc être réactivée sur les éléments fils avec <code>-moz-user-select:text</code>.</dd>
+ <dt><code>auto</code></dt>
+ <dd>
+ <p>Le texte sera sélectionné avec les propriétés par défaut appliquées par l'agent utilisateur. La valeur calculée est déterminée de la façon suivante :</p>
+
+ <ul>
+  <li>Pour les pseudo-éléments <code>::before</code> et <code>::after</code>, la valeur calculée sera <code>none</code></li>
+  <li>Si l'élément est un élément éditable, la valeur calculée est <code>contain</code></li>
+  <li>Sinon, si la valeur calculée de  <code>user-select</code> pour l'élément parent est <code>all</code>, la valeur calculée sera <code>all</code></li>
+  <li>Sinon, si la valeur calculée de  <code>user-select</code> pour l'élément parent est <code>all</code>, la valeur calculée sera <code>none</code></li>
+  <li>Sinon, la valeur calculée est <code>text</code></li>
+ </ul>
+ </dd>
+ <dt><code>text</code></dt>
+ <dd>Le texte peut être sélectionné par l'utilisateur<code>.</code></dd>
+ <dt><code>all</code></dt>
+ <dd>Dans un éditeur HTML, si un double clic ou si un clic contextuel se produit sur les éléments fils, c'est la valeur de l'ancêtre le plus haut qui sera sélectionnée.</dd>
+ <dt><code>contain</code></dt>
+ <dt><code>element</code> {{non-standard_inline}} (alias spécifique à IE)</dt>
+ <dd>Uniquement supporté par Internet Explorer. Cela permet d'activer la sélection au sein de l'élément, celle-ci ne pourra pas « sortir » de cet élément.</dd>
+</dl>
+
+<div class="note">
+<p id="Formal_syntax"><strong>Note :</strong> CSS UI 4 <a href="https://github.com/w3c/csswg-drafts/commit/3f1d9db96fad8d9fc787d3ed66e2d5ad8cfadd05">a renommé <code>user-select: element</code> en <code>contain</code></a>.</p>
+</div>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.unselectable {
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.all {
+  -moz-user-select: all;
+  -webkit-user-select: all;
+  -ms-user-select: all;
+  user-select: all;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Vous devriez pouvoir sélectionner ce texte.&lt;/p&gt;
+&lt;p class="unselectable"&gt;Hop, vous ne pouvez pas sélectionner ce texte !&lt;/p&gt;
+&lt;p class="all"&gt;Cliquer une fois permettra de sélectionner l'ensemble du texte.&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 UI', '#propdef-user-select', 'user-select')}}</td>
+   <td>{{Spec2('CSS4 UI')}}</td>
+   <td>Définition initiale. <code>-webkit-user-select</code> est indiqué comme étant un alias déprécié de <code>user-select</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.user-select")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("::selection")}}</li>
+ <li>L'objet JavaScript {{domxref("Selection")}}.</li>
+ <li><code><a href="https://www.w3.org/TR/css-ui-4/#propdef-user-select">user-select</a></code> dans <a href="https://www.w3.org/TR/css-ui-4/">CSS Basic User Interface Module Level 4</a>.</li>
+</ul>
diff --git a/files/fr/web/css/using_css_custom_properties/index.html b/files/fr/web/css/using_css_custom_properties/index.html
new file mode 100644
index 0000000000..5f074cb779
--- /dev/null
+++ b/files/fr/web/css/using_css_custom_properties/index.html
@@ -0,0 +1,298 @@
+---
+title: Les variables CSS
+slug: Web/CSS/Using_CSS_custom_properties
+tags:
+  - CSS
+  - Guide
+  - Intermédiaire
+  - Web
+translation_of: Web/CSS/Using_CSS_custom_properties
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>Les propriétés personnalisées CSS</strong> (<em>custom properties</em> en anglais, aussi parfois appelés <strong>variables CSS</strong>) sont des entités définies par les développeurs ou les utilisateurs d'une page Web, contenant des valeurs spécifiques utilisables à travers le document. Elles sont initialisées avec des propriétés personnalisées (par exemple <strong><code>--main-color: black;</code></strong>) et accessibles en utilisant la notation spécifique {{cssxref("var", "var()")}} (par exemple : <strong><code>color: var(--main-color);</code></strong>).</p>
+
+<p>Des sites et applications web complexes peuvent avoir des feuilles de style où de nombreuses valeurs sont répétées. Ainsi, la même couleur pourra être utilisée à des centaines d'endroits où il faudra la mettre à jour si besoin. Les propriétés personnalisées permettent de stocker une valeur à un endroit puis de réutiliser cette valeur (on factorise ainsi le code).</p>
+
+<h2 id="Utilisation_simple">Utilisation simple</h2>
+
+<p>Voici comment on déclare une variable :</p>
+
+<pre class="brush:css; highlight:[2]">element {
+  --main-bg-color: brown;
+}
+</pre>
+
+<p>Et voici comment on l'utilise</p>
+
+<pre class="brush:css; highlight:[2]">element {
+  background-color: var(--main-bg-color);
+}
+</pre>
+
+<h2 id="Problématique">Problématique</h2>
+
+<p>Lors de l'élaboration de sites de grande envergure, leurs auteurs font parfois face à des soucis de maintenabilité. De grandes feuilles de styles sont utilisées et de nombreuses informations se répètent. Par exemple, maintenir un thème de couleurs à travers un document nécessite la réutilisation des valeurs des couleurs à plusieurs endroits dans les fichiers CSS. Modifier un thème, en changeant une couleur ou en le récrivant entièrement, devient alors une tâche complexe demandant de la précision, là où un simple trouver et remplacer ne suffit pas.</p>
+
+<p>Le problème peut s'aggraver en utilisant les <em>frameworks</em> CSS puisque modifier une couleur demande de modifier le framework lui-même. Les pré-processeurs comme <a href="https://lesscss.org/">LESS</a> ou <a href="https://sass-lang.com/">Sass</a> peuvent faciliter cette tâche, mais peuvent également complexifier le processus de création en ajoutant une étape de compilation. Les propriétés personnalisées permettent d'utiliser une des principales fonctionnalités des pré-processeurs, sans cette étape de compilation.</p>
+
+<p>Le deuxième avantage de ces variables vient du fait que le nom lui-même contient des informations sémantiques. Les fichiers CSS deviennent alors plus facile à lire et à comprendre : écrire <code>main-text-color</code> permet de mieux s'y retrouver au fur et à mesure de la lecture qu'une valeur hexadécimale comme <code>#00ff00</code>, surtout si la même couleur est utilisée dans un autre contexte.</p>
+
+<h2 id="Définition">Définition</h2>
+
+<p>Les propriétés personnalisées ont actuellement deux formes :</p>
+
+<ul>
+ <li>les variables, qui sont des associations entre un identifiant et une valeur utilisables à la place de n'importe quelle valeur normale, en utilisant la notation fonctionnelle <code>var()</code> : <code>var(--example-variable)</code> retourne la valeur de <code>--example-variable</code>.</li>
+ <li>les propriétés personnalisées, qui sont des propriétés spéciales notées <code>--*</code> où <code>*</code> représente le nom de la variable. Elles sont utilisées pour définir la valeur d'une variable donnée : <code>--example-variable: 20px;</code> est une déclaration en CSS, utilisant la propriété personnalisée <code>--*</code> pour initialiser la valeur de la variable CSS <code>--example-variable</code> à <code>20px</code>.</li>
+</ul>
+
+<div class="note"><strong>Note :</strong> Le préfixe de propriété personnalisée était noté <code>var-</code> dans les précédentes spécifications, mais a ensuite été changé pour <code>--</code>. Firefox 31 et supérieurs respectent cette nouvelle notation. ({{bug(985838)}})</div>
+
+<p>Les propriétés personnalisées sont similaires aux propriétés ordinaires. Elles sont sujettes à la cascade et héritent leur valeur de leur parent si elles ne sont pas redéfinies.</p>
+
+<h2 id="Premiers_pas_avec_les_propriétés_personnalisées_CSS">Premiers pas avec les propriétés personnalisées CSS</h2>
+
+<p>Commençons avec cette feuille CSS simple colorant les éléments de différentes classes avec la même couleur :</p>
+
+<div id="sample1">
+<pre class="brush:css; highlight:[3,20,26,32]">.un {
+  color: white;
+  background-color: brown;
+  margin: 10px;
+  width: 50px;
+  height: 50px;
+  display: inline-block;
+}
+
+.deux {
+  color: white;
+  background-color: black;
+  margin: 10px;
+  width: 150px;
+  height: 70px;
+  display: inline-block;
+}
+.trois {
+  color: white;
+  background-color: brown;
+  margin: 10px;
+  width: 75px;
+}
+.quatre {
+  color: white;
+  background-color: brown;
+  margin: 10px;
+  width: 100px;
+}
+
+.cinq {
+  background-color: brown;
+}
+
+</pre>
+
+<p>Appliquons-le à ce code HTML :</p>
+
+<pre class="brush:html">&lt;div&gt;
+    &lt;div class="un"&gt;Toto&lt;/div&gt;
+    &lt;div class="deux"&gt;Texte &lt;span class="cinq"&gt;- encore du texte&lt;/span&gt;&lt;/div&gt;
+    &lt;input class="trois"&gt;
+    &lt;textarea class="quatre"&gt;Lorem Ipsum&lt;/textarea&gt;
+&lt;/div&gt;
+</pre>
+
+<p>ce qui donne ceci :</p>
+
+<p>{{EmbedLiveSample("sample1",600,180)}}</p>
+
+<p>Remarquez la répétition dans le CSS. La couleur d'arrière-plan est définie à <code>brown</code> à plusieurs endroits. Certaines déclarations peuvent être faites plus haut dans la cascade et le problème se résoudra grâce à l'héritage. Mais pour des projets non-triviaux, cela n'est pas toujours possible. En déclarant une variable dans la pseudo-classe {{cssxref(":root")}}, un développeur CSS peut éviter certaines répétitions en utilisant cette variable.</p>
+</div>
+
+<div id="sample2">
+<pre class="brush:css; highlight:[2, 7, 24,30,36]">:root {
+  --main-bg-color: brown;
+}
+
+.un {
+  color: white;
+  background-color: var(--main-bg-color);
+  margin: 10px;
+  width: 50px;
+  height: 50px;
+  display: inline-block;
+}
+
+.deux {
+  color: white;
+  background-color: black;
+  margin: 10px;
+  width: 150px;
+  height: 70px;
+  display: inline-block;
+}
+.trois {
+  color: white;
+  background-color: var(--main-bg-color);
+  margin: 10px;
+  width: 75px;
+}
+.quatre {
+  color: white;
+  background-color: var(--main-bg-color);
+  margin: 10px;
+  width: 100px;
+}
+
+.cinq {
+  background-color: var(--main-bg-color);
+}
+
+</pre>
+
+<pre class="brush:html hidden">&lt;div&gt;
+    &lt;div class="un"&gt;Toto&lt;/div&gt;
+    &lt;div class="deux"&gt;Text &lt;span class="cinq"&gt;- more text&lt;/span&gt;&lt;/div&gt;
+    &lt;input class="trois"&gt;
+    &lt;textarea class="quatre"&gt;Lorem Ipsum&lt;/textarea&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Ce code donne le même résultat que précédemment mais permet de n'utiliser la propriété désirée qu'une seule fois.</p>
+
+<h2 id="Héritage_des_propriétés_personnalisées_et_valeurs_par_défaut">Héritage des propriétés personnalisées et valeurs par défaut</h2>
+
+<p>Il y a un héritage des propriétés personnalisées. Cela signifie que si une propriété n'est pas définie sur un élément, la valeur prise en compte sera celle utilisée pour la propriété de l'élément parent. Le fragment de document suivant :</p>
+
+<pre class="brush: html">&lt;div class="un"&gt;
+  &lt;div class="deux"&gt;
+    &lt;div class="trois"&gt;
+    &lt;/div&gt;
+    &lt;div class="quatre"&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+</div>
+
+<p>associé à cette feuille de style :</p>
+
+<pre class="brush: css">.deux {
+  --test: 10px;
+}
+
+.trois {
+  --test: 2em;
+}
+</pre>
+
+<p>Dans ce cas, les résultats de <code>var(--test)</code> seront :</p>
+
+<ul>
+ <li><code>10px</code> pour l'élément avec <code>class="deux"</code></li>
+ <li><code>2em</code> pour l'élément avec <code>class="trois"</code></li>
+ <li><code>10px</code> pour l'élément avec <code>class="quatre"</code> : la valeur est héritée depuis le parent</li>
+ <li><em>invalid value</em> pour l'élément avec <code>class="un"</code>, c'est la valeur par défaut utilisée pour les différentes propriétés personnalisées.</li>
+</ul>
+
+<p>Gardez à l'esprit qu'il s'agit de propriétés personnalisées et non de propriétés personnalisées réelles. La valeur est calculée là où elle est nécessaire, non stockée pour être utilisée dans d'autres règles. Par exemple, vous ne pouvez pas définir une propriété pour un élément et espérer l'extraire dans la règle du descendant d'un frère. La propriété est uniquement définie pour le sélecteur correspondant et ses descendants, comme tout CSS normal.</p>
+
+<p>Avec <code><a href="/fr/docs/Web/CSS/var()">var()</a></code> on peut définir plusieurs valeurs par défaut lorsque la variable donnée n'est pas définie. Cela peut s'avérer utile lorsqu'on travaille avec des éléments personnalisés (<em>Custom Elements</em>) et le <em>Shadow DOM</em>.</p>
+
+<p>Le premier argument passé à la fonction est le nom de la <a href="https://www.w3.org/TR/css-variables/#custom-property" title="CSS Custom Properties for Cascading Variables Module Level 1">propriété personnalisée</a> qui doit être substituée. Le deuxième argument, s'il est fourni, indique la valeur par défaut qui est utilisée lorsque la <a href="https://www.w3.org/TR/css-variables/#custom-property" title="CSS Custom Properties for Cascading Variables Module Level 1">propriété personnalisée</a> en question est invalide.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Attention, la valeur fournie comme valeur par défaut ne pourra pas être utilisée si le navigateur ne prend pas en charge les propriétés personnalisées CSS. Elle sera uniquement utilisée si la valeur précédente n'a pu être calculée ou si elle est invalide.</p>
+</div>
+
+<pre class="brush: css">.deux {
+  color: var(--my-var, red);
+  /* Red si --my-var n'est pas définie */
+}
+
+.trois {
+  background-color: var(--my-var, var(--my-background, pink));
+  /* rose (pink) si --my-var et --my-background ne sont pas définies */
+}
+
+// Suite invalide :
+.trois {
+  background-color: var(--my-var, --my-background, pink);
+}
+</pre>
+
+<div class="note">
+<p><strong>Note : </strong>La syntaxe pour la valeur de recours, comme celle des <a dir="ltr" href="https://www.w3.org/TR/css-variables/#custom-property" title="CSS Custom Properties for Cascading Variables Module Level 1">propriétés personnalisées</a>, permet d'utiliser une virgule. Ainsi, <code>var(--toto, red, blue)</code> définit une valeur de recours égale à <code>red, blue</code>, c'est-à-dire tout ce qui est écrit après la première virgule. Si la deuxième valeur est incorrecte, elle ne pourra pas être utilisée et la règle sera invalide.</p>
+
+<p>La syntaxe de la deuxième règle (sur <code>.trois</code>) permet d'utiliser une autre variable comme variable de secours et une autre valeur (<code>pink</code>) dans le cas où cette deuxième variable ne fonctionne pas.</p>
+</div>
+
+<div class="note">
+<p><strong>Note :</strong> Des problèmes de performances ont pu être observés<sup>[source ?] </sup> causant un rendu plus lent des pages car le navigateur doit analyser l'ensemble des variables pour voir si elles sont disponibles.</p>
+</div>
+
+<h2 id="Validité_et_valeurs">Validité et valeurs</h2>
+
+<p>Le concept classique de validité en CSS, lié à chaque propriété, n'est pas très utile en ce qui concerne les propriétés personnalisées. Quand la valeur d'une propriété personnalisée est lue, le navigateur ne sait pas à quel moment elle sera utilisée. Il doit donc considérer quasiment toutes les valeurs comme <em>valides</em>.</p>
+
+<p>Malheureusement, ces valeurs valides peuvent être utilisées, via la notation fonctionnelle <code>var()</code>, dans un contexte où cela n'aurait pas de sens. Les propriétés et variables personnalisées peuvent mener à des déclarations CSS invalides, conduisant à un nouveau concept de <em>valide lors de l'exécution</em>.</p>
+
+<h2 id="Gestion_des_variables_invalides">Gestion des variables invalides</h2>
+
+<p>Lorsque le navigateur analyse une substitution <code>var()</code> invalide, c'est la valeur initiale ou héritée de la propriété qui est utilisée. Par exemple :</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;La couleur initiale d'un paragraphe est noire.&lt;/p&gt; </pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">:root { --text-color: 16px; }
+p { color: blue; }
+p { color: var(--text-color); }
+</pre>
+
+<p>Comme on pourrait s'y attendre, le valeur applique la substitution aec <code>--text-color</code> à la place de <code>var(--text-color)</code> mais <code>16px</code> n'est pas une valeur valide pour {{cssxref("color")}}. Après la substitution, la déclaration n'a plus aucun sens. Le navigateur résoud ce problème en deux étapes :</p>
+
+<ol>
+ <li>Il vérifie si la propriété peut être héritée (ici <code>color</code>) : c'est bien le cas mais dans notre exemple <code>&lt;p&gt;</code> n'a aucun parent avec une couleur définie, il passe donc à l'étape suivante.</li>
+ <li>La valeur utilisée est <strong>la valeur initiale par défaut</strong>, pour <code>color</code>, c'est <code>black</code>.</li>
+</ol>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Gestion_des_valeurs_invalides')}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> La couleur du paragraphe ne sera pas bleue car une substitution invalide est remplacée par la valeur héritée ou la valeur initiale, pas par les valeurs provenant d'éventuelles autres règles.</p>
+
+<p>Si on avait directement écrit <code>color: 16px</code> (sans substitution), c'est alors la déclaration précédente qui aurait été utilisée.</p>
+</div>
+
+<h2 id="Manipulation_des_variables_en_JavaScript">Manipulation des variables en JavaScript</h2>
+
+<p>Il est possible d'utiliser les valeurs des propriétés personnalisés en JavaScript de la même façon que les propriétés standards.</p>
+
+<pre class="brush: js">// obtenir une variable à partir d'un style en ligne (dans un élément html)
+element.style.getPropertyValue("--ma-variable");
+
+// obtenir une variable par ailleurs
+getComputedStyle(element).getPropertyValue("--ma-variable");
+
+// définir une variable dans un style en ligne
+element.style.setProperty("--ma-variable", varJS + 4);</pre>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.custom-property")}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> Dans les versions antérieures de la spécification, le préfixe indiquant les propriétés personnalisées était <code>var-</code>. Ce préfixe a ensuite été modifié en <code>--</code>. et Firefox 31 et les versions ultérieures respectent cette spécification  (cf. {{bug(985838)}})</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("--*", "Les propriétés personnalisées")}}</li>
+</ul>
diff --git a/files/fr/web/css/utilisation_de_dégradés_css/index.html b/files/fr/web/css/utilisation_de_dégradés_css/index.html
new file mode 100644
index 0000000000..94a0fbcb67
--- /dev/null
+++ b/files/fr/web/css/utilisation_de_dégradés_css/index.html
@@ -0,0 +1,747 @@
+---
+title: Utilisation de dégradés CSS
+slug: Web/CSS/Utilisation_de_dégradés_CSS
+tags:
+  - Avancé
+  - CSS
+  - Guide
+translation_of: Web/CSS/CSS_Images/Using_CSS_gradients
+---
+<div>{{CSSRef}}</div>
+
+<p>Les <strong>dégradés CSS</strong> sont représentés par le type de donnée {{cssxref("&lt;gradient&gt;")}} qui est un sous-ensemble du type {{cssxref("&lt;image&gt;")}}. L'utilisation de dégradés CSS permet d'afficher des transitions douces entre deux couleurs ou plus. Il existe trois sortes de degradés : les dégradés linéaires (cf. {{cssxref("linear-gradient")}}, les dégradés radiaux (cf. {{cssxref("radial-gradient")}}) et les dégradés coniques (cf. {{cssxref("conic-gradient")}}).</p>
+
+<p>Les dégradés peuvent être répétés avec {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}} et {{cssxref("repeating-conic-gradient")}}.</p>
+
+<p>Les dégradés peuvent être utilisés à chaque endroit où on peut utiliser une image (par exemple les arrière-plans). En évitant d'utiliser des images pour ces effets, le temps de téléchargement et la bande passante utilisée sont réduits. En outre, comme le dégradé est généré par le navigateur, les objets concernés se comporteront mieux en cas de zoom et votre mise en page peut être ajustée de manière plus flexible.</p>
+
+<p>Dans cet article, nous verrons d'abord les dégradés linéaires et détaillerons les fonctionnalités associées avant de passer aux dégradés radiaux, coniques et à leurs formes répétées.</p>
+
+<h2 id="Dégradés_linéaires">Dégradés linéaires</h2>
+
+<p>Pour créer un dégradé linéaire, définissez un point de départ et une direction (sous la forme d'un angle) selon laquelle l'effet de dégradé sera appliqué.</p>
+
+<h3 id="Dégradés_linéaires_simples">Dégradés linéaires simples</h3>
+
+<p>Voici un dégradé linéaire qui commence au centre (horizontalement) et en haut (verticalement), du bleu vers le blanc.</p>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.linear-gradient {
+  background: linear-gradient(blue, white);
+}
+
+div {
+  width: 120px;
+  height: 120px;
+}</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="linear-gradient"&gt;&lt;/div&gt;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Dégradés_linéaires_simples",120,120)}}</p>
+
+<h3 id="Appliquer_un_dégradé_de_gauche_à_droite">Appliquer un dégradé de gauche à droite</h3>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">.linear-gradient {
+  background: linear-gradient(to right, blue, white);
+}
+
+div {
+  width: 120px;
+  height: 120px;
+}</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;div class="linear-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Appliquer_un_dégradé_de_gauche_à_droite",120,120)}}</p>
+
+<h3 id="Appliquer_un_dégradé_en_diagonale">Appliquer un dégradé en diagonale</h3>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css">.linear-gradient {
+  background: linear-gradient(to bottom right, blue, white);
+}
+
+div {
+  width: 200px;
+  height: 100px;
+}</pre>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;div class="linear-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<h4 id="Résultat_3">Résultat</h4>
+
+<p>{{EmbedLiveSample("Appliquer_un_dégradé_en_diagonale",200,100)}}</p>
+
+<h3 id="Utilisation_d’angles">Utilisation d’angles</h3>
+
+<p>Si aucun angle n'est spécifié, il sera déterminé automatiquement à partir de la position de départ. Si vous désirez un meilleur contrôle sur la direction du dégradé, vous pouvez définir cet angle précisément.</p>
+
+<h4 id="CSS_4">CSS</h4>
+
+<pre class="brush: css">.linear-gradient {
+  background: linear-gradient(70deg, blue, pink);
+}
+
+div {
+  width: 120px;
+  height: 120px;
+}</pre>
+
+<h4 id="HTML_4">HTML</h4>
+
+<pre class="brush: html">&lt;div class="linear-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<h4 id="Résultat_4">Résultat</h4>
+
+<p>{{EmbedLiveSample("Utilisation_d’angles",120,120)}}</p>
+
+<p>L'angle est spécifié entre une ligne verticale et la ligne de dégradé, dans le sens inverse des aiguilles d'une montre. Autrement dit, <code>0deg</code> crée un dégradé vertical de bas en haut, tandis que <code>90deg</code> génère un dégradé horizontal de la gauche vers la droite :</p>
+
+<p><img alt="linear_redangles.png" class="default internal" src="/files/3811/linear_red_angles.png"></p>
+
+<pre class="brush: css">background: linear-gradient(&lt;angle&gt;, red, white);</pre>
+
+<h2 id="Créer_des_effets_et_manipuler_les_couleurs">Créer des effets et manipuler les couleurs</h2>
+
+<h3 id="Utiliser_plus_de_deux_couleurs">Utiliser plus de deux couleurs</h3>
+
+<p>Les dégradés CSS ne sont pas limités à deux couleurs, il est possible d'en utiliser autant que souhaité :</p>
+
+<h4 id="CSS_5">CSS</h4>
+
+<pre class="brush: css">.linear-gradient {
+  background: linear-gradient(red, yellow, blue, orange);
+}
+
+div {
+  width: 120px;
+  height: 120px;
+}</pre>
+
+<h4 id="HTML_5">HTML</h4>
+
+<pre class="brush: html">&lt;div class="linear-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<h4 id="Résultat_5">Résultat</h4>
+
+<p>{{EmbedLiveSample("Utiliser_plus_de_deux_couleurs",120,120)}}</p>
+
+<h3 id="Arrêts_de_couleurs">Arrêts de couleurs</h3>
+
+<p>Les arrêts de couleurs sont des points sur la ligne de dégradé qui doivent avoir une couleur précise. Leur emplacement peut être spécifié sous la forme d'un pourcentage de la longueur de la ligne, ou d'une longueur absolue. Vous pouvez en spécifier autant que vous voulez pour obtenir l'effet désiré. Si vous spécifiez un pourcentage, <code>0%</code> indique le point de départ, et <code>100%</code> le point d'arrivée ; il est cependant possible d'utiliser des valeurs en dehors de cet intervalle si nécessaire pour obtenir l'effet désiré.</p>
+
+<h4 id="CSS_6">CSS</h4>
+
+<pre class="brush: css">.linear-gradient {
+  background: linear-gradient(to left, lime, lime 28px, red 77%, cyan);
+}
+
+div {
+  width: 120px;
+  height: 120px;
+}</pre>
+
+<h4 id="HTML_6">HTML</h4>
+
+<pre class="brush: html">&lt;div class="linear-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<h4 id="Résultat_6">Résultat</h4>
+
+<p>{{EmbedLiveSample("Arrêts_de_couleur",120,120)}}</p>
+
+<p>Notez que la première et la dernière couleur n'indiquent pas d'emplacement ; en conséquence les valeurs 0% et 100% sont assignées automatiquement. La couleur centrale indique un emplacement à 80%, ce qui la place proche du bas.</p>
+
+<h3 id="Utiliser_des_indications_de_couleurs">Utiliser des indications de couleurs</h3>
+
+<p>Par défaut, les dégradés passent linéairement d'une couleur à une autre. On peut également utiliser une indication afin de définir l'emplacement où la couleur médiane sera atteinte. Dans l'exemple qui suit, plutôt que d'attendre la moitié de la transition au milieu, on la place à 10% de l'axe.</p>
+
+<h4 id="CSS_7">CSS</h4>
+
+<pre class="brush: css">div {
+  width:120px;
+  height: 120px;
+  float: left;
+  margin-right: 10px;
+}
+
+.color-hint {
+  background: linear-gradient(blue, 10%, pink);
+}
+
+.simple-linear {
+  background: linear-gradient(blue, pink);
+}</pre>
+
+<h4 id="HTML_7">HTML</h4>
+
+<pre class="brush: html">&lt;div class="color-hint"&gt;&lt;/div&gt;
+&lt;div class="simple-linear"&gt;&lt;/div&gt;
+</pre>
+
+<h4 id="Résultat_7">Résultat</h4>
+
+<p>{{EmbedLiveSample("Utiliser_des_indications_de_couleurs",120,120)}}</p>
+
+<h3 id="Transparence_et_dégradés">Transparence et dégradés</h3>
+
+<p>Les gradients gèrent la transparence. Vous pouvez l'utiliser, par exemple, en superposant plusieurs fonds pour créer des effets sur les images. Par exemple :</p>
+
+<h4 id="CSS_8">CSS</h4>
+
+<pre class="brush: css">.linear-gradient {
+  background: linear-gradient(to right, transparent, mistyrose),
+    url("https://mdn.mozillademos.org/files/15525/critters.png");
+}
+
+div {
+  width: 300px;
+  height: 150px;
+}</pre>
+
+<h4 id="HTML_8">HTML</h4>
+
+<pre class="brush: html">&lt;div class="linear-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<h4 id="Résultat_8">Résultat</h4>
+
+<p>{{EmbedLiveSample("Transparence_et_dégradés",300,150)}}</p>
+
+<p>Les fonds sont superposés avec le premier fond spécifié au dessus, et chaque fond supplémentaire par dessous.</p>
+
+<h3 id="Créer_des_lignes_franches">Créer des lignes franches</h3>
+
+<p>Pour créer une ligne franche entre deux couleurs et avoir deux bandes plutôt qu'un dégradé progressif, on peut définir deux points d'arrêt de couleur au même endroit. Dans l'exemple suivant, on a deux couleurs pour un même emplacement de point d'arrêt situé à <code>50%</code>:</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="striped"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css">.striped {
+   background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%);
+}</pre>
+
+<p>{{EmbedLiveSample('Créer_des_lignes_franches', 120, 120)}}</p>
+
+<h3 id="Créer_des_bandes_de_couleur">Créer des bandes de couleur</h3>
+
+<p>Pour inclure une bande d'une couleur donnée, sans transition au sein du dégradé, on utilisera deux points d'arrêt successif avec la même couleur. Ainsi, la couleur sera atteinte au premier point d'arrêt puis sera conservée jusqu'au suivant.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="multiposition-stops"&gt;&lt;/div&gt;
+&lt;div class="multiposition-stop2"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 120px;
+  height: 120px;
+  float: left; margin-right: 10px; box-sizing: border-box;
+}</pre>
+</div>
+
+<pre class="brush: css">.multiposition-stops {
+   background: linear-gradient(to left,
+       lime 20%, red 30%, red 45%, cyan 55%, cyan 70%, yellow 80% );
+   background: linear-gradient(to left,
+       lime 20%, red 30% 45%, cyan 55% 70%, yellow 80% );
+}
+.multiposition-stop2 {
+   background: linear-gradient(to left,
+      lime 25%, red 25%, red 50%, cyan 50%, cyan 75%, yellow 75% );
+   background: linear-gradient(to left,
+      lime 25%, red 25% 50%, cyan 50% 75%, yellow 75% );
+}
+</pre>
+
+<p>{{EmbedLiveSample('Créer_des_bandes_de_couleur', 120, 120)}}</p>
+
+<p>Dans le premier exemple ci-avant, le bleu vert commence au début puis progresse jusqu'à 20% avant de transitionner vers le rouge pendant les 10% qui suivent. Le rouge reste vif entre 30% et 45% avant de transitionner vers un cyan pendant 15% etc.</p>
+
+<p>Dans le deuxième exemple, le deuxième point d'arrêt pour chaque couleur est situé au même emplacement que le premier point d'arrêt pour la couleur suivante et on obtient donc des bandes successives.</p>
+
+<h3 id="Contrôler_la_progression_du_dégradé">Contrôler la progression du dégradé</h3>
+
+<p>Par défaut, un dégradé progresse linéairement entre les deux couleurs et la couleur médiane est atteinte à la moitié du parcours. Toutefois, si on veut atteindre cette couleur médiane plus tôt ou plus tard, on peut fournir une indication permettant de définir l'emplacement du milieu de la transition. Dans l'exemple qui suit, la couleur est à la moitié de la transition entre le vert et le cyan à 20% du dégradé (et non à 50%). Le deuxième exemple ne contient pas de telle indication et la transition s'effectue linéairement. Vous pouvez ainsi observer l'impact d'une telle indication.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="colorhint-gradient"&gt;&lt;/div&gt; &lt;div class="regular-progression"&gt;&lt;/div&gt;
+
+</pre>
+
+<pre class="brush: css">div {
+  width: 120px;
+  height: 120px;
+  float: left; margin-right: 10px; box-sizing: border-box;
+}</pre>
+</div>
+
+<pre class="brush: css">.colorhint-gradient {
+  background: linear-gradient(to top, black, 20%, cyan);
+}
+.regular-progression {
+  background: linear-gradient(to top, black, cyan);
+}
+</pre>
+
+<p>{{EmbedLiveSample("Contrôler_la_progression_du_dégradé", 120, 120)}}</p>
+
+<h3 id="Empilement_de_dégradés">Empilement de dégradés</h3>
+
+<p>Il est possible d' « empiler » différents dégradés. Il suffit que les dégradés sur les couches supérieures ne soient pas complètement opaques pour qu'on puisse voir ceux des couches inférieures.</p>
+
+<h4 id="CSS_9">CSS</h4>
+
+<pre class="brush: css">.linear-gradient {
+  background:
+    linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+    linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+    linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+}
+
+div {
+  width: 100px;
+  height: 100px;
+}</pre>
+
+<h4 id="HTML_9">HTML</h4>
+
+<pre class="brush: html">&lt;div class="linear-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<h4 id="Résultat_9">Résultat</h4>
+
+<p>{{EmbedLiveSample("Empilement_de_dégradés")}}</p>
+
+<h2 id="Dégradés_radiaux">Dégradés radiaux</h2>
+
+<p>Les dégradés radiaux sont similaire aux dégradés linéaires mais permettent d'obtenir un effet qui rayonne à partir d'un point. Il est possible de créer des dégradés circulaires ou elliptiques.</p>
+
+<h3 id="Un_dégradé_radial_simple">Un dégradé radial simple</h3>
+
+<div class="note">
+<p><strong>Note :</strong> Dans les exemples suivants, nous continuons d'utiliser le même {{HTMLElement("div")}} et, pour ne pas surcharger la lecture, n'afficherons plus que la règle CSS spécifique au dégradé.</p>
+</div>
+
+<p>De la même façon qu'avec les dégradés linéaires, il suffit de deux couleurs pour créer un dégradé radial.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="simple-radial"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css">.simple-radial {
+  background: radial-gradient(red, blue);
+}
+</pre>
+
+<p>{{EmbedLiveSample('Un_dégradé_radial_simple', 120, 120)}}</p>
+
+<h3 id="Positionner_les_points_d’arrêt">Positionner les points d’arrêt</h3>
+
+<p>À nouveau, comme pour les dégradés linéaires, il est possible de placer des arrêts de couleur en précisant un pourcentage ou une distance.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="radial-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css">.radial-gradient {
+  background: radial-gradient(red 10px, yellow 30%, #1e90ff 50%);
+}
+</pre>
+
+<p>{{EmbedLiveSample("Positionner_les_points_d’arrêt", 120, 120)}}</p>
+
+<h3 id="Positionner_le_centre_du_dégradé">Positionner le centre du dégradé</h3>
+
+<p>La position du centre du dégradé peut être définie avec des mots-clés, des pourcetages ou des longueurs. Deux valeurs permettent de placer le centre sur les deux axes. Si une seule valeur est fournie, elle sera utilisée pour les deux axes.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="radial-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 120px;
+  height: 240px;
+}</pre>
+</div>
+
+<pre class="brush: css">.radial-gradient {
+  background: radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%);
+}
+</pre>
+
+<p>{{EmbedLiveSample('Utiliser_closest-side_pour_les_ellipses', 240, 100)}}</p>
+
+<h3 id="Dimensionner_les_dégradés_radiaux">Dimensionner les dégradés radiaux</h3>
+
+<p>À la différence des dégradés linéaires, il est possible de définir la taille d'un dégradé radial.</p>
+
+<h4 id="Utiliser_closest-side_pour_les_ellipses">Utiliser <code>closest-side</code> pour les ellipses</h4>
+
+<p>Dans l'exemple qui suit, on utilise la valeur <code>closest-side</code> pour la taille. Cela signifie que la taille du dégradé sera définie par la distance entre le point central de départ et le côté le plus proche de la boîte englobante.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="radial-ellipse-side"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 240px;
+  height: 100px;
+}</pre>
+</div>
+
+<pre class="brush: css">.radial-ellipse-side {
+  background: radial-gradient(ellipse closest-side,
+      red, yellow 10%, #1e90ff 50%, beige);
+}
+</pre>
+
+<p>{{EmbedLiveSample('Utiliser_closest-side_pour_les_ellipses', 240, 100)}}</p>
+
+<h4 id="Utiliser_farthest-corner_pour_les_ellipses">Utiliser <code>farthest-corner</code> pour les ellipses</h4>
+
+<p>Cet exemple ressemble fortement au précédent mais on utilise ici <code>farthest-corner</code> qui crée un dégradé dont la distance est celle entre le point de départ central et le côté le plus éloigné de la boîte englobante.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="radial-ellipse-far"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 240px;
+  height: 100px;
+}</pre>
+</div>
+
+<pre class="brush: css">.radial-ellipse-far {
+  background: radial-gradient(ellipse farthest-corner,
+      red, yellow 10%, #1e90ff 50%, beige);
+}
+</pre>
+
+<p>{{EmbedLiveSample('Utiliser_farthest-corner_pour_les_ellipses', 240, 100)}}</p>
+
+<h4 id="Utiliser_closest-side_pour_les_cercles">Utiliser <code>closest-side</code> pour les cercles</h4>
+
+<p>Pour cet exemple, on utilise <code>closest-side</code> qui permet de créer un cercle dont le rayon est la distance entre le point de départ central et le côté le plus proche de la boîte englobante. Ici, le rayon du cercle est donc la moitié de la hauteur de la boîte car les bords haut et bas sont équidistants du point de départ et plus proches que les côtés gauche et droit.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="radial-circle-close"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 240px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css">.radial-circle-close {
+  background: radial-gradient(circle closest-side,
+      red, yellow 10%, #1e90ff 50%, beige);
+}
+</pre>
+
+<p>{{EmbedLiveSample('Utiliser_closest-side_pour_les_cercles', 240, 120)}}</p>
+
+<h3 id="Empiler_des_dégradés_radiaux">Empiler des dégradés radiaux</h3>
+
+<p>À l'instar des dégradés linéaires, on peut empiler des dégradés radiaux. Le premier dégradé indiqué sera celui sur la couche la plus haute et le dernier sera celui sur la couche la plus basse.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="stacked-radial"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 200px;
+  height: 200px;
+}</pre>
+</div>
+
+<pre class="brush: css">.stacked-radial {
+  background:
+      radial-gradient(circle at 50% 0,
+        rgba(255,0,0,.5),
+        rgba(255,0,0,0) 70.71%),
+      radial-gradient(circle at 6.7% 75%,
+        rgba(0,0,255,.5),
+        rgba(0,0,255,0) 70.71%),
+      radial-gradient(circle at 93.3% 75%,
+        rgba(0,255,0,.5),
+        rgba(0,255,0,0) 70.71%) beige;
+  border-radius: 50%;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Empiler_des_dégradés_radiaux', 200, 200)}}</p>
+
+<h2 id="Dégradés_coniques">Dégradés coniques</h2>
+
+<p>La fonction <strong><code>conic-gradient()</code></strong> permet de créer une image composée d'un dégradé de couleurs tournant autour d'un point (plutôt qu'une progression radiale). On pourra ainsi utiliser des dégradés coniques pour créer des camemberts ou des éventails de couleurs.</p>
+
+<p>La syntaxe de <code>conic-gradient()</code> est semblable à celle de <code>radial-gradient()</code> mais les arrêts de couleur seront placés le long d'un arc plutôt que le long de la ligne émise depuis le centre. Les arrêts de couleur seront exprimés en pourcentages ou en degrés, ils ne pourront pas être exprimés sous forme de longueurs absolues.</p>
+
+<p>Pour un dégradé radial, la transition entre les couleurs forme une ellipse qui progresse vers l'extérieur dans toutes les directions. Un dégradé conique verra la transition progresser le long de l'arc autour du cercle, dans le sens horaire. À l'instar des dégradés radiaux, il est possible de positionner le centre du dégradé et à l'instar des dégradés linéaires, on peut modifier l'angle du dégradé.</p>
+
+<div>
+<h3 id="Un_dégradé_conique_simple">Un dégradé conique simple</h3>
+
+<p>Comme pour les dégradés linéaires et radiaux, il suffit de deux couleurs pour créer un dégradé conique. Par défaut, le centre du dégradé sera situé au centre (point 50% 50%) et le début du dégradé commencera vers le haut :</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="simple-conic"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css">.simple-conic {
+  background: conic-gradient(red, blue);
+}
+</pre>
+
+<p>{{EmbedLiveSample('Un_dégradé_conique_simple', 120, 120)}}</p>
+</div>
+
+<div>
+<h3 id="Positionner_le_centre">Positionner le centre</h3>
+
+<p>À l'instar des dégradés radiaux, on peut placer le centre d'un dégradé conique à l'aide de mots-clés, de valeurs (longueurs ou pourcentages) avec le mot-clé <code>at</code>.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="conic-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css">.conic-gradient {
+  background: conic-gradient(at 0% 30%, red 10%, yellow 30%, #1e90ff 50%);
+}
+</pre>
+
+<p>{{EmbedLiveSample('Positionner_le_centre', 120, 120)}}</p>
+</div>
+
+<div>
+<h3 id="Modifier_l’angle">Modifier l’angle</h3>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="conic-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css">.conic-gradient {
+  background: conic-gradient(from 45deg, red, orange, yellow, green, blue, purple);
+}
+</pre>
+
+<p>{{EmbedLiveSample("Modifier_l’angle", 120, 120)}}</p>
+</div>
+
+<h2 id="Répéter_des_dégradés">Répéter des dégradés</h2>
+
+<p>Les propriétés {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}} et {{cssxref("conic-gradient")}} ne permettent pas automatiquement de répéter les arrêts de couleur. Toutefois, les fonctions {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}} et {{cssxref("repeating-conic-gradient")}} offrent cette fonctionnalité.</p>
+
+<p>La taille de la portion (ligne ou arc) répétée est donnée par la longueur (ou l'arc) entre le premier arrêt de couleur et le dernier arrêt de couleur. Si on n'indique pas de coordonnées pour le premier et le dernier arrêts, ceux-ci prendront respectivement 0 et 100%. Aussi, le motif unitaire couvrira l'ensemble du dégradé et il n'y aura pas de répétition. Il faut donc indiquer au moins un des deux arrêts (entre le premier et le dernier) pour créer une répétition.</p>
+
+<h3 id="Répéter_un_dégradé_linéaire">Répéter un dégradé linéaire</h3>
+
+<p>Dans cet exemple, on utilise la fonction {{cssxref("repeating-linear-gradient")}} afin de créer un dégradé linéaire qui se répète le long d'une ligne. Les couleurs forment un cycle lorsque le motif se répète.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="repeating-linear"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css">.repeating-linear {
+  background: repeating-linear-gradient(-45deg, red, red 5px, blue 5px, blue 10px);
+}
+</pre>
+
+<p>{{EmbedLiveSample('Répéter_un_dégradé_linéaire', 120, 120)}}</p>
+
+<h3 id="Répéter_plusieurs_dégradés_linéaires">Répéter plusieurs dégradés linéaires</h3>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="multi-repeating-linear"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 600px;
+  height: 400px;
+}</pre>
+</div>
+
+<pre class="brush: css">.multi-repeating-linear {
+  background:
+      repeating-linear-gradient(190deg, rgba(255, 0, 0, 0.5) 40px,
+        rgba(255, 153, 0, 0.5) 80px, rgba(255, 255, 0, 0.5) 120px,
+        rgba(0, 255, 0, 0.5) 160px, rgba(0, 0, 255, 0.5) 200px,
+        rgba(75, 0, 130, 0.5) 240px, rgba(238, 130, 238, 0.5) 280px,
+        rgba(255, 0, 0, 0.5) 300px),
+      repeating-linear-gradient(-190deg, rgba(255, 0, 0, 0.5) 30px,
+        rgba(255, 153, 0, 0.5) 60px, rgba(255, 255, 0, 0.5) 90px,
+        rgba(0, 255, 0, 0.5) 120px, rgba(0, 0, 255, 0.5) 150px,
+        rgba(75, 0, 130, 0.5) 180px, rgba(238, 130, 238, 0.5) 210px,
+        rgba(255, 0, 0, 0.5) 230px),
+      repeating-linear-gradient(23deg, red 50px, orange 100px,
+        yellow 150px, green 200px, blue 250px,
+        indigo 300px, violet 350px, red 370px);
+}
+</pre>
+
+<p>{{EmbedLiveSample('Répéter_plusieurs_dégradés_linéaires', 600, 400)}}</p>
+
+<h3 id="Créer_un_tartan">Créer un tartan</h3>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="plaid-gradient"&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css">div {
+  width: 200px;
+  height: 200px;
+}</pre>
+</div>
+
+<pre class="brush: css">.plaid-gradient {
+  background:
+      repeating-linear-gradient(90deg, transparent, transparent 50px,
+        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
+        transparent 56px, transparent 63px,
+        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
+        transparent 69px, transparent 116px,
+        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
+      repeating-linear-gradient(0deg, transparent, transparent 50px,
+        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
+        transparent 56px, transparent 63px,
+        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
+        transparent 69px, transparent 116px,
+        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
+      repeating-linear-gradient(-45deg, transparent, transparent 5px,
+        rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px),
+      repeating-linear-gradient(45deg, transparent, transparent 5px,
+        rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px);
+}
+</pre>
+
+<p>{{EmbedLiveSample('Créer_un_tartan', 200, 200)}}</p>
+
+<h3 id="Répéter_des_dégradés_radiaux">Répéter des dégradés radiaux</h3>
+
+<p>Ici, on utilise la fonction {{cssxref("repeating-radial-gradient")}} afin de créer un dégradé radial qui se répète. Les couleurs utilisées forment un cycle lorsque le motif unitaire recommence.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="repeating-radial"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css">.repeating-radial {
+  background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
+}
+</pre>
+
+<p>{{EmbedLiveSample('Répéter_des_dégradés_radiaux', 120, 120)}}</p>
+
+<h3 id="Répéter_plusieurs_dégradés_radiaux">Répéter plusieurs dégradés radiaux</h3>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="multi-target"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 250px;
+  height: 150px;
+}</pre>
+</div>
+
+<pre class="brush: css">.multi-target {
+  background:
+      repeating-radial-gradient(ellipse at 80% 50%,rgba(0,0,0,0.5),
+        rgba(0,0,0,0.5) 15px, rgba(255,255,255,0.5) 15px,
+        rgba(255,255,255,0.5) 30px) top left no-repeat,
+      repeating-radial-gradient(ellipse at 20% 50%,rgba(0,0,0,0.5),
+        rgba(0,0,0,0.5) 10px, rgba(255,255,255,0.5) 10px,
+        rgba(255,255,255,0.5) 20px) top left no-repeat yellow;
+  background-size: 200px 200px, 150px 150px;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Répéter_plusieurs_dégradés_radiaux', 250, 150)}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les fonctions de manipulation des dégradés
+  <ul>
+   <li>{{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("conic-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}, {{cssxref("repeating-conic-gradient")}}</li>
+  </ul>
+ </li>
+ <li>Les types de donnée CSS relatifs aux dégradés
+  <ul>
+   <li>{{cssxref("&lt;gradient&gt;")}}, {{cssxref("&lt;image&gt;")}}</li>
+  </ul>
+ </li>
+ <li>Certaines propriétés CSS qui permettent d'utiliser des dégradés
+  <ul>
+   <li>{{cssxref("background")}}, {{cssxref("background-image")}}</li>
+  </ul>
+ </li>
+ <li><a class="external" href="https://lea.verou.me/css3patterns/">Une bibliothèque de motifs de dégradés CSS, créée par Lea Verou</a></li>
+ <li><a href="https://cssgenerator.org/gradient-css-generator.html">Un générateur de dégradé CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/valeur_calculée/index.html b/files/fr/web/css/valeur_calculée/index.html
new file mode 100644
index 0000000000..356a3f75ba
--- /dev/null
+++ b/files/fr/web/css/valeur_calculée/index.html
@@ -0,0 +1,67 @@
+---
+title: Valeur calculée
+slug: Web/CSS/Valeur_calculée
+tags:
+  - CSS
+  - Reference
+translation_of: Web/CSS/computed_value
+---
+<div>{{CSSRef}}</div>
+
+<p>La <strong>valeur calculée</strong> d'une propriété CSS est calculée à partir de <a href="/fr/docs/Web/CSS/Valeur_spécifiée">la valeur définie</a> :</p>
+
+<ol>
+ <li>En gérant les valeurs spéciales {{cssxref("inherit")}}, {{cssxref("initial")}}, {{cssxref("unset")}} et {{cssxref("revert")}}.</li>
+ <li>En effectuant les calculs décrits dans la section « Valeur calculée » de chaque résumé de propriété.</li>
+</ol>
+
+<p>Les calculs utilisés pour obtenir la <strong>valeur calculée</strong> correspondent généralement à la conversion des valeurs relatives (exprimées dans des unités relatives comme <code>em</code> ou en pourcentages) en valeur absolue. Ainsi, si un élément possède les valeurs spécifiées suivantes <code>font-size: 16px</code> et <code>padding-top: 2em</code>. La valeur calculée de la propriété <code>padding-top</code> sera <code>32px</code> (on double la taille de la police).</p>
+
+<p>Cependant, pour certaines propriétés (celles où les pourcentages sont relatifs à quelque chose lié à la disposition comme <code>width</code>, <code>margin-right</code>, <code>text-indent</code>, et <code>top</code>), les valeurs spécifiées exprimées en pourcentages deviennent des valeurs calculées exprimées en pourcentages. De plus, les nombres sans unité utilisés pour la propriété <code>line-height</code> sont également utilisés comme valeurs calculées. Ces valeurs relatives sont résolues en valeurs absolues lorsqu'on détermine <a href="/fr/docs/Web/CSS/Valeur_utilisée">les valeurs utilisées</a>.</p>
+
+<p>Le principal intérêt de la valeur calculée (en dehors de la gestion du passage de <a href="/fr/docs/Web/CSS/Valeur_spécifiée">la valeur spécifiée</a> à <a href="/fr/docs/Web/CSS/Valeur_utilisée">la valeur utilisée</a>) est <a href="/fr/docs/Web/CSS/Héritage">l'héritage</a>, notamment grâce au mot-clé {{cssxref("inherit")}}.</p>
+
+<div class="note">
+<p><strong>Note :</strong> La méthode du DOM {{domxref("Window.getComputedStyle", "getComputedStyle()")}} renvoie <a href="/fr/docs/Web/CSS/valeur_r%C3%A9solue">la valeur résolue</a> qui correspond à la valeur calculée ou à <a href="/fr/docs/Web/CSS/Valeur_utilis%C3%A9e">la valeur utilisée</a> selon la propriété.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS2.2", "cascade.html#computed-value", "computed-value")}}</td>
+   <td>{{Spec2("CSS2.2")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "cascade.html#computed-value", "computed value")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Reference">La référence CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/Valeur_initiale">La notion de valeur initiale</a></li>
+ <li><a href="/fr/docs/Web/CSS/Valeur_spécifiée">La notion de valeur définie</a></li>
+ <li><a href="/fr/docs/Web/CSS/Valeur_calculée">La notion de valeur calculée</a></li>
+ <li><a href="/fr/docs/Web/CSS/Valeur_utilisée">La notion de valeur utilisée</a></li>
+ <li><a href="/fr/docs/Web/CSS/valeur_r%C3%A9solue">La notion de valeur résolue</a></li>
+ <li><a href="/fr/docs/Web/CSS/valeur_reelle">La notion de valeur réelle</a></li>
+ <li>{{cssxref("inherit")}}</li>
+ <li>{{cssxref("initial")}}</li>
+ <li>{{cssxref("unset")}}</li>
+ <li>{{cssxref("revert")}}</li>
+ <li>{{domxref("window.getComputedStyle")}}</li>
+</ul>
diff --git a/files/fr/web/css/valeur_initiale/index.html b/files/fr/web/css/valeur_initiale/index.html
new file mode 100644
index 0000000000..eedda54344
--- /dev/null
+++ b/files/fr/web/css/valeur_initiale/index.html
@@ -0,0 +1,53 @@
+---
+title: Valeur initiale
+slug: Web/CSS/Valeur_initiale
+tags:
+  - CSS
+  - Reference
+translation_of: Web/CSS/initial_value
+---
+<div>{{CSSRef}}</div>
+
+<p>La <strong>valeur initiale</strong> d'une <a href="/fr/docs/Web/CSS/Reference">propriété CSS</a> est définie par la spécification et varie selon <a href="/fr/docs/Web/CSS/Héritage" title="en/CSS/inheritance">qu'une propriété est héritée ou non</a>.</p>
+
+<ul>
+ <li>Pour <a href="/fr/docs/Web/CSS/Héritage#Propriétés_héritées" title="en/CSS/inheritance#Inherited_properties">les propriétés héritées</a>, la valeur initiale est uniquement utilisée pour l'élément racine lorsqu'il n'y a pas <a href="/fr/docs/Web/CSS/Valeur_spécifiée">de valeur définie</a> pour cet élément.</li>
+ <li>Pour <a href="/fr/docs/Web/CSS/Héritage#Propriétés_non_héritées">les propriétés non-héritées</a>, la valeur initiale est utilisée pour n'importe quel élément lorsque <a href="/fr/docs/Web/CSS/Valeur_spécifiée">la valeur n'est pas définie</a> pour cet élément.</li>
+</ul>
+
+<p>Le mot-clé {{cssxref("initial")}} a été ajouté en CSS3 afin de permettre aux auteurs d'utiliser cette valeur de façon explicite.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://drafts.csswg.org/css-cascade-4/#initial-values">CSS Cascade 4</a></td>
+   <td> </td>
+   <td>Définition formelle.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "cascade.html#specified-value", "initial value")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Définition implicite.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Reference">La référence CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/Valeur_spécifiée">La notion de valeur définie</a></li>
+ <li><a href="/fr/docs/Web/CSS/Valeur_calculée">La notion de valeur calculée</a></li>
+ <li><a href="/fr/docs/Web/CSS/Valeur_utilisée">La notion de valeur utilisée</a></li>
+ <li><a href="/fr/docs/Web/CSS/valeur_reelle">La notion de valeur réelle</a></li>
+ <li>{{cssxref("initial")}}</li>
+</ul>
diff --git a/files/fr/web/css/valeur_reelle/index.html b/files/fr/web/css/valeur_reelle/index.html
new file mode 100644
index 0000000000..4a4d768379
--- /dev/null
+++ b/files/fr/web/css/valeur_reelle/index.html
@@ -0,0 +1,52 @@
+---
+title: Valeur réelle
+slug: Web/CSS/valeur_reelle
+tags:
+  - CSS
+  - Guide
+  - Reference
+translation_of: Web/CSS/actual_value
+---
+<div>{{CSSRef}}</div>
+
+<p>La <strong>valeur réelle</strong> d'une propriété CSS est la valeur utilisée par le moteur une fois que toutes les approximations ont été appliquées. Ainsi, un agent utillisateur ne pourra afficher des bordures qu'avec un nombre de pixels entier et pourra ainsi être forcé d'approximer <a href="/fr/docs/Web/CSS/Valeur_calcul%C3%A9e">la valeur calculée</a> pour l'épaisseur de la bordure.</p>
+
+<h2 id="Calculer_la_valeur_réelle_d'une_propriété">Calculer la valeur réelle d'une propriété</h2>
+
+<p>La valeur réelle est la valeur finale obtenue lors de la détermination d'une propriété, qui passe par les étapes suivantes :</p>
+
+<ol>
+ <li><a href="/fr/docs/Web/CSS/Valeur_initiale">La valeur initiale</a> (indiquée par la spécification).</li>
+ <li><a href="/fr/docs/Web/CSS/Valeur_sp%C3%A9cifi%C3%A9e">La valeur définie</a> qui résulte de <a href="/fr/Apprendre/CSS/Introduction_à_CSS/La_cascade_et_l_héritage">l'héritage et de la cascade</a>.</li>
+ <li><a href="/fr/docs/Web/CSS/Valeur_calcul%C3%A9e">La valeur calculée</a> est calculée selon la spécification.</li>
+ <li>La disposition est calculée, fournissant ainsi <a href="/fr/docs/Web/CSS/Valeur_utilis%C3%A9e">la valeur utilisée</a>.</li>
+ <li><em>La valeur réelle</em></li>
+</ol>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'cascade.html#actual-value', 'actual value')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Valeur_initiale">La valeur initiale</a></li>
+ <li><a href="/fr/docs/Web/CSS/Valeur_sp%C3%A9cifi%C3%A9e">La valeur définie</a></li>
+ <li><a href="/fr/docs/Web/CSS/Valeur_calcul%C3%A9e">La valeur calculée</a></li>
+ <li><a href="/fr/docs/Web/CSS/Reference">La référence CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/valeur_résolue/index.html b/files/fr/web/css/valeur_résolue/index.html
new file mode 100644
index 0000000000..8ce7a5b45a
--- /dev/null
+++ b/files/fr/web/css/valeur_résolue/index.html
@@ -0,0 +1,40 @@
+---
+title: Valeur résolue
+slug: Web/CSS/valeur_résolue
+tags:
+  - CSS
+  - Reference
+translation_of: Web/CSS/resolved_value
+---
+<div>{{cssref}}</div>
+
+<p>La <strong>valeur résolue</strong> d'une propriété CSS est la valeur renvoyée par {{domxref("Window.getComputedStyle", "getComputedStyle()")}}. Pour la plupart des propriétés, il s'agit de <a href="/fr/docs/Web/CSS/Valeur_calcul%C3%A9e">la valeur calculée</a> mais pour un tout petit nombre d'anciennes propriétés (dont {{cssxref("width")}} et {{cssxref("height")}}), il s'agit par contre de <a href="/fr/docs/Web/CSS/Valeur_utilisée">la valeur utilisée</a>. Voir le lien vers la spécification ci-dessous pour des détails plus précis en fonction de chaque propriété.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSSOM", "#resolved-values", "resolved value")}}</td>
+   <td>{{Spec2("CSSOM")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("window.getComputedStyle")}}</li>
+ <li><a href="/fr/docs/Web/CSS/Valeur_initiale">La valeur initiale</a></li>
+ <li><a href="/fr/docs/Web/CSS/Valeur_sp%C3%A9cifi%C3%A9e">La valeur définie</a></li>
+ <li><a href="/fr/docs/Web/CSS/Valeur_calcul%C3%A9e">La valeur calculée</a></li>
+ <li><a href="/fr/docs/Web/CSS/Reference">La référence CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/valeur_spécifiée/index.html b/files/fr/web/css/valeur_spécifiée/index.html
new file mode 100644
index 0000000000..14eb3d9e5a
--- /dev/null
+++ b/files/fr/web/css/valeur_spécifiée/index.html
@@ -0,0 +1,85 @@
+---
+title: Valeur spécifiée
+slug: Web/CSS/Valeur_spécifiée
+tags:
+  - CSS
+  - Cascade
+  - Reference
+translation_of: Web/CSS/specified_value
+---
+<div>{{CSSRef}}</div>
+
+<p>La <strong>valeur définie</strong> d'une propriété CSS est celle explicitement définie dans la feuille de style ou grâce au style de son élément parent. Elle est déterminée selon une des trois méthodes suivantes :</p>
+
+<ol>
+ <li>Si la feuille de style du document a une valeur définie pour la propriété, alors c'est cette valeur qui est utilisée. Par exemple, si la propriété {{cssxref("color")}} est définie à <code>green</code> alors la couleur du texte des éléments correspondants sera verte.</li>
+ <li>Si la feuille de style du document n'a pas de valeur définie, alors, si c'est possible, elle sera héritée de l'élément parent. Par exemple, si on a un paragraphe ({{HTMLElement("p")}}) dans un {{HTMLElement("div")}} et que le {{HTMLElement("div")}} est ciblée par une déclaration CSS où <code>font</code> vaut <code>Arial</code> et qu'il n'y a pas de règle <code>font</code> pour {{HTMLElement("p")}}, ce dernier héritera de la police Arial.</li>
+ <li>Si aucun des cas précédents ne s'applique, c'est la valeur initiale de la propriété CSS qui est appliquée.</li>
+</ol>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Ma couleur provient explicitement de la feuille de style CSS.&lt;/p&gt;
+
+&lt;div&gt;Les valeurs définies de mes propriétés utilisent
+    les valeurs initiales (par défaut) car aucune n'est fournie
+    dans la feuille de style CSS.&lt;/div&gt;
+
+&lt;div class="fun"&gt;
+  &lt;p&gt;La valeur définie pour ma police n'est pas fournie explicitement
+     dans la feuille de style et est donc héritée de mon parent.
+     Toutefois, la bordure n'est pas une propriété héritée.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.fun {
+  border: 1px dotted pink;
+  font-family: fantasy;
+}
+
+p {
+  color: green;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 500, 220)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS2.2", "cascade.html#specified-value", "cascaded value")}}</td>
+   <td>{{Spec2("CSS2.2")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "cascade.html#specified-value", "cascaded value")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Reference">La référence CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/Valeur_initiale">La notion de valeur initiale</a></li>
+ <li><a href="/fr/docs/Web/CSS/Valeur_calculée">La notion de valeur calculée</a></li>
+ <li><a href="/fr/docs/Web/CSS/Valeur_utilisée">La notion de valeur utilisée</a></li>
+ <li><a href="/fr/docs/Web/CSS/valeur_r%C3%A9solue">La notion de valeur résolue</a></li>
+ <li><a href="/fr/docs/Web/CSS/valeur_reelle">La notion de valeur réelle</a></li>
+</ul>
diff --git a/files/fr/web/css/valeur_utilisée/index.html b/files/fr/web/css/valeur_utilisée/index.html
new file mode 100644
index 0000000000..df94445fd7
--- /dev/null
+++ b/files/fr/web/css/valeur_utilisée/index.html
@@ -0,0 +1,144 @@
+---
+title: Valeur utilisée
+slug: Web/CSS/Valeur_utilisée
+tags:
+  - CSS
+  - Guide
+  - Reference
+  - Web
+translation_of: Web/CSS/used_value
+---
+<div>{{cssref}}</div>
+
+<p>La <strong>valeur utilisée</strong> de n'importe quelle propriété CSS est la valeur finale d'une propriété après que tous les calculs aient été réalisés.</p>
+
+<p>Une fois qu'un agent utilisateur a terminé les calculs, chaque propriété CSS possède une valeur utilisée. Les valeurs utilisées des dimensions (par exemple <code>width</code>,<code> height</code>) sont exprimées en pixels et les propriétés raccourcies (comme <code>background</code>) sont cohérentes avec leurs propriétés composantes (par exemple <code>background-color</code>), <code>display</code> est cohérente avec <code>position</code> et <code>float</code>.</p>
+
+<p>Les valeurs utilisées pour certaines propriétés peuvent être retrouvées en appelant la méthode JavaScript <code><a href="/fr/docs/DOM/window.getComputedStyle">window.getComputedStyle()</a></code>.</p>
+
+<h2 id="Détails">Détails</h2>
+
+<p>Quatre étapes permettent de déterminer la valeur finale de n'importe quelle propriété CSS.</p>
+
+<ol>
+ <li>Tout d'abord, la <a href="/fr/docs/CSS/Valeur_spécifiée">valeur spécifiée</a> est le résultat de la cascade (on choisit la règle la plus spécifique qui change la propriété), de l'<a href="/fr/docs/CSS/Héritage">héritage</a> (on utilise la valeur calculée d'un parent si la propriété peut être héritée) ou alors c'est la valeur par défaut est utilisée.</li>
+ <li>Ensuite, la <a href="/fr/docs/CSS/Valeur_calculée">valeur calculée</a> est déterminée selon la spécification (par exemple, un <code>span</code> avec <code>position: absolute</code> aura <code>display</code> qui passera à <code>block</code> pour la valeur calculée).</li>
+ <li>Ensuite, la mise en page est calculée (les dimensions qui ont pour valeur <code>auto</code> ou des pourcentages relatifs à des parents sont remplacées par des valeurs en pixels), et le résultat est la <strong>valeur utilisée</strong>.</li>
+ <li>Enfin, la valeur est transformée selon les limites de l'environnement actuel, le résultat est <a href="/fr/docs/Web/CSS/valeur_reelle">la valeur réelle</a>. La valeur finalement utilisée est la valeur réelle, éventuellement approximée en fonction des contraintes de l'agent utilisateur. Ces valeurs sont calculées de manière interne ; un script peut seulement lire les valeurs utilisées finales grâce à <code><a href="/fr/docs/DOM/window.getComputedStyle">window.getComputedStyle</a></code>  (bien que cette méthode peut renvoyer la valeur calculée selon la propriété, la valeur renvoyée par cette méthode est généralement appelée <a href="/fr/docs/Web/CSS/valeur_r%C3%A9solue">valeur résolue</a>).</li>
+</ol>
+
+<h2 id="Différence_avec_les_valeurs_calculées">Différence avec les valeurs calculées</h2>
+
+<p>CSS 2.0 définissait la <a href="/fr/docs/CSS/Valeur_calculée">valeur calculée</a> comme la dernière étape du calcul de la valeur. CSS 2.1 a introduit une définition distincte de la valeur utilisée afin qu'un élément puisse hériter d'une largeur ou d'une hauteur d'un parent de manière explicite si la valeur calculée du parent est un pourcentage. Pour les propriétés CSS qui ne dépendent pas de la mise en page (comme <code>display</code>, <code>font-size</code> ou <code>line-height</code>), les valeurs calculées et les valeurs utilisées sont identiques. Voici les propriétés qui dépendent de la mise en page et dont les valeurs calculées sont différentes des valeurs utilisées (extrait de <em><a class="external" href="https://www.w3.org/TR/CSS2/changes.html#q36">CSS 2.1 Changes: Specified, computed, and actual values</a></em>) :</p>
+
+<ul>
+ <li><code>background-position</code></li>
+ <li><code>bottom</code>, <code>left</code>, <code>right</code>, <code>top</code></li>
+ <li><code>height</code>, <code>width</code></li>
+ <li><code>margin-bottom</code>, <code>margin-left</code>, <code>margin-right</code>, <code>margin-top</code></li>
+ <li><code>min-height</code>, <code>min-width</code></li>
+ <li><code>padding-bottom</code>, <code>padding-left</code>, <code>padding-right</code>, <code>padding-top</code></li>
+ <li><code>text-indent</code></li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Cet exemple illustre et calcule les largeurs <em>utilisées</em> pour les trois éléments.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#no-width {
+  width: auto;
+}
+
+#width-50 {
+  width: 50%;
+}
+
+#width-inherit {
+  width: inherit;
+}
+
+/* Permet de mieux voir les résultats */
+div {
+  border: 1px solid red;
+  padding: 8px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="no-width"&gt;
+  &lt;p&gt;Pas de largeur explicite.&lt;/p&gt;
+  &lt;p class="show-used-width"&gt;..&lt;/p&gt;
+
+  &lt;div id="width-50"&gt;
+    &lt;p&gt;Largeur explicite : 50%.&lt;/p&gt;
+    &lt;p class="show-used-width"&gt;..&lt;/p&gt;
+
+    &lt;div id="width-inherit"&gt;
+      &lt;p&gt;Largeur explicite: héritée avec &lt;code&gt;inherit&lt;/code&gt;.&lt;/p&gt;
+      &lt;p class="show-used-width"&gt;..&lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">function updateUsedWidth(id) {
+  var div = document.querySelector(`#${id}`);
+  var par = div.querySelector('.show-used-width');
+  var wid = window.getComputedStyle(div)["width"];
+  par.textContent = `Used width: ${wid}.`;
+}
+
+function updateAllUsedWidths() {
+  updateUsedWidth("no-width");
+  updateUsedWidth("width-50");
+  updateUsedWidth("width-inherit");
+}
+
+updateAllUsedWidths();
+window.addEventListener('resize', updateAllUsedWidths);
+
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '80%', '372px')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS2.2", "cascade.html#used-value", "used value")}}</td>
+   <td>{{Spec2("CSS2.2")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "cascade.html#used-value", "used value")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Reference">La référence CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/Valeur_initiale">La notion de valeur initiale</a></li>
+ <li><a href="/fr/docs/Web/CSS/Valeur_calculée">La notion de valeur calculée</a></li>
+ <li><a href="/fr/docs/Web/CSS/Valeur_spécifiée">La notion de valeur définie</a></li>
+ <li><a href="/fr/docs/Web/CSS/valeur_r%C3%A9solue">La notion de valeur résolue</a></li>
+ <li><a href="/fr/docs/Web/CSS/valeur_reelle">La notion de valeur réelle</a></li>
+ <li><code><a href="/fr/docs/DOM/window.getComputedStyle">window.getComputedStyle()</a></code></li>
+</ul>
diff --git a/files/fr/web/css/valeurs_et_unités_css/index.html b/files/fr/web/css/valeurs_et_unités_css/index.html
new file mode 100644
index 0000000000..0c1c4f9b57
--- /dev/null
+++ b/files/fr/web/css/valeurs_et_unités_css/index.html
@@ -0,0 +1,494 @@
+---
+title: Valeurs et unités CSS
+slug: Web/CSS/Valeurs_et_unités_CSS
+tags:
+  - CSS
+  - Reference
+translation_of: Web/CSS/CSS_Values_and_Units
+---
+<div>{{CSSRef}}</div>
+
+<p>Chaque déclaration CSS inclut une paire constituée d'une propriété et d'une valeur. La plupart de celles-ci sont définies dans le module de spécification <em><a href="https://www.w3.org/TR/css-values-4/">CSS Values and Units</a></em> (Valeurs et unités CSS). Dans cet article, nous verrons ces différents types et valeurs ainsi que des notions de base quant à leur utilisation. Pour obtenir des informattions plus détaillées, vous pouvez consulter la page de chacun de ces types.</p>
+
+<h2 id="Types_de_données_textuels">Types de données textuels</h2>
+
+<ul>
+ <li>{{cssxref("&lt;custom-ident&gt;")}}</li>
+ <li>Des mots-clés prédéfinis tels que les identifiants (<code>&lt;ident&gt;</code>)</li>
+ <li>{{cssxref("&lt;string&gt;")}}</li>
+ <li>{{cssxref("&lt;url&gt;")}}</li>
+</ul>
+
+<p>Une valeur dont le type de donnée est textuel peut être un identifiant CSS (<code>&lt;ident&gt;</code>) ou une chaîne de caractères (<code>&lt;string&gt;</code>). Lorsqu'il s'agit d'un identifiant CSS, celui-ci ne doit pas être entouré de doubles quotes (guillemets anglais). En revanche, les chaînes de caractères (<code>&lt;string&gt;</code>) doivent être délimitées par des quotes ou des doubles quotes.</p>
+
+<p>Dans les spécifications, les valeurs qui peuvent être définies par un développeur web sont indiquées comme {{cssxref("&lt;custom-ident&gt;")}} ; ce type de valeur se comportera comme n'importe quel autre identifiant CSS. Ainsi, pour la propriété {{cssxref("grid-area")}}, on peut utiliser une valeur de type <code>&lt;custom-ident&gt;</code> et si on a une zone de grille nommée <code>content</code>, on l'indiquera sans quotes :</p>
+
+<pre class="brush: css">.item {
+  grid-area: content;
+}
+</pre>
+
+<p>En revanche, lorsqu'on manipule une valeur de type {{cssxref("&lt;string&gt;")}}, comme ça peut être le cas lorsqu'on utilise la propriété {{cssxref("content")}}, il faut l'entourer de quotes :</p>
+
+<pre class="brush: css">.item::after {
+  content: "Voici le contenu.";
+}
+</pre>
+
+<p>Si le type indiqué dans la spécification est <code>&lt;custom-ident&gt; | &lt;string&gt;</code>, cela nidiquera que les quotes sont optionnelles. C'est par exemple le cas avec les noms des animations :</p>
+
+<pre class="brush: bash">@keyframe identifiantValide {
+  /* on place les keyframes ici */
+}
+
+@keyframe 'chaineValide' {
+  /* on place les keyframes ici */
+}</pre>
+
+<p>Bien qu'on puisse généralement utiliser presque n'importe nom (y compris en le composant d'emojis), un identifiant ne peut pas être <code>none</code>, <code>unset</code>, <code>initial</code> ou <code>inherit</code>, ne peut pas commencer par un chiffre ou par deux tirets. De façon générale, il ne faut pas qu'un identifiant soit un mot-clé CSS existant. Pour plus d'informations, voir les pages {{cssxref("&lt;custom-ident&gt;")}} et {{cssxref("&lt;string&gt;")}}.</p>
+
+<h3 id="Mots-clés_prédéfinis">Mots-clés prédéfinis</h3>
+
+<p>Les spécifications définissent également des mots-clés utilisables comme valeurs pour certaines propriétés. Ces mots-clés sont également des identifiants CSS et ne doivent pas être entourés de guillemets.</p>
+
+<p>Lorsque vous consultez une spécification ou un article de MDN à propos d'une propriété, vous pourrez voir les mots-clés autorisés sous la forme suivante. Voici un exemple avec les valeurs autorisées pour la propriété {{cssxref("break-inside")}}.</p>
+
+<pre class="syntaxbox">auto | avoid | avoid-page | avoid-column | avoid-region</pre>
+
+<p>Dans une déclaration, on pourra donc écrire (sans quote) :</p>
+
+<pre class="brush: css"><code>.box {
+  break-inside: avoid;
+}
+</code></pre>
+
+<h3 id="Mots-clés_généraux">Mots-clés généraux</h3>
+
+<p>En complément des mots-clés définis pour certaines propriétés, il existe trois mots-clés utilisables pour l'ensemble des propriétés CSS : {{cssxref("initial")}}, {{cssxref("inherit")}} et {{cssxref("unset")}}.</p>
+
+<p>Le mot-clé <code>initial</code> représente la valeur définie comme la valeur initiale de la propriété. Le mot-clé <code>inherit</code> correspond à la valeur calculée de la propriété sur l'élément parent si celle-ci est héritée.</p>
+
+<p>Le mot-clé <code>unset</code> agit comme <code>inherit</code> ou <code>initial</code> selon que la propriété soit héritée ou non.</p>
+
+<p>Une quatrième valeur, {{cssxref("revert")}}, a été ajoutée dans le module de spécification de niveau 4 sur la cascade mais sa prise en charge est encore faible et hétérogène (en février 2019).</p>
+
+<h3 id="URL">URL</h3>
+
+<p>Une valeur de type {{cssxref("&lt;url&gt;")}} s'utilise avec une notation fonctionnelle qui prend une chaîne de caractères (type <code>&lt;string&gt;</code>) comme argument et qui est une URL. La chaîne de caractères peut être une URL absolue ou relative. Ainsi, si on souhaite inclure une image d'arrière-plan, on pourra utiliser l'une ou l'autre de ces déclarations.</p>
+
+<pre class="brush: css"><code>.box {
+  background-image: url("images/mon-arriere-plan.png");
+}</code>
+
+<code>.box {
+  background-image: url("https://www.exammple.com/images/mon-arriere-plan.png");
+}</code>
+</pre>
+
+<p>On notera que la valeur passée à <code>url()</code> peut ne pas contenir de quotes. Dans ce cas, elle sera analysée comme une valeur <code>&lt;url-token&gt;</code> et devra respecter certaines règles supplémentaires quant à l'échappement de certains caractères. Voir la page {{cssxref("&lt;url&gt;")}} pour plus d'informations.</p>
+
+<h2 id="Types_de_données_numériques">Types de données numériques</h2>
+
+<ul>
+ <li>{{cssxref("&lt;integer&gt;")}}</li>
+ <li>{{cssxref("&lt;number&gt;")}}</li>
+ <li>{{cssxref("&lt;dimension&gt;")}}</li>
+ <li>{{cssxref("&lt;percentage&gt;")}}</li>
+</ul>
+
+<h3 id="Entiers">Entiers</h3>
+
+<p>Un entier ({{cssxref("&lt;integer&gt;")}}) se compose d'un ou plusieurs chiffres entre <code>0</code> et <code>9</code> (exemple de valeurs : <code>1024</code> ou <code>-55</code>). Un entier peut être précédé d'un signe <code>+</code> ou <code>-</code>.</p>
+
+<h3 id="Nombres">Nombres</h3>
+
+<p>Un nombre ({{cssxref("&lt;number&gt;")}}) représente un nombre décimal pouvant avoir (ou non) une composante décimale. Le séparateur décimal utilisé est le point. Ainsi, <code>1</code> et <code>1.2</code> sont des nombres en CSS. Les nombres peuvent être précédés d'un signe <code>+</code> ou <code>-</code>.</p>
+
+<h3 id="Dimensions">Dimensions</h3>
+
+<p>Une valeur {{cssxref("&lt;dimension&gt;")}} est un nombre (<code>&lt;number&gt;</code>) suivi directement d'une unité (par exemple <code>10px</code>). L'identifiant utilisé pour exprimer l'unité est insensible à la casse et est lui-même un identifiant. Il n'y a jamais d'espace entre le nombre et l'unité (<code>1 cm</code> ne sera pas valide). CSS utilise les dimensions pour les types suivants :</p>
+
+<ul>
+ <li>{{cssxref("&lt;length&gt;")}} (longueurs avec des unités de distance)</li>
+ <li>{{cssxref("&lt;angle&gt;")}}</li>
+ <li>{{cssxref("&lt;time&gt;")}}</li>
+ <li>{{cssxref("&lt;frequency&gt;")}}</li>
+ <li>{{cssxref("&lt;resolution&gt;")}}</li>
+</ul>
+
+<p>Nous verrons chacun de ces types dans les sections suivantes.</p>
+
+<ul>
+</ul>
+
+<h4 id="Unités_de_distance">Unités de distance</h4>
+
+<p>Lorsqu'on peut utiliser une distance comme valeur d'une propriété, cette valeur est décrite avec le type {{cssxref("&lt;length&gt;")}}. Il existe deux types de longueur en CSS : les longueurs absolues d'une part et les longueurs relatives d'autre part.</p>
+
+<p>Les unités de longueur relative permettent d'exprimer une distance relative à une autre grandeur. Ainsi, l'unité <code>em</code> sera relative à la taille (corps) de la police pour l'élément ; l'unité <code>vh</code> sera relative à la hauteur de la zone d'affichage (<em>viewport</em>).</p>
+
+<table class="standard-table">
+ <caption>Récapitulatif des unités relatives</caption>
+ <thead>
+  <tr>
+   <th scope="col">Unité</th>
+   <th scope="col">Relative à</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>em</code></td>
+   <td>La taille (corps) de police de l'élément</td>
+  </tr>
+  <tr>
+   <td><code>ex</code></td>
+   <td>La hauteur d'un x avec la police utilisée par l'élément</td>
+  </tr>
+  <tr>
+   <td><code>cap</code></td>
+   <td>La hauteur d'une majuscule nominale avec la police utilisée par l'élément</td>
+  </tr>
+  <tr>
+   <td><code>ch</code></td>
+   <td>La largeur moyenne d'un glyphe étroit et de l'espace alentour pour la police utilisée par l'élément (le glyphe concerné étant “0” (ZERO, U+0030)).</td>
+  </tr>
+  <tr>
+   <td><code>ic</code></td>
+   <td>La largeur moyenne d'un glyphe large et de l'espace alentour pour la police utilisée par l'élément (exemple de glyphe “水” ).</td>
+  </tr>
+  <tr>
+   <td><code>rem</code></td>
+   <td>La taille (corps) de police de l'élément racine</td>
+  </tr>
+  <tr>
+   <td><code>lh</code></td>
+   <td>La hauteur de la ligne de l'élément</td>
+  </tr>
+  <tr>
+   <td><code>rlh</code></td>
+   <td>La hauteur de la ligne de l'élément racine</td>
+  </tr>
+  <tr>
+   <td><code>vw</code></td>
+   <td>1% de la largeur de la zone d'affichage (<em>viewport</em>)</td>
+  </tr>
+  <tr>
+   <td><code>vh</code></td>
+   <td>1% de la hauteur de la zone d'affichage (<em>viewport</em>)</td>
+  </tr>
+  <tr>
+   <td><code>vi</code></td>
+   <td>1% de la taille de la zone d'affichage sur l'axe en ligne (<em>inline axis</em>)</td>
+  </tr>
+  <tr>
+   <td><code>vb</code></td>
+   <td>1% de la taille de la zone d'affichage sur l'axe de bloc (<em>block axis</em>)</td>
+  </tr>
+  <tr>
+   <td><code>vmin</code></td>
+   <td>1% de la zone d'affichage selon sa plus petite dimension</td>
+  </tr>
+  <tr>
+   <td><code>vmax</code></td>
+   <td>1% de la zone d'affichage selon sa plus grande dimension</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Les unités de longueur absolue correspondent à des mesures physiques et sont ainsi particulièrement adaptées lors que le média d'affichage possède une taille fixe (l'impression par exemple). Ainsi, l'unité <code>cm</code> correspond à un centimètre physique.</p>
+
+<table class="standard-table">
+ <caption>Récapitulatif des unités de longueur absolue</caption>
+ <thead>
+  <tr>
+   <th scope="col">Unité</th>
+   <th scope="col">Nom</th>
+   <th scope="col">Équivalence</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>cm</code></td>
+   <td>Centimètre</td>
+   <td>1cm = 96px/2.54</td>
+  </tr>
+  <tr>
+   <td><code>mm</code></td>
+   <td>Millimètre</td>
+   <td>1mm = 1/10e de 1cm</td>
+  </tr>
+  <tr>
+   <td><code>Q</code></td>
+   <td>Quart de millimètre</td>
+   <td>1Q = 1/40e de 1cm</td>
+  </tr>
+  <tr>
+   <td><code>in</code></td>
+   <td>Pouces (<em>inches</em>)</td>
+   <td>1in = 2.54cm = 96px</td>
+  </tr>
+  <tr>
+   <td><code>pc</code></td>
+   <td>Picas</td>
+   <td>1pc = 1/16e de 1in</td>
+  </tr>
+  <tr>
+   <td><code>pt</code></td>
+   <td>Points</td>
+   <td>1pt = 1/72e de 1in</td>
+  </tr>
+  <tr>
+   <td><code>px</code></td>
+   <td>Pixels</td>
+   <td>1px = 1/96e de 1in</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Lorsqu'on utilise une longueur nulle (sa valeur est <code>0</code>), l'identifiant correspondant à l'unité n'est pas obligatoire. Dans tous les autres cas, l'unité doit être écrite juste après la valeur (sans espace). L'identifiant de l'unité est insensible à la casse.</p>
+
+<h4 id="Unités_angulaires">Unités angulaires</h4>
+
+<p>Les valeurs angulaires sont représentées avec le type {{cssxref("&lt;angle&gt;")}} et peuvent être décrites avec les unités suivantes :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Unité</th>
+   <th scope="col">Nom</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>deg</code></td>
+   <td>Degrés</td>
+   <td>Un cercle se divise en 360 degrés égaux.</td>
+  </tr>
+  <tr>
+   <td><code>grad</code></td>
+   <td>Grades/Gradians</td>
+   <td>Un cercle se compose de 400 grades.</td>
+  </tr>
+  <tr>
+   <td><code>rad</code></td>
+   <td>Radians</td>
+   <td>Un cercle se compose de 2π radians.</td>
+  </tr>
+  <tr>
+   <td><code>turn</code></td>
+   <td>Tours</td>
+   <td>Un cercle se compose d'un tour.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Unités_temporelles">Unités temporelles</h4>
+
+<p>Les valeurs temporelles sont de type {{cssxref("&lt;time&gt;")}} et utilisent les unités suivantes.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Unité</th>
+   <th scope="col">Nom</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>s</code></td>
+   <td>Secondes</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>ms</code></td>
+   <td>Millisecondes</td>
+   <td>Un millième de seconde.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Unités_de_fréquence">Unités de fréquence</h4>
+
+<p>Les valeurs de fréquence ont le type {{cssxref("&lt;frequency&gt;")}} et utilisent les valeurs suivantes.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Unité</th>
+   <th scope="col">Nom</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>Hz</code></td>
+   <td>Hertz</td>
+   <td>Nombre de fois par seconde.</td>
+  </tr>
+  <tr>
+   <td><code>kHz</code></td>
+   <td>Kilohertz</td>
+   <td>1000 Hertz.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Unités_de_résolution">Unités de résolution</h4>
+
+<p>Les résolutions sont représentées par des valeurs de type {{cssxref("&lt;resolution&gt;")}}. Elles correspondent à la taille d'un point sur une représentation graphique et décrivent la quantité de ces points sur un pixel, pouce ou centimètre CSS.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Unité</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>dpi</code></td>
+   <td>Points par pouce.</td>
+  </tr>
+  <tr>
+   <td><code>dpcm</code></td>
+   <td>Points par centimètre.</td>
+  </tr>
+  <tr>
+   <td><code>dppx</code>, <code>x</code></td>
+   <td>Points par unité px.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Pourcentages">Pourcentages</h3>
+
+<p>Une valeur de type {{cssxref("&lt;percentage&gt;")}} représente une fraction d'une autre valeur de référence.</p>
+
+<p>Les valeurs exprimées en pourcentages sont relatives à d'autres quantités (une longueur par exemple). Chaque propriété qui permet d'utiliser un pourcentage définit également la quantité à laquelle se réfère ce pourcentage. Cette quantité peut être une valeur d'une autre propriété du même élément, la valeur de la propriété sur un élément ancêtre, une caractéristique du bloc englobant ou autre chose.</p>
+
+<p>Ainsi, si on utilise {{cssxref("width")}} avec un pourcentage sur une boîte. Ce pourcentage fera référence à la largeur calculée de l'élément parent de la boîte :</p>
+
+<pre class="brush: css">.box {
+  width: 50%;
+}</pre>
+
+<h3 id="Mélanges_entre_les_pourcentages_et_les_dimensions">Mélanges entre les pourcentages et les dimensions</h3>
+
+<p>Certaines propriétés permettent d'utiliser une dimension avec deux types possibles (par exemple une longueur ou un pourcentage). Dans ce cas, la valeur mentionnée dans la spécification a une unité composite (ex. {{cssxref("&lt;length-percentage&gt;")}}). Voici les différentes unités composites qui existent :</p>
+
+<ul>
+ <li>{{cssxref("&lt;frequency-percentage&gt;")}}</li>
+ <li>{{cssxref("&lt;angle-percentage&gt;")}}</li>
+ <li>{{cssxref("&lt;time-percentage&gt;")}}</li>
+</ul>
+
+<h3 id="Types_de_données_spéciaux_(définis_via_d'autres_spécifications)">Types de données spéciaux (définis via d'autres spécifications)</h3>
+
+<ul>
+ <li>{{cssxref("&lt;color&gt;")}}</li>
+ <li>{{cssxref("&lt;image&gt;")}}</li>
+ <li>{{cssxref("&lt;position&gt;")}}</li>
+</ul>
+
+<h4 id="Couleur">Couleur</h4>
+
+<p>Une valeur de type {{cssxref("&lt;color&gt;")}} permet de représenter une couleur pour un élément (par exemple la couleur de son arrière-plan). Ce type est défini dans le module de spécification <em><a href="https://drafts.csswg.org/css-color-3/">CSS Color</a></em>.</p>
+
+<h4 id="Image">Image</h4>
+
+<p>Une valeur de type {{cssxref("&lt;image&gt;")}} permet de représenter une image utilisable en CSS. Ce type est défini dans le module de spécification <em><a href="https://www.w3.org/TR/css-images-4/">CSS Image Values and Replaced Content Module</a></em>.</p>
+
+<h4 id="Position">Position</h4>
+
+<p>Le type {{cssxref("&lt;position&gt;")}} définit le positionnement, sur deux dimensions, d'un objet sur une zone de positionnement. Ce peut être le positionnement d'une image d'arrière-plan par rapport à son conteneur par exemple. Ce type est interprété comme {{cssxref("background-position")}} et est donc spécifié avec le module <a href="https://www.w3.org/TR/css-backgrounds-3/"><em>CSS Backgrounds and Borders</em></a>.</p>
+
+<h3 id="Notations_fonctionnelles_(fonctions)">Notations fonctionnelles (fonctions)</h3>
+
+<ul>
+ <li>{{cssxref("calc()")}}</li>
+ <li>{{cssxref("min", "min()")}}</li>
+ <li>{{cssxref("max", "max()")}}</li>
+ <li>{{cssxref("clamp", "clamp()")}}</li>
+ <li>{{cssxref("toggle", "toggle()")}}</li>
+ <li>{{cssxref("attr", "attr()")}}</li>
+</ul>
+
+<p>Les notations fonctionnelles sont des types de valeur qui peuvent représenter des types plus complexes ou qui impliquent un traitement spécifique du moteur de rendu. La syntaxe commence par le nom de la fonction, immédiatement suivi d'une parenthèse gauche <code>(</code> suivie des arguments de la notation, suivis d'une parenthèse droite<code>)</code>. Les fonctions peuvent prendre plusieurs arguments qui ont une forme analogue à celle utilisée pour les valeurs des propriétés.</p>
+
+<p>Les espaces sont optionnels mais autorisés à l'intérieur des parenthèses.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Contrairement à d'autres langages, la virgule n'est pas toujours le séparateur utilisé entre les arguments d'une notation fonctionnelle.</p>
+</div>
+
+<p>Certaines notations fonctionnelles historiques telles que <code>rgba()</code> utilisent des virgules pour séparer des arguments mais la plupart du temps, les virgules sont uniquement utilisées afin de séparer les éléments d'une liste. Si une virgule est utilisée comme séparateur entre des arguments, on peut ajouter un espace optionnel avant et après la virgule.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Values")}}</td>
+   <td>{{Spec2("CSS4 Values")}}</td>
+   <td>Ajout des unités <code>vi</code>, <code>vb</code>, <code>ic</code>, <code>cap</code>, <code>lh</code> et <code>rlh</code>.<br>
+    Ajout des notations fonctionnelles  <code>min()</code>, <code>max()</code> et <code>clamp()</code>.<br>
+    Ajout de  <code>toggle()</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Values")}}</td>
+   <td>{{Spec2("CSS3 Values")}}</td>
+   <td>Ajout de <code>calc()</code>, <code>ch</code>, <code>rem</code>, <code>vw</code>, <code>vw</code>, <code>vmin</code>,<code> vmax</code>, <code>Q</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS4 Colors")}}</td>
+   <td>{{Spec2("CSS4 Colors")}}</td>
+   <td>Ajout des syntaxes sans virgule pour les fonctions <code>rgb()</code>, <code>rgba()</code>, <code>hsl()</code> et <code>hsla()</code>. Ajout des valeurs alpha pour  <code>rgb()</code> et <code>hsl()</code>, transformant ainsi <code>rgba()</code> et <code>hsla()</code> en alias respectifs (dépréciés).<br>
+    Ajout du mot-clé de couleur <code>rebeccapurple</code>.<br>
+    Ajout des couleurs sur 4 et 8 chiffres hexadécimaux où le dernier chiffre représente la valeur alpha.<br>
+    Ajout des fonctions <code>hwb()</code>, <code>device-cmyk()</code> et <code>color()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Colors")}}</td>
+   <td>{{Spec2("CSS3 Colors")}}</td>
+   <td>Dépréciation des couleurs système. Ajout des couleurs SVG. Ajout des fonctions <code>rgba()</code>, <code>hsl()</code> et <code>hsla()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS4 Images")}}</td>
+   <td>{{Spec2("CSS4 Images")}}</td>
+   <td>
+    <p>Ajout des notations fonctionnelles <code>element()</code>, <code>image()</code>, <code>image-set()</code>, <code>conic-gradient()</code></p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Images")}}</td>
+   <td>{{Spec2("CSS3 Images")}}</td>
+   <td>Définition initiale du type <code>image</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1")}}</td>
+   <td>{{Spec2("CSS1")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Types_CSS">Les types de donnée de base en CSS</a></li>
+ <li><a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/Values_and_units">Introduction à CSS : les valeurs et les unités</a></li>
+</ul>
diff --git a/files/fr/web/css/var()/index.html b/files/fr/web/css/var()/index.html
new file mode 100644
index 0000000000..0fb388e2f0
--- /dev/null
+++ b/files/fr/web/css/var()/index.html
@@ -0,0 +1,94 @@
+---
+title: var()
+slug: Web/CSS/var()
+tags:
+  - CSS
+  - Experimental
+  - Fonction CSS
+  - Reference
+  - Variables CSS
+translation_of: Web/CSS/var()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>var()</code></strong> peut être utilisée à la place d'une valeur pour n'importe quelle propriété d'un élément. Elle permet d'insérer la valeur d'<a href="/fr/docs/Web/CSS/--*">une propriété personnalisée (custom property)</a>.</p>
+
+<pre class="brush: css">var(--header-color, blue);</pre>
+
+<p>La fonction <code>var()</code> ne peut pas être utilisée pour les noms de propriété, les sélecteurs et pour tout ce qui n'est pas une valeur de propriété.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Le premier argument de la fonction est le nom de la propriété qu'on veut substituer. Le deuxième argument, optionnel, est une valeur de recours (<em>fallback</em>) qui est utilisée au cas où la valeur de subsitution référencée par la propriété est invalide.</p>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> La syntaxe de la valeur de recours permet d'utiliser des virgules. Aussi, si on a <code>var(--toto, red, blue)</code>, la valeur de recours sera bien <code>red, blue</code> (autrement dit, tout ce qui est situé après la première virgule sert de valeur de recours).</p>
+</div>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;custom-property-name&gt;</code></dt>
+ <dd>Le nom d'une propriété personnalisée, représenté par un identifiant valide qui commence par deux tirets. Les propriétés personnalisées sont uniquement utilisées par les auteurs et les utilisateurs. CSS ne définit pas leur valeur ou leur sémantique.</dd>
+ <dt><code>&lt;declaration-value&gt;</code></dt>
+ <dd>Une valeur de subsitution qui peut être utilisée afin que la règle soit valide si la valeur du premier argument ne peut être utilisée ici.</dd>
+</dl>
+
+<h2 id="Exemples​">Exemples​</h2>
+
+<pre class="brush: css">:root{
+  --main-bg-color: pink;
+}
+
+body {
+  background-color: var(--main-bg-color);
+}
+
+</pre>
+
+<pre class="brush: css">/* On ajoute un paramètre de secours */
+.component .header {
+  color: var(--header-color, blue); // à ce moment header-color n'est pas définie, c'est donc le bleu qui est utilisé
+}
+.component .text {
+  color: var(--text-color, black);
+}
+
+.component {
+  --text-color: #080;
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Variables', '#using-variables', 'var()')}}</td>
+   <td>{{Spec2('CSS3 Variables')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.custom-property.var")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("env","env(…)")}} – variables d'environnement en lecture seule, contrôlées par l'agent utilisateur.</li>
+ <li><a href="/fr/docs/Web/CSS/Utiliser_les_variables_CSS">Utiliser les variables CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/vertical-align/index.html b/files/fr/web/css/vertical-align/index.html
new file mode 100644
index 0000000000..88319dc526
--- /dev/null
+++ b/files/fr/web/css/vertical-align/index.html
@@ -0,0 +1,191 @@
+---
+title: vertical-align
+slug: Web/CSS/vertical-align
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/vertical-align
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>vertical-align</code></strong> définit l'alignement vertical d'une boîte en ligne (<em>inline</em>) ou d'une cellule de tableau.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/vertical-align.html")}}</div>
+
+<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div>
+
+<p>La propriété <code>vertical-align</code> peut être utilisée dans deux contextes :</p>
+
+<ul>
+ <li>Afin d'aligner verticalement la boîte d'un élément en ligne à l'intérieur de la boîte en ligne de son conteneur (par exemple pour aligner verticalement une image ({{HTMLElement("img")}} sur une ligne de texte)</li>
+ <li>ou pour aligner verticalement le contenu d'une cellule dans un tableau</li>
+</ul>
+
+<p><code>vertical-align</code> ne s'applique qu'aux cellules de tableaux et aux éléments en ligne (<em>inline</em>), elle ne peut pas être utilisée pour aligner verticalement <a href="/fr/docs/Web/HTML/Éléments_en_bloc">les éléments de bloc</a>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Avec un mot-clé */
+vertical-align: baseline;
+vertical-align: sub;
+vertical-align: super;
+vertical-align: text-top;
+vertical-align: text-bottom;
+vertical-align: middle;
+vertical-align: top;
+vertical-align: bottom;
+
+/* Valeurs de longueur */
+/* type &lt;length&gt; */
+vertical-align: 10em;
+vertical-align: 4px;
+
+/* Valeurs en pourcentage */
+/* type &lt;percentage&gt; */
+vertical-align: 20%;
+
+/* Valeurs globales */
+vertical-align: inherit;
+vertical-align: initial;
+vertical-align: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<h4 id="Pour_les_éléments_inline">Pour les éléments <em>inline</em></h4>
+
+<div class="note">
+<p><strong>Note :</strong>  La plupart des valeurs alignent l'élément verticalement, relativement à son élément parent.</p>
+</div>
+
+<dl>
+ <dt><code>baseline</code></dt>
+ <dd>Aligne la ligne de base de l'élément avec celle de son parent. La ligne de base de certains <a href="/fr/docs/Web/CSS/Élément_remplacé">éléments remplacés</a>, comme {{HTMLElement("textarea")}}, n'est pas définie par la spécification HTML et le comportement de ce mot-clé peut donc changer d'un navigateur à un autre.</dd>
+ <dt><code>sub</code></dt>
+ <dd>Aligne la ligne de base sur la ligne de base inférieure (celle utilisée pour les indices) de l'élément parent.</dd>
+ <dt><code>super</code></dt>
+ <dd>Aligne la ligne de base sur la ligne de base supérieure (celle utilisée pour les exposants) de l'élément parent.</dd>
+ <dt><code>text-top</code></dt>
+ <dd>Aligne le haut de l'élément avec le haut de la police de l'élément parent.</dd>
+ <dt><code>text-bottom</code></dt>
+ <dd>Aligne le bas de l'élément avec le bas de la police de l'élément parent.</dd>
+ <dt><code>middle</code></dt>
+ <dd>Aligne le milieu de l'élément avec la hauteur donnée par la ligne de base de l'élément parent à laquelle on ajoute la moitié de sa hauteur.</dd>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>Aligne la ligne de base de l'élément à la hauteur de la ligne de base de l'élément parent à laquelle on ajoute la hauteur donnée. Les valeurs négatives sont autorisées.</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>Fonctionne comme avec les valeurs de type {{cssxref("&lt;length&gt;")}}, le pourcentage indique une fraction de la propriété {{cssxref("line-height")}}. Les valeurs négatives sont autorisées.</dd>
+</dl>
+
+<p>Les valeurs suivantes alignent l'élément par rapport à la ligne entière (absolu) plutôt que par rapport à leur parent (relatif) :</p>
+
+<dl>
+ <dt><code>top</code></dt>
+ <dd>Aligne le haut de l'élément et de ses descendants avec le haut de la ligne entière.</dd>
+ <dt><code>bottom</code></dt>
+ <dd>Aligne le bas de l'élément et de ses descendants avec le bas de la ligne entière.</dd>
+</dl>
+
+<p>Pour les éléments qui n'ont pas de ligne de base définie, c'est le bord de la marge basse qui est utilisée.</p>
+
+<h4 id="Pour_les_cellules_de_tableau">Pour les cellules de tableau</h4>
+
+<dl>
+ <dt><code>baseline</code>, <code>sub</code>, <code>super</code>, <code>text-top</code>, <code>text-bottom</code>, <code>&lt;length&gt;</code> et <code>&lt;percentage&gt;</code></dt>
+ <dd>La ligne de base de la cellule est alignée avec celle de toutes les autres cellules de la ligne courante qui sont alignées par rapport à la ligne de base. Les valeurs négatives sont autorisées.</dd>
+ <dt><code>top</code></dt>
+ <dd>Aligne le bord haut de la boîte de remplissage (<em>padding</em>) de la cellule avec le haut de la ligne.</dd>
+ <dt><code>middle</code></dt>
+ <dd>Centre la boîte de remplissage (<em>padding</em>) de la cellule avec la ligne.</dd>
+ <dt><code>bottom</code></dt>
+ <dd>Aligne le bord bas de la boîte de remplissage (<em>padding</em>) avec le bas de la ligne.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div&gt;
+  Une &lt;img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="une icone générique" width="32" height="32" /&gt;
+  image alignée par défaut.
+&lt;/div&gt;
+&lt;div&gt;
+  Une &lt;img class="haut" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /&gt;
+  image alignée avec text-top.
+&lt;/div&gt;
+&lt;div&gt;
+  Une &lt;img class="bas" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /&gt;
+  image alignée avec text-bottom.&lt;/div&gt;
+&lt;div&gt;
+  Une &lt;img class="pourcents" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /&gt;
+  image alignée avec 200%.
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">img.haut {
+  vertical-align: text-top;
+}
+img.bas {
+  vertical-align: text-bottom;
+}
+img.pourcents {
+  vertical-align: 200%;
+}
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemple")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'vertical-align')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>vertical-align</code> peut désormais être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visudet.html#propdef-vertical-align', 'vertical-align')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Ajoute la valeur {{cssxref("&lt;length&gt;")}} et permet d'appliquer la propriété aux éléments dont {{cssxref("display")}} est de type <code>table-cell</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#vertical-align', 'vertical-align')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.vertical-align")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("line-height")}}, {{cssxref("text-align")}}, {{cssxref("margin")}}</li>
+ <li><a href="https://phrogz.net/css/vertical-align/index.html">Comprendre <code>vertical-align</code> ou comment (ne pas) centrer des éléments verticalement</a> (en anglais)</li>
+ <li><a href="https://christopheraue.net/design/vertical-align">Tout ce qu'il y a à savoir sur <code>vertical-align</code></a> (en anglais)</li>
+ <li><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Cas_utilisation_flexbox#Centrer_des_éléments">Centrer des éléments avec <em>flexbox</em></a></li>
+</ul>
diff --git a/files/fr/web/css/visibility/index.html b/files/fr/web/css/visibility/index.html
new file mode 100644
index 0000000000..8d75cc5fb2
--- /dev/null
+++ b/files/fr/web/css/visibility/index.html
@@ -0,0 +1,190 @@
+---
+title: visibility
+slug: Web/CSS/visibility
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/visibility
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>visibility</code></strong> peut être utilisée afin de cacher un élément tout en conservant occupé l'espace dans lequel il aurait été visible. Elle permet aussi de masquer des lignes ou des colonnes dans un tableau (cf. {{HTMLElement("table")}}).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/visibility.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note">
+<p><strong>Note :</strong> Afin de cacher un élément et de le retirer de la disposition du document, on utilisera plutôt la propriété {{cssxref("display")}} avec la valeur <code>none</code>.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Avec un mot-clé */
+visibility: visible;
+visibility: hidden;
+visibility: collapse;
+
+/* Valeurs globales */
+visibility: inherit;
+visibility: initial;
+visibility: unset;
+</pre>
+
+<p>La propriété <code>visibility</code> est définie avec l'un des mots-clés suivants.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>visible</code></dt>
+ <dd>La valeur par défaut, la boîte est visible.</dd>
+ <dt><code>hidden</code></dt>
+ <dd>La boîte est invisible (totalement transparente, rien n'est dessiné) mais continue d'avoir un impact sur la disposition. Les fils de l'élément seront visibles s'ils ont <code>visibility:visible</code>. L'élément ne pourra plus recevoir le focus (cf. <a href="/fr/docs/Web/HTML/Attributs_universels/tabindex">la navigation au clavier avec les tabulations</a>).</dd>
+ <dt><code>collapse</code></dt>
+ <dd>
+ <ul>
+  <li>Pour les lignes, les colonnes, les groupes de lignes et les groupes de colonnes d'un tableau, les éléments sont masqués et l'espace occupé est retiré (comme si on avait appliqué <code>{{cssxref("display")}}: none</code> aux colonnes/lignes du tableau). La taille des autres lignes et colonnes continue d'être calculée comme si les lignes et colonnes masquées étaient présentes. Cela a été conçu afin de pouvoir retirer rapidement des lignes et/ou des colonnes sans avoir à recalculer les dimensions pour l'ensemble du tableau.</li>
+  <li>Les éléments flexibles sont masqués et l'espace qu'ils auraient occupé est retiré.</li>
+  <li>Pour les éléments XUL, la taille calculée des éléments vaut toujours zéro, quel que soit les autres styles qui pourraient affecter la taille, les marges continuent de s'appliquer.</li>
+  <li>Pour les autres éléments, <code>collapse</code> est traité comme <code>hidden</code>.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Interpolation">Interpolation</h2>
+
+<p>Les valeurs de visibilité peuvent être interpolées entre <em>visible</em> et <em>masqué</em>. L'une des valeurs de début ou de fin doit donc être <code>visible</code>, sinon il n'y aura pas d'interpolation. L'interpolation est discrète (passage direct d'un état à l'autre), les valeurs supérieures à 0 sont considérées équivalentes à <code>visible</code>. On pourra plutôt utiliser {{cssxref("opacity")}} pour créer un effet doux plutôt que de masquer/rendre visible l'élément brusquement.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;
+  On peut dire tout ce qu'on veut ici,
+  ce ne sera pas lisible de toute façon.
+&lt;/p&gt;
+&lt;p class="coucou"&gt;
+  Alors que là, on a la bonne classe.
+  Coucou tout le monde :)
+&lt;/p&gt;
+&lt;p&gt;
+  Et on repasse en mode invisible.
+&lt;/p&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush:css">p {
+  /* les paragraphes ne seront pas visibles */
+  visibility: hidden;
+}
+
+p.coucou {
+  /* sauf ceux avec la classe coucou */
+  visibility: visible;
+}
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemple_simple")}}</p>
+
+<h3 id="Exemple_sur_un_tableau">Exemple sur un tableau</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Jean&lt;/td&gt;
+    &lt;td&gt;Biche&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr class="col"&gt;
+    &lt;td&gt;Hit&lt;/td&gt;
+    &lt;td&gt;Girl&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Super&lt;/td&gt;
+    &lt;td&gt;Cochon&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">tr.col {
+  /* les lignes de tableau avec la classe */
+  /* col seront repliées */
+  visibility: collapse;
+}
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemple_sur_un_tableau")}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Utiliser la propriété <code>visibility</code> avec la valeur <code>hidden</code> retirera l'objet de <a href="/fr/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">l'arbre d'accessibilité</a>. Les éléments ciblés, ainsi que leurs éléments descendants ne seront plus annoncés par les lecteurs d'écran.</p>
+
+<h2 id="Notes">Notes</h2>
+
+<ul>
+ <li>Le support de <code>visibility:collapse</code> est absent ou incorrect pour certains navigateurs récents. Dans de nombreux cas, il n'est pas correctement traité comme <code>visibility:hidden</code> sur les éléments qui ne sont pas des lignes et/ou des colonnes de tableau.</li>
+ <li><code>visibility:collapse</code> peut modifier la disposition d'un tableau si le tableau possède des tableaux imbriqués dont les cellules sont repliées, sauf si <code>visibility:visible</code> est défini explicitement sur les tableaux imbriqués.</li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#visibility-collapse', 'visibility')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Définition de la valeur <code>collapse</code> pour les éléments flexibles.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Box', '#visibility-prop', 'visibility')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'visibility')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>visibility</code> peut désormais être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visufx.html#visibility', 'visibility')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.visibility")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("display")}}</li>
+ <li>{{cssxref("opacity")}}</li>
+</ul>
diff --git a/files/fr/web/css/webkit_extensions/index.html b/files/fr/web/css/webkit_extensions/index.html
new file mode 100644
index 0000000000..f96018217b
--- /dev/null
+++ b/files/fr/web/css/webkit_extensions/index.html
@@ -0,0 +1,522 @@
+---
+title: Extensions WebKit
+slug: Web/CSS/WebKit_Extensions
+tags:
+  - Aperçu
+  - CSS
+  - Non-standard
+  - Reference
+  - WebKit
+translation_of: Web/CSS/WebKit_Extensions
+---
+<div>{{CSSRef}}</div>
+
+<p>Les applications basées sur WebKit ou Blink, telles que Safari et Chrome, prennent en charge plusieurs <strong>extensions spécifiques à <a href="/fr/docs/Web/CSS">CSS</a></strong>. Ces extensions sont généralement préfixées par <code>-webkit</code>. Certaines propriétés préfixées par <code>-webkit</code> peuvent également fonctionner avec le préfixe <code>-apple</code>. Quelques unes de ces extensions sont préfixées avec <code>-epub</code>.</p>
+
+<h2 id="Propriétés_spécifiques_WebKit_ne_pas_utiliser_sur_le_Web">Propriétés spécifiques WebKit (ne pas utiliser sur le Web)</h2>
+
+<div class="note">
+<p><strong>Note :</strong> Ces propriétés ne fonctionneront que pour les applications WebKit et ne sont pas en voie de standardisation.</p>
+</div>
+
+<div class="index">
+<h3 id="A">A</h3>
+
+<ul>
+ <li>{{CSSxRef("-webkit-aspect-ratio")}}</li>
+</ul>
+
+<h3 id="B">B</h3>
+
+<ul>
+ <li>{{CSSxRef("-webkit-background-composite")}}</li>
+ <li>{{CSSxRef("background-origin-x")}} (unprefixed!)</li>
+ <li>{{CSSxRef("background-origin-y")}} (unprefixed!)</li>
+ <li>{{CSSxRef("-webkit-border-after")}}</li>
+ <li>{{CSSxRef("-webkit-border-after-color")}}</li>
+ <li>{{CSSxRef("-webkit-border-after-style")}}</li>
+ <li>{{CSSxRef("-webkit-border-after-width")}}</li>
+ <li>{{CSSxRef("-webkit-border-before")}}</li>
+ <li>{{CSSxRef("-webkit-border-before-color")}}</li>
+ <li>{{CSSxRef("-webkit-border-before-style")}}</li>
+ <li>{{CSSxRef("-webkit-border-before-width")}}</li>
+ <li>{{CSSxRef("-webkit-border-end")}}</li>
+ <li>{{CSSxRef("-webkit-border-end-color")}}</li>
+ <li>{{CSSxRef("-webkit-border-end-style")}}</li>
+ <li>{{CSSxRef("-webkit-border-end-width")}}</li>
+ <li>{{CSSxRef("-webkit-border-fit")}}</li>
+ <li>{{CSSxRef("-webkit-border-horizontal-spacing")}}</li>
+ <li>{{CSSxRef("-webkit-border-start")}}</li>
+ <li>{{CSSxRef("-webkit-border-start-color")}}</li>
+ <li>{{CSSxRef("-webkit-border-start-style")}}</li>
+ <li>{{CSSxRef("-webkit-border-start-width")}}</li>
+ <li>{{CSSxRef("-webkit-border-vertical-spacing")}}</li>
+ <li>{{CSSxRef("-webkit-box-align")}}</li>
+ <li>{{CSSxRef("-webkit-box-direction")}}</li>
+ <li>{{CSSxRef("-webkit-box-flex")}}</li>
+ <li>{{CSSxRef("-webkit-box-flex-group")}}</li>
+ <li>{{CSSxRef("-webkit-box-lines")}}</li>
+ <li>{{CSSxRef("-webkit-box-ordinal-group")}}</li>
+ <li>{{CSSxRef("-webkit-box-orient")}}</li>
+ <li>{{CSSxRef("-webkit-box-pack")}}</li>
+ <li>{{CSSxRef("-webkit-box-reflect")}}</li>
+ <li>{{CSSxRef("-webkit-box-shadow")}}</li>
+</ul>
+
+<h3 id="C_–_G">C – G</h3>
+
+<ul>
+ <li>{{CSSxRef("-webkit-column-axis")}}</li>
+ <li>{{CSSxRef("-webkit-column-break-after")}}</li>
+ <li>{{CSSxRef("-webkit-column-break-before")}}</li>
+ <li>{{CSSxRef("-webkit-column-break-inside")}}</li>
+ <li>{{CSSxRef("-webkit-dashboard-region")}}</li>
+ <li>{{CSSxRef("-webkit-font-smoothing")}}</li>
+ <li>{{CSSxRef("-webkit-grid-columns")}}</li>
+ <li>{{CSSxRef("-webkit-grid-rows")}}</li>
+</ul>
+
+<h3 id="H_–_I">H – I</h3>
+
+<ul>
+ <li>{{CSSxRef("-webkit-highlight")}}</li>
+ <li>{{CSSxRef("-webkit-hyphenate-charset")}}</li>
+ <li>{{CSSxRef("-webkit-hyphenate-limit-after")}}</li>
+ <li>{{CSSxRef("-webkit-hyphenate-limit-before")}}</li>
+ <li>{{CSSxRef("-webkit-hyphenate-limit-lines")}}</li>
+ <li>{{CSSxRef("-webkit-image-set")}}</li>
+</ul>
+
+<h3 id="L">L</h3>
+
+<ul>
+ <li>{{CSSxRef("-webkit-line-align")}}</li>
+ <li>{{CSSxRef("-webkit-line-box-contain")}}</li>
+ <li>{{CSSxRef("-webkit-line-break")}}</li>
+ <li>{{CSSxRef("-webkit-line-clamp")}}</li>
+ <li>{{CSSxRef("-webkit-line-grid")}}</li>
+ <li>{{CSSxRef("-webkit-line-snap")}}</li>
+ <li>{{CSSxRef("-webkit-locale")}}</li>
+ <li>{{CSSxRef("-webkit-logical-height")}}</li>
+ <li>{{CSSxRef("-webkit-logical-width")}}</li>
+</ul>
+
+<h3 id="M">M</h3>
+
+<ul>
+ <li>{{CSSxRef("-webkit-margin-after")}}</li>
+ <li>{{CSSxRef("-webkit-margin-after-collapse")}}</li>
+ <li>{{CSSxRef("-webkit-margin-before")}}</li>
+ <li>{{CSSxRef("-webkit-margin-before-collapse")}}</li>
+ <li>{{CSSxRef("-webkit-margin-bottom-collapse")}}</li>
+ <li>{{CSSxRef("-webkit-margin-collapse")}}</li>
+ <li>{{CSSxRef("-webkit-margin-end")}}</li>
+ <li>{{CSSxRef("-webkit-margin-start")}}</li>
+ <li>{{CSSxRef("-webkit-margin-top-collapse")}}</li>
+ <li>{{CSSxRef("-webkit-marquee")}}</li>
+ <li>{{CSSxRef("-webkit-marquee-direction")}}</li>
+ <li>{{CSSxRef("-webkit-marquee-increment")}}</li>
+ <li>{{CSSxRef("-webkit-marquee-repetition")}}</li>
+ <li>{{CSSxRef("-webkit-marquee-speed")}}</li>
+ <li>{{CSSxRef("-webkit-marquee-style")}}</li>
+ <li>{{CSSxRef("-webkit-mask-attachment")}}</li>
+ <li>{{CSSxRef("-webkit-mask-box-image")}}</li>
+ <li>{{CSSxRef("-webkit-mask-box-image-outset")}}</li>
+ <li>{{CSSxRef("-webkit-mask-box-image-repeat")}}</li>
+ <li>{{CSSxRef("-webkit-mask-box-image-slice")}}</li>
+ <li>{{CSSxRef("-webkit-mask-box-image-source")}}</li>
+ <li>{{CSSxRef("-webkit-mask-box-image-width")}}</li>
+ <li>{{CSSxRef("-webkit-mask-position-x")}}</li>
+ <li>{{CSSxRef("-webkit-mask-position-y")}}</li>
+ <li>{{CSSxRef("-webkit-mask-repeat-x")}}</li>
+ <li>{{CSSxRef("-webkit-mask-repeat-y")}}</li>
+ <li>{{CSSxRef("-webkit-match-nearest-mail-blockquote-color")}}</li>
+ <li>{{CSSxRef("-webkit-max-logical-height")}}</li>
+ <li>{{CSSxRef("-webkit-max-logical-width")}}</li>
+ <li>{{CSSxRef("-webkit-min-logical-height")}}</li>
+ <li>{{CSSxRef("-webkit-min-logical-width")}}</li>
+</ul>
+
+<h3 id="N_–_O">N – O</h3>
+
+<ul>
+ <li>{{CSSxRef("-webkit-nbsp-mode")}}</li>
+ <li>{{CSSxRef("-webkit-overflow-scrolling")}}</li>
+</ul>
+
+<h3 id="P">P</h3>
+
+<ul>
+ <li>{{CSSxRef("-webkit-padding-after")}}</li>
+ <li>{{CSSxRef("-webkit-padding-before")}}</li>
+ <li>{{CSSxRef("-webkit-padding-end")}}</li>
+ <li>{{CSSxRef("-webkit-padding-start")}}</li>
+ <li>{{CSSxRef("-webkit-perspective-origin-x")}}</li>
+ <li>{{CSSxRef("-webkit-perspective-origin-y")}}</li>
+ <li>{{CSSxRef("-webkit-print-color-adjust")}}</li>
+</ul>
+
+<h3 id="R_–_S">R – S</h3>
+
+<ul>
+ <li>{{CSSxRef("-webkit-region-break-after")}}</li>
+ <li>{{CSSxRef("-webkit-region-break-before")}}</li>
+ <li>{{CSSxRef("-webkit-region-break-inside")}}</li>
+ <li>{{CSSxRef("-webkit-region-fragment")}}</li>
+ <li>{{CSSxRef("-webkit-<code>resizer</code>")}}</li>
+ <li>{{CSSxRef("-webkit-rtl-ordering")}}</li>
+ <li>{{CSSxRef(" <code>-webkit-scrollbar</code>")}}</li>
+ <li>{{CSSxRef(" <code>-webkit-scrollbar-button</code>")}}</li>
+ <li>{{CSSxRef(" <code>-webkit-scrollbar-corner</code>")}}</li>
+ <li>{{CSSxRef("-webkit-<code>scrollbar-thumb</code>")}}</li>
+ <li>{{CSSxRef("-webkit-<code>scrollbar-track</code>")}}</li>
+ <li>{{CSSxRef("-webkit-<code>scrollbar-track-piece</code>")}}</li>
+ <li>{{CSSxRef("-webkit-shape-inside")}}</li>
+ <li>{{CSSxRef("-webkit-svg-shadow")}}</li>
+</ul>
+
+<h3 id="T">T</h3>
+
+<ul>
+ <li>{{CSSxRef("-webkit-tap-highlight-color")}}</li>
+ <li>{{CSSxRef("-webkit-text-combine")}}</li>
+ <li>{{CSSxRef("-epub-text-combine")}}</li>
+ <li>{{CSSxRef("-webkit-text-decorations-in-effect")}}</li>
+ <li>{{CSSxRef("-webkit-text-fill-color")}}</li>
+ <li>{{CSSxRef("-epub-text-orientation")}}</li>
+ <li>{{CSSxRef("-webkit-text-security")}}</li>
+ <li>{{CSSxRef("-webkit-text-size-adjust")}}</li>
+ <li>{{CSSxRef("-webkit-text-stroke")}}</li>
+ <li>{{CSSxRef("-webkit-text-stroke-color")}}</li>
+ <li>{{CSSxRef("-webkit-text-stroke-width")}}</li>
+ <li>{{CSSxRef("-webkit-touch-callout")}}</li>
+</ul>
+</div>
+
+<h2 id="Propriétés_WebKit_en_voie_de_standardisation">Propriétés WebKit en voie de standardisation</h2>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("appearance", "-webkit-appearance")}}</li>
+ <li>{{CSSxRef("-webkit-font-size-delta")}}</li>
+ <li>{{CSSxRef("-webkit-mask-composite")}}</li>
+ <li>{{CSSxRef("-webkit-mask-position-x")}}</li>
+ <li>{{CSSxRef("-webkit-mask-position-y")}}</li>
+ <li>{{CSSxRef("-webkit-mask-repeat-x")}}</li>
+ <li>{{CSSxRef("-webkit-mask-repeat-y")}}</li>
+</ul>
+</div>
+
+<h2 id="Anciennes_propriétés_spécifiques_désormais_standardisées"><a id="spe_std" name="spe_std">Anciennes propriétés spécifiques désormais standardisées</a></h2>
+
+<div class="note">
+<p><strong>Note :</strong> Afin d'obtenir la meilleure compatibilité possible, vous devriez utiliser les versions standards, non-préfixées, de ces propriétés plutôt que les versions spécifiques. Généralement, lorsqu'une propriété est standardisée et implémentée, la version préfixée est généralement abandonnée ensuite.</p>
+</div>
+
+<div class="index">
+<h3 id="A_2">A</h3>
+
+<ul>
+ <li>{{CSSxRef("align-content","-webkit-align-content")}}</li>
+ <li>{{CSSxRef("align-items","-webkit-align-items")}}</li>
+ <li>{{CSSxRef("align-self","-webkit-align-self")}}</li>
+ <li>{{CSSxRef("animation","-webkit-animation")}}</li>
+ <li>{{CSSxRef("animation-delay","-webkit-animation-delay")}}</li>
+ <li>{{CSSxRef("animation-direction","-webkit-animation-direction")}}</li>
+ <li>{{CSSxRef("animation-duration","-webkit-animation-duration")}}</li>
+ <li>{{CSSxRef("animation-fill-mode","-webkit-animation-fill-mode")}}</li>
+ <li>{{CSSxRef("animation-iteration-count","-webkit-animation-iteration-count")}}</li>
+ <li>{{CSSxRef("animation-name","-webkit-animation-name")}}</li>
+ <li>{{CSSxRef("animation-play-state","-webkit-animation-play-state")}}</li>
+ <li>{{CSSxRef("animation-timing-function","-webkit-animation-timing-function")}}</li>
+</ul>
+
+<h3 id="B_2">B</h3>
+
+<ul>
+ <li>{{CSSxRef("backface-visibility","-webkit-backface-visibility")}}</li>
+ <li>{{CSSxRef("background-clip","-webkit-background-clip")}}</li>
+ <li>{{CSSxRef("background-origin","-webkit-background-origin")}}</li>
+ <li>{{CSSxRef("background-size","-webkit-background-size")}}</li>
+ <li>{{CSSxRef("border-bottom-left-radius","-webkit-border-bottom-left-radius")}}</li>
+ <li>{{CSSxRef("border-bottom-right-radius","-webkit-border-bottom-right-radius")}}</li>
+ <li>{{CSSxRef("border-image","-webkit-border-image")}}</li>
+ <li>{{CSSxRef("border-radius","-webkit-border-radius")}}</li>
+ <li>{{CSSxRef("border-top-left-radius","-webkit-border-top-left-radius")}}</li>
+ <li>{{CSSxRef("border-top-right-radius","-webkit-border-top-right-radius")}}</li>
+ <li>{{CSSxRef("box-shadow","-webkit-box-shadow")}}</li>
+ <li>{{CSSxRef("box-sizing","-webkit-box-sizing")}}</li>
+</ul>
+
+<h3 id="C">C</h3>
+
+<ul>
+ <li>{{CSSxRef("column-count","-webkit-column-count")}}</li>
+ <li>{{CSSxRef("column-gap","-webkit-column-gap")}}</li>
+ <li>{{CSSxRef("column-rule","-webkit-column-rule")}}</li>
+ <li>{{CSSxRef("column-rule-color","-webkit-column-rule-color")}}</li>
+ <li>{{CSSxRef("column-rule-style","-webkit-column-rule-style")}}</li>
+ <li>{{CSSxRef("column-rule-width","-webkit-column-rule-width")}}</li>
+ <li>{{CSSxRef("column-span","-webkit-column-span")}}</li>
+ <li>{{CSSxRef("column-width","-webkit-column-width")}}</li>
+ <li>{{CSSxRef("columns","-webkit-columns")}}</li>
+</ul>
+
+<h3 id="F">F</h3>
+
+<ul>
+ <li>{{CSSxRef("filter","-webkit-filter")}}</li>
+ <li>{{CSSxRef("flex","-webkit-flex")}}</li>
+ <li>{{CSSxRef("flex-basis","-webkit-flex-basis")}}</li>
+ <li>{{CSSxRef("flex-direction","-webkit-flex-direction")}}</li>
+ <li>{{CSSxRef("flex-flow","-webkit-flex-flow")}}</li>
+ <li>{{CSSxRef("flex-grow","-webkit-flex-grow")}}</li>
+ <li>{{CSSxRef("flex-shrink","-webkit-flex-shrink")}}</li>
+ <li>{{CSSxRef("flex-wrap","-webkit-flex-wrap")}}</li>
+ <li>{{CSSxRef("-webkit-font-feature-settings")}}</li>
+ <li>{{CSSxRef("-webkit-font-kerning")}}</li>
+ <li>{{CSSxRef("-webkit-font-variant-ligatures")}}</li>
+</ul>
+
+<h3 id="G-J">G-J</h3>
+
+<ul>
+ <li>{{CSSxRef("grid-column","-webkit-grid-column")}}</li>
+ <li>{{CSSxRef("grid-row","-webkit-grid-row")}}</li>
+ <li>{{CSSxRef("hyphens","-webkit-hyphens")}}</li>
+ <li>{{CSSxRef("justify-content","-webkit-justify-content")}}</li>
+</ul>
+
+<h3 id="M_2">M</h3>
+
+<ul>
+ <li>{{CSSxRef("mask","-webkit-mask")}}</li>
+ <li>{{CSSxRef("mask-clip","-webkit-mask-clip")}}</li>
+ <li>{{CSSxRef("mask-image","-webkit-mask-image")}}</li>
+ <li>{{CSSxRef("mask-origin","-webkit-mask-origin")}}</li>
+ <li>{{CSSxRef("mask-position","-webkit-mask-position")}}</li>
+ <li>{{CSSxRef("mask-repeat","-webkit-mask-repeat")}}</li>
+ <li>{{CSSxRef("mask-size","-webkit-mask-size")}}</li>
+</ul>
+
+<h3 id="O-S">O-S</h3>
+
+<ul>
+ <li>{{CSSxRef("opacity","-webkit-opacity")}}</li>
+ <li>{{CSSxRef("order","-webkit-order")}}</li>
+ <li>{{CSSxRef("perspective","-webkit-perspective")}}</li>
+ <li>{{CSSxRef("perspective-origin","-webkit-perspective-origin")}}</li>
+ <li>{{CSSxRef("shape-outside","-webkit-shape-outside")}}</li>
+</ul>
+
+<h3 id="T_2">T</h3>
+
+<ul>
+ <li>{{CSSxRef("text-emphasis", "-epub-text-emphasis")}}</li>
+ <li>{{CSSxRef("-webkit-text-emphasis")}}</li>
+ <li>{{CSSxRef("text-emphasis-color", "-epub-text-emphasis-color")}}</li>
+ <li>{{CSSxRef("-webkit-text-emphasis-color")}}</li>
+ <li>{{CSSxRef("-webkit-text-emphasis-position")}}</li>
+ <li>{{CSSxRef("-epub-text-emphasis-style")}}</li>
+ <li>{{CSSxRef("-webkit-text-emphasis-style")}}</li>
+ <li>{{CSSxRef("text-size-adjust","-webkit-text-size-adjust")}}</li>
+ <li>{{CSSxRef("transform","-webkit-transform")}}</li>
+ <li>{{CSSxRef("transform-origin","-webkit-transform-origin")}}</li>
+ <li>{{CSSxRef("transform-style","-webkit-transform-style")}}</li>
+ <li>{{CSSxRef("transition","-webkit-transition")}}</li>
+ <li>{{CSSxRef("transition-delay","-webkit-transition-delay")}}</li>
+ <li>{{CSSxRef("transition-duration","-webkit-transition-duration")}}</li>
+ <li>{{CSSxRef("transition-property","-webkit-transition-property")}}</li>
+ <li>{{CSSxRef("transition-timing-function","-webkit-transition-timing-function")}}</li>
+</ul>
+
+<h3 id="W">W</h3>
+
+<ul>
+ <li>{{CSSxRef("word-break", "-epub-word-break")}}</li>
+ <li>{{CSSxRef("writing-mode", "-epub-writing-mode")}}</li>
+</ul>
+</div>
+
+<h2 id="Spécificités_prises_en_charge_par_Firefox">Spécificités prises en charge par Firefox</h2>
+
+<p>Les propriétés suivantes peuvent être utilisées avec le préfixe <code>-webkit-</code> sous Firefox. La plupart de ces propriétés peuvent également s'utiliser sans préfixes (voir la section sur les <a href="#spe_std">propriétés anciennement spécifiques et désormais standard </a>ci-avant).</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> En raison du code historique utilisé dans de nombreux sites web et contenant des propriétés préfixées avec <code>-webkit-</code>, Edge et Firefox redirigent de nombreuses propriétés préfixées avec <code>-webkit-</code> vers les équivalents sans préfixe ou avec <code>-moz-</code> ou <code>-ms-</code>.</p>
+</div>
+
+<div class="index">
+<h3 id="A_3">A</h3>
+
+<ul>
+ <li>{{CSSxRef("-webkit-align-content")}}</li>
+ <li>{{CSSxRef("-webkit-align-items")}}</li>
+ <li>{{CSSxRef("-webkit-align-self")}}</li>
+ <li>{{CSSxRef("-webkit-animation")}}</li>
+ <li>{{CSSxRef("-webkit-animation-delay")}}</li>
+ <li>{{CSSxRef("-webkit-animation-direction")}}</li>
+ <li>{{CSSxRef("-webkit-animation-duration")}}</li>
+ <li>{{CSSxRef("-webkit-animation-fill-mode")}}</li>
+ <li>{{CSSxRef("-webkit-animation-iteration-count")}}</li>
+ <li>{{CSSxRef("-webkit-animation-name")}}</li>
+ <li>{{CSSxRef("-webkit-animation-play-state")}}</li>
+ <li>{{CSSxRef("-webkit-animation-timing-function")}}</li>
+ <li>{{CSSxRef("-webkit-appearance")}}*</li>
+</ul>
+
+<h3 id="B_3">B</h3>
+
+<ul>
+ <li>{{CSSxRef("-webkit-backface-visibility")}}</li>
+ <li>{{CSSxRef("-webkit-background-clip")}}</li>
+ <li>{{CSSxRef("-webkit-background-origin")}}</li>
+ <li>{{CSSxRef("-webkit-background-size")}}</li>
+ <li>{{CSSxRef("-webkit-border-bottom-left-radius")}}</li>
+ <li>{{CSSxRef("-webkit-border-bottom-right-radius")}}</li>
+ <li>{{CSSxRef("-webkit-border-image")}}</li>
+ <li>{{CSSxRef("-webkit-border-radius")}}</li>
+ <li>{{CSSxRef("-webkit-box-align")}}**, ***</li>
+ <li>{{CSSxRef("-webkit-box-direction")}}**, ***</li>
+ <li>{{CSSxRef("-webkit-box-flex")}}**, ***</li>
+ <li>{{CSSxRef("-webkit-box-orient")}}**, ***</li>
+ <li>{{CSSxRef("-webkit-box-pack")}}**, ***</li>
+ <li>{{CSSxRef("-webkit-box-shadow")}}</li>
+ <li>{{CSSxRef("-webkit-box-sizing")}}</li>
+ <li>{{CSSxRef("-webkit-border-top-left-radius")}}</li>
+ <li>{{CSSxRef("-webkit-border-top-right-radius")}}</li>
+</ul>
+
+<h3 id="F_2">F</h3>
+
+<ul>
+ <li>{{CSSxRef("-webkit-filter")}}</li>
+ <li>{{CSSxRef("-webkit-flex")}}</li>
+ <li>{{CSSxRef("-webkit-flex-basis")}}</li>
+ <li>{{CSSxRef("-webkit-flex-direction")}}</li>
+ <li>{{CSSxRef("-webkit-flex-flow")}}</li>
+ <li>{{CSSxRef("-webkit-flex-grow")}}</li>
+ <li>{{CSSxRef("-webkit-flex-shrink")}}</li>
+ <li>{{CSSxRef("-webkit-flex-wrap")}}</li>
+</ul>
+
+<h3 id="J">J</h3>
+
+<ul>
+ <li>{{CSSxRef("-webkit-justify-content")}}</li>
+</ul>
+
+<h3 id="M_3">M</h3>
+
+<ul>
+ <li>{{CSSxRef("-webkit-mask")}}</li>
+ <li>{{CSSxRef("-webkit-mask-clip")}}</li>
+ <li>{{CSSxRef("-webkit-mask-composite")}}*</li>
+ <li>{{CSSxRef("-webkit-mask-image")}}</li>
+ <li>{{CSSxRef("-webkit-mask-origin")}}</li>
+ <li>{{CSSxRef("-webkit-mask-position")}}</li>
+ <li>{{CSSxRef("-webkit-mask-position-x")}}**</li>
+ <li>{{CSSxRef("-webkit-mask-position-y")}}**</li>
+ <li>{{CSSxRef("-webkit-mask-repeat")}}</li>
+ <li>{{CSSxRef("-webkit-mask-size")}}</li>
+</ul>
+
+<h3 id="O-P">O-P</h3>
+
+<ul>
+ <li>{{CSSxRef("-webkit-order")}}</li>
+ <li>{{CSSxRef("-webkit-perspective")}}</li>
+ <li>{{CSSxRef("-webkit-perspective-origin")}}</li>
+</ul>
+
+<h3 id="T_3">T</h3>
+
+<ul>
+ <li>{{CSSxRef("-webkit-text-fill-color")}}**</li>
+ <li>{{CSSxRef("-webkit-text-size-adjust")}}</li>
+ <li>{{CSSxRef("-webkit-text-stroke")}}**</li>
+ <li>{{CSSxRef("-webkit-text-stroke-color")}}**</li>
+ <li>{{CSSxRef("-webkit-text-stroke-width")}}**</li>
+ <li>{{CSSxRef("-webkit-transform")}}</li>
+ <li>{{CSSxRef("-webkit-transform-origin")}}</li>
+ <li>{{CSSxRef("-webkit-transition")}}</li>
+ <li>{{CSSxRef("-webkit-transition-delay")}}</li>
+ <li>{{CSSxRef("-webkit-transition-duration")}}</li>
+ <li>{{CSSxRef("-webkit-transition-property")}}</li>
+ <li>{{CSSxRef("-webkit-transition-timing-function")}}</li>
+</ul>
+
+<h3 id="U">U</h3>
+
+<ul>
+ <li>{{CSSxRef("-webkit-user-select")}}</li>
+</ul>
+</div>
+
+<p>* Prise en charge avec les préfixes <code>-moz-</code> et <code>-webkit-</code> dans Firefox mais pas pris en charge sans préfixe. Microsoft Edge et IE Mobile prennent en charge cette propriété avec le préfixe <code>-webkit-</code> plutôt qu'avec <code>-ms-</code> à des fins d'interopérabilité.<br>
+ ** Ces valeurs sont prises en charges bien qu'elles ne soient pas standard et qu'elles ne soient pas en cours de standardisation.<br>
+ *** On privliégiera l'utilisation des propriétés <code>flex-box</code>.</p>
+
+<h2 id="Pseudo-classes">Pseudo-classes</h2>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef(":animating-full-screen-transition", ":-webkit-animating-full-screen-transition")}}</li>
+ <li>{{CSSxRef(":any()", ":-webkit-any()")}}</li>
+ <li>{{CSSxRef(":any-link", ":-webkit-any-link")}}*</li>
+ <li>{{CSSxRef(":autofill",":-webkit-autofill")}}</li>
+ <li>{{CSSxRef(":autofill-strong-password",":-webkit-autofill-strong-password")}}</li>
+ <li>{{CSSxRef(":drag",":-webkit-drag")}}</li>
+ <li>{{CSSxRef(":full-page-media",":-webkit-full-page-media")}}</li>
+ <li>{{CSSxRef(":full-screen", ":-webkit-full-screen")}}*</li>
+ <li>{{CSSxRef(":full-screen-ancestor",":-webkit-full-screen-ancestor")}}</li>
+ <li>{{CSSxRef(":full-screen-document",":-webkit-full-screen-document")}}</li>
+ <li>{{CSSxRef(":full-screen-controls-hidden",":-webkit-full-screen-controls-hidden")}}</li>
+</ul>
+</div>
+
+<h2 id="Pseudo-éléments">Pseudo-éléments</h2>
+
+<p>Pour des raisons de compatibilité web, Blink, WebKit et Gecko considèrent les pseudo-éléments commençant par <code>::-webkit-</code> comme valides.</p>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("::-webkit-file-upload-button")}}</li>
+ <li>{{CSSxRef("::-webkit-inner-spin-button")}}</li>
+ <li>{{CSSxRef("::-webkit-input-placeholder")}}</li>
+ <li>{{CSSxRef("::-webkit-meter-bar")}}</li>
+ <li>{{CSSxRef("::-webkit-meter-even-less-good-value")}}</li>
+ <li>{{CSSxRef("::-webkit-meter-inner-element")}}</li>
+ <li>{{CSSxRef("::-webkit-meter-optimum-value")}}</li>
+ <li>{{CSSxRef("::-webkit-meter-suboptimum-value")}}</li>
+ <li>{{CSSxRef("::-webkit-outer-spin-button")}}</li>
+ <li>{{CSSxRef("::-webkit-progress-bar")}}</li>
+ <li>{{CSSxRef("::-webkit-progress-inner-element")}}</li>
+ <li>{{CSSxRef("::-webkit-progress-value")}}</li>
+ <li>{{CSSxRef("::-webkit-search-cancel-button")}}</li>
+ <li>{{CSSxRef("::-webkit-search-results-button")}}</li>
+ <li>{{CSSxRef("::-webkit-slider-runnable-track")}}</li>
+ <li>{{CSSxRef("::-webkit-slider-thumb")}}</li>
+</ul>
+</div>
+
+<h2 id="Caractéristiques_média">Caractéristiques média</h2>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("@media/-webkit-animation", "-webkit-animation")}}</li>
+ <li>{{CSSxRef("@media/-webkit-device-pixel-ratio", "-webkit-device-pixel-ratio")}}</li>
+ <li>{{CSSxRef("@media/-webkit-transform-2d", "-webkit-transform-2d")}}</li>
+ <li>{{CSSxRef("@media/-webkit-transform-3d", "-webkit-transform-3d")}}</li>
+ <li>{{CSSxRef("@media/-webkit-transition", "-webkit-transition")}}</li>
+</ul>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://trac.webkit.org/wiki/Styling%20Form%20Controls" title="https://trac.webkit.org/wiki/Styling Form Controls">La mise en forme des contrôles de formulaires sur le Trac WebKit (en anglais)</a></li>
+ <li>Une liste complémentaire d'extensions WebKit <a href="https://gist.github.com/afabbro/3759334">https://gist.github.com/afabbro/3759334</a></li>
+ <li><a href="/fr/docs/Web/CSS/Microsoft_CSS_extensions">Les extensions CSS relatives à Microsoft</a></li>
+ <li><a href="/fr/docs/Web/CSS/Mozilla_Extensions">Les extensions CSS relatives à Mozilla</a></li>
+</ul>
diff --git a/files/fr/web/css/white-space/index.html b/files/fr/web/css/white-space/index.html
new file mode 100644
index 0000000000..f283a49408
--- /dev/null
+++ b/files/fr/web/css/white-space/index.html
@@ -0,0 +1,208 @@
+---
+title: white-space
+slug: Web/CSS/white-space
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/white-space
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>white-space</code></strong> est utilisée pour décrire la façon dont les blancs sont gérés au sein de l'élément.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/white-space.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note">
+<p><strong>Note :</strong> Afin d'obtenir une césure au sein des mots, il faudra utiliser {{cssxref("overflow-wrap")}}, {{cssxref("word-break")}} ou bien {{cssxref("hyphens")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Avec un mot-clé */
+white-space: normal;
+white-space: nowrap;
+white-space: pre;
+white-space: pre-wrap;
+white-space: pre-line;
+white-space: break-spaces;
+
+/* Valeurs globales */
+white-space: inherit;
+white-space: initial;
+white-space: unset;
+</pre>
+
+<p>La propriété <code>white-space</code> se définit avec l'un des mots-clés suivants.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>break-spaces</code></dt>
+ <dd>Le comportement est identique à celui de <code>pre-wrap</code> mais chaque séquence de blancs continue d'occuper un espace, y compris en fin de ligne. Il y aura une opportunité de saut de ligne après chaque blanc. De tels espaces auront un impact sur les dimensions intrinsèques de la boîte (<code>min-content</code> et <code>max-content</code>).</dd>
+ <dt><code>normal</code></dt>
+ <dd>Les séries de blancs sont regroupées, les caractères de saut de ligne sont gérés comme les autres blancs. Les passages à la ligne sont faits naturellement pour remplir les boîtes.</dd>
+ <dt><code>nowrap</code></dt>
+ <dd>Les blancs sont regroupés comme avec <code>normal</code> mais les passages à la ligne automatiques sont supprimés.</dd>
+ <dt><code>pre</code></dt>
+ <dd>Les séries de blancs sont conservées telles quelles. Les sauts de ligne ont uniquement lieu avec les caractères de saut de ligne et avec les éléments {{HTMLElement("br")}}.</dd>
+ <dt><code>pre-wrap</code></dt>
+ <dd>Les séries de blancs sont conservées telles quelles. Les sauts de ligne ont lieu avec les caractères de saut de ligne, avec {{HTMLElement("br")}} et on a des passages à la ligne automatiques.</dd>
+ <dt><code>pre-line</code></dt>
+ <dd>Les séries de blancs sont regroupées, les sauts de lignes ont lieu avec les caractères de saut de ligne, les éléments {{HTMLElement("br")}} et on a des passages à la ligne automatiques.</dd>
+</dl>
+
+<p>Le tableau qui suit résume le comportement des différentes valeurs :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th></th>
+   <th>Nouvelles lignes</th>
+   <th>Espaces et tabulations</th>
+   <th>Retour à la ligne automatique</th>
+   <th>Espaces en fin de ligne</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th><code>normal</code></th>
+   <td>Regroupées</td>
+   <td>Regroupés</td>
+   <td>Oui</td>
+   <td>Retirés</td>
+  </tr>
+  <tr>
+   <th><code>nowrap</code></th>
+   <td>Regroupées</td>
+   <td>Regroupés</td>
+   <td>Non</td>
+   <td>Retirés</td>
+  </tr>
+  <tr>
+   <th><code>pre</code></th>
+   <td>Préservées</td>
+   <td>Préservés</td>
+   <td>Non</td>
+   <td>Conservés</td>
+  </tr>
+  <tr>
+   <th><code>pre-wrap</code></th>
+   <td>Préservées</td>
+   <td>Préservés</td>
+   <td>Oui</td>
+   <td>Suspendus</td>
+  </tr>
+  <tr>
+   <th><code>pre-line</code></th>
+   <td>Préservées</td>
+   <td>Regroupés</td>
+   <td>Oui</td>
+   <td>Retirés</td>
+  </tr>
+  <tr>
+   <th><code>break-spaces</code></th>
+   <td>Préservées</td>
+   <td>Regroupés</td>
+   <td>Oui</td>
+   <td>Passent à la ligne.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;code&gt;
+var coucou = function(){
+  // on notera l'indentation
+  // avec deux espaces
+  console.log("Hello World");
+
+  var toto = function(){
+    // ici 4 espaces
+    console.log("Toto");
+  }
+  toto();
+}
+&lt;/code&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">code {
+  white-space: pre;
+}</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemple_simple")}}</p>
+
+<h3 id="Passage_automatique_à_la_ligne_dans_un_élément_pre">Passage automatique à la ligne dans un élément <code>pre</code></h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;pre&gt;
+function jeNAuraisJamaisDuAppelerCetteFonctionAvecUnNomAussiLong(toto){
+  console.log("Tout ça pour ça");
+}
+&lt;/pre&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">pre {
+  word-wrap: break-word;      /* IE 5.5-7 */
+  white-space: pre-wrap;      /* current browsers */
+}</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Passage_automatique_à_la_ligne_dans_un_élément_pre")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text', '#propdef-white-space', 'white-space')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Définition de l'algorithme des césures de ligne et ajout de <code>break-spaces</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html#white-space-prop', 'white-space')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une <em>pull request</em> sur ce dépôt: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<div>{{Compat("css.properties.white-space")}}</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("overflow-wrap")}}</li>
+ <li>{{cssxref("word-break")}}</li>
+ <li>{{cssxref("hyphens")}}</li>
+</ul>
diff --git a/files/fr/web/css/widows/index.html b/files/fr/web/css/widows/index.html
new file mode 100644
index 0000000000..991a6f8a38
--- /dev/null
+++ b/files/fr/web/css/widows/index.html
@@ -0,0 +1,118 @@
+---
+title: widows
+slug: Web/CSS/widows
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/widows
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>widows</code></strong> définit le nombre minimum de lignes qui peuvent être laissées en haut de la <a href="/fr/docs/Web/CSS/Medias_paginés">page</a>, région ou <a href="/fr/docs/Web/CSS/Colonnes_CSS">colonne</a> suivante. En utilisant la propriété <code>widows</code>, on évite d'avoir des veuves sur une seule ligne.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs entières */
+/* type &lt;integer&gt; */
+widows: 2;
+widows: 3;
+
+/* Valeurs globales */
+widows: inherit;
+widows: initial;
+widows: unset;
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> En typographie, une ligne veuve est la dernière ligne d'un paragraphe qui apparaît seule en haut d'une nouvelle page (alors que le paragraphe démarrait sur une page antérieure).</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;integer&gt;</code></dt>
+ <dd>Cet entier indique le nombre minimum de lignes qui peuvent apparaître en haut d'une nouvelle page, région ou colonne lorsqu'une rupture intervient. Si la valeur est négative, la déclaration est invalide.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[4]">div {
+  background-color: #8cffa0;
+  columns: 3;
+  widows: 2;
+}
+
+p {
+  background-color: #8ca0ff;
+}
+
+p:first-child {
+  margin-top: 0;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p&gt;Un premier paragraphe avec un peu de texte.&lt;/p&gt;
+  &lt;p&gt;Un deuxième paragraphe avec un peu plus de texte et qui permet d'illustrer le fonctionnement de widows.&lt;/p&gt;
+  &lt;p&gt;Enfin, un troisième paragraphe avec un peu plus de texte que le premier.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résult">Résult</h3>
+
+<p>{{EmbedLiveSample("Exemple", 400, 160)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fragmentation', '#widows-orphans', 'widows')}}</td>
+   <td>{{Spec2('CSS3 Fragmentation')}}</td>
+   <td>Extension de <code>widows</code> qui peut désormais être appliqué à n'importe quel type de fragment : pages, régions ou colonnes.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Multicol', '#filling-columns', 'widows')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>Recommandation d'utiliser <code>widows</code> avec les colonnes.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'page.html#break-inside', 'widows')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<p> </p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.widows")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("orphans")}}</li>
+ <li><a href="/fr/docs/Web/CSS/Medias_paginés">Médias paginés</a></li>
+</ul>
diff --git a/files/fr/web/css/width/index.html b/files/fr/web/css/width/index.html
new file mode 100644
index 0000000000..1ac1058848
--- /dev/null
+++ b/files/fr/web/css/width/index.html
@@ -0,0 +1,215 @@
+---
+title: width
+slug: Web/CSS/width
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/width
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>width</code></strong> permet de définir la largeur de la <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">boîte du contenu</a> d'un élément. Par défaut, sa valeur est <strong><code>auto</code></strong>, c'est à dire la largeur automatiquement calculée de son contenu. Si {{cssxref("box-sizing")}} vaut <code>border-box</code>, la valeur appliquée incluera les dimensions de la boîte d'encadrement (<em>border</em>) et de la boîte de remplissage (<em>padding</em>).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/width.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note">
+<p><strong>Note :</strong> Les propriétés {{cssxref("min-width")}} et {{cssxref("max-width")}} permettent de surcharger {{cssxref("width")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css">/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+width: 300px;
+width: 25em;
+
+/* Valeurs en pourcentages */
+/* Type &lt;percentage&gt; */
+width: 75%;
+
+/* Avec un mot-clé */
+width: 25em border-box;
+width: 75% content-box;
+width: max-content;
+width: min-content;
+width: available;
+width: fit-content;
+width: auto;
+
+/* Valeurs globales */
+width: inherit;
+width: initial;
+width: unset;
+</pre>
+
+<p>La propriété <code>width</code> se définit avec</p>
+
+<ul>
+ <li>un des mots-clés suivants : <code><a href="#available">available</a></code>, <code><a href="#min-content">min-content</a></code>, <code><a href="#max-content">max-content</a></code>, <code><a href="#fit-content">fit-content</a></code>, <code><a href="#auto">auto</a></code>.</li>
+ <li>ou une valeur de longeur (<code><a href="#length">&lt;length&gt;</a></code>) ou de pourcentage (<code><a href="#percentage">&lt;percentage&gt;</a></code>) éventuellement suivie par le mots-clé <code><a href="#border-box">border-box</a></code> ou <code><a href="#content-box">content-box</a></code>.</li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><a id="length" name="length"><code>&lt;length&gt;</code></a></dt>
+ <dd>Voir {{cssxref("&lt;length&gt;")}} pour les unités qui peuvent être utilisées.</dd>
+ <dt><a id="percentage" name="percentage"><code>&lt;percentage&gt;</code></a></dt>
+ <dd>Permet de définir la largeur en pourcentages ({{cssxref("&lt;percentage&gt;")}}) par rapport à la largeur du bloc contenant le bloc courant. Si la largeur du bloc englobant dépend de la largeur de l'élément, la disposition est indéfinie.</dd>
+ <dt><code><a id="border-box" name="border-box">border-box</a> </code>{{experimental_inline}}</dt>
+ <dd>Si cette valeur est présente, la longueur ({{cssxref("&lt;length&gt;")}}) ou le pourcentage ({{cssxref("&lt;percentage&gt;")}}) est appliqué à la boîte de bordure (<em>border</em>) de l'élément.</dd>
+ <dt><a id="content-box" name="content-box"><code>content-box</code></a> {{experimental_inline}}</dt>
+ <dd>Si cette valeur est présente, la longueur ({{cssxref("&lt;length&gt;")}}) ou le pourcentage ({{cssxref("&lt;percentage&gt;")}}) est appliqué à la boîte de contenu de l'élément.</dd>
+ <dt><a id="auto" name="auto"><code>auto</code></a></dt>
+ <dd>Le navigateur calculera et sélectionnera une largeur pour l'élément.</dd>
+ <dt><a id="fill" name="fill"><code>fill</code></a> {{experimental_inline}}</dt>
+ <dd>Utilise la taille <code>fill-available</code> dans l'axe du sens de lecture ou la taille <code>fill-available</code> dans l'axe perpendiculaire au sens de lecture selon le mode d'écriture.</dd>
+ <dt><a id="max-content" name="max-content"><code>max-content</code></a> {{experimental_inline}}</dt>
+ <dd>La largeur intrinsèque préférée.</dd>
+ <dt><a id="min-content" name="min-content"><code>min-content</code></a> {{experimental_inline}}</dt>
+ <dd>La largeur intrinsèque minimum.</dd>
+ <dt><a id="available" name="available"><code>available</code></a> {{experimental_inline}}</dt>
+ <dd>La largeur du bloc contenant le bloc courant, moins la marge horizontale, la bordure et le remplissage (<em>padding</em>).</dd>
+ <dt id="fit-content"><a id="fit-content" name="fit-content"><code>fit-content</code></a> {{experimental_inline}}</dt>
+ <dd>La quantité la plus grande entre :
+ <ul>
+  <li>La largeur intrinsèque minimum</li>
+  <li>Le minimum entre la largeur intrinsèque préférée et la largeur disponible</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Valeur_par_défaut">Valeur par défaut</h3>
+
+<pre class="brush:css">p.goldie {
+  background: gold;
+}</pre>
+
+<pre class="brush:html">&lt;p class="goldie"&gt;La communauté Mozilla ressemble à un panda roux.&lt;/p&gt;</pre>
+
+<p>{{EmbedLiveSample('Valeur_par_défaut', '500px', '64px')}}</p>
+
+<h3 id="En_utilisant_les_pixels_et_les_em">En utilisant les pixels et les <code>em</code></h3>
+
+<pre class="brush: css">.longueur_px {
+  width: 200px;
+  background-color: red;
+  color: white;
+  border: 1px solid black;
+}
+
+.longueur_em {
+  width: 20em;
+  background-color: white;
+  color: red;
+  border: 1px solid black;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="longueur_px"&gt;Largeur mesurée en pixels&lt;/div&gt;
+&lt;div class="longueur_em"&gt;Largeur mesurée en ems&lt;/div&gt;</pre>
+
+<p>{{EmbedLiveSample('En_utilisant_les_pixels_et_les_em', '500px', '64px')}}</p>
+
+<h3 id="En_utilisant_les_pourcentages">En utilisant les pourcentages</h3>
+
+<pre class="brush: css">.pourcent {
+  width: 20%;
+  background-color: silver;
+  border: 1px solid red;
+}</pre>
+
+<pre class="brush: html">&lt;div class="pourcent"&gt;Largeur exprimée en pourcentages&lt;/div&gt;</pre>
+
+<p>{{EmbedLiveSample('En_utilisant_les_pourcentages', '500px', '64px')}}</p>
+
+<h3 id="En_utilisant_max-content">En utilisant <code>max-content</code></h3>
+
+<pre class="brush:css;">p.maxgreen {
+  background: lightgreen;
+  width: intrinsic;           /* Safari/WebKit utilisent un nom non-standard */
+  width: -moz-max-content;    /* Firefox/Gecko */
+  width: -webkit-max-content; /* Chrome */
+}</pre>
+
+<pre class="brush:html">&lt;p class="maxgreen"&gt;La communauté Mozilla ressemble à un panda roux.&lt;/p&gt;</pre>
+
+<p>{{EmbedLiveSample('En_utilisant_max-content', '500px', '64px')}}</p>
+
+<h3 id="En_utilisant_min-content">En utilisant <code>min-content</code></h3>
+
+<pre class="brush:css">p.minblue {
+  background: lightblue;
+  width: -moz-min-content;    /* Firefox */
+  width: -webkit-min-content; /* Chrome */
+}</pre>
+
+<pre class="brush:html">&lt;p class="minblue"&gt;La communauté Mozilla ressemble à un panda roux.&lt;/p&gt;</pre>
+
+<p>{{EmbedLiveSample('En_utilisant_min-content', '500px', '155px')}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Il faut s'assurer que les éléments sur lesquels on utilise <code>width</code> ne sont pas tronqués et ne masquent pas d'autre contenu sur la page lorsque l'utilisateur zoome afin d'agrandir la taille du texte.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html" rel="noopener"><em>Understanding Success Criterion 1.4.4  | Understanding WCAG 2.0</em> (en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}}</td>
+   <td>{{Spec2('CSS3 Sizing')}}</td>
+   <td>Ajout des mots-clés <code>max-content</code>, <code>min-content</code>, <code>available</code>, <code>fit-content</code>, <code>border-box</code> et <code>content-box</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'width')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>width</code> peut désormais être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visudet.html#the-width-property', 'width')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Précision sur les éléments auxquels peuvent être appliquée la propriété.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#width', 'width')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.width")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Modèle_de_boîte">Le modèle de boîtes</a>, {{cssxref("height")}}, {{cssxref("box-sizing")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}</li>
+</ul>
diff --git a/files/fr/web/css/will-change/index.html b/files/fr/web/css/will-change/index.html
new file mode 100644
index 0000000000..177af45c33
--- /dev/null
+++ b/files/fr/web/css/will-change/index.html
@@ -0,0 +1,133 @@
+---
+title: will-change
+slug: Web/CSS/will-change
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/will-change
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>will-change</code></strong> fournit une indication au navigateur sur la propension d'un élément à changer (afin que le navigateur puisse mettre en place les optimisations nécessaires avant que l'élément change vraiment). Ce type d'optimisation permet d'augmenter la réactivité de la page en effectuant des calculs (éventuellement coûteux) en prévision du changement.</p>
+
+<div class="warning">
+<p><strong>Attention !</strong> <code>will-change</code> est conçu pour être utilisé en dernier recours afin d'aider à la résolutions de problèmes de performance existants. Il ne doit pas être utilisé partout de façon purement préventive.</p>
+</div>
+
+<pre class="brush:css no-line-numbers notranslate">/* Avec un mot-clé */
+will-change: auto;
+will-change: scroll-position;
+will-change: contents;
+will-change: transform;        /* Exemple de &lt;custom-ident&gt; */
+will-change: opacity;          /* Exemple de &lt;custom-ident&gt; */
+will-change: left, top;        /* Exemple de deux &lt;animateable-feature&gt; */
+
+/* Valeurs globales */
+will-change: inherit;
+will-change: initial;
+will-change: unset;
+</pre>
+
+<p>Il est parfois difficile de bien utiliser cette propriété :</p>
+
+<ul>
+ <li>
+  <p id="Don't_apply_will-change_to_too_many_elements"><em>Il ne faut pas appliquer <code>will-change</code> à de trop nombreux éléments.</em> Le navigateur essaie déjà d'optimiser de nombreuses choses. Certaines de ces optimisations sont fortement couplées avec <code>will-change</code> pour utiliser les ressources de l'ordinateur. Aussi, si <code>will-change</code> est « trop » utilisé, cela peut ralentir la page et consommer intensivement les ressources.</p>
+ </li>
+ <li>
+  <p><em>À utiliser avec parcimonie.</em> Normalement, le navigateur essaie d'appliquer les optimisations dès que possible afin de revenir au plus vite dans un état normal. En revanche, en utilisant <code>will-change</code> dans la feuille de style, on indique que les éléments ciblés vont bientôt changer et le navigateur conservera les optimisations en cours beaucoup plus longtemps si la propriété est maintenue. Il est donc conseillé d'activer et de désactiver <code>will-change</code> de façon pertinente grâce à du script avant et après le changement concerné.</p>
+ </li>
+ <li>
+  <p><em>Ne pas « sur-optimiser » avec <code>will-change</code></em>. Si votre page fonctionne correctement, n'ajoutez pas la propriété <code>will-change</code> sur certains éléments uniquement pour gagner un peu de vitesse. <code>will-change</code> est conçu pour être utilisé en dernier ressort afin de régler les problèmes de performances existants. En utilisant <code>will-change</code> trop souvent, cela consommera plus de mémoire, complexifiera le rendu de la page pour le navigateur (qui se préparera au changement). En bref, cela réduira les performances de la page.</p>
+ </li>
+ <li>
+  <p id="Give_it_sufficient_time_to_work"><em>Laisser le temps à <code>will-change</code> pour qu'il fonctionne.</em> Cette propriété est conçue pour permettre aux auteurs d'indiquer à l'agent-utilisateur les propriétés qui vont probablement changer afin que le navigateur puisse optimiser en avance de phase. Il est donc important de laisser le temps au navigateur d'appliquer ces opérations pour que l'effet obtenu soit bénéfique. Pour cela, mieux vaut donc prévoir légèrement avant le changement que celui-ci aura lieu et alors modifier <code>will-change</code> en prévision.</p>
+ </li>
+ <li>
+  <p><em>Sachez que <code>will-change</code></em><em> peut modifier l'apparence des éléments</em> lorsqu'il est utilisé avec des propriétés qui créent <a href="/fr/docs/Web/CSS/Comprendre_z-index/Empilement_de_couches">des contextes d'empilement</a> (par exemple <code>will-change: opacity</code>) car le contexte d'empilement est créé au préalable.</p>
+ </li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Ce mot-clé ne traduit pas d'intention particulière. Dans ce cas, l'agent utilisateur applique les méthodes d'optimisations et heuristiques normales.</dd>
+</dl>
+
+<p>Un valeur de type <code>&lt;animateable-feature&gt;</code> peut être :</p>
+
+<dl>
+ <dt><code>scroll-position</code></dt>
+ <dd>L'auteur indique que le défilement de l'élément va prochainement être animé et/ou modifié.</dd>
+ <dt><code>contents</code></dt>
+ <dd>L'auteur indique que le contenu de l'élément va prochainement être modifié ou animé.</dd>
+ <dt>{{cssxref("custom-ident", "&lt;custom-ident&gt;")}}</dt>
+ <dd>Ce type permet d'indiquer que la propriété donnée va prochainement être modifiée ou animée. Si la propriété fournie est un raccourci, on s'attendra à ce que toutes les propriétés détaillées correspondantes soient animées ou changées. Une valeur de ce type ne peut pas être <code>unset</code>, <code>initial</code>, <code>inherit</code>, <code>will-change</code>, <code>auto</code>, <code>scroll-position</code>, ou <code>contents</code>. La spécification ne définit pas le comportement d'une valeur spécifique mais généralement, lorsqu'on utilise <code>transform</code>, cela indique que les couches qui composent la page vont évoluer. <a href="https://github.com/operasoftware/devopera/pull/330">Chrome prend deux mesures</a> selon les propriétés utilisées ici : il établit une nouvelle composition des couches de rendu ou crée un nouveau contexte d'empilement.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css notranslate">.sidebar {
+  will-change: transform;
+}
+</pre>
+
+<p>Dans l'exemple précédent, on applique la propriété <code>will-change</code> à même la feuille de style. Dans ce cas, le navigateur conservera l'optimisation en mémoire beaucoup plus longtemps que nécessaire. Nous avons vu précédemment que cela devait être évité et voici donc un deuxième exemple qui illustre comment appliquer la propriété <code>will-change</code> grâce à JavaScript (et qui correspond donc à la méthode qui devrait être utilisée la plupart du temps) :</p>
+
+<pre class="brush: js notranslate">var el = document.getElementById('element');
+
+// On applique will-change quand la souris/curseur
+// pointeur/stylet passe au-dessus de l'élément
+el.addEventListener('mouseenter', hintBrowser);
+el.addEventListener('animationEnd', removeHint);
+
+function hintBrowser() {
+  // On liste les propriétés sujettes au changement
+  // lors de l'animation
+  this.style.willChange = 'transform, opacity';
+}
+
+function removeHint() {
+  this.style.willChange = 'auto';
+}</pre>
+
+<p>Cela peut toutefois être pertinent d'inclure <code>will-change</code> dans la feuille de style d'une application qui gère des changements de pages ou des diapositives parmi lesquelles on navigue lorsque les pages sont complexes. Cela permettra au navigateur de préparer la transition en avance de phase et de mieux réagir au changement de page (ou de diapositive) lorsque le bouton associé sera utilisé.</p>
+
+<pre class="brush: css notranslate">.slide {
+  will-change: transform;
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Will Change', '#will-change', 'will-change')}}</td>
+   <td>{{Spec2('CSS Will Change')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.will-change")}}</p>
diff --git a/files/fr/web/css/word-break/index.html b/files/fr/web/css/word-break/index.html
new file mode 100644
index 0000000000..36f25e5028
--- /dev/null
+++ b/files/fr/web/css/word-break/index.html
@@ -0,0 +1,130 @@
+---
+title: word-break
+slug: Web/CSS/word-break
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/word-break
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété<strong> <code>word-break</code></strong> est utilisée pour définir la façon dont la césure s'applique pour les endroits où le texte dépasserait de sa boîte de contenu.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/word-break.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Avec un mot-clé */
+word-break: normal;
+word-break: break-all;
+word-break: keep-all;
+word-break: break-word; /* dépréciée */
+
+/* Valeurs globales */
+word-break: inherit;
+word-break: initial;
+word-break: unset;
+</pre>
+
+<p>La propriété <code>word-break</code> est définie avec un mot-clé parmi ceux décrits ci-après.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Le passage à la ligne classique est utilisé.</dd>
+ <dt><code>break-all</code></dt>
+ <dd>La césure peut être insérée après n'importe quel caractère (ne s'applique pas pour les textes en chinois, japonais et coréen).</dd>
+ <dt><code>keep-all</code></dt>
+ <dd>La césure est interdite pour les textes en chinois, japonais et coréen. Pour les autres types de texte, le comportement est le même que <code>normal</code>.</dd>
+ <dt><code>break-word</code>{{deprecated_inline}}</dt>
+ <dd>Aura le même effet que <code>word-break: normal</code> et que <code>overflow-wrap: anywhere</code> quelle que soit la valeur de la propriété {{cssxref("overflow-wrap")}}.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> Contrairement à <code>word-break: break-word</code> et à <code>overflow-wrap: break-word</code> (cf. {{cssxref("overflow-wrap")}}), <code>word-break: break-all</code> créera une césure à l'endroit exact où le mot aurait dépassé du conteneur (même si placer le mot entier sur sa propre ligne aurait pu éviter la césure).</p>
+</div>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="normal étroit"&gt; Voici une Supercalifragilisticexpialidocious califragilisticexpialidocious phrase. グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉 &lt;/p&gt;
+&lt;p class="breakAll étroit"&gt; Voici une Supercalifragilisticexpialidocious califragilisticexpialidocious phrase. グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉 &lt;/p&gt;
+&lt;p class="breakWord étroit"&gt; Voici une Supercalifragilisticexpialidocious califragilisticexpialidocious phrase. グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉 &lt;/p&gt;
+&lt;p class="keep étroit"&gt; Voici une Supercalifragilisticexpialidocious califragilisticexpialidocious phrase.  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.étroit {
+  padding: 10px;
+  border: 1px solid;
+  width: 500px;
+  margin: 0 auto;
+  font-size: 20px;
+  line-height: 1.5;
+  letter-spacing: 1px;
+}
+
+.normal {
+  word-break: normal;
+}
+
+.breakAll {
+  word-break: break-all;
+}
+
+.keep {
+  word-break: keep-all;
+}
+
+.breakWord {
+  word-break: break-word;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemple','100%',600)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text', '#word-break-property', 'word-break')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une <em>pull request</em> sur ce dépôt: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("css.properties.word-break")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("word-wrap")}}</li>
+ <li>{{cssxref("overflow-wrap")}}</li>
+</ul>
diff --git a/files/fr/web/css/word-spacing/index.html b/files/fr/web/css/word-spacing/index.html
new file mode 100644
index 0000000000..808ec87c68
--- /dev/null
+++ b/files/fr/web/css/word-spacing/index.html
@@ -0,0 +1,128 @@
+---
+title: word-spacing
+slug: Web/CSS/word-spacing
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/word-spacing
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>word-spacing</code></strong> définit la règle d'espacement utilisée entre les balises et entre les mots.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/word-spacing.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Avec un mot-clé */
+word-spacing: normal;
+
+/* Valeurs de longueur */
+/* type &lt;length&gt; */
+word-spacing: 3px;
+word-spacing: 0.3em;
+
+/* Valeurs en pourcentages */
+/* type &lt;percentage&gt; */
+word-spacing: 50%;
+word-spacing: 200%;
+
+/* Valeurs globales */
+word-spacing: inherit;
+word-spacing: initial;
+word-spacing: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>L'espace normale entre les mots (ou inter-mot), tel qu'il est défini par la police courante et/ou le navigateur.</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une valeur de longueur définit l'espace qu'on ajoute à l'inter-mot intrinsèque défini par la police. Voir {{cssxref("&lt;length&gt;")}} pour les différentes valeurs et unités possibles.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Une valeur en pourcentages définit la taille de l'inter-mot à utiliser par rapport à la position du prochain caractère (si on utilise <code>-100%</code>, l'espace sera nul et si on utilise <code>100%</code>, il sera doublé). Voir {{cssxref("&lt;percentage&gt;")}} pour les différentes valeurs et unités possibles.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p id="ligne1"&gt;Voici le texte de la ligne 1 &lt;/p&gt;
+&lt;p id="ligne2" &gt;Et voilà celui de la ligne 2 &lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#ligne1 {
+  word-spacing: 15px;
+}
+
+#ligne2 {
+  word-spacing: 5em;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemple")}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Utiliser des valeurs trop importantes (positives ou négatives) pour <code>word-spacing</code> rend le texte illisible. Si l'espacement utilisé est trop grand, la structure visuelle ne permettra plus d'identifier une phrase. Si l'espacement est trop petit, les mots se chevaucheront et on ne pourra plus distinguer le début et la fin de chaque mot.</p>
+
+<p>La bonne valeur à utiliser pour <code>word-spacing</code> doit être déterminée au cas par cas, en fonction du type de police utilisé et de la largeur de celle-ci.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener">Understanding Success Criterion 1.4.8 - W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text', '#propdef-word-spacing', 'word-spacing')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Remplace les valeurs précédentes avec une valeur <code>&lt;spacing-limit&gt;</code> qui définit la même valeur et la valeur <code>&lt;percentage&gt;</code> et permet d'avoir trois valeurs pour décrire un optimum, un minimum, et un maximum.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'word-spacing')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>word-spacing</code> peut désormais être animé.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html#propdef-word-spacing', 'word-spacing')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Aucun changement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#word-spacing', 'word-spacing')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une <em>pull request</em> sur ce dépôt: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("css.properties.word-spacing")}}</p>
diff --git a/files/fr/web/css/writing-mode/index.html b/files/fr/web/css/writing-mode/index.html
new file mode 100644
index 0000000000..6fb8e222ca
--- /dev/null
+++ b/files/fr/web/css/writing-mode/index.html
@@ -0,0 +1,210 @@
+---
+title: writing-mode
+slug: Web/CSS/writing-mode
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/writing-mode
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>writing-mode</code></strong> définit si les lignes d'un texte sont écrites horizontalement ou verticalement et la direction selon laquelle le bloc grandit. Lorsque cette propriété est définie pour un document entier, elle devrait être appliquée à la racine (soit l'élément {{HTMLElement("html")}} pour les documents HTML).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/writing-mode.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La propriété définit la direction du flux du bloc. C'est dans cette direction que les conteneurs de bloc seront empilés et c'est dans cette direction que le contenu en flux « coule » dans un bloc contenur. Ainsi, la propriété <code>writing-mode</code> détermine également l'ordre du contenu de niveau bloc.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Avec un mot-clé */
+writing-mode: horizontal-tb;
+writing-mode: vertical-rl;
+writing-mode: vertical-lr;
+
+/* Valeurs globales */
+writing-mode: inherit;
+writing-mode: initial;
+writing-mode: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>horizontal-tb</code></dt>
+ <dd>Le contenu coule horizontalement de gauche à droite puis de haut en bas. La ligne horizontale suivante est positionnée sous la ligne précédente.</dd>
+ <dt><code>vertical-rl</code></dt>
+ <dd>Le contenu coule verticalement de haut en bas puis horizontalement de droite à gauche. La ligne verticale suivante est positionnée à gauche de la ligne précédente.</dd>
+ <dt><code>vertical-lr</code></dt>
+ <dd>Le contenu coule verticalement de haut en bas puis horizontalement de gauche à droite. La ligne verticale suivante est positionnée à droite de la ligne précédente.</dd>
+ <dt><code>sideways-rl</code>{{experimental_inline}}</dt>
+ <dd>Le contenu coule verticalement du haut vers le bas et tous les glyphes, y compris pour les systèmes d'écriture verticaux sont tournés sur le côté, vers la droite.</dd>
+</dl>
+
+<dl>
+ <dt><code>sideways-lr</code>{{experimental_inline}}</dt>
+ <dd>Le contenu coule verticalement du haut vers le bas et tous les glyphes, y compris pour les systèmes d'écriture verticaux sont tournés sur le côté, vers la gauche.</dd>
+ <dt><code>lr</code> {{deprecated_inline}}</dt>
+ <dd>Valeur dépréciée, sauf pour les documents SVG1. Pour CSS, il faut utiliser <code>horizontal-tb</code>.</dd>
+ <dt><code>lr-tb</code> {{deprecated_inline}}</dt>
+ <dd>Valeur dépréciée, sauf pour les documents SVG1. Pour CSS, il faut utiliser <code>horizontal-tb</code>.</dd>
+ <dt><code>rl</code> {{deprecated_inline}}</dt>
+ <dd>Valeur dépréciée, sauf pour les documents SVG1. Pour CSS, il faut utiliser <code>horizontal-tb</code>.</dd>
+ <dt><code>tb</code> {{deprecated_inline}}</dt>
+ <dd>Valeur dépréciée, sauf pour les documents SVG1. Pour CSS, il faut utiliser <code>vertical-rl</code>.</dd>
+ <dt><code>tb-rl</code> {{deprecated_inline}}</dt>
+ <dd>Valeur dépréciée, sauf pour les documents SVG1. Pour CSS, il faut utiliser <code>vertical-rl</code>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<p>Ce fragment de code HTML contient un tableau ({{HTMLElement("table")}}) dont chaque ligne indique le mode d'écriture et des exemples de scripts utilisés.</p>
+
+<pre class="brush: html">&lt;table&gt;
+    &lt;tr&gt;
+        &lt;th&gt;Valeur&lt;/th&gt;
+        &lt;th&gt;Système d'écriture vertical&lt;/th&gt;
+        &lt;th&gt;Système d'écriture horizontal&lt;/th&gt;
+        &lt;th&gt;Système d'écriture hybride&lt;/th&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+        &lt;td&gt;horizontal-tb&lt;/td&gt;
+        &lt;td class="example Text1"&gt;我家没有电脑。&lt;/td&gt;
+        &lt;td class="example Text1"&gt;Example text&lt;/td&gt;
+        &lt;td class="example Text1"&gt;1994年に至っては&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+        &lt;td&gt;vertical-lr&lt;/td&gt;
+        &lt;td class="example Text2"&gt;我家没有电脑。&lt;/td&gt;
+        &lt;td class="example Text2"&gt;Example text&lt;/td&gt;
+        &lt;td class="example Text2"&gt;1994年に至っては&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+        &lt;td&gt;vertical-rl&lt;/td&gt;
+        &lt;td class="example Text3"&gt;我家没有电脑。&lt;/td&gt;
+        &lt;td class="example Text3"&gt;Example text&lt;/td&gt;
+        &lt;td class="example Text3"&gt;1994年に至っては&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+        &lt;td&gt;sideways-lr&lt;/td&gt;
+        &lt;td class="example Text4"&gt;我家没有电脑。&lt;/td&gt;
+        &lt;td class="example Text4"&gt;Example text&lt;/td&gt;
+        &lt;td class="example Text4"&gt;1994年に至っては&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+        &lt;td&gt;sideways-rl&lt;/td&gt;
+        &lt;td class="example Text5"&gt;我家没有电脑。&lt;/td&gt;
+        &lt;td class="example Text5"&gt;Example text&lt;/td&gt;
+        &lt;td class="example Text5"&gt;1994年に至っては&lt;/td&gt;
+    &lt;/tr&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<p>Cette première partie permet uniquement de rendre les choses plus agréables à lire :</p>
+
+<pre class="brush:css;">table {
+  border-collapse:collapse;
+}
+
+td, th {
+  border: 1px black solid; padding: 3px;
+}
+th {
+  background-color: lightgray;
+}
+</pre>
+
+<p>Ensuite, on ajoute la direction du contenu pour chaque cellule du tableau :</p>
+
+<pre class="brush:css;">.example.Text1 span, .example.Text1 {
+  writing-mode: horizontal-tb;
+  -webkit-writing-mode: horizontal-tb;
+  -ms-writing-mode: horizontal-tb;
+}
+
+.example.Text2 span, .example.Text2 {
+  writing-mode: vertical-lr;
+  -webkit-writing-mode: vertical-lr;
+  -ms-writing-mode: vertical-lr;
+}
+
+.example.Text3 span, .example.Text3 {
+  writing-mode: vertical-rl;
+  -webkit-writing-mode: vertical-rl;
+  -ms-writing-mode: vertical-rl;
+}
+
+.example.Text4 span, .example.Text4 {
+  writing-mode: sideways-lr;
+  -webkit-writing-mode: sideways-lr;
+  -ms-writing-mode: sideways-lr;
+}
+
+.example.Text5 span, .example.Text5 {
+  writing-mode: sideways-rl;
+  -webkit-writing-mode: sideways-rl;
+  -ms-writing-mode: sideways-rl;
+}
+</pre>
+
+<p>{{EmbedLiveSample("Exemple", 400, 500)}}</p>
+
+<h3 id="Résultat_statique">Résultat statique</h3>
+
+<p>Voici un aperçu du résultat avec un navigateur qui prend en charge <code>writing-mode</code> :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12201/writing-mode-actual-result.png" style="height: 430px; width: 351px;"></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Writing Modes", "#block-flow", "writing-mode")}}</td>
+   <td>{{Spec2("CSS3 Writing Modes")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS4 Writing Modes", "#block-flow", "writing-mode")}}</td>
+   <td>{{Spec2("CSS4 Writing Modes")}}</td>
+   <td>Ajout des valeurs <code>sideways-lr</code> et <code>sideways-rl</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.writing-mode")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'attribut SVG <code><a href="/fr/docs/Web/SVG/Attribute/writing-mode">writing-mode</a></code></li>
+ <li>{{cssxref("direction")}}</li>
+ <li>{{cssxref("unicode-bidi")}}</li>
+ <li>{{cssxref("text-orientation")}}</li>
+ <li>{{cssxref("text-combine-upright")}}</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Logical_Properties">Les propriétés logiques en CSS</a></li>
+ <li><a href="https://www.w3.org/International/articles/vertical-text/">Mettre en forme du texte vertical (chinois, coréen, japonais, mongol)</a></li>
+ <li><a href="https://w3c.github.io/i18n-tests/results/writing-mode-vertical">Tests de prise en charge des navigateurs</a></li>
+</ul>
diff --git a/files/fr/web/css/z-index/index.html b/files/fr/web/css/z-index/index.html
new file mode 100644
index 0000000000..854cf50eff
--- /dev/null
+++ b/files/fr/web/css/z-index/index.html
@@ -0,0 +1,144 @@
+---
+title: z-index
+slug: Web/CSS/z-index
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/z-index
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>z-index</code></strong> définit le « <em>z-order</em> » (NdT : « ordre z » n'est pas usité) d'un élément <a href="/fr/docs/Web/CSS/position">positionné</a> et de ses éléments fils ou de ses éléments flexibles (les enfants d'un élément avec <code>display: flex</code>). Lorsque des éléments se chevauchent, le <em>z-order</em> détermine l'ordre des différentes couches que formeront les éléments. Généralement, un élément couvrira un autre élément si sa valeur de  <code>z-index</code> est supérieure à celle du deuxième élément.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/z-index.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Pour les boîtes positionnées (celles pour lesquelles <code>position</code> est différent de <code>static</code>), la propriété <code>z-index</code> définit :</p>
+
+<ol>
+ <li>Le niveau de la boîte dans la pile par rapport <a href="/fr/docs/Web/CSS/Comprendre_z-index/L'empilement_de_couches">au contexte d'empilement</a> courant</li>
+ <li>Si la boîte crée un contexte d'empilement local.</li>
+</ol>
+
+<p>L'exemple ci-avant illustre l'impact de <code>z-index</code>. À gauche, on a dessiné trois boîtes qui se chevauchent avec <a href="/fr/docs/Learn/CSS/CSS_layout/Positioning#Absolute_positioning">un positionnement absolu</a>. Par défaut, les éléments sont empilés dans l'ordre dans lequel ils sont déclarés dans le document HTML. À droite, on présente le même document mais l'ordre des couches a été inversé grâce à <code>z-index</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Avec un mot-clé */
+z-index: auto;
+
+/* valeurs entières */
+/* type &lt;integer&gt; */
+z-index: 0;
+z-index: 3;
+z-index: 289;
+  /* On peut avoir des
+   valeurs négatives pour
+   réduire la propriété */
+z-index: -1;
+
+/* Valeurs globales */
+z-index: inherit;
+z-index: initial;
+z-index: unset;
+</pre>
+
+<p>La propriété <code>z-index</code> se définit grâce au mot-clé <code><a href="#auto">auto</a></code> ou grâce à une valeur entière (<code><a href="#integer">&lt;integer&gt;</a></code>).</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><a id="auto" name="auto"><code>auto</code></a></dt>
+ <dd>La boîte ne crée pas de nouveau contexte d'empilement. Le niveau d'empilement de la boîte dans le contexte d'empilement courant est le même que celui de la boîte parente.</dd>
+ <dt><a id="integer" name="integer"><code>&lt;integer&gt;</code></a></dt>
+ <dd>L'entier fourni (type {{cssxref("&lt;integer&gt;")}}) sera le niveau de la boîte dans la pile d'empilement pour le contexte d'empilement courant. La boîte crée un nouveau contexte d'empilement pour lequel son niveau est <code>0</code>. Cela signifie que les index z des descendants ne sont pas comparés à ceux des éléments en dehors de l'élément.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="boite-tirets"&gt;Boîte tirets
+  &lt;span class="boite-doree"&gt;Boîte dorée&lt;/span&gt;
+  &lt;span class="boite-verte"&gt;Boîte verte&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight:[3,11,19]">.boite-tirets {
+  position: relative;
+  z-index: 1;
+  border: dashed;
+  height: 8em;
+  margin-bottom: 1em;
+  margin-top: 2em;
+}
+.boite-doree {
+  position: absolute;
+  z-index: 3; /* .boite-doree sera au-dessus de .boite-verte et .boite-tirets */
+  background: gold;
+  width: 80%;
+  left: 60px;
+  top: 3em;
+}
+.boite-verte {
+  position: absolute;
+  z-index: 2; /* .boite-verte sera au-dessus de .boite-tirets */
+  background: lightgreen;
+  width: 20%;
+  left: 65%;
+  top: -25px;
+  height: 7em;
+  opacity: 0.9;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemple', '550', '200', '')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', "Comportement de z-index pour l'animation")}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Définit <code>z-index</code> comme pouvant être animé.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#z-index', 'z-index')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.z-index")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La propriété CSS {{cssxref("position")}}</li>
+ <li><a href="/fr/docs/Web/CSS/Comprendre_z-index">Comprendre le fonctionnement de <code>z-index</code></a></li>
+</ul>
diff --git a/files/fr/web/css/zoom/index.html b/files/fr/web/css/zoom/index.html
new file mode 100644
index 0000000000..d68f95a128
--- /dev/null
+++ b/files/fr/web/css/zoom/index.html
@@ -0,0 +1,102 @@
+---
+title: zoom
+slug: Web/CSS/zoom
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/zoom
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété non-standard <strong><code>zoom</code></strong> permet de manipuler l'effet d'agrandissement d'un élément. Plutôt que cette propriété non-standard, mieux vaudra utiliser <a href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS">les transformations CSS</a>, si possible. Cependant, contrairement aux transformations CSS, <strong><code>zoom</code></strong> affecte la taille de l'élément.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+zoom: normal;
+zoom: reset;
+
+/* VAleurs exprimées en pourcents */
+/* Type &lt;percentage&gt; */
+zoom: 50%;
+zoom: 200%;
+
+/* Valeurs numériques */
+/* Type &lt;number&gt; */
+zoom: 1.1;
+zoom: 0.7;
+
+/* Valeurs globales */
+zoom: inherit;
+zoom: initial;
+zoom: unset;</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>L'élément est affiché avec sa taille normale.</dd>
+ <dt><code>reset</code> {{non-standard_inline}}</dt>
+ <dd>Do not (de)magnify this element if the user applies non-pinch-based zooming (e.g. by pressing <kbd>Ctrl</kbd>-<kbd>-</kbd> ou <kbd>Ctrl</kbd>+<kbd>+</kbd>) to the document. Only supported by WebKit (and possibly Blink).</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>Le facteur de zoom à appliquer. <code>100%</code> est équivalent au mot-clé <code>normal</code>. Les valeurs supérieures à <code>100%</code> agrandissent l'élément et les valeurs inférieures le réduisent.</dd>
+ <dt>{{cssxref("&lt;number&gt;")}}</dt>
+ <dd>Le facteur de zoom à appliquer. La valeur fonctionne de la même façon que les pourcentages :  <code>1.0</code> correspond à <code>normal</code> (ou <code>100%</code>) , les valeurs supérieures à <code>1.0</code> agrandissent l'élément et les valeurs inférieures le réduisent.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p.petit {
+  zoom: 75%;
+}
+p.normal {
+  zoom: normal;
+}
+p.gros {
+  zoom: 2.5;
+}
+p {
+  display: inline-block;
+}
+p:hover {
+  zoom: reset;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="petit"&gt;Petit&lt;/p&gt;
+&lt;p class="normal"&gt;Normal&lt;/p&gt;
+&lt;p class="gros"&gt;Gros&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","200")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété n'est pas standard et est née avec Internet Explorer. Apple la décrit <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-SW15">dans la référence CSS pour Safari</a>. Rossen Atanassov, de Microsoft, a dressé <a href="https://cdn.rawgit.com/atanassov/css-zoom/master/Overview.html">un brouillon de spécification sur GitHub</a></p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.zoom")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://css-tricks.com/almanac/properties/z/zoom/">L'article de CSS-Tricks sur <code>zoom</code></a></li>
+ <li>Le descripteur <code><a href="/fr/docs/Web/CSS/@viewport/zoom">zoom</a></code> pour la règle @ <code><a href="/fr/docs/Web/CSS/@viewport">@viewport</a></code></li>
+ <li>{{bug("390936")}} à propos de l'implémentation de la propriété dans Firefox</li>
+</ul>
diff --git a/files/fr/web/css/élément_remplacé/index.html b/files/fr/web/css/élément_remplacé/index.html
new file mode 100644
index 0000000000..eaa2f4d82a
--- /dev/null
+++ b/files/fr/web/css/élément_remplacé/index.html
@@ -0,0 +1,62 @@
+---
+title: Élément remplacé
+slug: Web/CSS/Élément_remplacé
+tags:
+  - CSS
+  - Reference
+translation_of: Web/CSS/Replaced_element
+---
+<div>{{CSSRef}}</div>
+
+<p>En CSS, un <strong>élément remplacé</strong> est un élément dont la représentation est en dehors du champ de CSS. Ce sont des objets externes dont la représentation sera indépendante de CSS.</p>
+
+<p>Autrement dit, ces éléments sont des éléments dont le contenu n'est pas impacté par les styles du documents. La position de l'élément remplacé peut être modifiée avec CSS mais le contenu même de l'élément ne pourra pas être modifiée. Certains éléments remplacés comme {{HTMLElement("iframe")}} peuvent avoir leurs propres feuilles de styles mais ils n'héritent pas de celles du document parent.</p>
+
+<h2 id="Éléments_remplacés">Éléments remplacés</h2>
+
+<p>Les éléments remplacés caractéristiques sont :</p>
+
+<ul>
+ <li>{{HTMLElement("img")}},</li>
+ <li>{{HTMLElement("object")}},</li>
+ <li>{{HTMLElement("video")}},</li>
+ <li>{{HTMLElement("iframe")}}</li>
+ <li>les éléments {{HTMLElement("input")}} de type image</li>
+</ul>
+
+<p>Par ailleurs, certains éléments comme :</p>
+
+<ul>
+ <li>{{HTMLElement("option")}}</li>
+ <li>{{HTMLElement("audio")}}</li>
+ <li>{{HTMLElement("canvas")}}</li>
+ <li>{{HTMLElement("object")}}</li>
+ <li>{{HTMLElement("applet")}}</li>
+</ul>
+
+<p>sont des éléments remplacés dans certains cas spécifiques. De même un élément {{HTMLElement("input")}} peut être un élément remplacé dans certains cas (lorsqu'il est de type <code>"image"</code> notamment).</p>
+
+<p>Les objets insérés grâce aux propriétés CSS {{cssxref("content")}} sont des <em>éléments remplacés anonymes</em> (on les qualifie d'anonymes car ils n'existent pas dans la structure du HTML).</p>
+
+<h2 id="Utiliser_CSS_avec_les_éléments_remplacés">Utiliser CSS avec les éléments remplacés</h2>
+
+<p>Les éléments remplacés sont manipulés de façon spécifique par le moteur CSS, notamment pour le calcul des marges extérieures et certaines valeurs <code>auto</code>.</p>
+
+<p>On notera que certains éléments remplacés ont des dimensions intrinsèques ou une ligne de base définie, qui sont utilisées par des propriétés CSS comme {{cssxref("vertical-align")}}.</p>
+
+<h3 id="Contrôler_la_position_des_objets_au_sein_de_la_boîte_de_contenu">Contrôler la position des objets au sein de la boîte de contenu</h3>
+
+<p>Certaines propriétés CSS permet d'indiquer la façon dont l'objet contenu dans l'élément remplacé doit occuper la boîte de l'élément. Ces propriétés sont définies dans les spécifications {{SpecName("CSS3 Images")}} et {{SpecName("CSS4 Images")}} :</p>
+
+<dl>
+ <dt>{{cssxref("object-fit")}}</dt>
+ <dd>Indique la façon dont le contenu de l'élément remplacé doit s'inscrire dans la boîte de l'élément et comment il doit être redimensionné si besoin.</dd>
+ <dt>{{cssxref("object-position")}}</dt>
+ <dd>Indique l'alignement du contenu de l'élément remplacé dans la boîte de l'élément.</dd>
+</dl>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://html.spec.whatwg.org/multipage/rendering.html#replaced-elements">Spécification HTML sur les éléments remplacés</a></li>
+</ul>