Corsi on-line

CSS3: colori alternati utilizzando solo i fogli di stile

Grazie a CSS3 è possibile creare effetti davvero stupefacenti, ma è anche possibile risolvere in modo molto semplice e veloce una serie di problemi comuni. Fra questi ultimi vi è, sicuramente, la creazione di righe a colori alternati, effetto molto comune nelle tabelle di rappresentazioni dati (report).
Fino ad oggi per realizzare questo semplice effetto all’interno di pagine dinamiche si ricorreva allo scripting lato server: si iterava un recortdset e si contava ogni item estratto, a quelli pari veniva assegnato un colore, a quelli dispari un altro.

Grazie a CSS3 tuta questa (pur semplice) procedura non è più necessaria in quanto tutto il lavoro viene svolto dal foglio di stile CSS. Vediamo, quindi, due esempi di come ricreare l’effetto in oggetto sulle righe di una tabella e all’interno di un elenco:

tr:nth-child(odd) td { background-color: #eee; }
tr:nth-child(even) td { background-color: #fff; }
ul li:nth-child(odd) { background-color: #eee; }
ul li:nth-child(even) { background-color: #fff; }

Il lavoro è svolto grazie al selettore di attributo nth-child grazie alla quel è possibile identificare uno specifico elemento all’interno di un gruppo. Nel nostro caso, grazie alle keywords even e odd, possiamo identificare con facilità gli elementi “pari” da quelli “dispari”.

Come sappiamo, tuttavia, CSS3 non è ancora pienamente supportato da tutti i browser. Una scelta ottimale, quindi, è quello di utilizzare queste nuove potenzialità affiancandole ad un pizzico di Javascript che ci garantisca effetti realmente cross-browser. Nel caso specifico possiamo utilizzare jQuery in questo modo:

tr:nth-child(odd) td,
tr.odd td {
  background-color: #eee;
}
tr:nth-child(even) td,
tr.even td {
  background-color: #fff;
}
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script>
$(document).ready(function(){
  $("tr:nth-child(odd)").addClass("odd");
});
</script>
Post correlati
I più letti del mese
Tematiche