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 impossible 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); }
    }