CSS @when 提案

css-media-query-when.png

• 原文地址：Proposal for CSS @when
• 原文作者：Chris Coyier
• 译者：CondorHero

CSS 最近有个提案很火。这是个我以前从未见过的全新事物，它就是——CSS Conditionals，我是通过下面这个推特了解到的。

https://twitter.com/TerribleMia/status/1438183093387599881

我们知道 媒体查询中已经有逻辑这样的东西，比如 and、or、only、not等。事实上，媒体查询已经是逻辑。

一个媒体查询的例子：

@media (min-width: 600px) {
  /* WHEN this media query is true, do these styles. */
}

如果您想要适配不同的屏幕宽度，您可以编写两个媒体查询：

@media (min-width: 600px) {
  /* ... */ 
}
@media (max-width: 599px) {
  /* ... */
}

上面代码彼此明明是有点逻辑的，却被分开了，有点……烦躁。

而这个新提案的语法更加简洁：

@when media(min-width: 600px) {
  /* ... */ 
}
@else {
  /* ... */ 
}

您可以通过执行多个条件and，还可以包含多个@else语句，不仅使用@media，还可以使用@supports。

@when media(width >= 400px) and media(pointer: fine) and supports(display: flex) {
  /* A */
} @else supports(caret-color: pink) and supports(background: double-rainbow()) {
  /* B */
} @else {
  /* C */
}

这种语句的逻辑对我们来讲简直太友好了。

最后，有一场关于命名的小争吵，除了 @when，@if也可以表示条件呀，而且更加符合例如 JavaScript 等语言的条件语句，有时间你可以看看讨论。