Versioning CSS files with a query string like Stackoverflow does?

Question

If you look at Stackoverflow.com's source you'll see the reference to their css file is:

<link href="/Content/all.min.css?v=2383" rel="stylesheet" type="text/css" />

How is this done so they can pass a version via query string and have the correct CSS file served up?

See this earlier question for an explanation: [What does ‘?’ do in a Css link?](http://stackoverflow.com/questions/438821/what-does-do-in-a-css-link/438828#438828) — Paul Dixon, Feb 02 '09 at 08:59

score 5 · Answer 1 · edited Jul 24 '18 at 02:33

This article (PHP/.htaccess example) explains the idea behind it. Basically, you could append the timestamp of the last time you modified the file to the filename but still serve the original file. This way every time you save a new version of the CSS file, the filename will change which will force the browser to download the new version. This will work for many kinds of files, including both CSS and JS files. (An alternative to using the filename would be using the query string.)

A ASP.NET sample is this:

public static string GetBreaker(string fileName)
{
    string cacheBreaker = null;
    try
    {
        if (fileName.StartsWith("~"))
        {
            fileName = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, fileName.Remove(0));
        }
        cacheBreaker = File.GetLastWriteTime(fileName).ToFileTime().ToString();
    }
    catch { }

    return string.IsNullOrEmpty(cacheBreaker) ? string.Empty : string.Format("?cachebreaker={0}", cacheBreaker);
}

And you call this method in your MasterPage in this way:

<link href="<%= this.ResolveClientUrl("~/CSS/style.css") %><%=CacheBreaker.GetBreaker("~/CSS/style.css") %>"
            rel="stylesheet" type="text/css" />

score 4 · Answer 2 · answered Feb 02 '09 at 09:02

4

Its so your browser does not cache the css file. And using the version number is handy since the css file could have changed in each version.

It's not a way to call a correct css file. The file is always the same, but the version number makes your browser think otherwise and fetch it again.

answered Feb 02 '09 at 09:02

Ólafur Waage

68,817
22
142
198

So when the file is copied over there is that its physical file name? "all.min.css?v=2383" ? I understand that it is used to prevent caching – mmcdole Feb 02 '09 at 09:09
It has nothing to do with the file. Its just added in the code of the page. The filename is still all.min.css – Ólafur Waage Feb 02 '09 at 09:10
And this doesn’t really prevent caching but every time the number is changed the page is loaded again because it’s a new URL. The old URLs remain cached, though. – Bombe Feb 02 '09 at 09:29

score 2 · Answer 3 · edited Jan 18 '21 at 12:38

2

If you want to know how it is done, they shortly mentioned it in a previous blog entry: it is done automatically by their build process. See this blog post (3rd bullet point).

Unfortunately there are no details, but maybe you can get more information by commenting that blog post or by contacting the stackoverflow team.

edited Jan 18 '21 at 12:38

Community

1
1

answered Feb 02 '09 at 09:05

M4N

94,805
45
217
260

score -4 · Answer 4 · answered Jun 09 '09 at 12:32

-4

It could be easier just to change the name of the file each time it is changed to achieve the same effect.

file001.css
file002.css

I have a feeling that keeping the filename the same and appending ?ver=1234 is to make source control easier.

answered Jun 09 '09 at 12:32

Kevin Newman

2,437
1
15
12

Versioning CSS files with a query string like Stackoverflow does?

4 Answers4

Linked