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.

Adam Argyle

Oriol Brufau

A partir de Chromium 69 (3 de septiembre de 2018), propiedades lógicas y valores han ayudado desarrolladores mantienen el control de sus diseños internacionales a través de métodos que los estilos físicos, de dirección y de dimensión. En Chromium 87, las abreviaturas y se enviaron para que estas propiedades y valores lógicos sean un poco más fáciles de escribir. De esta forma, Chromium compara con Firefox, que es compatible con las abreviaturas desde el 66. Safari los tiene listos en su vista previa técnica.

Flujo de documentos

Si ya conoces las propiedades lógicas, usa los ejes de intercalado y de bloque Si deseas un repaso, puedes adelantar. De lo contrario, este es 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 pone "margen superior" en un párrafo, solo espaciados adecuadamente 1 estilo de idioma. Si la página se traduce a un lenguaje chino 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 la el proceso de admitir múltiples idiomas; aprender sobre los lados físicos y lógicos del modelo de caja.

¿Alguna vez inspeccionaste el elemento p en las Herramientas para desarrolladores de Chrome? Si es así, es posible que tengas notaste que los estilos de usuario-agente predeterminados no son físicas, sino lógicas.

p {
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

CSS de la hoja de estilo de 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 de un lector de inglés en la parte inferior y superior, pero también es similar a la de los lectores japoneses, ya que son izquierdas y derechas. Escrita una vez, funciona en todas partes.

El flujo normal se da cuando la página web es parte de esta multidireccionalidad intencionalmente. Cuando el contenido de la página se actualiza en función de los cambios en la dirección del documento, el diseño y su los elementos de la tabla se consideran en el flujo. Más información sobre "en" y "fuera" de flujo en MDN o en la especificaciones del módulo de visualización de CSS. Si bien las propiedades lógicas no es necesario que estén en flujo, hacen gran parte del trabajo pesado por ti a medida que cambia la dirección. El flujo implica dirección, qué letras, palabras y contenido deben viajar. Esto nos lleva a bloquear y también intercalar direcciones lógicas.

La dirección del bloqueo es la dirección que siguen los nuevos bloques de contenido, como preguntarte, "¿dónde colocar el siguiente párrafo?". Puedes considerarla como un “bloque de contenido” o un “bloque de texto”. Cada idioma organiza sus bloques y los ordena sus respectivos block-axis. block-start es el lado en el que se coloca primero un párrafo. mientras que block-end es el lado hacia el cual fluyen los párrafos nuevos.

Por ejemplo, en la escritura a mano tradicional en japonés, 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. Ten en cuenta la dirección tu brazo y tu mano viajan cuando escribes; están viajando por el inline-axis. inline-start es el lado en el que comienzas a escribir, mientras que inline-end es el lado. donde la escritura termina o se une. El video de arriba, inline-axis, es de arriba abajo, pero, en el siguiente video, inline-axis fluye de derecha a izquierda.

Ser flow-relative significa que los estilos escritos para un idioma serán contextuales y adecuados en otros idiomas. El contenido fluirá en función del idioma en el que se publica.

Nuevas abreviaturas

Algunas de las siguientes abreviaturas no son funciones nuevas para el navegador, sino más bien formas de escribir estilos aprovechando la posibilidad de establecer valores en ambos bloques o bordes intercalados a la vez. Las propiedades lógicas de inset-* sí aportan nuevas habilidades, ya que no había formas largas de especificar posiciones absolutas con propiedades lógicas. antes. Sin embargo, las inserciones y las taquigrafías fluyen tan bien, brindarte información sobre todas las nuevas funciones de propiedades lógicas que se incluyen en Chromium 87 al mismo tiempo.

Abreviaturas del margen

No se enviaron habilidades nuevas, pero algunas combinaciones muy útiles sí lo hicieron:
margin-block y margin-inline

margin-block-start: 2ch;
margin-block-end: 2ch;

margin-block: 2ch;
/* or */
margin-block: 2ch 2ch;

No existe una forma abreviada de "parte superior e inferior". o "izquierda y derecha"... ¡hasta ahora! Es probable que hagas referencia a los 4 lados con la abreviatura de margin: 10px;, y ahora puede hacer referencia fácilmente a 2 lados complementarios mediante la abreviatura de propiedad lógica.

margin-inline-start: 4ch;
margin-inline-end: 2ch;

margin-inline: 4ch 2ch;

Abreviaturas de relleno

No se enviaron habilidades nuevas, pero sí lo hicieron otras abreviaturas más prácticas:
padding-block y padding-inline

padding-block-start: 2ch;
padding-block-end: 2ch;

padding-block: 2ch;
/* or */
padding-block: 2ch 2ch;

Y el conjunto de abreviaturas inline complementaria:

padding-inline-start: 4ch;
padding-inline-end: 2ch;

padding-inline: 4ch 2ch;

Inserción y abreviaturas

Se pueden escribir las propiedades físicas top, right, bottom y left como valores para la propiedad inset. Cualquier valor de position puede beneficiarse con de los lados de los lados con la inserción.

.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 parecer inmediatamente conveniente. La inserción es una abreviatura de los lados físicos, y funciona como margen y padding.

Nuevas funciones

Por muy emocionante que sea la abreviatura del lado físico, hay mucho más en atributos lógicos integrados por abreviaturas adicionales de inset Estas abreviaturas traen la conveniencia de la creación de los desarrolladores (son más breves de escribir), pero también aumentan el alcance potencial del diseño porque son relativos al flujo.

position: absolute;
top: 10px;
bottom: 10px;

position: absolute;
inset-block: 10px;

position: absolute;
left: 10px;
right: 20px;

position: absolute;
inset-inline: 10px 20px;

Obtén más información y una lista completa de los textos introducidos y de abreviatura. está disponible en MDN.

Abreviaturas de bordes

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

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;

Lecturas adicionales y una lista completa de abreviaturas de borde y mano larga está disponible en MDN.

Ejemplo de la propiedad lógica <figure>

Juntemos todo en un pequeño ejemplo. Las propiedades lógicas pueden diseñar una imagen con una leyenda para manejar diferentes instrucciones de redacción y documentación.

¡O inténtalo!

No tienes que hacer mucho para que una tarjeta sea responsiva a nivel internacional con una <figure> y algunas propiedades lógicas. Si te interesa saber cómo todo esto considerado CSS funcione en conjunto, espero que esta sea una pequeña introducción significativa.

Compatibilidad con Polyfill y varios navegadores

Cascade, o herramientas de compilación, son opciones viables para tener navegadores antiguos y nuevos por igual, estén correctamente espaciados con propiedades lógicas actualizadas. Para resguardos en cascada, sigue una propiedad física con una lógica, y el navegador usará la "última" propiedad que encontró durante el estilo resolución.

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, se ajusta el espaciado físico de forma adecuada, luego, al final, ofrece la lógica espaciado 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 debes proporcionar resguardos de propiedades:

p {
  margin-top: 1ch;
  margin-bottom: 2ch;
}

@supports (margin-block: 0) {
  p {
    margin-block: 1ch 2ch;
  }
}

Sass, PostCSS, Emotion y otras tienen un agrupador o una compilación automatizados que tienen una amplia gama de resguardos o soluciones. Consulta cada uno para ver cuáles se ajustan a tu cadena de herramientas y a tu estrategia general del sitio.

¿Qué sigue?

Una mayor cantidad de CSS ofrecerá propiedades lógicas, esto todavía no es así. Una gran falta , y aún hay una solución pendiente en este problema de GitHub. Existe una solución temporal en un borrador. ¿Qué pasa si quieres darle estilo a todas lados lógicos de un cuadro con una abreviatura?

margin: 1px 2px 3px 4px;
margin: 1px 2px;
margin: 2px;

margin: logical 1px 2px 3px 4px;
margin: logical 1px 2px;
margin: logical 2px;

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

Hay otras propuestas para modificarlo a nivel del bloque o de la página pero eso podría filtrar usos lógicos en estilos que siguen asumiendo 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, expresa tu opinión, queremos conocer tu opinión.

¿Quieres aprender o estudiar más las propiedades lógicas? Aquí tienes una referencia detallada, junto con guías y ejemplos, en MDN 🤓

Comentarios

• Para proponer cambios en la sintaxis CSS de abreviaturas relativas de flujo, primero, comprueba los problemas existentes en el repositorio de csswg-drafts. Si ninguno de los problemas existentes coincide con tu propuesta, crea uno nuevo.
• Para informar errores sobre la implementación de Chromium de abreviaturas relativas de flujo, primero, consulta los problemas existentes en la Herramienta de seguimiento de errores de Chromium. Si ninguno de los problemas existentes coincide con el error, crea uno nuevo.