在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 相关文章推荐
HTML5和CSS3让网页设计提升到下一个高度
Aug 14 HTML / CSS
让IE支持CSS3的不完全兼容方案
Sep 19 HTML / CSS
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
Dec 06 HTML / CSS
CSS3只让背景图片旋转180度的实现示例
Mar 09 HTML / CSS
详解Html5原生拖拽操作
Jan 12 HTML / CSS
html5的websockets全双工通信详解学习示例
Feb 26 HTML / CSS
详解html5页面 rem 布局适配方法
Jan 12 HTML / CSS
html5 input输入实时检测以及延时优化
Jul 18 HTML / CSS
详解canvas绘制多张图的排列顺序问题
Jan 21 HTML / CSS
HTML5去掉输入框type为number时的上下箭头的实现方法
Jan 03 HTML / CSS
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
Nov 10 HTML / CSS
使用CSS连接数据库的方式
Feb 28 HTML / CSS
CSS使用伪类控制边框长度的方法
浅谈css实现背景颜色半透明的两种方法
Dec 06 #HTML / CSS
HTML怎么设置下划线?html文字加下划线方法
Dec 06 #HTML / CSS
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
DIV CSS实现网页背景半透明效果
CSS实现五种常用的2D转换
CSS巧用渐变实现高级感背景光动画
You might like
PHP 已经成熟
2006/12/04 PHP
php语言流程控制中的主动与被动
2012/11/05 PHP
thinkphp5框架扩展redis类方法示例
2019/05/06 PHP
Smarty模板配置实例简析
2019/07/20 PHP
用倒置滤镜把div倒置,再把table倒置。
2007/07/31 Javascript
js 操作select相关方法函数
2009/12/06 Javascript
JQuery通过Ajax提交表单并返回结果
2011/07/31 Javascript
firefox浏览器不支持innerText的解决方法
2013/08/07 Javascript
JavaScript简单实现网页回到顶部功能
2013/11/12 Javascript
jQuery 文本框得失焦点的简单实例
2014/02/19 Javascript
javascript实现获取服务器时间
2015/05/19 Javascript
jQuery切换所有复选框选中状态的方法
2015/07/02 Javascript
javascript实现类似java中getClass()得到对象类名的方法
2015/07/27 Javascript
深入理解JS中的substr和substring
2016/04/26 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
2016/09/23 Javascript
NodeJS整合银联网关支付(DEMO)
2016/11/09 NodeJs
详解获取jq ul第一个li定位的四种解决方案
2016/11/23 Javascript
JS判断一个数是否是水仙花数
2017/06/11 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
2018/04/28 Javascript
Vue中使用的EventBus有生命周期
2018/07/12 Javascript
微信小程序移动拖拽视图-movable-view实例详解
2019/08/17 Javascript
微信小程序swiper使用网络图片不显示问题解决
2019/12/13 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
2020/11/09 Javascript
python面向对象多线程爬虫爬取搜狐页面的实例代码
2018/05/31 Python
Python 变量类型详解
2018/10/10 Python
python中数组和矩阵乘法及使用总结(推荐)
2019/05/18 Python
python代数式括号有效性检验示例代码
2020/10/04 Python
Waterford加拿大官方网站:世界著名的水晶杯品牌
2016/11/01 全球购物
美国高端寝具品牌:Coyuchi
2017/02/08 全球购物
人事专员岗位职责
2013/11/20 职场文书
创建绿色学校先进个人材料
2014/08/20 职场文书
信息合作协议书
2014/10/09 职场文书
学期个人工作总结
2015/02/13 职场文书
2015年端午节活动策划书
2015/05/05 职场文书
中国文明网2015年“向国旗敬礼”活动网上签名寄语
2015/09/24 职场文书
JS实现扫雷项目总结
2021/05/19 Javascript