Las actualizaciones de css se llaman

Css no se actualiza en localhost

Estoy desarrollando un sitio web basado en el código fuente de WordPress a través de XAMPP. A veces cambio el código CSS, los scripts o alguna otra cosa y noto que mi navegador tarda en aplicar las modificaciones. Esto me lleva a usar varios navegadores para refrescar uno y si no aplica los nuevos estilos pruebo con el segundo y siempre es así.

Si quieres evitar eso en el lado del cliente puedes añadir algo como ?v=1.x al enlace del archivo css, cuando se cambie el contenido del archivo. por ejemplo si había <link rel=»stylesheet» type=»text/css» href=»css-file-name.css»> puedes cambiarlo por <link rel=»stylesheet» type=»text/css» href=»css-file-name.css?v=1.1″> esto saltará la caché.

Si está en modo de desarrollo (como en la pregunta original), el mejor enfoque es desactivar el almacenamiento en caché en el navegador a través de etiquetas meta HTML. Para que este enfoque sea universal, debe insertar al menos tres metaetiquetas como se muestra a continuación.

Asegúrese de que esto no está ocurriendo desde su DNS. Por ejemplo Cloudflare lo tiene donde puedes activar el modo de desarrollo donde fuerza una purga en tus hojas de estilo e imágenes ya que Cloudflare ofrece caché acelerada. Esto lo deshabilitará y obligará a actualizar cada vez que alguien visite su sitio.

Estándar css

CSS está diseñado para permitir la separación de la presentación y el contenido, incluyendo el diseño, los colores y las fuentes[3]. Esta separación puede mejorar la accesibilidad del contenido; proporcionar más flexibilidad y control en la especificación de las características de la presentación; permitir que múltiples páginas web compartan el formato especificando el CSS relevante en un archivo .css separado, lo que reduce la complejidad y la repetición en el contenido estructural; y permitir que el archivo .css se almacene en la caché para mejorar la velocidad de carga de la página entre las páginas que comparten el archivo y su formato.

La separación del formato y el contenido también hace posible presentar la misma página de marcado en diferentes estilos para diferentes métodos de representación, como en pantalla, en impresión, por voz (a través de un navegador basado en el habla o un lector de pantalla) y en dispositivos táctiles basados en Braille. CSS también tiene reglas para alternar el formato si se accede al contenido en un dispositivo móvil[4].

Las especificaciones CSS son mantenidas por el Consorcio de la World Wide Web (W3C). El tipo de medio de Internet (tipo MIME) text/css está registrado para su uso con CSS mediante el RFC 2318 (marzo de 1998). El W3C dispone de un servicio gratuito de validación de documentos CSS[5].

Css4

Usar simplemente las herramientas de desarrollador para deshabilitar la caché funcionará durante el desarrollo, pero si su flujo de trabajo se basa en poner cosas en línea con frecuencia, eventualmente se enfrentará a una situación en la que ya no podrá controlar qué versión de su código CSS ven sus visitantes (y no puede contar con que usen sus herramientas de desarrollador para deshabilitar la caché).

Para evitar que esto ocurra, debes utilizar una técnica llamada «cache busting», que esencialmente significa que añadirás cosas a tus URLs de recursos que cambiarán cada vez que tus archivos de recursos cambien. Esencialmente su URL CSS se transformará en esto

2) Cuando el navegador reciba la respuesta, simplemente tendrá que tratar esa solicitud de CSS como un nuevo recurso si la marca de tiempo añadida no coincide con la de la caché (el recurso con un nombre diferente siempre se trata como una nueva solicitud).

NOTA: En realidad prefiero incluir las marcas de tiempo en el propio nombre del archivo, así que en lugar de /css/main.min.css?1422585377 prefiero usar /css/main-1422585377.min.css porque algunos servidores proxy como Squid tienden a ignorar las cadenas de consulta y tratarán sólo la parte del nombre del archivo como relevante.

Archivo css

Si eres un principiante y estás desarrollando HTML y CSS usando una hoja de estilos externa, puedes notar que en algunos navegadores, bajo algunas circunstancias, los cambios que has hecho en tu CSS no tienen efecto inmediatamente.

A veces es necesario hacer una actualización fuerte para que las actualizaciones surtan efecto. Pero es poco probable que los usuarios promedio de la web sepan lo que es un hard refresh, ni puedes esperar que sigan refrescando la página hasta que las cosas se arreglen.

El navegador verá un nombre de archivo style.css como diferente de un nombre de archivo style.css?v=1.1, por lo que generalmente forzará al navegador a actualizar el CSS. Por lo tanto, cada vez que actualice su CSS en el servidor, puede actualizar su número de versión de forma incremental.

Si no conoces las cadenas de consulta, debes saber que la parte que precede al signo de igual es como un marcador de posición, y la parte que sigue al signo de igual es el valor que se pone en ese marcador de posición. Esto no tendrá ningún efecto en el CSS. Sólo servirá para que el navegador piense que es un archivo completamente diferente.

Podrías añadir muchos tipos de caracteres al valor de la cadena de consulta, pero los números son una forma lógica de hacerlo, porque entonces puedes simplemente aumentar el número, e incluso añadir decimales si quieres. Y, por supuesto, si no cambias el valor durante un tiempo, el navegador seguirá almacenando en caché (o preservando) el archivo, y no intentará descargarlo a menos que otros factores le obliguen a hacerlo, o que acabes actualizando el valor de la cadena de consulta.