Nuevos atajos de propiedades lógicas y nuevas propiedades de intercalación para Chromium.
Desde Chromium 69 (3 de septiembre de 2018), los valores y las propiedades lógicas ayudaron a los desarrolladores a mantener el control de sus diseños internacionales a través de estilos de dirección y dimensión lógicos, en lugar de físicos. En Chromium 87, se incluyeron abreviaturas y desplazamientos para facilitar la escritura de estas propiedades y valores lógicos. Esto pone a Chromium al día con Firefox, que admite los atajos desde la versión 66. Safari ya los tiene listos en su versión preliminar de tecnología.
Flujo de documentos
Si ya conoces las propiedades lógicas, los ejes intercalados y de bloque, y no quieres hacer un repaso, puedes saltarte esta parte. De lo contrario, aquí tienes un breve repaso.
En inglés, las letras y las palabras fluyen de izquierda a derecha, mientras que los párrafos se apilan de arriba abajo. En chino tradicional, las letras y las palabras se escriben de arriba abajo, mientras que los párrafos se apilan de derecha a izquierda. Solo en estos 2 casos, si escribimos CSS que coloca "margin top" en un párrafo, solo aplicamos el espaciado adecuado a 1 estilo de idioma. Si la página se traduce del inglés al chino tradicional, es posible que el margen no tenga sentido en el nuevo modo de escritura vertical.
Por lo tanto, el lado físico de la caja no es muy útil a nivel internacional. Así comienza el proceso de compatibilidad con varios idiomas y el aprendizaje sobre los lados físicos y lógicos del modelo de cuadro.
¿Alguna vez inspeccionaste el elemento p en Chrome DevTools? Si es así, tal vez hayas notado que los estilos de usuario-agente predeterminados no son físicos, sino lógicos.
p {
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
CSS de la hoja de estilo del usuario-agente de Chromium
El margen no está en la parte superior o inferior, como creería un lector inglés.
Son block-start y block-end. Estas propiedades lógicas son similares a la parte superior e inferior de un lector en inglés, pero también son similares a la parte derecha e izquierda de un lector en japonés. Escrita una vez, funciona en todas partes.
El flujo normal se produce cuando la página web forma parte de esta multidireccionalidad de forma intencional. Cuando el contenido de la página se actualiza en función de los cambios de dirección del documento, el diseño y sus elementos se consideran en flujo. Obtén más información sobre el flujo “dentro” y “fuera” en MDN o en la especificación del módulo de visualización de CSS. Si bien las propiedades lógicas no son obligatorias para estar en flujo, hacen gran parte del trabajo pesado por ti a medida que cambia la direccionalidad. El flujo implica dirección, por la que las letras, las palabras y el contenido deben recorrer. Esto nos lleva a bloquear y a intercalar instrucciones lógicas.
La dirección del bloque es la dirección que siguen los bloques de contenido nuevos, como preguntarte "¿dónde colocar el siguiente párrafo?". Puedes considerarla como un “bloque de contenido” o un “bloque de texto”.
Cada lenguaje organiza sus bloques y los ordena junto con sus respectivos block-axis. block-start es el lado en el que se coloca un párrafo por primera vez, mientras que block-end es el lado hacia el que fluyen los párrafos nuevos.
En la escritura a mano tradicional japonesa, por ejemplo, la dirección de los bloques fluye de derecha a izquierda:
La dirección intercalada es la dirección que van las letras y las palabras. Considera la dirección que recorren tu brazo y tu mano cuando escribes, ya que se mueven a lo largo de inline-axis.
inline-start es el lado en el que comienzas a escribir, mientras que inline-end es el lado en el que termina o une la escritura. En el video de arriba, la inline-axis es de arriba abajo, pero en el siguiente video, la inline-axis fluye de derecha a izquierda.
Ser flow-relative significa que los estilos escritos para un idioma serán contextuales y se aplicarán de forma adecuada a otros idiomas. El contenido se mostrará según el idioma para el que se publique.
Nuevas abreviaturas
Algunos de los siguientes atajos no son funciones nuevas para el navegador, sino formas más fáciles de escribir estilos aprovechando la capacidad de establecer valores en los bordes intercalados o de bloque a la vez. Las propiedades lógicas inset-* aportan nuevas capacidades, ya que antes no había formas de escribir a mano para especificar posiciones absolutas con propiedades lógicas. Sin embargo, los rellenos y los atajos fluyen (jeje) tan bien juntos que te contaré sobre todas las nuevas funciones de propiedades lógicas que se lanzarán en Chromium 87 a la vez.
Siglas de margen
No se enviaron nuevas funciones, pero sí algunos atajos muy útiles:
margin-block y
margin-inline.
margin-block-start: 2ch; margin-block-end: 2ch;
margin-block: 2ch; /* or */ margin-block: 2ch 2ch;
No hay abreviaturas para "arriba y abajo" o "izquierda y derecha"… hasta ahora.
Es probable que hagas referencia a los 4 lados con la abreviatura de margin: 10px; y ahora puedes hacer referencia fácilmente a 2 lados complementarios con la abreviatura de propiedad lógica.
margin-inline-start: 4ch; margin-inline-end: 2ch;
margin-inline: 4ch 2ch;
Abreviaturas de relleno
No se enviaron funciones nuevas, pero sí se implementaron otras más útiles:
padding-block y
padding-inline.
padding-block-start: 2ch; padding-block-end: 2ch;
padding-block: 2ch; /* or */ padding-block: 2ch 2ch;
Y el conjunto complementario de abreviaturas de inline:
padding-inline-start: 4ch; padding-inline-end: 2ch;
padding-inline: 4ch 2ch;
Inserciones y abreviaturas
Las propiedades físicas top, right, bottom y left se pueden escribir
como valores para la propiedad inset. Cualquier valor de position puede beneficiarse de la configuración de los lados con inserciones.
.cover {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
inset: 0;
}
position: absolute; top: 1px; right: 2px; bottom: 3px; left: 4px;
position: absolute; inset: 1px 2px 3px 4px;
Eso debería ser conveniente de inmediato. El margen es una abreviatura de los lados físicos y funciona igual que el margen y el padding.
Nuevas funciones
Si bien el atajo de los lados físicos es emocionante, hay aún más de las funciones lógicas que brindan los atajos inset adicionales. Estas abreviaturas aportan conveniencia para la creación de desarrolladores (son más breves de escribir), pero también aumentan el alcance potencial del diseño porque son relativas del flujo.
position: absolute; top: 10px; bottom: 10px;
position: absolute; inset-block: 10px;
position: absolute; left: 10px; right: 20px;
position: absolute; inset-inline: 10px 20px;
En MDN, puedes encontrar más información y una lista completa de abreviaturas y formas largas de inserciones.
Abreviaturas de bordes
El borde, además de sus propiedades color, style y width anidadas, también tienen nuevos atajos lógicos.
border-top-color: hotpink; border-bottom-color: hotpink;
border-block-color: hotpink; /* or */ border-block-color: hotpink hotpink;
border-left-style: dashed; border-right-style: dashed;
border-inline-style: dashed; /* or */ border-inline-style: dashed dashed;
border-left-width: 1px; border-right-width: 1px;
border-inline-width: 1px; /* or */ border-inline-width: 1px 1px;
En MDN, puedes encontrar más información y una lista completa de abreviaturas y formas largas de bordes.
Ejemplo de la propiedad lógica <figure>
Veamos cómo se unen todos estos elementos en un pequeño ejemplo. Las propiedades lógicas pueden diseñar una imagen con una leyenda para controlar diferentes direcciones de escritura y documentos.
O bien pruébala.
No tienes que hacer mucho para que una tarjeta sea responsiva a nivel internacional con un <figure> y algunas propiedades lógicas. Si te interesa saber cómo funciona todo este CSS considerado a nivel internacional, espero que esta sea una pequeña introducción significativa.
Compatibilidad con varios navegadores y reemplazo de elementos
Las herramientas Cascade o de compilación son opciones viables para tener navegadores antiguos y nuevos por igual, espaciados adecuadamente con propiedades lógicas actualizadas. Para los resguardos en cascada, sigue una propiedad física con una lógica, y el navegador usará la "última" propiedad que encontró durante la resolución de diseño.
p {
/* for unsupporting browsers */
margin-top: 1ch;
margin-bottom: 2ch;
/* for supporting browsers to use */
/* and unsupporting browsers to ignore and go 🤷♂️ */
margin-block: 1ch 2ch;
}
Sin embargo, esa no es una solución completa para todos. Este es un resguardo escrito a mano que aprovecha el seudoselector :lang() para orientarse a idiomas específicos, ajusta su espaciado físico de manera adecuada y, luego, al final ofrece el espaciado lógico para navegadores compatibles:
/* physical side styles */
p {
margin-top: 1ch;
margin-bottom: 2ch;
}
/* adjusted physical side styles per language */
:lang(ja) {
p {
/* zero out styles not useful for traditional Japanese */
margin-top: 0;
margin-bottom: 0;
/* add appropriate styles for traditional Japanese */
margin-right: 1ch;
margin-left: 2ch;
}
}
/* add selectors and adjust for languages all supported */
:lang(he) {…}
:lang(mn) {…}
/* Logical Sides */
/* Then, for supporting browsers to use */
/* and unsupporting browsers to ignore #TheCascade */
p {
/* remove any potential physical cruft.. */
margin: 0;
/* explicitly set logical value */
margin-block: 1ch 2ch;
}
También puedes usar @supports para determinar si deseas proporcionar resguardos de propiedades físicas:
p {
margin-top: 1ch;
margin-bottom: 2ch;
}
@supports (margin-block: 0) {
p {
margin-block: 1ch 2ch;
}
}
Sass, PostCSS, Emotion y otros tienen ofertas automatizadas de herramientas de compilación o de tiempo de compilación que tienen una amplia variedad de soluciones o resguardos. Revisa cada una para ver cuál coincide con tu cadena de herramientas y tu estrategia general del sitio.
¿Qué sigue?
Más CSS ofrecerá propiedades lógicas, aún no está todo listo. Sin embargo, falta un gran conjunto de abreviaturas, y aún queda pendiente una resolución en este problema de GitHub. Hay una solución temporal en un borrador. ¿Qué pasa si quieres definir el estilo de todos los lados lógicos de un cuadro?
margin: 1px 2px 3px 4px; margin: 1px 2px; margin: 2px;
margin: logical 1px 2px 3px 4px; margin: logical 1px 2px; margin: logical 2px;
La propuesta de borrador actual implicaría que deberías escribir logical en cada abreviatura para poder aplicar el equivalente lógico, que para algunas personas no suena muy DRY.
Existen otras propuestas para cambiarlo a nivel del bloque o de la página, pero eso podría filtrar usos lógicos en los estilos que aún suponen lados físicos.
html {
flow-mode: physical;
/* or */
flow-mode: logical;
/* now all margin/padding/etc references are logical */
}
/* hopefully no 3rd/1st party code is hard coded to top/left/etc ..? */
Es una pregunta difícil. Emite tu voto y danos tu opinión. Queremos conocerla.
¿Quieres aprender o estudiar más sobre las propiedades lógicas? Aquí tienes una referencia detallada, junto con guías y ejemplos, en MDN 🤓
Comentarios
- Para proponer cambios en la sintaxis de CSS de los atajos relativos al flujo, primero consulta los problemas existentes en el repositorio csswg-drafts. Si ninguno de los problemas existentes coincide con tu propuesta, crea uno nuevo.
- Para informar errores en la implementación de Chromium de los atajos relativos al flujo, primero consulta los problemas existentes en el sistema de seguimiento de errores de Chromium. Si ninguno de los problemas existentes coincide con tu error, crea uno nuevo.