CSS Variables: var(–subtitle)
summary
Claims that CSS custom properties are usable now and more powerful than preprocessor variables, demonstrated with live demos: themable buttons, SVG “eyes” linked to mouse, scroll-driven styles. Shows actual APIs (var() usage, getComputedStyle/setProperty), where things fail (CSS variables don’t work inside URL parsing, no string concatenation, animation interpolation is limited), and browser reality (supported everywhere except Edge). Demos mostly work but expose spec limits and Chrome bugs.
AI-written summary · about
chapters (25)
- 0:00Introduction
- 1:05CSS Variables
- 4:20CSS Variable Inheritance
- 10:14Fallback
- 13:55Size
- 15:09Background declarations
- 16:16App Supports Rule
- 17:00Browser Support
- 18:17Viewport Units
- 20:48Multiplication
- 21:16Animation
- 22:56JavaScript
- 24:55Common use cases
- 27:32CSS variables enable theming
- 28:45CSS variables in responsive design
- 29:47CSS variables for auto prefixing
- 31:38CSS variables for multiple properties
- 32:25CSS variables for properties
- 34:18CSS variables for SVG
- 35:39CSS variables for Java
- 36:31CSS variable example
- 38:03CSS variable on input event
- 39:05CSS variable on scroll
- 40:38CSS variable revolution
- 41:14Summary
related talks
53mCSS Variables: var(--subtitle)
59mKeynote: CSS Variables: var(--subtitle);
18mDemystifying CSS Custom Properties
27mCSS Variables A New Hope
34mCSS Variables. What Do They Know? Do They Know Things?? Let's Find Out!
53mVariables & Conditionals
38mDemystifying CSS Custom Properties
53mCSS Houdini - from CSS variables to JavaScript and back