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

syntax可用有效字段

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

syntax声明复合属性值

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

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

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

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

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

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

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

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

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

@property的JS语法

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

.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