Cuando está desarrollando un sitio, hay un montón de “refrescamiento” en marcha. Empiezas a tener una idea bastante clara de lo que tu navegador detectará en una sola actualización y lo que no. Por ejemplo, encuentro que si sobrescribo un archivo de imagen en el servidor, me llevará dos actualizaciones para que esa imagen se actualice en el sitio en vivo. Entonces tal vez vaya a Opera y vea cómo le está yendo al sitio allí, solo para encontrar en el primer renderizado de la página que es un realmente viejo versión. UH oh. Actualizar. Actualizar. Ah… ahí está.
Eso está bien para ti, estás acostumbrado a ese tipo de cosas. Pero, ¿qué sucede si envía ese mismo enlace a su cliente y les sucede lo mismo? Hay una buena posibilidad de que haya (como mínimo) algo de confusión. En una escala mayor, digamos que implementa un cambio de diseño bastante importante en un sitio web de alto tráfico. Una gran cantidad de personas podrían ver un diseño borrado la próxima vez que lo visiten, debido al almacenamiento en caché de CSS.
¿Podemos resolver esto? ¿Hay alguna forma de evitar el almacenamiento en caché de CSS?
Sellado de tiempo de su CSS
Hay un pequeño truco que creo que viene de la tierra de los programadores de JavaScript. Para evitar el almacenamiento en caché de sus scripts, agregan una marca de tiempo al final del src atributo. Entonces, robemos la idea.
Hice una prueba rápida para ver si este tipo de tonterías funcionaba. Así es como incluí el enlace de la hoja de estilo:
<link rel="stylesheet" type="text/css" href="https://css-tricks.com/can-we-prevent-css-caching/style.css?<?php echo date("l jS of F Y h:i:s A'); ?>" />Lo que resulta en esto:
<link rel="stylesheet" type="text/css" href="https://css-tricks.com/can-we-prevent-css-caching/style.css?Thursday 24th of April 2008 04:45:21 PM" />Modifique ese formato de fecha según sea necesario. Es posible que desee omitir espacios.
La teoría aquí es que ese enlace cambiará cada segundo, y el navegador será engañado para que piense que esta es una nueva hoja de estilo y la cargará nueva cada vez. Jason Edmond Beaird tuvo la misma idea e incluso creó un pequeño bookmarklet para forzarlo.
No he hecho ninguna prueba dura de esto, pero mis primeras pruebas sugieren que funciona bastante bien. ¿Qué piensan ustedes, amigos? ¿Solo estoy bebiendo kool-aid aquí? ¿Hay algún problema serio al hacer esto? ¿Hay una manera mejor/más inteligente/más rápida de hacerlo?
Actualizar
Estoy actualizando esto en junio de 2013 aquí solo para señalar algunas cosas importantes.
En producción, romper el caché cuando lanzas un nuevo CSS es un muy buen plan. Pero romper el caché con un sello de fecha como el que se presenta aquí significaría que no obtendrá ningún beneficio del almacenamiento en caché del navegador, lo que sería terrible para el rendimiento. Sería mejor que hiciera algo como agregar un número de versión al final del nombre del archivo como style.css?version=3.2 que actualice según sea necesario.
Localmente en desarrollo, romper el caché cada vez que se carga una página puede estar bien, pero las herramientas de desarrollo modernas como el inspector web de Chrome pueden desactivar el almacenamiento en caché de todos modos.