THE FUTURE OF ✨CSS✨

(and how we'll get there)

@BenedekGagyi

💡

@BenedekGagyi

CSS Grid

@BenedekGagyi

Vendors

Experts

@BenedekGagyi

Community

Element/
container
queries

The Extensible Web Manifesto

The standards process should focus on adding new low-level capabilities to the web platform

1.

The web platform should expose low-level capabilities that
explain existing features

2.

(... it) should develop, describe and test new high-level features in JavaScript, and allow web developers to iterate on them before they become standardized

3.

1.

3.

2.

HTML

JS

CSS

?

?

?

?

@BenedekGagyi

? /

CSS
Polyfills

CSS-in-jS

PostCSS

SASS

@BenedekGagyi

are hard

Harry
Houdini

Houdini

Task force

Low level JS API for CSS

@BenedekGagyi

@BenedekGagyi

Access CSS internals

Image source: Smashing Magazine

@BenedekGagyi

Babel for CSS

Image source: Smashing Magazine

@BenedekGagyi

Draft in progress

@BenedekGagyi

Houdini Samples

@BenedekGagyi

Reading the draft

✋

@BenedekGagyi

Pro tip: check the closed issues too!

@BenedekGagyi

Reading the draft

Lea Verou

paint(name, args)

vs

paint-name(args)

@BenedekGagyi

Try it today!

@BenedekGagyi

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

PERFORMANCE

0 DOM elements

Separate thread

(not)

Small API surface

@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 🤞

@Dassurma

@bobrov1989

@Snugug

Thank you!

@BenedekGagyi

The future of CSS
(and how we'll get there)

The future of CSS (and how we'll get there)

By Benedek Gagyi

Made with Slides.com

The future of CSS (and how we'll get there)

  • 678

More from Benedek Gagyi