Share
Lo sapevi che, con i CSS, puoi creare un contatore? Questo può essere particolarmente utile nei casi in cui il conteggio è puramente necessario per scopi di presentazione. Ti mostrerò come si usa counter-increment in questo utile suggerimento rapido.
È davvero abbastanza semplice. Non stiamo nemmeno parlando di CSS3 qui; il counter-increment la proprietà è in giro da un po 'ora. È solo che molti di noi non hanno familiarità con esso, o non hanno trovato un uso per questo.
Iniziamo applicando il counter-increment proprietà. Immaginiamo di avere un set di scatole, e ogni scatola dovrebbe mostrare un numero che corrisponde all'ordine in cui la scatola si trova nella sua sequenza.
.box controcampo: scatole;
Il
counter-incrementla proprietà può accettare una o due proprietà. Il primo è unidche userete in seguito per fare riferimento a questo contatore specifico. È anche possibile passare un secondo parametro che fa riferimento all'incremento. Ad esempio, invece di 1, 2, 3, 4, potresti passare a 5, 10, 15, 20 applicando:controconte: scatole 5.
Questo codice ora memorizzerà un numero univoco per ogni elemento che ha a classe di scatola. Ma naturalmente, vogliamo ottenere questo numero sulla pagina. Speriamo che, a un certo punto nel futuro, saremo in grado di utilizzare il soddisfare proprietà all'interno di selettori standard, ma non ancora. Invece, utilizzeremo pseudo elementi per applicare il contenuto.
.casella: dopo contenuto: contatore (caselle);
Questo applicherà un numero univoco - di nuovo, in base all'ordine dell'elemento nella sequenza - al .scatola elemento. Dovremmo ripristinare questo ordine 1 ad un certo punto, potremmo usarlo counter-reset: scatole proprietà.
Ora, potresti ancora pensare: "Perché dovrei mai usarlo?" Ci sono molte situazioni in cui potrebbe essere utile. Ad esempio, considera una sezione commenti di un blog. Se volessi fornire
un numero per ogni commento nel set - possibilmente leggermente trasparente - potresti usare questa tecnica. Il numero non è vitale per il markup e viene utilizzato solo per la presentazione. In questi casi, CSS
i contatori faranno bene il trucco!
Accentsconagua