Snelle tip CSS-tellers gebruiken om stijgende elementen te stijlen

Leer CSS: de complete gids

We hebben een complete handleiding samengesteld om u te helpen bij het leren van CSS, of u nu net begint met de basis of als u meer geavanceerde CSS wilt verkennen.

In deze snelle tip behandelen we de basisprincipes van CSS-tellers; een nuttige, maar nog niet zo bekende CSS-functie. Wanneer we klaar zijn met het bouwen van onze demo, bekijken we enkele voorbeelden uit de echte wereld van sites die gebruikmaken van CSS-tellers.

Het doel: een geordende lijst stylen

Laten we als eerste stap kijken naar de lay-out die we gaan bouwen:

Niets bijzonders, toch? Dit is echter de uitdaging: we gebruiken semantische opmaak en vermijden de verleiding om onnodig te gebruiken div en span elementen om die tegenmarkeringen te bouwen.

Laten we een schone en flexibele oplossing bespreken!

CSS-tellers

Het enige dat nodig is om de eerder genoemde lay-out te genereren, is om een ​​geordende lijst te definiëren. Op dit punt vraag je je misschien af ​​of we een ander element of zelfs een ongeordende lijst zouden hebben gebruikt. Het korte antwoord is "ja", maar houd er rekening mee dat een geordende lijst het enige element is dat de structuur van onze pagina nauwkeurig beschrijft. 

U zult dan waarschijnlijk vragen of het mogelijk is om het uiterlijk van de geordende lijstnummers volledig aan te passen, en zo de gewenste lay-out op te bouwen. Het stylen van de geordende lijstnummers zou heel lastig zijn. Gelukkig is er een alternatieve benadering waarbij meerdere browsers worden gebruikt, dus laten we het doen verbergen de standaardlijstnummers en profiteer in plaats daarvan van CSS-tellers.

Syntaxis

Met behulp van CSS-tellers kunnen we getallen genereren op basis van herhaalde elementen en ze overeenkomstig inrichten. Denk aan CSS-tellers als variabelen waarvan de waarden kunnen worden verhoogd. Laten we naar de basissyntaxis kijken:

Maak een nieuwe teller

Hier maken we een nieuwe teller op een geordende lijst en definiëren we het bereik. Wij gebruiken de contra-reset eigendom.

1. De eerste waarde is de naam van de teller
2. gevolgd door een optionele parameter die de startwaarde van de teller definieert (standaard: 0). Merk op dat de teller altijd begint te tellen, dus de eerste gegenereerd waarde in ons geval zal 1 zijn.

Het kindelement stylen

In dit tweede diagram kunnen we zien dat we het ::voor pseudo-element van de li op onze lijst.

1. Hier hebben we de waarde van de teller toegevoegd aan de inhoud van onze ::voor. Het is de moeite waard te vermelden dat we CSS-tellers met de eigenschap content kunnen gebruiken om de gegenereerde getallen samen te voegen (samen te voegen) met strings.
2. We verwijzen naar de naam van onze counter
3. en definieer de stijl van de teller als zijnde "decimaal". De mogelijke waarden zijn hier vergelijkbaar met die voor de list-style-type eigendom.
4. In de contra-increment regel we verwijzen opnieuw naar de naam van onze teller
5. gebruik dan een optionele parameter om aan te geven hoeveel de teller is opgehoogd. De standaardwaarde is hier 1.

markup

Op basis van wat we zojuist hebben besproken, hier is onze markup:

 
 
Lijstitem
 
Een beetje tekst hier.
 
 
 
Lijstitem
 
Een beetje tekst hier.
 
 <-- more list items here --> 

En de gerelateerde CSS:

ol counter-reset: sectie;  li list-style-type: none; font-size: 1.5rem; opvulling: 30px; margin-bottom: 15px; achtergrond: # 0e0fee; kleur: #fff;  li :: before content: counter (section); tegen-increment: sectie; weergave: inline-block; positie: absoluut; links: -75px; top: 50%; transform: translateY (-50%); opvulling: 12px; font-size: 2rem; breedte: 25px; hoogte: 25px; text-align: center; kleur: # 000; grensradius: 50%; rand: 3px vast # 000; 

Dit geeft ons het resultaat zoals hieronder getoond:

beperkingen

Op dit punt is het belangrijk op te merken dat pseudo-elementen niet 100% toegankelijk zijn. Om dit te testen maakte ik een snelle test. Ik heb NVDA geïnstalleerd en Chrome 50, Firefox 45 en Internet Explorer 11 gebruikt om een ​​voorbeeld van de demopagina te bekijken. 

Wat ik heb gevonden is dat toen de Internet Explorer werd gebruikt, de schermlezer de gegenereerde inhoud niet aankondigde. Tegenwoordig de meerderheid van schermlezers herkennen gegenereerde inhoud van dit type, maar u moet zich bewust zijn van de mogelijke beperkingen en daarom beslissen welke inhoud veilig genoeg is om met behulp van pseudo-elementen te genereren.

CSS Tellers in the Wild

Nu we de basiskennis van CSS-tellers kennen, zijn we klaar om een ​​paar voorbeelden te geven die hun mogelijke gebruikscasussen aantonen. 

Ten eerste worden CSS-tellers vaak gebruikt in online kranten. Meestal vindt u ze in zijbalken: 

Wall Street JournalHandelsblatt

CSS-tellers kunnen ook worden gebruikt binnen secties die stappen beschrijven of aanwijzingen geven. Hier is zo'n voorbeeld:

SpikeNode  

Voorbeelden van Bloated HTML

In het vorige gedeelte hebben we twee online kranten gezien die gebruikmaken van CSS-tellers. Laten we nu nog eens twee kranten bekijken die opgeblazen markup gebruiken (zij het met toegankelijke content) in plaats van CSS-counters:

Washington PostVoogd  

Conclusie

In deze snelle tip hebben we geleerd hoe we CSS-tellers kunnen gebruiken om geordende lijstitems te stijlen. Laten we kort samenvatten wat we hebben behandeld:

• CSS-tellers zijn een geweldige oplossing voor elk project waarvoor dynamische ordening met aangepaste stijlen vereist is. Aan de andere kant is dit geen volledig toegankelijke oplossing, dus houd rekening met de beperkingen en gebruik deze op de juiste manier.
• Om de tellers in te stellen, moeten we twee eigenschappen specificeren (d.w.z.. contra-reset,contra-increment) en één functie (teller() of tellers ()).
• Pseudo-elementen zijn verantwoordelijk voor het weergeven van de tellers. Vergeet niet dat dit gebeurt via de inhoud eigenschap, die alleen beschikbaar is voor pseudo-elementen.

Heeft u ooit CSS-tellers gebruikt in uw projecten? Zo ja, deel dan uw werk met ons!