Feuilles css en cache ?

Discussion dans 'Administration d'un site Web' créé par xdeslandes, 26 Septembre 2006.

  1. xdeslandes
    xdeslandes WRInaute occasionnel
    Inscrit:
    29 Décembre 2004
    Messages:
    330
    J'aime reçus:
    0
    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 ?
     
  2. e-kiwi
    e-kiwi WRInaute accro
    Inscrit:
    23 Décembre 2003
    Messages:
    13 198
    J'aime reçus:
    1
    un moyen fiable à 100% est de la renommer (ie n'en fait qu'à sa tête)
     
  3. sureau
    sureau WRInaute discret
    Inscrit:
    7 Mars 2005
    Messages:
    157
    J'aime reçus:
    0
    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 :)
     
  4. xdeslandes
    xdeslandes WRInaute occasionnel
    Inscrit:
    29 Décembre 2004
    Messages:
    330
    J'aime reçus:
    0
    Ca marche ça ??? Tu utilises une tolérance du navigateur, non ?
     
  5. e-kiwi
    e-kiwi WRInaute accro
    Inscrit:
    23 Décembre 2003
    Messages:
    13 198
    J'aime reçus:
    1
    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
     
  6. xdeslandes
    xdeslandes WRInaute occasionnel
    Inscrit:
    29 Décembre 2004
    Messages:
    330
    J'aime reçus:
    0
    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" ?
     
  7. e-kiwi
    e-kiwi WRInaute accro
    Inscrit:
    23 Décembre 2003
    Messages:
    13 198
    J'aime reçus:
    1
    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
     
  8. sureau
    sureau WRInaute discret
    Inscrit:
    7 Mars 2005
    Messages:
    157
    J'aime reçus:
    0
    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");
    
     
  9. xdeslandes
    xdeslandes WRInaute occasionnel
    Inscrit:
    29 Décembre 2004
    Messages:
    330
    J'aime reçus:
    0
    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 ?
     
  10. thierry8
    thierry8 WRInaute accro
    Inscrit:
    11 Juillet 2005
    Messages:
    2 728
    J'aime reçus:
    0
    tu m'avais déjà donné cela mais ça ne fonctionne pas!
     
  11. guicara
    guicara WRInaute passionné
    Inscrit:
    2 Février 2006
    Messages:
    1 558
    J'aime reçus:
    0
    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... ?
     
  12. Pandore
    Pandore WRInaute passionné
    Inscrit:
    14 Octobre 2005
    Messages:
    1 108
    J'aime reçus:
    0
    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 ???
     
  13. petitchevalroux
    petitchevalroux WRInaute discret
    Inscrit:
    31 Mai 2006
    Messages:
    161
    J'aime reçus:
    0
    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
     
  14. Marie-Aude
    Marie-Aude WRInaute accro
    Inscrit:
    5 Juin 2006
    Messages:
    16 854
    J'aime reçus:
    221
    Ca c'est du déterrage de topic !!!
     
  15. gusterman
    gusterman Nouveau WRInaute
    Inscrit:
    13 Novembre 2008
    Messages:
    39
    J'aime reçus:
    0
    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
     
  16. petitchevalroux
    petitchevalroux WRInaute discret
    Inscrit:
    31 Mai 2006
    Messages:
    161
    J'aime reçus:
    0
    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 :D.

    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 ;).
     
  17. xdeslandes
    xdeslandes WRInaute occasionnel
    Inscrit:
    29 Décembre 2004
    Messages:
    330
    J'aime reçus:
    0
    Effectivement ! Mais très intéressant. Je vais vraisemblablement utiliser l'astuce de gusterman. Merci à vous !
     
  18. moktoipas
    moktoipas WRInaute passionné
    Inscrit:
    29 Juin 2004
    Messages:
    1 495
    J'aime reçus:
    0
    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..
     
  19. Rv323
    Rv323 WRInaute discret
    Inscrit:
    12 Avril 2007
    Messages:
    130
    J'aime reçus:
    0
    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.
     
  20. gusterman
    gusterman Nouveau WRInaute
    Inscrit:
    13 Novembre 2008
    Messages:
    39
    J'aime reçus:
    0
    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é.
     
  21. petitchevalroux
    petitchevalroux WRInaute discret
    Inscrit:
    31 Mai 2006
    Messages:
    161
    J'aime reçus:
    0
    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 ...
     
  22. Rv323
    Rv323 WRInaute discret
    Inscrit:
    12 Avril 2007
    Messages:
    130
    J'aime reçus:
    0
    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 :oops:
     
  23. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 601
    J'aime reçus:
    37
    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
     
  24. petitchevalroux
    petitchevalroux WRInaute discret
    Inscrit:
    31 Mai 2006
    Messages:
    161
    J'aime reçus:
    0
    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:
     
  25. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 601
    J'aime reçus:
    37
    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
     
  26. gusterman
    gusterman Nouveau WRInaute
    Inscrit:
    13 Novembre 2008
    Messages:
    39
    J'aime reçus:
    0
    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.
     
  27. petitchevalroux
    petitchevalroux WRInaute discret
    Inscrit:
    31 Mai 2006
    Messages:
    161
    J'aime reçus:
    0
    LoL
    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 ;)
     
  28. YoyoS
    YoyoS WRInaute accro
    Inscrit:
    14 Septembre 2006
    Messages:
    3 226
    J'aime reçus:
    0
    Moi je l'appelle pas je vais le chercher, c'est plus simple :arrow:
     
  29. petitchevalroux
    petitchevalroux WRInaute discret
    Inscrit:
    31 Mai 2006
    Messages:
    161
    J'aime reçus:
    0
    T'es un pote à Lycos ?

    PS : Je flood par ce que j'ai rien compris
     
Chargement...
Similar Threads - Feuilles css cache Forum Date
Unused CSS et outils pour supprimer feuilles de style inutilisées Développement d'un site Web ou d'une appli mobile 27 Avril 2022
Feuilles de styles CSS : pourquoi vos mailings arrivent en vrac Développement d'un site Web ou d'une appli mobile 29 Septembre 2011
Les feuilles de style.css peuvent-elles nuire au référecnement? Débuter en référencement 20 Septembre 2010
Goggle crawle les feuilles de styles CSS Référencement Google 23 Juin 2006
Feuilles de style css et balise H1 Administration d'un site Web 18 Février 2003
feuilles de styles non obtenues par Googlebot Crawl et indexation Google, sitemaps 28 Septembre 2018
Feuilles de style fabriquées en dynamique ? Développement d'un site Web ou d'une appli mobile 11 Août 2012
Deux feuilles de Styles Développement d'un site Web ou d'une appli mobile 30 Janvier 2010
feuilles de styles Débuter en référencement 29 Juillet 2009
IE 8 et feuilles de style Développement d'un site Web ou d'une appli mobile 14 Juillet 2009
Externalisation feuilles de style : impact sur référencement Référencement Google 1 Février 2008
Deux feuilles de style pour 2 version d'IE Développement d'un site Web ou d'une appli mobile 3 Octobre 2007
Dossier inexistant et feuilles de style Développement d'un site Web ou d'une appli mobile 7 Août 2007
les attributs des feuilles de style sont ils pris en compte? Référencement Google 22 Février 2007
php et feuilles de style Développement d'un site Web ou d'une appli mobile 27 Octobre 2005
Les feuilles de styles peuvent elles marcher dans GMAIL ? Gmail, Google Talk, Blogger et Orkut 13 Août 2005
passage aux feuilles de style help Administration d'un site Web 3 Janvier 2004
pb de CSS Développement d'un site Web ou d'une appli mobile 10 Mai 2022
CSS / Attribuer 2 couleurs différentes aux H2 Développement d'un site Web ou d'une appli mobile 12 Mars 2022
Perplexité : pourquoi utiliser une classe CSS en dehors de <body> Développement d'un site Web ou d'une appli mobile 26 Décembre 2021