$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

  2. JÖRG NEUMANN THEMEN  Frontend Technologies  Mobile Development 

    Machine Learning  Consulting, Coaching, Training KONTAKT  Mail: Joerg.Neumann@Aclue.de  Twitter: @JoergNeumann  GitHub: https://github.com/JoergNeumann  Blog: www.HeadWriteLine.BlogSpot.com
  3. DEMOS https://tinyurl.com/5n6st9su

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

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

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

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

    Composite Screen
  8. Highlevel API Lowlevel API Worklets

  9. IsHoudiniReadyYet.com

  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
  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
  12. DEMO Paint API

  13. HOUDINI PAINT API POLYFILL  Einbinden:  Repo: <script src="https://unpkg.com/css-paint-polyfill"></script>

    https://github.com/GoogleChromeLabs/css-paint-polyfill
  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
  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 );
  16. CSS LAYOUT API <!DOCTYPE html> <head> <style> body { display:

    layout(masonry); --padding: 5; --columns: 4; } </style> </head> <body> <script> if (CSS.layoutWorklet) { CSS.layoutWorklet.addModule(fancylayout.js'); } </script> <div> … </div> </body> Worklet im Browser registrieren Layout zuweisen und konfigurieren
  17. DEMO Layout API

  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
  19. DEMO Animation API

  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
  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)))
  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
  23. &

  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