British Inside

An Englishman living in small town America

James Shaw

News

  • Copyright James Shaw 2004-2007

    Creative Commons License

    View James Shaw's profile on LinkedIn

Using updated CSS files

Some browsers just don't seem to "get" the idea behind shared files like CSS or Javascript files. For a while now I've been uploading updates to a web site and noticing that the browser continues to use the old version.

That's pretty dumb. Caching - wherever it happens - is supposed to keep a copy for speed of access and update itself when the original changes. It seems to me that this just doesn't happen most of the time.

Sure, you can press Ctrl-F5 or Ctrl-R to reload the page and get all the latest files, but what if you don't know you have to? Users of the site can see strangely broken sites when the markup and css don't match. Most have been conditioned now to refresh (I hope anyway), but why doesn't it get fixed?

In any case, I added some code to the site so that the timedate of the file in question is added to the URL, like this:

<link rel="stylesheet" href="common.css?Filedate=633141635220000000" type="text/css" />

Since everyone at least caches by URL, now the cache is forced to update whenever the file changes. A tidied version of this will appear in Community Server at some point I think I heard. Lots of people use this method, it's not new, but my method appends a "version number" automatically by using the file datetime - making it zero maintenance.

But there's still a big problem.

I realized yesterday (one of those duh moments) that this isn't as foolproof as I'd hoped. This only works with the CSS files that we include in our web pages, not the ones that the CSS files themselves include.

If, inside my common.css there was a line like this..

@import url("./style.css");

..then we're still screwed. style.css will only be refreshed whenever the time of day is divisible by 7 or whatever silly rule the browser decides to use.  Setting CSS files to expire regularly in IIS seems equally dumb, but at least it's foolproof. Thoughts?


Posted: Wednesday, July 11, 2007 8:48 AM by James

Comments

Speednet said:

There is actually something you can do on the server, if you have access to IIS. If you have a file that changes often, you can set the max-age header to a value of around an hour. Most browsers respect that header. Conversely, you can use that same header to EXTEND the amount of time that browsers will cache something. (By setting the max-age header to a length of several days.) To do this, go into the IIS Manager tool, drill down and highlight the file(s) or folder you want to set the header for, right-click and select Properties. Then, switch to the HTTP Headers tab, and click the Add button in the Custom HTTP Headers section. In the Custom header name, enter "Cache-Control" (no quotes). In Customer Header Value, enter "max-age=3600" (no quotes) for one hour. (max-age is seconds of cache time.) It should do the trick! -Todd ("Speednet")
# July 11, 2007 5:58 PM

Ryan Haney said:

If that header works via IIS, could you also use that with an HTTPHandler in ASP.NET?
# July 12, 2007 8:14 AM

James said:

The trouble is, google will show you people who say that the header doesn't always help. It's either not supported or supported differently by various servers, proxies and browsers.

Every little helps though I guess..

# July 12, 2007 9:41 AM

Speednet said:

I wish I knew how to do line breaks. I know this is going to run together - sorry in advance! Ryan, It's possible, although I have not tried it. It's worth a shot. James, I agree that there is no silver bullet, but the reality I found in my testing (for a couple of years now) is that it works pretty well. The most important thing is that it clears up 95% of the problems, because that's about the percentage of browsers in use today that it works with. It's mostly older versions of secondary browsers that may not respect it, but there is no harm done to even those non-conforming browsers by adding the header.
# July 12, 2007 10:55 AM

Speednet said:

Also, James, your comment about proxies is a good point. Some proxies will determine their own reality no matter what, but hopefully users who live behind such a proxy learn early on to refresh their cache often.
# July 12, 2007 10:57 AM

James said:

Still, why does the problem exist today, even with IE7?  Hacking the caching will help - but if I'm demonstrating to the client and I've just uploaded the new CSS it won't help. I want to see *immediate* results, not "within the next hour". :(

# July 12, 2007 12:41 PM

Speednet said:

You CAN set up your client's browser to check for a new version of the support files every time. It is in the Internet Options window. BUT, most people do not want to do that, because it adds a lot more chatter, and slows things down on the client's end. In the General tab, click the Settings button in the Browsing History section, then select "Every time I visit the webpage".
# July 12, 2007 1:46 PM
New Comments to this post are disabled