Comment puis-je empêcher la mise en cache des fichiers CSS par le navigateur et le serveur ?

Empêcher la mise en cache des fichiers CSS par le navigateur et le serveur

Lors du développement d'un site Web, il est souvent frustrant d'apporter des modifications CSS qui ne reflètent pas immédiatement dans le navigateur. Cela est probablement dû à la mise en cache effectuée à la fois par le navigateur et le serveur.

Apache met-il en cache les fichiers CSS ?

Oui, Apache met en cache les ressources par défaut. Pour vérifier si votre serveur Apache met en cache les fichiers CSS, vous pouvez activer le débogage en ajoutant la ligne suivante à votre fichier .htaccess :

LogFormat "%r %s %b %H" debuglog
CustomLog "| tail -f /dev/stderr -" debuglog

Rechargez la page et consultez le journal de débogage pour la ligne suivante :

GET /css/main.css 200 7122 0

Le dernier chiffre, « 0 », indique que le fichier a été servi à partir du cache.

Empêcher la mise en cache

Il existe plusieurs méthodes pour empêcher la mise en cache des fichiers CSS :

1. Ajouter une chaîne de requête au nom de fichier

Vous pouvez ajouter une chaîne de requête aléatoire à la fin du nom de fichier CSS, forçant le navigateur à télécharger le fichier au lieu d'utiliser la version mise en cache. Par exemple :

<link rel="stylesheet" type="text/css" href="style.css?v=2" />

2. Utiliser un en-tête Cache-Control

Vous pouvez ajouter un en-tête "Cache-Control" à la réponse HTTP, spécifiant la durée pendant laquelle le navigateur doit mettre en cache le fichier. Par exemple :

header("Cache-Control: no-cache, no-store, must-revalidate");
header("Pragma: no-cache");

3. Utilisez mod_headers dans Apache

Pour les serveurs Apache, vous pouvez utiliser le module mod_headers pour empêcher la mise en cache. Ajoutez la ligne suivante à votre fichier .htaccess :

Header set Cache-Control "max-age=0, s-maxage=0, must-revalidate"

4. Appeler CSS avec un numéro de version

Une approche courante utilisée par de nombreux sites Web consiste à appeler CSS avec un numéro de version. Lorsque vous mettez à jour le CSS, augmentez le numéro de version, obligeant les navigateurs à charger le nouveau fichier. Par exemple :

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

Lorsque vous mettez à jour le CSS, remplacez "v=1" par "v=2".

En implémentant une ou plusieurs de ces méthodes, vous pouvez vous assurer que vos modifications CSS sont immédiatement répercutées dans le navigateur, même sur les serveurs de production.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!