v136 · css

Fallback Chain

A deep var(--a, var(--b, var(--c, red))) chain where each link may be defined, undefined, or typed. Chrome 136's type-agnostic fallback means the browser walks the chain and uses the first resolved value regardless of whether any intermediate token has a type annotation — no more surprise drops to the registered initial.

Feature detection: checking…

Configure a three-link fallback chain. Mark each token as defined, undefined, or registered<color> with a mismatched value to see how Chrome 136+ resolves the chain step by step.

Presets:
Chain configuration
--chain-a
--chain-b
--chain-c
Loading…
Chrome 136+ (type-agnostic)
Walks chain, uses first resolved value regardless of type
evaluating…
Pre-Chrome 136 (type-validated)
Type mismatch → IACVT → falls to registered initial value
evaluating…
Resolution steps
/* Three-link fallback chain */
.element {
  background: var(--chain-a,
    var(--chain-b,
      var(--chain-c, #fallback)
    )
  );
}

/* Chrome 136+: if --chain-a is undefined,
   try --chain-b; if that's a gradient but --chain-a
   is registered , the type-agnostic rule
   still uses the gradient rather than throwing it away */

/* Pre-136: a type mismatch at any point causes
   IACVT (invalid at computed value time) →
   the registered initial value is used instead */

see also