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
- The Cascade (as a funnel)
- No !important keyframes
- Important Shadow Context
- Quick Layers Live Demo
- Excluding v Overriding
- Una Kravets Space Facts CQ + :has() Demo
- Has light/dark selection
- Scope proximity demo
- Visualizing scope
- Scope boundary demo
Resources
- Cascading HTML Style Sheets – a proposal, by Håkon Wium Lie
- List of CSS Properties
- Cascading & Inheritance Level 5
- Cascading & Inheritance, Level 6
- Cascade Layers polyfill
- Selectors specification
- Disclosure Widgets, by Adrian Roselli
- Can I Use: Cascade Layers
- Example layer orders
- Can I Use: CSS Nesting
- Can I Use: :has()
- Can I Use: the @scope rule