Gegensatz - CSS-Tricks

Inhaltsverzeichnis:

Anonim

Die counter-setCSS-Eigenschaft legt ihrem Namen entsprechend den Startwert für einen CSS-Zähler fest. Sie wissen, wie geordnete Listen bei 1 beginnen und von dort aus erhöht werden? Mit der counter-setEigenschaft können wir diesen Startwert auf etwas anderes setzen, z. B. -1. Oder 2. Oder 200! Nur dass es auf CSS-Zähler anstelle von geordneten Listen angewendet wird.

Nehmen wir also an, wir haben einen benutzerdefinierten Zähler für eine Liste von Buchkapiteln, wobei die Kapitelnummer dem Kapitelnamen vorangestellt wird.

Wir würden zunächst einen Zähler mit der counter-resetEigenschaft definieren. Wir werden es aufrufen chapterund in einer übergeordneten Containerklasse für unsere Kapitel definieren, die kreativ , .chapters.

.chapters ( counter-reset: chapter; )

Als Nächstes weisen wir den chapterZähler mithilfe der counter-incrementEigenschaft einem Element zu . Da es sich um Buchkapitel handelt, wenden wir sie an

Elemente, vorausgesetzt, der Buchtitel wäre die

. Beachten Sie, dass wir es tatsächlich dem Pseudoelement zuweisen, :beforeda wir so unseren Zähler dem tatsächlichen vorstellen können

Element. 
h2:before ( counter-increment: chapter; )

Cool, das Letzte, was wir brauchen würden, ist dem Zähler zu sagen, was er anzeigen soll. Dies geschieht auf dem contentGrundstück über die counter()Funktion. Wir werden auch ein wenig Farbe auf die Theke werfen, da das Design dies erfordert.

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

Hey, wir sehen gut aus!

Aber warte! Ich grabe nicht wirklich die Tatsache, dass wir mit Kapitel 1 beginnen. Ich meine, das „Vorwärts“ ist nicht wirklich ein Kapitel. Wenn überhaupt, ist es wie in Kapitel 0.

Da kommt da counter-setrein! Lassen Sie uns die Dinge so einstellen, dass sie bei Null beginnen:

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

Na, bitte! Das ist besser. Indem Sie den Eigenschaftswert auf den Namen des Zählers setzen, haben wir die Liste der Kapitel so festgelegt, dass sie mit Kapitel 0 beginnt. Wir hätten sie genauso einfach mit etwas anderem beginnen können, wie z. B. Kapitel 100.

Und wenn ein Browser nicht unterstützt counter-set? Nichts wirklich. Es wird einfach ignoriert und die Liste beginnt mit der Standardeinstellung 1.

Syntax

( ? )+ | none

Dies ist im Grunde eine ausgefallene Art zu sagen, dass die Eigenschaft den Namen eines benutzerdefinierten Zählers ( ) und den Startwert ( ) verwendet. Oder setzen Sie es auf noneund die Nummerierung beginnt am Standardstartpunkt 1.

  • Ursprünglicher Wert: none
  • Gilt für: alle Elemente (einschließlich nicht visueller)
  • Geerbt: nein
  • Animationstyp: nach berechnetem Werttyp

Werte

/* 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;

Beachten Sie, dass counter-setein neuer Zähler erstellt wird, wenn der darauf deklarierte Zählername noch nicht an einer anderen Stelle definiert wurde.

Browser-Unterstützung

IE Kante Feuerfuchs Chrom Safari Oper
Nein Nein 68+ Nein Nein Nein
Android Chrome Android Firefox Android Browser iOS Safari Opera Mini
Nein 79+ Nein Nein Nein
Quelle: caniuse

Weiterführende Literatur

  • CSS-Listen Modul Level 3 Spezifikation (Arbeitsentwurf)
  • Anzeigen des aktuellen Schritts mit CSS-Zählern
  • Zählen mit CSS-Zählern und Raster
  • So kehren Sie benutzerdefinierte CSS-Zähler um