共计 1286 个字符，预计需要花费 4 分钟才能阅读完成。
| 导读 | 大家都知道 CSS 已经有 @media、@support 查询形式的条件，可以非常灵活地选择对应的样式，然而还有一个新的提议叫做 when/else，这语法似乎看起来更加明了方便。 |
在这篇文章完稿前，when[1] 的提议已经被 CSSWG 通过了，而 else[2] 是一个单独的提案，目前是一个 4 级规范
让我们来看看 when/else 是如何使用的吧
when/else 语法
先来看看为了实现页面响应式是如何做的，这就要用到 CSS 媒体查询
| @media (min-width: 800px) {/* 宽度大于 800px 时的样式 */} | |
| @media (max-width: 799px) {/* 宽度小于 799px 时的样式 */} |
而换成 when/else 后呢？
| @when media(min-width: 800px) {/* 宽度大于 800px 时的样式 */} | |
| @else {/* 宽度不大于 800px 时的样式 */} |
语义上比 @media 更加好了
when/else 甚至还能支持多条件判断，跟写 if/else 似的
| @when media(min-width: 800px) {/* 宽度大于 800px 时的样式 */} | |
| @else media(min-width: 600px) {/* 宽度大于 600px 但不大于 800px 时的样式 */} | |
| @else {/* 宽度不大于 600px 时的样式 */} |
更多用法
一起来看看 when/else 有哪些不错的用法~
组合使用
再来举一个 @media 和 @support 共用的例子
| @media (min-width: 800px) {@supports (display: flex) { | |
| .flex {flex-direction: column;} | |
| } | |
| } |
这段代码的意思是当页面宽度大于 800px 并且浏览器支持 display: flex 语法时，给类名为 flex 的元素设置 flex-direction: column 的样式
其实不难理解，但要是换成 when/else 的语法会是啥样呢？
| @when media(min-width: 800px) and supports(display: flex) { | |
| .flex {flex-direction: column;} | |
| } |
内联使用
@when 也可以内联在 CSS 样式中使用，例如：
| button { | |
| padding: 2rem; | |
| @when element(max-width: 400px) {padding: 1rem;} | |
| } |
新的媒体查询写法
我在初学 @media 这个语法时也觉得有些拗口，min-width 和 max-width 还是需要稍微思考一下才知道是什么意思，然后有一个有意思的媒体查询写法也想在这里提一下，它的语法感觉挺有意思的，而且特别易懂，写法如下：
| @media (width | |
| 这样的语法是不是就特别清晰明了了？不过可惜的是它还是一个 4 级规范 | |
| 总结 | |
| 这些提案进展得相当快，关于使用 @if 还是 @when 的问题也存在一些争议，怕 @if 会与 Sass 冲突，还有一个建议是用 @where 来代替。总之不管叫啥名字，都是为了让 CSS 语法更丰富，期待！ | |
| 阿里云 2 核 2G 服务器 3M 带宽 61 元 1 年，有高配 | |
| 腾讯云新客低至 82 元 / 年，老客户 99 元 / 年 | |
| 代金券：在阿里云专用满减优惠券 |
正文完
星哥玩云-微信公众号
