Messaggi su richiesta con i CSS

In questo appuntamento vedremo una semplice tecnica per mostrare messaggi a
richiesta. L'ispirazione proviene da FontStruct,
sito su cui questo metodo è usato estensivamente su campi di form e in generale per
fornire informazioni accessorie. Su FontStruct viene usato Javascript, ma
ho pensato di replicare l'effetto esclusivamente con i CSS. Vediamo subito l'esempio
e il suo screenshot:

Si tratta di un modo efficace per aggiungere informazioni accessorie su campi
di form e più in generale su elementi ricorrenti, consentendo di alleggerire
visivamente la pagina e allo stesso tempo offrire all'utente informazioni utili.

La tecnica che vedremo qui è molto simile a quella adottata nei tooltip con i CSS
e richiede un semplice markup e poche regole CSS. Cominciamo dall'HTML: si tratta semplicemente
di includere un elemento span con una classe specifica e all'interno un elemento em che contiene
il testo del nostro messaggio:

All'interno dell'em potremo inserire
altri elementi inline quali span, em, strong
e, perché no, anche immagini qualora fosse necessario.

Siamo pronti a procedere con il CSS dell'esempio, che è piuttosto semplice. Si tratta in sostanza
di rendere float e posizionare relativamente lo span esterno e attribuire le dimensioni
tali da mostrare l'icona di sfondo (16x16 pixel). Lo span creerà quindi un contesto di posizionamento e
grazie ai posizionamenti assoluti
saremo in grado di sistemare rispetto ad esso il messaggio vero e proprio contenuto nell'em.

In stato normale l'elemento em è portato fuori dalla finestra del browser
così da essere invisibile, mentre in fase :hover dello span vengono regolate
le coordinate così da mostrarlo. Questo è a grandi linee il CSS dell'esempio,
che possiamo ora vedere per intero:

Il nostro esempio è così ultimato. Alcune note tecniche
ora. Dato il mancato supporto della pseudo-classe :hover su elementi
diversi dai link su IE5.x e IE6 l'intera tecnica viene nascosta a questi due browser
grazie al workaround con la parola chiave !important di cui abbiamo
parlato qui sul blog.

E' importante inoltre attribuire una larghezza minima all'em: se invece
vi fosse la necessità di avere testo su un'unica riga si può sostituire la dichiarazione
min-width: 12em in favore di white-space: nowrap. E' infine
possibile ovviamente intervenire su colore, bordi e testo dei messaggi.

In chiusura, ricordo è che possibile estendere la tecnica per visualizzare
diverse tipologie di messaggi con l'ausilio delle classi multiple, un po' come
abbiamo fatto nell'articolo Messaggi di alert con i CSS.

Supporto della tecnica

L'esempio qui visto, dato che utilizza
la tecnica off-left, dovrebbe essere
accessibile a screen-reader e browser testuali e in generale degrada bene in assenza di CSS.
E' pero praticamente inutilizzabile nel caso di uno scenario raro ma possibile: CSS abilitati
e immagini disabilitate. In un caso simile, l'utente infatti non sarebbe in grado
di riconoscere l'immagine che fa da trigger per l'informazione a richiesta.

E' stato testato con successo su IE7 e sulle ultime versioni di Opera, Firefox e Safari.
Sulla beta 1 di IE8 c'è un piccolo problema: il messaggio viene effettivamente visualizzato
solo se il puntatore del mouse si dispone sulla parte inferiore dell'icona. Credo che questo
comportamento anomalo sparirà con la versione definitiva del browser.

Il supporto dell'esempio come abbiamo detto non include IE5.x e IE6: volendo le strategie per sistemare sono diverse.
La prima è ricorrere all'uso
di HTC, o più in generale l'impiego di javascript, meglio se con un commento condizionale.
In tal caso c'è da evidenziare che la tecnica, avendo una dipendenza aggiuntiva, potrebbe tuttavia
non funzionare qualore l'utente abbia Javascript disabilitato.

Ho pensato quindi che la strategia più pratica in questa sede fosse quella di nascondere
per intero la funzionalità ai vecchi browser di casa Microsoft. Se vorrete adottare un approccio
simile, è importante accertarsi che le informazioni aggiuntive su richiesta non siano indispensabili,
o vengano ad esempio mostrate in un secondo tempo in caso di errori di validazione dei form.

Conclusioni

Se certi paradigmi di interazione possano essere compito esclusivo dei CSS è sempre stato
un dilemma per gli sviluppatori, ne è un esempio eccellente l'uso di menu dropdown. Il fatto
che potenzialmente una cosa sia fattibile con i fogli di stile però non implica necessariamente
che questi siano il metodo più ortodosso.

Senza entrare nel merito della questione, in questo appuntamento abbiamo visto un modo
sfizioso per ottenere messaggi di informazione a richiesta dell'utente grazie a poche regole CSS
e una semplice icona.

Lascio al lettore il compito di valutare l'implementabilità della tecnica, visto anche
il suo supporto cross-browser parziale, con una piccola raccomandazione: evitare di applicarla in caso
di informazioni indispensabili. Queste dovrebbero essere infatti consultabili sempre e da subito, invece
che richiedere interazione da parte dell'utente.

L'esempio è disponibile per il download. Alla prossima.