Conseguir que tu web se vea bien en móvil puede ser un gran coñazo. Lo sé, me pasaba :). Entonces descubrí la función clamp() y la tarea se convirtió en 20 veces más sencilla. En este artículo veremos qué es la función clamp() en CSS, para qué sirve y cómo usarla adecuadamente.
Pues eso, ¿qué viene siendo la función clamp() en CSS?
La función clamp() en CSS es una forma de especificar un valor numérico que debe estar dentro de un rango específico. Este rango se define con tres parámetros: el valor mínimo, el valor preferido que buscamos y el valor máximo. La sintaxis básica de clamp() es la siguiente: clamp(min, preferred, max). Pongamos un ejemplo.
Imagínate que quieres que el texto de tu página web, en específico los párrafos (p), tenga un tamaño máximo de 2rem en ordenadores y pantallas grandes, y un tamaño mínimo de 1rem en dispositivos con menor pantalla. No quieres que suba ni baje de ese máximo y mínimo. Pues entonces, establecerías el tamaño de los párrafos (p) de tu web de la siguiente manera:
p{
font-size: clamp(1rem, 1.53vw + 0.694rem, 2rem);
}¿No sabes a qué me refiero con la unidad “rem”? Aquí te dejo mi anterior artículo sobre unidades de CSS en desarrollo web.
Ventajas de clamp() en el diseño web responsive
Vale, hasta aquí todo bien, pero, ¿cómo aplico esto a la hora de diseñar mi web y qué me ahorro con ello? Pues mucho tiempo y dolores de cabeza, verás.
Flexibilidad en tamaños de pantalla
La función ‘clamp()’ permite adaptar dinámicamente el tamaño de los elementos según el tamaño de la pantalla. Esto es esencial para brindar una experiencia óptima en una variedad de dispositivos, desde teléfonos móviles hasta monitores de escritorio.
Normalmente, cuando quieres que el tamaño de algo (en este caso, el texto, pero destacar que esta función tiene muchos usos que mostraré después) varíe según el ancho de la pantalla, tienes que establecer un tamaño para cada breakpoint, es decir, el texto tiene un tamaño de 1rem o 16px en móviles, pero de 2rem o 32px en escritorio. Verás que si estableces los tamaños de esta forma, una vez que pasas de un breakpoint a otro, es decir, haces la pantalla más pequeña, el texto “salta” de un tamaño a otro de forma un poco feílla. Con clamp() esto no ocurre: el texto va creciendo o decreciendo poco a poco con el tamaño de la pantalla, adaptándose según los parámetros que hemos establecido.
¿Quieres comprobarlo? Ponlo a prueba en este artículo: haz el tamaño de la ventana más ancho o estrecho para simular un teléfono, y verás como el texto y otras partes de la web, como espacios y márgenes, van cambiando de tamaño de forma dinámica. Lo notarás más fácilmente en los encabezados.
Mantenimiento de tu web simplificado
Al usar la función ‘clamp()’, el mantenimiento del código se simplifica, ya que los tamaños y estilos se ajustan de manera automática. Esto puede hacer que el código sea más limpio y fácil de entender.
¿Cómo lo hago yo? En la hoja de estilos CSS de mi web (en este caso, en el child theme de Bricks Builder) creo variables con estas funciones. Así, si en algún momento quiero retocar el tamaño de algún ítem, no tengo ni que entrar en el editor visual de la web, simplemente en la hoja de estilos, desde la que puedo cambiar todo. Aquí te dejo una captura de algunas de mis variables:
¿Esto de las variables no te suena? En breves publicaré un artículo sobre variables CSS en desarrollo web, y por qué necesitas utilizarlas para no volverte loco.
Vale Flavia, ¿pero esos valores de dónde los sacas?
Pues buena pregunta. Los valores máximos y mínimos de los encabezados y párrafos en diseño web siempre suelen rondar los mismos valores, ya que se definen los más adecuados a nivel de usabilidad. ¿Pero el valor preferido o preferred? Uso una calculadora clamp().
¿Qué narices es una calculadora clamp()?
Un recurso valioso al explorar la función clamp() en CSS es utilizar calculadoras online que simplifican el proceso de determinar los valores adecuados para tus proyectos. Una de las calculadoras más conocidas y útiles en este contexto es la proporcionada por Kevin Geary en su sitio web.
En estas calculadoras, en base a la Root Font Size que utilizas (en mi caso 62,5%), le das un valor máximo y mínimo en rem para la función que quieres conseguir, y la calculadora saca el valor preferido. Solo te queda copiar y pegar el código en tu hoja de estilos.
Te dejo por aquí el enlace para acceder a la calculadora clamp() de Kevin Geary (la de la captura). Súper simple, no tiene ciencia ninguna.
¡Ya no hay excusa! Tu web DEBE estar adaptada a móvil
La función clamp() en CSS facilita demasiado la vida. Conseguir que una web sea responsive no tiene que ser un quebradero de cabeza. Además, si te ayudas de calculadoras, literalmente tardas 10 minutos en establecer valores dinámicos en todos los aspectos de tu web gracias a la creación de variables. ¡Con esta base puedes comerte el mundo!
Si te ha quedado cualquier duda o quieres hacerme alguna pregunta, ¡mándame un correo o háblame al LinkedIn!