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
830
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
CSC305 Summer Lecture 12
javiergs
PRO
0
110
エンジニアのための”最低限いい感じ”デザイン入門
shunshobon
0
130
書き捨てではなく継続開発可能なコードをAIコーディングエージェントで書くために意識していること
shuyakinjo
1
310
KessokuでDIでもgoroutineを活用する / Go Connect #6
mazrean
0
110
A Gopher's Guide to Vibe Coding
danicat
0
170
Kiroの仕様駆動開発から見えてきたAIコーディングとの正しい付き合い方
clshinji
1
140
大規模FlutterプロジェクトのCI実行時間を約8割削減した話
teamlab
PRO
0
490
レガシープロジェクトで最大限AIの恩恵を受けられるようClaude Codeを利用する
tk1351
2
1.1k
20250808_AIAgent勉強会_ClaudeCodeデータ分析の実運用〜競馬を題材に回収率100%の先を目指すメソッドとは〜
kkakeru
0
200
Langfuseと歩む生成AI活用推進
licux
3
300
開発チーム・開発組織の設計改善スキルの向上
masuda220
PRO
13
7.5k
学習を成果に繋げるための個人開発の考え方 〜 「学習のための個人開発」のすすめ / personal project for leaning
panda_program
1
110
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
37
3.4k
We Have a Design System, Now What?
morganepeng
53
7.7k
Art, The Web, and Tiny UX
lynnandtonic
302
21k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
The Art of Programming - Codeland 2020
erikaheidi
55
13k
Git: the NoSQL Database
bkeepers
PRO
431
65k
Six Lessons from altMBA
skipperchong
28
4k
A better future with KSS
kneath
239
17k
GraphQLとの向き合い方2022年版
quramy
49
14k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
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_