乐趣区

关于javascript:CSS-也可以写-ifelse-语法了

有幻想,有干货,微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试残缺考点、材料以及我的系列文章。

我在 2011 年开始写 CSS 的时候),素来没有狐疑过这种语言会产生多大的变动。我还记得应用PIE.htcborder-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 款式一直推出,我置信咱们很快就会看到它。


编辑中可能存在的 bug 没法实时晓得,预先为了解决这些 bug, 花了大量的工夫进行 log 调试,这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

作者:Kenton de Jong 译者:前端小智 起源:codingnconcept

原文:https://kentondejong.medium.c…

交换

有幻想,有干货,微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试残缺考点、材料以及我的系列文章。

退出移动版