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

Next lesson: Typed OM

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies