Rails3.x開発時にIEで困らないためのメモ

memo

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/environments/development.rb の設定を変更

1
config.assets.debug = true

してやることで、Sprocketsがファイルを連結するので回避できるかもしれない。

IE9までは1ファイルあたりのcssのセレクター数の限界値に気をつける。

ファイル数の上限にあたらなくても、上記の通り１ファイルあたりのセレクターの限界値を超えるとCSSが無視されます。
4095ルールが原因の場合は、cssのリファクタリングを行うことや、
Asset Pipelineでファイルを別々にプリコンパイルする必要があります。

別々にプリコンパイルするには
/config/environments/production.rb の設定を

1
config.assets.precompile += %w( hoge.css fuga.css )

としてやることで、application.cssのほかにhoge.cssやhuga.cssで指定したファイルをプリコンパイルできます。
(hoge.cssやfuga.cssは CSS manifest file です)

あとは、viewファイルで

1
2
3
<%= 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を使えるようにします。

ほかにも気がついたら追記する予定。

Comments