senäh

17senäh und so…

css_rewriting_article

HTML/CSS/JS, PHP, Server & Config
28. Apr 2012
Kommentare: 0

CSS-Caching Reloaded

Kategorien: HTML/CSS/JS, PHP, Server & Config | 28. Apr 2012 | Kommentare: 0

Folgendes wohlbekanntes Problem: hin und wieder müssen Kleinigkeiten in der CSS-Datei geändert werden, sei es wegen einem entdeckten Bug oder einfach random Anpassungen. Leider verhindert Browsercaching, dass Benutzer die mühsam eingepflegten Änderungen sofort zu Gesicht bekommen. Eine mögliche, von mir bereits vorgestellte Lösung besteht im Anhängen des Timestamps der letzten Änderung als Parameter an die CSS-Datei (z.B. style.css?1335599366). Dadurch wird die Datei nur aus dem Cache geholt, wenn sie seit dem letzten Aufruf wirklich nicht verändert wurde. Ziel erreicht.

Aaaaaaber: wie ich feststellen sollte, mögen Geschwindigkeitsanalyse-Tools (eher egal) und Proxy-Server (nicht so egal) diese Vorgehensweise nicht wirklich. Darum brauchen wir eine Alternative.

Rewriting ist dein Freund

Die Lösung besteht darin besagten Timestamp schon in den Dateinamen aufzunehmen. Obiges Beispiel sähe ausgeschrieben so aus:

<link rel="stylesheet" href="style.1335599366.css" />

Damit dem Benutzer beim Aufruf jetzt aber kein 404er sondern die tatsächliche CSS-Datei geliefert wird, müssen wir noch etwas Rewriting Magic anwenden. Solltet ihr euch damit nicht auskennen, befasst euch erstmal mit den Basics, Stichwort mod rewrite. Es handelt sich dabei um ein Apache Modul, das besser lesbare URLs ermöglicht. Aus www.example.com?page=portfolio&active=17 wird dann www.example.com/portfolio/17/. Da ich bei meiner Recherche dazu damals auch auf einige Ratschläge gestoßen bin, die bei mir nicht funktioniert haben, kommt dazu demnächst vielleicht auch nochmal ein dedizierter Blogpost.

Die Rewriting-Regeln

Was genau muss man jetzt aber ändern? Erstmal müsst ihr die CSS-Einbindung natürlich anpassen.

<link rel="stylesheet" href="style.<?php echo filemtime('style.css'); ?>.css">

Dann ab in die .htaccess und folgende Rewrite-Rules hinzufügen.

RewriteRule ^css/style.[09]+.css$ css/style.css [L]

Dabei ist wichtig, dass diese Regel vor dem standardmäßigen Rewriting notiert wird, das Frameworks wie WordPress oder das Zend Framework in die .htaccess schreiben. Ein entsprechendes Rewriting für diesen Blog hier sieht dann so aus:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<IfModule mod_rewrite.c>

# generic stuff
RewriteEngine On
RewriteBase /

# css rewriting
RewriteRule ^(.*)/senaeh/css/style\.[0-9]+\.css$ $1/senaeh/css/style.css [L]

# wordpress rewriting
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

</IfModule>

Wir fügen hier noch das Theme-Directory hinzu, damit das Rewriting nicht auch bei einem Plugin Anwendung findet, dass zufällig dieselbe Dateistruktur vorweist. Beachtet dabei, dass ihr euer Theme-Directory anpassen müsst, da es wahrscheinlich nicht senaeh heißt ;)

That’s it!

Autor: Enno

Ich bin Enno. PHP ist mein Ding, aber auch alles Neue rund um die Themen HTML5, CSS3 & Co finde ich interessant. Ich mag es Leuten zu helfen und mein Wissen weiterzugeben. Sollte dir mein Beitrag gefallen haben, lass doch nen Kommentar da oder benutze einen der Social Buttons, um deinen Dank auszudrücken ;)

Kommentare (0)

Für diesen Beitrag wurden Kommentare deaktiviert.