Przeciwzestaw - CSS-Tricks

Spisie treści:

Anonim

Właściwość counter-setCSS, zgodnie ze swoją nazwą, ustawia wartość początkową dla licznika CSS. Wiesz, jak uporządkowane listy zaczynają się od 1, a następnie rosną od tego miejsca? counter-setWłaściwość pozwala nam zestaw że wartość początkowa do czegoś innego, powiedzmy, -1. Lub 2. Lub 200! Tyle że jest stosowany do liczników CSS zamiast uporządkowanych list.

Powiedzmy, że mamy niestandardowy licznik dla listy rozdziałów książki, w których numer rozdziału jest dodawany do nazwy rozdziału.

Zaczniemy od zdefiniowania licznika z counter-resetwłaściwością. Nazwiemy to chapteri zdefiniujemy w nadrzędnej klasie kontenera dla naszych rozdziałów zwanych twórczo .chapters.

.chapters ( counter-reset: chapter; )

Następnie przypisalibyśmy chapterlicznik do elementu za pomocą tej counter-incrementwłaściwości. Ponieważ są to rozdziały książek, zastosujemy je do

przy założeniu, że tytuł książki to

. Zwróć uwagę, że w rzeczywistości przypisujemy go do :beforepseudoelementu, ponieważ pozwala nam on dołączyć nasz licznik do rzeczywistego

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

Fajnie, ostatnią rzeczą, której potrzebowalibyśmy, jest wskazanie licznikowi, co ma wyświetlać. Odbywa się to na contentwłaściwości za pomocą counter()funkcji. Rzucimy też trochę koloru na ladę, ponieważ projekt tego wymaga.

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

Hej, dobrze wyglądamy!

Ale poczekaj! Naprawdę nie podchodzę do faktu, że zaczynamy od rozdziału 1. Mam na myśli, że „Naprzód” nie jest tak naprawdę rozdziałem. Jeśli już, to jak w rozdziale 0.

To jest, gdzie counter-setpojawia się! Ustawmy rzeczy tak, aby zaczęły się od zera:

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

No to jedziemy! Tak lepiej. Po prostu ustawiając wartość właściwości na nazwę licznika, ustawiliśmy listę rozdziałów tak, aby zaczynała się od rozdziału 0. Równie łatwo moglibyśmy ustawić jej początek od czegoś innego, na przykład rozdziału 100.

A jeśli przeglądarka nie obsługuje counter-set? Nic takiego. Będzie po prostu ignorowane, a lista zacznie się jej domyślnie 1.

Składnia

( ? )+ | none

Jest to po prostu fantazyjny sposób powiedzenia, że ​​właściwość przyjmuje nazwę niestandardowego licznika ( ) i wartość początkową ( ). Lub ustawić go nonei numeracja rozpocznie się domyślny punkt wyjściowy 1.

  • Wartość początkowa: none
  • Dotyczy: wszystkich elementów (w tym niewizualnych)
  • Odziedziczone: nie
  • Typ animacji: według obliczonego typu wartości

Wartości

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

Zauważ, że counter-setutworzy nowy licznik, jeśli zadeklarowana na nim nazwa licznika nie została jeszcze zdefiniowana gdzie indziej.

Wsparcie przeglądarki

TO ZNACZY Brzeg Firefox Chrom Safari Opera
Nie Nie 68+ Nie Nie Nie
Android Chrome Android Firefox Przeglądarka Android iOS Safari Opera Mini
Nie 79+ Nie Nie Nie
Źródło: caniuse

Dalsza lektura

  • Lista CSS Specyfikacja modułu poziomu 3 (wersja robocza)
  • Wyświetlanie bieżącego kroku z licznikami CSS
  • Liczenie z licznikami i siatką CSS
  • Jak odwrócić niestandardowe liczniki CSS