然而，在过去的几年中涌现了大量的CSS新特性。
个中一些语句也可以被视为if语句，比如@supports样式:

@supports (border-radius: 50%) { // don't use PIE.htc! {}}

还有一个经典的媒体查询，已经存在了十多年:

@media (max-width: 1000px) { //maybe a mobile sized device? {}}

还有一个新的 camp()，有点不同 :

html写phpifCSS我可以写 if/else 语法了 Ruby

width: clamp(1000px, 50%, 10vw);

但像这样的行为:

width: clamp(1000px >= (50% >= 10vw));

看得头疼。

但这些都可以说只是 if 语句。
如果我们想要一个 if/else 语句，我们须要做这样的事情。

@media (max-width: 1000px) and (prefers-color-scheme: dark) { //maybe a mobile device in dark mode {}}@media (max-width: 1000px) and (prefers-color-scheme: light) { //maybe a mobile device in light mode {}}

这很烦人。

但好是 在新发起的 @When 特性可以办理我们的烦恼。
它这么用：

@when media(max-width: 1000px) { // 做点什么}

这很酷，但更酷的是还有 else:

@when media(max-width: 1000px) { // 移动} @else { // 平板}

机警的你可能也想到了，那肯定还有 else if 了，没错还真有：

@when media(max-width: 1000px) { // 平板} @else media(max-width: 700px) { { // 移动 } @else { // PC}

我们也有可能可以这样做:

@when media(max-width: 700px) { @when (prefers-color-scheme: dark) { //dark mode on mobile device } @else { //light mode on mobile device }}

我说 "可能" 是由于该特性还在提案中，但我相信终极会出来的（没出来我把头发染绿）。

目前(20211023),浏览器的支持情形是若何的？零。
少到连 Can I Use 都没有。
但随着新的CSS样式不断推出，我相信我们很快就会看到它。

作者：Kenton de Jong 译者：前端小智 来源：codingnconcept 原文：https://kentondejong.medium.com/css-is-finally-getting-if-else-statements-3fabcec72a1f