Funkcja calc()

6.1 Podstawowe możliwości funkcji calc()

Funkcja calc() umożliwia wykonywanie operacji matematycznych w CSS, co pozwala tworzyć bardziej elastyczne i adaptacyjne style. Ta funkcja jest szczególnie przydatna do łączenia różnych jednostek miary i dynamicznego obliczania wartości, takich jak rozmiary, odstępy, obramowania i inne właściwości.

Funkcja calc() pozwala wykonywać cztery podstawowe operacje matematyczne: dodawanie, odejmowanie, mnożenie i dzielenie. Te operacje można stosować do łączenia różnych jednostek miary (piksele, procenty, em, rem itp.), co ułatwia tworzenie elastycznych i dynamicznych stylów.

Składnia:

    
      selektor {
        właściwość: calc(wyrażenie);
      }
    
  

Przykłady operacji

• Dodawanie: calc(100% + 20px)
• Odejmowanie: calc(50% - 10px)
• Mnożenie: calc(10px * 2)
• Dzielenie: calc(100px / 2)

Przykład:

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

W tym przykładzie:

• Szerokość elementu obliczana jest jako 100% minus 50px
• Odstęp obliczany jest jako suma 1em i 10px

6.2 Przykłady użycia funkcji calc()

1. Dodawanie i odejmowanie

Funkcja calc() często używana jest do dodawania i odejmowania wartości, co pozwala na bardziej precyzyjną kontrolę nad rozmiarami i odstępami elementów.

Przykład 1: Dodawanie procentów i pikseli

W tym przykładzie szerokość kontenera obliczana jest jako 100% szerokości elementu rodzica minus 40 pikseli. To pozwala uwzględnić odstępy i inne elementy wewnątrz kontenera:

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

Przykład 2: Odejmowanie stałej wartości

W tym przykładzie szerokość paska bocznego obliczana jest jako 100% szerokości elementu rodzica minus 250 pikseli, co pozwala zostawić miejsce na główną treść:

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

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

2. Mnożenie i dzielenie

Funkcja calc() pozwala także wykonywać mnożenie i dzielenie, co może być przydatne do tworzenia proporcjonalnych rozmiarów i odstępów.

Przykład 3: Mnożenie

W tym przykładzie wysokość elementu obliczana jest jako 20 pikseli pomnożone przez 3, co daje 60 pikseli:

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

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

Przykład 4: Dzielenie

W tym przykładzie szerokość bloku obliczana jest jako jedna trzecia szerokości elementu rodzica, co pozwala stworzyć trzy równe kolumny:

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

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

6.3 Kombinowanie różnych jednostek miary

Jedną z kluczowych możliwości funkcji calc() jest kombinowanie różnych jednostek miary, co pozwala tworzyć elastyczne i responsywne style.

Przykład 5: Kombinowanie procentów i pikseli

W tym przykładzie wysokość nagłówka obliczana jest jako 100% wysokości okna przeglądarki minus 50 pikseli, co pozwala uwzględnić stały odstęp.

    
      <header class="header">
        <nav>
          <ul>
            <li>Strona główna</li>
            <li>O Nas</li>
            <li>Kontakt</li>
          </ul>
        </nav>
      </header>
    
  

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

        background: lightgreen;
      }

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

Dynamiczne obliczanie rozmiarów

Funkcja calc() jest przydatna do tworzenia dynamicznie obliczanych rozmiarów elementów, co czyni projekt bardziej responsywnym i elastycznym.

Przykład 6: Dynamiczne obliczanie szerokości

W tym przykładzie szerokość treści obliczana jest jako 100% szerokości elementu rodzica minus podwójny odstęp po 20 pikseli z każdej strony:

    
      <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 Użycie calc() w media queries

Funkcja calc() może być używana wewnątrz media queries do tworzenia stylów responsywnych.

Przykład 7: Responsywne odstępy w media queries

W tym przykładzie odstępy kontenera zwiększają się w zależności od szerokości okna przeglądarki po osiągnięciu minimalnej szerokości 600 pikseli:

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

Przykład 8: Responsywne rozmiary w media queries

W tym przykładzie odstępy kontenera zmniejszają się dwukrotnie na ekranach o szerokości do 600 pikseli, co poprawia adaptacyjność projektu:

    
      <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 Zalety i wady

Zalety użycia funkcji calc():

1. Elastyczność. Funkcja calc() pozwala tworzyć bardziej elastyczne i adaptacyjne projekty, łącząc różne jednostki miary i wykonując operacje matematyczne.

2. Dynamiczne zarządzanie stylami. Dzięki calc() można dynamicznie zmieniać rozmiary i odstępy elementów, co czyni projekt bardziej responsywnym i elastycznym.

3. Uproszczenie skomplikowanych obliczeń. Funkcja calc() upraszcza wykonywanie skomplikowanych obliczeń bezpośrednio w CSS, co pozwala uniknąć potrzeby używania JavaScript do prostych operacji matematycznych.

Ograniczenia i cechy funkcji calc():

1. Przestrzenie wokół operatorów. W wyrażeniach calc() muszą być przestrzenie wokół operatorów. Na przykład calc(100% - 50px) jest poprawne, a calc(100%-50px) powoduje błąd.

2. Kompatybilność przeglądarek. Funkcja calc() jest wspierana przez większość nowoczesnych przeglądarek, ale dla starszych wersji może być potrzebna weryfikacja kompatybilności.

3. Wydajność. Użycie funkcji calc() może nieco zwiększać czas renderowania strony, szczególnie przy skomplikowanych obliczeniach lub częstych zmianach wartości.