Uno delle tecniche più sfiziose e utilizzata in molti siti, è quella presentata in
Create a valid alert message with CSS.
Si tratta di un modo molto efficace per creare messaggi di informazioni, alert e di errore
usando markup minimale, una semplice icona e poche regole CSS. Ho così pensato
di riprendere e espandere la tecnica a beneficio dei lettori.
Vediamo subito il primo esempio che accompagna
l'articolo, in cui vengono presentati quattro tipologie di messaggi per l'utente:
informazione, avviso, domanda ed errore. Procediamo quindi con il markup: in sostanza
si tratta di usare un <div> per messaggio, e accompagnarlo
da due classi: una dal nome message che racchiuderà le regole comuni,
e una specifica per ciascuna tipologia. Ecco l'HTML:
<div class="message info">
<p>Messaggio di informazione</p>
</div>
<div class="message warning">
<p>Messaggio di avviso</p>
</div>
<div class="message question">
<p>Domanda</p>
</div>
<div class="message error">
<p>Messaggio di errore</p>
</div>
Come si può notare le classi specifiche sono rispettivamente info,
warning, question e error. Ora procediamo con l'implementazione.
Per prima cosa le icone, che ho realizzato con InkScape,
un programma open source per il disegno vettoriale. Le ho esportate
in formato PNG con dimensioni 20x20 pixel, eccole tutte assieme:
Siamo così pronti a procedere con il CSS dell'esempio.
Il meccanismo delle classi multiple nel markup, usato in diverse occasioni qui su HTML.it,
si rivela versatile e potente e ci offre un solido spunto per la personalizzazione
con i CSS. Per prima cosa la regola per la classe "message", che accorpa
tutte le dichiarazioni comuni, e quella per il paragrafo al suo interno:
div.message{
margin: 0 0 2em;
padding: 1em 15px 0 50px;
border-style: solid;
border-width: 2px 0}
div.message p{
margin: 0 0 1em}
Come si può notare, vengono definiti il margine inferiore, il padding sui tre
lati (escludendo quindi il lato inferiore, dato che lo spazio relativo sarà lasciato
dal margine inferiore dei paragrafi) e un bordo sui due lati orizzontali spesso due pixel.
Da notare come sulla sinistra del div class="message" vengano lasciati 50
pixel così da fare posto all'icona.
Ora le regole CSS centrali dell'esempio,
ovvero quelle specifiche per ogni tipologia di alert message:
per ciascuna, si tratta solo di definire colore di sfondo, icona e colore dei bordi.
div.message.info{
background: #EAEBF7 url(info20.png) no-repeat 15px 50%;
border-color: #8E9AFF}
div.message.warning{
background: #FFF0BA url(warning20.png) no-repeat 15px 50%;
border-color: #E87C29}
div.message.question{
background: #E4F6DE url(help20.png) no-repeat 15px 50%;
border-color: #8FDC79}
div.message.error{
background: #FFD8D6 url(error20.png) no-repeat 15px 50%;
border-color: #FF0038}
Il lettore potrà trovare poco familiari i selettori della forma
div.message.info : in sostanza si tratta di un selettore di classe
multiplo e definisce una regola CSS indirizzata ai div che hanno, nel caso
della prima regola ad esempio, contemporaneamente classe "message" e "warning".
Una piccola nota pratica a questo punto è necessaria: il selettore
di classe multipla non è totalmente supportato da IE5.x, che riconoscerà
purtroppo solo l'ultima classe, ovvero quella prima della parentesi graffa:
è importante quindi che la classe più specifica risulti come ultima.
Da notare infine che l'icona viene posizionata a 15px da sinistra, e sulla metà
verticale del div che lo contiene attraverso le coordinate 15px 50%.
Il nostro esempio è così ultimato: sono bastate
poche regole CSS e delle icone per ottenere accattivanti messaggi di diverso tipo.
Conclusioni e download
In conclusione, ho pensato di preparare alcune varianti dell'esempio
di base, in cui si è spostata l'icona e, ovviamente, cambiato il padding. Ecco quindi
il secondo, il terzo e il quarto esempio
che rispetto al primo presentano un CSS ottimizzato per il peso.
La compatibilità degli esempi è buona: sono stati testati con successo su Internet Explorer
dalla versione 5 alla 7 e le ultime versioni di Opera, Firefox e Safari. Nello zip pronto
per il download, insieme ai quattro esempi alle quattro icone in formato 20x20, ne trovate
altrettante di dimensioni 32x32. Alla prossima.
