社区精选 |CSS 也可以写 if/else 语法了
今天小编为大家带来的是社区作者 前端小智 的文章,他翻译了一篇外文,看看 CSS 出了哪些新特性。
我在 2011 年开始写CSS的时候),从来没有怀疑过这种语言会发生多大的变化。我还记得使用PIE.htc 让 border-radius 适配所有浏览器,我的同事做了一个PHP脚本,生成一个PNG来圆角。
然而,在过去的几年中出现了大量的CSS新特性。其中一些语句也可以被视为if语句,比如@supports样式:
https://segmentfault.com/a/1190000042221657
@media (max-width: 1000px) {
//maybe a mobile sized device? {}
}
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 {
// 平板
}
@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样式不断推出,我相信我们很快就会看到它。
SegmentFault 思否社区小编说
自 2022-07-01 起 SegmentFault 思否公众号改版啦!之后将陆续推出新的栏目和大家见面!(请拭目以待呀~❤)
在「社区精选」栏目中,我们将为广大开发者推荐来自 SegmentFault 思否开发者社区的优质技术文章,这些文章全部出自社区中充满智慧的技术创作者哦!
希望通过这一栏目,大家可以共同学习技术干货,GET 新技能和各种花式技术小 Tips。
欢迎越来越多的开发者加入创作者的行列,我们将持续甄选出社区中优质的内容推介给更多人,让闪闪发光的技术创作者们走到聚光灯下,被更多人认识。
「社区精选」投稿邮箱:pr@segmentfault.com
投稿请附上社区文章地址
关注公众号:拾黑(shiheibook)了解更多
赞助链接:
关注数据与安全,洞悉企业级服务市场:https://www.ijiandao.com/
四季很好,只要有你,文娱排行榜:https://www.yaopaiming.com/
让资讯触达的更精准有趣:https://www.0xu.cn/

随时掌握互联网精彩
- 帮助勒索软件洗钱的俄罗斯加密货币交易所Garantex被查封 同时被扣押2800万USDT
- iTrustSSL:不同的SSL证书品牌区别是什么
- 5G标准必要专利小米中国第三 雷军:继续死磕核心技术
- 首个全球性AI声明《布莱切利宣言》正式签署
- 港币对人民币汇率2023年5月26日
- 烽火光纤技术荣获中国发明专利银奖
- 消费者抱怨闪缝?卡萨帝:已减小至0闪缝
- 闭店、欠薪,除了拍照打卡,“言几又们”的出路在哪?
- 巨头带头吹响“元宇宙”的集结号,群魔乱舞还是英杰辈出?
- 云开车、云逛街,云开窗,还有什么不能云?
- 快手和10家省级卫视春晚达成合作;做空机构香橼宣布停止做空研究;戛纳电影节推迟至7月举行|Do早报
- 央视评武汉一菜市场限制商贩年龄