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?

  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%
  );
}

+

=

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

Thanks!

Houdini, behind the CSS

By Rhiana Heath

Houdini, behind the CSS

GIDS October 2020

  • 289
Loading comments...

More from Rhiana Heath