css - cssファイル内のセレクターの数をカウントします

Question

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

ありがとう！

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

Answer 1

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

Answer 2

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

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

Answer 3

このブックマークレットには、CSSルールの総数（関心のあるもの）のうち、使用されているCSSルールの数が記載されています。

CSSクランチ

Answer 4

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

Answer 5

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

Answer 6

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

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

Answer 7

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

Answer 8

10年後のjetli13の回答に基づいて、IEセレクターの制限はありませんが、将来的にはJSジェネレーターのスタイル付きコンポーネントとメガCSSを追加しました。

1. 1000以上のスタイルの警告
2. サードパーティの外部ルールがある場合でもスクリプトは機能します
3. styleタグまたはexternalスタイルシートごとのスタイルの追加を表示します
4. 個々のCSSルールセットを拡張できます

スクリプト-コピーしてコンソールで実行

SPAアプリケーションでルートを変更した後に実行して、追加されたルールの数を確認できます。

var
  styleSheets = document.styleSheets,
  totalStyleSheets = styleSheets.length,
  overAllDocumentRules =0;
try {
for (var j = 0; j < totalStyleSheets; j++){

    try{
  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;
    }
  }
}
catch(err){
    console.warn("skipping>", styleSheet.href, err);
    console.warn(styleSheet)
}
if(totalRulesInStylesheet>1000) console.error("This stylesheet has over 1000 rules")
  console.log("Stylesheet: "+styleSheet.href);
  console.log(styleSheet)
  console.info("Total rules: "+totalRulesInStylesheet);
  overAllDocumentRules += totalRulesInStylesheet;
  console.warn("Total Document Rules > "+ overAllDocumentRules)
}
}
catch(err){
    console.warn("Error",err)

}

クロスドメインスタイルシートルール別名サードパーティは何をしていますか

Safari Webインスペクターでサードパーティのスタイルが必要な場合は、次のようにします。

出力