TYPO3/WordPress Frontend-Development: automatischer Browser-CSS-Reload bei Änderungen an CSS-Dateien

Ich bin gerade am Templaten einer neuen TYPO3-Website und wollte den CSS-Entwicklungsprozess ein wenig beschleunigen und nicht immer wieder bei einer Anpassung am CSS-File den Reload-Button/F5 drücken, denn das dauert manchmal ewig. Habe jetzt eine 2-Minuten-Lösung gefunden, bei der der Browser automatisch die CSS-Datei neu läd, wenn sie sich geändert hat. 2 Minuten jetzt, die Dir stundenlanges Warten ersparen werden! Los geht's!

Ohne Caching oder WordPress: Ein Bookmarklet genügt.

Solange man bei seinem Web-Projekten (z.B. WordPress) kein .htaccess-Caching aktiviert hat – also z.B. bei einer ganz normalen WordPress-Installation – muss man lediglich ein kleines Bookmarklet in seinem Browser ablegen, dass automatisch die CSS-Datei neu läd, wenn sich eine CSS-Datei ändert (das ganze läuft auf JavaScript-Basis). CSS-Datei speicher und die Styles auf der Seite ändern sich SOFORT! Das Bookmarklet gibt es bei cssrefresh.frebsite.nl. Danke Fred!

TYPO3 und der Querystring: screen.css?1427904335

TYPO3 hängt i.d.R. an die über page.includeCSS.myCSS = style.css eingebunden Ressourcen einen Query-String (z.B. screen.css?1427904335) an. Dies macht im Live-Betrieb bei aktivierten Caching absolut Sinn. Aber solange man noch am Aufbau der Website ist und 101 Mal sein CSS neu laden muss, dann nervt das einfach nur hat Dich bis an dein Lebensende mit dem Warten auf einen page reload ein paar Lebenswochen gekostet. Will man das oben beschriebene CSS-Reload/Refresh-Bookmarklet verwenden, sollte man deswegen während des Entwickelns vorübergehend den TYPO3-querysting deaktivieren. Das geht über den Wert TYPO3-Install-Tool [FE][versionNumberInFilename]. Dort einfach das "querystring" rauslöschen, speichern und lächeln ;) Viel Spaß beim Proggen! Danke für den Relaod-Button. Icon made by Freepik from www.flaticon.comis licensed by CC BY 3.0