Les modifications CSS ne s'affichent pas

Dans cet article

Si vous modifiez les fichiers CSS de votre site et que vous avez effacé le cache WP Rocket, mais que vous ne voyez pas les changements de suite, c'est parce qu'ils restent bloqués dans le cache de votre navigateur. Vous remarquerez que, peu importe combien de fois vous effacez le cache WP Rocket, vous voyez toujours l'ancien fichier, vous ne pourrez le voir qu'après avoir effacé le cache de votre navigateur.

Mise en cache du navigateur

Pour plus d'informations sur la mise en cache du navigateur, vous pouvez lire cet article (EN) :   
https://wp-rocket.me/blog/browser-caching-explained-in-plain-english/

Pour vous donner un bref aper√ßu du probl√®me et de ce qui se passe :

Disons que vous avez un fichier : style.css
Lorsque vous visitez votre site Web, votre navigateur t√©l√©charge ce fichier et en conserve une copie dans son cache local, c'est-√†-dire qu'il se retrouve sur votre ordinateur, dans ce navigateur, et pas dans le cache WP Rocket.

Lorsque vous mettez à jour ce fichier CSS, vous devez informer votre navigateur qu'il a été mis à jour, sinon il vous dira: "J'ai déjà style.css, pas besoin de le télécharger à nouveau, il est là... voilà !" Et il vous montre l'ancienne version.

Pour éviter ça, généralement les fichiers ont un numéro de version ajouté comme ceci :

style.css? ver=1

Et lorsque le fichier est mis √† jour, la version est aussi mise √† jour: style.css? ver=1.1

Ceci permet au navigateur de savoir quand télécharger la nouvelle version au lieu de réutiliser l'ancienne version en cache. C'est le busting du cache navigateur.

Comment fonctionne le Busting du Cache navigateur

Le plus important est de toujours de s'assurer que le numéro de version est mis à jour. Vous pouvez le faire en changeant simplement le numéro de version en haut de votre feuille de style après avoir effectué une modification :

Cette version sera refl√©t√©e dans la nouvelle cha√ģne de requ√™te ( query string), appelant le navigateur √† t√©l√©charger cette nouvelle version.

Si vous utilisez l'option  "Ressources Statiques" de WP Rocket, la mise √† jour de la version de la feuille de style poussera le plugin √† g√©n√©rer une nouvelle version de votre feuille de style sans query string. Ainsi, vos visiteurs verront toujours la derni√®re version.

Notre option Ressources Statiques encode le num√©ro de version dans le nom de fichier pour buster le cache du navigateur. Si vous utilisez un plugin diff√©rent pour supprimer les cha√ģnes de requ√™te sur vos fichiers, il le fera probablement de mani√®re incorrecte, en supprimant simplement la cha√ģne de requ√™te sans fournir de moyen de buster le cache, vous ne devriez donc plus l'utiliser ;)

REMARQUE : si vous avez d'autres niveau de cache comme CloudFlare, CloudProxy de Sucuri ou un autre service CDN, etc., vous devrez peut-être effacer les caches de ceux-ci pour voir vos dernières mises à jour CSS.

Themes particuliers - Genesis, X Theme etc

Lorsque vous utilisez certains th√®mes, comme la Genesis et ses th√®mes enfants, vous devez faire quelque chose d'un peu diff√©rent pour mettre √† jour la version de la feuille de style. Lors de l'utilisation d'un th√®me enfant Genesis, le num√©ro de version dans la cha√ģne de requ√™te est par d√©faut le num√©ro de version du th√®me parent. C'est probl√©matique car m√™me si vous mettez √† jour votre version de th√®me enfant, cela ne modifiera pas la cha√ģne de requ√™te. 

Avec Genesis, vous devez ajouter la ligne suivante à votre functions.php puis y mettre à jour le numéro de version, et non pas dans la feuille de style :

define( 'CHILD_THEME_VERSION', '2.1.8' );

Avec X Theme, vous devez faire quelque chose de similaire, vous trouverez ici les d√©tails :  https://theme.co/apex/forums/topic/cache-busting-child-theme-stylesheet-custom-version-query-string/