Holmes è un file CSS che, grazie all’utilizzo di pseudo-classi, pseudo-elementi e selettori d’attributo, è in grado di evidenziare markup HTML non valido, inaccessibile o errato.
Errori, avvisi e proprietà CSS deprecate
Utilizzando holmes.css possiamo individuare, attraverso bordi di colori differenti, errori, avvertimenti ed elementi CSS deprecati per le seguenti categorie:
- attributi mancanti, come l’attributo name per i tag di input
- markup migliorabile, come i link con href=”#”
- elementi deprecati e non conformi al W3C
- attributi non W3C
Come analizzare il nostro codice
Utilizzare holmes.css è molto semplice: una volta scaricato il file, basterà richiamarlo all’interno della nostra pagina e aggiungere la classe “holmes-debug” al tag body o html. Nulla di più.
<html> <head> <link rel="stylesheet" type="text/css" href="holmes.css"> </head> <body class="holmes-debug"> </body> </html>
Una volta caricata la vostra pagina nel browser vedrete, se presenti, errori o elementi mancanti segnalati con il relativo colore (vedi la pagina di prova).
Holmes.css è disponibile anche come plugin per WordPress.
Perché utilizzare holmes.css
Holmes.css è uno strumento utile per la correzione di pagine di siti ormai datati o l’analisi di codice complesso. Il lavoro di correzione viene agevolato dalla resa grafica di eventuali errori del markup e dalla visualizzazione immediata del problema.
Browser supportati
- Chrome 10+
- Safari 5+
- Opera 10+
- Firefox 3.5+
- Internet Explorer 9+