HowTo: CSS Refresh for Mozilla Firefox

When developing new websites, one of the worse things is that you always have to refresh the whole page to see some minimal changes made on an external .css file. Sometime ago I have found one small peace of script that forces the website to just update the CSS code.

It work this way: Even in localhost or on a remote host, when you make some changes just on the CSS file, and press F5 in any browser, you have to download all the xhtml and images again. When you are working with an remote server, this is one of the worst things, and takes some seconds of your precious time! To improve that you should bookmark a small JavaScript code in to your Firefox toolbar, and when you want to update just the CSS style you press it. The script deletes the css file from your cache, re-opens the website cached and with the CSS file updated. This way is way faster!

To create this button you should click with right mouse button on your “bookmark toolbar” in Firefox. In the menu you should choose “New BookMark”; insert some name, like “CSS Refresh” and in “location” paste this code:

javascript:void(function(){var  i,a,s;a=document.getElementsByTagName('link');for(i=0;i<a.length;i++){s=a[i];if(s.rel.toLowerCase().indexOf('stylesheet')>=0&&s.href)  {var  h=s.href.replace(/(&|%5C?)forceReload=d+/,'');s.href=h+(h.indexOf('?')>=0?'&':'?')+'forceReload='+(new  Date().valueOf())}}})();

Now, everytime you’re in Firefox making some changes on your CSS code, just press the button to update your style sheet.

16 comments on “HowTo: CSS Refresh for Mozilla Firefox

  1. Dennis November 23, 2007 7:33 am

    Thank you very very much!! Been looking for something like this for a very long time!! I’m a webdesigner who constantly rams on the F5 key in my Mozilla alike webbrowers. Reduces server load and saves time when pages load slowly.

    Now if something like this would work for Internet Explorer (6 or 7)? Tested the same trick but didn’t work.

  2. Antonin Hildebrand April 6, 2008 2:36 pm

    I was looking for solution to this problem.
    If you are on windows, you may want to try XRefresh ( Version 0.7 supports fast update of CSS files as a reaction to filesystem change to some of these CSS files.

  3. Anna May 4, 2008 7:34 pm

    Just got a new laptop, downloaded Mozilla and pages keep constantly refreshing themselves!!! Can’t open some pop-up windows because they again constantly refreshing themselves and don’t even let me get into them HELP!! Explore is working normal

  4. DanielAndrade May 7, 2008 8:29 pm

    Päivää anna, every page is refreshing? Are you sure it isn’t a virus?
    There are some virus that won’t let you open firefox, so you must use IE. Try installing some anti-virus 🙂

  5. cemre May 31, 2008 3:16 am

    oh f*.. you daniel, really. i was looking for this on google and found your page.. haha :)) :)) thanks a lot :))

  6. DanielAndrade June 1, 2008 10:56 pm

    @cemre LOL!

    @Chris Heald Well done! Thanks for linking 🙂

  7. Стоян Димитров June 26, 2008 3:55 am

    Even better: CSS Sync – still in experimental stage, but rocks!

  8. Thomas November 21, 2008 6:31 pm

    I ran into the same “symbols” problem because of wordpress “smart quotes” and for somereason firefox does like a urlencode() on it. So i’ll try pasting it in the <pre> element trying to avoid smart quotes.

    javascript:void(function(){var i,a,s;a=document.getElementsByTagName(‘link’);for(i=0;i=0&&s.href) {var h=s.href.replace(/(&|?)forceReload=d /,”);s.href=h (h.indexOf(‘?’)>=0?’&’:’?’) ‘forceReload=’ (new Date().valueOf())}}})();

  9. Till April 1, 2010 10:57 am

    sorry that was mispasted:)

    for(f=0; f= 0 && stylesheet.href) {
    var h = stylesheet.href.replace(/(&|?)forceReload=d /,”);
    stylesheet.href = h (h.indexOf(‘?’)>=0?’&’:’?’) ‘forceReload=’ (new Date().valueOf());

  10. Till April 1, 2010 11:02 am

    sorry i give up; pointed braces got deleted, and i dont want post more junk just to figure out the the rules:-/

  11. Haha September 26, 2011 8:13 pm

    Not working at all mate..Then i pressed this nothing happened..pfff

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This site uses Akismet to reduce spam. Learn how your comment data is processed.