css中@property属性介绍

css的@property是CSS Houdini api的一部分，它允许开发人员显式定义 CSS 自定义属性，允许属性类型检查，设置默认值，并定义属性是否可以继承值。该规则直接在样式表中表示自定义属性的注册，无需运行任何 JS。有效的规则会生成一个已注册的自定义属性，就好像使用等效的 parameters.@property 调用了CSS.registerProperty 一样

Houdini 是一组底层 api，它公开了 CSS 引擎的部分内容，使开发人员能够通过钩入浏览器渲染引擎的样式和布局过程来扩展 CSS。Houdini 可以让开发者直接访问 CSS 对象模型(CSSOM) ，使开发者能够编写浏览器可以解析为 CSS 的代码，从而创建新的 CSS 特性，而无需等待这些特性在浏览器中实现。

@property兼容性如下：

@property语法

正常而言，我们定义和使用一个 CSS 自定义属性的方法是这样的：

:root {
    --whiteColor: #fff;
}
p {
    color: (--whiteColor);
}

而有了 @property 规则之后，我们还可以像下述代码这样去定义个 CSS 自定义属性：

@property --propery-name {
  syntax: '<color>';
  inherits: false;
  initial-value: #fff;
}
p {
    color: var(--property-name);
}

简单解读下：

@property --property-name 中的 --property-name 就是自定义属性的名称，定义后可在 CSS 中通过 var(--property-name) 进行引用

syntax：类型string。定义自定义属性的类型。例如，number，color，percentage等
inherits：类型boolean。定义自定义属性是否允许继承
initial-value：类型符合syntax定义的类型，定义初始值
syntax 和 inherits 描述符是必需的，其中任何一项缺失, 整条规则都将失效并且会被忽略
initial-value 描述符仅在syntax描述符为通用syntax定义时是可选的，否则也是必需的

@property 规则需要语法（syntax）和继承描述符（inheritsdescriptor）; 如果缺少其中一个，则整个规则无效，必须忽略。只有在语法是通用语法定义的情况下，初始值描述符才是可选的，否则就需要描述符; 如果缺少初始值描述符，则整个规则无效，必须忽略它。

syntax可用有效字段

syntax 支持的语法类型非常丰富，基本涵盖了所有你能想到的类型。

length
number
percentage
length-percentage
color
image
url
integer
angle
time
resolution
transform-list
transform-function
custom-ident (a custom identifier string)

syntax声明复合属性值

syntax支持复合属性值，例如，font-family: Arial, Verdana, Geneva, sans-serif 和 border:1px solid #ccc，属性值是逗号或者空格分隔的值列表。

针对这种场景，syntax提供了语法声明符号+、#、|

syntax: '<color#>' ：接受逗号分隔的颜色值列表
syntax: '<length+>' ：接受以空格分隔的长度值列表
syntax: '<length | length+>'：接受单个长度或者以空格分隔的长度值列表

符号（+），用于声明接受以空格分隔的值列表例如："<length>+"

@property --padding{
    syntax: '<lenth>+';
    inherits: false;
}

.box{
    --padding:0 10px;
    padding: var(--padding);
}

符号（#），用于声明接受以逗号分隔的值列表例如："<url>#"

@property --img-url{
    syntax: '<url>#';
    inherits: false;
}

.box{
    --img-url:url(img01.png),url(img02.png);
    background-image: var(--img-url);
}

符号（|），用于声明不同类型的值例如："<length> | <length>+ | auto"

@property --padding{
    syntax: '<length> | <lenth>+ | auto';
    inherits: false;
}

.box{
    --padding:10px auto;
    padding: var(--padding);
}

@property的JS语法

CSS.registerProperty方法用于注册css自定义属性。registerProperty用法跟@property大致相同，同样包括name、syntax、inherits和initialValue，只是把注册自定义属性，转移到JS上下文中执行。

JS中注册自定义属性

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

CSS中使用自定义属性

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

@property例子

如果你经常使用 css 的 transition 属性，试着回想一下，是不是遇到过这种情况：在给某个属性添加 transition 时，却没有生效。看下面这段 css 代码：

.el {
  background: linear-gradient(white, black);
  /* this transition won't work */
  transition: 1s;
}
.el:hover {
  background: linear-gradient(red, black);
}

你可能认为这个渐变中的白色会随着过渡渐变为红色，但事实并非如此，这种过渡是不可能的。如果我们过去需要使用一些小技巧实现它，比如用新的渐变颜色在伪元素中褪色，或者用比元素渐变更宽的背景位置来伪造它。

但是现在我们可以这样做了：

@property --gradient-start {
  syntax: "<color>";
  initial-value: white;
  inherits: false;
}
.el {
  --gradient-start: white;
  background: linear-gradient(var(--gradient-start), black);
  transition: --gradient-start 1s;
}
.el:hover {
  --gradient-start: red;
}

因为我们告诉 CSS 这个自定义属性是一个 <color> ，所以它可以被处理或者动画化。之前的颜色值是无法被动画化的。

@property属性支持transition动画

@property声明的自定义属性支持transition动画。不要小看这个小小的转变，就仿佛给我们开了一扇通向css动画世界的大门。只要你的想象力足够强大，就可以创造出很多令人惊奇的css动画。

以往，用CSS变量定义背景渐变，背景无渐变动画效果

:root{
    --start-color1:red;
    --end-color1:black;
}

.child{
    background-image:linear-gradient(
    to bottom,
    var(--start-color1),
    var(--end-color1)
  );
}

.child:hover{
    --start-color1:green;
}

现在，用@property定义背景渐变，背景有动画渐变效果

@property --start-color{
    syntax:'<color>';
    inherits:false;
    initial-value:orange;
}

@property --end-color{
    syntax:'<color>';
    inherits:false;
    initial-value:black;
}

.child{
  background-image:linear-gradient(
    to bottom,
    var(--start-color),
    var(--end-color)
 );
}

.child:hover{
    --start-color: blue;
}

链接: https://fly63.com/article/detial/11459