inset-inlineé uma propriedade CSS lógica abreviada que define o comprimento que um elemento é deslocado na direção inline combinando inset-inline-starte inset-inline-end. É uma espécie de como declarar righte leftexceto a sua pontos inicial e final são determinados pelo elemento de direction, text-orientatione writing-mode, assim como outras propriedades lógicas.
A propriedade faz parte da especificação CSS Logical Properties and Values Level 1 que está atualmente no status Draft do editor. Isso significa que a definição e as informações sobre ele podem mudar entre agora e a recomendação oficial.
.element ( inset-inline: 50px 15%; position: relative; /* Applies to positioned elements */ writing-mode: vertical-rl; /* Determines the block start direction */ )Assim, por exemplo, se o modo de escrita está definido para horizontal-lra inset-inlinepropriedade irá agir apenas como cenário tope bottome definir o deslocamento a partir da borda inferior elemento de. Você ainda precisa especificar um explícito positionno mesmo elemento para que ele tenha efeito, assim como as propriedades físicas de deslocamento.
Mas mude o elemento writing-modepara algo semelhante vertical-lre a borda “inferior” é girada na direção vertical, agindo mais como as propriedades lefte right.
Sintaxe
inset-inline: ;- Valor inicial:
auto - Aplica-se a: elementos posicionados
- Herdado: não
- Porcentagens: quanto à propriedade física correspondente
- Valor calculado: o mesmo que as propriedades
tope correspondentesleft - Tipo de animação: por tipo de valor calculado
Valores
inset-inlineassume um valor de comprimento e oferece suporte a palavras-chave globais. Seu valor padrão é auto.
/* Length values */ inset-inline: 50px; inset-inline: 4em; inset-inline: 3.5rem inset-inline: 25vh; /* Percentage values */ inset-inline: 50%; /* Keyword values */ inset-inline: auto; /* initial value */ /* Global values */ inset-inline: initial inset-inline: inherit; inset-inline: unset;Suporte de navegador
| IE | Beira | Raposa de fogo | cromada | Safári | Ópera |
|---|---|---|---|---|---|
| Não | Não | 63+ | Não | Não | Não |
| Android Chrome | Android Firefox | Navegador Android | iOS Safari | Opera Mini |
|---|---|---|---|---|
| Não | 79+ | Não | Não | Não |
Demo
Leitura adicional
- Especificação de propriedades lógicas e valores CSS nível 1 (rascunho do editor)
- Documentação MDN
- Noções básicas sobre propriedades lógicas e valores (Smashing Magazine)
- Propriedades lógicas CSS (Adrian Roselli)
- Regras horizontais bidirecionais em CSS (Hussein Al Hammad)