CSS tellers

pas op je tellen

Geschreven door: op

In dit artikel wil ik een specifiek onderdeel uitlichten welke niet of zelden op dit moment in webontwikkeling gebruikt worden, namelijk de zgn. 'Counter'-functionaliteit in CSS3. Normaliter wordt teller-functionaliteit met een server-script of javascript in code opgelost maar dat is, gedeeltelijk, dus niet meer nodig!

Paginering

De nummers staan niet in de HTML, maar worden gegenereerd door onderstaande regels:

body {
    counter-reset: pages; // initialiseer de teller counter
}
  a {     counter-increment: pages; //waar moet de teller op }
a::before {     content: counter(pages); // toon de teller }

 

Blokken tellen over verschillende elementen

Relevante CSS:

body {
    counter-reset: sections boxes;
}
section {     counter-increment: sections; }
section::before {     content: 'Section ' counter(sections); }
.box {     counter-increment: boxes; }
.box::before {     content: counter(boxes, upper-roman); }

 

Teller voor geselecteerde elementen

Nu wordt het al wat spannender! We hebben hierboven namelijk een counter op de 'input:checked' gezet. Hierdoor kun je een totaal aantal geselecteerden weergeven. Hieronder de belangrijkste CSS om dit te bereiken:

body {
    counter-reset: characters;
}
input:checked {     counter-increment: characters; }
.total::after {     content: counter(characters); }

 

Rekenspel

Hulp met rekenen nodig? Onderstaande CSS is nodig om tot dit rekenwonder te komen:

body {
    counter-reset: sum;
}
#a:checked { counter-increment: sum 64; } #b:checked { counter-increment: sum 16; } #c:checked { counter-increment: sum -32; } #d:checked { counter-increment: sum 128; } #e:checked { counter-increment: sum 4; } #f:checked { counter-increment: sum -8; } .sum::before {     content: '= ' counter(sum); }

Handige weetjes m.b.t. de CSS eigenschap counter-increment:

  • Je kan een counter ook met een bepaald getal beginnen:
    body {
        counter-reset: dogs 41; // begin met 41 honden
    }
    
  • Wanneer een element een zgn. display: none heeft zal deze ook niet meegeteld worden. Er zijn andere manieren om een element te verwijderen en toch mee te tellen in een counter-increment, bijv:
    input {
        position: absolute;
        left: -9999px;
    }
    

Browser ondersteuning voor de zgn. CSS-teller is goed.

Webrichtlijnen: CSS-tellers worden gegenereerd vanuit pseudo-elementen. Sommige screen-readers ondersteunen dit en andere niet...Hierdoor is het 'best practice' deze oplossing niet te gebruiken bij 'kritische' content.

CSS tellers

Trefwoorden:

Aantal keer bekeken: 2.938