CSS-Editoren im Praxistest
CSS-Spezialisten

DeveloperIT-ProjekteSoftware

Wer viel mit CSS arbeitet, wünscht sich bald einen komfortablen Editor. Dieser Test verrät, was die aktuellen CSS-Editoren leisten und wo ihre Schwächen liegen.

Für Profis

CSS-Editoren im Praxistest

Web-Editoren wie Dreamweaver, Golive oder Frontpage sind aus Sicht des Webdesigners Eier legende Wollmilchsäue. Sie beherrschen von HTML über Javascript bis hin zu serverseitigen Techniken die ganze Bandbreite der Webtechniken. Irgendwo in dieser Fülle ist natürlich auch CSS integriert meist sogar in mittlerweile sehr guter Qualität. Und dennoch entsteht beim professionellen Webdesigner an einem bestimmten Punkt meist der Wunsch, eine komfortablere CSS-Umgebung zu erhalten. Hierfür eignen sich Spezialisten Editoren, die sich auf CSS beschränken und die sich oft auch sehr einfach in die großen Web-Editoren integrieren lassen.


Testkandidaten

CSS-Editoren im Praxistest

Die erste erfreuliche Nachricht ist, dass die hier versammelten sieben Testkandidaten allesamt durchaus erschwinglich sind. Das Spektrum reicht von knapp unter zwanzig Euro für Rapid CSS 2006 bis hin zu siebzig Euro für Topstyle Pro. Hinter allen Produkten stecken kleinere Software-Schmieden, die sich auf Websoftware spezialisiert haben. Für manche wie Abstract Thought Lab ist der CSS-Editor das einzige Produkt, andere wie Coffeecup oder Luckasoft bieten noch andere Editoren auf ähnlicher Basis. Topstyle Pro stammt ursprünglich von Bradbury-Software und wurde mittlerweile vom RSS-Spezialisten Newsgator aufgekauft.

Bedingt durch den relativ kleinen Markt der CSS-Spezialisten sind die Editoren aus diesem Test alle im Direktvertrieb zu beziehen. Daher sind die Preise überall in Dollar angegeben. Der Support wird über die Website der Anbieter abgewickelt und ist meist eine Mischung aus FAQ, Forum und E-Mail-Kontakt. Für diese normalerweise recht unkomplizierten Programme ist das vollkommen ausreichend.


Deutsch ist Mangelware

CSS-Editoren im Praxistest

Aus dem Testfeld beherrscht nur Enginsite die deutsche Sprache dies allerdings auch nicht immer fehlerfrei und ausschließlich in der Oberfläche, nicht in der Hilfe. Die übrigen Produkte sind komplett in Englisch, was allerdings viele professionelle Webdesigner schon aus Berufsgründen nicht allzu sehr stören dürfte. Für einen Einsteiger kann dies allerdings durchaus ein Manko sein.

Erfreulich ist ansonsten die hohe Qualität im Testfeld. Der einzige Ausreißer nach unten ist Coffeecup Stylesheet Maker. Er bietet einfach zu wenig Funktionalität und Bedienkomfort, um seinen Preis zu rechtfertigen.

Astyle erhält zwar keine Top-Platzierung, geht aber einen ganz neuen Weg. Die Stile lassen sich hier in hierarchischen Ansichten und vielen Registern visuell zusammenklicken. Die übrigen Produkte liegen dagegen nicht nur leistungsmäßig eng bei einander, sondern verfolgen auch ähnliche Oberflächenkonzepte. Symbolleisten und Menüs sind weitgehend an die Microsoft-Office-Standards angelehnt, und die übrige Funktionalität wird in Paletten vorgehalten.


Bedienung und Validieren

CSS-Editoren im Praxistest

Zumindest eine Palette zeigt die Selektoren des CSS-Dokuments in der Übersicht. Meist ist eine weitere dafür verantwortlich, mögliche CSS-Eigenschaften und Werte aufzuführen. Exemplarisch für die unterschiedlichen Ausprägungen dieses Konzepts sind Topstyle, Style Master und Enginsite.

Topstyle setzt auf einen Style Inspektor, der alle verfügbaren Stileigenschaften für bestimmte Browser oder CSS-Level alphabetisch oder nach Gruppen anzeigt. Style Master unterteilt dagegen die Eigenschaften in so genannte Editoren für einzelne Zwecke und bietet alternativ eine alphabetische Liste oder auch nur die aktuell bereits verwendeten Editoren. Die Unterstützung von Browsern und Standards ist in eine eigene Palette ausgelagert. Enginsite verwendet einen Editor für die Eigenschaften als Hauptelement und dazu einen Navigator mit einer Übersicht über die vorhandenen Selektoren und CSS-Eigenschaften.

Auch bei der Validierung und Fehlerüberprüfung gibt es große Gemeinsamkeiten. Die meisten Editoren zeigen falsch geschriebene CSS-Befehle durch rote Hervorhebung oder Unterringelung an. Beim Validieren werden die Ausgaben meist in einer Melde-Palette gesammelt. Unterteilt wird in der Regel zwischen Syntaxprüfung und W3C-Validierung. Für Letztere greifen alle Probanden, die diese Funktionalität unterstützen, auf den vom W3C online zur Verfügung gestellten Validierer zurück. Einzig Style Studio integriert direkt eine Validierungs-Engine.


Fazit

CSS-Editoren im Praxistest

Ein CSS-Editor lohnt sich für jeden, der viel mit Cascading Stylesheets arbeitet. Allein die Vorschau von einzelnen Selektoren und die komfortablen und aktuellen Referenzen nehmen viel Arbeit ab. Von den fünf Erstplatzierten im Test erfüllt jeder der Kandidaten fast alle grundlegenden Erwartungen. Sie sollten sich auf jeden Fall die Testversionen ansehen. Ein CSS-Editor erleichtert die tägliche Arbeit des Webdesigners ungemein.


Topstyle Pro

CSS-Editoren im Praxistest

Ursprünglich wurde Topstyle vom Homesite-Entwickler Nick Bradbury ins Leben gerufen. Mittlerweile hat die Firma Newsgator Topstyle mitsamt Gründer übernommen. Topstyle ist in der kleineren Version bereits in einigen Web-Editoren integriert, und auch die Pro-Version lässt sich einfach als Standard-Editor für CSS beispielsweise in Dreamweaver angeben. Die Oberfläche von Topstyle gehört zu den am besten geordneten im Testfeld. Hier besteht auch die Möglichkeit, Paletten zu verschieben und an anderen Stellen anzudocken. Überhaupt wird individuelles Anpassen groß geschrieben: Vom Tastenkürzel über die Symbolleiste bis zum Menü können die Tester alles individuell konfigurieren.

An Funktionen bietet Topstyle alles von Standards wie Suchen und Ersetzen bis zu Anspruchsvollerem wie automatischer Code-Einrückung. Sinnvoll ist beispielsweise die Farbübersicht in einer eigenen Palette. Dort sehen die Autoren sämtliche im CSS zum Einsatz kommenden Farben und können so die komplette Farbwelt ihrer Testsite beurteilen. Der Stilinspektor zeigt alle CSS-Befehle für bestimmte Browser oder CSS-Level, die der Anwender nach Kategorien oder alphabetisch ordnen kann.

Zu den wenigen Schwächen gehört, dass Topstyle beim Suchen in mehreren Dateien kein Ersetzen bietet. Sinnvoll wäre noch eine kontextabhängige Hilfe und natürlich eine deutsche Oberfläche.

Fazit. Topstyle Pro ist zwar der teuerste CSS-Editor im Test, aber auch klarer Testsieger. Vor allem in Sachen Bedienung und Funktionalität hat er die Nase vorn. Für vollständige Zufriedenheit fehlt nur eine deutsche Version.

Ranking: 92%
Hersteller: Newsgator
Preis: 79,95 Dollar
Plattform: Windows


Style Studio

CSS-Editoren im Praxistest

Die Oberfläche von Style Studio ähnelt der einiger Konkurrenten wie Topstyle, Rapid CSS und Enginsite. Auch hier befindet sich auf der linken Seite eine hierarchische Übersicht über die Selektoren. Besonders praktisch ist, dass sich die Vorschau für den jeweiligen Selektor direkt unter der hierarchischen Übersicht befindet. Informationen zu den Eigenschaften zeigt das Bedienfeld Property Watch. Die Paletten sind gruppiert mit anderen Funktionen, beispielsweise einer Übersicht der vorhandenen Farbwerte. Leider lassen sich die einzelnen Register nicht trennen, wohl aber sind die Paletten selbst beweglich. Zu leichten Punktabzügen führt die Tatsache, dass die Einraststellen für Paletten beim Drag and Drop nicht erkennbar sind.

Punkten kann Style Studio mit einigen besonderen Funktionen: So gibt es Symbole zum Erhöhen und Verringern von CSS-Werten. Sehr löblich ist die Validierung, die gut strukturiert
e Fehlermeldungen liefert, ohne dass eine Online-Verbindung notwendig ist. Interessant ist bei der Validierung, dass aus CSS-Level 1 und 2.x ein Durchschnittswert gebildet wird.

Ein Highlight in Style Studio ist die integrierte Hilfe. Zwar ist sie, wie das gesamte Programm, nur auf Englisch, ist dafür aber verständlich und umfassend. Es gibt Einstiegs-Tutorials, eine kontextbezogene Hilfe und auch ausreichend Beispiele.

Fazit. Von der Hilfe über die Oberfläche bis zu den Funktionen macht das Programm einen durchdachten Eindruck und steht nur knapp hinter Topstyle zurück, das noch etwas mehr praktische Funktionen mitbringt

Ranking: 89%
Hersteller: Highdots
Preis: 49,99 Dollar
Plattform: Windows


Rapid CSS 2006

CSS-Editoren im Praxistest

Dank der Spezialisierung besticht Rapid CSS mit 19,95 Dollar durch einen ausgesprochen günstigen Preis. Dafür muss der Nutzer auf nichts verzichten, sondern erhält vor allem in Sachen Funktionalität einen der besten Editoren im Testfeld. Zu den Highlights gehört eine Projektverwaltung, die auch mit einem FTP-Upload verbunden werden kann. Ebenso vorbildlich ist die Integration diverser Tests von Syntax über W3C-Validierung bis zur HTML-Tidy.

Die Oberfläche ist aufgeräumt und trotz rein englischer Sprache einfach zu verstehen. Kleinere Bedienschwächen offenbart Rapid CSS bei Detailarbeiten wie der Farbwahl. Dort stehen einfache Paletten zur Verfügung. Will der farbliebende Designer mehr, muss er erst auf eine versteckte Schaltfläche klicken, um den Windows-Farbwähler aufzurufen. In der Code-Bearbeitung bietet Rapid CSS einen Code-Explorer, der die Selektoren übersichtlich zeigt. Der Inspector auf der anderen Seite erlaubt es, Einstellungen vorzunehmen. Im Code hilft die Autovervollständigung.

Vom Tastenkürzel bis zum Kontextmenü ist in Rapid CSS alles vom Nutzer einstellbar. Das Programm bietet sowohl eine kontextbezogene Hilfe als auch eine Programmhilfe. Die Referenzen sind zwar vollständig, aber die HTML-Referenz ist noch auf dem Stand 4.0 mit Tags in Großbuchstaben. All dies stört in der Praxis höchstens Einsteiger, denn im Programm selbst sind die Stilbefehle inklusive Browser-Kompatibilität auf dem neuesten Stand.

Fazit. Als günstigster Kandidat im Testfeld verdient sich Rapid CSS die Budget-Empfehlung und lässt dabei in Sachen Funktionalität fast alle Konkurrenten hinter sich.

Ranking: 86%
Hersteller: Blumentals
Preis: 19,95 Dollar
Plattform: Windows


Enginsite CSS Editor

CSS-Editoren im Praxistest

Enginsites große Stärken liegen in der aufgeräumten Oberfläche und in den vielen Funktionen. Die Paletten sind klar gegliedert, lassen sich allerdings nicht unabhängig voneinander verschieben. Hat der Webdesigner einen bestimmten Befehl im Code ausgewählt, erhält er dazu nicht nur in einem Eigenschaften-Editor die Werte, sondern auch gleich noch Referenz-Informationen. Der Eigenschaften-Editor selbst lässt sich flexibel nach Themengebieten, rein alphabetisch und mit hierarchischer Ansicht verwenden.

Bei der Code-Bearbeitung glänzt Enginsite mit automatischen Einrückungen nicht nur für das gesamte Dokument, sondern auch für einzelne CSS-Selektoren. Auch eine Vorschau gibt es ausschließlich begrenzt auf einen CSS-Selektor. Gerade bei der Formatierung von Menüs und anderen einmaligen Elementen mit IDs ist das sehr praktisch. Erfreulich ist, dass eine deutsche Version verfügbar ist. Kaum ins Gewicht fallen bei der Arbeit die charmanten Schwächen der deutschen Übersetzung. So ist der Eigenschaften-Editor nicht übersetzt, und öfter mal haben sich Rechtschreibfehler eingeschlichen.

Enginsite lässt sich als CSS-Editor in den Web-Editor Frontpage von Microsoft integrieren. Natürlich ist es auch als CSS-Spezialist aus anderen Web-Editoren verwendbar.

Fazit. Ein paar Details fehlen zu einer besseren Platzierung, doch behauptet sich Enginsite im Test mit vielen Funktionen und einigen Besonderheiten wie der sehr praktischen Vorschau und Formatierung für Selektoren.

Ranking: 83%
Hersteller: Luckasoft
Preis: 39,95 Dollar
Plattform: Windows


Style Master

CSS-Editoren im Praxistest

Wenn Sie das Programm installiert haben, werden Sie sofort nach wichtigen Einstellungen gefragt. Sie haben unter anderem die Möglichkeit, die Autovervollständigung zu aktivieren und zwischen verschiedenen Bedienvarianten zu wählen.

Die Oberfläche von Style Master wirkt aufgeräumt und lässt sich per Drag and Drop anpassen. Ein Herzstück in der Bedienung ist der Properties-Inspektor. Er erlaubt das Zusammenstellen von Stilen. Er kann außerdem immer Werte für die aktuell im Code gewählte CSS-Eigenschaft anzeigen. In Verbindung mit der Code-Info ergibt sich daraus ein sehr komfortables Handwerkszeug für weniger erfahrene Webdesigner. Dazu trägt auch die sehr gute Hilfe inklusive Einstiegs-Tutorial und breit gefächertem Support bei. Herausragend sind die vielen mitgelieferten Vorlagen.

Etwas schwächer schneidet Style Master bei der Code-Bearbeitung ab. Zwar gibt es wichtige Funktionen wie die automatische Formatierung und Syntax-Kontrolle. Dafür fehlen weitere Tests und eine Code-Bereinigung. Beim Suchen und Ersetzen stehen keine regulären Ausdrücke zur Verfügung, und gesucht werden kann nicht in mehreren Dateien gleichzeitig. Nicht überzeugen kann die Performance unter Windows der Palettenaufbau und der Wechsel zwischen Eigenschaften dauern zu lange.

Fazit. Style Master kann sich zwar keinen der vorderen Plätze sichern, schlägt sich aber wacker. Als einziger CSS-Editor im Test eignet er sich auch für den Mac.

Ranking: 80%
Hersteller: Westciv
Preis: 59,99 Dollar
Plattform: Windows, MacOS X


Astyle

CSS-Editoren im Praxistest

Astyle versteht sich als visueller CSS-Editor, bei dem die Stile über Selektoren, Eigenschaften und Werte bearbeitet werden. Kleine grüne Schaltflächen halten die wichtigsten Funktionen bereit. Zuerst müssen Sie zum aktuellen Projekt neue Dateien hinzufügen oder Dateien öffnen. Eine direkte Möglichkeit, neue Dateien zu erstellen, gibt es nicht. Stattdessen verwalten die Tester diese in der Leiste auf der linken Seite, die gleichzeitig mehrere CSS-Dateien anzeigen kann. Die Prüfer sehen dort die verfügbaren Selektoren und haben die Möglichkeit, diese weiter aufzuklappen. Auf der rechten Seite hat der Anwender die Wahl zwischen verschiedenen Bearbeitungsansichten: Er kann von den Selektoren ausgehen, die Eigenschaften oder Werte und den Code direkt bearbeiten. Außerdem ist eine Vorschau im Browser möglich.

Auf den ersten Blick wirken diese Funktionen nicht allzu ungewöhnlich, aber sobald die Autoren etwas Bestimmtes suchen, wird es interessant. Farben verbergen sich unter Values, Colors. Verwendet man dagegen eine Eigenschaft wie color, erhält man nur die Standardfarben in einer Liste.

Aus HTML-Dokumenten extrahiert Astyle auf Wunsch die Inline-Stile. Außerdem kann sich der Editor um die Einrückungen kümmern und zeigt in der Code-Ansicht die Problemstellen an. Allerdings fehlen in manchen Bereichen grundlegende Funktionen wie eine Ersetzen-Funktion.

Fazit. Astyle ist für abenteuerlustige Code-Bastler sicher eine Alternative mit vielen Ideen. Für einen eigenständigen CSS-Editor bietet Astyle zu wenige Funktionen.

Ranking: 59%
Hersteller: Abstact Thought Lab
Preis: 49,95 Dollar
Plattform: Windows


Coffeecup Stylesheet Maker

CSS-Editoren im Praxistest

Stylesheet Maker ist ein absoluter Minimalist. Drei Register mit Dateien, zwei CSS-Code-Schnipsel und ein wenig DHTML-Skripts bilden neben den Symbolleisten und der eigentlichen Code-Ansicht das einzige, was beim Start auf den Nutzer wartet.

Leider ist auch nach einigem Ausprobieren nicht wesentlich mehr Funktionalität zu finden. Vor allem die ganz normalen Code-Funktionen wie Einrücken oder Suchen und Ersetzen sind nicht zu finden. Nach komplexeren Dingen wie automatischer Formatierung oder Autovervollständigung sucht man besser nicht.

Aber auch nahe seiner Wurzeln weiß der Editor nicht zu begeistern. Eine neue CSS-Datei wird automatisch mit style-Blöcken angelegt, und wenn die Tester diese entfernen oder mit einer leeren Seite beginnen, erhalten sie keine farbliche Code-Hervorhebung mehr. Die Tags aus der Tag-Auswahl sind alle nicht XHTML-konform, und Überprüfungen von Syntax oder W3C-Konformität fehlen völlig. Immerhin ist das Zusammenklicken von Stilbefehlen über Symbole und Dialogfelder recht komfortabel möglich.

Dass die Wertung von Stylesheet Maker nicht noch weiter nach unten rutscht, verdankt das Tool seiner passablen Performance und der ordentlichen Hilfe. Der umfangreiche Support auf der Website und die Live-Hilfe wissen dabei wirklich zu überzeugen.

Fazit. Für den doch recht happigen Preis von 34 Dollar kann Coffeecups Tool einfach zu wenig. So bleibt nur der letzte Platz im Test.

Ranking: 45%
Hersteller: Coffeecup
Preis: 34 Dollar
Plattform: Windows


Testsieger

CSS-Editoren im Praxistest

Empfehlung der Redaktion: Topstyle Pro

Topstyle gewinnt diesen Vergleich auf Grund der umfangreichen Funktionspalette, bei der die Tester nie die Orientierung verlieren. Die Bedienung ist intuitiv und der Editor arbeitet schnell. Allerdings ist der Sieg ausgesprochen knapp. Die Nummer zwei, Style Studio, steht Topstyle in Sachen Funktionen kaum nach.

Budget-Empfehlung: Rapid CSS 2006

Für den äußerst günstigen Preis von deutlich unter zwanzig Euro schlägt sich Rapid CSS im Test sehr beachtlich. Funktional ist die Software sogar der Nummer zwei des Testfelds, Style Studio, eine Nasenlänge voraus.