Propiedades lógicas CSS: conceptos básicos

La Especificación de valores y propiedades lógicas introduce asignaciones relativas al flujo para muchas de las propiedades y valores de CSS. Este artículo presenta la especificación y explica las propiedades y valores relativos al flujo.

¿Por qué necesitamos propiedades lógicas?

CSS tradicionalmente ha dimensionado las cosas de acuerdo con las dimensiones físicas de la pantalla. Por lo tanto, describimos las cajas como width y height, coloque elementos de la top y left, flotar las cosas a la izquierda, asignar bordes, márgenes y relleno al top, right, bottom, left, etc. Especificación de valores y propiedades lógicas define asignaciones para estos valores físicos a sus contrapartes lógicas o relativas al flujo, por ejemplo start y end Opuesto a left y right/top y bottom.

Un ejemplo de por qué podrían ser necesarias estas asignaciones es el siguiente. Tengo un diseño que usa CSS Grid, el contenedor de la cuadrícula tiene un ancho aplicado y estoy usando el align-self y justify-self propiedades para alinear los elementos. Estas propiedades son relativas al flujo: justify-self: start alinea el elemento al inicio de la dimensión en línea, align-self: start hace lo mismo en la dimensión del bloque.

Si ahora cambio el modo de escritura de este componente a vertical-rl utilizando el writing-mode propiedad, la alineación continúa funcionando de la misma manera. La dimensión en línea ahora se ejecuta verticalmente y la dimensión de bloque horizontalmente. Sin embargo, la cuadrícula no tiene el mismo aspecto, ya que el ancho asignado al contenedor es una medida horizontal, una medida ligada a lo físico y no a la ejecución lógica o relativa al flujo del texto.

Si en lugar del width propiedad usamos la propiedad lógica inline-size, el componente ahora funciona de la misma manera sin importar qué modo de escritura se muestre usando.

Puede probar esto en el ejemplo en vivo a continuación. Cambio writing-mode de vertical-rl para horizontal-tb sobre .grid para ver cómo las diferentes propiedades cambian el diseño.

Cuando se trabaja con un sitio en un modo de escritura que no sea horizontal, de arriba a abajo, o cuando se usan modos de escritura por razones creativas, ser capaz de relacionarse con el flujo del contenido tiene mucho sentido.

Dimensiones de bloque y en línea

Un concepto clave de trabajar con propiedades y valores relativos al flujo son las dos dimensiones de bloque y en línea. Como vimos anteriormente, los métodos de diseño CSS más nuevos, como Flexbox y Grid Layout, utilizan los conceptos de block y inline en vez de right y left/top y bottom al alinear elementos.

los inline dimensión es la dimensión a lo largo de la cual se ejecuta una línea de texto en el modo de escritura en uso. Por lo tanto, en un documento en inglés con el texto en horizontal de izquierda a derecha, o en un documento en árabe con el texto en horizontal de derecha a izquierda, la dimensión en línea es horizontal. Cambie a un modo de escritura vertical (por ejemplo, un documento japonés) y la dimensión en línea es ahora vertical, ya que las líneas en ese modo de escritura se ejecutan verticalmente.

La dimensión del bloque es la otra dimensión y la dirección en la que los bloques, como los párrafos, se muestran uno tras otro. En inglés y árabe, estos se ejecutan verticalmente, mientras que en cualquier modo de escritura vertical se ejecutan horizontalmente.

El siguiente diagrama muestra las direcciones en línea y de bloque en un modo de escritura horizontal:

Este diagrama muestra bloques y en línea en un modo de escritura vertical:

Soporte del navegador

Las propiedades y valores lógicos se pueden considerar como un par de grupos en términos de compatibilidad actual con el navegador. Algunas de las propiedades son esencialmente asignaciones de las versiones físicas, por ejemplo inline-size por width o margin-inline-start en vez de margin-left. Estas propiedades mapeadas están comenzando a ver una buena compatibilidad con el navegador, y si observa las páginas individuales de las propiedades en la referencia aquí en MDN, verá que Edge es el único navegador moderno que actualmente no las tiene.

Luego hay un grupo de propiedades que no tienen un mapeo directo en términos de propiedades físicas existentes. Estos son métodos abreviados hechos posibles por el hecho de que podemos referirnos a ambos bordes del bloque o dimensión en línea a la vez. Un ejemplo sería margin-block, que es una configuración abreviada de margin-block-start y margin-block-end.

Nota: El Grupo de Trabajo de CSS está intentando decidir qué hacer con las abreviaturas de cuatro valores para las propiedades lógicas, por ejemplo, los equivalentes a establecer cuatro propiedades físicas a la vez, como los márgenes con la margin propiedad. Necesitaríamos algún tipo de modificador si tuviéramos que reutilizar margin para propiedades relativas al flujo. Si desea leer las sugerencias o comentarlas, el problema relevante de GitHub es N.º 1282.

Prueba de compatibilidad con el navegador

Puede probar la compatibilidad con valores y propiedades lógicas mediante consultas de características. Por ejemplo, puede establecer un width, hacer una prueba por inline-size y, si es compatible, configure el width para auto y el inline-size al original width valor.

Ver también

• Alineación de caja en diseño de cuadrícula
• Alineación de cajas en diseño flexible
• Comprensión de valores y propiedades lógicas
• Modos de escritura