El podcast de CSS 012: Propiedades lógicas
Un patrón de interfaz de usuario muy común es una etiqueta de texto con un ícono intercalado complementario.
El ícono se ubica a la izquierda del texto con un pequeño espacio entre los dos, que proporciona margin-right en el ícono.
Sin embargo, hay un problema, ya que esto solo funcionará cuando la dirección del texto sea de izquierda a derecha.
Si la dirección del texto cambia de derecha a izquierda (que es la forma en que leen idiomas como el árabe), el ícono se posicionará contra el texto.
¿Cómo se tiene en cuenta esto en CSS? Las propiedades lógicas te permiten resolver estas situaciones. Entre muchos otros beneficios, ofrecen asistencia automática y gratuita para la internacionalización. Ayudan a crear un frontend más inclusivo y resiliente.
Terminología
Las propiedades físicas de los elementos superior, derecho, inferior e izquierdo hacen referencia a las dimensiones físicas del viewport. Son como una rosa de los vientos en un mapa. Las propiedades lógicas, por otro lado, se refieren a los bordes de un cuadro, ya que se relacionan con el flujo de contenido. Por lo tanto, pueden cambiar si se modifica la dirección del texto o el modo de escritura. Este es un gran cambio con respecto a los estilos direccionales y nos brinda mucha más flexibilidad a la hora de aplicar diseño a nuestras interfaces.
Flujo de bloqueo
El flujo de bloques es la dirección en la que se colocan los bloques de contenido. Por ejemplo, si hay dos párrafos, el flujo de bloque irá desde arriba hacia abajo en el segundo párrafo. Piensa en esto en el contexto de párrafos de texto uno después del otro, de arriba hacia abajo.
Flujo intercalado
El flujo intercalado es la forma en que fluye el texto en una oración.
En un documento en inglés, el flujo intercalado es de izquierda a derecha.
Si cambiaras el idioma del documento de tu página web al árabe (<html lang="ar">), el flujo intercalado sería de derecha a izquierda.
El texto fluye en la dirección que determina el modo de escritura del documento.
Puedes cambiar la dirección en la que se muestra el texto con la propiedad writing-mode.
Se puede aplicar a todo el documento o a elementos individuales.
Relativo de flujo
Históricamente, en CSS, solo pudimos aplicar propiedades como el margen en relación con la dirección de sus lados.
Por ejemplo, margin-top se aplica a la parte superior física del elemento.
Con las propiedades lógicas, margin-top se convierte en margin-block-start.
Esto significa que, independientemente de la dirección del idioma y del texto, el flujo de bloque tiene reglas de margen adecuadas.
Tamaño
Para evitar que un elemento exceda un ancho o una altura determinados, escribe una regla como la siguiente:
.my-element {
max-width: 150px;
max-height: 100px;
}
Los equivalentes relativos de flujo son max-inline-size y max-block-size.
También puedes usar min-block-size y min-inline-size en lugar de min-height y min-width.
Con propiedades lógicas, esa regla de ancho y altura máximos se vería de la siguiente manera:
.my-element {
max-inline-size: 150px;
max-block-size: 100px;
}
Inicio y fin
En lugar de usar instrucciones como las de arriba, derecha, inferior e izquierda, usa las instrucciones de inicio y fin. Esto te proporciona un inicio de bloque, un final intercalado, un final de bloque y un inicio intercalado. Estas te permiten aplicar propiedades de CSS que responden a los cambios del modo de escritura.
Por ejemplo, para alinear el texto a la derecha, puedes usar este CSS:
p {
text-align: right;
}
Si tu objetivo no es alinearte con la derecha física, sino hacia el inicio de la dirección de lectura, esto no es útil.
Con los valores lógicos, hay valores start y end más útiles que se asignan a la dirección del texto.
La regla de alineación de texto ahora tiene el siguiente aspecto:
p {
text-align: end;
}
Espaciado y posicionamiento
Las propiedades lógicas para margin, padding y inset facilitan y optimizan los elementos de posicionamiento y determinan cómo interactúan entre sí en los modos de escritura.
Las propiedades relacionadas con el margen y el padding siguen siendo asignaciones directas a direcciones, pero la diferencia clave es que cuando cambia un modo de escritura, cambian con él.
.my-element {
padding-top: 2em;
padding-bottom: 2em;
margin-left: 2em;
position: relative;
top: 0.2em;
}
De esta manera, se agrega espacio interior vertical con padding y se lo desplaza desde la izquierda con margin.
La propiedad top también la desplaza hacia abajo.
Con equivalentes de propiedades lógicas, se vería de la siguiente manera:
.my-element {
padding-block-start: 2em;
padding-block-end: 2em;
margin-inline-start: 2em;
position: relative;
inset-block-start: 0.2em;
}
De esta manera, se agrega un poco de espacio interno intercalado con padding y se lo envía desde el inicio intercalado con margin.
La propiedad inset-block lo mueve hacia adentro desde el inicio del bloque.
La propiedad inset-block no es la única opción abreviada con propiedades lógicas.
Esta regla se puede condensar aún más con versiones abreviadas de las propiedades de margen y padding.
.my-element {
padding-block: 2em;
margin-inline: 2em 0;
position: relative;
inset-block: 0.2em 0;
}
Bordes
También puedes agregar border y border-radius con propiedades lógicas.
Para agregar un borde en la parte inferior y derecha, con un radio hacia la derecha, puedes escribir una regla como esta:
.my-element {
border-bottom: 1px solid red;
border-right: 1px solid red;
border-bottom-right-radius: 1em;
}
O bien, puedes usar propiedades lógicas como las siguientes:
.my-element {
border-block-end: 1px solid red;
border-inline-end: 1px solid red;
border-end-end-radius: 1em;
}
El elemento end-end en border-end-end-radius es el final del bloque y el final intercalado.
Unidades
Las propiedades lógicas aportan dos unidades nuevas: vi y vb.
Una unidad vi es el 1% del tamaño del viewport en la dirección intercalada.
El equivalente no lógico de la propiedad es vw.
La unidad vb es el 1% del viewport en la dirección del bloque.
El equivalente no lógico de la propiedad es vh.
Estas unidades siempre se asignarán a la dirección de lectura.
Por ejemplo, si quieres que un elemento ocupe el 80% del espacio intercalado disponible de un viewport, cuando usas la unidad vi, ese tamaño se cambiará automáticamente de arriba abajo si el modo de escritura es vertical.
Usa propiedades lógicas de manera pragmática
Las propiedades lógicas y los modos de escritura no son solo para la internacionalización. Puedes utilizarlas para producir una interfaz de usuario más versátil.
Si tienes un gráfico con etiquetas en el eje X y en el eje Y, es posible que desees que el texto de la etiqueta Y se lea verticalmente.
Debido a que la etiqueta del eje Y en la demostración tiene un writing-mode de vertical-rl, puedes usar los mismos valores margin en ambas etiquetas.
El valor margin-block-start se aplica a ambas etiquetas porque el inicio del bloque está a la derecha del eje Y y en la parte superior del eje X.
Los lados de inicio de bloque tienen un borde rojo para que puedas verlos.
Cómo resolver el problema con los íconos
Ahora que hemos cubierto las propiedades lógicas, este conocimiento se puede aplicar al problema de diseño con el que empezamos.
p {
display: inline-flex;
align-items: center;
}
p svg {
width: 1.2em;
height: 1.2em;
margin-right: 0.5em;
flex: none;
}
Se aplicó el margen a la derecha del elemento del ícono.
Para que el espaciado entre el ícono y el texto sea compatible con todas las direcciones de lectura, se debe usar la propiedad margin-inline-end en su lugar.
p {
display: inline-flex;
align-items: center;
}
p svg {
width: 1.2em;
height: 1.2em;
margin-inline-end: 0.5em;
flex: none;
}
Ahora, independientemente de la dirección de lectura, el ícono se posicionará y se ubicará de forma adecuada.
Verifica tus conocimientos
Pon a prueba tus conocimientos sobre propiedades lógicas
Cuando escribes con la mano, ¿qué eje lógico se mueve la muñeca?
inlineblockMarca todos los beneficios que pueden aprovechar las propiedades lógicas.
flex-start, block-end y inline-startblock-start y inline.inline-size y max-block-size.border-end-end-radius.¿Qué lado lógico de una palabra está subrayado?