Newly availableUseful when cap unit expresses sizing or math relationships more clearly than fixed literals.
Units and functions Newly available

cap unit

The cap CSS length unit corresponds to the height of Latin capital letters.

Units and functions

Overview

The cap CSS length unit corresponds to the height of Latin capital letters.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.types.length.cap
118
118
97
17.2
118
17.2
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
/* cap unit */
/* See MDN Web Docs for details */

Use cases

  • Formula-driven sizing

    Use cap unit to connect layout values to content, typography, or mathematical relationships.

  • Responsive calculations

    Build CSS that scales with the environment rather than relying on repeated hard-coded numbers.

Cautions

  • Advanced units and math improve clarity only when the relationship is easy to read later.
  • Prefer simpler values when a formula adds more complexity than benefit.

Accessibility

  • Relative sizing can improve zoom behavior when tested with real content and component states.
  • Math-based CSS should still preserve readable spacing and avoid clipped content.

Related links

Powered by web-features