Recargar CSS sin actualizar caché

Cuando estamos haciendo cambios cada poco en el CSS de nuestra web, puede darse el caso de que no se actualice el CSS a no ser que entremos en sesión de incógnito, cambiemos de navegador, dispositivo, o borremos la caché del navegador. Muchas veces con presionar Alt + Actualizar puede ser suficiente, pero muchas otras el navegador se pone un poco pesadito.
Una posible opción es cambiar el nombre del archivo css cada vez que recargamos la página web. Para ello si nuestro servidor cuenta con php podemos hacer lo siguiente:

En lugar de escribir el habitual:

<link rel="stylesheet" href="estilo.css">

Escribimos:

<link rel="stylesheet" href="estilo.css?id=<php date('u'); ?>">

El Resultado en nuestro navegador será algo así:

<link rel="stylesheet" href="estilo.css?id=1545079036">

De tal forma, que de cara al navegador, será un archivo nuevo.
Al escribir en php date(‘u’); Lo que hemos hecho ha sido insertar los segundos pasados desde el el 1 de enero de 1970. Otra opción menos friky es poner date(‘Ymdhms’); que hará que aparezcan los Years, months, days, hours, minutes y seconds… pero es más corta la otra opción.

Para saber más sobre los date(); de php consultar la guia de referencia oficial de php


Aunque esta técnica es ideal para desarrollar la web, es probable que Google Speed Test te lo notifique como una cosa a mejorar en tu web.

Deja un comentario

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