ARTICLE AD BOX
When I try to create a <length> type property in my CSS, Chrome complains if I don't use pixels as the unit of measurement:
@property --my-width { syntax: "<length>"; inherits: true; initial-value: 2em; }
Firefox seems OK and the summarized docs say yes but Chrome says "No!".
Is my syntax OK?
I'm trying to transition on the width of the scrollbar (which works) but am stuck if I don't use pixels.
124k31 gold badges284 silver badges492 bronze badges
1,4821 gold badge20 silver badges52 bronze badges
2
You can use units other than pixels, but you can't use em because they aren't computationally independent; there's no one single value that can be applied wherever the property is.
See e.g. MDN (emphasis mine):
If the value of the syntax descriptor is not the universal syntax definition, the initial-value descriptor has to be a computationally independent value. This means the value can be converted into a computed value without depending on other values, except for "global" definitions independent of CSS. For example, 10px is computationally independent—it doesn't change when converted to a computed value. 2in is also valid, because 1in is always equivalent to 96px. However, 3em is not valid, because the value of an em is dependent on the parent's font-size.
(The "universal syntax definition" is syntax: "*".)
124k31 gold badges284 silver badges492 bronze badges
Explore related questions
See similar questions with these tags.
![How do I select an element that only has the one specified class? [duplicate]](https://stackoverflow.com/Content/Sites/stackoverflow/Img/apple-touch-icon@2.png?v=0f0cab681579)