A CSS és a cache

Amikor egy élő weboldalon módosítjuk a CSS fájlt akkor jó eséllyel a látogatók egy ideig a régi CSS-sel fogják látni az oldalt. Ez oda vezethet, hogy bizonyos linkek nem látszanak, a szinek nam passzolnak vagy az oldal teljesen szétesik – attól függően, hogy mit módosítottunk a CSS-ben.

A fenti probléma abból adódik, hogy a böngészők a gyorsabb oldalmegjelenítés érdekében amit csak lehet a felhasználó gépén letárolnak a cache-ben. Ide kerülnek azok amelyek várhatóan változatlanok, azaz a képek, videók, flash fájlok és a CSS. Amikor újra elmegyünk egy oldalra akkor a böngésző először megnézi, hogy ezek az elemek megvannak-e a cache-ben és ha igen akkor onnan tölti be.

Cache expires – a lejárati idő

A cache-ben van egy lejárati idő ami után mindenféleképpen újratöltődik az alkatrész, vagy legalábbis ellenőrzésre kerül, hogy nem módosult-e azóta. A lejárati idő meghatározása persze rendszerenként eltérő, elvileg az első látogatás és a letöltött fájl utolsó módosításának idejének egy tizedének kellene lennie.

Azaz ha ma 2008. november 5-én ellátogatok egy lapra és letölt a böngésző egy képet amit 30 napja módosítottak utoljára, akkor elvileg 3 napig marad a cache-ben.

A lejárati idő módosítása

HTML fájlok esetében használhatjuk a következő header-öket.

<meta http-equiv="pragma" content="no-cache" />
<,meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="Mon, 22 Nov 2008 11:12:01 GMT" />

A szerver oldalon pedig a következő fejlécekkel érhetjük el ugyanezt.

<?php
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT");
header("Last-Modified: ".gmdate("D, d M Y H:i:s")." GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
?>

A fenti megoldásokkal az a baj, hogy az első nem áll rendelkezésünkre CSS fájlok esetében, a másik meg kényelmetlen egy sima CSS fájl kiszolgálása esetén.

A trükk

A trükk nagyon egyszerű. Mivel a böngésző az URL alapján azonosítja be a dolgokat csupán arról kell gondoskodni, hogy a frissített CSS fájl más URL-en legyen mint a korábbi verzió. Ezt megtehetjük úgy, hogy minden egyes lakalommal módosítjuk a CSS fájl nevét (brrr) vagy úgy, hogy az URL-hez hozzáfűzünk valami olyan karaktersorozatot ami a CSS fájl elérhetőnek hagyja.

<link rel="stylesheet" href="http://webmania.cc/stilus.css?ver=081105" type="text/css" />

A ? utáni rész az URL-ekben GET paraméterek átadására szolgál. Mivel a CSS fájl nem fogja használni őket szépen eldobásra kerülnek, de a változtatásukkal az URL-t is változtatjuk, vagyis a CSS le lesz töltve, nem a cache-ből lesz kiszolgálva.

Ha újra módosítjuk a CSS fájlt akkor nem kell mást tennünk mint a 0801105-öt valami másra átírni és készen is vagyunk. Voálá.

4 thoughts on “A CSS és a cache

  1. Ez sem rossz megoldás, viszont nekem hamarosan lesz egy (szerintem) jó metódusom a dologra. Egy project kellős közepén járok és mire teljesen elkészül már ezt a metódust szeretném beépíteni. Az elvi része már megvan, most már csak le kell kódolni, amire még nincsen időm. Pár héten belül készen leszek vele, és dobok egy linket. Remélhetőleg másnak is segítségére lesz.

Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöljük.