Dolda i djupet av CSS-specifikationen hittar du CSS-räknare. Som namnet antyder tillåter de dig att räkna en sak på din sida med CSS som ökar värdet varje gång det visas på dokumentet.
Det här är huvudsakligen användbart om du har en handledningssida - oavsett om det handlar om matlagning eller webbutveckling - de har alla steg att följa, och du kommer sannolikt att behöva skriva stegnummeret före själva innehållet. CSS-räknare kan hjälpa dig genom att göra det automatiskt, du kan även använda det för att räkna bilderna på din fil och lägga till siffror före bildtexter.
I det här exemplet kommer jag att demonstrera hur man åstadkommer detta genom att skapa ett enkelt recept på pannkakor och göra CSS-sökning efter början av varje stycke och lägga till antalet steg före 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 denna HTML är att varje stycke är ett annat steg och med CSS kan vi lägga till dem dynamiskt genom att skriva så lite som 3 rader kod.
CSS-räknare använder fastighetsräkningen . Det har funnits ett tag det var faktiskt implementerat i CSS 2.1. För att kunna använda det måste vi först återställa räknarens standardvärde till 0 innan allt vi vill räkna upp visas på sidan, så det är en bra idé att definiera detta i kroppsstilar, som så:
body {counter-reset: steps;}Den här raden ställer bara räknaren tillbaka till 0 och den namnger den också, så att vi senare kan ringa den och tillåter oss också att ha mer än en räknare på sidan.
Nästa steg är att använda pseudoelementet : innan du riktar in alla stycken och lägger till stegnumret innan hela texten börjar. För att kunna göra det behöver vi använda kontrökrektion och ange sedan innehållet. Vi kan bara använda numret eller vi kan lägga till eller lägga till lite text, i det här fallet lägger vi fram "Steg" före räknarens värde, så här:
p:before {counter-increment: steps;content: "Step " counter(steps) ": ";}Vi borde också göra det här innehållet sticka lite ut och att vi ska ge den en större stilsort än punkterna och göra den djärv:
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;}Om du vill se den här idén i aktion kan du se pennan jag skapade.
En ständig oro när du arbetar med CSS är webbläsarstöd, men eftersom det här är en CSS 2.1-implementering är webbläsarsupporten bra. Den stöds av alla större webbläsare, skrivbord och mobil. Den enda signifikanta webbläsaren som inte stöder den är IE7, och enligt min staträknare används IE7 av endast 0,61% av människor så jag tror att vi kan säga att IE7 kommer att avgå snart. Huruvida du behöver stödja IE7 är beroende av statistiken på din egen webbplats.
CSS-räknare är inte något som du kommer att använda i varje projekt, men det är något som du borde hålla bakom dig eftersom det en gång kan komma till nytta.
Har du använt CSS-räknare i ett projekt? Vilka användningsområden kan du se för dem? Låt oss veta i kommentarerna.