Tweet
Tweet

Slide 1

Slide 1 text

Houdini: Abracadabra CSS @morishi(er_

Slide 2

Slide 2 text

About me .about-me { name: Masaaki Morishita; twitter: @morishitter_; github: morishitter; qiita: morishitter; specializing-in: CSS; works-at: 'Increments, inc.'; }

Slide 3

Slide 3 text

Do you love CSS?

Slide 4

Slide 4 text

CSS is easy :) • ؆୯ͳߏจ • ΧεέʔσΟϯάʢৄࡉ౓ɺܧঝʣ .selector { property: value; } ͜Ε͚ͩ

Slide 5

Slide 5 text

but, CSS is broken...

Slide 6

Slide 6 text

CSS is missing ;( • ߏ଄Խ • ந৅Խ • ϧʔϧηοτͷείʔϓ

Slide 7

Slide 7 text

"Cascading Shit Show" by @fat h"ps:/ /www.youtube.com/watch? v=iniwPUEbPUM

Slide 8

Slide 8 text

CSS preprocessors? • e.g. Sass, Less, Stylus • ඪ४ٕज़Ͱ͸ͳ͍ • γϯλοΫεγϡΨʔ • PostCSS? • PostCSS͸ͨͩͷύʔαʔ • cssnext͸ ϙϦϑΟϧͰ͸ͳ͍

Slide 9

Slide 9 text

We need polyfils of CSS

Slide 10

Slide 10 text

but, it's very hard to create

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

Houdini

Slide 15

Slide 15 text

Extensible web h"ps:/ /extensiblewebmanifesto.org/

Slide 16

Slide 16 text

Extensible Web • ϒϥ΢βͷػೳʹΞΫηε͢Δ௿ϨΠϠʔͷAPIΛఏڙ • ࢓༷ͷࡦఆ΍ɺϒϥ΢βͷ࣮૷Λ଴ͨͣʹ։ൃऀ͸࣮૷Ͱ͖Δ • ࢓༷ͷఏҊʹ΋ͭͳ͕Δ • Houdini͸ͦͷCSSͷͨΊͷ΋ͷ

Slide 17

Slide 17 text

Houdini • Typed OM • Proper-es and Values API • Pain-ng API • Layout API • Font Metrics API • Parser API • Worklets

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Typed OM • ࠓ·Ͱ͸ element.style ͷจࣈྻΛ͜Ͷ͘Γճ͚ͩ͢ • styleMap ΦϒδΣΫτͱ஋ͷΫϥεΛ௥Ճ • JS͔ΒCSSΛѻ͍΍͘͢ͳΔ • CanaryͰflagΛONʹ͢Δͱ෦෼తʹ࢖͑Δ

Slide 20

Slide 20 text

Proper&es and Values API .foo { --opacity: 1; --opacity: 'foo'; opacity: var(--opacity); /* ແޮͳ஋ͳͷͰύʔαʔ͕উखʹ࡟আ */ } document.registerProperty({ name: '--my-opacity', syntax: '', // type check inherits: false, // ܧঝͤ͞Δ͔Ͳ͏͔ initialValue: 1 // ॳظ஋ });

Slide 21

Slide 21 text

Pain%ng API
#foo { --image: url('#url'); background-image: paint(image-with-placeholder); }

Slide 22

Slide 22 text

Paint Worklet document.registerProperty({ name: '--image', syntax: '' }); 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) { // } } })

Slide 23

Slide 23 text

Paint Worklet • CanvasͷΑ͏ͳ΋ͷ • Canvas͸CPU΋ϝϞϦ΋৯͏ • CanaryͰflagΛONʹ͢Δͱ෦෼తʹ࢖͑Δ

Slide 24

Slide 24 text

Layout API
CSS is awesome.
#myElement { display: layout('simple-flow'); }

Slide 25

Slide 25 text

Layout Worklet registerLayout('simple-flow', class { static get inputProperties() { return ['width', 'height'] } static get childrenInputProperties() { return ['x', 'y', 'position'] } layout(children, constraintSpace, styleMap, breakToken) { // } }

Slide 26

Slide 26 text

Is Houdini ready yet? h"ps:/ /ishoudinireadyyet.com

Slide 27

Slide 27 text

Thanks :D @morishi(er_