有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。
我在 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款式一直推出，我置信咱们很快就会看到它。
编辑中可能存在的bug没法实时晓得，预先为了解决这些bug,花了大量的工夫进行log 调试，这边顺便给大家举荐一个好用的BUG监控工具 Fundebug。
作者：Kenton de Jong 译者：前端小智 起源：codingnconcept
原文：https://kentondejong.medium.c...
交换
有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。