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 Resolvendo a desconexão entre o layout CSS e a ordem de origem. Isso detalhou uma proposta em discussão no CSS Working Group, 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 dessa postagem descreve o problema que o grupo de trabalho está tentando resolver. Desde então, as coisas mudaram, e esta postagem dá uma breve atualização sobre nossa situação atual. Também temos uma área específica em que precisamos da sua opinião: como lidamos com itens que têm display-contents?

Atualizações na proposta

Agora há um texto de especificação de rascunho na especificação do Nível 4 de exibição do CSS. Isso apresenta uma nova propriedade chamada reading-flow. Essa propriedade é adicionada ao elemento contido para 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ó entra em vigor em contêineres flexíveis. Segue a ordem de leitura visual dos itens flexíveis, considerando o modo de escrita.
• flex-flow: só entra em vigor em contêineres flexíveis. Segue a direção flex-flow.
• grid-rows: só entra em vigor em contêineres de grade. Segue a ordem visual dos itens da grade por linha, considerando o modo de escrita.
• grid-columns: só entra em vigor em contêineres de grade. Segue a ordem visual dos itens da grade por coluna, considerando o modo de escrita.
• grid-order: só entra em vigor em contêineres de grade. Considera a propriedade order, mas age como normal.

Por exemplo, se você tiver três itens flexíveis em um contêiner e definir o flex-direction deles como row-reverse, eles vão se alinhar do fim do contêiner flexível, e a ordem de tabulação vai da direita para a esquerda.

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

Adicione flex-flow: visual. Assim, 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 de origem. 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

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

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

Elementos com display: contents e componentes da Web

Há um problema pendente para o grupo de trabalho do CSS decidir como lidar com a situação em que um dos filhos de um elemento com reading-flow tem display: contents e, da mesma forma, se o item fosse um <slot>.

No exemplo a seguir, 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 vista neste exemplo. Você já precisou reordenar itens dentro de um elemento que tem display: contents com itens que não são irmãos, porque são irmãos do item que tem display: contents.

Além disso, enquanto trabalhamos para resolver os problemas relacionados ao display: contents, seria útil ver exemplos de quando você gostaria de usar a propriedade reading-flow com o display: contents. Entender os casos de uso reais que você tem nos ajuda 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 espera que aconteça, isso também é útil. No entanto, o mais importante é conferir os casos de uso reais.