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

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

Una Kravets

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

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

ערכים ויחידות של CSS ברמה 4

תמיכה בדפדפנים

min()

תמיכה בדפדפן

• 79
• 79
• 75
• 11.1

מקור

max()

תמיכה בדפדפן

• 79
• 79
• 75
• 11.1

מקור

clamp()

תמיכה בדפדפנים

• 79
• 79
• 75
• 13.1

מקור

שימוש

אפשר להשתמש ב-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).

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

הרוחב המושלם

לפי המרכיבים של סגנון הטיפוגרפי מאת רוברט ברינגהרסט, "כל דבר בין 45 ל-75 תווים נחשב כאורך שורה משביע על דף עמודה יחידה המוגדר לפניות טקסט סרוקות בגודל טקסט".

כדי לוודא שרוחב קטעי הטקסט יהיה בין 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, שבהם הקורא 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);
}

מגדירים מרווח פנימי מינימלי לרכיב באמצעות הפונקציה 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() מאת Ahmad Shadeed

תמונת שער מ-@yer_a_wizard ב-Unbounce.