kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

CSS-Files automatisch nachladen: CSS refresh

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.

Workshops und Seminare von kulturbanause

Unsere Berlin-Termine für Ende 2017 sind online!

Jetzt Tickets sichern!

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.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

18 Kommentare

  1. Ralf Heumann

    Verfasst am 10. September 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.

  2. Flowsen

    Verfasst am 10. September 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.

    • Jens Wolff

      Verfasst am 10. September 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/

  3. Dennis

    Verfasst am 10. September 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.

    • Jonas Hellwig

      Verfasst am 10. September 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.

  4. Martin

    Verfasst am 10. September 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 :-)

    • Jonas Hellwig

      Verfasst am 10. September 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.

      • Martin

        Verfasst am 10. September 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.

  5. Nico

    Verfasst am 10. September 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.

  6. Hans

    Verfasst am 10. September 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.

    • hans

      Verfasst am 13. September 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

  7. Jones

    Verfasst am 10. September 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.

  8. Stephan

    Verfasst am 11. September 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.

  9. cbinger

    Verfasst am 12. September 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/

  10. Martin

    Verfasst am 13. September 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.

  11. Philipp Kruft

    Verfasst am 17. September 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.

  12. Sefer

    Verfasst am 30. Juli 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.

  13. Markus K.

    Verfasst am 20. Mai 2017 um 1: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.

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.