CSS Custom Properties
Geoffrey Crofte
Overview
What are Custom Properties?
What are Custom Properties?
This not about
This is more about…
This is more about magic
But this is not about currentColor neither
Custom Property definition
Custom Property definition
Custom Property definition
W3C Definition Extract
What the Spec says…
In other words…
How to us CSS Variables?
CSS Declaration
CSS Declaration v2
CSS Variable Use
Quick Example of use
Why CSS instead of Sass Variables?
Computation
CSS Variables are alive
JavaScript can access them
Media Queries ❤️ CSS Variables
Media Queries ❤️ CSS Variables
CSS Variables are inherited
CSS Variables are inherited
CSS Variables are inherited
CSS Variables are inherited
CSS Variables are inherited
CSS Variables are inherited
Demos & Use Cases
Mouse position
CSS Transformation
CSS Transformation
CSS Transformation
CSS Transformation
CSS Transformation
CSS Transformation
CSS Transformation
Now you're wondering…
Now you're wondering…
Now you're wondering…
Now you're wondering…
Now you're wondering…
Another Wahou demo
CSS Transformation
Themable interfaces
Themable interfaces
Themable interfaces code
Themable interfaces code with variables
Themable interfaces code with variables
Accessibility Example
Accessibility Example
Responsive
Responsive
CSS Variables are CSS properties
CSS Variables are CSS properties
(kind of) Silent error
You can't "build up" values
Strange behaviour
Fallbakc value
Fallback value
Fallback value
Fallback value
Fallback value
Fallback value
Fallback value
Fallback value
Variable as Fallback
Variable as Fallback
You can't cycle with variables
You can't cycle with variables
Support Testing
Compatibility and Support
Polyfills
Some resources