How many times have you updated your stylesheet, only to find that your style changes had not taken effect until after you had carried out a hard refresh of your browser’s cache.

This can cause a problem because many returning visitors to your website  will not see the new style changes you have made because they will still have the old style sheet in their browser’s cache.

A quick tip to solve this problem is to force the browser to load the latest CSS file.

One way to do this is to ‘version‘ your CSS file:

By using the <link>  element and adding a query string to the end of the file name, it will force the browser to update the stylesheet.

The query string is the ?v=1.1 after the url.

Therefore each time you update your stylesheet you can update the query string. This means your website visitors will always see your latest styles.

Example:

<link href="style.css?v=1.1" rel="stylesheet" />

Stylesheet update

<link href="style.css?v=1.2" rel="stylesheet" />

Updating the query string from ?v=1.1 to ?v=1.2 serves to make the browser think it’s a completely different file.

If you are using WordPress and you update your theme’s style.css you can use the above technique to force the browser to load your latest style.css by inserting the following code into the <head> section of your theme.

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url');
echo '?' . filemtime( get_stylesheet_directory() . '/style.css');
?>" type="text/css" media="screen, projection" />

The above code uses the function filemtime to add the server time that the file was changed to the style.css url. This way your stylesheet file will always be up-to-date according to the file system.

Pin It on Pinterest

Share This