あなたの CSS は論理的ですか?

この CSS スニペットを見てください。何が問題なのですか?

p {
    border-top: 2px solid red;
    margin-left: 2rem;
    width: 80ch;
}

Web サイトの閲覧者に応じて、エラーが 0 件または 3 件あります。どのエラーを説明する前に、コンテキストを設定しましょう。

視点の問題

ボートに乗るとき、「左」とか「右」という言葉は聞こえません。それは、船の左右は観察者の視点に依存するからです。代わりに、彼らは「左舷」と「右舷」という、あなたの位置や発言者の位置に関係なく、常にボートの同じ側を指す明確な用語を使用します。

画像はピアソン スコット フォレスマンによって作成され、パブリック ドメインにリリースされました。ソース

同じ原理が解剖学的位置の用語にも当てはまり、医師や獣医師は患者や医師の相対的な位置に関係なく、体の各部分の位置を明確に説明できます。

CSS の国際化

Web アプリケーションが世界中で使用されている場合は、さまざまな言語ニーズに適応するように設計する必要があります。たとえば、英語やスペイン語などの言語は左から右 (LTR) で書かれます。アラビア語とヘブライ語は右から左へ (RTL) 書かれます。モンゴル語と伝統的な日本語は上から下に書かれます。

したがって、CSS 宣言を次のように使用すると:

p {
    margin-left: 2rem;
}

(1)段落の物理的に左側にスペースを追加したいということですか、それとも (2)コンテンツが始まる前にスペースを追加したいということですか?完全に国際化された UI の場合、正しい答えは常に (2) です。

論理的な解決策

LTR 言語と RTL 言語用に個別のスタイルシートを作成し、条件付きで読み込むことができます。オリジナルの LTR スタイルシートに基づいて RTL スタイルシートを自動的に生成できる webpack-rtl プラグインのようなツールもあります。

ただし、最良の解決策は、次のように CSS スタイルを条件付きで適用することです。

p {
    if writing is left-to-right:
        margin-left: 2rem;
    elseif writing is right-to-left:
        margin-right: 2rem;
    elseif writing is top-to-bottom:
        margin-top: 2rem;
    endif
}

これは CSS で行うことができますが、より単純な構文を使用します。

p {
    margin-inline-start: 2rem;
}

この margin-inline-start プロパティは、ユーザーの書き込み方向に基づいて動的に調整される 論理 CSS プロパティ です。論理プロパティは、左舷と右舷の類似点と同様に機能します。これらは、さまざまな書記体系にわたって明確な方法でレイアウトを記述します。

論理プロパティは、次の 2 つの用語を使用して レイアウト方向 を定義します。

• インライン: 行内のテキストの流れと平行します。
• ブロック: 行内のテキストの流れに対して垂直。

この図は、CSS でサポートされているすべての書き込みモードの物理的な位置と比較した論理的な位置を示しています。

論理プロパティを使用すると、この記事の冒頭に示した最初の例は次のように書き換えることができます。

p {
    border-top: 2px solid red;
    margin-left: 2rem;
    width: 80ch;
}

論理プロパティを使用するように既存の CSS スタイルシートを更新することは、最初は困難に思えるかもしれません。ただし、ほとんどの作業では、左を inline-start に、右を inline-end に、上を block-start に、下を block-end に置き換えるだけです。一部のプロパティでは別の名前変更が必要です。たとえば、border-bottom-left-radius は border-end-start-radius になり、高さは block-size になります。

これは、Web サイトに誰でもアクセスできるようにする 将来性のあるソリューションであるため、努力する価値は十分にあります。たとえば、私が参加している EasyAdmin プロジェクトは、論理プロパティを使用するようにスタイルシートをすでに更新しています。

論理プロパティのリファレンス

ここに、独自のプロジェクトの更新に役立つすべての論理プロパティの参照表があります:

Physical Property	Logical Property
border-bottom	border-block-end
border-bottom-color	border-block-end-color
border-bottom-left-radius	border-end-start-radius
border-bottom-right-radius	border-end-end-radius
border-bottom-style	border-block-end-style
border-bottom-width	border-block-end-width
border-left	border-inline-start
border-left-color	border-inline-start-color
border-left-style	border-inline-start-style
border-left-width	border-inline-start-width
border-right	border-inline-end
border-right-color	border-inline-end-color
border-right-style	border-inline-end-style
border-right-width	border-inline-end-width
border-top	border-block-start
border-top-color	border-block-start-color
border-top-left-radius	border-start-start-radius
border-top-right-radius	border-start-end-radius
border-top-style	border-block-start-style
border-top-width	border-block-start-width
bottom	inset-block-end
container-intrinsic-height	contain-intrinsic-block-size
container-intrinsic-width	contain-intrinsic-inline-size
height	block-size
left	inset-inline-start
margin-bottom	margin-block-end
margin-left	margin-inline-start
margin-right	margin-inline-end
margin-top	margin-block-start
max-height	max-block-size
max-width	max-inline-size
min-height	min-block-size
min-width	min-inline-size
overscroll-behavior-x	overscroll-behavior-inline
overscroll-behavior-y	overscroll-behavior-block
overflow-x	overflow-inline
overflow-y	overflow-block
padding-bottom	padding-block-end
padding-left	padding-inline-start
padding-right	padding-inline-end
padding-top	padding-block-start
right	inset-inline-end
top	inset-block-start
width	inline-size

もっと詳しく知る

• MDN: CSS の論理プロパティと値

---

✨ この記事や私の他の記事を気に入っていただき、私の仕事をサポートしたい場合は、GitHub で私のスポンサーになることを検討してください?

---

以上があなたの CSS は論理的ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。