社区精选 |CSS 也可以写 if/else 语法了

今天小编为大家带来的是社区作者 前端小智 的文章，他翻译了一篇外文，看看 CSS 出了哪些新特性。

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

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

https://segmentfault.com/a/1190000042221657

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

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 {
   // 平板
}

@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样式不断推出，我相信我们很快就会看到它。

SegmentFault 思否社区小编说

自 2022-07-01 起 SegmentFault 思否公众号改版啦！之后将陆续推出新的栏目和大家见面！（请拭目以待呀~❤）

在「社区精选」栏目中，我们将为广大开发者推荐来自 SegmentFault 思否开发者社区的优质技术文章，这些文章全部出自社区中充满智慧的技术创作者哦!

希望通过这一栏目，大家可以共同学习技术干货，GET 新技能和各种花式技术小 Tips。

欢迎越来越多的开发者加入创作者的行列，我们将持续甄选出社区中优质的内容推介给更多人，让闪闪发光的技术创作者们走到聚光灯下，被更多人认识。

「社区精选」投稿邮箱：pr@segmentfault.com

投稿请附上社区文章地址

关注公众号：拾黑（shiheibook）了解更多

赞助链接：

关注数据与安全，洞悉企业级服务市场：https://www.ijiandao.com/
四季很好，只要有你，文娱排行榜：https://www.yaopaiming.com/
让资讯触达的更精准有趣：https://www.0xu.cn/