inset-block-startes una propiedad lógica de CSS que establece la longitud de desplazamiento de un elemento en la dirección del bloque desde su borde inicial. Es una especie de como declarar topexcepto Su punto de partida está determinado por el elemento de direction, text-orientationy writing-mode, al igual que otras propiedades lógicas.
La propiedad forma parte de la especificación de nivel 1 de valores y propiedades lógicas de CSS, que actualmente se encuentra en estado Borrador del editor. Eso significa que la definición y la información al respecto pueden cambiar entre ahora y la recomendación oficial.
.element ( inset-block-start: 50px; position: relative; /* Apples to positioned elements */ writing-mode: vertical-rl; /* Determines the block start direction */ )Entonces, por ejemplo, si el modo de escritura está configurado en horizontal-lrla inset-block-startpropiedad, actuará como topy establecerá el desplazamiento del elemento desde su borde inicial, que es la parte superior. Incluso necesita especificar un explícito positionen el mismo elemento para que surta efecto, al igual que topotras propiedades físicas de compensación.
Pero cambia el elemento writing-modea algo así vertical-rly el borde inicial se gira en la dirección vertical, actuando más como la leftpropiedad.
Sintaxis
inset-block-start: ;- Valor inicial:
auto - Se aplica a: elementos posicionados
- Heredado: no
- Porcentajes: en cuanto a la propiedad física correspondiente
- Valor calculado: igual que la
toppropiedad correspondiente - Tipo de animación: por tipo de valor calculado
Valores
inset-block-starttoma un valor de longitud y admite palabras clave globales. Su valor predeterminado es 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;Soporte de navegador
| ES DECIR | Borde | Firefox | Cromo | Safari | Ópera |
|---|---|---|---|---|---|
| No | No | 63+ | No | No | No |
| Android Chrome | Android Firefox | Navegador de Android | Safari de iOS | mini Opera |
|---|---|---|---|---|
| No | 79+ | No | No | No |
Manifestación
Otras lecturas
- Especificación de nivel 1 de valores y propiedades lógicas de CSS (borrador del editor)
- Documentación MDN
- Comprensión de valores y propiedades lógicas (Revista Smashing)
- Propiedades lógicas CSS (Adrian Roselli)
- Reglas horizontales bidireccionales en CSS (Hussein Al Hammad)