Design

CSSrefresh: JavaScript vereinfacht das Testen von CSS-Änderungen

25. Oktober 2012
von

Die Gestaltung von Websites mit CSS ist ein mitunter langwieriges Unterfangen. Sind neue Eigenschaft ins Stylesheet geschrieben, muss die Seite neu geladen werden, um das Ergebnis sehen zu können. Das ständige Neuladen und den damit verbundenen Wechsel der Fenster oder Tabs kann man sich mit geeigneten Tools jedoch schenken – zum Beispiels mit CSSrefresh!


CSSrefresh

CSSrefresh ist ein kleiner Helfer, der das Neuladen einer Seite bei Änderungen an den Stylesheets überflüssig macht. Immer, wenn an einer CSS-Datei Änderungen vorgenommen wurden, sorgt CSSrefresh für eine automatische Aktualisierung der Seite mit den neuen Stylesheets. Dazu wird die Seite nicht einmal neu geladen – lediglich die CSS-Datei wird im Hintergrund ausgetauscht.

Einfacher Einsatz

CSSrefresh besteht aus einer kleinen JavaScript-Datei, die im HTML-Head der bearbeiteten Website eingebunden werden muss:

1
<script type="text/javascript" src="js/cssrefresh.js"></script>

Zu beachten ist unbedingt, die JavaScript-Datei nach den CSS-Dateien einzubinden. Nur so kann CSSrefresh Änderungen an den entsprechenden Dateien beobachten und darauf reagieren. Und CSSrefresh reagiert fix. Kaum ist eine CSS-Datei geändert und gespeichert, ist das Ergebnis auch schon sichtbar. Da CSSrefresh nur die Styleheets im Hintergrund aktualisiert, fällt auch das Laden der kompletten Seite inklusive aller Grafiken weg.

CSSrefresh als Bookmarklet

Neben der Einbindung der JavaScript-Datei ins HTML-Dokument bietet CSSrefresh ein Bookmarklet an, welches man sich bequem in die Lesezeichenleiste des Browsers ziehen kann. Ein Klick darauf genügt und CSSrefresh wird automatisch auf das aktuelle Dokument angewendet.

Fazit: CSSrefresh ist ein äußerst nützlicher Dienst, der jedem Webdesigner die Arbeit erleichtert. Die Zeit, die man einspart, mag im Sekundenbereich liegen. Aber mit CSSrefresh fällt das Arbeiten an Stylesheets deutlich entspannter aus.

(dpe)

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

7 Kommentare zu „CSSrefresh: JavaScript vereinfacht das Testen von CSS-Änderungen
  1. Pascal am 25. Oktober 2012 um 11:24

    Sehr cool. Muss ich mal unbedingt austesten. Kann mir bestimmt einige Klicks ersparen.

  2. Nico am 27. Oktober 2012 um 21:02

    Bei mir war das ganz und gar nicht gut. Jede Sekunde wurde die CSS Datei geladen, was natürlich negative Auswirkungen auf den Traffic und Formulareingaben mit sich bringt.

  3. Stefko am 28. Oktober 2012 um 14:46

    Wenn man eine CSS-Datei im Header eingebunden hat, welche mittels @import einzelne CSS-Files einbindet, funktioniert die ganze Sache leider nicht mehr.

    • Tom am 29. Oktober 2012 um 23:31

      Versuche es mal mit sass. Macht mehr Spass :)

  4. Sven am 31. Oktober 2012 um 15:05

    Da find ich das Bearbeiten mittels Firebug doch wesentlich einfacher, die Änderungen wirken sich direkt aus. Und wenn alles passt kommen die Style-Deklarationen in die CSS Datei.

  5. R. Hagn am 2. November 2012 um 15:19

    Geniales Tool, werd mir das mal genauer ansehen….

  6. […] CSSrefresh: JavaScript vereinfacht das Testen von CSS-Änderungen […]

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!