modern-css.com

Float labels above filled inputs with :placeholder-shown.

Expand touch targets for mobile without affecting visual layout.

Center button and label text on its cap height with text-box-trim and text-box-edge.

Style for Windows High Contrast and forced color modes with the forced-colors media query and system color keywords.

Apply styles based on a container's name with @container, no size condition required.

Animate native open and close with ::details-content and interpolate-size: allow-keywords.

Avoid orphan words at the end of paragraphs with text-wrap-style: pretty.

Define custom element geometry with CSS border-shape so borders, shadows, and outlines follow the shape.

Use isolation: isolate to contain z-index values within elements and prevent them from overlapping with fixed or floating content outside the container.

Use cascade layers to organize CSS into predictable levels.

Build a modular CSS type scale with pow() and custom properties.

Make the first column and the header row of a table both sticky.

Trigger animations when elements enter a scroll range using the CSS animation-trigger property.

Draw rule lines inside grid and flexbox gaps with the CSS row-rule and column-rule properties.

Use 100vw without triggering a horizontal scrollbar.

Build an auto-hiding header that slides away when scrolling down and reappears when scrolling up.

Animate filter, sort, and reorder in a single subtree using element-scoped view transitions.

Use text-spacing-trim to remove the extra full-width space around CJK and quoted punctuation.

Use display: contents to make wrapper elements transparent to grid and flex layouts.

Use :nth-child(n of selector) to count only elements that match a selector, ignoring unrelated siblings.

Apply different styles to elements based on a custom property set on their container.

Pack mixed-height items into columns with display: grid-lanes.

Float plus border-radius still wraps a rectangle.

Keep centered flex and grid rows scrollable with justify-content: safe center.