ما هو calc () في CSS (وكيفية استخدامه)

بعض وظائف CSS قوية ولكن نادراً ما تستخدم ، ليس لأنها صعبة ، ولكن لأن بدائل أسهل متوفرة. Calc () هو واحد منهم. إنه مفيد للغاية ولكنه غالبًا ما طغت عليه المشبك ().

CALC () يحل بعض مشاكل التصميم التي لا يمكن لمس المشبك (). إنه لأمر رائع بالنسبة لارتفاعات قسم الضبط الدقيقة ، والضبط للرؤوس اللاصقة ، وخلط الوحدات المرنة والثابتة في سطر واحد من التعليمات البرمجية. وإليك الأخبار السارة: يمكنك استخدام Calc () دون كتابة سطر واحد من التعليمات البرمجية.

في Divi 5 ، تم تصميمه مباشرة في الواجهة ، لذلك فقط اكتب القيمة الخاصة بك ، ويتعامل Divi مع الباقي. تريد أن ترى كيف؟ في هذا المنشور ، ستتعلم كيف يعمل Calc () ، حيث يساعده ، وكيفية استخدامه داخل Divi 5.

Divi 5 جاهز للاستخدام على مواقع الويب الجديدة ، ولكن انتظر قليلاً قبل ترحيل المواقع الموجودة.

ما هو calc () في CSS؟

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

دعونا نفهم هذا بمثال. لنفترض أنك تريد عنصرًا لتناول 80 ٪ من الشاشة ولكن لا يزال يترك مجالًا للحشو. يمكنك الكتابة:

width: calc(80% - 40px);

هذا يخبر المتصفح بحساب العرض ديناميكيًا عن طريق طرح 40 بكسل من 80 في المائة من الحاوية. عندما يتم دمجها مع تقنيات توسيط مثل هوامش السيارات ، يتم توزيع المساحة المتبقية من الطرح بالتساوي. يتم ضبط القيمة تلقائيًا بناءً على حجم الشاشة.

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

• Padding: Calc (5vw + 20px) ؛ يحافظ على السائل الحشو. حتى على الشاشات الصغيرة ، لا ينخفض ​​أبدًا إلى أقل من 20 بكسل.
• الارتفاع: calc (100vh - 80px) ؛ يبقي المحتوى مرئيًا عندما يكون لديك رأس ثابت. يتم ضبطه تلقائيًا بناءً على ارتفاع الشاشة.
• العرض: CALC (60 ٪ - 1REM) ؛ يمنحك التحكم المرن في عرض المقطع مع الحفاظ على تباعد ثابت. يمكنك ضبط الهوامش المحيطة باستخدام قيم مثل الهامش اليساري: CALC (40 ٪ + 0.5REM) ؛ لتوسيط العنصر أو محاذاة العنصر داخل الحاوية.

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

فهم كيفية عمل calc ()

يبدو أن بناء الجملة الأساسي لـ CALC () مثل هذا:

 calc(value operator value) 

هنا ، يمكنك استخدام أي طول أو وحدة صالحة في القيمة ، ويمكن أن يكون المشغل +، -، *، أو /.

على سبيل المثال ، إذا كنت ترغب في تقليل عرض العنصر بمقدار 40 بكسل ، فستكتب عرض: CALC (100 ٪ - 40px) ؛. لاحظ استخدام ٪؟ هذا ما يجعل العرض مرنًا.

إذا استخدمنا Calc (100px - 40px) ، فستكون النتيجة دائمًا 60 بكسل ، أي ثابت. ولكن باستخدام نسبة مئوية ، نسمح للمتصفح بحساب الحجم بناءً على الشاشة أو العنصر الأصل. يتم ضبطه تلقائيًا مع تغير التخطيط.

نصيحة سريعة (وأيضًا قاعدة مشتركة): أضف دائمًا مسافات بين القيم والمشغلين لجعل calc () تعمل بشكل صحيح. بدون مسافات ، لن تعمل CSS. أدناه ، سترى عرض الحاوية يتم استعادةه إلى الافتراضي نظرًا لأن وظيفة calc () بدون مسافات لم تعد صالحة:

باستخدام وحدات متعددة

لقد رأيت للتو كيف تأتي الفائدة الحقيقية لـ CALC () عند البدء في الجمع بين الوحدات النسبية المختلفة. على سبيل المثال ، النسب المئوية مع وحدات البكسل أو عرض المنفذ مع REMS ، لأن هذا عندما يبدأ التخطيط الخاص بك في الاستجابة بناءً على تغيير حجم الشاشة.

لجعل ذلك أكثر وضوحًا ، إليك بعض المجموعات المفيدة لمحاولة معرفة كيفية عملها في تخطيطات حقيقية.

يمكنك أيضًا الجمع بين القيم والوحدات المتعددة في سطر واحد ، مما يجعل التحجيم تخطيطات مستجيبة أكثر دقة. يستخدم هذا المثال أدناه ٪ و PX و REM لخلط تحجيم التخطيط والتباعد الثابت والطباعة:

 width: calc(50% - 40px + 1rem); 

• 50 ٪ مقاييس مع الحاوية
• 40 بكسل يطرح مساحة ثابتة مثل الشريط الجانبي
• يضيف 1Rem تباعد بناءً على حجم الخط

تعشيش CALC () وظائف

يمكنك أيضًا أن تعشش كاسا () داخل آخر لبناء منطق تخطيط أكثر تعقيدًا. إنها طريقة رائعة لعكس كيف تفكر في التصميم (طبقة تلو الأخرى) مع علاقات واضحة بين القيم. على سبيل المثال ، العرض: calc (200px - calc (100px + 2rem)) ؛

هنا ، يحسب المتصفح أولاً 100px + 2Rem ، والذي يمكن أن يمثل الحشو أو الهوامش أو حجم عنصر آخر. ثم يطرح هذا المجموع من 200 بكسل للحصول على العرض النهائي. يبقى العرض نسبيًا بسبب REM.

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

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

لماذا تستخدم calc () عندما يكون لديك clamp ()؟

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

Clamp () حديث ، لذا فإن التحمس لاستخدامه لبناء تصميمات السوائل دون الاعتماد على استعلامات الوسائط أمر سهل. ولكن على الرغم من أن المشبك () يشعر أكثر ذكاءً ، إلا أن هناك العديد من المواقف التي تكون فيها calc () أكثر أهمية ، مثل ما يلي:

• طرح القيم الثابتة من التخطيطات المرنة: باستخدام الارتفاع: CALC (100VH - 80PX) يتأكد من أن القسم يملأ الشاشة ناقص ارتفاع رأس ثابت ، لذلك لا تتداخل العناصر. لا يمكن Clamp () القيام بذلك لأنه لا يدعم الطرح.
• عناصر الإزاحة بدقة: قيمة مثل الهامش اليساري: CALC (50 ٪-200px) ؛ يغير عنصرًا بالنسبة إلى حاويةه مع إبقائه متوازنًا بصريًا. لا يمكن أن يؤدي هذا النوع من المواقع العلائقية.
• محاذاة الأقسام جنبًا إلى جنب: يساعدك على إنشاء تخطيطات مستجيبة للعمود حيث عمود واحد مع عرض: CALC (60 ٪-2REM) ؛ يأخذ 60 ٪ من المساحة ناقص فجوة متسقة. Clamp () مثالي لتوسيع قيمة واحدة ، بينما تتفوق CALC () عند الحاجة إلى العلاقات بين قيم متعددة.

الكل في الكل ، Clamp () رائعة عند تحديد كيفية قيود قيمة واحدة عبر أحجام الشاشة. لكن Calc () هو ما تحتاجه عندما يعتمد تخطيطك على أكثر من شيء في وقت واحد ، كما في الحالات المذكورة أعلاه.

الجمع بين calc () + clamp ()

على الرغم من أن Calc () و Clamp () قوية من تلقاء نفسها ، فلماذا تستخدم واحدة عندما يمكنك الجمع بين كليهما؟ يمكنك Nest Calc () داخل المشبك () لبناء تصميمات السوائل مع المنطق المدمج ، مثل الجمع بين التحجيم المرن والتحكم الدقيق.

على سبيل المثال ، الحشو: المشبك (1REM ، CALC (2VW + 10px) ، 3REM) ؛ يخلق التباعد الذي يقيس بين 1REM و 3REM ، ولكن القيمة "المفضلة" تعتمد على صيغة CALC () تمزج بين عرض منفذ العرض وقيمة ثابتة.

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

باستخدام متغيرات CSS مع CALC ()

يمكنك أيضًا تمديد مرونة Calc () مع متغيرات CSS. اجمع بين المتغيرات والوحدات الأخرى ، وقم بالرياضيات عليها ، وإنشاء منطق تخطيط حول القيم القابلة لإعادة الاستخدام. على سبيل المثال ، إذا قمت بتحديد: الجذر {–gap: 40px ؛} ، ثم باستخدام الحشو: calc (var (–gap) + 1rem) ؛ يساعدك على تعيين حشوة استجابة بناءً على قيم الجذر الخاصة بك.

ملاحظة: أثناء استخدام متغيرات CSS داخل CALC () ، لف المتغير الخاص بك حول VAR (). انظر كيف فعلت أعلاه.

يتيح لك ذلك إنشاء موقع ويب كامل باستخدام نظام تصميم متسق (متغيرات CSS) مع عدم وجود تحكم دقيق مع CALC (). وإذا كنت ترغب في إجراء تغييرات (عالمية) ، مثل ضبط التباعد عبر تخطيطك ، يمكنك القيام بذلك عن طريق تغيير قيم الجذر.

ليس هذا سهلاً مع المشبك (). بينما يدعم CLAMP () متغيرات CSS ، يجب حل كل قيمة إلى وحدة كاملة وصالحة. ماذا أقصد بهذا؟

وظيفة مثل المشبك (1REM ، VAR (-fluid-size) ، 3REM) لا تعمل إلا إذا حل -Fluid حجم إلى شيء مثل 4VW. وإذا كنت بحاجة إلى القيام بالرياضيات مع متغير ، مثل إضافة أو طرح منه ، فأنت بحاجة إلى لف هذا الجزء في CALC (). هذه الأشياء البسيطة تجعل calc () ضرورية عند بناء القيم الديناميكية مع المتغيرات.

calc () في divi 5

كل من CALC () و CLAMP () هي وظائف CSS متقدمة تمنحك تحكمًا قويًا على التخطيطات والتباعد والاستجابة ، ولكن فقط إذا كنت مريحًا في كتابة رمز. هذا يحد من استخدامهم للمطورين أو محترفي الويب. ولكن ماذا عن أولئك الذين يفضلون سير العمل البصري وما زالوا يريدون استخدام calc () و clamp () في تصميماتهم؟ هل يمكنك فعل هذا؟

نعم ، يمكنك. داخل Divi 5 ، يتوفر كل من Calc () و Clamp () كوحدات متقدمة ، ولا يتعين عليك كتابة سطر واحد من التعليمات البرمجية للعمل معهم.

اشترك في قناتنا على YouTube

كل ما تفعله هو إدخال calc () مباشرة داخل أي حقل إدخال رقمي ، وهذا كل شيء.

يعمل منشئ Divi على الفور. بمجرد إدخال قيمة CALC () ، تحصل على ملاحظات حية أثناء التصميم. ليست هناك حاجة للتبديل بين المنشئ أو DevTools أو المعاينات ، ولا تخمين كيف ستبدو.

يجعل Divi 5 بناء تصميمات أكثر ذكاءً وأكثر مرونة دون لمس رمز. يمكنك حتى الجمع بين Calc () مع متغيرات تصميم Divi أو متغيرات CSS الخاصة بك لإنشاء تخطيطات ديناميكية قابلة لإعادة الاستخدام. سأريكم كيفية القيام بذلك في القسم التالي.

بالمناسبة ، هل تعلم أن Divi 5 يدعم أيضًا جميع وظائف CSS في الوحدات المتقدمة؟ قد ترغب في التعرف عليها أيضًا

تعلم كل شيء عن وحدات Divi 5 المتقدمة

كيف يجعل Divi 5 استخدام calc () بلا مجهود

لقد رأيت للتو أن Divi 5 يجعل استخدام Calc () في تصميماتك دون عناء مع إعطائك معاينات فورية أثناء عملك. ولكن هناك المزيد. لا يعطي Divi مجرد وسيلة متكاملة ، بل طريقة متكاملة تمامًا ، بدون رمز لبناء تخطيطات مستجيبة تعتمد على المنطق باستخدام نفس الأدوات التي يعتمد عليها مطورو ، دون كتابة خط من الكود.

إليك كيف تساعدك على استخدام Calc () بطوليًا أثناء العمل بهدوء في الظل:

1. تطبيق calc () على أي مجال رقمي

فقط لأنك لا ترميز لا يعني أنك محدود. في Divi 5 ، يعمل Calc () في أي مكان يتم قبول قيمة رقمية (فكر: العرض ، الطول ، الحشو ، الهامش ، الفجوة ، حجم الخط ، في أي مكان). إذا قبل الحقل رقمًا ، فإنه يدعم Calc ().

وتطبيق calc () واضح نسبيا. كل ما عليك فعله هو اختيار CALC () من الوحدات المتقدمة الأخرى وإدخال صيغتك.

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

فقط اكتب صيغتك ، ويتم تحديثات النتيجة على الفور-لا توجد لوحات رمز ، ولا تبديل لعلامات التبويب ، ولا يوجد تخمين ثانية. إنه سيطرة كاملة ، تم إنشاؤها مباشرة في سير العمل الخاص بك.

2. احصل على معاينات مباشرة

أحد أفضل الأجزاء حول استخدام CALC () في Divi 5 هو أنه يمكنك رؤية ما تفعله في الوقت الفعلي. ليس عليك أن تخمن كيف سيبدو التباعد أو المحاذاة. عند إدخال صيغة Calc () الخاصة بك ، يتم تحديث المنشئ على الفور.

كما ترون ، تغيرت الحشوة فورًا عند إدخال قيم calc (). لقد تحولت أيضًا بين نقاط التوقف المختلفة لأوضح لك كيفية ضبط الحشو بناءً على حجم الشاشة.

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

3. بناء سير عمل متقدم مع CALC ()

استخدام CALC () في DIVI 5 ليس قويًا لأنه يمكنك الآن إضافة أو طرح القيم. القوة الحقيقية هي في فتح سير العمل الأكثر ذكاء. يتيح لك DIVI الجمع بين CALC () مع أدوات متقدمة مثل CLAMP () ، ومتغيرات CSS ، ومتغيرات التصميم ، وإعدادات خيارات مجموعة الخيارات ، وكلها داخل البناء المرئي.

أنت لا تقتصر على التعديلات البسيطة لمرة واحدة. باستخدام Divi ، يمكنك إنشاء أنظمة تخطيط تستجيب بشكل سليفي إلى حجم الشاشة ، واتبع قواعد التباعد المتسقة ، والتحديث تلقائيًا عند تغيير الرموز المميزة للتصميم. دعونا نرى كيف:

1. تمديد CALC () مع متغيرات CSS

يدعم Divi 5 متغيرات CSS مباشرة داخل حقول التصميم ، مما يعني أنه يمكنك تحديد القيم القابلة لإعادة الاستخدام والحساب منها بصريًا. دعنا نقول أنني أريد استخدام حشوة ثابتة على جميع أقسام صفحتي ، لذلك سأقوم بحفظه كمتغير CSS:

:root {
--section-padding: calc(4rem + 2vw);
}

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

الآن ، بدلاً من إدخال الصيغة الكاملة في كل مكان ، يمكنك فقط استخدام VAR (-قمع القسم) في أي حقل حشوة داخل DIVI. تحديثات النتيجة على الهواء مباشرة ، وإذا قمت بتغيير قيمة الجذر لاحقًا ، فإن التصميم بأكمله يعكس هذا التغيير على الفور.

لاحظ أن الوحدة المتقدمة المحدثة تعرض Calc var ، مما يعني أنه تم إدراج متغير CSS باستخدام وظيفة Var () داخل صيغة Calc ().

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

2. استخدم calc () في إطار التصميم الخاص بك

يتيح لك Divi 5 حفظ القيم Calc () كمتغيرات تصميم ، مما يجعل من السهل إعادة استخدام منطق تخطيط واحد عبر موقع الويب الخاص بك بالكامل. لنفترض أنك تريد أن تملأ أقسام الخدمة الخاصة بك دائمًا شاشة ناقص ارتفاع رأس ثابت. بعد ذلك ، يمكنك إنشاء متغير رقم وتسمية ارتفاع القسم مع القيمة CALS (120VH - 30PX).

هنا ، 30 بكسل هو ارتفاع الرأس الثابت.

الآن ، لتطبيق المتغير المحفوظ ، انتقل إلى إعدادات تصميم القسم وتحوم فوق الارتفاع لتحديد موقع أيقونة الحقل الديناميكي. انقر فوقه ، وسيظهر متغيرك المحفوظ. انقر على ارتفاع القسم لتطبيقه.

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

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

3. قم بإنشاء وحفظ خيارات الإعدادات المسبقة لمجموعة الخيارات

بمجرد أن يستخدم التصميم الخاص بك قيم calc () باستمرار ، يجعل Divi 5 توفير هذا المنطق لإعادة الاستخدام بسهولة. يمكنك تخزين إعداد التصميم بالكامل (أو الإعدادات الفردية مثل الحشو والفجوات والهوامش والعرض) كإعدادات مسبقة مجموعة الخيارات. هذا يعني بدلاً من تطبيق الصيغ CALC () مرارًا وتكرارًا ، يمكنك فقط تحديد إعداد مسبق ، ويتم تطبيق الرياضيات على الفور.

على سبيل المثال ، إذا كنت قد استخدمت الحشو: CALC (4REM + 2VW) عبر أقسام متعددة ، فلن تحتاج إلى إعادة تمييزه في كل مكان. فقط احفظه كإعداد مسبق:

الآن ، قم بتطبيق الإعداد المسبق المحفوظ عند الحاجة. يتم تحديث كل شيء بصريًا ، حتى تتمكن من رؤية التأثير على الفور.

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

لاحظ كيف من خلال تغيير القيم المحفوظة في متغيرات التصميم ، يتم تحديثها أيضًا في قسم الحشو مع إعطائنا أيضًا معاينة حية؟ ذلك لأنني استخدمت متغير ارتفاع القسم داخل قسم التباعد المسبق.

هذا هو Power Divi 5 يجلب. يساعدك على توسيع نطاق نظام التصميم الخاص بك مع الحفاظ على منطق التصميم المتقدم متسقًا عبر الموقع. بمجرد أن تعتاد على الجمع بين الوحدات المتقدمة مثل CALC () (انظر هنا المزيد من حالات استخدام CALC () مع نصائح حول إتقانها بفعالية) مع نظام التصميم المعياري لـ DIVI ، ستقوم بإلغاء قفل طريقة فعالة وممتعة لبناء مواقع الويب.

Divi يجعل الرياضيات تشعر بالسهولة

ليس عليك أن تكون مطورًا لاستخدام وظائف CSS مثل Calc () و Clamp (). يجلب Divi 5 هذه الأدوات المتقدمة إلى واجهة مرئية يسهل استكشافها واختبارها وتطبيقها. يمكنك القيام بكل شيء من تعديلات التخطيط البسيطة إلى أنظمة التصميم المعقدة دون كتابة سطر من التعليمات البرمجية.

سواء كنت تقوم بضبط التباعد ، أو باستخدام المتغيرات ، أو بناء الإعدادات المسبقة القابلة لإعادة الاستخدام ، فإن Divi يجعل التصميم المستجيب للرياضيات متاحًا للجميع. هل تريد اختبار كيف يعمل Calc () بسلاسة داخل Divi؟ قم بتنزيل Divi Public Alpha اليوم وتجربة ذلك بنفسك.

Divi 5 جاهز للاستخدام على مواقع الويب الجديدة ، ولكن انتظر قليلاً قبل ترحيل المواقع الموجودة.