Vorheriger Artikel Nächster Artikel

Emmet LiveStyle: CSS simultan im Editor und Browser bearbeiten

Mittlerweile gibt es einige Tools, um CSS-Änderungen im Editor direkt im 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.

Emmet LiveStyle: CSS simultan im Editor und Browser bearbeiten

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 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“

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
5 Antworten
  1. von Katharina am 14.08.2013 (08:35Uhr)

    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 Teilen
  2. von Eric Eggert am 14.08.2013 (09:10Uhr)

    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 Teilen
  3. von Heiko am 14.08.2013 (10:03Uhr)

    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 Teilen
  4. von seb am 14.08.2013 (10:33Uhr)

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

    Antworten Teilen
  5. von uli am 14.08.2013 (11:02Uhr)

    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 Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema CSS
Modular und hackbar: Wie du den Open-Source-Browser Breach individuell anpassen kannst
Modular und hackbar: Wie du den Open-Source-Browser Breach individuell anpassen kannst

Mit Breach gibt es einen neuen Open-Source-Browser, dessen Oberfläche vollständig in JavaScript geschrieben wurde. Dank der modularen Natur des Browsers soll sich das Interface per JavaScript und … » weiterlesen

Hover.css: 50 Hover-Effekte für deine Webseite
Hover.css: 50 Hover-Effekte für deine Webseite

Hover.css bietet dir eine Sammlung von Hover-Effekten, die du auf verschiedene Elemente deiner Website anwenden kannst. Heute stellen wir dir diese kleine, aber feine CSS-Bibliothek kurz vor. » weiterlesen

CSS-Regions vor dem Aus: Google und Opera stellen sich gegen die Adobe-Technik
CSS-Regions vor dem Aus: Google und Opera stellen sich gegen die Adobe-Technik

Google- und Opera-Entwickler sehen keine Zukunft für CSS-Regions in der Blink-Engine. Bei Google sieht man in der Unterstützung vor allem ein Performance-Hindernis. » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n-Newsletter t3n-Newsletter
Top-Themen der Woche für Web-Pioniere
Jetzt kostenlos
anmelden
Diesen Hinweis verbergen