Nascosti nelle profondità delle specifiche CSS troverai i contatori CSS. Come suggerisce il nome, ti permette di contare una cosa sulla tua pagina con CSS incrementando il valore ogni volta che appare sul documento.
Questo è principalmente utile se hai un sito web di tutorial - che si tratti di cucina o di sviluppo web - tutti hanno dei passi da seguire e molto probabilmente dovrai scrivere il numero del passo prima del contenuto reale. I contatori CSS possono aiutarti a farlo automaticamente, puoi persino usarlo per contare le immagini sul tuo file e aggiungere numeri prima delle didascalie.
In questo esempio mostrerò come ottenere questo risultato creando una semplice ricetta per i pancake e facendo la ricerca CSS per l'inizio di ogni paragrafo e aggiungendo il numero del passo precedente.
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.
L'obiettivo in questo HTML è che ogni paragrafo è un passo diverso e con i CSS possiamo aggiungerli dinamicamente scrivendo solo 3 righe di codice.
I contatori CSS usano il controvalore delle proprietà . È in circolazione da un po 'di tempo in cui è stato implementato in CSS 2.1, per utilizzarlo dobbiamo prima azzerare il valore predefinito del contatore a 0 prima che tutto ciò che vogliamo conteggiare venga visualizzato nella pagina, quindi è una buona idea definirlo nel stili del corpo, così:
body {counter-reset: steps;}Questa riga imposta nuovamente il contatore su 0 e lo nomina anche, permettendoci di chiamarlo in un secondo momento e permettendoci di avere più di un contatore sulla pagina.
Il prossimo passo è usare lo pseudo elemento : prima di indirizzare tutti i paragrafi e aggiungere il numero del passo prima che tutto il testo inizi. Per fare ciò abbiamo bisogno di usare il controvalore, quindi specificare il contenuto. Possiamo semplicemente usare il numero o possiamo aggiungere o anteporre del testo, in questo caso anteponiamo "Step" prima del valore del contatore, in questo modo:
p:before {counter-increment: steps;content: "Step " counter(steps) ": ";}Dovremmo anche fare in modo che questo contenuto risulti un po 'enfatico e per farlo diamo un carattere più grande dei paragrafi e lo rendiamo in grassetto:
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;}Se vuoi vedere questa idea in azione, puoi vedere la penna che ho creato.
Una preoccupazione costante quando si lavora con i CSS è il supporto del browser, ma poiché si tratta di un'implementazione CSS 2.1 il supporto del browser è eccezionale: è supportato da tutti i principali browser, desktop e mobili, l'unico browser significativo che non lo supporta è IE7, e secondo il mio contatore statale IE7 è utilizzato solo dallo 0,61% delle persone, quindi penso che possiamo dire che IE7 partirà presto. Se devi supportare o meno IE7 dipende dalle statistiche del tuo sito.
I contatori CSS non sono qualcosa che userete in ogni progetto, ma è qualcosa che dovreste tenere nella vostra mente perché un giorno potrebbe rivelarsi utile.
Hai usato i contatori CSS in un progetto? Quali usi puoi vedere per loro? Fateci sapere nei commenti.
Immagine in primo piano / miniatura, conteggio dell'immagine via Shutterstock.