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