HTML5特性支持列表

不厚道地把外国的一个HTML5检测程序扒过来：

<table width="100%" class="info" style="display:none" cellspacing="0" cellpadding="8" border="0"><tr><td>
<tt>
              <dl>
<dt>STR=supports.style( css-feature );</dt>
                <dd>STR|BOL == "O"|"Ms"|"Khtml"|"Webkit"|"Moz"|"" + css-feature || false</dd>
              </dl>
<dl>
<dt>STR=supports.value( css-feature , css-value );</dt>
                <dd>STR|BOL == ("-" + "o"|"ms"|"khtml"|"webkit"|"moz" + "-" || "") + css-value || false</dd>
              </dl>
<dl>
<dt>BOL=supports.vml();</dt>
              </dl>
<dl>
<dt>BOL=supports.svg();</dt>
                <dt>BOL=supports.svg( svg-feature );</dt>
              </dl>
<dl>
<dt>BOL=supports.select();</dt>
              </dl>
<dl>
<dt>BOL=supports.window( html5-feature );</dt>
              </dl>
<dl>
<dt>BOL=supports.navig( special-feature );</dt>
              </dl>
<dl>
<dt>BOL=supports.attr( element-type, attribute-name );</dt>
              </dl>
<dl>
<dt>BOL=supports.func( element-type, function-name );</dt>
              </dl>
<dl>
<dt>BOL=supports.canvas( context );</dt>
                <dt>BOL=supports.canvas( context, canvas-feature );</dt>
              </dl>
<dl>
<dt>BOL=supports.input( input-type );</dt>
                <dt>BOL=supports.input( input-type, input-attribute );</dt>
              </dl>
<dl>
<dt>BOL=supports.event( event-name );</dt>
                <dt>BOL=supports.event( event-name, html-element );</dt>
              </dl>
<dl>
<dt>BOL=supports.element( element-type );</dt>
                <dt>BOL=supports.element( element-type, boolean );</dt>
              </dl>
<dl>
<dt>BOL=supports.audio();</dt>
                <dt>STR=supports.audio( mime-type, codec );</dt>
                <dd>STR|BOL == ("probably"|"maybe") || false</dd>
              </dl>
<dl>
<dt>BOL=supports.video();</dt>
                <dt>STR=supports.video( mime-type, codec );</dt>
                <dd>STR|BOL == ("probably"|"maybe") || false</dd>
              </dl>
<dl>
<dt>STR=supports.engine;</dt>
                <dd>STR == "O"|"Ms"|"Khtml"|"Webkit"|"Moz"|""</dd>
              </dl>
<dl>
<dt>FLT=supports.version;</dt>
                <dt>STR=supports.released;</dt>
              </dl></tt> <small>"<tt>css-feature</tt>" must be written in DOM syntax!
		The DOM syntax of CSS properties:
		Remove the hyphen and write the first letter of the word behind the hyphen in upper case.
		Example: <tt>background-color</tt> becomes <tt>backgroundColor</tt></small>
          </td></tr></table>
</div>

<!DOCTYPE html> 
 
<html manifest="/html5/src/slides_manifest.php"> 
<head> 
    <title>HTML5 演示</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    
    <script src="http://www.google.com/jsapi?key=ABQIAAAAGZS52uH39TNjCjLz-_MCpBS9ieF7McfPBdBLD0DK1lzJkbnz6hRwB-hdWKiRKoq7EkQVO1Jtsz2s4A"></script> 
    <script>google.load("maps", "2");</script> 
 
<script type="text/javascript"> 
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script> 
<script type="text/javascript"> 
try {
var pageTracker = _gat._getTracker("UA-8522782-1");
pageTracker._setDomainName(".directguo.com");
pageTracker._trackPageview();
} catch(err) {}</script> 
 
     
    
    <style> 
      .notes { display: none; }
      .stroke {
        -webkit-text-stroke-color: red;
        -webkit-text-stroke-width: 1px;
        -moz-text-stroke-color: red;
        -moz-text-stroke-width: 1px;
      }
      
      body {
        font: 14px "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
        background: #778;
        padding: 0;
        margin: 0;
        overflow: hidden;
      }
      
      div.presentation {
        position: absolute;
        width: 100%;
        display: table-cell;
        vertical-align: middle;
        height: 100%;
        background: inherit;
      }
      
      div.slides {
        width: 100%;
        height: 100%;
        overflow: hidden;
        left: 0;
        top: 0;
        position: absolute;
        display: block;  
        -webkit-transition: -webkit-transform 2s ease-in-out; 
        -moz-transition: -moz-transform 2s ease-in-out; 
      }
 
      div.slide {
        display: none;
        position: absolute;
        overflow: hidden;
        width: 900px;
        height: 700px;
        left: 50%;
        top: 50%;
        margin-top: -350px;
        background: -webkit-gradient(linear, left bottom, left top, from(#bbd), to(#fff));
        -webkit-transition: margin 0.25s ease-in-out; 
        background-color: #eee;
        background: -moz-linear-gradient(left bottom, #bbd, #fff);
        -moz-transition: margin 0.25s ease-in-out;         
      }
      
      div.slide:nth-child(even) {
        border-top-left-radius: 20px;
        -moz-border-radius-topleft: 20px;
        border-bottom-right-radius: 20px;
        -moz-border-radius-bottomright: 20px;
      }
      
      div.slide:nth-child(odd) {
        border-top-right-radius: 20px;
        -moz-border-radius-topright: 20px;
        border-bottom-left-radius: 20px;
        -moz-border-radius-bottomleft: 20px;
      }
 
      div.slide p {
        font-size: 20px;
      }
 
      section.intro p {
        font-size: 35px;
      }
 
      button {
        font-size: 20px;
      }
      
      .summary {
       font-size: 30px;
      }
 
      .bullets {
       font-size: 40px;
      }
      
      .slide.far-past {
        display: block;
        margin-left: -2400px;
      }
      
      .slide.past {
        display: block;
        margin-left: -1400px;
      }
      
      .slide.current {
        display: block;
        margin-left: -450px;
      }
      
      .slide.future {
        display: block;
        margin-left: 500px;
      }
      
      .slide.far-future {
        display: block;
        margin-left: 1500px;
      }
 
      body.three-d div.presentation {
        /*background: -webkit-gradient(radial, 50% 50%, 10, 50% 50%, 1000, from(#333), to(#000));        */        
      }
      
      body.three-d div.slides {
        -webkit-transform: translateX(50px) scale(0.8) rotateY(10deg);        
        -moz-transform: translateX(50px) scale(0.8) rotateY(10deg);        
      }
      
      
      /* Content */
      
      @font-face { font-family: 'Junction'; src: url(src/Junction02.otf); }
      @font-face { font-family: 'LeagueGothic'; src: url(src/LeagueGothic.otf); }
      
      header {
        font-family: 'Junction';
        font-weight: normal;
        font-size: 50px;
        letter-spacing: -.05em;
        color: white;        
        color: black;
        text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px;  
        position: absolute;
        left: 30px;
        top: 25px;
        margin: 0;
        padding: 0;
      }
      
      .intro h1 {
        color: black;
        padding: 0;
        margin: 0;
        letter-spacing: -2px;
        font-size: 96px;
      }
      
      .intro h2 {
        color: black;
        font-family: 'LeagueGothic';
        padding: 0;
        margin: 0;
        margin-top: -5px;
        font-size: 68px;
        letter-spacing: -1px;  
      }
      
      h1 {
        display: inline;
        font-size: 100%;
      	font-weight: normal;
      	padding: 0;
      	margin: 0;
      }
      
      h2 {
        font-family: 'Junction';
        color: black;
        font-size: 20px;
        margin-left: 20px;
        margin-top: 50px;
      }
      
      h2:first-child {
        margin-top: 0;
      }
 
      section {
        font-family: 'Junction';
        font-size: 50px;
        color: #3f3f3f;
        text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px;         
        margin-left: 30px;
        margin-right: 30px;
        margin-top: 100px;
        display: block;
        overflow: hidden;
      }
 
      a {
        color: inherit;
        display: inline-block;
        text-decoration: none;
        line-height: 110%;
        border-bottom: 2px solid #3f3f3f;
      }
 
      #wmap a {
        line-height: 100%;
        border-bottom: none;
      }
      
      section.left {
        float: left;
        width: 390px;
      }
      
      section.small {
        font-size: 24px;
      }
      
      section.small ul {
        margin: 0 0 0 15px;
        padding: 0;
      }
      
      section.small li {
        padding-bottom: 0;
      }
      
      h2 {
        padding: 0;
        margin: 15px 0 5px 0;
/*        font-family: GG240;*/
      }
      
      section.center {
        line-height: 180%;
        text-align: center;
        display: table-cell;
        vertical-align: middle;
        height: 700px;
        width: 900px;
      }
      
      pre {
        text-align: left;
        font-size: 16px;
        font-family: Monaco, Courier;
        padding-bottom: 10px;
        
        padding: 10px 20px;
        background: rgba(255, 0, 0, 0.05);
        border-radius: 8px;
        border: 1px solid rgba(255, 0, 0, 0.2);
      }
      .two-column {
        -webkit-column-count: 2;
        -moz-column-count: 2;
      }
      
      pre select {
        font-size: 16px;
        font-family: Monaco, Courier;
        border: 1px solid #c61800;        
      }
        
      input {
        font-size: 16px;
        font-family: Helvetica;
        padding: 3px;
      }
      input[type="range"] {
        width: 100%;
      }
      
      button {
        font-family: Verdana;
      }
      
      button.large {
        font-size: 32px;        
      }
        
      pre b {
        font-weight: normal;
        color: #c61800;
        text-shadow: #c61800 0 0 1px; 
        /*letter-spacing: -1px;*/
      }
      pre em {
        font-weight: normal;
        font-style: normal;
        color: #18a600;
        text-shadow: #18a600 0 0 1px; 
      }
      pre input[type="range"] {
        height: 6px;
        cursor: pointer;
        width: auto;
      }      
      example {
        font-size: 16px;
        display: block;
        padding: 10px 20px;
        color: black;
        background: rgba(255, 255, 255, 0.4);
        border-radius: 8px;
        margin-bottom: 10px;
        border: 1px solid rgba(0, 0, 0, 0.2);
      }
      video {
        border-radius: 8px;
        border: 1px solid rgba(0, 0, 0, 0.2);        
      }
      
      .css,
      .js,
      .html,
      .key {
        font-family: 'Junction';
        color: black;
        display: inline-block;
        padding: 6px 10px 3px 10px;
        font-size: 25px;
        line-height: 30px;
        text-shadow: none;
        letter-spacing: 0;
        bottom: 10px;
        position: relative;
        border-radius: 10px;
        -moz-border-radius: 10px;
        background: white;
        box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px; 
        -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px; 
        -moz-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px; 
      }
      :not(header) > .css,
      :not(header) > .js,
      :not(header) > .html,
      :not(header) > .key {
        margin: 0 5px;
        bottom: 4px;
      }
      
      .css {
        background: -webkit-gradient(linear, left top, left bottom, from(#ff4), to(#ffa));
        background-color: #ff4;
        background: -moz-linear-gradient(left top, #ff4, #ffa);        
      }
      .js {
        background: -webkit-gradient(linear, left top, left bottom, from(#4f4), to(#afa));        
        background-color: #4f4;
        background: -moz-linear-gradient(left top, #4f4, #afa);
      }
      .html {
        background: -webkit-gradient(linear, left top, left bottom, from(#e88), to(#fee));
        background-color: #e88;
        background: -moz-linear-gradient(left top, #e88, #fee);
      }
      
      li {
        list-style: none;
        padding: 10px 0;
      }
      
      .summary li::before, .bullets li::before {
        content: '· ';
      }
      
      info {
        display: block;
        font-size: 50%;
        text-align: center;
      }
      
    </style> 
  </head><body> 
    <div class="presentation"> 
      <div class="slides"> 
        <div class="slide"> 
          <section class="center intro"> 
            <p>本演示文档是一个HTML5的站点</p> 
            <p>按 <span class="key">→</span> 键 进入下一页	</p> 
            <p style="font-size: 25px">请使用<a href="http://www.google.com/chrome/">Google Chrome</a>浏览。在演示中遇到问题？阅读 <a href="disclaimer.html">免责声明</a></p> 
          </section> 
        </div> 
                
        <div class="slide"> 
          <section class="center intro"> 
            <hgroup> 
              <h1> 
                HTML5*
              </h1> 
              <h2> 
                Web 开发进入新时代
              </h2> 
            </hgroup> 
            <p style="font-size: 16px">*包括另外一些新一代网络开发技术</p> 
          </section> 
        </div>      
 
 
        <div class="slide"> 
          <header>Web技术大致的时间轴</header> 
          <section> 
            
            <style> 
              span.year {
                display: inline-block;
                text-align: right;
                width: 120px;
                letter-spacing: -2px;
                padding-right: 10px;
              }
              hr {
                visibility: hidden;
                padding: 0;
                margin: 0 0 -20px 0;
              }
            </style> 
            
            <ul> 
              <span class="year">1991</span> <span class="html">HTML</span> 
              <br /> 
              <span class="year">1994</span> <span class="html">HTML 2</span> 
              <br /> 
              <span class="year">1996</span> <span class="css">CSS 1</span> + <span class="js">JavaScript</span> 
              <br /> 
              <span class="year">1997</span> <span class="html">HTML 4</span> 
              <br /> 
              <span class="year">1998</span> <span class="css">CSS 2</span> 
              <br /> 
              <span class="year">2000</span> <span class="html">XHTML 1</span> 
              <br /> 
              <span class="year"><em class="stroke">2002</em></span> <span class="css">使用DIV+CSS进行网页布局</span> 
              <br /> 
              <span class="year"><em class="stroke">2005</em></span> <span class="js">AJAX</span> 
              <br /> 
              <span class="year"><em class="stroke">2009</em></span> <span class="html">HTML 5</span> 
              </ul>            
          </section> 
        </div> 
 
        
        <div class="slide"> 
          <section class="center"> 
            HTML5 ~=
            <span class="html">HTML</span> 
            +
            <span class="css">CSS</span> 
            +
            <span class="js">JS APIs</span>            
          </section> 
        </div> 
 
 
        <div class="slide"> 
          <section class="center"> 
            <h1> 
              <span class="js">JS APIs</span> 
            </h1> 
          </section> 
        </div> 
 
 
        <div class="slide"> 
          <header><span class='js'>JS APIs</span> <h1>新的选择器</h1></header> 
 
          <section> 
 
            <h2> 
              通过 class 定位元素 (DOM API)
            </h2> 
 
            <pre>var el = document.getElementById('section1');
el.focus();
 
var els = document.getElementsByTagName('div');
els[0].focus();
 
var els = document.<b>getElementsByClassName</b>('section');
els[0].focus();</pre> 
 
            <h2> 
              通过类似 css 选择器的语法定位元素 (Selectors API)
            </h2> 
 
            <pre>var els = document.<b>querySelectorAll</b>("ul li:nth-child(odd)");
var els = document.<b>querySelectorAll</b>("table.test > tr > td");
</pre> 
 
          </section> 
 
        </div>        
 
 
        <div class="slide"> 
          <style type="text/css" media="screen"> 
            #ta { width: 300px; height: 150px; }            
          </style> 
          <header><span class="js">JS APIs</span> <h1>本地储存 - Web Storage </h1></header> 
          <section> 
<pre> 
// use localStorage for persistent storage
// use sessionStorage for per tab storage
textarea.addEventListener('keyup', function () {
  window.<b>localStorage</b>['value'] = area.value;
  window.<b>localStorage</b>['timestamp'] = (new Date()).getTime();
}, false);
textarea.value = window.<b>localStorage</b>['value'];
</pre> 
<br /> 
<p>例子: 在客户端保存Email草稿 ,即使浏览器崩溃了数据也不会丢失。</p> 
<textarea ></textarea> 
 
<script type="text/javascript" charset="utf-8"> 
  var area = document.querySelector('#ta');
  // place content from previous edit
  if (!area.value) {
    area.value = window.localStorage.getItem('value');
  }
 
  // your content will be saved locally
  area.addEventListener('keyup', function () {
    window.localStorage.setItem('value', area.value);
    window.localStorage.setItem('timestamp', (new Date()).getTime());
  }, false);
 
  // updateLog();
  // setInterval(updateLog, 5000); // show time every 5 seconds
 
  function updateLog() {
    var delta = 0;
    if (window.localStorage.getItem('value')) {
      delta = ((new Date()).getTime() - (new Date()).setTime(window.localStorage.getItem('timestamp'))) / 1000;
      document.querySelector("#ta_log").innerHTML = 'last saved: ' + delta + 's ago';
    } 
    else {
      area.value = 'Type your text here...';
    }
  }
  
</script> 
          </section> 
        </div>        
 
 
 
        <div class="slide"> 
          <header><span class="js">JS APIs</span> <h1>本地数据库 - Web SQL Database</h1></header> 
          <section> 
<pre>var db = window.<b>openDatabase</b>("Database Name", "Database Version");
db.<b>transaction</b>(function(tx) {
  tx.<b>executeSql</b>(<em>"SELECT * FROM test"</em>, [], successCallback, errorCallback);
});
</pre> 
 
 
<div style="text-align: center"> 
<style> 
.record-list li:nth-child(odd) { background-color: #eee; }
.record-list li:nth-child(even) { background-color: #ddd; }
#db_results { font-size: 20px; max-height: 150px; overflow: auto; text-align: left; }
</style> 
<ul class="record-list" ></ul> 
<div ></div> 
<input type="text"  /> 
<button onclick="newRecord()">新建记录</button> 
<button onclick="createTable()">建立数据表</button> 
<button onclick="dropTable()">删除数据表</button> 
<p>Chrome中查看生成的数据库: 开发人员 > 开发人员工具 > Storage</p> 
</div> 
 
<script> 
var db;
var log = document.getElementById('db-log');
db = openDatabase("DBTest", "1.0", "HTML5 Database API example", 200000);
showRecords();
document.getElementById('db_results').addEventListener('click', function(e) { e.preventDefault(); }, false);
 
function onError(tx, error) {
  log.innerHTML += '<p>' + error.message + '</p>';
}
 
// select all records and display them
function showRecords() {
  document.getElementById('db_results').innerHTML = '';
  db.transaction(function(tx) {
    tx.executeSql("SELECT * FROM Table1Test", [], function(tx, result) {
      for (var i = 0, item = null; i < result.rows.length; i++) {
        item = result.rows.item(i);
        document.getElementById('db_results').innerHTML += 
            '<li><span contenteditable="true" onkeyup="updateRecord('+item['id']+', this)">'+
            item['text'] + '</span> <a href="#" onclick="deleteRecord('+item['id']+')">[Delete]</a></li>';
      }
    });
  });
}
 
function createTable() {
  db.transaction(function(tx) {
    tx.executeSql("CREATE TABLE Table1Test (id REAL UNIQUE, text TEXT)", [],
        function(tx) {  log.innerHTML = '<p>Table1Test created!</p>' },
        onError);
  });
}
 
// add record with random values
function newRecord() {
  var num = Math.round(Math.random() * 10000); // random data
  db.transaction(function(tx) {
    tx.executeSql("INSERT INTO Table1Test (id, text) VALUES (?, ?)", [num, document.querySelector('#todoitem').value],
        function(tx, result) {
          log.innerHTML = '';
          showRecords();
        }, 
        onError);
  });
}
 
function updateRecord(id, textEl) {
  db.transaction(function(tx) {
    tx.executeSql("UPDATE Table1Test SET text = ? WHERE id = ?", [textEl.innerHTML, id], null, onError);
  });
}
 
function deleteRecord(id) {
  db.transaction(function(tx) {
    tx.executeSql("DELETE FROM Table1Test WHERE id=?", [id],
        function(tx, result) { showRecords() }, 
        onError);
  });
}
 
// delete table from db
function dropTable() {
  db.transaction(function(tx) {
    tx.executeSql("DROP TABLE Table1Test", [],
        function(tx) { showRecords() }, 
        onError);
  });
}
 
</script> 
 
          </section> 
        </div> 
 
 
 
        <div class="slide"> 
          <header><span class="js">JS APIs</span> <h1>文件缓存 - Application Cache API</h1></header> 
          <section> 
<pre><html <b>manifest="cache-manifest"</b>>
window.<b>applicationCache</b>.addEventListener(<em>'checking'</em>, updateCacheStatus, false);
</pre> 
<pre>CACHE MANIFEST
 
# version 1
 
CACHE:
/html5/src/refresh.png
/html5/src/logic.js
/html5/src/style.css
/html5/src/background.png
</pre> 
 
 
            <p style="padding-top: 20px; text-align: center;">试试断开你的网络连接，然后刷新! <img src="/html5/src/refresh.png" /></p> 
          </section> 
        </div>        
 
 
 
        <div class="slide"> 
          <header><span class="js">JS APIs</span> <h1>让程序在后台运行 - Web Workers</h1></header> 
          <section> 
<pre>main.js:
  var worker = new <b>Worker</b>(‘extra_work.js');
  worker.<b>onmessage</b> = function (event) { alert(event.data); }; 
 
extra_work.js:
  // do some work; when done post message.
  <b>postMessage</b>(some_data);
</pre> 
        <script src="/html5/src/webworkers/points.js" type="text/javascript" charset="utf-8"></script> 
        <script src="/html5/src/webworkers/annealing.js" type="text/javascript" charset="utf-8"></script> 
 
 
 
        
                
        <div > 
          <div ></div> 
           
          <button >用Workers查询航线</button> 
          <button