CSS Grid позволяет визуально переставлять элементы, но раньше это создавало неприятную проблему: пользователь видит один порядок, а при нажатии Tab фокус может идти по исходному DOM.
Теперь для этого появился
reading-flow.Для Grid можно заставить последовательную навигацию следовать визуальным строкам:
.cards {
reading-flow: grid-rows;
}Для Flex есть отдельный режим:
.toolbar {
reading-flow: flex-visual;
}А если нужен контролируемый порядок, контейнер переводится в
source-order, после чего отдельным детям можно задавать reading-order..list {
reading-flow: source-order;
}
.featured {
reading-order: -1;
}Это полезно в адаптивных интерфейсах, где Grid/Flex визуально меняет расположение карточек или контролов, но переписывать DOM только ради порядка клавиатурной навигации неудобно.
reading-flow решает проблему расхождения визуального порядка и последовательной навигации на уровне CSS.
Code Ready | #совет
