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
- ಠ_ಠ Valid Table-Flip
- Page construction in CJSS by Scott Kellum
- css is (mostly) case-insensitive
- Invalid At Computed Value Time
- Custom Properties Inherit
- Inheritance Proximity vs Cascade
- End-Run Inheritance
- Debugging Inheritance
- Inspecting Cascade & Inheritance
- Inheritance intuition
- CSS Keywords
- Global Keywords on Custom Properties
- Invalid, Unsupported, or Undefined
- currentColor in SVG fill
- Variables substitute then inherit
- Registered properties compute
- Gradient Transitions with Registered Properties
- Lengths to Numbers to Strings
- Static Initial v Relative Default
- Inheritance has proximity priority
- 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
- 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!
Resources
- CSS Value Processing Specification
- Day 82: Value Processing by Manuel Matuzović
- Jina Anne on X
- Match sRGB to named color color-mix()
- Can I Use: CSS Variables
- Spec: Custom Properties for Cascading Variables
- “… is valid CSS.” by Tab Atkins
- Spec: Defining Custom Properties
- Cascading & Inheritance Filtering Specification
- Defaulting Specification
- Cascade & Inheritance Initial Values Specification
- Can I Use: @property
- web-platform-tests dashboard: @property
- CSS Properties and Values API Level 1, § 5.1
- MDN: Attribute selectors
- OddBird: Cascading Colors
- Animated sprites from Monster Slayer by Krystal Campioni