CSS if() Function: Inline Conditionals in Custom Properties

The CSS if() function (CSS Values Level 5, shipping in Chrome 137+ behind a flag) allows inline conditionals directly in property values — eliminating the need to create separate modifier classes for simple boolean states. Combined with style queries and custom properties, if() makes component theming dramatically more concise.

Problem: CSS custom properties require JavaScript or media queries to conditionally apply different values based on context — there is no native CSS syntax to write inline conditionals like "if this property equals X, use Y, else use Z".

Solution: Use the CSS if() function (landed in Chrome 137+) to write inline conditionals directly in property declarations: color: if(style(--variant: primary): blue; else: gray). This eliminates the need for multiple CSS classes or JavaScript toggling to switch between value variants based on custom property state.

The examples below show basic if() syntax, using it with custom properties to toggle visual states, and a WordPress block stylesheet pattern that replaces modifier classes with inline conditionals.

/* ── 1. Basic if() syntax ────────────────────────────────────────────────
   if(  :  ; else  )           */

.button {
    --is-primary: ;   /* empty = falsy custom property */

    background: if(
        style(--is-primary: true) : var(--color-accent) ;
        else                      : transparent
    );

    color: if(
        style(--is-primary: true) : white ;
        else                      : var(--color-accent)
    );

    border: 2px solid var(--color-accent);
}

/* Set the flag to activate primary style */
.button.is-primary {
    --is-primary: true;
}

/* ── 2. Multi-state component with if() ─────────────────────────────────── */
.alert {
    --variant: info;   /* default */

    background: if(
        style(--variant: success) : #d4edda ;
        style(--variant: warning) : #fff3cd ;
        style(--variant: error)   : #f8d7da ;
        else                      : #d1ecf1
    );

    border-color: if(
        style(--variant: success) : #28a745 ;
        style(--variant: warning) : #ffc107 ;
        style(--variant: error)   : #dc3545 ;
        else                      : #17a2b8
    );

    border-left: 4px solid;
    padding: 1rem 1.25rem;
    border-radius: 4px;
}

/* ── 3. WordPress block: if() replaces BEM modifiers ─────────────────── */
.wp-block-my-plugin-card {
    --featured: ;

    box-shadow: if(
        style(--featured: true) : 0 4px 20px oklch(50% .2 250 / .3) ;
        else                    : 0 1px 4px oklch(0% 0 0 / .1)
    );

    border: if(
        style(--featured: true) : 2px solid var(--wp--preset--color--accent) ;
        else                    : 1px solid var(--wp--preset--color--contrast-3, #ddd)
    );
}

.wp-block-my-plugin-card.is-featured {
    --featured: true;
}

NOTE: CSS if() is at the experimental stage — it requires a flag in Chrome 137 and is not yet in Firefox or Safari; use it today only in progressive-enhancement contexts where the fallback (the else branch or the initial property value) is visually acceptable in browsers that do not yet support it.