La validazione del foglio di stile è un aspetto fondamentale
nel processo dello sviluppo web: in questo appuntamento vedremo alcuni consigli
e strumenti per effettuarla al meglio.
Cinque fatti sul validatore CSS
- La validazione del CSS è importante perché ci garantisce che i nostri fogli di stile siano conformi alle specifiche.
- Attenzione però: se da ciò deriva che i diversi browser leggeranno un CSS valido,
non significa però che lo interpreteranno alla stessa maniera. È però un primo
passo indispensabile. - Pur avendo ottime conoscenze dei CSS,
non è purtroppo infrequente fare errori di digitazione o di distrazione:
il validatore è quindi in grado di evidenziare tali errori. - Il validatore non è in grado di rilevare errori di concetto, dichiarazioni ridondanti, in conflitto
o semplicemente superflue: un buon CSS dev'essere valido, ma non è abbastanza. - Il validatore di recente presenta l'interfaccia e i risultati localizzati in italiano,
ed è un motivo in più per usarlo
Il validatore W3C
Vedremo ora diversi strumenti e servizi per validare i CSS, sono principalmente basati
sul validatore del W3C, di cui vediamo
uno screenshot:
Vediamo brevemente le sue funzionalità. Per prima cosa, è possibile validare un
foglio di stile in tre diversi modi:
- Tramite URI (indirizzo): bisognerà specificare l'indirizzo
di una pagina HTML con CSS (che verrà estrapolato automaticamente) oppure l'indirizzo diretto
del CSS. Una nota a questo punto è indispensabile: il validatore non procederà alla validazione
di un foglio di stile incorporato in una pagina XTHML non valida. Le soluzioni sono due:
la prima, da preferire, è validare il markup;
la seconda è immettere direttamente l'url del CSS da validare. - Tramite trasferimento file: è possibile in questo caso caricare mediante
upload un file CSS presente sul nostro PC. - Tramite immissione diretta: in questo caso sarà possibile copia-incollare
il CSS direttamente tramite un'area di testo apposita.
Oltre alle tre modalità di trasmissione del CSS da validare, sono presenti diverse opzioni
disponibili cliccando sul link "Maggiori opzioni":
La select degli avvisi permetterà di selezionare quale tipo di avvisi
il validatore dovrà rapportare: tutti, rapporto normale, i più importanti o nessun avviso.
C'è da premettere che gli avvisi non sono errori di validazione, e non ne compromettono
il buon esito; ma è bene che ce ne siano il minor numero possibile. Di default questa opzione
è impostata su "Rapporto normale".
È possibile poi selezionare il profilo con cui validare il foglio di stile,
ovvero la versione delle specifiche CSS che il validatore dovrà applicare. Di default è impostata
su 2.1, che consiglio di mantenere dato che è il livello attuale: da notare che i CSS di livello 3
sono ancora per buona parte working draft e ben lontani da un supporto esteso sui browser.
Infine è possibile selezionare il media a cui il foglio di stile è rivolto:
di default è impostato su "all", ma è da notare che alcune proprietà CSS sono specifiche per un
dato media: ad esempio quelle per la stampa o quelle per i CSS aural.
Il validatore, una volta premuto il bottone "Verifica" procederà a mostrare avvisi, errori
e soprattutto l'esito della convalida: se ci sono errori è bene procedere a correggerli. In caso
di avvisi (che al 90% ci saranno) è bene imparare a conoscere quali siano potenzialmente
pericolosi e risolvere anch'essi.
Questo è tutto per ciò che riguarda il validatore CSS: vedremo ora alcuni strumenti che consentono
una validazione del CSS un po' più pratica, grazie ad alcune estensioni dei browser.
La validazione mediante plugin dei browser
Ci sono diverse estensioni e plugin dei browser che offrono molte caratteristiche
utilissime allo sviluppatore: tra queste non ultima la validazione del foglio di stile.
Cominciamo con la Internet
Explorer Developer Toolbar, giunta di recente alla beta 3 e disponibile per Internet Explorer 6 e 7. Una volta attivata,
si presenta con un semplice menu con le diverse funzionalità: quella per la validazione è disponibile sotto la voce "Tools".
Vediamo uno screenshot:
Come si nota, è possibile validare il CSS di una qualsiasi pagina online che stiamo visitando, oppure validare il
CSS della pagina locale correntemente aperta.
Passiamo a Firefox: per questo browser ci sono davvero molte estensioni per lo sviluppo web, e alcune
sono state citate più volte anche sul nostro blog. Tra le molte, ne segnalo due che consentono la validazione del CSS.
La prima è la Web Developer Toolbar, estensione storica e indispensabile, che consente questa operazione su file
locali o in remoto:
Altro strumento utile è Firebug: dispone di moltissime caratteristiche interessanti per Javascript e i CSS
in genere, ma non ha purtroppo una caratteristica simile a quella delle due estensioni viste finora. C'è
però una console, in grado di rilevare automaticamente errori di CSS e Javascript:
Concludiamo con Opera: questo browser offre nativamente la possibilità di validare
l'HTML, sia esso di una pagina online o locale, premendo il tasto destro sulla pagina e selezionando "Convalida sorgenti",
ma per i CSS non c'è una funzionalità analoga. La aggiunge però l'utilissimo W3-Dev Menu,
che consente di convalidare solo i fogli di stile che siano online.
Si conclude qui questa mini-introduzione agli strumenti per la validazione: una buona pratica da effettuare sempre.
Alcuni preferiscono effettuarla a foglio di stile ultimato, altri di tanto in tanto durante lo sviluppo. In ogni caso,
prima di mettere un CSS online è bene un controllo: è un'operazione semplice, che richiede pochissimo tempo e
ci garantisce la conformità alle specifiche CSS. Le estensioni qui viste, una volta provate, si riveleranno utilissime
non solo per la validazione. Alla prossima.
