العمل مع الوحدات النسبية والمطلقة Absolute and Relative Units

فهم الدوال Functions

تُعدّ calc() دالةً (function) من دوال CSS. ستتعرف على المزيد حول الدوال عندما تبدأ في تعلم لغة JavaScript، لكنك في هذا الدرس ستتعلم الأساسيات التي تحتاج إلى معرفتها لفهم كيفية عمل calc().

الدالة (Function) هي كتلة من التعليمات البرمجية التي تؤدي مهمة محددة. وتوجد في لغة CSS دوال مُعرَّفة مسبقاً، يمكنك استخدامها مباشرةً وتمرير القيم اللازمة إليها لتخصيص كيفية تنفيذ مهامها.

في عالم البرمجة، عندما نقوم بتنفيذ المهمة التي تؤديها دالة ما، فإننا نقول إننا "نستدعي" (call) هذه الدالة. أما القيم (values) التي نمررها إلى الدالة فتُعرف باسم "المعاملات" (arguments).

كما ترى في الكود أدناه، لاستدعاء دالة، تكتب اسمها متبوعًا بالمعلمات داخل أقواس عادية، مفصولة بفواصل. لا يجب وجود فراغ بين اسم الدالة وفتح القوس.

function(argument1, argument2, argument3)
            

قد تحتاج الدالة (function) إلى قيمة واحدة فقط لتعرف ما ينبغي عليها فعله؛ وفي هذه الحالة، فإنها تأخذ وسيطاً (argument) واحداً فقط. وهذا هو الحال مع الدالة calc() ، فهي تأخذ وسيطاً واحداً لأنها تحتاج إلى معرفة ما يجب عليها حسابه.

للقيام بذلك، تقوم بتمرير ما يُسمى "تعبيرًا" (expression) كمعامل. والتعبير هو مزيج من القيم (values) والعوامل (operators) التي تُنتج نتيجةً ما.

هكذا يمكنك استدعاء دالة calc(). تكتب الاسم calc، متبوعًا بأقواس عادية، وداخل الأقواس تكتب التعبير (expression) :

calc(expression)
            

يتم تقييم التعبير (Expression) لاحتساب النتيجة النهائية. والمقصود بـ "التقييم" (Evaluated) هنا هو أن القيم والعوامل (Operators) تُحوَّل - خلف الكواليس - إلى قيمة واحدة. وتُسند هذه النتيجة إلى خاصية CSS التي يجري فيها الحساب.

القيم والعمليات المدعومة Supported Values and Operators

يمكنك إجراء عمليات حسابية على قيم تمثل الطول (length)، والزاوية (angle)، والزمن (time)، والنسب المئوية (percentages)، والأرقام (numbers). كما يمكنك الجمع بين وحدات مختلفة، مثل البكسل (pixels) والنسب المئوية (percentages) ووحدات "em".

بالنسبة للجمع والطرح (addition and subtraction)، يجب أن تحمل كل القيم في التعبير، والتي تُسمى أيضًا المعاملات، وحداتها المقابلة مثل px و em و النسبة المئوية (%). حسب العامل (operator)، قد تحمل المعاملات وحدات مختلفة (different units).

يمكنك استخدام عوامل الجمع (+)، الطرح (-)، الضرب (*)، والقسمة (/) في التعبير (expression).

إذا كان هناك عدة معاملات وعوامل (operands and operators)، تتبع calc() قاعدة أسبقية العوامل القياسية (standard operator precedence rule). يمكنك أيضًا إضافة أقواس عادية لتحديد ترتيب العمليات إذا لزم الأمر.

حساب عرض متجاوب Responsive Width

في المثال أدناه، ترى عنصر div يحتوي على النص مرحبا بالعالم!.

باستخدام محدد النوع (type selector) في CSS لاختيار div، يمكنك تنسيقه بنص أبيض (white text) وخلفية زرقاء داكنة (dark blue background) :

<link rel="stylesheet" href="styles.css">

<div>مرحبا بالعالم!</div>
            

div {
 color: white;
 background-color: #1b1b32;
 width: calc(50% - 20px);
}
            

معاينة:

الجديد هنا هو أن العرض (width) يُحسَب ديناميكيًا (dynamically). لاحظ كيف نستدعي الدالة calc() ونمرر لها تعبيرًا (expression) كمعامل (argument)؛ إذ يحتوي هذا التعبير على متعاملَين (operands) بوحدات قياس مختلفة، بالإضافة إلى عامل (operator) واحد، وهو عامل الطرح.

تُعد النسبة المئوية وحدةً نسبية (relative unit)؛ إذ تتحدد القيمة (50%) بناءً على عرض الحاوية الأب (parent container)، ثم تُطرح 20 بكسل 20px من هذه القيمة. وتحدد نتيجة هذه العملية الحسابية عرض عنصر الـ div.

يبلغ عرض عنصر div حوالي نصف العرض الإجمالي للحاوية التي تحتويه، وإذا قمت بتغيير حجم الحاوية الأصلية، فسيتم إعادة حساب العرض تلقائيًا (automatically).

تلك هي الميزة الأساسية لاستخدام الدالة calc()؛ إذ تتيح لك تحديد قيمة خاصية CSS بشكل ديناميكي بناءً على جوانب مختلفة من التطبيق أو إطار العرض (viewport).

يمكن أن يتضمن التعبير (expression) أيضًا دوال ومتغيرات CSS إذا كنت بحاجة إلى استخدامها في حساباتك. ستتعرف على المزيد حول متغيرات CSS في الدروس التالية.

أفضل الممارسات

رائع. الآن بعد أن عرفت أساسيات دالة calc() ، دعنا نغطي بعض أفضل الممارسات الخاصة بها.

أولًا، يجب أن تحيط عوامل الجمع (+) والطرح (-) بمسافات فارغة.

على سبيل المثال، التعبير (expression) أدناه لن يكون تعبيرًا صالحًا لأن عامل الطرح (subtraction operator) يأتي مباشرة قبل المعامل الثاني (second operand).

calc(100% -30px)
            

يجب أن يُحاط عامل الطرح (-) بمسافات فارغة، هكذا. إضافة المسافات ستجعل التعبير صالحًا.

calc(100% - 30px)
            

هذا غير ضروري لعوامل الضرب والقسمة لكنه موصى به بشدة.

يمكنك أيضاً تضمين (nest) استدعاءات دالة calc() داخل بعضها البعض إذا كنت بحاجة إلى إجراء عمليات حسابية واستخدام نتائجها في عمليات حسابية أخرى.

علاوةً على ذلك، إذا استخدمت القيمة صفر لتمثيل الطول في التعبير الذي تمرره إلى الدالة calc() ، فيجب عليك تضمين الوحدات (units). على سبيل المثال، لن يكون هذا التعبير صالحاً:

calc(100% - 0)
            

ستحتاج إلى إضافة الوحدات، مثل px.

calc(100% - 0px)
            

يجب أن تعرف أيضًا أنه إذا استخدمت عامل الضرب، يجب أن يكون أحد المعاملات بلا وحدة (unit). هذا التعبير لن يكون صالحًا لأن كلا المعاملتين تحملان وحدات (pixels) :

calc(5px * 50px)
            

يجب عليك حذف الوحدة في واحدة منهما. كلا هذين الخيارين سيكونان صالحين:

calc(5 * 50px)
calc(5px * 50)
            

بالنسبة لعامل القسمة، تؤدي القسمة على عددٍ بلا وحدات (unitless number) إلى تغيير القيمة مع الحفاظ على وحدتها (its unit) :

calc(50% / 5)
            

يُعدّ تقسيم قيمتين لهما وحدات قياس متطابقة أمراً جائزاً أيضاً، لكنه يؤدي إلى إلغاء الوحدات، مما ينتج عنه رقمٌ مجرّد من أي وحدة (مثل الرقم 10). تجدر الإشارة إلى أن القيم الخالية من الوحدات لا يمكن استخدامها إلا مع خصائص معيّنة في لغة CSS (مثل line-height أو flex-grow):

calc(50% / 5%)