@@ -100,6 +100,46 @@ Component value types</h3>
100
100
such as “+”,
101
101
must be written enclosed in single quotes.
102
102
103
+ Commas specified in the grammar are <strong> implicitly omittable</strong> in some circumstances,
104
+ when used to separate optional terms in the grammar.
105
+ Within a top-level list in a property or other CSS value,
106
+ or a function's argument list,
107
+ a comma specified in the grammar must be omitted if:
108
+
109
+ <ul>
110
+ <li>
111
+ all items preceding the comma have been omitted
112
+
113
+ <li>
114
+ all items following the comma have been omitted
115
+
116
+ <li>
117
+ multiple commas would be adjacent (ignoring whitespace/comments),
118
+ due to the items between the commas being omitted.
119
+ </ul>
120
+
121
+ <div class='example'>
122
+ For example, if a function can accept three arguments in order,
123
+ but all of them are optional,
124
+ the grammar can be written like:
125
+
126
+ <pre class='prod'>
127
+ example( first? , second? , third? )
128
+ </pre>
129
+
130
+ Given this grammar,
131
+ writing ''example(first, second, third)'' is valid,
132
+ as is ''example(first, second)'' or ''example(first, third)'' or ''example(second)'' .
133
+ However, ''example(first, , third)'' is invalid, as one of those commas are no longer separating two options;
134
+ similarly, ''example(,second)'' and ''example(first,)'' are invalid.
135
+ ''example(first second)'' is also invalid,
136
+ as commas are still required to actually separate the options.
137
+
138
+ If commas were not implicitly omittable,
139
+ the grammar would have to be much more complicated
140
+ to properly express the ways that the arguments can be omitted,
141
+ greatly obscuring the simplicity of the feature.
142
+ </div>
103
143
104
144
All CSS properties also accept the <a href="#common-keywords">CSS-wide keyword values</a>
105
145
as the sole component of their property value.
0 commit comments