MDN URL
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/var
What specific section or headline is this issue about?
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/var#syntax
What information was incorrect, unhelpful, or incomplete?
Here's the section that is incomplete and a bit misleading
If the custom property referenced by the first argument is not defined or equals a CSS-wide keyword, the function uses the second value.
What did you expect to see?
The spec indicates:
The second argument to the function, if provided, is a fallback value, which is used as the substitution value when the value of the referenced custom property is the guaranteed-invalid value.
which is a bit different.
If the variable is set to initial, then it is guaranteed-invalid because that's the initial value for non-registered custom properties.
But if the custom property is registered (via @property), and has a initial value, the fallback won't be used.
Regarding css-wide keywords, the spec says:
The CSS-wide keywords can be used in custom properties, with the same meaning as in any another property.
So if you're using something like revert-rule and the variable is also set in another rule, var() won't use the fallback value.
The section could also mention dependency cycle:
If there is a cycle in the dependency graph, all the custom properties in the cycle are invalid at computed-value time.
which might turn that custom property value into guaranteed-invalid given https://www.w3.org/TR/css-variables-1/#invalid-at-computed-value-time:
A declaration can be invalid at computed-value time […]
When this happens, the computed value is one of the following depending on the property’s type:
→ The property is a non-registered custom property
→ The property is a registered custom property with universal syntax
The computed value is the guaranteed-invalid value.
→ Otherwise
Either the property’s inherited value or its initial value depending on whether the property is inherited or not, respectively, as if the property’s value had been specified as the unset keyword.
Do you have any supporting links, references, or citations?
www.w3.org/TR/css-variables-1/
https://kizu.dev/cyclic-toggles/
Do you have anything more you want to share?
No response
MDN metadata
Page report details
MDN URL
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/var
What specific section or headline is this issue about?
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/var#syntax
What information was incorrect, unhelpful, or incomplete?
Here's the section that is incomplete and a bit misleading
What did you expect to see?
The spec indicates:
which is a bit different.
If the variable is set to
initial, then it is guaranteed-invalid because that's the initial value for non-registered custom properties.But if the custom property is registered (via
@property), and has a initial value, the fallback won't be used.Regarding css-wide keywords, the spec says:
So if you're using something like
revert-ruleand the variable is also set in another rule,var()won't use the fallback value.The section could also mention dependency cycle:
which might turn that custom property value into guaranteed-invalid given https://www.w3.org/TR/css-variables-1/#invalid-at-computed-value-time:
Do you have any supporting links, references, or citations?
www.w3.org/TR/css-variables-1/
https://kizu.dev/cyclic-toggles/
Do you have anything more you want to share?
No response
MDN metadata
Page report details
en-us/web/css/reference/values/var