CSS @property
The @property CSS at-rule is part of the CSS Houdini umbrella of APIs. It allows you to register custom properties (CSS variables) directly in your stylesheet, defining their syntax, inheritance behavior, and initial value.
1. The Problem with Standard Variables
Standard CSS variables are untyped strings.
:root {
--my-color: red;
}The browser doesn't know --my-color is a color. It just knows it's the string "red". This prevents the browser from interpolating (animating) the value in contexts where it needs to know the type, like inside a gradient.
2. Syntax
@property --my-color {
syntax: '<color>';
inherits: false;
initial-value: <a href='/?search=%23c0ffee' class='obsidian-tag'>#c0ffee</a>;
}syntax: Describes the allowed value type (e.g.,<color>,<length>,<number>,<percentage>,*).inherits: Boolean. Whether the property inherits by default.initial-value: The default value if the property is not set. Required if syntax is not*.
3. Animating Gradients
The most popular use case for @property is enabling transitions on gradients.
Without @property:
Gradients cannot be transitioned because the browser sees the variable change as a string replacement, causing an instant flip.
With @property:
@property --gradient-color {
syntax: '<color>';
inherits: false;
initial-value: blue;
}
.button {
background: linear-gradient(to right, white, var(--gradient-color));
transition: --gradient-color 1s;
}
.button:hover {
--gradient-color: red;
}Because the browser knows --gradient-color is a <color>, it can calculate the intermediate colors between blue and red.
programming/css/css programming/css/css-variables programming/css/transitions-and-animations