cap unit
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.