Antes de comenzar con el artículo, te comparto un corto video de mi participación en la Meetup «Aplica nuevas funcionalidades de Elementor V3.10 y V3.11 con ejemplos prácticos» donde hablo de como podrías aplicar las unidades CSS personalizadas en Elementor PRO.
Las Unidades CSS personalizadas son una de las herramientas más útiles y poderosas que los desarrolladores web podemos utilizar para crear diseños y diseños web más dinámicos y adaptables. En particular, las unidades CSS min(), max() y clamp() son una manera útil y flexible de establecer valores numéricos en CSS.
La unidad min() es útil para establecer un valor mínimo en un estilo CSS. Por ejemplo, si desea que un elemento tenga un ancho mínimo de 300 píxeles, pero permita que el ancho se ajuste automáticamente según el tamaño de la pantalla, puede utilizar la siguiente declaración CSS:
width: min(300px, 100%);En este caso, la anchura será de 300 píxeles si el ancho de la ventana gráfica es menor de 300 píxeles. Si la ventana gráfica es más ancha, la anchura será del 100% del ancho de la ventana gráfica.
La unidad max() funciona de manera similar a la unidad min(), pero establece un valor máximo en lugar de un valor mínimo. Por ejemplo, si desea que un elemento tenga un ancho máximo de 800 píxeles, pero permita que el ancho se ajuste automáticamente según el tamaño de la pantalla, puede utilizar la siguiente declaración CSS:
width: max(800px, 100%);En este caso, la anchura será del 100% del ancho de la ventana gráfica si es más ancha que 800 píxeles. Si la ventana gráfica es más estrecha, la anchura será de 800 píxeles.
Finalmente, la unidad clamp() combina las unidades min() y max() para crear un valor que está dentro de un rango específico. Por ejemplo, si desea que un elemento tenga un ancho que esté entre 300 y 800 píxeles, pero permita que el ancho se ajuste automáticamente según el tamaño de la pantalla, puede utilizar la siguiente declaración CSS:
width: clamp(300px, 50%, 800px);En este caso, la anchura será del 50% del ancho de la ventana gráfica si está entre 300 y 800 píxeles. Si la ventana gráfica es más estrecha que 300 píxeles, la anchura será de 300 píxeles. Si la ventana gráfica es más ancha que 800 píxeles, la anchura será de 800 píxeles.
Tengo un regalo para ti
Unidades CSS personalizadas en Elementor
Muchos de los widgets de Elementor incluyen la posibilidad de cambiar el tamaño, el relleno o las márgenes a través de la unidades de medida como PX, EM, REM, % VW, VH. y por supuesto, cada vez necesitábamos configurar un tamaño teníamos que elegir alguna de estas unidades.
A partir de ahora podemos hacer uso de las funciones Min, Max, calc y Clamp de CSS con el objetivo de calcular matemáticamente los espacios
La tipografía fluida
La tipografía fluida es otro aspecto importante que se relaciona con el uso de unidades CSS personalizadas como min(), max() y clamp(). La tipografía fluida se refiere a la práctica de ajustar el tamaño de la fuente automáticamente en relación con el tamaño de la pantalla del usuario. Esto se logra mediante el uso de unidades de medida relativas, como em o rem, en lugar de unidades de medida fijas, como px.
Al combinar la tipografía fluida con el uso de unidades CSS personalizadas como min(), max() y clamp(), los desarrolladores web tenemos la posibilidad de crear diseños más adaptables y accesibles que se ajusten automáticamente al tamaño de la pantalla y al tamaño de la fuente preferido del usuario. Por ejemplo, en lugar de establecer un tamaño de fuente fijo de 16px, se puede utilizar la siguiente declaración CSS para establecer un tamaño de fuente que varía entre 14px y 18px, según el tamaño de la pantalla del usuario:
font-size: clamp(14px, 2vw, 18px);En este caso, la unidad de medida vw se refiere al ancho de la ventana gráfica del usuario y se utiliza junto con la unidad clamp() para establecer un rango de valores para el tamaño de la fuente. El resultado es una tipografía fluida que se adapta automáticamente al tamaño de la pantalla y al tamaño de la fuente preferido del usuario.
