HTML5少有人知的酷特性
- MapleShadow - 黑客志Google的工程师Eric Bidelman (G+, @ebidel) 做了一个演示幻灯,对Chrome中最新的那些很少人知道,但都非常酷也非常有用的HTML5特性进行了介绍,内容涵盖语义标签,核心JS等等,借助这些特性,可能以前需要你花很大力气才能实现的功能,现在只需几分钟就可轻松搞定. Element.classList,获取元素的class并进行操作.
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操作
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件事 |
无觅 |