Newly available 条件付きOK。主要ブラウザで対応済みだが、古いバージョンでは未対応の場合がある。フォールバックを検討。

rcap unit

rcapは、ルート要素のcap単位の値に等しいフォント相対長さの単位です。cap-heightは大文字ラテン文字の高さにほぼ等しく、rcapはこれをルート要素基準で計算します。typographicバーティカルリズムの設計や、テキストの高さに合わせたアイコンやインジケーターのサイズ調整に適しています。

単位フォント相対

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.types.length.rcap
118
118
147
17.2
118
17.2
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
.icon {
  width: 1rcap;
  height: 1rcap;
}
.indicator {
  margin-top: 0.5rcap;
}

ライブデモ

iconsize

CSS iconsize demo.

プレビュー全画面表示

indicator

CSS indicator demo.

プレビュー全画面表示

marginadjust

CSS marginadjust demo.

プレビュー全画面表示

実務での使いどころ

  • テキスト高さ基準のサイズ調整

    大文字テキストの高さを基準にアイコンや装飾要素のサイズを設定し、視覚的な一貫性を確保します。

注意点

  • ブラウザのフォントレンダリングによってcap-heightの計算が異なる場合があるため、クロスブラウザでの差異に注意してください。

アクセシビリティ

  • rcap単位はルート要素のフォントサイズに連動するため、ユーザーのフォントサイズ変更に適切に追従します。

参考リンク