One annoying aspect of writing a stylesheet is having to reload the page in your browser to see your incremental changes. There are ways to workaround this, but I find them less than ideal so I created ReloadCSSEvery. It refreshes only the CSS of a loaded page every 2 seconds so you can use your CSS editor of choice and see semi-real-time changes in your browser when you save.
Get it
You must enable Javascript! (right-click, add to favorites or bookmarks)
How it works
Every 2 seconds the script adds a unique query string to the href of any stylesheet link elements, causing them to reload the file. Note, the script only updates link elements and not “alternative” stylesheets, so pages with styleswitchers or @import-ed stylesheets may not be completly refreshed. Uncompressed source
Other workarounds for “live” CSS editing
- Jesse Ruderman’s classic edit styles bookmarklet lets you see real-time changes, but is limited to Firefox and can only allow editing in a plain textarea without syntax highlighting or autocomplete.
- Similarly, Opera now offers a CSS editor (it’s essentially a bookmarklet, too), but it destroys the original CSS formatting and any comment hacks, etc.
- Opera’s “Reload every” feature allows you to reload a page at the interval of your choice, but the browser must reload and reparse all markup, rerun scripts, etc, so this is less than optimal. Still a nice feature out-of-the-box for watching last-minute eBay actions, etc.
It doesn’t seem to work for stylesheets that are included through @import (tested in ie6).
Is that something you can implement? I could really use this (and so could the uf web admin dept).
@Taylor: I got close, but I think this isn’t possible. Although IE/win supports the CSS DOM CSSImportRule interface, and will let you set the href to reload an @import, the CSS DOM gets tight-lipped after the file is reloaded and won’t let you access the imports anymore.
Oh well. I appreciate your efforts. For personal projects this will be useful (I usually only use one stylesheet for commercial stuff) but for stuff like UF and Gawker we seperate everything out into a million sheets.
bless you.
Thanks for a great bookmarklet!
I made a small modification to the javascript to enable on/off of CSS refreshing.
Bookmarklet
Hope the code comes through OK.:
(function(){if ( typeof document.__recss != 'undefined' ) {
clearInterval(document.__recss);
delete document.__recss;
} else {
document.__recss=setInterval(function(){
var qs='?'+new Date().getTime(),l,i=0;
while(l=document.getElementsByTagName('link')[i++]){
if(l.rel&&'stylesheet'==l.rel.toLowerCase()){
if(!l._h)
l._h=l.href;
l.href=l._h+qs
}
}
},6000);
}
})();
One last thing – this hasn’t been tested in IE, but works in Firefox. ;)