Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Strumenti per la validazione dei CSS

Introduzione alla validazione dei nostri fogli di stile con lista degli strumenti indispensabili
Introduzione alla validazione dei nostri fogli di stile con lista degli strumenti indispensabili
Link copiato negli appunti

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

  1. La validazione del CSS è importante perché ci garantisce che i nostri fogli di stile siano conformi alle specifiche.
  2. 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.
  3. 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.
  4. 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.
  5. 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:

Figura 1 - Il validatore W3C
il validatore W3C

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":

Figura 2 - Le opzioni avanzate del validatore W3C
opzioni del validatore

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:

Figura 3 - La Internet Explorer Developer Toolbar
IE developer toolbar

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:

Figura 4 - La Web Developer Toolbar di Firefox
wev developer toolbar

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:

Figura 5 - La console di Firebug per Firefox
firebug

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.

Figura 6 - Il W3-Dev menu di Opera
w3Dev

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.


Ti consigliamo anche