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/#-fontface-backgroundsize-borderimage-borderradius-boxshadow-flexbox-flexbox_legacy-hsla-multiplebgs-opacity-rgba-textshadow-cssanimations-csscolumns-generatedcontent-cssgradients-cssreflections-csstransforms-csstransforms3d-csstransitions-applicationcache-canvas-canvastext-draganddrop-hashchange-history-audio-video-indexeddb-input-inputtypes-localstorage-postmessage-sessionstorage-websockets-websqldatabase-webworkers-geolocation-inlinesvg-smil-svg-svgclippaths-touch-webgl-shiv-cssclasses-addtest-prefixed-teststyles-testprop-testallprops-hasevent-prefixes-domprefixes-load-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, 42 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>