IE9でもそれなりに見えていたので全然気づいてなかったのですが、セレクタ数がとうの昔に4096個を超えていて崩れがあったので、対処した際のことを書いておこうと思います。
application.css.scssに定義されたセレクタ数を調べる
まずはセレクタ数が超えているかどうかを数えなければなりません。
参考URL
CSSのセレクタ数を調べる | </gecko>
ここに記述されていた、PHPで作られているセレクタカウンターを使いました。
ちなみに、JavaScriptのやつも試したのですが、それは数を少なく数えてしまってダメでした。
ここのフォームに対して、railsが作っているapplication.cssをアップロードしてみます。
私の場合は5000個近くなっていました…。
cssを分割するgem css_splitterの導入
最初は@importするcssを分けようとしたのですが、sassの変数の参照が切れたりして全然捗らなかったので、早々にやめてgemを探しました。cssを分割するgem、なんかあるだろうと思って調べたら、ありました。
今回はこれを使います。
インストール
まずはGemfileに追加。
gem 'css_splitter'
インストール。
bundle install
ファイルの編集
assets/stylesheets以下
application_split2.css.scssを作り、application.css.scssを読み込みます。
@import 'application';
config/application.rb
assets_precompileの対象に、application_split2.cssを追加します。
ここの拡張子はcss.scssではなく、cssのみです。お間違いなく。
config.assets.precompile += %w(application_split2.css)
レイアウトファイル(application.html.slimなど)
最後に、レイアウトファイルを編集します。
まずは以下の行を削除します。
= stylesheet_link_tag "application", media: "all"
次に、以下の行を追加します。
= split_stylesheet_link_tag "application", media: "all"
やっていることは、split_を追加しているだけです。
結果
こうすると、IE9以下の場合だけsplitしたcssを読み込もうとします。
以下、実際に出力されたhtmlです。
<link rel="stylesheet" media="all" href="/assets/application-20493ad8c8f67b5f167a6a711cc28574.css?body=1" />
<!--[if lte IE 9]>
<link rel="stylesheet" media="all" href="/assets/application_split2-419c245f7f2b698abe79ebfb002f23d7.css" debug="false" />
<![endif]-->
IE9でアクセスしたところ、レイアウト崩れが解消されたので、これでよしとします。