浏览器为webapp
虽然说最近，有的提案其实2010年就存在了。基本上是firefox, webkit在推动。主要如下：
calc: css3的函数，现在只有opera不支持。只要用于混合单位的计算，不能你手动转换。这在各种增量减量操作非常方便。
style scoped属性： 让这些样式只在某一个元素下有效，对模块化绝对有利。
DOM4的Custom Event，这个新浏览器基本都支持。其实较新的createEvent方法也是可以创建自定义事件，但那个initEvent非常蛋痛而已。可以看作是可以在文档树中上下传播的观察者。另一个观察者是Object.observe。
Shadow DOM，chrome20+支持，在一个元素节点中开辟一个超空间（文档碎片），里面添加的节点不会被外部的选择器所搜索到。如果其applyAuthorStyles 属性为false，还不受外部CSS影响。这用于做模板，切换卡，富文本编辑器绝对有用！
// https://github.com/RubyLouvre/mass-Framework/blob/master/css.js
var shadowRoot, shadowDoc, shadowBody, shadowWin, reuse
$.applyShadowDOM = function (callback) {
//用于提供一个沙箱环境,IE6-10,opera,safari,firefox使用iframe, chrome20+使用Shodow DOM
if (!shadowRoot) {
if (window.WebKitShadowRoot) { //如果支持WebKitShadowRoot
shadowRoot = new WebKitShadowRoot($.html);
shadowBody = document.createElement( "div" );
shadowRoot.appendChild(shadowBody);
} else {
shadowRoot = document.createElement( "iframe" );
}
(shadowBody || shadowRoot).style.cssText = "0px;height:0px;border:0 none;" ;
}
if (shadowRoot.nodeType == 1) {
$.html.appendChild(shadowRoot);
if (!reuse) { //firefox, safari, chrome不能重用shadowDoc,shadowWin
shadowDoc = shadowRoot.contentDocument || shadowRoot.contentWindow.document;
shadowWin = shadowDoc.defaultView || shadowDoc.parentWindow;
shadowDoc.write( "<!doctype html><html><body>" );
shadowDoc.close();
reuse = window.VBArray || window.opera; //opera9-12, ie6-10有效
}
callback(shadowWin, shadowDoc, shadowDoc.body);
$.html.removeChild(shadowRoot);
} else {
callback(window, document, shadowBody);
shadowBody.innerHTML = "" ;
}
}
template标签，可惜还没有浏览器实现，定义在template中的元素不会被渲染，图片等资源不会被加载，脚本不会被执行。现在许多JS前端模板都是使用MIME不被认识的script标签作容器。有更语义化的容器用当然受欢迎！
< div >
< img src = "" >
< div class = "comment" ></ div >
…
</ div >
decorator标签，与template标签， style scoped配合使用，用于重写现有的标签，让它表现为一个复杂的组件。
< decorator id = "fade-to-white" >
< template >
< div style = "position: relative;" >
< style scoped>
#fog {
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 5em;
background: linear-gradient(
bottom, white 0%, rgba(255, 255, 255, 0) 100%);
}
</ style >
< content ></ content >
< div id = "fog" ></ div >
</ div >
</ template >
</ decorator >
然后你在页面有一个DIV.aaa，这样定义它的样式。那么它的结构变成decorator那样展示了。这对于加载什么日历，取色器，滑动条等组件非常诱人！
.aaa {
decorator: url(#fade-to-white);
font-variant: small-caps;
}
此外，还有自定义标签，其实与上面的差不多，只不过decorator是重写现存的某个标签的结构与样式，这个是应用一个新标签上。但decorator标签还没有实现出来，这个更不用说。不过可以想象，未来两年，什么圆形，三角标签会满地跑！
标签: HTML5
http://www.cnblogs.com/rubylouvre/archive/2013/01/30/2883753.html
作者： Leo_wl
出处： http://www.cnblogs.com/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息