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

Rachel Andrew

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

Изменения в предложении

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

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

• normal : Follow the order of elements in the DOM, which is the current behavior.
• flex-visual : Применяется только к гибким контейнерам. Следует визуальному порядку чтения элементов гибкого контейнера, учитывая режим записи.
• flex-flow : Действует только на гибкие контейнеры. Следует направлению flex-flow.
• grid-rows : Действует только на контейнеры сетки. Следует визуальному порядку элементов сетки по строкам, учитывая режим ввода.
• grid-columns : Действует только на контейнеры сетки. Отслеживает визуальный порядок элементов сетки по столбцам, учитывая режим ввода.
• grid-order : Действует только для контейнеров сетки. Учитывает свойство order , но в остальном работает как normal .

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

.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 стоит нерешенная задача : как поступить в ситуации, когда один из дочерних элементов элемента с атрибутом reading-flow имеет 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, это будет невероятно полезно при обсуждении этого вопроса в группе. Ваши мысли о том, чего бы вы ожидали, также будут полезны. Однако самое важное — увидеть реальные примеры использования.