min(), max() y Clamp() son magia CSS.

Buen vídeo de Kevin Powell. Aquí hay algunas notas, pensamientos y cosas que aprendí mientras lo veía. Justo cuando salió, estaba obsesionado con font-sizeel uso, pero son solo funciones, por lo que se pueden usar en cualquier lugar donde se use un número, como una longitud.

A veces, un uso bastante básico permite un código más estricto, pero el cambio para llegar allí parece un poco alucinante. Por ejemplo, cómo establecer un “máximo” aquí, realmente usamos min().

.el {  width: 75%;  max-width: 600px;  /* tighter, but the change from max to min feels weird */  width: min(75%, 600px);}

Las funciones min()y max()pueden tomar más de dos valores, lo cual es genial, ¡pero es difícil entender lo que está pasando! Sería bueno si DevTools pudiera decirle cuál elegido en un momento dado.

.el {  width: min(100px, 25%, 50vh, 30ch);}

¡No necesitas un calc()para hacer matemáticas adentro!

.el {  width: min(10vw + 10%, 100px);}

Es razonable que desee establecer un valor mínimo y máximo. Puede anidar las funciones para hacer esto, pero es menos complicado hacerlo con clamp().

.el {  /* Note we're always using a relative unit somewhere     so that zooming stays effective. */  font-size: clamp(0.9rem, 1vw + 1rem, 2.2rem);}

Aquí está el vídeo incrustado:

Enlace directo →