Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Houdini

 Houdini

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

8677c9f7c0f6d947bf318c1430d00bfd?s=128

ryanseddon

April 13, 2016
Tweet

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); }
  24. None
  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'); }
  29. None
  30. BONUS, COMPOSITOR MAGIC

  31. USER ACTIONS > Scrolling > Touch > Gestures > Drag

    and Drop
  32. None
  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]); }
  35. None
  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