CSS属性注册：`CSS.registerProperty`对CSS变量默认值与继承的控制

CSS 属性注册：CSS.registerProperty 对 CSS 变量默认值与继承的控制

大家好，今天我们来深入探讨一个相对较新的、但功能强大的 CSS API：CSS.registerProperty。这个 API 允许我们显式地注册自定义 CSS 属性（也就是我们常说的 CSS 变量），并控制它们的类型、初始值以及是否参与继承。理解并掌握 CSS.registerProperty，可以极大地提升 CSS 代码的可维护性、可预测性，并赋予我们更精细的样式控制能力。

什么是 CSS 自定义属性？

在深入 CSS.registerProperty 之前，让我们先快速回顾一下 CSS 自定义属性 (CSS Variables) 的基本概念。自定义属性允许我们在 CSS 中定义变量，并在整个样式表中重复使用这些变量。 它们以双连字符 -- 开头，例如 --primary-color。

使用自定义属性的好处包括：

• 代码复用： 避免在多个地方重复定义相同的值。
• 易于维护： 更改变量的值，即可更新所有使用该变量的地方。
• 动态修改： 可以通过 JavaScript 动态地修改变量的值，实现动态样式。
• 主题切换： 方便实现不同主题的切换。

例如：

:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
}

body {
  background-color: var(--primary-color);
  color: white;
}

button {
  background-color: var(--secondary-color);
  color: white;
  border: 1px solid var(--primary-color);
}

在这个例子中，--primary-color 和 --secondary-color 是自定义属性，分别定义了主色和辅助色。 var() 函数用于引用这些自定义属性的值。

为什么需要 CSS.registerProperty？

虽然 CSS 自定义属性本身已经很强大，但它们也有一些局限性。 默认情况下，CSS 引擎对自定义属性的类型一无所知，所有值都被视为字符串。 这意味着：

1. 类型检查缺失： 无法对自定义属性的值进行类型检查。 例如，即使你希望 --font-size 存储的是一个长度值（如 16px），你也可以随意地给它赋一个字符串值，而不会得到任何警告。
2. 动画问题： CSS 动画无法直接对一些自定义属性进行插值。例如，如果 --my-number 的初始值是 10，目标值是 20，那么动画可能会出现意想不到的结果，或者根本无法工作。 这是因为浏览器不知道如何对任意字符串进行插值。
3. 默认值问题： 当自定义属性未定义时，var() 函数可以提供一个备用值，但这个备用值仍然是字符串，无法提供更精确的控制。
4. 继承控制： 默认情况下，CSS 自定义属性会继承。这有时是我们需要的，但有时却会带来意想不到的副作用。

CSS.registerProperty 的出现，正是为了解决这些问题。 它允许我们显式地告诉浏览器自定义属性的类型、初始值和是否继承，从而提供更强大的控制能力。

CSS.registerProperty 的基本语法

CSS.registerProperty 是 CSS 接口上的一个静态方法，它的语法如下：

CSS.registerProperty(definition);

definition 是一个对象，包含以下属性：

• name (required): 字符串，指定自定义属性的名称。 必须以 -- 开头，例如 --my-custom-property。
• syntax (required): 字符串，指定自定义属性的值的语法。 这告诉浏览器这个属性应该存储什么类型的数据。 常用的语法值包括：
  • *: 匹配任何值。 这是默认值，也是最宽泛的类型。
  • <number>: 匹配数字。
  • <length>: 匹配长度值 (如 10px, 2em, 5vw)。
  • <color>: 匹配颜色值 (如 #ff0000, rgb(255, 0, 0), red)。
  • <image>: 匹配图像值 (如 url(image.png), linear-gradient(...))。
  • <integer>: 匹配整数。
  • <percentage>: 匹配百分比。
  • <angle>: 匹配角度值。
  • <time>: 匹配时间值。
  • <url>: 匹配 URL。
  • !t: 匹配任何类型，但是会被当做 CSS-wide 关键字 inherit，initial，unset 和 revert 的一部分。
  • 你还可以使用更复杂的语法，例如 <length-percentage>（长度或百分比），或者使用 | 运算符组合多个语法，例如 <color> | <length>（颜色或长度）。
• inherits (required): 布尔值，指定自定义属性是否应该继承。 true 表示继承，false 表示不继承。
• initialValue (optional): 字符串，指定自定义属性的初始值。 如果未指定，则默认为 '' (空字符串)。 初始值必须符合 syntax 中指定的语法。

CSS.registerProperty 的使用示例

让我们看一些具体的例子，来演示如何使用 CSS.registerProperty。

1. 注册一个颜色变量：

CSS.registerProperty({
  name: '--my-primary-color',
  syntax: '<color>',
  inherits: false,
  initialValue: 'red'
});

这个例子注册了一个名为 --my-primary-color 的自定义属性，它存储一个颜色值，不继承，初始值为红色。 现在，我们可以在 CSS 中使用这个变量：

body {
  background-color: var(--my-primary-color, blue); /* 如果未定义，则使用蓝色作为备用值 */
}

2. 注册一个长度变量：

CSS.registerProperty({
  name: '--my-font-size',
  syntax: '<length>',
  inherits: true,
  initialValue: '16px'
});

这个例子注册了一个名为 --my-font-size 的自定义属性，它存储一个长度值，继承，初始值为 16 像素。

body {
  font-size: var(--my-font-size);
}

h1 {
  font-size: calc(var(--my-font-size) * 2); /* 可以进行计算 */
}

3. 注册一个数字变量，并用于动画：

CSS.registerProperty({
  name: '--my-opacity',
  syntax: '<number>',
  inherits: false,
  initialValue: '0'
});

这个例子注册了一个名为 --my-opacity 的自定义属性，它存储一个数字，不继承，初始值为 0。

.fade-in {
  --my-opacity: 0;
  opacity: var(--my-opacity);
  transition: opacity 1s;
}

.fade-in.active {
  --my-opacity: 1; /* 通过修改变量的值来触发动画 */
  opacity: var(--my-opacity);
}

在这个例子中，我们使用 transition 属性来创建一个淡入动画。 当 .fade-in 元素添加了 .active 类时，--my-opacity 的值从 0 变为 1，从而触发动画。 由于我们使用 CSS.registerProperty 声明了 --my-opacity 的类型为 <number>，浏览器可以正确地对这个属性进行插值，从而实现平滑的动画效果。

4. 注册一个枚举类型的变量：

虽然 CSS.registerProperty 本身不支持直接定义枚举类型，但我们可以使用 <custom-ident> 结合 | 运算符来模拟枚举类型。

CSS.registerProperty({
  name: '--my-theme',
  syntax: 'dark | light',
  inherits: false,
  initialValue: 'light'
});

然后，在 CSS 中，我们可以根据 --my-theme 的值来应用不同的样式：

body {
  background-color: white;
  color: black;
}

@media ( --my-theme: dark ) {
  body {
    background-color: black;
    color: white;
  }
}

请注意，这种方式实际上是利用了媒体查询的特性，而不是真正的枚举类型。 浏览器仍然会将 --my-theme 的值视为字符串，但我们可以通过媒体查询来限制其取值范围。

5. 禁止继承的例子：

CSS.registerProperty({
    name: '--my-border-color',
    syntax: '<color>',
    inherits: false,
    initialValue: 'black'
});

.parent {
    --my-border-color: red;
    border: 1px solid var(--my-border-color);
}

.child {
    border: 1px solid var(--my-border-color); /* 这里将使用initialValue，即black，而不是继承parent的red */
}

在这个例子中，即使父元素.parent设置了--my-border-color为红色，子元素.child由于inherits: false，所以不会继承这个值，而是使用initialValue定义的黑色。

syntax 语法值的详细说明

syntax 属性是 CSS.registerProperty 中最重要的属性之一。 它定义了自定义属性的值的类型，并影响浏览器如何处理该属性。 以下是一些常用的 syntax 值及其含义：

语法值	描述	示例
*	匹配任何值。这是最宽泛的类型，也是默认值。	--my-property: any-value;
<number>	匹配数字。	--my-number: 10;
<length>	匹配长度值。包括绝对长度 (如 px, cm, mm, in, pt, pc) 和相对长度 (如 em, rem, vw, vh, vmin, vmax)。	--my-length: 10px;
<color>	匹配颜色值。包括十六进制颜色 (如 #ff0000)、RGB 颜色 (如 rgb(255, 0, 0))、RGBA 颜色 (如 rgba(255, 0, 0, 0.5))、HSL 颜色 (如 hsl(0, 100%, 50%))、HSLA 颜色 (如 hsla(0, 100%, 50%, 0.5)) 和颜色关键字 (如 red, green, blue)。	--my-color: red;
<image>	匹配图像值。包括 url() 函数、linear-gradient() 函数、radial-gradient() 函数等。	--my-image: url(image.png);
<integer>	匹配整数。	--my-integer: 10;
<percentage>	匹配百分比。	--my-percentage: 50%;
<angle>	匹配角度值。包括 deg (度)、rad (弧度)、grad (百分度) 和 turn (圈数)。	--my-angle: 45deg;
<time>	匹配时间值。包括 s (秒) 和 ms (毫秒)。	--my-time: 1s;
<url>	匹配 URL。	--my-url: url(https://example.com);
<custom-ident>	匹配自定义标识符。自定义标识符必须以字母开头，并且只能包含字母、数字、连字符 (-) 和下划线 (_)。	--my-identifier: my-custom-id;
!t	匹配任何类型，但是会被当做 CSS-wide 关键字 inherit，initial，unset 和 revert 的一部分。	–my-property: inherit;
<length-percentage>	匹配长度或百分比。	--my-length-percentage: 10px; 或 --my-length-percentage: 50%;

除了这些基本的语法值之外，我们还可以使用 | 运算符来组合多个语法值，例如 <color> | <length> 表示颜色或长度。 我们还可以使用 [] 运算符来表示值的重复，例如 <number>+ 表示一个或多个数字。 更复杂的语法值可以参考 MDN 文档。

inherits 的作用

inherits 属性决定了注册的 CSS 属性是否可以被子元素继承。当设置为 true 时，子元素会继承父元素设置的 CSS 属性值。当设置为 false 时，子元素不会继承父元素的值，而是使用 initialValue 或者浏览器默认值（如果没有设置 initialValue）。

控制继承是管理 CSS 属性作用域的关键，避免不必要的样式冲突。

浏览器兼容性

CSS.registerProperty 的兼容性目前还不是非常好。 主流浏览器（Chrome, Firefox, Safari, Edge）的较新版本都支持，但 Internet Explorer 不支持。 在使用 CSS.registerProperty 之前，建议进行浏览器兼容性检查，或者使用 polyfill 来提供支持。

总结： 精准控制样式，提升代码质量

CSS.registerProperty 允许开发者显式地注册自定义 CSS 属性，并控制它们的类型、初始值和是否参与继承。 通过使用 CSS.registerProperty，我们可以提高 CSS 代码的可维护性、可预测性，并实现更精细的样式控制。 虽然兼容性还有待提高，但 CSS.registerProperty 代表了 CSS 的未来发展方向，值得我们深入学习和掌握。

更多IT精英技术系列讲座，到智猿学院