Modernizr, Oh the Mystery

[PixelandtheWolf]

Perhaps this isn't a mystery, because I don't have access to older browser windows, like Internet Explorer 9 or below.
But this does bring a rather interesting question to the table. While attempting to use programs like Browserstack and Sauce Labs, my Internet Explorer 8, 7 and 6 tests fail horribly, considering they aren't rendering the CSS3 elements with Modernizr installed (more particulary my one border-radius element).

My latest test was the following webpage: http://www.pixelandthewolf.com/test20.html

If you run this test in Internet Explorer 8, 7 or 6, with Browserstack or Sauce Labs, the section_one div won't have the border-radius element applied to it.

So this situation got me a bit curious and then I decided to test a working page with Modernizr installed correctly. This would be:
http://alistapart.com/d/taking-advantage-of-html5-and-css3-with-modernizr/sample-advanced.html

And what happens when you run this test in Browserstack and Sauce Labs with Internet Explorer 8, 7 and 6 being the choice? The same thing happens.

With all of this being said, perhaps there's some element I'm missing here and it's not just that Browserstack and Sauce Labs won't render the page correctly?

Any help is appreciated.

[gentlemedia]

Modernizr is only for feature detection and does not add for example rounded corners to your element in browsers that doesn't support this CSS3 property.
If you want rounded corners in those browsers, you will have to use a (javascript) polyfill, such as CSS3pie.

What you do with Modernizr is asking the browser:
Hey, do you support border-radius?
Browser A: yes
Modernizr: Cool, here's some fancy rounded CSS3 corners for you.
Browser B (old IE): No!
Modernizr: Don't worry... I've got you covered! Here, you load PIE.js and run this function.

In scripting this would be something like this:

Modernizr.load({

    test: Modernizr.cssborderradius,
    nope: '/js/PIE.js',

    complete : function () {
        if (window.PIE) {
            $('.rounded').each(function() {
                PIE.attach(this);
            });
        }
    }

});

[PixelandtheWolf]

Excellent post gentlemedia.
I was able to get the CSS3pie javascript implemented in this test:
http://www.pixelandthewolf.com/test25.html

Using Sauce Labs, the test worked perfectly in Internet Explorer 7.

But let's take this one step further. Let's say I want to implement every last HTML5 and CSS3 element and have them render correctly in Internet Explorer 6, 7 and 8.

I was able to look into: https://code.google.com/p/ie7-js/ by Charles Cooke and implememted the code in this test (using Internet Explorer 7 as the browser):

http://www.pixelandthewolf.com/test26.html

Does ie7-js not support every last element?

Thanks

[gentlemedia]

There's no script that brings HTMl5 & CSS3 support to IE6, 7 & 8.
Like I said there are polyfills for certain HTML5 & CSS3 features/properties (lots of them), but it would be crazy if you polyfill every feature/property you use. This would be too much for old IE and would make your site load/running super slow in these browsers or make them even crash :).

Anyways... the trick with Modernizr is that you can load a polyfill only for browsers that need them.
But ask your self is it worth. For example I don't polyfill rounded corners or box-shadows.
With Modernizr you can also create easily fallback solutions in your CSS, because it adds also classes to your HTML tag.
In browsers that don't support rgba() for example, it will add a class no-rgba.
In your CSS you can do then something like this:

.element { background: rgba(0,0,0,.5) }
.no-rgba .element { background: url('img/black-opacity50.png') }

With this you serve a transparent png to browsers that don't support rgba().