浏览器为webapp

虽然说最近,有的提案其实2010年就存在了。基本上是firefox, webkit在推动。主要如下:

calc: css3的函数,现在只有opera不支持。只要用于混合单位的计算,不能你手动转换。这在各种增量减量操作非常方便。

style scoped属性: 让这些样式只在某一个元素下有效,对模块化绝对有利。

DOM4的Custom Event,这个新浏览器基本都支持。其实较新的createEvent方法也是可以创建自定义事件,但那个initEvent非常蛋痛而已。可以看作是可以在文档树中上下传播的观察者。另一个观察者是Object.observe。

Shadow DOM,chrome20+支持,在一个元素节点中开辟一个超空间(文档碎片),里面添加的节点不会被外部的选择器所搜索到。如果其applyAuthorStyles 属性为false,还不受外部CSS影响。这用于做模板,切换卡,富文本编辑器绝对有用!

  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 = "width: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

你可能感兴趣的:(html5)