Soporte para funciones de comparación CSS min(), max()y clamp()apareció en Firefox el 8 de abril de 2020. Esto significa que estas características ahora son compatibles con todos los principales navegadores. Estas características CSS extienden nuestra capacidad de crear diseños dinámicos y diseñar componentes más flexibles que antes. Se pueden usar para ajustar el tamaño de los elementos del contenedor, las fuentes, las sangrías y más. Es cierto que un diseñador web que crea diseños de página teniendo en cuenta la posibilidad de utilizar estas increíbles funciones puede necesitar aprender a pensar de una manera nueva. Hoy quiero hablar sobre las características de estas funciones, explicar todo lo que puede ser incomprensible en ellas y dar ejemplos prácticos de su uso.
Soporte del navegador
Primero, me gustaría tocar el soporte del navegador para funciones min(), max()y clamp(). Sin embargo, aparecieron relativamente recientemente. Cabe señalar que las funciones min()y el max()uso del mismo nivel de soporte del navegador.Soporte para la función min () (la información de soporte max () también se ve así)La siguiente es información sobre el soporte para la funciónclamp().Soporte de función de abrazadera ()Funciones de comparación de CSS
La especificación CSS nos dice que hay comparación funciones min(), max()y clamp()nos permiten comparar los valores de las expresiones y representan uno de ellos. El valor devuelto por una función depende de sus características. Explore estas características.Función Min ()
Una función min()toma uno o más valores, separados por una coma, y devuelve el más pequeño de ellos. Esta función se utiliza para limitar los valores de las propiedades CSS a un nivel máximo estrictamente especificado.Considere el siguiente ejemplo. Necesitamos que el ancho máximo del elemento no exceda 500px..element {
width: min(50%, 500px);
}
Con un ancho de ventana gráfica de 1150 px, que es mayor que 1000 px, el elemento tendrá un ancho de 500 px. Elnavegador deberá seleccionar el valor más pequeño de50%y500px. El ancho de la vista afecta el resultado de la selección. Si el 50% del ancho de la ventana gráfica es mayor que500px, entonces este valor será ignorado y la función volverá500px.De lo contrario, si el 50% del ancho de la ventana gráfica es menor500px, el valor resultante se usará para ajustar el ancho del elemento. ¿Qué opinas, a qué ancho del área de visualización no excederá el 50% de su ancho500px? Esto es obviamente1000px. Con este ancho, ambos valores pasados a la función serán los mismos. Si el ancho de la ventana gráfica es menor1000px, luego se usará para ajustar el ancho del elemento.Si el ancho de la ventana gráfica es inferior a 1000 px, entonces el 50% de este ancho se usará para ajustar el ancho del elemento.Espero haber logrado explicar todo esto claramente. Pensé en la función durante mucho tiempomin(), tratando de penetrar en su esencia. Por lo tanto, me gustaría hablar claramente sobre ello. Aquí hay un video que muestra los resultados del uso de esta función.El ancho del elemento está limitado a 500 px.Aquí hay un ejemplo interactivo utilizado para grabar el video anterior. Para ver la funciónmin()en acción, intente cambiar el tamaño de la ventana del navegador.Función max ()
La función max()toma uno o más valores, separados por comas, y devuelve el mayor de ellos. Esta función se usa para fijar el valor mínimo que puede tomar una propiedad CSS.En el siguiente ejemplo, necesitamos que el ancho del elemento sea al menos 500px..element {
width: max(50%, 500px);
}
Si el 50% del ancho de la ventana gráfica es superior a 500 px, este valor se utilizará para ajustar el ancho del elemento. Elnavegador debe seleccionar el valor máximo entre50%y500px. La elección depende del ancho de la ventana gráfica. Si el 50% del ancho de la ventana gráfica es menor que500px, el navegador ignorará este valor y usará el valor500px.Si el 50% del ancho de la ventana gráfica es mayor500px, entonces el ancho del elemento se establecerá igual a este valor. Como puede ver, una funciónmax()es lo contrario de una funciónmin().Para comprender mejor esto, eche un vistazo a esta demostración interactiva.Función Clamp ()
La función le clamp()permite limitar el rango de variación de un determinado valor estableciendo sus límites inferior y superior. Toma tres parámetros: el valor mínimo, el valor calculado (recomendado) y el valor máximo. Si el valor calculado no excede los límites limitados por los valores mínimos y máximos pasados a la función, entonces devolverá ese valor.Aquí hay un ejemplo..element {
width: clamp(200px, 50%, 1000px);
}
Aquí ajustamos el ancho del elemento, que no debería ser cada 200pxvez menor 1000px. Si el valor en 50%no va más allá de estos límites, se utiliza este valor. Así es como se ve.Si el 50% del ancho de la ventana gráfica cae dentro del rango de 200px-1000px, este valor se usará para establecer el ancho del elemento. En este caso, es 575 px.Examinemos este ejemplo:- El ancho de un elemento nunca será más pequeño
200px. - El segundo parámetro de la función, establecido como
50%, se usará solo si el ancho de la ventana gráfica es mayor 400pxy menor 2000px. - El ancho del artículo no excederá
1000px.
Como resultado, podemos decir que la función le clamp()permite especificar el rango en el que puede cambiar el valor calculado que se le transmite.Aquí puede experimentar con la página que está estilizada con esta función.▍¿Cómo se calculan los resultados de la función clamp ()?
Puede encontrar información sobre MDN que cuando una función se utiliza como el valor de una propiedad CSS clamp(), es equivalente a la construcción en la que se aplican las funciones max()y min(). Eche un vistazo al siguiente ejemplo:.element {
width: clamp(200px, 50%, 1000px);
width: max(200px, min(50%, 1000px));
}
El valor 50%depende del ancho del área de visualización del navegador. Imagine que el ancho de la ventana gráfica es 1150px..element {
width: max(200px, min(50%, 1000px));
width: max(200px, min(575px, 1000px));
width: max(200px, 575px);
width: 575px;
}
▍El contexto importa
El valor calculado depende del contexto. Si especifica un valor calculado, se pueden utilizar diferentes unidades de medida: %, em, rem, vw/vh. Incluso si el valor se expresa como un porcentaje, al calcularlo, se puede usar el ancho de la ventana gráfica, si el elemento está en la etiqueta <body>o el ancho de otro elemento que es el contenedor del elemento.▍ Expresiones matemáticas
Vale la pena decir que cuando se usa una función, clamp()puede pasarle expresiones matemáticas, lo que nos evita tener que usar una función calc(). La especificación nos dice que clamp()se pueden usar expresiones matemáticas completas en cada uno de los argumentos . Por lo tanto, no hay necesidad de funciones anidadas calc(). Además, si necesita aplicar varias restricciones al valor final, puede pasar más de dos argumentos a la función.Eche un vistazo al siguiente ejemplo:.type {
font-size: clamp(12px, 10 * (1vw + 1vh) / 2, 100px);
}
¿Qué cambiarán las funciones de comparación de CSS en la forma en que diseñamos los diseños de página?
A menudo sucede que un diseñador, diseñando una página, se enfoca en dispositivos móviles y de escritorio, contando con dos escenarios para su uso. Y cuando se trabaja en algunos proyectos, se deben tener en cuenta más escenarios.Veo esta situación como se muestra a continuación.Arriba es cómo se diseñan las páginas hoy. A continuación se muestra lo que puede esperar en el futuro. Laparte superior de la ilustración es cómo están diseñadas las páginas en estos días. Aquí puede ver varios pasos que representan diferentes áreas de visualización en las que se debe diseñar la página. Estos pasos pueden, por ejemplo, representar el valor de una propiedad. La parte inferior de la ilustración muestra un rango continuo de valores que pueden obtenerse limitando este valor a un cierto mínimo y máximo. Creo que en el futuro, por ejemplo, al configurar el tamaño de fuente, los diseñadores harán algo similar al que se muestra a continuación.Los valores mínimos, recomendados y máximos de la propiedad.Para mí, esto es simplemente maravilloso. Admiro la idea de trabajar en proyectos cuyos componentes necesitan cierta flexibilidad. Por supuesto, no todos los componentes deben ser dinámicos, pero algunos de ellos pueden serlo.Casos de uso
▍ Barra lateral y área de la página principal
A la izquierda está el panel lateral. A la derecha está el área principal de la página.Por lo general, los paneles laterales de las páginas tienen un ancho fijo, y el ancho de las áreas principales se ajusta de manera flexible al área de visualización. Podemos ampliar las capacidades de la barra lateral y hacerla más dinámica, hacer que, con un área de visualización suficientemente grande, ocupe más espacio. Para lograr esto, debe limitar el tamaño del ancho mínimo de la barra lateral utilizando la funciónmax().Considere el siguiente ejemplo..wrapper {
display: flex;
}
aside {
flex-basis: max(30vw, 150px);
}
main {
flex-grow: 1;
}
El ancho mínimo del elemento asideserá 150px. Tomará tamaño 30vwsi el ancho de la ventana gráfica es mayor 500px(500 * 30% = 150).→ Aquí hay un ejemplo▍ Tamaño de fuente del encabezado
Ajuste de tamaño de fuente de encabezado flexibleUn excelente guión para usar la funciónclamp()es el ajuste de tamaño de fuente de encabezado flexible. Imagine que necesitamos que el tamaño de fuente mínimo del encabezado sea16pxy el máximo -50px. Gracias al uso de la función,clamp()podemos hacer que el tamaño de la fuente esté dentro de estos valores sin ir más bajo o más alto..title {
font-size: clamp(16px, 5vw, 50px);
}
La función clamp()es la solución perfecta para el problema anterior. Le permite establecer el tamaño de fuente para que el texto permanezca accesible y fácil de leer en diferentes tamaños del área de visualización. Si aquí, por ejemplo, utiliza la función min(), perderemos el control sobre el tamaño de fuente en la página que se muestra en pequeñas áreas de visualización..title {
font-size: min(3vw, 24px);
}
La siguiente es una ilustración de esta idea.El uso de la función min () hace que el texto parezca demasiado pequeño en la pantalla pequeña.En la pantalla del dispositivo móvil, el tamaño de fuente es demasiado pequeño. Por lo tanto, no se recomienda usar solo una función para configurar los tamaños de fuentemin(). Por supuesto, el tamaño de fuente se puede reconfigurar usando una consulta de medios, pero luego se pierde por completo el significado del uso de funciones de comparación CSS.Como ya se mencionó, una funciónmin()se puede usar dentro de una funciónmax(). Esto le permite reproducir las características de la funciónclamp()..title {
font-size: max(16px, min(10vw, 50px));
}
Aquí puedes experimentar con un ejemplo.Quiero señalar que después de la discusión en Twitter resultó que no es del todo correcto usar 10vwel tamaño de fuente como valor calculado. Es decir, estamos hablando del hecho de que esto causará problemas de accesibilidad si el usuario hace zoom en el navegador.Por lo tanto, es mejor hacerlo:.title {
font-size: clamp(16px, (1rem + 5vw), 50px);
}
Aquí, la expresión se especifica como el tamaño de fuente calculado (1rem + 5vw). Esto resuelve el problema.▍ Encabezados decorativos
Encabezado translúcido decorativo que se muestra con una fuente muy grande.¿Ve un texto translúcido grande ubicado debajo del encabezado? Este es un título decorativo, cuyas dimensiones deben ser consistentes con el tamaño de la ventana gráfica. Para formar un encabezado de este tipo, puede usar la funciónmax()con un valor expresado en unidades de medida que se le pasanvw. Esto permitirá garantizar que el tamaño de la fuente no sea inferior al valor especificado..section-title:before {
content: attr(data-test);
font-size: max(13vw, 50px);
}
→ Aquí hay un ejemplo de trabajo▍ Salida de gradientes suaves en diferentes áreas de visualización
Al ajustar gradientes usando CSS, es posible que deba ajustarlos dinámicamente para que los gradientes que se muestran en las pantallas móviles sean más suaves. Eche un vistazo al siguiente ejemplo. Hay tal gradiente:.element {
background: linear-gradient(135deg, #2c3e50, #2c3e50 60%, #3498db);
}
El gradiente en la pantalla del móvil se caracteriza por una transición demasiado nítida entre los colores.Tenga en cuenta que en la pantalla del móvil, el borde de la separación de colores es claramente visible. Esto es malo. Puede corregir la situación con la ayuda de una buena investigación de los viejos medios. (Vaya, parece que ya considero que las consultas de los medios son "tecnología buena y antigua").@media (max-width: 700px) {
.element {
background: linear-gradient(135deg, #2c3e50, #2c3e50 25%, #3498db)
}
}
Aunque esta es una forma normal de resolver el problema, en una situación similar podemos usar la función CSS min()..element {
background: linear-gradient(135deg, #2c3e50, #2c3e50 min(20vw, 60%), #3498db);
}
El resultado es lo que se muestra a continuación.El gradiente se ve suave cuando se ve en cualquier pantalla→ Aquí hay una demostración de esta idea▍ Gradiente translúcido
Cuando necesite colocar texto en la parte superior de una fotografía, debajo debe "poner" un degradado. Esto facilitará la lectura del texto. Como en el ejemplo anterior, los parámetros de gradiente deberían depender del tamaño de la ventana gráfica. Echa un vistazo a la siguiente figura.Configuración de gradiente flexible en pantallas de diferentes tamaños..element {
background: linear-gradient(to top, #000 0, transparent max(20%, 20vw));
}
Gracias a esta pequeña mejora, el gradiente en dispositivos móviles se verá mucho mejor que antes. Si el tamaño del degradado es igual, en la pantalla del escritorio, 50% del elemento principal, entonces en el dispositivo móvil ya debería estar en la región de 30%. Puede establecer el valor mínimo del tamaño del gradiente utilizando la función max().→ Aquí hay un ejemplo▍Margenes externos dinámicos
Personalización de la sangríaPuede usar unidades asociadas con las características de la ventana gráfica para ajustar la sangría dinámica de los elementos. Sin embargo, este enfoque no siempre se muestra bien. El hecho es que el usuario puede ver la página en la pantalla girada de un dispositivo móvil con una altura vertical muy grande. Aquí se explica cómo resolver este problema mediante consultas de medios:h1, h2, h3, h4, h5 {
margin: 7vh 0 1.05rem;
}
@media (max-height: 2000px) {
h1, h2, h3, h4, h5 {
margin: 2.75rem 0 1.05rem;
}
}
Aunque este código funciona correctamente, se puede lograr el mismo efecto con solo una línea de código:h1, h2, h3, h4, h5 {
margin: min(7vh, 2.75rem) 0 1.05rem;
}
Al usar la función, min()establecemos el valor máximo de sangría en 2.75rem. Como puede ver, es muy simple y conveniente.→ Aquí hay un ejemplo de trabajo▍ Ancho del contenedor
Ajuste dinámico del ancho de un contenedorSupongamos que necesitamos un elemento contenedor cuyo ancho debería ser el 80% del ancho de su elemento padre. El ancho del contenedor no debe exceder780px. ¿Cómo crear un contenedor similar? Por lo general, en esta situación, hacen algo como esto:.container {
max-width: 780px;
width: 80%;
}
Pero usar la función le min()permite limitar el ancho máximo del contenedor de esta manera:.container {
max-width: min(80%, 780px);
}
→ Aquí hay un ejemplo de trabajo▍ Sangría vertical
clamp()Me gusta la función porque es ideal para limitar el tamaño de la sangría de las secciones de la página. Eche un vistazo al siguiente ejemplo, que muestra la configuración de la parte superior de la página (sección de héroe).Configuración de la sangría de la sección ubicada en la parte superior de la página Puedeajustar de manera flexible la sangría de dicha sección utilizando solo una línea de código CSS..hero {
padding: clamp(2rem, 10vmax, 10rem) 1rem;
}
→ Aquí hay un ejemplo▍Límites y sombras
Aquí hay un video que muestra un elemento que tiene un borde ancho.Elemento con un borde anchoEn algunos casos, el diseño de páginas utiliza elementos con bordes anchos y con radios de gran radio. Cuando se muestran dichos elementos en pantallas móviles, sus límites deben hacerse más pequeños. Lo mismo ocurre con los radios de las esquinas. El uso de la función leclamp()permite ajustar dinámicamente los parámetros del borde, vinculándolos al ancho del área de visualización..element {
box-shadow: 0 3px 10px 0 red;
border: min(1vw, 10px) solid #468eef;
border-radius: clamp(7px, 2vw, 20px);
box-shadow: 0 3px clamp(5px, 4vw, 50px) 0 rgba(0, 0, 0, 0.2);
}
Aquí puedes experimentar con un ejemplo de trabajo.▍Distancia entre celdas del diseño de cuadrícula
Diseño de cuadrículaUna forma interesante de usar la funciónclamp()es establecer la propiedadgrid-gapen diseños de cuadrícula. En particular, estamos hablando del hecho de que en las pantallas móviles la distancia entre las celdas de la cuadrícula sería menor que en las de escritorio..wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: clamp(1rem, 2vw, 24px);
}
Si está interesado en usar las funciones de comparación CSS al diseñar diseños de cuadrícula, eche un vistazo a este buen artículo.→ Aquí hay un ejemplo para esta sección▍Usar en funciones CSS para comparar valores sin unidades
En el transcurso de experimentar con funciones CSS, decidí averiguar qué sucede si pasa funciones clamp()como valor mínimo 0. Así es como se ve en el código:.element {
width: clamp(0, 10vmax, 10rem);
}
Esto es mal CSS. Creo que el hecho es que los números sin unidades de medida no deberían usarse aquí.Mechanisms Mecanismos redundantes para navegadores que no admiten min (), max () y clamp ()
Como es el caso con cualquier otra característica nueva de CSS, aplicando funciones min(), max()y clamp()debe cuidar los mecanismos de copia de seguridad. Para crear estos mecanismos, puede usar uno de los siguientes enfoques.1. Configuración manual del mecanismo de respaldo
Aquí, la configuración manual se entiende como la adición al código de una propiedad que goza de un amplio soporte para el navegador. Esta propiedad debe colocarse delante de la propiedad que usa funciones de comparación CSS. Así es como podría verse:.hero {
padding: 4rem 1rem;
padding: clamp(2rem, 10vmax, 10rem) 1rem;
}
Aquí los navegadores compatibles clamp()ignorarán la primera expresión. Y aquellos que no admiten esta función utilizarán la primera forma de ajustar la sangría.2. Usando la directiva CSS apoya
Se @supportspuede usar una directiva diseñada para probar el soporte del navegador para varias tecnologías para averiguar si el navegador puede funcionar con funciones de comparación CSS. Prefiero usar esta solución en lugar del manual descrito en el primer párrafo. El hecho es que cualquier navegador que admita funciones de comparación también debe admitir la directiva @supports..hero {
padding: 4rem 1rem;
}
@supports (width: min(10px, 5vw)) {
.hero {
padding: clamp(2rem, 10vmax, 10rem) 1rem;
}
}
▍Sobre la disponibilidad de contenido
Si bien las características de comparación de CSS nos brindan una nueva forma de crear páginas web más flexibles al usarlas, se debe tener cuidado. Por ejemplo, usar una función sola min()para establecer una propiedad font-sizeno es suficiente. El hecho es que en los dispositivos móviles, una fuente cuyo tamaño se establece usando solo esta función puede ser demasiado pequeña. Cuando configure contenido de página particularmente importante, recuerde limitar la configuración mínima y máxima. De lo contrario, puede empeorar la experiencia del usuario de trabajar con el proyecto.¿Utiliza las funciones de CSS min(), max()y clamp()?