Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
111 lines (102 sloc) 6.08 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>JS-NEXT 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.0" name="viewport">
<base target="_blank"> <!-- open all links on page in a new tab. hope that's cool with you. -->
<link rel="shortcut icon" href="favicon.ico" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
<link href="http://fonts.googleapis.com/css?family=Francois+One|Open+Sans:400italic,400,800" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/solarized_dark.css" rel="stylesheet">
<script src="js/libs/modernizr-2.0.min.js"></script>
</head>
<body id="gfs">
<header class="index">
<h1>JS Next <img src="img/js-logo.jpg" alt="HTML5 Logo"> Please</h1>
<h2>
<b>Use the new and shiny responsibly.</b>
<p>
The goal of this website is to tell you the Javascript features you can or can't use safely. The list of items is currently taken from Kangax ES5 compatibility table but other sources are more than welcome (Ecmascript wikis...)
</p>
<p>
Javascript is moving quickly. Take a look at the newest 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="http://caniuse.com">When Can I Use</a> tells you the browser support story, while <a href="http://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="#gtie9">IE10+</a> <a href="#gtie8">IE9+</a> <a href="#gtie7">IE8+</a> <a href="#gtie6">IE7+</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}} {{ready}}">
<header>
<h2 class="name">{{{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}}}">
{{testurl moreurl}}
</a>
{{/if}}
<a href="{{{editurl}}}">Edit this info</a>
</p>
</div>
<footer class="tags">{{tags}}</footer>
</article>
{{/features}}
</section>
</div>
<footer>
<p>JS NEXT Please is a community project (<a href="#">contribute on github!</a>) initiated by Jonathan Blanchet and heavily inspired by <a href="http://html5please.us" title="html5please">HTML5please.us</a> with the help from the people behind <a href="http://html5boilerplate.com">HTML5 Boilerplate</a>, <a href="http://modernizr.com">Modernizr</a> &amp; <a href="http://css3please.com">CSS3 Please</a>.</p>
<p class="builders">
<a href="http://twitter.com/jblanchefr"><img src="http://api.twitter.com/1/users/profile_image/jblanchefr?size=normal" alt="Jonathan Blanchet"><b>Jonathan</b> Blanchet</a>
</p>
</footer>
<!-- scripts concatenated and minified via ant build script -->
<script src="js/libs/augment.js"></script>
<script src="js/libs/list.js"></script>
<script src="js/libs/classList.js"></script>
<script src="js/libs/highlight.min.js"></script>
<script src="js/script.js"></script>
<!-- end scripts -->
<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>