Función calc()

6.1 Características principales de la función calc()

La función calc() permite realizar operaciones matemáticas en CSS, lo que facilita la creación de estilos más flexibles y adaptativos. Esta función es especialmente útil para combinar diferentes unidades de medida y calcular dinámicamente valores como tamaños, márgenes, bordes y otras propiedades.

La función calc() permite realizar cuatro operaciones matemáticas básicas: suma, resta, multiplicación y división. Estas operaciones se pueden usar para combinar diferentes unidades de medida (píxeles, porcentajes, em, rem, etc.), lo que simplifica la creación de estilos adaptativos y dinámicos.

Sintaxis:

    
      selector {
        propiedad: calc(expresión);
      }
    
  

Ejemplos de operaciones

• Suma: calc(100% + 20px)
• Resta: calc(50% - 10px)
• Multiplicación: calc(10px * 2)
• División: calc(100px / 2)

Ejemplo:

    
      <div>
        Lorem ipsum odor amet, consectetuer adipiscing elit. Montes malesuada pharetra mi suscipit suspendisse ornare.
        Fringilla feugiat cursus finibus commodo, faucibus himenaeos.
      </div>
    
  

    
      div {
        width: calc(100% - 50px);
        margin: calc(1em + 10px);
        background: lightblue;
      }
    
  

En este ejemplo:

• El ancho del elemento se calcula como 100% menos 50px
• El margen se calcula como la suma de 1em y 10px

6.2 Ejemplos de uso de la función calc()

1. Suma y resta

La función calc() se usa a menudo para sumar y restar valores, lo que permite controlar más precisamente los tamaños y márgenes de los elementos.

Ejemplo 1: Suma de porcentajes y píxeles

En este ejemplo, el ancho del contenedor se calcula como el 100% del ancho del elemento padre menos 40 píxeles. Esto permite tener en cuenta los márgenes y otros elementos dentro del contenedor:

    
      <div class="container">
        Lorem ipsum odor amet, consectetuer adipiscing elit. Montes malesuada pharetra mi suscipit suspendisse ornare.
        Fringilla feugiat cursus finibus commodo, faucibus himenaeos.
      </div>
    
  

    
      .container {
        width: calc(100% - 40px);
        margin: 20px;
        background: lightgreen;
      }
    
  

Ejemplo 2: Resta de un valor fijo

En este ejemplo, el ancho de la barra lateral se calcula como el 100% del ancho del elemento padre menos 250 píxeles, lo que permite dejar espacio para el contenido principal:

    
      <div class="sidebar">
        <ul>
          <li><a href="#"></a>Artículo 1</li>
          <li><a href="#"></a>Artículo 2</li>
          <li><a href="#"></a>Artículo 3</li>
        </ul>
      </div>
    
  

    
      .sidebar {
        width: calc(100% - 250px);
        background: tomato;
      }
    
  

2. Multiplicación y división

La función calc() también permite realizar multiplicaciones y divisiones, lo cual puede ser útil para crear tamaños proporcionales y márgenes.

Ejemplo 3: Multiplicación

En este ejemplo, la altura del elemento se calcula como 20 píxeles multiplicados por 3, lo que da 60 píxeles:

    
      <div class="element">Elemento</div>
    
  

    
      .element {
        height: calc(20px * 3);
        background: lightpink;
      }
    
  

Ejemplo 4: División

En este ejemplo, el ancho del bloque se calcula como un tercio del ancho del elemento padre, lo que permite crear tres columnas iguales:

    
      <div class="box">
        Caja
      </div>
    
  

    
      .box {
        width: calc(100% / 3);
        background: yellow;
      }
    
  

6.3 Combinación de diferentes unidades de medida

Una de las principales características de la función calc() es la combinación de diferentes unidades de medida, lo que permite crear estilos adaptativos y flexibles.

Ejemplo 5: Combinación de porcentajes y píxeles

En este ejemplo, la altura del encabezado se calcula como el 100% de la altura de la ventana de visualización menos 50 píxeles, lo que permite tener en cuenta un margen fijo.

    
      <header class="header">
        <nav>
          <ul>
            <li>Principal</li>
            <li>Sobre Nosotros</li>
            <li>Contactos</li>
          </ul>
        </nav>
      </header>
    
  

    
      .header {
        height: calc(100vh - 100px);

        background: lightgreen;
      }

      nav ul {
        list-style: none;
        display: flex;
        justify-content: space-around;
        padding: 10px;
      }
    
  

Cálculo dinámico de tamaños

La función calc() es útil para crear tamaños de elementos calculados dinámicamente, lo que hace el diseño más adaptativo y flexible.

Ejemplo 6: Cálculo dinámico de anchura

En este ejemplo, la anchura del contenido se calcula como el 100% del ancho del elemento padre menos el doble del margen de 20 píxeles en cada lado:

    
      <div class="content">
        Lorem ipsum odor amet, consectetuer adipiscing elit. Montes malesuada pharetra mi suscipit suspendisse ornare.
        Fringilla feugiat cursus finibus commodo, faucibus himenaeos.
      </div>
    
  

    
      .content {
        width: calc(100% - 2 * 20px);
        background: lightgreen;
      }
    
  

6.4 Uso de calc() en consultas de medios

La función calc() puede usarse dentro de consultas de medios para crear estilos adaptativos.

Ejemplo 7: Márgenes adaptativos en consultas de medios

En este ejemplo, los márgenes del contenedor aumentan según el ancho de la ventana de visualización al alcanzar un ancho mínimo de 600 píxeles:

    
      <div class="container">
        Lorem ipsum odor amet, consectetuer adipiscing elit. Montes malesuada pharetra mi suscipit suspendisse ornare.
        Fringilla feugiat cursus finibus commodo, faucibus himenaeos.
      </div>
    
  

    
      .container {
        padding: 10px;
        background: tomato;
      }

      @media (min-width: 600px) {
        .container {
          padding: calc(10px + 2vw);
        }
      }
    
  

Ejemplo 8: Tamaños adaptativos en consultas de medios

En este ejemplo, los márgenes del contenedor se reducen a la mitad en pantallas con un ancho de hasta 600 píxeles, lo que mejora la adaptabilidad del diseño:

    
      <div class="container">
        Lorem ipsum odor amet, consectetuer adipiscing elit. Montes malesuada pharetra mi suscipit suspendisse ornare.
        Fringilla feugiat cursus finibus commodo, faucibus himenaeos.
      </div>
    
  

    
      :root {
        --main-padding: 20px;
      }

      .container {
        padding: var(--main-padding);
        background: yellow;
      }

      @media (max-width: 600px) {
        .container {
          padding: calc(var(--main-padding) / 2);
        }
      }
    
  

6.5 Ventajas y desventajas

Ventajas del uso de la función calc():

1. Flexibilidad. La función calc() permite crear diseños más flexibles y adaptativos, combinando diferentes unidades de medida y realizando operaciones matemáticas.

2. Gestión dinámica de estilos. Con calc() se pueden cambiar dinámicamente los tamaños y márgenes de los elementos, haciendo que el diseño sea más responsivo y adaptativo.

3. Simplificación de cálculos complejos. La función calc() simplifica la realización de cálculos complejos directamente en CSS, evitando la necesidad de usar JavaScript para operaciones matemáticas simples.

Limitaciones y características de la función calc():

1. Espacios alrededor de los operadores. En las expresiones de calc() deben haber espacios alrededor de los operadores. Por ejemplo, calc(100% - 50px) es correcto, mientras que calc(100%-50px) llevará a un error.

2. Compatibilidad de navegadores. La función calc() es soportada por la mayoría de los navegadores modernos, pero para versiones antiguas puede ser necesario verificar la compatibilidad.

3. Rendimiento. El uso de la función calc() puede aumentar ligeramente el tiempo de renderización de la página, especialmente en cálculos complejos o cambios frecuentes de valores.