昨年、CSS レイアウトとソース順序の不一致を解決するというブログ投稿を公開しました。この文書では、CSS ワーキング グループで議論されている提案について詳しく説明しています。この提案は、flexbox とグリッド内のアイテムの並べ替えによってタブ操作が切断される問題を解決することを目的としています。この投稿の冒頭のセクションでは、ワーキング グループが解決しようとしている問題の概要を説明しています。それ以降、状況は進展しており、この投稿では現在の状況について簡単に説明します。また、フィードバックが必要な特定の領域もあります。display-contents が付いたアイテムをどう扱えばよいですか？
提案書の更新
CSS Display Level 4 仕様にドラフト仕様テキストが追加されました。これにより、reading-flow という新しいプロパティが導入されます。このプロパティは、フレックス レイアウトまたはグリッド レイアウトのコンテナ要素（display: grid または display: flex を含む要素）に追加されます。
このプロパティには、次の値を指定できます。
normal: DOM 内の要素の順序に従います（現在の動作）。flex-visual: Flex コンテナにのみ適用されます。書き込みモードを考慮して、Flex アイテムの視覚的な読み取り順序に従います。flex-flow: Flex コンテナにのみ適用されます。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 でデモを作成できる場合は、この問題をグループで議論する際に非常に役立ちます。期待される結果についてご意見があれば、それも役立ちます。ただし、最も重要なのは、実際のユースケースを確認することです。