Holmes.css un detective per il vostro markup

Holmes - The CSS Markup Detective

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.

Holmes.css in azione

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+
Commenta

Commenti

  1. evolution ha detto:

    Grazie per l’ articolo, prima d’ ora non conoscevo questo holmes.css e devo dire che mi sarà molto utile in futuro.
    Sai quando è stato il suo ultimo aggiornamento?

    • Giulia Ballarin ha detto:

      Ciao, sul sito non sono presenti note sui vari rilasci, ma se clicchi sul collegamento a github vedrai che l’ultimo file caricato risale a circa sei mesi fa.

Commenta

Fai clic qui per annullare la risposta.

Facebook
Articoli popolari
Articoli recenti