Demystifying CSS Custom Properties
summary
The talk explains practical use of CSS Custom Properties (CSS variables), showing they inherit and cascade, accept arbitrary strings, support fallback chains, and can be modified from JavaScript via the CSSOM API to drive live UI (a range-input demo updates multiple properties). It also covers limitations: you cannot safely concatenate units or URL fragments with variables, animations won’t interpolate unless a variable is typed or replaced by a real CSS property, and registerProperty can be used to define typed properties that fix animation behavior.
AI-written summary · about
chapters (16)
- 0:00Introduction
- 0:22CSS Custom Properties overview
- 1:49Advantages of variables
- 3:13Fallback and inheritance
- 5:07Specificity and inheritance
- 6:30Limitations of variables
- 8:56Concatenation workarounds
- 9:17URLs and variables issues
- 10:00CSS variables animation
- 11:05CSS preprocessors vs variables
- 11:47Dynamic pages with JS
- 13:24Interactive demo: input range
- 15:09Web Components & Shadow DOM
- 15:50Overriding in Web Components
- 16:52@property advanced solutions
- 17:20Conclusion & Q&A
related talks
38mDemystifying CSS Custom Properties
42mCustom Properties as the Foundation of CSS Architecture
31mThe rules have changed, Custom Properties!
42mCustom properties as the basis of CSS architecture
59mKeynote: CSS Variables: var(--subtitle);
26mThe strategy guide to CSS Custom Properties
37mCSS Custom Properties
53mCSS Variables: var(--subtitle)