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 ellos
proporcionada por margin-right en el ícono.
Sin embargo, sí 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 como leen los idiomas como el árabe), el ícono se ubicará contra el texto.
¿Cómo se explica esto en los CSS? Las propiedades lógicas te permiten resolver estas situaciones. Entre muchos otros beneficios, ofrecen compatibilidad 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 las partes superior, derecha, inferior e izquierda se refieren a las dimensiones físicas del viewport. Son como una rosa de los vientos en un mapa. Las propiedades lógicas, por otro lado, hacen referencia a los bordes de un cuadro en relación con el flujo de contenido. Por lo tanto, pueden cambiar si cambian la dirección del texto o el modo de escritura. Este es un gran cambio de los estilos direccionales, y nos da mucha más flexibilidad a la hora de definir el estilo de nuestras interfaces.
Bloquear el flujo
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 segundo párrafo es el flujo de bloques. En un documento en inglés, el flujo de bloques es de arriba a abajo. Piensa en esto en el contexto de párrafos de texto que se siguen, de arriba hacia abajo.
Flujo intercalado
El flujo intercalado es la manera en que fluye el texto en una oración.
En un documento en inglés, el flujo intercalado es de izquierda a derecha.
Si cambia el idioma del documento de su página web al árabe (<html lang="ar">),
entonces el flujo intercalado sería de derecha a izquierda.
El texto fluye en la dirección determinada por el modo de escritura del documento.
Puedes cambiar la dirección en la que se presenta el texto con la propiedad writing-mode.
Esto se puede aplicar a todo el documento o a elementos individuales.
Relativo de flujo
Históricamente, en los 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 del idioma y la dirección del texto,
El flujo de bloque tiene reglas de margen adecuadas.
Tamaño
Para evitar que un elemento supere un ancho o una altura determinados, escribe una regla como esta:
.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 alto máximos se vería de la siguiente manera:
.my-element {
max-inline-size: 150px;
max-block-size: 100px;
}
Inicio y finalización
En lugar de usar las direcciones, como arriba, a la derecha, abajo e izquierda, usar inicio y fin. Esto te da inicio en bloque, inicio en línea, final en bloque e inicio en línea. Estas te permiten aplicar propiedades de CSS que responden a los cambios en el 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 el derecho físico,
sino al 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 se ve de la siguiente manera:
p {
text-align: end;
}
Espaciado y posicionamiento
Propiedades lógicas para margin, padding y inset
hacen que el posicionamiento de elementos y la determinación de cómo interactúan entre sí en modos de escritura sean más fáciles y eficientes.
Las propiedades relacionadas con el margen y el padding siguen siendo asignaciones directas a las direcciones,
pero la diferencia clave es que cuando un modo de escritura cambia, también lo hace.
.my-element {
padding-top: 2em;
padding-bottom: 2em;
margin-left: 2em;
position: relative;
top: 0.2em;
}
Esto agrega un poco de espacio interior vertical con padding y lo despliega desde la izquierda con margin.
La propiedad top también la desplaza hacia abajo.
Con sus 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;
}
Esto agrega un poco de espacio interno intercalado con padding y lo envía desde el inicio intercalado con margin.
La propiedad inset-block la mueve desde el inicio del bloque.
La propiedad inset-block no es la única opción de atajo con propiedades lógicas.
Esta regla puede condensarse aún más,
con versiones abreviadas de las propiedades margin y padding.
.my-element {
padding-block: 2em;
margin-inline: 2em 0;
position: relative;
inset-block: 0.2em 0;
}
Bordes
También se pueden agregar border y border-radius con propiedades lógicas.
Para agregar un borde en la parte inferior y derecha, con un radio de la derecha, podrías escribir una regla como la siguiente:
.my-element {
border-bottom: 1px solid red;
border-right: 1px solid red;
border-bottom-right-radius: 1em;
}
También puedes usar propiedades lógicas como la siguiente:
.my-element {
border-block-end: 1px solid red;
border-inline-end: 1px solid red;
border-end-end-radius: 1em;
}
El end-end en border-end-end-radius es el extremo del bloque y el extremo intercalado.
Unidades
Las propiedades lógicas traen dos unidades nuevas: vi y vb.
Una unidad vi es el 1% del tamaño del viewport en la dirección intercalada.
El equivalente de propiedad no lógica es vw.
La unidad vb es el 1% del viewport en la dirección del bloque.
El equivalente de propiedad no lógica es vh.
Estas unidades siempre se asignarán a la dirección de lectura.
Por ejemplo, si deseas que un elemento ocupe el 80% del espacio intercalado disponible de un viewport,
Si usas la unidad vi, se cambiará automáticamente ese tamaño para que sea de arriba a abajo si el modo de escritura es vertical.
Cómo usar propiedades lógicas de manera pragmática
Las propiedades lógicas y los modos de escritura no son solo para la internacionalización. Puedes usarlas 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 quieras que el texto de la etiqueta Y se lea verticalmente.
Como la etiqueta del eje Y en la demostración tiene un writing-mode de vertical-rl,
puedes usar los mismos valores de margin en ambas etiquetas.
El valor margin-block-start se aplica a ambas etiquetas.
porque el inicio del bloque está a la derecha para el eje Y y en la parte superior para el eje X.
Los lados de inicio del bloque tienen un borde rojo para que puedas verlos.
Cómo resolver el problema del ícono
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 icono y el texto admita todas las direcciones de lectura,
en su lugar, se debe usar la propiedad margin-inline-end.
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 icono se posicionará y se espacará adecuadamente.
Verifica tus conocimientos
Pon a prueba tus conocimientos sobre propiedades lógicas
A medida que escribes con la mano, ¿la muñeca se mueve a lo largo de qué eje lógico?
inlineblockMarca todas las opciones que pueden beneficiarse de 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?