Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
503 lines (454 sloc) 32.2 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5 Readiness</title>
<meta name="description" content="A Visualization of how ready different parts of HTML5/CSS3 are for day to day use">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<header>
<h1><b>HTML5</b> &amp; <i>CSS3</i> Readiness</h1>
<h3>
<a href="#" class="twenty08">2008</a> /
<a href="#" class="twenty09">2009</a> /
<a href="#" class="twenty10">2010</a> /
<a href="#" class="twenty11">2011</a> /
<a href="#" class="twenty12">2012</a> /
<a href="#" class="twenty13">2013</a>
</h3>
<ul>
<li class="twenty13">
<ul>
<li><b class="ie8"></b> IE 8
<li><b class="ie9"></b> IE 9
<li><b class="ie10"></b> IE 10
<li><b class="ff"></b> Firefox
<li><b class="op"></b> Opera 12
<li><b class="sa"></b> Safari 6
<li><b class="ch"></b> Chrome
</ul>
</li>
<li class="twenty12">
<ul>
<li><b class="ie8"></b> IE 8
<li><b class="ie9"></b> IE 9
<li><b class="ie10"></b> IE 10
<li><b class="ff36"></b> Firefox 3.6
<li><b class="ff"></b> Firefox
<li><b class="op"></b> Opera 12
<li><b class="sa"></b> Safari 6
<li><b class="ch"></b> Chrome
</ul>
</li>
<li class="twenty11">
<ul>
<li><b class="ie7"></b> IE 7
<li><b class="ie8"></b> IE 8
<li><b class="ie9"></b> IE 9
<li><b class="ff36"></b> Firefox 3.6
<li><b class="ff"></b> Firefox 4+
<li><b class="op"></b> Opera 11
<li><b class="sa"></b> Safari 5.1
<li><b class="ch"></b> Chrome
</ul>
</li>
<li class="twenty10">
<ul>
<li><b class="ie6"></b> IE 6
<li><b class="ie7"></b> IE 7
<li><b class="ie8"></b> IE 8
<li><b class="ff35"></b> Firefox 3.5
<li><b class="ff36"></b> Firefox 3.6
<li><b class="op"></b> Opera 11
<li><b class="sa"></b> Safari 5
<li><b class="ch"></b> Chrome 8
</ul>
</li>
<li class="twenty09">
<ul>
<li><b class="ie6"></b> IE 6
<li><b class="ie7"></b> IE 7
<li><b class="ie8"></b> IE 8
<li><b class="ff20"></b> Firefox 2.0
<li><b class="ff30"></b> Firefox 3.0
<li><b class="op96"></b> Opera 9.6
<li><b class="sa32"></b> Safari 3.2
<li><b class="ch2"></b> Chrome 2
</ul>
</li>
<li class="twenty08">
<ul>
<li><b class="ie6"></b> IE 6
<li><b class="ie7"></b> IE 7
<li><b class="ff20"></b> Firefox 2.0
<li><b class="op95"></b> Opera 9.5
<li><b class="sa31"></b> Safari 3.1
</ul>
</li>
</ul>
<aside>
<p>Most of these features are ready to use <em>today</em>!
<p><small>data from <a href="http://caniuse.com">caniuse.com</a></small>
</aside>
</header>
<div id="body">
<div class="css-chart">
<p id="ray-1" class="css3"><a href="#ray-1">
<em class="twenty13"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ie10"></b><b class="ie9"></b></em>
<em class="twenty12"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ff36"></b><b class="ie10"></b><b class="ie9"></b></em>
<em class="twenty11"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ff36"></b><b class="ie9"></b></em>
<em class="twenty10"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff36"></b><b class="ie9"></b></em>
<em class="twenty09"><b class="ch2"></b><b class="sa32"></b></em>
<em class="twenty08"><b class="sa31"></b></em>
<i>Multiple Backgrounds</i></a>
<p id="ray-2" class="css3"><a href="#ray-2">
<em class="twenty13"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ie10"></b><b class="ie9"></b></em>
<em class="twenty12"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ff36"></b><b class="ie10"></b><b class="ie9"></b></em>
<em class="twenty11"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ff36"></b><b class="ie9"></b></em>
<em class="twenty10"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff36"></b><b class="ff35"></b><b class="ie9"></b></em>
<em class="twenty09"><b class="ch2"></b><b class="sa32"></b><b class="op96"></b></em>
<em class="twenty08"><b class="sa31"></b><b class="op95"></b></em>
<i>Media Queries</i></a>
<p id="ray-3" class="css3"><a href="#ray-3">
<em class="twenty13"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ie10"></b><b class="ie9"></b><b class="ie8"></b></em>
<em class="twenty12"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ff36"></b><b class="ie10"></b><b class="ie9"></b><b class="ie8"></b></em>
<em class="twenty11"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ff36"></b><b class="ie9"></b><b class="ie8"></b></em>
<em class="twenty10"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff36"></b><b class="ff35"></b><b class="ie9"></b><b class="ie8"></b></em>
<em class="twenty09"><b class="ch2"></b><b class="sa32"></b><b class="op96"></b><b class="ff30"></b><b class="ff20"></b><b class="ie8"></b></em>
<em class="twenty08"><b class="sa31"></b><b class="op95"></b><b class="ff20"></b></em>
<i>display: table</i></a>
<p id="ray-4" class="css3"><a href="#ray-4">
<em class="twenty13"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ie10"></b></em>
<em class="twenty12"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ie10"></b></em>
<em class="twenty11"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b></em>
<em class="twenty10"><b class="ch"></b><b class="sa"></b><b class="op"></b></em>
<em class="twenty09"><b class="ch2"></b><b class="sa32"></b></em>
<em class="twenty08"></em>
<i>Transitions</i></a>
<p id="ray-5" class="css3"><a href="#ray-5">
<em class="twenty13"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ie10"></b><b class="ie9"></b><b class="ie8"></b></em>
<em class="twenty12"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ff36"></b><b class="ie10"></b><b class="ie9"></b><b class="ie8"></b></em>
<em class="twenty11"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ff36"></b><b class="ie9"></b><b class="ie8"></b><b class="ie7"></b></em>
<em class="twenty10"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff36"></b><b class="ff35"></b><b class="ie9"></b><b class="ie8"></b><b class="ie7"></b><b class="ie6"></b></em>
<em class="twenty09"><b class="sa32"></b><b class="ie8"></b><b class="ie7"></b><b class="ie6"></b></em>
<em class="twenty08"><b class="ie7"></b><b class="ie6"></b></em>
<i>@font-face</i></a>
<p id="ray-6" class="css3"><a href="#ray-6">
<em class="twenty13"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ie10"></b></em>
<em class="twenty12"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ff36"></b><b class="ie10"></b></em>
<em class="twenty11"><b class="ch"></b><b class="sa"></b><b class="ff"></b><b class="ff36"></b></em>
<em class="twenty10"><b class="ch"></b><b class="sa"></b><b class="ff36"></b><b class="ff35"></b><b class="ie9"></b></em>
<em class="twenty09"><b class="ch2"></b><b class="sa32"></b><b class="ff30"></b></em>
<em class="twenty08"><b class="sa31"></b></em>
<i>Flexbox Layout</i></a>
<p id="ray-7" class="css3"><a href="#ray-7">
<em class="twenty13"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ie10"></b><b class="ie9"></b><b class="ie8"></b></em>
<em class="twenty12"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ff36"></b><b class="ie10"></b><b class="ie9"></b><b class="ie8"></b></em>
<em class="twenty11"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ff36"></b><b class="ie9"></b><b class="ie8"></b></em>
<em class="twenty10"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff36"></b><b class="ff35"></b><b class="ie9"></b><b class="ie8"></b></em>
<em class="twenty09"><b class="ch2"></b><b class="sa32"></b><b class="op96"></b><b class="ff30"></b><b class="ff20"></b><b class="ie8"></b></em>
<em class="twenty08"><b class="sa31"></b><b class="op95"></b><b class="ff20"></b></em>
<i>Generated Content</i></a>
<p id="ray-8" class="css3"><a href="#ray-8">
<em class="twenty13"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ie10"></b><b class="ie9"></b></em>
<em class="twenty12"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ff36"></b><b class="ie10"></b><b class="ie9"></b></em>
<em class="twenty11"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ff36"></b><b class="ie9"></b></em>
<em class="twenty10"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff36"></b><b class="ff35"></b><b class="ie9"></b></em>
<em class="twenty09"><b class="ch2"></b><b class="sa32"></b></em>
<em class="twenty08"></em>
<i>Transforms</i></a>
<p id="ray-9" class="css3"><a href="#ray-9">
<em class="twenty13"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ie10"></b></em>
<em class="twenty12"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ie10"></b></em>
<em class="twenty11"><b class="ch"></b><b class="sa"></b><b class="ff"></b></em>
<em class="twenty10"><b class="ch"></b><b class="sa"></b></em>
<em class="twenty09"><b class="ch2"></b></em>
<em class="twenty08"></em>
<i>Animations</i></a>
<p id="ray-10" class="css3"><a href="#ray-10">
<em class="twenty13"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ie10"></b><b class="ie9"></b></em>
<em class="twenty12"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ie10"></b><b class="ie9"></b></em>
<em class="twenty11"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ie9"></b></em>
<em class="twenty10"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ie9"></b></em>
<em class="twenty09"><b class="ch2"></b><b class="sa32"></b><b class="op96"></b></em>
<em class="twenty08"><b class="op95"></b></em>
<i>SVG as Background</i></a>
<p id="ray-11" class="css3"><a href="#ray-11">
<em class="twenty13"><b class="ch"></b><b class="sa"></b><b class="ff"></b><b class="ie10"></b></em>
<em class="twenty12"><b class="ch"></b><b class="sa"></b><b class="ff"></b><b class="ie10"></b></em>
<em class="twenty11"><b class="ch"></b><b class="sa"></b></em>
<em class="twenty10"><b class="sa"></b></em>
<em class="twenty09"></em>
<em class="twenty08"></em>
<i>3D Transforms</i></a>
<p id="ray-12" class="css3"><a href="#ray-12">
<em class="twenty13"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ie10"></b><b class="ie9"></b><b class="ie8"></b></em>
<em class="twenty12"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ff36"></b><b class="ie10"></b><b class="ie9"></b><b class="ie8"></b></em>
<em class="twenty11"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ff36"></b><b class="ie9"></b><b class="ie8"></b></em>
<em class="twenty10"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff36"></b><b class="ff35"></b><b class="ie9"></b><b class="ie8"></b></em>
<em class="twenty09"><b class="ch2"></b><b class="sa32"></b><b class="op96"></b><b class="ff30"></b><b class="ff20"></b><b class="ie8"></b></em>
<em class="twenty08"><b class="sa31"></b><b class="op95"></b><b class="ff20"></b></em>
<i>Data URIs</i></a>
<p id="ray-13"><a href="#ray-13">
<em class="twenty13"><b class="ch"></b><b class="ff"></b><b class="ie10"></b></em>
<em class="twenty12"><b class="ch"></b><b class="ff"></b><b class="ie10"></b></em>
<em class="twenty10"></em>
<em class="twenty11"><b class="ch"></b><b class="ff"></b></em>
<em class="twenty10"></em>
<i>Indexed Database</i></a>
<p id="ray-14" class="css3"><a href="#ray-14">
<em class="twenty13"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ie10"></b><b class="ie9"></b></em>
<em class="twenty12"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ff36"></b><b class="ie10"></b><b class="ie9"></b></em>
<em class="twenty11"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ff36"></b><b class="ie9"></b></em>
<em class="twenty10"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff36"></b><b class="ff35"></b><b class="ie9"></b></em>
<em class="twenty09"><b class="ch2"></b><b class="sa32"></b><b class="ff30"></b><b class="ff20"></b></em>
<em class="twenty08"><b class="sa31"></b><b class="ff20"></b></em>
<i>border-radius</i></a>
<p id="ray-15" class="css3"><a href="#ray-15">
<em class="twenty13"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ie10"></b><b class="ie9"></b><b class="ie8"></b></em>
<em class="twenty12"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ff36"></b><b class="ie10"></b><b class="ie9"></b><b class="ie8"></b></em>
<em class="twenty11"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ff36"></b><b class="ie9"></b><b class="ie8"></b></em>
<em class="twenty10"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff36"></b><b class="ff35"></b><b class="ie9"></b><b class="ie8"></b></em>
<em class="twenty09"><b class="ch2"></b><b class="sa32"></b><b class="ie8"></b></em>
<em class="twenty08"></em>
<i>Selectors API</i></a>
<p id="ray-16"><a href="#ray-16">
<em class="twenty13"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ie10"></b><b class="ie9"></b><b class="ie8"></b></em>
<em class="twenty12"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ff36"></b><b class="ie10"></b><b class="ie9"></b><b class="ie8"></b></em>
<em class="twenty11"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ff36"></b><b class="ie9"></b><b class="ie8"></b></em>
<em class="twenty10"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff36"></b><b class="ff35"></b><b class="ie9"></b><b class="ie8"></b></em>
<em class="twenty09"><b class="ff30"></b><b class="ie8"></b></em>
<em class="twenty08"></em>
<i>Web Storage</i></a>
<p id="ray-17"><a href="#ray-17">
<em class="twenty13"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ie10"></b><b class="ie9"></b></em>
<em class="twenty12"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ff36"></b><b class="ie10"></b><b class="ie9"></b></em>
<em class="twenty11"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ff36"></b><b class="ie9"></b></em>
<em class="twenty10"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff36"></b><b class="ff35"></b><b class="ie9"></b></em>
<em class="twenty09"><b class="sa32"></b><b class="op96"></b></em>
<em class="twenty08"><b class="op95"></b></em>
<i>Audio</i></a>
<p id="ray-18"><a href="#ray-18">
<em class="twenty13"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ie10"></b><b class="ie9"></b></em>
<em class="twenty12"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ff36"></b><b class="ie10"></b><b class="ie9"></b></em>
<em class="twenty11"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ff36"></b><b class="ie9"></b></em>
<em class="twenty10"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff36"></b><b class="ff35"></b><b class="ie9"></b></em>
<em class="twenty09"><b class="sa32"></b></em>
<em class="twenty08"></em>
<i>Video</i></a>
<p id="ray-19"><a href="#ray-19">
<em class="twenty13"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ie10"></b><b class="ie9"></b></em>
<em class="twenty12"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ff36"></b><b class="ie10"></b><b class="ie9"></b></em>
<em class="twenty11"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ff36"></b><b class="ie9"></b></em>
<em class="twenty10"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff36"></b><b class="ff35"></b><b class="ie9"></b></em>
<em class="twenty09"><b class="ch2"></b><b class="sa32"></b><b class="op96"></b><b class="ff30"></b><b class="ff20"></b></em>
<em class="twenty08"><b class="sa31"></b><b class="op95"></b><b class="ff20"></b></em>
<i>Canvas</i></a>
<p id="ray-20"><a href="#ray-20">
<em class="twenty13"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ie10"></b><b class="ie9"></b><b class="ie8"></b></em>
<em class="twenty12"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ff36"></b><b class="ie10"></b><b class="ie9"></b><b class="ie8"></b></em>
<em class="twenty11"><b class="ch"></b><b class="sa"></b><b class="ff"></b><b class="ff36"></b><b class="ie9"></b><b class="ie8"></b><b class="ie7"></b></em>
<em class="twenty10"><b class="ch"></b><b class="sa"></b><b class="ff36"></b><b class="ff35"></b><b class="ie9"></b><b class="ie8"></b><b class="ie7"></b></em>
<em class="twenty09"><b class="ch2"></b><b class="ie8"></b><b class="ie7"></b></em>
<em class="twenty08"><b class="ie7"></b></em>
<i>Drag and Drop</i></a>
<p id="ray-21"><a href="#ray-21">
<em class="twenty13"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ie10"></b></em>
<em class="twenty12"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ff36"></b><b class="ie10"></b></em>
<em class="twenty11"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ff36"></b></em>
<em class="twenty10"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff36"></b><b class="ff35"></b></em>
<em class="twenty09"><b class="ch2"></b></em>
<em class="twenty08"></em>
<i>Web Workers</i></a>
<p id="ray-22"><a href="#ray-22">
<em class="twenty13"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ie10"></b></em>
<em class="twenty12"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ie10"></b></em>
<em class="twenty11"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b></em>
<em class="twenty10"><b class="ch"></b><b class="sa"></b><b class="op"></b></em>
<em class="twenty09"></em>
<em class="twenty08"></em>
<i>WebSocket</i></a>
<p id="ray-23"><a href="#ray-23">
<em class="twenty13"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ie10"></b></em>
<em class="twenty12"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ie10"></b></em>
<em class="twenty11"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b></em>
<em class="twenty10"><b class="ch"></b><b class="sa"></b><b class="op"></b></em>
<em class="twenty09"><b class="ch2"></b><b class="sa32"></b></em>
<em class="twenty08"></em>
<i>Forms</i></a>
<p id="ray-24"><a href="#ray-24">
<em class="twenty13"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ie10"></b></em>
<em class="twenty12"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ff36"></b><b class="ie10"></b></em>
<em class="twenty11"><b class="ch"></b><b class="op"></b><b class="ff"></b><b class="ff36"></b></em>
<em class="twenty10"><b class="ch"></b><b class="op"></b><b class="ff36"></b><b class="ff35"></b></em>
<em class="twenty09"><b class="op96"></b><b class="ff30"></b></em>
<em class="twenty08"><b class="op95"></b></em>
<i>SVG Filters</i></a>
<p id="ray-25"><a href="#ray-25">
<em class="twenty13"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ie10"></b><b class="ie9"></b></em>
<em class="twenty12"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ff36"></b><b class="ie10"></b><b class="ie9"></b></em>
<em class="twenty11"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ff36"></b><b class="ie9"></b></em>
<em class="twenty10"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff36"></b><b class="ff35"></b></em>
<em class="twenty09"></em>
<em class="twenty08"></em>
<i>Geolocation API</i></a>
<p id="ray-26"><a href="#ray-26">
<em class="twenty13"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ie10"></b><b class="ie9"></b></em>
<em class="twenty12"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ff36"></b><b class="ie10"></b><b class="ie9"></b></em>
<em class="twenty11"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ff36"></b><b class="ie9"></b></em>
<em class="twenty10"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff36"></b><b class="ff35"></b><b class="ie9"></b></em>
<em class="twenty09"><b class="ch2"></b><b class="sa32"></b><b class="op96"></b><b class="ff30"></b><b class="ff20"></b></em>
<em class="twenty08"><b class="sa31"></b><b class="op95"></b><b class="ff20"></b></em>
<i>SVG</i></a>
<p id="ray-27"><a href="#ray-27">
<em class="twenty13"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ie10"></b><b class="ie9"></b><b class="ie8"></b></em>
<em class="twenty12"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ff36"></b><b class="ie10"></b><b class="ie9"></b><b class="ie8"></b></em>
<em class="twenty11"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ff36"></b><b class="ie9"></b><b class="ie8"></b><b class="ie7"></b></em>
<em class="twenty10"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff36"></b><b class="ff35"></b><b class="ie9"></b><b class="ie8"></b><b class="ie7"></b><b class="ie6"></b></em>
<em class="twenty09"><b class="ch2"></b><b class="sa32"></b><b class="op96"></b><b class="ff30"></b><b class="ie8"></b><b class="ie7"></b><b class="ie6"></b></em>
<em class="twenty08"><b class="sa31"></b><b class="op95"></b><b class="ie7"></b><b class="ie6"></b></em>
<i>contentEditable</i></a>
<p id="ray-28"><a href="#ray-28">
<em class="twenty13"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ie10"></b><b class="ie9"></b><b class="ie8"></b></em>
<em class="twenty12"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ff36"></b><b class="ie10"></b><b class="ie9"></b><b class="ie8"></b></em>
<em class="twenty11"><b class="ch"></b><b class="sa"></b><b class="ff"></b><b class="ff36"></b><b class="ie9"></b><b class="ie8"></b></em>
<em class="twenty10"><b class="ch"></b><b class="sa"></b><b class="ff36"></b><b class="ff35"></b><b class="ie9"></b><b class="ie8"></b></em>
<em class="twenty09"><b class="ch2"></b><b class="ie8"></b></em>
<em class="twenty08"></em>
<i>CORS</i></a>
<p id="ray-29"><a href="#ray-29">
<em class="twenty13"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ie10"></b></em>
<em class="twenty12"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ff36"></b><b class="ie10"></b></em>
<em class="twenty11"><b class="ch"></b><b class="sa"></b><b class="op"></b><b class="ff"></b><b class="ff36"></b></em>
<em class="twenty10"><b class="ch"></b><b class="ff36"></b></em>
<em class="twenty09"></em>
<em class="twenty08"></em>
<i>HTML5 Parsing</i></a>
</div>
</div>
<footer>
<p>Maintained by <a href="http://profiles.google.com/myakura.web">Masataka Yakura</a> | <a href="http://nimbupani.com/notes-from-html5-readiness-hacking.html">About this site</a>
<p>Created by <a href="http://paulirish.com">Paul Irish</a> &amp; <a href="http://nimbupani.com">Divya Manian</a>
<p><small>Licensed under <a rel="license" href="http://opensource.org/licenses/MIT">MIT License</a></small>
<p><img id="html5logo" src="assets/HTML5_Logo.svg" width="80"><br><small>HTML5 Logo by <a href="http://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a></small>
</footer>
</div>
<!-- JavaScript -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="jquery-2.0.3.min.js"><\/script>')</script>
<script>
// e-egg.
jQuery('.css-chart').attr('tabindex', 0).on('wheel mousewheel keydown', function (e, delta) {
var newval,
num = $('div.css-chart p').css('padding-left');
var delta = delta || e.originalEvent.deltaY * -1 || e.originalEvent.wheelDelta;
if (delta > 0 || e.which == 38) {
newval = parseFloat(num) + 10 * (e.shiftKey ? .1 : 1);
} else if (delta < 0 || e.which == 40) {
newval = parseFloat(num) - 10 * (e.shiftKey ? .1 : 1);
} else {
return true;
}
$('style.padleft').remove();
$('<style class="padleft"> div.css-chart p { padding-left : '+newval+'px; } div.css-chart p i { width : '+2*newval+'px; } </style>').appendTo(document.body);
e.preventDefault();
});
jQuery('h3 a').click(function () {
$(this).siblings().addBack().removeClass('selected').end().end().addClass('selected');
$('#container').removeClass().addClass($(this).attr('class'));
return false;
}).last().click();
var linkref = [
null,
'http://dev.w3.org/csswg/css-backgrounds/#layering',
'http://www.w3.org/TR/css3-mediaqueries/',
'http://www.w3.org/TR/CSS21/tables.html',
'http://dev.w3.org/csswg/css-transitions/',
'http://dev.w3.org/csswg/css-fonts/',
'http://dev.w3.org/csswg/css-flexbox/',
'http://www.w3.org/TR/CSS21/generate.html',
'http://dev.w3.org/csswg/css-transforms/',
'http://dev.w3.org/csswg/css-animations/',
'http://dev.w3.org/csswg/css-backgrounds/#background-image',
'http://dev.w3.org/csswg/css-transforms/',
'http://www.ietf.org/rfc/rfc2397.txt',
'http://dvcs.w3.org/hg/IndexedDB/raw-file/tip/Overview.html',
'http://dev.w3.org/csswg/css-backgrounds/#the-border-radius',
'http://www.w3.org/TR/selectors-api/',
'http://www.whatwg.org/specs/web-apps/current-work/multipage/webstorage.html',
'http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#the-audio-element',
'http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#the-video-element',
'http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html',
'http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html',
'http://www.whatwg.org/specs/web-apps/current-work/multipage/workers.html',
'http://www.w3.org/TR/webdatabase/',
'http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html',
'http://www.w3.org/TR/SVG/filters.html',
'http://www.w3.org/TR/geolocation-API/',
'http://www.w3.org/TR/SVG/',
'http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#contenteditable',
'http://fetch.spec.whatwg.org/',
'http://www.whatwg.org/specs/web-apps/current-work/multipage/parsing.html'
];
jQuery('#body a').click(function (e) {
e.preventDefault();
window.location = linkref[jQuery(this).attr('href').split('-')[1]];
});
jQuery('.css-chart').delegate('a', 'click', function () {
var isTouch = 'ontouchstart' in document.documentElement;
if (isTouch) return true;
return false;
});
// ill mark the ghost browsers with (o) under them
// these are here only to make it easier to compare year to year.
var twenty13 = ['ie8','ie9','ie10','ff36','ff','op','sa','ch'].reverse();
// (o)
var twenty12 = ['ie8','ie9','ie10','ff36','ff','op','sa','ch'].reverse();
var twenty11 = ['ie7','ie8','ie9','ff36','ff','op','sa','ch'].reverse();
var twenty10 = ['ie6','ie7','ie8','ff35','ff36','op','sa','ch'].reverse();
var twenty09 = ['ie6','ie7','ie8','ff20','ff30','op96','sa32','ch2'].reverse();
var twenty08 = ['ie5','ie6','ie7','ff1','ff20','op95','sa31','chX'].reverse();
// (o) (o) (o)
// thx to deepak jois for all the smarts of this.
function syncPositions() {
var rays = document.querySelectorAll('.css-chart > p em');
for (var i = 0; i < rays.length; i++) {
var ray = rays[i];
for (var j = 0; j < window[ray.className].length; j++) {
var curr = ray.children[j];
if (curr && curr.className != window[ray.className][j]) {
var b = document.createElement('b');
b.className = 'ghostorunsupported';
ray.insertBefore(b, curr);
}
}
}
$('input:checkbox').change(function () {
$('.ghostorunsupported').toggle();
});
}
jQuery(function(){
$('<label><input type="checkbox">Fixed browser positions</label>')
.one('change',syncPositions).wrap('<p>').parent().prependTo('#footer');
});
</script>
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-15901079-1']);
_gaq.push(['_trackPageview']);
_gaq.push(['_setDomainName','none']);
_gaq.push(['_setAllowLinker','true']);
(function () {
var ga = document.createElement('script'),
elem = document.head || document.documentElement; // FUCK YAH UNIMPLEMENTED HTML5 HAWTNESS
ga.src = ('https:' == document.location.protocol ? 'https://ssl' :
'http://www') + '.google-analytics.com/ga.js';
ga.setAttribute('async', 'true');
setTimeout(function () { elem.insertBefore(ga, elem.firstChild); }, 100);
})();
</script>
</body>
</html>