Ahmad Shadeed documenta un truco CSS genuino de la base de código CSS de Facebook. La idea es que cuando un elemento tiene el ancho completo de la ventana gráfica, no tiene border-radius. Pero de lo contrario, tiene 8px de border-radius. Aquí está el código:
.card {
border-radius: max(0px, min(8px, calc((100vw - 4px - 100%) * 9999)));
}¡Una línea! Super ordenado. El fondo de esto es la comparación entre 100vw y 100%. Esencialmente, el border-radius sale a 8px la mayor parte del tiempo. Pero si el componente adquiere el mismo ancho que la ventana gráfica (dentro 4px, pero yo diría que esa parte es opcional), entonces el valor de la border-radius se convierte en 0px, porque la ecuación produce un número negativo (inválido).
El 9999 la multiplicación significa que nunca obtendrás números positivos bajos. Es una palanca. O obtendrás 8px o 0px y nada en el medio. Intente eliminar esa parte, cambiar el tamaño de la pantalla y ver cómo se transforma a medida que la ventana gráfica se acerca al tamaño del componente:
¿Por qué hacerlo así en lugar de hacerlo a @media ¿consulta? Frank, el desarrollador detrás de la elección de Facebook, dice:
No es una consulta de medios, que compara la ventana gráfica con un ancho fijo. Es efectivamente una especie de consulta de contenedor que compara la ventana gráfica con su propio ancho variable.
Y:
Esta es una solución de propósito más general, ya que no necesita saber el tamaño de la tarjeta. Una consulta de medios dependería del ancho de la tarjeta.
Aparentemente, la técnica se llama Técnica de los “Cuatro Fabulosos”, que es útil en los correos electrónicos.