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 do layout do CSS e da ordem de origem (link em inglês). Isso detalhou uma proposta que está sendo discutida no grupo de trabalho do CSS, visando resolver o problema em que reordenar itens em flexbox e grid gera 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á texto de especificação de rascunho na especificação de nível 4 de exibição do CSS. Isso introduz uma nova propriedade com o nome 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: siga 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 de itens flexíveis, considerando o modo de escrita.
• flex-flow: só tem efeito em contêineres flexíveis. Segue a direção de 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 escrita.
• 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;
}

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;
}

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; }

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. Há alguns exemplos para você começar, que funcionam no Canary com a sinalização 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>

Gostaríamos de 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 que você tem nos ajudará a projetar uma solução que atenda às suas necessidades.

Adicione casos de uso ao problema do grupo de trabalho de 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 é analisar os casos de uso reais.