Does anyone know of any issues using a querystring

Question

We're making changes to our main sprite and I'm debating the benefits of either changing its name completely or adding a query string to the end.

There's logic to keeping the old version to support Google cache, archive.com, etc., but it'd also be much cleaner on our system if I was to just edit the file and add a query string to the CSS image call:

#element-id { background-image: url('my-sprite.png?version1'); }

My question is, does anyone know of any browser issues with using a query string cache buster in a CSS file?

My suspicion is that browsers handle css image requests the same way whether it's from CSS files or via HTML, so, so long as my server is expressing header information properly I should be OK.

Answer 1

Unless the browser is seriously broken, there should be nothing wrong. Suppose you wanted to use a dynamic file, such as url('/layout.php?section=1') or something. Query strings are kind of required there, so if the browser didn't work it'd be broken quite badly.

Answer 2

tl;dr Using query params is not a 100% solution.

There are basically two problems when using the asset pipeline:

1. Making sure your resources get cached when you want them to
2. Invalidating the cache when you rev the file.

Query string params will sometimes cause networks or browsers not to cache your resource at all. What's more as Mr. Irish points out "the query string approach is not reliable for clients behind a Squid Proxy Server" so it may me unreliable for busting the cache as well. Basically you don't want to have to rely on other peoples configuration.

A couple of references:

• Rails Guides: Asset Pipeline - The Rails Asset Pipeline is built on Sprockets a project that has been focused on solving these types of problems for a good few years now. They specifically state in bold no less that "Not all caches will reliably cache content where the filename only differs by query parameters."

• Steve Soulders Article on revving assets - Steve Souders is something of a web performance guru and author of the O'Reilly book "High Performance Websites" wrote this article referenced to in the Rails guides that suggests using filename revving to avoid issues with people behind proxy servers.

• HTML5 Boilerplate Suggestion - The HTML5 Boilerplate project maintained by the venerable Paul Irish and Nicolas Gallagher use the .htaccess to essentially create a filter to do filename revving. They specifically suggest using filename revving in place of query string versions.

Answer 3

The only issue you may run into is css files tend to be cached more than you would probably want. If the output of my-sprite.png?version1 is going to change often, it would be better placed on the page itself.