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ͷΑ͏ͳͷ
• CanvasCPUϝϞϦ৯͏
• CanaryͰflagΛONʹ͢Δͱ෦తʹ͑Δ
Slide 24
Slide 24 text
Layout API
#myElement {
display: layout('simple-flow');
}
CSS is awesome.
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_