inset-inline-startes una propiedad de CSS que establece la longitud de desplazamiento de un elemento en la dirección en línea inicial. Es una especie de como declarar leften la que se aplica a los elementos y las compensaciones de un elemento posicionado en la dirección izquierda, a excepción de su puntos inicial y final pueden cambiar basado en 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-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-inline-startpropiedad, la propiedad actuará como configuración left, desplazando un elemento del borde izquierdo. 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 "inicial" se gira en la dirección vertical, actuando más como el top.
Sintaxis
inset-inline-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
leftpropiedad correspondiente - Tipo de animación: por tipo de valor calculado
Valores
inset-blocktoma un valor de longitud y admite palabras clave globales. Su valor predeterminado es auto.
/* Length values */ inset-inline-start: 50px; inset-inline-start: 4em; inset-inline-start: 3.5rem inset-inline-start: 25vh; /* Percentage values */ inset-inline-start: 50%; /* Keyword values */ inset-inline-start: auto; /* initial value */ /* Global values */ inset-inline-start: initial inset-inline-start: inherit; inset-inline-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)