CSS - @property

作为 CSS Houdini API 的一部分，@property CSS @规则允许开发者显式定义自定义属性。

@property 规则

提供诸如属性类型检查、约束、设置默认值以及为 CSS 自定义属性指定继承行为等功能。
允许你在样式表中注册自定义属性，无需使用 JavaScript。
创建已注册的自定义属性，类似于在 JavaScript 中使用等效参数调用registerProperty()。

使用@property CSS @规则时的一些要点

有效的@property规则意味着使用从规则序言中的序列化派生的属性名称来注册自定义属性。
@property规则必须同时包含syntax和inherits描述符。如果两者任何一个缺失，则规则无效并被忽略。
初始值描述符仅对于通用语法定义是可选的，否则是必需的。如果它缺失，则整个规则无效并被忽略。
@property规则中的未知描述符将被忽略并视为无效，但它们不会使整个@property规则无效。

语法

@property <custom-property-name> { <declaration-list> }

CSS @property - 使用自定义属性

以下示例演示了不使用 JavaScript 的@property。

<html>
<head>
<style>
   @property --main-color {
      syntax: '<color>';
      inital-value: black;
      inherits: true;
   }
   .box {
      --main-color: red;
      background-color: var(--main-color);
      width: 200px;
      height: 200px;
      margin: 50px auto;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 24px;
      font-weight: bold;
      text-align: center;
   }
</style>
</head>
<body>
   <div class="box">
      <p>CSS At-Rules @property</p>
   </div>
</body>
</html>

CSS @property - 使用自定义属性和 registerProperty()

以下示例演示了@property和registerProperty()的使用。

在下面的示例中，CSS @property定义了一个名为--item-size的自定义属性，并指定它接受和继承百分比值，并以40%的初始值开始。
JavaScript中的window.CSS.registerProperty动态注册一个名为--item-color的新自定义属性，将其语法设置为<color>，指定它不继承，并为其赋值初始值peachpuff。

<html>
<head>
<style>
   @property --item-size {
      syntax: "<percentage>";
      inherits: true;
      initial-value: 40%;
   }
   /* set custom property values on parent */
   .container {
      display: flex;
      height: 100px;
      border: 3px dotted black;
      --item-size: 50%;
      --item-color: tomato;
      --item-border: 5px solid green;
   }
   /* use custom properties to set item size and background color */
   .item {
      width: var(--item-size);
      height: var(--item-size);
      border: var(--item-border);
      background-color: var(--item-color);
   }
   /* set custom property values on element itself */
   .second {
      --item-size: initial;
      --item-color: inherit;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="item">First Item</div>
      <div class="item">Second Item</div>      
   </div>
<script>
   window.CSS.registerProperty({
   name: "--item-color",
   syntax: "<color>",
   inherits: false,
   initialValue: "peachpuff",
   });
</script>
</body>
</html>

描述符

描述符	解释
syntax	解释属性允许的语法。
inherit	确定由@property定义的自定义属性注册是否默认继承。
initial-value	定义属性的初始值。

打印页面