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 thoughts on “HowTo: CSS Refresh for Mozilla Firefox”

Leave a Reply

Your email address will not be published. Required fields are marked *

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