CSS Houdini 是一个总称,涵盖 一组低级 API,用于公开 CSS 渲染引擎的各个部分, 访问 CSS 对象模型这是一个 因为这能让开发者告诉浏览器 读取和解析自定义 CSS,而无需等待浏览器供应商提供 对这些功能的内置支持。太令人兴奋了!
在 Houdini 旗下,CSS 中最令人兴奋的新增功能之一是 属性和值 API。
此 API 可增强您的 CSS 自定义属性(通常也称为 CSS 变量)来为这些变量赋予语义含义(通过语法定义), 后备值,以启用 CSS 测试。
编写 Houdini 自定义属性
这里是设置自定义属性的示例(假设:CSS 变量),
包含语法(类型)、初始值(后备)和继承布尔值(
它是否会从其父项继承该值?)。目前的实现方式是
通过 CSS.registerProperty()
实现,但在支持的浏览器中,您可以使用
@property
:
CSS.registerProperty({ name: '--colorPrimary', syntax: '<color>', initialValue: 'magenta', inherits: false });
@property --colorPrimary { syntax: '<color>'; initial-value: magenta; inherits: false; }
现在,您可以像访问任何其他 CSS 自定义属性一样访问 --colorPrimary
,方法是
var(--colorPrimary)
。但不同的是,--colorPrimary
不是
读取为字符串里面有数据!
后备值
与任何其他自定义属性一样,您可以获取(使用 var
)或设置
(写入/重写)值,但使用 Houdini 自定义属性(如果您设置了 false
则 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
(自定义标识符字符串)
设置语法可让浏览器对自定义属性进行类型检查。 这样做有许多好处。
为了说明这一点,我将向您展示如何为渐变添加动画效果。目前, 无法平滑地在梯度值之间添加动画(或插值), 将每个梯度声明解析为字符串。
<ph type="x-smartling-placeholder">在此示例中,渐变停止百分比是从起点开始绘制的, 从 40% 更改为结束值 100%。您应该会看到 使该顶部渐变颜色向下平滑过渡。
左侧的浏览器支持 Houdini Properties and Values API, 实现平滑的渐变停止过渡右侧的浏览器则不支持。通过 浏览器只能将这一变化理解为 从 A 点到 B 点。无法对这些值进行插值处理,并且 因此,您将无法看到流畅的转换
不过,如果您在编写自定义属性时声明语法类型,然后使用
这些自定义属性启用动画,就会看到转场效果。您
可以按如下方式实例化自定义属性 --gradPoint
:
/* Check for Houdini support & register property */
@supports (background: paint(something)) {
@property --gradPoint {
syntax: '<percentage>';
inherits: false;
initial-value: 40%;
}
}
然后,在添加动画效果时,您可以将值从初始 40%
更新为 100%
:
@supports (background: paint(something)) {
.post:hover,
.post:focus {
--gradPoint: 100%;
}
}
这样就可以实现平滑的渐变过渡。
<ph type="x-smartling-placeholder">总结
@property
规则使这项激动人心的技术更易于通过
可让您在 CSS 中编写语义上有意义的 CSS。学习内容
CSS Houdini 和 Properties and Values API 的更多信息,请查看
资源:
照片由 Cristian Escobar 提供,由 Un 创立网站提供。