在 CSS 中混合使用@media 查询并@supports

Question

我第一次使用 CSS 网格构建网站。由于不是所有的浏览器都支持这个，我做了一套回退样式，我有条件地应用那些带有 @supports not (display:grid) 的样式。但我也想将其用作移动样式表，并且只在较大的屏幕上使用 CSS 网格 - 这可以通过简单的媒体查询 @media screen and (max-width:700px) 来实现。现在的问题是 - 如果其中任何一个为真，也就是说，如果浏览器不支持 CSS 网格或则浏览器 window 不支持宽度超过 700 像素，我想使用我的后备样式表。

所以我的问题是 - 如何同时向浏览器请求 @supports 或 @media？嵌套它们是行不通的，因为这本质上要求它们都是真实的，并且将整个样式表从 @supports 复制粘贴到 @media.[=18= 感觉是错误的]

基本上，我想要这样的东西：

(@supports not (display:grid)) or (@media screen and (max-width:700px)){
    /*my stylesheet*/
}

Answer 1

有一个嵌套条件 at 规则示例，与您在 @media 规则的 Mozilla 文档中所描述的完全相同：

/* Nested within another conditional at-rule */
@supports (display: flex) {
  @media screen and (min-width: 900px) {
    article {
      display: flex;
    }
  }
}

Answer 2

没有办法用 OR 逻辑将两个不同的条件 at 规则组合成一个（AND 逻辑，正如你所说，可以通过嵌套来完成，尽管严格来说它们仍然是两个独立的规则）。除非你有可以自动复制你的 CSS 跨越两个单独的条件规则的管道，否则你将不得不手动执行此操作。

如果可能，请考虑从渐进增强的角度而不是优雅降级的角度来解决这个问题。也就是说，不是将回退样式应用于不支持网格或在较小屏幕上显示的浏览器，而是将网格样式应用于支持网格和在较大屏幕上显示的浏览器 — 这是您提到的规则嵌套有意义的地方：

@supports (display: grid) {
    /* Or screen and (min-width: 701px),
       or not screen and (max-width: 700px),
       depending on your needs and preferences */
    @media screen and (min-width: 700px) {
        /* Grid styles */
    }
}

如果您不喜欢额外的缩进，，或者根本不缩进 ;)

Answer 3

这是 CSS 预处理器的一个很好的用例。您可以定义一个包含 mobile/gridless 样式的混入，然后在 @supports 和 @media 块中使用该混入。这样您就不需要在源代码中复制样式。

例如，在 SCSS 中，您可以这样写：

@mixin no-grid-css {
  /* Placeholder for mobile/no-grid styles */
  .foo {
    color: #baa;
  }
  .baz::after {
    content: "qux";
  }
}

@supports not (display:grid) {
  @include no-grid-css;  
}

@media screen and (max-width:700px) {
  @include no-grid-css;
}

当你用 sass styles.scss 编译它时，你会得到：

@supports not (display: grid) {
  /* Placeholder for mobile/no-grid styles */
  .foo {
    color: #baa;
  }

  .baz::after {
    content: "qux";
  }
}
@media screen and (max-width: 700px) {
  /* Placeholder for mobile/no-grid styles */
  .foo {
    color: #baa;
  }

  .baz::after {
    content: "qux";
  }
}

这种方法的缺点是样式仍然会在发送到用户浏览器的 CSS 中重复。（也不要指望您的 Web 服务器的 gzip 压缩能拯救您——它不会减少复制大量代码的大小损失。）因此，虽然它使您免于复制代码的维护难题，但它不会让您免于性能损失。

在 CSS 中混合使用@media 查询并@supports

Mixing an @supports with an @media query in CSS

css

progressive-enhancement

media-queries