Estudio de las funciones CSS min(), max(), clamp()

Hoja de estudio: Edú Romero Andrade | Guayaquil, Ecuador

Ir a www.duduromeroa.com

INTRODUCCIÓN

Entender las unidades de viewport, relativas y fijas

ATENCIÓN: Estas funciones en CSS estan activas solo para navegadores más actualizados. (en Ópera, se debe usar una versión v.75 o mayor). EN FireFox, funcionan con la v. Extendida.

Para trabajar con viewport: Los valores de propiedades de ancho o vw (view width), o de alto o vh (view height) indican la cantidad de pixeles de un elemento con esas propiedades, pero mostrados según la extensión o contracción de la ventana del navegador.

Ejemplo abajo: las barras tendrán el 10% y el 50% de ancho en relación con el ancho dinámico (ancho modificable) de la ventana del navegador.

Así mismo, la 'palabra ok' tendrá una dimensión indicada en relación con el ancho del navegador. Aunque esta aplicación podría tener limitaciones (ver código).

Ejemplo con propiedad width: VALORvw;

width: 10vw;
width: 50vw;

font-size: 4vw;

• Relación con elementos padre: Los valores relativos (como vw, vh o porcentajes) se mostrarán según las dimensiones del elemento padre (o elemento abarcador de subelementos).
• Relación con dimensiones fijas: Unidades de px se mantendrán fijas aunque el viewport o el elemento padre sea alterado.

La función min(valor, valor)

• La función min() selecciona el valor más pequeño según una constante comparación entre dos o más valores indicados entre paréntesis (llamados argumentos). Esos argumentos podrán ser relativos (como vw, vh, %, rem, em) o absolutos (valores en píxeles).
• El orden de los argumentos NO determina la elección del valor más pequeño.
• Para elegir el valor menor de entre los argumentos de min() el sistema evaluará la cambiante dimensión del viewport, o de uno o más elementos padre con la propiedad min().

En otras palabras, min(valorA, valorB) quiere decir "se elige el valor más pequeño siempre que se mantenga menor al resto"; o, mientras el resto de valores sea mayor, se elige al menor"; o "se elegirá el valor más pequeño pero no será mayor al valor más grande".

En otras palabras, es buena combinación usar unidades vw (relativas) junto con rem (absolutas), siempre que el font-size se mantenga en 16px cuando deseamos un comportamiento de ampliación/reducción.

Ejemplo con propiedad min() con unidades vw y rem

font-size: min(5vw, 6rem);

¿Qué sucede con las unidades vw y rem?

• La unidad vw realmente está alterando un dato dinámico en tiempo real. Ese dato es su valor en pixeles (ejemplo, 5% de un total dado es igual a ese valor en pixeles). Esa alteración solo es evidente en los cambios de tamaño de la tipografía.
• En cambio, la unidad rem es fija, pues obtiene su valor base desde los 16px fijos, a menos que sea cambiado desde CSS.

¿Por qué la función min() elige el valor más pequeño?

• Porque da una progresión de escala de menor a mayor, incluso cuando los argumentos no estan en ese orden. Ejemplo: la propiedad elemento: min(20vw, 4vw, 55px) elegirá siempre el menor valor mientras se altere dinámicamente las dimensiones del navegador; y mientras el resto de valores sea mayor al valor menor elegido.

¿Por qué es necesario más de un valor relativo en min()?, ¿No basta tener uno solo?

• 1) Porque el único valor que dispondríamos sería fijo, sin opción de cambio.
• 2) Los valores relativos serán variables a lo largo del estado cambiante de un elemento padre, como las dimensiones del marco del navegador.
• 3) En cambio, los valores absolutos (aquellos dados en pixeles) no dependerán de un elemento padre. Los valores absolutos se colocan entre los argumentos finales de la función min().

¿Es buena práctica usar valores relativos (%, rem, em) o valores absolutos (px).?

• Es útil usar primero valores relativos (cambiantes en relación a un padre y en tiempo real); y luego los absolutos (más estáticos, no dependen de un padre).

FUNCIÓN min()con valores de dimensiones de área

¿Por qué este recuadro solo muestra un ancho de 20vw (el 20% del ancho del viewport)?

Porque a pesar de ampliar la ventana del navegador, ese elemento (que ahora es de 20% del total del ancho de la ventana) todavía se mantiene menor a 600px. Cuando el ancho del elemento exceda los 600px, entonces la función min() elegirá que se mantenga a 600px de ancho.

EN RESUMEN: Cuando el ancho de la ventana gráfica supere los 3000px, el 20% (20vw) de 3000 será mayor que 600px; por lo que el ancho del elemento quedará fijado a 600px (fijado, por que px son unidades absolutas). Por ejemplo, cuando el ancho del viewport sea de más de 3050px (el 20% de 3050px es 610px) entonces el elemento siempre tendrá un ancho de 600px.

Esa es la razón por la cual todavía no vemos que el recuadro tenga 600px.

FUNCIÓN min() con dos valores relativos

La función max()

• Durante la interacción con las dimensiones de la ventana del navegador, la función max() elige el argumento (valor entre paréntesis) más alto en comparación con dos o más argumentos contenidos en esa función.
• El orden de los argumentos no influye en la elección del valor más alto de los argumentos.
• Cuando dos o más argumentos relativos estén siendo alterados por la dinámica de las dimensiones del navegador, se elegirá siempre y en tiempo real al valor más alto.

font-size: max(2.4vw, 1rem);

Entonces ¿En qué se diferencian min() y max()?: Ambas funciones limitan o imponen una sola elección de valor, pero de forma dinámica. Eso ocurrirá mientras las dimensiones de la ventana del navegador estén siendo estrechadas o ampliadas. Aún así, ambas funciones se diferencian en lo siguiente:

• width: min(EligeValorMenor, valorMayor) no supera un valor máximo definido.
• width: max(valorMinimo, EligeValorMayor) no supera un valor mínimo definido.

• En otras palabras:
• Elegir siempre un valor MENOR significa que nunca pasará de un valor mayor dado.
• Elegir siempre un valor MAYOR significa que nunca pasará de un valor menor dado.

• Así mismo:
• Con min() siempre será evidente el valor más pequeño. Por ejemplo, la tipografía o el área más pequeña.
• Con max() siempre será evidente el valor más grande. Por ejemplo, la tipografía o el área más grande.

En el siguiente ejemplo se mostrará cómo iguales valores de argumentos funcionan diferente en ambas funciones.

Nota: Si esta viendo este contenido en un navegador de pantalla de teléfono, altere la posición vertical y horizontal de la pantalla para apreciar el comportamiento. Si está en navegador de computadora, altere las dimensiones del marco del navegador.

En resumen, la diferencias entre min() y max() está en la elección del único valor escogido; es decir, se elegirá un solo valor durante una constante medición de las dimensiones del marco del navegador. Si un valor elegido cambia, se elegirá el siguiente valor según la función indicada.

min(2.4vw, 1rem);

max(2.4vw, 1rem);

Por otro lado, la siguiente función a estudiar -clamp()- combina las funciones min() y max(), anteriormente revisadas.

La función calc()

Función para cálculos aritméticos. Ejemplos:

width: calc(10px + 100px);

width: calc(100% - 30px);

font-size: calc(1.5rem + 3vw);

Y con el uso de variables CSS:

--ancho: calc( var(--nuevo) / 2);

Desde el año 2015, autores como Geoff Graham y Mike Riethmuller proponían -desde la función CSS calc()- una sintaxis CSS para adaptar tipografías y otras formas según una variable y en tiempo-real modificación de las dimensiones del marco de un navegador web.

Graham propuso font-size: calc([ancho mínimo] + ([ancho máximo] - [ancho mínimo]) * ((100vw - [mínimo marco navegador]) / ([máximo marco navegador] - [mínimo marco navegador])));

Donde los valores presentes son:

• Del marco del navegador:
• maximum viewport width: máximo ancho del marco del navegador
• minimum viewport width: mínimo ancho del marco del navegador
• Del ancho del elemento HTML:
• maximum size: máximo tamaño del elemento HTML
• minimum size: mínimo tamaño del elemento HTML

En la siguiente imagen se muestra la relación de esas dimensiones

Y en la siguiente aplicación, se usa la función calc() como primer ejemplo de la adaptación de un elemento según datos de mínimos y máximos, pero aún sin usar la función clamp() a estudiar luego. Nota: Ojo con qué valor de calc() lleva el prefijo de la unidad (como px, por ejemplo) y qué no lleva ese prefijo

En lo siguiente, se intentará explicar cómo la función clamp() resume (en una sola línea) lo elaborado por calc().

La función clamp()

• Usa tres argumentos: valor mínimo, valor preferido y valor máximo.
• Valor mínimo: no puede ser menor a ese valor
• Valor preferido: Es un valor a medio camino entre el valor menor y el valor mayor
• Valor máximo: no puede ser mayor a ese valor
• clamp() reemplaza las funciones de media queries y los cálculos extensos -mediante la función calc()- para adaptar tamaños.

En el siguiente ejemplo se muestra la aplicación clamp() para escalar texto. El código usado es:

Titulo escalable con clamp()

• Se tomó referencia del site Modern fluid typography editor
• "A mis 18 años de edad me involucré en el teatro junto a mi hermano y primer referente artístico, Omar San Lucas".

En otro ejemplo, con un elemento geométrico