Width y Height. Los nuevos valores condicionados por el contenido

Los nuevos valores para los tamaños (width, height) de los elementos condicionados o en función del contenido del elemento, no de su ancestro o naturaleza.

Width y Height. Los nuevos valores condicionados por el contenido

Por Kseso ✎ 4

¿A que estaría bien en muchos casos no tener que echar cuentas de antemano para los tamaños (width&height) de los elementos?. Porque hasta ahora excepto el max/min, poco más había.

Sin embargo, como apuntaba en el artículo previo sobre "Centrar elementos flotados..." los nuevos valores para los tamaños traen novedades para controlar el tamaño en función del contenido del elemento, no de su naturaleza.

Tamaño condicionado por el contenido

Si se me permite usaré la expresión condicionadas para diferenciarlas de las relativas y de las absolutas que existían hasta ahora para definir tamaños. Así que podríamos resumir los tres grandes grupos de unidades para declarar tamaños de los elementos:

  1. Unidades Absolutas: el valor de la unidad es fijo y marcado de antemano. Como los píxeles, centímetros...
  2. Unidades relativas: el valor final (computado) de la unidad está en función de otro. Si es % (tanto por ciento) la referencia es el valor del padre. Ems o Rems sobre el tamaño de la tipografía... del padre o del root etc.
  3. Tamaños condicionados o en función del contenido.

Como ves, la diferencia estriba que en los dos primeros el resultado está en función del padre o ancestros de la caja. En el último es lo que hay dentro de la caja (su contenido y no su contenedor) lo que determina su tamaño.

Antes de seguir, fíjate en la imagen de abajo para ayudarte en el significado de cada nuevo valor:

Tamaños condicionales: nuevos valores height & width
Anchura de cajas condicionadas por su contenido.

Esto es lo que significa cada uno de los nuevos valores:

available
Igual a la anchura o altura de su bloque contenedor, descontados los márgenes, bordes y paddings si los tiene declarados (el padre).
min-content
Tan estrecho (o bajo) como sea posible.
max-content
tan ancho o alto como necesite su contenido, incluso si hay desborde por el lateral (width) o parte inferior (height).
fit-content
Tan ancho o alto como su contenido necesite, pero sin desbordes.
auto
el tamaño depende de otras propiedades, como display, float...
complex
Sólo para height. Similar a "auto" excepto para los elementos que tienen una relación altura/anchura intrínseca. Más sobre los "Aspect ratios".

Estos nuevos valores además de poder ser usados con las propiedades width y height son válidos, como es lógico, para sus max-/min correspondientes.

Interesante, creo. Y las posibilidades y todo el juego y jugo que se pueden sacar de ellas aún está por descubrirse.

Sin demo no hay artículo

En este pen puedes ver el funcionamiento den las anchuras de estos nuevos valores condicionados. Con una pizca de unidades relativas al viewport o ventana. Ya sabes los vw/vh y afines.

El texto de la demo en cada caja es editable, así que prueba a modificarlo para ver el comportamiento de cada propiedad

Check out this Pen!

Ver demo a full

Nota: La demo de arriba está en codepen.io. Y la visión que utilizada por defecto es la de Chrome. Por eso el min-content no actúa. Si usas ff aquí directo al pen.

Soporte:

Todos con prefijo obligado (Chrome parcial) menos IE y Opera mini. Ver tabla en canIuse

Ten presente que estamos ante nuevos valores para propiedades ya soportadas, así que el prefijo no se añade en el nombre de la propiedad, sino en el valor: width: -prefix-available

La propuesta del W3c

Para ampliar este artículo nada como acudir a las fuentes:

Artículo publicado originalmente el 10/03/2013

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 Don Kseso Kseso

Comentarios: 4

  1. A que te refieres con "root"?

    ResponderEliminar
  2. El elemento raíz. Se me escapó un palabro cuando tenemos un equivalente perfecto en español.
    Puedes ampliar algo más sobre el valor rem:
    "De Ems y Rems"
    y aquí también

    ResponderEliminar
  3. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
  4. Muy interesante el articulo.

    ResponderEliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap