Запрос отзывов разработчиков о потоке чтения и элементах с отображением: содержимое

Rachel Andrew

В прошлом году мы опубликовали запись в блоге Решение проблемы разметки CSS и отключения порядка исходного кода . Здесь подробно описано предложение, обсуждаемое в рабочей группе CSS, направленное на решение проблемы, при которой изменение порядка элементов в flexbox и сетке приводит к отключению работы с вкладками. В первом разделе этого поста описывается проблема, которую пытается решить рабочая группа. С тех пор дела изменились, и в этом посте дается краткое описание того, где мы находимся сейчас. У нас также есть определенная область, где нам нужны ваши отзывы : как нам поступить с элементами, имеющими display-contents ?

Обновления предложения

В спецификации CSS Display Level 4 теперь есть черновой текст спецификации . Это вводит новое свойство, называемое reading-flow . Это свойство добавляется к содержащему элементу для макета flex или сетки (элемент с display: grid или display: flex ).

Свойство принимает следующие значения:

• normal : следовать порядку элементов в DOM, который является текущим поведением.
• flex-visual : действует только на гибкие контейнеры. Соблюдает порядок визуального чтения гибких элементов с учетом режима записи.
• flex-flow : действует только на гибкие контейнеры. Следует направлению гибкого потока.
• grid-rows : действует только на контейнеры сетки. Соблюдает визуальный порядок элементов сетки по строкам с учетом режима записи.
• grid-columns : действует только на контейнеры сетки. Соблюдает визуальный порядок элементов сетки по столбцам с учетом режима записи.
• grid-order : действует только на контейнеры сетки. Принимает во внимание свойство order , но в остальном действует как normal .

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

.flex {
  display: flex;
  flex-direction: row-reverse;
}

Добавьте flex-flow: visual , тогда поток чтения будет следовать визуальному порядку на английском языке, то есть слева направо.

.flex {
  display: flex;
  flex-direction: row-reverse;
  reading-flow: flex-visual;
}

В макетах сетки используйте reading-flow , чтобы следить за визуальными строками или столбцами, а не за исходным порядком. В следующем примере поток чтения следует за строками.

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

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

Попробуйте это

Это свойство CSS в настоящее время является экспериментальным, однако его можно включить для тестирования. Чтобы попробовать это, установите Chrome Dev или Canary версии 128 или выше и включите флаг времени выполнения CSSReadingFlow . Для начала есть несколько примеров , которые работают в Canary с включенным флагом.

Поведение кейсов display: contents все еще находится в стадии разработки и может измениться в зависимости от отзывов, которые вы предоставите после прочтения следующего раздела этой публикации.

Элементы с display: contents и веб-компоненты

Перед рабочей группой CSS стоит нерешенная проблема: решить, как поступить в ситуации, когда один из дочерних элементов элемента с потоком чтения имеет display: contents , и аналогично, если элемент был <slot> .

В следующем примере элементы <div> имеют display: contents . Благодаря этому все элементы <button> участвуют в гибком макете, и поэтому reading-flow учитывает их порядок.

 .wrapper {
   display: flex;
   reading-flow: flex-visual;
 }

<div class="wrapper">
   <div style="display: contents" id="contents1">
     <button style="order: 3" id="o3">3</button>
     <button style="order: 1" id="o1">1</button>
     <div style="display: contents" id=contents2>
       <button style="order: 4" id="o4">4</button>
       <button style="order: 2" id=o2>2</button>
     </div>
   </div>
 </div>

Мы хотели бы знать, есть ли у вас какие-либо реальные примеры, которые вызывают ситуацию, показанную в этом примере. Вам когда-нибудь приходилось менять порядок элементов, находящихся внутри элемента, имеющего display: contents , на элементы, которые не являются родственными элементами, поскольку они являются родственными элементами элемента, имеющего display: contents .

Кроме того, пока мы работаем над решением проблем, связанных с display: contents было бы полезно увидеть примеры, в которых вы можете использовать свойство reading-flow с display: contents . Понимание реальных вариантов использования поможет нам разработать решение, отвечающее вашим потребностям.

Добавьте варианты использования в вопрос рабочей группы CSS . Если у вас есть примеры на действующих сайтах или вы можете создать демо-версию на CodePen или JSFiddle, это будет невероятно полезно, когда мы придем к обсуждению этой проблемы в группе. Если у вас есть мысли о том, чего вы ожидаете, это тоже полезно. Однако самое главное — увидеть реальные варианты использования.