Modernizr

What do I know?

Modernizr

Modernizr is awesome!

Modernizr

But why?

Go to the source

Modernizr.com uses Modernizr.load (aka yepnope) to conditionally load typekit fonts

Modernizr.load({
    test: Modernizr.fontface && !Modernizr.touch,
    yep: 'http://use.typekit.com/uqi6bct.js',
    callback: function () {
       try { Typekit.load(); }
       catch(e){}
    }
});

Modernizr.load

It also loads jQuery from the Google CDN
or failing that loads a local copy

Modernizr.load({
    load: '//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js',
    complete: function () {
        if (!window.jQuery) {
            Modernizr.load('/i/js/jquery-1.6.1.min.js');
        }
    }
});

Media Queries

You can test a media query against the current state of the window. Uses matchMedia if available.

if(Modernizr.mq('only all and (max-width: 400px)')) {
    // Do something for smaller screens
} else {
    // Do something for bigger screens
}

Element and style injection

Lets you inject an element with some associated styles, this is what the CSS generated content test uses internally

Modernizr.testStyles('#modernizr:after{content:":)";visibility:hidden}', function( node, rule ) {
    return !!node.offsetHeight >= 1;
});

Prefixes

Modernizr exposes a few helpers for working with prefixes

Modernizr.prefixed("borderRadius"); // e.g FF3.6 'MozBorderRadius', FF4 'borderRadius'

Modernizr._prefixes; // Returns array CSS prefixes e.g. "-prefix-"

Monderizr._domPrefixes; // Array of prefixes for DOM properties

Modernizr.addTest

Something not in the Modernizr core that you want to test for? Add it yourself with the plugin architecture.

Modernizr.addTest('css3generatedcontent', function () {
    var bool;

    Modernizr.testStyles("#modernizr { content:':)' }",function(node){
        bool = node.offsetHeight >=1;
    });

    return bool;
});

Check out the feature detects folder on github

Thanks

And that's what I know

• Slides: http://ryanseddon.com/talks/grill_modernizr
• @ryanseddon