css-media-query-when.png
- 原文地址：Proposal for CSS @when
- 原文作者：Chris Coyier
- 译者：CondorHero
CSS 最近有个提案很火。这是个我以前从未见过的全新事物，它就是——CSS Conditionals，我是通过下面这个推特了解到的。
我们知道 媒体查询中已经有逻辑这样的东西，比如 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 等语言的条件语句，有时间你可以看看讨论。
