Cascading Stylesheets, kurz CSS, sind in: Noch vor ein, zwei Jahren liess sich der W3C-Standard allenfalls zur Spezifikation von Textattributen nutzen. Für den weitergehenden Einsatz, zum Beispiel als Grundlage fürs Seitenlayout, war die Unterstützung in den verschiedenen Browsern zu wenig ausgewogen. Nachdem nun auch der Marktführer mit Internet Explorer Version 6 hinreichenden CSS2-Support bietet, steht dem umfassenden Durchbruch der Technologie nichts mehr im Wege.
Auch verbreitete Web-Editoren wie Dreamweaver und Golive bieten ein gewisses Mass an CSS-Unterstützung. Dennoch haben dedizierte CSS-Editoren keineswegs ausgedient – im Gegenteil: Immer mehr Websites werden heute entweder liebevoll mit einem simplen Text-Editor «von Hand» gemacht, oder sie basieren auf einem Content-Management-System, das den HTML-Code automatisch generiert. In beiden Fällen dienen Stylesheets als Basis für das Erscheinungsbild. Zum Erstellen der CSS-Statements eignet sich ein reiner CSS-Editor mit seinen speziell abgestimmten Features besser als ein überfrachteter Universal-Web-Editor.
Wir haben vier bekannte CSS-Editoren getestet. Im Zentrum steht bei allen Programmen ein textorientiertes Editorfenster mit farbcodierter Darstellung der CSS-Regeln, Selektoren, Eigenschaften und Wertangaben. Eine zweite Kernfunktion ist die Vorschau der erstellten Styles – entweder einzeln oder in der Gesamtheit aller in der Datei enthaltenen Definitionen anhand eines Beispieldokuments.
Dazu kommen je nach Produkt unterschiedlich ausgeprägte Editierhilfen, dialogbasierte Editoren für bestimmte CSS-Bereiche, Wizards sowie Hilfsfunktionen zur Formatierung, Validierung und zur Verwaltung der gesamten in HTML- oder separaten CSS-Files enthaltenen Style-Definitionen einer ganzen Website. Ebenfalls in allen Paketen enthalten: Mehr oder weniger umfangreiche Dokumentationen und Tutorials, die sich allerdings samt und sonders ausschliesslich am Bildschirm abrufen lassen. Keines der Programme kommt mit einem druckbaren Manual.
Rapid CSS kostet nur 25 Dollar, beschränkt sich aber auch auf das Nötigste. In der linken Hälfte des Fensters erscheint je nach aktiviertem Karteireiter der Code, eine Gesamtvorschau aller im File enthaltenen CSS-Regeln oder eine wahlweise vertikal oder horizontal geteilte Mischansicht. Rechts daneben zeigt Rapid CSS den Inspektor, den Inhalt der Zwischenablage oder den Dateiexplorer. Eine Einzelvorschau der selektierten CSS-Regel zeigt Rapid CSS nicht.
Sobald man im Code eine Eigenschaft anklickt, erscheint sie im Inspektor blau markiert, und der zugehörige Wert lässt sich per Direkteingabe oder via Dialogbox editieren. Das klingt sinnvoll, funktioniert aber nicht wirklich benutzerfreundlich: Der Inspektor zeigt die Eigenschaften in einer Baumdarstellung an, auf der obersten Ebene erscheinen die CSS-Bereiche wie Borders, Font oder Tables per Default im zugeklappten Zustand. Zugriff auf die einzelnen Eigenschaften erhält man erst, nachdem man den passenden Bereich von Hand aufklappt.
Die blaue Markierung der selektierten Eigenschaft nützt wenig, wenn sie ohne weitere Anstrengungen gar nicht zu sehen ist. Die Grundeinteilung nach CSS-Bereich ist im übrigen zwar vom Standard her korrekt, aber selbst für CSS-Profis ist es nicht immer offensichtlich, welchem Bereich eine bestimmte Eigenschaft angehört. Die Folge: mühsame Suche statt hilfreiche Sofortanzeige.
Auch sonst bietet Rapid CSS kaum mehr als ein gut ausgestatteter gewöhnlicher Texteditor. Die Autocomplete-Funktion, die nach einer gewissen Zeit automatisch die zum eingetippten Code passenden CSS-Begriffe anzeigen sollte, funktionierte auf unserem Windows-2000-Testsystem nicht. Nützlich dagegen die Option «Help for current item» im Kontextmenü, die in einem separaten Fenster die Dokumentation des gewählten CSS-Befehls anzeigt. Diese Doku ist jedoch keine Eigenleistung des Entwicklers. Als Basis dient der frei verfügbare CSS-Guide der Web Design Group (www.htmlhelp.com), der im übrigen auch in den meisten anderen CSS-Editoren zum Einsatz kommt.
Dieses Fünfzig-Dollar-Programm verzichtet ganz auf einen Eigenschafts-Inspektor. Stattdessen gibt es in Style Studio eine erweiterte Autocomplete-Funktion namens Intellistyle – Anlehnung an Office-Programme beabsichtigt. Intellistyle präsentiert auf die Tastenkombination Control-Space hin die zur aktuellen Eingabe passenden CSS-Befehle. Dabei berücksichtigt Style Studio auch den CSS-Supportlevel, der im Options-Menü eingestellt wurde: Es erscheinen jeweils nur die im gewählten Browser gültigen Eigenschaften.
Die Oberfläche ist voll mit Informationen und Bedienungselementen, lässt sich aber ziemlich frei umkonfigurieren. Neben einer Unzahl von Toolbar-Buttons ist das Grundlayout dreigeteilt: Die linke Spalte fasst oben wahlweise eine Liste aller im Code enthaltenen Klassen, IDs, Selektoren und Anchors samt Einzelvorschau der aktuellen Regel oder eine Aufstellung der verwendeten Farben zusammen. Beim Klick auf einen der Selektoren springt das Codefenster zur zugehörigen Definition. Ähnliches gilt für die Farben: Mit jedem Klick auf ein Farbfeld springt der Cursor zur nächsten Stelle, an der die Farbe verwendet wird. So erhält man relativ unkompliziert eine Übersicht über den Farbeinsatz.
Darunter erscheint, ebenfalls wählbar, ein Dateiexplorer, eine Liste verlinkter oder importierter Stylesheets, ein funktional etwas unmotiviertes «Color Panel» – es zeigt die Farben nur an, editieren lassen sie sich nicht – oder aber die «Property Watch», die zur gewählten CSS-Eigenschaft Basisinformationen wie Browserkompatibilität, Anwendbarkeit und Grundwert angibt.
In der Mitte folgt das Codefenster. Zwischen den geöffneten Dokumenten schaltet man über die oben angeordneten Tabs um. Die rechte Spalte ist wiederum multifunktional – je nach Wahl zeigt sie eine Gesamtvorschau aller Regeln, den Output des CSS-Validators oder anderweitige Programmeldungen. Neben dem Direktzugriff auf den Online-Validator des W3C bietet Style Studio auch einen eigenen integrierten CSS-Validator, der wesentlich umfassendere Informationen liefert.
Das Besondere an Style Studio sind die zahlreichen Hilfsfunktionen. Neben verschiedenen Editierhilfen wie Umwandlung in Gross- oder Kleinschreibung, Code-Templates und Intellistyle fallen die Wizards auf: Der Migration Wizard passt die Style-Definitionen an verschiedene Browser an, der Style Rotator generiert HTML- und Javascript-Code, damit die Besucher einer Seite per Mausklick zwischen verschiedenen Stylesheets umschalten können. Besonders nützlich ist auch der Style Manager. Er liefert ausführliche Statistiken und Fehler-Reports zu allen Stylesheet-Dateien und in HTML eingebetteten Style-Definitionen der gesamten Website.
CSS-Links für Einsteiger und Profis
Stylemaster ist das einzige der getesteten Programme, bei dem die Beziehung zwischen Code und Inspektor beziehungsweise dialogbasierten Editoren wirklich nutzbringend funktioniert: Beim Klick auf eine Eigenschaft im Code-Fenster erscheint in der rechten Spalte automatisch der passende Dialog, in dem sich alle Eigenschaften und Werte des jeweiligen CSS-Bereichs auf einen Blick einsehen und editieren lassen. Kurzinformationen über die Browserkompatibilität sowie eine Einzelvorschau erscheinen jeweils direkt unter dem Eigenschaftseditor. Damit eignet sich Stylemaster ganz besonders für CSS-Einsteiger; Fortgeschrittene können den «Smart property editor» genannten Automatismus auch abschalten.
Mehrere weitere Features bestätigen Stylemaster als ideales Tool zum Einstieg in die CSS-Welt: Links neben dem Code präsentiert das Info-Fenster auf Knopfdruck entweder eine Dokumentation der aktuellen Eigenschaft oder ausführliche Angaben zur Browserkompatibilität. Das Info-Fenster entspricht der «Property Watch» von Style Studio; die Informationen sind in Stylemaster aber um ein Vielfaches ausführlicher. Die Dokumentation stammt zudem nicht wie bei Rapid CSS von der WDG, sondern vom Hersteller Westciv selbst, der als CSS-Spezalist auch diverse HTML-basierte CSS-Kurse sowie den «Complete CSS Guide» herausgibt, der dem Programm kostenlos beiliegt.
Ein weiteres Alleinstellungsmerkmal: Der Layout Wizard generiert in wenigen Schritten ein komplettes CSS-basiertes Seitenlayout. Damit wird es auch dem CSS-Laien möglich, ohne vorgängiges Studium länglicher CSS-Bücher rasch standardkonforme und browserkompatible Webseiten ganz ohne Tabellenlayout zu erstellen. Auch die Wizards für Navigationsbalken und «Breadcrumb»-Zeilen – damit ist die Darstellung der aktuellen Position in der Website im Stile von «Home – Firma – Team» gemeint – können sich sehen lassen. Das Paket enthält überdies auch diverse stilistisch sehr ansprechende Layout-Vorlagen komplett mit Bildern, HTML- und CSS-Dateien.
Schwächen zeigt Stylemaster beim Site Management. Im Gegensatz zu Style Studio und Topstyle bietet Stylemaster zwar Hilfestellung beim Verlinken und Einbetten von Stylesheets, ein eigentlicher Site Manager mit dateiübergreifenden Funktionen fehlt aber. Dürftiger als bei Style Studio fällt die Validierung aus – Stylemaster bietet keinen eigenen Validator, sondern verlässt sich auf einen Direktlink zum W3C-Online-Validator. Eine Schnittstelle zum HTML-Formatiertool Tidy, bei allen anderen Kandidaten Standard, fehlt. Etwas irritierend: Für eine sinnvolle Gesamtvorschau wird zwingend ein externes HTML-Dokument benötigt – alle anderen Programme lassen dies zwar ebenfalls zu, erzeugen aber auf Wunsch auch eine automatische Vorschau aller im Dokument angetroffenen Styles.
Topstyle, in einer Light-Version Bestandteil des Dreamweaver-Pakets, stammt vom Homesite-Entwickler Nick Bradbury und gilt gemeinhin als der CSS-Editor für Profis. In unserem Test wurde das Produkt seinem Ruf durchaus gerecht – mit einer Ausnahme: Wie Rapid CSS markiert auch Topstyle die im Code angewählte Eigenschaft in der Inspektor-Baumdarstellung blau, wie Rapid CSS scrollt der Inspektor aber nicht automatisch zur betreffenden Stelle. Er scrollt zwar irgendwohin; eine direkte, unmissverständliche Beziehung zwischen dem angeklickten Code und der Scrollposition des Inspektors besteht leider nicht. Immerhin: Der Eigenschaftsbaum ist hier nicht per Default völlig zugeklappt, sondern präsentiert alle Eigenschaften in einer fortlaufenden Liste.
In allen anderen Punkten ist Topstyle mustergültig, und mehrere Features zeigen viel Liebe zum Detail. Nützlich ist die Option «Related Styles» im Kontextmenü: Topstyle zeigt eine Liste aller Selektoren an, die das gleiche Element oder die gleiche Klasse enthalten wie der aktuell angewählte Selektor – bei «div@leftblock ul» erscheinen zum Beispiel alle div- und alle ul-Selektoren, die im Dokument vorkommen. Umfassend sind auch die Validierungs- und Formatierungsmöglichkeiten; die integrierte Formatieroption «Style Sweeper» ist punkto CSS dem Standardtool HTML Tidy, zu dem ebenfalls eine Schnittstelle besteht, mindestens ebenbürtig.
Das Farbmanagement lässt kaum Wünsche offen: Der Paletteneditor zeigt alle verwendeten Farben in einer Liste an; bei jeder Farbe ist in einer zweiten Ebene zu sehen, in welchen Selektoren sie verwendet wurde. Daneben bietet der Editor Optionen zum Aufhellen und Abdunkeln aller Vordergrund-, Hintergrund- oder Umrandungsfarben sowie zur Umwandlung einer Farbe in die nächstgelegene benannte oder browsersichere Standardfarbe. Ähnliche Möglichkeiten bietet auch Style Studio; Topstyle präsentiert sie aber viel benutzergerechter. Ein besonderes Zückerchen gibt es jedoch nur bei Topstyle: Der Farbeditor zeigt zu jeder Farbe mehrere gut harmonierende Farben an.
Der Vergleich von vier CSS-Editoren bringt zwei Tatsachen ans Licht: Erstens klaffen bei einer relativ geringen Preisdifferenz immense Unterschiede zwischen simplen Shareware-Tools und professionell durchdachten Produkten. Rapid CSS dient hier nur als Beispiel für eine ganze Kategorie, die im wesentlichen aus «besseren Texteditoren» besteht. Zweitens lässt sich ein Testsieger nur knapp ermitteln: Sowohl Topstyle Pro als auch Stylemaster bieten eine Fülle nützlicher Features. Der Unterschied liegt in der Zielgruppe: Topstyle liegt mit umfassendem Site Management, internem Validator und Schnittstellen zu diversen externen Validierungsdiensten den Bedürfnissen fortgeschrittener Entwickler näher, während Stylemaster sich durchaus auch für den Profi eignet, mit der leicht zugänglichen CSS-Referenz aus herstellereigener Küche, dem Layout Wizard und einem umfassenden CSS-Tutorial aber besonders dem CSS-Einsteiger entgegenkommt. Insgesamt erhält Topstyle so einen leichten Vorsprung. Style Studio fällt gegenüber den Testsiegern leicht ab, da verschiedne Features etwas weniger ausgefeilt daherkommen.
