La creación de un diseño de CSS atractivo comienza con la asignación de tamaños para todos los elementos que se colocan en una aplicación web. Una función muy solicitada siempre ha sido la capacidad de especificar tamaños mediante una combinación de unidades de tallas. Por ejemplo, sería bueno poder reservar el 50% de un área más una cantidad fija de espacio, digamos 10 px. Puedes hacerlo ahora mismo con la propiedad calc(). Puedes usar esta función siempre que se use una longitud o un número, por lo que puedes utilizarla para posicionar elementos o también en valores de color rgb(), de modo que tiene muchos usos excelentes en una hoja de estilo.
¿Qué puedes hacer con calc()?
La propiedad calc() se puede usar en cualquier hoja de estilo que tenga una longitud o un número de CSS.
Te proporciona dos funciones principales para que el diseño sea más flexible:
- Combinación de porcentajes y valores absolutos
- Combinación de unidades de tamaño
Combinación de porcentajes con unidades absolutas
Veamos un ejemplo de combinación de porcentajes con unidades absolutas. Supongamos que queremos asignar el 50% del área disponible menos una cantidad fija de píxeles y, luego, podríamos escribirlo de la siguiente manera:
#foo {
width: calc(50% - 100px);
}
<div id="foo">Always 100 pixels less than half the available area</div>
Si tuviera un color de fondo verde, se vería así:
y, si reduces el tamaño superior, se verá de la siguiente manera:
Lo bueno es que siempre sabemos que el borde derecho del contenido estará de 100 px a la izquierda del centro del área donde lo contiene. Si se pueden combinar diferentes tipos de valores de esta manera, tu aplicación web podrá manejar el diseño en dispositivos de diferentes tamaños con un control mucho mayor que antes.
Unidades de mezcla
Otra gran ventaja es la capacidad de combinar unidades con diferentes medidas para obtener un tamaño resultante. Por ejemplo, puedes establecer tamaños relacionados con el tamaño de la fuente actual mezclando unidades "em" y "px".
#bar {
height: calc(10em + 3px);
}
Puedes encontrar excelentes ejemplos de combinación de valores aquí y aquí.
Probar
Con calc(), puedes usar +, -, * y / para sumar, restar, multiplicar y dividir valores, lo que permite todo tipo de posibilidades. Puedes usar calc() en cualquier lugar donde se pueda usar una longitud o un número de CSS. También estamos trabajando para agregar pronto calc() para las propiedades de ángulos y frecuencias. La propiedad calc() para longitudes ahora está disponible en Chrome 19 (compilación del canal para desarrolladores) mediante el uso de la propiedad -webkit-calc, en Firefox a partir de la versión 8 con la propiedad -moz-calc y en Internet Explorer a partir de la versión 9 sin prefijo. Déjanos tus comentarios a continuación para darnos tu opinión.