profeshunl newbie

While  gathering information as a part of my ongoing plan to be omniscient, if came across something that makes IE behave like a capable browser. Although to be fair, IE 8 is actually not that bad a browser – in the way that Star Wars Episodes 1-3 are not that bad. So, yeah, you do the math. I mean, Jar Jar. Pisses me off just thinking about it.

Mr Keith Clark has been conjuring up some serious magic and created a way to emulate CSS3 pseudo-class selectors alongside the javascript library of your choice. This means that you can use goodies such as :nth-child, :first-of-type, :first-child, :last-child, etc. It’s a simple as adding

<script type="text/javascript" src="[JS_LIBRARY]"></script>
<!--[if (gte IE 5.5)&(lte IE 8)]>
<script type="text/javascript" src="ie-css3.js"></script>
<![endif]-->

… in your head tag. But how does it work, I hear you scream. Well, allow me to quote the man himself;

“First off, ie-css3.js checks the page for known JavaScript libraries and picks the one with the best CSS3 selector support.

Next, the style sheets on the page are downloaded and each of their selectors are parsed. Any CSS3 pseduo-classes are replaced by a standard CSS class of a similar name. For example: div:nth-child(2) will become div.iecss-nth-child-2. The detected JavaScript library is then used to find the DOM nodes matching the original CSS3 selector and the same CSS class is applied to them.

Finally, the original stylesheet is replaced with the new version and any elements targeted with CSS3 pseudo-classes will be styled.”

As of this writing, the :not selector isn’t supported but is on its way. There are some caveats, which, to be honest, are not that serious. Except that last bullet point. So don’t go all ajaxy on me now, y’hear?

• You have to use a link tag (@import is OK)
• page level style sheets will be ignored
• Style sheets have to be on the same domain as the page itself and can not use file://
• There is no dynamic emulation, which means that once the page has been rendered and the styles have been applied, changes in the DOM will not be updated.

While on the topic or, rather, something only slightly related, 52 framework promises a way to enable you to use the clean, semantic markup of html5 – today. It employs Eric Meyer’s CSS reset, which is nice in itself, and a grid system that is “loosely based on the 1kb grid and 960.gs”, and… Actually, why are you still here? Just get over there, and check out the 52 framework docs – with video as well as the demo. Don’t forget to check out the source code. can’t wait to play around with this in a project soon.

Come to think of it, I should mention a project on Google Code –  HTML5 Video (or is it HTML5 Media?). This sweet litte package will enable you to embed MPEG-4 files using the H.264 video codec. Or, if you’re using Firefox 3.6, Ogv files encoded with Theora. If you use them both, you could sexy-up your code with the likings of

<video class="video" poster="poster.jpg" width="640" height="480" controls autobuffer>
<source src="my_awesome_movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="my_awesome_movie.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>

You just try to pretend that isn’t sexier than the horrible mess that is embed and object tags. Wrapping up, I might as well give you a tip about an awesome HTML 5 Canvas cheat sheet from the people at Nihilogic. You’re welcome.

Related posts:

1. Flash, King of the Impossible If you have been using a web browser to surf...
2. CSS typography is fun. Really. If you’re in to S&M So I found this article over at Smashing magazine dealing...
3. A Popurls Clone with PHP, jQuery, Awesomeness Good people of the Internets, I know a good deal...
4. Week 10 in review Well, it's time to sum up the week. Since this...