あの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 オプションがいるって気づくのにちょっとハマりました。
これでタスクを動かすと、
という分割ファイルが作られ、
元のファイルの先頭に
@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をコンパイルし直せば、なにごともなかったようになります。
良いですね。