fbpx

Come sfruttare al meglio gli elenchi Css

Come sfruttare al meglio gli elenchi Css

Quando inseriamo gli elenchi puntati o numerati, di solito utilizziamo lo stile di default, senza sapere che invece è possibile dare uno stile maggiore ed è possibile migliorare quello classico di partenza grazie alle specifiche delle nuove proprietà dei CSS.
Gli elenchi hanno delle proprietà particolari che non conosciamo perché richiedono delle proprietà particolari. Nel caso degli elenchi ordinati e non ordinati , sappiamo che come elenchi puntati possiamo scegliere tra diversi “bullets” o meglio i pallini come i dischi pieni, quadrati ecc ecc.

Pseudo elemento ::marker

Grazie all’utilizzo dello pseudo elemento ::marker possiamo fare qualcosa di più interessante. Di solito gli elenchi puntati li utilizziamo per elencare delle cose e per creare una lista rapida e sintetica. In tal caso utilizziamo i tag <ol> per le liste ordinate e <ul> per le liste non ordinate. Un altro uso possibile è quello di evidenziare il menù di navigazione una volta che puntiamo il mouse sopra la voce del menù. Grazie al pseudo elemento ::marker, che seleziona il box dove è contenuto l’elemento del pallino o del numero, si può quindi separare gli stili di quest’ultimo dal contenuto della lista stessa. Prima questo non era possibile, per cui se cambiavi il colore o il font di ul o li, cambiava anche il colore dell’elemento della lista.

In precedenza si poteva raggiungere questo obiettivo ma utilizzando per esempio il tag “span” :

ul {
color: #00b7a8;
}

ul span {
color #333;
}

Adesso grazie al ::marker otteniamo lo stesso risultato ma con il seguente codice:

ul {
color: #333;
}

ul ::marker {
color: #00b7a8;
}

Si potrebbe anche utilizzare una dimensione differente o un font differente per i numeri o la lista ordinata:

ol ::marker {
font-size: 200%;
color: #00b7a8;
font-family: “Comic Sans MS”, cursive, sans-serif;
}

Si può usare la proprietà ::marker anche per elementi non ordinati. Qui sotto ho impostato l’intestazione h1 in una lista ordinata. Infatti mostra l’intestazione con un bullet ma addirittura ti permette di inserire anche un emoji:

h1 {
display: list-item;
}

h1::marker {
content: “🐱”;
}

Nell’esempio sopra, ho utilizzato il contenuto nel tag “marker” per evidenziare l’intestazione ma solo alcune proprietà sono disponibili. Ce ne sono altre come il font, colore o anche le proprietà del contenuto inserito tra le virgolette.
Quindi è possibile inserire anche stringhe di testo nel ::marker soprattutto in Firefox.

Contatori

Le liste ordinate hanno una lista di numeri che sono considerati come dei contatori. Possiamo creare contatori che combinati con lo pseudo elemento “::marker” possono generare delle funzioni particolari. I contatori possono essere anche utilizzati come contenuto all’interno del tag “content” come ::marker.
In tal caso va utilizzata la proprietà step che crea un contatore di una lista:

::marker {
content: “Step ” counter(list-item) “: “;
}

Contatori nidificati

In caso di contatori nidificati, un modo comune per numerarli è avere l’elemento iniziale come numero 1 e gli elementi figli come  (1.1, 1.2) e i loro figli come (1.1.1, 1.1.2), e così via. Questo obiettivo si può raggiungere utilizzando le funzioni dei contatori.

La prima dichiarazione per il contatore () è il nome del contatore da utilizzare. La seconda è la stringa – che è ciò che sarà concatenata tra i contatori ed io utilizzo il punto (.) e alla fine aggiungo i due punti (:) fuori dalla funzione del contatore ma all’interno del valore del contenuto, in modo da separarlo.:

::marker {
content: counters(list-item,’.’) ‘:’;
color: #00b7a8;
font-weight: bold;
}

Come noterete nel precedente esercizio abbiamo utilizzato la funzione Counter, nel secondo Counters. Qual è la differenza?
La funzione Counter() è stata utilizzata nel precedente esempio per realizzare il conteggio come primo elemento e quindi ad un unico livello. Mentre nel caso delle liste annidate bisogna riferirsi al livello, visto che ci sono più livelli. Infatti la funzione counters() vi da l’opportunità di concatenare le stringhe tra i contatori dei diversi livelli. Per cui se abbiamo un lista di elementi con un contatore di 2 che ne contiene 4 possiamo realizzare questa concatenazione con il seguente codice:

::marker {
content: counters(list-item,’.’);
}

Per ora mi fermo alle liste e alle intestazioni ma questa proprietà può essere utilizzat anche su altri elementi come i form. Per ulteriori approfondimenti ecco i seguenti articoli:

::markers
Using CSS Counters
Counting With CSS Counters and CSS Grid

FONTE: Rashel Andrew – Smashing Magazine

— SCARICA LA RISORSA “Elenchi puntati e nunerati” —

Per piacere seguici e metti mi piace:
Nessun Commento

Sorry, the comment form is closed at this time.

Social media & sharing icons powered by UltimatelySocial