Bookmarklet: Reload CSS files without reloading the page

Working on styling the contents of popup windows can be frustrating and laborious. But not if you can just reload the CSS…

This bookmarklet will reload all the associated stylesheets in the current document. It looks for all <link/> elements with rel="stylesheet", removes from the DOM and re-adds them appending a ?_=1234567890 (or &_ depending on the URL, where the numbers represent the JS timestamp) into the <head/>.

Hopefully this will help someone suffering similar pain to myself!

Reload CSS (Add the link to the left to your bookmarks to use!)

Please note: I haven’t tested this in IE, but surely it’ll work… Right?

Full commented code:

(function(document, getElementsByTagName, toString, match, href, length, i) {
    var head = document[getElementsByTagName]('head')[0],
        links = document[getElementsByTagName]('link'),
        store = [];

    // iterate over all the existing s
    for (; i < links[length]; i++) {
        // if it's a stylesheet
        if (links[i][href][toString]()[match](/\.css/)) {
            // clone the element, false is needed as Firefox requires the deep flag
            store.push(links[i].cloneNode(!1));

            // then remove it from the DOM
            links[i].parentNode.removeChild(links[i]);

            // decrement i, because links is a NodeList (not an array) and when the element is
            // removed from the DOM, it is also removed from the NodeList
            i--;
        }
    }

    // iterate over the stored items
    while (store[length]) {
        // strip out any previous cachebusting querystring
        store[0][href] = store[0][href][toString]().replace(/([&\?])_=\d+/, '');
        store[0][href] = store[0][href] + (store[0][href][toString]()[match](/\?/) ? '&' : '?') + '_=' + Date.now()[toString]();

        // put the element in the 
        head.appendChild(store.shift());
    }
})(document, 'getElementsByTagName', 'toString', 'match', 'href', 'length', 0);