CSS 也可以写 if/else 语法了?
我在 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 样式不断推出,我相信我们很快就会看到它。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » CSS 也可以写 if/else 语法了?
码云笔记 » CSS 也可以写 if/else 语法了?