CSS calc() Fonksiyonu

calc() fonksiyonu CSS özellik değerleri için basit bir hesaplama yapmanızı sağlar. calc() CSS3'te oldukça yeni ve hala nadiren kullanılan fonksiyondur. Css calc(), stil sayfasının içindeki hesaplamalar için kullanılır. calc() fonksiyonu matematiksel ifadelerin kullanılmasına izin verir:

• Toplama (+)
• Çıkarma (-)
• Çarpma (*)
• Bölünme (/)

CSS'de matematik kullanabilmek, özellikle karmaşık mizanpajlar oluştururken çok kullanışlı bir özelliktir. Her türlü ünitenin katılımıyla doğrudan stil tanımlarında basit aritmetik işlemleri ayarlamanıza olanak tanır. Boyutları, konumları, dönüşümleri ve hatta öğelerin renklerini hesaplamak için çok uygundur. Tüm bunların nerede kullanışlı olabileceğini ve buna değer olup olmadığını görelim.

CSS calc() Fonksiyonu

Calc() fonksiyonu, uzunluk değerlerini dinamik olarak hesaplamak için kullanılır.

• Operatörden önce ve sonra boşluk bırakmanız gerektiğini unutmayın; örneğin: width: calc (100% - 10px);
• Herhangi bir uzunluk değeri calc() fonksiyonu kullanılarak hesaplanabilir.
• calc() fonksiyonu "+", "-", "*", "/" işlemlerini destekler.
• calc() fonksiyonu standart matematiksel işlem öncelik kurallarını kullanır.
• Yüzdeleri, piksel, ems, rems, vw, vh vb. Gibi birimleri de karıştırabilirsiniz.

CSS Sözdizimi:

expression:Gereklidir. Matematiksel bir ifade. Sonuç değer olarak kullanılacaktır. Aşağıdaki operatörler kullanılabilir: + - * /

Tarayıcı Desteği

Fonksiyon
calc()	26.0	9.0	16.0	7.0	15.0

ÖRNEK:

  
  width: calc(100% - 80px);
  
  

Calc() Değerler

• calc(100% – 100px)
• calc(100%/3 – 2*1em – 2*1px)

Geri dönüş değeri

Bir özelliği tanımlamak için calc() fonksiyonu kullanıyorsanız, tarayıcının calc() fonksiyonu desteklememesi durumunda bir geri dönüş genişliği değeri tanımlamak iyi bir fikir olabilir. Geri dönüş değeri ana değerden önce gelmelidir.

  
  width: 95%;
  width: calc(100% - 100px);
  
  

Pek çok kişi, önişlemcilerin yalnızca mantık ve hesaplamalardan oluştuğunu düşünür, ancak calc() fonksiyonu dünyada hiçbir ön işlemcinin yapamadıklarını yapabilir: herhangi bir ölçü birimini karıştırır. Önişlemciler, yalnızca ölçüm birimlerini, açısal ölçüm birimleri, zaman, frekans, çözünürlük ve bazı uzunluk birimleri gibi sabit ilişkilerle karıştırabilir.

  
div {
   font-size: calc(3em + 5px);
   padding: calc(1vmax + -1vmin);
   transform: rotate(calc(1turn - 32deg));
   background: hsl(180, calc(2*25%), 65%); 
   line-height: calc(8/3);
   width: calc(23vmin - 2*3rem);
   }
  
  

Sözdizimini anlamak için işte birkaç örnek:

  
div {
  width: calc(70%/3); 
  width: calc(50% - 2em); 
  width: calc((50% + 2em) / 2 + 14px);
  width: calc(100% / 3 - 2 * 1em - 2 * 1px);
  margin: calc(1rem - 2px) calc(1rem - 1px);
  background-position: calc(50% + 20px) calc(50% + 20px), 50% 50%;
  background-image: linear-gradient(to right, silver, white 50px, white calc(100% - 50px), silver);
   }
  
  

ÖZET

CSS calc() fonksiyonu, modern web uygulamalarınız için güzel, akıcı ve duyarlı web tasarımları yapmanıza yardımcı olacak basit bir püf noktasıdır.