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 Resolver a desconexão do layout de CSS e da ordem de origem. Isso detalhou uma proposta que estava sendo discutida em o grupo de trabalho do CSS, visando resolver o problema de reordenação itens em flexbox e grid gera uma experiência de tabulação desconectada. A a seção de início dessa postagem descreve o problema que o grupo de trabalho está tentando resolver. As coisas mudaram desde então, e esta postagem oferece uma breve atualização de onde estamos agora. Também temos uma área específica em que você precisa feedback: como lidar com itens que têm display-contents?

Atualizações da proposta

Agora há texto da especificação do rascunho nas especificações de display de nível 4 do CSS. Isso introduz uma nova propriedade com o nome reading-flow. Esta propriedade é adicionada ao elemento contêiner 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 objeto atual. do seu modelo.
  • flex-visual: só entra em vigor em contêineres flexíveis. Segue o ordem de leitura visual de itens flexíveis, considerando-se o modo de escrita.
  • flex-flow: só entra em vigor em contêineres flexíveis. Segue o fluxo flexível direção
  • grid-rows: só entra em vigor em contêineres de grade. Segue o visual ordem 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 de 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 como row-reverse, eles se alinham no final do contêiner flexível e na ordem de tabulação 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, e o fluxo de leitura vai seguir a ordem visual em Inglês, portanto, 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 que o pedido 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; }
Com reading-flow: grid-rows.
.

Faça um teste

No momento, essa propriedade CSS é experimental, mas pode ser ativada. para testes. Para testar, instale a versão 128 ou mais recente do Chrome Dev ou Canary. e ativar flag de ambiente de execução CSSReadingFlow. Veja alguns exemplos para você começar: que funcionam no Canary com a flag ativada.

O comportamento de casos display: contents ainda está em desenvolvimento e pode mudar com base no feedback que você fornecer após ler a seção a seguir do nesta 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 uma os filhos de um elemento com fluxo de leitura têm display: contents; e da mesma forma, se o item fosse um <slot>.

No exemplo abaixo, os elementos <div> têm display: contents. Devido a todos os elementos <button> são promovidos para participar do flex layout e, portanto, reading-flow leva em conta sua ordem.

 .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 algum exemplo do mundo real que cause a situação como você vê neste exemplo. Você já precisa reordenar itens que estão em uma elemento que tem display: contents com itens que não são irmãos, devido a Ser irmãos do item que tem display: contents.

Além disso, enquanto trabalhamos para resolver os problemas em torno do display: contents, úteis em ver exemplos de onde convém usar o Propriedade reading-flow com display: contents. Compreender o mundo real casos de uso que você tem nos ajudará a projetar uma solução que atenda às suas necessidades.

Adicione casos de uso ao Problema com o grupo de trabalho do CSS. Se você tiver exemplos em sites ativos ou puder criar uma demonstração no CodePen ou JSFiddle que seria incrivelmente útil quando discutirmos esse problema como um grupo. Se você tem ideias sobre o que espera que aconteça, que também é útil. No entanto, o mais importante é conhecer os casos de uso reais.