https://mp.weixin.qq.com/s/_j8JWZENzujl0oqKScsALg
CSS 工作组于 2024 年 9 月 13 日发布了 CSS 值和单位模块第 5 级(CSS Values and Units Module Level 5)的首个公众工作草案。这个模块描述了 CSS 属性接受的通用值和单位及其语法,并且引入了一些有趣的新特性。
https://www.w3.org/TR/css-values-5/
这些功能中的很多功能都有一个共同点:它们简化了 CSS 代码。以前需要多条规则或复杂解决方案才能实现的功能,现在只需一行或两行 CSS 即可实现。
注意:目前这些特性仍在工作草案阶段,很多内容可能会发生改变,且尚未在所有浏览器中实现。
attr() 函数的变化
使用 attr() 读取属性并在 CSS 中使用并不是什么新鲜事了。但之前它的功能非常有限,只能与content 属性一起使用,并且只能处理字符串。
现在,attr() 函数进行了一波增强,可以在任何属性中使用任意数据类型的属性值。只需指定类型,并在需要时设置一个备用值即可。
示例代码:
.element {
width: attr(data-width px, 100px); /* 如果 `data-width` 不存在或无效,则使用100px */
}
使用 calc-size() 函数处理内在值
模块还引入了一个新函数,可以安全地操作内在值(例如 auto、max-content、fit-content 等)。这在过渡和动画中还是比较有用的,这个新函数提供了更多灵活性,使处理尺寸变得更简单。
示例代码:
.element {
width: calc-size(100% + 20px);
}
新的 first-valid() 函数
first-valid() 函数允许传递一系列值,并使用第一个有效值。这在处理 CSS 自定义属性时特别有用。之前,即使自定义属性的值无效,它们也被认为是有效值。现在可以简化代码,将所有备用声明合并成一个 first-valid() 函数。
示例代码:
.element {
color: first-valid(--primary-color, --secondary-color, black);
}
新的 *-mix() 函数家族
模块引入了多个 *-mix 函数,可以简化不同的混合操作。例如,想要混合颜色,可以使用 color-mix(red 60%, blue) 或更简单的 mix(60%, red, blue)。这种语法也扩展到其他混合函数:
calc-mix()
color-mix()
cross-fade()
palette-mix()
示例代码:
.element {
color: mix(50%, red, blue); /* 混合红色和蓝色,比例为50% */
}
新的 *-progress() 系列函数
这些函数表示一个值从起始值到终值的比例进度,结果是一个介于0和1之间的数值。这在与 *-mix 函数结合使用时特别有用。
progress(): 通用进度
media-progress(): 媒体特性进度
content-progress(): 容器查询进度
示例代码:
.element {
opacity: progress(20%, 0, 1); /* 计算元素透明度的进度 */
}
CSS 中的随机化函数
模块引入了两个新函数,返回一个列表中的随机值(random-item())或一个范围内的随机值(random())。
示例代码:
.element {
color: random-item(red, blue, green);
以后再也不需要依赖其他语言或使用复杂的技巧来实现随机化了。
新的兄弟元素函数
有时我们可能希望根据容器内元素的顺序提供不同的样式,本次引入了两个新函数:
sibling-count(): 返回兄弟元素的数量
sibling-index(): 返回元素在兄弟元素列表中的位置
示例代码:
.element {
margin-left: calc(sibling-index() * 10px); /* 根据元素的顺序设置左边距 */
}
新的 toggle() 函数
toggle() 函数简化了嵌套元素的样式定义,可以让元素及其后代循环切换一组值,极大简化了代码。
示例代码:
ul {
list-style-type: toggle(disc, square); /* 奇数层次使用圆点,偶数层次使用方块 */
}
参数的新功能语法
一些新函数可以接受逗号分隔的值列表。为避免参数分隔的歧义,提出了“逗号升级”的方案,可以使用分号(;)而不是逗号(,)分隔参数。
示例代码:
.random-font {
font-family: random-item(Times, serif; Arial, sans-serif; Roboto, sans-serif);
}
定位类型的扩展
CSS已经有了 margin、padding 和 border 的逻辑属性,这些属性相对于文本书写方向,可能会随着语言变化而变化。现在,这种逻辑也引入了定位类型(不是指 position 属性,而是指示位置的属性,如 background-position、object-position 等)。
新值:
x-start
x-end
y-start
y-end
block-start
block-end
inline-start
inline-end
示例代码:
.element {
background-position: block-start center;
}
大家觉得哪个最实用?欢迎在评论区留言!