昨年、Google はブログ投稿「CSS レイアウトとソース順序の不一致を解決する」を公開しました。これは、CSS ワーキング グループで議論されている提案の詳細です。この提案は、flexbox とグリッドでアイテムの順序を変更するとタブ移動が途切れるという問題を解決することを目的としています。その投稿の冒頭部分では、ワーキング グループが解決しようとしている問題の概要が説明されています。その後、状況は変化しており、この投稿では現在の状況について簡単に説明します。また、フィードバックが必要な特定の領域もあります。display-contents が付いているアイテムをどのように処理すればよいですか？
提案の更新
CSS Display Level 4 仕様に仕様のドラフト テキストが追加されました。これにより、reading-flow という新しいプロパティが導入されます。このプロパティは、フレックス レイアウトまたはグリッド レイアウトのコンテナ要素（display: grid または display: flex を持つ要素）に追加されます。
このプロパティは次の値を受け入れます。
normal: DOM 内の要素の順序に従います。これが現在の動作です。flex-visual: フレックス コンテナでのみ有効になります。書き込みモードを考慮して、Flex アイテムの視覚的な読み取り順序に従います。flex-flow: フレックス コンテナでのみ有効になります。flex-flow の方向に沿って配置します。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-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 ワーキング グループには、reading-flow を持つ要素の子の 1 つが display: contents を持つ場合、同様に項目が <slot> の場合、どのように処理するかを決定するための未解決の問題があります。
次の例では、<div> 要素に display: contents があります。そのため、すべての <button> 要素がフレキシブル レイアウトに参加するように昇格され、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>
この例のような状況を引き起こす実際の例があれば、ぜひお知らせください。display: contents を持つ要素内のアイテムを、display: contents を持つアイテムの兄弟であるために兄弟ではないアイテムと並べ替える必要はありますか？
また、display: contents に関する問題の解決に取り組むにあたり、display: contents で reading-flow プロパティを使用したいと思われる例があれば、ぜひお聞かせください。実際のユースケースを把握することで、お客様のニーズを満たすソリューションを設計できます。
CSS ワーキング グループの問題にユースケースを追加します。ライブサイトの例がある場合や、CodePen または JSFiddle でデモを作成できる場合は、この問題をグループで議論する際に非常に役立ちます。期待される動作についてご意見がありましたら、それも有用です。ただし、最も重要なのは実際のユースケースを確認することです。