Come usare i CSS3 per creare interazione con l’utente

Al prossimo Codemotion Milano parleremo spesso di CSS3. Sandro Paganotti in particolare ci spiegherà come sfruttarli per creare interazione con l’utente. Ecco che cosa ci riserverà il suo intervento.

Le specifiche CSS3 introducono una nuova serie di pseudo selettori estremamente interessanti sotto il profilo dell’interazione con l’utente. Per esempio utilizzando :checked è possibile modificare le proprietà visive di una casella di controllo soltanto se questa è stata selezionata. Inoltre, combinando :checked con il selettore ~ possiamo estendere la modifica al comportamento di un’altro elemento successivo alla checkbox, ad esempio una <div>, creando un meccanismo mostra/nascondi come in questa piccola demo.

Un altro pseudo selettore dall’alto potenziale è :target, che si “attiva” quando l’elemento associato (tipicamente una <a>) diventa target della navigazione in pagina, quindi in una url come la seguente http://esempio.lan/#capitolo5 le proprietà associate allo pseudo selettore :target sono attive per l’elemento <a id=”capitolo5″>.

Grazie a quest ed altri pseudo selettori è possibile implementare in puro CSS meccanismi di interazione altrimenti ottenibili soltanto attraverso la stesura di codice JavaScript.

photo credit: Jeffrey via photopin cc