inset-block-endé uma propriedade CSS lógica que define o comprimento em que um elemento é deslocado na direção do bloco de sua borda final. É uma espécie de como declarar bottoma não ser seu ponto final é determinado 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-block-end: 50px; position: relative; /* Apples to positioned elements */ writing-mode: vertical-rl; /* Determines the block start direction */ )Assim, por exemplo, se o modo de escrita estiver definido para horizontal-lra inset-block-endpropriedade, irá agir exatamente como bottome definir o deslocamento do elemento da borda inferior. Você ainda precisa especificar um explícito positionno mesmo elemento para que ele tenha efeito, assim como bottome outras propriedades de deslocamento físico.
Mas mude o elemento writing-modepara algo semelhante vertical-lre a borda “inferior” é girada na direção vertical, agindo mais como a rightpropriedade.
Sintaxe
inset-block-end: ;- Valor inicial:
auto - Aplica-se a: elementos posicionados
- Herdado: não
- Porcentagens: quanto à propriedade física correspondente
- Valor calculado: igual à
bottompropriedade correspondente - Tipo de animação: por tipo de valor calculado
Valores
inset-block-endassume um valor de comprimento e oferece suporte a palavras-chave globais. Seu valor padrão é auto.
/* Length values */ inset-block-end: 50px; inset-block-end: 4em; inset-block-end: 3.5rem inset-block-end: 25vh; /* Percentage values */ inset-block-end: 50%; /* Keyword values */ inset-block-end: auto; /* initial value */ /* Global values */ inset-block-end: initial inset-block-end: inherit; inset-block-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)