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

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

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

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

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

min()

دعم المتصفح

  • Chrome: 79
  • ‫Edge: 79
  • Firefox: 75
  • ‫Safari: 11.1

المصدر

max()

توافق المتصفّح

  • Chrome: 79.
  • ‫Edge: 79
  • Firefox: 75
  • ‫Safari: 11.1

المصدر

clamp()

دعم المتصفح

  • Chrome: 79
  • ‫Edge: 79
  • Firefox: 75
  • ‫Safari: 13.1

المصدر

الاستخدام

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

تختار الدالة min() الحد الأدنى للقيمة من قائمة الخيارات في العرض التجريبي على Codepen.

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

تختار الدالة max() قيمة من قائمة الخيارات في العرض التجريبي على Codepen.

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

تحافظ الدالة clamp()‎ على قيمتها بين الحد الأدنى والحد الأقصى المحدَّدَين في العرض التجريبي على Codepen.

يمكنك استخدام هذه الدوال في أي مكان يُسمح فيه باستخدام <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.

استخدِم الدالة clamp()‎ لضبط الحد الأدنى والحد الأقصى للعرض. الاطّلاع على العرض التجريبي على Codepen

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

استخدِم الدالة min() لضبط الحد الأقصى للعرض.

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

استخدِم الدالة max() لضبط الحد الأدنى للعرض.

إدارة الحشو

يمكنك أيضًا استخدام 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);
}
حدِّد الحد الأدنى للتباعد بين عناصر المكوّن باستخدام الدالة max()‎. الاطّلاع على العرض التجريبي على Codepen

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

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

يمكنك استخدام clamp() لإنشاء أسلوب الخط المرن. الاطّلاع على العرض التجريبي على Codepen

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

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

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

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