Tutorial

Debugging-Hilfen per CSS

Je nach Länge des Codes kann man schnell den Überblick über die Validität des Codes verlieren. Das Hinzufügen einer Klasse, die durch entsprechendes CSS entsprechende Inhalte farbig umrandet, sieht man beim Aufruf der Seite gezielt unsauberen Code, leere Elemente und fehlende Attribute.

/* Leere Elemente */
.fehler div:empty, .fehler p:empty, .fehler span:empty, .fehler li:empty, .fehler td:empty, .fehler th:empty {
padding: 5px;
background-color: yellow !important;
}

/* Fehlende Attribute */
.fehler *[alt=""], .fehler *[title=""], .fehler *[class=""], .fehler *[id=""], .fehler a[href=""] {
padding: 1px;
border: 2px solid orange !important;
}

/* Veraltete Element */
.fehler applet, .fehler basefont, .fehler center, .fehler dir, .fehler font, .fehler isindex, .fehler menu, .fehler s, .fehler strike, .fehler u {
border: 2px solid red !important;
}

/* Veraltete Attribute */
.fehler *[background], .fehler *[bgcolor], .fehler *[clear], .fehler *[color], .fehler *[compact], .fehler *[noshade], .fehler *[nowrap], .fehler *[size], .fehler *[start], .fehler *[bottommargin], .fehler *[leftmargin], .fehler *[rightmargin], .fehler *[topmargin], .fehler *[marginheight], .fehler *[marginwidth], .fehler *[alink], .fehler *[link], .fehler *[text], .fehler *[vlink], .fehler *[align], .fehler *[valign], .fehler *[hspace], .fehler *[vspace], .fehler *[height], .fehler *[width], .fehler ul[type], .fehler ol[type], .fehler li[type] {
border: 2px solid purple !important;
}

Anmerkungen:
Dieses CSS-Snippet fügen wir in unser Stylesheet ein und fügen dann die Klasse fehler anschließend einfach unserem body hinzu:
<body class="fehler">. Beim Aufruf der Seite werden unsere leeren Elemente, fehlende Attribute und veralteter Code nun farbig dargestellt.

Hintergrund gelb Leere Elemente
Umrandung orange Leere Attribute
Umrandung rot Veraltete Elemente
Umrandung lila Veraltete Attribute

Anhand der Farbtabelle ist nun relativ einfach zu erkennen, um welche Art von Fehler es sich handelt und welche Codestellen verbesserungswürdig sind.
Hinweis: Dieses Debugging ist natürlich kein Ersatz zum W3C-Validator, sondern soll lediglich fehlende Inhalte und veralteten Code darstellen!

Dieses Tutorial bewerten

zurück

Navigation einschalten