unslug fr: move

3 files changed, 310 insertions, 0 deletions

diff --git a/files/fr/web/css/css_lists_and_counters/consistent_list_indentation/index.html b/files/fr/web/css/css_lists_and_counters/consistent_list_indentation/index.html
new file mode 100644
index 0000000000..52a1cfbc33
--- /dev/null
+++ b/files/fr/web/css/css_lists_and_counters/consistent_list_indentation/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_and_counters/index.html b/files/fr/web/css/css_lists_and_counters/index.html
new file mode 100644
index 0000000000..781d7cb961
--- /dev/null
+++ b/files/fr/web/css/css_lists_and_counters/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_lists_and_counters/using_css_counters/index.html b/files/fr/web/css/css_lists_and_counters/using_css_counters/index.html
new file mode 100644
index 0000000000..7ca83181c4
--- /dev/null
+++ b/files/fr/web/css/css_lists_and_counters/using_css_counters/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>