CSS goes typesafe?
Did you know that CSS can, in a way, be typesafe and that we can use it effectively with custom properties? Now you do! Here’s the standard way to initialize a custom property. Always hotpink…
:root {
--highlightColor: hotpink;
}A custom property initialized with ‘@property’ also includes the syntax type and sets inheritance, going beyond just name and value.
The benefit of this approach is that with the standard property, you expect that property to contain a color as a value. If someone updates that property to have a value other than a color, any use of the property would fail. With ‘@property’, we define a fallback color and a type. If a non-color value is used, the color will always fall back to the initial fallback value. Color is just one of many types supported.
@property --highlightColor {
syntax: "<color>";
inherits: false;
initial-value: hotpink;
}Using ‘@property’ also enables animations of properties that were previously impossible to transition, like gradients. Neat, right!? And it’s now in Baseline!
