3 ms·
CSS properties already existed before this new feature (@property). You could already for instance declare a property "--my-prop: 10px" and use it elsewhere "va
by have_faith 2y ago
CSS properties already existed before this new feature (@property). You could already for instance declare a property "--my-prop: 10px" and use it elsewhere "var(--my-prop)".
This new feature, @property, allows you to define your property ahead of time, what "type" (syntax) it should accept (percentage, angle, color, etc), whether or not the property should inherits values from parents, and give it a default value (initial-value).
This means that if a property is declared as an angle type, and an element says "--my-prop: 5px" it will be ignored. Previously, this would be valid and depending on where you used it it might have unintentional side effects. It also means you can specify something like "--my-prop: initial" and it will use the default value (initial-value), without needing to know what it is exactly.