Modern CSS Features of 2025

Recently supported CSS features and units worth adopting now, from dynamic viewport units to conditional values.

Content tagged css-2025

• Tutorial:CSS-Only Staggered Animations with sibling-index() and sibling-count()

  Stagger animations from each element's own position, without JavaScript.

  sibling-index() and sibling-count() give an element its own 1-based position and its sibling total directly inside calc() — replacing the JavaScript loop that sets a --i custom property, with fixed-step and fixed-total staggers, index-driven colours and rotations, fallbacks, and reduced-motion handling.

• Tutorial:Conditional CSS Values with the if() Function

  Swap CSS values by media, supports, or style conditions.

  The if() function picks between several values inside one CSS declaration based on a media(), supports(), or style() condition — collapsing what used to require duplicating an entire rule under @media/@supports, or a JS class toggle, into one line, with a fallback for browsers that don't support it yet.

• Tutorial:Viewport Inline & Block Units: vi and vb

  Viewport units that follow text flow, not fixed axes.

  vi and vb behave like vw and vh in the default horizontal-tb writing mode, but unlike vw/vh they aren't tied to a fixed screen direction — switch to a vertical writing mode and the two swap, with vi tracking height and vb tracking width. They also resolve against the root element's writing-mode specifically, never a locally-scoped one, which is the detail most likely to trip someone up.

• Tutorial:Dynamic Viewport Width Units: dvw, svw, and lvw

  Width-axis siblings of dvh/svh/lvh, useful for full-bleed breakouts.

  dvw, svw, and lvw mirror dvh/svh/lvh onto the width axis, but the browser chrome that makes dvh diverge from vh is a vertical UI element — so on virtually every current browser, all four width units render identically. Where they actually earn their place is different: full-bleed breakouts and edge-to-edge mobile carousels, not a live-resizing address bar.

• Tutorial:Dynamic Viewport Height Units: dvh, svh, and lvh

  Tracks the mobile address bar's actual visible height live.

  100vh has always meant the LARGEST possible viewport on mobile, so content sits behind the address bar until it's scrolled away. svh assumes the smallest viewport, lvh assumes the largest, and dvh is the only one of the three that tracks the browser chrome's actual current state, live.