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

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

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

وفقًا لـ عناصر الطباعة الطباعية النمط بقلم روبرت بيرجيرست، "يُعد أي شيء من 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
• قيم CSS ومواصفات الوحدات من المستوى 4
• مقالة حول الحيل في CSS حول عرض العنصر الداخلي
• min(), max(), clamp() نظرة عامة من أحمد شادي

صورة الغلاف من @yer_a_wizard على بلا حدود.