Máte projekt, který navštěvuje opakovaně mnoho lidí denně a přitom potřebujete nahrát nové CSS, které zásadně mění zobrazení webu. Prakticky ihned vás napadne, že si prohlížeče CSS soubory cachují. Musíte proto vymyslet způsob, jak donutit prohlížeč návštěvníka, aby zahodil staré CSS a nahrál si nové! Metoda, že mu napíšeme vzkaz, aby zmáčkl CTRL+F5 se nepočítá ;)
Po každé modifikaci CSSka změňte název souboru a zároveň jeho odkaz v HTML, metody pro tento způsob odcachování jsou dvě – kompletní změna názvu souboru a přidání počitadla, což je v praxi více využíváno. CSS soubor pro tento způsob práce je ve tvaru style#.css, kde # je zástupným znakem za počet aktuálních přepisů souboru.
Tato metoda vychází z předchozí, liší se pouze v tom, že nemusíte přepisovat název souboru, stačí vám aktualizovat odkaz v HTML. V meta tagu link bude okdaz na style.css?v=#. Název proměnné je na vás, stejně tak to, co použijete za #.
Tato metoda vychází z výhod předchozí, kterou ještě obohacuje o automatickou parametrizaci pomocí PHP (či jiného jazyku). Idea je v doplňování inode poslední aktualizace souboru style.css – definice odkazu na soubor může vypadat následovně style.css?v= Toto řešení má nesporné výhody, že se nemusíte starat o to, že se CSS zaktualizuje, na druhou stranu to přináší vyšší zatížení serveru – při každém načtení stránky se musí ptát style.css jestli se nezměnil.
Pokdud váš hosting podporuje text/css.
ExpiresActive On
ExpiresDefault "access plus 5 hours"
ExpiresByType text/css "access plus 10 minutes"
Tato metoda vám ušetří starosti, ale nezajistí okamžitou obnovu CSS ihned po uložení. Ono by šlo nastavit ExpiresByType text/css na plus 1 second, ale to by se návštěvníkům necachovala CCS prakticky nikdy.
Vybrali jste si svou metodu odcachování CSS? Já osobně používám dvojku, se kterou mám sice práci navíc, ale po každé majoritní změně CSSka na něj rád upravím odkaz v stránky.
Na základě komentáře Pavla Šindelky s odkazem na jeho článek o zrychlení načítání JavaScriptu jsem doplnil následující řešení, které kombinuje první metodu s podporou
Následující řádek definuje RewriteRule, který přeloží style.v3.css na style.css.
RewriteRule ^/(.*\.)v[0-9.]+\.(css)$ /$1$2 [L]
Vybrali jste si svou metodu odcachování CSS? Já osobně používám dvojku, se kterou mám sice práci navíc, ale po každé majoritní změně CSSka na něj rád upravím odkaz v stránky.
xom 4.6.08 19:06
|1| - reakce na Pavel Šindelka: Díky za doplnění!
Tvou metodu jsem i s odkazem uvedl do článku, mod_rewrite mě do toho zatáhnout nenapadlo – i vzhledem k tomu, že jsem nevěděl o metodice cachování Opery a Safari.
Ono by pro tyto prohlížeče možná stačilo nastavit mod_expires, kde bychom jim natvrdo řekli, že text/css expiruje v řádu dnů – domněnka.
Pavel Šindelka 4.6.08 16:01
Problematiku cache extreních souborů jsem nedávno řešil ve článku http://www.sindelka.cz/…-javacriptu/ – pouze v o něco širším kontextu (nejen CSS, ale i javacripty atp.). Na konci článku je i naznačeno řešení, které používám já (takovou zpola automatizovanou varinatu jedna :)).
Tebou používaná varianta není ideální, Opera a Safari pak CSS necachují. Dovolím si ocitovat sám sebe :) „Možná vás napadne, že by stačilo používat něco ve tvaru /css/main.css?v=4. Jenže každý prohlížeč si již tradičně vykládá HTTP specifikaci po svém. IE a Firefox tedy cachovat URL s parametry umožňují, Opera a Safari ne. V konečném výsledku je proto tento přístup nešikovný.“