Railsで開発するときにUIの実装時にIE8あたりで困ることないように備忘録としてまとめておく。
IE9まではファイルの読み込み限界値に気をつける。
IEだけなぜかCSSが適用されないとき、IEの以下の仕様が原因。
IE9までは
- 1スタイルシートにルールは4095まで
- 1スタイルシートに @importは31個まで
- @importの入れ子は4階層まで
ちなみにIE10からは、
- 1スタイルシートにルールは65534まで
- 1ドキュメントにスタイルシートは4095個まで
- @importの入れ子は4095階層まで
に変更されてる。
詳しくしらべると、asset pipelineがdebug modeのままだとSprocketsがファイルを連結しないため、大量のファイルを読込むことでIEの仕様に引っかかってました。
回避策として、
config.assets.debug = true
してやることで、Sprocketsがファイルを連結するので回避できるかもしれない。
IE9までは1ファイルあたりのcssのセレクター数の限界値に気をつける。
ファイル数の上限にあたらなくても、上記の通り1ファイルあたりのセレクターの限界値を超えるとCSSが無視されます。
4095ルールが原因の場合は、cssのリファクタリングを行うことや、
Asset Pipelineでファイルを別々にプリコンパイルする必要があります。
別々にプリコンパイルするには
config.assets.precompile += %w( hoge.css fuga.css )
としてやることで、application.cssのほかにhoge.cssやhuga.cssで指定したファイルをプリコンパイルできます。
(hoge.cssやfuga.cssは CSS manifest file です)
あとは、viewファイルで
<%= stylesheet_link_tag "application" %> <%= stylesheet_link_tag "hoge" %> <%= stylesheet_link_tag "fuga" %>
として、読込みます。
このほかにも、Blessを使うことで、CSSを分割できます。
この場合は@importでcssファイルを読込むようになります。
CSS3を使いたいときはCompassのCSS3 Pieを使うと便利
CSS3を使うことが多いのですが、IE9以下だとつかえなことも多い。そんなときにComass CSS3 Pieを使って回避すると便利。
Comass CSS3 Pieを使うとIEでも
- border-radius
- box-shadow
- border-image
- multi background
- rgba color
- linear gradients(background-colorのみ)
が使えるようになります。
ほかにもRGBAを使う場合は、compass-rgbapngを使うという手もあり。こちらは透過pngファイルを直接書き込むことでrgbaを使えるようにします。
ほかにも気がついたら追記する予定。