Mejoras lógicas en el diseño con abreviaturas relativas de flujo

Nuevas combinaciones de teclas de propiedades lógicas y nuevas propiedades de inserció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 los tiene listos en su vista previa técnica.

Se muestran el latín, el hebreo y el japonés renderizando texto de marcador de posición dentro de un marco de dispositivo. Las flechas y los colores siguen el texto para ayudar a asociar las 2 direcciones del bloque y la línea intercalada.

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 aparecen 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 al chino tradicional del inglés, 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 las Herramientas para desarrolladores de Chrome? Si es así, es posible que hayas observado que los estilos predeterminados del usuario-agente 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 podría creer un lector en 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 según los cambios en la 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 pensar en él como un "bloque de contenido" o un "bloque de texto". Cada lenguaje organiza sus bloques y los ordena según su respectivo 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 en la que se escriben las letras y las palabras. Ten en cuenta la dirección en la que se mueven tu brazo y tu mano cuando escribes; 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 anterior, el inline-axis va de arriba abajo, pero en el siguiente, el inline-axis fluye de derecha a izquierda.

Si es flow-relative, significa que los estilos escritos para un idioma se contextualizarán y se aplicarán de forma adecuada a otros. El contenido fluirá en función del idioma en el que se publica.

Nuevas abreviaturas

Algunas de las siguientes combinaciones no son funciones nuevas para el navegador, sino formas más fáciles de escribir estilos si aprovechas la capacidad de establecer valores en los bordes del bloque o intercalados 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.

Escritura a mano
margin-block-start: 2ch;
margin-block-end: 2ch;
Nueva abreviatura
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.

Escritura a mano
margin-inline-start: 4ch;
margin-inline-end: 2ch;
Nueva abreviatura
margin-inline: 4ch 2ch;

Símbolos de abreviatura de padding

No se enviaron nuevas funciones, pero sí atajos más útiles:
padding-block y padding-inline.


Mano larga
padding-block-start: 2ch;
padding-block-end: 2ch;
Nueva abreviatura
padding-block: 2ch;
/* or */
padding-block: 2ch 2ch;

Y el conjunto complementario de abreviaturas de inline:

Escritura a mano
padding-inline-start: 4ch;
padding-inline-end: 2ch;
Nueva abreviatura
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;
}


Escritura manual física
position: absolute;
top: 1px;
right: 2px;
bottom: 3px;
left: 4px;
Nuevo atajo físico
position: absolute;
inset: 1px 2px 3px 4px;

Eso debería ser conveniente de inmediato. La inserción es una abreviatura de los lados físicos, y funciona como el margen y el relleno.

Nuevas funciones

Por más emocionante que la abreviatura del lado físico, hay aún más de las características lógicas traídas con abreviaturas adicionales de inset. Estos atajos brindan comodidad a los desarrolladores (son más cortos para escribir), pero también aumentan el alcance potencial del diseño porque son relativos al flujo.

Mano larga física
position: absolute;
top: 10px;
bottom: 10px;
Abreviatura lógica
position: absolute;
inset-block: 10px;


Escritura manual física
position: absolute;
left: 10px;
right: 20px;
Abreviatura lógica
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.

Símbolos de abreviatura de bordes

El borde, junto con sus propiedades anidadas color, style y width, también tienen nuevas abreviaturas lógicas.


Escritura manual física
border-top-color: hotpink;
border-bottom-color: hotpink;
Abreviatura lógica
border-block-color: hotpink;
/* or */
border-block-color: hotpink hotpink;


Escritura manual física
border-left-style: dashed;
border-right-style: dashed;
Abreviatura lógica
border-inline-style: dashed;
/* or */
border-inline-style: dashed dashed;


Escritura manual física
border-left-width: 1px;
border-right-width: 1px;
Abreviatura lógica
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 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 de compilación o Cascade son opciones viables para tener navegadores nuevos y antiguos, con el espaciado adecuado y propiedades lógicas actualizadas. Para los resguardos de Cascade, 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 pseudoselector :lang() para segmentar contenido para idiomas específicos, ajusta su espaciado físico de forma adecuada y, al final, ofrece el espaciado lógico para los 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 uno para ver cuál coincide con tu cadena de herramientas y 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é sucede si deseas aplicar diseño a todos los lados lógicos de un cuadro con un atajo?

Abreviatura física
margin: 1px 2px 3px 4px;
margin: 1px 2px;
margin: 2px;
Abreviatura lógica
margin: logical 1px 2px 3px 4px;
margin: logical 1px 2px;
margin: logical 2px;

El borrador de propuesta actual implicaría que tendrías que escribir logical en cada atajo para aplicar el equivalente lógico, lo que no suena muy DRY para algunos.

Hay otras propuestas para cambiarlo a nivel del bloque o de la página, pero eso podría filtrar usos lógicos en estilos que siguen suponiendo aspectos 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.