web-dev-qa-db-fra.com

Mise en cache du navigateur des fichiers CSS

Question rapide concernant CSS et le navigateur. J'ai essayé de chercher SO et j'ai trouvé des articles similaires, mais rien de définitif.

J'utilise un ou deux fichiers CSS dans mes projets Web. Celles-ci sont référencées dans le HEAD de mes pages Web. Une fois que j'ai frappé une de mes pages, le CSS est-il mis en cache afin qu'il ne soit pas re-téléchargé avec chaque demande? J'espère. Do IE , Firefox et Safari gèrent cela différemment? Si le navigateur est fermé, le CSS est-il actualisé lors de la première visite lors de l'ouverture d'une nouvelle instance de navigateur?

62
jwalkerjr

Votre fichier sera probablement mis en cache - mais cela dépend ...

Différents navigateurs ont des comportements légèrement différents - surtout lorsqu'ils traitent avec des en-têtes de mise en cache ambigus/limités émanant du serveur. Si vous envoyez un signal clair, les navigateurs obéissent, pratiquement tout le temps.

La plus grande variation est de loin dans la configuration de mise en cache par défaut de différents serveurs Web et serveurs d'applications.

Certains (par exemple Apache) sont susceptibles de servir des types de fichiers statiques connus avec des en-têtes HTTP encourageant le navigateur à les mettre en cache, tandis que d'autres serveurs peuvent envoyer no-cache commandes avec chaque réponse - quel que soit le type de fichier.

...

Donc, tout d'abord, lisez quelques-uns des excellents tutoriels de mise en cache HTTP là-bas. HTTP Caching & Cache-Busting for Content Publishers a été une véritable révélation pour moi :-)

Ensuite, installez et tripotez avec Firebug et le module complémentaire Live HTTP Headers , pour savoir quels en-têtes votre serveur envoie réellement.

Ensuite, lisez les documents de votre serveur Web pour savoir comment les ajuster à la perfection (ou demandez à votre administrateur système de le faire pour vous).

...

Quant à ce qui se passe au redémarrage du navigateur, cela dépend du navigateur et de la configuration de l'utilisateur.

En règle générale, attendez-vous à ce que le navigateur soit plus susceptible de se connecter avec le serveur après chaque redémarrage, pour voir si quelque chose a changé (voir If-Last-Modified et If- Aucune correspondance ).

Si vous configurez votre serveur correctement, il devrait être en mesure de renvoyer un super-court 4 non modifié (coûtant très peu de bande passante) et après cela, le navigateur utilisera le cache comme d'habitude.

60
Már Örlygsson

À la première partie de votre question - oui, les navigateurs mettent en cache les fichiers css (si ce n'est pas désactivé par la configuration du navigateur). De nombreux navigateurs ont une combinaison de touches pour recharger une page sans cache. Si vous avez apporté des modifications à CSS et que vous souhaitez que les utilisateurs les voient immédiatement au lieu d'attendre la prochaine fois que le navigateur recharge les fichiers sans mise en cache, vous pouvez modifier la façon dont CSS ir est servi en ajoutant des paramètres à l'URL comme ceci:

/style.css?modified=20012009
42
Deniss Kozlovs

Cela dépend des en-têtes HTTP envoyés avec les fichiers CSS comme l'indiquent les deux réponses précédentes - tant que vous n'ajoutez aucun élément de cachebusting au href. par exemple.

<link href="/stylesheets/mycss.css?some_var_to_bust_cache=24312345" rel="stylesheet" type="text/css" />

Certains frameworks (par exemple Rails) les mettent par défaut.

Cependant, si vous obtenez quelque chose comme firebug ou fiddler , vous pouvez voir exactement ce que votre navigateur télécharge à chaque demande - ce qui est particulièrement utile pour découvrir ce que votre navigateur fait , contrairement à ce qu'il devrait faire.

Tous les navigateurs doivent respecter les en-têtes de cache de la même manière, sauf s'ils sont configurés pour les ignorer (mais il y a forcément des exceptions)

7
DanSingerman

Il est probablement intéressant de noter que IE ne mettra pas en cache les fichiers css appelés par d'autres fichiers css en utilisant la méthode @import. Ainsi, par exemple, si votre page html est liée à "master.css" qui tire dans "reset.css" via @import, alors reset.css ne sera pas mis en cache par IE.

3
Andy Ford

Cela dépend des en-têtes que vous envoyez avec vos fichiers CSS. Vérifiez la configuration de votre serveur car vous ne les envoyez probablement pas manuellement. Effectuez une recherche Google pour "http caching" pour en savoir plus sur les différentes options de mise en cache que vous pouvez définir. Vous pouvez forcer le navigateur à télécharger une nouvelle copie du fichier à chaque fois qu'il le charge par exemple, ou vous pouvez mettre le fichier en cache pendant une semaine ...

1
Jan Hančič

Sauf si vous avez gâché votre serveur, oui, il est mis en cache. Tous les navigateurs sont censés le gérer de la même manière. Certaines personnes (comme moi) peuvent avoir leur navigateur configuré de sorte qu'il ne cache aucun fichier. La fermeture du navigateur n'invalide pas le fichier dans le cache. La modification du fichier sur le serveur devrait cependant provoquer une actualisation du fichier.

0
Al W