DEV Community

Cover image for 3 ways to prevent browser stylesheet caching
Chris
Chris

Posted on • Edited on

7 1

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" />


Enter fullscreen mode Exit fullscreen mode

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" />


Enter fullscreen mode Exit fullscreen mode

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)

Screen Shot 2021-02-13 at 1.52.35 PM

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!

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay