Responsive & modern CSS
21 steps in 6 sets of CSS.
What CSS picked up in the last few years, which is a lot. Media and container queries, custom properties, then the selectors that ask questions: :has(), :is(), :where().
Motion, effects and generated content finish it. Twenty-one steps, and several of these solve problems people are still writing JavaScript for.
Responsive
- Media queriesBreakpoints that adapt a layout, written mobile first.
- Fluid type and spaceclamp scales a value with the viewport between a floor and a ceiling.
- Container queriesStyling a component by the space it is given, not by the viewport.
- Asking about the containerA component that sizes itself to its slot, not to the window it happens to be in.
Custom properties
- Custom propertiesVariables that cascade, take fallbacks, and can be set per component.
- Variables with a fallbackThe second argument of var() is what to use when the variable is not set.
- Typed custom properties@property tells the browser what a variable is, and then it can animate it.
Selectors that ask questions
- The parent selector:has() finally lets a rule depend on what an element contains.
- :is() and :where()The same grouping, and they differ on exactly one thing: what they do to specificity.
- NestingThe child rules live inside the parent, which is how you read the component in one place.
Motion & effects
- TransitionsInterpolating a property change over time, on the cheap properties only.
- Transitioning to display: noneThe trick that used to need a timeout: two extra lines and the element can animate out.
- Keyframe animationsA named sequence of states, replayable and repeatable.
- TransformsMoving, scaling and rotating a box without touching layout.
- Transforms in their own propertiestranslate, rotate and scale are properties now, so two rules can move the same element.
- Animations driven by scrollThe timeline is the scroll position rather than the clock, and it costs no JavaScript.
- Respecting reduced motionEvery animation needs an off switch for readers who ask for one.
- Shadows and filtersDepth and image effects: box shadows, text shadows, filters, blend modes.
Generated content
- Pseudo-elementsGenerated boxes before and after content, plus the ones for text and UI.
- Nesting and layersTwo modern additions: nested rules, and cascade layers for ordering.
Encore
- component_library.cssThemed components: buttons, cards, chips and a toast, all driven by tokens.