Auto-Refreshing Modified Stylesheets

Browsers don't seem to take the latest stylesheet version from the server.

[premasagar]

Hello,

I notice that browsers don't tend to download the latest external stylesheet after it has been modified and uploaded. Instead, they use their cached version. Only when the page is refreshed by the user does it force the browser to download the new stylesheet.

I observe this in IE 5.0, IE 6 & Opera 7 (on Windows).

So, is there any way to force the browser to check the last modified date of the stylesheet and download it if there is a newer version? I don't want to force it to be downloaded every time - only when there is a newer version on the server.

Thanks in advance,
Prem.

[Bonusbana]

I have been wondering this myself, I did once experience with the following meta tags:

<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-store" />
<meta http-equiv="cache-control" content="must-revalidate" />
<meta http-equiv="cache-control" content="proxy-revalidate" />

Im not sure what does what with what browser.
Does anyone have more information about this?

[premasagar]

Actually, I already have no-cache headers applied through PHP, but that still doesn't seem enough to encourage the browsers to get the new stylesheet.

Here's my PHP code (I think this is still relevant to the CSS forum):

===

// Date in the past
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");

// always modified
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");

// HTTP/1.1
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);

// HTTP/1.0
header("Pragma: no-cache");

===

Prem.

[HarryM]

With some browsers it's possible to change how often the browser checks if a page has been changed. With Opera 7 the range is from 'always' to 'every week', so it's not really something you can control.

The other issue is that users may also get cached versions from the network. When I change a stylesheet, I sometimes have to refresh a page two or three times to clear my own browser cache and the network cache.

I think I understand the problem, but I don't know what can be done about it. :(

[encyclo]

Assuming you're using some sort of include for the header of the page, you can simply change the filename of the CSS file. This will force the download of the new file.

I tend to add a number to the end of the filename, then move from styles01.css to styles02.css, etc. Of course, if you have completely static pages, it won't help (but who does static pages these days?!).

[MatthewHSE]

Assuming you're using some sort of include for the header of the page, you can simply change the filename of the CSS file. This will force the download of the new file.

I tend to add a number to the end of the filename, then move from styles01.css to styles02.css, etc. Of course, if you have completely static pages, it won't help (but who does static pages these days?!).

That's exactly what I've been doing lately. Actually, this will even work for static pages, assuming you can use SSI:

<style type="text/css">
<!--#include virtual="style-include.ssi">
</style>

style-include.ssi looks like this:

@import url(/style01.css);

Since the include is executed on the server, the code the browser receives looks like this:

<style type="text/css">
@import url(/style01.css);
</style>

Then, when you need to change your stylesheet, just rename it and update your include file. The stylesheet will be cached until your include file changes the filename, in which case the new stylesheet will be downloaded.

[premasagar]

Very good ideas. Yes, the page tops and bottoms are added through a PHP insertion. I'll change the stylesheet name every time there's a major update and change the include file.

Thank you,
Prem.

[HarryM]

Changing the name of the CSS file via an include is a great idea. Also if you keep a copy of the old un-modified CSS file with the original name on the server, Google caches will still display correctly until they next get updated.