Question

知道IE如何处理有关此CSS选择器限制的媒体查询？

是否将其视为单个CSS规则或将其视为1规则（@media声明）+ @media规则中的规则数量？

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

我试图编写一个工具来相应地拆分CSS而我不确定如何计算规则，因为@media规则将被计为1或将被计为1 +里面的规则是什么？

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

最后三项测试表明，媒体查询（以及@font-face等其他规则）不计入选择器限制。

我在Stack Oveflow上看到了许多“css规则”计数器脚本（例如https://stackoverflow.com/a/20496041和https://stackoverflow.com/a/12313690），但不幸的是，所有这些都是错误的。媒体查询在cssRules / rules列表中显示为一个条目。计算样式表中选择器数量的正确方法是递归处理样式表以处理（嵌套）@media at-rules。

Answer 2

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

非效率黑客

使用计数器，最多4095。
追溯并尝试查找最新的@media查询并从那里拆分CSS。您可以添加一个检查，如果媒体查询在回溯时没有到达3000，那么不计算那种情况等。

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

2 个答案: