CSS @counter-style
La direttiva CSS @counter-style in CSS3 consente di creare numerazioni personalizzate
La direttiva @counter-style introdotta in CSS3 consente agli sviluppatori di definire sistemi di numerazione personalizzati. È particolarmente utile per elenchi numerati con simboli grafici, alfabeti alternativi, numeri romani o contatori creativi per interfacce originali.
Sintassi
@counter-style nome {
system: symbolic | alphabetic | numeric | additive | cyclic | fixed | extends;
symbols: lista di simboli;
suffix: "." | ")" | "→";
prefix: "(" | "";
}
system: symbolic | alphabetic | numeric | additive | cyclic | fixed | extends;
symbols: lista di simboli;
suffix: "." | ")" | "→";
prefix: "(" | "";
}
Proprietà principali:
- system: il tipo di sistema di numerazione (es.
symbolic,alphabetic,numeric, ecc.). - symbols: una lista di simboli, lettere o numeri da usare nel contatore.
- prefix/suffix: testo aggiunto prima o dopo il simbolo del contatore.
- fallback: stile da usare se il browser non supporta il tuo contatore personalizzato (opzionale).
Nota: Una volta definito, il contatore si usa con list-style-type: nome oppure counter(nome).
Esempio Direttiva: @counter-style
Codice Esempio: @counter-style
CODE: CSS
@counter-style frecce {
system: symbolic;
symbols: "→" "⇒" "⇨" "⇾" "➤";
suffix: " ";
}.arrow-list {
list-style-type: frecce;
}
Contenuto Esempio: @counter-style
Esempio di utilizzo di @counter-style
Definiamo un contatore personalizzato che usa frecce per numerare una lista:
- Inizio
- Processo
- Verifica
- Completamento
CSS e HTML per un contatore personalizzato:
<style>
@counter-style frecce {
system: symbolic;
symbols: "→" "⇒" "⇨" "⇾" "➤";
suffix: " ";
}
.arrow-list {
list-style-type: frecce;
}
</style>
<ul class="arrow-list">
<li>Inizio</li>
<li>Processo</li>
<li>Verifica</li>
<li>Completamento</li>
</ul>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.108
