Feuilles css en cache ?

xdeslandes · 26 Septembre 2006

Bonjour,

il me semble qu'une feuille de style externe (.css donc) n'est chargée qu'une fois par le navigateur client. Mais le problème, c'est que si'lon vient à laz modifier, le client ne verra pas les effets de cette nouvelle feuille, car son navigateur utilisera l'ancien.
Je me trompe ? Comment éviter de demander à l'internaute d'actualiser sa page ?

e-kiwi · 26 Septembre 2006

un moyen fiable à 100% est de la renommer (ie n'en fait qu'à sa tête)

sureau · 26 Septembre 2006

Tu peux faire style d'en appeler une autre en lui passant ds paramètres inutiles :
<link rel="stylesheet" type="text/css" href="images/style.css" />
puis
<link rel="stylesheet" type="text/css" href="images/style.css?12345" />

sur mon validateur xhml j ai pas d'erreures

xdeslandes · 26 Septembre 2006

Ca marche ça ??? Tu utilises une tolérance du navigateur, non ?

e-kiwi · 26 Septembre 2006

je fais ça pour mes elements type flash qui sont jamais mis à jour ^^ je rajoute le timestamp au nom du fichier. par contre pour un css, il serait rechargé à chaque page. rajoutes-y l'heure ou un truc du style
par contre je rajoute aps en parametre mais bien dans le nom du fichier (ré-ecrit en rewriting) je ne sais pas si la méthode de passer en parametre est fiable ou non

xdeslandes · 26 Septembre 2006

Merci de vos précieux conseils, mais :
1- cela me parait bien compliqué, même rewrité. Tant qu'à renommer le fichier, autant appeler style1.css, puis style2.css pour la deuxième version, puis style3.css, etc, non ?

2- il n'existe pas d'instruction à donner au navigateur, genre balise meta ? ou une instruction php-unix style "lastmodified" ?

e-kiwi · 26 Septembre 2006

moi ca me parait pas compliqué, t'appelles dans ton code osurce de la page style-<? echo timestamp() ?>.css
et dans ton htaccess :

rewrite style-(.+).css style.css

mais si tu veux changer son nom, oui aussi, ca permet d'alleger les hits de ton fichier

sureau · 26 Septembre 2006

tu peux interdir le cache du navigateur, mais je suis pas sur que ca marche pour les css :

Code:

		$CachePlus = "";
		if (ereg("MSIE [56789]", (isset($HTTP_USER_AGENT)) ? $HTTP_USER_AGENT : getenv("HTTP_USER_AGENT"))) $CachePlus = ", pre-check=0, post-check=0, max-age=0";
		$now = gmdate('D, d M Y H:i:s') . ' GMT';
		header("Expires: $now");
		header("Last-Modified: $now");
		header("Cache-Control: no-cache, must-revalidate".$CachePlus);
		header("Pragma: no-cache");

xdeslandes · 26 Septembre 2006

Donc, e-kiwi, le navigateur croit qu'il y a un nouveau fichier style à charger, il fait donc une requête au serveur, mais ce dernier lui renvoie quand même style.css (qui a été éventuellement mis à jour entre temps).
Avec cela, je suis sûr que le navigateur rechargera style.css à fois qu'une page est chargée (i.e. chaque fois que le timestamp change, i.e.à chaque seconde serveur), mais cela diminue notablement le temps de chargement des pages, non ?

thierry8 · 26 Septembre 2006

sureau a dit:

tu peux interdir le cache du navigateur, mais je suis pas sur que ca marche pour les css :

Code:

		$CachePlus = "";
		if (ereg("MSIE [56789]", (isset($HTTP_USER_AGENT)) ? $HTTP_USER_AGENT : getenv("HTTP_USER_AGENT"))) $CachePlus = ", pre-check=0, post-check=0, max-age=0";
		$now = gmdate('D, d M Y H:i:s') . ' GMT';
		header("Expires: $now");
		header("Last-Modified: $now");
		header("Cache-Control: no-cache, must-revalidate".$CachePlus);
		header("Pragma: no-cache");

tu m'avais déjà donné cela mais ça ne fonctionne pas!

guicara · 26 Septembre 2006

Hum... Sur sertaint forum utilisant des feuilles de syles (comme punbb), il y a des outils pour vider le cache, le client n'y vois que du feux, mais comment... ?

Pandore · 27 Septembre 2006

Tu veux dire qu'il y aurait une commande qui permettrait au chargement d'une page web de déclencher une purge du cache sur le disque dur du visiteur ???

petitchevalroux · 2 Mars 2009

je viens d'écrire un article qui montre comment combiner le header expire et un css à jour :
-http://postit.petitchevalroux.net/astuces-divers/faire-versioning-fichier-statique-astuces.198.html
, j'utilise la même technique que sureau avec le md5 du fichier css

Marie-Aude · 2 Mars 2009

Ca c'est du déterrage de topic !!!

gusterman · 2 Mars 2009

Pour ma part, j'appelle mon CSS de la sorte :
main.css?v=<?=@filemtime('main.css')?>

filemtime() retourne la date de dernière modification du fichier (format unixtime), donc dès que le css est modifié, il retourne une série de chiffre différent, rechargeant le CSS.

http://fr3.php.net/manual/fr/function.filemtime.php

petitchevalroux · 3 Mars 2009

Marie-Aude a dit:
Ca c'est du déterrage de topic !!!

lol 3ans ... ouai c'est du pur déterrage, mais ça fait du bien c'est une technique que beaucoup de nouveau pourront lire comme ça

.

Pour le filemtime ... ouai c'est pas mal comme ça non plus sauf que avec certain type de synchro le mtime peut etre modifier sans que je contenu soit changer. Mais bon après c'est un cas extrême et je pense assez rare. Le md5 n'est pas infaillible non plus car il peut valoir deux fois la même chose pour un contenu différent ... donc filemtime ou md5 à vous de choisir

.

xdeslandes · 3 Mars 2009

Marie-Aude a dit:
Ca c'est du déterrage de topic !!!

Effectivement ! Mais très intéressant. Je vais vraisemblablement utiliser l'astuce de gusterman. Merci à vous !

moktoipas · 3 Mars 2009

pour ma part j'utilise un dérivé de gusterman sauf qu'au lieu de passer un parametre avec "?" j'ai fait un rewriting qui autauroise mon fichier CSS a avoir une infinité de noms d'une certaine forme car chez mon pere le feuile ne ce chargait pas quand je mettai un parametre..

Rv323 · 3 Mars 2009

Le problème en changeant de nom et surtout en passant une variable date/time c'est que la feuille ne sera donc pas mise en cache d'ou des performances moindres.

gusterman · 3 Mars 2009

Rv323 a dit:
Le problème en changeant de nom et surtout en passant une variable date/time c'est que la feuille ne sera donc pas mise en cache d'ou des performances moindres.

Pourquoi ça ? Tant qu'il n'y a pas de nouvelle modification, la variable reste la même, le CSS est donc bel et bien mis en cache.
Pour preuve, si tu appelles par exemple ton css par : feuille.css?v=030309, puis que tu modifies quelque chose dans cette feuille, tant que la variable n'est pas modifiée, le css ne sera pas rechargé.

petitchevalroux · 3 Mars 2009

Je confirme ce que dit gusterman, la valeur est changer que lorsqu'il y a modification ... donc le fichier reste le meme pour le navigateur tant qu'il n'y a pas de nouvelle version et c'est caché si l'on ajoute un header expire ...

Rv323 · 3 Mars 2009

Code:

main.css?v=<?=@filemtime('main.css')?>

Autant pour moi, j'ai lu trop rapidement et avais retenu de se servir une variable date/time et pas date de dernière modification

ortolojf · 3 Mars 2009

Bonjour

Je ne comprend pas bien la question...

Si le fichier style.css change, le navigateur s'en aperçoit et charge le nouveau style.css , non ?

C'est la définition du concept de cache, que ce soit pour les navigateurs ou autre chose...

J'ai toujours programmé mon site avec ... l'illusion ? comme quoi le fichier de feuille de style, serait rechargé en cas de besoin.

Merci de vos réponses.

Bien à vous.

Amicalement.

Jean-François Ortolo

petitchevalroux · 3 Mars 2009

ortolojf a dit:
Si le fichier style.css change, le navigateur s'en aperçoit et charge le nouveau style.css , non ?

Oui si tu n'envoie pas de header expire c'est le fonctionnement normal du navigateur, il demande a chaque fois à ton serveur si le fichier a changer avec les headers If-modified-Since et/ou Etag si celui ci a changer le serveur renvoie le contenu avec un 200 si il n'a pas changer il renvoie un 301 ce qui economise de la bande passante en evitant de renvoyer le contenu.

Une des optimisations qui altère ce mode de fonctionnement est de rajouter un header expire, qui indique au navigateur de ne pas redemander le fichier avant la date T passé en valeur. Cela permet encore d'économiser de la bande passante et c'est souvent utilisé sur les fichiers statiques (image,css, javascript) qui ne change pas souvent et son souvent demander par le client.

Et donc pour avoir les avantages du expire sans les inconvénients il est conseillé de faire du versioning sur ces fichiers pour éviter que le navigateur garde en cache une version du js buggé par exemple. Et donc le navigateur rechargera le fichier une fois la version changée dans le code html (cf mon astuces et celle de gusterman) et ne le redemandera plus au serveur jusqu'a la date fixé dans le expire ou alors au prochain changement de version.

C'est clair comme ça ?

@lemodo :evil: :mrgreen:

ortolojf · 3 Mars 2009

Bonjour @lemodo

Ouf, j'ai compris...

Ne pensez-vous pas, que celà ne vaut pas le coup pour si peu d'optimisation de chargement, de faire toute cette gymnastique ?

Merci beaucoup pour votre explication.

Bien à vous.

Amicalement.

Jean-François Ortolo

gusterman · 3 Mars 2009

ortolojf a dit:
Ne pensez-vous pas, que celà ne vaut pas le coup pour si peu d'optimisation de chargement, de faire toute cette gymnastique ?

Je dirais que cela dépend des sites, du nombre et de la taille des fichiers .js utilisé et .css. Si tes .js + .css ne font que quelques ko, en effet, cela n'en vaut pas la peine.

petitchevalroux · 3 Mars 2009

ortolojf a dit:
Bonjour @lemodo
Ouf, j'ai compris...

LoL

ortolojf a dit:
Ne pensez-vous pas, que celà ne vaut pas le coup pour si peu d'optimisation de chargement, de faire toute cette gymnastique ?

Il y en a qui vont dans des clubs de gym, et d'autre qui optimise leur site ... chacun son plaisir

Mais c'est toujours bon de savoir que ça existe et ça coute pas grand chose ... Après on a pas dit que c'était obligatoire ni nécéssaire

YoyoS · 3 Mars 2009

Moi je l'appelle pas je vais le chercher, c'est plus simple :arrow:

petitchevalroux · 3 Mars 2009

T'es un pote à Lycos ?

PS : Je flood par ce que j'ai rien compris