Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

CSS Live Editing oder: Pixelschubsen mit Echtheitsgefühlsgarantie

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

CSS Live Editing oder: Pixelschubsen mit Echtheitsgefühlsgarantie

Wer als Webdesigner mit CSS arbeitet, kontrolliert ständig das visuelle Erscheinungsbild des Web-Dokuments auf seinen korrekten Sitz, da es durch minimale Änderungen am Stylesheet zu Auswirkungen ungeahnten Ausmaßes kommen kann. Maxx Hilberer zeigt heute, wie man CSS direkt im Browser bearbeiten kann.

Für gewöhnlich springt man beim Bearbeiten von Web Dokumenten ständig zwischen Code-Editor und Browser hin und her, was nervig sein kann, wenn man z.B. an einem kleinen Monitor arbeitet, und in der Summe auch ziemlich zeitintensiv ist, da mehrere Schritte notwendig sind: Zuerst die Änderung speichern, dann in den Browser wechseln und dort das HTML Dokument mit den neuen Werten des geänderten Stylesheets erneut rendern lassen, um die Änderungen am Layout auch sehen zu können. Zwar geht das mit Tastenkürzeln mitunter recht zügig, dauert aber dennoch insgesamt pro Vorgang mehrere Sekunden. Da kommt je nach Größe oder Beschaffenheit des Projekts schon mal das eine oder andere halbe Stündchen zusammen.

Das störte auch irgendwann mal einige Entwickler des mozdev.org-Teams, und tatsächlich, sie fanden einen passablen Lösungsansatz aus dem schließlich EditCSS entstand.

CSS Dokumente direkt im Browser bearbeiten…

Bei EditCSS handelt es sich um ein Erweiterung für den Firefox-Browser. Ihre Bedienung ist denkbar einfach: Die zu stylende HTML-Datei wird in Firefox geöffnet. Danach wird EditCSS aus der Browser Toolbar heraus gestartet, sie öffnet sich – ähnlich wie die Bookmarks – in einer Sidebar, also direkt neben dem Webdokument.

Sind mehrere Stylesheets im HTML-Dokument eingebunden, werden diese, fein säuberlich in separate Reiter aufgeteilt, ebenfalls in dieser Sidebar geöffnet.

Darin kann man nun nach herzenslust CSS-Anweisungen überschreiben oder einfügen und im rechten Teil des Fensters (im HTML-Dokument) werden die Änderungen unverzüglich angezeigt – ohne einen einzigen zusätzlichen Befehl wie »Speichern« oder »Aktualisieren«.

… und anschließend speichern

Ändern, Ergänzen und sogar wildes Experimentieren werden so zum intuitiven Fingerspiel ohne Reue.

Erst wenn man ein zufriedenstellendes Ergebnis erzielt, kann man die Änderungen auch dauerhaft speichern, was viel einfacher funktioniert als mit Online-Live Editoren oder selbst mit Firebug, da man uneingeschränkt auf das lokale Dateisystem zugreifen kann.

Die Feile am Schweizer Taschenmesser

Leider erlangte EditCSS nie den verdienten Bekanntheitsgrad, wurde aber – mit nützlichen Zusatzfunktionen ergänzt – zusammen mit vielen anderen essentiellen Werkzeugen von Chris Pederick zu einer Webentwickler-Suite namens Webdeveloper zusammengefasst.

So kann man nun beispielsweise die (im Webddeveloper vollständig integrierte) EditCSS-Sidebar im Browserfenster je nach Layout-Format der Webseite (hoch oder breit) links oder rechts, oben oder unten anordnen. Zusätzlich wurde eine Suchfunktion integriert, die das schnelle Auffinden von bestimmten Selektoren in umfangreichen Stylesheets wesentlich erleichtert.

»Stick/Unstick« (der grüne Pfeil vor dem Suchfeld) rundet den Funktionsumfang mit der Möglichkeit ab, mittels des aktuellen Stylesheets (»stick«) jedes beliebige HTML-Dokument rendern zu lassen. »Unstick« hebt die Bindung auf, wodurch man auch zwischendurch ganz normal ohne Nebenwirkungen surfen kann.

Home is where the Browser is

Mein Fazit: Ohne die Echtheitsgefühlsgarantie von EditCSS kann ich mir mittlerweile das Arbeiten mit Stylesheets überhaupt nicht mehr vorstellen… und überhaupt: Pixelschubsen macht mir als Webdesigner am meisten Spaß zuhause, nämlich im Browser.

Kommentare

Rainer
am 15.12.2008 - 08:22

Leider hat der Entwickler es bis heute nicht geschafft, das gute Stück mit Hintergrundbildern funktionieren zu lassen. Ein großes Manko bei allem Tollen, was das Teil sonst bietet. Ich kann ohne gar nicht mehr arbeiten :o) (ups, werde ich jetzt aus Russland für den Smilie abgemahnt?).

Permanenter Link

axel
am 15.12.2008 - 08:41

Leider hat der Entwickler es bis heute nicht geschafft, das gute Stück mit Hintergrundbildern funktionieren zu lassen.

Hi Rainer, das stimmt so nicht. Du musst in den CSS Dateien lediglich den kompletten Pfad zu den Bildern mit URL einfügen.

Permanenter Link

tobone
am 15.12.2008 - 09:37

Und leider funktionieren im FF3 einige Dinge (z.B. Block-Level-Elemente hervorheben)nicht mehr.
Schade!!!
Das Tool ist ansonsten einfach unentbehrlich!

Permanenter Link
Eric Eggert

Eric Eggert (Webkraut)
am 15.12.2008 - 09:45

@tobone: Das kann ich nicht nachvollziehen, in meinem Firefox 3 funktioniert das einwandfrei. Vielleicht musst du ein Update einspielen?

Permanenter Link

soophie
am 15.12.2008 - 10:22

Die deutsche Version war im Firefox 3 ziemlich buggy auch in der Darstellung. Die englische Version funktioniert aber, soweit ich sehen kann, fehlerfrei.

Permanenter Link

Maxx Hilberer
am 15.12.2008 - 11:39

Version 1.1.5 hat bei mir auch Probleme gemacht, bis hin zu Abstürtzen des externen CSS Editors (Top Style). 1.1.6 läuft (keine deutsche Localization) ohne jegliche Probleme oder Einschränkungen mit FF2 und 3 auf Linux und Windows

Permanenter Link

Peter
am 15.12.2008 - 14:18

Ein Tool, das ähnlichen Komfort bietet, aber auf andere Weise funktioniert, nennt sich XRefresh. Hierbei wird bei Änderungen an zuvor bestimmbaren Stellen im Dateisystem ein Refresh von Firefox und IE ausgelöst. Ich habe dafür die HTDocs meines lokalen Webservers angegeben und dadurch wird bei jeder Änderung einer Datei in diesem Ordner die aktuelle Seite im Firefox (und gleichzeitig auch im IE) neu geladen.

D.h. ich habe meinen Editor auf der linken Seite des Screens offen und rechts aktualisert sich der Firefox munter von alleine, wenn ich im Editor etwas speichere. Funktioniert übrigens auch, wenn ich ein Bild, ein (X)HTML-Dokument oder jede andere Datei neu speichere.

Allerdings gibt es dieses Tool nur für Windows, wenn mich nicht alles täuscht. Hier der Link: xrefresh.com

Permanenter Link
Eric Eggert

Eric Eggert (Webkraut)
am 15.12.2008 - 14:28

Am Mac gibt’s dafür übrigens auch noch CSSEdit von Macrabbit, mit dem man CSS-Dateien überschreiben und dann auch mit Syntax-Highlighting bearbeiten kann. Auch da werden die Änderungen sofort sichtbar.

Permanenter Link

Andiministrator
am 15.12.2008 - 15:43

Ich nutze das den CSS-Editor auch gern mal. Da ich ein 2-Monitor-System verwende, würde ich mir neben einem Syntax-Highlighting ein seperates Editor-Fenster wünschen.

Derzeit nutze ich die FF-Erweiterung "ReloadEvery", um Änderungen anzuzeigen. Das funktioniert auch in Verbindung mit der Erweiterung "IE Tab", so dass man zumindest das FF und IE Layout nebenbei im Blick hat.

Permanenter Link

Maxx Hilberer
am 15.12.2008 - 18:27

@peter, @andiministrator: danke, hört sich beides gut an - kannte ich noch nicht, sehe ich mir mal an. Vor allem ReloadEvery scheint ja ein absolutes Muss zu sein für Entwickler, die mit Firefox arbeiten

Permanenter Link

Manko10
am 15.12.2008 - 19:33

Nettes Tool, kannte ich noch gar nicht, da ich die Webdeveloper Toolbar aber eh installiert habe, brauche ich es aber auch nicht.
Die Webdeveloper Toolbar fristet bei mir aber auch ein armes Dasein, da ich für das allermeiste Firebug benutze, auch für das Bearbeiten der CSS. Nur für speziellere Sachen kommt die WDT dann doch zum Einsatz.

Permanenter Link

Rainer
am 16.12.2008 - 08:40

@axel: [Du musst in den CSS Dateien lediglich den kompletten Pfad zu den Bildern mit URL einfügen.]
Danke für den Tipp. Ist aber mühsam, für jeden Test erst an allen betreffenden Stellen den Pfad zu erweitern. Ansonsten gibt es ja wohl keinen Grund, in den CSS-Dateien absolute Pfade zu verwenden?
Und bei Tests fremder Seiten, bei denen man keinen direkten Zugriff auf CSS-Dateien hat, bleibt leider bloß das händische Ergänzen im EditCSS.

Permanenter Link

Maxx Hilberer
am 16.12.2008 - 16:29

@axel, @Rainer: ich arbeite immer in einer XAMPP Umgebung, sprich die Bilder haben von vorneherein relative Pfade und diese können genau so bleiben wenn die Dateien später auf einen Live Server übertragen werden. Funktioniert alles ganz tadellos.

Permanenter Link

Rainer
am 17.12.2008 - 09:01

@Maxx: ich widerspreche ungern, aber wie auch in http://marc-pentermann.de/?p=429 zu lesen, geht es nur mit absoluten Pfaden. Das mag bei lokaler Entwicklung (xampp) anders sein, aber bei Seiten, die bereits live sind, ist an der Stelle Schicht im Schacht.
Und ich muss relativ häufig für Kunden deren Seiten testen und optimieren. Da ist es schon mühsam mit den Hintergrundbildern. Insofern nutze ich immer eine Kombination aus EditCSS (in der Webdeveloper Toolbar), Firebug und Menschenverstand. In der Regel komme ich damit gut zurecht.

Permanenter Link

Maxx Hilberer
am 18.12.2008 - 11:11

@Rainer: da ich Zugang zu den Servern meiner Kunden habe, lag mir der Ansatz mit den absoluten Pfaden zugegebenermaßen etwas fern.

Permanenter Link

Maxx Hilberer
am 26.12.2008 - 15:47

@Peter: xRefresh rockt! Thx.

Permanenter Link

Die Kommentare sind geschlossen.