CSS calc()

Da li ste se ikad zapitali šta je na svetu svojstvo calc() ? Pa, tek ćete saznati!

Može se koristiti za kreiranje rasporeda u CSS-u. U tu svrhu možete koristiti i svojstvo position .

CSS calc() koristi se za proračune unutar tabele stilova. Funkcija calc() omogućava upotrebu matematičkih izraza :

• sabiranje (+) ,
• oduzimanje (-) ,
• množenje (*) ,
• deljenje (/) .

Znanje matematike u CSS-u je vrlo korisna karakteristika, posebno kada kreirate složeni raspored.

Svi pretprocesori imaju mogućnost da koriste matematičke funkcije, ali nijedna nije toliko moćna kao funkcija calc(). Neke od sposobnosti pretprocesora uključuju gnežđenje u SASS i LESS.

Glavna prednost korišćenja svojstva calc() je sposobnost mešanja različitih jedinica . Na primer, procente možete da podelite brojem bez jedinice ili oduzmete piksele od procenata.

Sintaksa

div {
  width: calc(100% - 30px)
}

Važno je napomenuti da na obe strane operatera mora biti prostora .

Podrška pregledača

Najbolji način da proverite da li neka od CSS svojstava podržavaju pregledači je posetom Can I Use . Vidimo da funkcija calc() ima prilično dobru podršku za pregledače, preko 94%.

Primer pozicioniranja

Jednostavan primer koji pokazuje moć funkcije calc() je pozicioniranje div-a unutar kontejnera.

.parent-element {
  height: 500px;
  width: 500px;
  background-color: #C98EED;
  position: relative;
}

.child-element {
  height: 100px;
  width: 100px;
  background-color: #8FC9FF;
  position: absolute;
  left: calc(100% - 300px);
  top: calc(100% - 150px);
}

U ovom primeru videćemo kako nam funkcija calc() pomaže da postavimo podređeni element u odnosu na nadređeni element .

Posle toga možemo elementima dati neki stil, a tekstu neko oblikovanje.

Primer širine

Još jedan dobar primer može biti gledanje kako postaviti širinu elementa pomoću funkcije calc().

.parent-element {
  height: 400px;
  width: 1000px;
  border: solid thin #808080;
}

.first-child {
  background-color: #C98EED;
  float: left;
  margin-right: 20px;
  width: 50%;
  height: 300px;
}

.second-child {
  background-color: #8FC9FF;
  float: right;
  width: calc(50% - 100px);
  height: 300px;
}

Na ovaj način se funkcija calc() koristi za definisanje širine elementa .second-child koristeći i procenat i jedinice piksela . Ovo je dobra demonstracija sposobnosti jedinice za mešanje ove funkcije.

Zaključak

Nadamo se da ste iz ovog članka naučili nešto novo. Pokazali smo vam osnove funkcije calc(), sada je vreme da se poigrate s njom i otključate njen puni potencijal.

Pogledajte druge članke o CSS svojstvima, kao što su relativna veličina fonta i CSS pozicije .