תיעוד CSS עם דוגמאות להרצה: clamp()

Q: מה clamp() עושה ב-CSS?

clamp(MIN, PREFERRED, MAX) משתמש בערך המועדף כל עוד הוא נשאר בין שני הגבולות, ובגבול הקרוב ביותר אחרת. font-size: clamp(1rem, 4vw, 2rem) עוקב אחרי 4% מרוחב ה-viewport, אבל אף פעם לא יורד מתחת ל-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) מקבל שלושה ערכים ומחזיר את האמצעי, כל עוד הוא נשאר בין שני האחרים. השימוש הקלאסי הוא כותרת שגדלה עם המסך אבל נעצרת בגבולות הגיוניים, בלי media query:

<!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 עוקב אחרי ה-viewport, שקשה לשנות בזמן קריאה. יחידות של container query עוקבות אחרי מכל במקום: 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() עובד בכל מאפיין שמקבל אורך. אחוזים בערך האמצעי הופכים רכיב לגמיש ביחס להורה שלו במקום ל-viewport:

<!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 של padding (5% מ-300px). בהורה של 760px, 80% היה 608px, ולכן הכרטיס נעצר במקסימום של 520px, ו-5% מ-760px הם 38px, ולכן ה-padding נעצר ב-32px.

נגישות: השאירו rem בערך האמצעי

גודל גופן שבנוי רק מ-vw, כמו font-size: 5vw, לא גדל כשהקורא מגדיל את גודל הגופן ברירת המחדל בהגדרות הדפדפן, והוא גם לא גדל עם זום בדפדפן, כי זום הופך את ה-viewport לצר יותר בפיקסלים של 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% מרוחב ה-viewport, אבל אף פעם לא יורד מתחת ל-1rem או עולה מעל 2rem.

איך יוצרים גודל גופן רספונסיבי עם clamp?

שמים ערך שמבוסס על ה-viewport באמצע וגבולות קבועים בצדדים, ומשלבים 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, ואפשר להשתמש בהם בכל מאפיין שמקבל אורך, מספר, אחוז או זווית.

מושגים קשורים