Sooey

2013-06-08 23:53:45 +0900

Internet Explorer 9以下に存在する「1つのCSSファイルで認識されるセレクタは4,096個まで」という制限に突然引っかからないようにするための方策。

対策ではなく、突然の遭遇を予防する方策を色々と調べてみたところ、Atomic Spin - Atomic Object's Blog On Software Design & DevelopmentというブログにGetting Around IE's 4,096 CSS Rule Limitという記事があり、Railsアプリのfeature specで「セレクタ数が4,096個以下である」ことをテストするアプローチが紹介されていたので、それを導入することにしました(実際に導入する際は4,096の箇所にマージンを持たせておくとよさそう)。

CapybaraがHEAD要素内のLINK要素を参照できるようにするために、以下の設定が必要でした。

Capybara.ignore_hidden_elements = false

また、同記事のコメント欄で紹介されていたQuick lines to get the number of selectors in each CSS to make sure that IE is not breakingというJavaScriptも役に立ちそうです。

また、個人的にこの問題を回避する一番いい対策だと思うのは、4,096を超えないようにスタイルを制限する=サイトから無駄な機能を削り続ける、という視点を持ち続ける、ということかなと思います。