Potrzebujemy Twojej opinii na temat proponowanego rozwiązania problemu metod układu elementów w kolejności odłączonej od źródła 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 jest zgodna z kolejnością źródłową. Oznacza to, że czytnik ekranu odczyta dokument w takiej postaci, w jakiej znajduje się w źródle, a osoba używająca klawiatury do przechodzenia wokół dokumentu za pomocą klawisza Tab również będzie przestrzegała tej kolejności. 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.
Programista może również spowodować to odłączenie, umieszczając elementy w siatce w innej kolejności niż ta określona w źródle.
Proponowane rozwiązanie
Zespół roboczy ds. usług porównywania cen proponuje rozwiązanie tego problemu i chętnie pozna opinie deweloperów oraz społeczności związanej z ułatwieniami dostępu na temat tego podejścia.
Śledzenie losowych układów za pomocą reading-order: auto
W sytuacjach, w których występuje losowa kolejność układu, np. gdy używasz gęstego uporządkowania w układzie siatki, prawdopodobnie chcesz, by przeglądarka stosowała układ, a nie kolejność źródłową. 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 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 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 pozwalają tworzyć układ siatki przez przeciąganie i upuszczanie elementów, powinny zachęcać użytkowników do tworzenia przemyślanych 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
Chętnie zbieramy opinie 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, który zawiera wiele przypadków użycia i przemyśleń na temat podejścia. W tym wątku możesz dodawać komentarze i wyróżniać potencjalne problemy związane z propozycją. 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 w ramach grupy roboczej CSS, aby stać się czymś, co można wdrożyć w przeglądarkach.
Miniatura autorstwa Patricka Tomasso. Dziękujemy Chrisowi Harrelsonowi, Tab Atkins i Ianowi Kilpatrickowi za opinie i sprawdzenie.