Reload CSS Bookmarklet

Nick asked me today if there was a way to just reload the stylesheets without having to reload the whole page, which can be frustrating for AJAX development. I hacked at it for a bit and stuck it on our development environment, then cleaned it up into a bookmarklet. Drag the following link to your toolbar for CSS reloading happiness & superior quality.

Reload CSS

Update: Fixed it to work in Internet Explorer.* Turns out the original code was doing too much work, adding/removing link elements. The new code simply replaces the href attribute with a randomized value.

javascript:(function() {
    var e = document.getElementsByTagName( "link" );
    for( var i = 0; i < e.length; i++ )
        if( e[ i ].rel.match( /stylesheet/ ) )
            e[ i ].setAttribute( "href", e[ i ].getAttribute( "href" ).replace( /\?_r\=[^&]+|$/, "?_r=" + Math.random() ) );
})();

* Once. It crashes on the 2nd time, at least in IE6 SP2.

Comments

February 14
2:05 PM
Edit

Antony Scott writes:

Excellent little post. However, it does crash if run more than once in IE.

I really wanted this to work more than once, as it will prove really useful in my day-to-day development work.

So, i persisted and came up with a solution. I've posted an entry in my own blog.

October 18
1:34 AM
Edit

Paul writes:

Its nice really nice. I haven't seen script like this.

A good url you may check. AJAX and CSS
www.ajaxflakes.com
css 101

September 10
12:20 AM
Edit

Antony Scott writes:

I have moved my previous blog entry to here - http://blog.sixgun.co.uk/?p=25

Leave a Comment