CSS ne se met pas à jour dans le navigateur quand je le change

14

Je travaille sur le CSS de mon site wordpress. Lorsque j'apporte des modifications et actualise la page, les modifications ne sont pas reflétées. Lorsque j'efface l'historique du navigateur et le cache, les modifications sont toujours reflétées. Quand je vois le code source de la page et regarde le fichier css, il a l'ancien contenu avant le changement. Comment obtenir cette mise à jour pour que je puisse développer?

David Tunnell
la source
Avez-vous un plugin de mise en cache en cours d'exécution? Vos fichiers CSS peuvent être mis en cache sur le serveur.
Pat J
Il ne semble pas que j'ai un plugin de mise en cache.
David Tunnell
Cela fonctionne-t-il si vous n'utilisez pas WordPress? Par exemple, un fichier appelé test.htmlet un .cssfichier associé ?
Pat J
Si l'une des réponses vous a aidé à résoudre le problème, assurez-vous de l'accepter!
mrwweb

Réponses:

14

Ajoutez un numéro de version aléatoire à la fin du fichier css que vous joignez. Si vous utilisez les fonctions ' wp_enqueue_style ' ou wp_register_style , passez un nombre aléatoire (version) rand(111,9999)au 4e paramètre. Si vous joignez css en tant que balise html, vous devez ajouter " ?ver=<?php echo rand(111,999)?>" à la fin du nom de fichier. Des exemples sont ici

wp_register_style( 'custom-style', get_template_directory_uri() . '/css/custom-style.css', array(), rand(111,9999), 'all' );

ou

<link rel="stylesheet" type="text/css" href="http://website.com/css/custom-style.css?ver=<?php echo rand(111,999)?>">

Cela évitera la mise en cache à la fin de la mise en cache du client et éventuellement la mise en cache du serveur.

MONSIEUR
la source
7

Je sais que ce message a plus d'un an, mais j'ai pensé mentionner que CloudFlare met en cache des fichiers statiques tels que css, js et images pour aider à accélérer les temps de chargement. Quelque chose que j'ai juste pris des heures à comprendre, car j'avais des problèmes avec mes modifications CSS qui ne réfléchissaient pas au rechargement. CloudFlare dispose d'un mode de développement que vous pouvez activer pendant 3 heures. Si vous oubliez de l'activer avant de commencer à apporter des modifications, vous pouvez purger le cache de la gestion cloudflare.

Shanan
la source
1
CloudFlare pense que s'il existe, le ?ver=fichier ne peut pas être mis à jour.
hlcs
Dites-vous que chaque fois que je modifie CSS, javascript, j'ai besoin de purger le cache Cloudfare? Que fait réellement ce mode de développement? Thnx
Tanvir
0

Il est possible que votre hébergeur utilise quelque chose comme Varnish pour mettre en cache la sortie de votre site. J'ai rencontré cela avec le site d'un client hébergé sur un compte d'hébergement partagé à taux réduit. Le seul remède que j'ai trouvé était simplement d'être patient.

Jeff Purcell
la source
0

Si vous utilisez un thème enfant, il est possible que vous deviez mettre en file d'attente la feuille de style de thème enfant afin de voir les changements immédiatement. Cela a résolu mon problème.

Ramón Puig
la source
0

Je veux juste souligner - assurez-vous d'être attentif aux plugins de mise en cache que vous avez installés. WP Fastest Cache , par exemple, peut créer ce problème si vous ne vous souvenez pas de vous connecter au tableau de bord WP et de cliquer sur "Clear Cache -> Delete Cache and Minified CSS / JS" dans le menu de navigation.

HappyHands31
la source
0

C'est peut-être vieux. Mais je dois soutenir quelqu'un qui peut chercher de l'aide. J'ai eu le même problème et j'ai vérifié mes plugins. Il y avait un plugin "w3 total cache" qui accélère le chargement. C'est le plugin de cache côté serveur, donc je l'ai désactivé. Les modifications CSS sont à nouveau visibles en temps réel. Il existe de nombreux plugins de chargement. Vérifiez donc votre liste de plugins et désactivez-les jusqu'à la fin du développement.

Gimhana Jayasekara
la source