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
block-sizeExperimentalinline-sizeExperimentalmax-block-sizeExperimentalmax-inline-sizeExperimentalmin-block-sizeExperimentalmin-inline-sizeExperimental
Propiedades para márgenes, bordes y relleno
border-blockExperimentalborder-block-colorExperimentalborder-block-endExperimentalborder-block-end-colorExperimentalborder-block-end-styleExperimentalborder-block-end-widthExperimentalborder-block-startExperimentalborder-block-start-colorExperimentalborder-block-start-styleExperimentalborder-block-start-widthExperimentalborder-block-styleExperimentalborder-block-widthExperimentalborder-color(logicalExperimental palabra clave)border-inlineExperimentalborder-inline-colorExperimentalborder-inline-endExperimentalborder-inline-end-colorExperimentalborder-inline-end-styleExperimentalborder-inline-end-widthExperimentalborder-inline-startExperimentalborder-inline-start-colorExperimentalborder-inline-start-styleExperimentalborder-inline-start-widthExperimentalborder-inline-styleExperimentalborder-inline-widthExperimentalborder-start-start-radiusExperimentalborder-start-end-radiusExperimentalborder-end-start-radiusExperimentalborder-end-end-radiusExperimentalborder-style(logicalExperimental palabra clave)border-width(logicalExperimental palabra clave)margin(logicalExperimental palabra clave)margin-blockExperimentalmargin-block-end(en-US) Experimentalmargin-block-startExperimentalmargin-inlineExperimentalmargin-inline-endExperimentalmargin-inline-startExperimentalpadding(logicalExperimental palabra clave)padding-blockExperimentalpadding-block-endExperimentalpadding-block-startExperimentalpadding-inlineExperimentalpadding-inline-endExperimentalpadding-inline-startExperimental
Propiedades para flotantes y posicionamiento
clear(inline-endExperimental yinline-startExperimental palabras claves)float(inline-endExperimental yinline-startExperimental palabras claves)insetExperimentalinset-blockExperimentalinset-block-endExperimentalinset-block-startExperimentalinset-inlineExperimentalinset-inline-endExperimentalinset-inline-startExperimental
Otras propiedades
caption-side(en-US) (inline-endExperimental yinline-startExperimental palabras claves)resizeExperimental (blockExperimental yinlineExperimental palabras claves)text-align(endExperimental ystartExperimental palabras claves)
Propiedades obsoletas
offset-block-end(en-US) Non-standard Obsoleto (ahorainset-block-endExperimental )offset-block-start(en-US) Non-standard Obsoleto (ahorainset-block-startExperimental )offset-inline-end(en-US) Non-standard Obsoleto (ahorainset-inline-endExperimental )offset-inline-start(en-US) Non-standard Obsoleto (ahorainset-inline-startExperimental )
Guías
Especificaciones
| Specification |
|---|
| CSS Logical Properties and Values 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.