Autor publikacji: Virtual Patriot - Administrator

Funkcja calc()

Data publikacji: Wrzesień 01 2013
Ostatnio edytowano: Grudzień 28 2024

W tej części kursu CSS poznamy funkcję calc(), która służy do obliczania wartości danej właściwości CSS.

To, które przeglądarki internetowe i w jakiej wersji, obsługują funkcję calc(), możemy sprawdzić tutaj.

Funkcja calc() wymaga od nas abyśmy podali równanie, które ma zostać obliczone. W naszym równaniu możemy wykorzystać różne wartości wraz z różnymi jednostkami CSS oraz następujące operatory matematyczne:

+ dodawanie, np. calc(50% + 100px)
- odejmowanie, np. calc(100% - 33%)
* mnożenie, np. calc(10px * 10)
/ dzielenie, np. calc(4em / 2)
nasze równanie może być również bardziej złożone, np. calc((100% - 30% + 50px) / 2)

Powyższą funkcję calc() możemy użyć wraz z dowolną właściwością CSS, która wymaga od nas abyśmy podali jakąś wartość liczbową, np. width:calc(100% / 5); Przeglądarka widząc taki zapis, sama sobie obliczy daną wartość właściwości width. W tym wypadku będzie to wartość 20%, czyli szerokość elementu HTML będzie równa 20% szerokości elementu rodzica.

Uwaga Gdy chcemy wykonać mnożenie lub dzielenie, to przynajmniej jedna dzielona lub mnożona wartość musi być liczbą (czyli wartością bez jednostki, np. 1, 2, 3 ,4 itd.).

W jednej z poprzednich części tego kursu CSS określaliśmy wartości właściwości font-size, dla poszczególnych elementów HTML, za pomocą jednostek em. W pewnym momencie musieliśmy dokonać pewnego obliczenia. Dzieliliśmy wartość właściwości font-size, danego elementu HTML, przez wartość właściwości font-size elementu rodzica, następnie otrzymaną wartość zamienialiśmy na jednostkę em.

Dzięki funkcji calc() możemy osiągnąć taki sam rezultat, w nieco inny sposób. Musimy określić o ile procent wartość 1em, czyli wartość elementu rodzica, ma zostać powiększona, dla danego elementu HTML.

body {
  font-size:15px;
}

h1 {
  font-size:calc(1em + 60%);
}

p {
  font-size:calc(1em + 20%);
}

ul {
  font-size:calc(1em);
}

W efekcie uzyskamy następujący rezultat:

To Jest Przykładowy Element H1

to jest przykładowy tekst umieszczony w elemencie - p

to jest przykładowy element listy HTML
to jest przykładowy element listy HTML
to jest przykładowy element listy HTML

Kod dokumentu HTML został umieszczony poniżej:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      body {
        font-size:15px;
      }

      h1 {
        font-size:calc(1em + 60%);
      }

      p {
        font-size:calc(1em + 20%);
      }

      ul {
        font-size:calc(1em);
      }
    </style>
  </head>

  <body>

    <div>
      <h1>To Jest Przykładowy Element H1</h1>

      <p>
        to jest przykładowy tekst umieszczony w elemencie - p
      </p>

      <ul>
        <li>to jest przykładowy element listy HTML</li>
        <li>to jest przykładowy element listy HTML</li>
        <li>to jest przykładowy element listy HTML</li>
      <ul>
    </div>

  </body>
</html>

Ponadto zapis margin: calc() calc() calc() calc(); również jest możliwy, w tym wypadku zostaną obliczone wszystkie cztery marginesy zewnętrzne dla danego elementu HTML.