在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 {
/* 宽度不大于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语法更丰富，期待！
到此这篇关于在CSS中写 when/else 是什么体验的文章就介绍到这了,更多相关css中when/else内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了CSS3 实现文本与图片横向无限滚动动画,本文通过示例代码给大家介绍的非常详细，感兴趣的朋友跟随小编一起看看吧2024-06-12
这篇文章主要介绍了CSS实现苹果官网文字渐入效果(示例代码),文字是从左到有慢慢呈现出来，不是整体消失和出现，那么肯定不能使用透明度，结合示例代码讲解的非常详细，需要2024-06-12
这篇文章主要介绍了CSS实现鼠标悬停图片放大的几种方法,使用css设置背景图片大小100%，同时设置位置和过渡效果，然后使用：hover设置当鼠标悬停时修改图片大小，实现悬停放2024-05-29
这篇文章主要介绍了css3实现类似地图定位循环扩散光圈效果,本文通过实例代码给大家介绍的非常详细，感兴趣的朋友跟随小编一起看看吧2024-05-24
这篇文章主要介绍了CSS鼠标悬浮动画-hover属性详解，本文通过实例代码给大家介绍的非常详细，感兴趣的朋友跟随小编一起看看吧2024-05-24
CSS Flexible Box Module是一种现代化的布局模式，用于创建响应式的一维布局（无论是水平还是垂直），下面给大家介绍Flexbox布局的一些关键概念和示例代码，感兴趣的朋友一2024-05-16- 在网页开发中，我们经常会使用无序列表（<ul>）来展示一系列的项目,默认情况下，每个列表项（<li>）前面都会有一个圆点作为标记，本文将介绍几种常见的方法来2024-05-16
- 在CSS中，要使一个DOM元素脱离正常的文档流并定位在页面的右顶部，你可以使用position属性，这篇文章主要介绍了CSS实现dom脱离文档流定位固定位置,需要的朋友可以参考下2024-04-30
- Stylus 是一个功能强大的 CSS 预处理器，能够让你的样式表开发变得更加高效和有趣，本文介绍stylus入门使用方法，感兴趣的朋友跟随小编一起看看吧2024-04-22
这篇文章主要为大家详细介绍了CSS中五种常见定位方式以及它们的具体应用，文中的示例代码讲解详细，具有一定的借鉴价值，感兴趣的小伙伴可以跟小编一起学习一下2024-04-22
最新评论