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

من موسوعة حسوب
< CSS
اذهب إلى: تصفح، ابحث
الدالة 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 وغيرهما.

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