Question

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

所以我的问题是 - 如何同时向浏览器询问@supports或@media？嵌套它们并不会起作用，因为它实际上要求它们都是真的，并且将整个样式表从@supports复制粘贴到{{1}是错误的。 }。

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

@media

Answer 1

没有办法将两个不同的条件at-rules组合成一个带OR逻辑的（AND逻辑，正如你所说，可以通过嵌套来完成，即使严格来说它们是＆＃39;还有两个单独的规则）。除非您有能够自动为两个单独的条件规则复制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 */
    }
}

如果您不是额外缩进的粉丝you can reduce it somewhat，或者根本没有缩进;）

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服务器的gzip压缩会为您节省时间-减少复制大量代码的大小损失也无济于事。）因此，尽管它使您免于复制代码的维护麻烦，但它不会使您免于性能损失。

Answer 3

有一个嵌套条件at-rules的示例，就像您在@media规则的Mozilla文档中描述的那样：

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

将@supports与CSS

3 个答案: