Samet KAYA

Blog

CSS CALC() FONKSIYONU

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:

calc(expression)

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:

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.

Yorum ekle