Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Emmet LiveStyle: CSS simultan im Editor und Browser bearbeiten

    Emmet LiveStyle: CSS simultan im Editor und Browser bearbeiten

Mittlerweile gibt es einige Tools, um CSS-Änderungen im Editor direkt im Browser zu sehen: Sie lesen CSS-Dateien neu ein, sobald sie abgespeichert werden. Emmet LiveStyle beschleunigt das jetzt und aktualisiert schon beim Tippen. Wir haben uns die Beta angesehen.

Als Alternative zu LiveReload, CodeKit oder Grunt tasks übernimmt Emmet LiveStyle nicht nur Daten, die im Editor eingegeben werden, sondern auch noch die Übernahme von Änderungen im Web-Inspector direkt in die CSS-Datei: ein Element auf der Website auswählen, das CSS direkt im Browser bearbeiten – und die Änderung erscheint sofort im Editor.

Das funktioniert auch auf Live-Seiten mit komprimiertem und minifiziertem CSS, da wirklich nur die Änderungen übertragen werden. Ändert man die Hintergrundfarbe des Elements auf rot, erscheint auch nur diese Änderung im Editor beziehungsweise im Web-Inspector. Das bedeutet, dass im Web-Inspector minifiziertes CSS auf der Produktionswebsite geöffnet werden kann und im Editor die nicht-minifizierte CSS-Datei zuwiesen wird.

Ebenso unterstützt LiveStyle mehrere parallel geöffnete Fenster in verschiedenen Größen, um responsive Websites zu bearbeiten, wie im Video zu sehen ist. Der Clip zeigt zwar ein Beispiel mit SCSS, aber durch die Komplexität durch Mixins, Funktionen und Variablen ist die Unterstützung von Präprozessoren nicht so einfach. Falls LiveStyle profitabel wird, will der Autor aber untersuchen, was noch möglich ist.

Welche Browser und Editoren können mit Emmet LiveStyle benutzt werden?

Im Moment unterstützt Emmet LiveStyle Google Chrome und – wenn auch komplexer in der Installation – Webkit/Safari, was unabdingbar ist, um Websites auf iOS zu untersuchen. Als Editor wird in der Beta-Phase zunächst ausschließlich Sublime Text unterstützt, andere Editoren mit JavaScript-Schnittstellen sollen aber auch hinzukommen.

Nach der Beta-Phase wird LiveStyle übrigens kostenpflichtig sein – es jetzt auszuprobieren, lohnt sich also.

Weiterführende Links zum Thema „Responsive Web Design“

Finde einen Job, den du liebst zum Thema Webdesign, Webentwickler

5 Reaktionen
uli
uli

cssXfire übernimmt das unter Windows, Mac und Linux für alle JetBrains Entwicklungsumgebungen (PHPStorm, IntelliJ, ...)
Änderung in Firebug --> wird in IDE übernommen. Gibt neben Firefox auch eine Version für Google Chrome

Antworten
seb
seb

@Katharina: gerade ausprobiert; funktioniert auch unter Windows. Super Tool :)

Antworten
Heiko
Heiko

Habe es vor einer Weile schon ausprobiert, jedoch bringt mir das ganze nicht viel bei der Verwendung von kompilierten LESS-Dateien. Wenn es dafür auch noch eine Lösung gäbe wäre es wieder Interessant. :)

Antworten
Eric Eggert

Hallo Katharina,

ich habe es selbst nicht ausprobiert, aber da Sublime Text und Chrome beide für Windows verfügbar sind, stehen die Chancen wahrscheinlich nicht ganz schlecht, dass es funktioniert. Auf der offiziellen Website konnte ich leider keine Informationen darüber finden.

Gruß, Eric

Antworten
Katharina
Katharina

Gibts da denn auch ein Tool für Windows? Die sehen auf den ersten Blick alle so aus, als wären sie nur für Mac OS. Habe auf der Arbeit (leider) nur einen Windowsrechner ...

Liebe Grüße,
Katharina

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen