在 CSS 中将@supports与@media查询混合在一起

Question

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

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

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

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

Answer 1

没有办法将两个不同的条件规则组合成一个具有OR逻辑(正如您所说，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 2

对于CSS预处理器来说，这是一个很好的用例。您可以定义一个包含移动/无网格样式的混合，然后在@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服务器的gzipping可以拯救你 - 它不会减少复制大量代码块的大小损失。因此，虽然它可以使您免于复制代码的维护麻烦，但它并不能使您免于性能损失。

Answer 3

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

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