このページは Cloud Translation API によって翻訳されました。

読み取りフローと display: コンテンツを使用した要素に関するデベロッパーフィードバックのお願い

Rachel Andrew

昨年、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;
}

</ph> <ph type="x-smartling-placeholder">

row-reverse を使用した Flex アイテムのデフォルトフロー

flex-flow: visual を追加すると、読み上げフローが英語の場合は左から右になります

.flex {
  display: flex;
  flex-direction: row-reverse;
  reading-flow: flex-visual;
}

</ph> <ph type="x-smartling-placeholder">

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; }

</ph> <ph type="x-smartling-placeholder">

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 は、この問題について説明する際、非常に役立ちます。可能です。今後の流れについてこれも便利ですただし、最も重要なことは、実際のユースケースを見ることです。

読み取りフローと display: コンテンツを使用した要素に関するデベロッパー フィードバックのお願い

提案の更新

試してみる

display: contents とウェブ コンポーネントを含む要素

読み取りフローと display: コンテンツを使用した要素に関するデベロッパーフィードバックのお願い

`display: contents` とウェブコンポーネントを含む要素