在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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
相关文章
盒子模型是网页布局的基础,包括边框、外边距、内边距和实际内容,通过CSS可以控制盒子之间的距离及其外观,如边框样式、边框颜色等,重要属性包括padding和margin,分别控制内2024-10-18
盒子模型是网页布局的基础,包括边框、外边距、内边距和实际内容,通过CSS可以控制盒子之间的距离及其外观,如边框样式、边框颜色等,重要属性包括padding和margin,分别控制内2024-10-18
CSS使用filter和backdrop-filter实现高斯模糊效果(示例代码)
本文详细介绍了CSS3中的两个实现高斯模糊效果的API：filter和backdrop-filter,filter可以直接在图像或背景图上添加多种效果,而backdrop-filter则用于在元素后的区域添加效2024-09-26- overscroll-behavior是CSS中用于控制元素滚动边界行为的属性,可通过设置为auto、contain或none来指定当元素滚动超出边界时的处理方式,本文给大家介绍CSS 中的overscroll-be2024-09-26
本文介绍了如何通过CSS实现具有四角边框的效果,使用了linear-gradient和background属性来创建边框,并设置了背景尺寸,文章还提供了Vue中图片资源引用的示例代码,适合想要为2024-09-24CSS的:required和:optional伪类：如何增强表单字段的视觉识别
在网页设计中,使用CSS的:required和:optional伪类可以有效增强表单字段的视觉识别,提升用户体验和表单的可访问性,这两个伪类分别用于区分必填和非必填字段,通过添加不同的2024-09-18
本文介绍了CSS中设置边框的几种主要属性,包括边框样式（如实线、虚线等）、边框宽度（可以单独设置每个方向的宽度）、边框颜色（支持单独为每个方向设置颜色）以及圆角边框2024-09-18
通过CSS3和JS,实现前端炫酷的视差滚动和抖动效果,本文详细介绍了相关CSS样式和JS脚本,通过监听滚动条位置并调整元素的top属性来达到视差效果,当到达特定位置时,利用CSS动画2024-09-13CSS文本超出后隐藏并显示省略号及其他浏览器兼容方案(推荐)
在CSS中，可以通过简单的样式设置实现文本超出隐藏并显示省略号的效果,这些方法主要适用于WebKit内核的浏览器，对于其他浏览器，可采用JavaScript或CSS Fallback等方案,文2024-09-11
这篇文章主要介绍了css 自定义变量 var()案例分析,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，感兴趣的朋友跟随小编一起看看吧2024-08-28
最新评论