Entendiendo la función calc() de CSS

0

La función calc() en CSS nos va permitir añadir lógica a las reglas de estilos, esta función nos va a permitir hacer cálculos para determinar valores de las propiedades de longitud en CSS, nos permite utilizar expresiones matemáticas como los es la Suma (+), resta (-), multiplicación (*) y división (/), y los resultados de estos van a poder ser usados como valores para los diferentes elementos o componentes.

La sintaxis es simple, solamente declaramos como valor la propiedad en la que queremos aplicar la lógica: calc(expresión) y en los parámetros utilizamos la  expresión matemática deseada para realizar un cálculo y devolver un resultado para aplicar a las propiedades CSS que acepten como valor alguna medida de longitud.

.principal {
   width: calc(100% - 150px);
}
.secundario {
   width: calc(100% / 2 + 25px);
}

También es posible hacer operaciones más complejas:

.elemento {
  margin: calc(10%/2em + 10px*4rem);
}
Cuando empezamos a utilizar esta función vamos a notar varias características que nos dan ventajas al generar código CSS. Por ejemplo, Vamos a poder mezclar unidades de medidas, ya sea  multiplicar unidades de pixeles con porcentajes, los resultados son dinámicos, así que es ideal utilizar esta función cuando los valores dimensionales de un elemento no están claras, también es nativo de CSS por lo que nos ahorraría hace esto por medio de un preprocesador.

.banner {
   width: calc(100% - 50%);
   border: solid black 1px;
   background-color: tomato;
   padding: 6px;
   text-align: center;
}
funcion-calc()

En el ejemplo anterior el elemento con clase “banner” toma el 50% del ancho que este tiene disponible, pues este es el resultado de la resta en la función calc(100% - 50%).

Usando la función Calc()

La función calc() la podemos usar donde el resultado sea cualquier elemento de valor de longitud, desde centrar un elemento hasta crear un complejo sistema de grid.

Centrar Elemento con Calc()

See the Pen calc() css centrar elemento by frontend (@tutosytips) on CodePen
20550


Ahora veamos una simple galería utilizando calc()

See the Pen Simple Galería con Calc() CSS by frontend (@tutosytips) on CodePen
20550


Para tener en cuenta al usar la función Calc()

  1. Los cálculos se realizan de izquierda a derecha.
  2. Las las expresiones matemáticas de División o multiplicación se calcularán primero, pero las expresiones entre paréntesis tienen prioridad y se calculan en primer lugar.
  3. Las versiones anteriores a IExplorer 9 no soportan esta función. También tengamos en cuenta usar los diferentes Prefijos para cubrir las versiones anteriores de navegadores.

A continuación el soporte que nos provee CanIuse:

Can I Use calc? Data on support for the calc feature across the major browsers from caniuse.com.

Más información:

calc() – MDN | calc() – W3C

Comentar

avatar
wpDiscuz