“Declaración débil”

PPK analiza , aspect-ratiouna propiedad CSS para diseño que, en su mayor parte, hace exactamente lo que usted cree que hace. Se está volviendo más interesante ya que ahora está detrás de una bandera en Firefox y Safari, por lo que tendremos soporte universal muy pronto. Me gustó cómo la llamó “declaración débil”, que estoy bastante seguro de que no es un término oficial, pero es una buena manera de pensarlo.

Esto producirá un elemento 16/9:

.movie-card {  aspect-ratio: 16 / 9;}

Esto también será:

.movie-card {  width: 50%;  aspect-ratio: 16 / 9;}

Pero esto no lo hará:

.movie-card {  width: 150px;  height: 150px;  aspect-ratio: 16 / 9;}

Debido a que ha configurado explícitamente and height, widtheso es lo que se respetará. Es aspect-ratiodébil porque nunca anulará una dimensión establecida de otra manera .

Y no es solo heighty width, podría ser max-heightque tenga efecto, por lo que tal vez el elemento siga la relación de aspecto a veces, pero siempre respetará un max-*valor y romperá la relación de aspecto si es necesario.

Es tan débil que no sólo otros CSS pueden romper la relación de aspecto, sino que el contenido dentro del elemento también puede romperla. Por ejemplo, si tienes una gran cantidad de texto dentro de un elemento donde la altura solo está restringida por aspect-ratio, en realidad no estará restringida; el contenido expandirá el elemento.

Creo que todo esto es… bueno. Se siente intuitivo. Se siente como un buen comportamiento predeterminado que previene efectos secundarios no deseados. Si realmente necesitas forzar una relación de aspecto en un cuadro con contenido, el truco del relleno aún funciona para eso. Esta es simplemente una sintaxis mucho mejor que reemplaza las formas seguras de realizar el truco del relleno.

El artículo de PPK analiza aspect-ratioel comportamiento en flexbox y grid, lo que definitivamente tiene algunos problemas. Por ejemplo, si estás haciendo align-content: stretch;… esa es una de esas cosas que pueden alterar una relación de aspecto. Como él dijo: declaración débil.