[css-values-5] Define if() notation #10064 #5624 #5009 #6638 #4731 #3455

css-values-5/Overview.bs

@@ -1242,6 +1242,40 @@ Selecting the First Supported Value: the ''first-valid()'' notation</h3>
 	<<declaration-value>> imposes no contextual validity constraints on what it matches,
 	unlike <<whole-value>>.
 
+<!-- Big Text: if()
+-->
+
+<h3 id="if-notation">
+Conditional Value Selection: the ''if()'' notation</h3>
+
+	The <dfn>if()</dfn> notation is an [=arbitrary substitution function=]
+	that represents conditional values.
+	Its argument consists of an ordered semi-colon&ndash;separated list of statements,
+	each consisting of a condition
+	followed by a colon
+	followed by the value represented by this notation
+	if the corresponding condition is the first in the list to be true.
+	If no condition matches,
+	then the ''if()'' notation represents an empty token stream.
+
+	Note: [=Arbitrary substitution functions=] all resolve at [=computed value=] time;
+	therefore if the resulting property value is invalid,
+	it falls back to the property's [=initial value=]
+	rather than to an earlier value in the [=cascade=].
+
+	The ''if()'' notation syntax is defined as follows:
+
+	<pre class=prod>
+	<dfn><<if()>></dfn> = if( [ <<if-condition>> : <<declaration-value>>? ; ]*
+	             <<if-condition>> : <<declaration-value>>? ;? )
+	<dfn><<if-condition>></dfn> =
+	  supports( [ <supports-condition> | <declaration> ] ) |
+	  media( <<media-query>> ) |
+	  style( <<style-query>> ) |
+	  else
+	</pre>
+
+	ISSUE: Incorporate boolean syntax for combining these queries.
 
 <!-- Big Text: toggle()