定位不支持功能查询的CSS网格的浏览器

Question

如何为不支持当前规范的浏览器通过功能查询或媒体查询可靠地为CSS网格样式创建后备？

根据此类文章，浏览器会忽略无法解析的CSS。因此，我希望否定功能查询即使在不支持它的浏览器上也能正常工作。例如IE11不支持功能查询，因此我希望它忽略这一行并在查询中应用样式：@supports not (display: grid){}。但是，正如您在此测试中所看到的，IE11会忽略该查询中的所有样式。

我找到了针对IE10 +的媒体查询，但该查询排除了其他不支持网格的浏览器。当然，我可以先声明后备样式并用@supports (grid-area: area)查询覆盖它们，但是我更喜欢不需要覆盖的解决方案。

Answer 1

根据这样的文章，浏览器会忽略无法解析的CSS，但是，正如您在此测试中所看到的，IE11会忽略该查询中的所有样式。

好吧，是的 由于Internet Explorer不明白功能查询自己，它会忽略@supports not (display: grid)和里面的一切，因为它不明白这意味着什么。就像文章说的那样。

覆盖（即使用级联）是您唯一的选择。没有干净的方法可以做到这一点。实际情况是，@supports引入太晚了，对于区分不支持其之前功能（例如网格布局）的浏览器很有用。