How to force the browser to pick the fresh CSS?

Question

Facing some weird issue, whenever I open my website in the crome it is picking the old CSS file while in Firefox it is picking the latest. How can I force the browser to pick the latest CSS?

Answer 1

Google's mod_pagespeed plugin i.e. http://code.google.com/p/modpagespeed/ for apache will do auto-versioning for you. It's really slick.

It parses HTML on its way out of the webserver (works with PHP, rails, python, static HTML -- anything) and rewrites links to CSS, JS, image files so they include an id code. It serves up the files at the modified URLs with a very long cache control on them. When the files change, it automatically changes the URLs so the browser has to re-fetch them. It basically just works, without any changes to your code. It'll even minify your code on the way out too.

Comments

Thanks it worked and updated the QueryHome CSS also. Now each TAG page is having sub-navigation at right side (Recent, unanswered, Most Votes and Most Answer).

Answer 2

You need to clear your cache. Developer Tool always allows you to disable the cache.
But it is too annoying when you need to clear the cache 30 times an hour.. so I installed a Chrome Extension called "Cache Killer" that clears the cache on every page load.

https://chrome.google.com/webstore/detail/jpfbieopdmepaolggioebjmedmclkbap

Sure it'll help you because your JSON, Javascript, css, Html and data refreshes automatically on every page load.

Comments

Thanks Satya, My problem was that whenever a CSS is updated I can not force users to update and they can see a skewed stuff as some of the browser must be caching in.  Mod-PageSpeed has solved the issue.