CSS min() وmax() وclamp()

تعرَّف على كيفية التحكّم في حجم العناصر والحفاظ على المسافة المناسبة وتنفيذ الطباعة السلسة باستخدام دوالّ CSS هذه المتوافقة بشكل جيد.

Una Kravets

مع تطوّر التصميم المتجاوب بشكلٍ أكبر، يتطوّر CSS باستمرار لمنح المؤلفين مزيدًا من التحكّم. إنّ وظائف min() max() clamp()، التي أصبحت متاحة الآن في جميع المتصفحات الحديثة، هي من أحدث الأدوات التي تجعل إنشاء المواقع الإلكترونية والتطبيقات أكثر ديناميكية واستجابة. يمكنك استخدام هذه الدوالّ للتحكّم في حجم العناصر وتغييره، والحفاظ على التباعد بين العناصر، وإنشاء خطوط مرنة وسلسة.

تسمح الدوالّ الحسابية calc() وmin() وmax() وclamp() باستخدام التعبيرات الحسابية التي تحتوي على الجمع (+) والطرح (-) والضرب (*) والقسمة (/) كقيم للمكوّنات.

المستوى 4 من قيم CSS ووحداتها

دعم المتصفح

min()

max()

clamp()

الاستخدام

يمكنك استخدام min() وmax() وclamp() على يسار أي تعبير CSS حيث يكون ذلك منطقيًا. بالنسبة إلى min() وmax()، يمكنك تقديم قائمة وسيطات بالقيم، ويحدِّد المتصفّح القيمة الأصغر أو الأكبر. على سبيل المثال، في حالة width: min(1rem, 50%, 10vw)، يحسب المتصفح أي من هذه الوحدات النسبية تكون الأصغر ويستخدم هذه القيمة لعرض العنصر.

تُجري الدالة max() الإجراء نفسه للقيمة القصوى.

لاستخدام clamp()، أدخِل ثلاث قيم: الحد الأدنى والقيمة المثالية للقيام بالحساب منها والحد الأقصى.

يمكنك استخدام هذه الدوال في أي مكان يُسمح فيه باستخدام <length> أو <frequency> أو <angle> أو <time> أو <percentage> أو <number> أو <integer>. يمكنك استخدامها بشكل فردي (كما في font-size: max(0.5vw, 50%, 2rem)) أو مع calc() (مثل font-size: max(calc(0.5vw - 1em), 2rem)) أو تأليفها (كما في font-size: max(min(0.5vw, 1em), 2rem)).

في ما يلي بعض الأمثلة على كيفية استخدام هذه الدوالّ.

العرض المثالي

وفقًا لكتاب عناصر أسلوب الطباعة الذي كتبه "روبرت برينغهرست"، "يُعدّ أيّ عدد من 45 إلى 75 حرفًا على نطاق واسع طولًا مُرضِيًا للسطر في صفحة ذات عمود واحد تم ضبطها في خط نصي مزوّد بخطّ مُسنّد بحجم نص".

للتأكّد من بقاء الكتل النصية بين 45 و75 حرفًا عرضًا، استخدِم clamp() ووحدة ch (تقديم أحرف 0 عرض:

p {
  width: clamp(45ch, 50%, 75ch);
}

يتيح ذلك للمتصفح تحديد عرض الفقرة. ويتم ضبط العرض على ‎50% تلقائيًا. إذا كانت نسبة %50 أصغر من 45ch، يتم استخدام 45ch كعرض بدلاً من ذلك، وإذا كانت نسبة %50 أوسع من 75ch، يتم استخدام 75ch.

يمكنك أيضًا تقسيمها باستخدام min() أو max() فقط. إذا كنت تريد أن يكون عرض العنصر 50% دائمًا، وألا يتجاوز 75ch على الشاشات الأكبر حجمًا، استخدِم width: min(75ch, 50%); لضبط الحد الأقصى للحجم.

وبالطريقة نفسها، يمكنك ضبط الحد الأدنى لحجم النص الواضح باستخدام الدالة max() ، كما هو موضّح في width: max(45ch, 50%);. في هذه الحالة، يختار المتصفّح أيًا من القيمتين أكبر، ما يعني أنّ العنصر يجب أن يكون 45ch أو أعرض.

إدارة الحشو

يمكنك أيضًا استخدام max() لضبط الحد الأدنى لحجم الحشو. هذا المثال مأخوذ من CSS Tricks، حيث شارك القارئ Caluá de Lacerda Pataca هذه الفكرة: اجعل أحد العناصر يتضمّن مساحة متروكة إضافية في أحجام الشاشة الأكبر، مع الحفاظ على الحدّ الأدنى للمساحة المتروكة في أحجام الشاشة الأصغر. لإجراء ذلك، استخدِم calc() أو max() واطرح الحد الأدنى للترويس من جانبَي العنصر: calc((100vw - var(--contentWidth)) / 2) أو max(2rem, 50vw - var(--contentWidth) / 2). في جدول الأنماط، يجب أن يظهر على النحو التالي:

footer {
  padding: var(--blockPadding) max(2rem, 50vw - var(--contentWidth) / 2);
}

أسلوب الخط الواضح

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

قبل clamp(),، يتطلب تصميم تغيير حجم الخط سلاسل أنماط معقدة. الآن، يمكنك السماح للمتصفّح بتنفيذ المهمة نيابةً عنك. اضبط الحد الأدنى المقبول لحجم الخط (مثل 1.5rem للعنوان) والحد الأقصى (مثل 3rem) والحجم المثالي (مثل 5vw). لديك الآن مخطّط للنص يتزايد مع عرض ملف عرض الصفحة إلى أن يصل إلى الحد الأدنى والحد الأقصى المسموح بهما، وذلك باستخدام رمز برمجي قليل جدًا:

p {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

مزيد من الموارد

• قيم CSS والوحدات في MDN
• مواصفات المستوى 4 لقيم CSS ووحداتها
• مقالة CSS Tricks حول عرض العنصر الداخلي
• نظرة عامة على الدوالّ min() وmax() وclamp() من إعداد أحمد شادي

صورة غلاف من @yer_a_wizard على موقع Unقل ويظهر على الموقع.