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で分割する
私の場合は、以下のようにしたら上手くいった。@import
記法だと分割したファイルが空で作成されて上手くいかない。
/*
*= require 'application'
*/
テストでチェックしたらCSSの肥大化防止を意識できる。けれど超えちゃう前提なら不要。
しかし不明なエラーがあります
場合によっては、以下の様なエラーがでるかもしれません。
Sass::SyntaxError: @charset may only be used at the root of a document.
このissueに書いてますが、
以下の条件でエラーが出るようです。
- コメントにマルチバイト文字
- CSSファイル内にコンパイル対象がある場合
これでCSSセレクタの数を気にせずに開発ができるようになりました。
Author And Source
この問題について(RailsでIE9以下のCSSセレクタの上限値4096対策), 我々は、より多くの情報をここで見つけました https://qiita.com/kntmrkm/items/c127dfe396a19e508a21著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .