CSS Houdini 是一个总称,涵盖了一组低级 API,这些 API 提供了 CSS 渲染引擎的某些部分,并为开发者提供 CSS 对象模型的访问权限。这对 CSS 生态系统来说是一个巨大的变化,因为它让开发者能够告知浏览器如何读取和解析自定义 CSS,而无需等待浏览器供应商提供对这些功能的内置支持。太令人兴奋了!
在 Houdini 中,最令人兴奋的 CSS 新增功能之一是 Properties and Values API。
此 API 可为 CSS 自定义属性(也常称为 CSS 变量)赋予语义含义(由语法定义),甚至赋予回退值,从而增强 CSS 自定义属性的功能,并支持 CSS 测试。
编写 Houdini 自定义属性
下面是一个设置自定义属性(例如 CSS 变量)的示例,但现在添加了语法(类型)、初始值(回退)和继承布尔值(它是否从父级继承值?)。目前,此操作是通过 JavaScript 中的 CSS.registerProperty()
实现的,但在支持的浏览器中,您可以使用 @property
:
CSS.registerProperty({
name: '--colorPrimary',
syntax: '<color>',
initialValue: 'magenta',
inherits: false
});
@property --colorPrimary {
syntax: '<color>';
initial-value: magenta;
inherits: false;
}
现在,您可以像访问任何其他 CSS 自定义属性一样,通过 var(--colorPrimary)
访问 --colorPrimary
。不过,这里的区别在于,--colorPrimary
不仅仅是作为字符串读取。它有数据!
回退值
与任何其他自定义属性一样,您可以获取(使用 var
)或设置(写入/重写)值,但对于 Houdini 自定义属性,如果您在替换时设置了 falsey 值,CSS 渲染引擎会发送初始值(其回退值),而不是忽略该行。
请参考以下示例。--colorPrimary
变量的 initial-value
为 magenta
。但开发者为其指定的值为无效值“23”。如果没有 @property
,CSS 解析器会忽略无效代码。现在,解析器会回退到 magenta
。这允许在 CSS 中进行真正的回退和测试。太棒了!
.card {
background-color: var(--colorPrimary); /* magenta */
}
.highlight-card {
--colorPrimary: yellow;
background-color: var(--colorPrimary); /* yellow */
}
.another-card {
--colorPrimary: 23;
background-color: var(--colorPrimary); /* magenta */
}
语法
借助语法功能,您现在可以通过指定类型来编写语义 CSS。目前允许的类型包括:
length
number
percentage
length-percentage
color
image
url
integer
angle
time
resolution
transform-list
transform-function
custom-ident
(自定义标识符字符串)
设置语法后,浏览器便可对自定义属性进行类型检查。这样做有诸多好处。
为了说明这一点,我将向您展示如何为渐变添加动画效果。目前,无法在渐变值之间流畅地进行动画处理(或插值),因为每个渐变声明都会被解析为字符串。
在此示例中,渐变停止百分比会通过悬停互动从 40% 的起始值动画化为 100% 的结束值。您应该会看到顶部渐变色的向下平滑过渡。
左侧的浏览器支持 Houdini Properties and Values API,可实现平滑的渐变停止点过渡。右侧的浏览器则不符合此要求。不支持该功能的浏览器只能将此更改理解为从 A 点到 B 点的字符串。因此,系统无法插值这些值,因此您不会看到平滑的过渡。
不过,如果您在编写自定义属性时声明语法类型,然后使用这些自定义属性启用动画,则会看到过渡效果。您可以按如下方式实例化自定义属性 --gradPoint
:
@property --gradPoint {
syntax: '<percentage>';
inherits: false;
initial-value: 40%;
}
然后,在动画播放时,您可以将值从初始 40%
更新为 100%
:
.post:hover,
.post:focus {
--gradPoint: 100%;
}
这样就可以实现平滑的渐变过渡。
总结
@property
规则让您可以在 CSS 中编写具有语义意义的 CSS,从而让这项令人兴奋的技术变得更加易用。如需详细了解 CSS Houdini 和 Properties and Values API,请参阅以下资源:
此图片由 Unsplash 用户 Cristian Escobar 拍摄。