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!
