Monday, January 18th, 2010

Helium CSS: JavaScript Library to test your CSS usage

Category: CSS, JavaScript, Library, Testing

<>p>Geuis Teses has released an enjoyable library called Helium that has the goal of testing your stylesheets for unused style.

You inject helium into your site (e.g. put it in an included footer) and then when you hit the first page you will have a popup asking for the pages you want to test. Helium will find the style sheets that you use and will store that information and the page information inside of localStorage. Then it will XHR around (so your styles need to be on the same host), test each page, and finally give you results.

I put up a trivial example to give it a ride and ended up with:

heliumcss

I ran into a minor issue with regards to relative stylesheets so I did the Github thing and forked, fixed, and pull requested. I love Github :)

Related Content:

3 Comments »

Comments feed TrackBack URI

It’s strange but it appears that such tools aren’t so many!

Comment by stoimen — January 18, 2010

Look slike a bit of a copy/rip-off from the “CSS Usage” firebug plugin.
https://addons.mozilla.org/en-US/firefox/addon/10704

Comment by Jaaap — January 18, 2010

Similar to “Dust-Me Selectors”, too: http://www.sitepoint.com/dustmeselectors/ . But still useful because you can use it on more platforms than Firefox, which makes testing for browser-specific CSS less tedious. Once the developer gets it working in IE (as he says he plans to), it’ll become much more useful.

Comment by barryvan — January 18, 2010

Leave a comment

You must be logged in to post a comment.