How to add versioning to your CSS and jQuery and avoid bad caching

As a web designer, I regularly make changes to a website only to have a web project manager or producer tell me that the changes haven't worked.

So often, the web developer will then spend 15 minutes trying to find what the problem is only to find that the browser just needs to be refreshed in order to reflect the changes.

When you are making these changes to the website's design, whether it be adjusting the background colour in the CSS file to improve the User Experience or a change to the javascript file to create mobile navigation, you need to refresh the browser to see these changes.

Another way to ensure that the User Experience is optimised is to add versioning to your CSS and jQuery files, therefore forcing the new changes to be seen in the browser. Effectively, what CSS and jQuery versioning does is tell the browser that this a new file that hasn't been loaded before.

When you include a CSS or jQuery file it will generally look something like this in the HTML;

CSS

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

jQuery

<script type='text/javascript' src='script.js'></script>

These two files will be loaded into the browser and stored so that the website runs more efficiently the next time it is loaded. No new changes to the code which occurred between visits will be seen unless the browser is refreshed.

To avoid this happening, when you deploy your changes to your CSS and/or jQuery you add a version number. This would now look like the following.

CSS

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

jQuery

<script type='text/javascript' src='script.js?ver=1.1'></script>

This file will now be reloaded in the browser and cached. For any further changes, you will need to incrementally add a version number to the file.

***

Mudbath is a 40+ person digital product agency based in Newcastle, NSW. We research, design and develop products for industry leaders.

Are you a developer who's looking to join Newcastle's fastest-growing software agency? Get in touch.