Podcast de CSS - 012: Propiedades lógicas
Un patrón de interfaz de usuario muy común es una etiqueta de texto con un ícono intercalado complementario.
El ícono se ubica a la izquierda del texto con un pequeño espacio entre ellos
proporcionada por margin-right en el ícono.
Sin embargo, sí hay un problema,
ya que esto solo funcionará
cuando la dirección del texto sea de izquierda a derecha.
Si la dirección del texto cambia de derecha a izquierda (que es como leen los idiomas como el árabe), el ícono se ubicará contra el texto.
¿Cómo se explica esto en los CSS? Las propiedades lógicas te permiten resolver estas situaciones. Entre muchos otros beneficios, ofrecen compatibilidad automática y gratuita para la internacionalización. Ayudan a crear un frontend más inclusivo y resiliente.
Terminología
Las propiedades físicas de las partes superior, derecha, inferior e izquierda se refieren a las dimensiones físicas del viewport. Son como una rosa de los vientos en un mapa. Las propiedades lógicas, por otro lado, hacen referencia a los bordes de un cuadro en relación con el flujo de contenido. Por lo tanto, pueden cambiar si cambian la dirección del texto o el modo de escritura. Este es un gran cambio de los estilos direccionales, y nos da mucha más flexibilidad a la hora de definir el estilo de nuestras interfaces.
Bloquear el flujo
El flujo de bloques es la dirección en la que se colocan los bloques de contenido. Por ejemplo, si hay dos párrafos, el segundo párrafo es el flujo de bloques. En un documento en inglés, el flujo de bloques es de arriba a abajo. Piensa en esto en el contexto de párrafos de texto que se siguen, de arriba hacia abajo.
Flujo intercalado
El flujo intercalado es la manera en que fluye el texto en una oración.
En un documento en inglés, el flujo intercalado es de izquierda a derecha.
Si cambia el idioma del documento de su página web al árabe (<html lang="ar">),
entonces el flujo intercalado sería de derecha a izquierda.
El texto fluye en la dirección determinada por el modo de escritura del documento.
Puedes cambiar la dirección en la que se presenta el texto con la propiedad writing-mode.
Esto se puede aplicar a todo el documento o a elementos individuales.
Relativo de flujo
Históricamente, en los CSS
solo pudimos aplicar propiedades como el margen en relación con la dirección de sus lados.
Por ejemplo, margin-top se aplica a la parte superior física del elemento.
Con las propiedades lógicas, margin-top se convierte en margin-block-start.
Esto significa que, independientemente del idioma y la dirección del texto,
El flujo de bloque tiene reglas de margen adecuadas.