CSS no se actualiza en el navegador cuando lo cambio


14

Estoy trabajando en el CSS de mi sitio de WordPress. Cuando hago cambios y actualizo la página, los cambios no se reflejan. Cuando borro el historial del navegador y el caché, los cambios aún se reflejan. Cuando veo el código fuente de la página y miro el archivo CSS, tiene el contenido anterior antes del cambio. ¿Cómo hago para que esto se actualice y pueda desarrollar?


¿Tiene un complemento de almacenamiento en caché en ejecución? Sus archivos CSS podrían almacenarse en caché en el servidor.
Pat J

No parece que tenga un complemento de almacenamiento en caché.
David Tunnell

¿Funciona si no estás usando WordPress? Por ejemplo, un archivo llamado test.htmly un .cssarchivo asociado ?
Pat J

Si alguna de las respuestas lo ayudó a resolver el problema, ¡asegúrese de aceptarlo!
mrwweb

Respuestas:


14

Agregue un número de versión aleatorio al final del archivo css que está adjuntando. Si está utilizando las funciones ' wp_enqueue_style ' o wp_register_style , pase un número aleatorio (versión) rand(111,9999)al cuarto parámetro. Si está adjuntando css como una etiqueta html, debe agregar " ?ver=<?php echo rand(111,999)?>" al final del nombre del archivo. Los ejemplos están aquí

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

o

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

Evitará el almacenamiento en caché en el almacenamiento en caché del cliente y posiblemente también el almacenamiento en caché del servidor.


7

Sé que esta publicación tiene más de un año, pero pensé que mencionaría que CloudFlare almacena en caché archivos estáticos como css, js e imágenes para ayudar a acelerar los tiempos de carga. Algo que solo tardé horas en descubrir, ya que tenía problemas con mis cambios de CSS que no se reflejaban en la recarga. CloudFlare tiene modo de desarrollo que puede habilitar durante 3 horas. Si olvida habilitarlo antes de comenzar a realizar modificaciones, puede purgar la memoria caché de la administración de Cloudflare.


1
CloudFlare piensa que si existe ?ver=, el archivo no se puede actualizar.
hlcs

¿Dice que cada vez que hago un cambio en CSS, javascript, necesito purgar el caché de Cloudfare? ¿Qué hace realmente este modo de desarrollo? Thnx
Tanvir

0

Es posible que su host esté usando algo como Varnish para almacenar en caché la salida de su sitio. Me encontré con esto con el sitio de un cliente alojado en una cuenta de alojamiento compartido de tarifa reducida. El único remedio que encontré fue ser paciente.


0

Si está utilizando un tema secundario, es posible que necesite poner en cola la hoja de estilo del tema secundario para ver los cambios de inmediato. Esto resolvió mi problema.


0

Solo quiero señalar: asegúrese de tener en cuenta los complementos de almacenamiento en caché que haya instalado. WP Fastest Cache , por ejemplo, puede crear este problema si no recuerda iniciar sesión en el panel de WP y hacer clic en "Borrar caché -> Eliminar caché y CSS / JS minimizado" en el menú de navegación.


0

Esto tal vez viejo. Pero necesito apoyar a alguien que pueda estar buscando ayuda. Tuve el mismo problema y revisé mis complementos. Había un plugin "w3 total cache" que acelera la carga. Ese es el complemento de caché del lado del servidor, así que lo deshabilité. Los cambios de CSS son visibles nuevamente en tiempo real. Hay muchos complementos de carga de refuerzo. Así que revise su lista de complementos y desactívelos hasta que termine el desarrollo.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.