CSS Functions

Modern CSS functions such as `clamp()`, `min()`, `max()`, and `if()` that compute values directly in the browser.

Content tagged css-functions

• 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:min(), max(), and clamp() — CSS's Value-Bounding Functions

  Three comparison functions that pick a value from a rule, without a single media query.

  min(), max(), and clamp() pick the smallest, largest, or a bounded value from a list of CSS expressions at the point of use, replacing media-query-driven overrides for readable measures, safe-area-aware insets, and bounded widths with one declaration each.