首页 > 其他分享> 文章详细

在CSS中如何使用 when/else

2021-12-30 18:01:32 阅读：162 来源： 互联网

标签：flex media when else width 800px CSS

大家都知道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 <= 800px) {  
  /* 页面宽度小于等于800px时的样式 */  
}

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

总结

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

标签：flex,media,when,else,width,800px,CSS
来源： https://blog.csdn.net/yaxuan88521/article/details/122242538

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

在CSS中如何使用 when/else