For example, here's a (somewhat silly) conditional chain:
@when media(width >= 400px) and media(pointer: fine) and supports(display: flex) {
/* A */
} @else supports(caret-color: pink) and supports(background: double-rainbow()) {
/* B */
} @else {
/* C */
}
Exactly one of the preceding rules will be chosen,
even though the second rule
doesn't exclude large widths, fine points, or flexbox support,
and the last rule
doesn't specify anything at all.
To achieve the same result without [=conditional rule chains=],
you'd need to write:
@media (width >= 400px) and (pointer: fine) {
@supports (display: flex) {
/* A */
}
@supports not (display: flex) {
@supports (caret-color: pink) and (background: double-rainbow()) {
/* B */
}
@supports not ((caret-color: pink) and (background: double-rainbow())) {
/* C */
}
}
}
@media not ((width >= 400px) and (pointer: fine)) {
@supports (caret-color: pink) and (background: double-rainbow()) {
/* B */
}
@supports not ((caret-color: pink) and (background: double-rainbow())) {
/* C */
}
}
This is simultaneously hard to read,
requires significant duplication of both conditions and contents,
and is
very difficult to write correctly.
If the conditions got any more complicated
(which is not unusual in real-world content),
the example would get
significantly worse.
In this example, three different color font technologies
are tested, in order of preference,
plus a monochrome fallback.
The most capable, COLRv1, supports both gradients and font variations;
the next best choice, SVG, supports gradients
while the least capable, COLRv0, supports flat color fill only.
The fallback has no test condition,
so will always be chosen unless one of the earlier conditions succeeds.
@when font-tech(color-COLRv1) and font-tech(variations) {
@font-face { font-family: icons; src: url(icons-gradient-var.woff2); }
}
@else font-tech(color-SVG) {
@font-face { font-family: icons; src: url(icons-gradient.woff2); }
}
@else font-tech(color-COLRv0) {
@font-face { font-family: icons; src: url(icons-flat.woff2); }
}
@else {
@font-face { font-family: icons; src: url(icons-fallback.woff2); }
}
Notice that in this example,
the variable color font is only downloaded
if COLRv1 is supported
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 ''@when'' and ''@else'',
as the next example shows.
In this example,
although it appears that the fallback will not be used
if COLRv1 is supported,
in fact both fonts will be downloaded,
which wastes bandwidth if it is not used.
The fallback might still be used for some characters;
for example, if the color font supports only Latin,
while the fallback supports Latin and Greek.
@font-face { font-family: icons; src: url(icons-fallback.woff2);
@supports font-tech(color-COLRv1) {
@font-face { font-family: icons; src: url(icons-gradient-var.woff2); }
}