A Bookmarklet To Reload A Page’s CSS
Posted: February 28th, 2009 Tags: Javascript, Web developmentSometimes when I’m developing, I want to change some stylesheets and reload them without reloading the whole page. Often, I use Firebug or the Safari Web Inspector to play with individual attributes, but sometimes I have to edit the CSS files.
So I wrote a bookmarklet to reload the files. Here it is:
(Just drag that into your bookmarks bar. Tested in Safari and Firefox.)
It works by appending the letter “x” after a “?” at the end of each stylesheet reference. That causes the browser to reload the stylesheet. Here’s the code:
var links = document.getElementsByTagName("link");
for (var i = 0; i < links.length; i++) {
if (links[i].rel === "stylesheet") {
if (links[i].href.indexOf("?") === -1) {
links[i].href += "?";
}
links[i].href += "x";
}
}
March 2nd, 2009 at 2:00 pm
simple + awesome, gotta try this tomorrow :)
March 4th, 2009 at 1:10 pm
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!
June 13th, 2009 at 6:40 am
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 ;)
January 22nd, 2010 at 9:08 am
Very useful. Thanks.
March 3rd, 2010 at 1:05 am
Works like a charm. Exactly what I was looking for.
December 9th, 2010 at 12:04 pm
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!
December 9th, 2010 at 12:28 pm
Thanks Josh!
April 23rd, 2011 at 12:16 am
Frikin awesome…
June 1st, 2011 at 6:26 pm
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.
June 4th, 2011 at 10:51 am
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
December 17th, 2011 at 8:07 am
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!