Rozwiązywanie problemów z układem CSS i zamówieniem źródłowym

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.

Rachel Andrew Technical Writer

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 kolejnością fokusu dokumentu. W tym artykule wyjaśniamy problem i proponowane rozwiązanie. Chętnie poznamy Twoją opinię.

Problem

Kierunek czytania dokumentu HTML jest zgodny z kolejnością w kodzie źródłowym. 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 trybu czytania, czytników ekranu i urządzeń z ograniczonym 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łowej.

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 pomieszać kolejność kart, na przykład gdy używasz grid-auto-flow: dense, co powoduje losowe ułożenie 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 flex lub grid muszą mieć właściwość reading-order o wartości auto.

Poniższy kod CSS spowoduje, że kolejność odczytu będzie zgodna z rozmieszczeniem elementów, które zostały gęsto upakowane z powodu właściwości grid-auto-flow: dense.

.cards {
  display: grid;
  grid-auto-flow: dense;
}

.cards li {
  grid-column: auto / span 2;
  reading-order: auto;
}

Układy nielosowe 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 idealna kolejność jest mniej oczywista i może być więcej niż 1 możliwy wybór. 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 elementu row-reverse. Elementy flex mają właściwość reading-order: auto, a kontener flex – właściwość reading-order-items: flex flow, co wskazuje, że chcemy, aby kolejność odczytu również była zgodna z kierunkiem flex-flow, a nie z kolejnością wizualną (którą moglibyśmy wskazać za pomocą właściwości 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 kodzie źródłowym. 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 oznaczałoby 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, w których 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ęste rozmieszczenie w siatce, lub gdy przy określonym punkcie przerwania sensowny jest inny układ.

Gdy używasz tych właściwości, utwórz dokument źródłowy w 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ą one 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 lepiej jest zmienić kolejność źródła na podstawie kolejności układu, zamiast używać tych właściwości jako łatwego sposobu na rozwiązanie problemu z rozłączeniem.

Prześlij opinię na temat tej propozycji

Chętnie poznamy Twoją opinię na ten temat. W szczególności, 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.

Trwa wątek, w którym znajdziesz wiele przypadków użycia i pomysłów na to podejście. W tym wątku możesz dodawać komentarze i zwracać uwagę na potencjalne problemy związane z tą propozycją. Pamiętaj, że obecna propozycja bardzo różni się od mojej początkowej propozycji, 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 można je było wdrożyć w przeglądarkach.

Miniatura: Patrick Tomasso. Dziękujemy Chrisowi Harrelsonowi, Tabowi Atkinsowi i Ianowi Kilpatrickowi za opinie i recenzje.