43- دوال الحسابات الرياضية في CSS (CSS Math Functions)

تتيح لك دوال الحسابات الرياضية في CSS استخدام التعبيرات الحسابية كقيم للخصائص. سنشرح في هذا الجزء وظائف calc()‎ و max()‎ و min()‎.

دالة calc()

تستخدم دالة calc() لإجراء عملية حسابية يتم استخدام نتيجتها كقيمة خاصية.

صيغة CSS:

CSS

calc(expression)

القيمة:

• expression (مطلوب): عبارة حسابية. سيتم استخدام النتيجة كقيمة للخاصية.

المعاملات المتاحة:

• + (جمع)
• - (طرح)
• * (ضرب)
• / (قسمة)

مثال:

استخدام calc() لحساب عرض عنصر div:

CSS

#div1 {
  position: absolute;
  left: 50px;
  width: calc(100% - 100px);
  border: 1px solid black;
  background-color: yellow;
  padding: 5px;
}

في هذا المثال، تقوم دالة calc() بطرح 20px من عرض النافذة (100vw) لتحديد عرض العنصر div.

دالة max() في CSS

تستخدم دالة max() لتحديد أكبر قيمة من قائمة من القيم المفصلة بالفاصلة.

صيغة CSS:

CSS

max(value1, value2, ...)

القيمة:

• value1 و value2 و … (مطلوب): قائمة من القيم المفصلة بالفاصلة. تختار الدالة القيمة الأكبر من بين هذه القيم.

مثال:

استخدام max() لتعيين عرض العنصر الذي يملك المعرف #div1 إلى أكبر قيمة بين 50% و 300px:

CSS

#div1 {
  background-color: yellow;
  height: 100px;
  width: max(50%, 300px);
}

في هذا المثال، ستقوم دالة max() بمقارنة القيمتين 50% و 300px واختيار القيمة الأكبر (300px) لتحديد عرض العنصر div.

دالة min() في CSS

تستخدم دالة min() لتحديد أصغر قيمة من قائمة من القيم المفصلة بالفاصلة.

صيغة CSS:

CSS

min(value1, value2, ...)

القيمة:

• value1 و value2 و … (مطلوب): قائمة من القيم المفصلة بالفاصلة. تختار الدالة القيمة الأصغر من بين هذه القيم.

مثال:

استخدام min() لتعيين عرض العنصر الذي يملك المعرف #div1 إلى أصغر قيمة بين 50% و 300px:

CSS

#div1 {
  background-color: yellow;
  height: 100px;
  width: min(50%, 300px);
}

في هذا المثال، ستقوم دالة min() بمقارنة القيمتين 50% و 300px واختيار القيمة الأصغر (50%) لتحديد عرض العنصر div.

دوال الحسابات الرياضية في CSS

تتيح لك دوال الحسابات الرياضية في CSS استخدام التعبيرات الحسابية لتحديد قيم خصائص العناصر.

ملخص لأهم دوال الحسابات الرياضية: