有梦想，有干货，微信搜索【大千世界】关注这位大清早还在洗碗的洗碗智者。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。当我在2011年开始编写CSS时），我从不怀疑语言会发生多大的变化。我还记得使用PIE.htc使边框半径适用于所有浏览器，我的同事制作了一个PHP脚本，生成一个PNG来圆角。然而，在过去的几年里，出现了大量新的CSS特性。其中一些语句也可以被视为if语句，例如@supports样式：@supports(border-radius:50%){//不要使用PIE.htc！{}}还有一个经典的媒体查询，已经存在十多年了：@media(max-width:1000px){//maybeamobilesizeddevice?{}}还有一个新的camp()，有点不同：width:clamp(1000px,50%,10vw);但是像这样的行为：width:clamp(1000px>=(50%>=10vw));看得头疼。但这些可以说只是if语句。如果我们想要一个if/else语句，我们需要做这样的事情。@media(max-width:1000px)and(prefers-color-scheme:dark){//可能是深色模式的移动设备{}}@media(max-width:1000px)and(prefers-color-scheme:light){//maybeamobiledeviceinlightmode{}}这很烦人。不过好消息是，新提出的@When特性可以解决我们的烦恼。它是这样工作的：@whenmedia(max-width:1000px){//dosomething}这很酷，但更酷的是else：@whenmedia(max-width:1000px){//移动}@else{//平板}你可能认为它是一个机智，那么必须有一个elseif，是的，有：@whenmedia(max-width:1000px){//Tablet}@elsemedia(max-width:700px){{//Mobile}@else{//PC}我们也可以这样做：@whenmedia(max-width:700px){@when(prefers-color-scheme:dark){//移动设备上的暗模式}@else{//移动设备上的轻模式}}我说“可能”是因为该功能仍在提案中，但我相信它最终会出现（如果没有，我会把头发染成绿色）。目前（20211023），浏览器支持情况如何？零。我什至不能使用。但是随着新的CSS样式不断出现，我相信我们很快就会看到它。编辑过程中可能存在的BUG无法实时获知。之后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的BUG监控工具Fundebug。作者：KentondeJong译者：前端小智来源：codingnconcept原文：https://kentondejong.medium.c...交流有梦想，有干货，微信搜【大千世界】关注这个我还在洗清晨洗碗洗碗的智慧。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。
