Style Injection ist für Gewinner

Mit „Style Injection“ meine ich, dass man Styling-Änderungen sofort nach dem Erstellen sehen kann, ohne sein Browserfenster manuell aktualisieren zu müssen. Das ist kein brandneues Konzept, ich erwähne es jetzt, weil es so großartig ist, dass man seinen Workflow überdenken sollte, wenn es noch kein Teil davon ist.

Die Vergangenheit

Lange Zeit hatte Dreamweaver die Möglichkeit, eine Live-Vorschau dessen anzuzeigen, was man gerade erstellte. CSS Edit hatte auch etwas Ähnliches. Jetzt ist das in Espresso integriert und auf den ersten Blick sah ich, dass es immer noch Vorschauen anbietet, aber keine geteilten Vorschauen mit Bearbeitungsoptionen.

Aber sie nutzten dafür eine integrierte WebKit-Funktion, die wer weiß welche Version verwendet. Ich mache mein Testing gerne in Browsern, die die Leute auch benutzen. Und außerdem funktionieren diese nicht gut, wenn man CSS vorverarbeitet.

Keine Beleidigung, wenn Sie diese Editoren oder Arbeitsweisen verwenden, es ist nur nichts für mich.

Neuer Stil

Das Erste, das mir bekannt wurde, war LiveReload. Über Browser-Erweiterungen werden Änderungen automatisch eingefügt, sobald Sie Dateien speichern.

Der Name „LiveReload“ impliziert, dass es die Seite für Sie neu lädt, was bei Änderungen an HTML oder JavaScript stimmt. Selbst das ist praktisch, da es das Wechseln zwischen Anwendungen und das manuelle Aktualisieren der Seite erspart. Aber wenn Sie CSS ändern (egal ob vorverarbeitet oder nicht), werden die Stile „injiziert“, d. h. sie werden auf der Seite wirksam, ohne dass ein Neuladen erforderlich ist.

Ich bin ein Fan von CodeKit, das dies nun auch schon seit geraumer Zeit tut. CodeKit funktioniert auf diese Weise nur mit Safari und Chrome, aber automatisch, ohne Browser-Erweiterungen.

Wenn Sie bereit sind, ein Skript-Tag auf Ihrer Seite einzufügen, funktioniert LiveReload in Chrome, Safari, Firefox, Mobile Safari und Opera (mit etwas Aufwand). Ohne das Skript-Tag können Sie es in Safari, Chrome und Firefox zum Laufen bringen.

Mixture wird ebenfalls Live-Updates bieten, aber ich habe noch nicht genau untersucht, wie sie das machen. Yeoman bietet ein Neuladen, aber kein Injizieren. Es ist Open Source, also könnte vielleicht jemand das hinzufügen =).

Warum ist Style Injection cool?

Da die Seite nicht neu geladen wird, können Sie die Seite stylen, ohne ihren Zustand zu beeinträchtigen. Nehmen wir an, es öffnet sich ein Dialogfeld, wenn Sie klicken, und Sie möchten dieses Dialogfeld stylen. Wenn Sie eine Anwendung verwenden, die Style Injection durchführt, können Sie dieses Dialogfeld im Browser geöffnet lassen und CSS erstellen, das es ändert, und diese Änderungen sofort beobachten, ohne den Browser neu laden und den Zustand verlieren zu müssen. Nicht alle Zustände haben eine URL-Änderung, die mit ihnen verbunden ist. Ein Dialogfeld ist ein häufiges Beispiel dafür.

Hier ist ein Beispiel dafür

Dies wird nützlicher, je komplexer der Zustand ist. Stellen Sie sich vor, Sie versuchen, einen Rollover eines benutzerdefinierten Dropdowns zu stylen, der in einem standardmäßig geschlossenen Panel erscheint. Das sind viele Schritte, um diesen Zustand für jede kleine Styling-Änderung zu reproduzieren.

Bildschirmeinrichtung

Ich liebe es, Divvy zu verwenden, um meinen Code-Editor blitzschnell nach rechts zu schieben und den Browser nach links, und sofort mit der Arbeit zu beginnen. Ich habe Divvy so eingestellt, dass es nur linke und rechte Felder gibt, kein komplexes Raster.

Zur Information

CodePen bietet Live-Updates während der Eingabe sowie einen Live View-Modus. Ziemlich cool und nützlich, finde ich, aber CodePen ist noch nicht wirklich für Ihren tatsächlichen Webentwicklungs-Workflow geeignet.