Mise en cache du navigateur de fichiers CSS

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

J’utilise un ou deux fichiers CSS dans mes projets Web. Ceux-ci sont référencés dans le HEAD de mes pages Web. Une fois que j’ai tapé une de mes pages, le CSS est-il mis en cache de sorte qu’il ne soit pas re-téléchargé avec chaque requête? J’espere. IE, Firefox et Safari traitent-ils cela différemment? Si le navigateur est fermé, le CSS est-il actualisé lors de la première visite lorsqu’une nouvelle instance de navigateur est ouverte?

Votre fichier sera probablement mis en cache – mais cela dépend …

Différents navigateurs ont des comportements légèrement différents, notamment lorsque l’on traite 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 différence réside dans la configuration de mise en cache par défaut des 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 no-cache à chaque réponse – quel que soit le type de fichier.

…

Donc, tout d’abord, lisez quelques-uns des excellents didacticiels HTTP disponibles . Caching HTTP & Cache-Busting pour les éditeurs de contenu a été une véritable révélation pour moi 🙂

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

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

…

En ce qui concerne le 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 au serveur après chaque redémarrage, pour voir si quelque chose a changé (voir If-Last-Modified et If-None-Match ).

Si vous configurez correctement votre serveur, il doit pouvoir renvoyer un 304 non modifié (coûtant très peu de bande passante), puis utiliser le cache normalement.

Pour 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 avez apporté 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 mise en cache, vous pourrez changer la façon dont CSS ira en ajoutant des parameters à l’URL:

 /style.css?modified=20012009

Cela dépend des en-têtes HTTP envoyés avec les fichiers CSS, dans la mesure où les deux réponses précédentes – tant que vous n’ajoutez pas d’éléments de cache au href. par exemple

Certains frameworks (ex: 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 sur chaque requête – ce qui est particulièrement utile pour savoir ce que fait votre navigateur, par opposition à ce qu’il devrait faire.

Tous les navigateurs doivent respecter les en-têtes de cache de la même manière, à moins qu’ils ne soient configurés pour les ignorer (mais des exceptions sont inévitables)

Il est probablement utile de noter que IE ne met 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 se lie à “master.css” qui extrait “reset.css” via @import, alors reset.css ne sera pas mis en cache par IE.

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 sur 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, ou vous pouvez mettre le fichier en cache pendant une semaine …

À moins que vous n’ayez gâché votre serveur, oui, il est mis en cache. Tous les navigateurs sont censés gérer la même chose. Certaines personnes (comme moi) peuvent avoir leur navigateur configuré pour ne pas mettre de fichiers en cache. La fermeture du navigateur n’invalide pas le fichier dans le cache. La modification du fichier sur le serveur devrait toutefois entraîner une actualisation du fichier.