您如何查询 Web 浏览器以获取 CSS 网格支持？

Question

如何查询 Web 浏览器是否支持 CSS 网格？

所有主流浏览器都支持 CSS 最新版本的 Grid，但如果客户端使用旧版本，我需要回退到其他浏览器。

Answer 1

在 CSS 中你可以使用这个：

@supports (display: grid) {
    /* css styles for css grid */
}

，@supports 语法适用于 Chrome 28、Edge 20、Firefox 22、Opera 12、Safari 9

未列出 Internet Explorer 以支持 @supports 语法。

Answer 2

Say for example you want to display a message when a CSS feature is not supported.

<div class="message">
 Your browser does not support CSS grid 
</div>

@supports (display: grid) {
 .message { display: none }
}

使用上面的功能查询 @supports 我们说：如果浏览器支持 css 功能，则隐藏消息

您还可以使用 @supports not(...) 甚至组合超过 1 个规则：@supports (display: table-cell) and (display: list-item)

值得一看MDN Docs

How do you query a web browser for CSS Grid support?