Mudbath Blog

14 September 2015

Add versioning to your CSS and jQuery to avoid caching

As a web designer based in Newcastle I regularly make changes to a website only to have a web project manager or producer tell me that the changes havn'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 around this 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 occured 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.