Houdini: Abracadabra CSS

at #dogenzakabeerbash

Transcript

1. Houdini: Abracadabra CSS @morishi(er_
2. About me .about-me { name: Masaaki Morishita; twitter: @morishitter_; github: morishitter; qiita: morishitter; specializing-in: CSS; works-at: 'Increments, inc.'; }
3. Do you love CSS?
4. CSS is easy :) • ؆୯ͳߏจ • ΧεέʔσΟϯάʢৄࡉ౓ɺܧঝʣ .selector { property: value; } ͜Ε͚ͩ
5. but, CSS is broken...
6. CSS is missing ;( • ߏ଄Խ • ந৅Խ • ϧʔϧηοτͷείʔϓ
7. "Cascading Shit Show" by @fat h"ps:/ /www.youtube.com/watch? v=iniwPUEbPUM
8. CSS preprocessors? • e.g. Sass, Less, Stylus • ඪ४ٕज़Ͱ͸ͳ͍ • γϯλοΫεγϡΨʔ • PostCSS? • PostCSS͸ͨͩͷύʔαʔ • cssnext͸ ϙϦϑΟϧͰ͸ͳ͍
9. We need polyfils of CSS
10. but, it's very hard to create
14. Houdini
15. Extensible web h"ps:/ /extensiblewebmanifesto.org/
16. Extensible Web • ϒϥ΢βͷػೳʹΞΫηε͢Δ௿ϨΠϠʔͷAPIΛఏڙ • ࢓༷ͷࡦఆ΍ɺϒϥ΢βͷ࣮૷Λ଴ͨͣʹ։ൃऀ͸࣮૷Ͱ͖Δ • ࢓༷ͷఏҊʹ΋ͭͳ͕Δ • Houdini͸ͦͷCSSͷͨΊͷ΋ͷ
17. Houdini • Typed OM • Proper-es and Values API • Pain-ng API • Layout API • Font Metrics API • Parser API • Worklets
18. Typed OM document.querySelector('#element') .style.opacity = '0.5px'; ↓ document.querySelector('#element') .styleMap.set('opacity', new CSSNumberValue(0.5)); document.querySelector('#element') .styleMap.get('opacity').value; // 0.5
19. Typed OM • ࠓ·Ͱ͸ element.style ͷจࣈྻΛ͜Ͷ͘Γճ͚ͩ͢ • styleMap ΦϒδΣΫτͱ஋ͷΫϥεΛ௥Ճ • JS͔ΒCSSΛѻ͍΍͘͢ͳΔ • CanaryͰflagΛONʹ͢Δͱ෦෼తʹ࢖͑Δ
20. Proper&es and Values API .foo { --opacity: 1; --opacity: 'foo'; opacity: var(--opacity); /* ແޮͳ஋ͳͷͰύʔαʔ͕উखʹ࡟আ */ } document.registerProperty({ name: '--my-opacity', syntax: '<number>', // type check inherits: false, // ܧঝͤ͞Δ͔Ͳ͏͔ initialValue: 1 // ॳظ஋ });
21. Pain%ng API <div id="foo"></div> <style> #foo { --image: url('#url'); background-image: paint(image-with-placeholder); } </style>
22. Paint Worklet document.registerProperty({ name: '--image', syntax: '<image>' }); window.paintWorklet.import('paintworklet.js'); registerPaint('image-with-placeholder', class { static get inputProperties() { return ['--image']; } paint(ctx, geom, properties) { const img = properties.get('--image'); switch (img.state) { // } } })
23. Paint Worklet • CanvasͷΑ͏ͳ΋ͷ • Canvas͸CPU΋ϝϞϦ΋৯͏ • CanaryͰflagΛONʹ͢Δͱ෦෼తʹ࢖͑Δ
24. Layout API <div id="myElement"> <div> CSS is awesome. </div> </div> <style> #myElement { display: layout('simple-flow'); } </style>
25. Layout Worklet registerLayout('simple-flow', class { static get inputProperties() { return ['width', 'height'] } static get childrenInputProperties() { return ['x', 'y', 'position'] } layout(children, constraintSpace, styleMap, breakToken) { // } }
26. Is Houdini ready yet? h"ps:/ /ishoudinireadyyet.com
27. Thanks :D @morishi(er_