IEのCSSスタイルテーブルに対する制限と解決策

4751 ワード

もっと読む
HTMLドキュメントとCSSとの関連には4つの方法があります.
  • は、linkタグ
  • を使用する.
  • .style要素
    を使用する
  • .
  • @importコマンド
  • を使用します.
  • style属性を使用したインライン・スタイル

  • 実際のアプリケーションでは、style属性を使用したインラインスタイルは推奨されていません.XHTML 1.1は、その標準を使用することを推奨していません.その理由は簡単です.このような方法は、fontタグよりも多少強くなく、CSS集中制御全体のドキュメントの外観の利点を弱めています.最初の3つの方法は、IE 6、IE 7、およびIE 8 beta 1を含むlinkタグおよびスタイリングマークを利用する.
  • ドキュメントには、前31のlinkまたはstyleタグが関連付けられたCSSのみが適用されます.32番目からマーク関連CSSは無効になります.IEの公式文書All style tags after the first 30 style tags on HTML page are not appied in Internet Explorerもこの制限に言及しています.使用中、xslの.xmlファイルもこの制限があります.しかし、数を間違えたようです.IEで見てください.例1:34のstyleタグと同時に適用例2:1のstyleタグと34のlinkタグが同時に適用されます.
  • のstyleフラグは前の31回だけ@importコマンド有効アプリケーションです.32番目@importコマンドから無視します.参照してください.例3:styleタグの中で34回@importコマンドを使用します.
  • cssファイルは前の31回@import命令のみ有効に適用されます.31番目@importコマンドから無視します.34回の@importコマンドを使用したcssファイル例5をlinkタグで導入した:34回の@importコマンドを使用したcssファイル例6:それぞれ31回の@importコマンドを使用したcssファイル
  • をステッカーで導入した.
  • CSSファイルの288 kbを超えてはいけませんか?このニュースはInternet Explorer CSS File Size Limitから来ました.
  • @import指令下の層の畳み制限が4層を超えてはいけません.IEの下で@import命令によってcssファイルを導入すると、第5層は無効になります.この制限はCascade limit via@import ruleから来ます.実際には、ブラウザの多層ネストへのサポートが不完全であるため、やむを得ず@importコマンドを使ってCSSファイルを導入しても、2層を超えてはいけない.
  • IEのCSSに対する制限は、ほとんどの場合、出会うことはない.最良の解決策があっても、手動またはバックエンドプログラムを介してCSSファイルと応答のタグを統合するべきであり、最小のhttp要求数は、ページプレゼンテーションを最適化する第一の原則である.
    IEでは、インラインおよび埋め込みスタイルの値は、document.styleSheetsオブジェクト(Firefox、Opera 9およびSafari 3.1の両方によってサポートされている)によって修正され得る.このオブジェクトは、文書がstyleまたはlink要素を含む場合にのみ使用でき、実用的なdocument.styleSheets.lengthで、IEの下でこの値が最大31であることがわかる.以下は、Javascriptを利用して、linkおよびstyleタグを結合して、IEの下の制限を解決するためである.
    var fnMergeStyleSheet = function(){
    if(!document.styleSheets){
        return;
    }
    var aSheet = document.styleSheets,
        aStyle = document.getElementsByTagName('style'),
        aLink  = document.getElementsByTagName('link');
        if(aStyle.length + aLink.length < 32 || !aSheet[0].cssText){
            //document.styleSheets.cssText   IE   
            return;
        }
        var aCssText = [],aCloneLink = [];
        // style        ,       ,      
        //   getElementsByTagName      nodeList,          
        for(var i=aStyle.length-1;i>-1;--i){
            var o = aStyle[i];
                aCssText.push(o.innerHTML);
                if(i>0){
                    o.parentNode.removeChild(o);
                }
        }
        // IE    31   link       styleSheet.cssText    
        //            aCloneLink 
        for(var i=aLink.length-1;i>-1;--i){
           var o = aLink[i];
              if(o.getAttribute && o.getAttribute('rel')==='stylesheet'){
                   if(o.styleSheet){
                      aCssText.push(o.styleSheet.cssText);
                   }else{
                       aCloneLink.push(o.cloneNode(true));
                   }
                   if(i>0){
                       o.parentNode.removeChild(o);
                   }
              }
        }
        var oHead = document.getElementsByTagName('head')[0];
        //       , 31 link  style       2 
        //      link        styleSheet  ,      
        for(var i = aCloneLink.length-1;i>-1;--i){
            var o = aCloneLink[i];
            oHead.appendChild(o);
            aCssText.push(o.styleSheet.cssText);
            oHead.removeChild(o);
        }
       //               
        aSheet[0].cssText += aCssText.join('');
    }
    上には簡単で粗い解決策しかありません.デモは例1と例2を見てください.改善できるところはまだあります.
  • は、mediaという属性を考慮していません.複数のmediaが別々に結合されるべきであれば、linkというマークのrel="alternate stylesheet"による影響はもちろん考慮されていません.しかし、@mediaの命令により、対応する様式を同じファイルに書くことを提案します.少なくともHTTP接続数を減らすことができます.
  • @importコマンド31回の制限が解決されていません.実は、href値を抽出して、活性化処理を行うことができます.しかし、実際のアプリケーションでは、@importコマンドの代わりにlinkタグを使用することを提案しています.これは、IE 5/6ページの読み込み時に、リンクをドキュメントの底にマークするのと相当する命令であるため、「Flash of UnistylodContot」(FOUCと略称する)というbugを学ぶことができます.もちろん、このbugは文書の先頭にlinkまたはscript要素を置くことによって避けられます.
  • 一般的には、ページのすべてが大量に@importまたはlinkタグを持っている可能性が高いです.多くは同じです.aCssTextを合併する前に同じ項目を削除して、コード量を減らすことができます.