3 ways to prevent browser stylesheet caching

Here are three ways to make sure that any changes made to your stylesheet, are reflected on your local server.

The first time I built a Sinatra MVC app, I had issues with the stylesheet. After importing my CSS files, I could preview changes made to my stylesheets by refreshing my browser. But after a couple of hours, I started to notice that changes made to the stylesheet were not being applied to my project.

Later I came to find out that my browser was caching my stylesheets; which is why I was not able to view the changes made to my CSS files. Luckily there are a couple of workarounds for this.

1. Adding a version parameter when importing stylesheet

When importing your stylesheet, it may look something like this.

<link rel="stylesheet" href="/stylesheets/main.min.css" />

All you need to do is add a version URL parameter to the end of your href like so ?version=1.

<link rel="stylesheet" href="/stylesheets/main.min.css?version=1" />

The browser will notice the new version and stop caching the stylesheet. All changes in your stylesheet will be reflected in your browser. The only downside is that this fix is not permanent. Eventually, the browser will cache the stylesheet again(typically every eight hours for me). If this is the case all you need to do is increment the version by one; from ?version=1 to ?version=2.

2. Disable caching in Chrome

If you are using Google Chrome, you have the option to disable caching. The only downside is that caching will be disabled as long as your developer tools are open.

1. Open developer tools; Option + ⌘ + J (on macOS), or Shift + CTRL + J (on Windows/Linux).
2. Click on the Network tab, typically located along the top.
3. Click the checkbox for Disable cache right under the Navigation tabs(near to top)

3. Hard reload browser

Instead of refreshing your browser, you will be hard reloading your browser. All browsers have different ways of hard reloading the page. Feel free to check out the link below to find the short cut keys for hard reloading your browser.

https://www.getfilecloud.com/blog/2015/03/tech-tip-how-to-do-hard-refresh-in-browsers/#.YCghas9KgTs

Hope this article was helpful!