CSS / دوال الحسابات
ما هي دوال الحسابات
توفر CSS دوال برمجية ( Functions ) يمكن استخدامها لإجراء عمليات حسابية و ذلك لتعيين أحجام العناصر بشكل مرن و بسيط جداً.
في هذا الدرس ستتعلم كيفية عمل و استخدام الدوال
يمكنك الإستفادة كثيراً من هذه الدوال عند بناء تصاميم متجاوبة ( Responsive ) تظهر بشكل مناسب على مختلف أحجام الشاشات.
الدالة calc()
يمكنك استخدام هذه الدالة لإجراء عمليات حسابية كالإضافة، الطرح، الضرب و القسمة عند حساب القياسات.
الرموز التي يمسح لك باستخدامها فيها هي
في المثال التالي قمنا بجعل عرض العنصر يساوي كامل المساحة المتوفرة ناقص 80 بكسل. ثم قمنا بإبعاده من جهة اليسار بمقدار 40 بكسل. بهذا الطريقة سيبدو العنصر ظاهراً على كامل عرض الصفحة و بعيداً بمقدار 40 بكسل من اليسار و 40 بكسل من اليمين.
مثال
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
position: absolute;
left: 40px;
width: calc(100% - 80px);
border: 1px solid black;
background: bisque;
padding: 10px;
box-sizing: border-box;
}
</style>
</head>
<body>
<h1>CSS calc Function</h1>
<div id="demo">Element width is calculated by the calc function.</div>
</body>
</html>الدالة max()
يمكنك استخدام هذه الدالة لوضع عدة قيم و جعل المتصفح يختار القيمة الأكبر منها طالما أنها متاحة.
هذه الدالة تتوقع منك قيمة واحدة على الأقل، و في حال وضع أكثر من قيمة فإنه يجب وضع فاصلة بين كل قيمتين.
في المثال التالي قمنا بوضع قيمتين لتحديد العرض و هما 300 بكسل و 50%.
القيمة التي يجد المتصفح أنها أكبر و أنه بالإمكان استخدامها هي التي سيتم اعتمادها.
مثال
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
width: max(50%, 300px);
border: 1px solid black;
background: bisque;
padding: 10px;
box-sizing: border-box;
}
</style>
</head>
<body>
<h1>CSS max Function</h1>
<div id="demo">The bigger value is used as width.</div>
<p>If 300px is bigger than 50% where the element
is shown, then 300px will be set as its width. But if
50% is bigger than 300px where the element is shown,
then 50% will be set as its width.</p>
<p>Note: Resize the screen to notice the change.</p>
</body>
</html>الدالة min()
يمكنك استخدام هذه الدالة لوضع عدة قيم و جعل المتصفح يختار القيمة الأصغر منها طالما أنها متاحة.
هذه الدالة تتوقع منك قيمة واحدة على الأقل، و في حال وضع أكثر من قيمة فإنه يجب وضع فاصلة بين كل قيمتين.
في المثال التالي قمنا بوضع قيمتين لتحديد العرض و هما 300 بكسل و 50%.
القيمة التي يجد المتصفح أنها أصغر و أنه بالإمكان استخدامها هي التي سيتم اعتمادها.
مثال
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
width: min(50%, 300px);
border: 1px solid black;
background: bisque;
padding: 10px;
box-sizing: border-box;
}
</style>
</head>
<body>
<h1>CSS min Function</h1>
<div id="demo">The smaller value is used as width.</div>
<p>If 300px is smaller than 50% where the element
is shown, then 300px will be set as its width. But if
50% is smaller than 300px where the element is shown,
then 50% will be set as its width.</p>
<p>Note: Resize the screen to notice the change.</p>
</body>
</html>