CSSチームが運営するHTML5・CSS3情報サイト

HTML5 GOGO

ボーズ・オンラインストア

Baba

HTML5の内容ではありませんが、IEの仕様でどうしても確認しておきたいものがありましたので検証してみました。

IEの気になる仕様は下記のスタイルシートの制限についてです。

  1. (1) IE9以前で1つのCSSファイル、または1つのstyleタグ内のセレクタは4095個目までしか適応されない。
  2. (2) IE9以前でCSSファイル、またはstyleタグは31個目までしか適応されない。

Microsoft サポート
http://support.microsoft.com/kb/262161/ja
http://support.microsoft.com/kb/262161/en-us

普通にコーディングする分には問題無いように思いますが、SCSSなどを使用した際にうっかり4096個以上のセレクタが指定されてしまう可能性が無いとも言えないので軽視できません。

検証1

早速(1) 「IE9以前で1つのCSSファイル、または1つのstyleタグ内のセレクタは4095個目までしか適応されない。」について検証用のページを用意しました。

HTML

<div class="sample1">1</div>
<div class="sample2">2</div>
<div class="sample3">3</div>
<div class="sample4">4</div>
<div class="sample5">5</div>
~~
<div class="sample4500">4500</div>

CSS

div {
	float: left;
	padding: 2px 3px;
	border: 1px solid #000;
	color: #C00;
}
/* 数がずれてしまわないように上記のdivタグ全体へのスタイルは1つのstyleタグ内に記述 */

.sample1 {background-color: #06C;color: #FFF;}
.sample2 {background-color: #06C;color: #FFF;}
.sample3 {background-color: #06C;color: #FFF;}
.sample4 {background-color: #06C;color: #FFF;}
.sample5 {background-color: #06C;color: #FFF;}
~~
.sample4500 {background-color: #06C;color: #FFF;}

サンプルページ

IE9

Chrome18

IE9とChrome18で確認したところ IE9では信じられないことに4096以降はスタイルが適応されていませんでした。

検証2

次に(2)「IE9以前でCSSファイル、またはstyleタグは31個目までしか適応されない。」を検証すべく、下記のようなページを用意しました。

  • sample1.css ~ sample32.cssの32ファイルを読み込む
  • sample1.css にはdivタグ全体へのスタイルのみ記述
  • sample2.css ~ sample32.css には.sample1 ~ .sample126945を4095個ずつに分けて記述

※注意 – 読み込みにかなり時間のかかるページとなっているため、興味のある方以外は開かないでください。ブラウザがフリーズ・クラッシュしてしまう可能性があります。

かなり重たいサンプルページ

styleタグに1セレクタずつ記述した軽いサンプルページはこちら

IE9

Firefox12

予想どおり、IE9ではsample32.cssは適応されず、sample31.cssの.sample122850までが適応されました。

軽いサンプルでも、31個目のstyleタグの内容、.sample30まで適応されていることを確認できました。

まとめ

IE9以前では1つのCSSファイル または1つのstyleタグ内のセレクタは4095個目までしか適応されず、CSSファイルまたはstyleタグは31個目までしか適応されないというスタイルシートの制限が存在するため SCSSなどでCSSを生成する際は注意が必要です。

また、IE10では制限が緩和されているようなのでIE9以前という書き方をさせていただきました。
※IE10での動作は未確認です。

参考
http://podlipensky.com/post/2011/09/01/Stylesheet-limits-in-IE.aspx

Subscribe:
pagetop