top button
Flag Notify
    Connect to us
      Site Registration

Site Registration

How to force the browser to pick the fresh CSS?

+3 votes

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?

posted Sep 24, 2013 by Salil Agrawal

Share this question
Facebook Share Button Twitter Share Button LinkedIn Share Button

2 Answers

+2 votes
Best answer

Google's mod_pagespeed plugin i.e. 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.

answer Sep 24, 2013 by anonymous
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).
+2 votes

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.

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

answer Sep 24, 2013 by Satyabrata Mahapatra
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.
Similar Questions
+1 vote

I have a new favicon image for the QueryHome but somehow it is not appearing on the browser. Thought the best way to ask this at QueryHome itself.

+1 vote

I tried the following code.But its not working.

html {scrollbar-face-color:#D6D7D6 ;
scrollbar-shadow-color: #FFFFFF;
scrollbar-3dlight-color: #FFFFFF;

scrollbar-track-color: #FFFFFF;
scrollbar-arrow-color:  #000000;}
+2 votes

I am using transform: rotate(270deg); which works perfect on chrome but not on default browser of mobile. Any alternative of the same?