ما هو المشبك () في CSS (وكيفية استخدامه)

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

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

في هذا المنشور ، سنشرح كيف يعمل Clamp () ، ولماذا يمكن أن يكون في كثير من الأحيان أكثر كفاءة من استعلامات الوسائط ، وكيف يتيح لك Divi 5 استخدامه دون كتابة سطر واحد من التعليمات البرمجية!

ما هو المشبك ()

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

دعونا نفهم ذلك بمثال على حجم خط السائل الذي يزيد/ينخفض ​​بناءً على حجم الشاشة.

font-size: clamp(40px, 7vw, 100px);

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

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

ماذا نعني بهذا؟ دعونا نفهم هذا من خلال مقارنة المشبك () مع استفسارات الوسائط.

مقارنة المشبك () والاستعلامات الإعلامية

تعتبر استعلامات الوسائط طريقة شائعة أخرى لضبط أحجام الخطوط لعرض الشاشة المختلفة. هنا ، يمكنك تحديد نقاط التوقف في عرض شاشة محدد حيث تتغير أنماطك. على سبيل المثال ، يمكنك تعيين حجم خط واحد لسطح المكتب ، والآخر للجهاز اللوحي ، والثالث للجوال بحيث يتغير حجم الخط فقط عندما يضرب عرض الشاشة كل نقطة توقف.

هذه الطريقة تعمل ، لكنها ليست سائلة. بين 1000 بكسل و 501 بكسل ، يبقى حجم الخط مغلقًا عند 100 بكسل. في اللحظة التي تصل فيها الشاشة إلى 500 بكسل ، ينخفض ​​الخط فجأة إلى 30 بكسل. هذا يعني عدم وجود انتقال سلس ، فقط تغيير حاد.

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

على النقيض من ذلك ، فإن المشبك () يوفر لك من التحولات المفاجئة والرمز المطول. في الواقع ، يمكن كتابتها في سطر واحد: حجم الخط: Clamp (30px ، 7vw ، 100px).

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

في العمل المباشر ، إليك كيفية مقارنة بين تغيير حجم نقاط الاستعلام الإعلامية ومشبك ():

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

كيف تعمل المشبك () وراء الكواليس

يأخذ Clamp () ثلاث قيم تعمل معًا لتوسيع نطاق خاصية CSS:

 clamp(minimum, preferred, maximum) 

كل جزء من الوظيفة له دور محدد:

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

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

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

اختيار القيمة المفضلة الصحيحة

ربما لاحظت أن القيمة المفضلة (الأوسط) تلعب دورًا أكبر في كل هذا. يقرر كيف نطاق العناصر.

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

بدلاً من ذلك ، يجب أن تكون القيمة المفضلة دائمًا نسبية ، كما هو الحال في المشبك (40 بكسل ، 7VW ، 120 بكسل). هنا ، يستجيب 7VW لعرض عرض Viewport ، والذي يسمح للعنصر بالتسجيل بسلاسة عبر أحجام الشاشة. ثم تضمن وظيفة المشبك أنها لا تقل أبدًا عن 40 بكسل أو فوق 120 بكسل ، مما يجعل الحجم يستجيب لـ 7 ٪ من عرض الشاشة.

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

ملاحظة: مخرجات حاسبة مقياس المقياس السائل. إذا كنت تستخدم الإخراج الذي تم إنشاؤه في Divi ، فتأكد من تغيير وحدات VI إلى VW.

أنواع مختلفة من الوحدات في المشبك ()

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

في معظم الحالات ، يستخدم المطورون PX للحد الأدنى والحد الأقصى للقيم ووحدة السوائل مثل VW للقيمة المفضلة. هذا يعطي أفضل توازن بين السيطرة والاستجابة.

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

clamp () في divi 5

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

إذا كان الأمر كذلك ، يمكن أن تساعد الوحدات المتقدمة في Divi 5.

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

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

ما عليك سوى النقر في حقل الإدخال للاختيار من بين الوحدات المتقدمة المختلفة المتوفرة في Divi 5 (انظر القائمة ذات اللون الداكن بجوار حجم نص العنوان) ، وتغيير نوع الوحدة ، وتحديد القيم الحد الأدنى ، والحد الأقصى.

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

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

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

كيفية استخدام المشبك () في Divi 5؟

الآن ، لقد رأيت مدى سهولة استخدام Clamp () في Divi 5. يمكنك ببساطة تحديد وحدة Clamp () وإضافة القيم المفضلة لديك. لا رمز مخصص ، لا ملفات CSS ، مجرد واجهة بصرية نظيفة.

ولكن ما يجعل المشبك () قوي حقًا داخل Divi ليس فقط الوظيفة نفسها. هذا ما يعمل معه.

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

يعمل Clamp () مع متغيرات التصميم

أفضل طريقة وأكثرها فعالية لاستخدام المشبك () بفعالية في DIVI 5 هي الجمع بينه مع متغيرات التصميم.

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

على سبيل المثال ، يمكنك تحديد أحجام المشبك () لعناوين H1-H6 مثل هذا:

وحفظهم داخل المدير المتغير في Divi Builder:

ثم ستتكيف جميع عناوينك في جميع أنحاء الموقع بناءً على قيم المشبك المحددة ().

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

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

Clamp () يجمع مع calc ()

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

على سبيل المثال ، يستخدم حجم الخط: المشبك (1REM ، CALC (0.75REM + 2VW) ، 2.5REM) CALC () لإضافة قاعدة مستقرة (0.75REM) ثم قم بتوسيعها مع 2VW.

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

حالات الاستخدام العملي للمشبك ()

الآن دعونا نلقي نظرة على بعض حالات الاستخدام الشائعة للمشبك () ومدى سهولة ذلك عند تطبيقه باستخدام Divi 5:

1. أحجام العنوان المتسقة عبر جميع الأجهزة

الطباعة المستجيبة هي أفضل حالة استخدام من المشبك (). نظرًا لأننا حددنا بالفعل أحجام عنواننا (H1-H6) باستخدام Clamp () في متغيرات التصميم ، فقد حان الوقت لرؤيتها في العمل.

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

يظل النص واضحًا ومتوازنًا ومتسقًا بصريًا في جميع نقاط التوقف المستجيبة المحددة.

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

2. تعيين المشبك () عرض أقسام الفقرة على شاشات كبيرة

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

لإصلاح ذلك ، قم بتعيين عرض مستجيب مثل المشبك (300 بكسل ، 65 فولت و 800 بكسل) لتوسيع فقرتك إلى عرض ثابت (800 بكسل) ، لذا فإن الفقرات تظهر قابلة للقراءة حتى على شاشات أوسع.

هذه طريقة مثالية لجعل منشورات مدونتك قابلة للقراءة على شاشات أوسع.

3. اضبط المشبك () عرض الصور الفردية أو المميزة

وبالمثل ، يمكن أن تظهر الصور المفردة (مثل الصور المميزة) كبيرة جدًا على الشاشات الشاملة. يبدو مثاليًا على جهاز لوحي ، ولكنه قد يمتد بشكل محرج على شاشة 4K ، والتي يمكن أن تشعر بالتغلب على بقية المحتوى.

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

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

4. أضف حشوة السوائل والهامش مع المشبك ()

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

على سبيل المثال ، مشبك (0.5Rem ، 2VW ، 2REM) وهامش المشبك (1REM ، 3VW ، 4REM) في معرض الصور ، قم بإنشاء مسافات تبدأ صغيرة وحجم مع الشاشة.

إنه يمنح غرفة التصميم الخاصة بك للتنفس على شاشات كبيرة وتبقي الأشياء ضيقة على الهاتف المحمول:

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

5. إنشاء أقسام بطل مستجيبة تتوسع بسلاسة

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

تطبيق هذه القيم أمر سهل الآن.

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

تصميم تخطيطات Pixel-Perfect باستخدام Clamp () ، دون كتابة سطر واحد من التعليمات البرمجية

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

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