Tematy: generowanie treści | przyrost licznika | reset licznika | cudzysłowy
| Dane w pigułce | |
| Zastosowanie | automatyczne generowanie licznika elementów |
| Dziedziczenie | nie |
| Wartości | nazwa licznika |
| Wartość domyślna | n.d. |
| Przykład | counter-increment: naglowek1; content: "Rozdział " counter(naglowek1) ": " } |
| Uwagi | |
| Odpowiednik w HTML | brak |
Aby zdefiniować przyrost licznika, należy wpisać w definicji stylu counter-increment: nazwa_licznika
Polecenie counter-increment pozwala, we współpracy z content, automatycznie numerować wskazane elementy, np. numery rozdziałów, kolejne punkty wykazu (listy), akapity itd.
Uwaga: przed wprowadzeniem licznika konieczne jest wyzerowanie go (zresetowanie) na poziomie ciała dokumentu, za pomocą polecenia stylu w części nagłówkowej dokumentu:
body {counter-reset: nazwa_licznika; }
Jest to wymagane, aby licznik działał poprawnie w Firefoksie, aczkolwiek Opera nie wymaga takiego przygotowania licznika. Internet Explorer 6 i 7 w ogóle nie obsługują liczników.
Jeśli w danym dokumencie jest więcej liczników, można je wyzerować "hurtem", podając nazwy rozdzielone spacjami, np:
body {counter-reset: licznik_tytulow licznik_wykazow licznik_akapitow licznik_ilustracji; }.
O zerowaniu liczników przeczytasz więcej w rozdziale Reset licznika
Przyjrzyjmy sie, jak można automatycznie zliczać śródtytuły. W części nagłówkowej należy podać definicję licznika (zakładamy, że został już uprzednio wyzerowany), np.:
counter-increment: naglowek1;
content: "Rozdział " counter(naglowek1) ": " }
Dodatkowo możemy określić styl licznika, wpisując obok nazwy licznika upper-roman, lower-alpha, decimal-leading-zero itd:
counter-increment: naglowek1;
content: "Rozdział " counter(naglowek1, upper-roman) ": " }
Gdy podamy dodatkowo jakąś liczbę, np. counter-increment: licznik 2;, licznik będzie liczony co 2, poczynając od numeru 2 (lub od aktualnej wartości licznika). Gdy podamy liczbę ujemną, np. counter-increment: licznik -1;, licznik będzie zmniejszany o 1 od bieżącej wartości.
- W podanej wyżej definicji wykorzystujemy pseudoelement :before przy elemencie h1 - w ten sposób licznik bedzie generowany PRZED tym elementem.
- Polecenie counter-increment określa nazwę licznika, którego wartość będzie automatycznie zwiększana, w naszym wypadku "naglowek1".
- Content zawiera natomiast ciągi znaków ukazujące się przed nagłówkami stopnia 1, czyli stałą "Rozdział", kod licznika counter(naglowek1) oraz stałą ": ". Połączenie tych elementów zawartości spowoduje wygenerowanie całej zawartości.
Uwaga: gdybyśmy chcieli numerować tylko niektóre elementy spośród wielu innych (np. niektóre śródtytuły) , konieczne byłoby wykorzystanie klas - zamiast h1:before moglibyśmy np. napisać h1.zliczane_naglowki:before.
Przykład użycia do numerowania śródtytułów:
<p>...</p>
<h1>Historia HTML</h1>
<p>...</p>
<h1>Współczesne standardy</h1>
I żywy efekt:
Wstęp
...
Historia HTML
...
Współczesne standardy
...
Przykład użycia do numerowania ilustracji (Internet Explorer nie obsługuje).
W części nagłówkowej:
counter-increment: obrazki;
content: "Ilustracja " counter(obrazki) ": " }
W ciele dokumentu:
<img src="../grafika/ami.gif">
<p class="obrazki">Magazyn Gambler
<img src="../grafika/gambler.gif">
I efekt:
Magazyn Amiga
Magazyn Gambler
Przykład użycia do numerowania punktów wykazu.
W części nagłówkowej:
counter-increment: lista;
content: "Punkt " counter(lista) ": " }
W ciele dokumentu:
<li>Marchewka</li>
<li>Pietruszka</li>
<li>Kalafior</li>
I efekt:
-
Do kupienia:
- Marchewka
- Pietruszka
- Kalafior
Zwróć uwagę, że w definicji wykazu został podany styl wykazu list-style-type:none. Gdyby nie to, licznikowi towarzyszyłby jeszcze niepotrzebny tutaj naturalny punktor wykazu.
Interpretacja: Internet Explorer 8, Opera, Firefox, Chrome
