Noções básicas sobre propriedades e valores lógicos

No passado, o CSS se ligava a dimensões e direções físicas, mapeando fisicamente o posicionamento dos elementos à esquerda, à direita, superior e inferior. float um elemento para a left ou para right , usamos as propriedades de deslocamento de posicionamento top , left , bottom e right . Definimos margens, preenchimento e bordas como margin-top e padding-left . Essas propriedades e valores físicos fazem sentido se você estiver trabalhando em um modo e direção de escrita horizontal, de cima para baixo, da esquerda para a direita.

Eles fazem menos sentido se você usar um modo de escrita vertical, seja para todo o layout ou para alguns elementos. Neste artigo, explicarei como o CSS está mudando para oferecer suporte aos modos de escrita e, ao fazê-lo, esclarecerei algumas coisas que podem confundir você sobre Flexbox e Grid.

Quando comecei a trabalhar com CSS Grid e a explicar a nova especificação para as pessoas, notei que a propriedade grid-area poderia ser usada como um atalho de uma linha para definir todas as quatro linhas. Portanto, os três exemplos abaixo resultariam no mesmo posicionamento de item. A primeira usa as propriedades longhand, a segunda especifica as linhas inicial e final para cada dimensão e a terceira usa grid-area .

 .item { grid-row-start: 1; grid-column-start: 2; grid-row-end: 3; grid-column-end: 4; }

 .item { grid-row: 1 / 3; grid-column: 2 / 4; }

 .item { grid-area: 1 / 2 / 3 / 4; }

A ordem das linhas quando usamos grid-area é a seguinte:

• grid-row-start
• grid-coluna-início
• grid-row-end
• final da coluna da grade

A primeira pergunta que eu (e muitas pessoas do meu público) tive foi: “por que eles não seguem a ordem Superior, Direita, Inferior, Esquerda com a qual estamos acostumados de todo o resto em CSS ?” Na verdade, eles vão na ordem inversa desses valores: Superior, Esquerda, Inferior, Direita! O Grupo de Trabalho CSS está tentando ativamente dificultar as coisas?

A resposta é que esses valores se afastaram da suposição subjacente de que o conteúdo da web é mapeado para as dimensões físicas da tela, com a primeira palavra de uma frase no canto superior esquerdo da caixa em que está. A ordem das linhas na grid-area faz todo o sentido se você nunca encontrou a maneira existente de definir esses valores em uma abreviação. Definimos as duas linhas iniciais primeiro, depois as duas linhas finais.

Isso significa que se mudarmos o modo de escrita de nosso documento para vertical, a posição de um bloco permanece relativa ao modo de escrita do documento, e não às propriedades físicas da tela. Você pode tentar isso no exemplo abaixo, mudar o valor do modo de escrita para o nosso layout e ver a grade inteira girar.

Conhecer esse fato sobre os modos de escrita também explica por que CSS Grid e Flexbox se referem a linhas start e end em vez de mapear a grade para as dimensões físicas de cima, direita, inferior e esquerda, como usaríamos com posicionamento absoluto. No exemplo acima, o primeiro item é posicionado usando grid-area e o posicionamento baseado em linha.

 grid-area: 1 / 2 / 3 / 4;

Se fôssemos usar o longhand isso ficaria assim:

 grid-row-start: 1; grid-column-start: 2; grid-row-end: 3; grid-column-end: 4;

Definimos ambas as linhas iniciais, primeiro o eixo do bloco, depois o eixo em linha e depois seguimos o mesmo padrão para as linhas finais em cada dimensão. Qualquer que seja a disposição da grade, as linhas inicial e final permanecem em relação à grade e ao modo de escrita do documento.

Dimensões em bloco e em linha

Já mencionei algo que é fundamental para entender o novo layout, o conceito das dimensões Block e Inline. Esses termos continuarão surgindo à medida que você trabalha com o novo CSS. As duas dimensões são razoavelmente fáceis de entender no contexto do Grid Layout, pois estamos sempre trabalhando com um bloco e um eixo embutido ao trabalhar no Grid Layout, então usarei uma demonstração do Grid para explicar.

A dimensão Bloco corresponde à ordem em que os blocos são dispostos na página. Se você pensar em um parágrafo de texto em inglês. Cada parágrafo é disposto um abaixo do outro, a direção na qual eles são dispostos é a dimensão do bloco e, portanto, no Layout de Grade, este é o Eixo do Bloco.

No CSS Grid Layout, o Block Axis também é chamado de Row Axis, razão pela qual as propriedades do Block Axis são grid-row-start e grid-row-end .

O eixo inline, portanto, percorre o eixo do bloco, na direção em que as palavras são dispostas em uma frase. Em inglês, esse eixo corre da esquerda para a direita. No Grid Layout, o Eixo Inline é o Eixo da Coluna com as propriedades grid-column-start e grid-column-end .

Se mudarmos o modo de escrita do nosso exemplo para vertical-lr o modo de escrita agora é vertical, o que significa que o eixo do bloco corre verticalmente e o eixo inline ao longo das linhas (de cima para baixo).

Portanto, se falarmos sobre a dimensão Bloco, estamos descrevendo a direção na qual os parágrafos de texto seriam dispostos no fluxo normal do documento, sendo a dimensão Inline a direção em que uma frase é executada.

Propriedades lógicas

Uma vez que você se acostuma a trabalhar com dimensões Block e Inline, linhas iniciais e finais, o link para dimensões físicas no resto do CSS começa a parecer estranho. Existe, no entanto, uma especificação que define as versões lógicas de todas as propriedades físicas existentes - A especificação CSS Logical Properties and Values, que é um First Public Working Draft. Atualmente o único navegador com bom suporte para essas propriedades é o Firefox, porém entender como elas funcionam pode ser uma boa forma de pensar em um novo CSS, então vamos dar uma olhada.

Eu ilustrei cada seção com exemplos do CodePen, para vê-los funcionando, você precisará usar o Firefox!

Dimensões lógicas

As propriedades lógicas definem uma propriedade inicial e final para o bloco e a dimensão em linha. Para propriedades de altura e largura, usamos block-size e inline-size . Também podemos definir max-block-size , min-block-size , max-inline-size e min-inline-size . Se você estiver trabalhando em inglês, um idioma horizontal de cima para baixo, block-size se refere à height física do bloco na tela, o inline-size a width física do item. Se você estiver trabalhando em um idioma em que os blocos são executados verticalmente, quando você olhar para a tela block-size aparecerá para controlar a width e o inline-size da altura.

Você pode ver isso em ação na demonstração abaixo. Meu bloco tem um block-size de 150 pixels e um inline-size de 250 pixels. Altere a propriedade writing-mode para ver como o layout se ajusta.

Fronteiras Lógicas

Temos então propriedades para controlar bordas que funcionam da mesma maneira. As propriedades físicas para bordas são:

• border-top
• border-top-width
• border-top-style
• border-top-color
• border-right
• border-right-width
• border-right-style
• border-right-color
• border-bottom
• border-bottom-width
• border-bottom-style
• border-bottom-color
• border-left
• border-left-width
• border-left-style
• border-left-color

Estes então têm mapeamentos lógicos que se tornam um pouco detalhados como longos, mas são:

• border-block-start
• border-block-start-width
• border-block-start-style
• border-block-start-color
• border-inline-start
• border-inline-start-width
• border-inline-start-style
• border-inline-start-color
• border-block-end
• border-block-end-width
• border-block-end-style
• border-block-end-color
• border-inline-end
• border-inline-end-width
• border-inline-end-style
• border-inline-end-color

No exemplo a seguir, há dois blocos, o primeiro usando propriedades lógicas para definir uma border-block-start-color de verde e um border-inline-end-style de pontilhado. O segundo bloco usa as propriedades físicas de border-top-color e border-right . Altere o modo de escrita para ver como eles se comportam.

Margens e preenchimento

Margens e preenchimento têm caracteres semelhantes às nossas propriedades de borda, sendo as propriedades físicas:

• margin-top
• margin-left
• margin-bottom
• margin-right
• padding-top
• padding-right
• padding-bottom
• padding-left

Estes têm propriedades lógicas da seguinte forma:

• margin-block-start
• margin-inline-start
• margin-inline-start
• margin-inline-end
• padding-block-start
• padding-inline-start
• padding-inline-start
• padding-inline-end

Neste próximo exemplo, configurei padding-block-start no primeiro bloco e padding-top no segundo, alterei o modo de escrita para ver a diferença quando os eixos Block e Inline são alternados.

Deslocamentos de Posicionamento

Outro lugar onde as propriedades físicas são usadas é ao posicionar coisas usando a propriedade position . Depois de definir position: absolute ou outro valor de position diferente do padrão de static , podemos posicionar um item usando deslocamentos, seja da viewport ou de um pai que criou um novo contexto de posicionamento.

As propriedades físicas de deslocamento são:

• top
• right
• bottom
• left

Seguindo o padrão de nossas outras propriedades lógicas, temos:

• offset-block-start
• offset-inline-start
• offset-block-end
• offset-inline-end

Experimente-os no exemplo abaixo. A caixa com uma borda tem position: relative e o pequeno quadrado roxo position: absolute . No exemplo físico, o quadrado está posicionado em top: 50px e right: 20px . A versão lógica tem offset-block-start: 50px e offset-inline-end: 20px .

Valores lógicos

Outro lugar onde estamos acostumados a usar dimensões físicas é quando flutuamos ou limpamos as coisas. Para float , clear temos algumas versões lógicas dos valores left e right .

• inline-start
• inline-end

Na demonstração, estou flutuando o bloco roxo na versão lógica inline-start . Também estou usando propriedades lógicas para a margem; isso garante que a margem sempre venha depois do bloco e antes do conteúdo que o envolve. Ao selecionar o valor vertical-rl na lista suspensa, você pode ver como no exemplo físico a margem termina à direita do bloco, em vez de ser aplicada na direção -end .

Também existem valores start e end para text-align . Alinhar algo para iniciar irá alinhá-lo ao início do eixo inline, para end ao final do eixo inline, independentemente de o modo de escrita ser horizontal ou vertical.

Usando propriedades e valores lógicos hoje

Como já mencionado, há pouco suporte do navegador no momento para propriedades e valores lógicos. No entanto, se você quiser começar a trabalhar com eles agora, a opção seria escrever seu CSS usando-os e depois usar um plug-in PostCSS para converter as propriedades e valores lógicos em suas contrapartes físicas. Este plugin de Jonathan Neal cobre todas as propriedades e valores que descrevi neste artigo.

Você também pode ajudar a incentivar a adoção dessas propriedades pelos fornecedores de navegadores, estrelando o bug do Chrome e votando-as no site Edge Developer Feedback.

Mesmo que você decida não usar essas propriedades agora, entender como elas funcionam é uma parte essencial do entendimento para trabalhar com um novo layout. Descrevendo seu layout Grid ou Flex como tendo linhas inicial e final, pensando em dimensões de bloco e em linha, essas coisas tornarão muito mais fácil entender como o layout funciona.

Leitura adicional

• O MDN Web Docs tem todas as propriedades e valores lógicos listados com exemplos adicionais.
• CSS Grid, valores lógicos e modos de escrita, MDN
• Modos de escrita CSS, Jen Simmons, 24 maneiras