How to Version CSS Files with a Query String to Prevent Cached CSS Use

How to force a browser cache refresh using a CSS query string

Have you ever seen a ‘d’ query string on a CSS link in HTML source code and wondered what it did? The ‘d’ is mostly just a semantic way of describing the parameter that follows it, which is the date. The web server will ignore the string because it isn’t programmed to understand it, but it allows an easy way to cause browsers to think that the CSS file has changed thereby forcing a cache replacement.

<link href="/style.css?d=20101204" rel="stylesheet" type="text/css" />

The only downside is that each time the CSS file is updated, the parameter, which in the above example is a date string, has to be updated. Depending on the software you are using you can use tags to automatically change the date.

How to automatically version the CSS file for cache refresh in WordPress

In WordPress you would use the ‘time’ template tag after the ‘d’ query string like this:

<link href="/style.css?d=" rel="stylesheet" type="text/css" />

Thanks to Stack Overflow for the tip. Some call this the “Expires or Cache-Control Header”.