Chcielibyśmy poznać Twoją opinię na temat proponowanego rozwiązania problemu z metodami układu, które rozmieszczają elementy w kolejności niezwiązanej ze źródłem dokumentu.
Grupa robocza CSS pracuje nad rozwiązaniem sytuacji, w której metoda układu może rozmieszczać elementy w kolejności niezwiązanej ze źródłem, a tym samym z kolejnością czytania i skupienia dokumentu. W tym artykule wyjaśniamy problem i proponowane rozwiązanie. Chętnie poznamy Twoją opinię.
Problem
Kolejność odczytywania dokumentu HTML jest zgodna z kolejnością kodu źródłowego. Oznacza to, że czytnik ekranu odczyta dokument w kolejności, w jakiej jest on ułożony w źródle, a osoba korzystająca z klawiatury do poruszania się po dokumencie również będzie podążać za tą kolejnością. Zwykle ma to sens, a rozsądna kolejność źródeł w dokumencie jest niezbędna w przypadku prezentacji treści w trybie czytania, czytników ekranu i urządzeń z ograniczonymi możliwościami CSS. Jednak CSS, a w szczególności flexbox i grid, mogą tworzyć układy, w których układ definiuje wizualną kolejność odczytu różną od źródła.
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 powodować pomieszanie kolejności kart, na przykład w przypadku użycia grid-auto-flow: dense, co powoduje losową kolejność elementów.
Deweloper może też spowodować to rozłączenie, 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 chętnie pozna opinie deweloperów i społeczności zajmującej się dostępnością na temat tego podejścia.
stosowanie losowych układów z reading-order: auto,
W sytuacjach, w których kolejność elementów jest losowa, np. w przypadku używania gęstego upakowania w układzie siatki, prawdopodobnie chcesz, aby przeglądarka śledziła układ, a nie kolejność w kodzie źródłowym. Aby to osiągnąć, elementy elastyczne lub siatki muszą mieć właściwość reading-order o wartości auto.
Poniższy kod CSS spowoduje, że kolejność odczytu będzie zgodna z umiejscowieniem elementów, które zostały ściśle upakowane ze względu na grid-auto-flow: dense.
.cards {
display: grid;
grid-auto-flow: dense;
}
.cards li {
grid-column: auto / span 2;
reading-order: auto;
}
Układy inne niż losowe z 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 określona przez właściwość order. W przypadku innych układów nie jest tak oczywiste, jaka jest idealna kolejność elementów, i może być więcej niż 1 możliwość. Dlatego w przypadku układów nierandomizowanych musisz dodać do kontenera właściwość grid-order-items z wartościami słów kluczowych wyjaśniającymi Twoje intencje dotyczące kolejności układu.
Poniższy przykład pokazuje układ elastyczny z użyciem row-reverse. Elementy flex mają atrybut reading-order: auto, a kontener flex – reading-order-items: flex flow, co oznacza, że kolejność odczytu ma być zgodna z kierunkiem flex-flow, a nie z kolejnością wizualną (którą moglibyśmy oznaczyć atrybutem 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ą grid-template-areas, a elementy są umieszczane w innej kolejności niż w źródle. Właściwość reading-order-items służy do wskazania, że powinniśmy postępować zgodnie z 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ść odczytu może różnić się od kolejności w źródle. Na przykład podczas korzystania z metod układu, które mogą powodować takie rozłączenie, np. gęstej siatki, lub gdy w określonym punkcie przerwania sensowny jest inny układ.
Gdy używasz tych właściwości, utwórz dokument źródłowy, korzystając z kolejności, która miałaby sens, gdyby strona była renderowana bez CSS. Dodawaj te właściwości tylko w miejscach i punktach przerwania, w których są wymagane.
Czy narzędzia do tworzenia powinny stosować te właściwości?
Narzędzia do tworzenia treści, które umożliwiają tworzenie układu siatki przez przeciąganie i upuszczanie elementów, powinny nadal zachęcać użytkowników do tworzenia sensownego dokumentu źródłowego. Dlatego w większości przypadków bardziej odpowiednie będzie ponowne uporządkowanie źródła na podstawie kolejności układu niż używanie tych właściwości jako prostego sposobu na rozwiązanie problemu z odłączeniem.
Prześlij opinię na temat tej propozycji
Bardzo zależy nam na Twojej opinii. Jeśli masz przypadek użycia, w którym to rozwiązanie się nie sprawdzi, lub masz zastrzeżenia dotyczące dostępności tej metody, poinformuj o tym grupę roboczą CSS.
Istnieje wątek, który zawiera wiele przypadków użycia i przemyśleń na temat tego podejścia. W tym wątku możesz dodawać komentarze i wskazywać potencjalne problemy związane z tą propozycją. Pamiętaj, że obecna propozycja bardzo różni się od mojej początkowej, która rozpoczęła ten wątek. Osoby zainteresowane mogą śledzić całą dyskusję, która doprowadziła nas do tego miejsca, ponieważ jest to dobry przykład tego, jak w grupie roboczej CSS opracowuje się propozycje, aby stały się czymś, co można wdrożyć w przeglądarkach.
Miniatura autorstwa Patricka Tomasso. Dziękujemy Chrisowi Harrelsonowi, Tabowi Atkinsowi i Ianowi Kilpatrickowi za opinie i sprawdzenie.