CSS min() , max() ו-clamp()

במאמר הזה מוסבר איך לשלוט בגודל של רכיבים, לשמור על מרווחים מתאימים ולהטמיע טיפוגרפיה גמישה באמצעות פונקציות CSS נתמכות.

Una Kravets

ככל שהעיצוב הרספונסיבי הופך למורכב יותר, CSS מתפתח כל הזמן כדי לתת ליוצרים יותר שליטה. הפונקציות min(),‏ max() ו-clamp(), שנתמכות עכשיו בכל הדפדפנים המודרניים, הן חלק מהכלים החדשים ביותר שמאפשרים ליצור אתרים ואפליקציות דינמיים ורספונסיביים יותר. אתם יכולים להשתמש בפונקציות האלה כדי לשלוט בגודל של הרכיבים ובשינוי הגודל שלהם, לשמור על המרווחים בין הרכיבים וליצור טיפוגרפיה גמישה וזורמת.

הפונקציות המתמטיות calc(),‏ min(),‏ max() ו-clamp() מאפשרות להשתמש בביטויים מתמטיים עם חיבור (+), חיסור (-), כפל (*) וחילוק (/) כערכי רכיבים

CSS Values And Units Level 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)).

הנה כמה דוגמאות לשימוש בפונקציות האלה.

הרוחב המושלם

לפי הספר The Elements of Typographic Style של רוברט ברינגהרסט, "כל אורך בין 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 Values and Units Level 4
• מאמר של CSS Tricks בנושא רוחב של רכיב פנימי
• סקירה כללית של min()‎,‏ max()‎,‏ clamp()‎ מאת אחמד שאדיד