Caching CSS files -- stale CSS?

What happens when a CSS file is updated?

[NickH]

I've recently made some fairly substantial changes to my (only) external CSS file. At the moment the changes are on my PC.

1) If I upload them to the server, will visitors whose browser has cached the CSS file continue to use the cached version?

2) If so, what determines when their browser re-requests the CSS?

3) If I also uploaded all my HTML files, would this cause a browser to re-request the CSS?

Thanks,
Nick

[legster]

Most of the time the cache isn't a problem. But I have seen it occur. So as a general rule everytime I update the CSS file I add a version number to it.

[NickH]

Thanks for the very prompt reply.

Just so I'm absolutely clear, do you mean you:

a) Change the file name from xyz003.css to xyz004.css; and
b) Change the href attribute in the HTML link tag from xyz003.css to xyz004.css?

[jdMorgan]

Nick,

That would work, since resources are cached by URL. If its a new URL, it can't have been previously-cached.

Jim

[Sinner_G]

This is a very interesting question which had never occured to me. I mean the whole point of having external CSS is not having to mess with yll your files (ok, and avoiding repetition). So is there really no other way? Something like a special kind of nocache tag, only for included files?

[jdMorgan]

You should make your CSS files cacheable, especially if they are shared by most or all of your pages.

When you need to change them, change their names. If you can't change their names, then set a short Expires header (like 30 minutes) for them via your server controls before you start developing changes. By the time you're ready to upload changes, most cached copies will have expired or will be set to expire shortly.

Realistically, it won't hurt to have them expire after a few hours as a normal practice. Shorter than that means more re-fetches, and longer than that means more likelihood of being stale if you change them often. It's all a trade-off.

We've got two threads going now... I posted a couple of useful links over here: [webmasterworld.com...]

Jim

[legster]

Well if your calling your stylesheet from more than one page that could be a pain. So what I recommend is having an include to an HTML file. On that one html file would be the line calling the css file. That way you only have to change it in one file.

[g1smd]

If the file size has changed since last usage the browser should download it again. I thought that was the default behaviour?

[jdMorgan]

> the default behavior

True, but intervening caches may check Expires and provide the file locally. In the absence of a "strong" cache policy in the file header, the browser may get an old copy. The caching tutorial cited in the other thread [webmasterworld.com] covers this.

Jim