Autor publikacji: Virtual Patriot - Administrator

calc()

Data publikacji: Styczeń 02 2017
Ostatnio edytowano: Wrzesień 07 2020

Zobacz również: w3.org - the calc function (LV4)

Przeznaczenie funkcji `calc()`

Za pomocą funkcji calc() możemy sprawić, aby przeglądarka internetowa dokonała matematycznego obliczenia interesującej nas wartości właściwości CSS. Mowa tu o dowolnej wartości, która może zostać wyrażona za pomocą liczby wraz z ewentualną jednostką CSS.

Parametry funkcji `calc()`

            expression

Przykładowe zapisy

calc(10px + 2em)

calc(20% - 50px)

calc(1.45E2px + 5em)

calc(1em*2)

calc(50px/5)

calc(2 * 2em + 15px)

calc(2 * (2em + 15px))

calc(2 * (2em + 15px) / 4)

translateX(calc(10em - 20%))

expression

Parametr expression jest wymaganym parametrem funkcji calc(). Parametr expression określa matematyczne wyrażenie, które powinno zostać obliczone przez przeglądarkę internetową.

Dostępne wartości: dowolna liczba (również z dowolną wybraną jednostką CSS), jak również procenty
Dostępne matematyczne operatory: + (dodawanie), - (odejmowanie), * (mnożenie), / (dzielenie)
Sposób podawania: korzystając z dostępnych matematycznych operatorów należy utworzyć matematyczne wyrażenie na dostępnych wartościach. Po lewej oraz prawej stronie operatora + oraz operatora - zawsze należy umieścić przynajmniej jeden biały znak (zazwyczaj znak spacji). Podczas wykonywania operacji mnożenia lub operacji dzielenia jedna z wartości zawsze musi być liczbą bez żadnej dodatkowej jednostki CSS.
Ważne: za pomocą dodatkowych nawiasów () możemy zmienić domyślną kolejność wykonywania działań (domyślnie (od lewej do prawej strony wyrażenia) pierw wykonywane jest mnożenie i dzielenie, a następnie dodawanie i odejmowanie)
Wartość domyślna: brak

Przykład funkcji `calc()`

  padding-top:calc(3em - 5px);

rozmiar górnego wewnętrznego marginesu tego elementu "div" został obliczony przez przeglądarkę internetową na podstawie matematycznego wyrażenia "3em - 5px", ponieważ do tego elementu "div" została dodana właściwość "padding-top" wraz z wartością w postaci funkcji "calc()", w której to funkcji zostało użyte następujące matematyczne wyrażenie: "3em - 5px"

Kod źródłowy przykładu

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

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        padding-top:calc(3em - 5px);
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      rozmiar górnego wewnętrznego marginesu tego elementu "div" został obliczony przez przeglądarkę internetową na podstawie matematycznego wyrażenia "3em - 5px", ponieważ do tego elementu "div" została dodana właściwość "padding-top" wraz z wartością w postaci funkcji "calc()", w której to funkcji zostało użyte następujące matematyczne wyrażenie: "3em - 5px"
    </div>

  </body>
</html>

Interpretacja funkcji `calc()`

: tak
: tak
: tak
: tak
: tak, lecz od wersji 9
: tak

Zobacz więcej informacji o interpretacji funkcji calc().