Ecologia dei siti web.net

13 settembre 05

Far funzionare i CSS: 3 piccoli consigli

Lavorando con i CSS, capita che il codice da noi realizzato non funzioni come dovrebbe.

Quando ciò accade, prima di allarmarsi e cercare una soluzione sui vari forum o sulle liste di discussione, è bene effettuare tre semplici verifiche.

Verificare che il codice CSS sia scritto correttamente

Sembra banale, eppure capita che il codice non funzioni correttamente semplicemente perché scritto in modo errato.

Per evitare tale evenienza è bene che il codice CSS sia convalidato attraverso gli strumenti del W3C¹, ovvero attraverso strumenti analoghi.

Verificare che il codice (X)HTML sia scritto correttamente

La validità del codice di marcatura è importante tanto quanto la validità del codice CSS. Infatti, se è vero che il browser corregge automaticamente gli errori, è anche vero che non immaginiamo (ovvero immaginiamo in modo scorretto) come sarà il codice dopo la correzione automatica.

Ad esempio:

<p><ul>...</ul></p>

sarà modificato² in:

<p></p><ul>...</p>

sicché un selettore del tipo:

p ul { ... }

non sarà più in grado di agire sulla lista.

È dunque necessario verificare che il codice (X)HTML utilizzato sia scritto in modo corretto, prima di applicargli i CSS. Per effettuare la convalida del codice il W3C mette a disposizione un comodo strumento on-line³, ma altri strumenti sono disponibili sia on-line sia off-line.

Verificare che il codice realizzato debba effettivamente funzionare come noi vorremmo che funzionasse

Questo è uno degli aspetti più importanti ma anche più trascurati. I CSS hanno proprietà e valori dai nomi intuitivi, tanto che spesso è possibile delle regole senza aver letto cosa in effetti le specifiche CSS del W3C dicono⁴.

Spesso capita che il comportamento “intuito” e quello effettivo corrispondano, ma in altri casi ciò non avviene. Si pensi ad esempio alla proprietà vertical-align che, se usata per una cella di una tabella, assume il medesimo significato dell’attributo valign usato per l’elemento <td>, se invece usata per elementi a livello di blocco (come <div> o <p>) non assume alcun significato⁵ e non determina l’allineamento verticale del testo all’interno di un elemento <div> o <p>.

¹ CSS Validator

² Si noti che la DTD dell’HTML vieta di inserire una lista all’interno di un paragrafo (ciò rispetta il significato semantico di liste e paragrafi) consentendo esclusivamento contenuto inline all’interno dei paragrafi.

³ W3C MarkUp Validator

⁴ Specifiche CSS 2.1 del W3C

⁵ Si noti come le specifiche del W3C indichino chiaramente che vertical-align non può essere applicata ad elementi a livello di blocco.

Sezione: blog - Argomento: css-design |