Integrare una hCard con i CSS

I microformati sono delle porzioni di markup che sfruttano gli attributi
(X)HTML (class, rel, rev...) per
veicolare informazioni in modo che siano leggibili sia dall'uomo che dai
programmi.

Il microformato più comunemente utilizzato è la hCard il
cui scopo è quello di contenere informazioni relative ad una persona. In
pratica rappresenta un biglietto da visita elettronico, il cui
grande vantaggio consiste nel fatto che ogni singola informazione in esso
contenuta può essere estratta facilmente da qualsiasi programma esterno: è
quindi possibile che un gestore di rubrica estragga il nome e il numero di
telefono, un browser estragga l'indirizzo del sito web associato alla persona
etc.

In questa breve guida vediamo come si può abbellire con un po di
CSS la nostra hCard, così da poterla inserire nel nostro sito personale.

Il markup

I microformati non sono altro che porzioni di codice XHTML marcato con
opportune classi, che ne rendono riconoscibile il contenuto.

Nel caso della hCard, il codice potrebbe essere questo:

Come si nota, il microformato non è altro che una serie di div annidate.
La div marcata .vcard serve ad indicare che il codice successivo
rappresenta una vCard (il formato elettronico standard dei biglietti da
visita).

La classe .fn indica che il contenuto della div è il nome
formale, .org indica il nome dell'organizzazione,
.tel è ovviamente il telefono e .url l'indirizzo
web.

È possibile poi inserire l'indirizzo fisico, aggiungendo altri
elementi:

È importante notare come ogni informazione sia organizzata in
modo gerarchico: c'è un tag xHTML marcato con una classe, e per ogni
sotto-informazione c'è un altro tag annidato marcato con un altra classe.

In una hCard si possono utilizzare diversi tipi di informazione, ognuna
con la relativa classe. Per qualsiasi approfondimento fate riferimento alla
pagina ufficiale.

Per portare avanti il nostro esempio utilizziamo il seguente formato:

Applichiamo un po' di stile

Dal punto di vista del web designer quello che abbiamo di fronte è una
comune porzione di codice HTML, non esistono quindi particolari limiti
all'aspetto che vogliamo ottenere. È solo una questione di creatività.

Teniamo presente però che una hCard dovrebbe essere completa, cioè
ricca di informazioni: in questo modo ne basta una in una
pagina per poter soddisfare le richieste di qualsiasi programma.

Si pensi ad esempio che se ad un programma che gestisce una rubrica dei
contatti possa bastare il nome e l'indirizzo di posta, al software di una
navigatore satellitare potrebbe interessare invece l'indirizzo fisico, e così
via.

Tutte queste informazioni, su una pagina web sono "visivamente"
superflue perciò è opportuno nasconderle.

Portiamo avanti l'esempio in modo incrementale, partendo dalla
visualizzazione del solo nome:

Aggiungiamo una piccola icona, facciamo respirare il testo, diamo qualche
regola tipografica, ed ecco pronta una vcard di
base da poter inserire, ad esempio, in un footer:

Adesso potremmo voler far apparire l'indirizzo email al passaggio del
mouse. Per farlo basta una piccola regola CSS:

Applichiamo un colore più chiaro di quello applicato a .fn in modo che non
tolga visibilità al nome:

Vedi esempio.

È possibile anche ritoccare il markup, facendo attenzione a non inquinare
i tag semantici (le div con le classi speciali) con contenuto superfluo. Per
esempio, possiamo modificare la div con l'indirizzo e-mail in questo modo:

In questa maniera, anche se la marcatura è passata dalla div ad uno span,
la validità del microformato è intatta.

Questo ci permette di evolvere ulteriormente il codice dandoci nuove
possibilità di abbellimento:

Sostituendo lo span con un elemento ancora abbiamo reso la hCard più
adatta ad una pagina web.

Ora basta risistemare le regole che definiscono la visibilità e aggiungere
un po di stile per link:

Ecco l'esempio funzionante.

Si può obiettare che su Internet Explorer 6 la hCard così disegnata non
funziona come dovrebbe. Questo perchè IE6 non supporta la pseudo-classe
:hover per elementi che non siano link (tag
<a>). Questo è vero, ed anche se non è un problema
rilevante perchè la validità della hCard risulta invariata, se si vuole
ottenere una resa cross-browserperfetta nulla ci vieta di
sostiuire <div class="vcard"> con <a
class="vcard">, attuando però dei piccoli accorgimenti. In questo
modo:

Notare che le varie div sono state sostituire con degli span, questo
perché se passati al validatore, elementi di blocco (come le div)
contenuti in elementi inline (come le ancore) danno errore.

C'è però un problema più grave: racchiudendo tutta la hCard dentro ad un
link si perdono le funzionalità dei link interni (.email e
.url), e questo è il compromesso che dobbiamo accettare a fronte
di una resa cross-brwoser anche per IE6. La scelta è vostra.

Conclusioni

L'esempio portato avanti fino adesso è solo una delle infinite possibilità
che l'utilizzo dei fogli di stile offrono.

Il consiglio che vi do è quello di implementare la hCard in accordo al
design del vostro sito in modo che la sua presenza risulti completamente
trasparente, stando sempre attenti a preservarne la validità. Per controllare
di aver fatto un buon lavoro, provatelo con questa
bookmarklet: è un piccolo script che fa il parsing di una pagina alla
ricerca di una hCard, se il risultato è positivo allora avrete implementato
un hCard valida.

Per approfondire vi lascio con qualche lettura interessante:

• Styling hCard
  with CSS su 24ways
• Highlight
  Microformats with CSS su Hickdesign
• A
  Business Card Microformat Site su CSStricks