Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Extending CSS using Houdini

Extending CSS using Houdini

CSS Houdini is a group of low-level browser APIs that allows developers to hook into the browser's rendering engine, allowing for custom paint, layout, and other styling capabilities. In this deck, we will learn about the various CSS Houdini APIs and how to use them.

32c638e7a3a466d182705fb4370cbb2e?s=128

Arnelle Balane

February 27, 2021
Tweet

More Decks by Arnelle Balane

Other Decks in Technology

Transcript

  1. Extending CSS using Houdini Arnelle Balane @arnellebalane

  2. Arnelle Balane Tech Lead @ Newlogic Google Developers Expert for

    Web Technologies @arnellebalane UncaughtException @uncaughtxcptn Subscribe to our channel! /UncaughtException
  3. bit.ly/cds-cebu-houdini

  4. what is Houdini

  5. Houdini • a collection of JavaScript APIs

  6. Houdini • a collection of JavaScript APIs • allows us

    to hook into the browser’s rendering engine
  7. Houdini • a collection of JavaScript APIs • allows us

    to hook into the browser’s rendering engine • extends CSS, at CSS speed!
  8. ishoudinireadyyet.com

  9. How browsers render pages

  10. Houdini Paint API

  11. Paint API Draw an image as background using JavaScript

  12. paint()

  13. paint(worklet)

  14. background-image: paint(worklet);

  15. background-image: paint(worklet, red);

  16. background-image: paint(worklet, red); <-custom-prop: 12px;

  17. CSS.paintWorklet .addModule('worklet.js'); Load the paint worklet

  18. houdini.how

  19. paintlets.herokuapp.com

  20. npm: houdini paint worklet

  21. import worklet from "url-loader!<package>/worklet.js"; CSS.paintWorklet.addModule(worklet); Usage with bundlers

  22. Demo time! ✨

  23. Creating our own Paint Worklet

  24. class MyWorklet { paint() { </ magic ✨ } }

    worklet.js
  25. class MyWorklet { paint() { </ magic ✨ } }

    registerPaint('my-worklet', MyWorklet); worklet.js
  26. class MyWorklet { paint(ctx, geometry) { </ magic ✨ }

    } registerPaint('my-worklet', MyWorklet); worklet.js
  27. class MyWorklet { paint(ctx, geom) { ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(geom.width,

    geom.height); ctx.stroke(); } } worklet.js
  28. class MyWorklet { paint(ctx, geom) { ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(geom.width,

    geom.height); ctx.stroke(); } } worklet.js
  29. class MyWorklet { static get inputProperties() { return ['<-line-width', '<-line-color'];

    } paint(ctx, geom, props) { </ magic ✨ } } worklet.js
  30. class MyWorklet { static get inputProperties() { return ['<-line-width', '<-line-color'];

    } paint(ctx, geom, props) { const width = props.get('<-line-width'); const color = props.get('<-line-color'); </ magic ✨ } } worklet.js
  31. <-line-width: 3px; <-line-color: red; CSSUnparsedValue { ' 3px' } CSSUnparsedValue

    { ' red' }
  32. <-line-width: 3rem; <-line-color: red; CSSUnparsedValue { ' 3rem' } CSSUnparsedValue

    { ' red' }
  33. CSS.registerProperty({ name: '<-line-width', syntax: '<length>', inherits: false, initialValue: 3px });

    index.js Houdini Properties & Values API
  34. CSS.registerProperty({ name: '<-line-width', syntax: '<length>', inherits: false, initialValue: 3px });

    index.js <length> <number> <percentage> <color> <image> <url> <angle> <<. https://www.w3.org/TR/css-propertie s-values-api-1/#syntax-string
  35. @property <-line-width { syntax: '<length>'; inherits: false; initial-value: 3px; }

  36. <-line-width: 3px; <-line-color: red; CSSUnitValue { value: 3, unit: 'px'

    } CSSStyleValue { 'rgb(255, 0, 0)' }
  37. <-line-width: 3rem; <-line-color: #ff0000; CSSUnitValue { value: 48, unit: 'px'

    } CSSStyleValue { 'rgb(255, 0, 0)' }
  38. <-line-width: 3rem; <-line-color: #ff0000; CSSUnitValue { value: 48, unit: 'px'

    } CSSStyleValue { 'rgb(255, 0, 0)' } ✨ Houdini TypedOM
  39. class MyWorklet { static get inputProperties() {✨} paint(ctx, geom, props)

    { ctx.lineWidth = props.get('<-line-width').value; ctx.strokeStyle = props.get('<-line-color').toString(); </ magic ✨ } } worklet.js
  40. class MyWorklet { static get inputProperties() {✨} paint(ctx, geom, props)

    { ctx.lineWidth = props.get('<-line-width').value; ctx.strokeStyle = props.get('<-line-color').toString(); </ magic ✨ } } worklet.js
  41. class MyWorklet { static get inputArguments() { return ['<length>', '<color>'];

    } paint(ctx, geom, props, args) { const width = args[0].value; const color = args[0].toString(); </ magic ✨ } } worklet.js
  42. Demo time! ✨

  43. css-paint-polyfill

  44. <script src="https:</unpkg.com/css-paint-polyfill" ></script> import 'css-paint-polyfill'; Using the polyfill

  45. What’s so exciting about Houdini?

  46. Houdini • Fancy backgrounds • Reduce number of DOM nodes

    • CSS polyfills
  47. None
  48. None
  49. None
  50. css-houdini.rocks

  51. Thank you! Extending CSS using Houdini Arnelle Balane @arnellebalane