Propiedades y valores lógicos de CSS
Ahora que la compatibilidad entre navegadores está en un punto de inflexión, es un buen momento para echar un vistazo a las propiedades y valores lógicos. Si está creando un sitio web en varios idiomas, las propiedades y valores lógicos son increíblemente útiles. Incluso si no es así, todavía hay algunas taquigrafías nuevas y convenientes que vale la pena conocer.
Por ejemplo, he perdido la cuenta de la cantidad de veces que he escrito esto para centrar algo:
.thing { margin-left: auto; margin-right: auto;}Podríamos convertirlo en una sola línea con algo como margin: 0 auto;pero luego los márgenes superior e inferior se agregarán a la mezcla. En su lugar, podemos seleccionar sólo el margen izquierdo y derecho con la margin-inlinepropiedad lógica.
Empezar a pensar en las cosas como “en línea” o “en bloque”
Esa última demostración es bastante buena, ¿verdad? La margin-inlinepropiedad establece ambos margin-lefty margin-right. De manera similar, la margin-blockpropiedad establece ambos margin-topy margin-bottom. Y no estamos hablando sólo de márgenes. Las propiedades lógicas tienen abreviaturas similares a set bordery padding. Entonces, si tiene un diseño visual que requiere bordes solo en los lados, puede usarlo border-inlineen lugar de preocuparse por cada dirección física por sí sola.
Entonces, a medida que avanzamos, ahora sabemos que estamos tratando con direcciones en línea y en bloque en lugar de direcciones físicas. En línea maneja las direcciones izquierda y derecha, mientras que el bloque maneja la parte superior e inferior.
Es decir, hasta que las cosas se intercambien cuando cambie el modo de escritura.
Presta atención a la dirección y al modo de escritura.
Lo que hemos visto hasta ahora son ejemplos de propiedades lógicas de CSS. Estas son versiones de propiedades CSS que se usaron como me gusta marginy padding, pero escritas de una manera nueva que renuncia a las direcciones físicas (es decir, izquierda, derecha, arriba y abajo).
CSS se desarrolló teniendo en cuenta el idioma inglés y el inglés se escribe y lee de izquierda a derecha. Sin embargo, ese no es el caso para todos los idiomas. El árabe, por ejemplo, se lee de derecha a izquierda. Por eso HTML tiene un diratributo.
htmlCSS tiene una propiedad equivalente (aunque se recomienda usar el atributo HTML en caso de que el CSS no se cargue):
.foreign-language { direction: rtl; }El chino, el japonés, el coreano y el mongol se pueden escribir horizontalmente de izquierda a derecha o verticalmente de arriba a abajo. La mayoría de los sitios web en estos idiomas están escritos de forma horizontal, al igual que el inglés.
Comparativamente, la escritura vertical es más común en los sitios web japoneses. Algunos sitios utilizan una combinación de texto vertical y horizontal.
Cuando se escribe verticalmente, el chino, el japonés y el coreano se escriben con la parte superior derecha como punto de partida, mientras que el mongol se lee de izquierda a derecha. Es exactamente por eso que tenemos la writing-modepropiedad en CSS, que incluye los siguientes valores:
horizontal-tb: Este es el valor predeterminado, que establece la dirección de izquierda a derecha para idiomas como inglés o francés, y de derecha a izquierda como árabe. Significatb"de arriba a abajo".vertical-rl: Esto cambia la dirección de derecha a izquierda en orientación vertical para idiomas como chino, japonés y coreano.vertical-lr: Esto se usa para idiomas verticales de izquierda a derecha, como el mongol.
Las propiedades lógicas de CSS ofrecen una forma de escribir CSS que sea contextual.
Cuando se utilizan propiedades lógicas, el espaciado y el diseño dependen tanto de la dirección writing-modecomo de la dirección (ya sea establecida por CSS o HTML). Por lo tanto, es posible reutilizar estilos CSS en diferentes idiomas. BBC News, por ejemplo, reconstruye su sitio web en más de una docena de idiomas. Esa es una mejor experiencia que dejar que los usuarios dependan de la traducción automática. También significa que pueden ofrecer mejor contenido específico a diferentes partes del mundo. Sin embargo, el estilo visual sigue siendo prácticamente el mismo en todas las regiones.
Miremos el siguiente ejemplo para ver las deficiencias de las propiedades físicas.
Usando la propiedad física del margen izquierdo (que se muestra en rojo), todo se ve bien en inglés. Si reutilizara el CSS pero cambiara el modo de escritura a rtl (que se muestra en la parte inferior), no habrá espacio entre el texto y el ícono y habrá un exceso de espacio en blanco a la izquierda del texto. Podemos evitar esto utilizando en su lugar una propiedad lógica.
Lo que hace que las propiedades y los valores lógicos sean tan útiles es que se adaptarán automáticamente al contexto del lenguaje. En un idioma de izquierda a derecha como el inglés, margin-inline-startestablecerá el margen del lado izquierdo. Para un idioma que se escribe de derecha a izquierda como árabe, urdu o hebreo, establecerá el margen derecho, lo que resuelve el problema de diseño del ejemplo anterior. Eso se soluciona de derecha a izquierda. Si tiene texto vertical, margin-inline-startse adaptará a ese contexto y agregará el margen en la parte superior, que es desde donde comenzaría a leer en cualquier idioma vertical (por eso se llama margin-inline-start; solo piense en qué dirección comienza a leer). La dirección de inlinelos cambios según la del elemento writing-mode. Cuando se establece una vertical writing-mode, maneja la dirección vertical superior e inferior. ¿Ves cómo se pueden cambiar las cosas?
Una lista completa de propiedades y valores lógicos.
Hay docenas de propiedades CSS que tienen una sintaxis alternativa lógica. Adrian Roselli tiene una visualización útil donde puedes alternar entre las propiedades físicas de CSS a las que todos estamos acostumbrados y sus equivalentes de propiedades lógicas. Es una buena manera de visualizar las propiedades lógicas y las propiedades físicas a las que se asignan cuando la dirección es ltry writing-modees horizontal-tb.
Desglosemos todo eso aún más y asignemos todas y cada una de las propiedades físicas de CSS a su compañero lógico, una al lado de la otra. Las tablas que se muestran a lo largo de este artículo muestran CSS físico tradicional en la columna de la izquierda y sus equivalentes lógicos (usando un mapeo horizontal de izquierda a derecha) en la columna de la derecha. Sin embargo, recuerde que el objetivo de las propiedades lógicas es que cambian según el contexto.
Dimensionamiento
En un modo de escritura horizontal, inline-sizeestablece el ancho de un elemento, mientras que block-sizeestablece la altura. En un modo de escritura vertical, ocurre lo contrario: inline-sizeestablece la altura y block-sizeestablece el ancho.
| Propiedad fisica | Propiedad lógica |
|---|---|
width |
inline-size |
max-width |
max-inline-size |
min-width |
min-inline-size |
height |
block-size |
max-height |
max-block-size |
min-height |
min-block-size |
Las propiedades lógicas para el tamaño tienen buena compatibilidad con varios navegadores.
Fronteras
Todo aquí tiene un sólido soporte para varios navegadores entre los navegadores modernos.
| Propiedad fisica | Propiedad lógica |
|---|---|
border-top |
border-block-start |
border-bottom |
border-block-end |
border-left |
border-inline-start |
border-right |
border-inline-end |
A continuación se muestra un ejemplo de uso border-inline-starten inglés, árabe y chino.
A continuación se muestra un ejemplo que establece border-block-startpuntos y border-block-endrayas:
También existen propiedades lógicas para configurar el color, el ancho y el estilo del borde individualmente:
| Propiedad fisica | Propiedad lógica |
|---|---|
border-top-color |
border-block-start-color |
border-top-width |
border-block-start-width |
border-top-style |
border-block-start-style |
Entonces, nuevamente, se trata de pensar en términos de "en línea" y "bloque" en lugar de direcciones físicas, como lefty top. También tenemos propiedades lógicas abreviadas para fronteras:
| Propiedad fisica | Propiedad lógica |
|---|---|
border-topandborder-bottom |
border-block |
border-leftandborder-right |
border-inline |
Margen
Aquí están todas las propiedades lógicas individuales margin:
| Propiedad fisica | Propiedad lógica |
|---|---|
margin-top |
margin-block-start |
margin-bottom |
margin-block-end |
margin-left |
margin-inline-start |
margin-right |
margin-inline-end |
Estas propiedades lógicas tienen soporte integral y moderno para todos los navegadores, incluido Samsung Internet, y son compatibles con Safari desde 12.2.
Y recuerda, también tenemos las abreviaturas:
| Propiedad fisica | Propiedad lógica |
|---|---|
margin-topandmargin-bottom |
margin-block |
margin-leftandmargin-right |
margin-inline |
Relleno
El relleno es muy similar al margen. Reemplace margincon paddingy tendremos la misma lista de propiedades.
| Propiedad fisica | Propiedad lógica |
|---|---|
padding-top |
padding-block-start |
padding-bottom |
padding-block-end |
padding-left |
padding-inline-start |
padding-right |
padding-inline-end |
padding-topandpadding-bottom |
padding-block |
padding-leftandpadding-right |
padding-inline |
Al igual que los márgenes, las propiedades lógicas para el relleno tienen un buen soporte en todos los navegadores.
Posicionamiento
¿Necesita compensar la posición de un elemento en una dirección determinada? También podemos declararlos lógicamente.
| Propiedad fisica | Propiedad lógica |
|---|---|
top |
inicio-bloque-insertado |
bottom |
extremo del bloque insertado |
left |
inserción-inicio-en línea |
right |
inserción-en-línea-extremo |
topybottom |
bloque insertado |
leftyright |
insertado en línea |
En un modo de escritura horizontal (ya sea de izquierda a derecha o de derecha a izquierda) inset-block-startes equivalente a configurar topy inset-block-endequivale a configurar bottom. En modo de escritura horizontal, con dirección de izquierda a derecha, inset-inline-startequivale a left, mientras que inset-inline-endequivale a right, y viceversa para idiomas de derecha a izquierda.
Por el contrario, para un modo de escritura vertical, inset-inline-startequivale a topwhile inset-inline-endequivale a bottom. Si writing-modese establece en vertical-rl, inset-block-startes equivalente a righty inset-block-endes equivalente a left. Si writing-modese establece en vertical-lr, ocurre lo contrario y, por lo tanto, inset-block-startes equivalente a left.
| propiedad lógica | Modo de escritura | Equivalente a: |
|---|---|---|
inset-block-start |
LTR horizontal | top |
inset-block-start |
RTL horizontales | top |
inset-block-start |
LTR vertical | left |
inset-block-start |
RTL verticales | right |
A continuación se muestra un ejemplo de cómo se ve el mismo código CSS para posicionamiento absoluto en cada una de las cuatro direcciones de escritura diferentes:
Las propiedades lógicas para el posicionamiento son compatibles con todos los navegadores modernos, pero recientemente llegaron a Safari.
También hay una nueva abreviatura para configurar los cuatro desplazamientos en una línea de código. Aquí hay un ejemplo que utiliza insetcomo abreviatura para configurar top, bottom, lefty rightde una sola vez para crear una superposición de página completa:
He oído insetque se hace referencia incorrectamente a ella como propiedad lógica. Pero un vistazo rápido a DevTools muestra que en realidad es una abreviatura de valores físicos, no propiedades lógicas:
Lo que realmente está haciendo es definir desplazamientos físicos (es decir, izquierda, derecha, arriba y abajo) en lugar de lógicos (es decir, en línea, bloque, inicio y final). Obviamente, si desea establecer el mismo valor para los cuatro lados, como en el ejemplo anterior, no importa.
inset: 10px 20px 5px 8px; /* shorthand for physical properties not logical properties */Alineación del texto
Los valores lógicos para la alineación del texto disfrutan de una excelente compatibilidad con el navegador y lo han sido durante muchos años. Cuando se trabaja en inglés, text-align: startes lo mismo que text-align: left, mientras que text-align: endes lo mismo que text-align: right. Si configura el diratributo en rtl, cambian y text-align: startalinean el texto a la derecha.
| Valor fisico | Modo de escritura | Equivalente a: |
|---|---|---|
start |
LTR | left |
start |
RTL | right |
end |
LTR | right |
end |
RTL | left |
Radio del borde
Hasta ahora, todo lo que hemos visto tiene un soporte de navegador decente. Sin embargo, existen otras propiedades lógicas en las que el soporte aún es un trabajo en progreso, y el radio del borde es una de ellas. En otras palabras, podemos establecer un border-radiusvalor diferente para diferentes rincones de un elemento usando propiedades lógicas, pero la compatibilidad del navegador no es excelente.
| Propiedad fisica | Propiedad lógica |
|---|---|
border-top-left-radius |
border-start-start-radius |
border-top-right-radius |
border-start-end-radius |
border-bottom-left-radius |
border-end-start-radius |
border-bottom-right-radius |
border-end-end-radius |
Vale la pena señalar que la especificación no incluye propiedades abreviadas, como border-start-radiusy border-end-radius. Pero, como dije, todavía estamos en los primeros días, por lo que ese podría ser un espacio para observar.
flotadores
Los valores relativos al flujo para flotantes lógicos tienen un soporte de navegador terrible en el momento en que escribo esto. Sólo Firefox admite inline-starty inline-endcomo floatvalores.
| Valor fisico | Valor lógico |
|---|---|
float: left |
float: inline-start |
float: right |
float: inline-end |
clear: left |
clear: inline-start |
clear: right |
clear: inline-end |
Otras propiedades lógicas
Se proponen propiedades lógicas para overflowy resize, pero actualmente tienen un soporte de navegador terrible.
| Físico | Lógico |
|---|---|
resize: vertical |
resize: block |
resize: horizontal |
resize: inline |
overflow-y |
overflow-block |
overflow-x |
overflow-inline |
Cavar más profundo
Exploramos lo que significa que una propiedad se considere "lógica" y luego asignamos todas las nuevas propiedades y valores lógicos a sus contrapartes físicas. ¡Genial! Pero si desea profundizar aún más en las propiedades y valores lógicos de CSS, existen varios recursos que vale la pena consultar.
- “RTL Styling 101” (Ahmad Shadeed): un gran recurso si se trata de árabe u otros idiomas que se escriben de derecha a izquierda. Ahmad cubre todo, desde propiedades lógicas hasta consideraciones al trabajar con técnicas de diseño específicas, como flexbox y grid.
text-combine-upright(Trucos CSS): si se trata de texto vertical, ¿sabía que esta propiedad puede rotar el texto y comprimir varios caracteres en el espacio de un solo carácter? Es un buen toque de refinamiento en situaciones específicas donde algunos personajes necesitan ir juntos pero aún así fluyen con un modo de escritura vertical.
Si desea ver algunos buenos ejemplos reales de tipografía vertical de toda la web, eche un vistazo a los Web Awards for Horizontal and Vertical Writings. Hay muchas cosas geniales ahí.
Propiedades de Dimensionamiento:
inline-sizeyblock-size: Definen el tamaño de los elementos en términos de dirección de escritura. Por ejemplo,inline-sizeestablece el tamaño en la dirección de escritura inline (horizontal para la mayoría de los textos), yblock-sizeen la dirección block (vertical).
Propiedades de Posicionamiento:
inset-block-start,inset-block-end,inset-inline-start,inset-inline-end: Estas propiedades reemplazantop,bottom,left, yrightrespectivamente. Por ejemplo,inset-block-startdefine la posición desde el comienzo del bloque (parte superior en un modo de escritura horizontal), mientras queinset-inline-enddefine la posición desde el final en la dirección inline (derecha en un modo de escritura LTR).
Alineación de Texto:
text-align: startytext-align: end: Se ajustan automáticamente según la dirección del texto. Por ejemplo,text-align: startalinea el texto a la izquierda en un modo de escritura LTR y a la derecha en un modo de escritura RTL.
Recursos Adicionales:
- “RTL Styling 101” de Ahmad Shadeed: Una guía completa para trabajar con lenguajes que se escriben de derecha a izquierda, cubriendo desde propiedades lógicas hasta consideraciones específicas para técnicas de diseño como flexbox y grid.
- text-combine-upright (CSS-Tricks): Propiedad que rota y comprime varios caracteres en el espacio de un solo carácter, útil para texto en modos de escritura vertical. Por ejemplo, se usa en tipografía vertical para mejorar la legibilidad y presentación del texto.
Terminando
¿Necesita apresurarse e intercambiar todas las propiedades físicas de su código base? No. Pero tampoco está de más empezar a utilizar propiedades y valores lógicos en su trabajo. Como hemos visto, la compatibilidad con el navegador prácticamente existe. E incluso si estás trabajando en un sitio que sólo está en inglés, no hay razón para no usarlos.
Preguntas Frecuentes (FAQ)
1. ¿Qué son las propiedades lógicas en CSS?
- Las propiedades lógicas en CSS son versiones de las propiedades tradicionales (como margin, padding, y border) que se definen en términos de las direcciones de flujo de contenido (inline y block) en lugar de direcciones físicas (izquierda, derecha, arriba, abajo).
2. ¿Cuáles son las ventajas de usar propiedades lógicas?
- Las propiedades lógicas adaptan automáticamente el estilo según el contexto del idioma y el modo de escritura, lo que facilita el desarrollo de sitios web multilingües. También simplifican el código al permitir abreviaciones y mejoran la legibilidad.
3. ¿Qué es el writing-mode en CSS?
- La propiedad
writing-modeespecifica la dirección y el flujo del texto dentro de un elemento, pudiendo ser horizontal-tb (izquierda a derecha, de arriba a abajo), vertical-rl (vertical, de derecha a izquierda) o vertical-lr (vertical, de izquierda a derecha).
4. ¿Cómo se comportan las propiedades lógicas en diferentes modos de escritura?
- En un modo de escritura horizontal,
inlinemaneja direcciones izquierda y derecha, mientras queblockmaneja direcciones superior e inferior. En un modo de escritura vertical,inlinemaneja direcciones superior e inferior, mientras queblockmaneja direcciones izquierda y derecha.
5. ¿Qué navegadores soportan propiedades lógicas?
- La mayoría de los navegadores modernos, incluyendo Chrome, Firefox, y Edge, tienen buen soporte para las propiedades lógicas. Safari ha mejorado su soporte en versiones recientes.
6. ¿Debo reemplazar todas mis propiedades físicas por lógicas?
- No es necesario reemplazar todas las propiedades físicas inmediatamente, pero es recomendable empezar a usar propiedades lógicas en nuevos proyectos o al actualizar código existente para mejorar la adaptabilidad y la legibilidad.
Deja un comentario