Novas abreviações de propriedades lógicas e novas propriedades de encarte para o Chromium.
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.