web-dev-qa-db-ja.com

cssファイル内のセレクターの数を数える

ファイルのcssセレクターを分析してカウントする既存のプラグイン/アプリ/プログラム/スクリプト/何かがありますか？私のcssファイルがIEで動作していない理由は、セレクターの数が4095を超えているためです（確かにそうではありません）かどうかを確認したいです）

ありがとう！

p.s. haml/sass/compassソリューションがある場合はプラスポイント

csscss-selectorshamlsasscompass-sass
30
corroded

次のスニペットを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);
}
67
jetli13

私のプロジェクト Bless CSS は、あなたが探しているものかもしれません。ファイルを分析し、セレクターの制限に基づいて最適なポイントでファイルを分割します。

CodeKit にも組み込まれています。

4
Paul Young

（興味のある）CSSルールの総数のうち使用されたCSSルールの数を示すこのブックマークレットがあります。

CSSクランチ

3
Adam Ayres

これはインライン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 。

1
alex

CSSファイルで「{」を「{」に検索して置き換えます。ほとんどの編集者は、あなたが行った交換の数を教えてくれます…

1
Julien B

ビルドプロセスの一部として実行する場合、またはJSで実行したくない場合に、セレクターをカウントするための単純なアルゴリズム：

「{」と「}」の間のテキストを「、」に置き換えてから、「、」の数を計算します。これにより、ファイルのセレクターの数がわかります。

1
Laszlo Varga

少し遅れますが、cssセレクターカウンターを探している人は誰でも： http://snippet.bevey.com/css/selectorCount.php 非常にシンプルで、複数のスタイルシートで作業できます、4096の制限に達したときにも通知します

1
Babybird