【CSS】ルールが4095個を超えるとIEで無視される

Tweet

Category css, html5 2012/03/06

問題

IEでスタイルシートが効かなくなっちゃったんだけど。　それも中途半端に。　あれれれれ？

答え

IEにはこんな仕様があるそうだ。

Internet Explorer 6 to 9.（IE6から9）

A sheet may contain up to 4095 rules（1スタイルシートにルールは4095まで）
A sheet may @import up to 31 sheets（1スタイルシートに @importは31個まで）
@import nesting supports up to 4 levels deep（@importの入れ子は4階層まで）

Internet Explorer 10

A sheet may contain up to 65534 rules（1スタイルシートにルールは65534 まで）
A document may use up to 4095 stylesheets（1ドキュメントにスタイルシートは4095個まで）
@import nesting is limited to 4095 levels (due to the 4095 stylesheet limit)（@importの入れ子は4095階層まで）

@importの制限に引っかかるのは通常ありえないと思うが、最近流行のSCSSやLESSでは気づかないうちに4095個のルール数の制限を越えることがある。

参考

4096番目のルールがIEで適用されなくて、IEで見たときとIE以外で見たときで色が違うデモ。

https://www.softel.co.jp/blogs/tech/archives/demo/d20120308

証言

http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/internet-explorer-stylesheet-rule-selector-import-sheet-limit-maximum.aspx

※追記：ルールの数と書いているが、どうやらセレクタの数らしいとの情報あり。