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

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

Una Kravets

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

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

ערכים ויחידות של CSS ברמה 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)).

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

הרוחב המושלם

לפי המרכיבים של סגנון הטיפוגרפי מאת רוברט ברינגהרסט, "כל דבר בין 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, שבהם הקורא 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
• מפרט ברמה 4 של יחידות וערכים ב-CSS
• מאמר בנושא CSS Tricks בנושא רוחב רכיב פנימי
• סקירה כללית על הפונקציות min(),‏ max() ו-clamp() מאת Ahmad Shadeed

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