Melhorias lógicas de layout com abreviações relativas ao fluxo

Novas abreviações de propriedades lógicas e novas propriedades de encarte para o Chromium.

Adam Argyle

Oriol Brufau

Desde o Chromium 69 (3 de setembro de 2018), propriedades lógicas e valores têm ajudado os desenvolvedores a manter o controle dos layouts internacionais por meio de lógica, do que os estilos físicos, de direção e de dimensão. No Chromium 87, abreviações e deslocamentos foram enviados para tornar essas propriedades e valores lógicas um pouco mais fáceis de escrever. Isso faz o Chromium chegar ao Firefox, que tem suporte para as abreviações desde 66. Eles estão prontos no pré-lançamento técnico do Safari.

Fluxo de documentos

Se você já conhece as propriedades lógicas, aplique os eixos in-line e de bloco e não se quiser relembrar, pule para frente. Caso contrário, aqui está um breve lembrete.

No inglês, as letras e as palavras fluem da esquerda para a direita, enquanto os parágrafos são empilhados de cima para baixo. No chinês tradicional, as letras e as palavras aparecem de cima para baixo, enquanto os parágrafos são empilhados da direita para a esquerda. Nesses dois casos, se escrevermos em CSS que colocam "margin top" em um parágrafo, estamos espaçando corretamente apenas um estilo de idioma. Se a página for traduzida para o tradicional Em chinês do inglês, a margem pode não fazer sentido no novo modo de escrita vertical.

Portanto, o lado físico da caixa não é muito útil internacionalmente. Assim começa o que oferece suporte a vários idiomas. aprender sobre os lados físico e lógico do modelo de caixa.

Você já inspecionou o elemento p no Chrome DevTools? Nesse caso, você pode ter notei que os estilos padrão de user agent não são físicos, mas lógicos.

p {
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

CSS da folha de estilo do user agent do Chromium

A margem não está na parte superior ou inferior, como um leitor de inglês pode acreditar. São block-start e block-end! Essas propriedades lógicas são semelhantes às superior e inferior, mas também semelhante ao leitor japonês como direita e esquerda. Escrito uma vez, funciona em qualquer lugar.

O fluxo normal é quando a página da Web faz parte dessa multidirecionalidade intencionalmente. Quando o conteúdo da página é atualizado de acordo com mudanças na direção do documento, o layout e seus são considerados em fluxo. Leia mais sobre "em" e "out" de fluxo no MDN ou na Especificações do módulo de display CSS. Embora as propriedades lógicas não precisam estar em fluxo, porque fazem o trabalho pesado para você conforme a direção muda. O fluxo indica a direção, quais letras, palavras e conteúdo precisam percorrer. Isso nos leva a criar direções lógicas em linha e bloqueadas.

A direção do bloqueio é a direção que os novos blocos de conteúdo seguem, como se perguntar: "onde colocar o próximo parágrafo?". Você pode pensar nisso como um "bloco de conteúdo" ou "bloco de texto". Cada idioma organiza seus blocos e os organiza ao longo os respectivos block-axis. block-start é o lado em que um parágrafo é colocado pela primeira vez, e block-end é a direção dos novos parágrafos laterais.

Na escrita tradicional japonesa, por exemplo, a direção do bloco flui da direita para a esquerda:

A direção inline é a direção que as letras e palavras vão. Considere a direção o braço e a mão viajam enquanto escreve, ele está viajando no inline-axis. inline-start é o lado em que você começa a escrever, e inline-end é o lado em que a escrita termina ou termina. No vídeo acima, o inline-axis é de cima para baixo, mas no próximo vídeo o inline-axis flui da direita para a esquerda.

Estar em flow-relative significa que os estilos escritos para um idioma serão contextuais e adequadamente ser aplicadas a outros idiomas. O conteúdo flui de acordo com o idioma de exibição.

Novas abreviações

Algumas das abreviações a seguir não são recursos novos do navegador, mas mais fáceis maneiras de escrever estilos, aproveitando a possibilidade de definir valores em ambos os blocos ou bordas em linha de uma só vez. As propriedades lógicas inset-* oferecem novas habilidades, já que não havia maneiras longas de especificar posições absolutas com propriedades lógicas antes dele. Os encartes e as abreviações estão fluindo muito bem, então vou informar você sobre todos os novos recursos de propriedades lógicas disponíveis no Chromium 87 de uma só vez.

abreviações de margem

Nenhum novo recurso enviado, apenas alguns atalhos muito úteis:
margin-block e margin-inline

margin-block-start: 2ch;
margin-block-end: 2ch;

margin-block: 2ch;
/* or */
margin-block: 2ch 2ch;

Não existe uma abreviação de "de cima e de baixo" ou "esquerda e direita"... até agora! Você provavelmente vai se referir aos quatro lados usando a abreviação de margin: 10px;, e agora pode fazer referência facilmente a dois lados complementares usando a abreviação de propriedade lógica.

margin-inline-start: 4ch;
margin-inline-end: 2ch;

margin-inline: 4ch 2ch;

Abreviações de padding

Nenhum novo recurso enviado, apenas atalhos mais úteis tiveram:
padding-block e padding-inline

padding-block-start: 2ch;
padding-block-end: 2ch;

padding-block: 2ch;
/* or */
padding-block: 2ch 2ch;

E o conjunto complementar de inline de abreviações:

padding-inline-start: 4ch;
padding-inline-end: 2ch;

padding-inline: 4ch 2ch;

Encarte e abreviações

As propriedades físicas top, right, bottom e left podem ser gravadas como valores para a propriedade inset. Qualquer valor de position pode se beneficiar lados com encarte.

.cover {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
}

position: absolute;
top: 1px;
right: 2px;
bottom: 3px;
left: 4px;

position: absolute;
inset: 1px 2px 3px 4px;

Isso deve parecer conveniente imediatamente. O encarte é uma abreviação dos lados físicos, e funciona como margem e preenchimento.

Novos recursos

Por mais empolgante que a abreviação dos lados físicos seja, há ainda mais da atributos lógicos trazidos por outras abreviações de inset. Essas abreviações trazem conveniência para os desenvolvedores na criação (são mais curtas para digitar), mas também aumentam o alcance potencial do layout porque eles são relativos ao fluxo.

position: absolute;
top: 10px;
bottom: 10px;

position: absolute;
inset-block: 10px;

position: absolute;
left: 10px;
right: 20px;

position: absolute;
inset-inline: 10px 20px;

Leitura adicional e uma lista completa de atalhos de encarte curtos e longos está disponível no MDN.

Abreviação de bordas

A borda e as propriedades aninhadas color, style e width receberam novas abreviações lógicas.

border-top-color: hotpink;
border-bottom-color: hotpink;

border-block-color: hotpink;
/* or */
border-block-color: hotpink hotpink;

border-left-style: dashed;
border-right-style: dashed;

border-inline-style: dashed;
/* or */
border-inline-style: dashed dashed;

border-left-width: 1px;
border-right-width: 1px;

border-inline-width: 1px;
/* or */
border-inline-width: 1px 1px;

Leitura adicional e uma lista completa de abreviações e de mão longa de borda está disponível no MDN.

Exemplo de propriedade lógica <figure>

Vamos reunir tudo em um pequeno exemplo. As propriedades lógicas podem definir o layout uma imagem com legenda para lidar com diferentes direções de escrita e documento.

Ou experimente!

Você não precisa fazer muito para tornar um cartão internacionalmente responsivo com uma <figure> e algumas propriedades lógicas. Quer saber como tudo isso internacionalmente desde que o CSS funcione em conjunto, espero que esta seja uma pequena introdução significativa.

Polyfilling e compatibilidade com vários navegadores

A Cascade, ou ferramentas de build, são opções viáveis para ter navegadores novos e antigos, espaçadas corretamente com propriedades lógicas atualizadas. Para substitutos da Cascade, siga uma propriedade física com uma lógica e o navegador usará a "última" propriedade encontrada durante a configuração e resolução.

p {
  /* for unsupporting browsers */
  margin-top: 1ch;
  margin-bottom: 2ch;

  /* for supporting browsers to use */
  /* and unsupporting browsers to ignore and go 🤷‍♂️ */
  margin-block: 1ch 2ch;
}

Essa não é uma solução completa para todos. Este é um substituto escrito à mão que usa o pseudoseletor :lang() para segmentar idiomas específicos, ajusta o espaçamento físico de forma adequada, no final ela oferece a abordagem espaçamento para navegadores compatíveis:

/* physical side styles */
p {
  margin-top: 1ch;
  margin-bottom: 2ch;
}

/* adjusted physical side styles per language */
:lang(ja) {
  p {
    /* zero out styles not useful for traditional Japanese */
    margin-top: 0;
    margin-bottom: 0;

    /* add appropriate styles for traditional Japanese */
    margin-right: 1ch;
    margin-left: 2ch;
  }
}

/* add selectors and adjust for languages all supported */
:lang(he) {…}
:lang(mn) {…}

/* Logical Sides */
/* Then, for supporting browsers to use */
/* and unsupporting browsers to ignore #TheCascade */
p {
  /* remove any potential physical cruft.. */
  margin: 0;
  /* explicitly set logical value */
  margin-block: 1ch 2ch;
}

Também é possível usar @supports para determinar se fornece ou não propriedades substitutas:

p {
  margin-top: 1ch;
  margin-bottom: 2ch;
}

@supports (margin-block: 0) {
  p {
    margin-block: 1ch 2ch;
  }
}

Sass, PostCSS e Emoção e outras pessoas usam bundler e/ou criação automatizado ofertas de horário com uma ampla variedade de substitutos ou soluções. Confira cada um para verificar qual corresponde ao conjunto de ferramentas e à estratégia geral do site.

A seguir

Mais CSS oferecerá propriedades lógicas, mas isso ainda não está concluído. Está faltando uma grande coisa um conjunto de abreviações, e uma resolução ainda está pendente neste problema no GitHub (link em inglês). Há uma solução temporária em um rascunho. E se você quiser aplicar estilo a todos lados lógicos de uma caixa com uma abreviação?

margin: 1px 2px 3px 4px;
margin: 1px 2px;
margin: 2px;

margin: logical 1px 2px 3px 4px;
margin: logical 1px 2px;
margin: logical 2px;

Com o rascunho da proposta atual, é necessário escrever logical em cada abreviação para aplicar o equivalente lógico, o que não parece muito DRY para algumas pessoas.

Existem outras propostas de alteração em nível de bloco ou de página, mas isso poderia levar a usos lógicos em estilos ainda presumindo lados físicos.

html {
  flow-mode: physical;
  /* or */
  flow-mode: logical;
  /* now all margin/padding/etc references are logical */
}

/* hopefully no 3rd/1st party code is hard coded to top/left/etc ..? */

Essa é difícil! Dê seu voto e expresse sua opinião. Queremos ouvir você.

Quer aprender ou estudar mais propriedades lógicas? Aqui está uma referência detalhada, com guias e exemplos no MDN 🤓

Feedback

• Para propor mudanças na sintaxe CSS de abreviações relativas a fluxo, primeiro, verifique os problemas atuais no repositório csswg-rascunhos. Se nenhum dos problemas existentes corresponder à sua proposta, crie um novo.
• Para informar bugs na implementação de abreviações relativas a fluxo do Chromium, primeiro, verifique os problemas existentes no Rastreador de bugs do Chromium. Se nenhum dos problemas atuais corresponder ao seu bug, crie um novo.