IE的CSS选择器限制中如何计算媒体查询？

Question

任何想法IE如何处理与CSS选择器限制有关的媒体查询？

它是将其视为单个CSS规则，还是将其视为1个规则（@media声明）+ @media规则内部的规则数量？

这适用于IE9，因为据我所知，IE9是唯一支持媒体查询的IE，同时也存在4095个选择器的问题。

我正在尝试编写一个工具来相应地拆分CSS，但我不确定如何计算规则，例如@media规则将被计为1还是将被计为1 + @media规则内部的规则数？

- daniels

---

IE9是唯一支持媒体查询的IE版本，但早期版本从IE6开始就支持@media规则，当时媒体查询还未被引入。 - BoltClock

当然，您肯定知道已经有工具可以为此目的拆分CSS，这些工具（大概）知道如何计算规则。 - user663031

是的，但这对我来说是一个边缘情况。我有一个Java应用程序，不想依赖外部程序并使用Process调用它们，我需要在我的应用程序中内置此功能。因此，如果没有Java解决方案（我还没有找到），我需要自己开发。 - daniels

我也看了一下BlessCSS，它似乎不能拆分@media查询。它将它们视为1个。因此，如果您有一个单独但巨大的媒体查询，则不会拆分您的CSS文件。我只是想知道这是否正确或者这是BlessCSS的一个错误。 - daniels

这不是为我而做的。我只是想制作一个Jenkins插件来自动化这个过程，并确保我做得正确。 - daniels

Answer 1

似乎媒体查询不在选择器限制中，但是所有媒体查询内的规则都会被计算。我编写了一个测试用例，执行二进制搜索以查找最后一个选择器被忽略的转折点。该测试用例可在https://robwu.nl/s/css-selector-limit-test.html访问。二进制搜索运行范围为0-4200，并报告输入选择器适合多少次，直到不再应用最后一个选择器。如果结果大于4096，则测试用例报告“无穷大”。结果如下：

Turning point at 4095 for: #DUMMY{color:red;}
Turning point at 4095 for: @media screen(min-width:9px) { #DUMMY {color:red;} }
Turning point at 2047 for: @media screen(min-width:9px) { #DUMMY, #DUMMY {color:red;} }
Turning point at 1023 for: @media screen(min-width:9px) { #DUMMY {color:red;} #DUMMY, #DUMMY, #DUMMY {color:red;} }
Turning point at 1364 for: @media screen(min-width:9px) { #DUMMY {color:red;} } @media screen(max-width:9px) {#DUMMY, #DUMMY {color:red}}
Turning point at 1364 for: @media screen(min-width:9px) { #DUMMY {color:red;} } @media screen(max-width:9px) {#DUMMY {color:red;}} @media screen(max-width:9px){ #DUMMY {color:red;}}
Turning point at infinity for: @media screen (min-width:9px) { }
Turning point at infinity for: @media screen (min-width:9px) { } @media screen (min-width:9px) { } @media screen (min-width:9px) { }
Turning point at infinity for: @font-face { font-family: "blablablablabla"; } 

最后三个测试表明，媒体查询（以及其他 at-rules，例如 @font-face）不计入选择器限制。

我已经在 Stack Overflow 上看到许多“CSS 规则”计数脚本（例如 https://dev59.com/v2kw5IYBdhLWcg3waZ74#20496041 和 https://dev59.com/xG435IYBdhLWcg3wxC9p#12313690），但很遗憾，它们都是错误的。媒体查询在 cssRules/rules 列表中出现为一个条目。计算样式表中选择器数量的正确方法是递归处理样式表以处理（嵌套的）@media at-rules。

- Rob W

---

干得好，谢谢你。我相信你的答案不仅对我有帮助，也会对许多其他人有帮助。 - daniels

Answer 2

我不确定它会被计算为1还是1+nr，但我建议您不要在媒体查询之间拆分CSS。

一种非高效的hack

1. 使用计数器并增加到4095。
2. 回溯并尝试找到最近的@media查询，然后从那里拆分CSS。如果回溯时媒体查询没有出现在3000之前，则可以添加检查以排除该情况等。

- Chankey Pathak

---

将媒体查询分成2或3个有什么问题吗？ - daniels

分割将会中断，如果第4095个选择器嵌套在@media查询中，如果您注意到这一点，那么就没问题了。 - Chankey Pathak

我可以在两个文件中重新创建2个媒体查询。因此，第一个文件@media ... {4000 css rules;}和第二个文件@media [same query] {rest of css rules;}。 - daniels

或者你可以创建一个单独的 CSS 文件，其中只包含媒体查询。 - Chankey Pathak

假设您永远不会找到一个具有超过4095个CSS规则的媒体查询。正如我所说，我想制作一个自动化工具，用户如何拥有其CSS并不取决于我，我只想覆盖所有可能的情况。 - daniels