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

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

Una Kravets

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

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

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

دعم المتصفح

min()

Browser Support

• 79
• 79
• 75
• 11.1

Source

max()

Browser Support

• 79
• 79
• 75
• 11.1

Source

clamp()

Browser Support

• 79
• 79
• 75
• 13.1

Source

الاستخدام

يمكنك استخدام 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)).

ملاحظة: عند استخدام عملية حسابية داخل دالة min() أو max() أو clamp()، لا تحتاج إلى استدعاء calc()‎. على سبيل المثال، font-size: max(calc(0.5vw - 1em), 2rem) هي نفسها font-size: max(0.5vw - 1em, 2rem).

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

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

وفقًا لكتاب The Elements of Typographic Style من تأليف "روبرت برينغهيرست"، "يُعتبر أي سطر يتراوح طوله بين 45 و75 حرفًا مقبولاً لصفحة ذات عمود واحد مكتوبة بخط serif بحجم نص عادي".

لضمان بقاء عرض المقاطع النصية بين 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، حيث شارك القارئ "كالو دي لاسيردا باتاكا" هذه الفكرة: السماح لعنصر ما بالحصول على مساحة متروكة إضافية في أحجام الشاشات الأكبر، مع الاحتفاظ بالحد الأدنى من المساحة المتروكة في أحجام الشاشات الأصغر. لإجراء ذلك، استخدِم 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);
}

تحذير: قد يؤدي تحديد الحد الأقصى لأحجام الخطوط باستخدام max() أو clamp() إلى عدم الامتثال لإرشادات تسهيل الوصول إلى محتوى الويب (WCAG) بموجب 1.4.4 تغيير حجم النص (AA)، لأنّه قد يمنع المستخدمين من تغيير حجم النص إلى% 200 من حجمه الأصلي. احرص على اختبار النتائج باستخدام ميزة التكبير.

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

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