在CSS中使用when/else的方法

  发布时间:2021-12-15 11:21:47   作者:「零一」   我要评论
这篇文章主要介绍了在CSS中使用when/else的方法,关于使用 @if 还是 @when 的问题也存在一些争议,怕 @if会与 Sass 冲突,还有一个建议是用 @where 来代替,具体内容详情跟随小编一起看看吧

大家都知道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 {
  /* 宽度不大于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-widthmax-width 还是需要稍微思考一下才知道是什么意思,然后有一个有意思的媒体查询写法也想在这里提一下,它的语法感觉挺有意思的,而且特别易懂,写法如下:

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

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

总结

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

到此这篇关于在CSS中写 when/else 是什么体验的文章就介绍到这了,更多相关css中when/else内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

相关文章

  • 在CSS中使用when/else的方法

    这篇文章主要介绍了在CSS中使用when/else的方法,关于使用 @if 还是 @when 的问题也存在一些争议,怕 @if会与 Sass 冲突,还有一个建议是用 @where 来代替,具体内容详情跟
    2021-12-15
  • CSS使用伪类控制边框长度的方法

    需要实现一个边框长度比容器长度小一些的边框时,以往大多数都是使用div嵌套。现在只需要使用伪类就可以实现这个效果,并且使用起来很方便,下面通过本文给大家介绍CSS使用
    2021-12-15
  • 使用 CSS 轻松实现一些高频出现的奇形怪状按钮

    本文基于一些高频出现在设计稿中的,使用 CSS 实现稍微有点难度和技巧性的按钮,讲解使用 CSS 如何尽可能的实现它们,让我们一起看看使用 CSS 轻松实现一些高频出现的奇形
    2021-12-01
  • CSS实现五种常用的2D转换

    CSS 中的2D转换允许我们在二维空间中执行一些基本的变换操作,例如移动、旋转、缩放或扭曲等,本文主要介绍了CSS常用的五个变换:translate()、rotate()、scale()、skew()
    2021-11-30
  • CSS巧用渐变实现高级感背景光动画

    本文主要介绍了利用CSS中的conic-gradient()以及box-shadow模拟出光源阴影效果,从而实现一个充满高级感的背景光动画,感兴趣的小伙伴可以跟随小编一起学习一下
    2021-11-30
  • CSS中妙用 drop-shadow 实现线条光影效果

    本文将介绍一种利用 CSS 滤镜 filter 的 drop-shadow(),实现对 HTML 元素及 SVG 元素的部分添加阴影效果,以实现一种酷炫的光影效果,用于各种不同的场景之中,需要的朋友
    2021-11-08
  • 仅仅使用 HTML/CSS 实现各类进度条的方式汇总

    这篇文章主要介绍了仅仅使用 HTML/CSS 实现各类进度条的方式汇总,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-11-08
  • 纯 CSS 自定义多行省略的问题(从原理到实现)

    这篇文章主要介绍了纯 CSS 自定义多行省略的问题(从原理到实现),本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-11-08
  • CSS作用域(样式分割)的使用汇总

    scoped 属性是 HTML5 中的新属性,是一个布尔属性,如果使用该属性,则样式仅仅应用到 style 元素的父元素及其子元素,本文给大家介绍CSS作用域(样式分割)的使用汇总,感
    2021-11-03
  • 使用CSS实现小三角边框原理解析

    本文给大家介绍如何把三角画出来,基于css代码实现小三角边框原理解析,感兴趣的朋友跟随小编一起看看吧
    2021-11-03

最新评论