@@ -521,6 +521,45 @@ Representing An Entire Property Value: the <<whole-value>> type</h3>
521521 However, some functions may restrict
522522 what a <<whole-value>> argument can include.
523523
524+ <h3 id="first-valid">
525+ Selecting the First Supported Value: the ''first-valid()'' notation</h3>
526+
527+ CSS supports progressive enhancement with its forward-compatible parsing:
528+ authors can declare the same property multiple times in a style rule,
529+ using different values each time,
530+ and a CSS UA will automatically use the last one that it understands
531+ and throw out the rest.
532+ This principle, together with the ''@supports'' rule,
533+ allows authors to write stylesheets that work well
534+ in old and new UAs simultaneously.
535+
536+ However, using ''var()''
537+ (or similar substitution functions that resolve after parsing)
538+ thwarts this functionality;
539+ CSS UAs must assume any such property is valid at parse-time.
540+
541+ The <dfn>first-valid()</dfn> [=functional notation=]
542+ inlines the fallback behavior
543+ intrinsic to parsing declarations.
544+ Unlike most notations,
545+ it can accept any valid or invalid syntax in its arguments,
546+ and represents the first value among its arguments
547+ that is supported (parsed as valid) by the UA
548+ as the whole value of the property it's used in.
549+
550+ <pre class=prod>
551+ <dfn><first-valid()></dfn> = first-valid( <<declaration-value>> [ ';' <<declaration-value>> ]* )
552+ </pre>
553+
554+ If none of the arguments represent a valid value for the property,
555+ the property is [=invalid at computed-value time=] .
556+
557+ ''first-valid()'' is a <<whole-value>> .
558+
559+ Issue: Should this have a different name?
560+ We didn't quite decide on it during the resolution to add this.
561+
562+
524563<!--
525564████████ ███████ ██████ ██████ ██ ████████ ███ ███
526565 ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
0 commit comments