web-dev-qa-db-fra.com

Comment empêcher la mise en cache CSS sur une page Web?

J'apprends à développer des pages Web xhtml, css. Souvent, je modifie CSS mais cela ne se reflète pas sur la page en raison de la mise en cache du navigateur. Si je désactive manuellement le cahceing, cela affiche les derniers effets de code. Y a-t-il quelque chose que je peux mettre dans le code pour que Browker ne cache pas de contenu? Tout conseil s'il vous plaît

asp.net.nethtmlcssxhtml
17
haansi

Vous pouvez ajouter un paramètre de requête aléatoire à l'URL de la feuille de style (par exemple via JavaScript ou le code côté serveur). Cela ne changera pas le fichier css en cours de chargement, mais cela empêchera la mise en cache, car le navigateur détecte une autre URL et ne chargera pas la feuille de style mise en cache.

<link rel="stylesheet" type="text/css" href="http://mysite/style.css?id=1234">
31
magnattic

Vous pouvez créer une classe avec la méthode GetVersion qui renverra la version de votre application (ou, par exemple, le numéro de build ou la date de build). 

Pour une application asp.net dans le balisage, vous pouvez ensuite spécifier quelque chose comme ceci:

<script src="Scripts/some.js?version=<%= Common.GetVersion%>" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="~/styles/Style.css?version=<%= Common.GetVersion%>" />

Cela forcera le navigateur à recharger des fichiers, car une partie de l'URL des fichiers statiques sera modifiée à chaque génération (ou au moins à chaque version).

4
Maxim Kornilov

Si vous utilisez Chrome comme navigateur de développement, vous avez le choix entre 2 options:

1) Lorsque vous maintenez le bouton reload page enfoncé pendant une seconde, un menu apparaît et vous offre la possibilité de recharger une page en dur.

2) Dans les paramètres de l'inspecteur, vous pouvez forcer le navigateur à ne jamais mettre les fichiers en cache.

enter image description here

Je pense qu'il est plus facile, plus rapide et moins difficile de traiter ce problème en désactivant la mise en cache sur le navigateur que dans la configuration du serveur.

3
frenchie

Sans capture: Placez les chaînes interchangeables à la fin du chemin css, comme ci-dessous:

<link rel="stylesheet" type="text/css" href="style.css?2016-12-3:10 13 30"/>

Actualiser lorsque la version change:

<link rel="stylesheet" type="text/css" href="style.css?v=1.1.0"/>
1
Kris Roofe

Cela peut être fait via un fichier .htaccess. Placez ce code dans un fichier nommé .htaccess à la racine de votre site web:

<filesMatch "\.(html|htm|js|css)$">
FileETag None
<ifModule mod_headers.c>
Header unset ETag
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
</ifModule>
</filesMatch>
0
Wes Cossick

Vous pouvez utiliser un identifiant de version aléatoire dans votre lien. par exemple utilisez ceci:

<link   href=<%="'mystyle.css?version="+ DateTime.Now.ToString("yyyyMMddhhmmss") +"'"%>   rel="stylesheet" type="text/css"/>

où myStyle.css est un fichier de feuille de style et la fonction DateTime.Now.ToString ("yyyyMMddhhmmss") utilisée pour générer un identifiant de version différent aléatoire. En utilisant cet identifiant de version aléatoire, le navigateur est forcé de recharger vos fichiers CSS.

0
hojjat.mi