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 drafts
Search
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
julian7454
August 19, 2016
Technology
0
64
houdini drafts
julian7454
August 19, 2016
Tweet
Share
More Decks by julian7454
See All by julian7454
Vue testing library - avoriaz
julian7454
0
76
Vue 2.0 開發環境 - 以 webpack2 建立
julian7454
0
77
PostCSS 與 cssnext
julian7454
0
99
javascript品質檢測工具 - ESLint
julian7454
0
170
Other Decks in Technology
See All in Technology
クレジットカード決済基盤を支えるSRE - 厳格な監査とSRE運用の両立 (SRE Kaigi 2026)
capytan
6
2.7k
Frontier Agents (Kiro autonomous agent / AWS Security Agent / AWS DevOps Agent) の紹介
msysh
3
170
変化するコーディングエージェントとの現実的な付き合い方 〜Cursor安定択説と、ツールに依存しない「資産」〜
empitsu
4
1.4k
CDKで始めるTypeScript開発のススメ
tsukuboshi
1
420
ZOZOにおけるAI活用の現在 ~開発組織全体での取り組みと試行錯誤~
zozotech
PRO
5
5.5k
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
6
68k
Ruby版 JSXのRuxが気になる
sansantech
PRO
0
150
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
13k
AIと新時代を切り拓く。これからのSREとメルカリIBISの挑戦
0gm
0
920
生成AIを活用した音声文字起こしシステムの2つの構築パターンについて
miu_crescent
PRO
2
200
15 years with Rails and DDD (AI Edition)
andrzejkrzywda
0
190
10Xにおける品質保証活動の全体像と改善 #no_more_wait_for_test
nihonbuson
PRO
2
280
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
100
6k
Discover your Explorer Soul
emna__ayadi
2
1.1k
Build The Right Thing And Hit Your Dates
maggiecrowley
38
3k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
The Illustrated Guide to Node.js - THAT Conference 2024
reverentgeek
0
260
My Coaching Mixtape
mlcsv
0
48
Collaborative Software Design: How to facilitate domain modelling decisions
baasie
0
140
HDC tutorial
michielstock
1
380
Amusing Abliteration
ianozsvald
0
100
エンジニアに許された特別な時間の終わり
watany
106
230k
A Guide to Academic Writing Using Generative AI - A Workshop
ks91
PRO
0
200
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
254
22k
Transcript
墋Օ CSS-Houdini-Drafts PIXNET F2E Julian LIFE 䨝捍ਰ
手瑽薹究㺔氂 • CSS 膏倵薩瑊ፘ㺔氂 • CSSnext 婘Ꭸԧ碝ी粬蝰๗牧֕㪔篷ဩ䋿匍ಅ磪 粬
CSS Polyfills? • ۗ javascript ጱ妿涢 • 硬臑 CSSOMጱ蟂獤
狕硬倵薩瑊獉蟂ጱ RENDERING ENGINE牫 • 翄Ӟ倵薩瑊䰬ୗጱ犋ݶᤈ傶砺֢ DOM ጱ硳胼㺔氂 • javascript framework
ጱֺৼ
Houdini 匍褩ྦྷ磪Ջ讕ۑ胼ྋࣁ樄咳牫 • CSS Parser API • Properties and Values
• CSS Typed OM • CSS Layout API • CSS Paint API • Scrolling and Animation
Houdini 匍褩ྦྷ磪Ջ讕ۑ胼ྋࣁ樄咳牫 • CSS Parser API • Properties and Values
• CSS Typed OM • CSS Layout API • CSS Paint API • Scrolling and Animation
Worklets • worklet script • 犋ݶጱ褩ྦྷ䁆ᤈ Javascript 纷ୗ嘨 • ֵአ
ES2015 ጱ class ਧ嬝۱珀ොဩጱ褸ݳ
Properties and Values • ᛔਧ嬝痀 • ے獈ࣳ獨 • https://drafts.css-houdini.org/css-properties- values-api-1/
Properties and Values
Properties and Values
CSS Layout API • ᛔਧ嬝 display 痀
CSS Layout API
CSS Layout API
CSS Paint API • registerPaint ොဩ牐樄咳ᘏݢ犥ࣁ CSS Ӿֵአ paint() 獢ୗ牧蝚螂㯽獈ጱݷ圸叨ኞӞ㮆
CSS 瑽粙
CSS Paint API
CSS Paint API
CSS Paint API
Scrolling and Animation • ඪൔ狕硬Ӟ犚 DOM ጱ痀牐蝚螂蝡圵ොୗ疰ݢ犥ݝ ๅ碝粬ਧ痀牧ᘒ犋ฎ獊蟂᯿碝 render牐
Scrolling and Animation
Scrolling and Animation
㷢ᘍ虻碘 • https://www.smashingmagazine.com/2016/03/houdini- maybe-the-most-exciting-development-in-css-youve- never-heard-of/#comment-1288360 • https://github.com/GoogleChrome/houdini-samples • https://github.com/w3c/css-houdini-drafts •
https://speakerdeck.com/ryanseddon/houdini • https://speakerdeck.com/surma/houdini-demystifying-css • http://www.w3ctech.com/topic/1816