<link href="basic-styling.css" rel="stylesheet" />
<link class="conditional" href="grid-layout.css" rel="stylesheet" />
这里，basic-styling.css 处理所有每个浏览器都支持的样式。我们还有两个额外的 CSS 文件，grid-layout.css 和 subgrid-layout.css，它们包含了我们想根据浏览器的支持程度有选择地应用的 CSS。
我们先使用 JavaScript 来测试对 subgrid 值的支持，然后根据浏览器的支持情况更新我们的条件样式表的 href。
我们可以在我们的文档中添加 <script></script> 元素，填充以下 JavaScript：
js
const conditional = document.querySelector(".conditional");
if (CSS.supports("grid-template-columns", "subgrid")) {
  conditional.setAttribute("href", "subgrid-layout.css");
在我们的条件语句中，我们使用 CSS.supports() 测试 grid-template-columns 属性是否支持 subgrid 值。
@supports
CSS 有一个原生的特性检测机制：@supports at-规则。它的工作方式与媒体查询类似，但不同的是，媒体查询是根据分辨率、屏幕宽度或长宽比等媒体特性来选择性地应用 CSS，而 @supports 则是根据是否支持某个 CSS 特性来选择性地应用 CSS，类似于 CSS.supports()。
例如，我们可以使用 @supports 重写我们之前的例子：
css
@supports (grid-template-columns: subgrid) {
  main {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: repeat(4, minmax(100px, auto));
  .item {
    display: grid;
    grid-column: 2 / 7;
    grid-row: 2 / 4;
    grid-template-columns: subgrid;
    grid-template-rows: repeat(3, 80px);
  .subitem {
    grid-column: 3 / 6;
    grid-row: 1 / 3;
只有当浏览器支持 grid-template-columns: subgrid; 声明时，这个 at 规则块才会应用其中的 CSS 规则。为了使带有值的条件生效，你需要包含完整的声明（而不仅仅是属性名称），并且不包括结尾的分号。
@supports 还支持 AND、OR 和 NOT 逻辑——如果 subgrid 选项不可用，则另一个代码块会应用常规网格布局：
css
@supports not (grid-template-columns: subgrid) {
  /* 这里写其他规则 */
这比前面的例子更方便，因为我们可以在 CSS 中进行所有的特性检测，而不需要使用 JavaScript。此外，我们可以在一个 CSS 文件中处理所有的逻辑，从而减少 HTTP 请求。因此，这是确定浏览器对 CSS 特性支持的首选方法。