Breaking CSS Cache

I built a simple web interface for SolarWinds Orion. I recently converted all the status images that used to be individual files into a CSS sprite to save on HTTP requests. Now instead of grabbing all the stats light graphics one by one the browser only needs to download my sprite image once.

After implementign the change most of my users reported losing the devices status images and just seeing the text in the the status column. Text that due to my CSS changes should be pushed off the edge of the page and not be visable.

It turns out the problem was related to browser caching I recently implemented that caused CSS files to be cached in the browser for a month.

The fix is rather easy I simply need to make the broswer think the CSS file it has in its cache is no longer valid. Changin the name of the file will occomplish this but we don’t want to have to rename all our CSS files.

The v=1 at the end of the filename does just want we wanted, the broswer will now think overrides.css is a new file. This is a variable and with CSS is simply ignored, Now whenever we make changes we can simply increment this file up by one. Browsers will think its a diffrent file and download the new content.

Our Users will now see the changes we made to the CSS in our overrides.css file.

No tips yet.
Be the first to tip!

Like this post? Tip with bitcoin!


If you enjoyed reading this post, please consider tipping me using Bitcoin. Each post gets its own unique Bitcoin address so by tipping you're not only making my continued efforts possible but telling me what you liked.