×

CSS:有玩过when/else 语法吗?

作者:Web前端之家2021.12.28来源:Web前端之家浏览:1567评论:0
关键词:htmlcss
微信公众号

微信公众号

CSS里你有玩过when/else 语法吗?

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

在这篇文章完稿前,when 的提议已经被 CSSWG 通过了,而 else 是一个单独的提案,目前是一个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 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-widthmax-width 还是需要稍微思考一下才知道是什么意思,然后有一个有意思的媒体查询写法也想在这里提一下,它的语法感觉挺有意思的,而且特别易懂,写法如下:

@media (width <= 800px) {
  /* 页面宽度小于等于800px时的样式 */
}

这样的语法是不是就特别清晰明了了?不过可惜的是它还是一个4级规范。

总结

这些提案进展得相当快,关于使用 @if 还是 @when 的问题也存在一些争议,怕 @if会与 Sass 冲突,还有一个建议是用 @where 来代替。总之不管叫啥名字,都是为了让CSS语法更丰富,期待!


您的支持是我们创作的动力!
温馨提示:本文作者系Web前端之家 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/htmlcss20211228a1.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • qdxx

    SEO原创还可以的,新手学习下。...

  • Web前端之家

    已处理!...

  • 程序员路灯

    贵站友链已添加名称:程序员路灯地址:http://www.eqishare.com...

  • Web前端之家

    可以加群讨论...

  • 访客

    可以详细解释一下吗...

  • 访客

    厉害了...

  • sasa

    谢谢,刚好遇到,解决了。...

  • steven

    现在不是都在搞windows11了吗?...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2022 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.7.2