By whatistocome on

The changes we make to our website sometimes break the site when our customers look at it because their browser has style.css cached from the previous time they've visited. Clearing the browser's cache fixes it but it's unrealistic to explain to every customer to do that and in the mean time our site looks broken and unprofessional. And for every visitor that tells us about our "broken" site, I can imagine how many aren't and are just surfing elsewhere.

I've searched the forums here and haven't turned up any definite ways to force the browser to refresh it's cache. Google turned up a potential fix. Appending a meaningless variable to the end of the call to style.css would force the browser to reload the page since it thinks it's a new css file that the browser doesn't have cached. For exampe, appending the date to the style.css like style.css?version1-18-08.

So, my question is - is there a solution to make the browser refresh style.css every time? If not, where is style.css being called? I can't find the call anywhere (I'm using 5.5 with a modified Zen template). Is this type of fix a good idea in general?

This seems like this would be an issue affecting many Drupal and web developers - I'd love to hear your feedback and guidance.

Take care,
Jason

⋅ Categories: Drupal 5.x

Comments

whatistocome’s picture

whatistocome commented

The forums have been busy the last couple days and this got lost in the shuffle (I assume that's the reason for a lack of response).

JohnForsythe’s picture

JohnForsythe commented

It's probably not possible to change how style.css is called without hacking include/theme.inc.

That said, you can add your own css file via drupal_add_css, and change the name of the file when you want to push a new version out.

--
John Forsythe
Need reliable Drupal hosting?

whatistocome’s picture

whatistocome commented

Followup: This worked like a charm in general; when visitors go to the site now the new css is automatically applied without them needing to clear their cache first so the site looks as intended instead of "broken". I noticed in a couple instances that this didn't work though (two computers, both same OS and browser and it worked on one but not the other? still trying to figure that out but overall this works well).

Thanks for the help,
Jason

werushka’s picture

werushka commented

Would you please give detailed info how to accomplish this..

przemeks’s picture

przemeks commented

I achieved this in other way - by renaming CSS by adding timestamp to the css file name:
For example I have style.css file that points to four css that make the site

@import url("./css/base20090614.css");
@import url("./css/blocks20090614.css");
@import url("./css/nodes20090614.css");
@import url("./css/misc20090614.css");

when I change anything I simply rename my CSS to baseYYYYMMDD.css and change name in style.css
best regards,
przemeks from http://Investeo.pl

westbywest’s picture

westbywest commented

Misbehaving browsers notwithstanding, shouldn't the browser cache refresh occur automatically if you have enabled 'Optimize CSS Files' checked in Site Configuration -> Performance and then flush the site cache after you propagate style updates?

That should create new site-wide css file with a unique name.

picxelplay’s picture

picxelplay commented

Unless you have an overriding stylesheet....like local.css, which is not included in the compression. You can rename it and add it to .info, but that might not be a good idea if you are overriding things like ie styles or grid styles.

----
Sudo Kill Cylons

preenet’s picture

preenet commented

When you update a css file to the server, but no matter how you clear/clean the cache of your browsers, it keeps unchanged, the following solution may be helpful:

modify previous version:

<link href="css/style.css" rel="stylesheet" type="text/css" />

to new version:

<link href="css/style.css?<?php echo time();?>" rel="stylesheet" type="text/css" />

Every time the client side load the page, the css file will be refreshed.

If this css file is stable, restore to the previous version, it will help the page load fast.

(This is Drupal community, so PHP function is useful, if you use java or .net, it's easy to find a replacement of time())