Houdini

A look into what's coming with Houdini, the umbrella term for customising CSS and getting hooks into the browser rendering pipeline.

Transcript

1. HOUDINI RYAN SEDDON
2. RYAN SEDDON
3. HOUDINI?
4. BOXES, MAGIC AND ESCAPING
5. Show that we care about extending the browser, and continue to iterate on it. I don’t think we can fix or even think of everything to fix from the beginning, it needs to evolve. — Daniel Glazman, CSS WG co-chair
6. THE EXTENSIBLE WEB VISION Houdini is about enabling low-level access to previously impossible tasks on the web. #extendthewebforward.
7. UMBRELLA TERM > Worklets > Parser API > Box Tree API > CSS Typed OM > Font Metrics API > Properties and Values
8. UMBRELLA TERM > Worklets > Parser API > Box Tree API > CSS Typed OM > Font Metrics API > Properties and Values
9. PROPERTIES AND VALUES
10. REGISTER A NEW PROPERTY CSS.registerProperty({ name: '--stop-color', syntax: '<color>', inherits: false, initialValue: 'rgba(255, 0, 0, 0.5)' }); .button { background: linear-gradient(var(--stop-color), black); transition: --stop-color 0.5s; } .button:hover { --stop-color: papayawhip; }
11. CSS TYPED OM
12. NO MORE STRINGS <div style="width: calc(90% - 50px)"> Old way elem.style.width; // "calc(90% - 50px)" New way elem.styleMap.get('width'); // { percent: 90, px: 50 }
13. EASILY DIVIDE, SUBTRACT, ADD ETC const width = elem.styleMap.get('width'); const height = new SimpleLength(width.divide(16/9), 'px'); // set element to have 16:9 ratio elem.styleMap.set('height', height);
14. MANY TYPES KEYWORDVALUE, NUMBERVALUE, LENGTHVALUE, ANGLEVALUE, TRANSFORMVALUE, POSITIONVALUE AND MANY MORE
15. HTTPS://GITHUB.COM/CSS-TYPED-OM/TYPED-OM
16. WORKLETS
17. an API for running scripts in stages of the rendering pipeline independent of the main JavaScript execution environment.
18. NAMING IS HARD ^ Reminds me of java applets
19. 2 TYPES: PAINT AND LAYOUT
20. PAINTWORKLET Allows you to run code at the paint stage of the browser rendering pipeline.
21. REGISTER A PAINTWORKLET window.paintWorklet.import('paintworklet.js').then(() => { // worklets returns a promise so you can do stuff when it loads }).catch(() => { // or when it fails });
22. REGISTERPAINT registerPaint('circle', class { // ES2015 class uses static to allow user customisation static get inputProperties() { return ['--circle-color']; } paint(context, geometry, styleMap) { const color = styleMap.get('--circle-color'); context.fillStyle = color; // Paint happens after layout so we have access to the box geometry const x = geometry.width / 2; const y = geometry.height / 2; const radius = Math.min(x, y); // paint worklet gives you a canvas like API context.beginPath(); context.arc(x, y, radius, 0, 2 * Math.PI, false); context.fill(); } });
23. USING IT IN YOUR CSS .avatar { --circle-color: peachpuff; background-image: paint(circle); }
25. USE CASES > Conical gradients > Custom shadows > Image placeholders
26. LAYOUTWORKLET Allows you to run code at the layout stage and define new layout primitives not available in the browser.
27. REGISTERLAYOUT registerLayout('masonry', class { static get inputProperties() { return ['width', 'height'] } static get childrenInputProperties() { return ['x', 'y'] } layout(children, constraintSpace, styleMap) { // The dimensions of the space we have to work with const { width, height } = constraintSpace; // Loop over all direct children and lay them out. for (let child of children) { // Complex code to layout out each child child.doLayout(); } return { minContent: 0, maxContent: 0, width: width, height: height, fragments: [], unPositionedChildren: [], breakToken: null }; } });
28. USING IT IN YOUR CSS #main { display: layout('masonry'); // that easy! } .thing { display: inline-layout('inline-thing'); }
30. BONUS, COMPOSITOR MAGIC
31. USER ACTIONS > Scrolling > Touch > Gestures > Drag and Drop
33. COMPOSITORWORKER1 var scrollerProxy = new CompositorProxy($('#scroller'), ['scrollTop']); var backgroundProxy = new CompositorProxy($('.background'), ['transform']); var worker = compositorWorker('paralax.js'); worker.postMessage([scrollerProxy, backgroundProxy]); 1 https://github.com/w3c/css-houdini-drafts/blob/master/composited-scrolling-and-animation/ Explainer.md#example-2-parallax
34. onmessage = e => { const [scroller, background] = e.data; const update = timestamp => { const transform = background.transform; transform.m42 = 0.8 * scroller.scrollTop; // scroll y at 0.8 speed. background.transform = transform; requestAnimationFrame(update, [scroller]); }; requestAnimationFrame(update, [scroller]); }
36. THIS SEEMS REALLY COMPLEX
37. EVERYTHING HERE WILL PROBABLY CHANGE
38. READING MATERIAL > github.com/w3c/css-houdini-drafts > surma.link/things/houdini-intro/ > github.com/GoogleChrome/houdini-samples > smashingmagazine.com/2016/03/houdini-maybe-the- most-exciting-development-in-css-youve-never-heard- of/
39. GET PUMPED!
40. THANKS