Suggerimento rapido utilizzare i contatori CSS per definire gli elementi incrementali

Scopri CSS: la guida completa

Abbiamo creato una guida completa per aiutarti a imparare i CSS, se hai appena iniziato con le nozioni di base o se vuoi esplorare CSS più avanzati.

In questo suggerimento rapido, tratteremo le basi dei contatori CSS; una funzionalità CSS utile, ma non così ben conosciuta. Quando avremo finito di creare la nostra demo, daremo un'occhiata ad alcuni esempi reali di siti che sfruttano i contatori CSS.

The Goal: Styling a List ordinato

Come primo passo, diamo un'occhiata al layout che costruiremo:

Niente di stravagante, giusto? Ecco la sfida però: useremo il markup semantico, evitando la tentazione di usare inutili div e campata elementi per costruire quei segnalini contatore.

Parliamo di una soluzione pulita e flessibile!

Contatori CSS

Tutto ciò che serve per generare il layout di cui sopra è quello di definire una lista ordinata. A questo punto, ti starai chiedendo se avremmo potuto usare un altro elemento o addirittura un elenco non ordinato. La risposta breve è "sì", ma tieni presente che una lista ordinata è l'unico elemento che descrive accuratamente la struttura della nostra pagina. 

Probabilmente ti verrà chiesto se è possibile personalizzare completamente l'aspetto dei numeri di elenco ordinati, costruendo in questo modo il layout desiderato. Disegnare i numeri delle liste ordinate sarebbe davvero complicato. Per fortuna però, c'è un approccio cross-browser alternativo, quindi andiamo nascondere i numeri di elenco predefiniti e approfittano invece dei contatori CSS.

Sintassi

I contatori CSS ci consentono di generare numeri basati su elementi ripetuti e di modificarli di conseguenza. Pensa ai contatori CSS come a variabili i cui valori possono essere incrementati. Diamo un'occhiata alla sintassi di base:

Crea un nuovo contatore

Qui creiamo un nuovo contatore su una lista ordinata e ne definiamo l'ambito. Noi usiamo il counter-reset proprietà.

1. Il primo valore è il nome del contatore
2. seguito da un parametro facoltativo che definisce il valore iniziale del contatore (predefinito: 0). Si noti che il contatore inizierà sempre il conteggio verso l'alto, quindi il primo generato il valore nel nostro caso sarà 1.

Disegnare l'elemento figlio

In questo secondo diagramma possiamo vedere che stiamo disegnando il ::prima pseudo-elemento del Li sulla nostra lista.

1. Qui abbiamo aggiunto il valore del contatore al soddisfare della nostra ::prima. Vale la pena ricordare che utilizzando i contatori CSS con la proprietà content, siamo in grado di concatenare (unire) i numeri generati con stringhe.
2. Ci riferiamo al nome del nostro contatore
3. e definire lo stile del contatore come "decimale". I possibili valori qui sono simili a quelli usati per list-style-type proprietà.
4. Nel counter-increment di nuovo ci riferiamo al nome del nostro contatore
5. quindi utilizzare un parametro facoltativo per indicare di quanto viene incrementato il contatore. Il valore predefinito qui è 1.

markup

Sulla base di ciò che abbiamo appena discusso, ecco il nostro markup:

 
 
Lista Articolo
 
Qualche testo qui.
 
 
 
Lista Articolo
 
Qualche testo qui.
 
 <-- more list items here --> 

E il CSS correlato:

ol counter-reset: section;  li list-style-type: none; font-size: 1.5rem; imbottitura: 30px; margin-bottom: 15px; sfondo: # 0e0fee; colore: #fff;  li :: before content: counter (section); contropartita: sezione; display: blocco in linea; posizione: assoluta; a sinistra: -75px; superiore: 50%; transform: translateY (-50%); imbottitura: 12px; font-size: 2rem; larghezza: 25px; altezza: 25px; allineamento del testo: centro; colore: # 000; raggio-limite: 50%; border: 3px solid # 000; 

Questo ci dà il risultato come mostrato di seguito:

limitazioni

A questo punto, è importante notare che gli pseudo-elementi non sono accessibili al 100%. Per testare questo ho fatto un test rapido. Ho installato NVDA e utilizzato Chrome 50, Firefox 45 e Internet Explorer 11 per visualizzare l'anteprima della pagina demo. 

Quello che ho trovato è che quando è stato utilizzato Internet Explorer, lo screen reader non ha annunciato il contenuto generato. In questi giorni il maggioranza degli screen reader riconoscono contenuti generati di questo tipo, tuttavia dovresti essere consapevole delle possibili limitazioni e quindi decidere quale contenuto è abbastanza sicuro da generare usando pseudo-elementi.

Contatori CSS in natura

Ora che conosciamo le basi dei contatori CSS, siamo pronti a mostrare alcuni esempi che dimostrano i loro potenziali casi d'uso. 

In primo luogo, i contatori CSS sono comunemente usati nei giornali online. La maggior parte delle volte li troverai nelle barre laterali: 

giornale di Wall StreetHandelsblatt

I contatori CSS possono anche essere utilizzati all'interno di sezioni che descrivono i passaggi o forniscono indicazioni. Ecco solo un esempio:

SpikeNode  

Esempi di HTML gonfiato

Nella sezione precedente, abbiamo visto due quotidiani online che sfruttano i contatori CSS. Ora, vediamo altri due giornali che usano il markup gonfio (anche se con contenuti accessibili) invece dei contatori CSS:

Washington PostCustode  

Conclusione

In questo rapido suggerimento, abbiamo appreso come utilizzare i contatori CSS per lo stile degli articoli ordinati. Riassumiamo brevemente ciò che abbiamo trattato:

• I contatori CSS sono un'ottima soluzione per ogni progetto che richiede un ordinamento dinamico con stili personalizzati. D'altra parte, questa non è una soluzione completamente accessibile, quindi sii consapevole dei suoi limiti e usala correttamente.
• Per impostare i contatori, dobbiamo specificare due proprietà (es. counter-reset,counter-increment) e una funzione (contatore () o contatori ()).
• Gli pseudo-elementi sono responsabili della visualizzazione dei contatori. Ricorda che sta accadendo tramite il soddisfare proprietà, che è disponibile solo per gli pseudo-elementi.

Hai mai usato i contatori CSS nei tuoi progetti? Se sì, assicurati di condividere con noi il tuo lavoro!