ファイルのcssセレクターを分析してカウントする既存のプラグイン/アプリ/プログラム/スクリプト/何かがありますか?私のcssファイルがIEで動作していない理由は、セレクターの数が4095を超えているためです(確かにそうではありません)かどうかを確認したいです)
ありがとう!
p.s. haml/sass/compassソリューションがある場合はプラスポイント
次のスニペットをFirefoxのFirebugコンソールで実行して、CSSセレクターの総数(CSSルールだけでなく)をカウントし、スタイルシートごとに 4095セレクターの制限 に達しているかどうかを確認できます。
var
styleSheets = document.styleSheets,
totalStyleSheets = styleSheets.length;
for (var j = 0; j < totalStyleSheets; j++){
var
styleSheet = styleSheets[j],
rules = styleSheet.cssRules,
totalRulesInStylesheet = rules.length,
totalSelectorsInStylesheet = 0;
for (var i = 0; i < totalRulesInStylesheet; i++) {
if (rules[i].selectorText){
totalSelectorsInStylesheet += rules[i].selectorText.split(',').length;
}
}
console.log("Stylesheet: "+styleSheet.href);
console.log("Total rules: "+totalRulesInStylesheet);
console.log("Total selectors: "+totalSelectorsInStylesheet);
}
(興味のある)CSSルールの総数のうち使用されたCSSルールの数を示すこのブックマークレットがあります。
これはインラインCSSを実行します...
var selectors = 0;
$('style').each(function() {
var styles = $(this).html();
// Strip comments
styles = styles.replace(/\/\*.+?\*\//sg, '');
var matches = styles.match(/\{[\s.]*\}/g);
selectors += matches.length;
});
jsFiddle 。
CSSファイルで「{」を「{」に検索して置き換えます。ほとんどの編集者は、あなたが行った交換の数を教えてくれます…
ビルドプロセスの一部として実行する場合、またはJSで実行したくない場合に、セレクターをカウントするための単純なアルゴリズム:
「{」と「}」の間のテキストを「、」に置き換えてから、「、」の数を計算します。これにより、ファイルのセレクターの数がわかります。
少し遅れますが、cssセレクターカウンターを探している人は誰でも: http://snippet.bevey.com/css/selectorCount.php 非常にシンプルで、複数のスタイルシートで作業できます、4096の制限に達したときにも通知します