I gotta say, I love both these scripts. Modernizr helps me with feature detection as well as forcing Internet Explorer to see HTML5 elements so they can be styled. ie-css3.js allows me to use CSS3 pseudo-class selector emulation for Internet Explorer 5.5 – 8. They’re both extremely helpful for making HTML5 and CSS3 work in browsers today.
Except maybe when you use them together. I just spent the past, oh, about 4 hours troubleshooting an HTML5 page I am building. It worked, and then it didn’t. And you know how it is, you did a whole bunch of things between the times you checked it in BrowserLab (or whatever you use to test on IE). I swear I took ie-css3.js out somewhere along the way in my myriads of tests I ran… but at this hour, who knows.
All I know is, my sweet husband on his break in India, just spent some awesome IM time with me looking at the various renditions I had created of the page and helped me figure out the issue. Apparently some interaction between the two scripts produces trailing slashed on all opening and closing HTML5 tags. Update: Apparently, the screenshot below is what you get when Modernizr wasn’t working (I believe it was when it was too far down in the page):
Those trailing slashes made everything fall apart in IE.
I just ran a quick test with Remy Sharp’s HTML5shiv, and it gives the same broken results. And I did move the ie-css3.js above and below each of the JavaScripts that affect the HTML5 structure for Internet Explorer. It didn’t make any difference in my testing.
One more quick note—be sure to put modernizr.js at the top, even if you typically move your JavaScript to the bottom of the page—order matters.
I hope this heads up helps someone else who thought they might use these scripts together. Update: Thanks to Keith for figuring out the problem using my test cases. Turns out it was not an interaction between the two (or three) scripts. There was a problem because I used attribute selectors based on my ARIA roles (ie: [role=”banner”] { }) and ie-css3.js was skipping those selectors. He’s going to be patching the problem and getting it released shortly. Perhaps it’ll save you four hours of your life. Perhaps you won’t even need the time saved at all. Thanks Keith!
