Verscholen in de diepten van de CSS-specificatie zul je CSS-tellers vinden. Zoals de naam al doet vermoeden, kun je een ding op je pagina tellen door CSS de waarde te verhogen telkens wanneer het op het document verschijnt.
Dit is vooral handig als u een zelfstudiewebsite hebt - of het nu gaat om koken of webontwikkeling - ze moeten allemaal de te volgen stappen volgen en u moet waarschijnlijk het stapnummer vóór de daadwerkelijke inhoud schrijven. CSS-tellers kunnen helpen door dat automatisch te doen, je kunt het zelfs gebruiken om de afbeeldingen in je bestand te tellen en cijfernummers toe te voegen voor ondertitels.
In dit voorbeeld zal ik demonstreren hoe dit kan worden bereikt door een eenvoudig recept voor pannenkoeken te maken en CSS-zoeken te maken naar het begin van elke alinea en het nummer van de vorige stap toe te voegen.
Place the flour in a large bowl, make a well in the centre and pour in the milk and eggs. Give the liquid mixture a quick whisk before incorporating the flour. Continue to whisk until you have a smooth batter.
Now add 1 tbsp vegetable oil and whisk thoroughly.
Take a crêpe pan, or large frying pan, dip some kitchen roll in the oil and carefully wipe the inside of the pan. Heat the pan over a medium heat for one minute.
Add just under a ladleful of batter to the pan and immediately start swirling it around the pan to produce a nice even layer.
Cook the pancake for approximately 30-40 seconds. Use a palette knife to lift the pancake carefully to look at the underside to check it is golden-brown before turning over. Cook the other side for approx 30-40 seconds and transfer to a serving plate.
Het doel van deze HTML is dat elke alinea een andere stap is en met CSS kunnen we deze dynamisch toevoegen door slechts 3 regels code te schrijven.
CSS-tellers gebruiken het teller-increment van de eigenschap . Het is al een tijdje geleden dat het daadwerkelijk geïmplementeerd werd in CSS 2.1, om het te gebruiken moeten we eerst de standaardwaarde van de teller op nul zetten voordat alles wat we willen tellen op de pagina verschijnt, dus het is een goed idee om dit in de lichaam stijlen, zoals zo:
body {counter-reset: steps;}Deze regel zet de teller gewoon terug naar 0 en geeft deze ook een naam, zodat we hem later kunnen bellen en we ook meer dan één teller op de pagina kunnen hebben.
De volgende stap is om het pseudo-element te gebruiken : voordat om alle alinea's te targeten en het stapnummer toe te voegen voordat alle tekst begint. Om dit te doen, moeten we een tegenstap gebruiken en vervolgens de inhoud opgeven. We kunnen alleen het nummer gebruiken of we kunnen tekst toevoegen of toevoegen, in dit geval voegen we 'Stap' vóór de waarde van de teller toe, zoals:
p:before {counter-increment: steps;content: "Step " counter(steps) ": ";}We moeten deze inhoud ook een beetje opvallen en om dat te doen, zullen we het een grotere lettergrootte geven dan de alinea's en vet maken:
p {color: #242424;font-family: arial, sans-serif;font-size: 16px;line-height: 20px;}p:before {counter-increment: steps;content: "Step " counter(steps) ": ";font-weight: bold;font-size: 18px;}Als je dit idee in actie wilt zien, kun je het zien de pen die ik heb gemaakt.
Een constante zorg bij het werken met CSS is de browser-ondersteuning, maar aangezien dit een CSS 2.1-implementatie is, is de browserondersteuning geweldig: het wordt ondersteund door alle belangrijke browsers, desktops en mobiele apparaten, de enige belangrijke browser die dit niet ondersteunt is IE7, en volgens mijn teller wordt IE7 slechts door 0,61% van de mensen gebruikt, dus ik denk dat we kunnen zeggen dat IE7 binnenkort zal vertrekken. Of u IE7 al dan niet moet ondersteunen, is afhankelijk van de statistieken van uw eigen site.
CSS-tellers zijn niet iets dat je in elk project zult gebruiken, maar het is iets dat je in je achterhoofd moet houden omdat het op een dag van pas kan komen.
Heeft u CSS-tellers in een project gebruikt? Welke toepassingen kan je voor hen zien? Laat het ons weten in de comments.
Uitgelichte afbeelding / thumbnail, afbeelding tellen via Shutterstock.