CSS brojači

Brojači su jedna od specijalnih mogućnosti CSS-a. Pomoću njih je moguće kreirati numeraciju u bilo kom obliku, i to za bilo koji HTML element, a ne samo za stavke u listama. Tipična upotreba bi bila recimo automatska numeracija naslova i podnaslova na stranici.

CSS brojačima upravljamo pomoću dva atributa i dve funkcije.

counter-reset	Atribut za postavljanje početne vrednosti i uvođenje brojača
counter-increment	Povećavanje brojača
counter()	Prikaz vrednosti brojača, unutar content atributa
counters()	Prikaz niza vrednosti brojača, unutar content atributa

Programeri će u brojačima prepoznati promenljive, zbog čega oni malo odudaraju od klasičnog CSS formatiranja.

counter-reset

Ovo je osnovni atribut sa kojim radimo kada želimo da koristimo brojače. Pomoću njega uvodimo brojač, a može nam koristiti i da mu postavimo početnu vrednost. Moguće je navesti jednu ili dve vrednosti, odvojene razmakom:

[identifikator] - gde identifikator predstavlja naziv brojača
[identifikator] [numerik] - gde numerik predstavlja početnu vrednost
[identifikator] [identifikator] ... - moguće je uvesti više brojača
[ident] [numerik] [ident] [numerik] ... - svakom brojaču je moguće dodeliti početnu vrednost

Ako se neka od početnih vrednosti ne navede, podrazumeva se da je 0.

counter-reset: poglavlje; // definisali smo brojač "poglavlje"
counter-reset: num 5;  // definisali smo brojač "num" koji počinje od 5
counter-reset: brojevi stavke;  // resetovali / uveli smo dva brojača

Ovaj atribut treba da se primeni na elementu ili elementima od kojih se brojač postavlja na početnu vrednost. Znači counter-reset se ne postavlja na elementu na kome prikazujemo brojač. Dobra ideja je da ga zadamo na kontejnerskom elementu koji sadrži numerisane elemente. Npr. za listu bi to bio <ol> elemenat, dok bi za naslove i podnaslove na stranici to bio sam <body>.

Naziv brojača se može sastojati iz slova, cifara, povlake (minus) i donje crte, s tim što bi trebao da počinje slovom. Ne sme sadržati razmak. Izbegavajte da brojaču date naziv neke od vrednosti koje CSS prepoznaje - veoma glup naziv za brojač bi bio npr. "inherit".

counter-increment

Ovo je atribut koji služi da se promeni vrednost brojača. Ova promena je skoro uvek povećavanje za jedan, ali znajte da možete zadati i za koliko se brojač povećava ili čak umanjuje.

[identifikator] - gde identifikator predstavlja naziv brojača
[identifikator] [numerik] - gde numerik predstavlja uvećanje
[ident] [ident] ... - uvećavamo više brojača istovremeno
[ident] [num] [ident] [num] ... - uvećavamo više brojača istovremeno i zadajemo im svakom njegovo uvećanje

Opet, svuda je moguće izostaviti numerik i tada se podrazumeva vrednost 1.

counter-increment: poglavlje; // brojač "poglavlje" se uvećava za 1
counter-increment: broj 2;  // brojač "broj" se uvećava za 2
counter-increment: num -1;  // brojač "num" se umanjuje za 1

Ovaj atribut se upravo zadaje elementu za koji želimo da bude numerisan. Praktično, nećemo pogrešiti ako uvećanje brojača stavimo pod istim selektorom gde se vrši prikaz brojača.

Inače, kada god zadamo uvećanje i prikaz, prvo će se izvršiti uvećanje brojača, pa će biti prikazana tako uvećana vrednost. Znači, praktično nikada nećemo videti početnu vrednost (ako je ona "0", prvo što ćemo videti je "1"). Sa druge strane, ako zaboravimo da zadamo counter-increment, svuda gde koristimo taj brojač, videćemo samo početnu vrednost (npr. svuda će biti ispisana "0").

counter()

Konačno, stigosmo i do prikaza samog brojača - CSS funkcije counter(). Brojač ne možemo zaista prikazati gde god želimo. Pošto je u pitanju ipak neki sadržaj, a ne formatiranje, faktički možemo koristiti ovu funkciju samo u pseudo-elementima ::before i ::after i to u okviru njihovog specifičnog atributa - content.

Znači da se uvećanje i prikaz zadaju u pseudo-elementu (obično ::before) selektora koji "gađa" elemente koje želimo da numerišemo. CSS funkcija counter() može biti zadata na dva načina:

counter([identifikator]) - gde identifikator predstavlja naziv brojača
counter([identifikator], [tip prikaza]) - gde se tip prikaza odnosi na oblik ispisa brojača

Brojač može biti ispisan u različitim oblicima - dekadni brojevi, rimski brojevi, slova engleske abecede ili grčkog alfabeta... Za svaki tip prikaza postoji definisana rezervisana reč, a koriste se iste vrednosti kao za definisanje tipa numeracije u listama.

Ako se tip ne navede, podrazumeva se ispis u obliku dekadnih brojeva (tip "decimal").

selektor::before {
  content: counter(num); // prikaz brojača "num"
}
selektor::before {
  content: counter(num, lower-latin); 
  // prikaz brojača "num" u obliku malih slova engleske abecede
}

Primer: Numaracija naslova i podnaslova

U ovom primeru ćemo prikazati kako koristimo dva brojača da bismo numerisali naslove i podnaslove na stranici. Naš zadatak je sledeći: svaki naslov se obeležava rimskim brojem, dok se svaki podnaslov obeležava dekadnim brojevima. Za svaki naslov, numeracija podnaslova počinje od 1. Takođe, želimo da se u numeraciji podnaslova vidi i broj naslova pod kojim su ti podnaslovi. Drugim rečima:

I Naslov
I-1 Podnaslov
I-2 Podnaslov
II Naslov
II-1 Podnaslov
II-2 Podnaslov


  <style>
  body {
    counter-reset: naslovi; /* na stranici se uvodi brojač "naslovi" i postavlja na 0 */
  }
  h2 {
    /* za svaki naslov se resetuje brojač "podnaslovi" - zahvaljujući tome, 
      za svaki novi naslov, brojanje podnaslova kreće od početka */
    counter-reset: podnaslovi; 
  }
  /* sada definišemo pseudo elemenat ::before, gde definišemo šta se pojavljuje "ispred" H2 naslova */
  h2::before { 
    /* prikazujemo brojač "naslovi" u obliku rimskih brojeva i dodajemo jedan razmak */
    content: counter(naslovi, upper-roman) " ";
    /* uvećavanje brojača za 1, redosled nije bitan - brojač se uvek prvo povećava, a posle prikazuje */
    counter-increment: naslovi;
  }
  /* pseudo-elemenat ::before za H3 podnaslove */
  h3::before {
    /* povećavamo brojač "podnaslovi" */
    counter-increment: podnaslovi; 
    /* sklapamo sadržaj elementa - prvo se ispisuje brojač naslova, onda crtica, 
      onda brojač podnaslova (dekadnim ciframa) i na kraju razmak */
    content: counter(naslovi, upper-roman) "-" counter(podnaslovi, decimal) " ";  
  }
  </style>

  <h2>Vodenice</h2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    <h3>Menadžment vodeničarskog preduzeća</h3>
      Sed sem nisi, fermentum luctus nisi quis, consectetur egestas velit. 
    <h3>Vodenični kamenovi kroz vekove</h3>
      Duis elit tortor, feugiat vitae vestibulum sit amet, finibus gravida risus.
  <h2>Mlinovi</h2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    <h3>Upravljanje resursima mlina</h3>
      Sed sem nisi, fermentum luctus nisi quis, consectetur egestas velit. 
    <h3>Uređivanje mlina po feng-šuiju</h3>
      Duis elit tortor, feugiat vitae vestibulum sit amet, finibus gravida risus.

U donjem okviru biste trebali da vidite naslove i podnaslove numerisane upravo onako kako se tražilo.

counters()

Funkcija counters() ima veoma specifičnu upotrebu. Koristimo je kada treba da prikažemo jedan isti brojač nekoliko puta u nizu. Kako može da nam se desi da dođemo u ovakvu situaciju? Bio bi to slučaj kada imamo ugnježedene istovetne elemente, za koje je samim tim vezan isti brojač. Najčešće se ovo dešava kada imamo listu sa stavkama i podstavkama.

counters([identifikator], [separator]) - gde identifikator predstavlja naziv brojača, a separator je tekst kojim se odvajaju brojači
counters([identifikator], [separator], [tip prikaza]) - gde se tip prikaza odnosi na oblik ispisa brojača

Pošto se automatski prikazuje čitav hijerarhijski niz brojača, moramo koristiti i neki separator, odnosno tekst kojim odvajamo te brojače. To može biti tačka, crtica, razmak ili bilo šta što vam padne na pamet.

Jedina mana je što svi prikazani brojači moraju biti ispisani istim tipom numeracije. Znači nema kombinacija tipa "brojka-pa-slovo" - ili su sve brojke ili su sva slova. Isto kao i kod funkcije counter(), ako se tip ne navede, podrazumeva se ispis u obliku dekadnih brojeva.

selektor::before {
  content: counters(num, "."); // prikaz niza brojača "num" odvojenih tačkom
}
selektor::before {
  content: counter(num, "-", lower-roman); 
  // prikaz brojača "num" u obliku "malih" rimskih brojeva, odvojenih crticom
}

Primer: Korišćenje counters() funkcije

Sada ćemo isprobati funkciju counters() na primeru kreiranja numeracije div blokova koji su ugnježdeni jedni unutar drugih.

Imamo samo dve klase div blokova - klasu blok (koja treba da bude numerisana) i klasu kont (kontejnerski blok koji sadrži numerisane blokove). Svaki blok može sadržati i kontejner kont u kome se opet nalaze blokovi. Kontejneri su nam potrebni zbog resetovanja brojača koji treba da krene od početka za svaki niz podređenih blokova.

Dakle, zašto ovcde koristimo funkciju counters()? Svaki blok je numerisan istim brojačem - "brojač", a imamo situacije u kojima se blokovi nalaze unutar bloka - to su dva a negde čak i tri nivoa brojača. Funkcija counters() automatski vodi računa o tome.

Primetićete da ova struktura jako podseća na strukturu HTML liste. U tom slučaju bi kont elemenat u stvari bio ul ili ol element, a blok imitira li stavku liste. Zašto onda nismo radili sa listama? Pa hteli smo da pokažemo kako bilo koji element može dobiti CSS numeraciju.


  <style>
  .KONT {
    /* U svakom kontejneru počinjemo sa brojačem od 0 */
    counter-reset: brojac;
  }
  .blok::before {
    /* Za svaki numerisani blok se vrednost brojača povećava za 1 */
    counter-increment: brojac;
    /* Koliko god da imamo blokova-unutar-blokova prikazuju se svi njihovi brojači, 
      odvojeni tačkom i to kao velika latinična slova */
    content: counters(brojac, ".", upper-latin) " ";
  }
  </style>

  <div class="KONT">
    <div class="blok">Prvo</div>
    <div>Neki tekst koji se tu našao...</div>
    
    <div class="blok">Drugo
      <div class="KONT">
        <div class="blok">Neki ispis</div>
        <div class="blok">Još jedan ispis</div>
        <div class="blok">Poslednji ispis</div>
      </div>
    </div>
    
    <div class="blok">Treće
      <div class="KONT">
        <div class="blok">Stavka
          <div class="KONT">
            <div class="blok">Unutrašnja stavka</div>
            <div class="blok">Unutrašnja stavka</div>
            <div class="blok">Unutrašnja stavka</div>
          </div>
        </div>
        <div class="blok">Stavka</div>
      </div>
    </div>

    <div class="blok">Četvrto</div>
    
  </div>

U ispisu vidite da je funkcija counters() odradila posao i svaki blok numerisala čitavim nizom brojača kako bi se prikazala cela hijerarhija nadrđenih i podređenih stavki.

Pomoću brojača možemo u potpunosti kontrolisati način numeracije elemenata. Ako povežemo sve što smo ovde naučili sa specifičnim CSS atributima za formatiranje liste, u rukama ćemo imati veoma moćan alat za kreiranje listi koje se mogu meriti i sa onima iz programa za obradu teksta.

Mozilla Developer Network, CSS Lists and Counters

Svi elementi sajta Web'n'Study, osim onih za koje je navedeno da su u javnom vlasništvu, vlasništvo su autora i ne smeju se koristiti, u celosti ili delimično bez pismenog odobrenja autora. To uključuje tekstove, slike, ilustracije, animacije, prateći grafički materijal i programski kod.

Ovaj sajt koristi tehnologiju kolačića (cookies). Detaljnije o tome možete pročitati u tekstu o našoj politici privatnosti.