CSS Variables: var(--subtitle)
summary
Claims that CSS custom properties are live updateable custom properties that can be read and set from JavaScript (getPropertyValue / setProperty) and used for theming, SVG, sliders, cursor-following gradients and scroll progress indicators; demos show these work. Caveats: variables are inherited by default but can be cancelled, var(...) fallbacks apply at computed-value time so cycles or nonsensical values become initial, string concatenation and url() with variables have parsing/bug issues, and variables don’t interpolate for animations yet. Browser support is widespread except Edge (coming).
AI-written summary · about
chapters (15)
- 0:00Start
- 5:41CSS Variables work like normal CSS properties
- 7:13CSS Variables are inherited properties
- 17:16Cycles make variables invalid at computed value time
- 25:08Use variables for pure data, not CSS values
- 31:00Common use Cases
- 34:28CSS Variables enable theming independent of CSS structure
- 36:29Default default values are possible
- 37:38CSS Variables make responsive design easier
- 39:25CSS Variables enable you to set multiple properties at once
- 40:45CSS Variables let you create single property mixins
- 42:24CSS Variables enable you to create custom longhands
- 43:27CSS Variables enable you to define your own properties
- 44:56CSS Variables & JavaScript
- 50:23CSS Variables are a revolution for separation of style and behavior
