Category: CSS

@supports is the CSS equivalent of JavaScript feature detection — it lets you apply styles only when the browser supports a specific property or value, without a JavaScript polyfill or a class added by Modernizr. Combined with @supports selector() (for testing pseudo-class support) and @supports font-tech() (for font feature detection), it provides a complete feature-detection…

The CSS Typed Object Model API (element.attributeStyleMap and element.computedStyleMap()) exposes CSS values as typed JavaScript objects — CSSUnitValue, CSSColorValue, CSSTransformValue — instead of raw strings. This eliminates the string-parsing overhead in animation loops, provides unit-aware arithmetic (CSS.px(10).add(CSS.rem(2))), and integrates with the Worklet-based Houdini painting pipeline.

The CSS reading-flow property (Chrome 137+) solves the accessibility problem where visual order (set by CSS Grid or Flexbox) diverges from DOM order — causing keyboard focus and screen reader reading order to follow the source order rather than the visual layout. With reading-flow, focus navigation follows the visual order without requiring JavaScript or DOM…

The CSS if() function (CSS Values Level 5, shipping in Chrome 137+ behind a flag) allows inline conditionals directly in property values — eliminating the need to create separate modifier classes for simple boolean states. Combined with style queries and custom properties, if() makes component theming dramatically more concise.

overflow: clip (baseline 2023) behaves like hidden but does not create a new formatting context and does not establish a scroll container — solving the long-standing problem where overflow: hidden on a parent breaks position: sticky children. The companion overflow-clip-margin property lets you define how far outside the border box clipping begins, enabling “bleed” effects…

Native CSS nesting (now baseline across all major browsers) lets you write component styles with nested selectors — the same ergonomics as Sass/Less BEM nesting — directly in plain CSS, without a build step. The browser resolves nested rules to flat selectors at parse time, and specificity works exactly as it would for the equivalent…

The CSS light-dark() function (Chrome 123+, Firefox 120+, Safari 17.5+) provides a shorthand for declaring two color values — one for light mode and one for dark mode — without duplicating the property inside a @media (prefers-color-scheme: dark) block. It works alongside color-scheme and integrates cleanly with CSS custom properties for full theme systems.

subgrid (now baseline across all major browsers) solves one of CSS Grid’s longest-standing limitations: child elements inside a grid item could not align to the parent grid’s tracks. With grid-template-columns: subgrid (or rows: subgrid), a grid item participates in its parent’s track definition, enabling card-based layouts where titles, images, and CTAs line up perfectly across…

CSS text-wrap: balance (Chrome 114+, Firefox 121+) distributes text evenly across lines in headings and short blocks so no line is dramatically shorter than the others — the browser solves the layout problem that designers used to fix with manual line breaks. The companion value text-wrap: pretty (Chrome 117+) prevents single-word orphans on the last…