¿Qué es Clamp () en CSS (y cómo usarlo)

Si alguna vez ha intentado que su sitio se vea bien en ambos teléfonos y monitores gigantes, ha visto cómo el espacio se rompe, las fuentes se encogen drásticamente o escala en exceso, y los elementos abruman o desaparecen. Para arreglar todo eso, termina escribiendo una larga lista de consultas de medios para un diseño. Ahí es donde Clamp () puede ayudar.

Es una función CSS que simplifica los tamaños de configuración. En lugar de definir múltiples valores en los puntos de interrupción fijos, le permite establecer un mínimo, un preferido y un máximo para que sus elementos se escalen fluidamente a medida que cambia la pantalla. La mejor parte es que permanecen dentro de sus límites definidos, por lo que no hay inconsistencias de diseño.

En esta publicación, explicaremos cómo funciona Clamp (), por qué a menudo puede ser más eficiente que las consultas de los medios, ¡y cómo Divi 5 le permite usarlo sin escribir una sola línea de código!

¿Qué es Clamp ()

Clamp () es una función nativa en CSS, utilizada para definir valores receptivos que se ajustan en función del tamaño de la pantalla. En lugar de codificar un solo número, le da al navegador un rango para trabajar: establece un valor mínimo, un valor preferido escalable y un valor máximo. Estos hacen que su diseño sea más flexible, y no tiene que escribir múltiples consultas de medios para cada tamaño de pantalla.

Comprendamos esto con un ejemplo de un tamaño de fuente de fluido que aumenta/disminuye según el tamaño de la pantalla.

font-size: clamp(40px, 7vw, 100px);

Aquí, el tamaño de la fuente nunca irá por debajo de 40px, escala basada en el 7% del ancho de la ventana gráfica y dejará de crecer una vez que alcance los 100 px.

Otro gran beneficio de usar Clamp () es que, a diferencia de las consultas de los medios, evita los saltos rígidos y mantiene sus estilos más predecibles y legibles.

¿Qué queremos decir con esto? Entendamos esto comparando Clamp () con consultas de medios.

Comparación de clamp () y consultas de medios

Las consultas de los medios son otra forma común de ajustar los tamaños de fuente para diferentes ancho de pantalla. Aquí, define puntos de interrupción en anchos de pantalla específicos donde cambian sus estilos. Por ejemplo, puede asignar un tamaño de fuente para el escritorio, otro para tableta y un tercero para dispositivos móviles, de modo que el tamaño de fuente cambia solo cuando el ancho de la pantalla alcanza cada punto de interrupción.

Este método funciona, pero no es fluido. Entre 1000px y 501px, el tamaño de la fuente permanece bloqueado a 100px. En el momento en que la pantalla alcanza 500px, la fuente cae abruptamente a 30px. Esto significa que no hay transición suave, solo un cambio agudo.

Entonces, si desea que la escala se sienta más natural, debe agregar varios puntos de interrupción y ajustar manualmente el tamaño de fuente en cada uno. Eso haría que su código sea largo e hinchado.

En contraste, Clamp () lo guarda de transiciones abruptas y código largo. De hecho, se puede escribir en una sola línea: Fuente: Clamp (30px, 7VW, 100px).

Esto le dice al navegador que escala la fuente entre 30px y 100px en función del 7 por ciento del ancho de la visión. El tamaño de la fuente se ajusta fluida en todos los tamaños de pantalla sin saltos abruptos o la necesidad de múltiples puntos de interrupción. Todavía define los límites, pero la escala intermedia es automática y más consistente.

En acción en vivo, así es como se ve una comparación entre el cambio de tamaño de los puntos de interrupción de la consulta de los medios y la pinza ():

Para el cambio de tamaño receptivo, Clamp () hace una diferencia notable. En lugar de esperar a que los anchos de pantalla fijos activen cambios de estilo, responde a cada píxel intermedio. Esto mantiene su código más limpio y su diseño más consistente en todos los dispositivos. Además de eso, es ampliamente compatible con la mayoría de los navegadores modernos, lo que significa que se volverá bien en estos navegadores , lo que lo convierte en un reemplazo confiable y práctico.

Cómo funciona () detrás de escena

Clamp () toma tres valores que trabajan juntos para escalar cualquier propiedad CSS:

 clamp(minimum, preferred, maximum) 

Cada parte de la función tiene un papel específico:

• Valor mínimo: el valor más bajo posible. El elemento no escalará por debajo de este punto, sin importar cuán pequeña sea la pantalla.
• Valor preferido: este valor escala en función del tamaño de la pantalla. Por lo general, se establece utilizando unidades relativas como VW o una expresión de calc () para permitir la fluidez libre.
• Valor máximo: el tamaño más alto permitido. Incluso en pantallas muy grandes, el elemento no excederá este valor.

Cuando el navegador calcula el tamaño final, evalúa primero el valor preferido. El navegador usa el mínimo si el tamaño de la pantalla es lo suficientemente pequeño como para que el valor preferido caiga por debajo del mínimo. Del mismo modo, si la pantalla es lo suficientemente amplia como para que el valor preferido exceda el máximo, se adhiere a eso.

Esto hace que el comportamiento sea predecible. Siempre sabe que su diseño permanecerá dentro de su rango definido, pero obtiene una escala flexible entre esos límites. Al establecer límites mínimos y máximos, Clamp () asegura que sus elementos se escala fluida pero nunca demasiado. Solo suficiente.

Elegir el valor preferido correcto

Es posible que haya notado que el valor preferido (el medio) juega un papel más importante en todo esto. Decide cómo escalan los elementos.

Primero, no debe ser un valor fijo como la abrazadera (40px, 80px , 120px) porque en este caso, el valor preferido no se escala en absoluto. Dado que 80px ya cae entre el límite, el navegador lo bloquea e ignora los cambios en el tamaño de la pantalla. Esto da como resultado un valor estático, que derrota el propósito de usar Clamp () en primer lugar.

En cambio, el valor preferido siempre debe ser relativo , como en la abrazadera (40px, 7VW , 120px). Aquí, 7VW responde al ancho de la ventana gráfica, lo que permite que el elemento escala suavemente a través de los tamaños de pantalla. La función de sujeción asegura que nunca va por debajo de 40 px o por encima de 120px, manteniendo el tamaño que responde al 7% del ancho de la pantalla.

También debe considerar el tamaño del valor relativo. Por ejemplo, un valor más pequeño como 2VW escala el elemento más gradualmente a través de los tamaños de pantalla, mientras que un valor mayor como 6VW causa una escala más rápida y alcanza el tamaño máximo antes. Para identificar qué escala funciona para usted, pruebe la calculadora de escala de tipo de fluido. Le permite obtener una vista previa de diferentes valores y exportar CSS listos para usar.

Nota: La calculadora de escala de tipo fluido emite valores VI. Si usa la salida generada en Divi, asegúrese de cambiar las unidades VI a VW.

Diferentes tipos de unidades en Clamp ()

Las unidades dentro de la abrazadera () afectan la forma en que se comporta entre los dispositivos. Aquí hay todo lo que puede usar:

En la mayoría de los casos, los desarrolladores usan PX para los valores mínimos y máximos y una unidad fluida como VW para el valor preferido. Esto da el mejor equilibrio entre control y capacidad de respuesta.

Sin embargo, también puede usar unidades relativas para valores MIN y MAX, como la abrazadera (2REM, 4REM, 8REM). Esto hace que su diseño sea más accesible y más fácil de escalar si el tamaño de la fuente raíz cambia. Es especialmente útil para los usuarios que ajustan la configuración del navegador para su legibilidad.

Clamp () en Divi 5

La función Clamp () en CSS es increíblemente útil, pero solo si se siente cómodo escribiendo código. ¿Qué pasa con aquellos que prefieren construir sus sitios web visualmente sin tocar una hoja de estilo? ¿Le gustaría construir diseños de fluidos usando Clamp () pero sin escribir código?

Si es así, las unidades avanzadas de Divi 5 pueden ayudar.

Suscríbete a nuestro canal de YouTube

En pocas palabras, Divi 5 admite a Clamp () como una unidad avanzada en todo el constructor, y es muy fácil acceder a ellos. Dondequiera que pueda ingresar un valor numérico, como el tamaño de fuente, el espacio o el ancho de la sección, encontrará la opción de usar Clamp () directamente.

Simplemente haga clic en el campo de entrada para seleccionar de las diferentes unidades avanzadas disponibles en Divi 5 (consulte la lista de color oscuro al lado del tamaño del texto del encabezado) , cambie el tipo de unidad y defina sus valores mínimos, preferidos y máximos.

¡Y eso es todo! No hay codificación o CSS en absoluto: todo lo que hizo fue ingresar un valor de abrazadera () y su encabezado se volvió fluido así.

Divi 5 facilita la creación de diseños fluidos y receptivos sin escribir CSS personalizado. Obtiene toda la flexibilidad de una clamp () con la simplicidad de un editor visual. (Divi 5 admite muchas otras unidades avanzadas, incluida la abrazadera ()).

Aprenda todo sobre las unidades avanzadas de Divi 5

¿Cómo usar Clamp () en Divi 5?

En este momento, ha visto lo fácil que es usar Clamp () en Divi 5. Simplemente seleccione la unidad Clamp () y agregue sus valores preferidos. Sin código personalizado, sin archivos CSS, solo una interfaz limpia y visual.

Pero lo que hace que Clamp () sea realmente poderosa dentro de Divi no es solo la función en sí. Es con lo que funciona.

Divi 5 se construye alrededor de un sistema de diseño modular. Esto significa que puede combinar Clamp () con otras características avanzadas como variables de diseño y funciones CSS como Calc () para hacer que su diseño no solo responda sino también consistente y fácil de escalar. Y ahí es donde se pone interesante: Divi 5 facilita el ajuste () en su flujo de trabajo.

Clamp () funciona con variables de diseño

La mejor y más eficiente forma de usar Clamp () de manera efectiva en Divi 5 es combinarla con variables de diseño.

Las variables de diseño le permiten definir valores globales (como tipografía, colores e incluso tamaños de fuente) para que pueda usarlos en todo su sitio para mantenerlo consistente. También puede guardar valores de Clamp () como variables de número. Esto le permite guardar valores globales receptivos de tal manera que cuando los cambie, todas las instancias se actualizan a la vez.

Por ejemplo, define los tamaños de Clamp () para encabezados H1-H6 como este:

Y guárdelos dentro del gerente variable en Divi Builder:

Luego, todos sus encabezados en todo el sitio web se adaptarán según sus valores de Clamp () definidos.

Ahora, si desea actualizar el tamaño H3, simplemente modifique su variable de número, y se actualizará en todas partes. (¿ Quieres crear tu propio sistema de tipografía en Divi 5? Aquí hay una guía completa sobre la gestión de fuentes y tamaños de fuentes usando clamp () y variables de diseño).

Este enfoque permite un control centralizado, lo que facilita la actualización de la configuración de tipografía a nivel mundial sin ajustar manualmente cada instancia. Al aplicar estas variables Clamp () a través de preajustes de grupos de opciones, optimiza su proceso de diseño.

Clamp () se combina con Calc ()

También puede usar la función calc () dentro de la clamp () para ajustar cómo se escala sus valores. Esto es especialmente útil cuando desea agregar un tamaño de referencia y luego escalarlo más precisamente con una unidad relativa como VW.

Por ejemplo, el tamaño de la fuente: la abrazadera (1REM, Calc (0.75REM + 2VW), 2.5REM) usa Calc () para agregar una base estable (0.75REM) y luego escalarla más con 2 VW.

Esto permite que la fuente se escala en función del ancho de la ventana gráfica, pero también le da una ventaja con un tamaño de fuente base. Esto es útil para mantener la legibilidad en pantallas más pequeñas sin necesidad de múltiples variaciones de abrazadera. El truco de calc () dentro de la clamp () es perfecto para cualquier lugar donde desee ese control adicional sobre cómo escalan las cosas.

Casos de uso práctico de Clamp ()

Ahora veamos algunos casos de uso comunes de Clamp () y cuán fácil se vuelve cuando lo aplica con Divi 5:

1. Tamaños de rumbo constantes en todos los dispositivos

La tipografía receptiva es el mejor caso de uso de Clamp (). Como ya habíamos definido nuestros tamaños de encabezado (H1-H6) usando Clamp () en variables de diseño, es hora de verlos en acción.

Creamos esta página usando H5S para elementos del menú. Luego, aplicamos la variable del número H5 a cada uno de los tamaños de texto de encabezado de H5. Y como puede ver, cada rumbo escala fluida a través de los puntos de interrupción.

El texto sigue siendo claro, equilibrado y visualmente consistente en todos nuestros puntos de ruptura receptivos definidos.

También puede usar Clamp () para la altura de línea y el espacio de letras. Ayuda a mantener una legibilidad óptima al aumentar ligeramente los espacios de línea o el espacio a medida que la pantalla se amplía. Un pequeño cambio, pero haría que el contenido de forma larga se sienta más transpirable.

2. Establezca ancho de clamp () para secciones de párrafo en pantallas grandes

Los párrafos son naturalmente fáciles de leer en dispositivos móviles, ya que las líneas cortas en pantallas compactas hacen que el contenido sea digerible. Sin embargo, en los monitores ultra de ancho, los lectores se verán obligados a escanear filas horizontales enteras si una sección de ancho completo estira el texto demasiado lejos. Se siente como leer una cartelera. La longitud de línea ideal de una oración es de alrededor de 50–75 caracteres, por lo que si su sitio web muestra una oración interminable en una pantalla amplia, puede perder el interés del lector.

Para solucionar esto, establezca un ancho receptivo como Clamp (300px, 65VW, 800px) para escalar su párrafo a un ancho fijo (800px) para que los párrafos parecen legibles incluso en pantallas más amplias.

Esta es una manera perfecta de hacer que sus publicaciones de blog sean legibles en pantallas más amplias.

3. Establecer ancho de clamp () para imágenes individuales o destacadas

Del mismo modo, las imágenes individuales (como imágenes destacadas) pueden aparecer demasiado grandes en las pantallas ultra ancho. Se ve perfecto en una tableta, pero puede estirarse torpemente en un monitor 4K, que puede sentirse abrumador en comparación con el resto del contenido.

Para solucionar esto, use un ancho de imagen basado en la abrazadera como la abrazadera (300px, 60VW, 1000px). Asegura que la imagen crece fluida con el tamaño de la pantalla, pero se detiene antes de dominar el diseño.

O bien, simplemente puede establecer un ancho de Clamp () para toda la fila del contenedor para garantizar que todos los elementos (imagen, encabezado y texto) se escalen de manera uniforme.

4. Agregue relleno de fluido y margen con abrazadera ()

Los diseñadores a menudo obtienen el espacio adecuado para el escritorio, pero no siempre funciona bien en pantallas más pequeñas o muy grandes. El acolchado y los márgenes fijos no siempre se ajustan con el tamaño de la pantalla. Ahí es donde Clamp () se vuelve útil.

Por ejemplo, un margen de abrazadera (0.5rem, 2VW, 2Rem) y un relleno de abrazadera (1REM, 3VW, 4REM) en una galería de imágenes crean espacios que comienzan pequeños y escala con la pantalla.

Le da a su espacio de diseño para respirar en pantallas grandes y mantiene las cosas apretadas en el móvil:

Clamp () también ayuda a escalar el acolchado suavemente alrededor de los diseños de la tarjeta, galerías de imágenes, contenedores de sección y bloques de texto, especialmente cuando desea un espacio intencional sin ajuste constante de punto de interrupción.

5. Cree secciones de héroes receptivas que se escallan sin problemas

Usando Clamp (), puedes hacer que las secciones de héroes se vean perfectas en cada pantalla definiendo el encabezado de héroes, el relleno de botones y el espacio de subtítulos. Hemos guardado estos valores de Clamp () como variables de diseño para simplificar su aplicación. (Pero no querrá completar su administrador de variables guardando cada detalle de minuto).

Aplicar esos valores ahora es fácil.

Una vez guardado, cada uno se adaptará automáticamente al tamaño de la pantalla para darle a su sección de héroe la primera impresión perfecta en cada dispositivo.

Diseños de diseño de píxel usando Clamp (), sin escribir una sola línea de código

Clamp () lo ayuda a diseñar diseños de fluido y receptivos sin depender de consultas interminables de los medios. Y con Divi 5, no necesita escribir una sola línea de código para usarlo. Ya sea que prefiera codificar o disfrutar del diseño visual, las unidades avanzadas de Divi facilitan la aplicación de la abrazadera () a las fuentes y el espacio.

Con características potentes como Clamp () tan fácilmente accesible, ¿no le gustaría probar Divi 5 para usted? Pruebe diferentes valores, cree su propio sistema receptivo y vea cuán flexibles pueden ser sus diseños. Y cuando tenga un truco de pinza () favorita, ¡compártelo en los comentarios a continuación! Nos encantaría ver lo que creas.