IEのCSSスタイルシート制限の分析と解決策_体験交流

HTML ドキュメントを CSS に関連付ける一般的な方法は 4 つあります。

リンク タグを使用する


スタイル要素を使用します


style 属性を使用したインライン スタイル (インライン スタイル)

これは赤色のテキストです

実際のアプリケーションでは、style 属性を使用したインライン スタイルの使用は非推奨です。XHTML1.1 では非推奨として標準化されています。理由は非常に単純です。この方法は font タグより優れたものではなく、タグの機能を弱めます。 CSS の一元管理、文書全体の外観の利点。最初の 3 つの方法はリンク タグとスタイル タグを使用し、IE (IE6、IE7、IE8 ベータ 1 を含む) では次の制限があります。

ドキュメント内の最初の 31 個のリンク タグまたはスタイル タグに関連付けられた CSS のみが、適用されます。

32番目以降、タグに関連付けられたCSSが無効になります。 IE の公式ドキュメントには、HTML ページの最初の 30 個のスタイル タグ以降のすべてのスタイル タグが Internet Explorer に適用されないという記述にも、.xsl .xml ファイルの使用を含め、この制限があることが記載されています。しかし、数量を間違えて書いてしまったようです。 IE でご覧ください:

例 1: 34 個のスタイル タグが同時に適用されます
例 2: 1 個のスタイル タグと 34 個のリンク タグが同時に適用されます
スタイル タグのみ最初の 31 個の @import 命令があり、効果的に適用されます。

32 番目の @import ディレクティブ以降は無視します。以下を参照してください:

例 3: style タグ内で @import ディレクティブを 34 回使用する。

CSS ファイルの最初の 31 個の @import ディレクティブのみが効果的に適用されます。

31 番目の @import ディレクティブ以降は無視します。参照してください:

例 4: link タグを使用して、@import ディレクティブを使用する CSS ファイルを 34 回導入します
例 5: style タグを使用して、@import ディレクティブを使用する CSS ファイルを導入します34 回
例 6: link タグと style タグを使用して、@import ディレクティブを 31 回以上使用する CSS ファイルを導入します。
CSS ファイルは 288kb を超えることはできません。

このニュースは、Internet Explorer の CSS ファイル サイズ制限に関するものです。

@import ディレクティブのカスケード制限は 4 レイヤーを超えることはできません。

IE で @import ディレクティブを介して CSS ファイルを導入する場合、5 番目のレイヤーは無効になります。この制限は、@import ルールによるカスケード制限から取得されます。実際、ブラウザのマルチレベルのネストのサポートが不完全なため、CSS ファイルを導入するために @import ディレクティブを使用する必要がある場合でも、2 レベルを超えないようにしてください。

CSS に関する IE の制限は、ほとんどの場合は発生しません。最適な解決策が見つかった場合でも、CSS ファイルと応答タグを手動またはバックエンド プログラムを通じて結合する必要があります。http の数を最小限に抑える必要があります。リクエストは、ページ レンダリングを最適化するための最初の原則です。

IE では、インライン スタイルと埋め込みスタイルの値は、document.styleSheets オブジェクト (Firefox、Opera9、Safari3.1 でサポート) を通じて変更できます。このオブジェクトは、ドキュメントにスタイル要素またはリンク要素が含まれている場合にのみ使用できます。実際、document.styleSheets.length を使用すると、IE での最大値が 31 であることがわかります。次の例では、JavaScript を使用してリンク タグとスタイル タグをマージし、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 //document.styleSheets.cssText は IE でのみサポートされています
return;
}
var aCssText = [],aCloneLink = [] ;
//スタイルをスタイルタグに保存し、タグを削除しますが、最初のスタイルは保持します
//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); 配列 aCloneLink にコピーされます
for(var i=aLink.length-1;i>-1;–i){
var o = aLink[i];
if(o.getAttribute && o.getAttribute('rel')==='stylesheet'){
aCloneLink .push(o.cloneNode(true));
。RemoveChild（o）;
;せいぜい2つのスタイルタグのみが残っています
//リンクノードを再追加してスタイルシート属性をアクティブにして、（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 を参照してください。改善できる領域は次のとおりです:

メディア属性は考慮されません。複数のメディアがある場合は、個別にマージする必要があります。もちろん、リンク タグの rel="alternate stylesheet" は考慮されません。「影響は生じます。しかし、@media ディレクティブを通じて同じファイルに対応するスタイルを記述することをお勧めします。そうすることで、少なくとも HTTP 接続の数を減らすことができます」
@import ディレクティブの 31 回制限の問題は解決されません。実際には、href 値がアクティブになる他の値を抽出できます。ただし、実際のアプリケーションでは、link タグを使用して@import ディレクティブを置き換えます。これは、IE の @import ディレクティブは、ドキュメントの下部にリンク タグを記述することと同等であり、IE5/6 のページが即座に読み込まれるためです。スタイルが設定されていない問題、学名は「Flash」です「スタイルのないコンテンツのフラッシュ」（FOUC と略称）のバグ。もちろん、このバグはドキュメントのヘッダーにリンクまたはスクリプト要素を配置することで回避できます。
一般的に言えば、「スタイルのないコンテンツのフラッシュ」（FOUC と略されます）が多数存在します。 ) ページにバグがあります。同じリンク タグやスタイル タグが多数ある可能性があります。コードの量を減らすために、aCssText をマージする前に同じ項目を削除できます。
DOM 内の既存のスタイル要素を使用しない場合cssText 属性を通じてスタイル コードを直接追加しますが、新しいスタイル要素を追加するには、必ず最初に新しいスタイル要素を DOM に追加してから、cssText 属性を通じてスタイル コードを追加してください。逆に、追加されるスタイル コードは、追加される前に IE6 のスタイル パーサーによって解析されるようです。そのため、!imporant も Hack も無効になります。例 7 を参照してください。新しいスタイル要素を追加して新しいスタイルを追加することは、IE の制限に簡単に到達する可能性があるため、お勧めできません。