Home

Modernizr - a JavaScript library allowing you to use CSS3 & HTML5 while maintaining control over unsupported browsers

Other pages

HTML5 Cross browser Polyfills

^ that has a lot of super useful links. Check it for sure.

Undetectables

^ things that maybe cannot be feature detected.

modernizr lite

modernizr lite gist just the basics.

Server-side implementations

• modernizr-server (php)
• gwtmodernizr
• rack modernizr (ruby)
• django modernizr
• modernizr-rails (rails 3.1+)

Additional Tests, not in Modernizr core:

• ie8 compat mode http://github.com/Modernizr/Modernizr/issues#issue/46
• font smoothing
• mp3 play detection via data uri http://gist.github.com/253174
• boxshadow inset and spread: http://pastie.org/967149
• :target selector support (and all other selectors) http://gist.github.com/441842
• min-device-pixel-ratio media query http://pastie.org/1034786
• file api test
• elem.dataset test (from phiggins/dojo)
• position:fixed
• background-clip: text
• table display
• data uri's
• APNG
• media queries
• web audio api & audio data api
• [[details element|http://github.com/Modernizr/Modernizr/issues#issue/75]]
• [[pointer-events:none |http://github.com/Modernizr/Modernizr/issues#issue/80]]
• font-smoothing css prop
• text-stroke css prop
• iOS webapp mode
• desktop notifications
• background-size:cover
• attr modified mutation event
• Browser support test for the HTML5 <ruby>, <rt> and <rp> elements
• stylable scrollbars
• volume control (iOS devices volume can't be controlled)

some inline plugin tests

Modernizr.addTest('orientation',function(){ 
    return 'ondeviceorientation' in window;
})


Modernizr.addTest('speechinput', function(){
    var elem = document.createElement('input'); 
    return 'speech' in elem || 'onwebkitspeechchange' in elem; 

    //  - 'webkitSpeech' in elem -> does`t work correctly in all versions of Chromium based  
    //  browsers: can return false even if they have support for speech (http://i.imgur.com/2Y40n.png)
    //  - testing with 'onwebkitspeechchange' seems to fix this problem
});


Modernizr.addTest('textshadow',function(){ 
    return document.createElement('div').style.textShadow === '';
})


Modernizr.addTest('ie8compat',function(){
    return !window.addEventListener && document.documentMode && document.documentMode == 7;
});


Modernizr.addTest('timedtrack',function(){ // subtitle support for html5 video, thx @ourmaninjapan
    return !!document.createElement('track').track;
});

// media queries test must be added into the source... (for now)
tests['mediaqueries'] = function(){ return testMediaQuery('only all'); }

var hasStrictMode = (function(){ "use strict"; return !this; })(); // via kangax


// Function.caller
supportsCaller = (function(undefined) { function test() { return test.caller !== undefined } return test() })()`

// server sent events aka eventsource
Modernizr.addTest('eventsource', function(){ return !!window.EventSource; });

more feature tests..

• lots of other small modernizr tests already in the issue tracker.
• mark pilgrim's diveintohtml5 peeks pokes and pointers
• http://diveintohtml5.org/everything.html XHR 2.0 stuff in there now too.
• http://github.com/phiggins42/has.js

Sites that use it:

• http://twitter.com/, NFL, posterous, finishline, american eagle.. etc - http://trends.builtwith.com/javascript/Modernizr

Modernizr is used by projects like

• Polymaps
• HTML5Widgets