(Kostenlose) Services

Ungewöhnlicher Codechecker: Holmes prüft HTML auf Validität, nutzt dafür CSS

28. März 2013
von

Bei jedem Web-Projekt ist es angebracht und sinnvoll, den Quelltext auf Fehler und Einhaltung der Standards zu überprüfen. Statt seine Seite durch einen der vielen Validatoren zu schicken, kann man mit dem Diagnostik-Tool Holmes seine Website auch mit einer CSS-Datei auf eine nicht-valide und fehlerhafte HTML-Auszeichnung überprüfen.

holmes
Holmes

CSS-Datei einbinden und Seite checken

Um Holmes nutzen zu können, muss die entsprechende Stylesheet-Datei im Kopf des zu überprüfenden HTML-Dokumentes eingebunden werden. Außerdem ist das BODY-Element mit der Klasse holmes-debug zu versehen. Anschließend markiert Holmes alle HTML-Elemente rot, bei denen Fehler aufgetreten sind – zum Beispiel fehlende Pflichtattribute wie das ALT-Attribut bei Bildern.

Bei Elementen, für die es eine bessere oder sinnvollere Auszeichnung gibt – beispielsweise bei der Raute (#) als Link im A-Element – gibt Holmes eine Warnung aus, indem das Element gelb hervorgehoben wird. Außerdem markiert das Tool alle veralteten Elemente wie das CENTER- oder FONT-Element grau.

So funktioniert Holmes

Das Besondere an Holmes ist, dass es ohne Programmiersprache auskommt. Es nutzt die verschiedenen Selektor-Möglichkeiten von CSS, um Elemente aufgrund unterschiedlicher Kriterien hervorzuheben. Das Nichtvorhandensein des ALT-Attributes bei Bildern wird wie folgt per CSS festgestellt:

1
2
3
.holmes-debug img:not([alt]) {
  outline: 2px solid red;
}

Das Auftreten einer Raute als Link findet Holmes so heraus:

1
2
3
.holmes-debug a[href="#"] {
  outline: 2px solid #fd0;
}

Da Holmes auf teils recht neue CSS-Möglichkeiten wie die Pseudoklasse :not() setzt, lässt sich das Tool nicht mit allen Browsern anwenden. Aktuell funktioniert Holmes in Chrome, Firefox, Opera und Safari. Auch wenn es vom Entwickler nicht im Internet Explorer 10 getestet wurde, so kann ich nach eigenen Tests sagen: läuft.

Fazit: Holmes kann zwar nicht mehr als andere Validatoren, es geht aber einen anderen Weg. Es zeigt dem Entwickler direkt auf der Website, an welchen Stellen fehlerhafter oder verbesserungsfähiger Quelltext steht. Besonders hilfreich kann Holmes sein, wenn man ihn auf einer Website anwendet, die schon etwas betagt ist und die man nicht selbst erstellt hat.

HTML validieren – Links zum Beitrag

  • The CSS Markup Detective | Holmes

(dpe)

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Tags: , , , ,

Ein Kommentar zu „Ungewöhnlicher Codechecker: Holmes prüft HTML auf Validität, nutzt dafür CSS
  1. Marcus am 28. März 2013 um 17:55

    Das ist ja mal was neues! Mit CSS ein Validator zu basteln – darauf muss man erstmal kommen. Super gemacht und einfach gelöst. Nette Idee!

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!