Code Ready | Frontend
Фотография
нажмите — покажем
нажмите — покажем
Правильный порядок фокуса в сложном Grid без перестановки DOM!
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 | #совет
30 · 1.9K ·