CSS/calc

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

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

أمثلة

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

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

شيفرة CSS:

.banner {
  position: absolute;
  left: calc(40px);
  width: calc(100% - 80px);
  border: solid black 1px;
  box-shadow: 1px 2px;
  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.

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	19.0 (مع السابقة -webkit-) 26.0	4.0 (مع السابقة -moz-) 16.0	9.0	15.0	6.1
تشعّب الدالة	51.0	48.0	؟	؟	؟

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

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

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

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

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

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

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

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

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

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

calc( <calc-sum> )

حيث:

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

انظر أيضًا

• صفحة نوع البيانات <length> الذي يستعمل لتمثيل القيم الطولية، فعدد كبير من خاصيات CSS تقبل بقيم ذات النوع <length>، مثل width و margin و padding و font-size و border-width و text-shadow.
• صفحة نوع البيانات <percentage> الذي يستعمل لتمثيل النسب المئوية، إذ يقبل عددٌ كبيرٌ من خاصيات CSS القيمَ كنسبٍ مئوية.
• صفحة نوع البيانات <angle> الذي يستعمل لتمثيل القيم الزاويّة بالدرجات (degrees) أو بالغراد (grad) أو بالراديان (radians) أو بالدورات (turns)، ويمكن استخدام هذا النوع في التدرجات اللونية <gradient> وبعض دوال transform.
• صفحة نوع البيانات <time> الذي يُمثِّل قيمةً زمنيةً يُعبَّر عنها بالثانية أو بالملي ثانية، وتُستَخدم في خاصية animation و transition وغيرهما.

مصادر ومواصفات

• مواصفة CSS Values and Units Module Level 3.