css - version update, cache flush

Welcome to CSS Basics. More info on this section at the bottom of this post.

How Do I Force the Browser to Use the Newest Version of my Stylesheet?

By Louis Lazaris on November 2nd, 2011 | 47 Comments

Update (Nov. 19/2011):
This article started out as a basic tip but there have been some great comments added for those interested in delving into the topic of caching even more. So, although I do offer this as a recommendation, there are better ways to do this for larger apps, and there are some concerns to keep in mind should you choose to do this. So be sure to read the comments for links and further info on this topic.

If you’re a beginner and you’re developing HTML and CSS using an external stylesheet, you might notice that in some browsers, under some circumstances, the changes you’ve made to your CSS don’t take effect immediately.

Sometimes it’s necessary to do a hard refresh to see the updates take effect. But it’s unlikely that average web users know what a hard refresh is, nor can you expect them to keep refreshing the page until things straighten out.

So how can you ensure that any updates you’ve made to your CSS will take place immediately for all users? Here’s one way to do it:

view plain?

1. <link rel="stylesheet" href="style.css?v=1.1">  

Notice that I’m pointing to my CSS using the commonly known <link> element. But I’ve also added what’s called a query string to the end of the file name.

The browser will view a file name of style.css as different from a file name of style.css?v=1.1, so it will generally force the browser to update the stylesheet. So, each time you update your CSS on the server, you can incrementally update your version number.

If you’re new to query strings, just know that the part before the equals sign is like a placeholder, and the part after the equals sign is the value put into that placeholder. This will have no effect on the CSS. It will only serve to make the browser think it’s a completely different file.

You could add many types of characters to the query string value, but numbers are a logical way to do it, because then you can just increase the number, and even add decimal places if you want. And of course, if you don’t change the value for a while, the browser will continue to cache (or preserve) the file, and won’t attempt to download it unless other factors force it to, or you end up updating the query string value.

Questions? Clarifications?

This post is not intended to be an exhaustive reference on this subject. It's meant to provide a simple CSS tip for beginners. If you have any questions or clarifications on anything I've said here, add them to the comments. If necessary, I'll continually improve this article to keep it up to date with the latest CSS standards and best practices.

This is the CSS Basics section of Impressive Webs. These posts do not appear in the main home page feed. You can subscribe via RSS or get an email notification whenever a new post is added.

source - http://www.impressivewebs.com/force-browser-newest-stylesheet/#comments