CSS Counters to często pomijana funkcjonalność obsługiwana już w każdej normalnej przeglądarce. Nawet w IE8, która do normalnych się nie zalicza.

W niniejszym wpisie pokażę jak i dlaczego warto używać liczników w CSS, a także sytuacje, w których lepiej sobie odpuścić.

CSS Counters – wprowadzenie

Liczniki w CSS są bardzo proste w użyciu. Natywnym przykładem ich wykorzystania są listy numerowane OL, choć równie dobrze możemy je przypiąć do każdego innego elementu.

Żeby zainicjować nowy licznik używamy poniższego kodu:

sectionNum to nazwa licznika, której będziemy później używać w kodzie. Oczywiście liczniki takie możemy przypiąć do dowolnego elementu HTML – tym razem padło na BODY, bo liczeniu podlegać będą jego dzieci, elementy SECTION.

Liczniki domyślnie rozpoczynają iterację od zera, lecz można to z łatwością przestawić, np.:

Możliwe jest również ustawianie kilku liczników naraz:

Inkrementacja licznika

Mając już zdefiniowany licznik, możesz zacząć go inkrementować oraz wyświetlać. Zrobisz to następująco:

Tym samym, wstawiając do dokumentu jakikolwiek element SECTION, licznik zostaje powiększony o 1. Jeśli chciałbyś zliczać tylko elementy SECTION najwyższego poziomu (dzieci BODY), musisz użyć selektora dziecka:

Wyświetlanie licznika

Czas na najważniejsze – wyświetlanie aktualnej wartości licznika. Musimy w tym celu zdefiniować dla elementu pseudo-element :before lub :after i użyć specjalnej funkcji counter:

Prosty przykład działania liczników w CSS:

Wady liczników CSS

Choć liczniki w CSS są bardzo przydatne, czasem jednak nie możemy ich wygodnie używać. W listach numerowanych mamy możliwość użycia atrybutów typu start czy value, np.:

czy

Co jeśli chcemy użyć licznika CSS naliczającego od 7? Musimy go zdefiniować w następujący sposób:

A co jeśli w kolejnym elemencie licznik będzie zaczynał się od 11, 19 czy 25? Musielibyśmy zdefiniować kilka różnych klas albo pisać style inline. Nie możemy użyć tak wygodnego sposobu jak przy listach numerowanych:

Niestety to spora wada i nie znalazłem jeszcze wygodnego rozwiązania.

Praktyczne zastosowanie

Dzisiejszy wpis mówi o podstawach CSS, lecz mimo wszystko, do dzisiaj widuję mnóstwo projektów, w których pomija się używanie liczników na rzeczy brzydkiej składni typu:

Nie popełniaj takich błędów! No chyba, że musisz (patrz punkt wyżej).

Liczniki w CSS są naprawdę proste w użyciu i często się przydają – do list numerowanych w efektywny sposób (np. liczba jest w polu otoczonym tłem czy innym ozdobnikiem), jako meta-dane wskazujące o numerze sekcji, czasem jako fallback dla przeglądarek nieobsługujących JavaScriptu (np. tabów), etc.

Praktycznym przykładem będzie natomiast kod z ostatnio wykonywanego przeze mnie projektu – myślę, że ładnie pokazuje możliwości CSS Counters:

Przykład jest responsywny (do zobaczenia także tutaj).