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

Frontend Magic mit CSS Houdini

Jörg Neumann
September 20, 2024

Frontend Magic mit CSS Houdini

Jörg Neumann

September 20, 2024
Tweet

More Decks by Jörg Neumann

Other Decks in Programming

Transcript

  1. THEMEN  AI Development  Business App Development  Frontend

    Technologies  Development, Consulting, Coaching, Training KONTAKT  Mail: [email protected]  LinkedIn: www.linkedin.com/in/jörgneumann  X: @JoergNeumann  Web: www.neogeeks.de JÖRG NEUMANN Founder & CEO NeoGeeks GmbH Azure OpenAI Service, Azure Machine Learning Platform
  2. 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
  3. 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
  4. 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
  5. 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 );
  6. 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
  7. 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
  8. &

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