Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Mein Workflow bei der Umsetzung einer Website sieht normalerweise etwa so aus: Sobald ich das grobe HTML-Markup geschrieben habe, lege ich die CSS-Datei an und füge Style-Angaben hinzu. Dabei wechsle ich permanent zwischen dem Code-Editor, der Debug-Konsole des Browsers und dem Browser selbst. Ich schreibe einige Zeilen Code, speichere das Stylesheet, und überprüfe das Ergebnis im Browser. Dazu muss ich jedes Mal den Browser neu laden um die Änderungen auch sehen zu können. Und weil ich ungern Zeit verschwende, nutze ich ein Bookmarklet um die Seite immer automatisch aktuell zu halten. Das Tool ist zwar nicht gerade neu, aber dennoch ungemein praktisch.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen

Script oder Bookmarklet?

CSS refresh ist ein kleines JavaScript das die CSS-Datei einer Website automatisch aktualisiert sobald eine Änderung stattgefunden hat. Ihr könnt das Script entweder hier herunterladen und per script-Tag im Quellcode der Website einbinden, oder alternativ ein Bookmarklet verwenden.


<head>
   <link rel="stylesheet" type="text/css" href="css/site.css" />
   <script type="text/javascript" src="js/cssrefresh.js"></script>
</head>
Screenshot der Website von CSS-Refresh
Screenshot der Website von CSS-Refresh

Da das Tool funktioniert übrigens nur in einer Serverumgebung.

CSSrefresh uses a XMLHttpRequest to get the modification time of the CSS-files, therefore it only works in a server environment.

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Seminare mit Jonas Hellwig anzeigenJonas Hellwig bei Xing

Feedback & Ergänzungen – 19 Kommentare

  1. Markus K.
    schrieb am 20.05.2017 um 01:54 Uhr:

    Hallo Jonas, auch wenn der Thread aus 2013 stammt?, ich wollte mich einfach nur ganz herzlich für das cssrefresh-Skript bedanken, das ich heute das erste mal genutzt habe, da es mir derart „auf den Sack“ ging, dass Chrome die inhaltlich geänderte Css (auf dem Server/Online) nie nachgeladen hat.
    Danke! ;-)

    (Evtl. sollte man für Anfänger erklärend hinzuschreiben, dass der Link unter „href=“css/site.css“ beliebig mit dem eigenem Namen für die css (mit oder ohne Ordner) angepasst werden kann???
    Im Prinzip genügt es ja sogar, wenn man die Verlinkungszeile zur „css“ die ja ohnehin schon vorhanden ist, einfach so belässt (wie im eigenen Projekt), und sich nur die -Zeile in den head kopiert.)
    Klar ist immer so ne Frage, inwieweit man in die Details geht.

    Antworten
  2. Sefer
    schrieb am 30.07.2013 um 11:32 Uhr:

    ich brauche bitte dringend hilfe… habe mir eine neue seite mit wp erstellt jedoch muss ich nach jeder änderung auf der admin oberfläche auf f5 drücken damit die änderung auch auf meiner website ersichtlich ist.

    benütze den normalen internet explorer.

    gibt es hierzu ein plugin mit den ich die aktualisierung automatisch durchführen lassen kann.

    bitte um dringende info.

    vielen lieben dank im voraus.

    Antworten
  3. Philipp Kruft
    schrieb am 17.09.2012 um 13:28 Uhr:

    Ich arbeite seit Jahren mit Espresso bzw. vormals CSSEdit. Damit lassen sich CSS Dateien mit eigenen Inhalten „überschreiben“, ganz egal ob lokal oder online. Dazu gibt es eine Live-Vorschau die Änderungen direkt anzeigt. Ohne Neuladen des Browsers oder gar speichern der CSS Datei.

    Diese Scripts hier beseitigen nur das Neuladen, das Speichern können sie einem nicht abnehmen und das dauert eben auch ein wenig, vor allem wenn man nicht lokal arbeitet. Weiterer Vorteil ist, dass man Änderungen vornehmen kann und erst speichern muss wenn alles fertig ist – so benötigt man auch keine Kopie einer Website, wenn man nicht an einer Seite arbeiten will, die bereits Live ist.

    Ich könnte ohne diese Live Preview nicht mehr arbeiten, ewiges, elendiges Speichern & Neuladen würde mich in den Wahnsinn treiben.

    Antworten
  4. Martin
    schrieb am 13.09.2012 um 13:23 Uhr:

    Über das FF-Addon „Auto Reload“ kam ich auf das Addon „CSS Reloader“. Einmal aktiviert lädt ein Druck auf F9 das CSS neu, ohne die ganze Seite neu zu laden. Das finde ich sehr praktisch, da die Refreshs deutlich schneller gehen.

    Antworten
  5. cbinger
    schrieb am 12.09.2012 um 13:33 Uhr:

    Ich kann hier nur das FF Addon Auto Reload empfehlen. Das beste Tool was ich bisher gefunden habe. Sobald im Code Editor etwas abgespeichert wird, refreshed der Browser. Selbst wenn man eine Grafik einbindet und diese ändert, wird refreshed.

    https://addons.mozilla.org/de/firefox/addon/auto-reload/

    Antworten
  6. Stephan
    schrieb am 11.09.2012 um 10:41 Uhr:

    Für diejenigen die eine IDE von JetBrains & Firebug nutzen kann ich auch das Plugin CSS-X-Fire empfehlen. Dann werden die Style-Angaben, die man im Firebug tätigt von der IDE erfasst. Ich brauche also nicht mehr zwischen IDE/Code-Editor und meinem Browser wechseln, sondern kann direkt mein CSS in Firebug eingeben und live die Änderungen sehen. Wenn dann alles passt kann ich zu meiner IDE wechseln und entweder alle in Firebug getätigten Änderungen übernehmen oder nur einzelne davon.

    Antworten
  7. Jones
    schrieb am 10.09.2012 um 22:38 Uhr:

    Ich bin ein Mac User und habe vor etwa einem halben Jahr das Programm CodeKit gefunden.
    Es kostet etwa 20$ und vereint verschiede gute Services für Webdesigner.
    Bildergröße reduzieren, Less/Sass compelieren und eben auch ein automatisches Neuladen, wenn Dateien verändert wurden (in Chrome und Safari).
    Bei CSS-Dateien wird die neue Datei geladen, ohne die gesamte Seite neuzuladen.

    Antworten
  8. Hans
    schrieb am 10.09.2012 um 22:11 Uhr:

    wer mit sublime text 2 arbeitet, kann mit diesem plugin:
    https://github.com/gcollazo/BrowserRefresh-Sublime
    das ganze andersherum aufzäumen. funktioniert vorrangig lokal, wegen der latenz beim speichern auf den server.

    Antworten
    • hans
      schrieb am 13.09.2012 um 10:21 Uhr:

      danke für den tipp. ich arbeite seit einem monat mit sublime und frage mich warum ich diesen genialsten aller editoren jetzt erst gefunden habe. dagegen sehen netbeans etc. richtig alt aus :D

      Antworten
  9. Nico
    schrieb am 10.09.2012 um 15:39 Uhr:

    Ich habe das Plugin wieder herausgenommen, da es jede Sekunde bei mir geladen hat. Das heißt, mein Traffic ist in die Höhe geschossen und bei Formulareingaben gab es immer Aussetzer.

    Antworten
  10. CSS-Files automatisch nachladen: CSS refresh | kulturbanause blog | responsive design | Scoop.it
    schrieb am 10.09.2012 um 14:57 Uhr:

    […] Mein Workflow bei der Umsetzung einer Website sieht normalerweise etwa so aus: Sobald ich das grobe HTML-Markup geschrieben habe, lege ich die CSS-Datei an und füge Style-Angaben hinzu. Dabei wechsle ich …  […]

    Antworten
  11. Martin
    schrieb am 10.09.2012 um 11:37 Uhr:

    Opera bietet von Haus aus eine Refresh-Funktion für die aktuelle Seite an.Das Zeitintervall kann sekundengenau eingestellt werden. Sogar das Unterdrücken von JS-Reloads oder Meta-Refresh ist dabei.
    Und: Ja, Opera ist ebenbürtig mit Firefox, Chrome und wie sie alle heißen :-)

    Antworten
    • Jonas Hellwig (Autor)
      schrieb am 10.09.2012 um 11:40 Uhr:

      Hallo Martin,
      vielen Dank für die Info. Das wusste ich gar nicht. Mit Opera werde ich nur irgendwie nicht warm. Ich nutze den Browser eigtl. nur zum Testen.

      Antworten
      • Martin
        schrieb am 10.09.2012 um 16:49 Uhr:

        Jonas, bei mir ist es anders rum: Ich nutze FF, Chrome etc. nur zum Testen, während Opera mein Standard-Browser ist. Ich weiss, das ist Geschmackssache …

        Zur Reload-Funktion kommst du in Opera mit rechtem Mausklick auf eine leere Fläche der geladenen Seite, Eintrag „Automatisch neu laden …“

        Im selben Rechtsklickmenü findest du ein Developer-Tool a la DOM-Inspector unter „Element untersuchen“.

        Damit lassen sich Frontend-Codes für Web-Standard-Browser ausreichend entwickeln.

  12. Dennis
    schrieb am 10.09.2012 um 10:47 Uhr:

    Ich benutze seit längrem dieses Script: http://livejs.com/ und bin damti sehr zufrieden. Kein lässtiges F5 mehr drücken, einfach zum Browser switchen und schon das Ergebniss sehen.

    Antworten
    • Jonas Hellwig (Autor)
      schrieb am 10.09.2012 um 11:43 Uhr:

      Sehr fein! Hier wird ja auch der HTML-Code upgedated wenn ich das richtig sehe?! Das wäre dann ja noch besser.

      Antworten
  13. Flowsen
    schrieb am 10.09.2012 um 10:28 Uhr:

    Es gab für den Firefox mal ein Plugin, was die Seite nach einem gesetzten Zeit-Intervall immer neu geladen hat.

    Käme ja theoretisch auf das gleiche hinaus oder und würde sogar lokal funktionieren?!
    Trotzdem praktisch.

    Antworten
    • Jens Wolff
      schrieb am 10.09.2012 um 11:39 Uhr:

      Ich denke, du meinst ReloadEvery ;-)
      Ist echt ein cooles Firefox-Plugin – aber eben leider nur teilweise sinnvoll einsetzbar als Webentwickler, da man ja nicht immer im exakt gleichen Zeitfenster einen Refresh braucht, sondern eben mehr oder weniger On-The-Fly bei einer Änderung.. ^^

      Wers trotzdem mal ausprobieren mag, hier gibts das Plugin:
      https://addons.mozilla.org/de/firefox/addon/reloadevery/

      Antworten
  14. Ralf Heumann
    schrieb am 10.09.2012 um 10:03 Uhr:

    Ich nutze das Tool jetzt schon eine ganze Weile und finde es ebenfalls praktisch. Schade allerdings, dass nur die Stylesheets überwacht werden. Bei einer Änderung im HTML-Quelltext, beispielsweise, muss wie gewohnt von Hand aktualisiert werden. Prima wäre es, wenn die Entwickler das noch hinbekämen – bestenfalls sogar den Scroll-Offset von oben beim Seiten-Refresh mit zu übernehmen.

    Antworten

Schreibe einen Kommentar zu Jones Antworten abbrechen

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →