Client-side CSS caching is the worst! Throw in a CDN and you have a real nightmare. No matter what you do, you can’t get the browser to refresh the CSS file and show you the changes. Reload, refresh, F5, ⌘ + R, CTRL + F5 – whatever you click nothing works. We also have that problem, and we have a simple solution you will love!
Forget about clearing your browsers’ cache – meet our cache buster
The best solutions are the simplest ones. No, we won’t tell you to change your code, modify any server settings, htaccess file, to clear the cache, or install a browser add-on – we’ll just give you a bookmark, or a bookmarklet to be more precise. Try it now.
Simply drag the link above to your bookmarks bar and you’re done! Whenever you’re on a page that refuses to reload the CSS just click the bookmark. Don’t believe us? Click the link now and watch the magic happen – all CSS on this page will force reload.
How does it reload all CSS?
It’s simple. When you click the bookmark, it runs a few lines of JS which find all the CSS files used on the current page. Then it adds a random GET variable to the end of the file which forces the browser to think it’s an entirely new file, and it reloads it. You see the screen flash with unstyled content for a second and after that – magic! All your CSS edits are visible.
When you reload the page, the changes will be gone because the original cached file will be used again (most probably, unless the original cache cleared in the meantime), so you have to click the “reload CSS” bookmark once more.