houdini drafts

Transcript

1. 墋Օ CSS-Houdini-Drafts PIXNET F2E Julian LIFE 䨝捍ਰ
2. 手瑽薹究㺔氂 • CSS 膏倵薩瑊ፘ਻௔㺔氂 • CSSnext 婘Ꭸԧ碝ी粬௔蝰๗牧֕㪔篷ဩ䋿匍ಅ磪 粬௔
3. CSS Polyfills? • ׵ۗ javascript ጱ妿涢 • 硬臑 CSSOMጱ蟂獤
4. 狕硬倵薩瑊獉蟂ጱ RENDERING ENGINE牫 • 翄Ӟ᪜倵薩瑊䰬ୗጱ犋ݶᤈ傶砺֢ DOM ጱ硳胼㺔氂 • javascript framework ጱֺৼ
5. Houdini 匍褩ྦྷ磪Ջ讕ۑ胼ྋࣁ樄咳牫 • CSS Parser API • Properties and Values • CSS Typed OM • CSS Layout API • CSS Paint API • Scrolling and Animation
6. Houdini 匍褩ྦྷ磪Ջ讕ۑ胼ྋࣁ樄咳牫 • CSS Parser API • Properties and Values • CSS Typed OM • CSS Layout API • CSS Paint API • Scrolling and Animation
7. Worklets • worklet script • 犋ݶጱ褩ྦྷ䁆ᤈ Javascript 纷ୗ嘨 • ֵአ ES2015 ጱ class ਧ嬝۱珀ොဩጱ褸ݳ
8. Properties and Values • ᛔਧ嬝痀௔ • ے獈ࣳ獨 • https://drafts.css-houdini.org/css-properties- values-api-1/
9. Properties and Values
10. Properties and Values
11. CSS Layout API • ᛔਧ嬝 display 痀௔
12. CSS Layout API
13. CSS Layout API
14. CSS Paint API • registerPaint ොဩ牐樄咳ᘏݢ犥ࣁ CSS Ӿֵአ paint() 獢ୗ牧蝚螂㯽獈ጱݷ圸叨ኞӞ㮆 CSS 瑽粙
15. CSS Paint API
16. CSS Paint API
17. CSS Paint API
18. Scrolling and Animation • ඪൔ狕硬Ӟ犚 DOM ጱ痀௔牐蝚螂蝡圵ොୗ疰ݢ犥ݝ ๅ碝粬ਧ痀௔牧ᘒ犋ฎ獊蟂᯿碝 render牐
19. Scrolling and Animation
20. Scrolling and Animation
21. 㷢ᘍ虻碘 • 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