Widely available YES。全主要ブラウザで対応済み。国際化を見据えた新規プロジェクトでは積極採用を推奨。
レイアウト Widely available

Logical properties

margin-left や padding-right などの物理方向プロパティは、LTR（左から右）前提で設計されている。RTL 言語（アラビア語、ヘブライ語）や縦書き日本語に対応する際、方向ごとにスタイルを書き換える必要があった。論理プロパティ（margin-inline-start、padding-block-end など）を使えば、書字方向に応じて自動的に適用される方向が切り替わる。

国際化レイアウト

概要

margin-left や padding-right などの物理方向プロパティは、LTR（左から右）前提で設計されている。RTL 言語（アラビア語、ヘブライ語）や縦書き日本語に対応する際、方向ごとにスタイルを書き換える必要があった。論理プロパティ（margin-inline-start、padding-block-end など）を使えば、書字方向に応じて自動的に適用される方向が切り替わる。

対応ブラウザ

デスクトップ

Chrome 89+
Edge 89+
Safari 15+
Firefox 66+

モバイル

Chrome Android 89+
Safari iOS 15+
Firefox Android 66+

基本構文

CSS 
.card {
  margin-inline: auto;
  padding-block: 1rem;
  padding-inline: 1.5rem;
  border-inline-start: 4px solid blue;
}

/* 幅・高さの論理版 */
.sidebar {
  inline-size: 300px;
  block-size: 100%;
}

実務での使いどころ

  • 多言語サイトの RTL 対応

    margin-inline-start / end を使うことで、LTR と RTL のレイアウト切り替えが自動で行われ、個別のスタイル上書きが不要になる。

  • 縦書きレイアウト

    日本語の縦書き（writing-mode: vertical-rl）でも、論理プロパティが正しいブロック方向・インライン方向に適用される。

注意点

  • 既存コードベースの物理プロパティを一括置換すると、意図しないレイアウト変更が生じる可能性がある。段階的に移行するのが安全。
  • ショートハンド（margin-inline、padding-block）と個別指定（margin-inline-start）を混在させると優先順位の把握が難しくなる。

アクセシビリティ

  • RTL 言語の利用者にとって正しい方向のレイアウトが自動適用されるため、アクセシビリティ向上に直結する。

参考リンク