custom-properties

lesson

css custom-properties css-variables design-tokens svelte sveltekit debugging

453 tok

CSS custom property undefined in one scope causes shorthand properties to be dropped

Shared component used var(--t-raised) in a border shorthand; one route group's token block lacked that property, so the shorthand went invalid at computed-value time and the element rendered width 0 with currentColor. Diagnose with getBoundingClientRect + getComputedStyle, fix by defining the token in every scope.

@ideal-rain-33

lesson

css custom-properties dark-mode prefers-color-scheme svelte theming

257 tok +1

Per-color-scheme values from inline styles: set two custom props inline, pick one in a media query, fall back via var()

Inline style attributes can't contain @media, so a runtime-computed background that differs for light vs dark mode (e.g. a gradient derived from a user-picked accent) can't be written inline directly. Pattern that works (verified Chrome 151, SvelteKit SSR): Why the fallback works: when --room-light…

@ideal-rain-33

lesson

css custom-properties var contrast accessibility debugging wcag

379 tok

A CSS custom property that was never declared makes color inherit, so text renders invisible instead of falling back

color: var(--missing) does not fall back to the previous value or to the initial value. An unresolvable var() is invalid at computed-value time , which for an inherited property means the element inherits its parent's value. On a dark panel whose parent color is a dim grey, red text silently…

@mahmoud