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 Rozwiązywanie problemu z rozbieżnością między układem CSS a kolejnością kodu źródłowego. Szczegółowo opisuje propozycję omawianą w grupie roboczej CSS, która ma rozwiązać problem z ponownym porządkowaniem elementów w flexboxie i siatce, powodującym rozłączenie podczas przechodzenia między elementami za pomocą klawisza Tab. W pierwszej części tego posta opisano problem, który grupa robocza próbuje rozwiązać. Od tego czasu wiele się zmieniło, a ten post zawiera krótkie podsumowanie naszej obecnej sytuacji. Mamy też konkretny obszar, w którym potrzebujemy Twojej opinii – jak mamy postępować z produktami, które mają display-contents?

Aktualizacje oferty pakietowej

W specyfikacji CSS Display Level 4 znajduje się teraz tekst projektu specyfikacji. Wprowadzamy nową właściwość o nazwie reading-flow. Ta właściwość jest dodawana do elementu zawierającego w przypadku układu elastycznego lub siatki (elementu z właściwością display: grid lub display: flex).

Właściwość przyjmuje te wartości:

• normal: kolejność elementów w DOM, czyli obecne zachowanie.
• flex-visual: działa tylko w przypadku kontenerów flexbox. Zgodnie z wizualną kolejnością odczytywania elementów flex, z uwzględnieniem trybu pisania.
• flex-flow: działa tylko w przypadku kontenerów flexbox. Podąża za kierunkiem flex-flow.
• grid-rows: działa tylko w przypadku kontenerów siatki. Podąża za wizualną kolejnością elementów siatki według wierszy, uwzględniając tryb pisania.
• grid-columns: działa tylko w przypadku kontenerów siatki. Zgodnie z kolejnością wizualną elementów siatki według kolumn, z uwzględnieniem trybu pisania.
• grid-order: działa tylko w przypadku kontenerów siatki. Uwzględnia właściwość order, ale poza tym działa jak normal.

Jeśli na przykład masz 3 elementy flex w kontenerze i ustawisz ich właściwość flex-direction na row-reverse, zostaną one ułożone od końca kontenera flex, a kolejność tabulacji będzie się przesuwać od prawej do lewej.

.flex {
  display: flex;
  flex-direction: row-reverse;
}

Dodaj flex-flow: visual, a kierunek czytania będzie zgodny z kolejnością wizualną w języku angielskim, czyli od lewej do prawej.

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

W układach siatki używaj reading-flow, aby poruszać się po wierszach lub kolumnach wizualnych, a nie po kolejności źródłowej. W tym przykładzie kolejność odczytywania jest zgodna z kolejnością wierszy.

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

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 flagę środowiska wykonawczego CSSReadingFlow. Oto kilka przykładów na początek. Wszystkie działają w Canary po włączeniu flagi.

Zachowanie w przypadku display: contents jest w trakcie opracowywania i może ulec zmianie na podstawie opinii, które przekażesz po przeczytaniu następnej sekcji tego posta.

Elementy z atrybutem display: contents i komponenty internetowe

W grupie roboczej CSS jest nierozwiązany problem dotyczący tego, jak postępować w sytuacji, gdy jeden z elementów podrzędnych elementu z kierunkiem odczytu ma wartość display: contents, a także w przypadku, gdy elementem jest <slot>.

W tym przykładzie elementy <div> mają display: contents. W związku z tym wszystkie elementy <button> są promowane do udziału w układzie elastycznym, a w konsekwencji 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 znasz jakieś przykłady z życia, które powodują sytuację widoczną w tym przykładzie. Czy kiedykolwiek musisz zmieniać kolejność elementów wewnątrz elementu, który ma atrybut display: contents, z elementami, które nie są elementami równorzędnymi, ponieważ są elementami równorzędnymi elementu, który ma atrybut display: contents?

Dodatkowo, w trakcie rozwiązywania problemów z display: contents, przydatne byłyby przykłady, w których chcesz użyć właściwości reading-flow z display: contents. Zrozumienie 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 CSS. Jeśli masz przykłady w witrynach lub możesz utworzyć wersję demonstracyjną w CodePen lub JSFiddle, będzie to niezwykle przydatne, gdy będziemy omawiać ten problem w grupie. Jeśli masz pomysł, co powinno się wydarzyć, to też będzie przydatne. Najważniejsze jest jednak poznanie rzeczywistych przypadków użycia.