Question

如何在Web浏览器中查询CSS Grid支持？

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

Answer 1

在CSS中你可以使用它：

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

@supports语法可根据MDN Web Docs返回Chrome 28，Edge 20，Firefox 22，Opera 12，Safari 9。

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

Answer 2

例如，要在不支持CSS功能的情况下显示一条消息。

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

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

在上面的功能查询@supports中，我们说：如果浏览器支持该CSS功能，则隐藏消息

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

值得一看MDN Docs