Drücke die Tasten ◄ ► für weitere Artikel  

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.

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

40 Shares bis jetzt – Dankeschön!

Bewerten
VN:F [1.9.22_1171]
8 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

  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

  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. :)

  4. von seb am 14.08.2013 (10:33Uhr)

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

  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

  6. von Emmet LiveStyle: CSS simultan im Editor… am 17.08.2013 (12:11Uhr)

    […] 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.  […]

  7. von Typesetwith.me: So prüfst du Typografie… am 21.08.2013 (14:26Uhr)

    […] Emmet LiveStyle: CSS simultan im Editor und Browser bearbeiten  – t3n News […]

Deine Meinung

Bitte melde dich an!

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

Jetzt anmelden

Mehr zum Thema CSS
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

Native CSS-Variablen mit Myth: Der Anfang vom Ende für LESS und SASS?
Native CSS-Variablen mit Myth: Der Anfang vom Ende für LESS und SASS?

Heute zeigen wir euch Myth. Ein CSS-Postprozessor und Quasi-„polyfill“ um unter anderem native Variablen in CSS, laut dem W3C-Entwurf, umsetzen zu können. » weiterlesen

Kennst Du schon unser t3n Magazin?

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