RailsでIE9以下のCSSセレクタの上限値4096対策

IE9以下にはCSSファイルのセレクタ数に制限があって、制限値を超えた時にレイアウトが崩れてしまう。

セレクタ数のチェック

以下のスクリプトでセレクタ数をチェックできるが、厳密に4096を越えてなくても崩れるときがあった。

function countCSSRules() {
  var total_count = 0;
  var results = '', log = '';
  if (!document.styleSheets) {
    return;
  }
  for (var i = 0; i < document.styleSheets.length; i++) {
    countSheet(document.styleSheets[i]);
  }
  function countSheet(sheet) {
    var count = 0;
    if (sheet && sheet.cssRules) {
      for (var j = 0, l = sheet.cssRules.length; j < l; j++) {
        if( !sheet.cssRules[j].selectorText ) {
          continue;
        }
        count += sheet.cssRules[j].selectorText.split(',').length;
      }

      log += '\nFile: ' + (sheet.href ? sheet.href : 'inline <style> tag');
      log += '\nRules: ' + sheet.cssRules.length;
      log += '\nSelectors: ' + count;
      log += '\n--------------------------';
      total_count += count;
      if (count >= 4096) {
        results += '\n********************************\nWARNING:\n There are ' + count + ' CSS rules in the stylesheet ' + sheet.href + ' - IE will ignore the last ' + (count - 4096) + ' rules!\n';
      }
    }
  }
  console.log(log);
  console.log(results);
  console.log('CSS Selectors: ' + total_count);
}

Railsの場合gemで分割する

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

私の場合は、以下のようにしたら上手くいった。@import記法だと分割したファイルが空で作成されて上手くいかない。

/*
 *= require 'application'
 */

テストでチェックしたらCSSの肥大化防止を意識できる。けれど超えちゃう前提なら不要。

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

しかし不明なエラーがあります

場合によっては、以下の様なエラーがでるかもしれません。

Sass::SyntaxError: @charset may only be used at the root of a document.

このissueに書いてますが、
以下の条件でエラーが出るようです。

• コメントにマルチバイト文字
• CSSファイル内にコンパイル対象がある場合

これでCSSセレクタの数を気にせずに開発ができるようになりました。