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

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

+

=

DEMO TIME!

CodePen

Pros

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

Cons

• Few learning resources
• Low browser support
  • Is Houdini Ready Yet?

Thanks!

• slides.com/rhianaheath
• rhiana.heath.cc
• @RhianaHeath

• ishoudinireadyyet.com
• css-houdini.rocks
• extra-css.netlify.app
• CanvasRenderingContext2D