شرح الدالة calc()‎ في CSS

الدالة calc()‎ في CSS تسمح بإجراء عمليات حسابية عند تحديد قيم خاصيات CSS، ويمكن استخدامها في أي موضع يُسمَح فيه باستخدام أنواع البيانات

 الدالة calc()‎ في CSS

الدالة calc()‎ في CSS تسمح بإجراء عمليات حسابية عند تحديد قيم خاصيات CSS، ويمكن استخدامها في أي موضع يُسمَح فيه باستخدام أنواع البيانات <length> و <percentage> و <angle> و <time> و <number> و <integer>.

/* property: calc(expression) */
width:calc(100%-80px);

أمثلة

يمكن بسهولة ضبط موضع أحد العناصر باستخدام الدالة calc()‎ بتحديد قيمة للهامش، ففي هذا المثال أنشأنا عنصرًا يمتد على طول النافذة، مع فراغ بمقدار 40px على جانبيه:

<divclass="banner">هذا هو الشعار!</div>

شيفرة CSS:

.banner{
 position:absolute;
 left:calc(40px);
 width:calc(100%-80px);
 border:solidblack1px;
 box-shadow:1px2px;
 background-color:yellow;
 padding:6px;
 text-align:center;
 box-sizing:border-box;
}

المثال الآتي يُظهِر كيفية تشعّب الدالة calc()‎، مع استخدام المتغيرات في CSS:

.foo{
 --widthA:100px;
 --widthB:calc(var(--widthA)/2);
 --widthC:calc(var(--widthB)/2);
 width:var(--widthC);
}

بعد توسعة جميع المتغيرات، فستكون قيمة المتغير widthC تساوي:

calc(calc(100px/2)/2)

ثم ستُسنَد هذه القيمة إلى قيمة الخاصية width للصنف foo، لاحظ أنَّ جميع دوال calc()‎ المتشعبة ستحوّل إلى أقواس عادية، أي أنَّ قيمة الخاصية width هي:

calc((100px/2)/2)

وهي تساوي 25px.

البنية العامة

تقبل الدالة calc()‎ تعبيرًا وحيدًا كمعامل، وستستُخدَم القيمة الناتجة من التعبير كقيمة للخاصية، ويمكن أن يكون التعبير أيّ تعبير رياضي بسيط يحتوي على المعاملات الآتية (وتتبع قواعد الأولوية في التعابير الرياضية):

• +: الجمع
• -: الطرح
• *: الضرب، ويجب أن يكون أحد الوسائط عددًا <number>.
• /: القسمة، ويجب أن يكون الطرف الأيمن لهذا المُعامِل عددًا <number>.

يمكن استخدام واحدات مختلفة لكل قيمة من قيم التعبير، ويمكنك أيضًا استخدام الأقواس () لتغيير الأولوية عند الحاجة.

يجب أن يُحاط المعاملان + و - بفراغات، فمثلًا الدالة calc(50% -8px)‎ ستُفسَّر على أنها نسبة مئوية يليها طول سالب وهذا تعبيرٌ غير صالح في هذه الدالة، بينما calc(50% - 8px)‎ تُمثِّل نسبةً مئويةً يتبعها معامل الطرح ويليه طول <length>، أما الدالة calc(8px + -50%)‎ فتُعامَل على أنها قيمة طولية يليها معامل الجمع يتبعه نسبة مئوية سالبة.

أما المعاملان * و / فلا يحتاجان إلى فراغات حولهما، لكن من المستحسن إضافتها للتناسق في شكل التعبير.

لاحظ أنَّ التعابير الرياضية التي فيها نسب مئوية <percentage> لتحديد عرض أو ارتفاع أعمدة أو مجموعة أعمدة أو أسطر أو مجموعة أسطر أو خلايا الجداول ستُعامَل كما لو حُدِّدَت الكلمة المحجوزة auto.

من المسموح تشعّب الدالة calc()‎ داخل دالة calc()‎ أخرى، وفي هذه الحالة ستُعامَل الدالة الداخلية كأنها أقواس عادية.

ستؤدي القسمة على صفر إلى حدوث خطأ يولَّد من مُفسِّر مستند HTML.

من هو تعرف علي الدوال في css .

---

البنية الرسمية

calc(<calc-sum>)

حيث:

<calc-sum>=<calc-product>[['+'|'-']<calc-product>]*
<calc-product>=<calc-value>['*'<calc-value>|'/'<number>]*
<calc-value>=<number>|<dimension>|<percentage>|(<calc-sum>)

wesam developer

إذا أعجبك المقال أو كان مفيدًا - ضع "أعجبني". اشترك في المدونة اوشارك برأيك في التعليقات! أراك لاحقا