Chcemy poznać Twoją opinię na temat proponowanego rozwiązania problemu związanego z metodami układu, które powodują, że elementy są układane w kolejności niezwiązanej ze źródłem dokumentu.
Grupa robocza CSS pracuje nad rozwiązaniem problemu, w którym metoda układu może porządkować elementy w kolejności, która nie jest powiązana ze źródłem, a tym samym z kolejnością czytania i punktów skupienia dokumentu. Z tego artykułu dowiesz się, jaki jest problem i jakie jest jego rozwiązanie. Chętnie poznamy Twoją opinię.
Problem
Kolejność czytania dokumentu HTML odpowiada kolejności źródeł. Oznacza to, że czytnik ekranu odczyta dokument zgodnie z układem w źródle, a osoba korzystająca z klawiatury, aby przewijać dokument, będzie też postępować zgodnie z tym źródłem. Zwykle jest to uzasadnione, a sensowny porządek źródeł w dokumencie jest niezbędny do prezentacji treści w trybie czytania, dla czytników ekranu i dla urządzeń z ograniczonym CSS. Jednak CSS, a w szczególności flexbox i grid, mogą tworzyć układy, w których kolejność wizualna jest inna niż w źródłowym pliku.
Na przykład użycie właściwości order w elementach elastycznych zmienia kolejność układu, ale nie kolejność w źródle.
W przypadku układu kratowego wybrana metoda układu może zmieniać kolejność kart, np. gdy używasz grid-auto-flow: dense, co powoduje losowy układ elementów.
Rozbieżność może też powstać, jeśli deweloper umieści elementy w siatce w innej kolejności niż w źródle.
Proponowane rozwiązanie
Grupa robocza CSS proponuje rozwiązanie tego problemu i chciałaby uzyskać opinię deweloperów oraz społeczności osób niepełnosprawnych na temat tego rozwiązania.
Śledzenie losowych układów za pomocą reading-order: auto
W przypadku losowego rozmieszczenia elementów, np. przy gęstym upakowaniu w układzie siatki, prawdopodobnie chcesz, aby przeglądarka stosowała układ, a nie kolejność źródła. Aby to było możliwe, elementy elastyczne lub siatki muszą mieć właściwość reading-order o wartości auto.
Ten kod CSS powoduje, że kolejność czytania będzie zgodna z umieszczeniem elementów, które są gęsto upakowane z powodu grid-auto-flow: dense.
.cards {
display: grid;
grid-auto-flow: dense;
}
.cards li {
grid-column: auto / span 2;
reading-order: auto;
}
Śledzenie układów nielosowych za pomocą reading-order-items
W przypadku niektórych układów siatki i flex kolejność układu jest łatwa do zrozumienia. Na przykład w elastycznym układzie, który używa właściwości order do zmiany kolejności elementów, występuje oczywista kolejność układu określona przez właściwość order. W przypadku innych układów trudno jest określić, jaki jest najlepszy układ, ponieważ może być więcej niż jeden możliwy wybór. Dlatego, jeśli używasz układów bez losowania, musisz dodać do kontenera właściwość grid-order-items z wartościami słów kluczowych, które określają Twój zamiar dotyczący kolejności układów.
Ten przykład pokazuje układ elastyczny z użyciem elementu row-reverse. Elementy flex mają reading-order: auto, a kontener flex – reading-order-items: flex flow, aby wskazać, że kolejność czytania ma być zgodna z kierunkiem flex-flow, a nie z kolejnością wizualną (którą można wskazać za pomocą flex visual).
.cards {
display: flex;
flex-flow: row-reverse;
reading-order-items: flex flow;
}
.cards li {
reading-order: auto;
}
W tym przykładzie tworzymy układ siatki za pomocą funkcji grid-template-areas, a elementy są umieszczane w innej kolejności niż w źródle. Właściwość reading-order-items wskazuje, że należy przestrzegać kolejności układu, przechodząc przez 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ódeł nie ma znaczenia?
Nie, kolejność źródeł nadal ma znaczenie. Tej funkcji należy używać tylko w określonych sytuacjach, gdy kolejność czytania może różnić się od źródła. Może się tak zdarzyć, gdy używasz metod układu, które mogą powodować takie rozłączanie, np. gęstego wypełniania siatki, lub gdy w przypadku określonego punktu przełamania ma sens inny układ.
Jeśli używasz tych właściwości, utwórz dokument źródłowy w takim porządku, aby miał on sens, gdyby strona została wyrenderowana bez CSS. Dodaj te właściwości tylko w miejscach i w miejscach podziału, które ich wymagają.
Czy narzędzia do tworzenia powinny stosować te właściwości?
Narzędzia do tworzenia, które umożliwiają tworzenie układu siatki przez przeciąganie i upuszczanie elementów, powinny zachęcać użytkowników do tworzenia sensownych dokumentów źródłowych. Dlatego w większości przypadków lepiej jest zmienić kolejność źródeł na podstawie kolejności w układzie, zamiast używać tych właściwości jako leniwego sposobu na rozwiązanie problemu z rozłączeniem.
Podziel się opinią na temat tej propozycji
Bardzo zależy nam na Twojej opinii na ten temat. Jeśli masz przypadek użycia, który Twoim zdaniem nie zostanie rozwiązany, lub jeśli masz problemy z dostępnością, skontaktuj się z grupą roboczą CSS.
Trwa wątek, w którym znajdziesz wiele przykładów użycia i uwag na temat tego podejścia. W tym wątku możesz dodawać komentarze i wskazywać potencjalne problemy związane z tą ofertą. Pamiętaj, że obecna propozycja różni się znacznie od mojej pierwotnej propozycji, która rozpoczęła ten wątek. Osoby zainteresowane mogą zapoznać się z całym procesem, który doprowadził do obecnego stanu, ponieważ jest to dobry przykład tego, jak propozycje są opracowywane przez grupę roboczą CSS, aby stały się elementami, które można wdrożyć w przeglądarkach.
Miniatura autorstwa Patricka Tomasso. Dziękujemy Chrisowi Harrelsonowi, Tab Atkins i Ianowi Kilpatrickowi za opinie i sprawdzenie.