CSS Math Functions

-

تدعم CSS مجموعة من function  الخاصة بالعمليات الحسابية لتوليد قيم يمكن استخدامها منها

()calc() ، max()، min() ، abs()، asin

للمزيد حول function  يمكن الرجوع الى CSS Functional Notation

 تمام نشوف كيف ممكن نستخدم هذه functions 

()calc

يستخدم هذا function لإجراء عمليات حسابية مثل الجمع الطرح الضرب القسمة 

طريقة الكتابة :

calc(expression)

expression عبارة عن عملية حسابية ناتجة عن عملية جمع او طرح او قسمه او ضرب 

تمام نطبق مثال حتى نفهم الموضوع:


<!DOCTYPE html>
<html>
<head>
<style>
.banner {
  position: absolute;
  left: 40px;
  width: calc(100% - 80px);
  border: solid black 1px;
  box-shadow: 1px 2px;
  background-color: rgb(182, 182, 179);
  padding: 6px;
  text-align: center;
  box-sizing: border-box;
  font-size: large;
  font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
    <div class="banner">
كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.
</div>
</body>
</html>

في هذا المثال تعمل ()calc  على تحديد العرض ل  <div> وذلك بحساب العرض كامل 100% ناقص 80px. ويتم عرض هذا <div> بشكل ممتد في النافذة مع وجود مسافه بمقدار 40 بكسل من ناحية اليسار.

شغل الصفحة واكيد بتكون النتيجة:

()max 

يستخدم هذا function لاختيار اكبر قيمة من مجموعة قيم 

طريقة الكتابة :

max(value1, value2, ...)

تمام نطبق مثال حتى نفهم الموضوع:


<!DOCTYPE html>
<html>
<head>
<style>
.banner {
  position: absolute;
  left: 40px;
  /*width: calc(100% - 80px);*/
  width: max(50%, 400px);
  border: solid black 1px;
  box-shadow: 1px 2px;
  background-color: rgb(182, 182, 179);
  padding: 6px;
  text-align: center;
  box-sizing: border-box;
  font-size: large;
  font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
    <div class="banner">

كم من مؤَّملِ شيءٍ ليسَ يُدْرِكه والمرءُ يزري بهِ في دهرهِ الأملُ يرجُو الثراءَ 
ويرجٌو الخلدَ مجتهداً ودونَ ما يرتجي الأقدارُ والأجلُ.
</div>
</body>
</html>

في هذا المثال تعمل ()max على تحديد العرض ل  <div> وذلك بإرجاع اكبر قيمة  بين 50% من حجم الشاشة و 400px. ويتم عرض هذا <div> بشكل ممتد في النافذة مع وجود مسافه بمقدار 40 بكسل من ناحية اليسار.

()min 

نفس فكره max باستثناء اختيار القيمة الأصغر من مجموعة قيم .