Свойство CSS `reading-order`

Свойство reading-order CSS позволяет изменять порядок чтения дочернего элемента относительно его элементов-соседей в контейнере потока чтения.

Синтаксис

/* <integer> values */
reading-order: 1;
reading-order: -1;

/* Global values */
reading-order: inherit;
reading-order: initial;
reading-order: revert;
reading-order: revert-layer;
reading-order: unset;

Значение

<integer>

Обозначает порядковую группу, к которой принадлежит элемент.

Описание

Если у родительского контейнера элемента — блочного, flex или grid — свойству reading-flow задано значение, отличное от normal, свойство reading-order можно использовать, чтобы задать положение элемента в потоке чтения относительно его соседей.

При чтении и навигации элементы внутри блочного, flex- или grid-контейнера сортируются по возрастанию значения reading-order. Если у нескольких соседних элементов одинаковое значение reading-order, эти элементы сортируются в соответствии со свойством контейнера reading-flow. Соседним элементам, которым явно не задано значение reading-order, присваивается значение по умолчанию 0. Благодаря этому все дочерние элементы контейнера потока чтения по умолчанию принадлежат одной порядковой группе.

Соседние элементы упорядочиваются от группы с наименьшим номером к группе с наибольшим номером. Поэтому, чтобы элемент читался после соседних элементов, ему можно задать значение reading-order или 1 либо большее. Чтобы элемент читался перед соседними элементами, ему можно задать значение reading-order или -1 либо меньшее.

Свойство reading-order определяет порядок чтения и перехода по элементам с помощью клавиши Tab, но не влияет на визуальный порядок.

Взаимодействие с tabindex

Если дочерние элементы контейнера потока чтения, которые обычно не могут получать фокус, сделать фокусируемыми с помощью атрибутов tabindex="0", их порядок чтения будет изменён ожидаемым образом свойствами reading-flow и reading-order, точно так же, как у интерактивных элементов, например <a> или <button>.

Однако любые попытки изменить порядок перехода по содержимому контейнера потока чтения с помощью положительных значений tabindex будут проигнорированы — их переопределит действие свойств reading-flow и reading-order. Как правило, использовать эти значения не следует; см. статью Не используйте tabindex больше 0. Свойства reading-flow и reading-order позволяют гораздо удобнее изменять порядок перехода по элементам, если это необходимо.

Формальное определение

Примеры

Порядок строк сетки

В этом примере показано, как использовать reading-order для управления положением отдельных элементов сетки в порядке чтения контейнера сетки. Для одного элемента сетки задано значение reading-order меньшее, чем значение по умолчанию 0, поэтому он будет прочитан перед соседними элементами. Для другого задано более высокое значение reading-order, поэтому он будет прочитан после остальных независимо от порядка в исходном коде или порядка отображения.

HTML

В нашей разметке шесть элементов <a> находятся внутри обёртки <div>.

<div class="wrapper">
  <a href="#">Item 1</a>
  <a class="bottom" href="#">Item 2</a>
  <a href="#">Item 3</a>
  <a class="top" href="#">Item 4</a>
  <a href="#">Item 5</a>
  <a href="#">Item 6</a>
</div>

CSS

Для элемента <div> мы задаём свойству grid-auto-flow значение dense, поэтому элементы могут отображаться не в порядке исходного кода. Для свойства reading-order элемента <a> с классом top задано значение -1, поэтому «Элемент 4» будет первым в потоке чтения. Для свойства reading-order элемента <a> с классом bottom задано значение 21, поэтому «Элемент 4» будет последним в порядке чтения. Остальные элементы будут прочитаны между ними в порядке строк сетки, поскольку для свойства reading-flow элемента <div> задано значение grid-rows.

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 150px);
  grid-auto-flow: dense;
  reading-flow: grid-rows;
}

.top {
  reading-order: -1;
}

.bottom {
  reading-order: 21;
}

Результат

Демонстрация выше отображается следующим образом:

Попробуйте перемещаться по ссылкам с помощью клавиши Tab. Обратите внимание, что переход к «Элементу 4» происходит первым, а к «Элементу 2» — последним из-за изменённых значений reading-order. Между ними переход выполняется в порядке строк сетки.

Переопределение порядка исходного кода

В этом примере нечётным элементам задано меньшее значение reading-order, поэтому они будут прочитаны раньше остальных в группе независимо от порядка в исходном коде или порядка отображения.

HTML

В нашей разметке пять элементов <a> находятся внутри обёртки <div>.

<div class="wrapper">
  <a href="#">Item 1</a>
  <a href="#">Item 2</a>
  <a href="#">Item 3</a>
  <a href="#">Item 4</a>
  <a href="#">Item 5</a>
</div>

CSS

Для свойства reading-flow элемента <div> задано значение source-order, которое позволяет использовать reading-order для переопределения порядка чтения исходного кода по умолчанию. Для нечётных элементов <a> задано значение -1 свойства reading-order, поэтому они читаются перед чётными элементами.

.wrapper {
  reading-flow: source-order;
}

.wrapper > a {
  display: block;
}

.wrapper a:nth-child(odd) {
  reading-order: -1;
}

Результат

Демонстрация выше отображается следующим образом:

Попробуйте перемещаться по ссылкам с помощью клавиши Tab и обратите внимание, что переход к «Элементу 1», «Элементу 3» и «Элементу 5» происходит первым из-за изменённых значений reading-order. Затем переход выполняется в порядке исходного кода.

Спецификации

Совместимость с браузерами

См. также

• reading-flow
• Примеры CSS reading-flow на сайте chrome.dev