Podcast do CSS - 012: propriedades lógicas
Um padrão de interface do usuário muito comum é um rótulo de texto com um ícone inline de suporte.
O ícone fica à esquerda do texto com uma pequena lacuna entre os dois,
fornecido por margin-right no ícone.
No entanto, há um problema,
porque isso só vai funcionar quando a direção do texto for da esquerda para a direita.
Se a direção do texto mudar para a direita para a esquerda, como é o caso em idiomas como o árabe, o ícone vai aparecer na frente do texto.
Como você considera isso no CSS? As propriedades lógicas permitem que você resolva essas situações. Entre muitos outros benefícios, eles oferecem suporte sem custo financeiro e automático para internacionalização. Eles ajudam você a criar um front-end mais resiliente e inclusivo.
Terminologia
As propriedades físicas das partes superior, direita, inferior e esquerda se referem às dimensões físicas da janela de visualização. Pense nisso como uma rosa dos ventos em um mapa. As propriedades lógicas, por outro lado, se referem às bordas da caixa no que se refere ao fluxo de conteúdo. Portanto, eles podem mudar se a direção do texto ou o modo de escrita mudar. Essa é uma grande mudança dos estilos direcionais e nos oferece muito mais flexibilidade ao estilizar nossas interfaces.
Fluxo de blocos
O fluxo de blocos é a direção em que os blocos de conteúdo são colocados. Por exemplo, se houver dois parágrafos, o fluxo de bloco é onde o segundo parágrafo irá. Em um documento em inglês, o fluxo de bloco é de cima para baixo. Pense nisso no contexto de parágrafos de texto seguidos, de cima para baixo.
Fluxo inline
O fluxo inline é como o texto flui em uma frase.
Em um documento em inglês, o fluxo in-line é da esquerda para a direita.
Se você mudasse o idioma do documento da página da Web para árabe (<html lang="ar">),
o fluxo inline seria da direita para a esquerda.
O texto é transmitido na direção determinada pelo modo de escrita do documento.
É possível mudar a direção em que o texto é disposto com a propriedade writing-mode.
Isso pode ser aplicado ao documento inteiro ou a elementos individuais.
Fluxo relativo
Antes, no CSS,
só era possível aplicar propriedades como margem em relação à direção dos lados.
Por exemplo, margin-top é aplicado à parte superior física do elemento.
Com propriedades lógicas, margin-top se torna margin-block-start.
Isso significa que, independentemente do idioma e da direção do texto,
o fluxo de blocos tem regras de margem adequadas.
Tamanho
Para evitar que um elemento exceda uma determinada largura ou altura, escreva uma regra como esta:
.my-element {
max-width: 150px;
max-height: 100px;
}
Os equivalentes relativos ao fluxo são max-inline-size e max-block-size.
Você também pode usar min-block-size e min-inline-size em vez de min-height e min-width.
Com as propriedades lógicas, essa regra de largura e altura máxima ficaria assim:
.my-element {
max-inline-size: 150px;
max-block-size: 100px;
}
Início e fim
Em vez de usar direções como superior, direita, inferior e esquerda, use início e fim. Isso oferece início em bloco, fim in-line, fim de bloco e início in-line. Isso permite que você aplique propriedades CSS que respondam a mudanças no modo de gravação.
Por exemplo, para alinhar o texto à direita, use este CSS:
p {
text-align: right;
}
Caso seu objetivo não seja se alinhar à direita física,
mas sim ao início da direção de leitura,
isso não é útil.
Com os valores lógicos, há valores start e end mais úteis que são mapeados para a direção do texto.
A regra de alinhamento do texto agora tem esta aparência:
p {
text-align: end;
}
Espaçamento e posicionamento
As propriedades lógicas de margin, padding e inset
tornam mais fáceis e eficientes o posicionamento de elementos e a determinação de como eles interagem entre si nos modos de gravação.
As propriedades relacionadas à margem e ao padding ainda são mapeamentos diretos para direções,
mas a principal diferença é que, quando um modo de escrita muda, eles mudam com ele.
.my-element {
padding-top: 2em;
padding-bottom: 2em;
margin-left: 2em;
position: relative;
top: 0.2em;
}
Isso adiciona um pouco de espaço vertical dentro do espaço com padding e o empurra para fora da esquerda com margin.
A propriedade top também a desloca para baixo.
Com as propriedades lógicas equivalentes, o código ficaria assim:
.my-element {
padding-block-start: 2em;
padding-block-end: 2em;
margin-inline-start: 2em;
position: relative;
inset-block-start: 0.2em;
}
Isso adiciona um pouco de espaço inline dentro de um padding e o empurra para fora do início inline com margin
A propriedade inset-block a move do início do bloco para dentro.
A propriedade inset-block não é a única opção abreviada com propriedades lógicas.
Essa regra pode ser ainda mais condensada
usando versões abreviadas das propriedades de margem e de preenchimento.
.my-element {
padding-block: 2em;
margin-inline: 2em 0;
position: relative;
inset-block: 0.2em 0;
}
Bordas
A adição de border e border-radius também pode ser feita com propriedades lógicas.
Para adicionar uma borda na parte inferior e direita, com um raio à direita, escreva uma regra como esta:
.my-element {
border-bottom: 1px solid red;
border-right: 1px solid red;
border-bottom-right-radius: 1em;
}
Ou você pode usar propriedades lógicas como estas:
.my-element {
border-block-end: 1px solid red;
border-inline-end: 1px solid red;
border-end-end-radius: 1em;
}
O end-end em border-end-end-radius é a extremidade do bloco e a in-line.
Unidades
As propriedades lógicas trazem duas novas unidades: vi e vb.
Uma unidade vi corresponde a 1% do tamanho da janela de visualização na direção inline.
O equivalente na propriedade não lógica é vw.
A unidade vb corresponde a 1% da janela de visualização na direção do bloco.
O equivalente na propriedade não lógica é vh.
Essas unidades sempre serão mapeadas conforme a direção de leitura.
Por exemplo, se você quiser que um elemento ocupe 80% do espaço inline disponível de uma janela de visualização,
o uso da unidade vi vai mudar automaticamente esse tamanho de cima para baixo se o modo de escrita for vertical.
Como usar propriedades lógicas de maneira pragmática
Propriedades lógicas e modos de escrita não são apenas para internacionalização. Eles podem ser usados para produzir uma interface de usuário mais versátil.
Se você tem um gráfico com rótulos nos eixos X e Y, talvez queira que o texto do rótulo Y seja lido verticalmente.
Como o rótulo do eixo Y na demonstração tem um writing-mode de vertical-rl,
você pode usar os mesmos valores de margin nos dois rótulos.
O valor margin-block-start se aplica aos dois rótulos
porque o início do bloco está à direita para o eixo Y e na parte superior do eixo X.
Os lados do bloco inicial têm uma borda vermelha para que você possa vê-los.
Como resolver o problema dos ícones
Agora que abordamos as propriedades lógicas, esse conhecimento pode ser aplicado ao problema de design com que começamos.
p {
display: inline-flex;
align-items: center;
}
p svg {
width: 1.2em;
height: 1.2em;
margin-right: 0.5em;
flex: none;
}
A margem foi aplicada à direita do elemento do ícone.
Para que o espaçamento entre o ícone e o texto seja compatível com todas as direções de leitura,
a propriedade margin-inline-end precisa ser usada.
p {
display: inline-flex;
align-items: center;
}
p svg {
width: 1.2em;
height: 1.2em;
margin-inline-end: 0.5em;
flex: none;
}
Agora, independentemente da direção de leitura, o ícone se posicionará e se posicionará adequadamente.
Teste seu conhecimento
Teste seu conhecimento sobre propriedades lógicas
Conforme você escreve com a mão, seu pulso se move ao longo de qual eixo lógico?
inlineblockMarque todas as opções que podem se beneficiar das propriedades lógicas
flex-start, block-end e inline-startblock-start e inline.inline-size e max-block-size.border-end-end-radiusQual lado lógico de uma palavra é sublinhado?