Houdini,
Behind the CSS
Rhiana Heath
GIDS Oct 2020
Software Developer
Blake eLearning
What is CSS Houdini?
The objective of the CSS-TAG Houdini Task Force (CSS Houdini) is to jointly develop features that explain the “magic” of Styling and Layout on the web.
CSS Houdini: Backgrounds
CSS Houdini:
Backgrounds
CSS Houdini:
Borders
CSS Houdini:
Masks
New Button!
What Can we do?
- Background image
- Extra download
- Not very responsive
- CSS hacks
- Extra DOM elements not needed
- Hard to read and maintain
CSS Hack example 1
.triangle-hack {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #000;
}
CSS Hack example 2
.clippy-hack {
clip-path: polygon(
10% 0,
90% 0,
100% 10%,
100% 90%,
90% 100%,
10% 100%,
0 90%,
0 10%
);
}
+
=
PaInt API:
What can you use it on?
background: paint(magic-bg);
border: paint(magic-border);
mask-image: paint(magic-mask);How do you set this up?
<script>
CSS.paintWorklet.addModule('/magic-bg.js');
</script>How do you set this up?
registerPaint('magic-bg', class {
static get inputProperties() {
return [
'--bg-colour',
];
}
paint(ctx, geom, properties) {
...
}
});Wait what's this?
background: paint(magic-bg);
--bg-colour: #000000;CSS Variable
Progressive enhancement
/* Fallback for older browsers */
background: #000000;
@supports (background: paint(id)) {
background: paint(magic-bg);
--bg-colour: #000000;
}Where does it go?
registerPaint('magic-bg', class {
static get inputProperties() {
return [
'--bg-colour',
];
}
paint(ctx, geom, properties) {
...
}
});How do we access it?
registerPaint('magic-bg', class {
static get inputProperties() {
return [
'--bg-colour',
];
}
paint(ctx, geom, properties) {
const bgColour = properties.get('--bg-colour')
.toString();
}
});What are those other ones?
paint(ctx, geom, properties) {
const bgColour = properties.get('--bg-colour')
.toString();
const x = geom.width;
const y = geom.height;
}
Geometry
What are those other ones?
paint(ctx, geom, properties) {
const bgColour = properties.get('--bg-colour')
.toString();
const x = geom.width;
const y = geom.height;
ctx.fillStyle = bgColour;
this.drawShape(ctx, geom);
ctx.fill();
}Context
DEMO TIME!
Pros
- Faster
- More deliberate
- More control
- New things not possible before
Cons
- Few learning resources
- Low browser support
