Modern CSS

Your stylesheets are full of workarounds for things CSS could not do. Modern CSS: The Platform Grew Up shows you which ones you can delete.Between 2022 and 2026, browsers shipped more CSS than in the previous decade. Container queries, :has(), cascade layers, nesting, perceptual color, subgrid, popovers and view transitions are now Baseline, so you can use them in production. Many teams have not caught up. They still reach for the same preprocessor, the same class toggles and the same scroll listeners.

This book is for working front-end developers who already know flexbox and grid. It skips the basics and focuses on the features that replace hacks and JavaScript. Each of the seventeen chapters starts with a problem you have probably solved the hard way, shows the modern solution with working code, and ends with what you need to ship it: browser support, fallbacks, and the dependencies or glue code you can remove.

Every example is a working page you can open and change, and the code is free to use under the MIT licence. Most screenshots are real renders from Chrome. The book marks the two that are not, and it says so when a feature is still experimental.

The book covers architecture (cascade layers, native nesting, @scope and typed custom properties), layout (container queries, subgrid, intrinsic ratios and grid), selectors and state (:has(), context-aware styling and scroll-state queries), visual design (OKLCH color, light-dark(), typography and shape), motion (entry and exit animations, scroll-driven animations and view transitions), native components (popovers, dialogs, anchor positioning and widgets without JavaScript), and production (a capstone component kit and a migration playbook for real codebases).

Three appendices cover a dependency diet, a browser support matrix and a cheat sheet.

The aim is less code: fewer dependencies, fewer event listeners, and stylesheets you can still understand next year.

• Replace specificity wars with @layer, native nesting, :where() and @scope
• Build components that respond to their container, not the viewport
• Style state with :has() instead of toggling classes in JavaScript
• Use OKLCH, color-mix() and relative colors to build token systems
• Animate height: auto, scroll position and page transitions
• Ship popovers, dialogs, menus and tooltips with anchor positioning and little or no JavaScript
• Migrate an existing codebase and delete the dependencies you no longer need