CSS - Math Functions دوال الرياضيات

CSS - دوال الرياضيات (Math Functions)

🔸 توفر CSS مجموعة من الدوال الرياضية التي تتيح لك إجراء عمليات حسابية مباشرة داخل ملف CSS، مما يُسهل التعامل مع القياسات بطريقة ديناميكية ومرنة.

---

🔹 1. calc() - الحسابات

تُستخدم لإجراء عمليات حسابية بين وحدات مختلفة مثل % و px و em.

.box {
  width: calc(100% - 50px);
}

📌 هذه القاعدة تعني أن عرض العنصر سيكون 100% ناقص 50px.

---

🔹 2. min() - أصغر قيمة

تُرجع أصغر قيمة بين القيم المحددة.

.box {
  width: min(50%, 400px);
}

📌 سيتم تطبيق أصغر قيمة بين 50% من عرض الحاوية و400px.

---

🔹 3. max() - أكبر قيمة

تُرجع أكبر قيمة بين القيم المحددة.

.box {
  width: max(300px, 30%);
}

📌 سيتم تطبيق القيمة الأكبر بين 300px و30% من عرض الحاوية.

---

🔹 4. clamp() - النطاق المحدد

تُستخدم لتحديد قيمة تتغير ضمن حد أدنى وحد أقصى.

.box {
  font-size: clamp(16px, 2vw, 24px);
}

📌 هذا يعني أن حجم الخط سيتغير مع عرض الشاشة ولكن لن يقل عن 16px ولن يزيد عن 24px.

---

📌 ملاحظات هامة

• ضع مسافات حول العمليات الحسابية داخل calc() لتجنب الأخطاء.
• يمكنك دمج الدوال معًا في نفس الخاصية.
• هذه الدوال مدعومة في جميع المتصفحات الحديثة.