ブラウザはwebapp
6640 ワード
最近といっても、ある提案は実は2010年に存在しています.基本的にfirefoxで、webkitが推進しています.主に次のとおりです.
calc:css 3の関数は、operaのみでサポートされていません.混合単位の計算に使用する限り、手動で変換することはできません.これは各種の増分減量操作に非常に便利である.
style scopedプロパティ:これらのスタイルを1つの要素でのみ有効にすることは、モジュール化に絶対的に有利です.
DOM 4のCustom Event、この新しいブラウザは基本的にサポートされています.実は比較的に新しいcreateEventの方法もカスタムイベントを作成することができますが、そのinitEventはとても卵が痛いだけです.ドキュメントツリーに上下に伝播できる観察者と見なすことができる.もう一人の観察者はObjectですobserve.
Shadow DOM、chrome 20+は、要素ノードに超空間(ドキュメントの破片)を開き、追加されたノードは外部のセレクタで検索されません.applyAuthorStylesプロパティがfalseの場合、外部CSSの影響を受けません.これはテンプレート、切り替えカード、リッチテキストエディタに使用するのに絶対に役立ちます!
templateラベルは、残念ながらブラウザでは実装されていません.templateで定義された要素はレンダリングされず、画像などのリソースはロードされず、スクリプトは実行されません.現在、多くのJSフロントエンドテンプレートは、MIMEが知られていないscriptラベルをコンテナとして使用しています.もっと語義化された容器用があるのはもちろん人気!
decoratorラベルは、templateラベル、style scopedと組み合わせて使用され、既存のラベルを書き換え、複雑なコンポーネントとして表現するために使用されます.
ページにDIV.aaaがあり、スタイルを定義します.ではその構造はdecoratorのように展示されています.カレンダーやカラーリーダー、スライドバーなどのコンポーネントをロードするのにとても魅力的です!
また、カスタムラベルもありますが、実際には上との差は多くありませんが、decoratorは既存のラベルの構造とスタイルを書き換えており、これは新しいラベルを適用しています.しかしdecoratorラベルはまだ実現されていません.これは言うまでもありません.しかし、今後2年間、どんな円形、三角ラベルがいっぱい走るか想像できます.
ラベル:
HTML5
http://www.cnblogs.com/rubylouvre/archive/2013/01/30/2883753.html
calc:css 3の関数は、operaのみでサポートされていません.混合単位の計算に使用する限り、手動で変換することはできません.これは各種の増分減量操作に非常に便利である.
style scopedプロパティ:これらのスタイルを1つの要素でのみ有効にすることは、モジュール化に絶対的に有利です.
DOM 4のCustom Event、この新しいブラウザは基本的にサポートされています.実は比較的に新しいcreateEventの方法もカスタムイベントを作成することができますが、そのinitEventはとても卵が痛いだけです.ドキュメントツリーに上下に伝播できる観察者と見なすことができる.もう一人の観察者はObjectですobserve.
Shadow DOM、chrome 20+は、要素ノードに超空間(ドキュメントの破片)を開き、追加されたノードは外部のセレクタで検索されません.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ラベルはまだ実現されていません.これは言うまでもありません.しかし、今後2年間、どんな円形、三角ラベルがいっぱい走るか想像できます.
ラベル:
HTML5
http://www.cnblogs.com/rubylouvre/archive/2013/01/30/2883753.html