Chromium の新しい論理プロパティの省略形と新しいインセット プロパティ。
Chromium 69（2018 年 9 月 3 日）以降、 論理プロパティと値は、 デベロッパーは、国際的なレイアウトの管理を、論理的ではなく、 物理、方向、寸法スタイルより細分化できます。Chromium 87 では、 論理プロパティと値の記述を少し簡単にするために、オフセットが用意されています。 これにより、短縮形がサポートされていた Firefox に Chromium が追いつくことになります。 66 年以降。 Safari のテクノロジー プレビューでこの機能に対応しています。
ドキュメント フロー
すでに論理プロパティ、インライン軸、ブロック軸についてよくご存じであれば、 先に進むことができます。それ以外の方は、ここで簡単に復習できます。
英語では、文字や単語は左から右に流れ、段落は上から下に重ねられます。 繁体字中国語では、文字と単語が上から下に、段落が積み重ねられる 右から左に記述できますこの 2 つのケースでは、「上マージン」を配置する CSS を記述するとします。段落で分割され、 1 つの言語スタイルで適切な間隔しかないため、ページが従来の 中国語（英語）の場合は、新しい縦書きモードでは余白が正しく表示されない可能性があります。
そのため、箱の物理的な面は海外での使用にはあまり役立ちません。したがって、 複数の言語をサポートするプロセス箱モデルの物理面と論理面について学びました。
Chrome DevTools の p 要素を調べたことはありますか？もしそうなら、
User Agent のデフォルトのスタイルが
物理ではなく論理的です
p {
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
Chromium のユーザー エージェント スタイルシートの CSS
英語の読者が信じるような上下に余白がありません。
block-start と block-end です！これらの論理的特性は、英語の読者に
左右ですが、左右は日本の読者に似ています。一度書けたら、どこでも使える。
通常のフローとは、ウェブページがこの多方向性に意図的に含まれる場合です。 ドキュメントの方向の変化に応じてページ コンテンツが更新されると、レイアウトとその 考慮されます。「in」の詳細と「out」フロー MDN または CSS ディスプレイ モジュールの仕様論理プロパティは 方向性が変わったときに面倒な作業の多くが引き継がれます。 流れとは方向、つまり文字、単語、内容がそれに沿って進む必要がある方向を意味します。 これにより、論理方向をブロックしてインライン化できます。
ブロックの方向とは、新しいコンテンツ ブロックがそれに続く方向です。
「次の段落をどこに置くのか」といった質問です。「コンテンツ ブロック」や「テキストのブロック」と考えることもできます。
すべての言語がブロックを整理し、順番に並べる
それぞれの block-axis。block-start は、段落が最初に配置される側です。
block-end は、新しい段落が流れる方向です。
たとえば、従来の日本語の手書き入力では、ブロックの方向は右から左へ流れます。
インライン方向とは、文字や単語が通る方向です。方向性を考慮する
書くときの腕と手の動き。inline-axisに沿って移動しています。
inline-start は入力を開始する側で、inline-end は横である
終わりや終わりはありません上の動画では、inline-axis は上から下、
次の動画では、inline-axis は右から左に流れます。
flow-relative であること
1 つの言語向けに記述されたスタイルが、コンテキストに即して適切に
他の言語にも応用できます。コンテンツは配信先の言語に応じて流れます。
新しい省略形
以下の短縮形の一部は、ブラウザの新機能ではなく、
両方のブロックに値を設定できることを活用して、スタイルを記述する方法
まとめて変更できます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 のガイドや例をご覧ください 🤓?