أهم الدوال الحسابية في لغة السي إس إس (CSS)

في تصميم المواقع، يحتاج المصممون إلى مرونة في استخدام القيم الثابتة والنسبية لتحقيق تصميم متجاوب. ومن الأدوات المفيدة في السي إس إس (CSS) لتحقيق هذه المرونة هي الدوال الحسابية مثل calc() وclamp() وmin() وmax(). هذه الدوال تساعد في التحكم بشكل أفضل بالقيم وتساهم في تحسين تجربة المستخدم.

في هذا المقال، سنتعرف على هذه الدوال الأربعة وكيفية استخدامها بشكل عملي، بالإضافة إلى معرفة مدى دعمها في المتصفحات المشهورة.

دالة calc() #

دالة calc() في السي إس إس هي واحدة من أكثر الدوال استخداما، حيث أنها تتيح إجراء عمليات حسابية مباشرة لتحديد قيم مختلف الخصائص. عند القيام بالعمليات الحسابية التي تشمل الجمع (+) والطرح (-) والضرب (*) والقسمة (/)، يمكن دمج عدة وحدات قياس مختلفة مثل البكسل (px)، النسبة المئوية (%)، الوحدة النسبية بالنسبة للأب (em) وغيرها، مما يوفر مرونة كبيرة في تحديد القيم.

لنفترض أنك تريد أن تجعل المحتوى يملأ الشاشة بالكامل مع وجود هوامش صغيرة بمقدار 50 بكسل (px) من كل جانب، وفي نفس الوقت تجعل المحتوى يتوسط الصفحة دون الحاجة لاستخدام الـ padding.

body {
    width: calc(100% - 100px);
    margin: auto;
}

في هذا المثال، نرى أن العرض (width) سيكون 100% من المساحة المتاحة مع خصم 100px (50 بكسل من كل جانب) للحصول على الهوامش. إضافة إلى استخدام margin: auto; لتوسيط المحتوى في الصفحة.

توضيح بسيط: عند ذكر مصطلح «الشاشة» في بعض السياقات، قد لا يعني ذلك بالضرورة الشاشة الكاملة للجهاز. ففي بعض الأحيان، قد يشير المصطلح إلى نافذة المتصفح فقط أي الجزء الذي تعرض فيه صفحة الويب، وذلك بناء على السياق الذي يتم فيه استخدام المصطلح.

دالة clamp() #

الدالة clamp() تعد واحدة من أبرز الدوال الحسابية التي توفر لك تحكما دقيقا في كيفية عرض التصاميم وتنسيقها بطريقة مرنة ومتكيفة مع أحجام الشاشات المختلفة، حيث أنها توفر مرونة كبيرة في التعامل مع القيم ضمن نطاقات معينة. بفضل هذه الدالة، يمكنك تحديد ثلاث قيم: القيمة الدنيا، القيمة المثلى (التي تكون عادة نسبية)، والقيمة القصوى.

• القيمة الدنيا: هي الحد الأدنى الذي يمكن أن يصل إليه العنصر.

• القيمة المثلى: هي القيمة التي سيتم اعتمادها افتراضيا إذا كانت أكبر من القيمة الدنيا وأصغر من القيمة القصوى.

• القيمة القصوى: هي الحد الأقصى الذي لا يمكن للعنصر تجاوزه.

إذا كانت القيمة المثلى ثابتة، فلن تلاحظ أي فرق عند تغير عرض الشاشة (تمددا أو تقلصا)، لأن القيمة المثلى لن تتكيف مع التغيرات لتصل إلى القيمة القصوى أو تتقلص لتصل إلى القيمة الدنيا.

.layout {
    width: 600px;
    width: clamp(400px, 600px, 800px);
}

في هذا المثال، رغم أننا حددنا قيما مختلفة للدالة clamp()، إلا أن النتيجة سوف تبقى كما هي (مشابهة لقيمة السطر العلوي)، أي أن العرض سيكون 600px لأن القيمة المثلى (الوسطى) ثابتة.

إليك هذا المثال الذي سيشرح لك كل شيء بوضوح.

.layout {
    width: clamp(400px, 50vw, 800px);
}

من ناحية، إذا كان عرض شاشة حاسوبك هو 1920 بكسل، فإن 50vw تمثل 50% من عرض الشاشة، أي 960 بكسل. وبما أننا حددنا أن أقصى عرض يمكن أن يصل إليه العنصر .layout هو 800px، فإنه لن يتجاوز هذا الحد.

من ناحية أخرى، إذا كان لديك هاتف ذكي عرض شاشته 400 بكسل، فإن 50vw ستكون 200 بكسل. ولكن بما أننا حددنا أن الحد الأدنى للعرض هو 400px، فإن عرض العنصر سيظل 400px ولن يقل عن ذلك.

نأمل أن يكون المثال الآن أكثر وضوحا. هذا مثال آخر يحقق نفس النتيجة ولكن بدون استخدام الدالة clamp().

.layout {
    min-width: 400px;
    max-width: 800px;
    width: 50vw;
}

تجدر الإشارة إلى أنه يمكنك إجراء العمليات الحسابية داخل الدالة clamp().

.layout {
    width: clamp(400px, 50vw, 400px * 2);
}

الدالة min() #

تستعمل دالة min() لاختيار أصغر قيمة من بين القيم التي يتم تمريرها للدالة.

.layout {
    width: min(50vw, 200px * 2);
}

نلاحظ في هذا المثال أن الحد الأقصى لعرض العنصر .layout هو 400 بكسل، أي ما يعادل 200px * 2. بعد ذلك، سوف ينكمش العنصر ليشغل نصف عرض الشاشة وفقًا لـ 50vw.

إليك مثالا آخر يحقق نفس النتيجة بدون استخدام الدالة min()

.layout {
    max-width: 400px;
    width: 50vw;
}

الدالة max() #

دالة max() في السي إس إس تقوم باختيار أكبر قيمة من بين القيم التي تمرر لها. بمعنى آخر، هي عكس دالة min() التي تختار أصغر قيمة.

.layout {
    width: max(50vw, 100px * 4);
}

في هذا المثال، سيأخذ العنصر .layout نصف عرض الشاشة كقيمة قصوى، بينما سيأخذ 400 بكسل كقيمة دنيا.

هذا المثال يعادل ماذكر فوق بطريقة أخرى وبدون استعمال الدالة max().

.layout {
    min-width: 400px;
    width: 50vw;
}

دعم المتصفحات للدوال الحسابية #

دوال calc() وclamp() وmin() وmax() مدعومة في معظم المتصفحات الحديثة مثل كوكل كروم وفيرفكس وسفاري وغيرها. يمكن التحقق دائما من مدى دعم هذه الدوال وغيرها عبر موقع « هل يمكنني استعمالها ».

خلاصة القول #

تعد دوال السي إس إس الحسابية من الأدوات القوية التي تسهم في تحسين تصاميم صفحات الويب بشكل كبير. وقد استعرضنا في هذا المقال أهم هذه الدوال من وجهة نظر فريق مدونة ركن تِك التي تساهم بشكل فعال في تحسين تجاوب الصفحات وتكيفها مع مختلف أحجام الشاشات. بالإضافة إلى ذلك، تساعد هذه الدوال في جعل التنسيقات أكثر سهولة في الصيانة وأصغر حجما، مما يعزز من أداء الموقع بشكل عام.