La insetpropiedad de CSS es una forma rápida para las cuatro propiedades inserción, top, right, bottomy leften una declaración. Al igual que las cuatro propiedades individuales en sí mismas, insetno tiene ningún efecto sobre los elementos no posicionados (estáticos). En otras palabras, un elemento debe declarar un positionvalor explícito antes de que las propiedades insertadas entren en vigor.
.box ( inset: 10px 20px 30px 40px; position: relative; )inset se define inicialmente en la especificación CSS Logical Properties and Values Level 1, que se encuentra en el Borrador del Editor al 20 de abril de 2020.
Sintaxis
Como puede haber deducido del ejemplo anterior, insetsigue la misma sintaxis de valores múltiples de paddingy margin. Eso significa que acepta hasta cuatro valores (a compensaciones de declarar para top, right, bottomy left) y tan sólo un valor (para declarar un igual desplazamiento para todas las cuatro propiedades). Y, como paddingy margin, los valores fluyen en el sentido de las agujas del reloj, comenzando por top.
.element ( inset: 1em 2em 3em 0; /* top right bottom left */ inset: 10% 5% -10%; /* top left/right bottom */ inset: 0 10px; /* top/bottom left/right */ inset: 20px; /* all edges = 20px */ )Antes inset, tendríamos que declarar cada insetsubpropiedad por separado, así:
.box ( position: absolute; top: 0; right: 0; bottom: 0; left: 0; )Ahora, podemos simplemente eso en una sola línea de CSS:
.box ( position: absolute; inset: 0; /* ? */ )Valores
La insetpropiedad acepta valores numéricos como top, right, bottom e left. Esos valores pueden ser de cualquier longitud CSS válido, como px, em, remy %, entre otros.
Hablemos de propiedades lógicas
Aquí solo vamos a arañar la superficie de las propiedades lógicas, ya que el enfoque real está en insetsus subpropiedades relacionadas. Obtenga una inmersión profunda sobre el tema en este artículo de Smashing Magazine de Rachel Andrew.
Hay más insetsub-propiedades que top, right, bottomy leftsin embargo, con el fin de comprenderlos, vale la pena que consigue conocida de las propiedades y valores lógicos.
El contenido se puede mostrar en diferentes direcciones (es decir, modos de escritura), incluidas de izquierda a derecha, de derecha a izquierda, de arriba a abajo y de abajo a arriba. Cuando hablamos de conceptos "lógicos", en realidad nos referimos al punto de partida en función de la dirección de escritura del contenido.
Imagine que está creando un sitio web que debe admitir idiomas de izquierda a derecha (LTR), como inglés y español, y idiomas de derecha a izquierda (RTL), como persa o árabe. Digamos que desea agregar un margen entre un icono y una línea de texto junto a él.
Naturalmente, puede buscar que la margin-rightpropiedad admita LTR y luego agregar otro conjunto de reglas que elimine ese margen y lo reemplace margin-leftpor RTL:
.icon ( margin-right: 1em; )
/* or .icon:dir(rtl) */ (dir="rtl") .icon ( margin-right: 0; margin-left: 1em; )Esta es una pequeña parte de una página. Ahora imagina construir un gran sitio web de esta manera, ¡eso es mucho trabajo! Pero las propiedades lógicas lo hacen muy fácil al tener en cuenta el modo de escritura. Por ejemplo, podemos agregar margen al final del elemento, donde sea que esté:
.icon ( margin-inline-end: 1em; )
Esto es lo que queremos decir cuando nos referimos a las propiedades lógicas : son relativas al modo de escritura en lugar de una dirección física. ¿Ves cómo es mucho más lógico trabajar con las propiedades lógicas?
Insertar propiedades lógicas
Entonces, sabiendo lo que ahora sabe acerca de las propiedades lógicas, aquí hay cuatro subpropiedades adicionales insertadas:
| Propiedad lógica | Equivalente de flujo horizontal | Que hace |
|---|---|---|
inset-block-start | top | Especifica el desplazamiento para el borde inicial en la dirección que es perpendicular a la dirección de escritura. |
inset-block-end | bottom | Especifica el desplazamiento para el borde final en la dirección que es perpendicular a la dirección de escritura. |
inset-inline-start | left | Especifica el desplazamiento para el borde inicial en la dirección de escritura, que se asigna a un desplazamiento físico según el modo de escritura, la dirección y la orientación del texto del elemento. |
inset-inline-end | right | Especifica el desplazamiento del borde final en la dirección de escritura. |
Incluso podemos agrupar esas cuatro subpropiedades en dos propiedades taquigráficas adicionales:
| Propiedad lógica | Taquigrafía para | Que hace |
|---|---|---|
inset-inline | inset-inline-startinset-inline-end | Acepta un solo valor para establecer ambos inset-inline-starty inset-inline-end.También acepta dos valores, donde el primero especifica inset-inline-starty el segundo especifica inset-inline-end. |
inset-block | inset-block-startinset-block-end | Acepta un solo valor para establecer tanto inset-block-start como inset-block-end.También acepta dos valores, donde el primero especifica inset-block-starty el segundo especifica inset-block-end. |
Manifestación
Cambie el modo de escritura y los valores de las propiedades insertadas para tener una mejor idea de cómo funcionan:
Aviso: la insetpropiedad no es lógica
Aunque insetes parte de la especificación de propiedades y valores lógicos, no define bloques lógicos ni desplazamientos en línea. En cambio, define las compensaciones físicas, independientemente del modo de escritura, la dirección y la orientación del texto del elemento. En otras palabras, insetes sólo la abreviatura de top, right, bottomy left.
Hay algo de discusión aquí en GitHub con respecto al uso de algunas palabras clave para poder usar esta propiedad de una manera lógica también.
Entonces, ¿seguimos usando compensaciones físicas? Imagina que quieres una insignia o un logo en la esquina superior e izquierda de tu página y, sin importar el idioma, quieres que esté allí. En ese caso, no puede utilizar compensaciones lógicas y deberá recurrir a propiedades físicas.
Soporte del navegador
El apoyo a la insetpropiedad aún se encuentra en sus primeras etapas. Al momento de escribir este artículo, caniuse estima que el soporte global es de apenas un 3,79%.
Escritorio
| explorador de Internet | Borde | Firefox | Cromo | Safari | Ópera |
|---|---|---|---|---|---|
| No | No | 66+ | No | No | No |
Móvil
| Safari de iOS | mini Opera | Navegador de Android | Chrome Android | Firefox Android |
|---|---|---|---|---|
| No | No | 68 | No | No |
Más información
- Valores y propiedades lógicas de CSS Nivel 1 (especificación, borrador del editor)
- Comprensión de valores y propiedades lógicas (Revista Smashing)
- Propiedades lógicas CSS (trucos CSS)