Houdini: Abracadabra CSS

Houdini: Abracadabra CSS

at #dogenzakabeerbash

3cf7515c93d2f278420f0147788c8e23?s=128

Masaaki Morishita

October 19, 2016
Tweet

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_