$30 off During Our Annual Pro Sale. View Details »

Frontend Magic mit CSS Houdini

Frontend Magic mit CSS Houdini

Jörg Neumann

February 24, 2022
Tweet

More Decks by Jörg Neumann

Other Decks in Programming

Transcript

  1. JÖRG NEUMANN | ACLUE
    FRONTEND MAGIC
    MIT CSS HOUDINI
    @JOERGNEUMANN

    View Slide

  2. JÖRG NEUMANN
    THEMEN
     Frontend Technologies
     Mobile Development
     Machine Learning
     Consulting, Coaching, Training
    KONTAKT
     Mail: [email protected]
     Twitter: @JoergNeumann
     GitHub: https://github.com/JoergNeumann
     Blog: www.HeadWriteLine.BlogSpot.com

    View Slide

  3. DEMOS
    https://tinyurl.com/5n6st9su

    View Slide

  4. CSS
    nervt! ;)
    WAS IST DAS PROBLEM?

    View Slide

  5. CSS RENDERING PIPELINE
    HTML/CSS Parser
    DOM
    CSSOM
    Render
    Layout
    Paint
    Composite
    Screen

    View Slide

  6. MANIPULATION
    HTML/CSS Parser
    DOM
    CSSOM
    Render
    Layout
    Paint
    Composite
    Screen

    View Slide

  7. MANIPULATION MIT HOUDINI
    HTML/CSS Parser
    DOM
    CSSOM
    Render
    Layout
    Paint
    Composite
    Screen

    View Slide

  8. Highlevel API Lowlevel API
    Worklets

    View Slide

  9. IsHoudiniReadyYet.com

    View Slide

  10. WORKLETS
    HINTERGRUND
     Logik in Form einer JavaScript Klasse
     Wird im Browser registriert und läuft in seinem eigenen Kontext
     Läuft nur auf lokalem Server oder über HTTPS in Produktion
     Fremde Worklets entweder als Package lokal installieren oder über ein CDN verlinken
     Weitere Infos hier

    View Slide

  11. CSS PAINT API
    HINTERGRUND
     Mit eigener Logik in den Rendering-Prozess eingreifen
     Rendern von background, background-image, border-image, mask-image
     Zur Manipulation steht ein Subset der Canvas API zu Verfügung
    W3C STATUS
     Status: Candidate Recommendation

    View Slide

  12. DEMO
    Paint API

    View Slide

  13. HOUDINI PAINT API
    POLYFILL
     Einbinden:
     Repo:

    https://github.com/GoogleChromeLabs/css-paint-polyfill

    View Slide

  14. CSS LAYOUT API
    HINTERGRUND
     Mit eigener Logik in den Layout-Prozess eingreifen
     Logik wird ebenfalls in Form von Worklets implementiert und registriert
    W3C STATUS
     Status: First Public Working Draft

    View Slide

  15. CSS LAYOUT API
    class FancyLayout {
    static get inputProperties() { return ['--exampleVariable']; }
    static get childrenInputProperties() { return ['--exampleChildVariable']; }
    static get layoutOptions() {
    return {
    childDisplay: 'normal',
    sizing: 'block-like'
    };
    }
    intrinsicSizes(children, edges, styleMap) {
    /* ... */
    }
    layout(children, edges, constraints, styleMap, breakToken) {
    /* ... */
    }
    });
    registerLayout('fancyLayout', FancyLayout );

    View Slide

  16. CSS LAYOUT API


    <br/>body {<br/>display: layout(masonry);<br/>--padding: 5;<br/>--columns: 4;<br/>}<br/>


    <br/>if (CSS.layoutWorklet) {<br/>CSS.layoutWorklet.addModule(fancylayout.js');<br/>}<br/>


    Worklet im Browser
    registrieren
    Layout zuweisen und
    konfigurieren

    View Slide

  17. DEMO
    Layout API

    View Slide

  18. CSS ANIMATION WORKLET
    HINTERGRUND
     Erweitert die Web Animations API
     Reagieren auf User Events (scroll, hover, click, ...)
     Gute Performance, da Animation in einem dedizierten Thread läuft
    W3C STATUS
     Status: First Public Working Draft

    View Slide

  19. DEMO
    Animation API

    View Slide

  20. CSS TYPED OM
    HINTERGRUND
     Der Zugriff auf CSS Properties erfolgt meist untypisiert
     Houdini führt ein neues typisiertes Objektmodell für den Umgang mit CSS ein
    W3C STATUS
     Status: Working Draft

    View Slide

  21. TYPED OBJECT MODEL
    ERMITTELN VON WERTEN
    MANIPULATION VON WERTEN
    // CSSOM
    getComputedStyle(el).getPropertyValue('width') // '50px'
    // Typed OM
    el.computedStyleMap().get('width') // CSSUnitValue {value: 50, unit: 'px'}
    // CSSOM
    el.style.setProperty('transform', 'translate(' + x + 'px, ' + y + 'px)‘)
    // Typed OM
    el.attributeStyleMap.set('transform', new CSSTranslate(CSS.px(x), CSS.px(y)))

    View Slide

  22. FAZIT
    HOUDINI ROCKT!
     Erweiterung des CSS Standards
     Custom Properties
     Custom Paintings
     Custom Layouts
     Custom Animations
     Typisierter Zugriff auf CSS
     Mehr Symantik
     mehr Flexibilität im Design

    View Slide

  23. &

    View Slide

  24. RESSOURCEN
     Houdini Specifications
    https://drafts.css-houdini.org
     Google Chrome Labs Houdini Samples
    https://github.com/GoogleChromeLabs/houdini-samples
    https://googlechromelabs.github.io/houdini-samples
     CSS Properties & Values API
    https://web.dev/css-props-and-vals
     CSS Paint Polyfill
    https://github.com/GoogleChromeLabs/css-paint-polyfill
     Tutorials & Worklet Library
    https://houdini.how

    View Slide