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 | |
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
.inline-icon {
/* Align the icon to the height of a capital letter */
width: 1cap;
height: 1cap;
vertical-align: middle;
}
.badge {
/* Adjust badge size based on the height of a capital letter */
height: 1.5cap;
min-width: 1.5cap;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
}Live demo
Use cases
-
Using cap unit
The cap CSS length unit corresponds to the height of Latin capital letters.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.