Introduzione a HTML5: gestire gli stili con CSS 3

In questa serie di articoli dedicati ad HTML 5 abbiamo già chiarito come le tecnologie coinvolte in questa rivoluzione sono in realtà 3:

• HTML 5
• CSS 3
• JavaScript

Da questo articolo cominciamo a trattare la versione 3 dello standard CSS che si occupa dello stile delle nostre pagine web.

Supporto per i browser

Anche in questo caso cominciamo con il valutare come i browser supportino le novità introdotte da CSS 3.

La buona notizia si ripete: le ultime versioni di tutti i principali browser disponibili supportano correttamente CSS 3.

Potete vedere questo sito per ulteriori dettagli, o direttamente la pagina del W3C.

In alcuni casi, è necessario usare dei prefissi personalizzati (es. -moz o -webkit) per adattarsi allo specifico browser.

Ma questa anomalia dovrebbe essere risolta in fretta.

Selettori aggiuntivi

In questo articolo non intendiamo affrontare le basi della scrittura di un CSS.

Diamo per scontato che sappiate come scrivere le regole in un foglio di stile, e che selettori come i seguenti – scelti come esempio – vi siano perfettamente chiari:

p { ... }
span { ... }
p.news { ... }
.active { ... }
div#content h1.title { ... }

Negli esempi sopra riportati gli elementi vengono scelti in base al tag, all’id o alla classe. Questi rappresentano i selettori più semplici.

Concentriamoci invece sulle novità introdotte da CSS 3.

Scelta per attributo

Cominciamo dalla scelta di un elemento in base alla presenza o al valore di uno specifico attributo.

p[name] { … } seleziona solo gli elementi p che hanno un attributo name
p[name=”text”] { … } seleziona gli elementi p in cui l’attributo name è uguale a “text” (es. <p name=”text”>)
p[name^=”text”] { … } seleziona gli elementi p in cui l’attributo name comincia per “text” (es. <p name=”text-first”>)
p[name$=”text”] { … } seleziona gli elementi p in cui l’attributo name finisce per “text” (es. <p name=”first-text”>)
p[name*=”text”] { … } seleziona gli elementi p in cui l’attributo name contiene “text” (es. <p name=”first-text-important”>)

Pseudoclassi: nth-child, last-child, odd e even

Pensiamo al menù di navigazione

    <nav>
      <ul>
        <li><a href="#">Azienda</a></li>
        <li><a href="#">Servizi</a></li>
        <li><a href="#">Contatti</a></li>
      </ul>
    </nav>

Possiamo facilmente identificare gli elementi in base al loro ordine con:

li:nth-child(1) { … }
li:nth-child(2) { … }
li:nth-child(3) { … }

si riferiscono rispettivamente al primo, secondo e terzo elemento della lista.

In maniera simile,

li:last-child { … }

si riferisce all’ultimo elemento della lista, mentre

li:odd { … }
li:even { … }

si riferiscono rispettivamente agli elementi dispari e pari, e

li:only-child { … }

si riferisce ai “figli unici”.

Nota: no, non ci siamo dimenticati della pseudoclasse :first-child. Tale pseudoclasse era già presente in CSS 2, mentre CSS 3 completa la famiglia.

E altri ancora

:enabled, :disabled e :checked ci permettono di avere uno stile dinamico sui controlli delle nostre form.

In realtà potremmo ottenere lo stesso risultato tramite la selezione per attributo vista poco sopra, ma queste pseudoclassi che ci semplificano il lavoro.

:not ci permette di invertire il senso di un selettore, ovvero assegnare uno stile a tutti gli elementi tranne quello indicato:

:not(li:first-child) { ... }

In questo caso selezionamo tutti gli elementi delle liste tranne il primo.

:first-of-type, :last-of-type, :only-of-type, :nth-of-type sono una variante dei selettori child che si applicano solo ad elementi di un certo tipo, ad esempio:

p:nth-of-type(2)

considera solo gli elementi p nel conteggio della posizione, ignorando eventuali altri elementi sullo stesso livello.

Dagli stili ai box

L’aggiunta di selettori ci permette una selezione sempre più mirata e dinamica.

In breve, riusciamo ad ottenere un miglior aspetto per la nostra pagina senza bisogno di intervenire sugli stili tramite JavaScript.

Ci teniamo JavaScript per fare altre cose, come vedremo più avanti.

Adesso tuttavia è il momento di affrontare alcune importanti novità relative al box model, ovvero alla gestione di come vengono distribuiti gli elementi nella pagina.

Nel prossimo articolo affronteremo il confronto tra il traditional box model e il nuovo flexible box model.