Progressive Enhancement in CSS

Building layouts and effects that work with a baseline of broadly-supported CSS — readable fallbacks, @supports guards — then layering on newer features for browsers that support them.

Content tagged progressive-enhancement

• 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.

• Tutorial:Styling a <select> Dropdown with CSS appearance: base-select

  Style a real select's dropdown, options and arrow.

  appearance: base-select opts a native <select> into a fully styleable mode — rich HTML in options, <selectedcontent> in the closed button, and ::picker(select), ::picker-icon and ::checkmark for the dropdown, arrow and tick — while keeping its keyboard support, accessibility and form behaviour, with a plain select as the fallback.

• Tutorial:Animate and Type-Check CSS Variables with @property

  Give CSS custom properties real types so they animate.

  Register CSS custom properties (CSS variables) with @property — a syntax, an inherits rule and an initial value — so they animate in transitions and keyframes, fall back safely on invalid values and always have a default. Covers rotating gradients, counting numbers and per-axis motion, CSS.registerProperty(), performance, browser fallbacks and common pitfalls.

• Tutorial:HTML Attributes as Real CSS Values with Typed attr()

  Read HTML attributes as CSS colours, lengths and numbers.

  Typed attr() reads an HTML attribute as a real CSS value — type(<color>), type(<integer>), a unit like % or px, or raw-string — for any property on any element, not just text in content. Covers fallbacks for missing or invalid values, patterns for layout, transitions and view transitions, safe fallbacks in browsers without support, and when a custom property is the better choice.

• 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.