How to Prevent CSS Caching (3 Ways)

Learn about the best ways to prevent your browser from caching your websiteā€™s CSS files locally.

Published Categorized as CSS

Hereā€™s the question thatā€™s been on your mind for the past you-say-how-many-minutes: How on earth do you prevent your browser from caching the CSS files on your website?

While this isnā€™t a good idea for your production website (just think of the sheer number of requests that users will generate!), it is a valid question if youā€™re working on a website in a development or staging environment.

After all, the CSS files in this environment are constantly being updated by you and the other developers of the site. And the last thing you want to have to do is to constantly clear your browserā€™s cache from the settings.

Soā€¦ how to prevent your websiteā€™s CSS files from getting cached?

Do a Hard Refresh in Your Web Browser

A hard refresh, also known as a ā€œhard reload,ā€ is when you instruct your web browser to reload a web page and clear its local cache at the same time.

To do a hard refresh of a web page in most web browsers, hold down the Cntrl key on your keyboard and click on the ā€œRefreshā€ button. The browser will reload the page and flush the local cache.

This is a good option if you need to clear the cache for your websiteā€™s CSS file once. However, if youā€™re a web developer and need to do this over and over again, it can become tedious.

In such a case, you itā€™s probably better for you to consider one of the other options below.

Load Your Style Sheet With a Cache Buster

Normally, you would load a CSS style sheet by adding the following tag to the <head> section of your HTML document:

<link href="style.css" rel="stylesheet">

The problem with this methodā€”at least from the point of view of what weā€™re trying to accomplish hereā€”is that CSS is a heuristically cacheable resource. That is, most browsers will cache a CSS stylesheet unless you do something about it.

One of the things that you can do is to load your CSS style sheet with a cache-busting JavaScript function. So, instead of using a <link> element, you should add this code snippet as high as you can in your siteā€™s <head> section:

(function() {
    // Replace with the URL of your CSS style sheet
    const href = '/style.css';

    // Leave the rest of the code as-is
    const link = document.createElement('link');
    const cacheBuster = Math.round(new Date().getTime() / 1000);
    link.setAttribute('href', href + '?cb=' + cacheBuster);
    link.setAttribute('rel','stylesheet');
    head.appendChild(link);
})();

This will load your CSS style sheet with a random ?cb="" parameter that busts your web browserā€™s cache on every single reload.

Itā€™s important to note that this method will have an impact on the loading speed of your website, as the JavaScript function will take longer to execute than the HTML declaration of the <link> element.

Disable Caching in Your Browser

If youā€™re a web developer and you want to disable caching on your local machine so that you can work on your website without having to constantly hard-refresh it, you can temporarily disable caching in your browser.

How to Disable Local Caching in Google Chrome

To locally disable caching for your website in the Google Chrome browser, follow the steps below.

Steps to disable caching in Google Chrome:

Step 1: Fire up your Google Chrome web browser and open the web page for which you want to disable caching.

Step 2: Open the Google Chrome developer tools. If youā€™re on a macOS computer, hold down the Alt + Cmd + J keys on your keyboard. If youā€™re on a Windows PC, hold down the Ctrl + Shift + J keys.

Step 3: Google Chromeā€™s developer tools will pop up. Switch to the ā€œNetworkā€ tab and make sure the ā€œDisable cacheā€ checkbox is checked.

Step 4: Refresh your website. As soon as you do, youā€™re all set. You can now work on your website without worrying about the CSS files ending up in your machineā€™s local cache.

How to Disable Local Caching in Firefox

To stop local page caching in Firefox, follow the steps below.

Since you will be disabling caching for all pagesā€”not just your websiteā€”do not forget to re-enable caching by following the same steps once you are done with development.

Steps to disable caching in Firefox:

Step 1: Fire up the Firefox web browser.

Step 2: Type about:config in the address bar and hit the Enter key on your computerā€™s keyboard.

Step 3: Type ā€œbrowser.cache.disk.enableā€ (without quotation marks) in the search bar. This is the setting that enables or disables local caching.

Step 4: Double-click on the setting and ensure it now has the value ā€œFalseā€.

Step 5: Repeat the process for the ā€œbrowser.cache.memory.enableā€ setting (once again, without quotation marks).

The Bottom Line

Thank you for reading this far, and I hope this tutorial helped you along your web development journey.

CSS files are heuristically cacheable, and thatā€™s how theyā€™re supposed to be. However, this is the last thing you want when youā€™re developing or testing a website, and the contents of its CSS file are constantly changing.

Now you know three of the best ways to prevent your web browser from caching your siteā€™s CSS files locally. If you can think of any others, please leave a comment. The same goes if you have any questions!

By Dim Nikov

Editor of Maker's Aid. Part programmer, part marketer. Making things on the web and helping others do the same since the 2000s. Yes, I had Friendster and Myspace.

Leave a comment

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