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.

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
50. css-houdini.rocks
51. Thank you! Extending CSS using Houdini Arnelle Balane @arnellebalane