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!
