28172 sujets

CSS et mise en forme, CSS3

Cache sous firefox (?)

Bonjour à tous,

quelques internautes m'ont fait part d'un problème de mise en forme de pages de chacunsonjeu.net, site que nous venons de mettre à jour.

Pour exemple : http://www.chacunsonjeu.net/jeux/page/631/7-wonders

Il semblerait que ce souci survienne sur la mise en forme de la zone "Avis des membres". C'est en échangeant des screens que nous avons fini par comprendre leurs réactions.

Pour faire simple, dans le header

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
	
	<meta http-equiv="Content-Language" content="fr" />
	
	<link href="http://fonts.googleapis.com/css?family=Oxygen" rel="stylesheet" type="text/css" />
	
	<link rel="icon" type="image/png" href="http://www.chacunsonjeu.net/images/favicon.png" />

	<link rel="stylesheet" type="text/css" href="http://www.chacunsonjeu.net/css/reset.css" media="all" />
	<link rel="stylesheet" type="text/css" href="http://www.chacunsonjeu.net/css/site.css" media="all" />

	<link rel="alternate" type="application/rss+xml" title="RSS Actualités" href="http://www.chacunsonjeu.net/rss/actualite" />
	<link rel="alternate" type="application/rss+xml" title="RSS Jeux" href="http://www.chacunsonjeu.net/rss/jeux" />
	<link rel="alternate" type="application/rss+xml" title="RSS Agenda" href="http://www.chacunsonjeu.net/rss/agenda" />
	<link rel="alternate" type="application/rss+xml" title="RSS Pages" href="http://www.chacunsonjeu.net/rss/pages" />
	
	<script type="text/javascript" src="http://www.chacunsonjeu.net/javascript/jquery-1.7.1.min.js"></script>
	
	<title>7 Wonders sur chacun son jeu - fiche du jeu de société.</title>	
	<meta name="description" content="Prenez la t&ecirc;te de l'une des sept grandes cit&eacute;s du monde Antique. Exploitez les ressources naturelles de vos terres, participez &agrave; la marche en avant du progr&egrave;s, d&eacute;veloppez vos relations commerciales et affirmez votre supr&eacute;matie militaire. Laissez votre empreinte dans&#8230;" />	
	
	<link rel="stylesheet" type="text/css" href="http://www.chacunsonjeu.net/css/game.css" media="all" />


la seconde css (game.css) semble donc omise. C'est elle qui définit la mise en forme des commentaires :

.game-content-line {min-height: 75px;padding: 10px 0 10px 80px;font-size: 90%;color: #666;line-height: 150%;background: transparent url(../images/game-content.bg.jpg) no-repeat 0 10px;}

.game-comment-line {margin: 10px 0 10px 0;padding: 10px 0 10px 0;border-bottom: 1px solid #eee;}
.game-comment-author {color: #333;}
.game-comment-date {font-size: 80%;color: #999;}
.game-comment-rating {float: left;padding: 10px;font-size: 150%;color: #999;background: #eee none;border-radius: 8px;-moz-border-radius: 8px;-webkit-border-radius: 8px;}
.game-comment-text {margin: 0 0 0 80px;font-size: 90%;}


Bien qu'il y ait eu une mise à jour du site, elle ne s'est pas faite en plusieurs étapes. Tout le contenu HTML et CSS a été revu. Je ne comprend donc pas ce problème "partiel" que rencontrent certains internautes.

Il semblerait que ce soit exclusivement sur Firefox, à priori version 13.0 puisqu'ils suivent les mises à jour (si je suis à la page).

Un grand merci pour les éclaircissements que vous pourrez m'apporter.

Cordialement,
Bonjour,

Pas noté de différence entre Firefox et Chrome sur cette page. (Mais c'était peut-être un détail bien particulier et difficile à remarquer si on ne sait pas où chercher dans la page?)

Si suite à une mise à jour des utilisateurs ne semblent pas voir la dernière version d'un fichier (game.css en l'occurrence), effectivement c'est probablement un problème de cache. Apparemment tu n'envoies pas d'en-tête HTTP Expires.

Une technique souvent utilisée c'est d'envoyer un Expires loin dans le futur (pour «forcer» le navigateur à mettre le fichier en cache et éviter les requêtes HTTP inutiles qui ralentissent le chargement des pages), et d'ajouter un numéro de version aux fichiers, éventuellement via un paramètre GET dans l'URL:
<link rel="stylesheet" type="text/css" href="/css/game.css?v=45" />

C'est une technique qui demanderait plus d'explications donc je te laisse chercher un tutoriel qui va bien. Smiley smile
L'avantage c'est que comme ta page HTML n'est pas mis en cache (du moins avec les paramètres les plus courants des serveurs et des navigateurs), quand tu changes le numéro de version dans le code HTML le navigateur voit une URL différente et n'utilise donc pas la version qu'il avait déjà en cache.
(Et même sans mettre en place une politique de gestion du cache avec Expires tu peux, dans l'immédiat, utiliser cette astuce pour signaler aux navigateurs que ton fichier game.css a changé.)
Modifié par fvsch (14 Jun 2012 - 10:58)
Bonjour et merci pour ta réponse !

Je n'avais pas jugé utile de le faire car il n'y avait aucune correspondance avec une feuille de style game.css dans la précédente version.

On va voir si ce ne sont que des cas isolés... Ce problème me laisse perplexe.

On remarque vite le soucis sur la page car la mise en forme est quasi inexistante. Pas de hiérarchie de titres, etc.

Bonne journée,
Sujet clos
Aller à