15

Recentemente encontrei o conceito de "propriedades lógicas no CSS". Ao que me parece, é um novo sistema de se criar o CSS de forma lógica, e não física (direção e posições fixas, digamos assim).

No entanto, essa definição e conceito ainda me parecem confusos, então:

  • O que são as propriedades lógicas no CSS?
  • Qual problema elas vieram para resolver?
7
  • Cara realmente é difícil de entender, e mais difícil ainda de explicar rss
    – hugocsl
    19/12/2019 às 0:06
  • 1
    Vou deixar para outra pessoa responder! 😅
    – user170164
    19/12/2019 às 0:36
  • 6
    Por que o negativo? 19/12/2019 às 3:04
  • 2
    Seria isso CSS Logical Properties? 30/10/2020 às 18:59
  • 1
    @WallaceMaxters, sim! Creio que sim. :-) 30/10/2020 às 19:00

1 Resposta 1

7

As propriedades lógicas do CSS definem uma nova maneira de trabalhar com o layout. Seu principal objetivo é ajudar os desenvolvedores a suportar diferentes sistemas de escrita, como scripts da direita-para-esquerda (RTL) e exibidos na vertical. Esses novos recursos tornam possível controlar o layout por meio de propriedades lógicas, e não físicas, por exemplo com propriedades lógicas você pode descrever o start (início) e end (fim) de um elemento ao invés de seus limites no left (esquerda) e right (direita). Consegue ver a diferença?

Fonte

Caso você queira definir uma margem margin-left: 100px em um elemento que deve se adaptar a direção e ao sistema de escrita do seu conteúdo, você pode usar a propriedade lógica margin-inline-start: 100px que vai ser inteligente o suficiente para isso. Ou seja você usa a lógica de usar uma margem no início de uma linha e não definir uma margem à esquerda! Dessa forma mesmo que o sistema de escrita seja vertical-esquerda-para-direita, baixo-para-cima, direita-para-esquerda, a margem do elemento irá se adaptar ao sistema de escrita!

Gif com um exemplo visual

Percebe como o elemento se adapta baseado no sistema de escrita utilizando a lógica? Isso não seria possível utilizando apenas CSS caso fosse usado as propriedades físicas!

Outras fontes que podem ser úteis (note que são 4 links diferentes)

Uma lista com algumas propriedades lógicas e seus valores

1
  • 7
    Gostaria de ver algum exemplo prático, para entender melhor a teoria...
    – MagicHat
    19/12/2019 às 0:38

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .