Skip to content
This repository

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

file 502 lines (454 sloc) 33.018 kb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502
<!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>
Something went wrong with that request. Please try again.