Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

768 lines (714 sloc) 55.605 kb
<!doctype html>
<html class='no-js' lang='en'>
<head>
<meta charset='utf-8' />
<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible' />
<title>HTML5 Please</title>
<meta content='' name='description' />
<meta content='' name='author' />
<meta content='width=device-width, initial-scale=1.0' name='viewport' />
<link href='http://fonts.googleapis.com/css?family=Francois+One|Open+Sans:400italic,400,800' rel='stylesheet' />
<link href='css/style.css' rel='stylesheet' />
<script src='js/libs/modernizr-2.0.min.js'></script>
</head>
<body id=gfs>
<header class=index>
<h1>HTML5 <img src='img/HTML5-logo.png'> Please</h1>
<h2>
<b>Use the new and shiny responsibly.</b>
Look up properties and see if it is ready for use, and if so how you should use it with a polyfill, a fallback value or as it is.
</h2>
<div>
<input id=livesearch class=search name=livesearch placeholder='type to filter' type='search' value='' />
<a href="/" id=searchurl>link to this search ›</a>
</div>
</header>
<div id=main role=main>
<section class=features>
<article class="fallback">
<header title="expand">
<h3 class="status caution">caution <i>with <b class=fallback>fallback</b></i> </h3>
<h4 class="kind css">css</h4>
<h2 class='name'><a href="http://caniuse.com/animations">animations</a></h2>
</header>
<div class="more">
<div class='recco'><p>CSS Animations are still in a flux. The Working Group has decided to provide a universal animation spec that would work across CSS, SVG and HTML. For now, use animations for providing additional glamour and use feature detection to provide alternative experience on browsers that do not support this feature for critical animations.</p></div>
<div class='polyfills'></div>
<a class="updateurl" href=https://github.com/h5bp/html5please/blob/master/posts/animations.md>Edit info on animations</a>
</div>
<footer class="tags">fallback</footer>
</article>
<article class="polyfill">
<header title="expand">
<h3 class="status use">use <i>with <b class=polyfill>polyfill</b></i> </h3>
<h4 class="kind html">html</h4>
<h2 class='name'><a href="http://caniuse.com/audio">audio</a></h2>
</header>
<div class="more">
<div class='recco'><p>As with video, you need to provide your audio file in multiple formats for these to work. jPlayer also has a jQuery dependency. Sound Manager has an extensive API for further customization. </p></div>
<div class='polyfills'><b>Recommended Polyfills: </b><p><a href="https://github.com/happyworm/jPlayer">jPlayer</a>, <a href="http://kolber.github.com/audiojs/">audio.js</a>, <a href="http://www.schillmania.com/projects/soundmanager2/">Sound Manager 2</a></p></div>
<a class="updateurl" href=https://github.com/h5bp/html5please/blob/master/posts/audio.md>Edit info on audio</a>
</div>
<footer class="tags">polyfill</footer>
</article>
<article class="fallback prefixes">
<header title="expand">
<h3 class="status use">use <i>with <b class=fallback>fallback</b></i> </h3>
<h4 class="kind css">css</h4>
<h2 class='name'><a href="http://caniuse.com/border-image">border-image</a></h2>
</header>
<div class="more">
<div class='recco'><p>Make sure to use all the right prefixes (<code>-o-</code>, <code>-webkit</code>, <code>-ms-</code>, <code>-moz-</code>). You should let this fallback to either a normal solid border or no border at all (depending on whether a border is essential for readability). We recommend you avoid polyfills, but <a href="http://css3pie.com">CSS3Pie</a> is a polyfill you should use if you are forced into such a situation. </p></div>
<div class='polyfills'></div>
<a class="updateurl" href=https://github.com/h5bp/html5please/blob/master/posts/border-image.md>Edit info on border-image</a>
</div>
<footer class="tags">fallback prefixes</footer>
</article>
<article class="">
<header title="expand">
<h3 class="status use">use <i></i> </h3>
<h4 class="kind css">css</h4>
<h2 class='name'><a href="http://caniuse.com/border-radius">border-radius</a></h2>
</header>
<div class="more">
<div class='recco'><p>Border Radius can be safely used without a prefix for all modern browsers, and gracefully renders rectangles when not supported. If you do need to render border radii on unsupported browsers, you can use <a href="http://css3pie.com/">CSSPie</a> as a polyfill.</p></div>
<div class='polyfills'></div>
<a class="updateurl" href=https://github.com/h5bp/html5please/blob/master/posts/border-radius.md>Edit info on border-radius</a>
</div>
<footer class="tags"></footer>
</article>
<article class="none">
<header title="expand">
<h3 class="status caution">caution <i></i> </h3>
<h4 class="kind css">css</h4>
<h2 class='name'><a href="http://caniuse.com/box-shadow">box-shadow</a></h2>
</header>
<div class="more">
<div class='recco'><p>Box-shadow is safe to use most of the time, except when you are applying it on a large area, which might cause significant performance hit when the user interacts with your page (on scroll, hover, etc). You do not need a polyfill, and in the unlikely event of needing one, use <a href="http://css3pie.com/">CSSPie</a>.</p></div>
<div class='polyfills'></div>
<a class="updateurl" href=https://github.com/h5bp/html5please/blob/master/posts/box-shadow.md>Edit info on box-shadow</a>
</div>
<footer class="tags">none</footer>
</article>
<article class="fallback prefixes gtie8">
<header title="expand">
<h3 class="status use">use <i>with <b class=fallback>fallback</b></i> </h3>
<h4 class="kind css">css</h4>
<h2 class='name'><a href="http://caniuse.com/box-sizing">box-sizing</a></h2>
</header>
<div class="more">
<div class='recco'><p>Firefox is the only browser that requires a prefix for box-sizing. You can use it without a prefix for everything else. <a href="https://github.com/Schepp/box-sizing-polyfill">Box Sizing Polyfill</a> provides this feature in IE 6 and 7 (you could scope the adjustments using <a href="http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/">IE conditionals</a> or Modernizr's <code>no-box-sizing</code>).</p></div>
<div class='polyfills'></div>
<a class="updateurl" href=https://github.com/h5bp/html5please/blob/master/posts/box-sizing.md>Edit info on box-sizing</a>
</div>
<footer class="tags">fallback prefixes gtie8</footer>
</article>
<article class="none">
<header title="expand">
<h3 class="status avoid">avoid <i></i> </h3>
<h4 class="kind css">css</h4>
<h2 class='name'><a href="http://caniuse.com/calc()">calc()</a></h2>
</header>
<div class="more">
<div class='recco'><p>IE and Firefox are the only supporting browsers, which makes using calc in production tedious given the impact it can have on layout and the consequent breaking of your design on unsupported browsers. We encourage you use it for experimentation but not for any production use. </p></div>
<div class='polyfills'></div>
<a class="updateurl" href=https://github.com/h5bp/html5please/blob/master/posts/calc.md>Edit info on calc()</a>
</div>
<footer class="tags">none</footer>
</article>
<article class="gtie8 polyfill">
<header title="expand">
<h3 class="status use">use <i>with <b class=polyfill>polyfill</b></i> </h3>
<h4 class="kind html">html</h4>
<h2 class='name'><a href="http://caniuse.com/canvas">canvas</a></h2>
</header>
<div class="more">
<div class='recco'><p>Canvas is definitely good to go for modern browsers. If however you're looking to use it in IE 8 and below, use FlashCanvas. </p></div>
<div class='polyfills'><b>Recommended Polyfills: </b><p><a href="http://flashcanvas.net/">FlashCanvas</a></p></div>
<a class="updateurl" href=https://github.com/h5bp/html5please/blob/master/posts/canvas.md>Edit info on canvas</a>
</div>
<footer class="tags">gtie8 polyfill</footer>
</article>
<article class="polyfill noie nooldmobile">
<header title="expand">
<h3 class="status use">use <i>with <b class=polyfill>polyfill</b></i> </h3>
<h4 class="kind html">html</h4>
<h2 class='name'><a href="http://caniuse.com/classlist">classlist</a></h2>
</header>
<div class="more">
<div class='recco'><p>Classlist is unsupported in older mobile browsers and IE. This is not a concern if you are using a library like jQuery and using it to add/remove class names, but if not, make sure you use the polyfill.</p></div>
<div class='polyfills'><b>Recommended Polyfills: </b><p><a href="https://github.com/eligrey/classList.js">classlist.js</a></p></div>
<a class="updateurl" href=https://github.com/h5bp/html5please/blob/master/posts/classlist.md>Edit info on classlist</a>
</div>
<footer class="tags">polyfill noie nooldmobile</footer>
</article>
<article class="polyfill">
<header title="expand">
<h3 class="status use">use <i>with <b class=polyfill>polyfill</b></i> </h3>
<h4 class="kind html">html</h4>
<h2 class='name'><a href="http://caniuse.com/cors">cors</a></h2>
</header>
<div class="more">
<div class='recco'><p>...</p></div>
<div class='polyfills'><b>Recommended Polyfills: </b><p><a href="https://github.com/toolness/postmessage-proxied-xhr/#readme">postmessage-proxied-xhr</a>, <a href="http://flxhr.flensed.com/">flXHR</a> (target server must have a crossdomain.xml file), <a href="https://github.com/eligrey/pmxdr">pmxdr</a> (sites being requested must have a pmxdr host)</p></div>
<a class="updateurl" href=https://github.com/h5bp/html5please/blob/master/posts/cors.md>Edit info on cors</a>
</div>
<footer class="tags">polyfill</footer>
</article>
<article class="fallback gtie8">
<header title="expand">
<h3 class="status use">use <i>with <b class=fallback>fallback</b></i> </h3>
<h4 class="kind css">css</h4>
<h2 class='name'><a href="http://caniuse.com/css3-colors">css3-colors</a></h2>
</header>
<div class="more">
<div class='recco'><p>If you found yourself wanting to use <code>papayawhip</code> or <code>goldenrod</code> or <code>indianred</code> as your colors of choice, do feel free. You have to specify a fallback color for IE 8- users. </p></div>
<div class='polyfills'></div>
<a class="updateurl" href=https://github.com/h5bp/html5please/blob/master/posts/css3-colors.md>Edit info on css3-colors</a>
</div>
<footer class="tags">fallback gtie8</footer>
</article>
<article class="polyfill gtie9 nomobile">
<header title="expand">
<h3 class="status use">use <i>with <b class=polyfill>polyfill</b></i> </h3>
<h4 class="kind js">js</h4>
<h2 class='name'><a href="http://caniuse.com/datalist">datalist</a></h2>
</header>
<div class="more">
<div class='recco'><p>Jeremy Keith has a <a href="http://adactio.com/journal/4272/">graceful fallback solution</a> that does not use a script.</p></div>
<div class='polyfills'><b>Recommended Polyfills: </b><p><a href="http://miketaylr.com/code/datalist.html">jQuery Datalist Plugin</a></p></div>
<a class="updateurl" href=https://github.com/h5bp/html5please/blob/master/posts/datalist.md>Edit info on datalist</a>
</div>
<footer class="tags">polyfill gtie9 nomobile</footer>
</article>
<article class="polyfill noie nooldmobile">
<header title="expand">
<h3 class="status use">use <i>with <b class=polyfill>polyfill</b></i> </h3>
<h4 class="kind js">js</h4>
<h2 class='name'><a href="http://caniuse.com/dataset">dataset</a></h2>
</header>
<div class="more">
<div class='recco'><p>Dataset is unsupported in IE and older mobile browsers, which is why recommend using it with a polyfill.</p></div>
<div class='polyfills'><b>Recommended Polyfills: </b><p><a href="http://eligrey.com/blog/post/html-5-dataset-support">HTML5 dataset support</a></p></div>
<a class="updateurl" href=https://github.com/h5bp/html5please/blob/master/posts/dataset.md>Edit info on dataset</a>
</div>
<footer class="tags">polyfill noie nooldmobile</footer>
</article>
<article class="polyfill">
<header title="expand">
<h3 class="status use">use <i>with <b class=polyfill>polyfill</b></i> </h3>
<h4 class="kind html">html</h4>
<h2 class='name'><a href="http://caniuse.com/details">details</a></h2>
</header>
<div class="more">
<div class='recco'><p>Use the details element if you intend to show a summary which when clicked reveals detailed information. </p></div>
<div class='polyfills'><b>Recommended Polyfills: </b><p><a href="http://mathiasbynens.be/notes/html5-details-jquery">Details</a></p></div>
<a class="updateurl" href=https://github.com/h5bp/html5please/blob/master/posts/details.md>Edit info on details</a>
</div>
<footer class="tags">polyfill</footer>
</article>
<article class="polyfill nomobile">
<header title="expand">
<h3 class="status caution">caution <i>with <b class=polyfill>polyfill</b></i> </h3>
<h4 class="kind api">api</h4>
<h2 class='name'><a href="http://caniuse.com/drag-and-drop">drag-and-drop</a></h2>
</header>
<div class="more">
<div class='recco'><p>Not supported in Opera</p></div>
<div class='polyfills'><b>Recommended Polyfills: </b><p><a href="https://github.com/MrSwitch/dropfile">dropfile</a>,</p></div>
<a class="updateurl" href=https://github.com/h5bp/html5please/blob/master/posts/drag-and-drop.md>Edit info on drag-and-drop</a>
</div>
<footer class="tags">polyfill nomobile</footer>
</article>
<article class="fallback">
<header title="expand">
<h3 class="status use">use <i>with <b class=fallback>fallback</b></i> </h3>
<h4 class="kind html">html</h4>
<h2 class='name'><a href="http://caniuse.com/Eventsource">Eventsource</a></h2>
</header>
<div class="more">
<div class='recco'><p>EventSource.js provides a base fallback and is not dependent on jQuery.</p></div>
<div class='polyfills'><b>Recommended Polyfills: </b><p><a href="https://github.com/remy/polyfills/blob/master/EventSource.js">EventSource.js</a>, <a href="https://github.com/rwldrn/jquery.eventsource">jQuery.eventsource</a></p></div>
<a class="updateurl" href=https://github.com/h5bp/html5please/blob/master/posts/Eventsource.md>Edit info on Eventsource</a>
</div>
<footer class="tags">fallback</footer>
</article>
<article class="none">
<header title="expand">
<h3 class="status avoid">avoid <i></i> </h3>
<h4 class="kind css">css</h4>
<h2 class='name'><a href="http://caniuse.com/exclusions">exclusions</a></h2>
</header>
<div class="more">
<div class='recco'><p>Exclusions are new and exciting, but again very much in a flux. Active development to get an implementation out is on-going, but again, please avoid using this until there are stable implementations in the wild.</p></div>
<div class='polyfills'></div>
<a class="updateurl" href=https://github.com/h5bp/html5please/blob/master/posts/exclusions.md>Edit info on exclusions</a>
</div>
<footer class="tags">none</footer>
</article>
<article class="none">
<header title="expand">
<h3 class="status avoid">avoid <i></i> </h3>
<h4 class="kind css">css</h4>
<h2 class='name'><a href="http://caniuse.com/flexbox">flexbox</a></h2>
</header>
<div class="more">
<div class='recco'><p>Unfortunately, older versions of this spec have been implemented in Gecko, Webkit and Trident. But the spec has changed significantly (starting from the syntax), hence we recommend you avoid using this until the stable version of the spec finds wide-spread implementation.</p></div>
<div class='polyfills'></div>
<a class="updateurl" href=https://github.com/h5bp/html5please/blob/master/posts/flex-box.md>Edit info on flexbox</a>
</div>
<footer class="tags">none</footer>
</article>
<article class="none">
<header title="expand">
<h3 class="status use">use <i></i> </h3>
<h4 class="kind css">css</h4>
<h2 class='name'><a href="http://caniuse.com/font-feature-settings">font-feature-settings</a></h2>
</header>
<div class="more">
<div class='recco'><p>IE10 and Firefox 4 support low level control over font feature settings. What this means is other browsers merely will not render the flourishes you seek. </p></div>
<div class='polyfills'></div>
<a class="updateurl" href=https://github.com/h5bp/html5please/blob/master/posts/font-feature-settings.md>Edit info on font-feature-settings</a>
</div>
<footer class="tags">none</footer>
</article>
<article class="fallback">
<header title="expand">
<h3 class="status use">use <i>with <b class=fallback>fallback</b></i> </h3>
<h4 class="kind css">css</h4>
<h2 class='name'><a href="http://caniuse.com/fontface">fontface</a></h2>
</header>
<div class="more">
<div class='recco'><p>Use the <a href="http://www.fontsquirrel.com/fontface/generator">Font Squirrel Generator</a> for fonts you have license for using as web fonts. <a href="http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax">Font Squirrel @font-face syntax</a> is also the most bullet-proof way of serving web fonts. You do not need polyfills - just fonts in several formats. </p></div>
<div class='polyfills'></div>
<a class="updateurl" href=https://github.com/h5bp/html5please/blob/master/posts/fontface.md>Edit info on fontface</a>
</div>
<footer class="tags">fallback</footer>
</article>
<article class="polyfill gtie8">
<header title="expand">
<h3 class="status use">use <i>with <b class=polyfill>polyfill</b></i> </h3>
<h4 class="kind api">api</h4>
<h2 class='name'><a href="http://caniuse.com/geolocation">geolocation</a></h2>
</header>
<div class="more">
<div class='recco'><p>The Geolocation shim requires jQuery to work, but if you are looking for a mobile specific script, you are better off using geo-location-javascript.</p></div>
<div class='polyfills'><b>Recommended Polyfills: </b><p><a href="https://gist.github.com/366184">Geolocation Shim</a>, <a href="http://code.google.com/p/geo-location-javascript/">geo-location-javascript</a>, <a href="https://github.com/teleject/HTML5-GeoLocation-jQuery-Plugin">HTML5 Geolocation jQuery Plugin</a></p></div>
<a class="updateurl" href=https://github.com/h5bp/html5please/blob/master/posts/geolocation.md>Edit info on geolocation</a>
</div>
<footer class="tags">polyfill gtie8</footer>
</article>
<article class="fallback prefixes gtie8">
<header title="expand">
<h3 class="status use">use <i>with <b class=fallback>fallback</b></i> </h3>
<h4 class="kind css">css</h4>
<h2 class='name'><a href="http://caniuse.com/gradients">gradients</a></h2>
</header>
<div class="more">
<div class='recco'><p>We strongly recommend you use all the prefixes ((<code>-o-</code>, <code>-webkit</code>, <code>-ms-</code>, <code>-moz-</code>)) when you provide gradients as image values (<code>background</code> or <code>border-image</code>). Do provide a fallback color if you are using this as a value for <code>background</code> so browsers that do not support the gradients can render a solid background color. </p>
<p>We also suggest you drop old webkit syntax and only use the latest syntax for gradient values. </p></div>
<div class='polyfills'></div>
<a class="updateurl" href=https://github.com/h5bp/html5please/blob/master/posts/gradients.md>Edit info on gradients</a>
</div>
<footer class="tags">fallback prefixes gtie8</footer>
</article>
<article class="none">
<header title="expand">
<h3 class="status avoid">avoid <i></i> </h3>
<h4 class="kind css">css</h4>
<h2 class='name'><a href="http://caniuse.com/grids">grids</a></h2>
</header>
<div class="more">
<div class='recco'><p>This is also a spec that is in a flux. Older versions of the spec has found implementation, but you should wait until the spec is more stable to use this. </p></div>
<div class='polyfills'></div>
<a class="updateurl" href=https://github.com/h5bp/html5please/blob/master/posts/grids.md>Edit info on grids</a>
</div>
<footer class="tags">none</footer>
</article>
<article class="fallback">
<header title="expand">
<h3 class="status use">use <i>with <b class=fallback>fallback</b></i> </h3>
<h4 class="kind api">api</h4>
<h2 class='name'><a href="http://caniuse.com/history">history</a></h2>
</header>
<div class="more">
<div class='recco'><p>History.js has cross-compatibility between HTML5 browser implementations and optional hashchange fallback for HTML4 browsers. PJax (pushState + ajax = pjax) is what is used by Github for their fallback solution.</p></div>
<div class='polyfills'><b>Recommended Polyfills: </b><p><a href="https://github.com/balupton/history.js">History.js</a>, <a href="http://pjax.heroku.com/">pjax</a></p></div>
<a class="updateurl" href=https://github.com/h5bp/html5please/blob/master/posts/history.md>Edit info on history</a>
</div>
<footer class="tags">fallback</footer>
</article>
<article class="none prefixes">
<header title="expand">
<h3 class="status use">use <i></i> </h3>
<h4 class="kind css">css</h4>
<h2 class='name'><a href="http://caniuse.com/hyphens">hyphens</a></h2>
</header>
<div class="more">
<div class='recco'><p>CSS3 lets you break words using hyphens. As it does not make text unreadable on browsers which do not support this feature, we recommend you use it without any polyfills or fallbacks. <a href="http://code.google.com/p/hyphenator/">CSS Hyphenator</a> is a polyfill that works on browsers that support the soft hyphen. </p></div>
<div class='polyfills'></div>
<a class="updateurl" href=https://github.com/h5bp/html5please/blob/master/posts/hyphens.md>Edit info on hyphens</a>
</div>
<footer class="tags">none prefixes</footer>
</article>
<article class="polyfill">
<header title="expand">
<h3 class="status use">use <i>with <b class=polyfill>polyfill</b></i> </h3>
<h4 class="kind api">api</h4>
<h2 class='name'><a href="http://caniuse.com/match-media">match-media</a></h2>
</header>
<div class="more">
<div class='recco'><p><a href="https://github.com/paulirish/matchMedia.js/">MatchMedia.js</a> provides a shim for unsupported browsers. If you want a shim that is responsive to window resizing, you can use <a href="http://www.paulrhayes.com/2011-11/use-css-transitions-to-link-media-queries-and-javascript/">this fork</a>.</p></div>
<div class='polyfills'></div>
<a class="updateurl" href=https://github.com/h5bp/html5please/blob/master/posts/match-media.md>Edit info on match-media</a>
</div>
<footer class="tags">polyfill</footer>
</article>
<article class="gtie8">
<header title="expand">
<h3 class="status use">use <i></i> </h3>
<h4 class="kind css">css</h4>
<h2 class='name'><a href="http://caniuse.com/mediaqueries">mediaqueries</a></h2>
</header>
<div class="more">
<div class='recco'><p>Media Queries work on all modern browsers. IE6,7,8 unfortunately do not understand media queries on features, which means none of your CSS within media queries will be parsed by them. We recommend you make peace with that (or use Chrome Frame), but if you absolutely cannot, then you can use <a href="https://github.com/scottjehl/Respond">Respond.js</a>.</p></div>
<div class='polyfills'></div>
<a class="updateurl" href=https://github.com/h5bp/html5please/blob/master/posts/mediaqueries.md>Edit info on mediaqueries</a>
</div>
<footer class="tags">gtie8</footer>
</article>
<article class="polyfill noie nomobile">
<header title="expand">
<h3 class="status use">use <i>with <b class=polyfill>polyfill</b></i> </h3>
<h4 class="kind html">html</h4>
<h2 class='name'><a href="http://caniuse.com/menu">menu</a></h2>
</header>
<div class="more">
<div class='recco'><p>Do note that this polyfill requires a jQuery dependency.</p></div>
<div class='polyfills'><b>Recommended Polyfills: </b><p><a href="https://github.com/medialize/jQuery-contextMenu">contextMenu</a></p></div>
<a class="updateurl" href=https://github.com/h5bp/html5please/blob/master/posts/menu.md>Edit info on menu</a>
</div>
<footer class="tags">polyfill noie nomobile</footer>
</article>
<article class="polyfill noie nomobile">
<header title="expand">
<h3 class="status use">use <i>with <b class=polyfill>polyfill</b></i> </h3>
<h4 class="kind html">html</h4>
<h2 class='name'><a href="http://caniuse.com/meter">meter</a></h2>
</header>
<div class="more">
<div class='recco'></div>
<div class='polyfills'><b>Recommended Polyfills: </b><p><a href="https://gist.github.com/667320">meter-polyfill</a>, <a href="https://github.com/xjamundx/HTML5-Meter-Shim">jQuery shim</a></p></div>
<a class="updateurl" href=https://github.com/h5bp/html5please/blob/master/posts/meter.md>Edit info on meter</a>
</div>
<footer class="tags">polyfill noie nomobile</footer>
</article>
<article class="prefixes gtie9">
<header title="expand">
<h3 class="status use">use <i></i> </h3>
<h4 class="kind css">css</h4>
<h2 class='name'><a href="http://caniuse.com/multicolumn">multicolumn</a></h2>
</header>
<div class="more">
<div class='recco'><p>IE, and Opera support CSS3 Multicol without prefixes. So you only need <code>-webkit</code> and <code>-moz</code>. We recommend you do not polyfill this, but a basic <a href="http://www.csscripting.com/css-multi-column/">Multicol Polyfill</a> exists. </p></div>
<div class='polyfills'></div>
<a class="updateurl" href=https://github.com/h5bp/html5please/blob/master/posts/multicolumn.md>Edit info on multicolumn</a>
</div>
<footer class="tags">prefixes gtie9</footer>
</article>
<article class="fallback gtie8">
<header title="expand">
<h3 class="status use">use <i>with <b class=fallback>fallback</b></i> </h3>
<h4 class="kind css">css</h4>
<h2 class='name'><a href="http://caniuse.com/multibackgrounds">multibackgrounds</a></h2>
</header>
<div class="more">
<div class='recco'><p>Multiple backgrounds when unsupported <a href="http://snook.ca/archives/html_and_css/multiple-bg-css-gradients">are ignored completely</a>. If you can make do with a simple background color, make sure to declare <code>background-color: &lt;color&gt;</code> before you start using multiple backgrounds or you can also set an image as a background with <code>background-image</code> and override it with your multiple background declaration. We strongly recommend you don't polyfill this, but <a href="http://css3pie.com/">CSSPie</a> should help you out if you need one.</p></div>
<div class='polyfills'></div>
<a class="updateurl" href=https://github.com/h5bp/html5please/blob/master/posts/multiple-backgrounds.md>Edit info on multibackgrounds</a>
</div>
<footer class="tags">fallback gtie8</footer>
</article>
<article class="polyfill gtie9">
<header title="expand">
<h3 class="status caution">caution <i>with <b class=polyfill>polyfill</b></i> </h3>
<h4 class="kind html">html</h4>
<h2 class='name'><a href="http://caniuse.com/offline">offline</a></h2>
</header>
<div class="more">
<div class='recco'></div>
<div class='polyfills'><b>Recommended Polyfills: </b><p><a href="http://code.google.com/p/html5-gears/">html5 gears</a></p></div>
<a class="updateurl" href=https://github.com/h5bp/html5please/blob/master/posts/offline.md>Edit info on offline</a>
</div>
<footer class="tags">polyfill gtie9</footer>
</article>
<article class="polyfill">
<header title="expand">
<h3 class="status use">use <i>with <b class=polyfill>polyfill</b></i> </h3>
<h4 class="kind html">html</h4>
<h2 class='name'><a href="http://caniuse.com/ol-reversed">ol-reversed</a></h2>
</header>
<div class="more">
<div class='recco'><p>Please use that polyfill, as Webkit is the only engine that supports it.
Also see <a href="http://www.impressivewebs.com/reverse-ordered-lists-html5/">Loui's</a> post about the polyfill.</p></div>
<div class='polyfills'><b>Recommended Polyfills: </b><p><a href="https://github.com/impressivewebs/HTML5-Reverse-Ordered-Lists">HTML5 reverse ordered lists</a></p></div>
<a class="updateurl" href=https://github.com/h5bp/html5please/blob/master/posts/ol-reversed.md>Edit info on ol-reversed</a>
</div>
<footer class="tags">polyfill</footer>
</article>
<article class="none">
<header title="expand">
<h3 class="status avoid">avoid <i></i> </h3>
<h4 class="kind css">css</h4>
<h2 class='name'><a href="http://caniuse.com/paged-media">paged-media</a></h2>
</header>
<div class="more">
<div class='recco'><p>This spec is actively under development, so we recommend you wait until there are enough implementations around.</p></div>
<div class='polyfills'></div>
<a class="updateurl" href=https://github.com/h5bp/html5please/blob/master/posts/paged-media.md>Edit info on paged-media</a>
</div>
<footer class="tags">none</footer>
</article>
<article class="gtie9">
<header title="expand">
<h3 class="status use">use <i></i> </h3>
<h4 class="kind html">html</h4>
<h2 class='name'><a href="http://caniuse.com/placeholder">placeholder</a></h2>
</header>
<div class="more">
<div class='recco'><p>Input placeholders are simply ignored in IE 9 and below. Note that they are only applied when the <strong>type</strong> of the input is <em>text</em>, <em>search</em>, <em>tel</em>, <em>url</em>, or <em>email</em>. Otherwise, it is ignored.</p></div>
<div class='polyfills'><b>Recommended Polyfills: </b><p><a href="https://github.com/mathiasbynens/jquery-placeholder">Placeholder jQuery Plugin</a></p></div>
<a class="updateurl" href=https://github.com/h5bp/html5please/blob/master/posts/placeholder.md>Edit info on placeholder</a>
</div>
<footer class="tags">gtie9</footer>
</article>
<article class="fallback noie">
<header title="expand">
<h3 class="status use">use <i>with <b class=fallback>fallback</b></i> </h3>
<h4 class="kind css">css</h4>
<h2 class='name'><a href="http://caniuse.com/pointer-events">pointer-events</a></h2>
</header>
<div class="more">
<div class='recco'><p>Pointer events are available in SVG and CSS. All modern browsers support them in SVG, but IE and Opera do not support them in CSS yet. There is a <a href="https://github.com/Modernizr/Modernizr/feature-detects/pointerevents.js">modernizr plugin</a> to detect support which can be used to implement a JavaScript interceptor for elements which require pointer events to be disabled. </p></div>
<div class='polyfills'></div>
<a class="updateurl" href=https://github.com/h5bp/html5please/blob/master/posts/pointer-events.md>Edit info on pointer-events</a>
</div>
<footer class="tags">fallback noie</footer>
</article>
<article class="polyfill gtie9">
<header title="expand">
<h3 class="status use">use <i>with <b class=polyfill>polyfill</b></i> </h3>
<h4 class="kind html">html</h4>
<h2 class='name'><a href="http://caniuse.com/progress">progress</a></h2>
</header>
<div class="more">
<div class='recco'></div>
<div class='polyfills'><b>Recommended Polyfills: </b><p><a href="https://github.com/LeaVerou/HTML5-Progress-polyfill">HTML5 Progress Polyfill</a></p></div>
<a class="updateurl" href=https://github.com/h5bp/html5please/blob/master/posts/progress.md>Edit info on progress</a>
</div>
<footer class="tags">polyfill gtie9</footer>
</article>
<article class="none">
<header title="expand">
<h3 class="status use">use <i></i> </h3>
<h4 class="kind css">css</h4>
<h2 class='name'><a href="http://caniuse.com/pseudo-elements">pseudo-elements</a></h2>
</header>
<div class="more">
<div class='recco'><p>Pseudo-elements are supposed to follow this syntax <code>::before</code> and <code>::after</code>. But, if you intend to support IE7+, you would have to use <code>:before</code> and <code>:after</code>. Use these to provide only additional information, so when they are unsupported they do not destroy the readability of your page. </p></div>
<div class='polyfills'></div>
<a class="updateurl" href=https://github.com/h5bp/html5please/blob/master/posts/pseudo-elements.md>Edit info on pseudo-elements</a>
</div>
<footer class="tags">none</footer>
</article>
<article class="none">
<header title="expand">
<h3 class="status avoid">avoid <i></i> </h3>
<h4 class="kind css">css</h4>
<h2 class='name'><a href="http://caniuse.com/regions">regions</a></h2>
</header>
<div class="more">
<div class='recco'><p>CSS Regions is in active development. As a result, the syntax is in a flux. A polyfill based on an older syntax exists, but we recommend you hold your horses till this spec seems some stability and 3 or more implementations. </p></div>
<div class='polyfills'></div>
<a class="updateurl" href=https://github.com/h5bp/html5please/blob/master/posts/regions.md>Edit info on regions</a>
</div>
<footer class="tags">none</footer>
</article>
<article class="fallback">
<header title="expand">
<h3 class="status use">use <i>with <b class=fallback>fallback</b></i> </h3>
<h4 class="kind html">html</h4>
<h2 class='name'><a href="http://caniuse.com/ruby">ruby</a></h2>
</header>
<div class="more">
<div class='recco'><p>If you are using Ruby element you dont need a script-based fallback but you can provide a CSS based set of good defaults. </p></div>
<div class='polyfills'><b>Recommended Polyfills: </b><p><a href="http://www.useragentman.com/blog/2010/10/29/cross-browser-html5-ruby-annotations-using-css/">Cross-browser Ruby</a>, <a href="http://sideshowbarker.net/2009/11/13/html5-ruby/#comment-3388">basic fallback</a></p></div>
<a class="updateurl" href=https://github.com/h5bp/html5please/blob/master/posts/ruby.md>Edit info on ruby</a>
</div>
<footer class="tags">fallback</footer>
</article>
<article class="">
<header title="expand">
<h3 class="status avoid">avoid <i></i> </h3>
<h4 class="kind css">css</h4>
<h2 class='name'><a href="http://caniuse.com/scoped-css">scoped-css</a></h2>
</header>
<div class="more">
<div class='recco'><p>Scoped CSS is still in active development. </p></div>
<div class='polyfills'></div>
<a class="updateurl" href=https://github.com/h5bp/html5please/blob/master/posts/scoped-css.md>Edit info on scoped-css</a>
</div>
<footer class="tags"></footer>
</article>
<article class="fallback gtie6">
<header title="expand">
<h3 class="status use">use <i>with <b class=fallback>fallback</b></i> </h3>
<h4 class="kind css">css</h4>
<h2 class='name'><a href="http://caniuse.com/selectors">selectors</a></h2>
</header>
<div class="more">
<div class='recco'><p>CSS Selectors are supported from IE7 onwards, so you should be safe to use. But do note that, on browsers that do not support these selectors, a whole rule will be detected as invalid if these unsupported selectors are present. For example, in IE6 <code>#main, p:first-child {}</code> would be invalid because it is unable to understand <code>p:first-child</code>. Again, we strongly recommend you do not try to polyfill this, but if you do need one, you can use <a href="http://selectivizr.com/">Selectivizr</a>.</p></div>
<div class='polyfills'></div>
<a class="updateurl" href=https://github.com/h5bp/html5please/blob/master/posts/selectors.md>Edit info on selectors</a>
</div>
<footer class="tags">fallback gtie6</footer>
</article>
<article class="gtie8 polyfill">
<header title="expand">
<h3 class="status use">use <i>with <b class=polyfill>polyfill</b></i> </h3>
<h4 class="kind svg">svg</h4>
<h2 class='name'><a href="http://caniuse.com/svg">svg</a></h2>
</header>
<div class="more">
<div class='recco'><p>SVG has good support for several years in most browsers except IE. IE9 brings support, which means you can use a polyfill library like SVGWeb or Canvg or create SVG dynamically via RaphaelJS.</p></div>
<div class='polyfills'><b>Recommended Polyfills: </b><p><a href="http://code.google.com/p/svgweb/">svgweb</a>, <a href="http://raphaeljs.com/">raphaeljs</a>, <a href="http://code.google.com/p/canvg/">canvg</a></p></div>
<a class="updateurl" href=https://github.com/h5bp/html5please/blob/master/posts/svg.md>Edit info on svg</a>
</div>
<footer class="tags">gtie8 polyfill</footer>
</article>
<article class="none">
<header title="expand">
<h3 class="status use">use <i></i> </h3>
<h4 class="kind css">css</h4>
<h2 class='name'><a href="http://caniuse.com/text-overflow">text-overflow</a></h2>
</header>
<div class="more">
<div class='recco'><p>Text Overflow is most commonly used for <code>text-overflow: ellipsis</code>. With Firefox 7, all modern browsers now support this property prefixless and you should use it. On unsupported browsers, it merely does not render the ellipsis which we feel is not bad enough to merit a polyfill. However, there is a <a href="http://www.bramstein.com/projects/text-overflow/">jQuery plugin</a> in the unlikely event of you needing one. </p></div>
<div class='polyfills'></div>
<a class="updateurl" href=https://github.com/h5bp/html5please/blob/master/posts/text-overflow.md>Edit info on text-overflow</a>
</div>
<footer class="tags">none</footer>
</article>
<article class="fallback gtie9">
<header title="expand">
<h3 class="status use">use <i>with <b class=fallback>fallback</b></i> </h3>
<h4 class="kind css">css</h4>
<h2 class='name'><a href="http://caniuse.com/text-shadow">text-shadow</a></h2>
</header>
<div class="more">
<div class='recco'></div>
<div class='polyfills'></div>
<a class="updateurl" href=https://github.com/h5bp/html5please/blob/master/posts/text-shadow.md>Edit info on text-shadow</a>
</div>
<footer class="tags">fallback gtie9</footer>
</article>
<article class="fallback prefixes">
<header title="expand">
<h3 class="status use">use <i>with <b class=fallback>fallback</b></i> </h3>
<h4 class="kind css">css</h4>
<h2 class='name'><a href="http://caniuse.com/transforms">transforms</a></h2>
</header>
<div class="more">
<div class='recco'><p>Make sure you use all the right prefixes (<code>-o-</code>, <code>-webkit</code>, <code>-ms-</code>, <code>-moz-</code>). If your transforms destroy the readability of your site on browsers that do not support them, use Modernizr's <code>no-csstransforms</code> class to adjust the design so that the text remains readable. In the unlikely event of you needing a polyfill for unsupported browsers, use <a href="https://github.com/pbakaus/transformie">Transformie</a> or <a href="http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/">CSSSandpaper</a>.</p></div>
<div class='polyfills'></div>
<a class="updateurl" href=https://github.com/h5bp/html5please/blob/master/posts/transforms.md>Edit info on transforms</a>
</div>
<footer class="tags">fallback prefixes</footer>
</article>
<article class="fallback prefixes">
<header title="expand">
<h3 class="status use">use <i>with <b class=fallback>fallback</b></i> </h3>
<h4 class="kind css">css</h4>
<h2 class='name'><a href="http://caniuse.com/transitions">transitions</a></h2>
</header>
<div class="more">
<div class='recco'><p>Note that you need to use all the usual prefixes to make this work in all browsers (<code>-o-</code>, <code>-webkit</code>, <code>-moz-</code>, <code>-ms-</code>).If there is any critical interaction that requires transitions to be present, we recommend you provide an alternative experience for users on browsers that do not support this feature by using feature detection. </p></div>
<div class='polyfills'></div>
<a class="updateurl" href=https://github.com/h5bp/html5please/blob/master/posts/transitions.md>Edit info on transitions</a>
</div>
<footer class="tags">fallback prefixes</footer>
</article>
<article class="polyfill gtie8">
<header title="expand">
<h3 class="status use">use <i>with <b class=polyfill>polyfill</b></i> </h3>
<h4 class="kind html">html</h4>
<h2 class='name'><a href="http://caniuse.com/video">video</a></h2>
</header>
<div class="more">
<div class='recco'><p>Do note you need to supply your video in various formats to cater to all browsers and fallbacks. There is also a way to do this without any scripting as explained by Kroc Camen in his article <a href="http://camendesign.com/code/video_for_everybody">Video for Everybody</a>.</p></div>
<div class='polyfills'><b>Recommended Polyfills: </b><p><a href="http://mediaelementjs.com/">mediaelementjs</a></p></div>
<a class="updateurl" href=https://github.com/h5bp/html5please/blob/master/posts/video.md>Edit info on video</a>
</div>
<footer class="tags">polyfill gtie8</footer>
</article>
<article class="gtie7, polyfill">
<header title="expand">
<h3 class="status use">use <i>with <b class=polyfill>polyfill</b></i> </h3>
<h4 class="kind api">api</h4>
<h2 class='name'><a href="http://caniuse.com/web-storage">web-storage</a></h2>
</header>
<div class="more">
<div class='recco'></div>
<div class='polyfills'><b>Recommended Polyfills: </b><p><a href="https://gist.github.com/350433">storage polyfill</a>,</p></div>
<a class="updateurl" href=https://github.com/h5bp/html5please/blob/master/posts/web-storage.md>Edit info on web-storage</a>
</div>
<footer class="tags">gtie7, polyfill</footer>
</article>
<article class="fallback">
<header title="expand">
<h3 class="status avoid">avoid <i>with <b class=fallback>fallback</b></i> </h3>
<h4 class="kind api">api</h4>
<h2 class='name'><a href="http://caniuse.com/webgl">webgl</a></h2>
</header>
<div class="more">
<div class='recco'><p>No browser support - experimental only for now</p></div>
<div class='polyfills'></div>
<a class="updateurl" href=https://github.com/h5bp/html5please/blob/master/posts/webgl.md>Edit info on webgl</a>
</div>
<footer class="tags">fallback</footer>
</article>
<article class="none">
<header title="expand">
<h3 class="status avoid">avoid <i></i> </h3>
<h4 class="kind api">api</h4>
<h2 class='name'><a href="http://caniuse.com/websockets">websockets</a></h2>
</header>
<div class="more">
<div class='recco'><p>While polyfills exist for web-sockets, browser support is not as widespread to recommend usage. If you like playing with fire, go ahead and use <a href="https://github.com/sockjs/sockjs-client">sockJS</a>,<a href="http://socket.io/">socket.io</a>, <a href="https://github.com/gimite/web-socket-js/">web-socket.js</a></p></div>
<div class='polyfills'></div>
<a class="updateurl" href=https://github.com/h5bp/html5please/blob/master/posts/websockets.md>Edit info on websockets</a>
</div>
<footer class="tags">none</footer>
</article>
</section>
</div>
<footer>
<p>with love &amp; tears from</p>
<p class=builders><a href="http://twitter.com/divya"><img src="http://api.twitter.com/1/users/profile_image/divya?size=normal"><b>Divya</b> Manian</a> <a href="http://twitter.com/paul_irish"><img src="http://api.twitter.com/1/users/profile_image/paul_irish?size=normal"><b>Paul</b> Irish</a> <a href="http://twitter.com/tbranyen"><img src="http://api.twitter.com/1/users/profile_image/tbranyen?size=normal"><b>Tim</b> Branyen</a> <a href="http://twitter.com/connor"><img src="http://api.twitter.com/1/users/profile_image/connor?size=normal"><b>Connor</b> Montgomery</a> <a href='https://github.com/h5bp/html5please/contributors'>&amp; more</a>
</p>
</footer>
<!-- scripts concatenated and minified via ant build script -->
<script src='js/libs/list.min.js'></script>
<script src='js/libs/classList.js'></script>
<script src='js/script.js'></script>
<!-- end scripts -->
<script type='text/javascript'>
//<![CDATA[
var _gaq=[['_setAccount','UA-17904194-3'],['_trackPageview'],['_trackPageLoadTime']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
//]]>
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.