200917Jul

Firebug: Tipps für das Editieren von CSS-Styles

Die Firefox-Erweiterung Firebug hat sich zum Standard für das Testen und Debuggen von Websites entwickelt. Zusammen mit verschiedenen Erweiterungen lässt sich mit Firebug jeder technische Aspekt einer Website analysieren und optimieren.
Da das mächtige Werkzeug für Webentwickler sehr umfangreich ist, sind nicht alle Funktionen auf Anhieb ersichtlich bzw. selbstverständlich. Dieser Artikel soll eine kleine Anleitung für das Bearbeiten von CSS-Styles in Firebug darstellen — die Funktion dürfte das beliebteste Feature der Extension sein, da sich damit sehr schnell sichtbare Korrekturen an einem HTML-Dokument vornehmen lassen. In diesem ersten Firebug-Tutorial zeige ich lediglich ein paar Funktionen, welche die Arbeit mit dem Werkzeug erleichtern sollen. Firebug ist sehr benutzerfreundlich und viele Vorgänge lassen sich durch Ausprobieren herausfinden.

Nach dem man Firebug mit der F12-Taste geöffnet hat (Voraussetzung ist ein fertig geladenes HTML-Dokument), wird die zweispaltige Ansicht (HTML und CSS) dargestellt. In diesem Artikel geht es ausschließlich um den rechten Bereich, der "Styles"-Komponente.

Firebug - Styles

In diesem Bereich werden alle vom Entwickler erstellten CSS-Eigenschaften für die entsprechenden DOM-Elemente aufgelistet. Mit einem Klick auf den kleinen Pfeil des "Styles"-Tabs lassen sich auch die vom Browser berechneten Stile sowie die User-Agent-Stile anzeigen.
DOM-Objekte lassen sich mit Firebug sehr einfach auswählen. Nachdem man die kleine Taschenlampe im linken oberen Bereich des Firebug-Fensters aktiviert hat, können Elemente anschließend mit der Maus ausgewählt werden.

Firebug - DOM-Elemente auswählen

Bei den CSS-Stilen sortiert Firebug die unterschiedlichen Eigenschaften immer alphabetisch (aufsteigend). Jede Eigenschaft (sowohl Eigenschaft als auch zugewiesener Wert) lässt sich mit einem Mausklick bearbeiten. Durch das Betätigen von ENTER wird die Eingabe angewendet, während mit der ESCAPE-Taste die Änderungen verworfen werden.
Der komplette Bereich, in dem CSS-Einstellungen vorhanden sind, ist eine funktionelle Fläche: Das bedeutet, dass jede Stelle mit dem Mauszeiger benutzt werden kann. So erstellt ein Doppelklick auf eine freie Fläche eine neue Eigenschaft für das entsprechende DOM-Element.

Firebug - Styles bearbeiten

Firebug hat eine hervorragende Auto-Vervollständigung, die das Erzeugen neuer Einstellungen einfach macht. Die im "Styles"-Bereich aufgelisteten CSS-Definitionen beziehen sich auf die referenzierenden CSS-Dateien und die Inline-Styles, die vom Programmierer festgelegt wurden. So werden auch beispielsweise Definitionen für ein Element angezeigt, die für alle <div>-Container definiert wurden. In vielen Fällen möchte man die Darstellung eines bestimmten Elements verändern. Dafür bietet Firebug die "element.style"-Funktion, die lediglich auf das ausgewählte DOM-Objekt angewendet wird. Dazu öffnet man das Kontextmenü mit der echten Maustaste und wählt den Menüpunkt "Element-Style bearbeiten…" aus.

Firebug - Element-Style bearbeiten

Die darin erstellten CSS-Einstellungen beziehen sich dann nur auf das im HTML-Baum ausgewählte Element. Dort lassen sich dann neue Eigenschaften hinzufügen.

Firebug - Neue Element-Eigenschaft

Da beim Arbeiten mit CSS-Objekten ein pixelgenaues Positionieren erforderlich ist, bietet Firebug eine tolle Funktion, mit der sich Werte pixelweise einstellen lassen. Hat man einen CSS-Wert mit der linken Maustaste aktiviert, lässt sich die Angabe mit den Pfeiltasten (nach oben / nach unten) auf der Tastatur um einen Pixel verändern.

Firebug - Eigenschaften mit Pfeiltasten einstellen

Dadurch lässt sich sehr schnell die finale Position eines Elements ermitteln, die vom Designer vorgesehen wurde. Zusammen mit Pixel Perfect ist ein Website-Entwurf so schnell nachgebaut, ohne ständig in ein Bildbearbeitungsprogramm wechseln zu müssen.