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:

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

Conclusion

In this article we learned how to force loading CSS and JavaScript files as well

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!