Having (useful) fun with

Houdini

@BenedekGagyi

@BenedekGagyi

✋

Péter Viola: A CSS Mágia Leleplezése

@BenedekGagyi

Draft in progress

@BenedekGagyi

ACCess CSS internals

Image source: Smashing Magazine

@BenedekGagyi

Babel for CSS

Image source: Smashing Magazine

@BenedekGagyi

Try it today!

@BenedekGagyi

  • Draft in progress

  • ACCESS CSS INTERNALS

  • BAbeL for css

  • Try it today!

@BenedekGagyi

Reading the draft

✋

@BenedekGagyi

@BenedekGagyi

Houdini Samples

Pro tip: check the closed issues too!

@BenedekGagyi

Reading the draft

Lea Verou

Rename

paint(name, args)

to

paint-name(args)

@BenedekGagyi

@BenedekGagyi

CSS Properties and values API

Custom properties?

Variables!

native

@BenedekGagyi

CSS Properties and values API

@BenedekGagyi

CSS Properties and values API

:root {
  --box-size: 50px;
}

.box {
  width: var(--box-size);
  height: var(--box-size);
}

@BenedekGagyi

CSS Properties and values API

element.style.setProperty("--box-size", 100);
("--box-size", 100)
("--box-size", 100 + 'px')

@BenedekGagyi

CSS Properties and values API

CSS.registerProperty({
    name: '--box-size',
    syntax: '<length>',
    initialValue: '50px',
    inherits: true,
});

Iherits: should it be required?

@BenedekGagyi

CSS Properties and values API

element.attributeStyleMap.get('width')
{
    value: 50,
    unit: "percent"
}

@BenedekGagyi

CSS Properties and values API

@BenedekGagyi

Paint API

@BenedekGagyi

Paint API

@BenedekGagyi

Paint API

Worklet

Web worker --

  • Paint

  • Audio

  • Animation

  • Layout

PERFORMANCE

@BenedekGagyi

Paint API

(CSS.paintWorklet || paintWorklet).addModule('paintworklet.js');
registerPaint('fancy', class {
    paint(ctx, geom, props) {
        ...
    }
});
background-image: paint(radio-button);
background-image: paint-radio-button();

@BenedekGagyi

Paint API

🤞 Demo time 🤞

Thank you!

@BenedekGagyi

Having (useful) fun with

Houdini

Houdini

By Benedek Gagyi

Made with Slides.com

Houdini

  • 1,105

More from Benedek Gagyi