良许Linux教程网 干货合集 CSS中使用 when/else具体方法

CSS中使用 when/else具体方法

大家都知道CSS已经有@media、@support 查询形式的条件,可以非常灵活地选择对应的样式,然而还有一个新的提议叫做 when/else,这语法似乎看起来更加明了方便。

在CSS中如何使用 when/else在CSS中如何使用 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语法更丰富,期待!

以上就是良许教程网为各位朋友分享的Linu系统相关内容。想要了解更多Linux相关知识记得关注公众号“良许Linux”,或扫描下方二维码进行关注,更多干货等着你 !

137e00002230ad9f26e78-265x300
本文由 良许Linux教程网 发布,可自由转载、引用,但需署名作者且注明文章出处。如转载至微信公众号,请在文末添加作者公众号二维码。
良许

作者: 良许

良许,世界500强企业Linux开发工程师,公众号【良许Linux】的作者,全网拥有超30W粉丝。个人标签:创业者,CSDN学院讲师,副业达人,流量玩家,摄影爱好者。
上一篇
下一篇

发表评论

邮箱地址不会被公开。 必填项已用*标注

联系我们

联系我们

公众号:良许Linux

在线咨询: QQ交谈

邮箱: yychuyu@163.com

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部