201023Sep

Firebug: CSS-Anpassungen in Echtzeit erstellen

Der Titel dieses Beitrags könnte etwas irreführend sein: Hier geht es nicht um die Möglichkeit, über das "Styles"-Panel von Firebug neue Stile zu definieren. Inzwischen dürfte diese Funktionalität jedem Webentwickler bekannt sein. Falls nicht, kann sie in diesem Artikel nachgelesen werden.
In diesem kurzen Beitrag möchte ich eine Vorgehensweise beschreiben, mit der sich sehr schnell ganze CSS-Dateien in Firebug anlegen lassen. Der Vorteil dieser Methode besteht darin, dass die neuen Stile und Anpassungen in Echtzeit betrachtet und verändert werden können. Dadurch entfällt der ständige Wechsel zwischen Code-Editor und Firefox. Da diese Möglichkeit vielleicht nicht jedem CSS-Entwickler bekannt ist, will ich sie kurz vorstellen.

Wer schon mit Firebug gearbeitet hat, wird den Reiter "CSS" kennen — darüber können per Doppelklick neue Eigenschaften angelegt und bestehende Stile bearbeitet werden. Mit den Pfeiltasten (das entsprechende Feld muss aktiviert sein) können Zahlenwerte schrittweise erhöht oder verringert werden.

Firebug - Eigenschaften mit Pfeiltasten einstellen

Diese ganzen Möglichkeiten stehen natürlich auch in dem "Styles"-Panel zur Verfügung, das eine kompakte Version des "CSS"-Tabs darstellt und die geteilte Hauptansicht der Firefox-Erweiterung bildet.

Die eigentliche Funktionalität, die das Erstellen von neuen CSS-Regeln per Direkteingabe erlaubt, ist allerdings nur in dem "CSS"-Tab verfügbar. Die Rede ist von der "Bearbeiten"-Schaltfläche, die sich in der linken oberen Ecke des "CSS"-Bereichs befindet.

Firebug - CSS-Regeln wie in einem Editor erstellen

Ist der Bearbeitungsmodus aktiviert, können neue CSS-Deklarationen wie in einem Texteditor hinzugefügt werden. Je nachdem, an welcher Stelle der Code eingefügt wird, werden nachfolgende CSS-Stile berücksichtigt. Diese Möglichkeit eignet sich besonders gut für die Erstellung von Formular-Stilen. Natürlich lässt sich dadurch auch der komplette CSS-Code einer Website erstellen.

Firebug - CSS-Regeln wie in einem Editor erstellen

Sind alle CSS-Regeln vollständig, kann der Text kopiert und über einen Editor als CSS-Datei abgespeichert werden. Übrigens gehen die eingegebenen Informationen nicht verloren, wenn man den "CSS"-Reiter verlässt oder andere Firebug-Werkzeuge verwendet. Mit einem Klick auf die "Bearbeiten"-Schaltfläche wird der vorherige CSS-Code wieder eingeblendet.
Ähnliche Ansätze der "CSS-Live-Bearbeitung" verfolgt man auch mit StyleKit oder CSS Desk.