The @property rule allows you to define type, default value, and valid value syntax for custom properties. This makes your custom properties more robust and reliable.

Why Use It?

• Type Validation: Ensures that a custom property accepts only specific value types (e.g., color or length).
• Default Values: Defines a fallback value to use when no value is set.
• Animation Support: Makes custom properties animatable.
• Debugging Made Easier: DevTools clearly flags invalid values or types, helping you quickly identify and fix issues.

Defining a Color Property

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

div {
  --custom-color: red; /* Valid */
  background-color: var(--custom-color);
}

/* --custom-color: 123; /* Invalid, flagged in DevTools */

Defining a Length Property

@property --custom-spacing {
  syntax: '<length>';
  inherits: false;
  initial-value: 10px;
}

div {
  --custom-spacing: 20px; /* Valid */
  margin: var(--custom-spacing);
}

/* --custom-spacing: blue; /* Invalid, flagged in DevTools */

CSS @property makes custom properties safer and more flexible. With type validation, default values, and DevTools support, it simplifies design and debugging. Take your projects to the next level!

Related to

• https://developer.mozilla.org/en-US/docs/Web/CSS/@property