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çãogrid-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 propriedadeorder
, mas age comonormal
.
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;
}
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;
}
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; }
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.