Make the Web Brighter with the CSS Paint API
summary
Explains how to replace images and DOM hacks with small JavaScript paint modules that run on the browser paint stage: author builds paint worklet classes with a paint(context, geometry, props) method, registers them via registerPaint, and loads them with CSS paint(name). Demos include procedural backgrounds (worklet ~800 bytes vs tens of kilobyte JPEGs), ripple buttons that remove extra spans, star ratings, QR-code and chart renderers, JSON-fed bar charts, and animations using requestAnimationFrame and custom property types; works in Chrome 65+ and Safari tech preview with safe fallbacks.
AI-written summary · about
chapters (23)
- 0:00Start
- 3:37CSS Engine Internals
- 4:07Polyfill with JS
- 5:06Compile-time Polyfill
- 9:04CSS Fallback
- 9:39How to create Custom Paint?
- 10:08Declare a custom paint class
- 10:38Register paint
- 10:54Load worklet
- 11:37Paint Hello World
- 12:58CSS Paint + variables
- 14:11CSS Paint + arguments
- 15:33CSS Paint + alpha
- 16:14chrome://flags/#enable-experimental-web-platform-feature
- 16:45Generative Backgrounds
- 18:02Material Background
- 19:21Safe the DOM
- 20:31QR Code
- 22:28Circle Chart
- 22:40Bar Chart
- 24:12Request Animation Frame
- 25:55Custom Properties Level 2
- 29:07Awesome Houdini
