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

Question

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

它是将它视为单个CSS规则还是将其视为1规则(@media声明)+ @media规则中的规则数量？

这是IE9从我所知道的IE9是唯一支持媒体查询的IE,同时也有4095选择器的这个问题.

我正在尝试编写一个工具来相应地拆分CSS,我不知道如何计算规则,因为@media规则将被计为1或将被计为1 + nr规则内部？

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规则"计数器脚本(例如/sf/answers/1434722901/和/sf/answers/861958331/),但不幸的是,所有这些都是错误的.媒体查询在cssRules/rules列表中显示为一个条目.计算样式表中选择器数量的正确方法是递归处理样式表以处理(嵌套)@mediaat-rules.