CSS - Functions الدوال

CSS - الدوال (CSS Functions)

🔸 توفر CSS مجموعة من الدوال (Functions) التي تُستخدم داخل الخصائص المختلفة لإضافة مرونة أو حسابات أو تأثيرات بصرية أكثر تقدمًا.

---

🔹 أشهر دوال CSS

• url() – تُستخدم لتحديد رابط صورة أو ملف خارجي.
• rgb() / rgba() – لتحديد الألوان بناءً على القيم الحمراء والخضراء والزرقاء، مع الشفافية.
• hsl() / hsla() – لتحديد الألوان بنظام Hue Saturation Lightness، مع الشفافية.
• calc() – لإجراء عمليات حسابية.
• var() – لاستخدام متغيرات CSS.
• min(), max(), clamp() – دوال رياضية لضبط القيم المتجاوبة.
• attr() – لاسترجاع قيمة خاصية من HTML (يُستخدم بشكل محدود).
• env() – لاستدعاء متغيرات بيئية من الجهاز (مثل مساحة الآمنة في أجهزة iPhone).

---

🧪 أمثلة على الاستخدام

/* استخدام url() */
body {
  background-image: url("background.jpg");
}

/* استخدام rgba() */
p {
  color: rgba(255, 0, 0, 0.5); /* أحمر نصف شفاف */
}

/* استخدام calc() */
div {
  width: calc(100% - 80px);
}

/* استخدام var() */
:root {
  --main-color: blue;
}
h1 {
  color: var(--main-color);
}

/* استخدام clamp() */
h2 {
  font-size: clamp(16px, 4vw, 32px);
}

---

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

• الدوال يمكن دمجها مع بعضها (مثل calc(var(--size) + 10px)).
• تُستخدم الدوال في معظم خصائص CSS مثل: اللون، الحجم، الخلفية، الهوامش، وغيرها.
• تزيد من مرونة التصميم خصوصًا عند إنشاء تصميمات متجاوبة أو ديناميكية.