Hoy vamos a enseñar un pequeño truco o tip para forzar al navegador de Internet a actualizar nuestra hoja de estilos CSS.
Muchas veces aplicamos cambios a nuestra hoja de estilos CSS, pero al subirla a Internet no se ven reflejados los cambios, porqué?
Los navegadores suelen guardar en su cache (pequeña memoria interna) elementos que ya se han cargado/descargado de la página HTML. De esta forma no tienen que volver a descargar los datos, consiguiendo una mayor velocidad de navegación en Internet.
Piensa en los elementos comunes de un sitio Web: hojas CSS, imágenes, logos, fondos de pantalla, etc. Una vez descargados, se quedan almacenados por un tiempo (horas, dias, meses) y no hace falta descargarlos en cada nueva página. Ni siquiera si la visitamos al día siguiente o por el tiempo que se guarde en la cache.
Al finalizar este tiempo y visitar de nuevo la página, el navegador renovará su cache y entonces sí procederá a actualizar la hoja de estilos CSS y se verán los cambios.
Entonces, cómo podemos forzar el navegador para que actualice la caché?
Actualizar la caché de estilos css
La más simple es pulsar la tecla F5 recargando la página y la cache, pero existen configuraciones internas del servidor que pueden evitarlo. Además, este método sólo nos afecta a nosotros, el resto del mundo seguirá viendo su versión cache del CSS.
Otra forma es manipulando el archivo .htaccess, un pequeño archivo de configuración en servidores Apache (UNIX/LINUX) que puede ser complicado y peligroso de manipular por manos inexpertas. Este mismo archivo también puede ser el causante que no deja actualizar la cache, explicado en el caso anterior.
La mejor forma de actualizar la hoja de estilos CSS en la cache del navegador es añadir parámetros con la versión CSS a la URL del archivo.
El siguiente código es el que utilizo en mi web Gestor Ligas:
<link rel="stylesheet" href="https://gestorligas.com/css/estilos.css?v=3" type="text/css" />Para el navegador no es lo mismo la hoja estilos.css?v=1 que la hoja estilos.css?v=2, porque los parámetros v=1 y v=2 pueden devolver páginas con contenido diferente. De modo que renueva el archivo estilos.css en su cache cada vez que detecta una nueva versión.
La ventaja de este método es que obliga a todas las configuraciones del navegador o servidor a renovar la hoja CSS para todos los usuarios.
Así que ya sabes, añade une nueva versión a tu archivo CSS y súbelo a Internet 😉
¡ Espero que este artículo sea de vuestro interés !