inset-inlinees una propiedad CSS lógica abreviada que establece la longitud de desplazamiento de un elemento en la dirección en línea combinando inset-inline-starty inset-inline-end. Es una especie de como declarar righty leftexcepto su puntos inicial y final se determinan 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-inline: 50px 15%; position: relative; /* Applies to positioned elements */ writing-mode: vertical-rl; /* Determines the block start direction */ )Así, por ejemplo, si el modo de escritura se ajusta a horizontal-lrla inset-inlinepropiedad actuará como entorno topy bottomy fijar el elemento de desplazamiento desde el borde inferior. Incluso necesita especificar un explícito positionen el mismo elemento para que surta efecto, al igual que las propiedades de desplazamiento físico.
Pero cambie el elemento writing-modea algo así vertical-lry el borde "inferior" se gira en la dirección vertical, actuando más como las propiedades lefty right.
Sintaxis
inset-inline: ;- Valor inicial:
auto - Se aplica a: elementos posicionados
- Heredado: no
- Porcentajes: en cuanto a la propiedad física correspondiente
- Valor calculado: igual que las propiedades correspondientes
topyleft - Tipo de animación: por tipo de valor calculado
Valores
inset-inlinetoma un valor de longitud y admite palabras clave globales. Su valor predeterminado es auto.
/* Length values */ inset-inline: 50px; inset-inline: 4em; inset-inline: 3.5rem inset-inline: 25vh; /* Percentage values */ inset-inline: 50%; /* Keyword values */ inset-inline: auto; /* initial value */ /* Global values */ inset-inline: initial inset-inline: inherit; inset-inline: 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)