Cómo evitar que los navegadores guarden en caché los archivos CSS?

Question

Cuando hago una página, enlace en un archivo CSS, y abrirlo en un navegador, que funciona bien. Pero si realiza un cambio y actualiza la página nuevamente entre periodos de tiempo muy cortos, el cambio no se refleja. Pero después de algún tiempo, cuando actualizo la página nuevamente, aparecen los cambios.

Así que, de alguna manera el navegador mantiene el caché de archivos CSS y expira después de algún tiempo. Cómo hacer que la memoria caché del navegador no contenga ningún archivo CSS o HTML. Sería mejor si puedo bloquearlo en un dominio en particular.

estoy en Ubuntu, usando Chrome y Firefox, tratando de evitar que los navegadores de almacenamiento en caché de archivos CSS en 'localhost' ... Como hacerlo ...

Gracias ...

Answer 1

Puede abrir Herramientas de desarrollador presionando Ctrl+Shift+J y luego encontrará un ícono de engranaje en la esquina inferior derecha. Cuando hace clic en él, debería ver una opción para desactivar el almacenamiento en caché.

Answer 2

Sería de gran ayuda para saber cómo está alojado el sitio web, como se puede configurar esto en la mayoría de los servidores web.

Además, es una buena idea para introducir un mecanismo de almacenamiento en caché que modificaría los enlaces a los archivos CSS en cuestión cuando se cambia el contenido de los archivos CSS. Los navegadores luego volverían a cargar el archivo CSS porque el HTML se refiere a una URL diferente.

Un buen ejemplo de un almacenamiento en memoria caché mecanismo es el rubí en los carriles 3,1 tubería de activos que también le resta archivos y los gzips si el navegador compatible con ellas:

Rails 3 - Asset Pipeline -- What does it mean to me?

http://2beards.net/2011/11/the-rails-3-asset-pipeline-in-about-5-minutes/

Answer 3

Algo tan sencillo como esto debería funcionar:

<link rel="stylesheet" src="/css/screen.css?v={CURRENT_TIMESTAMP}"> 

Simplemente reemplace {CURRENT_TIMESTAMP} ingenio h la marca de tiempo real en el código del lado del servidor. Esto hace que el navegador piense que es un archivo nuevo debido a la cadena de consulta y se volverá a descargar. También puede usar el tiempo de modificación real del archivo (filemtime('/path/to/css/screen.css') si está usando PHP) que debería evitar descargas innecesarias.

Answer 4

El enfoque sólido aparentemente poco elegante, pero la roca es dar el activo un nuevo nombre, cuando cambia el contenido. Esto resuelve el problema para todos los usuarios, no sólo a ti:

<link rel="stylesheet" src="/css/screen_034.css"> 
<link rel="stylesheet" src="/css/screen_035.css"> 
<link rel="stylesheet" src="/css/screen_036.css"> 

O tal vez (pero es más de un dolor de cambiar en un IDE, y en ocasiones causa problemas no relacionados con el almacenamiento en caché):

<link rel="stylesheet" src="/css/screen.css?pretend_version_number=034"> 

Nada más funciona tan bien en entornos de producción a gran escala, donde millones de copias de un archivo CSS anterior pueden estar almacenadas en cachés intermedios o de navegador. Algunos clientes ignoran los encabezados de control de caché, y realmente no quiere que el almacenamiento en caché sea subvertido de todos modos, al menos no en producción.

En el desarrollo puede pulsar Ctrl + Shift + J (cromo) y desactivar la caché.