Force loading CSS files with every published version
In this article we will learn how to force loading CSS files with each new version published, we will also learn how to force JS files.
Hey you programmer, ok? Let’s learn something new!
Whenever a new version of our software comes into production, for some reasons the files may not update automatically
Most of these issues are cache related, like the client’s browser or a CND service like Cloudflare
And the files that suffer from this problem are usually CSS or JS
So we have to force this update, and it is entirely possible
We just need to concatenate some version number at the end of the file, see it running:
- CSS file named styles.css = styles.css?v=3284
- JS file named scripts.js = scripts.js?v=2
This force the browser to reload the file completely, and that will solve our problems
Remembering that doing this by hand can be expensive, or cause problems if there is a version control system in the project, such as git
So look for plugins/libs that do this increase in version control automatically, as it can save you a lot of time
And do it directly via browser, without going through version control, not generating conflicts or unnecessary changes in the project
Since the problem is directly on the customer’s computer
We just need to add a versioning to the end of the filename, where we call it (probably in the head)
So this different version number will force the full download of the file again
Persisting our changes on the clients computers and the problem will be solved
Want to learn more about CSS? Click here!