Propiedades y Valores Lógicos de CSS
CSS Logical Properties (las propiedades lógicas en CSS) son un módulo de CSS que introduce propiedades y valores lógicos, proporcionando la capacidad de controlar el diseño de forma lógica en vez de la asignación de dimensiones físicas de dirección y dimensión.
Este módulo también define propiedades y valores lógicos para propiedades previamente definidas en CSS 2.1. Las propiedades lógicas definen una equivalencia a sus propiedades físicas correspondientes.
Dimensiones de bloque y en línea
Las propiedades y valores lógicos usan los términos abstractos de bloque (block) y en línea (inline) para describir la dirección en la que fluyen. El sentido físico de estos términos depende del modo de escritura.
- Dimensión de bloque
-
Es la dimensión perpendicular al flujo del texto en línea, es decir, la dimensión vertical en un modo de escritura horizontal, y la dimensión horizontal en un modo de escritura vertical. Para el texto estándar en inglés, es la dimensión vertical.
- Dimensión en línea
-
Es la dimensión paralela al flujo del texto en línea, es decir, la dimensión horizontal en un modo de escritura horizontal, y la dimensión vertical en un modo de escritura vertical. Para el texto estándar en inglés, es la dimensión horizontal.
Referencia
Propiedades para dimensionamiento
Propiedades para márgenes, bordes y relleno
border-blockborder-block-colorborder-block-endborder-block-end-colorborder-block-end-styleborder-block-end-widthborder-block-startborder-block-start-colorborder-block-start-styleborder-block-start-widthborder-block-styleborder-block-widthborder-color(logicalpalabra clave)border-inlineborder-inline-colorborder-inline-endborder-inline-end-colorborder-inline-end-styleborder-inline-end-widthborder-inline-startborder-inline-start-colorborder-inline-start-styleborder-inline-start-widthborder-inline-styleborder-inline-widthborder-start-start-radiusborder-start-end-radiusborder-end-start-radiusborder-end-end-radiusborder-style(logicalpalabra clave)border-width(logicalpalabra clave)margin(logicalpalabra clave)margin-blockmargin-block-endmargin-block-startmargin-inlinemargin-inline-endmargin-inline-startpadding(logicalpalabra clave)padding-blockpadding-block-endpadding-block-startpadding-inlinepadding-inline-endpadding-inline-start
Propiedades para flotantes y posicionamiento
clear(inline-endyinline-startpalabras claves)float(inline-endyinline-startpalabras claves)insetinset-blockinset-block-endinset-block-startinset-inlineinset-inline-endinset-inline-start
Otras propiedades
caption-side(inline-endyinline-startpalabras claves)resize(blockyinlinepalabras claves)text-align(endystartpalabras claves)
Propiedades obsoletas
offset-block-end(ahorainset-block-end)offset-block-start(ahorainset-block-start)offset-inline-end(ahorainset-inline-end)offset-inline-start(ahorainset-inline-start)
Guías
Especificaciones
| Specification |
|---|
| CSS Logical Properties and Values Module Level 1 |
Compatibilidad en los Navegadores
En general:
- Firefox tiene soporte para las propiedades asignadas — donde hay una directa asignación desde la versión física a la versión lógica.
- Chrome, desde la versión 69, tiene soporte para las propiedades asignadas.
- Edge actualmente no tiene soporte.
- Firefox 66 introduce soporte para dos valores abreviados.
Mira la página de la propiedad en específico para tener una información más completa sobre su compatibilidad.