El uso de funciones de CSS: la función calc()

El uso de funciones de CSS: la función calc()

Funciones de CSS en la actualidad

CSS3 introdujo la posibilidad de utilizar funciones de CSS como valor de propiedad. Estas funciones realizan una acción muy sencilla que se traduce en un valor para la propiedad que estemos usando. De esta forma hacemos que nuestro código sea más flexible y genere o recoja valores de forma automática. Ya vimos una mecánica similar en el artículo de las variables de CSS. La idea es básicamente la misma. Lo que hacemos con estas funciones es crear una especia de “programa” que realiza una operación por nosotros, ya sea un cálculo matemático o la toma de un valor variable.

La idea es genial por sí misma. Hace que el código CSS se vuelva más potente y nos ahorre horas de trabajo. Sin embargo las funciones de CSS no han tenido mucho éxito. Con el desarrollo de compiladores como LESS o SASS, y con el uso cada vez más extendido de Javascript, estas funciones se dejaron de usar y de desarrollar.

Funciones como toggle() – que actualmente no funciona en ningún navegador – o attr() han quedado relegadas a un segundo plano. El caso de attr() es especialmente doloroso, ya que es una función que el sobre el papel nos brinda grandes posibilidades. Para que os hagáis una idea, attr() recoge el valor de un atributo del elemento HTML y lo aplica en una propiedad CSS. Parece una herramienta fantástica para automatizar ciertos procesos de CSS y aplicar menos selectores (puesto que el propio elemento nos daría su valor). Desgraciadamente attr() sólo funciona con la propiedad content por el momento, y estamos a la espera de que los navegadores amplíen su funcionalidad.

En este artículo quiero hablaros de una función que se ha mantenido con el tiempo, y que a día de hoy me parece imprescindible en mis propios proyectos. Dicha función es la conocida como calc() y nos permite calcular el valor necesario para una propiedad CSS de forma fácil, haciendo que nuestro código sea más flexible y contenga menos errores.

La función calc()

funciones de css

Esta función devuelve un valor numérico resultado de una operación matemática. Su uso es muy sencillo, como veremos en el ejemplo:

.selector {
   Propiedad: calc(100%/3 – 5px*2)
}

Como veis añadimos valores en el formato que queramos (ya sea porcentaje, píxeles, em, etc) y utilizamos la operación matemática que necesitemos.

Se podrían dar varias situaciones donde está expresión nos puede ser útil, aunque sin duda viene especialmente bien a la hora de calcular el ancho adecuado de un elemento.

Por ejemplo: supongamos que queremos maquetar una fila de 4 bloques, y entre los 4 deben ocupar el 100%. La solución podría ser dar a nuestras cajas un width de 25%. El problema viene cuando estos elementos tienen un padding, un border y un margin. Muchas veces el valor de estas propiedades hace que nuestras cajas crezcan de manera inesperada y que por lo tanto no quepan en la misma línea, provocando una estructura no deseada.

Para solucionar esto podemos realizar un cálculo mediante la función calc(). La solución sería la siguiente:

.selector {
   float: left;
   margin: 2%;
   padding: 1em;
   border: 2px solid Green;
   width: calc(100%/4 - 2%*2 - 1em*2 - 2px*2);
}

Como veis, al tener 4 elementos queremos que se distribuyan el 100% del ancho entre 4 y a esto se le reste el margin, padding y border. La operación es: 100%/4 – 2%*2 – 1em*2 – 2px*2. Es decir, 100 dividido 4 y se le resta el 2% de margin, 1em de padding y 2px de border, los tres valores multiplicados por dos ya que se están aplicando por la derecha y por la izquierda.

Os animo a que hagáis la prueba. Podréis comprobar como los elementos se distribuyen el ancho perfectamente sin causar errores en ninguna resolución de pantalla, obteniendo un diseño totalmente responsive.

Ojalá en un futuro, contemos con más soluciones como esta que hacen de CSS un lenguaje autónomo, potente y eficaz.

2Comentarios

  • Antoni
    06/08/2018

    Me encanta. Muchas Gracias por el aporte

  • This page is very util but i understand that and i can’t read it sorry but its very easy make a web page for you so thank you very much and bye.

Escribe un comentario