inset-block-starté uma propriedade CSS lógica que define o comprimento em que um elemento é deslocado na direção do bloco a partir de sua borda inicial. É uma espécie de como declarar topa não ser seu ponto de partida é 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-start: 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-block-startpropriedade, ela agirá exatamente como tope definirá o deslocamento do elemento a partir de sua borda inicial, que é o topo. Você ainda precisa especificar um explícito positionno mesmo elemento para que ele tenha efeito, assim como tope outras propriedades de deslocamento físico.
Mas mude o elemento writing-modepara algo semelhante vertical-rle a aresta inicial é girada na direção vertical, agindo mais como a leftpropriedade.
Sintaxe
inset-block-start: ;- Valor inicial:
auto - Aplica-se a: elementos posicionados
- Herdado: não
- Porcentagens: quanto à propriedade física correspondente
- Valor calculado: igual à
toppropriedade correspondente - Tipo de animação: por tipo de valor calculado
Valores
inset-block-startassume um valor de comprimento e oferece suporte a palavras-chave globais. Seu valor padrão é auto.
/* Length values */ inset-block-start: 50px; inset-block-start: 4em; inset-block-start: 3.5rem inset-block-start: 25vh; /* Percentage values */ inset-block-start: 50%; /* Keyword values */ inset-block-start: auto; /* initial value */ /* Global values */ inset-block-start: initial inset-block-start: inherit; inset-block-start: 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)