Свойство order и визуальная перестановка

Свойство order изменяет визуальный порядок элементов флексбокса и сетки без изменения структуры DOM. По умолчанию значение равно 0; элементы с большими значениями отображаются позже, а с отрицательными — раньше.

Элементы отображаются от наименьшего значения order к наибольшему. Элементы с одинаковым значением order отображаются в порядке DOM.

Используйте отрицательные значения, чтобы переместить элемент перед всеми элементами со значением по умолчанию (order:0):

Изменяйте визуальный порядок в разных контрольных точках, не изменяя HTML:

order изменяет только визуальный порядок. Программы чтения с экрана и навигация с клавиатуры следуют порядку DOM, а не визуальному порядку. Для доступности крайне важно менять порядок визуально, сохраняя логичный порядок чтения в DOM.

Если изменить визуальный порядок элементов с помощью order, фокус клавиатуры будет следовать порядку DOM, который может отличаться от визуального. Это создаёт непонятную навигацию для пользователей клавиатуры. Используйте визуальное изменение порядка только тогда, когда оно не нарушает логическую последовательность.

Визуальное изменение порядка допустимо, когда:

• элементы не являются частью последовательности навигации (декоративный порядок)
• визуальный порядок соответствует естественному ходу чтения, отличающемуся от порядка в исходном коде по причинам организации кода

Свойство order работает одинаково во флексбоксе и CSS-сетке. Оно управляет порядком в алгоритме компоновки, а не в DOM.

Когда элементы переносятся на новые строки, order определяет, какие элементы окажутся в каждой строке и в каком порядке они будут расположены внутри неё.

Чтобы изменить порядок всех элементов, используйте flex-direction: row-reverse или column-reverse, а не задавайте отрицательные значения порядка для каждого элемента. Такой подход более семантичен и проще.

Изменения порядка нельзя анимировать в CSS. Если требуется анимированное изменение порядка, используйте трансформации или анимации на основе JavaScript, например Flip.js или анимации с помощью GSAP.

Почему свойство order при изменении порядка ссылок навигации следует использовать с осторожностью?

Свойство order изменяет визуальное положение элементов флексбокса или сетки, не затрагивая HTML. Значение по умолчанию — 0; элементы с меньшими значениями отображаются первыми, а с большими — последними. Используйте его для изменения порядка в адаптивных макетах без изменения структуры DOM. При изменении порядка всегда проверяйте, что порядок навигации с клавиатуры и порядок чтения с помощью экранного диктора остаются логичными.