Les images de feuilles de style ne sont pas rechargées par Firefox ou Safari

Question

Nous avons découvert que Firefox (au moins v3) et Safari ne mettaient pas correctement en cache les images référencées à partir d'un fichier CSS. Les images sont mises en cache, mais elles ne sont jamais actualisées, même si vous les modifiez sur le serveur. Une fois que Firefox a l'image dans le cache, il ne vérifiera jamais si elle a changé.

Notre fichier css ressemble à ceci:

div#news {
  background: #FFFFFF url(images/newsitem_background.jpg) no-repeat;
  ...
}

Le problème est que si nous modifions maintenant l'image newsitem_background.jpg, tous les utilisateurs de Firefox obtiendraient toujours l'ancienne image, à moins qu'ils ne rafraîchissent explicitement la page. IE, d’autre part, détecte que l’image a changé et la recharge automatiquement.

Est-ce un problème connu? Des solutions de contournement? Merci!

EDIT: La solution n’est pas d’appuyer sur F5. Je peux le faire. Mais nos clients se contentent de visiter notre site Web et d’obtenir les anciens graphiques obsolètes. Comment sauraient-ils qu'ils doivent appuyer sur F5?

J'ai installé Firebug et confirmé ce que je soupçonnais déjà: Firefox n’essaye même pas de récupérer les images référencées à partir d’un fichier css, pour savoir si elles ont été modifiées. Lorsque vous appuyez sur F5, toutes les images sont vérifiées et le serveur Web répond correctement par 304, à l'exception de celles pour lesquelles ont changé, où il répond avec 200 OK.

Alors, y a-t-il moyen d'inciter Firefox à mettre à jour automatiquement une image référencée à partir d'un fichier CSS? Je ne suis sûrement pas le seul à avoir ce problème?

EDIT2: J'ai testé cela avec localhost, et la réponse de l'image ne contient aucune information de mise en cache, il s'agit de:

Server  Microsoft-IIS/5.1
X-Powered-By    ASP.NET
Date    Tue, 14 Oct 2008 11:01:27 GMT
Content-Type    image/jpeg
Accept-Ranges   bytes
Last-Modified   Tue, 14 Oct 2008 11:00:43 GMT
Etag    "7ab3aa1aec2dc91:9f4"
Content-Length  61196

EDIT3: J'ai lu un peu plus de lecture et il semble que cela ne puisse pas être corrigé, car Firefox, ou la plupart des navigateurs, suppose qu'une image ne change pas très souvent (expiration de l'en-tête et de tous).

Answer 1

Je voudrais juste ajouter une valeur de chaîne de requête à l'URL de l'image. Habituellement, je crée simplement un "numéro de version". et l'incrémente à chaque changement d'image:

div#news {
  background: url(images/newsitem_background.jpg?v=00001) no-repeat;
  ...
}

Answer 2

Pour éviter ce problème, j'ai constaté que des webmasters ajoutaient un numéro de version à leurs fichiers. Ils chargent donc site-look-124.css et newsitem_background-7.jpg.

Pas une mauvaise solution, à mon humble avis.

Answer 3

Vérifiez vos en-têtes HTTP sur les images que vous diffusez, ainsi que le ou les fichiers CSS.

Si certains d'entre eux sont configurés en cache (ou sont manquants), vous constaterez que le navigateur met correctement en cache le ou les fichiers.

Answer 4

Je sais que ce n’est probablement pas ce que vous voulez entendre, mais il est beaucoup plus probable que Firefox respecte la norme et que IE fasse quelque chose de légèrement étrange (et il se trouve que vous en dépendez;)).

Le comportement de la mise en cache dépend des en-têtes de mise en cache envoyés avec vos images. Si vous êtes en mesure de publier les en-têtes (ou une URL vers l'une des images), nous pourrons alors vous informer plus précisément de ce qui se passe.

Answer 5

Cela ne résoudra pas le problème que Firefox ne vérifie pas si l'image a expiré, mais que vous pouvez faire pour que vos clients voient la bonne image:

Définissez l'image dans le fichier CSS comme un script PHP ou similaire qui renvoie l'image:

div#news {
  background: #FFFFFF url(images/background.php?name=newsitem) no-repeat;
  ...
}

Utilisez ensuite le script pour renvoyer l'image "

<?php
$name = isset(
 Cela ne résoudra pas le problème que Firefox ne vérifie pas si l'image a expiré, mais que vous pouvez faire pour que vos clients voient la bonne image: 

 Définissez l'image dans le fichier CSS comme un script PHP ou similaire qui renvoie l'image: 

div#news {
  background: #FFFFFF url(images/background.php?name=newsitem) no-repeat;
  ...
}


 Utilisez ensuite le script pour renvoyer l'image " 

<*>

 Je l’utilise sur mon serveur domestique pour renvoyer au hasard une image d’arrière-plan pour certaines de mes pages, et Firefox ne semble pas les mettre en cache. Si vous le souhaitez, vous pouvez également créer des images amusantes. 
REQUEST['name']) ? 
 Cela ne résoudra pas le problème que Firefox ne vérifie pas si l'image a expiré, mais que vous pouvez faire pour que vos clients voient la bonne image: 

 Définissez l'image dans le fichier CSS comme un script PHP ou similaire qui renvoie l'image: 

div#news {
  background: #FFFFFF url(images/background.php?name=newsitem) no-repeat;
  ...
}


 Utilisez ensuite le script pour renvoyer l'image " 

<*>

 Je l’utilise sur mon serveur domestique pour renvoyer au hasard une image d’arrière-plan pour certaines de mes pages, et Firefox ne semble pas les mettre en cache. Si vous le souhaitez, vous pouvez également créer des images amusantes. 
REQUEST['name'] : false;
switch($name) {
    case 'newsitem':
        $filename = 'news_item_background.jpg';
    break;
    default:
        $filename = 'common_background.jpg';
    break;
}

header("Content-Type: image/jpeg");
header("Content-Transfer-Encoding: binary");
$fp = fopen($filename , "r");
if ($fp) fpassthru($fp);

Je l’utilise sur mon serveur domestique pour renvoyer au hasard une image d’arrière-plan pour certaines de mes pages, et Firefox ne semble pas les mettre en cache. Si vous le souhaitez, vous pouvez également créer des images amusantes.

Answer 6

Une autre solution rapide (si cela se produit principalement au milieu de la conception Web) consiste à afficher la page css réelle dans Firefox et à la recharger, puis lorsque vous revenez sur le site Web, le navigateur lira le fichier css actuel. page.

bien sûr, ceci est un correctif temporaire juste pour le concepteur Web

Answer 7

Essayez de maintenir la touche MAJ enfoncée tout en cliquant sur recharger (ou appuyez sur F5 ).

Sinon, utilisez un outil tel que Firebug pour vérifier les en-têtes de requête / réponse HTTP et observer les valeurs d'en-tête qui contrôlent la mise en cache. Je n'ai jamais remarqué ce problème. Votre serveur renvoie peut-être une réponse 304 (non modifiée).