CSS Houdini Today

on YouTube ↗35m

" summary

Shows which CSS Houdini pieces are actually usable today: Typed OM and Properties and Values API for semantic unit values and animatable registered custom properties, and the paint worklet for off‑main‑thread drawing. Demos include animated gradients via registered properties, a rainbow/sparkles paint worklet, and a notched‑corner button (paint + mask) that works in Chrome stable and new Edge via unpkg extra.css; IE11 falls back. Advice: feature‑detect, keep it decorative, test browsers.

AI-written summary · about

" chapters (12)

1. 0:00Start
2. 0:28CSS Houdini: Progressively Enhance Houdini Features Today!
3. 3:05CSS Polyfills
4. 11:35CSS Systems
5. 13:22Fallback Values
6. 14:22Paint Worklet
7. 32:07Native Web Styling
8. 32:38With Great Power Comes Great Responsibility
9. 33:25Test Browsers Online Testing Tools
10. 33:40Keep it Decorative
11. 34:24Houdini House Rules: 1. Check Support
12. 35:00Create Responsibly

" related talks

• 26mCSS Houdini & The Future of StylingUna Kravets · JSConf EU 2019
• 22mCSS HoudiniNegar Jamalifard · JSWorld Conference 2022
• 53mCSS Houdini - from CSS variables to JavaScript and backSerg Hospodarets · NDC Oslo 2017
• 24mHoudini the new CSS MagicKarsten Buckstegge · JSUnconf 2018
• 46mGetting extra with CSS HoudiniUna Kravets · Frontend United 2019
• 48mHoudini - New Era of CSSVidit Anjaria, Saket Kumar · DrupalCon Amsterdam 2019
• 42mHow to Be #Extra with CSS HoudiniUna Kravetz · YGLF 2019: Code Camp
• 26mHoudini Tricks: Magic in the Future of CSSMassimo Artizzu · CSS Day 2019