Frontend Magic mit CSS Houdini

JÖRG NEUMANN | NeoGeeks FRONTEND MAGIC MIT CSS HOUDINI @JOERGNEUMANN

THEMEN  AI  Frontend Technologies  Mobile Development 
Consulting, Coaching, Training KONTAKT  Mail: [email protected]  Twitter: @JoergNeumann  Web: www.neogeeks.de JÖRG NEUMANN Founder & CEO NeoGeeks GmbH Azure OpenAI Service, Azure Machine Learning Platform

DEMOS https://tinyurl.com/5n6st9su

CSS nervt! ;) WAS IST DAS PROBLEM?

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

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

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

Highlevel API Lowlevel API Worklets

IsHoudiniReadyYet.com

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

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

DEMO Paint API

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

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

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 );

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

DEMO Layout API

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

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

Frontend Magic mit CSS Houdini

Frontend Magic mit CSS Houdini

Jörg Neumann

More Decks by Jörg Neumann

Other Decks in Programming

Featured

Transcript

JÖRG NEUMANN | NeoGeeks FRONTEND MAGIC MIT CSS HOUDINI @JOERGNEUMANN

THEMEN  AI  Frontend Technologies  Mobile Development 

DEMOS https://tinyurl.com/5n6st9su

CSS nervt! ;) WAS IST DAS PROBLEM?

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

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

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

Highlevel API Lowlevel API Worklets

IsHoudiniReadyYet.com

WORKLETS HINTERGRUND  Logik in Form einer JavaScript Klasse 

CSS PAINT API HINTERGRUND  Mit eigener Logik in den

DEMO Paint API

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

CSS LAYOUT API HINTERGRUND  Mit eigener Logik in den

CSS LAYOUT API class FancyLayout { static get inputProperties() {

CSS LAYOUT API <!DOCTYPE html> <head> <style> body { display:

DEMO Layout API

FAZIT HOUDINI ROCKT!  Erweiterung des CSS Standards  Custom

&

RESSOURCEN  Houdini Specifications https://drafts.css-houdini.org  Google Chrome Labs Houdini