CODEWITHSUNDEEP
javascripthtmlcssmodernizr
Amr Elgarhy
Amr Elgarhy

Reputation: 68932

Does Modernizr.js help in showing css 3 and html 5 on older browsers and how?

I used css 3, html 5 in a web page and I want to use Modernizr to show some html5 attributes and some css 3 such as border-radius on old browsers,
Does Modernizr help in this and how run it.

Upvotes: 0

Views: 370

Answers (5)

copenndthagen
copenndthagen

Reputation: 50742

Modernizr internally uses the same JS code that you would use otherwise.. e.g. If you want to check for "input" placeholder support, using Native way, you would use;

function support_input_placeholder() {  
    var i = document.createElement('input');
    return 'placeholder' in i;
}

While the Modernizr way to check would be like

function support_input_modern() {   
    if (Modernizr.input.placeholder) 
        return true;
    else
        return false;
}

But the above code has the same internal working as the native way...

So ideally, I would prefer native way for simpler and lesser amount of checking...

Only for very complex things, should we go for Modernizr

Upvotes: 0

KuraFire
KuraFire

Reputation: 406

Modernizr doesn’t add missing functionality to older browsers other than the HTML5 Shiv so that you can use and style the new semantic elements from HTML5. The other answers already show some polyfill options, however, I recommend you reconsider adding purely-visual effects like border-radius to older browsers that way. Polyfills slow the older browsers down (sometimes very significantly) and make the overall experience much worse for those users.

Upvotes: 2

kojiro
kojiro

Reputation: 77137

Modernizr does not help with CSS3. (You could use Selectivizr for this, but it has some cross-domain issues you'll want to read about.)

Modernizr does have IEPP for HTML5 shim support and it comes with YepNope.js as Modernizr.load, which is a great polyfills loader mechanism so you can load your own support for older browsers. That will help you drop in support for attributes like pattern and placeholder without overloading browsers that have native support for it.

Upvotes: 0

nickytonline
nickytonline

Reputation: 6981

You can use modernizr to detect what's available, e.g. rounded corners. If it's not, you can degrade gracefully via the modernizr API, or even use a plug-in to smoke and mirrors the feature.

<script type="text/javascript">
    Modernizr.load({
        test: Modernizr.borderradius,
        nope: 'script/jquery.corner.js',
        callback: function () {
            $('article').corner();
            $('figure').corner();
        }
    });
</script>

Code snippet taken from http://blogs.msdn.com/b/jennifer/archive/2011/08/04/html5-part-4-using-html5-while-retaining-support-for-older-browsers.aspx

Upvotes: 0

m90
m90

Reputation: 11822

Modernizr will only help you detect certain features, so you'll have to add the JS fixes yourself.

In case you want to go for a pre-packaged solution this might be of help: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

In your case this might be the way to go: http://css3pie.com/

Upvotes: 3

Related Questions