Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 11 additions & 11 deletions css-conditional-4/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -41,10 +41,10 @@ and supported font technologies.
It also adds generalized conditional rules
and chained conditional rules.

It also adds an ''@if'' rule,
It also adds an ''@when'' rule,
which generalizes the concept of a conditional rule.
Anything you can express in an existing conditional rule
can be expressed in ''@if'',
can be expressed in ''@when'',
it just has to be wrapped in an appropriate function
to declare what kind of condition it is.
This allow authors to easily combine multiple types of queries,
Expand Down Expand Up @@ -104,15 +104,15 @@ when the text and layout processing engine ingesting
this CSS text is capable of utilising the specified font-technology
in layout and rendering.

<h2 id="if-rule">Generalized Conditional Rules: the ''@if'' rule</h2>
<h2 id="when-rule">Generalized Conditional Rules: the ''@when'' rule</h2>

The <dfn>@if</dfn> at-rule is a <a>conditional group rule</a>
The <dfn>@when</dfn> at-rule is a <a>conditional group rule</a>
that generalizes the individual <a>conditional group rules</a>
such as ''@media'' and ''@supports''.
It is defined as:

<pre class=prod>
@if <<boolean-condition>> {
@when <<boolean-condition>> {
<<stylesheet>>
}
</pre>
Expand Down Expand Up @@ -160,7 +160,7 @@ It is defined as:
}
</pre>

''@else'' is interpreted identically to ''@if''.
''@else'' is interpreted identically to ''@when''.
If its <<boolean-condition>> is omitted,
it's treated as having a condition that's always true.

Expand Down Expand Up @@ -189,7 +189,7 @@ An ''@else'' rule that is not part of a <a>conditional rule chain</a> is invalid
For example, here's a (somewhat silly) conditional chain:

<pre class="lang-css">
@if media(width >= 400px) and media(pointer: fine) and supports(display: flex) {
@when media(width >= 400px) and media(pointer: fine) and supports(display: flex) {
/* A */
} @else supports(caret-color: pink) and supports(background: double-rainbow()) {
/* B */
Expand Down Expand Up @@ -252,7 +252,7 @@ An ''@else'' rule that is not part of a <a>conditional rule chain</a> is invalid
so will always be chosen unless one of the earlier conditions succeeds.

<pre class="lang-css">
@if font-technology(color-COLRv1) and font-technology(variations) {
@when font-technology(color-COLRv1) and font-technology(variations) {
@font-face { font-family: icons; src: url(icons-gradient-var.woff2); }
}
@else font-technology(color-SVG) {
Expand All @@ -272,7 +272,7 @@ An ''@else'' rule that is not part of a <a>conditional rule chain</a> is invalid
and font variations are also supported.

Notice too that only one of the available options will be downloaded;
this would not be the case without @if and @else,
this would not be the case without ''@when'' and ''@else'',
as the next example shows.
</div>

Expand Down Expand Up @@ -306,7 +306,7 @@ No Security issues have been raised against this document

<h2 class=no-num id="acknowledgments">Acknowledgments</h2>

The @if and @else rules are based on a proposal by Tab Atkins.
The @when and @else rules are based on a proposal by Tab Atkins.

<h2 id='changes' class='no-num'>
Changes</h2>
Expand All @@ -317,7 +317,7 @@ The @if and @else rules are based on a proposal by Tab Atkins.

<ul>
<li>Added some examples</li>
<li>Added @if and @else per CSSWG resolution</li>
<li>Added @when and @else per CSSWG resolution</li>
<li>Extended @supports feature to express font capabilities</li>
<li>Added two co-editors per CSSWG resolution</li>
<li>Added Privacy and Security sections</li>
Expand Down