Função calc()

6.1 Principais funcionalidades da função calc()

A função calc() permite realizar operações matemáticas em CSS, o que possibilita criar estilos mais flexíveis e adaptáveis. Essa função é especialmente útil para combinar diferentes unidades de medida e calcular valores dinamicamente, como tamanhos, margens, bordas e outras propriedades.

A função calc() permite realizar quatro operações matemáticas básicas: adição, subtração, multiplicação e divisão. Essas operações podem ser usadas para combinar diferentes unidades de medida (pixels, porcentagens, em, rem etc.), o que simplifica a criação de estilos adaptáveis e dinâmicos.

Sintaxe:

    
      selector {
        propriedade: calc(expressão);
      }
    
  

Exemplos de operações

• Adição: calc(100% + 20px)
• Subtração: calc(50% - 10px)
• Multiplicação: calc(10px * 2)
• Divisão: calc(100px / 2)

Exemplo:

    
      <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;
      }
    
  

Neste exemplo:

• A largura do elemento é calculada como 100% menos 50px
• A margem é calculada como a soma de 1em e 10px

6.2 Exemplos de uso da função calc()

1. Adição e subtração

A função calc() é frequentemente usada para adicionar e subtrair valores, o que permite controlar com mais precisão os tamanhos e margens dos elementos.

Exemplo 1: Adição de porcentagens e pixels

Neste exemplo, a largura do contêiner é calculada como 100% da largura do elemento pai menos 40 pixels. Isso permite levar em conta margens e outros elementos dentro do contêiner:

    
      <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;
      }
    
  

Exemplo 2: Subtração de um valor fixo

Neste exemplo, a largura da barra lateral é calculada como 100% da largura do elemento pai menos 250 pixels, permitindo espaço para o conteúdo principal:

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

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

2. Multiplicação e divisão

A função calc() também permite realizar multiplicações e divisões, o que pode ser útil para criar tamanhos e margens proporcionais.

Exemplo 3: Multiplicação

Neste exemplo, a altura do elemento é calculada como 20 pixels multiplicados por 3, resultando em 60 pixels:

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

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

Exemplo 4: Divisão

Neste exemplo, a largura do bloco é calculada como um terço da largura do elemento pai, criando assim três colunas iguais:

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

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

6.3 Combinando diversas unidades de medida

Uma das principais funcionalidades da função calc() é combinar diferentes unidades de medida, o que permite criar estilos adaptáveis e flexíveis.

Exemplo 5: Combinação de porcentagens e pixels

Neste exemplo, a altura do cabeçalho é calculada como 100% da altura da viewport menos 50 pixels, permitindo considerar uma margem fixa.

    
      <header class="header">
        <nav>
          <ul>
            <li>Início</li>
            <li>Sobre Nós</li>
            <li>Contatos</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álculos Dinâmicos de Tamanho

A função calc() é útil para criar tamanhos de elementos calculados dinamicamente, tornando o design mais adaptável e flexível.

Exemplo 6: Cálculo Dinâmico da Largura

Neste exemplo, a largura do conteúdo é calculada como 100% da largura do elemento pai menos duas margens de 20 pixels de 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 Usando calc() em Media Queries

A função calc() pode ser usada dentro de media queries para criar estilos adaptáveis.

Exemplo 7: Margens adaptáveis em media queries

Neste exemplo, as margens do contêiner aumentam levando em consideração a largura da janela de visualização ao alcançar a largura mínima de 600 pixels:

    
      <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);
        }
      }
    
  

Exemplo 8: Tamanhos adaptáveis em media queries

Neste exemplo, as margens do contêiner são reduzidas pela metade em telas com largura até 600 pixels, melhorando a adaptabilidade do design:

    
      <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 Vantagens e Desvantagens

Vantagens do uso da função calc():

1. Flexibilidade. A função calc() permite criar designs mais flexíveis e adaptáveis, combinando diferentes unidades de medida e realizando operações matemáticas.

2. Controle Dinâmico dos Estilos. Com calc(), é possível alterar dinamicamente os tamanhos e margens dos elementos, tornando o design mais responsivo e adaptável.

3. Simplificação de Cálculos Complexos. A função calc() simplifica a execução de cálculos complexos diretamente no CSS, evitando a necessidade de usar JavaScript para operações matemáticas simples.

Limitações e características da função calc():

1. Espaços ao redor dos operadores. As expressões calc() devem ter espaços ao redor dos operadores. Por exemplo, calc(100% - 50px) está correto, enquanto calc(100%-50px) resultará em erro.

2. Compatibilidade de Navegadores. A função calc() é suportada pela maioria dos navegadores modernos, mas para versões antigas pode ser necessária uma verificação de compatibilidade.

3. Desempenho. Usar a função calc() pode aumentar um pouco o tempo de renderização da página, especialmente em cálculos complexos ou alterações frequentes de valores.