inset-block-endes una propiedad lógica de CSS que establece la longitud a la que un elemento se desplaza en la dirección del bloque desde su borde final. Es una especie de como declarar bottomexcepto su punto final se determina 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-end: 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-endpropiedad, la propiedad actuará como bottomy establecerá el desplazamiento del elemento desde el borde inferior. Incluso necesita especificar un explícito positionen el mismo elemento para que surta efecto, al igual que bottomotras propiedades físicas de compensación.
Pero cambie el elemento writing-modea algo así vertical-lry el borde "inferior" se rota en la dirección vertical, actuando más como la rightpropiedad.
Sintaxis
inset-block-end: ;- Valor inicial:
auto - Se aplica a: elementos posicionados
- Heredado: no
- Porcentajes: en cuanto a la propiedad física correspondiente
- Valor calculado: igual que la
bottompropiedad correspondiente - Tipo de animación: por tipo de valor calculado
Valores
inset-block-endtoma un valor de longitud y admite palabras clave globales. Su valor predeterminado es 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;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)