Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Houdini: Abracadabra CSS
Search
Masaaki Morishita
October 19, 2016
Programming
1
820
Houdini: Abracadabra CSS
at #dogenzakabeerbash
Masaaki Morishita
October 19, 2016
Tweet
Share
More Decks by Masaaki Morishita
See All by Masaaki Morishita
PostCSS: Build your own CSS processor
morishitter
6
4.7k
Modern CSS: architecture, future specs and build flow
morishitter
13
2.7k
PostCSS and cssnext
morishitter
11
1.8k
PostCSS 5.0: for Custom CSS Preprocessing
morishitter
10
1.1k
PostCSS for beginners
morishitter
6
1.4k
CSSfmt
morishitter
2
220
Introduction to CSS Architecture
morishitter
3
380
Introduction to PostCSS
morishitter
6
1.7k
Yet Another CSS Preprocessor
morishitter
1
5.5k
Other Decks in Programming
See All in Programming
대규모 트래픽을 처리하는 프론트 개발자의 전략
maryang
0
110
AIのメモリー
watany
12
1.2k
DataformでPythonする / dataform-de-python
snhryt
0
150
DatadogのArchived LogsをSnowflakeで高速に検索する方法(Archive Searchでオワコンにならないことを祈って) / How to search Datadog Archived Logs quickly with Snowflake (hoping Datadog Archive Search doesn’t make this obsolete)
civitaspo
0
110
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
250
それ CLI フレームワークがなくてもできるよ / Building CLI Tools Without Frameworks
orgachem
PRO
17
3.7k
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
takumiyoshikawa
2
250
NEWT Backend Evolution
xpromx
1
170
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
5
760
Scale out your Claude Code ~自社専用Agentで10xする開発プロセス~
yukukotani
5
850
構文解析器入門
ydah
7
2k
書き捨てではなく継続開発可能なコードをAIコーディングエージェントで書くために意識していること
shuyakinjo
0
190
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
54
11k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
The Pragmatic Product Professional
lauravandoore
36
6.8k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Docker and Python
trallard
45
3.5k
Fireside Chat
paigeccino
38
3.6k
Building an army of robots
kneath
306
45k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
Transcript
Houdini: Abracadabra CSS @morishi(er_
About me .about-me { name: Masaaki Morishita; twitter: @morishitter_; github:
morishitter; qiita: morishitter; specializing-in: CSS; works-at: 'Increments, inc.'; }
Do you love CSS?
CSS is easy :) • ؆୯ͳߏจ • ΧεέʔσΟϯάʢৄࡉɺܧঝʣ .selector {
property: value; } ͜Ε͚ͩ
but, CSS is broken...
CSS is missing ;( • ߏԽ • நԽ • ϧʔϧηοτͷείʔϓ
"Cascading Shit Show" by @fat h"ps:/ /www.youtube.com/watch? v=iniwPUEbPUM
CSS preprocessors? • e.g. Sass, Less, Stylus • ඪ४ٕज़Ͱͳ͍ •
γϯλοΫεγϡΨʔ • PostCSS? • PostCSSͨͩͷύʔαʔ • cssnext ϙϦϑΟϧͰͳ͍
We need polyfils of CSS
but, it's very hard to create
None
None
None
Houdini
Extensible web h"ps:/ /extensiblewebmanifesto.org/
Extensible Web • ϒϥβͷػೳʹΞΫηε͢ΔϨΠϠʔͷAPIΛఏڙ • ༷ͷࡦఆɺϒϥβͷ࣮Λͨͣʹ։ൃऀ࣮Ͱ͖Δ • ༷ͷఏҊʹͭͳ͕Δ • HoudiniͦͷCSSͷͨΊͷͷ
Houdini • Typed OM • Proper-es and Values API •
Pain-ng API • Layout API • Font Metrics API • Parser API • Worklets
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
Typed OM • ࠓ·Ͱ element.style ͷจࣈྻΛ͜Ͷ͘Γճ͚ͩ͢ • styleMap ΦϒδΣΫτͱͷΫϥεΛՃ •
JS͔ΒCSSΛѻ͍͘͢ͳΔ • CanaryͰflagΛONʹ͢Δͱ෦తʹ͑Δ
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 // ॳظ });
Pain%ng API <div id="foo"></div> <style> #foo { --image: url('#url'); background-image:
paint(image-with-placeholder); } </style>
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) { // } } })
Paint Worklet • CanvasͷΑ͏ͳͷ • CanvasCPUϝϞϦ৯͏ • CanaryͰflagΛONʹ͢Δͱ෦తʹ͑Δ
Layout API <div id="myElement"> <div> CSS is awesome. </div> </div>
<style> #myElement { display: layout('simple-flow'); } </style>
Layout Worklet registerLayout('simple-flow', class { static get inputProperties() { return
['width', 'height'] } static get childrenInputProperties() { return ['x', 'y', 'position'] } layout(children, constraintSpace, styleMap, breakToken) { // } }
Is Houdini ready yet? h"ps:/ /ishoudinireadyyet.com
Thanks :D @morishi(er_