Cascading Styles
A deep-dive into the algorithms that take us from simple property/value declarations to a fully-styled web application. Along the way, we’ll explore new features like nesting, cascade layers, scope, and the :has() selector.
CodePen Demos
- Resilient HTML
- Inspecting Cascade & Inheritance
- The Cascade (as a funnel)
- vw font-size scaling (forked)
- UA Important Styles
- No !important keyframes
- Important Shadow Context
- Specificity is Useful
- Layers Live Demo
- Sorting Cascade Layers
- Button layers
- Forgiving Selector Lists
- Una Kravets Space Facts CQ + :has() Demo
- Has light/dark selection
- Excluding v Overriding
- Scope proximity demo
- Visualizing scope
- Scope boundary demo
Resources
- Cascading & Inheritance Level 5
- Value Processing
- Cascading & Inheritance: Filtering
- User Agent Style Sheets: Basics and Samples, by Jens Oliver Meiert
- Comic Papyrus, by Ben Harman
- Cascading HTML Style Sheets – a proposal, by Håkon Wium Lie
- A11y Concerns With Fluid Type, by Maxwell Barvian
- fluid.style
- utopia.fyi
- Selectors (Level 4)
- Disclosure Widgets, by Adrian Roselli
- html.spec.whatwg.org
- Inverted Triangle CSS, by Harry Roberts
- Style with Stateful, Semantic Selectors
- Cascading & Inheritance Level 5
- Cascade Layers polyfill
- Can I Use: Cascade Layers
- Example layer orders
- Can I Use: CSS Nesting
- Can I Use: :has()
- Can I Use: the @scope rule
- Cascade & Inheritance, Level 6