Make the Web Brighter with the CSS Paint API

Using experimental CSS features in production is a web developer dream!

Do you want to extend CSS functionality with your code? During this talk, I will show how to programmatically generate an image for any CSS property that can use pictures with CSS Paint API. We will go from the basics to advanced features through amazing practical examples. With few lines of JavaScript, you could create and register own CSS functions similar to linear-gradient.

Afterward, you will be able to develop polyfills for a feature from spec draft or create cool backgrounds with code, with safe fallbacks that you can use in production right now.

Transcript

1. Make the Web Brighter with the CSS Paint API
2. Vitalii Bobrov • Angular Wroclaw co-org • CSS experimenter • mentor • open-source contributor @bobrov1989 https://vitaliy-bobrov.github.io/
3. Angular Wrocław https://meetup.com/AngularJS-Wrocław/ @AngularWroclaw
4. Project Houdini
6. Houdini Paint API
7. We want to use the feature after browser implementation.... We will implement the feature when more developers will use it...
9. CSS Engine Internals Parser CSSOM Cascade Layout Paint Composite
10. • Too Big & Slow • Too Late • Too Incorrect Polyfill with JS
11. Compile-time Polyfill
13. Worklet https://www.w3.org/TR/worklets-1/
14. CSS Paint API
15. ANY Property that expects an Image • background-image • border-image • list-style-image • custom <image> property
16. Use in CSS
17. https://ishoudinireadyyet.com/
18. CSS Fallback
19. Polyfill https://github.com/GoogleChromeLabs/css-paint-polyfill by Jason Miller (@_developit) - Preact creator
20. How to create Custom Paint? 1. Declare a custom paint class 2. Register paint 3. Load worklet
21. 1. Declare a custom paint class
22. 2. Register paint
23. 3. Load worklet
24. Practice
25. ☢ Don't Try this at Home
26. Paint Hello World https://vitaliy-bobrov.github.io/css-paint-demos/hello-world/
27. Paint Hello World https://vitaliy-bobrov.github.io/css-paint-demos/hello-world/
28. Paint Hello World https://vitaliy-bobrov.github.io/css-paint-demos/hello-world/
29. CSS Paint + variables https://vitaliy-bobrov.github.io/css-paint-demos/circles-with-params/
30. CSS Paint + variables https://vitaliy-bobrov.github.io/css-paint-demos/circles-with-params/
31. CSS Paint + arguments https://vitaliy-bobrov.github.io/css-paint-demos/circles-with-args/
32. CSS Paint + arguments https://vitaliy-bobrov.github.io/css-paint-demos/circles-with-args/
33. CSS Paint + alpha
34. Experiments
35. chrome://flags/#enable-experimental-web-platform-features
36. Generative Backgrounds https://vitaliy-bobrov.github.io/css-paint-demos/pattern-bg/ https://vitaliy-bobrov.github.io/css-paint-demos/md-bg/ https://vitaliy-bobrov.github.io/css-paint-demos/responsive/
37. Material Background https://vitaliy-bobrov.github.io/css-paint-demos/md-bg/ CSS Paint Image vs
38. Material Background https://vitaliy-bobrov.github.io/css-paint-demos/md-bg/ CSS Paint Image vs 813 bytes 2.39 KB Worklet file only few bytes of CSS + init JS compressed JPEG cropped for mobile
39. Safe the DOM https://css-houdini.rocks/ripple
40. Star Rating https://vitaliy-bobrov.github.io/css-paint-demos/star-rating/
41. QR Code https://vitaliy-bobrov.github.io/css-paint-demos/qr-code/
42. Circle Chart https://vitaliy-bobrov.github.io/css-paint-demos/circle-chart/
43. Bar Chart https://vitaliy-bobrov.github.io/css-paint-demos/bar/
44. JS-in-CSS https://vitaliy-bobrov.github.io/css-paint-demos/bar-js-in-css/
45. Animations
46. Request Animation Frame https://vitaliy-bobrov.github.io/css-paint-demos/bar-animate/
47. Custom Properties https://vitaliy-bobrov.github.io/css-paint-demos/circles-animation-with-custom-property/
48. Custom Properties Level 2 https://github.com/vitaliy-bobrov/postcss-register-custom-props
49. Awesome Houdini https://github.com/nucliweb/awesome-css-houdini
50. @bobrov1989 https://vitaliy-bobrov.github.io/ Thank YOU!