باستخدام clamp () في divi 5 لإنشاء طباعة مستجيبة للسوائل

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

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

clamp () مقابل استفسارات الوسائط للطباعة المستجيبة

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

هذا يعمل بشكل جيد حقًا وهو ما اعتاد عليه العديد من مصممي الويب على استخدامه. ومع ذلك ، فإن هذا ليس سائلًا ، مما يعني أن حجم الخط 1 في عرض 767 بكسل يمكن أن يكون عرضه 100 بكسل ، ولكن عند 776 بكسل يمكن أن ينخفض ​​على الفور إلى 56 بكسل (إذا كانت تلك كانت نقاط التوقف الخاصة بك وقيم H1 المعينة في كليهما).

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

في هذا المثال ، تنتقل Clamp () بسلاسة من 30 بكسل إلى 100 بكسل دون قفزات مفاجئة ، في حين أن إعلانات البكسل البسيطة في نقاط توقف مختلفة تسبب تغييرات كبيرة على مدار عرض بكسل واحد. والنتيجة هي أن لدي أحجام الخط Min/Max من اختياري في كلتا الحالتين ، ولكن مع Clamp () ، فإن خطتي أكثر استجابة بكثير ويبدو أفضل بناءً على حجم الشاشة. يجب أن أستخدم جميع نقاط التوقف السبعة لـ Divi للحصول على أحجام الخطوط المتشددين لتبدو جيدة على معظم أحجام الشاشة.

عناصر الطباعة Divi 5 التي تدعم المشبك ()

في Divi 5 ، من المحتمل أن تستخدم Clamp () أكثر مع إعدادات الطباعة. على وجه التحديد ، يمكنك استخدام المشبك () لتعيين:

• حجم الخط (الاستخدام الأكثر شيوعًا)
• ارتفاع الخط
• تباعد الرسالة

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

يتوفر حجم الخط وتباعد الأحرف وارتفاع الخط لكل من العناوين والطباعة الجسدية.

كيف يعمل المشبك ()

تستخدم وظيفة المشبك () ثلاث قيم:

clamp(min-value, preferred-value, max-value)

يتم فصل كل قيمة بفواصل ، وكل منها تخدم دورًا محددًا:

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

القيمة المفضلة: هذا هو حجمك المثالي أو "الهدف". عادةً ما يستخدم وحدات ديناميكية أو وظائف الرياضيات (مثل CALC ()) لتوسيع نطاق السوائل بين MIN و MAX.

أقصى قيمة: هذا يضع أكبر حجم ممكن. حتى على الشاشات الضخمة ، لن يتجاوز العنصر هذه القيمة.

فهم وحدات CSS في المشبك ()

الوحدات تؤثر بشكل كبير على مقاييس المشبك ():

• PX (بكسل): الوحدات المطلقة ؛ ثابت ، أحجام مستقرة. مفيد للقيم min/max لإنشاء حدود واضحة.
• REM : الوحدات النسبية على أساس حجم خط الجذر. إذا تغير خط متصفح المستخدم ، فإن REM يتقدم وفقًا لذلك. رائع للوصول.
• VW (عرض منفذ العرض): الوحدات الديناميكية التي تستند إلى عرض الشاشة. مثالي للقيمة المفضلة لإنشاء تحجيم السوائل.
• VH (ارتفاع المنفذ): على غرار VW ، ولكن للارتفاع. أقل فائدة ما لم يكن العمل مع لغة تطبع من أعلى إلى أسفل بدلاً من اليمين إلى اليسار (أو العكس).
• EM : نسبة إلى حجم خط العنصر الأصل ، وهو مثالي لمزيد من التحجيم المستجيب.
• وأي وحدة تشعر بالراحة باستخدامها.

عادةً ما تستخدم MIN و Max وحدات مطلقة أو مستقرة مثل PX/REM ، في حين تستخدم القيمة المفضلة وحدات ديناميكية مثل VW/٪ أو وظيفة الرياضيات لتوسيع نطاق الاستجابة.

كيف تؤثر القيمة المفضلة على المشبك ()

القيمة المفضلة هي المكان الذي يضيء فيه المشبك () حقًا. إنه يحدد كيفية موازين النص.

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

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

إليك عرض رسم بياني لما يحدث في هذه الحالة:

من أجل العرض التوضيحي ، إليك رسم بياني آخر يقارن وظيفتين مشبكتين أبسط قليلاً () يختلفان قليلاً فقط.

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

يمكنك التمرير لأسفل ومعرفة كيف ستعمل الطباعة على عرض الشاشة.

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

باستخدام clamp () للطباعة مع divi

دعونا نرى المشبك () في العمل. إليك طريقة واحدة لإعداد الطباعة لموقع الويب الخاص بك بالكامل باستخدام Divi.

تطبيق المشبك () على العناوين والعناوين

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

:root {
--divi-sm-body: clamp(0.8rem, 0.11vi + 0.77rem, 0.94rem);
--divi-button: clamp(1rem, 0.2vi + 0.95rem, 1.25rem);
--divi-body: clamp(1.25rem, 0.33vi + 1.17rem, 1.67rem);
--divi-h6: clamp(1.56rem, 0.53vi + 1.43rem, 2.22rem);
--divi-h5: clamp(1.95rem, 0.81vi + 1.75rem, 2.96rem);
--divi-h4: clamp(2.44rem, 1.2vi + 2.14rem, 3.95rem);
--divi-h3: clamp(3.05rem, 1.77vi + 2.61rem, 5.26rem);
--divi-h2: clamp(3.81rem, 2.56vi + 3.18rem, 7.01rem);
--divi-h1: clamp(4.77rem, 3.66vi + 3.85rem, 9.35rem);
}

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

سيعرض هذا قائمة على الأقل من مجموعة الخيارات الافتراضية المسبقة. سنمضي قدماً ونستخدم الإعداد المسبق لـ OG هنا لـ H1. انقر فوق أيقونة " الترس " لفتح إعدادات تصميم OG PRESET. في الخطوات اللاحقة ، سنقوم بإنشاء المزيد من الإعدادات المسبقة لـ OG لكل مستوى عنوان (H1-H6).

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

 clamp(4.77rem, 3.66vi + 3.85rem, 9.35rem) 

تأكد من التمرير لأسفل وانقر فوق "حفظ" ، أو لن تطبق بنجاح مسبقًا على OG.

الآن ، سوف نستمر من خلال جميع مستويات العنوان لدينا. سأريكم فقط مستوى العنوان التالي (H2). عبر نفس الطريقة كما كان من قبل ، انتقل إلى منطقة OG Preset ، انقر فقط إلى إضافة إعداد مسبق جديد هذه المرة.

لكي يتم استخدام مسبقات OG الخاصة بنا على H2S ، سنستخدم وظيفة المشبك () من المولد:

 clamp(3.81rem, 2.56vi + 3.18rem, 7.01rem); 

حدد خيار H2 من منطقة اختيار مستوى العنوان . ثم قم بصق قيمة المشبك () في حجم النص ، والذي سيحدد حجم عناوين H2 باستخدام هذا الإعداد المسبق للـ OG.

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

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

القفز إلى تجربة Divi 5 اليوم

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

أصبح بناء مواقع الويب المهنية مع Divi أسهل وأكثر قوة. لا يمكنني أن أكون أكثر حماسة لك لتجربة التجربة الجديدة. CSS Clamp هي مجرد واحدة من العديد من الميزات التي طلبها مستخدمو Divi ولديها الآن. لذا ، إذا لم تكن قد قمت بتنزيل أحدث Divi 5 Alpha ، فقد حان الوقت الآن.

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