Enable CSS pseudo-element selectors in Internet Explorer with IE-CSS3.js

Richard Tape

“A game changer.” — A strong statement indeed, Mr. Clarke. However, the way you describe this little gem makes me think that it’s not overstated.  If nothing else, this might, may, perhaps, please god, stop ‘certain people’ from writing comments such as:

“Yeah, this is great, but until it works in all browsers, I’m not touching it”

Things like that make me a sad panda. Things like ie-css3.js make me a happy bear!

Tony Wu

This is brilliant! Definitely gonna have a go at it on my coming up project!

Cesar

Wicked! will result to this when the need arises.

Steve Clark

Jquery is a very heavy library especially if all you are looking at is nth selectors. i think iecss.js is the way forward tiny file size.

Ethan

Andy, The iecss3.js will come in useful. In this case though, I think jquery would’ve done the trick, either with :nth-child (which isn’t exactly the same as nth-of-type, but could’ve worked here) or :eq. But beyond jquery vs. iecss, I think this example might have been best solved by adding ids to your divs. It mucks up the HTML a bit, but:

1. It saves you the Javascript, which is still necessary for now and is a performance hit.
2. Using ids actually gives you more separation between content and style, since the author divs could be reordered without needing to change the CSS.
3. In this case, the structure of the page means that you don’t have to worry about needing to repeat ids, since each author is very clearly unique.
4. And, since each CSS rule is only styling one item anyway, you aren’t losing efficiency either.

Just my two cents. Thanks for the article.

Chris

Well, I really hope it’s way better than Dead Edwards’ IE7.js, because using this got me very, very much trouble and extra work.

I used IE7.js because you recommend it in your book Transcending CSS. First it looked really nice and I started to use it in all of my projects, private and commercial. Everything went fine, until I used it at a very large project. Unfortunately too late I realized that IE7.js slowed down the HTML templates so much that whenever I opened a page in IE6 there was a delay of a few seconds and even in IE7 there was a noticeable delay. And ther was NO way to stop this. So I had to do it the old fashioned way, kicked IE7.js and adapted the website as good as possible so that it also was usable in IE6.

And that got me very much extra work and the big problem was that I all had to do that in the last part of the project, where I really had time for nothing. So, I sadly have to say that IE7.js is a big shitload of crap. Dead Edwards himself seems to be too busy or whatever to respond to my emails where I confronted him with my troubles. And so I am very, very disappointed by his script and him too.

(This comment was left on For A Beautiful Web)

Steve Clark

@Mathias Bynens yes, If your using Jquery it would make sense to use it.

Also Keith Clark has written a really lightweight Javascript library called $DOM (http://www.keithclark.co.uk/$dom/). Its not Jquery and does not try to be but for 5k it does scrollers, accordians (Current design trends) and some pretty funky stuff.

At the end of the day I will use JQuery for most thinks as its Ajax and UI is awesome and simple, but if I dont need these things I will use Keiths ie library or $DOM if I need to do simple scrollers.

Good work guys.

Simon

Andy, surely as a front-end developer you have to be expected to grasp even the basics of Javascript? I used to be like yourself but the way the industry has changed you can’t just ignore what is now an essential tool in the toolbox.

Keith Clark

Hi guys,

If you use jQuery then you’ll need to write your own functions to apply any styles that are defined by unsupported selectors in IE - not all web designers are JavaScript savvy - ie-css3.js parses the style sheet and does it automatically.

I do understand the point though, if your using JQuery then it’s selector engine is loaded in memory so why download another (ie. DOMAssistant)? Well, as Andy points out, not all selectors are supported in all libraries.

I was thinking about allowing users to plug their own selector engine into ie-css3.js (allowing you to use jQuery, base2, peppy, sizzle etc.) but this would make the feature support dependent on the library used so I need to give it some more thought. I’m also seriously considering writing an IE8 only version that doesn’t use a 3rd party selector engine but a patched version of querySelectorAll() making it tiny (around 2-3k)

Ultimately, the aim of this script is to bring IE8’s CSS3 support inline with other browsers of it’s generation so we can start leveraging the power of things like ‘:nth-of-type’ now. Hopefully, when IE9 comes along with (god willing) it’s expected CSS3 support our sites should just work without modification.

Keith

Jen

The roles they are a-shiftin’... It seems there was a day where designers could get by without knowing JavaScript, and for those from that era who earned a quality rep, they may stay so. However, those of us who came to it a bit later must learn to understand it.

Different workflow require different tools. In one, the server-side devs write advanced js, and the client-side designer/dev writes next-to or none. In another, the server-side devs don’t do JavaScript and the front des/dev is exected to handle it. Just last week, a ruby programmer said to me that he didn’t need to learn JavaScript because of the ease of using jquery.

Now, I tend towards naïveté, but it seems to me that it is helpful if devs know JavaScript, and understand the basics of the constructs. It aids the implementation of js frameworks, it streamlines how css controls might be implemented.

JavaScript was butt ugly even just eight years ago, but it’s clearer now. It is wise to pick up a copy of [removed] The Good Parts to gain a better grasp on
this useful tech.

It looks the :nth-of-type & :nth-child selectors need some clarifying. Who’s gonna get there first? ;)

Stephen Hay

To correct myself:

p:nth-of-type(2) should style the second instance of ‘p’ in the document tree, not every second instance. That would presumably be p:nth-of-type(2n+1).

I think. :)

Nick Bergquist

@Stephen

or you could simplify it further with p:nth-of-type(even) to select every second one..

Stephen Hay

@Nick: I mean (2n+0) and (2n+1).

Nick Bergquist

oOps… I don’t type quick enough.. sorry for any confusion!

Aaron Gustafson

Hey Andy, just so you’re aware, CSS3 selectors (including those you’re using) are supported with the CSS3 Selectors extension (a few tricky ones, like adjacent sibling selectors, aren’t supported yet, but I’m working on the remainder). In fact, I’m using that extension on the eCSStender site right now. You can view the compatibility test in the ZIP file.

Mathias Bynens

Now, write your HTML as normal. As minimal and free of presentational classes and IDs as you can make it. This is the HTML from my “It’s Hardboiled” authors page.

I don’t mean to be nitpicky, but your example code isn’t as “minimal and free of presentational classes and IDs as you can make it”:

<section class="authors">
<h1>Hardboiled authors</h1>
<div class="vcard"><!-- content --></div>
<div class="vcard"><!-- content --></div>
<div class="vcard"><!-- content --></div>
<div class="vcard"><!-- content --></div>
<div class="vcard"><!-- content --></div>
<div class="vcard"><!-- content --></div>
<div class="vcard"><!-- content --></div>
<div class="vcard"><!-- content --></div>
<div class="vcard"><!-- content --></div>
</section>

section.authors .vcard:nth-of-type(1) { /* CSS */ }
section.authors .vcard:nth-of-type(2) { /* CSS */ }
section.authors .vcard:nth-of-type(3) { /* CSS */ }
section.authors .vcard:nth-of-type(4) { /* CSS */ }
section.authors .vcard:nth-of-type(5) { /* CSS */ }
section.authors .vcard:nth-of-type(6) { /* CSS */ }
section.authors .vcard:nth-of-type(7) { /* CSS */ }
section.authors .vcard:nth-of-type(8) { /* CSS */ }
section.authors .vcard:nth-of-type(9) { /* CSS */ }

You can omit class=“vcard” from the HTML, and section.authors could just as well be .authors in the CSS (although I think you added that last one for clarity). Here’s what I’d use:

<section class="authors">
 <h1>Hardboiled authors</h1>
 <div><!-- content --></div>
 <div><!-- content --></div>
 <div><!-- content --></div>
 <div><!-- content --></div>
 <div><!-- content --></div>
 <div><!-- content --></div>
 <div><!-- content --></div>
 <div><!-- content --></div>
 <div><!-- content --></div>
</section>

.authors div:nth-of-type(1) { /* CSS */ }
.authors div:nth-of-type(2) { /* CSS */ }
.authors div:nth-of-type(3) { /* CSS */ }
.authors div:nth-of-type(4) { /* CSS */ }
.authors div:nth-of-type(5) { /* CSS */ }
.authors div:nth-of-type(6) { /* CSS */ }
.authors div:nth-of-type(7) { /* CSS */ }
.authors div:nth-of-type(8) { /* CSS */ }
.authors div:nth-of-type(9) { /* CSS */ }

Mathias Bynens

@Andy: Ba dum tsss :)

Sure, I just didn’t realize you would be using the hCard microformat for displaying fake contact info of non-existing detective agencies. I thought you were just using it as a classname. My bad!

Vladimir

Very good work.
Thanks

(This comment was left on For A Beautiful Web)