Contre-ensemble - Astuces CSS

Table des matières:

Anonim

La counter-setpropriété CSS, fidèle à son nom, définit la valeur de départ d'un compteur CSS. Vous savez comment les listes ordonnées commencent à 1 puis augmentent à partir de là? La counter-setpropriété nous permet de définir cette valeur de départ sur autre chose, disons -1. Ou 2. Ou 200! Sauf qu'il s'applique aux compteurs CSS au lieu des listes ordonnées.

Donc, disons que nous avons un compteur personnalisé pour une liste de chapitres de livre, où le numéro de chapitre est précédé du nom du chapitre.

Nous commencerions par définir un compteur avec la counter-resetpropriété. Nous l' appellerons chapteret définir sur une classe de conteneur parent pour nos chapitres appelés, de façon créative, .chapters.

.chapters ( counter-reset: chapter; )

Ensuite, nous affecterions le chaptercompteur à un élément en utilisant la counter-incrementpropriété. Comme il s'agit de chapitres de livres, nous les appliquerons à

éléments, en supposant que le titre du livre serait le

. Notez que nous l'attribuons en fait au :beforepseudo-élément car il nous permet de préfixer notre compteur au réel

élément. 
h2:before ( counter-increment: chapter; )

Cool, la dernière chose dont nous aurions besoin est de dire au compteur ce qu'il doit afficher. Cela se fait sur la contentpropriété via la counter()fonction. Nous jetterons également un peu de couleur sur le comptoir puisque le design l'exige.

h2:before ( color: red; content: "Chapter " counter(chapter) ": "; counter-increment: chapter; )

Hé, nous avons l'air bien!

Mais attendez! Je ne suis pas vraiment en train de creuser le fait que nous commençons au chapitre 1. Je veux dire, le "Forward" n'est pas vraiment un chapitre. Si quelque chose, c'est comme le chapitre 0.

C'est là counter-setqu'intervient! Mettons les choses à zéro:

h2:first-of-type::before ( counter-set: chapter; )

On y va! C'est mieux. En définissant simplement la valeur de la propriété sur le nom du compteur, nous avons défini la liste des chapitres pour qu'elle commence au chapitre 0. Nous aurions pu tout aussi bien la définir à partir de quelque chose d'autre, comme le chapitre 100.

Et si un navigateur ne prend pas en charge counter-set? Rien, vraiment. Il sera tout simplement ignoré et la liste commencera à sa valeur par défaut, 1.

Syntaxe

( ? )+ | none

C'est fondamentalement une manière sophistiquée de dire que la propriété prend le nom d'un compteur personnalisé ( ) et la valeur de départ ( ). Ou réglez - le noneet la numérotation commence au point de départ par défaut, 1.

  • Valeur initiale: none
  • S'applique à: tous les éléments (y compris les éléments non visuels)
  • Héritée: non
  • Type d'animation: par type de valeur calculée

Valeurs

/* Set "awesome-counter" to 0 */ counter-set: awesome-counter; /* Set "awesome-counter" to -10 */ counter-set: awesome-counter -10; /* Set "awesome1" to 0, and "awesome2" to 2 */ counter-set: awesome1 awesome2 2; /* Wipe out any other settings that may have been declared elsewhere */ counter-set: none; /* Global values */ counter-set: inherit; counter-set: initial; counter-set: unset;

Notez que counter-setcela créera un nouveau compteur si le nom du compteur déclaré dessus n'a pas déjà été défini ailleurs.

Prise en charge du navigateur

C'EST À DIRE Bord Firefox Chrome Safari Opéra
Non Non 68+ Non Non Non
Chrome Android Android Firefox Navigateur Android Safari sur iOS Opera Mini
Non 79+ Non Non Non
Source: caniuse

Lectures complémentaires

  • Spécification de niveau 3 du module Listes CSS (version provisoire)
  • Affichage de l'étape actuelle avec des compteurs CSS
  • Compter avec les compteurs CSS et la grille
  • Comment inverser les compteurs personnalisés CSS