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?

Answer 1

See this earlier question for an explanation: What does ‘?’ do in a Css link?

Answer 2

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.

Answer 3

This (PHP example) article explain you the idea behind it. Basically, you could happend the timestamp of the last time you modified the file. This way everytime you change your CSS, the querystring will change and "forcing" the browser to download the new version. This is valid for both CSS and JS files.

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" />

Answer 4

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.

Answer 5

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);

}

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

where to add these code, in which section ..

Answer 6

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.

Answer 7

I blogged an example of how to do this very easily when using the SparkViewEngine here