在CSS中使用when/else的方法


Posted in HTML / CSS onJanuary 18, 2022

大家都知道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内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS3 translate导致字体模糊的实例代码
Aug 30 HTML / CSS
纯CSS3实现地球自转实现代码(图文教程附送源码)
Dec 26 HTML / CSS
常用的四种CSS透明属性介绍
Apr 12 HTML / CSS
CSS3动画效果回调处理详解
Dec 10 HTML / CSS
使用CSS3制作一个简单的进度条(demo)
May 23 HTML / CSS
html5新增的定时器requestAnimationFrame实现进度条功能
Dec 13 HTML / CSS
HTML5 Canvas鼠标与键盘事件demo示例
Jul 04 HTML / CSS
html5实现canvas阴影效果示例
May 07 HTML / CSS
Html5新特性用canvas标签画多条直线附效果截图
Jun 30 HTML / CSS
H5 canvas实现贪吃蛇小游戏
Jul 28 HTML / CSS
关于iframe跨域使用postMessage的实现
Oct 29 HTML / CSS
HTML5录音实践总结(Preact)
May 07 HTML / CSS
CSS使用伪类控制边框长度的方法
浅谈css实现背景颜色半透明的两种方法
Dec 06 #HTML / CSS
HTML怎么设置下划线?html文字加下划线方法
Dec 06 #HTML / CSS
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
DIV CSS实现网页背景半透明效果
CSS实现五种常用的2D转换
CSS巧用渐变实现高级感背景光动画
You might like
php的正则处理函数总结分析
2008/06/20 PHP
精通php的十大要点(上)
2009/02/04 PHP
一个php短网址的生成代码(仿微博短网址)
2014/05/07 PHP
php脚本运行时的超时机制详解
2016/02/17 PHP
Zend Framework路由器用法实例详解
2016/12/11 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
浅谈PHP匿名函数和闭包
2019/03/08 PHP
c#和Javascript操作同一json对象的实现代码
2012/01/17 Javascript
使用jQuery同时控制四张图片的伸缩实现代码
2013/04/19 Javascript
JS中类或对象的定义说明
2014/03/10 Javascript
什么是Node.js?Node.js详细介绍
2014/06/01 Javascript
Web表单提交之disabled问题js解决方法
2015/01/13 Javascript
jQuery浏览器CSS3特写兼容实例
2015/01/19 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
2015/03/21 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
2015/08/28 Javascript
Three.js学习之网格
2016/08/10 Javascript
js实现tab选项卡切换功能
2017/01/13 Javascript
vue中关闭eslint的方法分析
2018/08/04 Javascript
Vue创建头部组件示例代码详解
2018/10/23 Javascript
ionic使用angularjs表单验证(模板验证)
2018/12/12 Javascript
微信小程序request请求封装,验签代码实例
2019/12/04 Javascript
js实现html滑动图片拼图验证
2020/06/24 Javascript
Python+Django在windows下的开发环境配置图解
2009/11/11 Python
python异步任务队列示例
2014/04/01 Python
用virtualenv建立多个Python独立虚拟开发环境
2017/07/06 Python
Python封装成可带参数的EXE安装包实例
2019/08/24 Python
python循环嵌套的多种使用方法解析
2019/11/29 Python
matplotlib.pyplot画图并导出保存的实例
2019/12/07 Python
python 输出列表元素实例(以空格/逗号为分隔符)
2019/12/25 Python
CSS 3.0 结合video视频实现的创意开幕效果
2020/06/01 HTML / CSS
爱奇艺VIP会员:大剧抢先看
2018/07/11 全球购物
YOOX台湾:意大利奢侈品电商
2018/10/13 全球购物
学前教育学生自荐信范文
2013/12/31 职场文书
护士辞职信范文
2014/01/19 职场文书
声乐专业大学生职业生涯规划书:理想的未来需要自己去打造
2014/09/20 职场文书
CSS3实现模糊背景的三种效果示例
2021/03/30 HTML / CSS