CSS，我可以写 if/else 语法了？

我在 2011 年开始写CSS的CSS时候)，从来没有怀疑过这种语言会发生多大的可写变化。我还记得使用PIE.htc 让 border-radius 适配所有浏览器，语法我的CSS同事做了一个PHP脚本，生成一个PNG来圆角。可写

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

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

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

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

还有一个新的 camp()，服务器租用有点不同 :

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

但像这样的行为:

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

看得头疼。

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

@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