主に技術的なことを書くブログ

浅めにマークアップ&フロントエンドの技術的なことをメモしていましたが、ざっくばらんに書いています。

あのIE9以下でセレクタが4095以上あると読み込まれないやつ

噂では効いていたけど、まさか自分があの「IE 9以下に存在するセレクター数制限にはまった」みたいなことになるとは思いもしませんでした。

普通にハマりました。

いろいろ検証しても見つからずに、そういわれるとこのcssめっちゃ長いな、と思って。t32k/stylestatsというcssを解析してれるツールをインストールして調べてみみたら4095を越えてました。。

# StyleStats install
npm install -g stylestats
stylestats generic.css

参考:自分の書いたコードが即座に解析できる「StyleStats」でCSSを測ろう! | HTML5Experts.jp

Bless という解決方法

一部のcssだけ分割しようかと思ったのですが、そのうちIE9以下の対応もなくなっていくことを考えると、それだけのために根本的な運用を変えるというのも微妙なので、Blessというセレクターの数が4095を越えたら勝手に分割してくれるツールを使うことにました。

グローバルにインストールしてコマンドで使ってもよいのですが、今回は諸々の理由からPonginae/grunt-blessでタスクに追加することにしました。

最近だとみんなgulp使ってると思いますが、gulpでもプラグインがあります。 参考:adam-lynch/gulp-bless

grunt-bless

Gruntfile触るのとかひさしぶりすぎて、けっこう時間かかりました。

npm install grunt-bless --save-dev

Gruntfile.js

読み込みに追加

grunt.loadNpmTasks('grunt-bless');

タスクに追加

bless: {
  css: {
    options: {
      force: true, // ファイルを上書きするのに必須
      cleanup: true, // Blessで生成されたファイルのクリーンナップ
      cacheBuster: true, //@import urlにキャッシュパラメータ付与
      compress: false, // grunt-contrib-cssmin 必要
      logCount: true // selecter の数をカウントしてログ表示
    },
    files: {
      // 右から左に ex. 'dist/A.css': 'src/A.css'
      'css/generic.css': 'css/generic.css'
    }
  }
}

読み込んだファイルをそのまま上書きするのに force: true オプションがいるって気づくのにちょっとハマりました。

これでタスクを動かすと、

css/generic-blessed1.css

という分割ファイルが作られ、

css/generic.css

元のファイルの先頭に

@import url('generic-blessed1.css?z=1436616554517');

が追加されています。cacheBuster: true にしてるので、パラメータがついてます。

内容的には分割ファイルとはいえ、4095超えるまでのセレクターが generic-blessed1.css 側にあり、そこから溢れた分が、generic.css の中に残るという感じでした。

そこはちょっと気持ち悪いところもありますが、元々HTMLで読み込み指定していた generic.css の中に分割した generic-blessed1.css が import されるので、HTML側の修正をする必要がありませんし、IE9以下の対応が不要になったら Bless のタスクごと削除してsassをコンパイルし直せば、なにごともなかったようになります。

良いですね。