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

Rachel Andrew

W zeszłym roku opublikowaliśmy na blogu posta Jak rozwiązać problem rozłączenia układu CSS i kolejności źródłowej Ta szczegółowa oferta pakietowa jest omawiana w grupę roboczą CSS, której celem jest rozwiązanie problemu zmiany kolejności elementy w flexbox i siatce powodują odłączenie obsługi kart. w początkowej części tego postu opisano problem, jakim jest grupa robocza i próbami rozwiązań. Od tego czasu wiele się zmieniło – w tym poście znajdziesz krótkie podsumowanie gdzie teraz jesteśmy. W określonym obszarze wymagamy także opinii – co zrobić z elementami z atrybutem display-contents?

Aktualizacje oferty pakietowej

Jest teraz tekst w wersji roboczej specyfikacji w specyfikacji CSS Display Poziom 4. Pojawiła się nowa usługa o nazwie reading-flow. Ta właściwość jest dodawana do elementu, który zawiera układ elastyczny lub siatka. (element z atrybutem display: grid lub display: flex).

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

• normal: postępuj zgodnie z kolejnością elementów w DOM, która jest bieżącą zachowanie użytkownika.
• flex-visual: ma zastosowanie tylko w kontenerach elastycznych. Śledź kolejność czytania elementów elastycznych z uwzględnieniem trybu pisania.
• flex-flow: ma zastosowanie tylko w kontenerach elastycznych. Idzie zgodnie z dynamiką kierunek.
• grid-rows: ma zastosowanie tylko do kontenerów siatki. Uwzględnia treści wizualne kolejności elementów siatki według wiersza, z uwzględnieniem trybu pisania.
• grid-columns: ma zastosowanie tylko do kontenerów siatki. Odbywa się zgodnie z porządkiem wizualnym elementów siatki według kolumny, biorąc pod uwagę tryb pisania.
• grid-order: ma zastosowanie tylko do kontenerów siatki. uwzględnia właściwość order, ale poza tym zachowuje się jak normal.

Jeśli na przykład w kontenerze masz 3 elementy Flex, i ustaw flex-direction na row-reverse, są wyrównane względem końca kontenera elastycznego i kolejności kart przechodzi od prawej do lewej.

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

Dodaj ten język (flex-flow: visual), a lektura będzie przebiegać zgodnie z wizualną kolejnością w angielski, a więc od lewej do prawej.

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

W układach siatki używaj elementów reading-flow, aby śledzić wiersze lub kolumny wizualne niż w kolejności źródłowej. W tym przykładzie czytanie odbywa się zgodnie z 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 usługa CSS jest obecnie w fazie eksperymentalnej, ale można ją włączyć do testów. Aby ją wypróbować, zainstaluj Chrome w wersji deweloperskiej bądź Canary w wersji 128 lub nowszej. i włącz funkcję flagę środowiska wykonawczego CSSReadingFlow. Na początek mamy kilka przykładów, które działają w Canary z włączoną flagą.

Funkcja display: contents zgłoszeń jest nadal w fazie rozwoju i może być zmiany na podstawie opinii, którą przesłaliście po przeczytaniu następującej sekcji tego posta.

Elementy z display: contents i komponentami internetowymi

Wystąpił niezrozumiały problem dla grupy roboczej ds. usług porównywania cen, aby określić, jak poradzić sobie w sytuacji, elementy podrzędne elementu z przepływem czytania mają display: contents oraz podobnie, jeśli element to <slot>.

W poniższym przykładzie elementy <div> mają display: contents. Z powodu to wszystkie elementy <button> są promowane jako objęte elastycznym w takim przypadku, więc reading-flow bierze pod uwagę 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>

Chcielibyśmy się dowiedzieć, czy masz jakieś realne przykłady, które widoczne w tym przykładzie. Czy kiedykolwiek trzeba zmienić kolejność produktów, które znajdują się w element, który zawiera display: contents z elementami, które nie są równorzędne, z powodu elementy nadrzędne względem elementu, który ma display: contents.

Ponadto pracujemy nad rozwiązaniem problemów z display: contents zobaczysz przykłady, w których można zastosować Usługa reading-flow z display: contents. Zrozumienie rzeczywistości pomogą nam zaprojektować rozwiązanie odpowiadające Twoim potrzebom.

Dodaj przykłady użycia do: Problem z grupą roboczą usługi porównywania cen. Jeśli masz przykłady w opublikowanych witrynach lub możesz utworzyć demonstrację w CodePen lub To narzędzie może okazać się niezwykle przydatne, gdy będziemy omawiać ten problem. jako grupę. Jeśli masz wątpliwości, To też może być przydatne. Jednak aby zobaczyć rzeczywiste przypadki użycia.