Keynote: CSS Variables: var(--subtitle);

on YouTube ↗59m

" summary

CSS Custom Properties are usable today not just as prettier Sass variables but as real CSS properties that work like normal inherited properties and can be set inline or by JS. Live demos show gradients, themable buttons, SVG eyes, sliders and scroll progress bars built with variables and they work, with caveats: cannot concatenate strings or use variables in property names or media queries; cycles become invalid and animations flash unless JS metadata is provided. Browser support hits ~85% in the presenter’s chart and JavaScript can set/get them via setProperty/getPropertyValue to drive UI state.

AI-written summary · about

" chapters (14)

1. 0:00Introduction
2. 1:36CSS variables basics
3. 6:04Inheritance and scope
4. 9:01URL and string limitations
5. 12:31Fallbacks and computed values
6. 14:42Imperative vs declarative
7. 18:34Browser support
8. 22:12Using @supports
9. 23:34Parsing and units
10. 27:24Animations and transitions
11. 31:27Component design patterns
12. 35:11Practical use cases
13. 40:44JS and CSS integration
14. 57:11Conclusion

" related talks

• 53mCSS Variables: var(--subtitle)Lea verou · CSSConf.Asia 2016
• 44mCSS Variables: var(–subtitle)Lea verou · Web Unleashed 2016
• 18mDemystifying CSS Custom PropertiesJean-francois Garreau, Audrey Garreau · DevFest du bout du monde 2019
• 37mCSS Custom PropertiesMichelle Barker · SmashingConf Live 2020
• 34mCSS Variables. What Do They Know? Do They Know Things?? Let's Find Out!Mikołaj Dobrucki · Codemotion Berlin 2019
• 38mDemystifying CSS Custom PropertiesJean-francois Garreau, Audrey Garreau · DevFest Paris 2019
• 59mCSS Variable SecretsLea verou · CSS Day 2022
• 42mCustom properties as the basis of CSS architecturePavel Lovtsevich · FrontTalks 2016