Skip to content

Incomplete / misleading about var() fallback usage #44011

@nchevobbe

Description

@nchevobbe

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

Metadata

Metadata

Assignees

Labels

Content:CSSCascading Style Sheets docs

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions