See in Playground.
In <color_value>, the definition is
<oklch()> = oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
which should accept a fractional number for the lightness and I do not see this differ when used in @property initial value. And it doesn't report error outside the @property:
However, as the initial value of @property, the following code
@property --why-this-not-work {
syntax: "<color>";
inherits: false;
initial-value: oklch(0.5 0 0);
}
causes error /* ERROR: Unexpected token Function("oklch") */.
When I use the fractional number form, all browsers render the color without problem.
See in Playground.
In <color_value>, the definition is
<oklch()> = oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )which should accept a fractional number for the lightness and I do not see this differ when used in
@propertyinitial value. And it doesn't report error outside the@property:However, as the initial value of
@property, the following codecauses error
/* ERROR: Unexpected token Function("oklch") */.When I use the fractional number form, all browsers render the color without problem.