A light load today, because the subjects are heavy. Ok, well, sort of…
Helium
Ever taken over a site/project and wondered how much of that CSS is really necessary? You don’t want to just start deleting stuff, cause you never know what stuff might be needed “now and then”… Well, Ajaxian writes about Helium, which sounds like it might be able to help you. Er, us.
Essentially, (you’re going to want to do this in a dev-type environment only) you add the Helium JS to a site:
<script type="text/javascript" src="path/to/helium.js"></script>
initialize it after page load:
helium.init(); // however you add functions to your page load event
and load your site.
When the site loads, Helium will present you text box. Add all the URLs you wish to check and click the Start button. Helium will then navigate through your site, checking page elements against all the CSS declarations it encounters, and present you with a list of unused CSS declarations.
Pretty slick, right? While this does smack reminiscent of Brothercake‘s Firefox Add-on Dust Me Selectors, Helium has the added advantage of programmatically navigating your site for you, whereas you have to manually navigate every page on your site that might possibly contain a unique element with Dust Me Selectors. (Though, in order for Helium to navigate to every page, every page must be linked to somewhere on your site…)
There are a couple drawbacks, of course:
- Again, you should only ever attach Helium to a dev-type environment, because anyone viewing a page that has Helium attached will see the text area…
- It currently does not work for IE6 or 7 (and, per the Github page, “*might* run in IE8”)
- All CSS files must be on the same domain
- Any JS errors are likely to completely break Helium
So, not perfect, but it might be helpful, no?
IE-CSS3.js
Okay, next up is a piece Andy Clarke writes about IE-CSS3, a new JS library that makes CSS3 pseudo-element selectors work in IE. I know, fantabulous, no??
Essentially IE-CSS3 scours your CSS files for CSS3 pseudo selectors, creates new similarly-named class names (div:nth-child(2) will become div._iecss-nth-child-2), then uses Robert Nyman’s DOMAssistant to apply the newly created classes to the proper element(s) so they will now receive styling!
Okay, this is one helluva work-around, but it is in fact a work-around, for anyone uses fancy, new CSS3 pseudo selectors, that is… Anyone?
The 5th Day of jQuery
Lastly, jQuery Day 5 talks briefly about the latest contest offering, but then offers a nice little video with Paul Irish talking a couple of the latest and great features and improvements in jQuery 1.4, namely .live() and .closest()! Seriously good stuff here, DO check it out!
Happy reading,
Atg