CSS Caching Hack

If you change the HTML and the CSS of a page there is a decent chance that a user will get the new HTML but not the new CSS. This is especially true for sites with high usage and users that come back to the site several times a day.

If they only get the new HTML but not the new CSS then the site will break, the user will get confused, and you will look unprofessional. On the development site of this the problem is already solved. Having a Dev server as a place to test code is standard practice but how does this translate to CSS?

The problem is that the CSS is cashing on the client side and there isn’t an obvious way of telling the browser to un-cache it. Luckily the key word is obvious. Though it’s not in wide use there is a quick hack that will keep your CSS as fresh as your HTML.

The trick is to pass a variable on the end of the CSS file like so:

<link rel="stylesheet" xhref="http://www.stefanhayden.com/style.css?version=1" type="text/css" />

more explanations on http://www.stefanhayden.com/blog/2006/04/03/css-caching-hack/

Very useful.
Thanks

Geez, the way I edit, that could get up to style.css?version=742 pretty damn quickly . . .

Awesome tip Nissai.
thanks for posting that link. I’m-a go version my CSS right now!

-sD-

Is it xhref or href ? I tried xhref and hit problems with IE6 - href worked though, stefan doesn’t appear to be using it anywhere so I couldn’t compare the dtd.

The CSS does not cache with this method in my installation of Firefox 1.5.0.4, not sure about IE or Safari. See results for CSS file from Firefox’s

about:cache?device=disk

-

Key: ****://x2.dev/assets/templates/default/css/main1.0.css?version=1
Data size: 1099 bytes
Fetch count: 5
Last modified: 2006-06-10 09:15:03
Expires: 2006-06-10 09:17:12

-

I think that a more reliable way of getting the new CSS rendered is to copy and then change the name of the CSS file to be edited.

i.e.

main1.0.css
or
main060622.1022.css

Reference new edited CSS, archive the old version.

You have to edit an extra file, but at least you get the speed benefits of CSS caching as well as a method of keeping track of changes within your style sheets.

Quote from: Starbuck at Apr 06, 2006, 08:23 AM

Is it xhref or href ? I tried xhref and hit problems with IE6

xhref is not an attribute in any current w3c standard I think it is a typo.

Quote from: ram at Jun 10, 2006, 09:26 AM

The CSS does not cache with this method in my installation of Firefox 1.5.0.4, not sure about IE or Safari.

This "hack" is not about to get the CSS cached, it’s just the opposite, to "force" the client browser to get new css from server and not use the cached css file.

What exactly is the advantage of caching the .css file btw?

Hi scraf,

Caching the CSS can prove fundamental in some site designs, for example sites that, once they are developed, very rarely change. In those instances, massive bandwidth gains can be achieved.

What caching strategy is chosen depends very much on the usage and development of the site ...

Quote from: doze at Jun 10, 2006, 06:07 PM

Quote from: ram at Jun 10, 2006, 09:26 AM

The CSS does not cache with this method in my installation of Firefox 1.5.0.4, not sure about IE or Safari.

This "hack" is not about to get the CSS cached, it’s just the opposite, to "force" the client browser to get new css from server and not use the cached css file.

Yup, I understand the concept of the hack, but how often do you need to force an update? The rest of the time it should be cached. On a large complex site then CSS can get to 20KB, I don’t particaularly want the user to download this every time.

This hack messes up the last-modified/expires values. The only reason (IMHO) hat you should need this hack is if the CSS changes depending on a change of user preferences or small dynamic, regularly changing style sheets.

Copy and change the name of the style sheet and we can force an update to styles, keep track of changes and keep the benefits of caching.