Spanish (Español) translation by Naudys Angulo (you can also view the original English article)
Las propiedades lógicas de CSS definen una nueva forma de trabajar con el diseño. Su objetivo principal es ayudar a los desarrolladores a soportar diferentes sistemas de escritura, como los scripts de derecha a izquierda (RTL) y el de visualización vertical. Estas nuevas características permiten controlar el diseño mediante propiedades lógicas en lugar de físicas. Por ejemplo, con propiedades lógicas, puedes describir el start (inicio) y el end (final) de un elemento, en lugar de sus límites left (izquierdo) y right (derecho). ¿Ves la diferencia?
Incluso si no trabajas con lenguajes que no son LTR y sitios web multidireccionales, vale la pena familiarizarse con las nuevas especificaciones. Las propiedades lógicas ayudarán a establecer una nueva filosofía de creación de diseños más flexibles con CSS.
Soporte del navegador
Dado que la compatibilidad con los navegadores todavía tiene mucho margen de mejora, las propiedades lógicas aún no están listas para la producción. Sin embargo, las versiones más recientes de Firefox, Chrome y Safari ya las soportan, así que puedes empezar a probarlas.
Las versiones más antiguas de Firefox, Chrome y Safari también ofrecen soporte parcial con los prefijos -moz- y -webkit-. Actualmente, Internet Explorer y Edge no soportan la función en absoluto.
Direcciones de contenido en CSS
El inglés se escribe con una escritura horizontal de izquierda a derecha (LTR) y de arriba a abajo (tb) (la escritura latina). Sin embargo, no todos los idiomas son así. Hay muchos ejemplos de idiomas que utilizan una escritura de derecha a izquierda (RTL), como el árabe y el hebreo, y otros que pueden mostrarse verticalmente, como el japonés, el chino y el mongol.
"Los lenguajes no tienen una dirección. Los scripts tienen una dirección de escritura, por lo que los idiomas escritos en un script determinado, se escribirán con la dirección de ese script". - W3C
En CSS se puede establecer la dirección del contenido en una página con las propiedades direction y writing-mode.
1. Modo de escritura
La propiedad writing-mode define cómo fluye el contenido en bloque (como los párrafos) en la pantalla. Este puede tomar tres valores:
-
horizontal-tb(por defecto): contenido horizontal, de arriba a abajo; -
vertical-lr: contenido vertical, de izquierda a derecha; -
vertical-rl: contenido vertical, de derecha a izquierda.
2. Dirección
La propiedad direction define cómo fluye el contenido en línea (como los caracteres de un párrafo) en la pantalla. Puede tomar dos valores:
-
ltr(por defecto): de izquierda a derecha -
rtl: de derecha a izquierda
Las propiedades lógicas de CSS asignan automáticamente los diseños a la dirección del contenido establecida con las propiedades direction y writing-mode.
Un nuevo enfoque para la maquetación
1. Flexbox
El nuevo enfoque de los diseños lógicos comenzó con las especificaciones de flexbox. Flexbox no tiene en cuenta las dimensiones físicas como izquierda, derecha, arriba y abajo. Utiliza valores como flex-start y flex-end que dependen de la dirección de los ejes principal y transversal.
Que los elementos de flex fluyan horizontal o verticalmente también dependen de la posición de los dos ejes que puedes definir con la propiedad flex-dirección. En definitiva, conceptos como "start" y "end" son totalmente relativos en flexbox y se pueden cambiar fácilmente.
2. CSS Grid
CSS Grid sigue la misma lógica. CSS Grid tampoco conoce la izquierda, la derecha, la parte superior y la inferior. Dispone los elementos en filas y columnas, a lo largo de dos ejes no jerárquicos.
Puedes definir la posición de los elementos de la cuadrícula con propiedades como grid-row-start, o con áreas de la cuadrícula con nombre usando la propiedad grid-template-areas. Al igual que flexbox, CSS Grid también tiene propiedades lógicas en lugar de físicas.
3. Propiedades lógicas
Las propiedades lógicas de CSS llevan este nuevo enfoque al siguiente nivel. Cambian la forma en que definimos las propiedades más utilizadas, como margin, padding, width y height.
Dimensiones físicas vs. lógicas
Arriba, abajo, izquierda y derecha son las dimensiones físicas de la pantalla. Actualmente, CSS asigna las propiedades a estas direcciones físicas. Sin embargo, cuando tienes un sitio web RTL, no quieres empezar a escribir desde la izquierda. Por ejemplo, si quieres añadir un margen antes del texto, tienes que usar la propiedad margin-right en lugar de margin-left, que usarías en una página LTR.
Y, esto es solo establecer el margen de una caja de contenido. Si quieres añadir soporte RTL a todo tu sitio tienes que reescribir todo tu CSS o realizar la conversión con Sass u otro preprocesador CSS.
Las propiedades lógicas cambian este modus operandi. En lugar de dimensiones verticales y horizontales, utilizan dimensiones de bloque y en línea:
- La dimensión de bloque es la forma en que los elementos de bloque, como los párrafos, se disponen en una página (en inglés, de arriba a abajo).
- La dimensión en línea es la forma en que los elementos en línea, como los caracteres de un párrafo, se disponen en una página (en inglés, de izquierda a derecha).
A continuación se muestra como las dimensiones lógicas se corresponden con las dimensiones físicas en inglés y en otros idiomas LTR/horizontal-tb:
| Dimensiones lógicas | Dimensiones físicas (inglés) |
|---|---|
| block-start | superior |
| block-end | inferior |
| inline-start | izquierda |
| inline-end | derecha |
El mapeo lógico-físico tiene este aspecto en las escrituras RTL/horizontal-tb como la árabe:
| Dimensiones lógicas | Dimensiones físicas (escritura árabe) |
|---|---|
| block-start | superior |
| block-end | inferior |
| inline-start | derecha |
| inline-end | izquierda |
Y, así es como funcionan las dimensiones lógicas con una escritura vertical-rl como la japonesa cuando se escribe en estilo tategaki (縦書き):
| Dimensiones lógicas | Dimensiones físicas (japonés) |
|---|---|
| block-start | derecha |
| block-end | izquierda |
| inline-start | superior |
| inline-end | inferior |
Como puedes ver, las propiedades lógicas de CSS permitirán a los desarrolladores dar la vuelta a los diseños a su antojo.
Propiedades lógicas de CSS
Las propiedades lógicas de CSS se definen actualmente en las especificaciones de Nivel 1 (Borrador del Editor; se proporciona para su discusión abierta).
A continuación, encontrarás ejemplos de las propiedades lógicas más importantes. Son los equivalentes lógicos de las propiedades físicas más utilizadas, como margin y float. Si estás interesado en la lista completa de propiedades lógicas, consulta también la guía de referencia de MDN.
1. Alineación del texto
Puedes utilizar la propiedad text-align con los valores start y end en los navegadores que soportan las propiedades lógicas de CSS. En inglés y otros idiomas que se muestran LTR, start equivale a left; y end equivale a right.
En los ejemplos RTL, como el árabe, funciona a la inversa: start equivale a right y end a left.
1 |
.align-start { |
2 |
/* Physical property | English */
|
3 |
text-align: left; |
4 |
|
5 |
/* Logical property */
|
6 |
text-align: start; |
7 |
}
|
8 |
.align-end { |
9 |
/* Physical property | English */
|
10 |
text-align: right; |
11 |
|
12 |
/* Logical property */
|
13 |
text-align: end; |
14 |
}
|
En la demostración que se muestra a continuación, puedes probar cómo funciona text-align con las propiedades lógicas si cambias la direction o el writing-mode de la página:
2. Margen, relleno, borde
También puedes definir el margin, el paddingy el border con propiedades lógicas. Debes utilizar el postfijo -inline-start para indicar el inicio de la dimensión inline, que es left en inglés y otros idiomas LTR/tb. Del mismo modo, el postfijo -inline-end se utiliza para el final de la dimensión inline, que es la right en las páginas web en inglés.
El postfijo -block-start es para el inicio de la dimensión del bloque-en inglés: top, mientras que -block-end es para el final de la dimensión del bloque-en inglés: bottom.
1 |
.add-border { |
2 |
/* Physical properties | English */
|
3 |
border-left: 0.625rem red solid; |
4 |
border-top: 0.625rem blue solid; |
5 |
border-right: 0.625rem purple solid; |
6 |
border-bottom: 0.625rem green solid; |
7 |
|
8 |
/* Logical properties */
|
9 |
border-inline-start: 0.5rem red solid; |
10 |
border-block-start: 0.5rem blue solid; |
11 |
border-inline-end: 0.5rem purple solid; |
12 |
border-block-end: 0.5rem green solid; |
13 |
}
|
14 |
|
15 |
.add-margin { |
16 |
/* Physical properties | English */
|
17 |
margin-left: 0.25rem; |
18 |
margin-top: 0.5rem; |
19 |
margin-right: 0.75rem; |
20 |
margin-bottom: 1rem; |
21 |
|
22 |
/* Logical properties */
|
23 |
margin-inline-start: 0.25rem; |
24 |
margin-block-start: 0.5rem; |
25 |
margin-inline-end: 0.75rem; |
26 |
margin-block-end: 1rem; |
27 |
}
|
28 |
|
29 |
.add-padding { |
30 |
/* Physical properties | English */
|
31 |
padding-left: 1.25rem; |
32 |
padding-top: 1.5rem; |
33 |
padding-right: 1.75rem; |
34 |
padding-bottom: 2rem; |
35 |
|
36 |
/* Logical properties */
|
37 |
padding-inline-start: 1.25rem; |
38 |
padding-block-start: 1.5rem; |
39 |
padding-inline-end: 1.75rem; |
40 |
padding-block-end: 2rem; |
41 |
}
|
A continuación, puedes probar las propiedades lógicas que pertenecen a la propiedad border.
Ten en cuenta que también puedes utilizar los equivalentes lógicos de las propiedades de borde. Por ejemplo, border-inline-start-color (en lugar de border-left-color) es una propiedad lógica válida también.
Sin embargo, es probable que hayas notado que falta algo aquí. Lo más probable es que utilices con frecuencia las abreviaturas margin, padding y border en lugar de las largas como padding-top. ¿Cómo manejan las propiedades lógicas estas abreviaturas? Actualmente, no las manejan en absoluto.
Los equivalentes lógicos de estas abreviaturas siguen siendo una cuestión abierta, que se está debatiendo activamente. Habrá una solución en el futuro, sin embargo, en este momento, es necesario utilizar las propiedades lógicas de los márgenes, rellenos y bordes. Para más información, consulta el Issue 1282 en el repo de GitHub del Grupo de Trabajo de CSS.
3. Float
También puedes definir floats utilizando propiedades lógicas. En los scripts LTR, inline-start equivale a left y inline-end a right. En los lenguajes RTL, sucede a la inversa, ya que aquí la dimensión inline comienza a la derecha de la pantalla.
1 |
.float-inline-start { |
2 |
/* Physical property | English */
|
3 |
float: left; |
4 |
|
5 |
/* Logical property */
|
6 |
float: inline-start; |
7 |
}
|
8 |
|
9 |
.float-inline-end { |
10 |
/* Physical property | English */
|
11 |
float: right; |
12 |
|
13 |
/* Logical property */
|
14 |
float: inline-end; |
15 |
}
|
Puedes probar los floats lógicos en la demo que aparece a continuación:
4. Anchura y Altura
Las propiedades de tamaño, es decir, width (anchura) y heigth (altura), también tienen sus equivalentes lógicos. En los scripts de escritura de arriba a abajo, inline-size equivale a width, ya que esta es la dimensión en la que los elementos inline (por ejemplo, los caracteres de un párrafo) fluyen en la pantalla. Y el block-size equivale a heigth, ya que es la dimensión en la que fluyen los elementos de bloque (por ejemplo, los párrafos).
En los scripts de escritura vertical, heigth es la dimensión inline (inline-size), ya que los caracteres fluyen verticalmente, y width es la dimensión del bloque (block-size), ya que los párrafos fluyen horizontalmente.
Como puedes ver a continuación, max-width, max-height, min-width y min-height tienen también sus propias propiedades lógicas.
1 |
.add-dimensions { |
2 |
/* Physical property | English */
|
3 |
width: 600px; |
4 |
height: 200px; |
5 |
|
6 |
/* Logical property */
|
7 |
inline-size: 600px; |
8 |
block-size: 200px; |
9 |
}
|
10 |
|
11 |
.max-dimensions { |
12 |
/* Physical property | English */
|
13 |
max-width: 100%; |
14 |
max-height: 300px; |
15 |
|
16 |
/* Logical property */
|
17 |
max-inline-size: 100%; |
18 |
max-block-size: 300px; |
19 |
}
|
20 |
|
21 |
.min-dimensions { |
22 |
/* Physical property | English */
|
23 |
min-width: 50%; |
24 |
min-height: 200px; |
25 |
|
26 |
/* Logical property */
|
27 |
min-inline-size: 50%; |
28 |
min-block-size: 200px; |
29 |
}
|
En la siguiente demo, puedes probar cómo funcionan las propiedades inline-size y block-size con diferentes direcciones y modos de escritura:
5. Posición
También puedes posicionar los elementos en la pantalla utilizando propiedades lógicas. Las posiciones lógicas sustituyen a las propiedades físicas top, left, bottom y right.
El inicio de la dimensión del bloque (top en inglés) se define mediante la propiedad lógica inset-block-start. Del mismo modo, el inicio de la dimensión inline (izquierdaen inglés) se define mediante la propiedad inset-inline-start.
Las posiciones lógicas también tienen una propiedad abreviada muy interesante: inset, que sigue a la
-
inset-block-start, -
inset-inline-start, -
inset-block-end, -
inset-inline-end
orden.
1 |
.add-position { |
2 |
/* Physical properties | English */
|
3 |
top: 0; |
4 |
left: 100px; |
5 |
bottom: 200px; |
6 |
right: 300px; |
7 |
|
8 |
|
9 |
/* Logical properties | Longhand */
|
10 |
inset-block-start: 0; |
11 |
inset-inline-start: 100px; |
12 |
inset-block-end: 200px; |
13 |
inset-inline-end: 300px |
14 |
|
15 |
/* Logical properties | Shorthand */
|
16 |
inset: 0 100px 200px 300px; |
17 |
}
|
La demostración que se muestra a continuación pega un div al inicio de los ejes de bloque y en línea, utilizando las propiedades inset-block-start e inset-inline-start (en inglés top y left):
Conclusión
Las propiedades lógicas son evidentemente lógicas y convenientes, pero no será fácil acostumbrarse a ellas, ya que requieren una mentalidad completamente diferente. No cabe duda de que serán una gran ventaja para los desarrolladores que necesiten dar soporte a los scripts en lenguaje RTL y/o vertical.
Pensar en términos de dimensiones en línea y en bloque, en lugar de en direcciones físicas, también cambiará nuestra forma de pensar en la maquetación. Esperemos que este nuevo enfoque dé como resultado algunos diseños interesantes y sitios web multidireccionales en el futuro.
Aprende más sobre el diseño CSS
