❮
Programming Basics SQL HTML CSS JavaScript React Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Linux Learn Typing
❯
الدرس التالي❯ ❮الدرس السابق

CSSدوال الحسابات

  • ما هي دوال الحسابات
  • الدالة calc()
  • الدالة max()
  • الدالة min()

ما هي دوال الحسابات

توفر CSS دوال برمجية ( Functions ) يمكن استخدامها لإجراء عمليات حسابية و ذلك لتعيين أحجام العناصر بشكل مرن و بسيط جداً.

في هذا الدرس ستتعلم كيفية عمل و استخدام الدوال calc() و min() و max() بشكل مفصّل.

يمكنك الإستفادة كثيراً من هذه الدوال عند بناء تصاميم متجاوبة ( Responsive ) تظهر بشكل مناسب على مختلف أحجام الشاشات.

الدالة calc()

يمكنك استخدام هذه الدالة لإجراء عمليات حسابية كالإضافة، الطرح، الضرب و القسمة عند حساب القياسات.
الرموز التي يمسح لك باستخدامها فيها هي + - * /.

في المثال التالي قمنا بجعل عرض العنصر يساوي كامل المساحة المتوفرة ناقص 80 بكسل. ثم قمنا بإبعاده من جهة اليسار بمقدار 40 بكسل. بهذا الطريقة سيبدو العنصر ظاهراً على كامل عرض الصفحة و بعيداً بمقدار 40 بكسل من اليسار و 40 بكسل من اليمين.

مثال

#demo {
    position: absolute;
    left: 40px;
    width: calc(100% - 80px);
}
جرب الكود

الدالة max()

يمكنك استخدام هذه الدالة لوضع عدة قيم و جعل المتصفح يختار القيمة الأكبر منها طالما أنها متاحة.
هذه الدالة تتوقع منك قيمة واحدة على الأقل، و في حال وضع أكثر من قيمة فإنه يجب وضع فاصلة بين كل قيمتين.

في المثال التالي قمنا بوضع قيمتين لتحديد العرض و هما 300 بكسل و 50%.
القيمة التي يجد المتصفح أنها أكبر و أنه بالإمكان استخدامها هي التي سيتم اعتمادها.

مثال

#demo {
    width: max(50%, 300px);
}
جرب الكود

الدالة min()

يمكنك استخدام هذه الدالة لوضع عدة قيم و جعل المتصفح يختار القيمة الأصغر منها طالما أنها متاحة.
هذه الدالة تتوقع منك قيمة واحدة على الأقل، و في حال وضع أكثر من قيمة فإنه يجب وضع فاصلة بين كل قيمتين.

في المثال التالي قمنا بوضع قيمتين لتحديد العرض و هما 300 بكسل و 50%.
القيمة التي يجد المتصفح أنها أصغر و أنه بالإمكان استخدامها هي التي سيتم اعتمادها.

مثال

#demo {
    width: min(50%, 300px);
}
جرب الكود