【问题标题】:Count number of selectors in a css file计算css文件中选择器的数量
【发布时间】:2011-07-10 20:25:49
【问题描述】:

是否有现有的插件/应用程序/程序/脚本/任何东西来分析和计算文件的 css 选择器?我想检查我的 css 文件在 IE 中不起作用的原因是否是因为我的选择器计数超过 4095(我很确定不是)

谢谢!

附言如果有 haml/sass/compass 解决方案,则加分

【问题讨论】:

  • 选择器的数量是否是问题所在?如果不是,那是什么?我遇到了同样的问题。突然间 IE9 并且只有 IE9 无法正确显示我的网站...

标签: css css-selectors haml sass compass-sass


【解决方案1】:

有这个小书签可以告诉您在所有 CSS 规则(您感兴趣的)中使用的 CSS 规则的数量。

CSS Crunch

【讨论】:

    【解决方案2】:

    这将执行内联 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.

    【讨论】:

      【解决方案3】:

      在您的 CSS 文件中搜索并用“{”替换“{”。大多数编辑会告诉你做了多少次替换……

      【讨论】:

      • 这只会计算规则的数量,而不是选择器的数量。每个规则可以有多个选择器,例如h1, h2, h3 { margin: 0; }
      • 我认为你应该计算 { 的数量加上 , 的数量(逗号)。据我所知,这将是一个非常简单的检测机制。
      【解决方案4】:

      我的项目Bless CSS 可能就是您正在寻找的。它将根据选择器限制分析文件并在最佳点拆分它们。

      它也内置于CodeKit

      【讨论】:

      • npm install -g bless 然后blessc count <path-to-file>
      【解决方案5】:

      可以在 Firefox 的 Firebug 控制台中运行以下 sn-p 来统计 CSS 选择器(不仅仅是 CSS 规则)的总数,并检查它是否达到每个样式表的 limit of 4095 selectors

      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);
      }
      

      【讨论】:

      • 感谢您发布答案!虽然代码 sn-p 可以回答这个问题,但添加一些附加信息仍然很棒,比如解释等..
      • 好的。我的英语很差,但我会努力的)
      • @jetli13 我的萤火虫说Error: The operation is insecure. "rules = styleSheet.cssRules,"。有任何想法吗? FF 20.0.1 上的 FB 1.11.2
      • @RaphaelIDDL 我想你需要的答案在这里link
      • 在 Chrome 控制台中也为我工作。
      【解决方案6】:

      如果您想将其作为构建过程的一部分,或者只是不想在 JS 中进行,则用于计算选择器的简单算法:

      用“,”替换“{”和“}”之间的文本,然后计算“,”的个数。这将为您提供文件上的选择器数量。

      【讨论】:

        【解决方案7】:

        有点晚了,但对于任何正在寻找 CSS 选择器计数器的人来说: http://snippet.bevey.com/css/selectorCount.php 它非常简单,并且可以使用多个样式表,它甚至会告诉您何时达到 4096 限制

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 2010-12-28
          • 2010-12-07
          • 2015-10-18
          • 2013-03-30
          • 2011-02-25
          • 2019-05-31
          • 2017-03-25
          相关资源
          最近更新 更多