Chromium の新しい論理プロパティの省略形と新しいインセット プロパティ。
Chromium 69（2018 年 9 月 3 日）以降、デベロッパーは論理プロパティと論理値により、物理スタイル、方向スタイル、寸法スタイルではなく、論理スタイルを使用して国際的なレイアウトを管理できるようになりました。Chromium 87 では、論理プロパティと論理値を少し簡単に記述するために、省略形とオフセットが提供されています。これにより、66 以降で省略形をサポートしている Firefox に Chromium が対応しています。Safari の技術プレビューでお試しいただけます。
ドキュメント フロー
論理プロパティ、インライン軸、ブロック軸についてすでに理解していて、復習が不要な場合は、スキップできます。それ以外の方は、ここで簡単に復習してください。
英語では、文字や単語は左から右に流れ、段落は上から下に積み重ねられます。中国語（繁体）では、文字や単語は上から下に、段落は右から左に積み上げられます。この 2 つのケースでは、段落に「margin top」を配置する CSS を記述しても、適切なスペースは 1 つの言語スタイルに留まります。ページが英語から繁体字中国語に翻訳されている場合、新しい縦書きモードでは余白が意味をなさない可能性があります。
そのため、箱の物理的な側面は海外ではあまり役に立ちません。これにより、複数の言語をサポートするプロセスが開始されます。つまり、ボックスモデルの物理面と論理面について学習します。
Chrome DevTools で p 要素を調べたことはありますか？デフォルトのユーザー エージェント スタイルが物理ではなく論理的であることにお気づきかもしれません。
p {
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
Chromium のユーザー エージェント スタイルシートの CSS
英語の読者が信じるような、上下に余白がありません。
それは block-start と block-end です。これらの論理プロパティは、英語の読者の上下左右に似ていますが、日本語の読者の左右にも似ています。一度作成すれば、どこでも使用できます。
通常のフローでは、ウェブページがこの多方向性を意図的に含んでいます。 ドキュメントの方向の変化に応じてページ コンテンツが更新される場合、レイアウトとその要素はフロー中とみなされます。フローの「イン」と「アウト」について詳しくは、MDN または CSS Display Module 仕様をご覧ください。論理プロパティは Flow にする必要はありませんが、方向性の変化に伴う手間のかかる作業の多くを処理します。フローは、文字、単語、コンテンツが通過する方向を示します。これにより、論理的なルートをブロックしてインライン化できます。
ブロックの方向とは、新しいコンテンツ ブロックがたどる方向です。たとえば、「次の段落をどこに配置するか」を自問します。「コンテンツ ブロック」または「テキスト ブロック」と考えることができます。どの言語でもブロックが配置され、それぞれの block-axis に沿って並べられます。block-start は段落が最初に配置される側、block-end は新しい段落が最初に配置される側です。
たとえば、従来の日本語の手書き入力では、ブロックの方向は右から左に流れます。
インライン方向とは、文字や単語が進む方向です。書くときは、腕と手が inline-axis に沿って進む方向を考慮してください。inline-start は書き込みを開始する側であり、inline-end は書き込みが終了または終了する側です。上記の動画では、inline-axis は上から下にありますが、次の動画では inline-axis は右から左に流れています。
flow-relative は、ある言語用に記述されたスタイルがコンテキストに即し、他の言語にも適切に適用されることを意味します。コンテンツは配信先の言語に比例して配信されます。
新しい省略形
以下の省略形の一部はブラウザの新機能ではありません。ブロックとインラインの両方のエッジに一度に値を設定できることを活用することで、スタイルを簡単に記述できます。以前の論理プロパティを使用して絶対位置を指定する従来の方法がないため、inset-* 論理プロパティは新機能をもたらします。インセットと省略形はうまく連携していますが、Chromium 87 に組み込まれる新しい論理プロパティ機能についてはすべてまとめて説明します。
マージンの省略形
新しい機能はリリースされていませんが、非常に便利な省略形
margin-block と margin-inline が提供されています。
margin-block-start: 2ch; margin-block-end: 2ch;
margin-block: 2ch; /* or */ margin-block: 2ch 2ch;
「上と下」や「左と右」の省略形はこれまでありませんでした。おそらく margin: 10px; の省略形を使用して 4 つの辺すべてを参照できますが、論理プロパティの省略形を使用して 2 つの相補的な辺を簡単に参照できるようになりました。
margin-inline-start: 4ch; margin-inline-end: 2ch;
margin-inline: 4ch 2ch;
パディングの省略形
新しいアビリティはリリースされていませんが、非常に便利な短縮形（
padding-block と padding-inline）が追加されました。
padding-block-start: 2ch; padding-block-end: 2ch;
padding-block: 2ch; /* or */ padding-block: 2ch 2ch;
また、inline の無料の省略形セット:
padding-inline-start: 4ch; padding-inline-end: 2ch;
padding-inline: 4ch 2ch;
インセットと省略形
物理プロパティ top、right、bottom、left はすべて、inset プロパティの値として記述できます。position の任意の値で、インセットで辺を設定するとメリットがあります。
.cover {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
inset: 0;
}
position: absolute; top: 1px; right: 2px; bottom: 3px; left: 4px;
position: absolute; inset: 1px 2px 3px 4px;
これはすぐに役に立つはずです。インセットは物理的な側面の省略形であり、マージンやパディングと同じように機能します。
新しい機能と特長
物理的な辺の短縮形と同様に、追加の inset 短縮形によって提供される論理的機能には、さらに多くのものがあります。これらの省略形は、デベロッパーが作成しやすくなり（入力が短くなります）、フロー相対であるため、レイアウトのリーチが広がります。
position: absolute; top: 10px; bottom: 10px;
position: absolute; inset-block: 10px;
position: absolute; left: 10px; right: 20px;
position: absolute; inset-inline: 10px 20px;
参考資料とインセットの省略形と記述式の完全なリストは、MDN でご覧いただけます。
枠線の省略形
Border と、そのネストされた color、style、width の各プロパティにも、新しい論理的な省略形が追加されました。
border-top-color: hotpink; border-bottom-color: hotpink;
border-block-color: hotpink; /* or */ border-block-color: hotpink hotpink;
border-left-style: dashed; border-right-style: dashed;
border-inline-style: dashed; /* or */ border-inline-style: dashed dashed;
border-left-width: 1px; border-right-width: 1px;
border-inline-width: 1px; /* or */ border-inline-width: 1px 1px;
参考資料と国境の略記と省略形の一覧は MDN でご覧いただけます。
論理プロパティ <figure> の例
すべてを簡単な例でまとめてみましょう。論理プロパティを使用すると、キャプション付きの画像をレイアウトして、さまざまな書き込み方向とドキュメント方向を処理できます。
ぜひお試しください。
<figure> といくつかの論理プロパティを使用して、カードを国際的にレスポンシブにするために特別な操作を行う必要はありません。国際的に配慮された CSS が
どのように連携して機能するのか気になります
ポリフィルとクロスブラウザのサポート
カスケードツールまたはビルドツールは、新旧のブラウザを同様に、更新された論理プロパティを使用して適切な間隔で配置するための実用的なオプションです。カスケード フォールバックでは、論理プロパティを持つ物理プロパティに従います。ブラウザは、スタイルの解決時に見つかった「最後」のプロパティを使用します。
p {
/* for unsupporting browsers */
margin-top: 1ch;
margin-bottom: 2ch;
/* for supporting browsers to use */
/* and unsupporting browsers to ignore and go 🤷♂️ */
margin-block: 1ch 2ch;
}
ただし、これはすべてのユーザーにとって完全なソリューションではありません。以下に手書きのフォールバックを示します。ここでは、:lang() 疑似セレクタを利用して特定の言語をターゲットにし、物理的な間隔を適切に調整し、最後にブラウザをサポートするための論理的な間隔を提供します。
/* physical side styles */
p {
margin-top: 1ch;
margin-bottom: 2ch;
}
/* adjusted physical side styles per language */
:lang(ja) {
p {
/* zero out styles not useful for traditional Japanese */
margin-top: 0;
margin-bottom: 0;
/* add appropriate styles for traditional Japanese */
margin-right: 1ch;
margin-left: 2ch;
}
}
/* add selectors and adjust for languages all supported */
:lang(he) {…}
:lang(mn) {…}
/* Logical Sides */
/* Then, for supporting browsers to use */
/* and unsupporting browsers to ignore #TheCascade */
p {
/* remove any potential physical cruft.. */
margin: 0;
/* explicitly set logical value */
margin-block: 1ch 2ch;
}
@supports を使用して、物理プロパティのフォールバックを提供するかどうかを判断することもできます。
p {
margin-top: 1ch;
margin-bottom: 2ch;
}
@supports (margin-block: 0) {
p {
margin-block: 1ch 2ch;
}
}
Sass、PostCSS、Emotion などには、さまざまなフォールバックやソリューションを備えた自動バンドラやビルド時のサービスがあります。それぞれの戦略を確認して、どの戦略が自分のツールチェーンとサイト戦略全体に一致しているかを確認してください。
次のステップ
論理プロパティを提供する CSS が増えますが、まだ完成していません。ただし、省略形が 1 つ大きく欠けており、こちらの GitHub の問題でまだ解決策が保留中です。下書きの一時的な解決策があります。ボックスの論理的な辺をすべて省略表現でスタイル設定する場合はどうすればよいでしょうか。
margin: 1px 2px 3px 4px; margin: 1px 2px; margin: 2px;
margin: logical 1px 2px 3px 4px; margin: logical 1px 2px; margin: logical 2px;
現在の提案書の草案では、論理的に同等のものを適用するには、すべての省略形で logical を記述する必要がありますが、DRY とは思えない人もいるでしょう。
ブロックレベルまたはページレベルで変更する方法は他にもありますが、その場合は論理的な使用法が物理的な側面を持つスタイルに漏洩する可能性があります。
html {
flow-mode: physical;
/* or */
flow-mode: logical;
/* now all margin/padding/etc references are logical */
}
/* hopefully no 3rd/1st party code is hard coded to top/left/etc ..? */
難しい問題です。皆様の投票、ご意見をお聞かせください。
論理特性について詳しく知りたい場合は、MDN の詳細なリファレンスと、ガイドや例をご覧ください 🤓?