„Haben Sie es schon mal mit F5 probiert?“ ist das “Have you tried turning in off and on again?” für Webdesigner – ich weiß nicht mehr, wie oft ich diesen Satz in den letzten 15 Jahren gesagt habe. Jetzt ist damit Schluss, und ich hätte viel früher darauf kommen sollen, wie man das sauber löst. Wir wollen

a) auf Live-Websites den Browsercache für CSS- und JavaScript-Dateien nutzen
b) die Browser dazu zwingen, eine geänderte CSS- oder JS-Datei nicht aus dem Cache zu nehmen, sondern neu zu laden, um diese dann aber wiederum solange zu cachen, bis wir eine erneut geänderte Version anbieten.

Die simple Methode mit dem URL-Parameter (screen.css?v=42) ist offenbar nicht wirklich zuverlässig, sondern führt bisweilen dazu, dass gar nicht mehr gecacht wird. Von daher unser Vorschlag: Wir verwenden eine echte Dateinamenänderung, die mit einem Timestamp versehen ist, und nutzen die Power von .htaccess, um das für die Browser transparent zu gestalten. So geht’s:

Dateinamen dynamisch anreichern. Zum Beispiel mit PHP:

<link rel="stylesheet" href="/css/screen.<?= date('YmdHi', filemtime('/var/htdocs/screen.css')) ?>.css">

daraus resultiert ein Dateiname mit einem eingebauten Datum/Zeitangaben vom last modified der physischen CSS-Datei:

<link rel="stylesheet" href="/css/screen.201609301654.css">

Nun noch ein paar Eintragungen ganz oben in der .htaccess-Datei, und wir sind fertig:

RewriteCond %{REQUEST_FILENAME} (css/screen\.(.*)\.css)
RewriteRule ^(.*)$ /css/screen.css [L]

Das gleiche natürlich mit der print.css und der all.js, und alle können beruhigter ihre Websites deployen und sicher sein, dass sich Änderungen direkt im Kundenbrowser auswirken.