Visti da vicino: i CSS come tool di analisi

Nello scorso appuntamento abbiamo presentato il campione di dieci siti. L'analisi
è soprattutto volta al markup in relazione al layout: ho così avuto la necessità 
di uno strumento un po' più pratico e veloce rispetto alla semplice consultazione del codice
(X)HTML.

Ecco l'idea: tipicamente siti table-less usano elementi strutturali e di navigazione
(rispettivamente div e ul) con id e classi.
E' possibile con Opera visualizzare una qualsiasi pagina con i CSS autore e i CSS utente
contemporaneamente: basta quindi un CSS pensato ad hoc per etichettare e numerare gli elementi
di pagina principali, mantenendo comunque il layout originale.

Questo si ottiene facilmente con poche regole CSS che usano il selettore di attributo,
lo pseudo-elemento :before e i contatori. Argomenti che potrete approfondire negli
articoli Selettori e proprietà  CSS avanzate per esempi e Usare i CSS utente su HTML.it.
Ecco quindi le regole del CSS utente che ho creato:


div[class]:before{content: "div." attr(class) " (" counter(n) ")"}
div[id]:before{content: "div#" attr(id) " (" counter(n) ")"}
ul[class]:before{content: "ul." attr(class) " (" counter(n) ")"}
ul[id]:before{content: "ul#" attr(id) " (" counter(n) ")"}
div[id]:before,div[class]:before,ul[id]:before,ul[class]:before{
    counter-increment: n;background: #9cf;color: #000}


E' bastato poi caricare il CSS utente in Opera e con le opportune modifiche al file di configurazione del
browser, e il gioco è fatto. Ecco uno screenshot di Stopdesign
visto con il CSS utente aggiuntivo:

E' tutto per ora: visto il principale tool di analisi, non ci resta che procedere con i risultati, che saranno
argomento del prossimo post.