Comments on: A Bookmarklet To Reload A Page’s CSS

By: Paul Burney

Paul Burney — Sat, 17 Dec 2011 15:07:27 +0000

This tip is so incredibly useful for developing JavaScript interactions since there isn’t anything to do this in Firebug. Thank you very much for posting it!

By: Erik

Erik — Sat, 04 Jun 2011 17:51:17 +0000

I think you can just put any JS in a bookmarklet without any encoding. To share it with other people, encoding is probably helpful. There are online tools like this one to help out: http://ted.mielczarek.org/code/mozilla/bookmarklet.html

By: Kevin

Kevin — Thu, 02 Jun 2011 01:26:11 +0000

Erik, this is very useful, thanks for the inspiration.

I did have a quick question for you though – what exactly do you need to do to convert the snippet of code into a usable bookmarklet?

It looks like its URL encoded, newlines removed, and wrapped in (function(){ … })

Is that correct? Is there anything else I need to do?

I wanted to make a similar one for js files but I’m having difficulty testing it and I don’t know if its my code or the encoding.

By: Matted PC

Matted PC — Sat, 23 Apr 2011 07:16:13 +0000

Frikin awesome…

By: Erik

Erik — Thu, 09 Dec 2010 19:28:04 +0000

Thanks Josh!

By: Josh L

Josh L — Thu, 09 Dec 2010 19:04:52 +0000

Thanks for this bookmarklet, got me going in the right direction. Here is an improved version of the script (probably doesn’t work in IE <9):

var links = document.querySelectorAll('link[rel="stylesheet"], link[href*="css"]');

for( var i = 0; i < links.length; i++ ){

if( links[i].href.indexOf('?') === -1 ){

links[i].href += '?';

}

links[i].href += '&reloadcss=' + Math.random();

}

In your original script, link elements without a "rel" attribute would be missed, and since it was just adding "x" on the end the reloads would be cached. This uses Math.random() so the reloaded CSS files are never cached.

Cheers!

By: Wouter Bos

Wouter Bos — Wed, 03 Mar 2010 08:05:56 +0000

Works like a charm. Exactly what I was looking for.

By: Lawrence Barsanti

Lawrence Barsanti — Fri, 22 Jan 2010 16:08:13 +0000

Very useful. Thanks.

By: Brandon Thomson

Brandon Thomson — Sat, 13 Jun 2009 13:40:00 +0000

This is very useful, thanks very much… Actually I am surprised something like this is not in Firebug. I am using it to speed development of Conquer-on-Contact ;)

By: Paul

Paul — Wed, 04 Mar 2009 20:10:34 +0000

Very cool idea!
I had a problem with this when I first tried it because the page I was testing had link elements with a “rel” attribute of “Stylesheet” instead of “stylesheet” (or both actually). So I switched the 3rd line to:
links[i].rel.toLowerCase() === “stylesheet”

And just a side note… I thought I’d give a try to rewriting this using Prototype since all of the sites I work on include Prototype already (of course this is no longer a generic solution this way). Here’s what I came up with:
$$(‘link[rel=Stylesheet], link[rel=stylesheet]‘).each(function(link){link.href += (link.href.include(‘?’) ? ‘x’ : ‘?x’)});

Thanks again for the great idea!

By: grosser

grosser — Mon, 02 Mar 2009 21:00:01 +0000

simple + awesome, gotta try this tomorrow :)