CSS-Fehler finden

11.08.2016
Fehler in Stylesheets können zu großen Problemen führen. Mit diesen Tipps und Tools spürt man sie auf.

Die Suche nach Fehlern kann manchmal zur Suche im Heuhaufen werden - vor allem, wenn es um Stylesheets und CSS geht. Einige Fehler treten häufig auf und werden daher aus der Erfahrung heraus schnell aufgespürt, andere verbergen sich gründlich. Hier helfen spezielle Tools, aber auch manuelle Methoden wie die Subtraktion.

Die häufigsten Fehler

Bei der Arbeit mit CSS treten oft die gleichen Fehler auf, die aus der Eile des Arbeitsalltags heraus passieren. Gibt es Probleme, sollte man folgende Punkte überprüfen: Häufig ist eine fehlende Raute (<>) der Grund, warum beispielsweise Schriftfarben nicht richtig angezeigt werden.

Auch ein fehlendes Semikolon, das einzelne CSS-Angaben voneinander trennt, wird des Öfteren übersehen. Manchmal fehlen jedoch nicht Zeichen, sondern es gibt eines zu viel: Bei Größenangaben müssen Wert und Einheit ohne ein Leerzeichen dazwischen gesetzt werden.

Web Developer für Firefox

Mit Hilfe der Firefox-Erweiterung Web Developer lassen sich CSS-Probleme aufspüren. Über „Information - Display ID & Class Details“ können mit diesem Werkzeug CSS-Definitionen angezeigt werden.

Über „CSS - View CSS“ können in einem eigenen Tab die eingebetteten CSS-Definitionen in einer Zusammenfassung dargestellt werden. „CSS - View CSS“ macht den Mauszeiger zu einem Werkzeug, mit dem die Hierarchie der CSS-Elemente angezeigt werden, wenn man darüber fährt. Auch so lassen sich Probleme aufspüren.

Dieses Tool gibt einen ausführlichen Fehlerbericht heraus. Quelle: W3C

Prüfung mit einem Validator

Manche Probleme treten nur in bestimmten Browsern auf, was die Fehlersuche nicht einfacher macht. Beim Aufspüren von Problemen kann ein so genannter Validator helfen. Ein Tool ist der Validator des W3C.

Die Fehler, die dabei angezeigt werden, sollten zunächst abgearbeitet werden. Man gibt dazu eine URL an und erhält dann einen Bericht über Fehler und Warnungen, die gleichzeitig ausführlich erklärt werden. So kann schnell Abhilfe geschaffen werden.

Ein weiteres Werkzeug zur Validierung ist Ultimas Toolbox.

Die Subtraktionsmethode

Lässt sich ein Fehler trotz der bereits genannten Tipps nicht finden, kann man die so genannte Subtraktionsmethode anwenden. Wie der Name vermuten lässt, entfernt man dabei Schritt für Schritt einzelne Teile des Codes, um herauszufinden, in welchem sich der Fehler befindet.

Dabei trennt man einzelne Bereiche wie die Fußzeile oder die Navigation. Ist ein Bereich fehlerlos, wird der Code wieder eingefügt und man nimmt den nächsten Teil heraus, um so das Problem einzukreisen.

Werden Sie ein Teil unserer Welt

Bestellen Sie unseren Newsletter und erhalten Sie Drucktipps, Angebote sowie Neuigkeiten aus der Druckbranche direkt per E-Mail.
Zusätzlich schenken wir Ihnen einen 5 EUR Gutschein für Ihre erste Bestellung.