Questa è la traduzione dell'articolo Cleaner Code with CSS3 Selectors di Rachel Andrew pubblicato originariamente su 24 Ways il 20 Dicembre 2009.
Le parti dei CSS3 che sembrano attirare l'attenzione maggiore su blog e articoli sono quelle dedicate agli aspetti prettamente visuali. Angoli arrotondati, ombreggiature sul testo e nuovi modi per ottenere layout con i CSS sono tutte cose molto interessanti e portano con sé nuovi scenari per chi si occupa di web design. Tuttavia, la cosa che mi attira di più, come sviluppatrice, è un'altra, molto meno appariscente.
In questo articolo esamineremo alcuni dei modi in cui il nostro codice a livello di front-end e di back-end può essere semplificato grazie all'uso dei CSS3, osservando da vicino come certi effetti visuali sono ottenuti oggi e come saranno realizzati in un futuro glorioso in cui il supporto ai CSS3 sarà diffuso pienamente. Mostreremo pure come possiamo usare già ora i selettori CSS3 con un piccolo aiuto di Javascript, cosa che può essere molto utile se vi trovate in situazioni in cui non potete cambiare il markup che viene prodotto da codice lato server.
Le meraviglie di nth-child
Perché mi entusiasma così tanto il selettore di tipo nth-child? Ecco uno scenario comune. Il designer vorrebbe creare una tabella che abbia questo aspetto:
Figura 1 - Tabella con righe a colori alternati
Impostare colori diversi e alternati per le righe di una tabella è un metodo comune per migliorare la leggibilità di righe lunghe. I metodi sperimentati per implementare questo effetto consistono nell'aggiunta di una classe alle righe (pari o dispari) della tabella. Se state scrivendo il codice a mano si tratta di un'operazione più che fastidiosa, e se poi sbagliate su una riga verso il centro, vi toccherà modificare tutto il resto. Se il markup è prodotto da un CMS, avrete bisogno di uno script lato server per aggiungere la classe (sempre che possiate mettere mano al codice).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Striping every other row - using classes</title>
<style type="text/css">
body { padding: 40px; margin: 0;
font: 0.9em Arial, Helvetica, sans-serif; }
table { border-collapse: collapse;
border: 1px solid #124412;
width: 600px; }
th { border: 1px solid #124412;
background-color: #334f33;
color: #fff;
padding: 0.4em;
text-align: left; }
td { padding: 0.4em; }
tr.odd td { background-color: #86B486; }
</style>
</head>
<body>
<table>
<tr><th>Name</th><th>Cards sent</th><th>Cards received</th><th>Cards written but not sent</th></tr>
<tr><td>Ann</td><td>40</td><td>28</td><td>4</td></tr>
<tr class="odd"><td>Joe</td><td>2</td><td>27</td><td>29</td></tr>
<tr><td>Paul</td><td>5</td><td>35</td><td>2</td></tr>
<tr class="odd"><td>Louise</td><td>65</td><td>65</td><td>0</td></tr>
</table>
</body>
</html>
La situazione la incontro in quasi tutti i progetti su cui lavoro. Non è certo ideale avere del codice lato server che vada a inserire nomi di classe nel markup per fini puramente presentazionali. Ecco allora che ci viene in aiuto il selettore di pseudo-classe nth-child dei CSS3. Il codice lato server crea una tabella in HTML valido per i dati, con i CSS selezioniamo le righe dispari con il seguente selettore:
tr:nth-child(odd) td {
background-color: #86B486;
}
Le parole chiave odd (dispari) e even (pari) sono molto utili in un simile contesto, ma è possibile usare anche un moltiplicatore qui. 2n sarebbe l'equivalente della parola chiave 'odd', 3n selezionerebbe ogni terza riga in un gruppo di tre, e così via.
Guide CSS
Responsive Desing, la guidaProgettare siti da fruire su dispositivi diversi è imprescindibile... |
Guida CSS3Scoprire e usare al meglio tutte le novità dell'ultima versione dei... |
Guida CSS Tecniche essenzialiTesto, immagini, layout, form, liste, tabelle: soluzioni pronte per... |
Newsletter @CSS
Ogni mercoledì, direttamente nella tua e-mail: guide, articoli, tutorial, FAQ e approfondimenti tecnici su CSS e Web Design.
Iscriviti alla newsletter
Corsi in aula
|
|
Corso Webmaster base18 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base25 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base05 Giugno 2012 a Roma |
|
|
Corso Webmaster base11 Giugno 2012 a Roma |