Para crear un buen diseño de CSS, primero debes asignar tamaños a 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 con una combinación de unidades de tamaño. Por ejemplo, sería bueno poder reservar el 50% de un área más una cantidad fija de espacio, por ejemplo, 10 px. Puedes hacerlo ahora mismo con la propiedad calc(). Puedes usar esta función en cualquier lugar donde se use una longitud o un número, por lo que puedes usarla para posicionar elementos o en valores de color rgb(), por lo que tiene muchos usos excelentes en una hoja de estilo.
¿Qué puedes hacer con calc()?
La propiedad calc() se puede usar en cualquier lugar donde haya una longitud o un número de CSS en tu hoja de estilo.
Te brinda dos funciones principales para que el diseño sea más flexible:
- Mezclar porcentajes y valores absolutos
- Mezclar unidades de tamaño
Cómo combinar porcentajes con unidades absolutas
Veamos un ejemplo de cómo mezclar porcentajes con unidades absolutas. Supongamos que queremos asignar el 50% del área disponible menos una cantidad fija de píxeles. En ese caso, 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 de la siguiente manera:
y si redujeras el tamaño superior, se vería de la siguiente manera:
Lo bueno de esto es que siempre sabemos que el borde derecho del contenido estará a 100 px a la izquierda del centro del área de contención. La capacidad de combinar diferentes tipos de valores de esta manera permite que tu aplicación web controle 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 mediciones para obtener un tamaño resultante. Por ejemplo, puedes establecer tamaños en relación con el tamaño de fuente actual mezclando unidades "em" y "px".
#bar {
height: calc(10em + 3px);
}
Puedes encontrar algunos ejemplos excelentes de cómo combinar 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 calc() para las propiedades de ángulo y frecuencia pronto. La propiedad calc() para longitudes ahora está disponible en Chrome 19 (compilación del canal para desarrolladores) mediante la propiedad -webkit-calc, en Firefox desde la versión 8 con la propiedad -moz-calc y en Internet Explorer desde la versión 9 sin prefijo. Cuéntanos qué piensas en los comentarios.