Nuevas abreviaturas lógicas de propiedades y nuevas propiedades de inserción para Chromium
Desde Chromium 69 (3 de septiembre de 2018), las propiedades lógicas y los valores han ayudado a los desarrolladores a mantener el control de sus diseños internacionales mediante estilos lógicos, en lugar de físicos, de dirección y de dimensión. En Chromium 87, se enviaron las abreviaturas y las compensaciones para que estas propiedades y valores lógicos sean un poco más fáciles de escribir. Esto llega a Chromium a Firefox, que es compatible con las abreviaturas desde la versión 66. Safari los tiene listos en su vista previa técnica.
Flujo del documento
Si ya estás familiarizado con las propiedades lógicas, los ejes intercalados y de bloqueo, y no quieres repasar, puedes avanzar. 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 el chino tradicional, las letras y las palabras van de arriba abajo, mientras que los párrafos se apilan de derecha a izquierda. Solo en estos 2 casos, si escribimos CSS que coloca "margen superior" en un párrafo, solo espaciaremos correctamente el espaciado de 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. Por lo tanto, comienza el proceso de admitir varios idiomas; aprender sobre la parte física frente a la lógica del modelo de caja.
¿Alguna vez examinaste el elemento p en las Herramientas para desarrolladores de Chrome? Si es así, es posible que 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 usuario-agente de Chromium
El margen no está en la parte superior ni en la parte inferior, como podría creer un lector de inglés.
¡Es block-start y block-end! Estas propiedades lógicas son similares a las partes inferior y superior de un lector de inglés, pero también se parecen a las de un lector japonés de izquierda y derecha. Si la escribes una vez, funciona en todas partes.
El flujo normal ocurre cuando la página web es parte de este multidireccionalidad intencionalmente. 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 como parte del flujo. Obtén más información sobre la entrada y la salida del flujo en MDN o en las especificaciones del módulo de visualización de CSS. Si bien no es necesario que las propiedades lógicas estén en flujo, hacen gran parte del trabajo pesado por ti a medida que cambia la dirección. El flujo implica la dirección, con la que deben desplazarse las letras, las palabras y el contenido. Esto nos lleva a intercalar y bloquear direcciones lógicas.
La dirección del bloqueo es la que sigue el contenido nuevo, como preguntarte "¿dónde colocar el siguiente párrafo?". Puedes considerarlo como un "bloque de contenido" o un "bloque de texto".
Cada idioma 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 primero, mientras que block-end es el lado hacia el que fluyen los párrafos nuevos.
En la escritura a mano japonesa tradicional, por ejemplo, la dirección del bloque fluye de derecha a izquierda:
La dirección intercalada es la dirección en la que van las letras y las palabras. Ten en cuenta la dirección que recorren tu brazo y tu mano cuando escribes, ya que viajan 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 la escritura termina o se une. En el video anterior, la inline-axis está 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 se aplicarán de forma correcta a otros. El contenido se basará en el idioma en el que se publique.
Nuevas abreviaturas
Algunas de las siguientes abreviaturas no son funciones nuevas para el navegador, sino formas más fáciles de escribir estilos, ya que se pueden establecer valores en los bordes intercalados o del bloque a la vez. Las propiedades lógicas de inset-* sí aportan nuevas capacidades, ya que no había maneras largas de especificar posiciones absolutas con propiedades lógicas antes. Sin embargo, las inserciones y las abreviaturas fluyen juntas muy bien. Voy a contarte sobre todas las nuevas funciones lógicas que llegan a Chromium 87 a la vez.
Abreviaturas de márgenes
No se enviaron nuevas habilidades, pero sí se implementaron algunas abreviaturas útiles:
margin-block y
margin-inline.
margin-block-start: 2ch; margin-block-end: 2ch;
margin-block: 2ch; /* or */ margin-block: 2ch 2ch;
Hasta ahora no hay una abreviatura 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 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 nuevas habilidades, pero sí se implementaron 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 complementarias 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 si estableces caras 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 conveniente de inmediato. La inserción es una abreviatura de los lados físicos y funciona igual que el margen y el relleno.
Funciones nuevas
Por muy emocionante que sea la abreviatura física de los aspectos físicos, hay aún más de los atributos lógicos traídos por las abreviaturas adicionales de inset. Estas abreviaturas facilitan la creación de desarrolladores (son más cortas para 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;
En MDN, puedes obtener lecturas adicionales y una lista completa de abreviaturas y atajos de inserción.
Abreviaturas del borde
El borde y sus propiedades anidadas color, style y width también tienen 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;
En MDN, puedes obtener lecturas adicionales y una lista completa de abreviaturas y atajos de borde.
Ejemplo de propiedad lógica <figure>
Juntemos todo 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 pruébala!
No tienes que hacer mucho para que una tarjeta sea responsiva internacionalmente con un <figure> y algunas propiedades lógicas. Si te interesa saber cómo funcionan en conjunto todos los CSS que se consideran a nivel internacional, esperamos que esta sea una pequeña introducción significativa.
Uso de polifills y compatibilidad en diferentes navegadores
Las herramientas de Cascade o de compilación son opciones viables para tener navegadores antiguos y nuevos, espaciados adecuadamente con 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 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 debes 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 agrupador o tiempo de compilación que tienen una gran variedad de resguardos o soluciones. Consulta cada uno para ver cuáles coinciden con tu cadena de herramientas y con la estrategia general del sitio.
Próximos pasos
Una mayor cantidad de CSS ofrecerá propiedades lógicas, esto todavía no está listo. Sin embargo, falta una gran cantidad de abreviaturas y aún está pendiente una resolución en este problema de GitHub. Hay una solución temporal en un borrador. ¿Qué pasa si quieres darle estilo a todos los 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;
La propuesta actual del borrador implicaría que tendrías que escribir logical en cada abreviatura para obtener el equivalente lógico aplicado, lo que no suena muy DRY para algunos.
Hay otras propuestas para cambiarlo a nivel de bloque o de página, pero eso podría filtrar usos lógicos en estilos que aún supongan caras físicas.
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! Vota, comparte tu opinión y queremos conocer tu opinión.
¿Quieres aprender o estudiar más sobre las propiedades lógicas? Aquí hay una referencia detallada, junto con guías y ejemplos, en MDN 🤓
Comentarios
- Para proponer cambios en la sintaxis de CSS de abreviaturas relativas de flujo, primero verifica los problemas existentes en el repositorio 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 verifica 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.