How to prevent CSS caching in the browser during testing

What happened

As mentioned in the previous article about opening F12 (Developer Tools) after enabling IE mode in Edge, dealing with IE-related issues has been quite challenging recently.

Because certain CSS syntax is not supported in IE, continuous testing is necessary. However, regardless of whether it’s in incognito mode or not, there are instances where CSS is still cached, preventing the visibility of the intended changes.

Cache

Simply put, browsers store some previously accessed data on the local hard drive so that the next visit can quickly retrieve it.

The advantage is a reduced load time for subsequent visits since files like JS and CSS are already present and don’t need to be downloaded again.

The drawback, as mentioned, is that if a file with the same name is modified, the browser is unaware of it and might take some time before fetching the updated data.

Solution

Having discussed the root cause, let’s talk about how to resolve it.

First Method – Clearing Browser History

In order to address this issue, the initial approach is to clear the browser history.

You can see that under the option to clear the history, there is the choice of “Cached images and files” (using Edge as an example).

While this method can achieve the desired effect, it becomes cumbersome if frequent modifications are needed.

Second Method – Adding a Version Number (or any random value) to the URL

To address the caching issue, another approach is to append a version number or a random value to the URL.

<link href="style.css?v=1.0" rel="stylesheet" />

By adding a version number or a random parameter to the URL, the cache is tricked into thinking that it doesn’t have the file. Consequently, the browser requests and downloads it, successfully achieving our goal.

However, there are some limitations, such as the need to manually change the number for subsequent modifications.

To address this drawback, integrating JavaScript can be employed to dynamically generate parameters. I’ll supplement this later as it hasn’t been in use for a while, haha.

Conclusion

After reading our article, say goodbye to constantly using incognito mode or restarting to confirm CSS changes!

See more about what is browser cache : What is a browser cache, and why is it important? | BigCommerce

🧡You can support me by sharing our posts, Thanks a lot

✅If you got any problem about this post, please feel free to let us know

Some Random notes