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

rch unit

rchは、ルート要素のフォントにおける「0」文字の幅を基準とするフォント相対長さの単位です。ch単位がその要素自身のフォントを基準とするのに対し、rchは常にルート要素のフォントを基準にします。一貫した文字幅ベースのレイアウトを構築する際や、入力フィールドの幅設定などで活用されます。

単位フォント相対

対応ブラウザ

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

基本構文

CSS 
.input-field {
  width: 30rch;
}
.sidebar {
  max-width: 40rch;
}

ライブデモ

Inputfieldwidth

CSS Inputfieldwidth demo.

プレビュー全画面表示

sidebarwidth

CSS sidebarwidth demo.

プレビュー全画面表示

Textcontainer

CSS Textcontainer demo.

プレビュー全画面表示

実務での使いどころ

  • 文字幅ベースのレイアウト

    ルートフォントのゼロ文字幅を基準にした一貫性のあるサイズ指定で、テキストコンテンツに最適な幅を設定します。

注意点

  • プロポーショナルフォントではゼロ文字の幅が他の文字と大きく異なる場合があるため、実際の表示を確認してください。

アクセシビリティ

  • rch単位はルートのフォントサイズ変更に追従するため、ユーザーのアクセシビリティ設定を尊重した柔軟なレイアウトが可能です。

参考リンク