From 497f01fc724eb5849dc8d304c0355e30ce68a68d Mon Sep 17 00:00:00 2001 From: MDN Date: Mon, 8 Nov 2021 00:49:15 +0000 Subject: [CRON] sync translated content --- files/fr/_redirects.txt | 15 +-- files/fr/_wikihistory.json | 22 ++-- .../css_counter_styles/using_css_counters/index.md | 134 +++++++++++++++++++++ .../using_css_counters/index.md | 134 --------------------- 4 files changed, 153 insertions(+), 152 deletions(-) create mode 100644 files/fr/web/css/css_counter_styles/using_css_counters/index.md delete mode 100644 files/fr/web/css/css_lists_and_counters/using_css_counters/index.md (limited to 'files/fr') diff --git a/files/fr/_redirects.txt b/files/fr/_redirects.txt index 03b0bf4097..0efaac5b88 100644 --- a/files/fr/_redirects.txt +++ b/files/fr/_redirects.txt @@ -408,7 +408,7 @@ /fr/docs/CSS/Comprendre_z-index/Ajout_de_z-index /fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index /fr/docs/CSS/Comprendre_z-index/Empilement_et_float /fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float /fr/docs/CSS/Comprendre_z-index/Empilement_sans_z-index /fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index -/fr/docs/CSS/Compteurs_CSS /fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +/fr/docs/CSS/Compteurs_CSS /fr/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters /fr/docs/CSS/FAQ /fr/docs/Learn/CSS/Howto/CSS_FAQ /fr/docs/CSS/Feuilles_de_style_alternatives /fr/docs/Web/CSS/Alternative_style_sheets /fr/docs/CSS/Fonds_multiples /fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds @@ -545,10 +545,10 @@ /fr/docs/CSS/column-span /fr/docs/Web/CSS/column-span /fr/docs/CSS/column-width /fr/docs/Web/CSS/column-width /fr/docs/CSS/columns /fr/docs/Web/CSS/columns -/fr/docs/CSS/compteur /fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +/fr/docs/CSS/compteur /fr/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters /fr/docs/CSS/computed_value /fr/docs/Web/CSS/computed_value /fr/docs/CSS/content /fr/docs/Web/CSS/content -/fr/docs/CSS/counter /fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +/fr/docs/CSS/counter /fr/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters /fr/docs/CSS/counter-increment /fr/docs/Web/CSS/counter-increment /fr/docs/CSS/counter-reset /fr/docs/Web/CSS/counter-reset /fr/docs/CSS/cursor /fr/docs/Web/CSS/cursor @@ -849,7 +849,7 @@ /fr/docs/Comprendre_z-index/Ajout_de_z-index /fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index /fr/docs/Comprendre_z-index/Empilement_et_float /fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float /fr/docs/Comprendre_z-index/Empilement_sans_z-index /fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index -/fr/docs/Compteurs_CSS /fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +/fr/docs/Compteurs_CSS /fr/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters /fr/docs/Consistent_List_Indentation /fr/docs/Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation /fr/docs/Console_JavaScript /fr/docs/Tools/Browser_Console /fr/docs/Construire_une_extension /fr/docs/Mozilla/Add-ons @@ -4011,8 +4011,9 @@ /fr/docs/Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille /fr/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines /fr/docs/Web/CSS/CSS_Images/Sprites_CSS /fr/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS /fr/docs/Web/CSS/CSS_Lists /fr/docs/Web/CSS/CSS_Lists_and_Counters -/fr/docs/Web/CSS/CSS_Lists/Compteurs_CSS /fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +/fr/docs/Web/CSS/CSS_Lists/Compteurs_CSS /fr/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters /fr/docs/Web/CSS/CSS_Lists/Indentation_homogène_des_listes /fr/docs/Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation +/fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters /fr/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters /fr/docs/Web/CSS/CSS_Logical_Properties/Concepts_de_base /fr/docs/Web/CSS/CSS_Logical_Properties/Basic_concepts /fr/docs/Web/CSS/CSS_Logical_Properties/Dimensionnement /fr/docs/Web/CSS/CSS_Logical_Properties/Sizing /fr/docs/Web/CSS/CSS_Logical_Properties/Propriétés_logiques_flottements_positionnement /fr/docs/Web/CSS/CSS_Logical_Properties/Floating_and_positioning @@ -4054,7 +4055,7 @@ /fr/docs/Web/CSS/Comprendre_z-index/Exemple_1 /fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1 /fr/docs/Web/CSS/Comprendre_z-index/Exemple_2 /fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2 /fr/docs/Web/CSS/Comprendre_z-index/Exemple_3 /fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3 -/fr/docs/Web/CSS/Compteurs_CSS /fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +/fr/docs/Web/CSS/Compteurs_CSS /fr/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters /fr/docs/Web/CSS/Concepts_viewport /fr/docs/Web/CSS/Viewport_concepts /fr/docs/Web/CSS/Contexte_de_formatage_en_ligne /fr/docs/Web/CSS/Inline_formatting_context /fr/docs/Web/CSS/Couleurs_CSS /fr/docs/conflicting/Web/CSS/CSS_Color @@ -4180,7 +4181,7 @@ /fr/docs/Web/CSS/clamp /fr/docs/Web/CSS/clamp() /fr/docs/Web/CSS/conic-gradient /fr/docs/orphaned/Web/CSS/conic-gradient() /fr/docs/Web/CSS/conic-gradient() /fr/docs/orphaned/Web/CSS/conic-gradient() -/fr/docs/Web/CSS/counter /fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +/fr/docs/Web/CSS/counter /fr/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters /fr/docs/Web/CSS/counter_fonction /fr/docs/Web/CSS/counter() /fr/docs/Web/CSS/counters /fr/docs/Web/CSS/counters() /fr/docs/Web/CSS/cross-fade /fr/docs/Web/CSS/cross-fade() diff --git a/files/fr/_wikihistory.json b/files/fr/_wikihistory.json index 32fd0e5e7c..451dbfc483 100644 --- a/files/fr/_wikihistory.json +++ b/files/fr/_wikihistory.json @@ -24603,6 +24603,17 @@ "SphinxKnight" ] }, + "Web/CSS/CSS_Counter_Styles/Using_CSS_counters": { + "modified": "2019-07-27T03:11:03.371Z", + "contributors": [ + "SphinxKnight", + "teoli", + "Delapouite", + "FredB", + "Kyodev", + "Fredchat" + ] + }, "Web/CSS/CSS_Device_Adaptation": { "modified": "2020-10-15T21:44:13.646Z", "contributors": [ @@ -24903,17 +24914,6 @@ "Laurent Denis" ] }, - "Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters": { - "modified": "2019-07-27T03:11:03.371Z", - "contributors": [ - "SphinxKnight", - "teoli", - "Delapouite", - "FredB", - "Kyodev", - "Fredchat" - ] - }, "Web/CSS/CSS_Logical_Properties": { "modified": "2019-06-18T19:34:36.043Z", "contributors": [ diff --git a/files/fr/web/css/css_counter_styles/using_css_counters/index.md b/files/fr/web/css/css_counter_styles/using_css_counters/index.md new file mode 100644 index 0000000000..f37a4b8ca4 --- /dev/null +++ b/files/fr/web/css/css_counter_styles/using_css_counters/index.md @@ -0,0 +1,134 @@ +--- +title: Compteurs CSS +slug: Web/CSS/CSS_Counter_Styles/Using_CSS_counters +tags: + - Avancé + - CSS + - Guide +translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +original_slug: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +--- +{{CSSRef}} + +Les **compteurs CSS** 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. + +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 `counter()` et `counters()` dans la propriété {{cssxref("content")}}. + +## Utiliser les compteurs + +### Manipuler la valeur d'un compteur + +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 `none`, `inherit` ou `initial`. + +### Afficher un compteur + +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")}}. + +La fonction `counter()` prend deux formes : `counter(nom)` ou `counter(nom, style)`. 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 `decimal`). + +La fonction `counters()` prend également deux formes : `counters(nom, chaine)` ou `counters(nom, chaine style)`. 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 `decimal`). + +### Exemple simple + +Dans l'exemple qui suit, la feuille de style CSS préfixe chaque titre de niveau 3 avec « Section \ : ». + +> **Note :** 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 `decimal`). + +#### CSS + +```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 */ +} +``` + +#### HTML + +```html +

Introduction

+

Corps

+

Conclusion

+``` + +#### Résultat + +{{EmbedLiveSample("Utiliser_les_compteurs", 300, 150)}} + +## Imbriquer des compteurs + +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. + +### CSS + +```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 < IE8 il faudra + faire attention à ce qu'il n'y ait + aucun blanc après ',' */ +} +``` + +### HTML + +```html +
    +
  1. item
    2. +
  2. item +
      +
    1. item
      2. +
    2. item
      3. +
    3. item +
        +
      1. item
        2. +
      2. item
        3. +
      +
        +
      1. item
        2. +
      2. item
        3. +
      3. item
        4. +
      +
      4. +
    4. item
      5. +
    +
    3. +
  3. item
    4. +
  4. item
    5. +
+
    +
  1. item
    2. +
  2. item
    3. +
+``` + +### Résultat + +{{EmbedLiveSample("Imbriquer_des_compteurs", 250, 350)}} + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------ | -------------------------------- | -------------------- | +| {{SpecName("CSS3 Lists", "#auto-numbering", "CSS Counters")}} | {{Spec2("CSS3 Lists")}} | Aucune modification. | +| {{SpecName("CSS2.1", "generate.html#counters", "CSS Counters")}} | {{Spec2("CSS2.1")}} | Définition initiale. | + +## Voir aussi + +- {{cssxref("counter-reset")}} +- {{cssxref("counter-set")}} +- {{cssxref("counter-increment")}} +- {{cssxref("@counter-style")}} diff --git a/files/fr/web/css/css_lists_and_counters/using_css_counters/index.md b/files/fr/web/css/css_lists_and_counters/using_css_counters/index.md deleted file mode 100644 index 90ad13bca7..0000000000 --- a/files/fr/web/css/css_lists_and_counters/using_css_counters/index.md +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: Compteurs CSS -slug: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters -tags: - - Avancé - - CSS - - Guide -translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters -original_slug: Web/CSS/CSS_Lists/Compteurs_CSS ---- -{{CSSRef}} - -Les **compteurs CSS** 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. - -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 `counter()` et `counters()` dans la propriété {{cssxref("content")}}. - -## Utiliser les compteurs - -### Manipuler la valeur d'un compteur - -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 `none`, `inherit` ou `initial`. - -### Afficher un compteur - -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")}}. - -La fonction `counter()` prend deux formes : `counter(nom)` ou `counter(nom, style)`. 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 `decimal`). - -La fonction `counters()` prend également deux formes : `counters(nom, chaine)` ou `counters(nom, chaine style)`. 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 `decimal`). - -### Exemple simple - -Dans l'exemple qui suit, la feuille de style CSS préfixe chaque titre de niveau 3 avec « Section \ : ». - -> **Note :** 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 `decimal`). - -#### CSS - -```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 */ -} -``` - -#### HTML - -```html -

Introduction

-

Corps

-

Conclusion

-``` - -#### Résultat - -{{EmbedLiveSample("Utiliser_les_compteurs", 300, 150)}} - -## Imbriquer des compteurs - -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. - -### CSS - -```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 < IE8 il faudra - faire attention à ce qu'il n'y ait - aucun blanc après ',' */ -} -``` - -### HTML - -```html -
    -
  1. item
    2. -
  2. item -
      -
    1. item
      2. -
    2. item
      3. -
    3. item -
        -
      1. item
        2. -
      2. item
        3. -
      -
        -
      1. item
        2. -
      2. item
        3. -
      3. item
        4. -
      -
      4. -
    4. item
      5. -
    -
    3. -
  3. item
    4. -
  4. item
    5. -
-
    -
  1. item
    2. -
  2. item
    3. -
-``` - -### Résultat - -{{EmbedLiveSample("Imbriquer_des_compteurs", 250, 350)}} - -## Spécifications - -| Spécification | État | Commentaires | -| ------------------------------------------------------------------------------------ | -------------------------------- | -------------------- | -| {{SpecName("CSS3 Lists", "#auto-numbering", "CSS Counters")}} | {{Spec2("CSS3 Lists")}} | Aucune modification. | -| {{SpecName("CSS2.1", "generate.html#counters", "CSS Counters")}} | {{Spec2("CSS2.1")}} | Définition initiale. | - -## Voir aussi - -- {{cssxref("counter-reset")}} -- {{cssxref("counter-set")}} -- {{cssxref("counter-increment")}} -- {{cssxref("@counter-style")}} -- cgit v1.2.3-54-g00ecf