Calc i zmienne : odlotowe właściwości CSS

calc() Czy wiedziałeś, że w CSS możesz wykonywać kalkulacje matematyczne?

Tworzenie stron internetowych nigdy nie było, aż tak łatwe. Pomyśleć, że kiedyś CSS nie miało żadnych funkcji teraz ich masz bardzo dużo i jednym problemem jest wsparcie przez przeglądarki.

Dobra wiadomość jednak jest taka, że wraz ze śmiercią Internet Explorer i pojawieniem się przeglądarki EGDE - CSS przeżywa najszybszy rozwój niż kiedykolwiek.

W tym wpisie omówimy w dokładnych szczegółach jak tą funkcje LICZENIA wykorzystać.

Calc() jest dla obliczania wartości

Używając Calc() możesz obliczyć wartości, nawet gdy ich jednostki liczbowe są różne.

.el {
  font-size: calc(3vw + 2px);
  width:     calc(100% - 20px);
  height:    calc(100vh - 20px);
  padding:   calc(1vw + 5px);
}

Możesz nawet utworzyć gradient w odpowiednim kolorze korzystając z calc().

.el {
   background: # linear-gradient(
     to bottom,
     #8CA5E2,
     #8CA5E2 calc(50% - 10px),
     #3A83AA calc(50% + 10px),
     #3A83AA
   );
}

Używając tej funkcji łatwo byś mógł ustalić ułamek wielkości pewnego rozmiaru. Warto zaznaczyć, że liczba dzieląca nie może mieć swojej jednostki liczbowej.

.col7 { width: calc(100% / 7); }
.col6 { width: calc(100% / 6); }
.col5 { width: calc(100% / 5); }
.col4 { width: calc(100% / 4); }
.col3 { width: calc(100% / 3); }
.col2 { width: calc(100% / 2); }

Calc() i operacje nieliczbowe?

Calc nie wykonuje operacji na napisach. Znaki i operacje "dodawania" wielu językach się pojawiają przy napisach, ale nie w tym przypadku.

Calc() i media queries

Calc() nie działa z media queries.

Jak to jest z mieszaniem jednostek liczbowych

Mieszanie jednostek liczbowych działa, gdy taka operacja ma sens.

width: calc(80% - 20px);

Pomyśl 80% reprezentuje rozmiar 4/5 maksymalnego dostępnego rozmiaru. Ten rozmiar zostanie przeliczony na piksele, a gdy tak się stanie operacja odejmowania nie jest problemem.

Oczywiście w CSS operujemy nie tylko na wielkościach. Mam przecież jednostkę stopni, gdy chcemy coś obrócić.

transform: rotate(calc(1turn + 45deg));

animation-delay: calc(1s + 15ms);

Mamy także przecież też jednostki czasu w animacjach. Warto sobie w takim wypadach zadać pytanie, czy przeglądarka będzie w stanie wykonać operację takiej kalkulacji.

Zmienne i kalkulacje 

Zmienne i kalkulacje kiedyś żyły tylko w świecie SASS. Teraz w CSS możesz zrobić to samo bez żadnych dodatkowych zabawek.

Najpierw sprawdziłem czy do zmiennych CSS mogę umieścić zmienne liczbowe.

:root {
    --mainmax-width: 55px;
    --main-padding: 15px;
}

.element {
    max-width: var(--mainmax-width);
    padding: var(--main-padding);
    background-color: yellow;
}

Gdy to potwierdziłem pozostało tylko sprawdzić, czy mogę zrobić operacje matematyczne na tych zmiennych.

:root {
    --mainmax-width: 55px;
    --main-padding: 15px;
}

.element {
    max-width: calc(var(--mainmax-width)*2);
    padding: calc(var(--main-padding) *2 );
    background-color: yellow;
}

Odpowiedź brzmi tak.

Tak jak z dzieleniem pamiętaj jednak, że przy mnożeniu nie podajesz jednostki liczbowej.

Białe znaki mają znaczenie

Spacje muszą być.

.element {
  /* Działa */
  font-size: calc(2vh + 5px);

  /* Nie działa */
  font-size: calc(2vh+5px);

  /* Działa */
  font-size: calc(2vh - 5px);

  /* Nie działa */
  font-size: calc(2vh-5px);
}

Nawias jest kluczowy w deklaracji calc() więc ten kod też nie jest poprany.

.element {
  /* Nie poprawne */
  width: calc (100% / 3);
}

Wielokrotne użycie calc()

Ciekawostka, gdy chcesz użyć wiele razy calc(), to nie musisz pisać takiego kodu.

.element {
  width: calc(
   calc(100% / 3)
    -
   calc(1vh * 2)
  );
}

Wystarczą Ci zwykłe nawiasy

.element {
  width: calc(
   (100% / 3)
    -
   (1vh * 2)
  );
}

Tak jak w każdym języku programowania, pojawia się kwestia kolejności działań. Pamiętaj mnożenie, dzielenie wykona się przed odejmowanie i dodawaniem. 

Jeżeli chcesz zmienić tą kolejność to korzystasz z nawiasów.

Tworzenie kolorów

Zmienne i funkcja Calc() działa bardzo dobrze z deklarowaniem kolorów poprzez formaty RGB czy HSL.

root: {
  --H: 100;
  --S: 100%;
  --L: 50%;
}

.el {
  background: hsl(
    calc(var(--H) + 40),
    calc(var(--S) - 30%),
    calc(var(--L) + 10%)
  )
}

Jak to jest z przeglądarkami

Jeżeli musisz wspierać IE8 lub FireFox-a 3.6 to zapomnij o użyciu calc(). 

FireFox do wersji 60 nie wspiera calc() przy użyciu generowania kolorów. 

IE 9 - 11 : źle tworzy box-shadow, gdy calc() jest w użyciu

Ciekawostka ani IE, ani Egde obecnie nie wspiera width:calc() dla komórek w tabeli. Jeżeli używasz tabelek to musisz o tym pamiętać.