Sticky headers that react to the scroll used to mean a scroll listener or IntersectionObserver plus a class toggle. Scroll-state container queries, now live in Chrome, Edge, Samsung Internet, and Opera, let the stylesheet answer the question itself.
@starting-style plus the allow-discrete keyword finally let you transition from and into display:none in pure CSS, quietly killing the max-height hack and the offscreen-transform workarounds for modals, toasts, and popovers.
CSS scroll markers generate carousel pagination dots, wire up click-to-scroll, and track the active slide with no JavaScript. Arrows follow via the scroll-button pseudo-element, and here is how to ship the whole thing as a progressive enhancement.
Highlight arbitrary text ranges without touching the DOM: the CSS Custom Highlight API lets JavaScript build the ranges and CSS paint them. What to know before shipping it, from the styling whitelist to the StaticRange performance trap.
Chrome and Safari now ship sibling-index() and sibling-count(), two CSS functions that return an element's position and its sibling total as real numbers. One calc() line replaces the nth-child wall, the Sass loop, and the DOM-walking stagger script — with a clean @supports fallback for Firefox.
Two weeks ago, at the CSS Working Group's in-person meeting in Berlin, the group resolved to add a new selector to the Selectors Level 5 spec: the class prefix selector. The syntax is one you'd write in your sleep.
interpolate-size and calc-size() finally let CSS transition elements to height: auto with zero JavaScript. Here is how the one-declaration API works, where it earns its keep, and the fallback for older browsers.
content-visibility: auto lets the browser skip laying out offscreen content, making long pages load and scroll faster with two lines of CSS. The catch is that it reserves space with a guess, so get contain-intrinsic-size right or you trade slow renders for layout shift.
The CSS `field-sizing: content` property lets form controls auto-grow to fit their text natively — no JavaScript, no scrollHeight listeners. Here's how it works, where it shines in chat composers and inline inputs, the edge cases that still need care, and a progressive-enhancement strategy for pro
The appearance: base-select CSS property finally lets developers style native select dropdowns without JavaScript libraries — unlocking full theming of the option list, smooth open animations, and preserved accessibility semantics.
CSS @scope is the native browser feature that finally solves CSS specificity wars through deliberate, spatially-bounded style scoping — replacing BEM naming conventions and CSS Modules with a zero-overhead, build-free approach that decouples scoping from specificity.
CSS cascade layers (@layer) give you explicit control over specificity hierarchy without !important, making them essential for design systems where third-party libraries and utility classes constantly collide.