وثائق CSS قابلة للتشغيل: clamp() في CSS

Q: ماذا تفعل clamp() في CSS؟

تستخدم clamp(MIN, PREFERRED, MAX) القيمة المفضلة ما دامت بين الحدين، وأقرب حد في غير ذلك. تتبع font-size: clamp(1rem, 4vw, 2rem) نسبة 4% من عرض نافذة العرض لكنها لا تنزل أبدًا تحت 1rem ولا ترتفع فوق 2rem.

Q: ماذا يحدث إن كان الحد الأدنى أكبر من الأقصى في clamp()؟

يفوز الحد الأدنى. clamp(3rem, 5vw, 2rem) تساوي دائمًا 3rem، لأن clamp() تطبّق الحد الأدنى بعد الأقصى.

Q: ما الفرق بين min() وmax() في CSS؟

تعيد min() أصغر قيمها، فتعمل كحد أعلى: width: min(100%, 600px) لا يتجاوز عرضها 600px أبدًا. وتعيد max() أكبرها، فتعمل كحد أدنى: font-size: max(1rem, 2vw) لا تصغر أبدًا عن 1rem.

Q: هل clamp() مدعومة في كل المتصفحات؟

نعم، تعمل clamp() وmin() وmax() في كل الإصدارات الحالية من Chrome وEdge وFirefox وSafari، ويمكن استخدامها في أي خاصية تقبل طولًا أو رقمًا أو نسبة مئوية أو زاوية.

ماذا تفعل clamp()

تأخذ clamp(MIN, PREFERRED, MAX) ثلاث قيم وتعيد الوسطى، ما دامت بين الأخريين. الاستخدام الكلاسيكي عنوان يكبر مع الشاشة لكنه يتوقف عند حدود معقولة، من دون استعلام وسائط:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>clamp</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    h1 {
      font-size: clamp(1.5rem, 1rem + 3vw, 3rem);
      margin: 0 0 8px;
      color: #111827;
    }
  </style>
</head>
<body>
  <h1>Fluid heading</h1>
  <p id="out"></p>
  <script>
    const show = () => {
      document.getElementById('out').textContent =
        'Preview width ' + innerWidth + 'px, heading font-size ' + getComputedStyle(document.querySelector('h1')).fontSize;
    };
    addEventListener('resize', show);
    show();
  </script>
</body>
</html>

القيمة المفضلة هي 1rem + 3vw: 16px زائد 3% من العرض. في معاينة بعرض 800px يساوي ذلك 16 + 24 = 40px، وهي بين 24px (1.5rem) و48px (3rem)، فيكون العنوان 40px. على هاتف بعرض 320px تكون القيمة المفضلة 25.6px. وبعد 1067px ستتجاوز 48px، فتتوقف عند 48px. غيّر حجم النافذة لترى الرقم يتغير؛ vw هنا نسبة من عرض إطار المعاينة.

شاهدها من دون تغيير حجم النافذة

تتبع vw نافذة العرض، ولا يسهل تغييرها أثناء القراءة. أما وحدات استعلام الحاوية فتتبع حاوية: cqi تساوي 1% من عرض الحاوية. اسحب المنزلق لتغيير الصندوق، فتستجيب clamp() من النوع نفسه:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>clamp with a slider</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .box { container-type: inline-size; background: #e5e7eb; padding: 12px; margin-top: 10px; box-sizing: border-box; }
    .title { font-size: clamp(1.25rem, 0.5rem + 6cqi, 2.5rem); font-weight: 700; margin: 0; }
  </style>
</head>
<body>
  <label>box width <input id="w" type="range" min="200" max="760" value="480"></label>
  <div class="box" id="box"><p class="title">Resizable title</p></div>
  <p id="out"></p>
  <script>
    const box = document.getElementById('box');
    const title = document.querySelector('.title');
    const update = () => {
      box.style.width = document.getElementById('w').value + 'px';
      const size = parseFloat(getComputedStyle(title).fontSize);
      const note = size <= 20 ? ' (at MIN)' : size >= 40 ? ' (at MAX)' : ' (preferred value)';
      document.getElementById('out').textContent = 'box ' + box.offsetWidth + 'px: font-size ' + size.toFixed(1) + 'px' + note;
    };
    document.getElementById('w').addEventListener('input', update);
    update();
  </script>
</body>
</html>

اسحب إلى البداية فيتوقف العنوان عند 20px (الحد الأدنى MIN). واسحب إلى النهاية فيتوقف عند 40px (الحد الأقصى MAX). وبينهما يتبع 0.5rem + 6cqi. إنها الآلية نفسها في نسخة vw، لكن بمسطرة أصغر.

الوسائط الثلاثة

font-size: clamp(1rem, 0.8rem + 1vw, 1.5rem);
/*               MIN   PREFERRED     MAX    */

الوسيط	الدور	الوحدة المعتادة
MIN	أصغر ما يمكن أن تصل إليه القيمة	`rem`
PREFERRED	القيمة التي تتغير مع الشاشة	`rem + vw` (أو `cqi`)
MAX	أكبر ما يمكن أن تصل إليه القيمة	`rem`

العمليات الحسابية تعمل داخل كل وسيط من دون كتابة calc(): 1rem + 2vw صحيحة كما هي. لكن + و- تحتاجان إلى مسافة على جانبيهما، وإلا يصبح التصريح كله غير صالح.

إن كان MIN أكبر من MAX يفوز MIN: clamp(3rem, 5vw, 2rem) تساوي دائمًا 3rem.

حساب القيمة الوسطى

لتكبير خط من 16px على شاشة بعرض 320px إلى 24px على شاشة بعرض 1280px:

الميل: (24 − 16) ÷ (1280 − 320) = 8 ÷ 960 = 0.00833، أي 0.833vw (لأن vw لكل 100px).
نقطة البداية: 16px − 0.00833 × 320px = 13.33px، أي 0.833rem.
ضع الحدود حولها:

font-size: clamp(1rem, 0.833rem + 0.833vw, 1.5rem);

عند عرض 320px يعطي هذا 13.33 + 2.67 = 16px، وعند 1280px يعطي 13.33 + 10.67 = 24px، وخارج هذا النطاق يبقى عند الحدود. «حاسبات clamp» على الإنترنت تجري هذه العملية الحسابية بالضبط.

min() وmax()

clamp() تركيب من دالتين أبسط:

تعيد min(a, b) القيمة الأصغر، فتضع حدًا أعلى.
تعيد max(a, b) القيمة الأكبر، فتضع حدًا أدنى.
clamp(MIN, VAL, MAX) هي نفسها max(MIN, min(VAL, MAX)).

تبدو الأسماء معكوسة في البداية: لتقول «600px على الأكثر» تستخدم min().

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>min and max</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .card {
      width: min(100%, 420px);          /* full width, but at most 420px */
      padding: max(12px, 3%);           /* at least 12px */
      margin-bottom: 10px;
      background: #2563eb;
      color: white;
      box-sizing: border-box;
    }
    .narrow { width: 260px; }
  </style>
</head>
<body>
  <div class="card" id="a">In the full preview</div>
  <div class="narrow"><div class="card" id="b">In a 260px parent</div></div>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent = ['a', 'b'].map((id) => {
      const el = document.getElementById(id);
      return id + ': width ' + el.offsetWidth + 'px, padding ' + getComputedStyle(el).paddingTop;
    }).join('  |  ');
  </script>
</body>
</html>

في المعاينة العريضة تتوقف البطاقة الأولى عند 420px. وداخل الأب الذي عرضه 260px تكون 100% هي القيمة الأصغر، فيكون عرض البطاقة الثانية 260px. وتعطي max(12px, 3%) البطاقة الأولى 3% من عرض أبيها (body: نحو 23.5px في معاينة بعرض 800px)، والثانية 12px، لأن 3% من 260px (7.8px) أقل من الحد الأدنى.

تحل width: min(100%, 420px) محل الزوج الأقدم width: 100%; max-width: 420px; في تصريح واحد.

أبعد من أحجام الخطوط: المسافات والعروض

تعمل clamp() في أي خاصية تقبل طولًا. النسب المئوية في القيمة الوسطى تجعل المكوّن مرنًا بالنسبة إلى أبيه بدل نافذة العرض:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>clamp spacing</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .parent { background: #e5e7eb; margin-bottom: 10px; }
    .card {
      width: clamp(200px, 80%, 520px);  /* 80% of the parent, within limits */
      padding: clamp(10px, 5%, 32px);   /* % padding is relative to the parent's width */
      box-sizing: border-box;
      background: #16a34a;
      color: white;
    }
  </style>
</head>
<body>
  <div class="parent" style="width: 300px"><div class="card">In a 300px parent</div></div>
  <div class="parent" style="width: 760px"><div class="card">In a 760px parent</div></div>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent = [...document.querySelectorAll('.card')]
      .map((c) => c.offsetWidth + 'px wide, padding ' + getComputedStyle(c).paddingTop).join('  |  ');
  </script>
</body>
</html>

في الأب الذي عرضه 300px يكون عرض البطاقة 240px (80%) مع حشو 15px (5% من 300px). وفي الأب الذي عرضه 760px ستكون 80% مساوية 608px، فتتوقف البطاقة عند حدها الأقصى 520px، و5% من 760px تساوي 38px، فيتوقف الحشو عند 32px.

سهولة الوصول: أبقِ rem في القيمة الوسطى

حجم الخط المصنوع من vw وحدها، مثل font-size: 5vw، لا يكبر حين يرفع القارئ حجم الخط الافتراضي في إعدادات المتصفح، ولا يكبر مع تكبير المتصفح أيضًا، لأن التكبير يجعل نافذة العرض أضيق بوحدات بكسل CSS. إضافة جزء بـ rem (1rem + 2vw) وحدود بـ rem تبقي النص مرتبطًا بإعداد القارئ. تشرح صفحة الوحدات الوحدتين rem وvw بالتفصيل.

أخطاء شائعة

استخدام min() لحد أدنى. تختار min() القيمة الأصغر، وهذا حد أعلى. لمعنى «12px على الأقل» استخدم max(12px, ...).
لا مسافات حول + أو -. clamp(1rem, 1rem+2vw, 3rem) غير صالحة، فتعود الخاصية إلى قيمتها السابقة.
vw وحدها في الوسط. عندها يتجاهل النص إعداد حجم الخط لدى القارئ. أضف جزءًا بـ rem.
MIN أكبر من MAX. النتيجة دائمًا MIN، ونادرًا ما يكون هذا المقصود.
حدود بـ px لأحجام الخطوط. تحد النص حتى للقراء الذين يحتاجونه أكبر. استخدم rem.

الأسئلة الشائعة

ماذا تفعل clamp() في CSS؟

تستخدم clamp(MIN, PREFERRED, MAX) القيمة المفضلة ما دامت بين الحدين، وأقرب حد في غير ذلك. تتبع font-size: clamp(1rem, 4vw, 2rem) نسبة 4% من عرض نافذة العرض لكنها لا تنزل أبدًا تحت 1rem ولا ترتفع فوق 2rem.

كيف أصنع حجم خط متجاوبًا باستخدام clamp؟

ضع قيمة مبنية على نافذة العرض في الوسط وحدودًا ثابتة على الجانبين، وأدخل rem في القيمة الوسطى كي يبقى النص تابعًا لإعداد حجم الخط لدى القارئ: font-size: clamp(1.5rem, 1rem + 2vw, 3rem);.

ماذا يحدث إن كان الحد الأدنى أكبر من الأقصى في clamp()؟

يفوز الحد الأدنى. clamp(3rem, 5vw, 2rem) تساوي دائمًا 3rem، لأن clamp() تطبّق الحد الأدنى بعد الأقصى.

ما الفرق بين min() وmax() في CSS؟

تعيد min() أصغر قيمها، فتعمل كحد أعلى: width: min(100%, 600px) لا يتجاوز عرضها 600px أبدًا. وتعيد max() أكبرها، فتعمل كحد أدنى: font-size: max(1rem, 2vw) لا تصغر أبدًا عن 1rem.

هل clamp() مدعومة في كل المتصفحات؟

نعم، تعمل clamp() وmin() وmax() في كل الإصدارات الحالية من Chrome وEdge وFirefox وSafari، ويمكن استخدامها في أي خاصية تقبل طولًا أو رقمًا أو نسبة مئوية أو زاوية.

مفاهيم ذات صلة