csscss-variables

How to use rem unit in initial-value for a CSS @property rule?

I'm trying to define a CSS @property rule for a font-size with a rem-based initial value.

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

It works as long as no syntax is defined:

@property --font-size {
  syntax: '*';
  initial-value: 2rem;
}

But when setting the length syntax, which includes rem units based on the docs, it's ignored by browser:

@property --font-size {
  syntax: '<length>';
  initial-value: 2rem;
}

Example: https://stackblitz.com/edit/stackblitz-starters-axmosbgb?file=styles.css

Solution

  • The initial value must be "computationally independent" so you cannot rely on units such as rem or em

    Otherwise, if the value of the syntax descriptor is not the universal syntax definition, the following conditions must be met for the @property rule to be valid:

    • The initial-value descriptor must be present.

    • The initial-value descriptor’s value must parse successfully according to the grammar specified by the syntax definition.

    • The initial-value must be computationally independent.

    https://www.w3.org/TR/css-properties-values-api-1/#initial-value-descriptor