雖然說最近，有的提案其實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 = "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標簽還沒有實現出來，這個更不用說。不過可以想象，未來兩年，什么圓形，三角標簽會滿地跑！