OhYesCSS

New CSS features,
explained by using them.

A small collection of interactive demos for CSS that shipped in the last couple of years, each one live and built with nothing but plain CSS, no JavaScript standing in for what browsers can now do natively. Every demo comes with a short explainer covering what’s actually happening under the hood and why it works.

anchor-name / position-anchor

Anchor Positioning

Tether a popover to any element with pure CSS, no JS positioning math.

nesting

CSS Nesting

Native nested selectors, media queries, and the & parent selector.

@container

Container Queries

A component that reflows based on its container, not the viewport.

startViewTransition()

View Transitions API

Animated, morphing transitions between DOM states with one function call.

animation-timeline

Scroll-Driven Animations

Animations timed to scroll position instead of a clock, no JS listeners.

:has()

The Parent Selector

An ancestor that reacts to the state of its own descendants.

@starting-style / allow-discrete

Native Show/Hide Transitions

Animate an element in and out of display: none, no keyframes, no JS.

@scope

Native CSS Scoping

Contain a selector to a subtree without renaming every class.