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

Question

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

根据像this one这样的文章，浏览器忽略了无法解析的CSS。因此，我预计负面特征查询即使在不支持它的浏览器上也能工作。例如。 IE11不支持功能查询，因此我希望它忽略此行并在查询中应用样式：@supports not (display: grid){}。但是，正如您在此测试中看到的那样IE11 ignores all the styles inside that query。

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

Answer 1

  

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

嗯，是的。由于Internet Explorer无法理解自身的功能查询，因此它会忽略@supports not (display: grid)及其中的所有内容，因为它无法理解这意味着什么。就像文章所说的那样。

Overriding, i.e. making use of the cascade, is your only option.没有干净的方法。实际情况是@supports引入太晚，无法区分不支持其前面的功能的浏览器，例如网格布局。