CSS Caching Hack

If you change the HTML and the CSS of a page there is a decent chance that a user will get the new HTML but not the new CSS. This is especially true for sites with high usage and users that come back to the site several times a day.

If they only get the new HTML but not the new CSS then the site will break, the user will get confused, and you will look unprofessional. On the development site of this the problem is already solved. Having a Dev server as a place to test code is standard practice but how does this translate to CSS?

The problem is that the CSS is cashing on the client side and there isn’t an obvious way of telling the browser to un-cache it. Luckily the key word is obvious. Though it’s not in wide use there is a quick hack that will keep your CSS as fresh as your HTML.

The trick is to pass a variable on the end of the CSS file like so:

<link rel="stylesheet" xhref="http://www.stefanhayden.com/style.css?version=1" type="text/css" />

What does ?version=1 mean? This is what a URL looks like if it’s passing a GET variable from one page to the next. To the browser it means the page is dynamic and it needs to get a new version because code may have changed. The browser has no way of knowing if the CSS file is actually dynamic or not.The trick is to change the number each time you update the CSS file to make sure the browser always downloads the new code.

When a browser looks to see if it has anything cashed it compares file names. If you have “style.css” in your cashe then it’s not going to download it again. But if the browser compares “style.css?version=1” to what the new HTML is “style.css?version=2” then the browser thinks they are different files and needs to download the new CSS file.

The other reason this works is because you can add anything you want after the ? and the web page just ignores it unless it’s an actually variable on the page.

This seems to be a really good solution to version css and yet so few seem to use it. The only 2 sites I know of who do is Odeo and Sconex. Yet clearly we are in the middle of a big web boom with CSS being used every where. How are other people versioning their CSS so it doesn’t break the user experience?

In general I can’t see to many other solutions. You could make the CSS file parsed by the web server and pass headers with different cacheing info. I have not tried this but I’ll bet the browser would still cache the file as it does not know it is dynamic even if it is. You could rename the CSS file with .php but clearly no one is doing that and I’ll bet there is a browser out there that would not apply the styles because of that.

No every one gets to work on a large production site but with so many jumping in the area and quickly updating the service I’m surprised this subject has not been covered.

odeo, sconex, css, versioning, hack

Bishop Allen – Heir to the Indie Music Throne

Bishop Allen - FebruaryI haven’t written much about music here and I think I might in the coming future. What I really should be writing about is design and yet here I go with my music plug.

Bishop Allen (wikipedia) is a small band out of New York City that has decided to go without a record label and just do the work themselves. So far it seems to be working great as they have not starved to death after almost 3 years as a band. They only have one album out called Charm School but every song on it is amazing.

A lot of bands put out good albums though and there seems to be a difference between a band that puts out a good album and a band who can continue to produce good music. With only one album I was afraid Bishop Allen might not be up to the challenge.

This year though they are planning on releasing an EP every month of 2006. That about 4 songs for 12 months or 48 songs in a year. I was skeptical if they could hold up their quality in such a small time frame. 2 EPs and 8 songs in to the year and they have yet to hit a bad note. I’m actually amazed that they have kept up the quality of the songs they are putting out.

These songs are fully finished. They don’t feel like demos or rough stuff they are working on for an album. Each song is a gem that I listen to in wonder.

If Bishop Allen keeps up this quality they are quickly going to jump to my number 2 band of all time right behind Cake, another band that has stood the test of time.

Each EP is only 5 bucks and they have even offered up a several free songs on their site so you know what you getting. You need to buy these EPs.

January - Corazon.mp3 February - Vain.mp3

bishopallen, indie,indierock, indiepop, music, download

RocketBoom VS. MoBuzzTV

As hard as I might try I really can’t get in to Rocketboom. I can’t figure out why it’s as popular as it is. It’s not that I don’t like Amanda Congdon It’s just that I don’t find her sense of humor very endearing. Her enthusiasm seems fake and no matter what the news story is it always has some sort of cheese spin to it. I don’t wish bad things upon them, I just don’t get it.

On the other hand I love MoBuzzTV. Karina Stenquist has the perfect personality for the online world. Smart, sarcastic and just a little snarky everyday the news is delivered with just the right amount of dark humor. In general I can’t say enough great things about it besides I wish it was longer.

It makes me kind of annoyed that Rocketboom gets so much attention and yet MoBuzzTv seems so over looked. I can only hope they are doing well and will continue to produce shows for a lone time.

rocketboom, mobuzztv, vlog, AmandaCongdon, KarinaStenquist