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-size  This is an experimental API that should not be used in production code.
  • inline-size  This is an experimental API that should not be used in production code.
  • max-block-size  This is an experimental API that should not be used in production code.
  • max-inline-size  This is an experimental API that should not be used in production code.
  • min-block-size  This is an experimental API that should not be used in production code.
  • min-inline-size  This is an experimental API that should not be used in production code.

Propiedades para márgenes, bordes y relleno

  • border-block  This is an experimental API that should not be used in production code.
  • border-block-color  This is an experimental API that should not be used in production code.
  • border-block-end  This is an experimental API that should not be used in production code.
  • border-block-end-color  This is an experimental API that should not be used in production code.
  • border-block-end-style  This is an experimental API that should not be used in production code.
  • border-block-end-width  This is an experimental API that should not be used in production code.
  • border-block-start  This is an experimental API that should not be used in production code.
  • border-block-start-color  This is an experimental API that should not be used in production code.
  • border-block-start-style  This is an experimental API that should not be used in production code.
  • border-block-start-width  This is an experimental API that should not be used in production code.
  • border-block-style  This is an experimental API that should not be used in production code.
  • border-block-width  This is an experimental API that should not be used in production code.
  • border-color (logical  This is an experimental API that should not be used in production code. palabra clave)
  • border-inline  This is an experimental API that should not be used in production code.
  • border-inline-color  This is an experimental API that should not be used in production code.
  • border-inline-end  This is an experimental API that should not be used in production code.
  • border-inline-end-color  This is an experimental API that should not be used in production code.
  • border-inline-end-style  This is an experimental API that should not be used in production code.
  • border-inline-end-width  This is an experimental API that should not be used in production code.
  • border-inline-start  This is an experimental API that should not be used in production code.
  • border-inline-start-color  This is an experimental API that should not be used in production code.
  • border-inline-start-style  This is an experimental API that should not be used in production code.
  • border-inline-start-width  This is an experimental API that should not be used in production code.
  • border-inline-style  This is an experimental API that should not be used in production code.
  • border-inline-width  This is an experimental API that should not be used in production code.
  • border-start-start-radius  This is an experimental API that should not be used in production code.
  • border-start-end-radius  This is an experimental API that should not be used in production code.
  • border-end-start-radius  This is an experimental API that should not be used in production code.
  • border-end-end-radius  This is an experimental API that should not be used in production code.
  • border-style (logical  This is an experimental API that should not be used in production code. palabra clave)
  • border-width (logical  This is an experimental API that should not be used in production code. palabra clave)
  • margin (logical  This is an experimental API that should not be used in production code. palabra clave)
  • margin-block  This is an experimental API that should not be used in production code.
  • margin-block-end (en-US)  This is an experimental API that should not be used in production code.
  • margin-block-start  This is an experimental API that should not be used in production code.
  • margin-inline  This is an experimental API that should not be used in production code.
  • margin-inline-end  This is an experimental API that should not be used in production code.
  • margin-inline-start  This is an experimental API that should not be used in production code.
  • padding (logical  This is an experimental API that should not be used in production code. palabra clave)
  • padding-block  This is an experimental API that should not be used in production code.
  • padding-block-end  This is an experimental API that should not be used in production code.
  • padding-block-start  This is an experimental API that should not be used in production code.
  • padding-inline  This is an experimental API that should not be used in production code.
  • padding-inline-end  This is an experimental API that should not be used in production code.
  • padding-inline-start  This is an experimental API that should not be used in production code.

Propiedades para flotantes y posicionamiento

  • clear (inline-end  This is an experimental API that should not be used in production code. y inline-start  This is an experimental API that should not be used in production code. palabras claves)
  • float (inline-end  This is an experimental API that should not be used in production code. y inline-start  This is an experimental API that should not be used in production code. palabras claves)
  • inset  This is an experimental API that should not be used in production code.
  • inset-block  This is an experimental API that should not be used in production code.
  • inset-block-end  This is an experimental API that should not be used in production code.
  • inset-block-start  This is an experimental API that should not be used in production code.
  • inset-inline  This is an experimental API that should not be used in production code.
  • inset-inline-end  This is an experimental API that should not be used in production code.
  • inset-inline-start  This is an experimental API that should not be used in production code.

Otras propiedades

  • caption-side (en-US) (inline-end  This is an experimental API that should not be used in production code. y inline-start  This is an experimental API that should not be used in production code. palabras claves)
  • resize  This is an experimental API that should not be used in production code. (block  This is an experimental API that should not be used in production code. y inline  This is an experimental API that should not be used in production code. palabras claves)
  • text-align (en-US) (end  This is an experimental API that should not be used in production code. y start  This is an experimental API that should not be used in production code. palabras claves)

Propiedades obsoletas

  • offset-block-end (en-US)  This API has not been standardized.   This deprecated API should no longer be used, but will probably still work. (ahora inset-block-end  This is an experimental API that should not be used in production code. )
  • offset-block-start (en-US)  This API has not been standardized.   This deprecated API should no longer be used, but will probably still work. (ahora inset-block-start  This is an experimental API that should not be used in production code. )
  • offset-inline-end (en-US)  This API has not been standardized.   This deprecated API should no longer be used, but will probably still work. (ahora inset-inline-end  This is an experimental API that should not be used in production code. )
  • offset-inline-start (en-US)  This API has not been standardized.   This deprecated API should no longer be used, but will probably still work. (ahora inset-inline-start  This is an experimental API that should not be used in production code. )

Guías

Especificaciones

Especificación Estado Comentario
CSS Logical Properties and Values Level 1 Editor's Draft Definición inicial.

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.