Frontend Magic mit CSS Houdini

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

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

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

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

DEMO Animation API

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

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

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 | ACLUE FRONTEND MAGIC MIT CSS HOUDINI @JOERGNEUMANN

JÖRG NEUMANN THEMEN  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

CSS ANIMATION WORKLET HINTERGRUND  Erweitert die Web Animations API

DEMO Animation API

CSS TYPED OM HINTERGRUND  Der Zugriff auf CSS Properties

TYPED OBJECT MODEL ERMITTELN VON WERTEN MANIPULATION VON WERTEN //

FAZIT HOUDINI ROCKT!  Erweiterung des CSS Standards  Custom

&

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