CSS: equivalentes lógicos y físicos

¿Nuevo en las propiedades lógicas de CSS? Este artículo ofrece un mapa práctico de equivalencias entre propiedades lógicas y sus contrapartes físicas, para que tus interfaces sean más flexibles, accesibles y listas para cualquier idioma o modo de escritura.

Idea clave: las propiedades físicas dependen de direcciones absolutas como izquierda, derecha, arriba y abajo. Las propiedades lógicas usan los ejes inline y block, que se adaptan automáticamente a writing-mode y direction en función del idioma, ya sea de izquierda a derecha, de derecha a izquierda o en escritura vertical. El beneficio es claro: menos cambios manuales, mejor internacionalización y componentes verdaderamente universales.

Regla mental para migrar: piensa en inline para el flujo del texto y en block para el apilado de líneas. Start equivale al comienzo del flujo y end al final.

Tamaños: width ? inline-size height ? block-size min-width ? min-inline-size min-height ? min-block-size max-width ? max-inline-size max-height ? max-block-size

Espaciado: margin-left ? margin-inline-start margin-right ? margin-inline-end margin-top ? margin-block-start margin-bottom ? margin-block-end padding-left ? padding-inline-start padding-right ? padding-inline-end padding-top ? padding-block-start padding-bottom ? padding-block-end shorthand lógico: margin-inline, margin-block, padding-inline, padding-block

Posicionamiento y offset: left ? inset-inline-start right ? inset-inline-end top ? inset-block-start bottom ? inset-block-end shorthands: inset, inset-inline, inset-block

Bordes y radios: border-left ? border-inline-start border-right ? border-inline-end border-top ? border-block-start border-bottom ? border-block-end esquinas: 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

Texto y flujo: text-align: left/right ? text-align: start/end float: left/right ? float: inline-start/inline-end clear: left/right ? clear: inline-start/inline-end

Desbordamiento: overflow-x ? overflow-inline overflow-y ? overflow-block

Consejos prácticos: usa inline-size y block-size en componentes reutilizables. Prefiere margin-inline y padding-block para resolver espaciados que deban funcionar en RTL. Para layouts que deban rotar o acomodarse a idiomas asiáticos, reemplaza offsets físicos por inset-inline y inset-block.

Compatibilidad: las propiedades lógicas principales cuentan con buen soporte en los navegadores modernos. Para entornos heredados, puedes combinar fallbacks físicos con lógicos, donde la última declaración aplicada sea la lógica.

En Q2BSTUDIO aplicamos estas buenas prácticas en el desarrollo de interfaces escalables, accesibles y listas para internacionalización dentro de nuestros proyectos de aplicaciones a medida y software a medida para web y móvil. Nuestro enfoque orientado a componentes asegura estilos robustos, mantenibles y eficientes.

Además, potenciamos tus productos con inteligencia artificial y agentes IA, reforzamos tu ciberseguridad, diseñamos arquitecturas con servicios cloud aws y azure, y desplegamos analítica con servicios inteligencia de negocio y power bi. Si buscas acelerar tu roadmap de ia para empresas con visión técnica y de producto, explora nuestros servicios de inteligencia artificial para empresas.

Resumen ejecutivo: cambia lo físico por lo lógico y gana en resiliencia, rendimiento y escalabilidad del CSS. Las equivalencias esenciales que debes recordar son: width y height por inline-size y block-size, márgenes y rellenos con margin-inline y padding-block, offsets con inset-inline y inset-block, y alineaciones con start y end. Con este mapa, tus estilos funcionarán de forma coherente sin importar el idioma, la dirección del texto o el contexto del dispositivo.