在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 相关文章推荐
Web前端绘制0.5像素的几种方法
Aug 11 HTML / CSS
CSS3使用border-radius属性制作圆角
Dec 22 HTML / CSS
CSS3实现时间轴效果
Jul 11 HTML / CSS
CSS3使用transition属性实现过渡效果
Apr 18 HTML / CSS
一篇文章带你学习CSS3图片边框
Nov 04 HTML / CSS
socket.io 和canvas 实现的共享画板功能
May 22 HTML / CSS
input file上传文件样式支持html5的浏览器解决方案
Nov 14 HTML / CSS
使用HTML5进行SVG矢量图形绘制的入门教程
Feb 19 HTML / CSS
canvas简易绘图的实现(海绵宝宝篇)
Jul 04 HTML / CSS
Html5 canvas实现粒子时钟的示例代码
Sep 06 HTML / CSS
html5 canvas绘制网络字体的常用方法
Aug 26 HTML / CSS
css filter和getUserMedia的联合使用
Feb 24 HTML / CSS
CSS使用伪类控制边框长度的方法
浅谈css实现背景颜色半透明的两种方法
Dec 06 #HTML / CSS
HTML怎么设置下划线?html文字加下划线方法
Dec 06 #HTML / CSS
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
DIV CSS实现网页背景半透明效果
CSS实现五种常用的2D转换
CSS巧用渐变实现高级感背景光动画
You might like
PHP面向对象法则
2012/02/23 PHP
php.ini save_handler 修改不生效的解决办法
2014/07/22 PHP
浅谈php中urlencode与rawurlencode的区别
2016/09/05 PHP
Highslide.js是一款基于js实现的网页中图片展示插件
2020/03/30 Javascript
jQuery 注意事项 与原因分析
2009/04/24 Javascript
一个javascript图片阅览组件
2010/11/09 Javascript
js验证整数加保留小数点的简单实例
2013/12/02 Javascript
Javascript 按位与运算符 (&amp;)使用介绍
2014/02/04 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
2014/07/06 Javascript
javascript里绝对用的上的字符分割函数总结
2014/07/31 Javascript
优化Node.js Web应用运行速度的10个技巧
2014/09/03 Javascript
JavaScript为事件句柄绑定监听函数实例详解
2015/12/15 Javascript
使用 bootstrap modal遇到的问题小结
2016/11/09 Javascript
Selenium执行Javascript脚本参数及返回值过程详解
2020/04/01 Javascript
[48:23]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第一局
2016/03/05 DOTA
python多线程http下载实现示例
2013/12/30 Python
Python实现的石头剪子布代码分享
2014/08/22 Python
Python制作简单的网页爬虫
2015/11/22 Python
详解Python中的变量及其命名和打印
2016/03/11 Python
python实现简易数码时钟
2021/02/19 Python
Python基于机器学习方法实现的电影推荐系统实例详解
2019/06/25 Python
python爬虫的一个常见简单js反爬详解
2019/07/09 Python
Python面向对象魔法方法和单例模块代码实例
2020/03/25 Python
Python读取JSON数据操作实例解析
2020/05/18 Python
matplotlib 生成的图像中无法显示中文字符的解决方法
2020/06/10 Python
HTML5中判断用户是否正在浏览页面的方法
2014/05/03 HTML / CSS
千禧酒店及度假村官方网站:Millennium Hotels and Resorts
2019/05/10 全球购物
Farfetch中文官网:奢侈品牌时尚购物平台
2020/03/15 全球购物
工程业务员工作职责
2013/12/07 职场文书
治安消防安全责任书
2014/07/23 职场文书
工作作风承诺书
2014/08/30 职场文书
个人欠款协议书范本2014
2014/11/02 职场文书
2014超市收银员工作总结
2014/11/13 职场文书
2015年村党支部工作总结
2015/04/30 职场文书
2016年公司“3.12”植树节活动总结
2016/03/16 职场文书
手把手教你制定暑期学习计划,让你度过充实的暑假
2019/08/22 职场文书