This article started out as a basic tip but there have been some great comments added for those interested in delving into the topic of caching even more. So, although I do offer this as a recommendation, there are better ways to do this for larger apps, and there are some concerns to keep in mind should you choose to do this. So be sure to read the comments for links and further info on this topic.
If you’re a beginner and you’re developing HTML and CSS using an external stylesheet, you might notice that in some browsers, under some circumstances, the changes you’ve made to your CSS don’t take effect immediately.
Sometimes it’s necessary to do a hard refresh to see the updates take effect. But it’s unlikely that average web users know what a hard refresh is, nor can you expect them to keep refreshing the page until things straighten out.
So how can you ensure that any updates you’ve made to your CSS will take place immediately for all users? Here’s one way to do it:
<link rel="stylesheet" href="style.css?v=1.1">
The browser will view a file name of
style.css as different from a file name of
style.css?v=1.1, so it will generally force the browser to update the stylesheet. So, each time you update your CSS on the server, you can incrementally update your version number.
If you’re new to query strings, just know that the part before the equals sign is like a placeholder, and the part after the equals sign is the value put into that placeholder. This will have no effect on the CSS. It will only serve to make the browser think it’s a completely different file.
You could add many types of characters to the query string value, but numbers are a logical way to do it, because then you can just increase the number, and even add decimal places if you want. And of course, if you don’t change the value for a while, the browser will continue to cache (or preserve) the file, and won’t attempt to download it unless other factors force it to, or you end up updating the query string value.