Web Unleashed 2016
Web Dev
  • 2016-10-03 00:00:00 2016-10-04 00:00:00 America/Toronto Web Unleashed 2016 Toronto FITC
  • Toronto
  • # webu16


Slides View Video


You may have heard about CSS variables (aka CSS custom properties), but think it’s not something you can use yet. Plus, you already have your preprocessor pipeline in place, why should you care? This talk will show how CSS variables are much more powerful than static preprocessor variables and can be used today without compromising progressive enhancement. You will also learn several creative tips and tricks to take full advantage of them. As is customary with Lea’s CSS talks, expect a swath of live demos to demonstrate the material.

Target Audience

Advanced CSS developers with some vanilla JS knowledge

Assumed Audience Knowledge

Advanced HTML & CSS, some vanilla JS.

Audience Members Will Learn

  1. How to take advantage of CSS variables without hurting older browsers
  2. How to use CSS variables to create flexible, responsive components
  3. How to use CSS variables in JS for simplifying many common tasks and better decoupling behavior and presentation
  4. How to emulate custom longhands and custom properties with CSS variables
  5. CSS variables + animation, CSS variables + SVG