Skjult væk i dybden af CSS-specifikationen finder du CSS-tællere. Som navnet antyder, kan de tælle en ting på din side med CSS, der øger værdien, hver gang den vises på dokumentet.
Dette er hovedsageligt nyttigt, hvis du har et selvstudiewebsted - hvad enten det drejer sig om madlavning eller webudvikling - de har alle trin til at følge, og du skal højst sandsynligt skrive trinnummeret før det faktiske indhold. CSS-tællere kan hjælpe ved at gøre det automatisk, du kan endda bruge det til at tælle billederne på din fil og tilføje figurnumre før billedtekster.
I dette eksempel vil jeg demonstrere, hvordan man opnår dette ved at oprette en simpel opskrift på pandekager og gøre CSS søgning efter begyndelsen af hvert afsnit og tilføje antallet af trin før det.
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.
Målet i denne HTML er, at hvert afsnit er et andet trin, og med CSS kan vi tilføje dem dynamisk ved at skrive så lidt som 3 linjer kode.
CSS-tællere bruger ejendomstællingen . Det har eksisteret i et stykke tid, det blev faktisk implementeret i CSS 2.1. For at bruge det skal vi først nulstille tællers standardværdi til 0, før alt vi vil tælle viser op på siden, så det er en god ide at definere dette i kropsstile, som sådan:
body {counter-reset: steps;}Denne linje sætter bare tælleren tilbage til 0, og den navngiver den også, så vi senere kan kalde den og tillader os også at have mere end en tæller på siden.
Det næste skridt er at bruge pseudoelementet : før at målrette mod alle afsnit og tilføje trinnummeret, før hele teksten begynder. For at gøre det skal vi bruge kontra-inkrement og derefter angive indholdet. Vi kan bare bruge nummeret, eller vi kan tilføje eller forpligte noget tekst, i så fald vil vi udfylde "Step" før tællerens værdi, som sådan:
p:before {counter-increment: steps;content: "Step " counter(steps) ": ";}Vi bør også gøre dette indhold skiller sig ud lidt, og for at gøre det giver vi det en større skriftstørrelse end afsnitene og gør den fed:
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;}Hvis du vil se denne ide i aktion, kan du se den pen, jeg lavede.
En konstant bekymring, når du arbejder med CSS, er browsersupporten, men da dette er en CSS 2.1-implementering, er browsersupporten stor. Den understøttes af alle større browsere, desktop og mobile. Den eneste vigtige browser, der ikke understøtter det, er IE7, og ifølge min statstæller bruges IE7 kun af kun 0,61% af befolkningen, så jeg tror, at vi kan sige, at IE7 vil afgå hurtigt. Uanset om du har brug for at støtte IE7, afhænger det af statistikken på dit eget websted.
CSS-tællere er ikke noget, du vil bruge i hvert projekt, men det er noget, du bør holde dig i baghovedet, fordi det engang kan komme til nytte.
Har du brugt CSS-tællere i et projekt? Hvilke anvendelser kan du se for dem? Lad os vide i kommentarerne.
Fremhævet billede / miniaturebillede, tæller billede via Shutterstock.