Modern CSS can now do what used to take JavaScript: style a parent from its children, size components by their container, anchor tooltips, animate on scroll, transition to height auto. Each lab below explains one feature with original live demos, copyable code, current browser support and the fallback to ship today.
- CSS :has() Selector: 8 Practical Examples of the Parent SelectorBaseline 2023 – widely availableThe :has() pseudo-class matches an element when at least one of the selectors you pass to it matches something relative to that element. card:has(:checked) selects the…
- CSS Container Queries: 8 Practical @container ExamplesBaseline Widely available (size queries); style queries Baseline 2026Media queries ask how wide the browser window is. Container queries ask how wide a component's own box is. You mark an element as a query…
- CSS Anchor Positioning: 8 Practical ExamplesBaseline 2026 – newly available (core features)CSS anchor positioning lets you place one element relative to another element anywhere on the page. You give the reference element a name with anchor-name, point…
- HTML Popover API: 8 Practical ExamplesBaseline 2025 – newly availableThe popover attribute turns any element into a layer that opens on top of the page. Add popover to a div, point a button at it…
- CSS Scroll-Driven Animations: 8 Examples with animation-timelineLimited availabilityScroll-driven animations link an ordinary CSS animation to scrolling instead of to the clock. Set animation-timeline to scroll() and the animation follows how far a container…
- CSS View Transitions: 8 Live Examples of the View Transition APIBaseline 2025 – newly available (same-document transitions)The View Transition API animates the change between two states of a page. The browser takes a snapshot of the old state, you update the DOM,…
- Animating height: auto and display: none in CSSLimited availability (interpolate-size and calc-size)For years CSS could not transition to height: auto or out of display: none. The usual workarounds were a guessed max-height, or JavaScript that measured the…
- CSS Subgrid: Align Cards, Forms and Layouts Across Nested GridsBaseline 2023 – widely availableA normal nested grid knows nothing about its parent. Put three cards in a row and each card sizes its own title, text and button, so…
Want these techniques in finished components? Browse our free UI components or the free CSS tools.