CSS: Propriedades Lógicas X Propriedades Direcionais

Segue uma dica para deixar seu código em CSS mais semântico:

O inglês é escrito da esquerda para a direita e de cima para baixo, mas nem todos os idiomas são escritos dessa maneira. Alguns idiomas, como árabe e hebraico, são lidos da direita para a esquerda, e alguns tipos de letra japoneses são lidos verticalmente em vez de horizontalmente. Para acomodar esses modos de escrita, propriedades lógicas foram introduzidas no CSS.

Se você escreve CSS, pode ter usado palavras-chave direcionais como “left”, “right”, “top” e “bottom”. Essas palavras-chave referem-se ao layout físico do dispositivo do usuário.

As propriedades lógicas , por outro lado, referem-se às arestas de uma caixa à medida que se relacionam com o fluxo de conteúdo. Se o modo de escrita mudar, o CSS escrito com propriedades lógicas será atualizado de acordo. Esse não é o caso das propriedades direcionais.

Enquanto a propriedade direcional margin-left sempre se refere à margem do lado esquerdo de uma caixa de conteúdo, a propriedade lógica margin-inline-start refere-se à margem do lado esquerdo de uma caixa de conteúdo em um idioma da esquerda para a direita e a margem do lado direito de uma caixa de conteúdo em um idioma da direita para a esquerda.

Para que seus projetos se adaptem a diferentes modos de escrita, evite propriedades direcionais. Use propriedades lógicas em vez disso.

Exemplo:

Ao invés disso:

.byline {  text-align: right;}

Faça isso:

.byline {  text-align: end;}

Para saber mais acesse: Internationalization

6 Likes

Amo!!! Achei q ningúem ia falar disso. Só uso inline e block. height e width nem existem mais kkkk

1 Like