En phase d’intégration d’un site, on intervient à de nombreuses reprises sur les feuilles de styles et, parfois, on peut se faire piéger en ne voyant pas les dernières modifications effectuées, tout simplement parce que le navigateur a mis le contenu des fichiers de CSS en cache.
Dans d’autres cas, lors de mises à jour de sites, il peut arriver que certains visiteurs se plaignent de problèmes d’affichage. Là aussi, la cause est généralement les données stockées en cache par leur navigateur.
Pour contourner ces problèmes, il y a 3 solutions côté client :
- Vider la mémoire cache du navigateur,
- Interdire au navigateur la mise en cache en passant par ses réglages,
- Utiliser un module d’extension comme “Web Developer” pour Firefox.
Ces solutions, même si elles sont efficaces, sont contraignantes pour l’utilisateur. Mieux vaut donc envisager une solution côté serveur.
Je vais vous proposer ici une solution qui présente l’avantage d’être entièrement automatique une fois mise en place.
L’idée de base est de passer, lors de l’appel du CSS dans le code HTML, un numéro de version qui va forcer le chargement de la feuille par le navigateur.
Par exemple, pour une feuille de styles nommée fichier_CSS.css, on peut envisager un appel du style :
-
<link rel='stylesheet' href='http://www.mon-site.com/fichier_CSS.css?v=01' type='text/css' />
Ce système est de plus en plus répandu mais je vais vous proposer ici de l’optimiser.
Nous allons nous fixer deux contraintes pour optimiser :
- Ne pas changer le numéro de version à chaque chargement mais uniquement à chaque mise à jour de la feuille de style
- Ne pas avoir à changer manuellement le numéro de version
L’idée est simple : détecter la date à laquelle le fichier CSS a été modifié pour la dernière fois.
Nous allons donc utiliser la fonction PHP filemtime($filename).
Cette fonction retourne au format timestamp la date de dernière modification du fichier dont on a passé le chemin en paramètre.
Ce qui donnera par exemple :
-
<link rel='stylesheet' href='http://www.mon-site.com/fichier_CSS.css?v=<?php echo filemtime('fichier_CSS.css'); ?>' type='text/css' />
Ce qui nous retournera côté client quelque chose du style :
-
<link rel='stylesheet' href='http://www.mon-site.com/fichier_CSS.css?v=1209488275' type='text/css' />
Mais les perfectionnistes iront certainement un peu plus loin.
En effet, certains développeurs ont horreur de laisser traîner des adresses avec des ? et des = ou encore des &.
Ils s’orienteront donc vers les “URL rewriting”, la ré-écriture d’URLs.
Pour cela, nous allons commencer par changer l’appel de la feuille de style en déplaçant le timestamp.
Nous allons passer à :
-
<link rel='stylesheet' href='http://www.mon-site.com/fichier_CSS-1209488275.css' type='text/css' />
Le code ressemblera donc à :
-
<link rel='stylesheet' href='http://www.mon-site.com/fichier_CSS-<?php echo filemtime('fichier_CSS.css'); ?>.css' type='text/css' />
Et nous allons entrer une ligne d’URL rewriting dans le fichier “.htaccess” :
-
RewriteRule ^(.*)-(.*)\.css $1.css [L]
Ce qui fait que, lorsque le navigateur du client appellera :
http://www.mon-site.com/fichier_CSS-1209488275.css
le serveur ira pour sa part chercher le fichier :
http://www.mon-site.com/fichier_CSS.css
A noter : cette méthode peut aussi être employée pour d’autres types de fichiers comme les fichiers javascript.
Il existe bien d’autres possibilités comme, par exemple, passer le contenu des fichiers CSS dans des fichiers PHP contenant une fonction header() avec les paramètres nécessaires pour forcer le navigateur à mettre à jour ses données en cache. Mais ça, ça fera certainement l’objet d’un autre article ;-)
Si vous avez apprécié cet article, pensez à vous abonner à notre RSS