index.html

---
layout:  default
title: "Modernizr: the feature detection library for HTML5/CSS3"
---
            <section id="what-is" class="">
               <article>
                  <p class="intro"><strong>Modernizr</strong> is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.</p>

                  <h2>Why use Modernizr?</h2>
                  <p>Taking advantage of cool new web technologies is great fun, until you have to support browsers that lag behind. Modernizr makes it easy for you to write conditional JavaScript <em>and CSS</em> to handle each situation, whether a browser supports a feature or not. It’s perfect for doing progressive enhancement easily.</p>

                  <h2>How it works</h2>
                  <p>Modernizr runs quickly on page load to detect features; it then creates a JavaScript object with the results, and adds classes to the <code>html</code> element for you to key your CSS on. Modernizr supports dozens of tests, and optionally includes <a href="http://yepnopejs.com/" rel="external">YepNope.js</a> for conditional loading of external <strong>.js</strong> and <strong>.css</strong> resources.</p>

                  <p>Check out the <a href="/docs/#features-css">full list of features</a> that Modernizr detects, or learn more about <a href="/docs/#load">conditional resource loading with Modernizr</a>.</p>
               </article>
            </section><!-- #what-is -->

            <section id="download" class="wt col-mid homepage">
               <h2><a href="/download/" class="wt dl-link">Download Modernizr {{ site.latest_version }}</a></h2>
               <div class="swap-region">
                  <aside>
                     <p>Use the commented, uncompressed Development version to develop with and learn from.</p>
                     <p>Then, dive into the Production build tool and pick just the tests you need!</p>
                  </aside>
                  <ul class="buttons">
                     <li><a class="wt docs-link" href="/docs/">View documentation</a></li>
                     <li><a class="wt btn dev"
                                            href="/download/#-adownload-ambientlight-animation-apng-appearance-applicationcache-audio-audioloop-audiopreload-backgroundblendmode-backgroundcliptext-backgroundsize-batteryapi-beacon-bgpositionshorthand-bgpositionxy-bgrepeatspace_bgrepeatround-bgsizecover-blobconstructor-bloburls-blobworkers-borderimage-borderradius-boxshadow-boxsizing-canvas-canvasblending-canvastext-canvaswinding-capture-checked-classlist-contains-contenteditable-contextmenu-cookies-cors-createelementattrs_createelement_attrs-cssall-cssanimations-csscalc-csschunit-csscolumns-cssescape-cssexunit-cssfilters-cssgradients-csshyphens_softhyphens_softhyphensfind-cssinvalid-cssmask-csspointerevents-csspositionsticky-csspseudoanimations-csspseudotransitions-cssreflections-cssremunit-cssresize-cssscrollbar-csstransforms-csstransforms3d-csstransitions-cssvalid-cssvhunit-cssvmaxunit-cssvminunit-cssvwunit-cubicbezierrange-customevent-customprotocolhandler-dart-datachannel-datalistelem-dataset-datauri-dataview-dataworkers-details-devicemotion_deviceorientation-directory-display_runin-displaytable-documentfragment-draganddrop-ellipsis-emoji-es5-es5array-es5date-es5function-es5object-es5string-es5syntax-es5undefined-es6array-es6math-es6number-es6object-es6string-eventlistener-eventsource-exiforientation-fileinput-filereader-filesystem-flash-flexbox-flexboxlegacy-flexboxtweener-flexwrap-fontface-formattribute-formvalidation-framed-fullscreen-gamepads-generatedcontent-generators-geolocation-getrandomvalues-getusermedia-hashchange-hidden-hiddenscroll-history-hsla-htmlimports-ie8compat-indexeddb-indexeddbblob-inlinesvg-input-inputformaction-inputformenctype-inputformmethod-inputformtarget-inputtypes-intl-jpegxr-json-lastchild-localizednumber-localstorage-lowbandwidth-lowbattery-mathml-mediaqueries-microdata-multiplebgs-mutationobserver-notification-nthchild-objectfit-olreversed-oninput-opacity-outputelem-overflowscrolling-pagevisibility-peerconnection-performance-picture-placeholder-pointerevents-pointerlock-postmessage-preserve3d-progressbar_meter-promises-proximity-queryselector-quotamanagement-regions-requestanimationframe-requestautocomplete-rgba-ruby-sandbox-scriptasync-scriptdefer-seamless-search-serviceworker-sessionstorage-shapes-sharedworkers-siblinggeneral-sizes-smil-speechrecognition-speechsynthesis-srcdoc-srcset-strictmode-stylescoped-subpixelfont-supports-svg-svgasimg-svgclippaths-svgfilters-svgforeignobject-target-template-templatestrings-textalignlast-textareamaxlength-textshadow-texttrackapi_track-time-todataurljpeg_todataurlpng_todataurlwebp-touchevents-transferables-typedarrays-unicode-unicoderange-unknownelements-urlparser-userdata-userselect-vibrate-video-videoautoplay-videoloop-videopreload-vml-webaudio-webgl-webglextensions-webintents-webp-webpalpha-webpanimation-webplossless_webp_lossless-websockets-websocketsbinary-websqldatabase-webworkers-willchange-wrapflow-xhr2-xhrresponsetype-xhrresponsetypearraybuffer-xhrresponsetypeblob-xhrresponsetypedocument-xhrresponsetypejson-xhrresponsetypetext-addtest-domprefixes-hasevent-mq-prefixed-prefixedcss-prefixes-shiv-testallprops-testprop-teststyles-dontmin"
 onclick="javascript: pageTracker._trackPageview('/downloads/modernizr-{{ site.latest_version }}.js');
              GoSquared.DefaultTracker.TrackView('/downloads/modernizr-{{ site.latest_version }}.js',
                                                            'Download: {{ site.latest_version }} Development');">
                  Development <span>Uncompressed, 246 Kb</span></a></li>
                     <li><a class="wt btn prod" href="/download/">Production <span>Configure your build</span></a></li>
                  </ul>
               </div>
            </section><!-- #download -->

            <article class="col-mid">
               <h2>Get started with Modernizr</h2>
               <p>While Modernizr gives you finer control over the experience through JavaScript-driven feature detection, it is important to continue to use best practices throughout your development process. Use progressive enhancement wherever you can, and don’t sacrifice accessibility for convenience or performance.</p>

               <ul class="links-spaced">
                  <li><a rel="external" href="/docs/#installing">Documentation: Getting started</a></li>
                  <li><a rel="external" href="http://www.alistapart.com/articles/taking-advantage-of-html5-and-css3-with-modernizr/">Taking Advantage of HTML5 and CSS3 with Modernizr</a>, <cite>Faruk Ateş</cite></li>
                  <li><a rel="external" href="http://webdesignernotebook.com/css/how-to-use-modernizr/">How to use Modernizr</a>, <cite>Inayaili de León</cite></li>
                  <li><a rel="external" href="https://learnable.com/courses/modernizr-front-end-development-done-right-2561">Modernizr: front-end development done right</a>, <cite>Ryan Seddon</cite></li>
                  <li>[wiki] <a rel="external" href="https://github.com/Modernizr/Modernizr/wiki/Undetectables">The Undetectables: features that cannot be detected</a></li>
                  <li>[wiki] <a rel="external" href="https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills">Cross-browser Polyfills</a></li>
               </ul>

               <p>Also check out our <a href="/resources/">Resources section</a>.</p>

               <p><strong>Tip:</strong> check our <a href="http://j.mp/modernizrtest" rel="external">Modernizr test suite</a> to quickly test your current browser’s features.</p>
            </article>