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

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

Una Kravets

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

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

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

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

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)).

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

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

وفقًا لكتاب The Elements of Typoغراف (عناصر النمط الطباعي) بقلم "روبرت برينغهيرست"، "يعتبر أي شيء من 45 إلى 75 حرفًا على نطاق واسع طولاً مُرضيًا للسطر لصفحة ذات عمود واحد مجموعة في واجهة نصية بذنابة في حجم النص".

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

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);
}

أسلوب الخط المرن

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

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

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

مزيد من المراجع

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

صورة غلاف من @yer_a_ الإيقاف على Un تحقق