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

Question

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

Temani Afif · Accepted Answer · 2025-02-25 11:47:45Z

2

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

answered Feb 25 at 11:47

Temani Afif

280k30 gold badges378 silver badges502 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related