CSS Logical Properties é um novo módulo de CSS que traz uma nova abordagem para se pensar em layouts para a Web. É importante garantir que um site seja acessível e inclusivo para todos, independentemente do idioma. Com o novo módulo de CSS Logical Properties, essa tarefa se torna muito mais fácil.
Desenvolver layouts flexíveis e adaptáveis é o caminho a seguir para tornar qualquer projeto web mais acessível e inclusivo. Esses tipos de layouts se adaptam perfeitamente a diferentes idiomas e culturas, tornando qualquer site acessível e inclusivo para todos.
Imagine um site com interface que se adapta automaticamente e que muda sua disposição de acordo com o idioma do usuário ou suas preferências de navegação. Isso é o que é possível alcançar com CSS Logical Properties.
Mas isso não é tudo. Além de tornar sites mais acessíveis e inclusivos, Logical Properties também ajudam a melhorar a experiência do usuário e aumentar a taxa de conversão.
Este artigo contém informações relevantes e exemplos práticos, mas assista também ao vídeo de nosso canal no YouTube sobre o assunto:
Mas, antes de mostrar CSS Logical Properties, propriamente dito, é interessante uma pequena recapitulação sobre alguns aspectos importantes de CSS.
CSS Layout
As técnicas de layout de CSS permitem selecionar elementos contidos em uma página Web e controlar onde eles ficam posicionados em relação a uma série fatores. Isso é o básico de CSS Layout.
CSS Layout consiste em uma série de técnicas de layout em CSS, como posicionamento, float, Flexbox, Grid etc. Essas técnicas de layout (ou algoritmos) permitem usar CSS para alterar a maneira com os elementos são apresentados e se comportam em tela.
O default é chamado de Flow Layout (ou Normal Flow), que é como o navegador apresenta páginas HTML por padrão quando nenhum outro recurso é usado para controlar o layout.
Dentro do Flow Layout, determinados elementos são caixas do tipo “block” e outros são caixas do tipo “inline”. Dentre suas características, talvez a mais evidente seja que os elementos do tipo block passam para a próxima linha (ou “quebram de linha”) e, os “inline”, não.
Imagine o elemento parágrafo (<p>), por exemplo: a cada novo parágrafo, uma nova quebra de linha acontece; já um negrito (<strong>), um span (<span>) ou um link (<a>), ficam no meio do texto, no seu “fluxo”.
Box Model
Saber a diferença entre incluir ou não o valor de algumas propriedades CSS no cálculo da dimensão de elementos é fundamental para conseguir obter os resultados de layout desejados.
Internamente, os navegadores usam um “modelo de caixa”, ou Box Model, para representar todo e qualquer elemento renderizado na tela, diferenciando e tratando separadamente para a composição do layout conteúdo, espaçamento, bordas e margens.
Conhecer a propriedade CSS box-sizing e seus possíveis valores e como a mudança do algoritmo de Box Model afeta os cálculos de layout é vital e indispensável para um dev front end.
Se ainda não está familiarizado com Box Model, assista ao nosso vídeo a respeito:
Writing Mode (ou Modo de Escrita)
Mas tem uma outra questão a esse respeito: tudo isso também depende do Writing Mode (ou Modo de Escrita).
Como você deve saber, nem todos os idiomas são como o nosso, com escrita da esquerda para a direita, de cima para baixo. Existem muitas línguas que começam da direita, de cima, enfim, a variedade é realmente bem grande.
A propriedade CSS writing-mode define se as linhas de texto são dispostas horizontal ou verticalmente, bem como a direção dos blocos.
Então, o fluxo de leitura (tecnicamente, “block flow direction”) vai depender do valor de writing-mode dos respectivos elementos-pai, que pode ser: horizontal-tb; vertical-rl; vertical-lr.
E ainda tem outras propriedades para controlar esse tipo de coisa, como text-orientation, direction, unicode-bidi e outras.
Mas, com essas explicações até agora – e olha que foi só uma visão bem por cima –, já dá para falar do tema principal do vídeo, que é CSS Logical Properties.
CSS Physical Properties vs. CSS Logical Properties
As propriedades que estamos mais acostumados ao lidar com layouts — top, right, bottom e left — são chamadas Physical Properties (ou Propriedades Físicas), porque se referem às dimensões “físicas” da tela do dispositivo que está sendo usado para se realizar o acesso ao site/app.
Já as Logical Properties (ou Propriedades Lógicas) se referem às extremidades de uma caixa conforme elas se relacionam com o fluxo de conteúdo, quer dizer, elas podem mudar se a direção do texto ou o modo de escrita mudar.
E essa mudança de abordagem traz muito mais flexibilidade no desenvolvimento de interfaces para Web.
Como já comentado, Logical Properties ajudam a garantir que um site seja acessível e inclusivo para todos, independentemente do idioma de acesso ou preferências de leitura.
Para que esta grande diferença seja mais evidente, aqui está um alternador interativo que permite trocar de Physical Properties para Logical Properties:
Mas, como tudo em CSS (e praticamente qualquer outra área de conhecimento), vale mais a pena entender do que decorar.
Entendendo a lógica de CSS Logical Properties
Com a chegada de Logical Properties, vieram também muitas novas propriedades (e valores).
Entender a lógica por trás de CSS Logical Properties é importante também para web design responsivo. Com o atual uso massivo de dispositivos móveis, é essencial que os sites sejam projetados para se adaptar a diferentes tamanhos de tela e orientações.
As Logical Properties permitem que você especifique como os elementos devem se comportar em diferentes resoluções, o que é crucial para garantir que seu site seja visualmente agradável em todos os dispositivos.
Além disso, entender a lógica por trás das Logical Properties também é essencial para otimizar o desempenho de qualquer site/app.
Ao usar essas propriedades, torna-se possível controlar com precisão como os elementos são renderizados na tela, o que pode ajudar a reduzir o uso de recursos e melhorar a velocidade de carregamento — isso é especialmente importante para dispositivos móveis, onde a conexão à internet pode ser limitada.
Em resumo, entender a lógica por trás das Logical Properties é fundamental para criar layouts flexíveis e adaptáveis, além de otimizar o desempenho do seu site. Com o tempo, você será capaz de criar projetos de design incríveis e se adaptar facilmente às mudanças futuras no CSS.
Na verdade, esse esquema já explica quase tudo o que é preciso saber a respeito dessa organização das propriedades de CSS Logical Properties:
O esquema é:
- Propriedade que se quer alterar
- Se é no sentido block ou inline
- Se é no início ou fim deste sentido
- Informações extras para identificar a propriedade
Então, para colocar margem no início do sentido de bloco, usa-se margin-block-start; para padding no fim do sentido inline, padding-inline-end; para alterar a espessura da borda no fim do sentido de bloco, border-block-end-width e; assim por diante, para as outras propriedades que sejam necessárias.
Novas unidades CSS
E o módulo CSS Logical Properties não trouxe somente novas propriedades e valores, mas, também, novas unidades CSS: vi e vb.
vi. Equivale a 1% do tamanho da viewport na direção inline;vb. Equivale a 1% do tamanho da viewport na direção block;
Pensando no nosso modo de escrita (esquerda para a direita; cima para baixo), vi se equipara a vw, enquanto vb se equipara a vh — se ainda estiver em dúvida, consulte nosso guia sobre unidades de CSS moderno.
Conclusão sobre CSS Logical Properties
Mas quando usar CSS Logical Properties?
Primeiramente, fique tranquilo quanto ao cross-browser, que (no momento da publicação deste artigo) o suporte já está em, praticamente, 100%.
Alguns respondem que se deve usar Logical Properties quando for um projeto multi idiomas. Mas a resposta pode não ser tão simples.
Por exemplo, num projeto que precisa de suporte para português, inglês e espanhol, não existem essas complexidades, já que todos os 3 idiomas são lidos na horizontal, de cima para baixo.
Uma resposta mais precisa seria: “quando o projeto precisar de suporte a mais de uma direcionalidades”, ou seja, tiver vários modos de escrita.
Por exemplo, se um site precisar de português, árabe e japonês, já se pode considerar fortemente o uso de CSS Logical Properties.
Mas, pensando bem, usar Logical Properties com certeza é uma boa prática ao se trabalhar em projetos com, pelo menos, 2 direcionalidades; mas nunca será uma prática ruim, mesmo em projetos de apenas 1.
Concorda?
Coloca nos comentários sua opinião sobre o que você achou de CSS Logical Properties e se você pretende usar a partir de agora. :)