search
LoginSignup
12

More than 5 years have passed since last update.

posted at

updated at

Railsでcssのセレクタ数が4096を超えた場合の対処方法

IE9でもそれなりに見えていたので全然気づいてなかったのですが、セレクタ数がとうの昔に4096個を超えていて崩れがあったので、対処した際のことを書いておこうと思います。

application.css.scssに定義されたセレクタ数を調べる

まずはセレクタ数が超えているかどうかを数えなければなりません。

参考URL
CSSのセレクタ数を調べる | </gecko>

ここに記述されていた、PHPで作られているセレクタカウンターを使いました。
ちなみに、JavaScriptのやつも試したのですが、それは数を少なく数えてしまってダメでした。

ここのフォームに対して、railsが作っているapplication.cssをアップロードしてみます。

私の場合は5000個近くなっていました…。

cssを分割するgem css_splitterの導入

最初は@importするcssを分けようとしたのですが、sassの変数の参照が切れたりして全然捗らなかったので、早々にやめてgemを探しました。cssを分割するgem、なんかあるだろうと思って調べたら、ありました。

github: zweilove/css_splitter

今回はこれを使います。

インストール

まずはGemfileに追加。

Gemfile
gem 'css_splitter'

インストール。

bundle install

ファイルの編集

assets/stylesheets以下

application_split2.css.scssを作り、application.css.scssを読み込みます。

application_split2.css.scss
@import 'application';

config/application.rb

assets_precompileの対象に、application_split2.cssを追加します。
ここの拡張子はcss.scssではなく、cssのみです。お間違いなく。

config/application.rb
config.assets.precompile += %w(application_split2.css)

レイアウトファイル(application.html.slimなど)

最後に、レイアウトファイルを編集します。

まずは以下の行を削除します。

views/layouts/application.html.slim
= stylesheet_link_tag "application", media: "all"

次に、以下の行を追加します。

views/layouts/application.html.slim
= 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でアクセスしたところ、レイアウト崩れが解消されたので、これでよしとします。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
12