soy Kseso y esto EsCSS

La propiedad CSS Display ¿Qué hay de nuevo, vieja?

Las novedades de la propiedad CSS display introducidas por el documento del W3c "CSS Display Module Level 3". Tanto en su nueva concepción como las nuevas propiedades display-* (ahora display es la forma acortada) y los valores admitidos en ellas.

La propiedad CSS Display ¿Qué hay de nuevo, vieja?

·Por Kseso ✎ 4

Hoy te propongo un pequeño juego o reto antes de seguir leyendo este artículo. ¿Te atreves? ¿Sí? Pues vamos con él.

Pilla papel y bolígrafo o abre tu editor de textos favorito y a continuación escribe todos y cada uno de los valores que admite la propiedad de CSS DISPLAY. Pero no hagas trampas que nadie se enterará. Ni consultes documentación ni sigas leyendo antes de terminar tu lista.

TIC
TAC
TIC
TAC TicTac
¿Cuántos te salieron?

La propiedad CSS Display ¿Qué hay de nuevo, vieja?

Antes de hacer recuento de los valores posibles para la propiedad CSS display y que puedas comparar con tu respuesta un pequeño recordatorio sobre esta propiedad por si alguno lo necesita. ¿Vale?

El valor de la propiedad display es el que marca qué tipo de caja genera el elemento al que se le declara. Esto es, la naturaleza del elemento o lo que tradicionalmente se ha conocido como el Modelo de formato visual

Este valor de display influye o condiciona al elemento en varios aspectos, hacia su exterior y en su interior:

  1. Respecto a sí mismo: admite o no una serie de propiedades (tamaños, márgenes...) y en caso de que no cuál será su valor computado.
  2. Respecto a sus hermanos: En el comportamiento y relación del propio elementos con sus hermanos (precedentes y siguientes): fuerza un salto de línea en su dibujado o no (block, inline...).
  3. Respecto a sus hijos o elementos contenidos(sus ítems): fuerza determinadas características y comportamientos y habilita poder declarar una serie de propiedades para controlar satisfactoriamente a sus hijos o ítems (table, flex, grid...)

Propiedad Display en CSS 2

Hasta el nuevo desarrollo modular de CSS (conocido a efectos históricos como CSS 2.1) la propiedad CSS display era una sóla propiedad que admitía los valores:

  1. none
  2. inherit
  3. inline
  4. block
  5. list-item
  6. run-in
  7. compact
  8. marker
  9. table y sus asociados:
    1. inline-table
    2. table-row-group
    3. table-header-group
    4. table-footer-group
    5. table-row
    6. table-column-group
    7. table-column
    8. table-cell
    9. table-caption

Este enlace del SIDAR a la definición del Modelo de formato visual y los valores de display en español te permitirán conocer un poco más a fondo tanto qué es una como las definiciones (entonces) de los otros.

Como no es el objeto del artículo no entramos a los detalles de ello

Lo más nuevo de la propiedad CSS Display

Dos son los campos en los que la propiedad display ha sido modificada por ampliación al ser desarrollada en los nuevos módulos de CSS. El actual (Enero de 2016) es CSS Display Module Level 3 [Octubre 2015 status Working Draft]. Existe un editors draft posterior de Diciembre de 2015.

Las novedades más significativas introducida por este módulo son dos:

  1. La propiedad CSS display ahora pasa a ser una propiedad acortada o shorthand para declarar las tres nuevas:
    display-outside || display-inside || display-list
    Sobre esto tienes en el blog el post: La propiedad CSS Display ahora es la forma acortada
  2. Además de admitir las tres palabras claves universales de CSS se añaden nuevos valores y se clasifican según el punto anterior.
  3. Como curiosidad que desarrollaré en otro artículo introduce una nueva propiedad, box-suppress que actúa sobre el Modelo de formato visual y posibilita tener un toggle nativo de CSS (a semejanza de los elementos Details y Summary de HTML5.

Propiedad display-outside: Comportamiento con sus cajas hermanas:

El valor de la propiedad CSS display-outside controla el tipo de display del elemento respecto a sus hermanos. Esto es, su comportamiento en el flujo del documento. Los valores posibles son:

  1. Las tres palabras clave universales (initial, inherit, unset)
  2. none
  3. block
  4. inline
  5. contents
  6. run-in

Cualquier elemento en el flujo del documento tienen asociado por naturaleza o definición el valor block o inline y esto influye en su comportamiento en el flujo del documento: un div es un elemento de bloque y fuerza un salto de línea antes y después de él y un span lo es de línea y no lo fuerza (además de otras particularidades asociadas a cada elemento por el tipo de caja que generan).

El valor contents de la propiedad CSS display

La declaración CSS display: contents hace desaparecer la caja generada por el elemento y es sustituida por las que su contenido genera.

De forma coloquial y para entendernos: el elemento desaparece del flujo (a efectos de representación no crea nodo en el DOM) y sus hijos directos pasan a ser hijos directos de su abuelo (según el marcado).

See the Pen display: contents; by Kseso (@Kseso) on CodePen.

El resultado es que no se genera la caja azul (#334) y todos los ítems están en la misma línea.

El valor contents ya es soportado por Firefox. Si no lo estás usando para ver este artículo (o usas una versión anterior) así es como deberías ver el pen anterior.

display: contents;
display: contents;

El valor run-in de la propiedad CSS display

Al declarar a cualquier elemento display: run-in la caja generada por él no lo hace en el flujo de su padre. Pasa a ser una caja de línea en (dentro de) el elemento que le sigue.

Tengamos la típica lista de definición dl tal que algo así:

<dl> <dt>ENREDIQUE</dt> <dd>Ttravieso, que no puede permanecer quieto y termina por involucrar a otros en sus juegos aunque no estuviesen predispuestos a ello.<</dd> <>ENCALQUIQUE</dt> <dd>El que encalca la paja en el carro o en el pajar.</dd> </dl>

El código previo ya sabes qué generará. Una lista donde los elementos dt generan una caja de bloque que fuerza al dd a posicionarse en la siguiente línea. Pero si vamos a nuestro CSS y declaramos:

dt { display: run-in; } dt::after { content: ": " }

Al cambiar en su display al valor run-in lo que hacemos es generar una caja de línea que no será hija directa de la lista dl (desaparece del flujo normal), su caja pasa a estar dentro del elemento que le sigue, el dd.

Como hoy no he sido capaz de hacerlo funcionar ni en Firefox ni en Chrome para que lo veas en vivo este sería el resultado de darle soporte:

ENREDIQUE: Travieso, que no puede permanecer quieto y termina por involucrar a otros en sus juegos aunque no estuviesen predispuestos a ello.
ENCALQUIQUE: El que encalca la paja en el carro o en el pajar.

'Display: inside' o contexto de formato interno

A través de los valores englobados en este capítulo se define el tipo de "contexto de formato" (formatting context) generado dentro del elemento. Un contexto de formato es el entorno en el que un conjunto de cajas relacionadas (elementos hermanos) se componen.

Por ejemplo, un contexto de formato table establece sus cajas de acuerdo con las normas de diseño de las tablas, mientras que un contexto de formato de bloque lo hace de acuerdo a las reglas del diseño de bloques y en línea.

Para comprender este aspecto sólo tienes que pensar en qué ocurre si a un elemento le declaras display: flex, o table, o grid... preparas el terreno (el layout interno a él) para que sus ítems tengan un comportamiento u otro según las propiedades que admitan en base al display de su padre.

Los tipos de display interior posibles son:

  1. flow el flow layout (diseño del flujo) interno generado es el tradicional (block / inline)
  2. flow-root igual que el anterior pero además crea un nuevo contexto de formato de bloque
  3. table
  4. flex
  5. grid
  6. ruby ¿Qué es CSS-Ruby?

Cambio de display externo según contexto de formato

Cada uno de estos "display"´s internos lleva asociado por defecto un tipo de display externo en el flow content o flujo del contenido. Por lo general de bloque. Para poder cambiarlo con un único valor para la propiedad display en su forma acortada (formado por una sola palabra a semejanza de la forma usada en CSS 2) se puede anteponer a cada uno de ellos el valor inline- cuando su naturaleza (display externo) es de bloque.

  1. inline-block
  2. inline-table
  3. inline-flex
  4. inline-grid

En esta tabla del documento del W3c tienes toda la relación y la equivalencia entre la forma acortada y desglosada (short & long).

Display: list-item; Cajas que generan marcas

Si a estas alturas del artículo aún conservas la cordura y frescor mental seguro que has echado de menos un tipo de display de CSS 2: aquel que por su contexto de formato (display interno) convierte a sus hijos en ítems de lista: list-item cuya principal característica es que genera o permite la existencia del pseudoelemento ::marker.

En la caja de este pseudoelemento ::marker es en la que se "dibujan" las marcas o "viñetas" características de los elementos de una lista.

Pero a estas alturas del artículo y para no hacerlo más pesado y tocho de lo que ya me ha salido te remito al artículo de este blog El pseudoelemento ::marker donde lo tienes comentado en profundidad.

Casi que se me olvida el pequeño juego que te propuse en la intro del artículo ;-) ¿Cuánto de lo expuesto sobre las novedades y particularidades de la propiedad CSS display te era (como a mi) desconocido?

avatar del Editor del blog

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso