CSS  »  Articoli  »  CSS 3 

Le pseudo-classi di stato

Una novità dei CSS3 specificatamente ideata per i form, sono le UI element states pseudo-classes, in grado di creare regole specifiche per elementi di form e i loro stati dinamici. Vediamole brevemente:

• selettore:enabled definisce una regola per gli elementi individuati da "selettore" (necessariamente elementi di form) che siano abilitati
• selettore:disabled definisce una regola per gli elementi individuati da "selettore" (necessariamente elementi di form) che siano disabilitati
• selettore:checked definisce una regola per gli elementi individuati da "selettore" (necessariamente checkbox o radio button) che siano attivi

Da quanto ho potuto verificare, al momento solo Firefox 2 e Opera 9.2 hanno supporto parziale per queste pseudo-classi, e in particolare solo per :checked. D'altra parte, non so se sia una buona idea permettere di ridefinire il look and feel di elementi di form disabilitati; e personalizzare la resa di elementi di form si è da sempre rivelato problematico in quanto intervengono fattori quali il browser e il sistema operativo in uso.

La pseudo-classe ::selection

Dopo questa breve carrellata introduttiva ai selettori CSS3, arriviamo finalmente ad una di quelle caratteristiche già parzialmente implementate sui browser, ovvero la pseudo-classe ::selection, che consente di specificare l'apparenza del testo selezionato dall'utente. Da notare per prima cosa la presenza di una coppia di due punti, al contrario delle altre pseudo-classi. Siamo ora pronti a presentare l'esempio: se viene visualizzato con Firefox 2 o Safari 3 e si seleziona il testo, ecco cosa risulta:

Figura 1 - selezioni personalizzate con i CSS3

La pseudo-classe ::selection permette di definire una regola per controllare l'apparenza del testo selezionato dall'utente. Regola che potrà includere, almeno dai test che ho potuto svolgere, solo il colore di sfondo e del testo della selezione.

Mentre Safari aderisce alla nomenclatura dei CSS3, per Firefox e i browser Gecko in generale, necessitano del prefisso "-moz-". Ecco le due regole utilizzate nell'esempio per far si che il testo selezionato risulti rosso su sfondo giallo:

È auspicabile che nelle future versioni di Firefox la pseudo-classe aderirà alla nomenclatura delle specifiche, e magari anche che qualche altro browser la supporti. Nel frattempo, per consentire la validazione del CSS principale, è preferibile tenere le due regole viste sopra confinate in un foglio di stile ad hoc. Nell'esempio ho salvato le due regole nel file "selection.css" e le ho incluse nella pagina con lo script che abbiamo presentato lo scorso appuntamento.

Questo è tutto per quanto riguarda i selettori. Non ci resta che vedere alcune delle potenti proprietà CSS3. Saranno argomento del prossimo appuntamento. Non mancate!

Altri articoli

Altre guide

Altre newsletter