11 Top-CSS-Editoren - Überarbeitet

1. Stylizer

Kompatibilität: WindowsBemerkenswerte Funktion: Code-Raster, Größengriffe, Bullauge, Zwei-Klick-Farbgebung

Stylizer ist ein absolut einzigartiger CSS-Editor, auf den der Fokus liegt Echtzeit-CSS-Bearbeitung. Sie können einfach eine Webadresse in den integrierten Browser eingeben, der die Stildefinition von Firefox 3.5 und IE7 unterstützt, und alle zugehörigen CSS-Regeln müssten mit der bekannten Point-and-Click-Oberfläche bearbeitet werden.

Der Editor kommt mit einem Code-Raster Diese Funktion erleichtert die CSS-Bearbeitung, da Sie das Ergebnis unmittelbar nach dem Ändern eines Werts anzeigen können. Auch mit seiner Diagnose Bullseye Mit dieser Funktion können Sie verknüpfte Elemente an bestimmten Stellen der Website anzeigen und mit Punkten und Klicks bearbeiten. Andere Funktionen wie Größe Griffe ermöglicht die visuelle Anpassung der Position eines CSS-Elements und mit Klicken Sie zwei Mal auf Farbe Sie erhalten einen Photoshop-ähnlichen Farbwähler, mit dem Sie beispielsweise eine beliebige Farbe für Ihre Site-Schriftart auswählen können. Habe ich schon erwähnt, dass alle diese Änderungen in Echtzeit durchgeführt werden und sofort einsehbar sind?

Mit Stylizer Es ist lediglich unmöglich, einen CSS-Fehler zu machen, da Sie sonst einen Wert eingeben müssen, der nicht mit der entsprechenden CSS-Eigenschaft kompatibel ist. Es ist jedoch möglich, dass die Software bestimmte CSS-Dateien aufgrund ihres unerklärlichen kritischen Fehlers manchmal nicht lädt.

Stylizer kommt mit Basic und Ultimate Version. Während die Basic-Version völlig kostenlos ist, steht Ihnen die Ultimate-Version nach der Installation 14 Tage lang zur Verfügung. Sie bietet dann 85 US-Dollar an, um die erweiterten Funktionen wie Bullseye nutzen zu können.

2. TopStyle

Kompatibilität: WindowsBemerkenswerte Funktion: Style Inspector, Style Sweeper, CSS Tidy

Der CSS-Editor von TopStyle überrascht Sie bei der erstmaligen Konfiguration, wenn Sie eine Stildefinition auswählen können, die nur Eigenschaften und Werte anzeigt, die von Firefox, Internet Explorer, Safari oder sogar iPhone OS 2.0 unterstützt werden. Dies ist praktisch für plattformübergreifende Funktionen Webdesigner.

Unter allen Funktionen, die ich gefunden habe Style Inspector ist besonders nützlich, da es als Bedienfeld dient, damit Sie beliebige CSS-Eigenschaften mit einer einfachen Point-and-Click-Schnittstelle einfügen können. Wenn Sie alle gewünschten CSS-Eigenschaften ausgewählt haben, wird der Quellcode automatisch generiert, damit Sie Zeit für wiederholtes und ermüdendes Codieren sparen.

Noch ein gutes Zeug TopStyle Ist die Browser-Kompatibilität unter dem Style-Inspector zu sehen, können Sie feststellen, dass entweder die CSS-Eigenschaft von bestimmten Browserversionen wie Internet Explorer 7 vollständig unterstützt wird oder dass sie sehr fehlerhaft ist.

Der Editor ist als Testversion mit eingeschränktem Funktionsumfang erhältlich, und Sie können sein gesamtes Potenzial mit 79,95 $ ausschöpfen.

3. Style Master

Kompatibilität: Windows, Mac OS XBemerkenswerte Funktion: Stylesheet-Vorlage

Beherrscht als Meister, hat Style Master ziemlich gut daran gearbeitet, eine CSS-Bearbeitungsumgebung für jedes Niveau von Expertise zu erstellen. Die Software bietet nicht nur einen WYSIWYG-Editor, der den Workflow für CSS-Anfänger glättet, sondern gewährt Ihnen auch den Zugriff auf die sehr detaillierten Informationen zu jeder CSS-Eigenschaft, die von Experten verwendet werden können. Sie können die CSS-Eigenschaften nach Kategorie oder alphabetischer Reihenfolge durchsuchen und auswählen.

Der vielleicht einzigartigste Punkt ist, dass der Editor selbst fast 20 nützliche Stylesheet-Vorlagen für Sie enthält, und es überrascht nicht, dass ein Style-Master sehr saubere, übersichtliche und professionelle CSS-Regeln in seiner integrierten Vorlage definiert.

Sie können die voll funktionsfähige Software 30 Tage lang nutzen und entweder 59,99 $ oder 29,99 $ für die Bildungslizenz bezahlen, um wieder ihr volles Potenzial zu entfalten.

4. Xyle Scope

Kompatibilität: MacBemerkenswerte Funktion: Auswahlmodus, Smart Group, Texteditor-Integration

Xyle Scope ist ein Kostenloser CSS-Editor für Mac, Es ist ein wirklich professioneller CSS-Editor, mit dem Sie auf der Website surfen können, während Sie das CSS direkt im Editor anpassen.

Xyles Browser Es verfügt über einen normalen Browsermodus und einen Auswahlmodus, der dem Firefox-Plugin sehr ähnlich ist. Firebug bietet die Anzeige und Bearbeitung der CSS-Quelle, mit der Ausnahme, dass der Editor es Ihnen ermöglicht, geänderte CSS-Werte an ihrem ursprünglichen Ort zu speichern.

Verwendung der 'Smart Group'Feature, Sie können alle Regeln herausfiltern, die Einfluss auf die Art und Weise haben, wie Links angezeigt werden oder die Verantwortlichen für das Layout. Sie können das Ergebnis sogar mit der integrierten Suchfunktion einschränken, keine Trial-and-Error-Methode!

Xyle Scope Bieten Sie auch die Integration mit externen Texteditoren wie BBEdit für eine komfortablere und energiesparende Codierungsarbeit. Nehmen Sie einfach eine Änderung vor, und entweder der Texteditor oder Xyle Scope würde alle Änderungen automatisch für Sie aktualisieren.

5. Rapid CSS

Kompatibilität: WindowsBemerkenswerte Funktion: Syntax-Textmarker, Code-Vervollständigung, CSS-Formatierung

Rapid CSS ist der Weg für eine komfortablere, komfortable und komplexe Bearbeitung von CSS. Es verfügt über einen eigenen, vollständig anpassbaren Texteditor mit hilfreichen Funktionen wie Syntaxhervorhebung, Code-Vervollständigung und integrierter CSS-Referenz für ein problemloses Codieren.

Um auf die Sauberkeit Ihres CSS zu achten, können Sie Ihr CSS-Stylesheet formatieren, z. B. nach CSS-Typ neu anordnen oder Kurzschreibungseigenschaften erstellen, um das Stylesheet komfortabler und ansprechender zu gestalten. Der integrierte Code-Validator gewährleistet auch, dass Ihr Stylesheet nicht nur sauber, sondern auch gültig ist.

Der Editor verfügt über eine 30-tägige Testphase mit 30 Verwendungen. Sie können die Vollversion um 29,85 $ erwerben.

6. Style Studio

Kompatibilität: WindowsBemerkenswerte Funktion: CSS-Assistent, IntelliStyle

Die Hauptschönheit von Style Studio liegt in seiner CSS-Assistentenfunktion, mit der Sie mit wenigen Punkten und Klicks sofort CSS-Effekte erzielen können.

Sie können zum Beispiel einen Schriftarten-Assistenten auswählen, dann eine Schriftfamilie auswählen und eine Schriftgröße festlegen, dann Schriftstil, Gewichtung, Variante und Boom! Regeln werden als vollständig validierter CSS-Code in das Stylesheet eingefügt.

Zu den Assistentenfunktionen gehören auch Farbe, Rahmen, Text, Positionierung, Klassifizierung und schließlich Filterregeln. Sie können so ziemlich alles, was Sie sich von CSS vorstellen können. Diese Assistenten sind sehr nützlich, da Sie nicht wiederholt eingeben müssen, um einen komplizierten CSS-Effekt zu erzielen. Eine weitere edle Funktion ist IntelliStyle, die wie Code-Vervollständigung für die Auswahl bestimmter CSS-Eigenschaften für Ihren Entwurfszweck dient.

Der Nachteil dieses Editors wäre die Unterstützung für die Stildefinition seines veralteten Browsers, da er nur bis zu IE6 und natürlich keinen Firefox unterstützt.

Sie haben 30 Tage Zeit, um die Software zu nutzen, und $ 49,99 für den Kauf.

7. CSSEdit

Kompatibilität: MacBemerkenswerte Funktion: Röntgeninspektor, visueller Editor, Selector Builder

Entwerfen Sie wunderschöne, innovative und schnell ladende Websites mit einer schönen, innovativen und schnellen App, die von CSSEdit von empfohlen wird MacRabbit. CSSEdit bietet Funktionen wie Selector Builder bis hin zur intelligenten Quellumgebung und ist für jedes Fachwissen ausgelegt.

Mit dem hochentwickelten Editor wie diesem werden Änderungen in CSS-Stylesheets in Echtzeit angezeigt, ohne dass die Aktion zum Hochladen und Aktualisieren erhöht wird. Der Röntgeninspektor wird auch als Funktion zur Diagnose von CSS-Code von einem bestimmten Teil der Website erstellt.

Der innovative Teil der CSSEdit ist wahrscheinlich sein Selector Builder So können Sie Ihren CSS-Stil mit einfachem Englisch beschreiben, was für einen Experten nicht besonders interessant ist, aber für absolute Anfänger nützlich ist.

Die Demoversion beschränkt Sie auf das Speichern von Dateien mit weniger als 2500 Zeichen, während Sie für die Beseitigung aller Einschränkungen $ 39,95 bezahlen können.

8. EngInSite CSS Editor

Kompatibilität: WindowsBemerkenswerte Funktion: Messwerkzeug im Vorschaumodus

Wenn Sie ein seriöser Designer sind und sich für die korrekte CSS-Spezifikation, die richtige CSS-Platzierung oder das CSS-Stylesheet interessieren, muss der EngInSite-CSS-Editor Ihr bevorzugter Editor sein.

In diesem Editor können Sie mithilfe des integrierten Inspektors Klassen-, ID- und Element-Selektoren hinzufügen. Außerdem können Sie die Farbe in einen Hex- oder RGB-Wert konvertieren, was für einen CSS-Editor eine sehr seltene Funktion ist. Sie können Ihr Ergebnis im Vorschaubereich mit Messwerkzeugen anzeigen, um sicherzustellen, dass sich jedes Konstruktionselement an der richtigen Position befindet.

Der Editor kommt auch mit Code-Vervollständigung, aber er ist ein bisschen fehlerhaft. Ich würde sagen, er ist halb Code-Vervollständigung. Ansonsten ist der gesamte Editor schön zu verwenden, außer der Tatsache, dass der Editor in Bezug auf die Unterstützung der Browser-Stildefinition ziemlich veraltet ist, da er nur bis zur IE6-Stildefinition unterstützt.

9. Stylesheet Maker

Kompatibilität: WindowsBemerkenswerte Funktion: CSS-Tags

Stylesheet Maker ist ein weiterer Standard-CSS-Editor, der eine saubere Codierungsoberfläche mit dem Datei-Explorer-Bedienfeld und einige nützliche CSS-Tools zum Einstellen von Schriftart, Farbe, Rand, Rand usw. bietet.

Im Vergleich zu mehreren CSS-Editoren wie Rapid CSS oder Style Studio, Der Maker hat weniger Funktionen und dennoch ein sehr sauberes Interface, und dies ist gut für bestimmte Anfänger, die nichts kompliziertes machen wollen, oder CSS-Ninja, die alles minimal und komfortabel haben möchten.

Obwohl dieser Editor für fortgeschrittene Benutzer gedacht ist, können Sie mit der Funktion CSS-Tags ganz einfach eine CSS-Regel mit Tags durch Klicken erstellen.

Es kostet 34 Dollar, diesen Editor zu besitzen, oder Sie können ihn zusammen mit anderer CoffeeCup-Software als Bundle erwerben.

10. Arduo CSS

Kompatibilität: WindowsBemerkenswerte Funktion: Knoten, CSSTidy

Arduo CSS ist ein neuer CSS-Editor, der Sie mit seiner intuitiven und benutzerfreundlichen Benutzeroberfläche erfreuen möchte. Dank der sauberen Benutzeroberfläche und der Syntax-Hervorhebung können Sie eine CSS-Datei ohne zu viele Probleme und Unterbrechungen erstellen und bearbeiten. Sie können auch die 'Node'-Funktion verwenden, um CSS-Regeln durch Punkte und Klicks zu definieren.

Für diejenigen, die glauben, dass Ihr Stylesheet viel zu schwer ist, kann das CSSTidy-Tool aus dem Editor Ihnen helfen, das Stylesheet zu optimieren und unnötigen Code zu löschen.

Der Herausgeber ist auf seiner offiziellen Website frei verfügbar.

11. Einfaches CSS

Kompatibilität: Windows, Mac OS XBemerkenswerte Funktion: CSS-Dateiimport, Point-and-Click-Schnittstelle, Zusätzliche Zeichensatzdatenbank

Genau wie der Name hat Simple CSS alles, was ein Designer für die einfache Bearbeitung von CSS benötigt. Sie können eine CSS-Datei in den Editor importieren und mit wenigen Klicks modifizieren, das Ergebnis im Vorschaufenster auschecken und den Quellcode sofort herausnehmen.

Obwohl Sie fast jede CSS-Datei in den Editor importieren können, können Sie mit einem Klick nur eine CSS-Regel auf einmal anzeigen. Manchmal führt der Import aufgrund seiner Einschränkung zu Fehlern wie keine @rules-Unterstützung. Der Editor selbst ist nicht so flexibel, dass Sie für die Z-Index-Eigenschaft nur 'Auto' oder 'Inherit' auswählen können, der Eigenschaft jedoch nicht direkt ein Wert zugewiesen wird.

Es ist jedoch kostenlos und ziemlich praktisch für Designer, die eine schnelle Lösung benötigen.

Bonus: Weitere Editoren und Tools

Die folgenden Tools sind zwar keine exakten CSS-Editoren, aber Sie sollten diese Funktion bei der Bearbeitung von CSS haben.

Feuerbock

Das populärste und leistungsfähigste Web-Entwicklungstool, das HTML untersucht, den CSS-Stil ändert und die Änderungen in Echtzeit anzeigt. Es ist als Plugin für den Firefox-Webbrowser verfügbar.

CSS-Verwendung

Eine Erweiterung für Firebug, mit der Sie mehrere Seiten Ihrer Website scannen können, um festzustellen, welche CSS-Regeln tatsächlich auf Ihrer Website verwendet werden.

Web-Entwickler

Eine Firefox-Erweiterung, mit der Sie viele coole Dinge tun können, z. B. CSS-Quellen anzeigen oder bestimmte CSS-Stylesheets für Design oder Entwicklung deaktivieren.

Notizblock++

Ein kostenloser Quellcode-Editor und Notepad-Ersatz, der mehrere Sprachen einschließlich CSS unterstützt. Enthält Funktionen wie Funktionsergänzung, um das CSS-Design zu erstellen.

Koda

Ein fortschrittlicher Texteditor mit integriertem CSS-Editor, der Ihnen zwei CSS-Bearbeitungsmodi für flexiblere Entwurfserfahrung bietet, und das Ergebnis sofort nach vorgenommenen Änderungen sehen kann.

NetBeans IDE

Eine Open-Source- und professionelle integrierte Entwicklungsumgebung mit der vollständigsten CSS-Referenz in der Code-Vervollständigungsfunktion.

Aptana Studio

Eine vollständige Webentwicklungsumgebung, die leistungsstarke Authoring-Tools für HTML, CSS und JavaScript kombiniert, unterstützt derzeit HTML5 und CSS3.

WebStorm

Die JetBrain-IDE, die relevante automatische Vervollständigung für alles implementiert, einschließlich CSS, und Sie können auch über CSS-Probleme im laufenden Betrieb informiert werden.