CSS Variable Secrets
summary
Most teams treat CSS custom properties as constants but metrics from the Web Almanac show roughly two‑thirds of usages have zero variable depth, so deeper patterns matter. Demos register properties via CSS @property / css.registerProperty to enable smooth hue animation, inherit true lengths, and coerce integers; pragmatic techniques include space toggle to turn whole declarations off, the counter trick to print numbers, and linear range mapping to map 0–1 inputs to colors and geometry. Examples (buttons, rainbow hover, bar chart, speech bubble) work where browser support exists and fall back where it doesn’t.
AI-written summary · about
chapters (13)
- 0:00Start
- 8:38CSS variables are just regular properties
- 11:48Pseudo-private variables succinctly reduce fallback duplication
- 12:59CSS Variables allow us to create a higher level styling API
- 16:23CSS variables cannot be interpolated
- 19:18@property-defined initial values take precedence over var() fallback
- 38:08Use variables for pure data, not CSS values
- 39:51content only accepts strings. You can convert numbers to strings via counter-reset.
- 41:51Convert a number to an integer by assigning it to a property registered as "" inside calc()
- 47:08Linear mapping allows the same variable to control multiple things, continously or discretely
- 49:27Range mapping allows you to decouple input from output
- 51:56Relative values inherit as syntax tokens unless the property is registered
- 55:22The syntax of registered properties is only checked at computed value time.
related talks
01h 03mCSS Variable Secrets
37mCSS Custom Properties
59mKeynote: CSS Variables: var(--subtitle);
34mCSS Variables. What Do They Know? Do They Know Things?? Let's Find Out!
18mDemystifying CSS Custom Properties
38mDemystifying CSS Custom Properties
53mCSS Variables: var(--subtitle)
28mStrategy Guide for CSS Custom Properties