昨年、Google は
CSS レイアウトとソース順序の切断を解決する。
これは、Chronicle で検討中の提案について
CSS ワーキング グループに協力してもらい、
Flexbox とグリッドのアイテムが原因で、タブの接続が切断される。「
この投稿の冒頭のセクションでは、ワーキング グループが抱える問題について
困難です。それから状況は進展しています。この投稿では、
現在の状況を伝えます特定の分野に注意を払う必要もある
フィードバック - display-contents
が含まれるアイテムはどのように処理すればよいですか?
提案の更新
現在は
ドラフト仕様テキスト
を使用します。
これにより、reading-flow
という新しいプロパティが導入されています。
このプロパティは、Flex または Grid レイアウトを含む要素に追加されます
(display: grid
または display: flex
を持つ要素)。
このプロパティには以下の値を指定できます。
normal
: DOM 内の要素の順序(現在の DOM)に従います。 確認します。flex-visual
: Flex コンテナでのみ有効になります。 Flex アイテムの視覚的な読み取り順序です。flex-flow
: Flex コンテナでのみ有効になります。柔軟なフローに従う 方向です。grid-rows
: グリッド コンテナでのみ有効になります。視覚に訴える 行ごとに並べ替える必要があります。grid-columns
: グリッド コンテナでのみ有効になります。視覚的な順番に従う 書き込みモードを考慮した列ごとのグリッド アイテムのgrid-order
: グリッド コンテナでのみ有効になります。order
プロパティが考慮され、 それ以外はnormal
のように動作します。
たとえばコンテナに 3 つの Flex アイテムがあり
flex-direction
を以下に設定します。
row-reverse
の場合、Flex コンテナの最後からタブオーダーに並んでいます。
右から左に進みます
.flex {
display: flex;
flex-direction: row-reverse;
}
row-reverse
を使用した Flex アイテムのデフォルト フローflex-flow: visual
を追加すると、読み上げフローが
英語の場合は左から右になります
.flex {
display: flex;
flex-direction: row-reverse;
reading-flow: flex-visual;
}
reading-flow:flex-visual
を使用する場合。グリッド レイアウトでは、reading-flow
を使用して視覚的な行や列を追跡する
同じです次の例では、以下に示すように、読み取りフローが
行っています
.wrapper {
display: grid;
grid-template-columns: repeat(3, 150px);
grid-template-areas: "d b b"
"c c a";
reading-flow: grid-rows;
}
.a { grid-area: a; }
.b { grid-area: b; }
.c { grid-area: c; }
.d { grid-area: d; }
reading-flow: grid-rows
を使用する場合。試してみる
この CSS プロパティは現在試験運用版ですが、有効にすることもできます
使用できます。試してみるには、Chrome Dev または Canary バージョン 128 以降をインストールしてください。
[
ランタイム フラグ CSSReadingFlow
。
サンプルをいくつか用意しています。
これらはすべて、フラグを有効にして Canary で動作します。
display: contents
のケースの動作は現在開発中であり、変更される可能性があります
のこのセクションをお読みになり、提出されたフィードバックに応じて
説明します。
display: contents
とウェブ コンポーネントを含む要素
未解決の問題がある
CSS ワーキング グループで、
read-flow を持つ要素の子に display: contents
があり、
同様にアイテムが <slot>
の場合も同様です。
次の例では、<div>
要素に display: contents
が指定されています。理由
すべての <button>
要素が Flex に参加するように昇格されます。
その順序が考慮されるため、reading-flow
ではその順序が考慮されます。
.wrapper {
display: flex;
reading-flow: flex-visual;
}
<div class="wrapper">
<div style="display: contents" id="contents1">
<button style="order: 3" id="o3">3</button>
<button style="order: 1" id="o1">1</button>
<div style="display: contents" id=contents2>
<button style="order: 4" id="o4">4</button>
<button style="order: 2" id=o2>2</button>
</div>
</div>
</div>
この状況を引き起こした実例があれば教えてください。
見てみましょう。Google Cloud Storage 内で
兄弟ではないアイテムを持つ display: contents
を持つ要素を
display: contents
を持つアイテムの兄弟ノードである。
また、display: contents
に関する問題の解決にも取り組んでいます
使用したい例がどこにあるか知りたいです
reading-flow
プロパティを display: contents
に置き換えます。現実世界を理解する
お客様のニーズを満たすソリューションを設計するのに役立ちます。
ユースケースを CSS ワーキング グループに関する問題。 実際のサイトに例がある場合や、CodePen や CodePen でデモを作成できる場合は、 JSFiddle は、この問題について説明する際、非常に役立ちます。 可能です。今後の流れについて これも便利ですただし、 最も重要なことは、実際のユースケースを見ることです。