Saltar al contenido

Los cambios de CSS no se reflejan. ¿Por qué?

Solución:

Esto significa que tu La regla CSS no se aplica o que tu El archivo CSS está almacenado en caché.

Las posibles causas son:

  • una regla CSS con una mayor especificidad está ganando la regla que espera que se aplique
  • una regla CSS con la misma especificidad es cargado después de tu
    (el orden de declaración cuenta, el último gana, así que verifique las importaciones de su archivo CSS)
  • utiliza una regla de CSS dirigida a su objeto los !important palabra clave.

Inspeccionar cómo se aplican las reglas a través de las herramientas de desarrollo del navegador (abrir con F12).

INSINUACIÓN: En el panel CSS, las reglas se enumeran por importancia en orden descendente.

  • tu CSS tiene errores de sintaxis
  • tu HTML es no bien formado

Usa algún validador.

  • su navegador está almacenando en caché el archivo CSS

Forzar la actualización del recurso almacenado en caché del navegador presionando CONTROLF5.

INSINUACIÓN: Esta sesión de preguntas y respuestas explora el tema.

  • su servidor está almacenando en caché el archivo CSS

Forzar la actualización del recurso en caché del servidor ingresando la URL de los recursos estáticos en la barra de direcciones y presionando CONTROLF5 sobre ese página (que es el archivo CSS).

INSINUACIÓN: Para abrir la URL del archivo CSS rápidamente, use Abrir enlace en una pestaña nueva desde las herramientas de desarrollo del navegador, o haga clic en el enlace CSS en el HTML abierto con Ver fuente.

Básicamente, se enfrenta a un problema de almacenamiento en caché en el que su navegador no tiene ganas de solicitar la nueva versión del servidor y, en su lugar, utiliza la que está almacenada en la caché interna del navegador.

El simple hecho de usar herramientas de desarrollador para deshabilitar el caché funcionará durante el desarrollo, pero si su flujo de trabajo se basa en poner cosas en línea con frecuencia, eventualmente enfrentará una situación en la que ya no tendrá el control de qué versión de su código CSS ven sus visitantes (y usted no puede cuente con que usen sus herramientas de desarrollador para deshabilitar el almacenamiento en caché).

Para evitar que sucedan cosas como esta, debe utilizar una técnica llamada “eliminación de caché”, que esencialmente significa que agregará cosas a las URL de sus recursos que cambiarán cada vez que cambien sus archivos de recursos. Esencialmente, su URL CSS se transforma a partir de esto.

<link rel="stylesheet" href="https://foroayuda.es/style/css_2-play.css" type="text/css"/>

a algo como esto

<link rel="stylesheet" href="https://foroayuda.es/style/css_2-play.css?1422585377" type="text/css"/>

Hay mucha cobertura sobre la eliminación de caché en SO, por lo que es posible que desee echar un vistazo a todas las opciones disponibles antes de decidir cómo desea manejar el problema.

Mi técnica favorita personal es combinar el código del lado del servidor con mod_rewrite para lograr la destrucción de caché. El flujo de trabajo es el siguiente.

1) El código del lado del servidor utiliza DOMDocument para buscar todos los archivos de recursos en el código HTML generado como CSS, JavaScript, etc. y agrega una marca de tiempo modificada recuperada con filemtime.

Ejemplo: /css/main.min.css se convierte en /css/main.min-1422585377.css en el código que se devolverá al cliente (navegador).

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

3) El navegador ahora envía una solicitud de /css/main.min-1422585377.css al servidor.

4) Para redirigir todas las solicitudes al único main.min.css que realmente existe en el servidor, usamos una regla de reescritura simple como esta

RewriteRule (.+)-(d{10,}).(css|js|jpg|jpeg|png|gif)$ $1.$3 [L]

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

Esto me sucede todo el tiempo cuando trabajo en mi sitio web en mi pila XAMPP en mi mac. La solución es activar las opciones de desarrollador y seleccionar “caché vacía” en el menú de desarrolladores. Esto obliga al navegador a actualizar el CSS de la página. No estoy familiarizado con el desarrollo en otras plataformas, pero vea si puede vaciar la caché en su navegador.

Además, verifique su css y asegúrese de que su sintaxis sea correcta, en particular que no haya omitido un “}” en alguna parte.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)


Tags : / /

Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *