v136 · css
Theme Escape Hatch
A component registers --card-bg as <color>. Design themes supply gradients and unresolved tokens as the fallback — a type mismatch the spec calls "invalid at computed value time." Chrome 136's type-agnostic fallback rule uses those fallbacks as-is, unlocking gradient theming for typed design systems without JS.
Feature detection: checking…
The card component uses @property typed tokens. Themes supply gradients as fallbacks — a type mismatch. On Chrome 136+ the gradient resolves; older browsers fall back to the registered initial value.
Chrome 136+ (type-agnostic)
Component
Uses
Active
var(--card-bg). Gradient fallback resolves.Pre-Chrome 136 (type-validated)
Component
Type mismatch → falls to initial
Active
#fafaf7. Gradient dropped.Computed value inspector
Select a theme to inspect…
Resolved token values — current theme
/* Component registers typed tokens */
@property --card-bg {
syntax: '';
inherits: true;
initial-value: #fafaf7;
}
/* Theme supplies gradient as fallback
(--theme-gradient is undefined, so fallback fires) */
.theme-gradient {
--card-bg: var(--theme-gradient,
linear-gradient(135deg, #e8eeff 0%, #f0efe9 100%)
);
}
/* Chrome 136+: type-agnostic fallback → gradient is used */
/* Pre-136: type mismatch → initial value #fafaf7 is used */
/* Component — no changes needed */
.card { background: var(--card-bg); }