Prośba o opinię dewelopera o procesie czytania i elementach z funkcją display: content

Rachel Andrew

W zeszłym roku opublikowaliśmy posta na blogu Jak rozwiązać problem związany z rozłączaniem układu CSS i kolejności źródłowej. To szczegółowa propozycja, która jest omawiana w grupie roboczej CSS, aby rozwiązać problem polegający na tym, że zmiana kolejności elementów w flexboxie i siatce powoduje rozłączanie się kart. W początkowej sekcji tego posta opisano problem, który próbuje rozwiązać grupa robocza. Od tego czasu wiele się zmieniło, a w tym poście znajdziesz krótkie omówienie obecnej sytuacji. Potrzebujemy Twojej opinii. Jak postępować z produktami, w przypadku których pojawia się display-contents?

Aktualizacje oferty

W specyfikacji CSS Display Level 4 znajduje się teraz tekst roboczej specyfikacji. Wprowadziliśmy nową usługę o nazwie reading-flow. Ta właściwość jest dodawana do elementu zawierającego układ elastyczny lub kratowy (element z display: grid lub display: flex).

Właściwość ta akceptuje te wartości:

  • normal: używaj bieżącej kolejności elementów w DOM.
  • flex-visual: ma zastosowanie tylko do elastycznych kontenerów. Podąża za wizualnym porządkiem czytania elementów flex, biorąc pod uwagę tryb pisania.
  • flex-flow: ma zastosowanie tylko do elastycznych kontenerów. Podąża w kierunku flex.
  • grid-rows: ma zastosowanie tylko do kontenerów siatki. Porządek wizualny elementów siatki jest zgodny z ich rozmieszczeniem w wierszach, z uwzględnieniem trybu pisania.
  • grid-columns: ma zastosowanie tylko do kontenerów siatki. Jest zgodny z wizualnym układem elementów siatki według kolumny, z uwzględnieniem trybu pisania.
  • grid-order: ma zastosowanie tylko do kontenerów siatki. Uwzględnia właściwość order, ale w pozostałych aspektach działa jak normal.

Jeśli na przykład masz w kontenerze 3 elementy flex i ustawisz dla nich wartość flex-direction na row-reverse, będą one wyrównane od końca kontenera flex, a kolejność kart będzie od prawej do lewej.

.flex {
  display: flex;
  flex-direction: row-reverse;
}
Domyślny proces dotyczący elementów elastycznych z row-reverse.

Dodaj flex-flow: visual, a przepływ czytania będzie następować w kolejności wizualnej w języku angielskim, czyli od lewej do prawej.

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

W układach siatki użyj reading-flow, aby dopasować wiersze lub kolumny do wizualnych wierszy lub kolumn, a nie do kolejności w źródle. W tym przykładzie proces czytania przebiega zgodnie z rzędami.

.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; }
Z reading-flow: grid-rows.

Wypróbuj

Ta właściwość CSS jest obecnie w wersji eksperymentalnej, ale można ją włączyć do testowania. Aby wypróbować tę funkcję, zainstaluj Chrome w wersji deweloperskiej lub Canary w wersji 128 lub nowszej i włącz opcję CSSReadingFlow. Oto kilka przykładów, które pomogą Ci zacząć. Wszystkie działają w wersji Canary z włączoną flagą.

Sposób działania w przypadku display: contents jest nadal opracowywany i może ulec zmianie na podstawie opinii, które prześlesz po przeczytaniu tej sekcji posta.

Elementy z display: contents i komponentami internetowymi

Grupa robocza CSS ma nierozwiązany problem, który polega na tym, że jeden z elementów podrzędnych elementu z przepływem czytania ma wartość display: contents. Podobnie, jeśli element jest elementem <slot>.

W tym przykładzie elementy <div> mają wartość display: contents. W związku z tym wszystkie elementy <button> są promowane do udziału w układzie elastycznym, a element reading-flow uwzględnia ich kolejność.

 .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>

Chcemy wiedzieć, czy masz jakieś przykłady sytuacji, które powodują sytuację widoczną w tym przykładzie. Czy zdarza Ci się zmieniać kolejność elementów znajdujących się w elemencie, który ma display: contents, z elementami, które nie są elementami siostrzanymi, ponieważ są elementami siostrzanymi elementu, który ma display: contents?

Jako że pracujemy nad rozwiązywaniem problemów z domeną display: contents, warto też spojrzeć na przykład na przykłady użycia właściwości reading-flow w połączeniu z display: contents. Poznanie Twoich rzeczywistych przypadków użycia pomoże nam zaprojektować rozwiązanie, które spełni Twoje potrzeby.

Dodaj przypadki użycia do problemu grupy roboczej usługi porównywania cen. Jeśli masz przykłady w działających witrynach lub możesz utworzyć wersję demonstracyjną w CodePen lub JSFiddle, będzie to bardzo przydatne, gdy będziemy omawiać ten problem w grupie. Jeśli masz jakieś przemyślenia na temat tego, co się wydarzy, również je opisz. Najważniejsze jest jednak, aby zobaczyć prawdziwe przypadki użycia.