Una delle dichiarazioni CSS3 sulla quale possiamo già mettere mano e il selettore ::selection, attraverso il quale possiamo andare a cambiare il colore di evidenziazione del testo. Il supporto attuale è garantito per: Internet Explorer: IE9+, Mozilla Firefox: 3+ (usando il prefisso -moz), Safari: 4+, Chrome: 3+, Opera: 10+. Sugli altri browser verrà mantenuta l’evidenziazione standard, qualcosa quindi di cui non preoccuparci affatto!
Vediamo subito il risultato di quello che possiamo fare con questo nuovo selettore:
Queste sono le dichiarazioni necessarie per garantire la maggior compatibilità possibile:
::selection {background:#FFDF00;}
::-moz-selection {background:#FFDF00;}Come potete notare il background è l’unica proprietà che possiamo modificare. Quello che quindi potremo fare sarà creare, ad esempio, paragrafi con colori di selezione differente, come realizzato nell’esempio della demo:
p.giallo::selection {background:#FFDF00;}
p.giallo::-moz-selection {background:#FFDF00;}
p.arancione::selection {background:#F90;}
p.arancione::-moz-selection {background:#F90;}
p.viola::selection {background:#C680FF;}
p.viola::-moz-selection {background:#C680FF;}La dichiarazione è molto semplice! Una nota importante, non è possibile concatenare le proprietà scrivendo ad esempio: p.giallo::selection, p.giallo::-moz-selection. Questa dichiarazione NON funzionerà! Ricordate quindi, una riga per ogni dichiarazione. Dopodichè date libero sfogo alla vostra creatività!
