inset-inline-endé uma propriedade CSS que define o comprimento em que um elemento é deslocado na direção inline inicial. É uma espécie de como declarar rightem que se aplica a elementos posicionados e offsets um elemento na direção esquerda, exceto a sua pontos inicial e final pode ser alterada com base no 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-end: 50px; position: relative; /* Apples to positioned elements */ writing-mode: vertical-rl; /* Determines the block start direction */ )Portanto, por exemplo, se o modo de escrita estiver definido para horizontal-lra inset-inline-endpropriedade, ela atuará como configuração left, deslocando um elemento da borda esquerda. 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 “inicial” é girada na direção vertical, agindo mais como o em topvez.
Sintaxe
inset-inline-end: ;- Valor inicial:
auto - Aplica-se a: elementos posicionados
- Herdado: não
- Porcentagens: quanto à propriedade física correspondente
- Valor calculado: igual à
leftpropriedade correspondente - Tipo de animação: por tipo de valor calculado
Valores
inset-blockassume um valor de comprimento e oferece suporte a palavras-chave globais. Seu valor padrão é auto.
/* Length values */ inset-inline-end: 50px; inset-inline-end: 4em; inset-inline-end: 3.5rem inset-inline-end: 25vh; /* Percentage values */ inset-inline-end: 50%; /* Keyword values */ inset-inline-end: auto; /* initial value */ /* Global values */ inset-inline-end: initial inset-inline-end: inherit; inset-inline-end: 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)