HTML5少有人知的酷特性

by yuanyi

at 2011-07-21 15:04:30

original http://heikezhi.com/2011/07/20/html5-whats-new/

Google的工程师Eric Bidelman (G+, @ebidel) 做了一个演示幻灯，对Chrome中最新的那些很少人知道，但都非常酷也非常有用的HTML5特性进行了介绍，内容涵盖语义标签，核心JS等等，借助这些特性，可能以前需要你花很大力气才能实现的功能，现在只需几分钟就可轻松搞定。

下面是内容摘要：

1. <details>/<summary>


Information

 If your browser supports this element, it should allow you to expand and collapse these details.

效果：

Information

If your browser supports this element, it should allow you to expand and collapse these details.

2. <output>

动态计算结果：

<form id="output-example" oninput="result.value=a.valueAsNumber + b.valueAsNumber">
  0
100
  +

  = 47
</form>

3.<mark>

Lorem ipsum dolor, consectetur adipiscing...

效果：

Lorem ipsum dolor, consectetur adipiscing…

4. 语音输入

效果：

5. Element操作

Element.classList，获取元素的class并进行操作
Element.dataSet，获取所有元素的数据属性
Element.matchSelector，判断元素是否匹配某个选择器

6. Window.crypto，伪随机数生成

// Fill typed array with 5 8-bit unsigned random integers.
var uInt8Arr = new Uint8Array(5);
window.crypto.getRandomValues(uInt8Arr);

7. Window.performance，性能检测

8. 页面预渲染及可见性（可参看黑客志之前的文章介绍）

document.addEventListener('visibilitychange', function(e) {
  console.log('hidden:' + document.hidden, 'state:' + document.visibilityState)
}, false);

9. navigator.online，判断是否有网络连接

10. window.onerror，全局异常捕获

window.onerror = function(msg, url, line) {
  // Track JS errors in GA.
  _gaq.push(['_trackEvent', 'Error Log', msg, url + '_' + line]);
  // Log to your server.
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/jserror', true);
  xhr.send('Line ' + num + ': (' + url + ') - ' + msg);
  return false;
  // false prevents default error handling.
};

11. 接受文件粘贴

document.body.onpaste = function(e) {
  var items = e.clipboardData.items;
  for (var i = 0; i < items.length; ++i) {
    if (items[i].kind == 'file' && items[i].type == 'image/png') {
      var blob = items[i].getAsFile();
      var img = document.createElement('img');
      img.src = window.URL.createObjectURL(blob);
      document.body.appendChild(img);
    }
  }
};

12. 自定义协议支持

navigator.registerProtocolHandler( 'web+myscheme', 'http://example.com/handler?q=%s', 'My App');

最后是对音频API的介绍，可以实现定时回放，音频分析及合成等功能，不过这个要等Chrome 14出来。

想和我们一道传播黑客精神？快来加入吧！

无觅猜您也喜欢：
HTML5可见性API以及页面预渲染	5条针对Honeycomb的UI设计建议	为什么我总在早晨5点醒过来	关于设计师，企业家应该知道的5件事
无觅

Google Reader