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 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 dokumencie źródłowym, a osoba korzystająca z klawiatury, aby przejść do innej części dokumentu, również będzie postępować zgodnie z tym układem. Zwykle jest to uzasadnione, a sensowny porządek źródeł w dokumentach jest niezbędny do prezentacji treści w trybie czytania, w czytnikach ekranu i na dowolnym urządzeniu 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 flex zmienia kolejność układu, ale nie kolejność w źródle.
W przypadku układu siatki wybrana metoda układu może zmieniać kolejność kart, np. gdy używasz grid-auto-flow: dense, co powoduje losowy układ elementów.
Deweloperzy mogą też spowodować brak spójności, umieszczając 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 sytuacjach, w których kolejność układu jest losowa, np. podczas gęstego upakowania w układzie siatki, prawdopodobnie chcesz, aby przeglądarka stosowała układ, a nie kolejność źródła. Aby to się stało, elementy elastyczne lub siatki muszą mieć właściwość reading-order o wartości auto.
Ten kod CSS powoduje, że kolejność czytania będzie odpowiadać rozmieszczeniu 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 niektórych układach 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 nielosowanych układów, 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żemy 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 sensowne jest zastosowanie innego układu.
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 uważasz, że ta metoda nie rozwiąże Twojego problemu lub jeśli masz wątpliwości dotyczące dostępności, skontaktuj się z grupą roboczą CSS.
Trwa wątek, który zawiera wiele przypadków użycia i przemyśleń na temat podejścia. W tym wątku możesz dodawać komentarze i wskazywać potencjalne problemy związane z tą ofertą. Pamiętaj, że obecna propozycja jest bardzo różna 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 w ramach grupy roboczej CSS, aby można je było wdrożyć w przeglądarkach.
Miniatura autorstwa Patricka Tomasso. Dziękujemy Chrisowi Harrelsonowi, Tab Atkins i Ianowi Kilpatrickowi za opinie i sprawdzenie.