Es es sueño de un programador cuando trabaja haciendo maquetación css. Poder hacer calculos en nuestro archivo css como si de php se tratara.
Y lo mejor, es que se puede hacer y nos permite trabajar en distintas medidas (px, em, %) y funciona incluso con IE 9.
Se usa de forma sencilla, con cualquier propiedad css que admita medida, del tipo que sean (tamaño, tiempo..) y aunque actualmente es mejor usarla con el prefijo del navegador -webkit, -moz, etc está bastante bien adoptado por los navegadores de escritorio, aunque siempre hay navegadors moviles que dificultan.
Se utiliza de la siguiente forma:
/* De forma estándar */ width: calc(#valores#); /* con prefijo para navegadores */ width: -webkit-calc(#valores#); width: -moz-calc(#valores#);
Podremos aplicar cálculos como el siguiente:
width: calc(100% - 30px);
Y realizar las cuatro operaciones matemáticas básicas:
width: calc(50px * 2); width: calc(50px / 2); width: calc(50px + 2px); width: calc(50px - 2px);
Con esta nueva función, evitamos utilizar javascript en muchos casos donde sólo tratamos de maquetar nuestra web.
Más información | W3C Calc