Hi there,

We’ve noticed that when we make changes to our CSS file, the changes aren’t always picked up in browsers until the user does a forced refresh.  This is fine for testing as we know to do this, but what about our website visitors who aren’t all so web savvy?

How can we ensure that changes to the CSS file are picked up by their browsers?  i.e. Is there a way to tell the browser to refresh its cache?  Without forced refreshing (CTRL + F5) we’ve even had our own staff call us up saying things we’re not aligned correctly after us making changes.

Thanks for any advice on this,

Stephen

Add:

to your head data.

EDIT
==================================

And/Or do this number to your pages.

EDIT
==================================

You could even do this too:

Thanks for this, much appreciated!

Stephen

You realise that if you use the stylesheet global variable that it has in-built caching though?

This means that when you take a look at the link for the stylesheet you will see something like this :

ttp://localhost:8888/ee/index.php?css=site/site_css.v.1212323607

When you update your CSS template then the numbers a the end of the URL should change which they are just acting like a random number appended to it and so when that number changes it should automatically (hopefully) force the browser to load the new version as it will have a different name.

Don’t know if that helps in this situation at all though?

Best wishes,

Mark

Oh yeah. Didn’t realize that one…   And yet a 4th option!

Mark Bowen - 17 June 2008 08:32 AM

You realise that if you use the stylesheet global variable that it has in-built caching though?

This means that when you take a look at the link for the stylesheet you will see something like this :

ttp://localhost:8888/ee/index.php?css=site/site_css.v.1212323607

When you update your CSS template then the numbers a the end of the URL should change which they are just acting like a random number appended to it and so when that number changes it should automatically (hopefully) force the browser to load the new version as it will have a different name.

Don’t know if that helps in this situation at all though?

Best wishes,

Mark

Hi Mark,

We were using this already but found that it wasn’t working! :-(

Thanks,

Stephen

In what way didn’t it work. Have used this on a few sites now and it seems to always refresh when I make any changes. I know there have been a few issues with it so maybe you are experiencing one of those.

Are you placing your CSS into external files then? If so you may be able to force what you want by appending a random number to the end of the filename perhaps?

Maybe use php or something to tack on the seconds since epoch or something as that will always be different?

Don’t know if that is any good though?

Best wishes,

Mark

Basically, we added in an image graphic onto a page and had styles in the CSS file to position it, but when staff went to the site, they found that it wasn’t positioned properly (at all).

We’re definitely using the EE tag for the CSS file as you mentioned above, rather than calling an external file.  So the number after the CSV file link should have been changing, but this still required the forced refreshes, hence why I posted here for some alternative ideas.

Anyway, we’ll experiment with the meta tags above and see how we get on.

Thanks Mark,

Stephen

Mark, Stephen - You are both right.

I think the css version number takes effect only when you update the template via the CP.

I have my templates saved as files, and have tested whether the css version number updates after I save my css file, and it does not.

However, if I change the same css file via the CP, the version number updates.

Can an EE rep please check to see if this is the case, and if so, determine if it’s a bug or intended behaviour.

If this is the intended behaviour, I will add a feature request to have the css version number update when saving templates as files.

Blessings guys
- Ad

Just wondering if anyone can confirm if this is intended behaviour or not? If it is, I’d like to add a FR, thanks.

Saved as external files?

Yes

I had similar CSS caching problems when I started using EE (whichever way I tried it), and as a result I now keep all of my CSS external to EE entirely. I create a folder called interface in the project root, and put another folder for CSS in there alongside a folder for javascript.

I also do the same thing as Andy. 

The only way to keep one’s browser from caching the CSS is to add no-cache to to your meta data and/or make sure your pages aren’t being cached by EE.

Not sure how EE would know if you updated an external CSS document if the document doesn’t hit the db some how.

Not sure how EE would know if you updated an external CSS document if the document doesn’t hit the db some how.

Good point. Still, it’s a shame we can’t have the best of both worlds in terms of EE’s native {styesheet} functionality updating the appended numbers when an external file is saved.