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. Houdini: Abracadabra CSS
    @morishi(er_

    View Slide

  2. About me
    .about-me {
    name: Masaaki Morishita;
    twitter: @morishitter_;
    github: morishitter;
    qiita: morishitter;
    specializing-in: CSS;
    works-at: 'Increments, inc.';
    }

    View Slide

  3. Do you love CSS?

    View Slide

  4. CSS is easy :)
    • ؆୯ͳߏจ
    • ΧεέʔσΟϯάʢৄࡉ౓ɺܧঝʣ
    .selector {
    property: value;
    }
    ͜Ε͚ͩ

    View Slide

  5. but, CSS is broken...

    View Slide

  6. CSS is missing ;(
    • ߏ଄Խ
    • ந৅Խ
    • ϧʔϧηοτͷείʔϓ

    View Slide

  7. "Cascading Shit Show"
    by @fat
    h"ps:/
    /www.youtube.com/watch?
    v=iniwPUEbPUM

    View Slide

  8. CSS preprocessors?
    • e.g. Sass, Less, Stylus
    • ඪ४ٕज़Ͱ͸ͳ͍
    • γϯλοΫεγϡΨʔ
    • PostCSS?
    • PostCSS͸ͨͩͷύʔαʔ
    • cssnext͸ ϙϦϑΟϧͰ͸ͳ͍

    View Slide

  9. We need polyfils of CSS

    View Slide

  10. but, it's very hard to create

    View Slide

  11. View Slide

  12. View Slide

  13. View Slide

  14. Houdini

    View Slide

  15. Extensible web
    h"ps:/
    /extensiblewebmanifesto.org/

    View Slide

  16. Extensible Web
    • ϒϥ΢βͷػೳʹΞΫηε͢Δ௿ϨΠϠʔͷAPIΛఏڙ
    • ࢓༷ͷࡦఆ΍ɺϒϥ΢βͷ࣮૷Λ଴ͨͣʹ։ൃऀ͸࣮૷Ͱ͖Δ
    • ࢓༷ͷఏҊʹ΋ͭͳ͕Δ
    • Houdini͸ͦͷCSSͷͨΊͷ΋ͷ

    View Slide

  17. Houdini
    • Typed OM
    • Proper-es and Values API
    • Pain-ng API
    • Layout API
    • Font Metrics API
    • Parser API
    • Worklets

    View Slide

  18. 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

    View Slide

  19. Typed OM
    • ࠓ·Ͱ͸ element.style ͷจࣈྻΛ͜Ͷ͘Γճ͚ͩ͢
    • styleMap ΦϒδΣΫτͱ஋ͷΫϥεΛ௥Ճ
    • JS͔ΒCSSΛѻ͍΍͘͢ͳΔ
    • CanaryͰflagΛONʹ͢Δͱ෦෼తʹ࢖͑Δ

    View Slide

  20. Proper&es and Values API
    .foo {
    --opacity: 1;
    --opacity: 'foo';
    opacity: var(--opacity); /* ແޮͳ஋ͳͷͰύʔαʔ͕উखʹ࡟আ */
    }
    document.registerProperty({
    name: '--my-opacity',
    syntax: '', // type check
    inherits: false, // ܧঝͤ͞Δ͔Ͳ͏͔
    initialValue: 1 // ॳظ஋
    });

    View Slide

  21. Pain%ng API

    <br/>#foo {<br/>--image: url('#url');<br/>background-image: paint(image-with-placeholder);<br/>}<br/>

    View Slide

  22. Paint Worklet
    document.registerProperty({
    name: '--image',
    syntax: ''
    });
    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) {
    //
    }
    }
    })

    View Slide

  23. Paint Worklet
    • CanvasͷΑ͏ͳ΋ͷ
    • Canvas͸CPU΋ϝϞϦ΋৯͏
    • CanaryͰflagΛONʹ͢Δͱ෦෼తʹ࢖͑Δ

    View Slide

  24. Layout API


    CSS is awesome.


    <br/>#myElement {<br/>display: layout('simple-flow');<br/>}<br/>

    View Slide

  25. Layout Worklet
    registerLayout('simple-flow', class {
    static get inputProperties() { return ['width', 'height'] }
    static get childrenInputProperties() { return ['x', 'y', 'position'] }
    layout(children, constraintSpace, styleMap, breakToken) {
    //
    }
    }

    View Slide

  26. Is Houdini ready yet?
    h"ps:/
    /ishoudinireadyyet.com

    View Slide

  27. Thanks :D
    @morishi(er_

    View Slide