src/template.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta content="ie=edge" http-equiv="x-ua-compatible">
    <title>HTML5 Please - Use the new and shiny responsibly</title>
    <meta name="description" content="Look up HTML5, CSS3, etc features, know if they are ready for use, and if so find out how you should use them – with polyfills, fallbacks or as they are.">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <link rel="icon" type="image/png" href="/favicon.png">
    <link rel="apple-touch-icon" href="apple-touch-icon.png">
    <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
    <link href="https://fonts.googleapis.com/css?family=Francois+One|Open+Sans:400italic,400,800" rel="stylesheet">

    <!-- build:css css/style.css -->
    <link href="css/style.css" rel="stylesheet">
    <!-- endbuild -->

    <link rel="canonical" href="https://html5please.com">
    <script>if (location.host == 'h5bp.github.io') location.href = '//html5please.com/'</script>
  </head>
  <body id="gfs">
    <header class="index">
      <h1>HTML5 <img src="img/HTML5-logo.png" alt="HTML5 Logo"> Please</h1>
      <h2>
        <b>Use the new and shiny responsibly.</b>
        <p>Look up HTML5, CSS3, etc features, know if they are ready for use, and if so find out how you should use them – with polyfills, fallbacks or as they are. <a href="#moredetails" id="clickmore">tell me more</a>
          </p>
          <div id="moredetails">
            <p><a href="https://caniuse.com">When Can I Use</a> tells you the browser support story, while <a href="https://modernizr.com">Modernizr</a> gives you the power of feature detection. HTML5 Please helps you out with recommendations for <a href="https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills">polyfills</a> and implementation so you can decide if and how to put each of these features to use.</p>
            <p>The recommendations below represent the collective knowledge of developers who have been deep in the HTML5 trenches. We hope they serve you well.</p>
            <p>Read Divya's backstory <a href="http://nimbupani.com/html5please.html">about this site</a>.</p>
          </div>
      </h2>
      <div>
        <input id="livesearch" class="search" name="livesearch" placeholder="type to filter" type="search" value="" autofocus />
        <a href="/" id="searchurl">link to this search ›</a>
        <div class="explore-features">
          <h2><b>Explore</b> features</h2>
          <ul>
            <li>supported by <a href="#gtie10">IE11+</a> <a href="#gtie9">IE10+</a> <a href="#gtie8">IE9+</a> <a href="#gtie7">IE8+</a> <a href="#noie">no IE</a> </li>
            <li>not supported by <a href="#nomobile">mobile devices</a> <a href="#nooldmobile">older mobile devices</a></li>
            <li>requiring <a href="#prefixes">prefixes</a><a href="#polyfill">polyfill</a><a href="#fallback">fallback</a></li>
            <li>that you should <a href="#use">use</a> <a href="#caution">use with caution</a> <a href="#avoid">avoid</a></li>
            <li>that are <a href="#css">css</a> <a href="#html">html</a><a href="#api">api</a><a href="#js">js</a></li>
            <li> <a href="#showall">all features</a></li>
          </ul>
        </div>
      </div>
    </header>
    <div id="main" role="main">
      <section class="features list">
        {{#features}}
          <article class="{{tags}}">
            <header>
              <h2 class="name" id="{{ feature }}">{{{featuretag feature}}} </h2>
              <h3 class="status {{status}}">{{status}} <i>{{{polyfillaction tags}}}</i> </h3>
              <h4 class="kind {{kind}}">{{kind}}</h4>
            </header>
            <div class="more">
              <div class="recco">
                {{{contents}}}
              </div>
              <div class="polyfills">{{#if polyfillurls}}<b>Recommended polyfills: </b>{{{polyfillurls}}}{{/if}}</div>

              <p class="links">
              {{#if moreurl}}
                <a href="{{{moreurl}}}">Learn more</a>
              {{/if}}
              <a href="{{{caniuseurl}}}">View browser share %</a>
                <a href="{{{editurl}}}">Edit this info</a>
              </p>
            </div>
            <footer class="tags">{{tags}}</footer>
          </article>
          {{/features}}
        </section>
      <h2 id="noitems" class="visuallyhidden">No items met your search =(</h2>
    </div>
    <footer>
      <p>HTML5 Please is a community project (<a href="https://github.com/h5bp/html5please/blob/master/CONTRIBUTING.md">contribute on github!</a>) from the people behind <a href="https://html5boilerplate.com">HTML5 Boilerplate</a>, <a href="https://modernizr.com">Modernizr</a> &amp; <a href="https://css3please.com">CSS3 Please</a>.</p>

      <p class="builders">
        <a href="https://twitter.com/divya"><img src="https://www.gravatar.com/avatar/c64a99fbbc7785e6cf9588a8777ba083?s=48" alt="Divya Manian"><b>Divya</b> Manian</a>
        <a href="https://twitter.com/paul_irish"><img src="https://www.gravatar.com/avatar/6cfbd373bb1dd5f26c066c1fc7e68288?s=48" alt="Paul Irish"><b>Paul</b> Irish</a>
        <a href="https://twitter.com/tbranyen"><img src="https://www.gravatar.com/avatar/21dbcdbf46f8ee3774c1b9b3efadfa9e?s=48" alt="Tim Branyen"><b>Tim</b> Branyen</a>
        <a href="https://twitter.com/connor"><img src="https://www.gravatar.com/avatar/56e38d8bcb52c9674dad204a2e8fc804?s=48" alt="Connor Montgomery"><b>Connor</b> Montgomery</a>
        <a href="https://twitter.com/arthur_versch"><img src="https://avatars3.githubusercontent.com/u/6025224?v=3&s=48" alt="Arthur Verschaeve"><b>Arthur</b>  Verschaeve</a>

        <a href="https://github.com/h5bp/html5please/graphs/contributors">&amp; more</a>
      </p>

      <p id="last-updated"></p>
    </footer>

    <!-- build:js js/concat.js -->
    <script src="js/libs/list.js"></script>
    <script src="js/libs/classList.js"></script>
    <script src="js/libs/pretty.js"></script>
    <script src="js/script.js"></script>
    <script src="js/gh-activity.js"></script>
    <!-- endbuild -->
    <script>
      window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
      ga('create','UA-17904194-3','auto');
      ga('set', 'anonymizeIp', true);
      ga('send','pageview')
      </script>
      <script src="https://www.google-analytics.com/analytics.js" async></script>
  </body>
</html>