Ao projetar sites, atender aos idiomas da esquerda para a direita (LTR) e da direita para a esquerda (RTL) é essencial para um público global. Embora a maioria dos desenvolvedores esteja familiarizada com o uso da margem-esquerda e da direita para ajustes de layout, essas propriedades ficam aquém dos ambientes onde a direção do texto muda. Digite margem-inline-start e suas contrapartes lógicas-as propriedades CSS modernas que facilitam o design para o conteúdo multilíngue e bidirecional.

Neste artigo, exploraremos como a mudança de margem-esquerda/margem-direita para margem-in-start e margem-na linha melhora a flexibilidade e mantém a consistência entre os idiomas LTR e RTL.

Entendendo as propriedades lógicas em css

Propriedades tradicionais do CSS como margem-esquerda e direita da margem são propriedades físicas, o que significa que seu comportamento está ligado à esquerda e à direita visual da tela. Isso funciona bem para idiomas LTR, como o inglês, mas cria problemas quando a direção da página muda para RTL, como em árabe ou hebraico.

Propriedades lógicas, introduzidas no CSS3, são de direção-agnóstico. Eles se adaptam com base no modo de escrita do documento ou elemento. As propriedades da margem lógica -chave incluem:

• Margin-inline-start: substitui margem-esquerda por LTR e margem-direita para rtl.
• End da margem da margem: substitui a direita da margem por LTR e margem-esquerda para rtl.

Essas propriedades se alinham melhor com o fluxo natural do texto bidirecional, tornando -as indispensáveis ​​para o design da web internacionalizada.

Por que usar margin-inline-start?

1 - suporte RTL sem costura
Quando você usa margem-esquerda, ele sempre aplica a margem ao lado esquerdo de um elemento, independentemente da direção do texto. Esse comportamento não muda mesmo quando a página muda para o RTL, levando a layouts desalinhados. Por outro lado, os adaptações de margem-in-inline com base na direção do texto, aplicando a margem ao lado apropriado:

/* Logical property */
.element {
 margin-inline-start: 20px;
}
/* Equivalent to */
:root[dir="ltr"] .element {
 margin-left: 20px;
}
:root[dir="rtl"] .element {
 margin-right: 20px;
}

2 - Código de limpeza
Sem propriedades lógicas, o suporte a LTR e RTL exigiria estilos específicos de direção, adicionando complexidade e potencial para erros. Aqui está uma comparação:

abordagem tradicional:

:root[dir="ltr"] .element {
 margin-left: 20px;
}
:root[dir="rtl"] .element {
 margin-right: 20px;
}

Abordagem moderna:

.element {
 margin-inline-start: 20px;
}

] As propriedades lógicas fazem parte da evolução contínua do CSS em direção a layouts adaptativos e flexíveis. Ao adotar margem-in-start, você alinha seus designs com padrões modernos, tornando-os mais escaláveis ​​e sustentáveis.

Exemplo do mundo real

Veja como você pode refatorar um layout de cartão típico para melhor suporte RTL:

Antes: Usando margin-left

. Cartão { margem-esquerda: 1Rem; preenchimento-esquerda: 2REM; }

.card {
 margin-left: 1rem;
 padding-left: 2rem;
}

Depois: Usando margem-inline-start

. Cartão { margem-in-start: 1Rem; Start de preenchimento: 2REM; }

!

.card {
 margin-inline-start: 1rem;
 padding-inline-start: 2rem;
}

Browser Support

As propriedades lógicas são bem apoiadas nos navegadores modernos, incluindo Chrome, Edge, Firefox e Safari. Se você precisar apoiar os navegadores mais antigos, considere usar fallbacks:

. Cartão { margem-esquerda: 1Rem; /* Cair pra trás */ margem-in-start: 1Rem; }

Pensamentos finais

.card {
 margin-inline-start: 1rem;
 padding-inline-start: 2rem;
}

A mudança para propriedades lógicas como margem-in-start é uma pequena mudança que causa um grande impacto na acessibilidade, manutenção e internacionalização. À medida que a Web se torna cada vez mais global, a adoção dessas propriedades garante que seus projetos sejam inclusivos e adaptáveis ​​para os usuários em todo o mundo. ! As chances são de que sim.

Codificação feliz e que seus designs fluam lindamente em qualquer idioma!