Demystifying CSS Custom Properties
summary
Covers CSS Custom Properties: explains their actual behavior and limitations (variable syntax and fallbacks, why concatenating units fails, why animating raw vars causes flips instead of smooth transitions) and shows solutions (animate derived properties or use css.registerProperty). Demonstrates working examples — an interactive slider and a web component styled via custom properties across Shadow DOM — and mentions polyfills (css-vars ponyfill for IE11) and upcoming features like typed animatable properties via css.registerProperty and ::part/theme for component theming.
AI-written summary · about
chapters (10)
- 0:00Start
- 1:44Basic CSS Rules
- 3:55Managing a Fallback
- 20:07The Override Problem
- 21:38Part & Theme Take Over
- 22:41Part: Delegation
- 25:00Theme: Global Targeting
- 26:15Custom Type the Problem
- 26:51Custom Type for Typing
- 27:36Possible Definitions
related talks
18mDemystifying CSS Custom Properties
37mCSS Custom Properties
31mThe rules have changed, Custom Properties!
59mKeynote: CSS Variables: var(--subtitle);
42mCustom properties as the basis of CSS architecture
42mCustom Properties as the Foundation of CSS Architecture
42mFrom CSS variables to JavaScript and back
53mCSS Variables: var(--subtitle)