index.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTML5 Please Supported Browsers API</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="http://html5please.com/favicon.ico" />
    <link href='https://fonts.googleapis.com/css?family=Alfa+Slab+One|Droid+Serif:700italic,400italic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="site/css/style.css">

    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
  <body>
    <header>
      <h1 class="logo">
        <b>HTML5 Please API</b> <i>Identify Supported Browsers with Feature Detection</i>
      </h1>
      <div id="nav_container">
        <nav id="toc">
          <a href="#in-action">In Action</a>
          <a href="#get-api">Get the widget</a>
          <a href="#how-does-it-work">How does it work?</a>
          <a href="#reference">Reference</a>
        </nav>
      </div>
    </header>
    <div id="about">
      <p>If you've created a demo or site that requires Canvas or WebSQL DB, you've been in the awkward situation of telling some of your visitors that their browser doesn't support those features. But you can't just recommend they get a browser with those features; for example, "Get a WebRTC capable browser" is pretty much useless to everyone.

      <p>The HTML5 Please API translates developer language (features) to user language (browsers). Call the API and you get back some HTML to show the user or a JSON object of the relevant data (with browser logos and all), so you can customize what you show to users.
      </p>
      <p> The API stays updated thanks to data from <a href="//caniuse.com">caniuse.com</a> so it remains accurate as browsers add support for more features. <a href="http://nimbupani.com/html5please-api.html">Read the backstory on this project</a>
      </p>
    </div>

    <section id="in-action">
      <h2>In action</h2>
      <h3>on <a href="http://mothereffinganimatedgif.com">mothereffinganimatedgif.com</a></h3>
      <figure>
        <img src="site/with-support.png" alt="">
        <figcaption>Page on a browser that support requested features</figcaption>
      </figure>
      <figure>
        <img src="site/without-support.png" alt="">
        <figcaption>Page on a browser that does not support requested features</figcaption>
      </figure>
    </section>

    <section id="get-api">
      <h2>Get the widget</h2>
      <p>Are you using HTML5 features that are not available in all browsers and want to tell visitors with incompatible browers which browser to use to get the best experience of your site? </p>
      <h3>Enter features you use</h3>
      <form>
        <label for="features">
          <input id="features" type="text" required value="">
        </label>

        <div class="options">
          <h3>How do you want to show this?</h3>
          <div class="options-content">
            <p>with browser
              <b>
                <input type="radio" name="skin" value="icon" id="options-logo">
                <label for="options-logo">logos</label>
              </b>
              <b>
                <input type="radio" name="skin" value="text" id="options-names">
                <label for="options-names">names</label>
              </b>
              <b>
                <input type="radio" name="skin" value="texticon" id="options-both" checked>
                <label for="options-both">both logos &amp; names</label>
              </b>
            </p>
            <p>
              <b>
                <input type="checkbox" name="style" value="nocss" id="options-style">
                <label for="options-style">without style</label>
              </b>
              <b title="Inserts template-variables to use with Mustache rather than fixed text.">
                <input type="checkbox" name="template" value="template" id="options-template">
                <label for="options-template">as a template</label>
              </b>
            </p>
          </div>
         </div>
      </form>
      <div id="api-result">
        <div class="use">
          <h3>Here is your widget</h3>
          <h4>
            <b>
              <input type="radio" name="widgetformat" checked id="widget-modernizr" value="0">
              <label for="widget-modernizr">with Modernizr <u>(recommended)</u></label>
            </b>
            <b>
              <input type="radio" name="widgetformat" id="widget-js" value="1">
              <label for="widget-js">just JS</label>
            </b>

            <b>
              <input type="radio" name="widgetformat" id="widget-uri" value="2">
              <label for="widget-uri">URI</label>
            </b>
          </h4>
          <div id="widget">
          </div>
          <div id="widget-message" class="help"></div>
        </div>
        <div class="preview">
          <h3>Sample Widget View</h3>
          <div id="h5p-message"></div>
        </div>
      </div>
    </section>
    <section id="how-does-it-work">
      <h2>How does it work?</h2>
      <h4>Is the user's UA one of the browsers that offer these features?</h4>
      <p>The User's browser User Agent information is matched against <a href="https://github.com/h5bp/html5please-api/blob/master/agents.json">this list of UAs</a> and then based on the information collated from <a href="https://github.com/h5bp/html5please-api/blob/master/data.json">caniuse's data feed</a>. If it supports the required features, we return a JSON object but no HTML, no message is displayed.</p>
      <p>END</p>
      <h4><b>Else</b> Is there a newer version of the user's browser supporting these features?</h4>
      <p>If so, the message links to the newer version of the user's browser asking them to view the page in the newer version of their current browser.</p>
      <p>END</p>

      <h4><b>Else</b> Is there any other stable browser that support these features?</h4>
      <p>If so, the widget links to all these stable browsers. If the user is viewing the page on desktop, it returns only desktop browsers. If user is viewing the page on mobile devices, it returns only mobile browsers that support these features.</p>
      <p>In addition, for desktop browsers, if the user is on a non-windows machine, no IE recommendations will appear even if IE supports the required HTML5 features (as there is no supported version of IE on these platforms).</p>
      <p>END</p>
    </section>

    <section id="reference">
      <h2>Reference</h2>
      <p><a href="https://github.com/h5bp/html5please-api/wiki/API-Reference">API Reference</a>: Explanation of all the options you can use to make this API call.</p>
      <p><a href="https://github.com/h5bp/html5please-api/wiki/Data-Object-Reference">Data Object Reference</a>: Explanation of all the data returned by a call to this API.</p>
      </section>

    <section id="contribute">
        <h2> Contribute </h2>
        <p> This is a community project. You can <a href="https://github.com/h5bp/html5please-api">help by forking html5please-api</a> and making it better. Please also file a ticket to start a discussion.  </p>
    </section>
    <footer>
    <div class="builders">
      <h3>Created By</h3>
      <a href="https://twitter.com/jon_neal">
        <img src="https://avatars.githubusercontent.com/u/188426?v=2&amp;s=100" alt="Jon Neal">
        <b>Jon</b> Neal
      </a>
      <a href="https://twitter.com/divya">
        <img src="https://avatars.githubusercontent.com/u/74513?v=2&amp;s=100" alt="Divya Manian">
        <b>Divya</b> Manian
      </a>
    </div>
    <div class="builders">
      <h3>With</h3>
      <a href="https://twitter.com/paul_irish">
        <img src="https://avatars.githubusercontent.com/u/39191?v=2&amp;s=100" alt="Paul Irish">
        <b>Paul</b> Irish
      </a>
      <a href="https://twitter.com/fyrd">
        <img src="https://avatars.githubusercontent.com/u/432336?v=2&amp;s=100" alt="Alexis Deveria">
        <b>Alexis</b> Deveria
      </a>
      <a href="https://twitter.com/aaronlayton">
        <img src="https://avatars.githubusercontent.com/u/694964?v=2&amp;s=100" alt="Aaron Layton">
        <b>Aaron</b> Layton
      </a>
      <a href="https://twitter.com/drublic">
        <img src="https://avatars.githubusercontent.com/u/502487?v=2&amp;s=100" alt="Hans Christian Reinl">
        <b>Hans Chr.</b> Reinl
      </a>
      <a href="https://twitter.com/addyosmani">
        <img src="https://avatars.githubusercontent.com/u/110953?v=2&amp;s=100" alt="Addy Osmani">
        <b>Addy</b> Osmani
      </a>
      <a href="https://twitter.com/ourmaninjapan">
        <img src="https://avatars.githubusercontent.com/u/94173?v=2&amp;s=100" alt="Daniel Davis">
        <b>Daniel</b> Davis
      </a>
</div>
    <p> <a href="https://github.com/h5bp/html5please-api/contributors">&amp; more</a> </p>
    <p>This project was inspired by <a href="//get.webgl.org/">get.webgl.org</a> and was initiated over at <a href="https://github.com/paulirish/lazyweb-requests/issues/39">github:paulirish/lazyweb-requests#39</a>. <br>
      Much thanks to <a href="//twitter.com/fyrd">Alexis Deveria</a> for the generous sharing of <a href="http://caniuse.com/">caniuse</a> data. </p>
    </footer>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="site/js/jquery-1.7.1.min.js"><\/script>')</script>

    <script src="site/js/jquery-ui-1.8.17.custom.min.js"></script>
    <script src="site/js/script.js"></script>

    <script>
        var _gaq=[['_setAccount','UA-17904194-3'],['_trackPageview'],['_trackPageLoadTime']];
        (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
        g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
        s.parentNode.insertBefore(g,s)}(document,'script'));
    </script>

  </body>
</html>