我在 2011 年开始写CSS的时候),从来没有怀疑过这种语言会发生多大的变化。我还记得使用PIE.htc 让 border-radius 适配所有浏览器,我的同事做了一个PHP脚本,生成一个PNG来圆角。
然而,在过去的几年中出现了大量的CSS新特性。其中一些语句也可以被视为if语句,比如@supports样式:
@supports (border-radius: 50%) {
// don't use PIE.htc! {}
}
还有一个经典的媒体查询,已经存在了十多年:
@media (max-width: 1000px) {
//maybe a mobile sized device? {}
}
还有一个新的 camp(),有点不同 :
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
页面更新:2024-05-16
本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828
© CopyRight 2020-2024 All Rights Reserved. Powered By 71396.com 闽ICP备11008920号-4
闽公网安备35020302034903号