ManzDev
Perfil de Manz Dashboard de actividad
HTML5 Etiquetas HTML
CSS CSS vanilla
PostCSS Transformador CSS
Javascript Javascript ES2020+
NPM Node Package Manager
WebComponents Componentes web
Terminal Terminal de GNU/Linux
VueJS Framework VueJS 3
Automatizadores Empaquetadores Javascript
Dibujando con CSS ¡Dibujos hechos con sólo CSS!
Experimentos con Javascript ¡Experimentos con Javascript!

Propiedades lógicas CSS

Tras mucho tiempo utilizando un modelo de cajas tradicional en CSS, se ha creado una nueva familia de propiedades lógicas que permiten definir zonas concretas de un elemento de forma que se adecuan mucho mejor a diferentes idiomas donde la escritura o lectura no es de izquierda a derecha, y por lo tanto, palabras como left y right o top y bottom pueden ser confusas o ambiguas.

Es por ello, que entramos en una era de transición donde hay que adaptarse a estas nuevas propiedades y entender como funcionan, para así conseguir crear código mucho más práctico, independientemente del idioma en el que estemos trabajando.

El modelo de cajas de CSS

Antes de empezar, hay que tener claro el modelo de cajas en CSS, ya que nos basaremos en él para entender la nueva familia de propiedades. Lo hemos explicado en capítulos anteriores como en modelo de cajas de CSS, por lo que si no lo conoces, es conveniente que le eches un vistazo antes de continuar.

Modelo de cajas CSS

Básicamente, las propiedades lógicas de CSS son un renombrado de propiedades y valores de CSS que hacen referencia a un concepto que puede ser erróneo en determinadas situaciones. Esta nueva familia de propiedades viene a reemplazar muchas de las propiedades que encontraremos en las siguientes categorías:

Nombre Descripción
Modelo de cajas Propiedades de dimensión, como width o height.
Márgenes y rellenos Propiedades relativas a margin y padding.
Bordes Propiedades relacionadas con border.
Bordes redondeados Propiedades relacionadas con border-radius.
Posicionamiento CSS Propiedades relacionadas con position, como top o left.

La idea de todos estos cambios, desde un punto de vista físico a un punto de vista lógico, es que sea mucho más sencillo alterar el orden de flujo de los elementos en bloque y en línea y que podamos alterarlo, de modo que las nuevas disposiciones sean coherentes, por ejemplo, cambiando este flujo con la propiedad writing-mode:

<div class="box">Hello</div>

<style>
body {
  writing-mode: horizontal-tb;
}

.box {
  /* Propiedades lógicas */
  inline-size: 150px;
  block-size: 150px;
  border-block-start: 50px solid black;
  border-block-end: 50px solid hotpink;

  /* Otras propiedades */
  display: flex;
  justify-content: center;
  align-items: center;
  background: red;
  color: #fff;
  font-size: 42px;
}
</style>

En el ejemplo anterior, prueba a cambiar el valor de la propiedad writing-mode entre horizontal-tb, vertical-rl o vertical-lr. Tras leer este artículo, este ejemplo cobrará sentido.

Propiedades de dimensión

El primer cambio que hay que tener claro, es que en el futuro no hablaremos de ancho (width) y alto (height) de los elementos, sino de un concepto algo más abstracto. Ahora debemos tener en cuenta que los conceptos «en linea** (inline) y en bloque (block), van a reemplazar los anteriores.

Cuando antes hablabamos de ancho, ahora estaremos hablando de espacio en dirección «en línea», mientras que lo que antes denominábamos alto, ahora es espacio en dirección «en bloque». A priori, puede parecer lioso, pero la idea es simplificarlo globalmente, incluyendo todos los idiomas y su forma de escritura o dirección.

Propiedades lógicas CSS

Pero veamos antes como quedarían las propiedades relacionadas con dimensiones:

Propiedad antigua Nueva propiedad Descripción de la propiedad
width inline-size Indica el espacio que ocupa «en linea» el elemento.
height block-size Indica el espacio que ocupa «en bloque» el elemento.
min-width min-inline-size Indica el espacio mínimo «en línea».
max-width max-inline-size Indica el espacio máximo «en línea».
min-height min-block-size Indica el espacio mínimo «en bloque».
max-height max-block-size Indica el espacio máximo «en bloque».

Márgenes y rellenos

En el caso de la familia de propiedades margin-* y padding-*, muchas de sus propiedades individuales sufren cambios debido a que contienen palabras como top, left, right o bottom en su nombre.

Así pues, las propiedades de la familia margin-* cambian a las siguientes:

Propiedad antigua Nueva propiedad Descripción de la propiedad
margin-left margin-inline-start Relleno «en línea» del elemento por donde empieza.
margin-right margin-inline-end Relleno «en línea» del elemento por donde acaba.
- margin-inline Relleno «en línea» del elemento (atajo de las dos anteriores).
margin-top margin-block-start Relleno «en bloque» del elemento por donde empieza.
margin-bottom margin-block-end Relleno «en bloque» del elemento por donde acaba.
- margin-block Relleno «en bloque del elemento (atajo de las dos anteriores).
margin margin Esta propiedad no sufre cambios.

De forma análoga, la familia de propiedades padding-* sufre los cambios correspondientes:

Propiedad antigua Nueva propiedad Descripción de la propiedad
padding-left padding-inline-start Relleno «en línea» del elemento por donde empieza.
padding-right padding-inline-end Relleno «en línea» del elemento por donde acaba.
- padding-inline Relleno «en línea» del elemento (atajo de las dos anteriores).
padding-top padding-block-start Relleno «en bloque» del elemento por donde empieza.
padding-bottom padding-block-end Relleno «en bloque» del elemento por donde acaba.
- padding-block Relleno «en bloque del elemento (atajo de las dos anteriores).
padding padding Esta propiedad no sufre cambios.

Propiedades de bordes

Ya en el modelo de cajas tradicional teníamos una amplia variedad de propiedades referentes a bordes, para hacer referencia a las diferentes partes del borde un elemento, y además sus respectivas características como el grosor, el estilo o el color.

Ahora, con las nuevas ropiedades lógicas de bordes, tenemos a nuestra disposición una primera serie de propiedades:

Propiedad antigua Nueva propiedad Descripción de la propiedad
border-left-width border-inline-start-width Tamaño del inicio del borde «en línea».
border-right-width border-inline-end-width Tamaño del final del borde «en línea».
- border-inline-width Propiedad de atajo de las dos anteriores.
border-left-style border-inline-start-style Estilo del inicio del borde «en línea».
border-right-style border-inline-end-style Estilo del final del borde «en línea».
- border-inline-style Propiedad de atajo de las dos anteriores.
border-left-color border-inline-start-color Color del inicio del borde «en línea».
border-right-color border-inline-end-color Color del final del borde «en línea».
- border-inline-color Propiedad de atajo de las dos anteriores.
border-left border-inline-start Propiedad de atajo de border-inline-start-*.
border-right border-inline-end Propiedad de atajo de border-inline-end-*.
- border-inline Propiedad de atajo de las dos anteriores.

De la misma forma que tenemos todas las anteriores, relativas a las antiguas propiedades border-left-* y border-right-*, tenemos las siguientes propiedades «de bloque», que hacen referencia a las antiguas propiedades border-top-* y border-bottom-*:

Propiedad antigua Nueva propiedad Descripción de la propiedad
border-top-width border-block-start-width Tamaño del inicio del borde «en bloque».
border-bottom-width border-block-end-width Tamaño del final del borde «en bloque».
- border-block-width Propiedad de atajo de las dos anteriores.
border-top-style border-block-start-style Estilo del inicio del borde «en bloque».
border-bottom-style border-block-end-style Estilo del final del borde «en bloque».
- border-block-style Propiedad de atajo de las dos anteriores.
border-top-color border-block-start-color Color del inicio del borde «en bloque».
border-bottom-color border-block-end-color Color del final del borde «en bloque».
- border-block-color Propiedad de atajo de las dos anteriores.
border-top border-block-start Propiedad de atajo de border-block-start-*.
border-bottom border-block-end Propiedad de atajo de border-block-end-*.
- border-block Propiedad de atajo de las dos anteriores.

Como se habrá podido ver en las secciones anteriores, el modelo clásico pasa a un nuevo modelo similar al que se puede ver en la siguiente imagen:

Classic vs Propiedades lógicas CSS

Redondeo de esquinas

La familia de propiedades border-radius también sufre cambios, ya que muchas de sus propiedades incluían las palabras top, left, right y bottom. Quedan como se ve en la tabla a continuación:

Propiedad antigua Nueva propiedad Descripción de la propiedad
border-top-left-radius border-start-start-radius Esquina inicial en ambas direcciones.
border-top-right-radius border-start-end-radius Esquina inicial «en bloque» y final «en línea».
border-bottom-left-radius border-end-start-radius Esquina final «en bloque» e inicial «en línea».
border-bottom-right-radius border-end-end-radius Esquina final en ambas direcciones.
border-radius border-radius Esta propiedad no sufre cambios.

La propiedad inset

Por último, otras de la propiedades que sufren cambios, son las que suelen acompañar a la propiedad position, ya que existen varias propiedades denominadas top, left, right y bottom. Tras la adición de las propiedades lógicas, se añaden las siguientes:

Propiedad antigua Nueva propiedad Descripción de la propiedad
left inset-inline-start Esta propiedad desplaza el elemento desde el inicio «en línea».
right inset-inline-end Esta propiedad desplaza el elemento desde el final «en línea».
- inset-inline Propiedad de atajo de las dos anteriores.
top inset-block-start Esta propiedad desplaza el elemento desde el inicio «en bloque».
bottom inset-block-end Esta propiedad desplaza el elemento desde el final «en bloque».
- inset-block Propiedad de atajo de las dos anteriores.
- inset Propiedad de atajo de inset-inline e inset-block.

La propiedad inset funciona de forma similar a margin o padding, puesto que puede tomar tanto de 1 a 4 parámetros, para indicar lo que antiguamente se hacía con las propiedades individuales top, left, right y bottom:

Propiedad Valores Descripción
inset 1 parámetro: Mismo desplazamiento para todos.
2 parámetros: [block] [inline]
3 parámetros: [block-start] [inline] [block-end]
4 parámetros: [block-start] [inline-end] [block-end] [inline-start]

Propiedades lógicas

A continuación, puedes ver un gráfico de como quedarían las diferentes propiedades lógicas visualmente, junto a sus propiedades de atajo:

Propiedades lógicas CSS (Resumen)

La compatibilidad en navegadores de las propiedades lógicas de CSS comienza a ser interesante, puesto que hasta Safari ha implementado parcialmente las diferentes propiedades (a excepción de las derivadas de border-radius). Aquí puedes ver detalladamente el soporte actual:

Otros cambios menores

De la misma forma, las propiedades CSS que antes aceptaban valores como left, right, top o bottom, ahora son reemplazados por inline-start, inline-end, block-start y block-end respectivamente:

Propiedad Nuevos valores
caption-side inline-start, inline-end, o block-start y block-end cuando es aplicable.
float inline-start e inline-end.
clear inline-start e inline-end.
text-align start e end.
resize block e inline.

Además, propiedades de paginación como page-break-after o page-break-before reemplazan los valores left y right por verso y recto respectivamente. Por su parte, las pseudoclases :left y :right se reemplazan por :verso y :recto:

Propiedad o Pseudoclase Cambios realizados
page-break-before Se añaden los valores verso y recto.
page-break-after Se añaden los valores verso y recto.
:left La pseudoclase se renombra como :verso.
:right La pseudoclase se renombra como :recto.
Manz
Publicado por Manz

Docente, divulgador informático y Streamer de código. Amante del CSS y de la plataforma web en general. Autor de Emezeta.com tiempo atrás. Ha trabajado como profesor en la Universidad de La Laguna y es director del curso de Programación web FullStack y FrontEnd de EOI en Tenerife. En sus ratos libres, busca GIF de gatos en Internet.