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

Posted 2023-03-06

【中文标题】IE 的 CSS 选择器限制中如何计算媒体查询？

【英文标题】：How are media queries counted in IE's CSS selectors limit?

【发布时间】：2014-09-23 00:38:39

【问题描述】：

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

它是将其视为单个 CSS 规则还是将其视为 1 条规则（@media 声明）+@media 规则中的规则数？

这是针对 IE9 的，据我所知，IE9 是唯一支持媒体查询的 IE，同时也存在 4095 选择器的问题。

我正在尝试编写一个工具来相应地拆分 CSS，但我不确定如何计算规则，因为 @media 规则将被计为 1 或将被计为 1 + nr 的规则?

【问题讨论】：

IE9 是唯一支持媒体查询的 IE，但早于 IE6 的早期版本都支持 @media 规则，当时还没有引入媒体查询。

谢谢。很高兴知道。无论哪种方式，我都对如何计算此限制感兴趣。

您当然知道，出于这个确切原因，已经有工具可以拆分 CSS，它们（大概）知道如何计算规则。

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

我也看过 BlessCSS，它似乎没有拆分 @media 查询。它将它们计为 1。因此，如果您有一个单一但巨大的媒体查询，则不会拆分您的 CSS 文件。我只是想知道这是正确的还是 BlessCSS 中的错误

【参考方案1】：

媒体查询似乎不包括在选择器限制中。不过，所有媒体查询中的所有规则都会被计算在内。

我编写了一个执行二进制搜索的测试，以找到忽略最后一个选择器的转折点。可通过https://robwu.nl/s/css-selector-limit-test.html 获取。二进制搜索在 0 - 4200 范围内运行，并报告输入选择器适合的频率，直到不再应用最后一个选择器。如果结果大于 4096，则测试用例报告“infinity”。

结果：

Turning point at 4095 for: #DUMMYcolor: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 规则，例如 @font-face）不计入选择器限制。

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

【讨论】：

干得好，谢谢。我相信您的回答不仅对我有帮助，而且对许多其他人都有帮助。

【参考方案2】：

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

一个低效的黑客攻击

使用计数器并达到 4095。 回溯并尝试找到最近的@media 查询并从那里拆分 CSS。您可以在回溯时添加检查媒体查询是否直到 3000 才出现，然后不计算这种情况等。

【讨论】：

将媒体查询拆分为 2 或 3 有什么问题？

如果第 4095 个选择器嵌套在 @media 查询中，则拆分将中断，如果您处理好它就可以了。

我可以在两个文件中重新创建 2 个媒体查询。所以第一个文件@media ... 4000 css rules; 和两个文件@media [same query] rest of css rules;

或者您可以制作一个单独的 CSS 文件，其中只包含媒体查询。

假设您永远找不到超过 4095 个 css 规则的媒体查询。正如我所说，我想制作一个工具来自动执行此操作，而用户如何拥有其 CSS 并不取决于我，我只想涵盖所有可能的情况。