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. 

github.com/w3c/css-houdini-drafts/wiki 

CSS Houdini: Backgrounds

css-houdini.rocks

CSS Houdini:

Backgrounds

extra-css.netlify.app

CSS Houdini:

Borders

css-houdini.rocks

CSS Houdini:

Masks

css-houdini.rocks

New Button!

What Can we do?

  1. Background image
    1. Extra download
    2. Not very responsive
  2. CSS hacks
    1. Extra DOM elements not needed
    2. 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%
  );
}

Clippy generator

+

=

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

Canvas rendering 2D context

DEMO TIME!

CodePen

Pros

  • Faster
  • More deliberate
  • More control
  • New things not possible before

Cons

Thanks!