CSS-Fehler einfach finden mit Firefox

Ohne Hilfsmittel ist die Optimierung von CSS-basierten Webseiten umständlich: Fehler bemerken – im HTML die zuständige Klasse identifizieren – CSS nachbessern – Erfolg überprüfen. Die Firefox-Erweiterung Web Developer bringt hier mehr Effizienz in die Entwicklung.

Firefox-Erweiterungen finden und installieren

Zusätze wie der Web Developer sind Module, die Sie in Firefox mit wenigen Mausklicks installieren können. Alle Erweiterungen sind bei mozilla.org gelistet und warten auf den Download. Auf der Beschreibungsseite jeder Erweiterung gibt es eine grün hervorgehobene Fläche mit dem Link Install Now. Nach einer Bestätigung lädt Firefox dann die Erweiterung aus dem Web, installiert sie und aktiviert sie beim nächsten Start. Meistens hat danach dann das Menü Extras neue Einträge bekommen oder das Browserfenster bietet neue Schaltflächen.

Überblick verschaffen

Die Erweiterung Web Developer kennt viele Optionen, um hilfreiche Informationen zu einer im Browser geladenen Seite anzuzeigen. Möchten Sie beispielsweise sehen, welche CSS-Definitionen die einzelnen Elemente der Seite aufweisen, nutzen Sie den Menüpunkt Information – Display ID & Class Details.

Um dagegen gesammelt alle CSS-Definitionen zu erhalten, ist CSS – View CSS (Tastenkombination Strg-Umschalten-C) geeignet. Dabei werden in einem separaten Browser-Tab alle ins HTML eingebetteten CSS-Definitionen sowie der Inhalt der referenzierten CSS-Dateien zusammengefasst. Eine farbig hervorgehobene Überschrift zeigt die Quelle der Layoutvorgaben an.

Wirksame Definitionen herausfinden

Mit dem Kommando CSS – View CSS oder der Tastenkombination Strg-Umschalten-Y wird der Mauscursor zum Fadenkreuz. Fahren Sie damit über ein Element der gerade angezeigten Seite. Dann sehen Sie in der Statusleiste die Hierarchie der CSS-relevanten Elemente. Das bedeutet, dass Sie – ausgehend vom <body>-Tag – eine Liste aller Tags bekommen, in der das angeklickte Element enthalten ist – sowie gegebenenfalls von selbst definierten Klassen und IDs. Das hilft dabei, zu verstehen, warum der Browser für dieses Element einen bestimmten Satz an Formatierungen verwendet.

Klicken Sie in diesem Modus auf das Element, öffnet sich ein neues Tab im Browser. Darin finden Sie die angewandten Zeilen der CSS-Datei inklusive der Zeilennummern. Wenn also Schriftart-Definitionen für den Body und das angeklickte Element existieren, wird nur die CSS-Klasse des Elements angezeigt, weil sie die allgemeinere Definition für <body> überschreibt.

Stylesheet im Browser editieren

Web Developer kennt einen Modus, bei dem links im Browserfenster die CSS-Datei eingeblendet wird. Sie aktivieren diese Ansicht über das Menü CSS – Edit CSS oder per Strg-Umschalten-E. Wie der Name vermuten lässt, kann diese Funktion mehr, als lediglich die Stylesheets der aktuellen Seite darstellen. Denn im CSS-Fenster können Sie auch Änderungen an den CSS-Definitionen vornehmen. Sofort nach dem Bearbeiten der Vorlagedatei sehen Sie, wie sich die Änderungen auswirken. So können Sie Ihre CSS-Vorlage verbessern, ohne zwischen Editor und Browser hin- und herschalten zu müssen.

Entspricht die Darstellung dann Ihren Vorstellungen, klicken Sie auf den zweiten Button namens Save und können die CSS-Datei lokal abspeichern. Sind in einer Webseite mehrere CSS-Dateien referenziert, erkennt das Tool dies und teilt das CSS-Fenster so auf, dass jede Datei übersichtlich in einem eigenen Tab dargestellt wird. Wie das Ergebnis aussehen würde, wenn eine der CSS-Dateien nicht enthalten wäre, können Sie über die Checkboxen im Menü CSS – Disable Styles – Individual Style Sheets prüfen. Das funktioniert aber nur, wenn der Browser sich nicht im Modus Edit CSS befindet.

Gültigkeit überprüfen

Der Menüpunkt Tools – Validate CSS öffnet für die aktuell dargestellte Seite einen neuen Tab mit den Ergebnissen des Validierungs-Checks beim W3C-Konsortium. Die Prüfroutine ist sehr kritisch, so dass Sie nicht allen Warnungen nachgehen müssen. Aber sie findet zuverlässig typische Probleme in CSS-Definitionen, wie Tippfehler in Schlüsselwörtern, unterlassene Trennzeichen oder sonstige syntaktische Probleme. Sollten Sie einen anderen Online-Validator gefunden haben, der Ihnen mehr zusagt, können Sie auch den einsetzen. Die zuständige URL kann in den Optionen des Web Developer unter der Registerkarte Tools geändert werden. Dort können Sie auch eine Tastenkombination definieren, um die Validierung schneller aufrufen zu können

Medien-Varianten betrachten

Moderne Browser unterstützen einen Mechanismus, um für verschiedene Arten von Ausgabegeräten individuelle CSS-Vorlagen definieren zu können. Die häufigste Anwendung dieser Einrichtung ist eine automatische Druckvariante des Seitenlayouts. Dazu gibt man dem Tag für den CSS-Include noch eine Definition des Zielmediums mit:

<link rel=”stylesheet” type=”text/css” href= “printstyle.css” media=”print” />

Startet man in einem solchen Browser den Ausdruck, baut er unter Beachtung der CSS-Variante intern die Seite neu auf und gibt das Ergebnis dann auf dem Drucker aus.

Ein wenig schwierig ist dabei die Entwicklung des spezifischen Layouts, weil man normalerweise immer die Druckvorschau starten muss, um das Ergebnis überprüfen zu können. Web Developer bietet hier eine interessante Funktion. Wählen Sie CSS – Display CSS by Media Type – Print. Nun zeigt der Browser die Druckansicht Ihrer Webseite an.

Durchblick bei Tabellen behalten

Wer trotz der Möglichkeiten von CSS sein Layout immer noch hauptsächlich auf verschachtelten Tabellen aufbaut, bekommt von Web Developer auch Unterstützung. Im Menü Outline gibt es beispielsweise Optionen, um Tabellen und einzelne Zellen durch verschieden farbige Umrahmungen hervorzuheben. Das ist beim selbst produzierten Tabellenchaos um einiges hilfreicher, als das manuelle Aktivieren der border-Auszeichnung. Um die aktuellen Ausmaße der verwendeten Tabellen in Pixeln zu sehen, aktivieren Sie die Funktion Information – Display Block Size.

Firefox-Erweiterung CSS Viewer

Kompakter CSSHelfer

Neben dem Web Developer ist auch die Erweiterung CSS Viewer ein praktisches Tool. Aktivieren Sie nach der Installation den gleichnamigen Menüpunkt in Extras und steuern Sie mit der Maus ein beliebiges Seitenelement an, erscheint ein Zusatzfenster. Es zeigt die aktuelle CSS-Klasse oder ID und listet darunter alle geltenden Formatierungen auf. Das hilft bei der Entwicklung oder dem Debuggen, weil man sofort nachprüfen kann, welche Definitionen tatsächlich gelten. Weitergehende CSS-Analysen, wie beim Web Developer, kennt der CSS Viewer allerdings nicht.

CSS-Fehler schnell identifizieren

Für den Großteil der Verstöße gegen gültiges CSS müssen Sie nicht unbedingt den W3C-Validator anwerfen. Fehlermeldungen bringt auch schon Firefox alleine, wenn Sie den Menüpunkt Extras – Javascript-Konsole aktivieren. Denn ab der Firefox-Version 1.5 führt dieses Fehlerfenster auch CSS-Probleme auf. Allerdings ist durch die Vermischung mit Javascript-Meldungen die Fehlersuche ein wenig mühsam.

Abhilfe schafft die Erweiterung Console². Sie erweitert das Fehlerfenster um Knöpfe zur Filterung der angezeigten Meldungen. So können Sie vorgeben, ob Sie die Probleme der Bereiche XML, Javascript oder CSS in der Anzeige unterdrücken möchten.

Ähnliche Beiträge