Houdini: Abracadabra CSS

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

11. None
12. None
13. None

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_