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 على Unsplash