Inserir - CSS-Tricks

A insetpropriedade em CSS é um atalho para as quatro propriedades embutidas, top, right, bottome leftem uma declaração. Assim como as quatro propriedades individuais, insetnão tem efeito sobre os elementos não posicionados (estáticos). Em outras palavras, um elemento deve declarar um positionvalor explícito antes que as propriedades de inserção tenham efeito.

.box ( inset: 10px 20px 30px 40px; position: relative; )

inset é inicialmente definido na especificação CSS Logical Properties and Values ​​Level 1, que está no Editor's Draft em 20 de abril de 2020.

Sintaxe

Como você deve ter percebido no exemplo acima, insetsegue a mesma sintaxe de vários valores de paddinge margin. Isso significa que ele aceita até quatro valores (para offsets Declare para top, right, bottome left) e, como poucos como um valor (para declarar offset igual para todas as quatro propriedades). E, assim como paddinge margin, os valores fluem no sentido horário, começando com top.

.element ( inset: 1em 2em 3em 0; /* top right bottom left */ inset: 10% 5% -10%; /* top left/right bottom */ inset: 0 10px; /* top/bottom left/right */ inset: 20px; /* all edges = 20px */ )

Antes inset, teríamos que declarar cada insetsubpropriedade separadamente, assim:

.box ( position: absolute; top: 0; right: 0; bottom: 0; left: 0; )

Agora, podemos simplesmente fazer isso em uma única linha de CSS:

.box ( position: absolute; inset: 0; /* ? */ )

Valores

A insetpropriedade aceita valores numéricos como superior, direito, inferior e esquerdo. Esses valores podem ser de qualquer comprimento CSS válido, como px, em, reme %, entre outros.

Vamos falar sobre propriedades lógicas

Vamos apenas arranhar a superfície das propriedades lógicas aqui, já que o foco real está em insete em suas subpropriedades relacionadas. Mergulhe a fundo no tópico neste artigo da Smashing Magazine, de Rachel Andrew.

Há mais insetsub-propriedades do que top, right, bottome left, mas, a fim de entendê-los, vale a pena se familiarizar com propriedades e valores lógicos.

O conteúdo pode ser exibido em diferentes direções (ou seja, modos de escrita), incluindo da esquerda para a direita, da direita para a esquerda, de cima para baixo e de baixo para cima. Quando falamos sobre conceitos “lógicos”, estamos realmente nos referindo ao ponto de partida com base na direção da escrita do conteúdo.

Imagine que você está construindo um site que precisa ser compatível com os idiomas da esquerda para a direita (LTR), como inglês e espanhol, e os idiomas da direita para a esquerda (RTL), como persa ou árabe. Digamos que você queira adicionar uma margem entre um ícone e uma linha de texto ao lado dele.

Naturalmente, você pode alcançar a margin-rightpropriedade para suportar LTR e, em seguida, adicionar outro conjunto de regras que remova essa margem e a substitua por margin-leftpara RTL:

.icon ( margin-right: 1em; ) 
 /* or .icon:dir(rtl) */ (dir="rtl") .icon ( margin-right: 0; margin-left: 1em; )

Esta é uma pequena parte de uma página. Agora imagine construir um grande site desta forma - é muito trabalho! Mas as propriedades lógicas facilitam, levando em consideração o modo de escrita para nós. Por exemplo, podemos adicionar margem ao final do elemento, onde quer que seja:

.icon ( margin-inline-end: 1em; )

Isso é o que queremos dizer quando nos referimos a propriedades lógicas - elas são relativas ao modo de escrita ao invés de uma direção física. Vê como as propriedades lógicas são muito mais lógicas para trabalhar?

Propriedades lógicas inseridas

Portanto, sabendo o que você sabe agora sobre propriedades lógicas, aqui estão quatro subpropriedades adicionais de inserção:

Propriedade Lógica	Equivalente de fluxo horizontal	O que faz
inset-block-start	top	Especifica o deslocamento da borda inicial na direção perpendicular à direção de escrita.
inset-block-end	bottom	Especifica o deslocamento da borda final na direção perpendicular à direção de escrita.
inset-inline-start	left	Especifica o deslocamento para a borda inicial na direção da escrita, que mapeia para um deslocamento físico dependendo do modo de escrita do elemento, direção e orientação do texto.
inset-inline-end	right	Especifica o deslocamento da borda final na direção da escrita.

Podemos até agrupar essas quatro subpropriedades em duas propriedades abreviadas adicionais:

Propriedade Lógica	Abreviação de	O que faz
inset-inline	inset-inline-start inset-inline-end	Aceita um único valor para definir inset-inline-starte inset-inline-end. Também aceita dois valores, onde o primeiro especifica inset-inline-starte o segundo especifica inset-inline-end.
inset-block	inset-block-start inset-block-end	Aceita um único valor para definir inset-block-start e inset-block-end. Também aceita dois valores, onde o primeiro especifica inset-block-starte o segundo especifica inset-block-end.

Demo

Altere o modo de escrita e os valores das propriedades de inserção para ter uma ideia melhor de como funcionam:

Atenção: a insetpropriedade não é lógica

Embora insetseja parte da especificação de Propriedades e Valores Lógicos, ela não define bloco lógico ou deslocamentos em linha. Em vez disso, ele define deslocamentos físicos, independentemente do modo de escrita do elemento, direção e orientação do texto. Em outras palavras, inseté apenas uma abreviação para top, right, bottome left.

Há alguma discussão aqui no GitHub sobre o uso de algumas palavras-chave para poder usar essa propriedade de maneira lógica também.

Então, ainda usamos compensações físicas? Imagine que você queira um crachá ou logotipo fixado no canto superior esquerdo da página e, não importa o idioma, você quer que ele esteja lá. Nesse caso, você não pode usar deslocamentos lógicos e, em vez disso, precisará recorrer às propriedades físicas.

Suporte para navegador

O suporte para a insetpropriedade ainda está em seus estágios iniciais. No momento em que este livro foi escrito, caniuse estima o suporte global em apenas 3,79%.

Área de Trabalho

Internet Explorer	Beira	Raposa de fogo	cromada	Safári	Ópera
Não	Não	66+	Não	Não	Não

Móvel

iOS Safari	Opera Mini	Navegador Android	Chrome Android	Firefox Android
Não	Não	68	Não	Não

Mais Informações

• Propriedades lógicas e valores CSS nível 1 (especificação, rascunho do editor)
• Noções básicas sobre propriedades lógicas e valores (Smashing Magazine)
• Propriedades lógicas CSS (truques CSS)