v137 · css

CSS if() function

The CSS if() function provides a concise way to express conditional values. It accepts a series of condition-value pairs, delimited by semicolons. The function evaluates each condition sequentially and returns the value associated with the first true condition. If none of the conditions evaluate to true, the function returns an empty token stream. This allow

concepts

  1. if()

    CSS if() — inline conditionals that pick a value based on a media/supports/style query. Removes a class of cascade-juggling for conditional design tokens.

  2. Responsive Tokens

    One if(media()) per design token. A breakpoint ladder for colour, font-size, and padding lives in one declaration each — drag the stage and watch all three change together.

  3. if() resolver

    Tweak the environment (custom props, media features, viewport width) and watch the resolver pick a winning arm. Visualises short-circuit evaluation, generates the exact CSS, paints the resolved colour on a live target.

  4. Component Variants

    Encode size, intent, and state variants of a button and alert component entirely in CSS using if(style()). One class, no JavaScript toggle — just set a custom property and the component re-styles itself.

  5. Dark Mode Tokens

    Each design token is a single if(media(prefers-color-scheme: dark): …; else: …) declaration — no separate @media block. A full 10-token system for bg/fg/border/accent with live force-light/dark preview and a token inventory table.

  6. Progressive Enhancement

    Per-property fallbacks with if(supports(…)): corner-shape squircle → round fallback, text-box trim → normal, container-type grid → block flow. Each property carries its own enhancement inline — no separate @supports block needed.

why it shipped

The CSS if() function provides a way for web authors to express complex conditional logic in a simple and concise way. The initial GitHub proposal had a positive feedback from web developers. One of the use-cases might be using "if()" in custom functions, https://drafts.csswg.org/css-mixins-1/#defining-custom-functions.

references