Solicitação de feedback do desenvolvedor sobre o fluxo de leitura e elementos com exibição: conteúdo

Rachel Andrew

No ano passado, publicamos a postagem do blog Como resolver a desconexão entre o layout do CSS e a ordem da fonte. Esta proposta detalhada foi discutida no Grupo de Trabalho do CSS, com o objetivo de resolver o problema em que a reordenação de itens no flexbox e na grade causa uma experiência de tabulação desconectada. A seção inicial da postagem descreve o problema que o grupo de trabalho está tentando resolver. As coisas mudaram desde então, e esta postagem traz uma breve atualização sobre nossa situação atual. Também temos uma área específica em que precisamos do seu feedback: como lidar com itens que têm display-contents?

Atualizações na proposta

Agora há um texto de especificação de rascunho na especificação de nível 4 de exibição do CSS. Isso introduz uma nova propriedade chamada reading-flow. Essa propriedade é adicionada ao elemento que contém o layout flexível ou de grade (o elemento com display: grid ou display: flex).

A propriedade aceita os seguintes valores:

  • normal: seguir a ordem dos elementos no DOM, que é o comportamento atual.
  • flex-visual: só tem efeito em contêineres flexíveis. Segue a ordem de leitura visual dos itens flexíveis, considerando o modo de gravação.
  • flex-flow: só tem efeito em contêineres flexíveis. Segue a direção do fluxo flexível.
  • grid-rows: só tem efeito em contêineres de grade. Segue a ordem visual dos itens da grade por linha, considerando o modo de gravação.
  • grid-columns: só tem efeito em contêineres de grade. Segue a ordem visual dos itens da grade por coluna, considerando o modo de gravação.
  • grid-order: só tem efeito em contêineres de grade. Considera a propriedade order, mas atua como normal.

Por exemplo, se você tiver três itens flexíveis em um contêiner e definir flex-direction como row-reverse, eles serão alinhados a partir do final do contêiner flexível, e a ordem das guias se move da direita para a esquerda.

.flex {
  display: flex;
  flex-direction: row-reverse;
}
Fluxo padrão de itens flexíveis com row-reverse.

Adicione flex-flow: visual. Em seguida, o fluxo de leitura vai seguir a ordem visual em inglês, ou seja, da esquerda para a direita.

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

Em layouts de grade, use reading-flow para seguir as linhas ou colunas visuais, em vez da ordem da fonte. No exemplo a seguir, o fluxo de leitura segue as linhas.

.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; }
Com reading-flow: grid-rows.

Faça um teste

Essa propriedade CSS está em fase experimental, mas é possível ativá-la para testes. Para testar, instale o Chrome Dev ou Canary versão 128 ou mais recente e ative a flag de execução CSSReadingFlow. Confira alguns exemplos para você começar, que funcionam no Canary com a flag ativada.

O comportamento dos casos de display: contents ainda está em andamento e pode mudar com base no feedback que você enviar depois de ler a próxima seção desta postagem.

Elementos com display: contents e componentes da Web

Há um problema pendente para que o grupo de trabalho do CSS decida como lidar com a situação em que um dos filhos de um elemento com fluxo de leitura tem display: contents e da mesma forma se o item for um <slot>.

No exemplo abaixo, os elementos <div> têm display: contents. Por isso, todos os elementos <button> são promovidos para participar do layout flexível e, portanto, reading-flow considera a ordem deles.

 .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>

Queremos saber se você tem exemplos reais que causam a situação mostrada neste exemplo. Você já precisou reordenar itens que estão dentro de um elemento que tem display: contents com itens que não são irmãos, devido a ser irmão do item que tem display: contents.

Além disso, enquanto trabalhamos para resolver os problemas relacionados a display: contents, seria útil conferir exemplos em que você pode usar a propriedade reading-flow com display: contents. Entender os casos de uso reais vai nos ajudar a projetar uma solução que atenda às suas necessidades.

Adicione casos de uso ao problema do grupo de trabalho do CSS. Se você tiver exemplos em sites ativos ou puder criar uma demonstração no CodePen ou JSFiddle, isso será muito útil quando discutirmos esse problema em grupo. Se você tiver ideias sobre o que esperar, isso também é útil. No entanto, o mais importante é conferir os casos de uso reais.