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

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

Adam Argyle

Oriol Brufau

Desde o Chromium 69 (3 de setembro de 2018), as propriedades e valores lógicos têm ajudado os desenvolvedores a manter o controle dos layouts internacionais por meio de estilos lógicos de direção e dimensão, em vez de físicos. No Chromium 87, abreviações e deslocamentos foram enviados para facilitar a escrita dessas propriedades e valores lógicos. Isso captura o Chromium até o Firefox, que tem suporte para as abreviações desde a versão 66. O Safari já tem esse recurso na visualização técnica.

Fluxo do documento

Se você já conhece as propriedades lógicas, eixos inline e de bloco e não quer uma atualização, pule para a próxima seção. Caso contrário, confira um breve resumo.

Em inglês, as letras e palavras fluem da esquerda para a direita, e os parágrafos são empilhados de cima para baixo. No chinês tradicional, as letras e as palavras ficam de cima para baixo, enquanto os parágrafos são empilhados da direita para a esquerda. Apenas nesses dois casos, se escrevermos CSS que coloca "margin top" em um parágrafo, vamos apenas espaçar adequadamente um estilo de idioma. Se a página for traduzida do inglês para o chinês tradicional, 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 processo de oferecer suporte a vários idiomas, aprendendo sobre os lados físico e lógico do modelo de caixa.

Termo-chave: uma propriedade lógica é aquela que faz referência a um lado, canto ou eixo do modelo de caixa no contexto da direção do idioma aplicável. Isso é semelhante a mencionar o grupo strong de alguém, em vez de presumir que é o grupo right. "Direita" é uma referência do grupo físico, "forte" é uma referência lógica, contextual para o indivíduo.

Você já inspecionou o elemento p no Chrome DevTools? Se sim, você pode ter notado que os estilos padrão do 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 de cima ou de baixo, como um leitor em inglês pode acreditar. São block-start e block-end. Essas propriedades lógicas são semelhantes ao topo e ao fundo de um leitor em inglês, mas também são semelhantes a um leitor japonês como direita e esquerda. Crie uma vez e use 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 as mudanças de direção do documento, o layout e os elementos são considerados no fluxo. Leia mais sobre o fluxo "em" e "fora" no MDN ou na especificação do módulo de exibição do CSS. Embora as propriedades lógicas não sejam necessárias para o fluxo, elas fazem a maior parte do trabalho pesado para você, conforme a direcionalidade muda. O fluxo implica direção, que letras, palavras e conteúdo precisam percorrer. Isso nos leva a criar direções lógicas em bloco e inline.

A direção do bloco é a direção que novos blocos de conteúdo seguem, como perguntar a si mesmo, "onde colocar o próximo parágrafo?". Pense nisso como um "bloco de conteúdo" ou "bloco de texto". Cada idioma organiza os blocos e os ordena de acordo com o respectivo block-axis. block-start é o lado em que um parágrafo é colocado pela primeira vez, enquanto block-end é o lado em que os novos parágrafos fluem.

Termo-chave: a direção do bloco é definida pela propriedade writing-mode. Por exemplo, horizontal-tb (o valor inicial) tem um eixo de bloco vertical que flui de cima para baixo (tb). Outros valores têm um eixo de bloco horizontal, que pode fluir da esquerda para a direita (como em vertical-lr) ou da direita para a esquerda (como em vertical-rl).

Na escrita japonesa tradicional, 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 seguem. Considere a direção que seu braço e sua mão percorrem quando você escreve. Elas estão se movendo ao longo do inline-axis. inline-start é o lado em que você começa a escrever, enquanto inline-end é o lado em que a escrita termina ou é concluída. No vídeo acima, a inline-axis é de cima para baixo, mas neste outro vídeo, a inline-axis flui da direita para a esquerda.

Termo-chave: a direção inline é definida por writing-mode e direction. Por exemplo, ele flui da esquerda para a direita com horizontal-tb e ltr, da direita para a esquerda com horizontal-tb e rtl, de cima para baixo com vertical-lr e ltr e de baixo para cima com vertical-rl e rtl.

Ser flow-relative significa que os estilos escritos para um idioma serão aplicados de forma contextual e adequada em outros idiomas. O conteúdo será exibido de acordo com o idioma para o qual ele está sendo entregue.

Novas abreviações

Algumas das abreviações a seguir não são novos recursos do navegador, mas sim maneiras mais fáceis de escrever estilos aproveitando a capacidade de definir valores em bordas de bloco ou inline de uma só vez. As propriedades lógicas inset-* trazem novas habilidades, já que não havia muitas maneiras de especificar posições absolutas com propriedades lógicas antes delas. Encartes e abreviações fluem muito bem, então, vou falar sobre todos os novos recursos de propriedades lógicas que chegam ao Chromium 87 de uma só vez.

Abreviaturas de margem

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

Atenção: se os itens acima não tiverem espaço entre eles, a abreviação margin-block não será aceita pelo navegador.

Longhand

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

Nova abreviação

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

Não existe uma forma abreviada de "superior e inferior" ou "esquerda e direita"... até agora! Você provavelmente faz referência aos quatro lados usando a abreviação de margin: 10px;. Agora, é possível referenciar facilmente dois lados complementares usando a abreviação da propriedade lógica.

Longhand

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

Nova abreviação

margin-inline: 4ch 2ch;

Abreviações de padding

Não foram lançadas novas habilidades, mas mais abreviações super úteis foram:
padding-block e padding-inline.

Longhand

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

Nova abreviação

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

E o conjunto de abreviações complementares inline:

Longhand

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

Nova abreviação

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 da definição de lados com encarte.

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

Escrita longa

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

Nova abreviação física

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

Isso deve parecer conveniente imediatamente. Inset é uma abreviação para os lados físicos e funciona como margem e padding.

Novos recursos

Por mais interessante que seja a abreviação de lados físicos, há ainda mais recursos lógicos trazidos por outras abreviações de inset. Essas abreviações trazem conveniência para a criação de conteúdo por desenvolvedores (elas são mais curtas para digitar), mas também aumentam o alcance potencial do layout porque são relativas ao fluxo.

Mão longa física

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

Abreviação lógica

position: absolute;
inset-block: 10px;

Escrita longa física

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

Abreviação lógica

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

Mais informações e uma lista completa de abreviações e escrita manual estão disponíveis no MDN.

Abreviações de borda

A borda, além das propriedades aninhadas color, style e width, também receberam novas abreviações lógicas.

Escrita longa física

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

Abreviação lógica

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

Escrita longa física

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

Abreviação lógica

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

Escrita longa física

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

Abreviação lógica

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

Mais informações e uma lista completa de abreviações e de mão longa de borda estão disponíveis no MDN.

Exemplo de propriedade lógica <figure>

Vamos reunir tudo em um pequeno exemplo. As propriedades lógicas podem organizar uma imagem com uma legenda para processar diferentes instruções de escrita e documentos.

Ou teste!

Não é preciso fazer muito para tornar um card responsivo internacionalmente com um <figure> e algumas propriedades lógicas. Se você tem curiosidade sobre como todo esse CSS internacional funciona, espero que esta seja uma pequena introdução significativa.

Polipreenchimento e suporte a vários navegadores

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

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

No entanto, essa não é uma solução completa para todos. Confira um substituto manual que usa o pseudoseletor :lang() para segmentar idiomas específicos, ajustar o espaçamento físico deles de maneira adequada e, no final, oferecer o espaçamento lógico 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 é necessário ou não fornecer substitutos de propriedade física:

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

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

Sass, PostCSS, Emotion e outros têm ofertas automatizadas de bundler e/ou build com uma ampla variedade de soluções ou substitutos. Confira cada uma delas para saber qual delas combina com sua cadeia de ferramentas e estratégia geral do site.

A seguir

O CSS vai oferecer mais propriedades lógicas, ainda não acabou! No entanto, há um grande conjunto de abreviações ausentes, e uma resolução ainda está pendente nesta questão do GitHub. Há uma solução temporária em um rascunho. E se você quiser estilizar todos os lados lógicos de uma caixa com uma abreviação?

Abreviação física

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

Abreviação lógica

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

O rascunho da proposta atual significa que você precisa escrever logical em cada abreviação para aplicar o equivalente lógico, o que não parece muito DRY para alguns.

Há outras propostas para mudar isso no nível do bloco ou da página, mas isso pode vazar usos lógicos para estilos que ainda assumem 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, expresse sua opinião. Queremos ouvir você.

Quer saber mais sobre propriedades lógicas? Confira uma referência detalhada, com guias e exemplos, no MDN 🤓

Feedback

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