CSS Math Functions (Matematik funksiyalar)

CSS’da ba’zi qiymatlarni hisoblash, kombinatsiya qilish yoki shartli tanlash uchun math functions ishlatiladi. Ular elementlarning o‘lchami, joylashuvi va responsiv dizaynni boshqarishda juda qulay.

Tez ko‘rsatma (Quick Reference)

• calc() → matematik hisob-kitob qilish
• min() → eng kichik qiymatni tanlaydi
• max() → eng katta qiymatni tanlaydi
• clamp() → qiymatni minimal va maksimal oraliqda cheklaydi

1. calc()

Sintaksis:

width: calc(100% - 40px);

Qo‘llab-quvvatlaydi: qo‘shish (+), ayirish (-), ko‘paytirish (*), bo‘lish (/).

Misollar:

.box {
  width: calc(50% - 16px);
  height: calc(100vh - 60px);
  font-size: calc(1rem + 2px);
}

2. min()

Eng kichik qiymatni tanlaydi.

.container {
  width: min(90%, 800px);
}

👉 Ekran kichik bo‘lsa – 90%, katta bo‘lsa – 800px.

3. max()

Eng katta qiymatni tanlaydi.

.text {
  font-size: max(1rem, 12px);
}

👉 Shrift har doim kamida 12px bo‘ladi, lekin 1rem katta bo‘lsa, shuni oladi.

4. clamp()

Minimal, ideal va maksimal qiymat oralig‘ini belgilaydi.

.title {
  font-size: clamp(1rem, 2vw, 2.5rem);
}

👉 Shrift hech qachon 1rem dan kichik bo‘lmaydi, hech qachon 2.5rem dan katta bo‘lmaydi. O‘rtada esa 2vw bo‘yicha moslashadi.

Amaliy Misollar

Responsiv font-size

h1 { font-size: clamp(1.5rem, 5vw, 3rem); }

Flex gap hisoblash

.card {
  width: calc(33.333% - 20px);
  margin: 10px;
}

Min container width

.container {
  max-width: min(100%, 1200px);
}

Sticky header balandligi

main {
  min-height: calc(100vh - var(--header-height));
}

Tailwind CSS integratsiyasi

Tailwind’da to‘g‘ridan-to‘g‘ri math functions yo‘q, lekin [] arbitrary values orqali yozish mumkin.

<div class="w-[calc(100%-2rem)] h-[calc(100vh-64px)]">
  Content
</div>
 
<p class="text-[clamp(1rem,2vw,2.5rem)]">Responsive text</p>

Keng tarqalgan xatolar

1. calc() ichida probel qo‘ymaslik → xato: calc(100%-20px) ❌
2. Faqat px ishlatish → responsiv emas. min(), clamp() bilan kombinatsiya qiling.
3. max() bilan juda katta qiymat → layout buziladi.
4. clamp() noto‘g‘ri tartibda yozish → clamp(min, preferred, max) bo‘lishi kerak.

Qo‘llab-quvvatlash

• calc() → barcha zamonaviy brauzerlar
• min(), max(), clamp() → Chrome, Firefox, Safari, Edge (IE qo‘llamaydi)

Savol-Javob

Q: calc(50% - 10px) va min(50%, 10px) farqi nima? J: calc() hisob-kitob qiladi, min() esa faqat eng kichik qiymatni tanlaydi.

Q: clamp() qachon ishlatish kerak? J: Responsiv font-size, container width, grid gap uchun juda qulay.

Q: Tailwind’da ishlatib bo‘ladimi? J: Ha, arbitrary values orqali (w-[calc(100%-2rem)]).

Yakuniy maslahat

• Layout va font-size uchun clamp() — eng yaxshi do‘stingiz.
• Dinamik container uchun min() va max() ishlating.
• Oddiy matematik hisob-kitoblar uchun calc() kifoya.

Responsiv dizayn qilayotganda bularni kombinatsiya qilib ishlatish eng to‘g‘ri yondashuv.