Make CSS changes go live immediately

Browsers will not always apply CSS changes right away. Sometimes the end user will have to refresh the page to force the browser to dump and rebuild the cache. This isn’t a massive problem during development, but once the site goes into production it can become problematic. Here are two solutions I use to make sure end-users see CSS changes right away without any page refreshing.

The first example is simple and can be used with any site. The second example will be for a WordPress theme.

Example One

Chances are the call to your CSS file looks something similar to this:

<link rel="stylesheet" href="library/styles/base.css" media="screen" />

If you want browsers to dump the old CSS file and load up the new/modified CSS file, simply add a version to the CSS file. It should look something like this:

<link rel="stylesheet" href="library/styles/base.css?ver=1.1.0" media="screen" />

So, every time you make a change, just up the version. This will force the browser to redownload the CSS file and apply all changes. Very easy, and no more “please refresh your page” conversations with clients.

Example Two – For a WordPress Theme

The top of your style.css file in your theme folder must start with a comment like this:

/*
Theme Name: Kuma
Author: Designer: Wendy Chang /\ Developer: Will Rees
Author URI: http://wordpressmason.gmu.edu
Version: 1.1.3
License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

You can learn more about this required comment at the WordPress Codex. You will notice that there is already a theme version located in this file. When you make updates to your theme, you should always update the version number.

So what we want to do is automatically pull the version number from your style.css into the CSS call located in the <head> of your site. So, change the code from:

<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>" type="text/css" media="screen" />

To:

<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>?ver=<?php $theme_version = wp_get_theme(); echo $theme_version->Version; ?>" type="text/css" media="screen" />

This will ensure whenever you update the Version line in style.css the version will automatically change in the CSS call. This will cause the all CSS files stored locally to recache. Your audience will always see CSS changes right away without refreshing the page or clearing the browser cache.

 

3 thoughts to “Make CSS changes go live immediately”

Leave a Reply

Your email address will not be published. Required fields are marked *