CSS versions in filename?

Question

had a quick question.

Let's say I create file stylesheet.css. In this file:

body {
    background: #000000;
}

Now let's say I change the background colour, making this file version 1.0:

body {
    background: #FFFFFF;
}

Would I change the link to the stylesheet to include ?v=1.0? Would that force the browser to load the stylesheet all over again with the new changes so old settings aren't cached? Also, assuming all the previous is correct, would it be good practice to commit changes based on version? So like I make changes in a stylesheet and dub them serious enough to warrant a v2.0, then just commit the stylesheet as "v2.0"? Thanks!

<link rel="stylesheet" href="stylesheet.css?v=1.0">

See the top-voted answer of [this question](http://stackoverflow.com/questions/118884/what-is-an-elegant-way-to-force-browsers-to-reload-cached-css-js-files). It has an elegant solution to this problem. — Jonah Bishop, Aug 27 '12 at 17:51
Passing variables after a `?` is a hack that causes the browser to reload the css. See [CSS caching hack](http://www.stefanhayden.com/blog/2006/04/03/css-caching-hack/). — Roddy of the Frozen Peas, Aug 27 '12 at 17:51

score 3 · Accepted Answer · answered Aug 27 '12 at 17:51

3

If the URL (this includes the querystring) is not in the browser's cache, then a new file will be requested.

Yes, this is a valid methodology for forcing version control.

answered Aug 27 '12 at 17:51

Diodeus - James MacFarlane

112,730
33
157
176

Wonderful, that's all I wanted to know. Thank you! – eveo Aug 27 '12 at 18:12

score 2 · Answer 2 · edited May 23 '17 at 10:24

This does force all browsers to reload the CSS entirely, as discussed here:

What does '?' do in a Css link?

The answer says:

That is there to add some uniqueness to the filename, so that when they change the CSS file, they can change the extra bit to be totally sure that every client will reload the CSS rather than use a cached version.

The webserver will ignore the parameter and serve /Content/all.min.css normally

StackOverflow uses this technique, by the way.

score 0 · Answer 3 · answered Aug 27 '12 at 17:51

If you change the link to ?v=1.0, then you will override any caching mechanism that your server has set in place, the browser will see a new url for the style sheet, and re-download your new changes, ensuring that the user sees the new changes immediately.

If you do not append a query string, then the user will update their style sheet according to the caching settings configured on your web application, which can vary significantly depending on how it is configured / what framework you are using.

CSS versions in filename?

3 Answers3