Exemple classique, presque quotidien, vous devez modifier le thème de votre site... peu importe quoi, vous modifiez la feuille de style (le fichier CSS), vous testez sur votre navigateur et ça marche, car vous avez l'habitude de contourner le cache avec Ctl+Shift+R. Mais le visiteur lambda ne connaît pas le raccourci, et surtout il ne sait pas que vous avez modifié un truc !

De fait, tous les principaux navigateurs, mettent en cache les fichiers CSS. C'est une bonne chose et c'est pour ça qu'on centralise le style d'un site, de façon à alléger le temps de chargement de nos pages. Mais voilà, à la moindre modification, le navigateur garde la feuille en cache au lieu de la recharger.

Je sais bien que beaucoup ont déjà écris sur le sujet, mais j'ai été surpris de constater que la question est récurrente sur des forums en tout genre. Alors je vous fait un tour des principales possibilités et dans quelques jours la solution adaptée pour Prado, un super framework PHP.

La plus logique et plus pénible

Le premier réflexe de beaucoup est de renommer le fichier CSS à chaque changement. C'est simple, mais super contraignant ! Il faut donc modifier le nom du fichier, puis modifier l'appel, j'espère qu'alors vous avez un système avec un seul header pour tout le site ;)

Et puis si en plus vous utilisez comme moi Subversion vous devez penser à faire les choses correctement et dans l'ordre, bref, c'est lourd !

La version en bout de queue

La technique la plus populaire consiste à ajouter un système de versionning après le fichier, ce qui oblige le navigateur à recharger le fichier car pour lui c'est une nouvelle requête.

Exemple :

<link rel="stylesheet" type="text/css" href="/themes/ma_feuille.css?v=1" />

À chaque modification du thème de votre site, il faut alors incrémenter [1] la version, du coup la requête est nouvelle et les navigateurs rechargerons la feuille de style.

Seulement problème, ça ne marche pas partout... [2] et ce n'est pas très propre (avis très perso!).

En utilisant la réécriture d'Url

Et bien en fait je vous propose une combinaison des deux premières solutions, mais avec un système qui une fois en place, ne demande plus d'effort ;) Juste incrémenter à un seul endroit !

L'idée est simple, mettre le numéro de version dans le chemin du fichier plutôt qu'en paramètre de requête. Et ce sans modifier à la main le fichier ou l'arborescence. La solution réside dans la réécriture d'url, comme en SEO.

Dans notre cas il s'agit de pouvoir dans l'appel comme dans l'exemple ci-dessus modifier une partie du chemin sans avoir à modifier réellement le chemin.

Exemple :

<link rel="stylesheet" type="text/css" href="/themes/1/ma_feuille.css" />
 
puis après quelques versions : 
 
<link rel="stylesheet" type="text/css" href="/themes/325/ma_feuille.css" />

Le gros intérêt c'est que vous n'avez rien d'autre à faire après chaque modif que d'incrémenter ce répertoire. Et ceci marche également avec vos fichiers Javascript.

Exemple :

<link rel="stylesheet" type="text/css" href="/themes/325/ma_feuille.css" />
<script type="text/javascript" src="/static/18/libraries/jquery.js"></script>

Ou alors la même version pour tout les fichiers (exemple simple en PHP si ça peu aider les débutants) :

<?php $version=1; ?>
<link rel="stylesheet" type="text/css" href="/themes/<?php echo $version; ?>/ma_feuille.css" />
<script type="text/javascript" src="/static/<?php echo $version; ?>/libraries/jquery.js"></script>

Pour que ça marche, il faut créer un fichier .htaccess si ce n'est déjà fait et ajouter dedans :

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^themes/[0-9]/(.*)$ themes/version/$1 [QSA,L]

C'est une possibilité, à vous d'adapter le nom des répertoires à votre projet. Dans cet exemple, vos fichiers sont réellement dans le répertoire themes/version à la racine de votre site. Et lorsque vous faites une modification sur un fichier dans ce répertoire, modifiez simplement l'appel dans votre code PHP/Html.

Pour info cette solution est celle choisie par priceminister.com, d'ailleurs ils utilisent ce système de versionning pour tous leurs fichiers CSS, JS et autres...

C'est également celle que j'ai choisi pour le CMS de ma société Création Oueb ;)

Dans quelques jours, je vous montrerais comment utiliser facilement cette technique avec Prado.

Notes

[1] incrémenter veut dire +1 (il faut prendre des cours de dev si tu as eu besoin de lire cette note ^_^)

[2] Si quelqu'un a un exemple sous la main, moi je me rappel que j'avais des problèmes mais je n'ai pas recherché la dessus...