Variables & Value Resolution
CSS custom properties (aka “variables”) expose the internals of CSS value resolution and error recovery. What does it even mean for properties to become ‘invalid at computed value time’? And how can we use these CSS internals to our advantage, developing more robust and dynamic style systems?
CodePen Demos
- Cascade vs Inheritance
- Inspecting Cascade & Inheritance
- Custom Properties Inherit
- Inheritance Proximity vs Cascade
- End-Run Inheritance
- Inheritance intuition
- Invalid At Computed Value Time
- Invalid, Unsupported, or Undefined
- Simplified space toggles
- Explicit defaults
- Global Keywords on Custom Properties
- currentColor in SVG fill
- Variables substitute then inherit
- Inspecting Cascade & Inheritance
- Registered properties compute
- Gradient Transitions with Registered Properties
- Lengths to Numbers to Strings
- Static Initial v Relative Default
- SVG with root styles
- The Rootiest Root
- Layering State & Type
- Custom Longhand
- Custom Property Light/Dark
- Custom Property Themes
- Generated Colors & Contrast
- Variables & Media Queries
- Variables Grid Areas
- Dynamic CSS Layouts
- Cascading Colors
- Cascading Colors updated
- Variables » Functions » Mixins
- CSS gradient-art decorations
- Angled Background CSS-Only Mixin
- Component Arguments (Media Object)
- Grid & Variable Temps
- Vue Invaders!
- Susy in the DOM, without Sass!
