ReloadCSS Stylesheet Reloader – make development a bit easier

ReloadCSS Bookmarklet: Reload CSS

The ReloadCSS source: Source

A while back I ran into an annoying problem. I was working on a couple of projects that were Java/JSF/JSP based. We were using Eclipse with Tomcat to run the project. The annoying bit was that whenever I made a change to a stylesheet, it would take several seconds to a minute before Eclipse updated the working deployment. Despite refreshing the browser repeatedly, a simple change just wouldn’t refresh immediately.

Also, if the remote dev servers for the database were running slow, each page refresh would take a while depending on what the application was trying to do.

My continuing interest in jQuery as a primary javascript development platform led me to a quick temporary solution. I wanted to make a JS bookmarklet that would dynamically reload all of the stylesheets on the page. I’ve since updated it a bit to make it more robust.

I’ve set this up as a code demo. You can add the bookmarklet to your browser by dragging the link to your toolbar in Firefox, or adding it as a favorite in IE. Safari is a little trickier, but basically just add it as a bookmark and it should work.

When you are on a page you are working on, hit the Reload CSS bookmarklet. This will insert a “Reload CSS” button floating in the top-right of the browser window. Every time you click this it will reload all stylesheets loaded via <link> tags. Sorry, it doesn’t load stylesheets with @import right now.

Each <link> tag href attribute gets a counter incremented as #num. This tricks the browser into updating the CSS.

The bookmarklet checks for jQuery in the DOM, then loads in v1.3.1. If you already have jQuery loaded, it isn’t loaded again. The script itself is then loaded from from my code stash here. When I make updates, they’ll automatically be updated. Also, feel free to copy the code itself if you want to use it or host it locally.

This has been tested and verified working in Firefox 3 and Safari on Mac OS and Windows. This is where I do my primary development and was my only concern when developing this.

Feedback is really appreciated, and hopefully this will help someone out.

ReloadCSS Bookmarklet: Reload CSS

The ReloadCSS source: Source

Leave a Reply

Your email address will not be published. Required fields are marked *