Mise en cache du navigateur de fichiers CSS

Question

Petite question concernant le CSS et le navigateur. J'ai essayé de cherche et trouve certains des postes similaires, mais rien de définitif.

J'utilise un ou deux fichiers CSS dans mes projets web. Ces sont référencés dans la TÊTE de mes pages web. Une fois que j'ai touché l'une de mes pages, le CSS mise en cache afin de ne pas re-télécharger à chaque requête? Je l'espère. Ne IE, Firefox et Safari gérer cela différemment? Si le navigateur est fermé, est le CSS actualisées sur la première visite une nouvelle instance du navigateur est ouvert?

Answer 1

Votre fichier sera probablement être mis en cache, mais ça dépend...

Les différents navigateurs ont des comportements légèrement différents - dont la plus remarquable lorsque l'on traite avec ambiguë limitée de la mise en cache des en-têtes de émanant de du serveur. Si vous envoyez un signal clair, les navigateurs obéir, pratiquement tout le temps.

Le plus grand écart de loin, est la mise en cache par défaut de la configuration des différents serveurs web et les serveurs d'applications.

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

...

Donc, d'abord, de lire quelques-uns des excellents mise en cache HTTP tutoriels là-bas. (La mise en Cache HTTP et Cache-Busting pour les Éditeurs de Contenu a été une vraie révélation pour moi :-)

Ensuite, installez et bricoler avec Firebug et le Live HTTP Headers add-on , pour savoir qui des en-têtes de votre serveur d'envoi.

Puis lire votre serveur web docs pour savoir comment ajuster à la perfection (ou parlez-en à votre sysadmin dans le fait pour vous).

...

Quant à ce qui se passe lorsque le navigateur est redémarré, il dépend du navigateur et la configuration de l'utilisateur.

En règle générale, attendre le navigateur afin d'être plus susceptibles de check-in avec le serveur après chaque redémarrage, pour voir si quelque chose a changé (voir Si-Last-Modified et Si-None-Match).

Si vous configurez votre serveur correctement, il devrait être en mesure de retourner un super-court "304 not Modified" (avec un coût très peu de bande passante) et après que le navigateur va utiliser le cache comme d'habitude.

Answer 2

À la première partie de votre question - oui, les navigateurs mettent en cache les fichiers css (si cela 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 apportez des modifications à css et souhaitez que les utilisateurs les voient immédiatement au lieu d'attendre la prochaine fois que le navigateur rechargera les fichiers sans les mettre en cache, vous pouvez modifier la façon dont le service CSS est utilisé en ajoutant des paramètres à l'URL, comme suit:

 /style.css?modified=20012009
 

Answer 3

Il ne dépend pas de les en-têtes HTTP envoyés avec les fichiers CSS, comme les deux précédentes réponses de l'état aussi longtemps que vous n'avez pas à ajouter tout de contournement du cache des trucs pour le href. par exemple

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

Certains cadres (par exemple, des rails, mettez-les dans par défaut.

Toutefois, Si vous obtenez quelque chose comme firebug ou fiddler, vous pouvez voir exactement ce que votre navigateur est en cours de téléchargement à chaque requête - qui est particulièrement utile pour trouver ce que votre navigateur est à faire, plutôt que ce qu'elle devrait être en train de faire.

Tous les navigateurs doivent respecter les en-têtes de cache de la même façon, sauf si configuré pour ignorer (mais il y a certainement des exceptions)

Answer 4

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

Answer 5

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 "mise en cache http" 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 le mettre en cache pendant une semaine ...