CSS Trick: Force Users To See New Stylesheet

Posted by in Website Tools on August 31st, 2010 | Comment »

CSS Stylehseet Force RefreshI wanted to share a neat website trick with you that I recently came across. The problem I encountered was this: I would add new styles to my website’s stylesheet, but when I would go back to the page, I wasn’t able to see the changes that I made until I clicked refresh.

This doesn’t sound like a big deal until you realize that hundreds or thousands of people who have already visited your website will likely return to your website and will think that your website is (1) really ugly; or (2) that you don’t know what you’re doing.

You end up wishing there was a way to “force” those visitors into seeing your new stylesheet so the website looks the way it is supposed to. The problem with website stylesheets is that they are downloaded onto your computer, a process known as caching files. This was a clever way to speed up website load times because each time you returned to a website that you visited previously, you no longer had to wait for it to download all of the website’s images and stylesheets. Your computer simply pulls those up from your hard drive so the website loads faster. The problem is that when you add elements to your spreadsheet, the computer won’t know that it has been updated until either: (1) the user clears their cache; or (2) clicks refresh.

Now you’re looking for a way to force your visitors to refresh your website so they can see the changes that you made to your stylesheet. You think that this could be accomplished using a piece of code known as a meta refresh. However, rather than using a meta refresh which will make your visitors think that your website is buggy, simply add a ?v=2.0 to the end of your stylesheet’s URL. If you update the stylesheet again, change the number to a 2.1, then 2.2, and so on. By adding this simple line, it will “trick” the browser into downloading the new stylesheet rather than relying on the old one.

Your stylesheet’s URL should look like this: http://www.yourwebsite.com/stylesheet.css?v=2.0

Hopefully that saves you a bit of aggravation in the future.

Tags: , ,

Leave a Reply

Contact Us