Properties and values API
Learn variable registration with the CSS Properties and Values API.
Typed variables with @property
With the @property declaration you register a CSS variable as typed and behaved. The syntax, inherits and initial-value fields are required. For example, when you write syntax: '<color>', the browser validates the value as a color.
Typed variables can be animated with transition; untyped var(--x) variables cannot. This is the biggest win of the Properties & Values API.
inherits and initial-value
With inherits: true the variable flows to children; with false it stays only on the element where it is set. initial-value is the starting value used when the variable is never set.
Together these three fields turn the variable from a string into a typed value. The browser validates it, inherits it and, when needed, animates it.
Exercise Write @property for --accent
Complete the CSS below. In @property --accent add syntax: '<color>', inherits: true and initial-value: #f59e0b.
Show example solution
/* typed variable for accent color */
@property --accent {
syntax: '<color>';
inherits: true;
initial-value: #f59e0b;
}Test yourself
-
What does the syntax field '<color>' do in @property?
@property --x { syntax: '<color>'; /* what does syntax do? */ }- Loads the worklet file
- Sets animation timing
- Raises selector priority
- Validates the value as a color and gives type info
Show answer
Validates the value as a color and gives type info — Correct. syntax '<color>' makes the browser validate the value as a color and gives type info.
-
Write the @property initial-value
@property --brand { syntax: '<color>'; inherits: true; initial-value: ____; }Show answer
@property --brand { syntax: '<color>'; inherits: true; initial-value: #6366f1; } -
Match the @property fields
- syntax
- Type of the value
- inherits
- Inheritance behavior
- initial-value
- Starting value
- @property
- Variable registration