CSS Intrinsic Sizes: tamaños en función del contenido 10.7.16

CSS Intrinsic Sizes: tamaños en función del contenido

Con los elementos con su display computado como "block" siempre ha habido pelea por su tendencia a ocupar todo el ancho que tengan a mano. Circunstancia que, según el caso, complica la vida del desarrollador. Más, si cabe, en la era del RWD y del mantra el contenido lo primero.

Con el tema de las anchuras de los padres y la relación que mantienen con su contenido o hijos hay unos comportamientos típicos en el modelo de caja tradicional y lo definido por la especificación CSS2.1:

1. Si el padre es o está declarado como 'block' ocupara toda la anchura disponible, con independencia de su contenido.
2. Esto se puede evitar si lo hacemos flotar o ser del tipo 'inline-block'. En esta situación su anchura viene definida por el elemento más ancho. O lo que es lo mismo: crecerá a medida que lo hace el hijo con mayor anchura.
3. Recurrir al display: table/table-X
4. Fijar la anchura del padre ya sea a un valor fijo (absoluto o relativo) o limitado con max/min-width.

Es obligado aclarar que este comportamiento (ocupación de todo el espacio disponible) es posible alterarlo con los nuevos desarrollos de CSS3 concernientes al display interior o display-inside como el flex layout, CSS Grid, Regiones CSS o incluso las multicolumnas CSS.

En la mayoría de situaciones se consigue lo pretendido con algo de lo anterior. Eso sí, teniendo que solucionar, añadiendo código o elementos complementarios, los efectos inherentes: limpiar flotados, no poder aplicar ciertas propiedades, renunciar a controlar algunos aspectos... Y si es con anchura limitada o nos quedamos cortos o nos pasaremos si se desconoce a priori el tamaño de los hijos.

Pero hay situaciones (como la que muestra imagen previa de los burros) en que todo lo anterior es insuficiente. Por ejemplo una imagen con su pie de foto. Si la imagen es de menor anchura que el texto del pie queda algo tan feo como lo de la imagen adyacente. Que se puede arreglar en parte centrando la imagen. Pero ni con esas.

En estas situaciones todo pide que la anchura del padre (fondo azul claro) la defina la imagen o elemento principal y que los secundarios (el texto en la imagen y el figcaption del código de abajo) se acomode a ella y no fuercen el crecimiento del padre

Un caso típico es el código de abajo. Una imagen con su pie de foto y título. Para la demo están contenidas en un elemento figure

Los nuevos valores para los tamaños de elementos

Intrinsic Sizes:
El "Tamño Intrínseco" determina tamaños basados ​​en el contenido de un elemento, sin tener en cuenta su contexto.

‘fill-available’ | ‘max-content’ | ‘min-content’ | ‘fit-content’

La novedad para los valores admitidos por las propiedades width min-width max-width height min-height max-height son las palabras clave recogidas en el documento CSS Intrinsic & Extrinsic Sizing Module Level 3:

1. fill-available
2. max-content
3. min-content
4. fit-content

En el caso que nos ocupa, el valor que debemos usar es min-content. Y se declara de forma tan sencilla como:

Con este valor le estamos diciendo al elemento figure que su anchura sea tal que quepa el elemento hijo que tenga la menor anchura de línea indivisible (sin producir recortes en él). Y aquellos que pudiéndose distribuir en varias líneas si exceden esa anchura que los distribuya en las que necesite.

Así, en este ejemplo, el elemento con menor anchura de linea indivisible es la imagen. La anchura de la imagen aerá la que defina la anchura de figure. Y tanto el tamaño del quote>figcaption como del párrafo (que son bloques y con otros valores tradicionales de width forzarían el crecimiento del figure) aquí distribuyen su contenido (que es texto y se puede "redistribuir") para que se acomode sin superar la anchura de la imagen.

El aspecto de sin recortes es importante: en caso de existir varios hijos con mínimos indivisibles distintos (como varias imágenes de anchura dispar), el valor computado para min-content es el de la imagen mayor.

Sólo eso y un poco de Css para ornamentar la imagen y el texto y el resultado es el que puedes ver en este pen.

See the Pen min-content / max-content by Kseso (@Kseso) on CodePen

Ver demo

En el segundo 'figure' de este pen el valor utilizado para la anchura es max-content. Y como verás, el que marca la anchura no es el figcaption sino el párrafo.

Amplía información

1. Para conocer los detalles relativos a estos nuevos valores y el resto de propiedades afines recogidas por el documento así como el concepto "intrinsic sizes" según de qué elemento se trate no dejes de ir a la fuente original.
2. También lo puedes conocer con el artículo Width y Height. Los nuevos valores "condicionados" por el contenido de este blog.
3. Una aplicación práctica de estos nuevos valores la tienes en el post Centrar elementos flotados con fit-content sin saber número ni tamaños . Un menú centrado con independencia del número de items y su tamaño.
4. El soporte por los navegadores a estos nuevos valores puedes consultado en caniuse: Intrinsic Sizes

Corolario

La cara y actitud de quienes se mantienen informados de los últimos avances en Css cuando les surgen los problemas.

Artículo publicado originalmente el 10/8/13.

Kseso

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