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

Houdini: Abracadabra CSS

Houdini: Abracadabra CSS

at #dogenzakabeerbash

Masaaki Morishita

October 19, 2016
Tweet

More Decks by Masaaki Morishita

Other Decks in Programming

Transcript

  1. About me .about-me { name: Masaaki Morishita; twitter: @morishitter_; github:

    morishitter; qiita: morishitter; specializing-in: CSS; works-at: 'Increments, inc.'; }
  2. CSS preprocessors? • e.g. Sass, Less, Stylus • ඪ४ٕज़Ͱ͸ͳ͍ •

    γϯλοΫεγϡΨʔ • PostCSS? • PostCSS͸ͨͩͷύʔαʔ • cssnext͸ ϙϦϑΟϧͰ͸ͳ͍
  3. Houdini • Typed OM • Proper-es and Values API •

    Pain-ng API • Layout API • Font Metrics API • Parser API • Worklets
  4. 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
  5. 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 // ॳظ஋ });
  6. 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) { // } } })
  7. Layout API <div id="myElement"> <div> CSS is awesome. </div> </div>

    <style> #myElement { display: layout('simple-flow'); } </style>
  8. Layout Worklet registerLayout('simple-flow', class { static get inputProperties() { return

    ['width', 'height'] } static get childrenInputProperties() { return ['x', 'y', 'position'] } layout(children, constraintSpace, styleMap, breakToken) { // } }