API tools faq
paste
Advertisement
craigshoemaker

modernizr-detection

craigshoemaker
Jul 9th, 2011
585
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 15.70 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <title>Using Modernizr to Detect Cross Browser HTML5 Capabilities</title>
  5.     <link rel="Stylesheet" href="/global.css" type="text/css" />
  6.     <style>    
  7.     hgroup h2
  8.     {
  9.         margin-top:-20px;
  10.         font-weight:normal;
  11.         font-size:14px;
  12.     }
  13.    
  14.     table
  15.     {
  16.         border:1px solid #999;
  17.         border-collapse:collapse;
  18.     }
  19.    
  20.     table tr th
  21.     {
  22.         background-color:#ccc;
  23.         padding:6px;
  24.     }
  25.    
  26.     .detected
  27.     {
  28.         background:url(../images/check.png) no-repeat center center;
  29.     }
  30.     .notDetected
  31.     {
  32.         background:url(../images/x.png) no-repeat center center;
  33.     }
  34.     .feature
  35.     {
  36.         width:85px;
  37.         height:25px;
  38.     }
  39.    
  40.     .api
  41.     {
  42.         font-family:Courier New;
  43.         padding:3px;
  44.     }
  45.    
  46.     footer
  47.     {
  48.         margin-top:35px;    
  49.     }
  50.    
  51.     .alt
  52.     {
  53.         background-color:#eee;
  54.     }
  55.     </style>
  56.     <script src="../scripts/jquery-1.4.4.min.js"></script>
  57.     <script src="../scripts/modernizr-1.6.min.js"></script>
  58.     <script>
  59.  
  60.         // learn more about Modernizr here:
  61.         //   http://www.modernizr.com/docs/
  62.  
  63.         var features = new Array();
  64.         $().ready(function () {
  65.  
  66.             // by default mark all functionality as 'not detected'
  67.             $(".feature").addClass("notDetected");
  68.  
  69.             // select all element ID's of API members to detect
  70.             $("article table tr[id]").each(function (i, element) {
  71.                 features[i] = element.id;
  72.             });
  73.  
  74.             // for each member, run the detection using Modernizr
  75.             // and display the results
  76.             // note: the 'fontface' detection requires a callback
  77.             var feature, container;
  78.             for (var i = 0; i < features.length; i++) {
  79.                feature = features[i];
  80.                container = document.getElementById(feature);
  81.  
  82.                var api = container.querySelector(".api");
  83.                $(api).text("Modernizr." + features[i]);
  84.  
  85.                if (feature == "fontface") {
  86.                    Modernizr._fontfaceready(function (bool) {
  87.                        detected(container);
  88.                    });
  89.                }
  90.                else {
  91.                    // outside the loop the API call is a just
  92.                    // a call to each feature's boolean property
  93.                    //  Ex: Modernizr.canvas
  94.                    if (eval("Modernizr." + feature)) {
  95.                        detected(container);
  96.                    }
  97.                }
  98.            }
  100.            // zebra stripe the table
  101.            $("table tr:even").addClass("alt");
  102.        });
  104.        // display the checkmark if the feature is detected
  105.        function detected(container) {
  106.            var e = container.querySelector(".feature");
  107.            $(e).removeClass("notDetected").addClass("detected");
  108.        }
  109.    </script>
  110. </head>
  111. <body>
  112.     <header>
  113.         <hgroup>
  114.             <h1>Detecting HTML5 Features</h1>
  115.             <h2>Using <a href="http://www.modernizr.com/" target="_blank">Modernizr.js</a> to determine wich HTML5 features are available in the current browser.</h2>
  116.         </hgroup>
  117.     </header>
  118.     <article>
  119.         <table cellpadding="3" cellspacing="3" border="1">
  120.             <tr>
  121.                 <th>Feature</th>
  122.                 <th>API Member</th>
  123.                 <th width="25">Supported in this Browser</th>
  124.             </tr>
  125.             <tr id="fontface">
  126.                 <td>@font-face</td>
  127.                 <td class="api"></td>
  128.                 <td class="feature"></td>
  129.             </tr>
  130.             <tr id="canvas">
  131.                 <td>Canvas</td>
  132.                 <td class="api"></td>
  133.                 <td class="feature"></td>
  134.             </tr>
  135.             <tr id="canvastext">
  136.                 <td>Canvas Text</td>
  137.                 <td class="api"></td>
  138.                 <td class="feature"></td>
  139.             </tr>
  140.             <tr id="webgl">
  141.                 <td>WebGL</td>
  142.                 <td class="api"></td>
  143.                 <td class="feature"></td>
  144.             </tr>
  145.             <tr id="audio">
  146.                 <td>HTML5 Audio</td>
  147.                 <td class="api"></td>
  148.                 <td class="feature"></td>
  149.             </tr>
  150.             <tr id="audio.ogg">
  151.                 <td>HTML5 Audio formats (ogg)</td>
  152.                 <td class="api"></td>
  153.                 <td class="feature"></td>
  154.             </tr>
  155.             <tr id="audio.mp3">
  156.                 <td>HTML5 Audio formats (mp3)</td>
  157.                 <td class="api"></td>
  158.                 <td class="feature"></td>
  159.             </tr>
  160.             <tr id="audio.wav">
  161.                 <td>HTML5 Audio formats (wav)</td>
  162.                 <td class="api"></td>
  163.                 <td class="feature"></td>
  164.             </tr>
  165.             <tr id="audio.m4a">
  166.                 <td>HTML5 Audio formats (m4a)</td>
  167.                 <td class="api"></td>
  168.                 <td class="feature"></td>
  169.             </tr>
  170.             <tr id="video">
  171.                 <td>HTML5 Video</td>
  172.                 <td class="api"></td>
  173.                 <td class="feature"></td>
  174.             </tr>
  175.             <tr id="video.ogg">
  176.                 <td>HTML5 Video formats (ogg)</td>
  177.                 <td class="api"></td>
  178.                 <td class="feature"></td>
  179.             </tr>
  180.             <tr id="video.h264">
  181.                 <td>HTML5 Video formats (h264)</td>
  182.                 <td class="api"></td>
  183.                 <td class="feature"></td>
  184.             </tr>
  185.             <tr id="rgba">
  186.                 <td>rgba()</td>
  187.                 <td class="api"></td>
  188.                 <td class="feature"></td>
  189.             </tr>
  190.             <tr id="hsla">
  191.                 <td>hsla()</td>
  192.                 <td class="api"></td>
  193.                 <td class="feature"></td>
  194.             </tr>
  195.             <tr id="borderimage">
  196.                 <td>border-image</td>
  197.                 <td class="api"></td>
  198.                 <td class="feature"></td>
  199.             </tr>
  200.             <tr id="borderradius">
  201.                 <td>border-radius</td>
  202.                 <td class="api"></td>
  203.                 <td class="feature"></td>
  204.             </tr>
  205.             <tr id="boxshadow">
  206.                 <td>box-shadow</td>
  207.                 <td class="api"></td>
  208.                 <td class="feature"></td>
  209.             </tr>
  210.             <tr id="textshadow">
  211.                 <td>text-shadow</td>
  212.                 <td class="api"></td>
  213.                 <td class="feature"></td>
  214.             </tr>
  215.             <tr id="multiplebgs">
  216.                 <td>Multiple backgrounds</td>
  217.                 <td class="api"></td>
  218.                 <td class="feature"></td>
  219.             </tr>
  220.             <tr id="backgroundsize">
  221.                 <td>background-size</td>
  222.                 <td class="api"></td>
  223.                 <td class="feature"></td>
  224.             </tr>
  225.             <tr id="opacity">
  226.                 <td>opacity</td>
  227.                 <td class="api"></td>
  228.                 <td class="feature"></td>
  229.             </tr>
  230.             <tr id="cssanimations">
  231.                 <td>CSS Animations</td>
  232.                 <td class="api"></td>
  233.                 <td class="feature"></td>
  234.             </tr>
  235.             <tr id="csscolumns">
  236.                 <td>CSS Columns</td>
  237.                 <td class="api"></td>
  238.                 <td class="feature"></td>
  239.             </tr>
  240.             <tr id="cssgradients">
  241.                 <td>CSS Gradients</td>
  242.                 <td class="api"></td>
  243.                 <td class="feature"></td>
  244.             </tr>
  245.             <tr id="cssreflections">
  246.                 <td>CSS Reflections</td>
  247.                 <td class="api"></td>
  248.                 <td class="feature"></td>
  249.             </tr>
  250.             <tr id="csstransforms">
  251.                 <td>CSS 2D Transforms</td>
  252.                 <td class="api"></td>
  253.                 <td class="feature"></td>
  254.             </tr>
  255.             <tr id="csstransforms3d">
  256.                 <td>CSS 3D Transforms</td>
  257.                 <td class="api"></td>
  258.                 <td class="feature"></td>
  259.             </tr>
  260.             <tr id="flexbox">
  261.                 <td>Flexible Box Model</td>
  262.                 <td class="api"></td>
  263.                 <td class="feature"></td>
  264.             </tr>
  265.             <tr id="csstransitions">
  266.                 <td>CSS Transitions</td>
  267.                 <td class="api"></td>
  268.                 <td class="feature"></td>
  269.             </tr>
  270.             <tr id="geolocation">
  271.                 <td>Geolocation API</td>
  272.                 <td class="api"></td>
  273.                 <td class="feature"></td>
  274.             </tr>
  275.             <tr id="inputtypes.search">
  276.                 <td>Input Types (search)</td>
  277.                 <td class="api"></td>
  278.                 <td class="feature"></td>
  279.             </tr>
  280.             <tr id="inputtypes.tel">
  281.                 <td>Input Types (tel)</td>
  282.                 <td class="api"></td>
  283.                 <td class="feature"></td>
  284.             </tr>
  285.             <tr id="inputtypes.url">
  286.                 <td>Input Types (url)</td>
  287.                 <td class="api"></td>
  288.                 <td class="feature"></td>
  289.             </tr>
  290.             <tr id="inputtypes.email">
  291.                 <td>Input Types (email)</td>
  292.                 <td class="api"></td>
  293.                 <td class="feature"></td>
  294.             </tr>
  295.             <tr id="inputtypes.datetime">
  296.                 <td>Input Types (datetime)</td>
  297.                 <td class="api"></td>
  298.                 <td class="feature"></td>
  299.             </tr>
  300.             <tr id="inputtypes.date">
  301.                 <td>Input Types (date)</td>
  302.                 <td class="api"></td>
  303.                 <td class="feature"></td>
  304.             </tr>
  305.             <tr id="inputtypes.month">
  306.                 <td>Input Types (month)</td>
  307.                 <td class="api"></td>
  308.                 <td class="feature"></td>
  309.             </tr>
  310.             <tr id="inputtypes.week">
  311.                 <td>Input Types (week)</td>
  312.                 <td class="api"></td>
  313.                 <td class="feature"></td>
  314.             </tr>
  315.             <tr id="inputtypes.time">
  316.                 <td>Input Types (time)</td>
  317.                 <td class="api"></td>
  318.                 <td class="feature"></td>
  319.             </tr>
  320.             <tr id="inputtypes.datetimeLocal">
  321.                 <td>Input Types (datetime-local)</td>
  322.                 <td class="api"></td>
  323.                 <td class="feature"></td>
  324.             </tr>
  325.             <tr id="inputtypes.number">
  326.                 <td>Input Types (number)</td>
  327.                 <td class="api"></td>
  328.                 <td class="feature"></td>
  329.             </tr>
  330.             <tr id="inputtypes.range">
  331.                 <td>Input Types (range)</td>
  332.                 <td class="api"></td>
  333.                 <td class="feature"></td>
  334.             </tr>
  335.             <tr id="inputtypes.color">
  336.                 <td>Input Types (color)</td>
  337.                 <td class="api"></td>
  338.                 <td class="feature"></td>
  339.             </tr>
  340.             <tr id="input.autocomplete">
  341.                 <td>Input Attributes (autocomplete)</td>
  342.                 <td class="api"></td>
  343.                 <td class="feature"></td>
  344.             </tr>
  345.             <tr id="input.autofocus">
  346.                 <td>Input Attributes (autofocus)</td>
  347.                 <td class="api"></td>
  348.                 <td class="feature"></td>
  349.             </tr>
  350.             <tr id="input.list">
  351.                 <td>Input Attributes (list)</td>
  352.                 <td class="api"></td>
  353.                 <td class="feature"></td>
  354.             </tr>
  355.             <tr id="input.placeholder">
  356.                 <td>Input Attributes (placeholder)</td>
  357.                 <td class="api"></td>
  358.                 <td class="feature"></td>
  359.             </tr>
  360.             <tr id="input.max">
  361.                 <td>Input Attributes (max)</td>
  362.                 <td class="api"></td>
  363.                 <td class="feature"></td>
  364.             </tr>
  365.             <tr id="input.min">
  366.                 <td>Input Attributes (min)</td>
  367.                 <td class="api"></td>
  368.                 <td class="feature"></td>
  369.             </tr>
  370.             <tr id="input.multiple">
  371.                 <td>Input Attributes (multiple)</td>
  372.                 <td class="api"></td>
  373.                 <td class="feature"></td>
  374.             </tr>
  375.             <tr id="input.pattern">
  376.                 <td>Input Attributes (pattern)</td>
  377.                 <td class="api"></td>
  378.                 <td class="feature"></td>
  379.             </tr>
  380.             <tr id="input.required">
  381.                 <td>Input Attributes (required)</td>
  382.                 <td class="api"></td>
  383.                 <td class="feature"></td>
  384.             </tr>
  385.             <tr id="input.step">
  386.                 <td>Input Attributes (step)</td>
  387.                 <td class="api"></td>
  388.                 <td class="feature"></td>
  389.             </tr>
  390.             <tr id="localstorage">
  391.                 <td>localStorage</td>
  392.                 <td class="api"></td>
  393.                 <td class="feature"></td>
  394.             </tr>
  395.             <tr id="sessionstorage">
  396.                 <td>sessionStorage</td>
  397.                 <td class="api"></td>
  398.                 <td class="feature"></td>
  399.             </tr>
  400.             <tr id="webworkers">
  401.                 <td>Web Workers</td>
  402.                 <td class="api"></td>
  403.                 <td class="feature"></td>
  404.             </tr>
  405.             <tr id="applicationcache">
  406.                 <td>applicationCache</td>
  407.                 <td class="api"></td>
  408.                 <td class="feature"></td>
  409.             </tr>
  410.             <tr id="svg">
  411.                 <td>SVG</td>
  412.                 <td class="api"></td>
  413.                 <td class="feature"></td>
  414.             </tr>
  415.             <tr id="inlinesvg">
  416.                 <td>Inline SVG</td>
  417.                 <td class="api"></td>
  418.                 <td class="feature"></td>
  419.             </tr>
  420.             <tr id="svgclippaths">
  421.                 <td>SVG Clip paths</td>
  422.                 <td class="api"></td>
  423.                 <td class="feature"></td>
  424.             </tr>
  425.             <tr id="smil">
  426.                 <td>SMIL</td>
  427.                 <td class="api"></td>
  428.                 <td class="feature"></td>
  429.             </tr>
  430.             <tr id="websqldatabase">
  431.                 <td>Web SQL Database</td>
  432.                 <td class="api"></td>
  433.                 <td class="feature"></td>
  434.             </tr>
  435.             <tr id="indexeddb">
  436.                 <td>IndexedDB</td>
  437.                 <td class="api"></td>
  438.                 <td class="feature"></td>
  439.             </tr>
  440.             <tr id="websockets">
  441.                 <td>Web Sockets</td>
  442.                 <td class="api"></td>
  443.                 <td class="feature"></td>
  444.             </tr>
  445.             <tr id="hashchange">
  446.                 <td>hashchange Event</td>
  447.                 <td class="api"></td>
  448.                 <td class="feature"></td>
  449.             </tr>
  450.             <tr id="history">
  451.                 <td>History Management</td>
  452.                 <td class="api"></td>
  453.                 <td class="feature"></td>
  454.             </tr>
  455.             <tr id="draganddrop">
  456.                 <td>Drag and Drop</td>
  457.                 <td class="api"></td>
  458.                 <td class="feature"></td>
  459.             </tr>
  460.             <tr id="postmessage">
  461.                 <td>Cross-window Messaging</td>
  462.                 <td class="api"></td>
  463.                 <td class="feature"></td>
  464.             </tr>
  465.             <tr id="touch">
  466.                 <td>Touch Events</td>
  467.                 <td class="api"></td>
  468.                 <td class="feature"></td>
  469.             </tr>
  470.         </table>
  471.         <footer>
  472.         </footer>
  473.     </article>
  474. </body>
  475. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!