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

Targeting browsers that don't support CSS grid with feature queries

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

根据 this one, browsers ignore CSS that they can't parse. Therefore, I expected negative feature queries to work even on browsers that don't support it. E.g. IE11 does not support feature queries, so I expected it to ignore this line and apply the styles inside the query: @supports not (display: grid){}. However, as you can see in this test, IE11 ignores all the styles inside that query 等文章。

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

According to articles like this one, browsers ignore CSS that they can't parse [...] However, as you can see in this test, IE11 ignores all the styles inside that query.

嗯,是的。由于 Internet Explorer 本身不理解特征查询 ,它将忽略 @supports not (display: grid) 和其中的所有内容,因为它不理解那是什么意思。正如文章所说。

Overriding, i.e. making use of the cascade, is your only option. 没有干净的方法可以做到这一点。现实情况是 @supports 引入得太晚,无法区分不支持其之前功能(例如网格布局)的浏览器。