Rezensionen von Mac CSS Editoren

Es gibt einige sehr gute Programme zur Erstellung und Bearbeitung von CSS-Dateien. Da ich hauptsächlich ein Mac-Benutzer bin, konzentriert sich diese Rezension auf Mac, aber ich würde mich freuen, von Windows CSS-Editoren zu hören, wenn jemand etwas zu teilen hat. Es geht schließlich um das beste Werkzeug für die jeweilige Aufgabe.

Xyle Scope

Erhältlich bei Cultured Code für 19,95 $.

Xyle Scope verfolgt den Ansatz eines komplett visuellen CSS-Editors. Im Wesentlichen ist es ein Webbrowser, mit dem Sie Elemente direkt auf der Seite auswählen können. Die Seitenleiste des Fensters "bohrt" sich in die HTML- und CSS-Struktur des ausgewählten Elements ein und zeigt diese an. Sie können Bearbeitungen "on the fly" vornehmen und deren Auswirkungen sehen. Dies ist eine sehr mächtige Funktion und ein großartiges Werkzeug zur Fehlerbehebung bei kaputten Layouts. Tatsächlich ist Xyle Scope mein bevorzugtes Werkzeug für schnelle Fehlersuche geworden.

Xyle Scope hat ein paar Schwächen. Erstens ist es nicht wirklich ein "CSS-Editor". Es gibt keine traditionelle "Code-Ansicht" und keine Möglichkeit, bearbeitetes CSS von einer nicht-lokalen Seite zu speichern. Das macht es mehr zu einem Fehlerbehebungswerkzeug als zu einem vollwertigen Editor. Ich denke, das war irgendwie beabsichtigt, daher "Scope". Die andere Schwäche ist, dass es im Grunde Safari in Bezug auf die Webdarstellung ist. Daher ist die Fehlerbehebung im Grunde auf einen bereits guten Browser beschränkt. Selbst wenn Sie Änderungen vornehmen und dann in einem anderen Browser "Vorschau" anzeigen, bleiben diese Änderungen nicht erhalten, sodass es eher sinnlos ist.

CSS Edit

Erhältlich im MacRabbit Store für 29,95 $.

Die größte Stärke von CSS Edit ist, dass es wirklich ein vollwertiger, funktionsreicher CSS-Editing-Kraftprotz ist. Das Bearbeitungsfenster ist das beste überhaupt und verfügt über eine linke Seitenleiste mit all Ihren Selektoren, einen mittleren Bereich für die "Code"-Ansicht und eine rechte Seitenleiste mit einem super einfach zu bedienenden Editor, bei dem man per Klick auf Schaltflächen bearbeitet.

Die Kombination all dieser Elemente in einem einzigen Editorfenster ist ein großartiger Schritt. Ich mag die vereinfachten Editoren nicht wirklich, wenn ich nicht sehen kann, was tatsächlich mit dem Code passiert.

CSS Edit ist absolut vollgepackt mit coolen Funktionen wie integrierter Code-Validierung, einfachem Kommentieren, "Gruppieren" von Selektoren, Suchen und Milestones-Management. Aber was CSS Edit meiner Meinung nach großartig macht, sind zwei Hauptfunktionen. Override und Extract.

Mit Override können Sie jede Webseite besuchen und mit dem CSS direkt auf dieser Seite experimentieren und die Auswirkungen sehen. Dies kann auf Ihren eigenen Websites nützlich sein, um einige Anpassungen vorzunehmen und Wege zu finden, Ihre Website besser aussehen zu lassen, oder auf Websites anderer Leute verwendet werden, um deren Vorgehensweisen zu verstehen und Anpassungen vorzunehmen. Override ist auch besonders leistungsfähig, da es Ihnen ermöglicht, Änderungen am CSS vorzunehmen, die dynamische Inhalte beeinflussen, ohne "komplett neu" arbeiten zu müssen.

Extract ist ähnlich, es ermöglicht Ihnen, das CSS buchstäblich von jeder Seite im Internet herunterzureißen. Sie können es dann speichern und beliebig verwenden. Es ist irgendwie lustig darüber nachzudenken. Es fühlt sich an, als könnte es eine Urheberrechtsverletzung sein, aber ich glaube nicht, dass es so ist, solange Sie keine Bilder mitstehlen. Dies ist eine fantastische Möglichkeit, die Techniken anderer Leute zu analysieren und sie auf Ihre eigenen Websites anzuwenden. Keine andere Software macht das "Extrahieren" von CSS so einfach.

Die größte Schwäche von CSS Edit ist, dass es ein vollwertiger, funktionsreicher CSS-Editing-Kraftprotz ist. Wenn Sie bereits wissen, was Sie tun, ist eine große, schwere Anwendung manchmal nicht das, was Sie wollen. Persönlich ist CSS Edit für mich zu viel, und ich benutze es hauptsächlich zum Extrahieren, zum Kennenlernen von wirklich fremdem CSS und manchmal nur zum Spaß =).

Firefox mit Firebug

Erhältlich KOSTENLOS von Joe Hewitt.

Firebug ist eine Firefox-Erweiterung, keine eigenständige Software. Es installiert ein kleines Symbol in der unteren Leiste Ihres Browserfensters, das sich im Grunde in einem von zwei Zuständen befindet. Ein kleines grünes Häkchen, wenn die angezeigte Seite in Ordnung ist, oder ein rotes X, wenn Probleme mit der Website bestehen. Ein Klick auf das Symbol öffnet den Editorbereich.

Als "nur eine Firefox-Erweiterung" ist Firebug extrem leistungsfähig. Ähnlich wie bei den vorherigen Programmen können Sie in den "Inspizieren"-Modus wechseln, mit dem Sie mit der Maus über Seitenelemente fahren und deren HTML und CSS anzeigen können. Sie können ENTWEDER das CSS oder das HTML "on the fly" bearbeiten und die Auswirkungen auf der Seite sehen. Sie können den Code entweder in einer Dropdown-Ansicht mit kleinen Pfeilen zum Öffnen und Schließen von Abschnitten oder im Rohformat anzeigen. Sie können das CSS sogar im "Layout"-Modus anzeigen, um den Abstand, den Rand, den Rahmen und die Polsterung sowie die Größe jedes Elements zu sehen. Ich finde Firebug erstaunlich leistungsfähig und praktisch, da Sie nie Ihren Webbrowser verlassen müssen.

Firebug teilt einige Schwächen mit Xyle Scope. Es ist in seiner Vorschaukapazität eingeschränkt, da es nur in Firefox läuft. Sie können Ihre Änderungen nicht speichern. Aus diesen Gründen ist Firebug eher ein Fehlerbehebungswerkzeug als ein tatsächlicher Editor. Aufgrund der zusätzlichen Funktionen von Firebug wie DOM-Analyse, JavaScript-Fehlern und Validierung ist Firebug jedoch mein bevorzugtes Fehlerbehebungswerkzeug.

Coda

Coda ist erhältlich bei Panic für 79 $.

Coda ist der Neuling und meiner Meinung nach der "Big Daddy" der Webentwicklung. Coda verfügt über einen integrierten CSS-Editor, der dem von CSS Edit ähnelt, mit dem Selektorenbereich und dem "Per Klick auf Schaltflächen bearbeiten"-Bereich. Es gibt keine geteilte Ansicht, um den Code gleichzeitig zu betrachten, aber es ist sehr einfach, zwischen der CSS-Ansicht und der Bearbeitungsansicht hin und her zu wechseln.

Coda bietet eine schöne Code-Hervorhebung wie der Mac-Favorit Texteditor TextMate. Es verfügt auch über einen integrierten Vorschau-Bereich, um die Ergebnisse Ihrer Änderungen sofort zu sehen. Das passt mir sehr gut, denn meine bevorzugte CSS-Bearbeitungstechnik ist es, den Code in einem regulären Texteditor anzusehen und zu bearbeiten, ihn zu speichern und die Änderungen zu sehen. Was Coda jedoch wirklich glänzen lässt, ist alles andere, was es kann. Es ist ein erstaunlicher FTP-Client mit der Möglichkeit, Ihre Websites auf sehr visuell ansprechende Weise zu speichern. Das geteilte FTP/Bearbeitungsfenster war ein genialer Schachzug und die Zukunft der Webentwicklung. Es verfügt über ein integriertes Terminalprogramm für den Shell-Zugriff auf Ihre Server. Zu guter Letzt sind Referenzhandbücher für HTML, CSS, JavaScript und PHP integriert, um schnelle Nachschlagevorgänge zu ermöglichen.

Coda ist wunderschön gestaltet, unglaublich anpassungsfähig und verstellbar. Aus all diesen Gründen verbringe ich 90 % meiner Codierungszeit mit Coda. Hut ab vor Panic für dieses herausragende Produkt.