В прошлом году мы опубликовали запись в блоге Решение проблемы разметки 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;
}
row-reverse
. Добавьте flex-flow: visual
тогда поток чтения будет следовать визуальному порядку на английском языке, то есть слева направо.
.flex {
display: flex;
flex-direction: row-reverse;
reading-flow: flex-visual;
}
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; }
reading-flow: grid-rows
.Попробуйте это
Это свойство 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, это будет невероятно полезно, когда мы обсудим этот вопрос в группе. Если у вас есть мысли о том, чего вы ожидаете, это тоже полезно. Однако самое главное — увидеть реальные варианты использования.