Entwickler-Blog: Sonstige Informationen

In diesem Eintrag des Entwickler-Blogs möchten wir Ihnen nun zeigen, wie Sie Ihre Produktivität noch weiter verbessern können, indem Sie bei der Umsetzung eines Projektes die dazugehörigen CSS-Dateien direkt live im Web-Browser umsetzen.

Genau dies ermöglichen mittlerweile einige Erweiterungen ("Extensions" bzw. "Add-Ons") für die Browser Firefox und Internet Explorer. Einmal heruntergeladen und aktiviert, können Sie nach dem Aufruf einer Webseite in einem im Browser integrierten Fenster die dort verwendeten CSS-Dateien auswählen.

Beim Klick auf eine dieser Dateien erscheint ein weiteres Fenster mit dem Inhalt der Datei und mit der Bearbeitung der Datei kann direkt in diesem Fenster begonnen werden. Jede Änderung an den CSS-Regeln wird dabei live im Browser wiedergegeben, ohne dass ein spezifisches Neuladen der Seite erforderlich ist.

Je nach Ausstattung der Browser-Erweiterung werden zusätzliche Features wie ein Quellcode-Highlighting, angeboten. Die geänderten Stylesheet-Angaben sind dann natürlich noch nicht dauerhaft wirksam, sondern die bisherigen Dateien müssen zunächst überschrieben werden. Wenn Sie eine derartige CSS-Erweiterung zusammen mit WebDrive einsetzen, dann können Sie auch direkt aus dem Browser heraus die Datei auf Ihrem FTP-Server aktualisieren.

CSS-Erweiterungen für Firefox

• EditCSS (alle Informationen)
  Ermöglicht die Bearbeitung von CSS-Dateien in einer Seitenleiste ohne zusätzliche Features. U.U. Probleme bei Webseiten mit mehreren verlinkten CSS-Dateien und Umlauten in den Kommentaren.
• Web Developer (alle Informationen)
  Toolbar, die neben der Bearbeitung von CSS-Dateien (auch mehreren pro Seite) zahlreiche weitere wichtige Features für Webentwickler enthält, z.B. für die Validierung von XHTML-Code und CSS-Dateien mit nur einem Klick.
• CSSMate (alle Informationen)
  Ursprünglich aus EditCSS entstanden, jetzt jedoch unabhängig. Ermöglicht die Bearbeitung mehrerer CSS-Dateien pro Seite. Eine Speicherung direkt aus der Erweiterungs heraus ist jedoch nicht möglich (nur Copy&Paste z.B. in die Dateiverwaltung von Contentpapst/CP::Shop).
• Firebug (alle Informationen, offizielle Webseite)
  Umfangreicher Editor, nicht nur für CSS-Dateien, sondern ebenso für den HTML-Code und eingebundene JS-Dateien. Bietet u.a. ein Quellcode-Highlighting und ein Feature, mit dem bei der Anwahl eines Elementes der Webseite (z.B. einer Tabelle) genau die dafür geltenden CSS-Regeln eingeblendet werden. Firebug sorgt automatisch für Validität der CSS-Dateien, indem nur im CSS-Standard enthaltene Attribute und Werte im Eingabefeld zugelassen werden.

CSS-Erweiterungen für Internet Explorer

• DOM Helper (alle Informationen
  Vergleichbar mit EditCSS/Firebug ermöglicht DOM Helper erstmals eine Bearbeitung von CSS-Dateien direkt im Internet Explorer.

CSSVista - Bearbeitung synchron in Firefox und Internet Explorer

Noch einen Schritt weiter als die restlichen Erweiterungen geht CSSVista (alle Informatione) für Windows. Die ist keine normale Browser-Erweiterung, sondern ein eigenständiges Programm, in welchem gleichzeitig in zwei Fenstern die Rendering-Engines von Firefox und Internet Explorer sichtbar sind. Alle Änderungen werden automatisch auf beide Fenster angewandt.

Mit einer ausreichend hohen Bildschirmauflösung können damit sehr komfortabel und mit hoher Zeitersparnis valide, browserunabhängige Stylesheets entwickelt werden.

Alle hier vorgestellten Erweiterungen für die Bearbeitung von CSS-Dateien im Browser sind kostenlos erhältlich und können auf den jeweils verlinkten Seiten heruntergeladen werden.