What's a Querystring Doing in This Stylesheet's Href

What's a queryString doing in this stylesheet's href?

To force update if it is already in browser cache.
the v is probably short for version.

Why do developers append a query string in JavaScript files' stylesheet links?

This is used for invalidating caches.

Check out this brief (albeit old) explanation: http://css-tricks.com/update-on-css-caching/

When the query string is updated, it forces the client's browser to download an updated copy of the stylesheet or script.

What does '?' do in a Css link?

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

Note: While it's possible the CSS is dynamically generated, this is a common idiom for ensuring a reload, and given the parameter is a date, it seems quite likely.

---

Edit: Podcast 38 mentioned this...

We’ve been using the Expires or
Cache-Control Header since we
launched. This saves the browser
round-trips when getting infrequently
changing items, such as images,
javascript, or css. The downside is
that, when you do actually change
these files, you have to remember to
change the filenames. A part of our
build process now “tags” these files
with a version number so we no longer
have to remember to do this manually.

Dynamic query string in html css link

The problem is caused by the way ASP.NET treats LINK tags. Here is another question/answer that provides the solution:

Problem in Expression tag to bind string variable

I would try adding runat="server" first on the link tag. If that does not work, then I would use the other solution that is the accepted answer.

Is parameter passing in CSS this way a thing?

CSS has no parameters in it so you cant pass parameters into the CSS file anyway.
This might be a random string to prevent the caching mechanism. When the browser see the filename and the file already cached in your local machine he might decide not to fetch it again. This will keep the old style of the page. A developer can try to out smart the browser by adding a random string at the end, which make the browser think it's a different file than the one he cached.

Another option is URL rewriting. You can map any file extension to a server side script.
The script can create a custom CSS file according to the GET parameter.

Is it necessary to append querystrings to images in an img tag and images in css to refresh cached items?

The browser is making these requests after determining an absolute path, so if you are 'cache busting' your static assets in this way, you do need to do it for each file individually, no matter where it's called. You can, however, make it easer on yourself by making it a variable on the backend.

You can append the string as a variable that you only have to update in one place on your backend, probably in conjunction with a CSS pre-processor like LESS or SASS to get all your images.

Or use relative paths to your advantage by adding the version to the base url (site.com/folder/styles.css => site.com/v123/folder/styles.css). This can be added to an existing static asset base url variable in your app, then on the server you can just use a UrlRewrite to strip out the version. This way all the images relatively referred to from your CSS automatically get the version too, having the same 'cache busting' effect.

You could be extra clever and set the variable automatically as part of your build process as the last commit hash from you version control system - which will also make future debugging easier.

Query parameters in Script or Style tag source

A cache-buster is a unique piece of code that prevents a browser from reusing an file it has already seen and cached, or saved, to a temporary memory file.

Its a part of cache-busting technique. the parameter ?4c3a5b9f8b6eeb75ed7b7d2160c259d5 indicates a query string. It will force browser to load file from server rather than cache.

Primary purpose of cache-buster is that if you modified the CSS or JS file. You would want that modified file is used rather than a cached file in the client cache.

A good blog

---

Related Topics