CSS: diamo uno stile all' invisibile

Una delle qualita’ che deve avere un web designer è quella di vedere l’invisibile e usare questa sua qualità a vantaggio del codice che sta creando.

Spieghiamo cosa significa in due esempi.

<div id="breadcrumb">
  <a href="/">Tizio</a> &gt; <a href="/caio">Caio</a> &gt; <em>Sempronio</em>
</div>

Questo è un classico codice per dei breadcrumbs (in questo caso usiamo il segno “>”, anche se brutto tipograficamente).

Che fare se dobbiamo modificare lo stile di “>”?

Uno sviluppatore principiante o di medio livello fara’ qualcosa tipo aggiungere un altro elemento, per esempio un elemento span (<span>&gt;</span>) e forse ci aggiungerà anche una classe (class="elemento-corrente").

Il codice utilizzato per il breadcrumb ci mette a disposizione diverse opportunita’ per aggiustare lo stile del carattere “>” semplicemente usando il contenitore esterno breadcrumb come aggancio per sovrascrivere lo stile degli elementi interni, se necessario. Per esempio, possiamo utilizzare il posizionamento relativo per gli elementi a e em per muovere visisamente in alto o in basso il contenuto rispetto al segno “>”.

Questo significa vedere l’invisibile.

Un esempio ancora piu’ semplice è quello di una navigazione lineare nel menu’:

<ul id="nav">
  <li>Tizio
  <li><a href="/caio">Caio</a>
  <li><a href="/sempronio">Sempronio</a>
</ul>

Se l’ obiettivo è quello di evidenziare la posizione in cui siamo attualmente, la cosa piu’ ovvia da fare è aggiungere codice come una ID particolare, una classe, ecc. In molti casi non abbiamo bisogno di farlo, basta vedere l’invisibile:

li { font-weight: bold; }
li a { font-weight: normal; }

… che ci permette di, per esempio, evidenziare la posizione attuale (senza link) semplicemente rendendo il carattere in grassetto, mentre gli altri link useranno un font normale.

E’ un motivo per cui le grandi tecniche CSS sono grandi (tecniche CSS, non tecniche HTML).

Uno sviluppatore CSS esperto prova sempre a raggiungere i suoi traguardi senza cambiare il codice: non è quello il suo lavoro.

---

Articolo originariamente scritto da Jens Meiert con il titolo CSS: Style the Non-Obvious. Tradotto ed adattao con il consenso dell’ autore.This post is an Italian translation of the original article http://meiert.com/en/blog/20090318/style-the-non-obvious/