CSS-Files automatisch nachladen: CSS refresh

css-refresh-logo

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.

Modernes Webdesign

Neue Workflows, Techniken und Designideen – inkl. Rapid Prototyping, Responsive Design und Sass.

In unserem Shop kaufen
Signierte DVD, keine Versandkosten

Bei Amazon bestellen
Standard-Version

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.