Newly available Useful when rex unit expresses sizing or math relationships more clearly than fixed literals.

rex unit

The rex CSS length unit is a font-relative length that is equal to the x-height of the root element.

Units and functions

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.types.length.rex
111
111
147
17.2
111
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 {
  width: 1rex;
  height: 1rex;
  vertical-align: middle;
}

Live demo

Inline icons

CSS inlineicon demo.

PreviewFullscreen

m-ka-

CSS m-ka- demo.

PreviewFullscreen

decorationrain

CSS decorationrain demo.

PreviewFullscreen

Use cases

  • Formula-driven sizing

    Use rex 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