Ostatnio edytowany:

calc()

Autor: Virtual Patriot

Przeznaczenie funkcji calc()

Za pomocą funkcji calc() możemy utworzyć dodatkowe matematyczne obliczenie interesującej nas wartości właściwości CSS. Mowa tu o dowolnej wartości, która może być wyrażona za pomocą liczby wraz z ewentualną jednostką CSS.

Parametry funkcji calc()

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 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:#CBFFFF;
      }
    </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()

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 10

Edge

tak

Zobacz więcej informacji o interpretacji funkcji .