What Is @property In CSS 2023

The @property at-rule in CSS is part of the CSS Houdini umbrella of APIs, which allows developers to explicitly define custom CSS properties and control their behavior. The @property rule allows you to define the type of a custom property, set default values, and specify whether the property can inherit values from its parent element. This can be useful if you want to create custom properties that are strongly typed and well-defined, and that can be used consistently across your styles.

@property --my-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}

The @property at-rule represents a custom property registration directly in a stylesheet, without the need to run any JavaScript. A valid @property rule results in a registered custom property, as if the CSS.registerProperty method had been called with equivalent parameters. This allows you to define and use custom properties directly in your stylesheets, without the need for additional code.