Menü

CSS Editoren CSS-Editoren im Überblick

Spezialisierte CSS-Editoren locken mit einfacher Bedienung und umfangreicher Unterstützung von CSS-Bbefehlen. Dieser Artikel gibt einen Überblick über den Markt.
Matrix Aufmacher

Spezialisierte CSS-Editoren haben viele Vorteile: Sie sind preisgünstig und bringen vor allem einen Produktivitätsgewinn. Anwender erhalten kontextbezoge Hilfe und müssen bei den Werten für CSS-Eigenschaften nicht raten. Außerdem erhalten sie je nach Editor gleich noch eine Kompatibilitätsangabe, in welchen Browsern der CSS-Befehl funktionieren wird.

Nichts davon ersetzt das CSS-Wissen, aber kontextbezogene Hilfen und eine integrierte Referenz machen das Leben des Webdesigners doch wesentlich einfacher.

Das Teilnehmerfeld

Die Mehrzahl der hier vorgestellten Produkte ist kommerzieller Natur. Allerdings haben wir auch einige Freeware-Alternativen mit aufgenommen. Die Preise bewegen sich zwischen 20 und 80 US-Dollar. Das Teilnehmerfeld lässt sich grob in visuelle Editoren (A-Style, CSS Simple) und textbasierte Editoren unterteilen.

Visuell bedeutet, dass man sich die Stilangaben in Registerkarten zusammenklickt. Die textbasierten Editoren stellen dagegen die Code-Eingabe in den Vordergrund.

A-Style

A-Style hat einen ungewöhnlichen Bedienungsansatz: Stile werden über Selektoren, Eigenschaften und Werte visuell bearbeitet. Zuerst müssen Sie zum aktuellen Projekt neue Dateien hinzufügen, beziehungsweise Dateien öffnen. Eine direkte Möglichkeit, per Schaltfläche neue Dateien zu erstellen, gibt es nicht. Stattdessen verwalten Sie sie in der Leiste auf der linken Seite, die gleichzeitig mehrere CSS-Dateien anzeigen kann. Sobald Sie in der Übersicht auf CSS2 theme gehen, wird eine neue Stildatei angelegt.

Sie sehen auf der linken Seite die verfügbaren Selektoren und haben die Möglichkeit, diese weiter aufzuklappen. Auf der rechten Seite haben Sie die Wahl zwischen verschiedenen Bearbeitungsansichten: Sie können von den Selektoren ausgehen, die Eigenschaften oder Werte und den Code direkt bearbeiten. Außerdem ist eine Vorschau im Browser möglich.

Sobald man etwas Bestimmtes sucht, wird es interessant. Beispielsweise verbergen sich die Farben unter Values/Colors. Verwendet man dagegen eine Eigenschaft wie color, erhält man nur die Standardfarben in einer Liste. Jedes Element lässt sich aus der Liste entfernen oder hinzufügen, und Sie haben jederzeit die Möglichkeit, eigene Werte und Eigenschaften zu definieren.

Aus HTML-Dokumenten extrahiert A- Style auf Wunsch die Inline-Stile. Zusätzlich kann es sich um die Einrückungen kümmern und zeigt in der Code-Ansicht Problemstellen auf. Allerdings fehlen in manchen Bereichen grundlegende Funktionen wie beispielsweise Ersetzen.

CSS-Editor

Der CSS-Editor ist Freeware. Seit Version 1.07 ist ein CSS-Parser integriert, der feststellt, welche Selektoren in einem Dokument vorhanden sind. Die Eigenschaften und CSS-Werte sind in eigenen Paletten angeordnet. Hier darf man allerdings nicht den Komfort der umfangreicheren CSS-Boliden erwarten. So werden die Werte beispielsweise nicht kontextabhängig vorsortiert und auch auf eine automatische Vervollständigung muss man verzichten.

Auch bei der Suche hat ein fortgeschrittener Texteditor meist schon mehr zu bieten. Eine Suche mit regulären Ausdrücken und Wildcards sowie eine Suche über mehrere Dokumente hinweg fehlen. Dafür gibt es einen Style-Assistent, der es sehr einfach macht, den passenden Selektor zu finden. Und auch eine CSS-Vorschau ist direkt unten im Fenster erhältlich.

Coffeecup Stylesheet Maker

Als absoluter Minimalist bietet das Tool eine einfache Oberfläche. Drei Register mit Dateien, zwei mit CSS-Code-Schnipseln und ein wenig DHTML-Skripten sind neben den Symbolleisten und der Code-Ansicht alles, was beim Start auf den Nutzer wartet.Leider ist auch nach einigem Ausprobieren nicht wesentlich mehr Funktionalität vorhanden. Vor allem die ganz normalen Code-Funktionen wie Einrücken und Suchen & Ersetzen sind nicht zu finden. Nach Dingen wie automatischer Formatierung oder Autovervollständigung sucht man besser nicht. Auch bei den Funktionen kann der Editor nicht begeistern.

Eine neue CSS-Datei wird automatisch mit style-Blöcken angelegt. Entfernt man diese oder beginnt mit einer leeren Seite, erhält man 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 die Symbole und entsprechende Dialogfelder recht komfortabel möglich.

Enginsite CSS Editor

Enginsite versteht sich als reiner CSS-Editor. Er kann zwar CSS aus HTML-Dateien extrahieren oder dort einbauen, nicht aber direkt HTML bearbeiten. Die großen Stärken liegen in der aufgeräumten Oberfläche und in den vielen Funktionen. Die Paletten sind klar gegliedert. Hat der Webdesigner einen bestimmten Befehl im Code ausgewählt, erhält er dazu nicht nur in einem Eigenschaften- Editor die entsprechenden Werte, sondern auch gleich noch Referenz-Informationen. Der Eigenschaften-Editor lässt sich nach Themengebieten, rein alphabetisch und hierarchisch verwenden.

Bei der Code-Bearbeitung glänzt Enginsite mit automatischen Einrückungen auch für einzelne CSS-Selektoren. Auch eine Vorschau gibt es ausschließlich begrenzt auf einen CSS-Selektor.

Rapid CSS 2008

Zu den Highlights von Rapid CSS gehört eine Projektverwaltung, die beispielsweise 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 englischer Sprache einfach zu verstehen. Kleinere Bedienschwächen offenbart Rapid CSS bei Details wie etwa der Farbwahl.

In der Code-Bearbeitung bietet Rapid CSS einen Code Explorer, der die einzelnen Selektoren übersichtlich zeigt. Der Inspector auf der anderen Seite erlaubt es, Einstellungen vorzunehmen. Im Code hilft die etwas langsame Autovervollständigung.

In Sachen Hilfe bietet Rapid CSS sowohl eine Kontext-bezogene Variante als auch eine echte Hilfe. Leider ist die Programmhilfe nicht allzu umfangreich. Die Referenzen sind zwar vollständig, aber die HTML-Referenz ist noch auf dem Stand 4.0 mit Tags in Großbuchstaben. Im Programm selbst sind die Stilbefehle auf dem neuesten Stand.

weiterlesen auf Seite 2
 
Whitepaper Lexware-Logo
Content-Revolution Wie Sie professionelles Content-Marketing betreiben.
Haptik-Effekt Im Einsatz im multisensorischen Marketing.
x