@@ -41,10 +41,10 @@ and supported font technologies.
41
41
It also adds generalized conditional rules
42
42
and chained conditional rules.
43
43
44
- It also adds an ''@if '' rule,
44
+ It also adds an ''@when '' rule,
45
45
which generalizes the concept of a conditional rule.
46
46
Anything you can express in an existing conditional rule
47
- can be expressed in ''@if '' ,
47
+ can be expressed in ''@when '' ,
48
48
it just has to be wrapped in an appropriate function
49
49
to declare what kind of condition it is.
50
50
This allow authors to easily combine multiple types of queries,
@@ -104,15 +104,15 @@ when the text and layout processing engine ingesting
104
104
this CSS text is capable of utilising the specified font-technology
105
105
in layout and rendering.
106
106
107
- <h2 id="if -rule">Generalized Conditional Rules: the ''@if '' rule</h2>
107
+ <h2 id="when -rule">Generalized Conditional Rules: the ''@when '' rule</h2>
108
108
109
- The <dfn>@if </dfn> at-rule is a <a>conditional group rule</a>
109
+ The <dfn>@when </dfn> at-rule is a <a>conditional group rule</a>
110
110
that generalizes the individual <a>conditional group rules</a>
111
111
such as ''@media'' and ''@supports'' .
112
112
It is defined as:
113
113
114
114
<pre class=prod>
115
- @if <<boolean-condition>> {
115
+ @when <<boolean-condition>> {
116
116
<<stylesheet>>
117
117
}
118
118
</pre>
@@ -160,7 +160,7 @@ It is defined as:
160
160
}
161
161
</pre>
162
162
163
- ''@else'' is interpreted identically to ''@if '' .
163
+ ''@else'' is interpreted identically to ''@when '' .
164
164
If its <<boolean-condition>> is omitted,
165
165
it's treated as having a condition that's always true.
166
166
@@ -189,7 +189,7 @@ An ''@else'' rule that is not part of a <a>conditional rule chain</a> is invalid
189
189
For example, here's a (somewhat silly) conditional chain:
190
190
191
191
<pre class="lang-css">
192
- @if media(width >= 400px) and media(pointer: fine) and supports(display: flex) {
192
+ @when media(width >= 400px) and media(pointer: fine) and supports(display: flex) {
193
193
/* A */
194
194
} @else supports(caret-color: pink) and supports(background: double-rainbow()) {
195
195
/* B */
@@ -252,7 +252,7 @@ An ''@else'' rule that is not part of a <a>conditional rule chain</a> is invalid
252
252
so will always be chosen unless one of the earlier conditions succeeds.
253
253
254
254
<pre class="lang-css">
255
- @if font-technology(color-COLRv1) and font-technology(variations) {
255
+ @when font-technology(color-COLRv1) and font-technology(variations) {
256
256
@font-face { font-family: icons; src: url(icons-gradient-var.woff2); }
257
257
}
258
258
@else font-technology(color-SVG) {
@@ -272,7 +272,7 @@ An ''@else'' rule that is not part of a <a>conditional rule chain</a> is invalid
272
272
and font variations are also supported.
273
273
274
274
Notice too that only one of the available options will be downloaded;
275
- this would not be the case without @if and @else,
275
+ this would not be the case without ''@when'' and '' @else'' ,
276
276
as the next example shows.
277
277
</div>
278
278
@@ -306,7 +306,7 @@ No Security issues have been raised against this document
306
306
307
307
<h2 class=no-num id="acknowledgments">Acknowledgments</h2>
308
308
309
- The @if and @else rules are based on a proposal by Tab Atkins.
309
+ The @when and @else rules are based on a proposal by Tab Atkins.
310
310
311
311
<h2 id='changes' class='no-num'>
312
312
Changes</h2>
@@ -317,7 +317,7 @@ The @if and @else rules are based on a proposal by Tab Atkins.
317
317
318
318
<ul>
319
319
<li> Added some examples</li>
320
- <li> Added @if and @else per CSSWG resolution</li>
320
+ <li> Added @when and @else per CSSWG resolution</li>
321
321
<li> Extended @supports feature to express font capabilities</li>
322
322
<li> Added two co-editors per CSSWG resolution</li>
323
323
<li> Added Privacy and Security sections</li>
0 commit comments