Prosimy o Twoją opinię na temat proponowanego rozwiązania problemu z metodami układu strony, które umieszczają elementy w kolejności niepowiązanej od źródła dokumentu.
Grupa robocza CSS pracuje nad rozwiązaniem problemu, w którym metoda układu może uporządkować elementy w kolejności, która nie jest powiązana ze źródłem, a tym samym od kolejności czytania i fokusu w dokumencie. W tym artykule opisano problem i zaproponowane rozwiązanie – chętnie poznamy Twoją opinię.
Problem
Kolejność czytania dokumentu HTML jest zgodna z kolejnością źródłową. Oznacza to, że czytnik ekranu odczyta dokument w takiej postaci, w jakiej jest on umieszczony w źródle, a osoba używająca klawiatury do obsługi tabulacji będzie też przestrzegać tej kolejności źródłowej. Zwykle ma to sens, a rozsądna kolejność źródeł w dokumencie jest niezbędnym elementem podczas odczytywania prezentacji treści, czytników ekranu i dowolnego urządzenia z ograniczonym kodem CSS. Jednak CSS, a zwłaszcza Flexbox i siatka, mogą tworzyć układy, w których układ określa kolejność odczytywania treści wizualnych, która jest inna niż w źródle źródłowym.
Na przykład użycie właściwości order do elementów Flex zmienia kolejność układu, ale nie kolejność w źródle.
W przypadku układu siatki w przypadku wybranej metody układu możliwe jest zmieszanie kolejności kart, np. w polu grid-auto-flow: dense, który powoduje utworzenie losowej kolejności elementów w układzie.
Programista może też spowodować rozłączenie, umieszczając elementy w siatce w innej kolejności niż w źródle.
Zaproponowane rozwiązanie
Grupa robocza CSS proponuje rozwiązanie tego problemu i chce opinie deweloperów oraz społeczności na temat ułatwień dostępu na ten temat.
Te losowe układy z ustawieniem reading-order: auto
W sytuacjach, w których powstaje losowa kolejność układów, np. gęste upakowanie elementów w siatce, prawdopodobnie chcesz, aby przeglądarka kierowała się zgodnie z układem, a nie z kolejnością źródłową. Aby tak się stało, elementy Flex i siatka muszą mieć właściwość reading-order o wartości auto.
Poniższy kod CSS powoduje, że kolejność czytania przesuwa się po rozmieszczeniu produktów, które zostały gęsto spakowane z powodu błędu atrybutu grid-auto-flow: dense.
.cards {
display: grid;
grid-auto-flow: dense;
}
.cards li {
grid-column: auto / span 2;
reading-order: auto;
}
Korzystaj z układów nielosowych w reading-order-items
W niektórych układach siatki i elastycznych kolejność układu jest łatwa do zrozumienia. Na przykład w układzie elastycznym, który używa właściwości order do zmiany kolejności elementów, istnieje oczywista kolejność układu, która określa właściwość order. W innych układach nie jest jasne, jaka jest idealna kolejność układu, ponieważ dostępnych jest więcej opcji. Dlatego w przypadku korzystania z układów nielosowych musisz dodać do kontenera właściwość grid-order-items z wartościami słów kluczowych, które pomogą Ci zrozumieć intencje związane z kolejnością układu.
Poniższy przykład pokazuje układ elastyczny z użyciem pola row-reverse. Elementy elastyczne mają element reading-order: auto i kontener elastyczny reading-order-items: flex flow, aby wskazać, że chcesz, aby kolejność czytania również odbywała się w kierunku flex-flow, a nie jak kolejność wizualnej (co możemy wskazać za pomocą parametru flex visual).
.cards {
display: flex;
flex-flow: row-reverse;
reading-order-items: flex flow;
}
.cards li {
reading-order: auto;
}
W następnym przykładzie układ siatki jest tworzony za pomocą właściwości grid-template-areas, a elementy są umieszczane w innej kolejności układu niż w kolejności źródłowej. Właściwość reading-order-items wskazuje, że mamy przestrzegać kolejności układu, przemierzając każdy wiersz przed przejściem do następnego. (grid column wskazuje przeciwny kierunek).
.wrapper {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
grid-template-areas:
"a a b b b b"
"c c d d e e"
"f f g g h h";
reading-order-items: grid rows;
}
.a {
grid-area: a;
reading-order: auto;
}
Czy to oznacza, że kolejność źródłowa nie ma znaczenia?
Nie, kolejność źródłowa nadal ma znaczenie. Tej funkcji należy używać tylko w określonych sytuacjach, w których kolejność czytania może być inna w zależności od źródła. Dotyczy to na przykład metod układu, które mogą spowodować rozłączenie, takich jak gęste pakowanie siatki lub gdy w danym punkcie przerwania sprawdza się inna kolejność układu.
Jeśli korzystasz z tych właściwości, utwórz dokument źródłowy w takiej kolejności, która będzie miała sens, jeśli strona zostanie wyrenderowana bez użycia kodu CSS. Dodawaj te właściwości tylko w miejscach i w punktach przerwania, które ich wymagają.
Czy te właściwości powinny być stosowane w narzędziach do tworzenia?
Narzędzia do tworzenia, które umożliwiają tworzenie układu siatki przez przeciąganie i upuszczanie elementów, powinny nadal zachęcać do stworzenia rozsądnego dokumentu źródłowego. Dlatego w większości przypadków lepiej byłoby zmienić kolejność źródeł na podstawie kolejności układu, zamiast używać tych właściwości jako leniwego sposobu na radzenie sobie z brakiem połączenia.
Podziel się opinią na temat tej propozycji
Chętnie poznamy Twoją opinię na ten temat. W szczególności, jeśli uważasz, że to nie rozwiąże problemu lub masz problem z ułatwieniami dostępu w tym podejściu, poinformuj o tym grupę roboczą ds. usług porównywania cen.
Prowadzimy wątek, który zawiera wiele przypadków użycia i opinii dotyczących poszczególnych metod. Ten wątek to świetne miejsce, by dodać komentarze i wyróżnić potencjalne problemy związane z propozycją. Zwróć uwagę, że obecna propozycja znacznie różni się od tej, która zainicjowała wątek. Zainteresowanym osobom może spodobać się rozmowa, która doprowadziła do tego, gdzie obecnie jesteśmy, ponieważ jest to dobry przykład tego, jak w grupie roboczej CSS działają oferty, które można wdrożyć w przeglądarkach.
Miniatura: Patrick Tomasso. Dziękuję Chrisowi Harrelsonowi, Tab Atkins i Ianowi Kilpatrickowi za opinie i opinię.