Make the Web Brighter with the CSS Paint API

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 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.

4f0880beebecf17d29eb709246055e14?s=128

Vitalii Bobrov

July 21, 2018
Tweet

Transcript

  1. Make the Web Brighter with the CSS Paint API

  2. Vitalii Bobrov • 5 years of front-end • build enterprise

    web apps • CSS experimenter • mentor • open-source contributor @bobrov1989 https://vitaliy-bobrov.github.io/
  3. Agenda • What is the Houdini Project? • Introduction to

    the CSS Paint API • Practice & Experiments
  4. Project Houdini

  5. Houdini Paint API

  6. We want to use the feature after browser implementation.... We

    will implement the feature when more developers will use it...
  7. None
  8. CSS Engine Internals Parser CSSOM Cascade Layout Paint Composite

  9. • Too Slow • Too Big • Too Incorrect Polyfill

    with JS
  10. Compile-time Polyfill

  11. None
  12. Worklet https://www.w3.org/TR/worklets-1/

  13. CSS Paint API

  14. ANY Property that expects an Image • background-image • border-image

    • list-style-image • custom <image> property
  15. Use in CSS

  16. https://ishoudinireadyyet.com/

  17. CSS Fallback

  18. Polyfill https://github.com/GoogleChromeLabs/css-paint-polyfill

  19. How to create Custom Paint? 1. Declare a custom paint

    class 2. Register paint 3. Load worklet
  20. 1. Declare a custom paint class

  21. 2. Register paint

  22. 3. Load worklet

  23. Practice

  24. ☢ Don't Try this at Home

  25. Paint Hello World https://vitaliy-bobrov.github.io/css-paint-demos/hello-world/

  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. CSS Paint + variables https://vitaliy-bobrov.github.io/css-paint-demos/circles-with-params/

  29. CSS Paint + variables https://vitaliy-bobrov.github.io/css-paint-demos/circles-with-params/

  30. CSS Paint + arguments https://vitaliy-bobrov.github.io/css-paint-demos/circles-with-args/

  31. CSS Paint + arguments https://vitaliy-bobrov.github.io/css-paint-demos/circles-with-args/

  32. CSS Paint + alpha

  33. Experiments

  34. chrome://flags/#enable-experimental-web-platform-features

  35. 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/

  36. Star Rating https://vitaliy-bobrov.github.io/css-paint-demos/star-rating/

  37. QR Code https://vitaliy-bobrov.github.io/css-paint-demos/qr-code/

  38. Circle Chart https://vitaliy-bobrov.github.io/css-paint-demos/circle-chart/

  39. Bar Chart https://vitaliy-bobrov.github.io/css-paint-demos/bar/

  40. JS-in-CSS https://vitaliy-bobrov.github.io/css-paint-demos/bar-js-in-css/

  41. Animations

  42. Request Animation Frame https://vitaliy-bobrov.github.io/css-paint-demos/bar-animate/

  43. Custom Properties https://vitaliy-bobrov.github.io/css-paint-demos/circles-animation-with-custom-property/

  44. Custom Properties Level 2 https://github.com/vitaliy-bobrov/postcss-register-custom-props

  45. Resources • https://developers.google.com/web/updates/2018/01/paintapi • https://www.w3.org/TR/css-paint-api-1/ • https://www.w3.org/TR/worklets-1/ • https://www.w3.org/TR/css-properties-values-api-1/ •

    https://vitaliy-bobrov.github.io/blog/exploring-the-css-paint-api/ • https://css-tricks.com/the-css-paint-api/ • https://houdini.glitch.me/
  46. Demos • https://vitaliy-bobrov.github.io/css-paint-demos/ • https://blog.pervade.tech/houdini-css-paint-demo/ • https://css-houdini.rocks/

  47. @bobrov1989 https://vitaliy-bobrov.github.io/ Thank YOU!