Exploring Modern CSS Features and Future Specs

Stay updated with the latest CSS specifications, including subgrid, container queries, the :has() selector, and high-level layout modules.

Content tagged modern-css

• Post:CSS Cascade Layers (@layer): End Specificity Wars in Large Codebases

  Control CSS priority with layer order, not specificity.

  Learn how CSS cascade layers (@layer) set priority by layer order instead of specificity — unlayered styles, the !important reversal, revert-layer, layering third-party CSS, the full cascade sort order, migrating a large codebase and putting utility classes last.

• Post:CSS Container Queries Deep Dive: Named Containers, cqi Units, and Style Queries

  Make components respond to their container, not the viewport.

  Go beyond basic @container: inline-size vs size containment, named containers, cqi/cqb/cqmin/cqmax units, and style queries, with diagrams and a live sandbox.

• Tutorial:Theming Native Controls with accent-color

  Theme native checkboxes, radios and sliders with one property.

  The accent-color property themes the checked and filled parts of native checkboxes, radio buttons, switches, range sliders and progress bars — including their indeterminate states — while keeping real browser controls with full native behaviour and accessibility, plus how it pairs with color-scheme and what it leaves alone.

• Post:Mastering CSS z-index: Stacking Contexts, isolation, and Layering Bugs

  Layer confidently with z-index, stacking contexts, and isolation.

  Learn how CSS z-index really works — painting order, stacking contexts, negative z-index, isolation: isolate, the top layer, a scalable z-index scale, and a step-by-step way to debug layering bugs.

• Tutorial:A Modern CSS Reset, Explained Rule by Rule

  A small, modern reset, and the reason behind every line.

  A compact modern CSS reset, explained rule by rule: border-box sizing, margin removal, keyword animations with interpolate-size, readable line-height, block-level media, form controls that inherit your font, overflow-wrap and text-wrap for better line breaks, and an isolated stacking context — plus optional extras and the edge cases to watch for.