Realizzare una griglia super ottimizzata con CSS

Negli ultimi anni l'informatica sta cercando di migliorare le tecniche per la memorizzazione ed il trattamento dell'aspetto semantico delle informazioni. Le recenti tecnologie permettono di associare ai dati ulteriori informazioni per poterli estrarre e manipolare in maniera molto più articolata rispetto ad un tempo.

Il web semantico, ad esempio, è un concetto relativamente nuovo di cui si sente parlare sempre più spesso. Ma senza andare alla ricerca di sofisticate tecnologie, possono bastare piccoli accorgimenti nel nostro codice sorgente per ottenere un listato semanticamente più corretto e ricco di informazioni utili.

In questo articolo voglio quindi mettere in evidenza un semplice esempio per migliorare del codice CSS rendendolo più compatto e privo di informazioni che potrebbero essere mal interpretate.

Immagini flottanti all'interno di un div

Durante la realizzazione di un sito web può capitare di dover creare una griglia con delle immagini come quella riportata qui a fianco. Solitamente il codice HTML necessario per questa operazione è:

<div class="wrapper">
  <ul class="immagini">
    <li><img src="img1.jpg" alt="..."/></li>
    <li><img src="img2.jpg" alt="..."/></li>
    <li><img src="img3.jpg" alt="..."/></li>
    <li class="end"><img src="img4.jpg" alt="..."/></li>
    <li><img src="img5.jpg" alt="..."/></li>
    <li><img src="img6.jpg" alt="..."/></li>
    <li><img src="img7.jpg" alt="..."/></li>
    <li class="end"><img src="img8.jpg" alt="..."/></li>
  </ul>
</div>

Ed il CSS:

.wrapper{width:540px}

.immagini{
  width:540px;
  overflow:hidden
}

.immagini li{
  width:120px;
  height:120px;
  float:left;
  margin:0 20px 20px 0;
}

.immagini .end{margin-right:0}

Questo meccanismo funziona perfettamente, però può aggiungere delle complicazioni a livello di programmazione. Se la lista è generata dinamicamente è necessario calcolare quando aggiungere la classe .end. Oppure, se si decide di aggiungere una colonna è necessario modificare anche il codice che riposiziona la classe.

Infine, il codice risultante contiene una informazione "end" con un significato poco chiaro se non per il suo uso a livello di impaginazione.

Per semplificare il codice e la programmazione e ripulire l'output, si può quindi usare un trucchetto molto semplice: invece di aggiungere un margine destro a tutti gli elementi eccetto l'ultimo di ogni riga, si può impostare un margine sinistro in tutte le voci dell'elenco ed applicare uno stile diverso all'elemento ul aumentandone la larghezza e facendo rientrare il margine sinistro. Modifichiamo quindi il codice precedente:

<div class="wrapper">
  <ul class="immagini">
    <li><img src="img1.jpg" alt="..."/></li>
    <li><img src="img2.jpg" alt="..."/></li>
    <li><img src="img3.jpg" alt="..."/></li>
    <li><img src="img4.jpg" alt="..."/></li>
    <li><img src="img5.jpg" alt="..."/></li>
    <li><img src="img6.jpg" alt="..."/></li>
    <li><img src="img7.jpg" alt="..."/></li>
    <li><img src="img8.jpg" alt="..."/></li>
  </ul>
</div>

Anche il CSS va modificato:

.wrapper{width:540px}

.immagini{
  width:560px;
  margin-left:-20px;
  overflow:hidden
}

.immagini li{
  width:120px;
  height:120px;
  float:left;
  margin:0 0 20px 20px;
}

Così facendo abbiamo semplificato il codice, rimosso una informazione fuorviante e lasciato posto per possibili ulteriori informazioni più precise.

Questo è solo un esempio per muovere un piccolo passo verso una programmazione più consapevole. Esistono metodi ed accorgimenti molto più significativi che possono rendere il codice sorgente semanticamente migliore e orientato verso il web del futuro.