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
@BenedekGagyi
Babel for CSS
@BenedekGagyi
Draft in progress
@BenedekGagyi
@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,
});@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 🤞
