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

Свойство reading-flow CSS позволяет изменять порядок чтения дочерних элементов блочного, flex- или grid-макета. Это влияет на порядок, в котором они озвучиваются и становятся доступными при последовательной навигации, например при переходе по ссылкам и кнопкам клавишей Tab.

Синтаксис

/* Keyword values */
reading-flow: normal;
reading-flow: flex-visual;
reading-flow: flex-flow;
reading-flow: grid-columns;
reading-flow: grid-rows;
reading-flow: grid-order;
reading-flow: source-order;

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

Значение

Свойству reading-flow можно задать одно из следующих ключевых слов:

normal

Значение по умолчанию. Порядок чтения соответствует порядку элементов в DOM.

flex-visual

Влияет только на flex-контейнеры. Порядок чтения соответствует визуальному порядку элементов flex с учётом writing-mode. Поэтому порядок чтения документа на английском языке с заданными значениями flex-direction: row-reverse и reading-flow: flex-visual будет слева направо.

flex-flow

Влияет только на flex-контейнеры. Порядок чтения соответствует направлению flex-flow.

grid-columns

Влияет только на grid-контейнеры. Порядок чтения соответствует визуальному порядку элементов сетки, столбец за столбцом, с учётом режима письма.

grid-rows

Влияет только на grid-контейнеры. Порядок чтения соответствует визуальному порядку элементов сетки, строка за строкой, с учётом режима письма.

grid-order

Влияет только на grid-контейнеры. Если к любому из дочерних элементов контейнера применено свойство order, порядок чтения соответствует изменённому порядку элементов. Если к элементам сетки не применено свойство order, grid-order действует как normal.

source-order

Влияет на grid-, flex- и блочные контейнеры. Само по себе не оказывает эффекта: порядок чтения контейнера по-прежнему соответствует порядку элементов в DOM, но позволяет изменить его с помощью свойства reading-order, заданного для дочерних элементов контейнера.

Описание

Свойство reading-flow изменяет порядок чтения элементов в блочном, flex- или grid-контейнере, если ему задано значение, отличное от normal. Такой контейнер называется контейнером потока чтения.

По умолчанию веб-содержимое читается в порядке исходного кода DOM. Как правило, исходный порядок должен задавать разумный порядок чтения содержимого, который также должен отражаться в визуальном расположении содержимого. Однако иногда визуальный порядок или порядок перехода по клавише Tab отличается от исходного. Например, при применении к документу нескольких flexbox- или grid-макетов с помощью медиазапросов для разных устройств или потребностей пользователей порядок содержимого может меняться в зависимости от ширины области просмотра. В таком случае можно использовать reading-flow, чтобы порядок чтения и перехода по клавише Tab соответствовал визуальному порядку.

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

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

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

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

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

Примеры

Сравнение значений для flex

В этом примере мы покажем, как разные значения reading-flow влияют на flex-контейнер с элементами в обратном порядке.

HTML

Разметка включает элемент <select> для выбора разных значений reading-flow и обёртку <div> с тремя элементами <a>.

<form>
  <label for="reading-flow">Choose reading flow:</label>
  <select id="reading-flow">
    <option>normal</option>
    <option>flex-visual</option>
    <option>flex-flow</option>
  </select>
</form>
<div class="wrapper">
  <a href="#">Item 1</a>
  <a href="#">Item 2</a>
  <a href="#">Item 3</a>
</div>

CSS

Мы задаём значение flex свойства display, чтобы превратить <div> во flex-контейнер, и выводим flex-элементы в строку в обратном порядке относительно DOM, задав значение row-reverse свойству flex-direction. Изначально мы задаём reading-flow значение normal, чтобы элементы читались или становились доступными при переходе по клавише Tab в порядке исходного кода DOM.

Мы также задаём значение 1 свойству order первого элемента <a>, чтобы он отображался после второго и третьего элементов во flex-потоке. Визуальный порядок flex-элементов слева направо будет таким: «Элемент 1», «Элемент 3», затем «Элемент 2», однако порядок элементов в DOM останется неизменным.

.wrapper {
  display: flex;
  flex-direction: row-reverse;
  reading-flow: normal;
  gap: 1em;
}

a:first-child {
  order: 1;
}

JavaScript

В скрипте мы получаем ссылки на элемент <select> и обёртку <div>, а затем добавляем обработчик события change для элемента <select>. При выборе нового значения оно задаётся как значение свойства reading-flow для обёртки.

const selectElem = document.getElementById("reading-flow");
const wrapperElem = document.querySelector(".wrapper");

selectElem.addEventListener("change", () => {
  wrapperElem.style.readingFlow = selectElem.value;
});

Результат

Демонстрация выглядит так:

Сначала попробуйте переходить по ссылкам клавишей Tab, когда задано reading-flow: normal. Порядок перехода будет таким: «Элемент 1», «Элемент 2», затем «Элемент 3», поскольку именно так элементы расположены в DOM.

Теперь измените значение reading-flow и снова попробуйте переходить по ссылкам клавишей Tab:

• Значение flex-visual задаёт порядок перехода «Элемент 1», «Элемент 3», затем «Элемент 2», соответствующий визуальному порядку, полученному в результате применения свойств flexbox.
• Значение flex-flow задаёт порядок перехода «Элемент 2», «Элемент 3», затем «Элемент 1», соответствующий направлению flex-flow — в данном случае row-reverse. Здесь порядок перехода обратен порядку отображения.

Сравнение значений для grid

В этом примере мы покажем, как разные значения reading-flow влияют на grid-контейнер.

HTML

Разметка включает элемент <select> для выбора разных значений reading-flow и обёртку <div> с четырьмя элементами <a>.

<form>
  <label for="reading-flow">Choose reading flow:</label>
  <select id="reading-flow">
    <option>normal</option>
    <option>grid-rows</option>
    <option>grid-columns</option>
    <option>grid-order</option>
  </select>
</form>
<div class="wrapper">
  <a class="a" href="#">Item A</a>
  <a class="b" href="#">Item B</a>
  <a class="c" href="#">Item C</a>
  <a class="d" href="#">Item D</a>
</div>

CSS

Мы задаём значение grid свойства display, чтобы превратить <div> в grid-контейнер, и размещаем элементы сетки в трёх столбцах с помощью свойства grid-template-columns. Мы также задаём grid-template-areas, чтобы определить области размещения в этих столбцах, и помещаем элементы <a> в эти области с помощью свойства grid-area. Изначально мы задаём reading-flow значение normal, чтобы элементы читались или становились доступными при переходе по клавише Tab в стандартном порядке исходного кода DOM.

Наконец, мы задаём значение 1 свойству order первого элемента <a>; это не влияет на макет, поскольку не переопределяет размещение в области сетки, но повлияет на результат при задании определённого значения reading-flow, как вы увидите далее.

При чтении слева направо визуальный порядок элементов сетки будет таким: «Элемент D», «Элемент B», «Элемент C», затем «Элемент A».

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 150px);
  grid-template-areas:
    "d b b"
    "c c a";
  reading-flow: normal;
}

.a {
  grid-area: a;
}
.b {
  grid-area: b;
}
.c {
  grid-area: c;
}
.d {
  grid-area: d;
}

a:first-child {
  order: 1;
}

JavaScript

В скрипте мы получаем ссылки на элемент <select> и обёртку <div>, а затем добавляем обработчик события change для элемента <select>. При выборе нового значения оно задаётся как значение свойства reading-flow для обёртки.

const selectElem = document.getElementById("reading-flow");
const wrapperElem = document.querySelector(".wrapper");

selectElem.addEventListener("change", () => {
  wrapperElem.style.readingFlow = selectElem.value;
});

Результат

Демонстрация выглядит так:

Сначала попробуйте переходить по ссылкам клавишей Tab, когда задано reading-flow: normal. Порядок перехода будет таким: «Элемент A», «Элемент B», «Элемент C» и «Элемент D», поскольку именно так элементы расположены в DOM.

Теперь измените значение reading-flow и снова попробуйте переходить по ссылкам клавишей Tab:

• Значение grid-rows задаёт порядок перехода, соответствующий визуальному порядку отображения по строкам: «Элемент D», «Элемент B», «Элемент C», затем «Элемент A».
• Значение grid-columns задаёт порядок перехода, соответствующий визуальному порядку отображения по столбцам: «Элемент D», «Элемент C», «Элемент B», затем «Элемент A».
• Значение grid-order задаёт порядок перехода по DOM с учётом изменений значения order. Поскольку для первого элемента <a> задано order: 1;, порядок перехода будет таким: «Элемент B», «Элемент C», «Элемент D», затем «Элемент A».

Изменение порядка чтения в блочных контейнерах

В этом примере мы покажем, как значение reading-flow: source-order влияет на блочный контейнер.

HTML

Разметка включает обёртку <div> с четырьмя элементами <a>.

<div class="wrapper">
  <a class="a" href="#">Item A</a>
  <a class="b" href="#">Item B</a>
  <a class="c" href="#">Item C</a>
  <a class="d" href="#">Item D</a>
</div>

CSS

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

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

a:first-child {
  reading-order: 1;
}

Результат

Демонстрация выглядит так:

Попробуйте переходить по ссылкам клавишей Tab: порядок перехода будет таким: «Элемент B», «Элемент C», «Элемент D», затем «Элемент A». Порядок элементов в DOM сохраняется, однако для элемента A задана группа с более высоким порядковым номером чтения, чем для остальных (значение reading-order по умолчанию — 0), поэтому к нему переходят последним.

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

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

См. также

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