min() وmax() وclamp() للقيم المرنة
قيّد القيم بين حد أدنى وحد أقصى باستخدام min() وmax() والصيغة المختصرة clamp()
min() وmax() وclamp() للقيم المرنة درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.
لماذا نستخدم دوال المقارنة؟
تتيح دوال المقارنة في CSS (min() وmax() وclamp()) تغيير الأحجام استجابةً للسياق من دون استعلامات الوسائط — وهي أكثر أناقة وإيجازًا من الأساليب المعتمدة على نقاط التوقف.
min() — اختيار الأصغر
تقيّم min(a, b, ...) جميع الوسائط وتستخدم أصغرها. والمقصود بـ "الحد الأدنى" هنا هو النتيجة المرئية، أي الخيار الأكثر تقييدًا.
<div class="container">Container</div>max() — اختيار الأكبر
تختار max(a, b, ...) القيمة الأكبر، مما يضمن دائمًا بلوغ الحد الأدنى المطلوب.
<p>Responsive text</p>clamp(min, preferred, max)
تحصر clamp() قيمةً ضمن نطاق معين. وتكون القيمة المفضلة، أي الوسيط الأوسط، مرنةً عادةً. أما الحد الأدنى والحد الأقصى فيوفران حدودًا ثابتة.
<h1>Clamped Heading</h1>مقياس الطباعة المرنة باستخدام clamp()
استبدل عدة تجاوزات لنقاط التوقف باستدعاء clamp() واحد لكل مستوى من مستويات العناوين:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>المسافات المرنة باستخدام clamp()
طبّق الأحجام المرنة على الحشو والهوامش والفجوات أيضًا — وهي تقنية أساسية للتصميم "الجوهري":
<div class="section">
<div class="grid"><div>A</div><div>B</div></div>
</div>استخدام min() كحارس للعرض
أبسط نمط للحاويات: اجعل العرض دائمًا 90% من إطار العرض، لكن لا تسمح له أبدًا بتجاوز 1200px، باستخدام تعبير واحد:
<div class="wrapper">Wrapper</div>استخدام max() للحد الأدنى لحجم الخط
تأكد من ألا يصبح نص المتن صغيرًا جدًا في إطارات العرض الصغيرة:
<p class="text-body">Body text that never gets too small.</p>تداخل min/max/clamp
يمكن تداخل هذه الدوال لإنشاء قيود معقدة:
<div class="element">Padded element</div>دوال المقارنة في Grid
استخدم min() داخل minmax() لوضع حد أدنى أكثر أمانًا للأعمدة:
<div class="grid"><div>Card</div></div>دعم المتصفحات
تحظى دوال المقارنة الثلاث بدعم كامل في المتصفحات الحديثة (Chrome 79+ وFirefox 75+ وSafari 11.1+). ولا حاجة إلى بادئات الشركات المصنّعة.
تحقّق سريعًا
يستخدم عنوان ما font-size: clamp(1rem, 3vw, 2.5rem). عند أي عرض لإطار العرض تساوي 3vw قيمة 1rem، بافتراض أن جذر الصفحة يساوي 16px؟
مراجعة
تختار min() القيمة الأصغر، أي الحد الأعلى. وتختار max() القيمة الأكبر، أي الحد الأدنى. وتحصر clamp(min, preferred, max) قيمةً مرنة. وتدعم هذه الدوال مجتمعةً الطباعة والمسافات المرنة من دون استعلامات الوسائط. وأقوى نمط هو: clamp(1.5rem, 4vw, 3rem) لإنشاء عناوين متجاوبة تلقائيًا.
الأسئلة الشائعة
هل درس «min() وmax() وclamp() للقيم المرنة» مجاني؟
نعم — نص درس «min() وmax() وclamp() للقيم المرنة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.
ماذا ستتعلم في «min() وmax() وclamp() للقيم المرنة»؟
قيّد القيم بين حد أدنى وحد أقصى باستخدام min() وmax() والصيغة المختصرة clamp() تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟
لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «min() وmax() وclamp() للقيم المرنة»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟
نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- calc() للحسابات الديناميكية
- min() وmax() وclamp() للقيم المرنة
- repeat() وminmax() في Grid
- color-mix() وصياغة الألوان النسبية